refactor(CSidebar): update proptypes and nested navigation behavior

mrholek · mrholek · commit 351bfc55ec02 · 2021-08-08T22:32:11.000+02:00
diff --git a/src/components/sidebar/CCreateNavItem.ts b/src/components/sidebar/CCreateNavItem.ts
diff --git a/src/components/sidebar/CSidebar.ts b/src/components/sidebar/CSidebar.ts
@@ -1,82 +1,89 @@
-import { defineComponent, h } from "vue"
+import { defineComponent, h } from 'vue'
 
-
-const CSidebarProps = {
-     /**
-     * A string of all className you want applied to the base component.
+const CSidebar = defineComponent({
+  name: 'CSidebar',
+  props: {
+    /**
+     * Hide sidebar.
+     */
+    hide: Boolean,
+    /**
+     * Make sidebar narrow.
      */
-      className: {
-        type: String,
-        required: false
-    },
-    // hide?: boolean
     narrow: {
-        type: Boolean,
-        required: false
+      type: Boolean,
+      required: false,
     },
     /**
-        * Method called before the hide animation has started.
-        */
-    //onHide?: () => void,
-    /**
-        * Method called before the show animation has started.
-        */
-    //onShow?: () => void,
-
+     * Set sidebar to overlaid variant.
+     */
     overlaid: {
-        type: String,
-        required: false
+      type: Boolean,
+      required: false,
     },
+    /**
+     * Place sidebar in non-static positions.
+     */
     position: {
-        type: String,
-        validator: function(value:string) {
-            return ['fixed','sticky'].includes(value)
-        }
+      type: String,
+      default: undefined,
+      validator: (value: string) => {
+        return ['fixed'].includes(value)
+      },
     },
+    /**
+     * Make any sidebar self hiding across all viewports or pick a maximum breakpoint with which to have a self hiding up to.
+     *
+     * @values 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'
+     */
     selfHiding: {
-        validator: function(value:any) {
-            if(typeof value === 'string'){
-                return ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(value)
-            }else if( typeof value === 'boolean' ){
-                return true
-            }else{
-                return false
-            }
-        }   
-    },
-    show: {
-        type: String,
-        required: false
+      type: [Boolean, String],
+      default: undefined,
+      validator: (value: boolean | string) => {
+        if (typeof value === 'string') {
+          return ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(value)
+        } else if (typeof value === 'boolean') {
+          return true
+        } else {
+          return false
+        }
+      },
     },
+    /**
+     * Expand narrowed sidebar on hover.
+     */
     unfoldable: {
-        type: String,
-        required: false
-    }    
-}
-
-const CSidebar = defineComponent({
-  name: 'CSidebar',
-  props: CSidebarProps,
-    setup ( props, { slots }) {
-      return () =>  h(
-        'div', 
-        { 
-            class: [
-                'sidebar',
-                {
-                  'sidebar-narrow': props.narrow,
-                  'sidebar-overlaid': props.overlaid,
-                  [`sidebar-${props.position}`]: props.position,
-                  [`sidebar-self-hiding${typeof props.selfHiding !== 'boolean' && '-' + props.selfHiding}`]: props.selfHiding,
-                  'sidebar-narrow-unfoldable': props.unfoldable,
-                  'show': props.show,
-                },
-                props.className,
-            ],
+      type: String,
+      default: undefined,
+      required: false,
+    },
+    /**
+     * Toggle the visibility of sidebar component.
+     */
+    visible: Boolean,
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        'div',
+        {
+          class: [
+            'sidebar',
+            {
+              'sidebar-narrow': props.narrow,
+              'sidebar-overlaid': props.overlaid,
+              [`sidebar-${props.position}`]: props.position,
+              [`sidebar-self-hiding${
+                typeof props.selfHiding !== 'boolean' && '-' + props.selfHiding
+              }`]: props.selfHiding,
+              'sidebar-narrow-unfoldable': props.unfoldable,
+              show: props.visible,
+            },
+          ],
         },
-        slots.default && slots.default()
+        slots.default && slots.default(),
       )
-    }
+  },
 })
 
-export { CSidebar }
+export { CSidebar }
diff --git a/src/components/sidebar/CSidebarBrand.ts b/src/components/sidebar/CSidebarBrand.ts
@@ -1,25 +1,10 @@
-import { defineComponent, h } from "vue"
-
-const CSidebarBrandProps = {
-     /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: String,
-        required: false
-    } 
-}
+import { defineComponent, h } from 'vue'
 
 const CSidebarBrand = defineComponent({
   name: 'CSidebarBrand',
-  props: CSidebarBrandProps,
-    setup ( props, { slots }) {
-      return () =>  h(
-        'div', 
-        { class: ['sidebar-brand', props.className] },
-        slots.default && slots.default()
-      )
-    }
+  setup(_, { slots }) {
+    return () => h('div', { class: 'sidebar-brand' }, slots.default && slots.default())
+  },
 })
 
-export { CSidebarBrand }
+export { CSidebarBrand }
diff --git a/src/components/sidebar/CSidebarFooter.ts b/src/components/sidebar/CSidebarFooter.ts
@@ -1,25 +1,10 @@
-import { defineComponent, h } from "vue"
-
-const CSidebarFooterProps = {
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: String,
-        required: false
-    } 
-}
+import { defineComponent, h } from 'vue'
 
 const CSidebarFooter = defineComponent({
   name: 'CSidebarFooter',
-  props: CSidebarFooterProps,
-    setup ( props, { slots }) {
-      return () =>  h(
-        'div', 
-        { class: ['sidebar-footer', props.className] },
-        slots.default && slots.default()
-      )
-    }
+  setup(_, { slots }) {
+    return () => h('div', { class: 'sidebar-footer' }, slots.default && slots.default())
+  },
 })
 
-export { CSidebarFooter }
+export { CSidebarFooter }
diff --git a/src/components/sidebar/CSidebarHeader.ts b/src/components/sidebar/CSidebarHeader.ts
@@ -1,25 +1,10 @@
-import { defineComponent, h } from "vue"
-
-const CSidebarHeaderProps = {
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: String,
-        required: false
-    }
-}
+import { defineComponent, h } from 'vue'
 
 const CSidebarHeader = defineComponent({
   name: 'CSidebarHeader',
-  props: CSidebarHeaderProps,
-    setup ( props, { slots }) {
-      return () =>  h(
-        'div', 
-        { class: ['sidebar-header', props.className] },
-        slots.default && slots.default()
-      )
-    }
+  setup(_, { slots }) {
+    return () => h('div', { class: 'sidebar-header' }, slots.default && slots.default())
+  },
 })
 
-export { CSidebarHeader }
+export { CSidebarHeader }
diff --git a/src/components/sidebar/CSidebarNav.ts b/src/components/sidebar/CSidebarNav.ts
@@ -1,27 +1,37 @@
-import { defineComponent, h } from "vue"
-
-const CSidebarNavProps = {
-    /**
-     * A string of all className you want applied to the base component.
-     */
-     className: {
-      type: String,
-      required: false
-  }
-}
+import { defineComponent, h, ref } from 'vue'
 
 const CSidebarNav = defineComponent({
   name: 'CSidebarNav',
-  props: CSidebarNavProps,
-    setup ( props, { slots }) { 
-      return () =>  h(
-        'ul', 
-        { 
-          class: ['sidebar-nav', props.className],
+  setup(_, { slots }) {
+    const visibleGroup = ref()
+
+    const handleVisibleChange = (visible: boolean, index: number) => {
+      if (visible) {
+        visibleGroup.value = index
+      } else {
+        if (visibleGroup.value === index) {
+          visibleGroup.value = 0
+        }
+      }
+    }
+
+    const isVisible = (index: number) => Boolean(visibleGroup.value === index)
+
+    return () =>
+      h(
+        'ul',
+        {
+          class: 'sidebar-nav',
         },
-        slots.default && slots.default()
+        slots.default &&
+          slots.default().map((vnode, index) =>
+            h(vnode, {
+              onVisibleChange: (visible: boolean) => handleVisibleChange(visible, index),
+              visible: isVisible(index),
+            }),
+          ),
       )
-    }
+  },
 })
 
-export { CSidebarNav }
+export { CSidebarNav }
diff --git a/src/components/sidebar/CSidebarToggler.ts b/src/components/sidebar/CSidebarToggler.ts
@@ -1,25 +1,10 @@
-import { defineComponent, h } from "vue"
-
-const CSidebarTogglerProps = {
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: String,
-        required: false
-    }  
-}
+import { defineComponent, h } from 'vue'
 
 const CSidebarToggler = defineComponent({
   name: 'CSidebarToggler',
-  props: CSidebarTogglerProps,
-    setup ( props, { slots }) {  
-      return () =>  h(
-        'button', 
-        { class: ['sidebar-toggler', props.className] },
-        slots.default && slots.default()
-      )
-    }
+  setup(_, { slots }) {
+    return () => h('button', { class: 'sidebar-toggler' }, slots.default && slots.default())
+  },
 })
 
-export { CSidebarToggler }
+export { CSidebarToggler }
diff --git a/src/components/sidebar/index.ts b/src/components/sidebar/index.ts
@@ -1,5 +1,4 @@
 import { App } from 'vue'
-import { CCreateNavItem } from './CCreateNavItem'
 import { CSidebar } from './CSidebar'
 import { CSidebarBrand } from './CSidebarBrand'
 import { CSidebarFooter } from './CSidebarFooter'
@@ -9,7 +8,6 @@ import { CSidebarToggler } from './CSidebarToggler'
 
 const CSidebarPlugin = {
   install: (app: App): void => {
-    app.component(CCreateNavItem.name, CCreateNavItem)
     app.component(CSidebar.name, CSidebar)
     app.component(CSidebarBrand.name, CSidebarBrand)
     app.component(CSidebarFooter.name, CSidebarFooter)
@@ -21,7 +19,6 @@ const CSidebarPlugin = {
 
 export {
   CSidebarPlugin,
-  CCreateNavItem,
   CSidebar,
   CSidebarBrand,
   CSidebarFooter,
diff --git a/src/components/sidebar/nav.ts b/src/components/sidebar/nav.ts
