@fastkit/vui 0.8.18 → 0.10.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';
@@ -13,7 +13,7 @@ export { ICON_NAMES } from '@fastkit/icon-font';
 import { VAppContainer, VAppLayoutControl } from '@fastkit/vue-app-layout';
 import { createTextableProps, createTextableEmits, TextableControl } from '@fastkit/vue-form-control';
 import { useEditor, EditorContent, BubbleMenu } from '@tiptap/vue-3';
-import StarterKit from '@tiptap/starter-kit';
+import { StarterKit } from '@tiptap/starter-kit';
 import { Extension } from '@tiptap/core';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
@@ -144,6 +144,7 @@ function useControlField(props, opts = {}) {
     return provider;
 }
 
+// export function toRawIconProp<T = void>(
 //   prop: RawIconProp<T>,
 //   payload: () => T,
 // ): RawIconProp {
@@ -157,7 +158,6 @@ function useControlField(props, opts = {}) {
 //   return fn;
 // }
 // export const rawRawIconProp = [String, Function] as PropType<RawIconProp>;
-
 const _rawIconProp = [String, Function];
 function rawIconProp() {
   return _rawIconProp;
@@ -177,12 +177,12 @@ const iconProps = createPropsOptions$1({
     type: Number
   }
 });
-const VIcon = defineComponent({
+const VIcon = /* @__PURE__ */ defineComponent({
   name: 'VIcon',
-  props: { ...iconProps
+  props: {
+    ...iconProps
   },
   emits: {},
-
   setup(props, ctx) {
     const iconName = computed(() => props.name);
     const clickable = computed(() => typeof ctx.attrs.onClick !== 'undefined');
@@ -206,7 +206,6 @@ const VIcon = defineComponent({
       "style": bodyStyles.value
     }, null)]);
   }
-
 });
 
 const {
@@ -221,7 +220,6 @@ function createRequiredChipRenderer(required, props, vui = useVui()) {
       requiredChip
     } = props;
     if (requiredChip === false) return;
-
     if (requiredChip) {
       if (typeof requiredChip === 'string') {
         chip = requiredChip;
@@ -229,22 +227,20 @@ function createRequiredChipRenderer(required, props, vui = useVui()) {
         chip = requiredChip();
       }
     }
-
     if (chip === undefined) {
       chip = vui.getRequiredChip();
     }
-
     return chip;
   };
 }
-const VFormControl = defineComponent({
+const VFormControl = /* @__PURE__ */ defineComponent({
   name: 'VFormControl',
-  props: { ...props$8,
+  props: {
+    ...props$8,
     ...defineSlotsProps(),
     error: Boolean
   },
   emits: emits$8,
-
   setup(props, ctx) {
     const vui = useVui();
     const control = useFormControl(props, ctx, {
@@ -257,15 +253,12 @@ const VFormControl = defineComponent({
       let {
         hinttipDelay
       } = control;
-
       if (hinttipDelay == null) {
         hinttipDelay = vui.setting('hinttipDelay');
       }
-
       if (hinttipDelay == null) {
         hinttipDelay = 500;
       }
-
       return hinttipDelay;
     });
     ctx.expose(control.expose());
@@ -320,7 +313,6 @@ const VFormControl = defineComponent({
       }, [appends])])])]);
     };
   }
-
 });
 
 function defineFormSelectorComponent(opts) {
@@ -336,97 +328,100 @@ function defineFormSelectorComponent(opts) {
   } = createFormSelectorSettings({
     defaultMultiple
   });
-  return defineComponent({
-    name: opts.name,
-    props: { ...props,
-      ...createFormControlProps(),
-      ...createControlProps(),
-      stacked: {
-        type: Boolean,
-        default: true
+  return (/* @__PURE__ */ defineComponent({
+      name: opts.name,
+      props: {
+        ...props,
+        ...createFormControlProps(),
+        ...createControlProps(),
+        stacked: {
+          type: Boolean,
+          default: true
+        },
+        // eslint-disable-next-line vue/require-prop-types
+        loadingMessage: {},
+        // eslint-disable-next-line vue/require-prop-types
+        failedToLoadItemsMessage: {},
+        ...defineSlotsProps()
       },
-      // eslint-disable-next-line vue/require-prop-types
-      loadingMessage: {},
-      // eslint-disable-next-line vue/require-prop-types
-      failedToLoadItemsMessage: {},
-      ...defineSlotsProps()
-    },
-    emits,
-
-    setup(props, ctx) {
-      const selectorControl = useFormSelectorControl(props, ctx, {
-        nodeType,
-        defaultMultiple
-      });
-      const control = useControl(props);
-      const vui = useVui();
-      const loadingMessageRef = computed(() => {
-        const slot = resolveVNodeChildOrSlots(props.loadingMessage, vui.setting('loadingMessage'), 'Loading...');
-        return slot && slot(vui);
-      });
-      const failedToLoadItemsMessageRef = computed(() => {
-        const slot = resolveVNodeChildOrSlots(props.failedToLoadItemsMessage, vui.setting('failedToLoadDataMessage'), 'Failed to load data.');
-        return slot && slot(vui);
-      });
-      return { ...selectorControl.expose(),
-        ...control,
-        loadingMessageRef,
-        failedToLoadItemsMessageRef
-      };
-    },
-
-    render() {
-      const {
-        selectorControl
-      } = this;
-      return createVNode(VFormControl, {
-        "nodeControl": this.nodeControl,
-        "focused": this.nodeControl.focused,
-        "hiddenInfo": this.hiddenInfo,
-        "class": ['v-form-selector', className, { ...this.classes,
-          'v-form-selector--stacked': this.stacked
-        }],
-        "label": this.label,
-        "hint": this.hint,
-        "hinttip": this.hinttip,
-        "requiredChip": this.requiredChip,
-        "error": selectorControl.itemsLoadFailed
-      }, { ...this.$slots,
-        default: () => createVNode("div", {
-          "class": "v-form-selector__body"
-        }, [selectorControl.itemsLoadFailed && createVNode("div", {
-          "key": "failed",
-          "class": "v-form-selector__placeholder v-form-selector__placeholder--error"
-        }, [this.failedToLoadItemsMessageRef]), selectorControl.itemsLoading && createVNode("div", {
-          "key": "loading",
-          "class": "v-form-selector__placeholder"
-        }, [createVNode(VProgressCircular, {
-          "indeterminate": true,
-          "class": "mr-1",
-          "size": CONTROL_LOADING_SPINNER_SIZES[this.size || 'md']
-        }, null), this.loadingMessageRef]), this.propGroups.map(group => {
-          const {
-            items
-          } = group;
-          return createVNode(Fragment, null, [items.map(attrs => {
-            const selected = selectorControl.isSelected(attrs.value);
-            return itemRenderer({
-              selected,
-              control: selectorControl,
-              attrs: { ...attrs,
-                modelValue: selected,
-                key: attrs.value
-              },
-              slots: {
-                default: () => attrs.label(this.selectorControl)
-              }
-            });
-          })]);
-        }), renderSlotOrEmpty(this.$slots, 'default')])
-      });
-    }
-
-  });
+      emits,
+      setup(props, ctx) {
+        const selectorControl = useFormSelectorControl(props, ctx, {
+          nodeType,
+          defaultMultiple
+        });
+        const control = useControl(props);
+        const vui = useVui();
+        const loadingMessageRef = computed(() => {
+          const slot = resolveVNodeChildOrSlots(props.loadingMessage, vui.setting('loadingMessage'), 'Loading...');
+          return slot && slot(vui);
+        });
+        const failedToLoadItemsMessageRef = computed(() => {
+          const slot = resolveVNodeChildOrSlots(props.failedToLoadItemsMessage, vui.setting('failedToLoadDataMessage'), 'Failed to load data.');
+          return slot && slot(vui);
+        });
+        return {
+          ...selectorControl.expose(),
+          ...control,
+          loadingMessageRef,
+          failedToLoadItemsMessageRef
+        };
+      },
+      render() {
+        const {
+          selectorControl
+        } = this;
+        return createVNode(VFormControl, {
+          "nodeControl": this.nodeControl,
+          "focused": this.nodeControl.focused,
+          "hiddenInfo": this.hiddenInfo,
+          "class": ['v-form-selector', className, {
+            ...this.classes,
+            'v-form-selector--stacked': this.stacked
+          }],
+          "label": this.label,
+          "hint": this.hint,
+          "hinttip": this.hinttip,
+          "requiredChip": this.requiredChip,
+          "error": selectorControl.itemsLoadFailed
+        }, {
+          ...this.$slots,
+          default: () => createVNode("div", {
+            "class": "v-form-selector__body"
+          }, [selectorControl.itemsLoadFailed && createVNode("div", {
+            "key": "failed",
+            "class": "v-form-selector__placeholder v-form-selector__placeholder--error"
+          }, [this.failedToLoadItemsMessageRef]), selectorControl.itemsLoading && createVNode("div", {
+            "key": "loading",
+            "class": "v-form-selector__placeholder"
+          }, [createVNode(VProgressCircular, {
+            "indeterminate": true,
+            "class": "mr-1",
+            "size": CONTROL_LOADING_SPINNER_SIZES[this.size || 'md']
+          }, null), this.loadingMessageRef]), this.propGroups.map(group => {
+            const {
+              items
+            } = group;
+            return createVNode(Fragment, null, [items.map(attrs => {
+              const selected = selectorControl.isSelected(attrs.value);
+              return itemRenderer({
+                selected,
+                control: selectorControl,
+                attrs: {
+                  ...attrs,
+                  modelValue: selected,
+                  key: attrs.value
+                },
+                slots: {
+                  default: () => attrs.label(this.selectorControl)
+                }
+              });
+            })]);
+          }), renderSlotOrEmpty(this.$slots, 'default')])
+        });
+      }
+    })
+  );
 }
 
 function createElevationProps() {
@@ -449,8 +444,7 @@ function useElevation(props, opts = {}) {
 function _isSlot$f(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
-const VSkeltonLoaderBone = defineComponent({
+const VSkeltonLoaderBone = /* @__PURE__ */ defineComponent({
   name: 'VSkeltonLoaderBone',
   inheritAttrs: false,
   props: {
@@ -459,11 +453,9 @@ const VSkeltonLoaderBone = defineComponent({
       default: 'div'
     }
   },
-
   setup(props, ctx) {
     return () => {
       let _slot;
-
       const TagName = props.tag;
       return createVNode(TagName, mergeProps(ctx.attrs, {
         "class": "v-skelton-loader-bone"
@@ -472,23 +464,20 @@ const VSkeltonLoaderBone = defineComponent({
       });
     };
   }
-
 });
 
 const IMAGE_ATTRS = ['alt', 'crossorigin', 'decoding', 'sizes', 'src', 'srcset', 'usemap'];
 function splitAttrs(attrs) {
-  const el = { ...attrs
+  const el = {
+    ...attrs
   };
   const img = {};
-
   for (const ATTR of IMAGE_ATTRS) {
     const value = attrs[ATTR];
-
     if (value != null) {
       img[ATTR] = value;
     }
   }
-
   return {
     el,
     img
@@ -496,7 +485,6 @@ function splitAttrs(attrs) {
 }
 const NUMBERISH_PROP = [Number, String];
 const DEFAULT_HEIGHT = 150;
-
 const resolveBusyImageSizeValue = source => {
   if (source == null) return;
   return isNaN(source) ? String(source) : `${source}px`;
@@ -505,11 +493,10 @@ const resolveBusyImageSizeValue = source => {
  * 画像表示用コンポーネント
  * <img /> タグのように振る舞うが、ローディング表示や、表示サイズの調整など、ちょっといい感じにやるためのコンポーネント
  */
-
-
-const VBusyImage = defineComponent({
+const VBusyImage = /* @__PURE__ */ defineComponent({
   name: 'VBusyImage',
-  props: { ...undefined,
+  props: {
+    ...undefined,
     aspectRatio: String,
     width: NUMBERISH_PROP,
     height: NUMBERISH_PROP,
@@ -520,9 +507,8 @@ const VBusyImage = defineComponent({
     load: ev => true,
     error: ev => true
   },
-
   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');
@@ -544,30 +530,24 @@ const VBusyImage = defineComponent({
         width,
         height
       } = props;
-
       if (height == null && cover) {
         height = DEFAULT_HEIGHT;
       }
-
       if (width == null && cover) {
         width = height;
       }
-
       width = resolveBusyImageSizeValue(width);
       height = resolveBusyImageSizeValue(height);
       main.width = width;
       main.height = height;
       placeholder.width = width;
       placeholder.height = height;
-
       if (placeholder.height == null) {
         placeholder.height = resolveBusyImageSizeValue(DEFAULT_HEIGHT);
       }
-
       if (placeholder.width == null) {
         placeholder.width = placeholder.height;
       }
-
       return {
         placeholder,
         main
@@ -579,22 +559,19 @@ const VBusyImage = defineComponent({
         value: coverImage
       } = coverImageRef;
       const coverSrc = coverImage && coverImage.src;
-      const styles = { ...currentRectRef.value
+      const styles = {
+        ...currentRectRef.value
       };
-
       if (coverSrc) {
         styles.backgroundImage = `url(${coverSrc})`;
       }
-
       return styles;
     });
     let booted = false;
     watch(() => ctx.attrs.src, value => {
       coverImageRef.value = undefined;
-
-      if (isAvairableSrc(value)) {
+      if (isAvailableSrc(value)) {
         loadStateRef.value = 'loading';
-
         if (props.cover) {
           loadImage(value).then(image => {
             coverImageRef.value = image;
@@ -609,7 +586,6 @@ const VBusyImage = defineComponent({
     }, {
       immediate: IN_WINDOW
     });
-
     const setManualState = loadType => {
       loadStateRef.value = loadType === 'load' ? 'loaded' : 'error';
       const ev = new Event(loadType, {
@@ -619,13 +595,11 @@ const VBusyImage = defineComponent({
       });
       ctx.emit(loadType, ev);
     };
-
     onMounted(() => {
       if (booted || props.cover) return;
       const image = nodeRef.value;
       if (!image) return;
       const loadType = imageIsReady(image);
-
       if (loadType) {
         setManualState(loadType);
       }
@@ -633,19 +607,16 @@ const VBusyImage = defineComponent({
     onBeforeUnmount(() => {
       coverImageRef.value = undefined;
     });
-
     const handleLoad = ev => {
       booted = true;
       loadStateRef.value = 'loaded';
       ctx.emit('load', ev);
     };
-
     const handleError = ev => {
       booted = true;
       loadStateRef.value = 'error';
       ctx.emit('error', ev);
     };
-
     ctx.expose({
       state: loadStateRef,
       isPending: isPendingRef,
@@ -676,15 +647,12 @@ const VBusyImage = defineComponent({
       }, [children])]);
     };
   }
-
 });
-
 function imageIsReady(image) {
   if (!image.complete) return false;
   return image.naturalWidth + image.naturalHeight > 0 ? 'load' : 'error';
 }
-
-function isAvairableSrc(src) {
+function isAvailableSrc(src) {
   return typeof src === 'string' && src !== '';
 }
 
@@ -697,10 +665,11 @@ function extractRawGridValueClasses(value, prefix, getter) {
 }
 // export const DEFAULT_MEDIA_MATCH_KEY = MEDIA_MATCH_CONDITIONS[0].key;
 
-const VGridItem = defineComponent({
+const VGridItem = /* @__PURE__ */ defineComponent({
   name: 'VGridItem',
   inheritAttrs: false,
-  props: { ...htmlAttributesPropOptions,
+  props: {
+    ...htmlAttributesPropOptions,
     tag: {
       type: String,
       default: 'div'
@@ -711,11 +680,11 @@ const VGridItem = defineComponent({
     justify: undefined,
     order: undefined
   },
-
   setup(props, ctx) {
     const data = computed(() => {
       const classes = [];
-      const attrs = { ...ctx.attrs
+      const attrs = {
+        ...ctx.attrs
       };
       const {
         size,
@@ -730,14 +699,14 @@ const VGridItem = defineComponent({
       size != null && classes.push(extractRawGridValueClasses(size, 'grid-size-'));
       align && classes.push(extractRawGridValueClasses(align, 'self-align-'));
       justify && classes.push(extractRawGridValueClasses(justify, 'self-justify-'));
-      order != null && classes.push(extractRawGridValueClasses(order, 'order-')); // MEDIA_MATCH_CONDITIONS.forEach(({ key }) => {
+      order != null && classes.push(extractRawGridValueClasses(order, 'order-'));
+      // MEDIA_MATCH_CONDITIONS.forEach(({ key }) => {
       //   const v = attrs[key];
       //   delete attrs[key];
       //   if (v != null) {
       //     classes.push(`grid-size-${v}--${key}`);
       //   }
       // });
-
       return {
         classes,
         attrs
@@ -754,17 +723,16 @@ const VGridItem = defineComponent({
       }, attrs), ctx.slots);
     };
   }
-
 });
 
 function spacingValueToString(value) {
   return Number.isInteger(value) ? String(value) : `${value}h`;
 }
-
-const VGridContainer = defineComponent({
+const VGridContainer = /* @__PURE__ */ defineComponent({
   name: 'VGridContainer',
   inheritAttrs: false,
-  props: { ...htmlAttributesPropOptions,
+  props: {
+    ...htmlAttributesPropOptions,
     wrapperTag: {
       type: String,
       default: 'div'
@@ -781,11 +749,11 @@ const VGridContainer = defineComponent({
     alignContent: undefined,
     justifyContent: undefined
   },
-
   setup(props, ctx) {
     const data = computed(() => {
       const classes = [];
-      const attrs = { ...ctx.attrs
+      const attrs = {
+        ...ctx.attrs
       };
       const {
         spacing,
@@ -806,7 +774,8 @@ const VGridContainer = defineComponent({
       delete attrs.direction;
       delete attrs.wrap;
       delete attrs.alignContent;
-      delete attrs.justifyContent; // spacingX = mergeSpacing(spacing, spacingX);
+      delete attrs.justifyContent;
+      // spacingX = mergeSpacing(spacing, spacingX);
       // spacingY = mergeSpacing(spacing, spacingY);
       // if (!spacingX) {
       //   spacingX = spacing;
@@ -815,7 +784,6 @@ const VGridContainer = defineComponent({
       //   classes.push(extractRawGridItemValueClasses(align, 'self-align-'));
       // justify &&
       //   classes.push(extractRawGridItemValueClasses(justify, 'self-justify-'));
-
       spacing != null && classes.push(extractRawGridValueClasses(spacing, 'grid-spacing-', spacingValueToString));
       spacingX != null && classes.push(extractRawGridValueClasses(spacingX, 'grid-spacing-x-', spacingValueToString));
       spacingY != null && classes.push(extractRawGridValueClasses(spacingY, 'grid-spacing-y-', spacingValueToString));
@@ -849,11 +817,11 @@ const VGridContainer = defineComponent({
       });
     };
   }
-
 });
 
 function createPaperBaseProps() {
-  return { ...htmlAttributesPropOptions,
+  return {
+    ...htmlAttributesPropOptions,
     color: String,
     tag: {
       type: [String, Object],
@@ -863,7 +831,8 @@ function createPaperBaseProps() {
   };
 }
 function createPaperProps() {
-  return { ...createElevationProps(),
+  return {
+    ...createElevationProps(),
     ...createPaperBaseProps(),
     square: Boolean,
     headerProps: Object,
@@ -872,11 +841,10 @@ function createPaperProps() {
     innerClass: [String, Array, Object]
   };
 }
-const VPaper = defineComponent({
+const VPaper = /* @__PURE__ */ defineComponent({
   name: 'VPaper',
   inheritAttrs: false,
   props: createPaperProps(),
-
   setup(props, ctx) {
     const tag = computed(() => props.tag);
     const elevation = useElevation(props, {
@@ -910,12 +878,12 @@ const VPaper = defineComponent({
       });
     };
   }
-
 });
 
 const AVATAR_SIZES = ['sm', 'md', 'lg'];
 function createAvatarProps() {
-  return { ...colorSchemeProps(),
+  return {
+    ...colorSchemeProps(),
     ...navigationableInheritProps,
     size: {
       type: [String, Number],
@@ -927,11 +895,10 @@ function createAvatarProps() {
     src: String
   };
 }
-const VAvatar = defineComponent({
+const VAvatar = /* @__PURE__ */ defineComponent({
   name: 'VAvatar',
   inheritAttrs: false,
   props: createAvatarProps(),
-
   setup(props, ctx) {
     const vui = useVui();
     const defaults = vui.setting('buttonDefault');
@@ -981,12 +948,12 @@ const VAvatar = defineComponent({
       });
     };
   }
-
 });
 
 const CHIP_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
 function createChipProps() {
-  return { ...colorSchemeProps(),
+  return {
+    ...colorSchemeProps(),
     ...navigationableInheritProps,
     size: {
       type: String,
@@ -998,10 +965,8 @@ function createChipProps() {
     disabled: Boolean
   };
 }
-
 function resolveRawVChipIcon(raw, type) {
   if (!raw) return;
-
   if (typeof raw === 'function') {
     return () => {
       const child = raw();
@@ -1011,18 +976,15 @@ function resolveRawVChipIcon(raw, type) {
       }, [child]);
     };
   }
-
   return () => createVNode(VIcon, {
     "class": ['v-chip__icon', `v-chip__icon--${type}`],
     "name": raw
   }, null);
 }
-
-const VChip = defineComponent({
+const VChip = /* @__PURE__ */ defineComponent({
   name: 'VChip',
   inheritAttrs: false,
   props: createChipProps(),
-
   setup(props, ctx) {
     const vui = useVui();
     const defaults = vui.setting('buttonDefault');
@@ -1032,12 +994,10 @@ const VChip = defineComponent({
     });
     const startIcon = computed(() => {
       const _icon = resolveRawVChipIcon(props.startIcon, 'start');
-
       return _icon && _icon();
     });
     const endIcon = computed(() => {
       const _icon = resolveRawVChipIcon(props.endIcon, 'end');
-
       return _icon && _icon();
     });
     const navigationable = useNavigationable(ctx, {
@@ -1066,31 +1026,29 @@ const VChip = defineComponent({
       });
     };
   }
-
 });
 
 function createCardProps() {
-  return { ...createPaperProps(),
+  return {
+    ...createPaperProps(),
     ...navigationableInheritProps,
     disabled: Boolean
   };
 }
-const VCard = defineComponent({
+const VCard = /* @__PURE__ */ defineComponent({
   name: 'VCard',
   inheritAttrs: false,
   props: createCardProps(),
-
   setup(props, ctx) {
     const _props = computed(() => props);
-
     const data = computed(() => {
       const hasLink = !!ctx.attrs.href || !!ctx.attrs.to;
-      const attrs = { ..._props.value,
+      const attrs = {
+        ..._props.value,
         ...ctx.attrs,
         class: ['v-card', ctx.attrs.class, typeof ctx.attrs.onClick === 'function' && 'clickable'],
         tag: hasLink ? VLink : 'div'
       };
-
       if (props.disabled) {
         attrs.disabled = 'disabled';
         delete attrs.onClick;
@@ -1099,7 +1057,6 @@ const VCard = defineComponent({
       } else {
         delete attrs.disabled;
       }
-
       return {
         attrs
       };
@@ -1108,12 +1065,10 @@ const VCard = defineComponent({
       return createVNode(VPaper, data.value.attrs, ctx.slots);
     };
   }
-
 });
 
-const VCardContent = defineComponent({
+const VCardContent = /* @__PURE__ */ defineComponent({
   name: 'VCardContent',
-
   setup(props, ctx) {
     return () => {
       return createVNode("div", {
@@ -1121,12 +1076,10 @@ const VCardContent = defineComponent({
       }, [renderSlotOrEmpty$1(ctx.slots, 'default')]);
     };
   }
-
 });
 
-const VCardActions = defineComponent({
+const VCardActions = /* @__PURE__ */ defineComponent({
   name: 'VCardActions',
-
   setup(props, ctx) {
     return () => {
       return createVNode("div", {
@@ -1134,9 +1087,9 @@ const VCardActions = defineComponent({
       }, [renderSlotOrEmpty$1(ctx.slots, 'default')]);
     };
   }
-
 });
 
+const BUTTON_ALIGNS = ['left', 'center', 'right'];
 function resolveRawVButtonIcon(raw, type = 'main') {
   if (!raw) return;
   return typeof raw === 'function' ? raw : () => createVNode(VIcon, {
@@ -1144,8 +1097,8 @@ function resolveRawVButtonIcon(raw, type = 'main') {
     "name": raw
   }, null);
 }
-
-const vueButtonProps = createPropsOptions$1({ ...htmlAttributesPropOptions,
+const vueButtonProps = createPropsOptions$1({
+  ...htmlAttributesPropOptions,
   ...colorSchemeProps(),
   ...navigationableInheritProps,
   spacer: [Boolean, String],
@@ -1153,6 +1106,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 = {
@@ -1160,28 +1117,24 @@ const LOADING_SIZE_MAP = {
   md: 20,
   lg: 28
 };
-const VButton = defineComponent({
+const VButton = /* @__PURE__ */ defineComponent({
   name: 'VButton',
   inheritAttrs: false,
   props: vueButtonProps,
-
   setup(props, ctx) {
     const vui = useVui();
     const control = useControl(props);
     const defaults = vui.setting('buttonDefault');
     const icon = computed(() => {
       const _icon = resolveRawVButtonIcon(props.icon);
-
       return _icon && _icon();
     });
     const startIcon = computed(() => {
       const _icon = resolveRawVButtonIcon(props.startIcon, 'start');
-
       return _icon && _icon();
     });
     const endIcon = computed(() => {
       const _icon = resolveRawVButtonIcon(props.endIcon, 'end');
-
       return _icon && _icon();
     });
     const color = useColorClasses({
@@ -1189,18 +1142,19 @@ const VButton = defineComponent({
       variant: () => props.variant || (icon.value ? vui.setting('plainVariant') : defaults.variant)
     });
     const isPlain = computed(() => color.variant.value.value === vui.setting('plainVariant') && color.color.value.value === defaults.color);
-    const isLoading = computed(() => props.loading); // const isDisabled = computed(() => props.disabled);
+    const isLoading = computed(() => props.loading);
+    // const isDisabled = computed(() => props.disabled);
     // const isRounded = computed(() =>
     //   props.rounded != null ? props.rounded : !!icon.value,
     // );
-
     const spacer = computed(() => {
       const _spacer = props.spacer;
       if (!_spacer) return;
       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}`, {
+    const classes = computed(() => [color.colorClasses.value,
+    // 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,
       'v-button--rounded': props.rounded,
@@ -1221,26 +1175,23 @@ const VButton = defineComponent({
       });
     };
   }
-
 });
 
-const VButtonGroup = defineComponent({
+const VButtonGroup = /* @__PURE__ */ defineComponent({
   name: 'VButtonGroup',
-  props: { ...colorSchemeProps(),
+  props: {
+    ...colorSchemeProps(),
     ...createControlProps(),
     disabled: Boolean
   },
-
   setup(props, ctx) {
     return () => {
       let hasIcon = false;
       let buttonLength = 0;
       let tmp = renderSlotOrEmpty$1(ctx.slots) || [];
-
       if (tmp.length === 1 && isFragment(tmp[0])) {
         tmp = tmp[0].children;
       }
-
       const children = tmp.map(node => {
         if (!isVNode(node) || node.type !== VButton) {
           return {
@@ -1248,13 +1199,10 @@ const VButtonGroup = defineComponent({
             node
           };
         }
-
         buttonLength++;
-
         if (!hasIcon && node.props && !!node.props.icon) {
           hasIcon = true;
         }
-
         return {
           isButton: true,
           node
@@ -1267,7 +1215,8 @@ const VButtonGroup = defineComponent({
           const hasLeft = buttonIndex > 1;
           const hasRight = buttonIndex < buttonLength;
           const childProps = child.node.props;
-          return cloneVNode(child.node, { ...props,
+          return cloneVNode(child.node, {
+            ...props,
             ...childProps,
             rouded: false,
             class: ['v-button-group__item', {
@@ -1277,7 +1226,6 @@ const VButtonGroup = defineComponent({
             }]
           });
         }
-
         return child.node;
       });
       return createVNode("div", {
@@ -1287,13 +1235,11 @@ const VButtonGroup = defineComponent({
       }, [$children]);
     };
   }
-
 });
 
 function _isSlot$e(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
 const PAGINATION_ALIGNS = ['left', 'center', 'right'];
 function paginationProps() {
   return createPropsOptions$1({
@@ -1304,7 +1250,6 @@ function paginationProps() {
       type: rawNumberPropType,
       default: 1
     },
-
     /**
      * Total number of pages
      */
@@ -1312,12 +1257,10 @@ function paginationProps() {
       type: rawNumberPropType,
       default: 0
     },
-
     /**
      * Maximum number of links to display.
      */
     totalVisible: rawNumberPropType,
-
     /**
      * true when narrowing
      */
@@ -1327,7 +1270,6 @@ function paginationProps() {
       type: String,
       default: 'center'
     },
-
     /**
      * To synchronize with a query, use the query name
      */
@@ -1336,14 +1278,13 @@ function paginationProps() {
     color: String
   });
 }
-const VPagination = defineComponent({
+const VPagination = /* @__PURE__ */ defineComponent({
   name: 'VPagination',
   props: paginationProps(),
   emits: {
     change: page => true,
     'update:modelValue': page => true
   },
-
   setup(props, ctx) {
     const vui = useVui();
     const elRef = ref(null);
@@ -1366,40 +1307,31 @@ const VPagination = defineComponent({
       const {
         routeQuery
       } = props;
-
       if (routeQuery) {
         return vui.location.getQuery(routeQuery, Number, 1);
       }
-
       return internalValue.value;
     });
-
     const _range = (from, to) => {
       const range = [];
       from = from > 0 ? from : 1;
-
       for (let i = from; i <= to; i++) {
         range.push(i);
       }
-
       return range;
     };
-
     const computedItems = computed(() => {
       const maxButtons = computedNumbersLength.value;
       const totalVisible = computedTotalVisible.value;
       const length = computedLength.value;
       const pageValue = computedPage.value;
       const maxLength = Math.min(Math.max(0, totalVisible || 0) || length, Math.max(0, maxButtons) || length, length);
-
       if (length <= maxLength) {
         return _range(1, length);
       }
-
       const even = maxLength % 2 === 0 ? 1 : 0;
       const left = Math.floor(maxLength / 2);
       const right = length - left + 1 + even;
-
       if (pageValue > left && pageValue < right) {
         const start = pageValue - left + 2;
         const end = pageValue + left - 2 - even;
@@ -1427,7 +1359,6 @@ const VPagination = defineComponent({
       'v-pagination--dense': props.dense,
       [`v-pagination--${props.align}`]: true
     }, colorScope.value.className]);
-
     async function setPage(value) {
       if (isDisabled.value) return;
       const {
@@ -1436,7 +1367,6 @@ const VPagination = defineComponent({
       } = props;
       const newPage = resolveNumberish(value);
       if (computedPage.value === newPage) return;
-
       if (beforeChange) {
         try {
           let result = beforeChange(newPage);
@@ -1444,7 +1374,6 @@ const VPagination = defineComponent({
           if (result === false) return;
         } catch (e) {}
       }
-
       if (routeQuery) {
         const to = createRoutableLocationByPage(newPage, routeQuery);
         return router.push(to).then(failure => {
@@ -1456,7 +1385,6 @@ const VPagination = defineComponent({
         ctx.emit('change', newPage);
       }
     }
-
     function createPageInfo(source) {
       const currentPage = computedPage.value;
       const length = computedLength.value;
@@ -1464,7 +1392,6 @@ const VPagination = defineComponent({
       let page;
       let active;
       let disabled;
-
       if (typeof source === 'number') {
         number = true;
         page = source;
@@ -1482,7 +1409,6 @@ const VPagination = defineComponent({
         active = false;
         disabled = page < 1 || page > length;
       }
-
       return {
         number,
         page,
@@ -1490,13 +1416,11 @@ const VPagination = defineComponent({
         disabled
       };
     }
-
     function createRoutableLocationByPage(page, routeQuery) {
       return vui.location.getQueryMergedLocation({
         [routeQuery]: page
       });
     }
-
     function genItem(source, index) {
       const {
         number,
@@ -1514,25 +1438,21 @@ const VPagination = defineComponent({
         if (type === 'truncate') {
           return createVNode("span", null, [createTextVNode("...")]);
         }
-
         const isPrev = type === 'prev';
         const icon = isPrev ? vui.icon('prev') : vui.icon('next');
         return resolveRawIconProp(false, icon, {
           class: 'v-pagination__item__icon'
         });
       })();
-
       const onClick = ev => {
         ev.preventDefault();
         if (page === undefined || active || disabled) return;
         setPage(page);
       };
-
       const key = `${source}-${index}`;
       const {
         routeQuery
       } = props;
-
       if (page !== undefined && routeQuery) {
         const to = createRoutableLocationByPage(page, routeQuery);
         return createVNode(RouterLink, {
@@ -1552,7 +1472,6 @@ const VPagination = defineComponent({
         }, [children]);
       }
     }
-
     watch(() => props.modelValue, modelValue => {
       internalValue.value = resolveNumberish(modelValue);
     }, {
@@ -1568,7 +1487,6 @@ const VPagination = defineComponent({
         width
       }) => {
         const el = elRef.value;
-
         if (el) {
           const style = window.getComputedStyle(el, 'before');
           const width = style.getPropertyValue('width');
@@ -1576,17 +1494,16 @@ const VPagination = defineComponent({
           const size = parseFloat(width) + parseFloat(margin) * 0.5;
           itemSize.value = size;
         }
-
         containerWidth.value = width;
       })]);
     };
   }
-
 });
 
 function createListTileProps() {
   const icon = rawIconProp();
-  return { ...navigationableInheritProps,
+  return {
+    ...navigationableInheritProps,
     ...createPropsOptions$1({
       startIcon: icon,
       endIcon: icon,
@@ -1603,26 +1520,25 @@ function createListTileProps() {
 const listTileEmits = {
   changeActive: isActive => true
 };
-const VListTile = defineComponent({
+const VListTile = /* @__PURE__ */ defineComponent({
   name: 'VListTile',
   inheritAttrs: false,
   props: createListTileProps(),
-  emits: { ...listTileEmits
+  emits: {
+    ...listTileEmits
   },
-
   setup(props, ctx) {
+    const vui = useVui();
     const startIcon = computed(() => {
       let icon = resolveRawIconProp(false, props.startIcon);
-
       if (!icon && props.startIconEmptySpace) {
         icon = resolveRawIconProp(false, '$empty');
       }
-
       return icon;
     });
     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(() => {
@@ -1661,14 +1577,13 @@ const VListTile = defineComponent({
       });
     };
   }
-
 });
 
-const VDrawerLayout = defineComponent({
+const VDrawerLayout = /* @__PURE__ */ defineComponent({
   name: 'VDrawerLayout',
-  props: { ...createPaperBaseProps()
+  props: {
+    ...createPaperBaseProps()
   },
-
   setup(props, ctx) {
     return () => {
       const paperProps = computed(() => ({
@@ -1692,16 +1607,16 @@ const VDrawerLayout = defineComponent({
       }), ctx.slots);
     };
   }
-
 });
 
+// Adornment
 function _isSlot$d(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
-const VHero = defineComponent({
+const VHero = /* @__PURE__ */ defineComponent({
   name: 'VHero',
-  props: { ...htmlAttributesPropOptions,
+  props: {
+    ...htmlAttributesPropOptions,
     color: {
       type: String,
       default: 'primary'
@@ -1716,11 +1631,9 @@ const VHero = defineComponent({
     },
     ...defineSlotsProps$1()
   },
-
   setup(props, ctx) {
     return () => {
       let _slot;
-
       const TagName = props.tag;
       const HTagName = props.hTag;
       const adornment = renderSlotOrEmpty$1(ctx.slots, 'adornment');
@@ -1741,37 +1654,36 @@ const VHero = defineComponent({
       });
     };
   }
-
 });
 
 function _isSlot$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
 function createNavigationItemProps() {
-  return { ...createListTileProps(),
-    match: String,
+  return {
+    ...createListTileProps(),
+    match: [String, Array],
     depth: {
       type: Number,
       default: 0
     },
     nested: Boolean,
-    color: String // key: {
+    color: String
+    // key: {
     //   type: [String, Number],
     //   required: true,
     // },
-
   };
 }
+
 function resolveNavigationItemInput(input) {
   let label = input.label;
-  const props = { ...input
+  const props = {
+    ...input
   };
-
   if (typeof label === 'function') {
     label = label();
   }
-
   delete props.label;
   return {
     label,
@@ -1783,21 +1695,27 @@ function renderNavigationItemInput(input, extraProps) {
     label,
     props
   } = resolveNavigationItemInput(input);
-  return createVNode(VNavigationItem, { ...props,
+  return createVNode(VNavigationItem, {
+    ...props,
     ...extraProps
   }, _isSlot$c(label) ? label : {
     default: () => [label]
   });
 }
-const VNavigationItem = defineComponent({
+const TRIM_END_SLASH_RE = /\/$/;
+function trimEndSlash(sorce) {
+  return sorce ? sorce.replace(TRIM_END_SLASH_RE, '') : sorce;
+}
+const VNavigationItem = /* @__PURE__ */ defineComponent({
   name: 'VNavigationItem',
   inheritAttrs: false,
-  props: { ...createNavigationItemProps(),
+  props: {
+    ...createNavigationItemProps(),
     children: Array
   },
-  emits: { ...listTileEmits
+  emits: {
+    ...listTileEmits
   },
-
   setup(props, ctx) {
     const vui = useVui();
     const opened = ref(false);
@@ -1813,51 +1731,59 @@ 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,
       [`v-navigation-item--depth-${props.depth}`]: props.depth > 0
     }]);
-    const route = useRoute(); // const classes = computed(() => [
+    const route = useRoute();
+    // const classes = computed(() => [
     //   // {
     //   //   'v-navigation-item--matched': matched.value,
     //   // },
     // ]);
-
     watch(() => route.path, newPath => {
       const c = children.value;
       const m = match.value;
-
-      if (!c || !m) {
+      if (!c || !m || !m.length) {
         // matched.value = false;
         return;
       }
-
-      if (newPath.match(m)) {
-        open(); // matched.value = true;
+      const trimedNewPath = trimEndSlash(newPath);
+      if (m.some(_ => trimedNewPath.match(_))) {
+        open();
+        // matched.value = true;
       } else {
-        close(); // matched.value = false;
+        close();
+        // matched.value = false;
       }
+      // if (trimEndSlash(newPath).match(m)) {
+      //   open();
+      //   // matched.value = true;
+      // } else {
+      //   close();
+      //   // matched.value = false;
+      // }
     }, {
       immediate: true
-    }); // const iconPayload = () => opened.value;
-
+    });
+    // const iconPayload = () => opened.value;
     const _props = computed(() => {
       const c = children.value;
       let {
         endIcon
       } = props;
-
       if (c && !endIcon) {
         endIcon = vui.icon('navigationExpand');
-
         if (typeof endIcon === 'string') {
           const name = endIcon;
-
           endIcon = gen => {
             return gen({
               name,
@@ -1866,19 +1792,20 @@ const VNavigationItem = defineComponent({
           };
         }
       }
-
-      const __props = { ...props,
+      const __props = {
+        ...props,
         endIcon
       };
-      delete __props.children; // const _activeClass = props.activeClass;
+      delete __props.children;
+      // const _activeClass = props.activeClass;
       // const activeClass = `v-navigation-item--active${
       //   _activeClass ? ` ${_activeClass}` : ''
       // }`;
-
-      return { ...__props // activeClass,
+      return {
+        ...__props
+        // activeClass,
         // startIcon: toRawIconProp(__props.startIcon, iconPayload),
         // endIcon: toRawIconProp(__props.endIcon, iconPayload),
-
       };
     });
 
@@ -1886,25 +1813,22 @@ const VNavigationItem = defineComponent({
       if (!children.value) return;
       opened.value = true;
     }
-
     function close() {
       opened.value = false;
     }
-
     function toggle() {
       return opened.value ? close() : open();
     }
-
     const onClick = ev => {
       if (!to.value) {
         return toggle();
-      } // console.log('★');
+      }
+      // console.log('★');
       // open();
       // if (!to.value) {
       //   toggle();
       // }
       // ctx.emit('click', ev);
-
     };
 
     const onChangeActive = isActive => {
@@ -1925,13 +1849,11 @@ const VNavigationItem = defineComponent({
       // }
       ctx.emit('changeActive', isActive);
     };
-
     ctx.expose({
       close
     });
     return () => {
       let _slot;
-
       const _children = children.value;
       const fallbackTag = _children ? 'button' : undefined;
       return createVNode(Fragment, null, [createVNode(VListTile, mergeProps(ctx.attrs, _props.value, {
@@ -1950,19 +1872,17 @@ const VNavigationItem = defineComponent({
           ...child
         }, {
           startIconEmptySpace: _props.value.startIconEmptySpace,
-          depth: props.nested ? props.depth + 1 : props.depth // onClick,
+          depth: props.nested ? props.depth + 1 : props.depth
+          // onClick,
           // onChangeActive,
-
         }))]), [[vShow, opened.value]])]
       })]);
     };
   }
-
 });
 
-const VNavigation = defineComponent({
-  name: 'VNavigation',
-  props: {
+function createNavigationProps() {
+  return createPropsOptions$1({
     items: {
       type: Array,
       required: true
@@ -1973,8 +1893,11 @@ const VNavigation = defineComponent({
       default: true
     },
     caption: [String, Function]
-  },
-
+  });
+}
+const VNavigation = /* @__PURE__ */ defineComponent({
+  name: 'VNavigation',
+  props: createNavigationProps(),
   setup(props, ctx) {
     const items = computed(() => props.items);
     const color = useScopeColorClass(props);
@@ -1988,14 +1911,12 @@ const VNavigation = defineComponent({
     onBeforeUpdate(() => {
       itemsRef.value = [];
     });
-
     function setItemRef(item, itemRef) {
       itemsRef.value.push({
         key: item.key,
         ref: itemRef
       });
     }
-
     function onItemActivated(item) {
       itemsRef.value.forEach(({
         key,
@@ -2005,7 +1926,6 @@ const VNavigation = defineComponent({
         ref.close();
       });
     }
-
     return () => {
       const $caption = caption.value;
       return createVNode("nav", {
@@ -2019,27 +1939,24 @@ const VNavigation = defineComponent({
           setItemRef(item, ref);
         },
         onChangeActive: isActive => {
-          if (isActive
-          /* && item.children && item.children.length*/
-          ) {
+          if (isActive /* && item.children && item.children.length*/) {
             onItemActivated(item);
           }
         }
       }))]);
     };
   }
-
 });
 
-const VCheckable = defineComponent({
+const VCheckable = /* @__PURE__ */ defineComponent({
   name: 'VCheckable',
   props: {
     invalid: Boolean,
     disabled: Boolean,
     readonly: Boolean,
     checked: Boolean,
-    ...defineSlotsProps() // autoWidth: Boolean,
-
+    ...defineSlotsProps()
+    // autoWidth: Boolean,
   },
 
   setup(props, ctx) {
@@ -2047,8 +1964,8 @@ const VCheckable = defineComponent({
     const invalid = computed(() => props.invalid);
     const disabled = computed(() => props.disabled);
     const readonly = computed(() => props.readonly);
-    const checked = computed(() => props.checked); // const autoWidth = computed(() => props.autoWidth);
-
+    const checked = computed(() => props.checked);
+    // const autoWidth = computed(() => props.autoWidth);
     const classes = computed(() => {
       return [{
         'v-checkable--invalid': invalid.value,
@@ -2069,21 +1986,20 @@ const VCheckable = defineComponent({
       "class": "v-checkable__label"
     }, [renderSlotOrEmpty(ctx.slots, 'label')])]);
   }
-
 });
 
 const {
   props: props$7,
   emits: emits$7
 } = createFormSelectorItemSettings();
-const VCheckbox = defineComponent({
+const VCheckbox = /* @__PURE__ */ defineComponent({
   name: 'VCheckbox',
-  props: { ...props$7,
+  props: {
+    ...props$7,
     ...createControlProps(),
     indeterminate: Boolean
   },
   emits: emits$7,
-
   setup(props, ctx) {
     const nodeControl = useFormSelectorItemControl(props, ctx, {
       nodeType: VUI_CHECKBOX_SYMBOL,
@@ -2091,12 +2007,12 @@ const VCheckbox = defineComponent({
     });
     const control = useControl(props);
     const isIndeterminate = computed(() => props.indeterminate);
-    return { ...nodeControl.expose(),
+    return {
+      ...nodeControl.expose(),
       ...control,
       isIndeterminate
     };
   },
-
   render() {
     const {
       selectorItemControl,
@@ -2121,13 +2037,11 @@ const VCheckbox = defineComponent({
       label: () => renderSlotOrEmpty(this.$slots, 'default')
     });
   }
-
 });
 
 function _isSlot$b(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
 const VCheckboxGroup = defineFormSelectorComponent({
   name: 'VCheckboxGroup',
   defaultMultiple: true,
@@ -2145,24 +2059,24 @@ const {
   props: props$6,
   emits: emits$6
 } = createFormSelectorItemSettings();
-const VRadio = defineComponent({
+const VRadio = /* @__PURE__ */ defineComponent({
   name: 'VRadio',
-  props: { ...props$6,
+  props: {
+    ...props$6,
     ...createControlProps()
   },
   emits: emits$6,
-
   setup(props, ctx) {
     const nodeControl = useFormSelectorItemControl(props, ctx, {
       nodeType: VUI_RADIO_SYMBOL,
       parentNodeType: VUI_RADIO_GROUP_SYMBOL
     });
     const control = useControl(props);
-    return { ...nodeControl.expose(),
+    return {
+      ...nodeControl.expose(),
       ...control
     };
   },
-
   render() {
     const {
       selectorItemControl
@@ -2185,13 +2099,11 @@ const VRadio = defineComponent({
       label: () => renderSlotOrEmpty(this.$slots, 'default')
     });
   }
-
 });
 
 function _isSlot$a(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
 const VRadioGroup = defineFormSelectorComponent({
   name: 'VRadioGroup',
   nodeType: VUI_RADIO_GROUP_SYMBOL,
@@ -2208,30 +2120,28 @@ const {
   props: props$5,
   emits: emits$5
 } = createFormSelectorItemSettings();
-const VSwitch = defineComponent({
+const VSwitch = /* @__PURE__ */ defineComponent({
   name: 'VSwitch',
-  props: { ...props$5,
+  props: {
+    ...props$5,
     ...createControlProps()
   },
   emits: emits$5,
-
   setup(props, ctx) {
     const nodeControl = useFormSelectorItemControl(props, ctx, {
       nodeType: VUI_SWITCH_SYMBOL,
       parentNodeType: VUI_SWITCH_GROUP_SYMBOL
     });
     const control = useControl(props);
-
     if (typeof window !== 'undefined') {
       window.yy = {};
       window.yy[String(Date.now())] = nodeControl;
     }
-
-    return { ...nodeControl.expose(),
+    return {
+      ...nodeControl.expose(),
       ...control
     };
   },
-
   render() {
     const {
       selectorItemControl
@@ -2258,13 +2168,11 @@ const VSwitch = defineComponent({
       label: () => renderSlotOrEmpty(this.$slots, 'default')
     });
   }
-
 });
 
 function _isSlot$9(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
 const VSwitchGroup = defineFormSelectorComponent({
   name: 'VSwitchGroup',
   defaultMultiple: true,
@@ -2282,13 +2190,13 @@ const {
   props: props$4,
   emits: emits$4
 } = createFormSelectorItemSettings();
-const VOption = defineComponent({
+const VOption = /* @__PURE__ */ defineComponent({
   name: 'VOption',
-  props: { ...props$4,
+  props: {
+    ...props$4,
     ...createControlProps()
   },
   emits: emits$4,
-
   setup(props, ctx) {
     const nodeControl = useFormSelectorItemControl(props, ctx, {
       nodeType: VUI_OPTION_SYMBOL,
@@ -2302,11 +2210,11 @@ const VOption = defineComponent({
         'v-option--disabled': nodeControl.isDisabled
       }, control.classes.value];
     });
-    return { ...nodeControl.expose(),
+    return {
+      ...nodeControl.expose(),
       classes
     };
   },
-
   render() {
     const {
       selectorItemControl,
@@ -2323,17 +2231,16 @@ const VOption = defineComponent({
       "class": "v-option__label"
     }, [renderSlotOrEmpty(this.$slots, 'default')])]);
   }
-
 });
 
-const VOptionGroup = defineComponent({
+const VOptionGroup = /* @__PURE__ */ defineComponent({
   name: 'VOptionGroup',
-  props: { ...createFormSelectorItemGroupProps(),
+  props: {
+    ...createFormSelectorItemGroupProps(),
     // eslint-disable-next-line vue/require-prop-types
     label: {},
     ...defineSlotsProps()
   },
-
   setup(props, ctx) {
     const groupControl = useFormSelectorItemGroupControl(props, ctx, {
       parentNodeType: VUI_SELECT_SYMBOL
@@ -2346,12 +2253,12 @@ const VOptionGroup = defineComponent({
         'v-option-group--disabled': groupControl.isDisabled
       }];
     });
-    return { ...groupControl.expose(),
+    return {
+      ...groupControl.expose(),
       classes,
       labelSlot
     };
   },
-
   render() {
     const {
       labelSlot,
@@ -2365,12 +2272,12 @@ const VOptionGroup = defineComponent({
       "class": "v-option-group__label"
     }, [label]), renderSlotOrEmpty(this.$slots, 'default')]);
   }
-
 });
 
 const ADORNMENT_POSITIONS = ['start', 'end'];
 function createControlFieldProps() {
-  return { ...createPropsOptions({
+  return {
+    ...createPropsOptions({
       startAdornment: {},
       endAdornment: {},
       tabindex: {
@@ -2382,9 +2289,10 @@ function createControlFieldProps() {
     ...createControlProps()
   };
 }
-const VControlField = defineComponent({
+const VControlField = /* @__PURE__ */ defineComponent({
   name: 'VControlField',
-  props: { ...createControlFieldProps(),
+  props: {
+    ...createControlFieldProps(),
     focused: Boolean,
     autoHeight: Boolean,
     ...defineSlotsProps(),
@@ -2394,7 +2302,6 @@ const VControlField = defineComponent({
   emits: {
     click: ev => true
   },
-
   setup(props, ctx) {
     const parentNode = useParentFormNode();
     const control = useControl(props);
@@ -2403,11 +2310,11 @@ const VControlField = defineComponent({
     const disabled = computed(() => !!parentNode && parentNode.isDisabled);
     const invalid = computed(() => !!parentNode && parentNode.invalid);
     const autoHeight = computed(() => props.autoHeight);
-    const readonly = computed(() => !!parentNode && parentNode.isReadonly); // const computedTabindex = computed(() =>
+    const readonly = computed(() => !!parentNode && parentNode.isReadonly);
+    // const computedTabindex = computed(() =>
     //   disabled.value ? -1 : props.tabindex,
     // );
     // const isOutlined = computed(() => inputBox.variant.value === 'outlined');
-
     const colorProvider = useVuiColorProvider();
     const classes = computed(() => {
       const classes = ['v-control-field', `v-control-field--${inputBox.variant.value}`, {
@@ -2427,10 +2334,8 @@ const VControlField = defineComponent({
       });
       return slots;
     });
-
     const renderAdornment = position => {
       let child;
-
       if (position === 'end' && props.loading) {
         child = createVNode(VProgressCircular, {
           "indeterminate": true,
@@ -2439,15 +2344,14 @@ const VControlField = defineComponent({
       } else {
         child = renderSlotOrEmpty(resolvedSlots.value, position);
       }
-
       if (!child) return;
       return createVNode("div", {
         "class": ['v-control-field__adornment', `v-control-field__adornment--${position}`]
       }, [child]);
     };
-
     const handleClick = ev => {
-      ctx.emit('click', ev); // if (ev.target === hostElRef.value) {
+      ctx.emit('click', ev);
+      // if (ev.target === hostElRef.value) {
       //   ctx.emit('clickHost', ev);
       // }
     };
@@ -2456,8 +2360,8 @@ const VControlField = defineComponent({
       classes,
       renderAdornment,
       hostElRef: () => hostElRef,
-      handleClick // computedTabindex,
-
+      handleClick
+      // computedTabindex,
     };
   },
 
@@ -2470,23 +2374,22 @@ const VControlField = defineComponent({
       "class": "v-control-field__body"
     }, [renderSlotOrEmpty(this.$slots, 'default')]), this.renderAdornment('end')]);
   }
-
 });
 
 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
 } = createFormSelectorSettings();
-const VSelect = defineComponent({
+const VSelect = /* @__PURE__ */ defineComponent({
   name: 'VSelect',
-  props: { ...props$3,
+  props: {
+    ...props$3,
     ...createFormControlProps(),
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
@@ -2496,22 +2399,19 @@ const VSelect = defineComponent({
       placeholder: String,
       loadingMessage: {},
       failedToLoadItemsMessage: {}
-    })
+    }),
+    closeOnNavigation: Boolean
   },
   emits: emits$3,
-
   setup(props, ctx) {
     const menuRef = ref(null);
     const menuOpened = ref(false);
-
     const showMenu = () => {
       menuOpened.value = true;
     };
-
     const closeMenu = () => {
       menuOpened.value = false;
     };
-
     const inputControl = useFormSelectorControl(props, ctx, {
       nodeType: VUI_SELECT_SYMBOL,
       onSelectItem: item => {
@@ -2531,14 +2431,12 @@ const VSelect = defineComponent({
       const slot = resolveVNodeChildOrSlots(props.failedToLoadItemsMessage, vui.setting('failedToLoadDataMessage'), 'Failed to load data.');
       return slot && slot(vui);
     });
-
     const focus = opts => {
       fieldRef.value && fieldRef.value.focus(opts);
     };
-
     const renderSelections = selectedItems => {
+      const selectionSlot = ctx.slots.selection;
       const children = [];
-
       if (inputControl.itemsLoadFailed) {
         children.push(createVNode("span", {
           "class": "v-select__placeholder"
@@ -2552,18 +2450,19 @@ const VSelect = defineComponent({
           if (index > 0) {
             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", {
           "class": "v-select__placeholder"
         }, [props.placeholder]));
       }
-
       return children;
     };
-
     const clearKeyFocused = () => {
       const menu = menuRef.value;
       if (!menu) return;
@@ -2572,7 +2471,6 @@ const VSelect = defineComponent({
       const els = Array.from(bodyEl.querySelectorAll('.v-option'));
       els.forEach(el => el.classList.remove('v-option--key-focused'));
     };
-
     const getItemElements = () => {
       const menu = menuRef.value;
       if (!menu) return;
@@ -2588,7 +2486,6 @@ const VSelect = defineComponent({
       if (!els.length) return;
       return els;
     };
-
     const arrowKeyHandler = ev => {
       const {
         key
@@ -2603,22 +2500,18 @@ const VSelect = defineComponent({
         length
       } = els;
       const isUp = key === 'ArrowUp';
-
       if (currentIndex == null) {
         nextIndex = isUp ? length - 1 : 0;
       } else {
         const shiftAmount = key === 'ArrowUp' ? -1 : 1;
         nextIndex = currentIndex + shiftAmount;
-
         if (nextIndex < 0) {
           nextIndex = length - 1;
         } else if (nextIndex >= length) {
           nextIndex = 0;
         }
       }
-
       const nextEl = els[nextIndex];
-
       if (nextEl) {
         clearKeyFocused();
         nextEl.classList.add('v-option--key-focused');
@@ -2630,7 +2523,6 @@ const VSelect = defineComponent({
         ev.preventDefault();
       }
     };
-
     const choiceKeyHandler = ev => {
       const {
         key
@@ -2639,7 +2531,6 @@ const VSelect = defineComponent({
       const els = getItemElements();
       if (!els) return;
       const currentEl = els.find(el => el.classList.contains('v-option--key-focused'));
-
       if (currentEl) {
         const ev = new MouseEvent('click', {
           view: window,
@@ -2653,19 +2544,18 @@ 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
     });
-    return { ...inputControl.expose(),
+    return {
+      ...inputControl.expose(),
       ...control,
       iconName,
       menuOpened,
@@ -2678,7 +2568,6 @@ const VSelect = defineComponent({
       clearKeyFocused
     };
   },
-
   render() {
     const {
       nodeControl,
@@ -2689,7 +2578,6 @@ const VSelect = defineComponent({
     const children = this.$slots.default && this.$slots.default() || [];
     const propGroups = this.propGroups.map(group => {
       let _slot;
-
       return createVNode(VOptionGroup, {
         "key": group.id,
         "groupId": group.id,
@@ -2718,10 +2606,12 @@ const VSelect = defineComponent({
       "onClickLabel": ev => {
         this.focus();
       }
-    }, { ...this.$slots,
+    }, {
+      ...this.$slots,
       default: () => createVNode(VMenu, {
         "width": "fit",
         "maxWidth": "fit",
+        "closeOnNavigation": this.closeOnNavigation,
         "distance": 0,
         "alwaysRender": true,
         "modelValue": this.menuOpened,
@@ -2750,20 +2640,18 @@ const VSelect = defineComponent({
               let t = ev.target;
               const count = 0;
               let hit = false;
-
               while (count < 5) {
                 if (t.classList.contains('v-select__input')) {
                   hit = true;
                   break;
                 }
-
                 t = t.parentElement;
               }
-
               control.show(hit ? t : ev);
             }
           }
-        }, { ...this.$slots,
+        }, {
+          ...this.$slots,
           default: () => [withDirectives(createVNode("select", {
             "class": "v-select__input__element",
             "name": this.name,
@@ -2795,7 +2683,6 @@ const VSelect = defineComponent({
                 }
               }, null);
             }
-
             if (this.clearable && this.nodeControl.value != null) {
               return createVNode(VButton, {
                 "key": "clear",
@@ -2807,7 +2694,6 @@ const VSelect = defineComponent({
                 }
               }, null);
             }
-
             return createVNode(VIcon, {
               "key": "icon",
               "name": this.iconName,
@@ -2818,10 +2704,9 @@ const VSelect = defineComponent({
       })
     });
   }
-
 });
 
-const VTextCounter = defineComponent({
+const VTextCounter = /* @__PURE__ */ defineComponent({
   name: 'VTextCounter',
   props: {
     length: {
@@ -2833,22 +2718,20 @@ const VTextCounter = defineComponent({
       required: true
     }
   },
-
   render() {
     return createVNode("span", {
       "class": "v-text-counter"
     }, [`${this.length} / ${this.maxlength}`]);
   }
-
 });
 
 const {
   props: props$2,
   emits: emits$2
 } = createTextInputSettings();
-
 function createTextFieldProps() {
-  return { ...props$2,
+  return {
+    ...props$2,
     ...createFormControlProps(),
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
@@ -2856,23 +2739,21 @@ function createTextFieldProps() {
     ...defineSlotsProps()
   };
 }
-
-const VTextField = defineComponent({
+const VTextField = /* @__PURE__ */ defineComponent({
   name: 'VTextField',
   props: createTextFieldProps(),
   emits: emits$2,
-
   setup(props, ctx) {
     const inputControl = useTextInputControl(props, ctx, {
       nodeType: VUI_TEXT_FIELD_SYMBOL
     });
     const control = useControl(props);
     useControlField(props);
-    return { ...inputControl.expose(),
+    return {
+      ...inputControl.expose(),
       ...control
     };
   },
-
   render() {
     return createVNode(VFormControl, {
       "nodeControl": this.nodeControl,
@@ -2886,13 +2767,15 @@ const VTextField = defineComponent({
       "onClickLabel": ev => {
         this.focus();
       }
-    }, { ...this.$slots,
+    }, {
+      ...this.$slots,
       default: () => createVNode(VControlField, {
         "class": "v-text-field__input",
         "startAdornment": this.startAdornment,
         "endAdornment": this.endAdornment,
         "size": this.size
-      }, { ...this.$slots,
+      }, {
+        ...this.$slots,
         default: () => this.textInputControl.createInputElement({
           class: 'v-text-field__input__element'
         })
@@ -2906,35 +2789,33 @@ const VTextField = defineComponent({
       }
     });
   }
-
 });
 
-const VNumberField = defineComponent({
+const VNumberField = /* @__PURE__ */ defineComponent({
   name: 'VNumberField',
-  props: { ...undefined,
+  props: {
+    ...undefined,
     modelValue: {
       type: Number,
       default: null
     }
   },
-  emits: { ...undefined,
+  emits: {
+    ...undefined,
     'update:modelValue': value => true,
     change: value => true
   },
-
   setup(props, ctx) {
     const toString = value => {
       if (value == null) return '';
       return String(value);
     };
-
     const toNumber = value => {
       if (value == null) return null;
       if (typeof value === 'number') return value;
       if (value.trim() === '') return null;
       return Number(value);
     };
-
     return () => {
       return createVNode(VTextField, mergeProps(ctx.attrs, {
         "type": "number",
@@ -2948,16 +2829,16 @@ const VNumberField = defineComponent({
       }), ctx.slots);
     };
   }
-
 });
 
 const {
   props: props$1,
   emits: emits$1
 } = createTextareaSettings();
-const VTextarea = defineComponent({
+const VTextarea = /* @__PURE__ */ defineComponent({
   name: 'VTextarea',
-  props: { ...props$1,
+  props: {
+    ...props$1,
     ...createFormControlProps(),
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
@@ -2965,7 +2846,6 @@ const VTextarea = defineComponent({
     ...defineSlotsProps()
   },
   emits: emits$1,
-
   setup(props, ctx) {
     const vui = useVui();
     const inputControl = useTextareaControl(props, ctx, {
@@ -2974,11 +2854,11 @@ const VTextarea = defineComponent({
     });
     const control = useControl(props);
     useControlField(props);
-    return { ...inputControl.expose(),
+    return {
+      ...inputControl.expose(),
       ...control
     };
   },
-
   render() {
     return createVNode(VFormControl, {
       "nodeControl": this.nodeControl,
@@ -2992,14 +2872,16 @@ const VTextarea = defineComponent({
       "onClickLabel": ev => {
         this.focus();
       }
-    }, { ...this.$slots,
+    }, {
+      ...this.$slots,
       default: () => createVNode(VControlField, {
         "class": "v-textarea__input",
         "size": this.size,
         "autoHeight": true,
         "startAdornment": this.startAdornment,
         "endAdornment": this.endAdornment
-      }, { ...this.$slots,
+      }, {
+        ...this.$slots,
         default: () => this.textareaControl.createInputElement({
           class: 'v-textarea__input__element'
         })
@@ -3013,7 +2895,6 @@ const VTextarea = defineComponent({
       }
     });
   }
-
 });
 
 const EDITOR_EVENTS = [
@@ -3135,10 +3016,10 @@ function resolveRawWysiwygEditorTools(rawTools, vui) {
 function _isSlot$7(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
-const VWysiwygEditor = defineComponent({
+const VWysiwygEditor = /* @__PURE__ */ defineComponent({
   name: 'VWysiwygEditor',
-  props: { // ...props,
+  props: {
+    // ...props,
     ...createTextableProps(),
     ...createFormControlProps(),
     ...createControlFieldProps(),
@@ -3157,9 +3038,9 @@ const VWysiwygEditor = defineComponent({
     disabledMinHeight: Boolean,
     disabledMaxHeight: Boolean
   },
-  emits: { ...createTextableEmits()
+  emits: {
+    ...createTextableEmits()
   },
-
   setup(props, ctx) {
     const vui = useVui();
     const textRef = ref('');
@@ -3201,16 +3082,15 @@ const VWysiwygEditor = defineComponent({
       orderedList: false,
       history: false,
       italic: false
-    }), // Linter.configure({
+    }),
+    // Linter.configure({
     //   plugins: [BadWords(['abc', 'evidently']), Punctuation, HeadingLevel],
     // }),
     ...resolveRawWysiwygExtensions(props.extensions, initializeCtx), ...wysiwygSettings.value.extensions];
-
     const updateEditable = () => {
       if (!editor.value) return;
       editor.value.setEditable(inputControl.canOperation);
     };
-
     watch(() => inputControl.canOperation, updateEditable);
     watch(() => props.modelValue, modelValue => {
       const $editor = editor.value;
@@ -3224,7 +3104,8 @@ const VWysiwygEditor = defineComponent({
       textRef.value = editor.getText();
       updateEditable();
     });
-    const editor = useEditor({ ...initializeCtx.editorOptions(),
+    const editor = useEditor({
+      ...initializeCtx.editorOptions(),
       autofocus: props.autofocus,
       content: props.modelValue,
       extensions,
@@ -3233,33 +3114,29 @@ const VWysiwygEditor = defineComponent({
           class: 'v-wysiwyg-editor__input__prose'
         }
       }
-    }); // editor.value.state.doc.content
-
+    });
+    // editor.value.state.doc.content
     const focus = (position, options) => {
       if (!editor.value) return;
       return editor.value.chain().focus(position, options);
     };
-
     const blur = () => {
       if (!editor.value) return;
       return editor.value.chain().blur();
     };
-
     const wysiwygContext = computed(() => {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const _editor = editor.value; // if (!_editor) {
+      const _editor = editor.value;
+      // if (!_editor) {
       //   throw new Error('missing editor value');
       // }
-
       return {
         vui,
         editor: _editor
       };
     });
-
     const createTools = (bubbleMenu = false) => {
       let _slot;
-
       const {
         value: settings
       } = wysiwygSettings;
@@ -3285,11 +3162,9 @@ const VWysiwygEditor = defineComponent({
         const isDisabled = !inputControl.canOperation || !!_editor && resolveContextableValue(context, disabled);
         let iconName;
         let child;
-
         if (typeof icon === 'function') {
           if (_editor) {
             const _child = icon(context);
-
             if (typeof _child === 'function') {
               child = _child();
             } else {
@@ -3299,7 +3174,6 @@ const VWysiwygEditor = defineComponent({
         } else {
           iconName = icon;
         }
-
         if (!iconName && child == null) return;
         return createVNode(VButton, {
           "tabindex": -1,
@@ -3315,7 +3189,6 @@ const VWysiwygEditor = defineComponent({
         default: () => [_slot]
       });
     };
-
     onBeforeUnmount(() => {
       editor.value && editor.value.destroy();
     });
@@ -3328,7 +3201,6 @@ const VWysiwygEditor = defineComponent({
       createTools
     };
   },
-
   render() {
     return createVNode(VFormControl, {
       "nodeControl": this.nodeControl,
@@ -3347,7 +3219,8 @@ const VWysiwygEditor = defineComponent({
           scrollIntoView: true
         });
       }
-    }, { ...this.$slots,
+    }, {
+      ...this.$slots,
       default: () => {
         const {
           editor
@@ -3360,10 +3233,10 @@ const VWysiwygEditor = defineComponent({
           "startAdornment": this.startAdornment,
           "endAdornment": this.endAdornment,
           "size": this.size
-        }, { ...this.$slots,
+        }, {
+          ...this.$slots,
           default: () => {
             let _slot2;
-
             return createVNode("div", {
               "class": "v-wysiwyg-editor__body"
             }, [createVNode(EditorContent, mergeProps({
@@ -3389,9 +3262,7 @@ const VWysiwygEditor = defineComponent({
       }
     });
   }
-
 });
-
 function resolveContextableValue(ctx, source) {
   return typeof source === 'function' ? source(ctx) : source;
 }
@@ -3399,11 +3270,9 @@ function resolveContextableValue(ctx, source) {
 const PROBLEM_CLASS_NAME = 'v-linter__problem';
 const ISSUE_ICON_CLASS_NAME = 'v-linter__issue-icon';
 const ISSUE_DATASET_NAME = 'data-issue-id';
-
 function resolveWysiwygLinterFixMessage(message) {
   return typeof message === 'function' ? message() : message;
 }
-
 function renderIcon(view, issue) {
   const {
     level = 'warning'
@@ -3412,14 +3281,11 @@ function renderIcon(view, issue) {
   const message = resolveWysiwygLinterFixMessage(issue.message);
   icon.className = `${ISSUE_ICON_CLASS_NAME} ${level}-scope`;
   icon.setAttribute(ISSUE_DATASET_NAME, issue.id);
-
   if (typeof message === 'string') {
     icon.title = message;
   }
-
   return icon;
 }
-
 function runAllLinterPlugins(doc, plugins) {
   const decorations = [];
   const issues = plugins.map(RegisteredLinterPlugin => {
@@ -3436,7 +3302,6 @@ function runAllLinterPlugins(doc, plugins) {
       'data-issue-id': issue.id,
       title: typeof message === 'string' ? message : undefined
     }));
-
     if (icon) {
       decorations.push(Decoration.widget(issue.from, view => renderIcon(view, issue)));
     }
@@ -3447,7 +3312,6 @@ function runAllLinterPlugins(doc, plugins) {
     decorationSet
   };
 }
-
 const WysiwygLinter = createWysiwygExtension(ctx => {
   function showMenu(view, issue, event) {
     const message = resolveWysiwygLinterFixMessage(issue.message);
@@ -3476,22 +3340,18 @@ const WysiwygLinter = createWysiwygExtension(ctx => {
       }, [resolveWysiwygLinterFixMessage(fixer.message)])])]))])])
     });
   }
-
   return Extension.create({
     name: 'linter',
-
     addOptions() {
       return {
         plugins: []
       };
     },
-
     addStorage() {
       return {
         issues: []
       };
     },
-
     addProseMirrorPlugins() {
       const {
         plugins
@@ -3499,7 +3359,6 @@ const WysiwygLinter = createWysiwygExtension(ctx => {
       const {
         storage
       } = this;
-
       const runAll = doc => {
         const {
           issues,
@@ -3508,14 +3367,11 @@ const WysiwygLinter = createWysiwygExtension(ctx => {
         storage.issues = issues;
         return decorationSet;
       };
-
       const getIssue = id => storage.issues.find(issue => issue.id === id);
-
       const getIssueElementByEvent = source => {
         if (!source || !(source instanceof HTMLElement)) {
           return;
         }
-
         const issueId = source.getAttribute(ISSUE_DATASET_NAME);
         const issue = issueId && getIssue(issueId);
         if (!issue) return;
@@ -3523,7 +3379,6 @@ const WysiwygLinter = createWysiwygExtension(ctx => {
           issue
         };
       };
-
       const linterPlugin = new Plugin({
         key: new PluginKey('linter'),
         state: {
@@ -3532,24 +3387,19 @@ const WysiwygLinter = createWysiwygExtension(ctx => {
           }) {
             return runAll(doc);
           },
-
           apply(transaction, oldState) {
             return transaction.docChanged ? runAll(transaction.doc) : oldState;
           }
-
         },
         props: {
           decorations(state) {
             return linterPlugin.getState(state);
           },
-
           handleClick(view, _, event) {
             const info = getIssueElementByEvent(event.target);
-
             if (!info) {
               return false;
             }
-
             const {
               issue
             } = info;
@@ -3557,19 +3407,15 @@ const WysiwygLinter = createWysiwygExtension(ctx => {
               from,
               to
             } = issue;
-
             const focus = () => view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, from, to)).scrollIntoView());
-
             focus();
             showMenu(view, issue, event);
             return true;
           }
-
         }
       });
       return [linterPlugin];
     }
-
   });
 });
 
@@ -3632,9 +3478,7 @@ function WysiwygLinterBadWords(words) {
         if (!node.isText) {
           return;
         }
-
         const matches = regex.exec(node.text);
-
         if (matches) {
           const fixValue = matches[0] + '!!!!!';
           this.record({
@@ -3658,7 +3502,6 @@ function WysiwygLinterBadWords(words) {
       });
       return this;
     }
-
   };
 }
 
@@ -3946,13 +3789,11 @@ function createWysiwygColorTool(opts) {
                 color
               } = item;
               let command = ctx.editor.chain().focus();
-
               if (color) {
                 command = command.setColor(color);
               } else {
                 command = command.unsetColor();
               }
-
               command.run();
               stack.close();
             }
@@ -3971,7 +3812,6 @@ function createWysiwygColorTool(opts) {
     };
     return tool;
   };
-
   return WysiwygColorTool;
 }
 
@@ -3982,17 +3822,18 @@ const {
   nodeType: VUI_FORM_SYMBOL
 });
 function createVFormProps() {
-  return { ...props,
+  return {
+    ...props,
     ...createControlProps(),
-    ...defineSlotsProps() // disableAutoScroll: Boolean,
-
+    ...defineSlotsProps()
+    // disableAutoScroll: Boolean,
   };
 }
-const VForm = defineComponent({
+
+const VForm = /* @__PURE__ */ defineComponent({
   name: 'VForm',
   props: createVFormProps(),
   emits,
-
   setup(props, ctx) {
     const vui = useVui();
     const nodeControl = useForm(props, ctx, {
@@ -4015,11 +3856,11 @@ const VForm = defineComponent({
       }];
     });
     useControl(props);
-    return { ...nodeControl.expose(),
+    return {
+      ...nodeControl.expose(),
       classes
     };
   },
-
   render() {
     const {
       form
@@ -4032,14 +3873,12 @@ const VForm = defineComponent({
       "onSubmit": form.handleSubmit
     }, [renderSlotOrEmpty(this.$slots, 'default', form)]);
   }
-
 });
 
 function _isSlot$6(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
-const VTab = defineComponent({
+const VTab = /* @__PURE__ */ defineComponent({
   name: 'VTab',
   props: {
     value: {
@@ -4053,7 +3892,6 @@ const VTab = defineComponent({
   emits: {
     click: ev => true
   },
-
   setup(props, ctx) {
     const classesRef = computed(() => ({
       'v-tab--active': props.active
@@ -4071,13 +3909,11 @@ const VTab = defineComponent({
         active
       } = props;
       const classes = ['v-tab', classesRef.value];
-
       const children = createVNode("span", {
         "class": "v-tab__content"
       }, [icon && resolveRawIconProp(active, icon, {
         class: 'v-tab__icon'
       }), renderSlotOrEmpty$1(ctx.slots)]);
-
       if (to) {
         const replace = typeof to === 'string' ? undefined : to.replace;
         return createVNode(RouterLink, {
@@ -4099,23 +3935,21 @@ const VTab = defineComponent({
       }
     };
   }
-
 });
 
 function _isSlot$5(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
-const VTabs = defineComponent({
+const VTabs = /* @__PURE__ */ defineComponent({
   name: 'VTabs',
   props: {
     modelValue: String,
     items: {
       type: Array,
-      required: true // validator: (value: VTabsItem[]) => {
+      required: true
+      // validator: (value: VTabsItem[]) => {
       //   return Array.isArray(value) && value.length > 0;
       // },
-
     },
 
     /**
@@ -4125,12 +3959,10 @@ const VTabs = defineComponent({
       type: Number,
       default: 20
     },
-
     /**
      * ルーター同期する場合設定する
      */
     router: Function,
-
     /**
      * ルーティング連携を行う際に、クエリベースのURLマッチングを行う
      * タブのURLが /page1?tab=xxx のようになる時に設定する
@@ -4144,7 +3976,6 @@ const VTabs = defineComponent({
     'update:modelValue': newValue => true,
     change: newValue => true
   },
-
   setup(props, ctx) {
     const vui = useVui();
     const internalValueRef = ref(null);
@@ -4177,7 +4008,6 @@ const VTabs = defineComponent({
         } = item;
         const active = current === value;
         let location;
-
         if (router) {
           const to = router(value);
           const route = vui.router.resolve(to);
@@ -4186,31 +4016,26 @@ const VTabs = defineComponent({
             route
           };
         }
-
-        return { ...item,
+        return {
+          ...item,
           active,
           location
         };
       });
     });
-
     const setTabRef = ref => {
       tabRefs.value.push(ref);
-    }; // const isMountedRef = ref(false);
-
-
+    };
+    // const isMountedRef = ref(false);
     function setupInternalValue(routable) {
       let value = props.modelValue;
-
       if (value == null || value === '') {
         const firstItem = props.items[0];
         if (!firstItem) return;
         value = firstItem.value;
       }
-
       if (internalValueRef.value !== value) {
         internalValueRef.value = value;
-
         if (routable) {
           const {
             router
@@ -4234,48 +4059,37 @@ const VTabs = defineComponent({
         }
       }
     }
-
     async function to(value) {
       const {
         value: currentValue
       } = currentRef;
-
       if (currentValue === value) {
         return;
       }
-
       const {
         onBeforeChange
       } = props;
-
       if (onBeforeChange) {
         let result = onBeforeChange(value, currentRef.value);
-
         if (isPromise(result)) {
           result = await result;
         }
-
         console.log(result);
-
         if (result === false) {
           return;
         }
       }
-
       currentRef.value = value;
     }
-
     function cancelScroll() {
       if (scrollResult) {
         scrollResult.cancel();
         scrollResult = undefined;
       }
     }
-
     const findTab = tab => {
       return tabRefs.value.find(t => t.value === tab);
     };
-
     function scrollToTab(tabValue) {
       const tab = findTab(tabValue);
       if (!tab) return;
@@ -4302,15 +4116,12 @@ const VTabs = defineComponent({
       if (hiddenLeft > 0) hiddenLeft += autoScrollOffset;
       if (hiddenRight > 0) hiddenRight += autoScrollOffset;
       let scrollAmmount = 0;
-
       if (hiddenRight > 0) {
         scrollAmmount = hiddenRight;
       }
-
       if (hiddenLeft > 0) {
         scrollAmmount = -hiddenLeft;
       }
-
       if (Math.abs(scrollAmmount) > 0) {
         cancelScroll();
         scrollResult = scroller.scroller.by(scrollAmmount, 0, {
@@ -4318,7 +4129,6 @@ const VTabs = defineComponent({
         });
       }
     }
-
     watch(() => props.modelValue, () => setupInternalValue(true));
     watch(() => props.items, () => setupInternalValue(), {
       deep: true
@@ -4334,7 +4144,6 @@ const VTabs = defineComponent({
       }) => {
         return location && location.route.fullPath === path;
       });
-
       if (hit) {
         currentRef.value = hit.value;
       }
@@ -4364,15 +4173,12 @@ const VTabs = defineComponent({
         if (!label) {
           label = itemSlot;
         }
-
         const children = typeof label === 'function' ? label({
           value,
           active,
           vui
         }) : label;
-
         const _to = location && location.to || undefined;
-
         return createVNode(VTab, {
           "value": value,
           "to": _to,
@@ -4403,22 +4209,20 @@ const VTabs = defineComponent({
       })]);
     };
   }
-
 });
 
 function _isSlot$4(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
-const VBreadcrumbs = defineComponent({
+const VBreadcrumbs = /* @__PURE__ */ defineComponent({
   name: 'VBreadcrumbs',
   props: {
     items: {
       type: Array,
       default: () => []
     },
-    divider: [String, Function] // ...defineSlotsProps<{}>(),
-
+    divider: [String, Function]
+    // ...defineSlotsProps<{}>(),
   },
 
   setup(props, ctx) {
@@ -4435,33 +4239,30 @@ 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,
+        return {
+          ...item,
           disabled,
           text: typeof text === 'function' ? text(vui) : text
         };
       });
     });
     const lengthRef = computed(() => computedItemsRef.value.length);
-
     const defaultDividerSlot = () => {
       return [createVNode("i", {
         "class": "v-breadcrumbs__divider__icon"
       }, null)];
     };
-
     return () => {
       if (lengthRef.value < 1) return;
       let dividerSlot;
       const propDivider = props.divider;
-
       if (propDivider) {
         dividerSlot = typeof propDivider === 'function' ? propDivider : () => propDivider;
       } else {
         dividerSlot = defaultDividerSlot;
       }
-
       const children = [];
       computedItemsRef.value.forEach((item, index) => {
         const {
@@ -4470,10 +4271,8 @@ const VBreadcrumbs = defineComponent({
           disabled,
           to
         } = item;
-
         if (index > 0) {
           const divider = dividerSlot(vui);
-
           if (divider) {
             children.push(createVNode("li", {
               "class": "v-breadcrumbs__divider",
@@ -4481,19 +4280,15 @@ const VBreadcrumbs = defineComponent({
             }, [divider]));
           }
         }
-
         const myChildren = [];
-
         if (icon) {
           const $icon = resolveRawIconProp(false, icon, {
             class: 'v-breadcrumbs__icon'
           });
-
           if ($icon) {
             myChildren.push($icon);
           }
         }
-
         if (text) myChildren.push(text);
         const itemChild = to ? createVNode(VLink, {
           "class": "v-breadcrumbs__link",
@@ -4516,14 +4311,12 @@ const VBreadcrumbs = defineComponent({
       }, [children])]);
     };
   }
-
 });
 
 function _isSlot$3(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
-const VContentSwitcher = defineComponent({
+const VContentSwitcher = /* @__PURE__ */ defineComponent({
   name: 'VContentSwitcher',
   props: {
     modelValue: String,
@@ -4536,7 +4329,6 @@ const VContentSwitcher = defineComponent({
   emits: {
     'update:modelValue': modelValue => true
   },
-
   setup(props, ctx) {
     const internalValueRef = ref('');
     const transitionRef = ref('');
@@ -4560,31 +4352,26 @@ const VContentSwitcher = defineComponent({
       } = props;
       if (settings === true) settings = {};
       if (!settings) return;
-      return { ...settings
+      return {
+        ...settings
       };
     });
-
     function seeTop(options) {
       const scoller = getDocumentScroller$1();
       const {
         value: anchor
       } = anchorRef;
-
       if (anchor) {
         scoller.toElement(anchor, options);
       }
     }
-
     function getEl() {
       const el = elRef.value;
-
       if (!el) {
         throw new Error('missing element');
       }
-
       return el;
     }
-
     watch(() => props.modelValue, (value, beforeValue) => {
       if (value == null) return;
       internalValueRef.value = value;
@@ -4593,19 +4380,16 @@ const VContentSwitcher = defineComponent({
       const index = order.indexOf(value);
       const beforeIndex = order.indexOf(beforeValue);
       let transition = 'fade';
-
       if (index !== -1 && beforeIndex !== -1) {
         if (index > beforeIndex) transition = 'v-content-switcher-next';
         if (index < beforeIndex) transition = 'v-content-switcher-prev';
       }
-
       transitionRef.value = transition;
     }, {
       immediate: true
     });
     watch(currentRef, () => {
       const autotopSettings = autotopSettingsRef.value;
-
       if (autotopSettings && props.modelValue != null) {
         seeTop(autotopSettings);
       }
@@ -4614,14 +4398,12 @@ const VContentSwitcher = defineComponent({
       const current = currentRef.value;
       const children = renderSlotOrEmpty$1(ctx.slots) || [];
       const currentSlot = ctx.slots[current];
-
       if (currentSlot) {
         children.push(createVNode("div", {
           "class": "v-content-switcher__content",
           "key": current
         }, [currentSlot(this)]));
       }
-
       return createVNode("div", {
         "class": "v-content-switcher",
         "ref": elRef
@@ -4650,7 +4432,6 @@ const VContentSwitcher = defineComponent({
       })]);
     };
   }
-
 });
 
 const DATA_TABLE_DEFAULTS = {
@@ -4669,13 +4450,12 @@ const DATA_TABLE_DEFAULTS = {
 };
 function configureDataTableDefaults(defaults) {
   Object.assign(DATA_TABLE_DEFAULTS, defaults);
-
   if (!defaults.defaultOrder && defaults.ascQueryValue) {
     DATA_TABLE_DEFAULTS.defaultOrder = defaults.ascQueryValue;
   }
 }
 const SELECTABLE_HEADER_SYMBOL = '__selectable_header__';
-const VDataTable = defineComponent({
+const VDataTable = /* @__PURE__ */ defineComponent({
   name: 'VDataTable',
   props: {
     /** 選択中のkeyの配列 */
@@ -4687,7 +4467,6 @@ const VDataTable = defineComponent({
       type: String,
       default: () => DATA_TABLE_DEFAULTS.itemKey
     },
-
     /**
      * ページネーションクエリ名
      */
@@ -4695,7 +4474,6 @@ const VDataTable = defineComponent({
       type: String,
       default: () => DATA_TABLE_DEFAULTS.pageQuery
     },
-
     /**
      * ソートクエリ名
      */
@@ -4703,7 +4481,6 @@ const VDataTable = defineComponent({
       type: String,
       default: () => DATA_TABLE_DEFAULTS.sortQuery
     },
-
     /**
      * 表示順クエリ名
      */
@@ -4711,7 +4488,6 @@ const VDataTable = defineComponent({
       type: String,
       default: () => DATA_TABLE_DEFAULTS.orderQuery
     },
-
     /**
      * 検索クエリ名
      */
@@ -4719,7 +4495,6 @@ const VDataTable = defineComponent({
       type: [String, Array],
       default: () => DATA_TABLE_DEFAULTS.searchQuery
     },
-
     /**
      * リミット件数クエリ名
      */
@@ -4774,7 +4549,6 @@ const VDataTable = defineComponent({
   emits: {
     input: selecteds => true
   },
-
   setup(props, ctx) {
     const vui = useVui();
     const bootedRef = ref(false);
@@ -4788,13 +4562,11 @@ const VDataTable = defineComponent({
         selectable
       } = props;
       const ret = [];
-
       if (selectable) {
         ret.push({
           key: SELECTABLE_HEADER_SYMBOL
         });
       }
-
       ret.push(...headers.filter(h => !h.hidden));
       return ret;
     });
@@ -4802,34 +4574,27 @@ const VDataTable = defineComponent({
       let {
         searchQuery
       } = props;
-
       if (!searchQuery) {
         return [];
       }
-
       if (!Array.isArray(searchQuery)) {
         searchQuery = [searchQuery];
       }
-
       const values = [];
       searchQuery.forEach(query => {
         const value = vui.location.getQuery(query);
-
         if (value == null || value === '') {
           return;
         }
-
         if (typeof value === 'object' && !Object.keys(value).length) {
           return;
         }
-
         values.push(value);
       });
       return values;
     });
     const emptyMessage = computed(() => {
       let message;
-
       if (searchQueryValues.value.length) {
         message = props.noResultsMessage || vui.setting('noResultsMessage') || 'No search results found.'; // 検索結果が見つかりませんでした。
       } else {
@@ -4849,13 +4614,10 @@ const VDataTable = defineComponent({
         maxHeight
       } = props;
       const footerHeight = footerHeightRef.value;
-
       const _maxHeight = maxHeight || (fixedHeader ? '100%' : maxHeight);
-
       if (!_maxHeight) {
         return;
       }
-
       return {
         maxHeight: layout.calicurateViewHeight(_maxHeight, -footerHeight - 100, 200)
       };
@@ -4870,35 +4632,29 @@ const VDataTable = defineComponent({
       get: () => {
         return vui.location.getQuery(props.sortQuery);
       },
-
       set(value) {
         vui.location.pushQuery({
           [props.sortQuery]: value || null,
           [props.pageQuery]: 1
         });
       }
-
     });
     const ordersRef = computed(() => [props.ascQueryValue, props.descQueryValue]);
     const usePaigingRef = computed(() => props.limits.length > 0);
     const orderByRef = computed({
       get: () => {
         const value = vui.location.getQuery(props.orderQuery);
-
         if (typeof value !== 'string' || !ordersRef.value.includes(value)) {
           return;
         }
-
         return value;
       },
-
       set(value) {
         vui.location.pushQuery({
           [props.orderQuery]: value || null,
           [props.pageQuery]: 1
         });
       }
-
     });
     const offsetRef = computed(() => (pageRef.value - 1) * limitRef.value);
     const limitRef = computed({
@@ -4920,14 +4676,12 @@ const VDataTable = defineComponent({
       return Math.ceil(total / _limit);
     });
     const lengthRef = computed(() => props.items.length);
-    const isASCRef = computed(() => orderByRef.value === props.ascQueryValue); // const isDESCRef = computed(() => orderByRef.value === props.descQueryValue);
-
+    const isASCRef = computed(() => orderByRef.value === props.ascQueryValue);
+    // const isDESCRef = computed(() => orderByRef.value === props.descQueryValue);
     const sortIconRef = computed(() => {
       let icon = vui.icon('sort');
-
       if (typeof icon === 'string') {
         const name = icon;
-
         icon = gen => {
           return gen({
             name,
@@ -4935,7 +4689,6 @@ const VDataTable = defineComponent({
           });
         };
       }
-
       return icon;
     });
     const isIndeterminateRef = computed(() => {
@@ -4945,7 +4698,6 @@ const VDataTable = defineComponent({
       return length > 0 && length < sortedItemKeysRef.value.length;
     });
     const isAllSelectedRef = computed(() => internalValues.value.length === sortedItemKeysRef.value.length);
-
     function setSort(settings) {
       const {
         sort,
@@ -4953,30 +4705,27 @@ const VDataTable = defineComponent({
       } = settings;
       if ((sort === undefined || sortByRef.value === sort) && (order === undefined || orderByRef.value === order)) return;
       const queries = {};
-
       if (sort) {
         queries[props.sortQuery] = sort;
       }
-
       if (order) {
         queries[props.orderQuery] = order;
       }
-
-      vui.location.pushQuery({ ...queries,
-        [props.pageQuery]: 1
+      vui.location.pushQuery({
+        ...queries,
+        ...(usePaigingRef.value ? {
+          [props.pageQuery]: 1
+        } : undefined)
       });
     }
-
     function toggleOrderBy() {
       return setSort({
         order: orderByRef.value === props.ascQueryValue ? props.descQueryValue : props.ascQueryValue
       });
     }
-
     function isSelected(key) {
       return internalValues.value.includes(key);
     }
-
     function select(key) {
       if (!internalValues.value.includes(key)) {
         const values = internalValues.value.slice();
@@ -4993,7 +4742,6 @@ const VDataTable = defineComponent({
         ctx.emit('input', values);
       }
     }
-
     function selectAll() {
       if (!isAllSelectedRef.value) {
         const values = sortedItemKeysRef.value.slice();
@@ -5001,7 +4749,6 @@ const VDataTable = defineComponent({
         ctx.emit('input', values);
       }
     }
-
     function deselectAll() {
       if (internalValues.value.length) {
         const values = [];
@@ -5009,34 +4756,28 @@ const VDataTable = defineComponent({
         ctx.emit('input', values);
       }
     }
-
     function deselect(key) {
       const values = internalValues.value.slice();
       const index = values.indexOf(key);
-
       if (index !== -1) {
         values.splice(index, 1);
         internalValues.value = values;
         ctx.emit('input', values);
       }
     }
-
     function handleClickSortHeader(header, ev) {
       const {
         sortQuery
       } = header;
       if (!sortQuery) return;
-
       if (sortByRef.value === sortQuery) {
         return toggleOrderBy();
       }
-
       return setSort({
         sort: sortQuery,
         order: defaultOrderQueryRef.value
       });
     }
-
     function genPagination() {
       return createVNode(VPagination, {
         "class": "v-data-table__pagination",
@@ -5047,7 +4788,6 @@ const VDataTable = defineComponent({
         "length": pageLengthRef.value
       }, null);
     }
-
     function genControls() {
       const {
         total
@@ -5081,7 +4821,6 @@ const VDataTable = defineComponent({
         "class": "v-data-table__controls__pagination"
       }, [genPagination()])]);
     }
-
     function genTableHeader() {
       const sortBy = sortByRef.value;
       const isIndeterminate = isIndeterminateRef.value;
@@ -5090,7 +4829,7 @@ const VDataTable = defineComponent({
         defaultOrder,
         ascQueryValue
       } = props;
-      const usePaiging = usePaigingRef.value;
+      // const usePaiging = usePaigingRef.value;
       const children = headersRef.value.map(header => {
         const {
           label,
@@ -5099,17 +4838,13 @@ const VDataTable = defineComponent({
           key
         } = header;
         const headerChildren = [];
-
         if (label != null && typeof label !== 'boolean') {
           let _children = typeof label === 'function' ? label(vui) : label;
-
           if (_children && !Array.isArray(_children) && typeof _children === 'object') {
             _children = JSON.stringify(_children);
           }
-
           headerChildren.push(_children);
         }
-
         if (key === SELECTABLE_HEADER_SYMBOL) {
           headerChildren.push(createVNode(VCheckbox, {
             "modelValue": isAllSelected,
@@ -5122,14 +4857,12 @@ const VDataTable = defineComponent({
               }
             }
           }, null));
-        } // if (key === DELETOR_HEADER_SYMBOL) {
+        }
+        // if (key === DELETOR_HEADER_SYMBOL) {
         //   headerChildren.push('削除');
         // }
-
-
         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",
@@ -5142,21 +4875,18 @@ const VDataTable = defineComponent({
             }]
           }));
         }
-
         const classes = ['v-data-table__table__cell', {
           'v-data-table__table__cell--active': sortActive
         }];
-
         if (align) {
           classes.push(`v-data-table__table__cell--${align}`);
         }
-
         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", {
@@ -5167,19 +4897,17 @@ const VDataTable = defineComponent({
         "class": "v-data-table__table__header"
       }, [createVNode("tr", null, [children])]);
     }
-
     function toggleSelect(key) {
       return isSelected(key) ? deselect(key) : select(key);
     }
-
     function defaultItemSlot(payload) {
       const {
         key,
         item,
         selected
       } = payload;
-      const headers = headersRef.value; // const { $scopedSlots, $createElement, deletor } = this;
-
+      const headers = headersRef.value;
+      // const { $scopedSlots, $createElement, deletor } = this;
       const children = headers.map(header => {
         const {
           cell,
@@ -5188,23 +4916,18 @@ const VDataTable = defineComponent({
         } = header;
         const cellSlot = cell || ctx.slots.cell;
         let cellChildren;
-
         if (cellSlot) {
           const cellPayload = {
             vui,
             item,
             selected
           };
-
           let _children = cellSlot(cellPayload);
-
           if (_children && !Array.isArray(_children) && typeof _children === 'object') {
             _children = JSON.stringify(_children);
           }
-
           cellChildren = _children;
         }
-
         if (!cellChildren) {
           switch (headerKey) {
             case SELECTABLE_HEADER_SYMBOL:
@@ -5259,7 +4982,6 @@ const VDataTable = defineComponent({
         "key": key
       }, [children]);
     }
-
     function genBody() {
       const {
         items,
@@ -5281,7 +5003,6 @@ const VDataTable = defineComponent({
         "class": "v-data-table__table__body"
       }, [children]);
     }
-
     watch(() => props.modelValue, modelValue => {
       internalValues.value = modelValue.slice();
     });
@@ -5330,36 +5051,31 @@ const VDataTable = defineComponent({
       })])]);
     };
   }
-
 });
 
 function _isSlot$2(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
-const VApp = defineComponent({
+const VApp = /* @__PURE__ */ defineComponent({
   name: 'VApp',
-
   setup(props, ctx) {
     useInjectTheme();
     return () => {
       let _slot;
-
       return createVNode(VStackRoot, null, _isSlot$2(_slot = renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       });
     };
   }
-
 });
 
-const VToolbar = defineComponent({
+const VToolbar = /* @__PURE__ */ defineComponent({
   name: 'VToolbar',
-  props: { ...createElevationProps(),
+  props: {
+    ...createElevationProps(),
     ...colorSchemeProps(),
     dense: Boolean
   },
-
   setup(props, ctx) {
     const vui = useVui();
     const elevation = useElevation(props, {
@@ -5382,24 +5098,20 @@ const VToolbar = defineComponent({
       }, [renderSlotOrEmpty$1(ctx.slots, 'default')]);
     };
   }
-
 });
 
 function _isSlot$1(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
-const VToolbarMenu = defineComponent({
+const VToolbarMenu = /* @__PURE__ */ defineComponent({
   name: 'VToolbarMenu',
   inheritAttrs: false,
   props: {},
-
   setup(props, ctx) {
     const vui = useVui();
     const plain = vui.setting('plainVariant');
     return () => {
       let _slot;
-
       const variant = props.variant || plain;
       return createVNode(VButton, mergeProps(ctx.attrs, {
         "variant": variant,
@@ -5409,10 +5121,9 @@ const VToolbarMenu = defineComponent({
       });
     };
   }
-
 });
 
-const VToolbarEdge = defineComponent({
+const VToolbarEdge = /* @__PURE__ */ defineComponent({
   name: 'VToolbarEdge',
   props: {
     edge: {
@@ -5420,7 +5131,6 @@ const VToolbarEdge = defineComponent({
       required: true
     }
   },
-
   setup(props, ctx) {
     const edge = computed(() => props.edge);
     return () => {
@@ -5433,14 +5143,12 @@ const VToolbarEdge = defineComponent({
       }, [children]);
     };
   }
-
 });
 
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-
-const VToolbarTitle = defineComponent({
+const VToolbarTitle = /* @__PURE__ */ defineComponent({
   name: 'VToolbarTitle',
   props: {
     tag: {
@@ -5448,13 +5156,10 @@ const VToolbarTitle = defineComponent({
       default: 'span'
     }
   },
-
   setup(props, ctx) {
     const _TagName = computed(() => props.tag);
-
     return () => {
       let _slot;
-
       const TagName = _TagName.value;
       return createVNode(TagName, {
         "class": "v-toolbar-title"
@@ -5463,7 +5168,6 @@ const VToolbarTitle = defineComponent({
       });
     };
   }
-
 });
 
 const DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP = -20;
@@ -5472,8 +5176,8 @@ function mergeVuiServiceUISettings(base, overrides) {
   if (!overrides) {
     return base;
   }
-
-  const merged = { ...base
+  const merged = {
+    ...base
   };
   Object.entries(overrides).forEach(([key, value]) => {
     if (value) {
@@ -5486,8 +5190,8 @@ function mergeVuiServiceIconSettings(base, overrides) {
   if (!overrides) {
     return base;
   }
-
-  const merged = { ...base
+  const merged = {
+    ...base
   };
   Object.entries(overrides).forEach(([key, value]) => {
     if (value) {
@@ -5500,8 +5204,8 @@ function mergeVuiServiceOptions(base, overrides) {
   if (!overrides) {
     return base;
   }
-
-  const merged = { ...base,
+  const merged = {
+    ...base,
     uiSettings: mergeVuiServiceUISettings(base.uiSettings, overrides.uiSettings),
     icons: mergeVuiServiceIconSettings(base.icons, overrides.icons)
   };
@@ -5517,7 +5221,6 @@ class VuiService {
   get scroller() {
     return getDocumentScroller$1();
   }
-
   constructor(options, stackService) {
     this.options = options;
     this.configure();
@@ -5536,64 +5239,51 @@ class VuiService {
       router: this.router
     });
     this.stack = stackService;
+    this.useLink = options.useLink || useLink;
   }
-
   configure(options) {
     options && Object.assign(this.options, options);
     setDefaultRouterLink(this.getRouterLink());
   }
-
   getRouterLink() {
     return this.options.RouterLink || RouterLink;
   }
-
   setting(key) {
     return this.options.uiSettings[key];
   }
-
   icon(iconType) {
     return this.options.icons[iconType];
   }
-
   getAutoScrollToElementOffsetTop() {
     let {
       autoScrollToElementOffsetTop
     } = this;
-
     if (typeof autoScrollToElementOffsetTop === 'function') {
       autoScrollToElementOffsetTop = autoScrollToElementOffsetTop();
     }
-
     return autoScrollToElementOffsetTop || 0;
   }
-
   getRequiredChip() {
     const {
       requiredChip
     } = this;
     return requiredChip && requiredChip();
   }
-
   dialog(...args) {
     return this.stack.dialog(...args);
   }
-
   alert(...args) {
     return this.stack.alert(...args);
   }
-
   confirm(...args) {
     return this.stack.confirm(...args);
   }
-
   snackbar(...args) {
     return this.stack.snackbar(...args);
   }
-
   menu(...args) {
     return this.stack.menu(...args);
   }
-
   formPrompt(settings, slot) {
     let form;
     const options = {
@@ -5604,9 +5294,7 @@ class VuiService {
       size,
       state
     } = options;
-
     const _state = reactive(state);
-
     options.actions = options.actions || [this.stack.action('cancel', undefined, {
       size
     }), this.stack.action('ok', undefined, {
@@ -5618,7 +5306,8 @@ class VuiService {
         }
       }
     })];
-    const resolved = resolveVStackDynamicInput({ ...options,
+    const resolved = resolveVStackDynamicInput({
+      ...options,
       content: stack => {
         return createVNode(VForm, {
           "disableAutoScroll": true,
@@ -5642,15 +5331,16 @@ class VuiService {
     });
     return this.dialog(resolved);
   }
-
   prompt(rawOptions = {}) {
     const options = typeof rawOptions === 'string' ? {
       input: {
         label: rawOptions
       }
-    } : { ...rawOptions
+    } : {
+      ...rawOptions
     };
-    options.input = { ...options.input
+    options.input = {
+      ...options.input
     };
     options.dense = true;
     const {
@@ -5673,19 +5363,17 @@ class VuiService {
       return result ? result.input : result;
     });
   }
-
 }
 
 function mergeVuiPluginOptions(base, override) {
   if (!override) return base;
   const merged = mergeVuiServiceOptions(base, override);
-
   if (override.stack) {
-    merged.stack = { ...merged.stack,
+    merged.stack = {
+      ...merged.stack,
       ...override.stack
     };
   }
-
   return merged;
 }
 class VuiPlugin {
@@ -5694,11 +5382,11 @@ class VuiPlugin {
       colorScheme,
       stack,
       uiSettings
-    } = opts; // ColorScheme
-
+    } = opts;
+    // ColorScheme
     const vueColorSchemePlugin = new VueColorSchemePlugin(colorScheme);
-    app.use(vueColorSchemePlugin); // Stack
-
+    app.use(vueColorSchemePlugin);
+    // Stack
     installVueStackPlugin(app, {
       actions: {
         ok: ({
@@ -5719,8 +5407,8 @@ class VuiPlugin {
         ...(stack ? stack.actions : {})
       },
       ...stack
-    }); // Vui
-
+    });
+    // Vui
     const $vui = new VuiService(opts, app.config.globalProperties.$vstack);
     app.provide(VuiInjectionKey, $vui);
     app.config.globalProperties.$vui = $vui;
@@ -5728,10 +5416,9 @@ class VuiPlugin {
       delete app.config.globalProperties.$vui;
     });
   }
-
 }
 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 };