@fastkit/vui 0.8.17 → 0.9.0

package/dist/vui.mjs

@@ -1,8 +1,8 @@
-import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, VTooltip, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, resolveVNodeChildOrSlots, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, useParentFormNode, useKeybord, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin, onAppUnmount } from '@fastkit/vue-kit';
+import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, VTooltip, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, resolveVNodeChildOrSlots, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, useParentFormNode, useKeyboard, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin, onAppUnmount } from '@fastkit/vue-kit';
 export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar, VTooltip } from '@fastkit/vue-kit';
 import { inject, computed, provide, createVNode, mergeProps, defineComponent, Fragment, isVNode, ref, watch, onMounted, onBeforeUnmount, cloneVNode, withDirectives, createTextVNode, vShow, onBeforeUpdate, vModelSelect, nextTick, Transition, reactive } from 'vue';
-import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
+import { useRouter, RouterLink, useRoute, useLink } from 'vue-router';
 import { createPropsOptions as createPropsOptions$1, renderSlotOrEmpty as renderSlotOrEmpty$1, defineSlotsProps as defineSlotsProps$1, htmlAttributesPropOptions, navigationableInheritProps, useNavigationable, VLink, isFragment, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
 import { getDocumentScroller as getDocumentScroller$1 } from '@fastkit/vue-scroller';
 import { VProgressCircular } from '@fastkit/vue-loading';
@@ -522,7 +522,7 @@ const VBusyImage = defineComponent({
   },
 
   setup(props, ctx) {
-    const loadStateRef = ref(props.cover && isAvairableSrc(ctx.attrs.src) ? 'loading' : 'pending');
+    const loadStateRef = ref(props.cover && isAvailableSrc(ctx.attrs.src) ? 'loading' : 'pending');
     const attrsRef = computed(() => splitAttrs(ctx.attrs));
     const isPendingRef = computed(() => loadStateRef.value === 'pending');
     const isLoadingRef = computed(() => loadStateRef.value === 'loading');
@@ -592,7 +592,7 @@ const VBusyImage = defineComponent({
     watch(() => ctx.attrs.src, value => {
       coverImageRef.value = undefined;
 
-      if (isAvairableSrc(value)) {
+      if (isAvailableSrc(value)) {
         loadStateRef.value = 'loading';
 
         if (props.cover) {
@@ -684,7 +684,7 @@ function imageIsReady(image) {
   return image.naturalWidth + image.naturalHeight > 0 ? 'load' : 'error';
 }
 
-function isAvairableSrc(src) {
+function isAvailableSrc(src) {
   return typeof src === 'string' && src !== '';
 }
 
@@ -1137,6 +1137,8 @@ const VCardActions = defineComponent({
 
 });
 
+const BUTTON_ALIGNS = ['left', 'center', 'right'];
+
 function resolveRawVButtonIcon(raw, type = 'main') {
   if (!raw) return;
   return typeof raw === 'function' ? raw : () => createVNode(VIcon, {
@@ -1153,6 +1155,10 @@ const vueButtonProps = createPropsOptions$1({ ...htmlAttributesPropOptions,
   icon: [String, Function],
   startIcon: [String, Function],
   endIcon: [String, Function],
+  align: {
+    type: String,
+    default: 'center'
+  },
   ...createControlProps()
 });
 const LOADING_SIZE_MAP = {
@@ -1200,7 +1206,7 @@ const VButton = defineComponent({
       return _spacer === true ? 'left' : _spacer;
     });
     const classes = computed(() => [color.colorClasses.value, // navigationable.value.classes,
-    spacer.value ? `v-button--spacer-${spacer.value}` : undefined, `v-button--${control.size.value}`, {
+    spacer.value ? `v-button--spacer-${spacer.value}` : undefined, `v-button--${control.size.value}`, `v-button--align-${props.align}`, {
       'v-button--loading': isLoading.value,
       'v-button--icon': !!icon.value,
       'v-button--rounded': props.rounded,
@@ -1611,6 +1617,7 @@ const VListTile = defineComponent({
   },
 
   setup(props, ctx) {
+    const vui = useVui();
     const startIcon = computed(() => {
       let icon = resolveRawIconProp(false, props.startIcon);
 
@@ -1622,7 +1629,7 @@ const VListTile = defineComponent({
     });
     const endIcon = computed(() => resolveRawIconProp(false, props.endIcon));
     const hasTo = computed(() => !!ctx.attrs.to);
-    const link = useLink({
+    const link = vui.useLink({
       to: ctx.attrs.to || ''
     });
     const isActive = computed(() => {
@@ -1750,7 +1757,7 @@ function _isSlot$c(s) {
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String,
+    match: [String, Array],
     depth: {
       type: Number,
       default: 0
@@ -1789,6 +1796,12 @@ function renderNavigationItemInput(input, extraProps) {
     default: () => [label]
   });
 }
+const TRIM_END_SLASH_RE = /\/$/;
+
+function trimEndSlash(sorce) {
+  return sorce ? sorce.replace(TRIM_END_SLASH_RE, '') : sorce;
+}
+
 const VNavigationItem = defineComponent({
   name: 'VNavigationItem',
   inheritAttrs: false,
@@ -1813,10 +1826,15 @@ const VNavigationItem = defineComponent({
       const {
         to
       } = ctx.attrs;
-      if (match) return match;
+
+      if (match) {
+        return (Array.isArray(match) ? match : [match]).map(trimEndSlash);
+      }
+
       if (!to) return;
-      if (typeof to === 'string') return to;
-      return to.path;
+      const toPath = typeof to === 'string' ? to : to.path;
+      if (!toPath) return;
+      return [trimEndSlash(toPath)];
     });
     const classes = computed(() => [{
       'v-navigation-item--opened': opened.value,
@@ -1832,16 +1850,25 @@ const VNavigationItem = defineComponent({
       const c = children.value;
       const m = match.value;
 
-      if (!c || !m) {
+      if (!c || !m || !m.length) {
         // matched.value = false;
         return;
       }
 
-      if (newPath.match(m)) {
+      const trimedNewPath = trimEndSlash(newPath);
+
+      if (m.some(_ => trimedNewPath.match(_))) {
         open(); // matched.value = true;
       } else {
         close(); // matched.value = false;
-      }
+      } // if (trimEndSlash(newPath).match(m)) {
+      //   open();
+      //   // matched.value = true;
+      // } else {
+      //   close();
+      //   // matched.value = false;
+      // }
+
     }, {
       immediate: true
     }); // const iconPayload = () => opened.value;
@@ -1960,9 +1987,8 @@ const VNavigationItem = defineComponent({
 
 });
 
-const VNavigation = defineComponent({
-  name: 'VNavigation',
-  props: {
+function createNavigationProps() {
+  return createPropsOptions$1({
     items: {
       type: Array,
       required: true
@@ -1973,7 +1999,11 @@ const VNavigation = defineComponent({
       default: true
     },
     caption: [String, Function]
-  },
+  });
+}
+const VNavigation = defineComponent({
+  name: 'VNavigation',
+  props: createNavigationProps(),
 
   setup(props, ctx) {
     const items = computed(() => props.items);
@@ -2477,9 +2507,9 @@ function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
-const ARROW_KEY_TYPES = useKeybord.Key(['ArrowUp', 'ArrowDown']);
-const CHOICE_KEY_TYPES = useKeybord.Key(['Enter', ' ']);
-const KEYBORD_EVENT_TYPES = useKeybord.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
+const ARROW_KEY_TYPES = useKeyboard.Key(['ArrowUp', 'ArrowDown']);
+const CHOICE_KEY_TYPES = useKeyboard.Key(['Enter', ' ']);
+const KEYBORD_EVENT_TYPES = useKeyboard.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
 const {
   props: props$3,
   emits: emits$3
@@ -2496,7 +2526,8 @@ const VSelect = defineComponent({
       placeholder: String,
       loadingMessage: {},
       failedToLoadItemsMessage: {}
-    })
+    }),
+    closeOnNavigation: Boolean
   },
   emits: emits$3,
 
@@ -2537,6 +2568,7 @@ const VSelect = defineComponent({
     };
 
     const renderSelections = selectedItems => {
+      const selectionSlot = ctx.slots.selection;
       const children = [];
 
       if (inputControl.itemsLoadFailed) {
@@ -2553,7 +2585,11 @@ const VSelect = defineComponent({
             children.push(vui.selectionSeparator());
           }
 
-          children.push(item.renderDefaultSlot());
+          const child = selectionSlot ? selectionSlot({
+            item,
+            index
+          }) : item.renderDefaultSlot();
+          children.push(child);
         });
       } else if (props.placeholder != null) {
         children.push(createVNode("span", {
@@ -2654,14 +2690,14 @@ const VSelect = defineComponent({
       }
     };
 
-    const keybordEventHandler = ev => {
+    const keyboardEventHandler = ev => {
       if (ARROW_KEY_TYPES.includes(ev.key)) return arrowKeyHandler(ev);
       if (CHOICE_KEY_TYPES.includes(ev.key)) return choiceKeyHandler(ev);
     };
 
-    useKeybord([{
+    useKeyboard([{
       key: KEYBORD_EVENT_TYPES,
-      handler: keybordEventHandler
+      handler: keyboardEventHandler
     }], {
       autorun: true
     });
@@ -2722,6 +2758,7 @@ const VSelect = defineComponent({
       default: () => createVNode(VMenu, {
         "width": "fit",
         "maxWidth": "fit",
+        "closeOnNavigation": this.closeOnNavigation,
         "distance": 0,
         "alwaysRender": true,
         "modelValue": this.menuOpened,
@@ -4435,7 +4472,7 @@ const VBreadcrumbs = defineComponent({
           text
         } = item;
         const {
-          disabled = vui.location.match(to) || !vui.location.isAvairable(to)
+          disabled = vui.location.match(to) || !vui.location.isAvailable(to)
         } = item;
         return { ...item,
           disabled,
@@ -4963,7 +5000,9 @@ const VDataTable = defineComponent({
       }
 
       vui.location.pushQuery({ ...queries,
-        [props.pageQuery]: 1
+        ...(usePaigingRef.value ? {
+          [props.pageQuery]: 1
+        } : undefined)
       });
     }
 
@@ -5089,8 +5128,8 @@ const VDataTable = defineComponent({
       const {
         defaultOrder,
         ascQueryValue
-      } = props;
-      const usePaiging = usePaigingRef.value;
+      } = props; // const usePaiging = usePaigingRef.value;
+
       const children = headersRef.value.map(header => {
         const {
           label,
@@ -5129,7 +5168,7 @@ const VDataTable = defineComponent({
 
         const sortActive = sortBy === sortQuery;
 
-        if (sortQuery && usePaiging) {
+        if (sortQuery) {
           const isASC = sortActive ? isASCRef.value : defaultOrder === ascQueryValue;
           headerChildren.unshift(createVNode(VIcon, {
             "class": "v-data-table__table__sort-icon v-data-table__table__sort-icon--empty",
@@ -5154,9 +5193,9 @@ const VDataTable = defineComponent({
         return createVNode("th", {
           "class": classes,
           "key": header.key,
-          "tabindex": sortQuery && usePaiging ? 0 : undefined,
+          "tabindex": sortQuery ? 0 : undefined,
           "onClick": ev => {
-            if (!sortQuery || !usePaiging) return;
+            if (!sortQuery) return;
             handleClickSortHeader(header);
           }
         }, [createVNode("div", {
@@ -5536,6 +5575,7 @@ class VuiService {
       router: this.router
     });
     this.stack = stackService;
+    this.useLink = options.useLink || useLink;
   }
 
   configure(options) {
@@ -5734,4 +5774,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { ARROW_KEY_TYPES, AVATAR_SIZES, CHIP_SIZES, CHOICE_KEY_TYPES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, KEYBORD_EVENT_TYPES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygColorExtension, WysiwygEditorInitializeContext, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygLinter, WysiwygLinterBadWords, WysiwygLinterHeadingLevel, WysiwygLinterPlugin, WysiwygLinterPunctuation, WysiwygOrderedListTool, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, createWysiwygColorTool, createWysiwygExtension, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, resolveRawWysiwygExtensions, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { ARROW_KEY_TYPES, AVATAR_SIZES, BUTTON_ALIGNS, CHIP_SIZES, CHOICE_KEY_TYPES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, KEYBORD_EVENT_TYPES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygColorExtension, WysiwygEditorInitializeContext, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygLinter, WysiwygLinterBadWords, WysiwygLinterHeadingLevel, WysiwygLinterPlugin, WysiwygLinterPunctuation, WysiwygOrderedListTool, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createNavigationProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, createWysiwygColorTool, createWysiwygExtension, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, resolveRawWysiwygExtensions, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };

package/package.json

@@ -1,11 +1,19 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.8.17",
-  "description": "@fastkit/vui",
+  "version": "0.9.0",
+  "description": "A simple, extensible UI kit for Vue applications.",
   "buildOptions": {
     "name": "Vui",
     "tool": true
   },
+  "_docs": {
+    "scope": "vue",
+    "feature": "ui",
+    "description": {
+      "en": "A simple, extensible UI kit for Vue applications.",
+      "ja": "Vueアプリケーション用のシンプルで拡張可能なUIキット。"
+    }
+  },
   "main": "index.js",
   "module": "dist/vui.mjs",
   "files": [
@@ -19,7 +27,10 @@
     "url": "git+https://github.com/dadajam4/fastkit.git"
   },
   "keywords": [
-    "fastkit"
+    "fastkit",
+    "vue",
+    "ui",
+    "component"
   ],
   "author": "dadajam4",
   "license": "MIT",
@@ -32,15 +43,15 @@
     "vue": "^3.2.37"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.8.17",
-    "@fastkit/icon-font": "0.8.17",
-    "@fastkit/tiny-logger": "0.8.17",
-    "@fastkit/vite-kit": "0.8.17",
-    "@fastkit/vue-kit": "0.8.17",
+    "@fastkit/color-scheme": "0.9.0",
+    "@fastkit/icon-font": "0.9.0",
+    "@fastkit/tiny-logger": "0.9.0",
+    "@fastkit/vite-kit": "0.9.0",
+    "@fastkit/vue-kit": "0.9.0",
     "@tiptap/extension-link": "^2.0.0-beta.43",
     "@tiptap/extension-underline": "^2.0.0-beta.25",
     "@tiptap/extension-text-style": "^2.0.0-beta.26",
-    "@tiptap/starter-kit": "^2.0.0-beta.190",
+    "@tiptap/starter-kit": "^2.0.0-beta.191",
     "@tiptap/vue-3": "^2.0.0-beta.96",
     "eta": "^1.12.3",
     "fs-extra": "^9.1.0"

package/src/components/VBreadcrumbs/VBreadcrumbs.tsx

@@ -45,7 +45,7 @@ export const VBreadcrumbs = defineComponent({
       return items.map((item) => {
         const { to, text } = item;
         const {
-          disabled = vui.location.match(to) || !vui.location.isAvairable(to),
+          disabled = vui.location.match(to) || !vui.location.isAvailable(to),
         } = item;
         return {
           ...item,

package/src/components/VBusyImage/VBusyImage.tsx

@@ -96,7 +96,7 @@ export const VBusyImage = defineComponent({
   },
   setup(props, ctx) {
     const loadStateRef = ref<BusyImageLoadState>(
-      props.cover && isAvairableSrc(ctx.attrs.src as any)
+      props.cover && isAvailableSrc(ctx.attrs.src as any)
         ? 'loading'
         : 'pending',
     );
@@ -173,7 +173,7 @@ export const VBusyImage = defineComponent({
       () => ctx.attrs.src as string | null | undefined,
       (value) => {
         coverImageRef.value = undefined;
-        if (isAvairableSrc(value)) {
+        if (isAvailableSrc(value)) {
           loadStateRef.value = 'loading';
           if (props.cover) {
             loadImage(value)
@@ -273,6 +273,6 @@ function imageIsReady(image: HTMLImageElement): 'load' | 'error' | false {
   return image.naturalWidth + image.naturalHeight > 0 ? 'load' : 'error';
 }
 
-function isAvairableSrc(src: string | null | undefined): src is string {
+function isAvailableSrc(src: string | null | undefined): src is string {
   return typeof src === 'string' && src !== '';
 }

package/src/components/VButton/VButton.scss

@@ -38,6 +38,14 @@
   transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), color 1ms;
   appearance: none;
 
+  &--align-left {
+    justify-content: flex-start;
+  }
+
+  &--align-right {
+    justify-content: flex-end;
+  }
+
   &--plain {
     color: inherit !important;
     // color: inherit !important;

package/src/components/VButton/VButton.tsx

@@ -30,6 +30,10 @@ export type VButtonIcon = () => VNodeChild;
 
 export type RawVButtonIcon = IconName | VButtonIcon;
 
+export const BUTTON_ALIGNS = ['left', 'center', 'right'] as const;
+
+export type VButtonAlign = typeof BUTTON_ALIGNS[number];
+
 function resolveRawVButtonIcon(
   raw?: RawVButtonIcon,
   type: 'main' | 'start' | 'end' = 'main',
@@ -54,6 +58,10 @@ export const vueButtonProps = createPropsOptions({
   icon: [String, Function] as PropType<RawVButtonIcon>,
   startIcon: [String, Function] as PropType<RawVButtonIcon>,
   endIcon: [String, Function] as PropType<RawVButtonIcon>,
+  align: {
+    type: String as PropType<VButtonAlign>,
+    default: 'center',
+  },
   ...createControlProps(),
 });
 
@@ -115,6 +123,7 @@ export const VButton = defineComponent({
       // navigationable.value.classes,
       spacer.value ? `v-button--spacer-${spacer.value}` : undefined,
       `v-button--${control.size.value}`,
+      `v-button--align-${props.align}`,
       {
         'v-button--loading': isLoading.value,
         'v-button--icon': !!icon.value,

package/src/components/VDataTable/VDataTable.tsx

@@ -401,7 +401,11 @@ export const VDataTable = defineComponent({
 
       vui.location.pushQuery({
         ...queries,
-        [props.pageQuery]: 1,
+        ...(usePaigingRef.value
+          ? {
+              [props.pageQuery]: 1,
+            }
+          : undefined),
       });
     }
 
@@ -530,7 +534,7 @@ export const VDataTable = defineComponent({
       const isIndeterminate = isIndeterminateRef.value;
       const isAllSelected = isAllSelectedRef.value;
       const { defaultOrder, ascQueryValue } = props;
-      const usePaiging = usePaigingRef.value;
+      // const usePaiging = usePaigingRef.value;
 
       const children = headersRef.value.map((header) => {
         const { label, sortQuery, align, key } = header;
@@ -567,7 +571,7 @@ export const VDataTable = defineComponent({
 
         const sortActive = sortBy === sortQuery;
 
-        if (sortQuery && usePaiging) {
+        if (sortQuery) {
           const isASC = sortActive
             ? isASCRef.value
             : defaultOrder === ascQueryValue;
@@ -615,9 +619,9 @@ export const VDataTable = defineComponent({
           <th
             class={classes}
             key={header.key}
-            tabindex={sortQuery && usePaiging ? 0 : undefined}
+            tabindex={sortQuery ? 0 : undefined}
             onClick={(ev) => {
-              if (!sortQuery || !usePaiging) return;
+              if (!sortQuery) return;
               handleClickSortHeader(header, ev);
             }}>
             <div class="v-data-table__table__cell__tile">{headerChildren}</div>

package/src/components/VListTile/VListTile.tsx

@@ -14,8 +14,9 @@ import {
   createPropsOptions,
 } from '@fastkit/vue-utils';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
-import { useLink } from 'vue-router';
+// import { useLink } from 'vue-router';
 import { VLink } from '@fastkit/vue-utils';
+import { useVui } from '../../injections';
 
 export function createListTileProps() {
   const icon = rawIconProp();
@@ -47,6 +48,7 @@ export const VListTile = defineComponent({
     ...listTileEmits,
   },
   setup(props, ctx) {
+    const vui = useVui();
     const startIcon: ComputedRef<VNodeChild> = computed(() => {
       let icon = resolveRawIconProp(false, props.startIcon);
       if (!icon && props.startIconEmptySpace) {
@@ -60,7 +62,7 @@ export const VListTile = defineComponent({
 
     const hasTo = computed(() => !!ctx.attrs.to);
 
-    const link = useLink({ to: (ctx.attrs.to as any) || '' });
+    const link = vui.useLink({ to: (ctx.attrs.to as any) || '' });
 
     const isActive = computed(() => {
       if (!hasTo.value) return false;

package/src/components/VNavigation/VNavigation.tsx

@@ -12,10 +12,10 @@ import {
   renderNavigationItemInput,
 } from './VNavigationItem';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
+import { createPropsOptions, ExtractPropInput } from '@fastkit/vue-utils';
 
-export const VNavigation = defineComponent({
-  name: 'VNavigation',
-  props: {
+export function createNavigationProps() {
+  return createPropsOptions({
     items: {
       type: Array as PropType<NavigationItemInput[]>,
       required: true,
@@ -26,7 +26,16 @@ export const VNavigation = defineComponent({
       default: true,
     },
     caption: [String, Function] as PropType<VNodeChild | (() => VNodeChild)>,
-  },
+  });
+}
+
+export type NavigationInput = ExtractPropInput<
+  ReturnType<typeof createNavigationProps>
+>;
+
+export const VNavigation = defineComponent({
+  name: 'VNavigation',
+  props: createNavigationProps(),
   setup(props, ctx) {
     const items = computed(() => props.items);
     const color = useScopeColorClass(props);

package/src/components/VNavigation/VNavigationItem.tsx

@@ -22,7 +22,7 @@ import { ScopeName } from '@fastkit/color-scheme';
 export function createNavigationItemProps() {
   return {
     ...createListTileProps(),
-    match: String,
+    match: [String, Array] as PropType<string | string[]>,
     depth: {
       type: Number,
       default: 0,
@@ -72,6 +72,12 @@ export function renderNavigationItemInput(
   );
 }
 
+const TRIM_END_SLASH_RE = /\/$/;
+
+function trimEndSlash<T extends string | undefined>(sorce: T) {
+  return sorce ? sorce.replace(TRIM_END_SLASH_RE, '') : sorce;
+}
+
 export const VNavigationItem = defineComponent({
   name: 'VNavigationItem',
   inheritAttrs: false,
@@ -93,13 +99,16 @@ export const VNavigationItem = defineComponent({
 
     const to = computed(() => ctx.attrs.to);
 
-    const match = computed(() => {
+    const match = computed<string[] | undefined>(() => {
       const { match } = props;
       const { to } = ctx.attrs;
-      if (match) return match;
+      if (match) {
+        return (Array.isArray(match) ? match : [match]).map(trimEndSlash);
+      }
       if (!to) return;
-      if (typeof to === 'string') return to;
-      return (to as any).path as string | undefined;
+      const toPath = typeof to === 'string' ? to : (to as any).path;
+      if (!toPath) return;
+      return [trimEndSlash(toPath)];
     });
 
     const classes = computed(() => [
@@ -123,18 +132,27 @@ export const VNavigationItem = defineComponent({
         const c = children.value;
         const m = match.value;
 
-        if (!c || !m) {
+        if (!c || !m || !m.length) {
           // matched.value = false;
           return;
         }
 
-        if (newPath.match(m)) {
+        const trimedNewPath = trimEndSlash(newPath);
+        if (m.some((_) => trimedNewPath.match(_))) {
           open();
           // matched.value = true;
         } else {
           close();
           // matched.value = false;
         }
+
+        // if (trimEndSlash(newPath).match(m)) {
+        //   open();
+        //   // matched.value = true;
+        // } else {
+        //   close();
+        //   // matched.value = false;
+        // }
       },
       { immediate: true },
     );