@fastkit/vui 0.6.31 → 0.6.32

package/dist/vui.cjs.js

@@ -841,9 +841,9 @@ const VListTile = vue.defineComponent({
       return icon;
     });
     const endIcon = vue.computed(() => resolveRawIconProp(false, props.endIcon));
-    const hasTo = vue.computed(() => !!props.to);
+    const hasTo = vue.computed(() => !!ctx.attrs.to);
     const link = vueRouter.useLink({
-      to: props.to || ''
+      to: ctx.attrs.to || ''
     });
     const isActive = vue.computed(() => {
       if (!hasTo.value) return false;
@@ -965,7 +965,11 @@ function _isSlot$a(s) {
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String
+    match: String // key: {
+    //   type: [String, Number],
+    //   required: true,
+    // },
+
   };
 }
 function resolveNavigationItemInput(input) {
@@ -1010,7 +1014,7 @@ const VNavigationItem = vue.defineComponent({
       const c = props.children;
       return c && c.length ? c : undefined;
     });
-    const to = vue.computed(() => props.to);
+    const to = vue.computed(() => ctx.attrs.to);
     const match = vue.computed(() => {
       const {
         match,
@@ -1085,6 +1089,7 @@ const VNavigationItem = vue.defineComponent({
     });
 
     function open() {
+      if (!children.value) return;
       opened.value = true;
     }
 
@@ -1098,9 +1103,13 @@ const VNavigationItem = vue.defineComponent({
 
     const onClick = ev => {
       if (!to.value) {
-        toggle();
-      } // ctx.emit('click', ev);
+        return toggle();
+      }
 
+      open(); // if (!to.value) {
+      //   toggle();
+      // }
+      // ctx.emit('click', ev);
     };
 
     const onChangeActive = isActive => {
@@ -1122,6 +1131,9 @@ const VNavigationItem = vue.defineComponent({
       ctx.emit('changeActive', isActive);
     };
 
+    ctx.expose({
+      close
+    });
     return () => {
       let _slot;
 
@@ -1173,6 +1185,28 @@ const VNavigation = vue.defineComponent({
       const c = props.caption;
       return typeof c === 'function' ? c() : c;
     });
+    const itemsRef = vue.ref([]);
+    vue.onBeforeUpdate(() => {
+      itemsRef.value = [];
+    });
+
+    function setItemRef(item, itemRef) {
+      itemsRef.value.push({
+        key: item.key,
+        ref: itemRef
+      });
+    }
+
+    function onItemActivated(item) {
+      itemsRef.value.forEach(({
+        key,
+        ref
+      }) => {
+        if (key === item.key) return;
+        ref.close();
+      });
+    }
+
     return () => {
       const $caption = caption.value;
       return vue.createVNode("nav", {
@@ -1181,7 +1215,17 @@ const VNavigation = vue.defineComponent({
         "class": "v-navigation__caption"
       }, [$caption]), items.value.map(item => renderNavigationItemInput(item, {
         class: 'v-navigation__item',
-        startIconEmptySpace: startIconEmptySpace.value
+        startIconEmptySpace: startIconEmptySpace.value,
+        ref: ref => {
+          setItemRef(item, ref);
+        },
+        onChangeActive: isActive => {
+          if (isActive
+          /* && item.children && item.children.length*/
+          ) {
+            onItemActivated(item);
+          }
+        }
       }))]);
     };
   }

package/dist/vui.cjs.prod.js

@@ -841,9 +841,9 @@ const VListTile = vue.defineComponent({
       return icon;
     });
     const endIcon = vue.computed(() => resolveRawIconProp(false, props.endIcon));
-    const hasTo = vue.computed(() => !!props.to);
+    const hasTo = vue.computed(() => !!ctx.attrs.to);
     const link = vueRouter.useLink({
-      to: props.to || ''
+      to: ctx.attrs.to || ''
     });
     const isActive = vue.computed(() => {
       if (!hasTo.value) return false;
@@ -965,7 +965,11 @@ function _isSlot$a(s) {
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String
+    match: String // key: {
+    //   type: [String, Number],
+    //   required: true,
+    // },
+
   };
 }
 function resolveNavigationItemInput(input) {
@@ -1010,7 +1014,7 @@ const VNavigationItem = vue.defineComponent({
       const c = props.children;
       return c && c.length ? c : undefined;
     });
-    const to = vue.computed(() => props.to);
+    const to = vue.computed(() => ctx.attrs.to);
     const match = vue.computed(() => {
       const {
         match,
@@ -1085,6 +1089,7 @@ const VNavigationItem = vue.defineComponent({
     });
 
     function open() {
+      if (!children.value) return;
       opened.value = true;
     }
 
@@ -1098,9 +1103,13 @@ const VNavigationItem = vue.defineComponent({
 
     const onClick = ev => {
       if (!to.value) {
-        toggle();
-      } // ctx.emit('click', ev);
+        return toggle();
+      }
 
+      open(); // if (!to.value) {
+      //   toggle();
+      // }
+      // ctx.emit('click', ev);
     };
 
     const onChangeActive = isActive => {
@@ -1122,6 +1131,9 @@ const VNavigationItem = vue.defineComponent({
       ctx.emit('changeActive', isActive);
     };
 
+    ctx.expose({
+      close
+    });
     return () => {
       let _slot;
 
@@ -1173,6 +1185,28 @@ const VNavigation = vue.defineComponent({
       const c = props.caption;
       return typeof c === 'function' ? c() : c;
     });
+    const itemsRef = vue.ref([]);
+    vue.onBeforeUpdate(() => {
+      itemsRef.value = [];
+    });
+
+    function setItemRef(item, itemRef) {
+      itemsRef.value.push({
+        key: item.key,
+        ref: itemRef
+      });
+    }
+
+    function onItemActivated(item) {
+      itemsRef.value.forEach(({
+        key,
+        ref
+      }) => {
+        if (key === item.key) return;
+        ref.close();
+      });
+    }
+
     return () => {
       const $caption = caption.value;
       return vue.createVNode("nav", {
@@ -1181,7 +1215,17 @@ const VNavigation = vue.defineComponent({
         "class": "v-navigation__caption"
       }, [$caption]), items.value.map(item => renderNavigationItemInput(item, {
         class: 'v-navigation__item',
-        startIconEmptySpace: startIconEmptySpace.value
+        startIconEmptySpace: startIconEmptySpace.value,
+        ref: ref => {
+          setItemRef(item, ref);
+        },
+        onChangeActive: isActive => {
+          if (isActive
+          /* && item.children && item.children.length*/
+          ) {
+            onItemActivated(item);
+          }
+        }
       }))]);
     };
   }

package/dist/vui.esm-bundler.js

@@ -3,7 +3,7 @@ export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar } from '@fastkit/vue-kit';
 import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
 import { createPropsOptions as createPropsOptions$1, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableInheritProps, VLink, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
-import { inject, computed, provide, defineComponent, createVNode, mergeProps, ref, watch, withDirectives, createTextVNode, isVNode, Fragment, vShow, vModelSelect, onMounted, onBeforeUnmount, onBeforeUpdate, Transition } from 'vue';
+import { inject, computed, provide, defineComponent, createVNode, mergeProps, ref, watch, withDirectives, createTextVNode, isVNode, Fragment, vShow, onBeforeUpdate, vModelSelect, onMounted, onBeforeUnmount, Transition } from 'vue';
 import { useScopeColorClass, colorSchemeProps, useColorClasses, toScopeColorClass } from '@fastkit/vue-color-scheme';
 import { VProgressCircular } from '@fastkit/vue-loading';
 export * from '@fastkit/vue-loading';
@@ -840,9 +840,9 @@ const VListTile = defineComponent({
       return icon;
     });
     const endIcon = computed(() => resolveRawIconProp(false, props.endIcon));
-    const hasTo = computed(() => !!props.to);
+    const hasTo = computed(() => !!ctx.attrs.to);
     const link = useLink({
-      to: props.to || ''
+      to: ctx.attrs.to || ''
     });
     const isActive = computed(() => {
       if (!hasTo.value) return false;
@@ -964,7 +964,11 @@ function _isSlot$a(s) {
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String
+    match: String // key: {
+    //   type: [String, Number],
+    //   required: true,
+    // },
+
   };
 }
 function resolveNavigationItemInput(input) {
@@ -1009,7 +1013,7 @@ const VNavigationItem = defineComponent({
       const c = props.children;
       return c && c.length ? c : undefined;
     });
-    const to = computed(() => props.to);
+    const to = computed(() => ctx.attrs.to);
     const match = computed(() => {
       const {
         match,
@@ -1084,6 +1088,7 @@ const VNavigationItem = defineComponent({
     });
 
     function open() {
+      if (!children.value) return;
       opened.value = true;
     }
 
@@ -1097,9 +1102,13 @@ const VNavigationItem = defineComponent({
 
     const onClick = ev => {
       if (!to.value) {
-        toggle();
-      } // ctx.emit('click', ev);
+        return toggle();
+      }
 
+      open(); // if (!to.value) {
+      //   toggle();
+      // }
+      // ctx.emit('click', ev);
     };
 
     const onChangeActive = isActive => {
@@ -1121,6 +1130,9 @@ const VNavigationItem = defineComponent({
       ctx.emit('changeActive', isActive);
     };
 
+    ctx.expose({
+      close
+    });
     return () => {
       let _slot;
 
@@ -1172,6 +1184,28 @@ const VNavigation = defineComponent({
       const c = props.caption;
       return typeof c === 'function' ? c() : c;
     });
+    const itemsRef = ref([]);
+    onBeforeUpdate(() => {
+      itemsRef.value = [];
+    });
+
+    function setItemRef(item, itemRef) {
+      itemsRef.value.push({
+        key: item.key,
+        ref: itemRef
+      });
+    }
+
+    function onItemActivated(item) {
+      itemsRef.value.forEach(({
+        key,
+        ref
+      }) => {
+        if (key === item.key) return;
+        ref.close();
+      });
+    }
+
     return () => {
       const $caption = caption.value;
       return createVNode("nav", {
@@ -1180,7 +1214,17 @@ const VNavigation = defineComponent({
         "class": "v-navigation__caption"
       }, [$caption]), items.value.map(item => renderNavigationItemInput(item, {
         class: 'v-navigation__item',
-        startIconEmptySpace: startIconEmptySpace.value
+        startIconEmptySpace: startIconEmptySpace.value,
+        ref: ref => {
+          setItemRef(item, ref);
+        },
+        onChangeActive: isActive => {
+          if (isActive
+          /* && item.children && item.children.length*/
+          ) {
+            onItemActivated(item);
+          }
+        }
       }))]);
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.6.31",
+  "version": "0.6.32",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -31,11 +31,11 @@
     "vue": "^3.2.23"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.6.31",
-    "@fastkit/icon-font": "0.6.31",
-    "@fastkit/tiny-logger": "0.6.31",
-    "@fastkit/vite-kit": "0.6.31",
-    "@fastkit/vue-kit": "0.6.31",
+    "@fastkit/color-scheme": "0.6.32",
+    "@fastkit/icon-font": "0.6.32",
+    "@fastkit/tiny-logger": "0.6.32",
+    "@fastkit/vite-kit": "0.6.32",
+    "@fastkit/vue-kit": "0.6.32",
     "eta": "^1.12.3",
     "fs-extra": "^9.1.0"
   }