Kanban board

packages/demo/src/App.vue

@@ -104,6 +104,7 @@
           <of-list-item to="/tabs">Tabs</of-list-item>
           <of-list-item to="/popups">Popups and Dialogs</of-list-item>
           <of-list-item to="/badges">Badges</of-list-item>
+          <of-list-item to="/kanban">Kanban Board</of-list-item>
         </of-nav-group>
       </of-sidebar>
       <main class="app-main">
@@ -126,7 +127,7 @@ import {
   nextTick,
   onErrorCaptured,
   ref,
-  watch,
+  watch
 } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -162,7 +163,7 @@ export default defineComponent({
       set(val: boolean) {
         ;(isMobile.value ? sidebarMobileActive : sidebarDesktopActive).value =
           val
-      },
+      }
     })
     watch(baseFontSize, (size) => {
       nextTick(() => {
@@ -206,7 +207,7 @@ export default defineComponent({
     const tintParams = computed(() =>
       tints.map((t) => ({
         name: t,
-        icon: t == tint.value ? 'accept circle' : 'radio checked',
+        icon: t == tint.value ? 'accept circle' : 'radio checked'
       }))
     )
     return {
@@ -219,9 +220,9 @@ export default defineComponent({
       toggleSidebar,
       dark,
       tint,
-      tintParams,
+      tintParams
     }
-  },
+  }
 })
 </script>
 

packages/demo/src/components/Buttons.vue

@@ -88,7 +88,7 @@
             class="of-buttonset"
             :class="{
               'of-buttonset--rounded': params.rounded,
-              'of--elevated': variant == 'elevated',
+              'of--elevated': variant == 'elevated'
             }"
           >
             <of-button v-bind="params" :variant="variant" icon="accept"
@@ -118,7 +118,7 @@
             class="of-buttonset"
             :class="{
               'of-buttonset--rounded': params.rounded,
-              'of--elevated': variant == 'elevated',
+              'of--elevated': variant == 'elevated'
             }"
           >
             <of-button v-bind="params" :variant="variant">1</of-button>
@@ -175,9 +175,9 @@ export default defineComponent({
       {
         text: 'Option 1',
         value: selectMenu1,
-        attrs: { 'data-test': 'my-btn' },
+        attrs: { 'data-test': 'my-btn' }
       },
-      { text: 'Option 2', value: selectMenu2 },
+      { text: 'Option 2', value: selectMenu2 }
     ]
 
     const densityOptions = ['default', '0', '1', '2', '3']
@@ -187,7 +187,7 @@ export default defineComponent({
       density: 'default',
       rounded: false,
       tint: 'default',
-      scale: 'nm',
+      scale: 'nm'
     })
     return {
       sampleCode,
@@ -197,9 +197,9 @@ export default defineComponent({
       scaleOptions,
       params,
       menuClick,
-      variants,
+      variants
     }
-  },
+  }
 })
 </script>
 

packages/demo/src/components/Icons.vue

@@ -56,7 +56,7 @@ export default defineComponent({
           'more alt': 'more alt',
           'theme settings': 'theme settings',
           'theme light': 'light mode',
-          'theme dark': 'dark mode',
+          'theme dark': 'dark mode'
         },
         {
           required: 'required',
@@ -72,39 +72,39 @@ export default defineComponent({
           search: 'search',
           date: 'date',
           time: 'time',
-          hourglass: 'hourglass',
+          hourglass: 'hourglass'
         },
         {
           checkbox: 'checkbox off',
           'checkbox checked': 'checkbox on',
           radio: 'radio off',
           'radio checked': 'radio on',
           star: 'star off',
-          'star checked': 'star on',
+          'star checked': 'star on'
         },
         {
           'arrow up': 'up arrow',
           'arrow down': 'down arrow',
           'arrow left': 'left arrow',
-          'arrow right': 'right arrow',
+          'arrow right': 'right arrow'
         },
         {
           'page first': 'page first',
           'page previous': 'page previous',
           'page next': 'page next',
-          'page last': 'page last',
+          'page last': 'page last'
         },
         {
           'bullet up': 'bullet up',
           'bullet down': 'bullet down',
           'bullet left': 'bullet left',
-          'bullet right': 'bullet right',
+          'bullet right': 'bullet right'
         },
         {
           'expand up': 'expand up',
           'expand down': 'expand down',
           'expand open': 'expand',
-          'expand close': 'expand close',
+          'expand close': 'expand close'
         },
         {
           // ellipsis circle
@@ -115,7 +115,7 @@ export default defineComponent({
           'error circle': 'error circle',
           'plus circle': 'plus circle',
           'minus circle': 'minus circle',
-          'help circle': 'help circle',
+          'help circle': 'help circle'
           // split circle
           // refresh circle
         },
@@ -126,11 +126,11 @@ export default defineComponent({
           'led yellow': 'yellow led',
           'led violet': 'violet led',
           'led blue': 'blue led',
-          'led orange': 'orange led',
-        },
-      ],
+          'led orange': 'orange led'
+        }
+      ]
     }
-  },
+  }
 })
 </script>