@fastkit/vui 0.8.18 → 0.10.0

package/dist/vui.cjs.prod.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var vueKit = require('@fastkit/vue-kit');
 var vue = require('vue');
 var vueRouter = require('vue-router');
@@ -14,7 +12,7 @@ var iconFont = require('@fastkit/icon-font');
 var vueAppLayout = require('@fastkit/vue-app-layout');
 var vueFormControl = require('@fastkit/vue-form-control');
 var vue3 = require('@tiptap/vue-3');
-var StarterKit = require('@tiptap/starter-kit');
+var starterKit = require('@tiptap/starter-kit');
 var core = require('@tiptap/core');
 var prosemirrorView = require('prosemirror-view');
 var prosemirrorState = require('prosemirror-state');
@@ -28,11 +26,6 @@ var rules = require('@fastkit/rules');
 var extensionOrderedList = require('@tiptap/extension-ordered-list');
 var TextStyle = require('@tiptap/extension-text-style');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-var StarterKit__default = /*#__PURE__*/_interopDefaultLegacy(StarterKit);
-var TextStyle__default = /*#__PURE__*/_interopDefaultLegacy(TextStyle);
-
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
 const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'];
 const CONTROL_LOADING_SPINNER_SIZES = {
@@ -150,6 +143,7 @@ function useControlField(props, opts = {}) {
     return provider;
 }
 
+// export function toRawIconProp<T = void>(
 //   prop: RawIconProp<T>,
 //   payload: () => T,
 // ): RawIconProp {
@@ -163,7 +157,6 @@ function useControlField(props, opts = {}) {
 //   return fn;
 // }
 // export const rawRawIconProp = [String, Function] as PropType<RawIconProp>;
-
 const _rawIconProp = [String, Function];
 function rawIconProp() {
   return _rawIconProp;
@@ -183,12 +176,12 @@ const iconProps = vueUtils.createPropsOptions({
     type: Number
   }
 });
-const VIcon = vue.defineComponent({
+const VIcon = /* @__PURE__ */ vue.defineComponent({
   name: 'VIcon',
-  props: { ...iconProps
+  props: {
+    ...iconProps
   },
   emits: {},
-
   setup(props, ctx) {
     const iconName = vue.computed(() => props.name);
     const clickable = vue.computed(() => typeof ctx.attrs.onClick !== 'undefined');
@@ -212,7 +205,6 @@ const VIcon = vue.defineComponent({
       "style": bodyStyles.value
     }, null)]);
   }
-
 });
 
 const {
@@ -227,7 +219,6 @@ function createRequiredChipRenderer(required, props, vui = useVui()) {
       requiredChip
     } = props;
     if (requiredChip === false) return;
-
     if (requiredChip) {
       if (typeof requiredChip === 'string') {
         chip = requiredChip;
@@ -235,22 +226,20 @@ function createRequiredChipRenderer(required, props, vui = useVui()) {
         chip = requiredChip();
       }
     }
-
     if (chip === undefined) {
       chip = vui.getRequiredChip();
     }
-
     return chip;
   };
 }
-const VFormControl = vue.defineComponent({
+const VFormControl = /* @__PURE__ */ vue.defineComponent({
   name: 'VFormControl',
-  props: { ...props$8,
+  props: {
+    ...props$8,
     ...vueKit.defineSlotsProps(),
     error: Boolean
   },
   emits: emits$8,
-
   setup(props, ctx) {
     const vui = useVui();
     const control = vueKit.useFormControl(props, ctx, {
@@ -263,15 +252,12 @@ const VFormControl = vue.defineComponent({
       let {
         hinttipDelay
       } = control;
-
       if (hinttipDelay == null) {
         hinttipDelay = vui.setting('hinttipDelay');
       }
-
       if (hinttipDelay == null) {
         hinttipDelay = 500;
       }
-
       return hinttipDelay;
     });
     ctx.expose(control.expose());
@@ -326,7 +312,6 @@ const VFormControl = vue.defineComponent({
       }, [appends])])])]);
     };
   }
-
 });
 
 function defineFormSelectorComponent(opts) {
@@ -342,97 +327,100 @@ function defineFormSelectorComponent(opts) {
   } = vueKit.createFormSelectorSettings({
     defaultMultiple
   });
-  return vue.defineComponent({
-    name: opts.name,
-    props: { ...props,
-      ...vueKit.createFormControlProps(),
-      ...createControlProps(),
-      stacked: {
-        type: Boolean,
-        default: true
+  return (/* @__PURE__ */ vue.defineComponent({
+      name: opts.name,
+      props: {
+        ...props,
+        ...vueKit.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: {},
+        ...vueKit.defineSlotsProps()
       },
-      // eslint-disable-next-line vue/require-prop-types
-      loadingMessage: {},
-      // eslint-disable-next-line vue/require-prop-types
-      failedToLoadItemsMessage: {},
-      ...vueKit.defineSlotsProps()
-    },
-    emits,
-
-    setup(props, ctx) {
-      const selectorControl = vueKit.useFormSelectorControl(props, ctx, {
-        nodeType,
-        defaultMultiple
-      });
-      const control = useControl(props);
-      const vui = useVui();
-      const loadingMessageRef = vue.computed(() => {
-        const slot = vueKit.resolveVNodeChildOrSlots(props.loadingMessage, vui.setting('loadingMessage'), 'Loading...');
-        return slot && slot(vui);
-      });
-      const failedToLoadItemsMessageRef = vue.computed(() => {
-        const slot = vueKit.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 vue.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: () => vue.createVNode("div", {
-          "class": "v-form-selector__body"
-        }, [selectorControl.itemsLoadFailed && vue.createVNode("div", {
-          "key": "failed",
-          "class": "v-form-selector__placeholder v-form-selector__placeholder--error"
-        }, [this.failedToLoadItemsMessageRef]), selectorControl.itemsLoading && vue.createVNode("div", {
-          "key": "loading",
-          "class": "v-form-selector__placeholder"
-        }, [vue.createVNode(vueLoading.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 vue.createVNode(vue.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)
-              }
-            });
-          })]);
-        }), vueKit.renderSlotOrEmpty(this.$slots, 'default')])
-      });
-    }
-
-  });
+      emits,
+      setup(props, ctx) {
+        const selectorControl = vueKit.useFormSelectorControl(props, ctx, {
+          nodeType,
+          defaultMultiple
+        });
+        const control = useControl(props);
+        const vui = useVui();
+        const loadingMessageRef = vue.computed(() => {
+          const slot = vueKit.resolveVNodeChildOrSlots(props.loadingMessage, vui.setting('loadingMessage'), 'Loading...');
+          return slot && slot(vui);
+        });
+        const failedToLoadItemsMessageRef = vue.computed(() => {
+          const slot = vueKit.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 vue.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: () => vue.createVNode("div", {
+            "class": "v-form-selector__body"
+          }, [selectorControl.itemsLoadFailed && vue.createVNode("div", {
+            "key": "failed",
+            "class": "v-form-selector__placeholder v-form-selector__placeholder--error"
+          }, [this.failedToLoadItemsMessageRef]), selectorControl.itemsLoading && vue.createVNode("div", {
+            "key": "loading",
+            "class": "v-form-selector__placeholder"
+          }, [vue.createVNode(vueLoading.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 vue.createVNode(vue.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)
+                }
+              });
+            })]);
+          }), vueKit.renderSlotOrEmpty(this.$slots, 'default')])
+        });
+      }
+    })
+  );
 }
 
 function createElevationProps() {
@@ -455,8 +443,7 @@ function useElevation(props, opts = {}) {
 function _isSlot$f(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
-const VSkeltonLoaderBone = vue.defineComponent({
+const VSkeltonLoaderBone = /* @__PURE__ */ vue.defineComponent({
   name: 'VSkeltonLoaderBone',
   inheritAttrs: false,
   props: {
@@ -465,11 +452,9 @@ const VSkeltonLoaderBone = vue.defineComponent({
       default: 'div'
     }
   },
-
   setup(props, ctx) {
     return () => {
       let _slot;
-
       const TagName = props.tag;
       return vue.createVNode(TagName, vue.mergeProps(ctx.attrs, {
         "class": "v-skelton-loader-bone"
@@ -478,23 +463,20 @@ const VSkeltonLoaderBone = vue.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
@@ -502,7 +484,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`;
@@ -511,11 +492,10 @@ const resolveBusyImageSizeValue = source => {
  * 画像表示用コンポーネント
  * <img /> タグのように振る舞うが、ローディング表示や、表示サイズの調整など、ちょっといい感じにやるためのコンポーネント
  */
-
-
-const VBusyImage = vue.defineComponent({
+const VBusyImage = /* @__PURE__ */ vue.defineComponent({
   name: 'VBusyImage',
-  props: { ...undefined,
+  props: {
+    ...undefined,
     aspectRatio: String,
     width: NUMBERISH_PROP,
     height: NUMBERISH_PROP,
@@ -526,9 +506,8 @@ const VBusyImage = vue.defineComponent({
     load: ev => true,
     error: ev => true
   },
-
   setup(props, ctx) {
-    const loadStateRef = vue.ref(props.cover && isAvairableSrc(ctx.attrs.src) ? 'loading' : 'pending');
+    const loadStateRef = vue.ref(props.cover && isAvailableSrc(ctx.attrs.src) ? 'loading' : 'pending');
     const attrsRef = vue.computed(() => splitAttrs(ctx.attrs));
     const isPendingRef = vue.computed(() => loadStateRef.value === 'pending');
     const isLoadingRef = vue.computed(() => loadStateRef.value === 'loading');
@@ -550,30 +529,24 @@ const VBusyImage = vue.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
@@ -585,22 +558,19 @@ const VBusyImage = vue.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;
     vue.watch(() => ctx.attrs.src, value => {
       coverImageRef.value = undefined;
-
-      if (isAvairableSrc(value)) {
+      if (isAvailableSrc(value)) {
         loadStateRef.value = 'loading';
-
         if (props.cover) {
           helpers.loadImage(value).then(image => {
             coverImageRef.value = image;
@@ -615,7 +585,6 @@ const VBusyImage = vue.defineComponent({
     }, {
       immediate: helpers.IN_WINDOW
     });
-
     const setManualState = loadType => {
       loadStateRef.value = loadType === 'load' ? 'loaded' : 'error';
       const ev = new Event(loadType, {
@@ -625,13 +594,11 @@ const VBusyImage = vue.defineComponent({
       });
       ctx.emit(loadType, ev);
     };
-
     vue.onMounted(() => {
       if (booted || props.cover) return;
       const image = nodeRef.value;
       if (!image) return;
       const loadType = imageIsReady(image);
-
       if (loadType) {
         setManualState(loadType);
       }
@@ -639,19 +606,16 @@ const VBusyImage = vue.defineComponent({
     vue.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,
@@ -682,15 +646,12 @@ const VBusyImage = vue.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 !== '';
 }
 
@@ -703,10 +664,11 @@ function extractRawGridValueClasses(value, prefix, getter) {
 }
 // export const DEFAULT_MEDIA_MATCH_KEY = MEDIA_MATCH_CONDITIONS[0].key;
 
-const VGridItem = vue.defineComponent({
+const VGridItem = /* @__PURE__ */ vue.defineComponent({
   name: 'VGridItem',
   inheritAttrs: false,
-  props: { ...vueUtils.htmlAttributesPropOptions,
+  props: {
+    ...vueUtils.htmlAttributesPropOptions,
     tag: {
       type: String,
       default: 'div'
@@ -717,11 +679,11 @@ const VGridItem = vue.defineComponent({
     justify: undefined,
     order: undefined
   },
-
   setup(props, ctx) {
     const data = vue.computed(() => {
       const classes = [];
-      const attrs = { ...ctx.attrs
+      const attrs = {
+        ...ctx.attrs
       };
       const {
         size,
@@ -736,14 +698,14 @@ const VGridItem = vue.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
@@ -760,17 +722,16 @@ const VGridItem = vue.defineComponent({
       }, attrs), ctx.slots);
     };
   }
-
 });
 
 function spacingValueToString(value) {
   return Number.isInteger(value) ? String(value) : `${value}h`;
 }
-
-const VGridContainer = vue.defineComponent({
+const VGridContainer = /* @__PURE__ */ vue.defineComponent({
   name: 'VGridContainer',
   inheritAttrs: false,
-  props: { ...vueUtils.htmlAttributesPropOptions,
+  props: {
+    ...vueUtils.htmlAttributesPropOptions,
     wrapperTag: {
       type: String,
       default: 'div'
@@ -787,11 +748,11 @@ const VGridContainer = vue.defineComponent({
     alignContent: undefined,
     justifyContent: undefined
   },
-
   setup(props, ctx) {
     const data = vue.computed(() => {
       const classes = [];
-      const attrs = { ...ctx.attrs
+      const attrs = {
+        ...ctx.attrs
       };
       const {
         spacing,
@@ -812,7 +773,8 @@ const VGridContainer = vue.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;
@@ -821,7 +783,6 @@ const VGridContainer = vue.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));
@@ -855,11 +816,11 @@ const VGridContainer = vue.defineComponent({
       });
     };
   }
-
 });
 
 function createPaperBaseProps() {
-  return { ...vueUtils.htmlAttributesPropOptions,
+  return {
+    ...vueUtils.htmlAttributesPropOptions,
     color: String,
     tag: {
       type: [String, Object],
@@ -869,7 +830,8 @@ function createPaperBaseProps() {
   };
 }
 function createPaperProps() {
-  return { ...createElevationProps(),
+  return {
+    ...createElevationProps(),
     ...createPaperBaseProps(),
     square: Boolean,
     headerProps: Object,
@@ -878,11 +840,10 @@ function createPaperProps() {
     innerClass: [String, Array, Object]
   };
 }
-const VPaper = vue.defineComponent({
+const VPaper = /* @__PURE__ */ vue.defineComponent({
   name: 'VPaper',
   inheritAttrs: false,
   props: createPaperProps(),
-
   setup(props, ctx) {
     const tag = vue.computed(() => props.tag);
     const elevation = useElevation(props, {
@@ -916,12 +877,12 @@ const VPaper = vue.defineComponent({
       });
     };
   }
-
 });
 
 const AVATAR_SIZES = ['sm', 'md', 'lg'];
 function createAvatarProps() {
-  return { ...vueColorScheme.colorSchemeProps(),
+  return {
+    ...vueColorScheme.colorSchemeProps(),
     ...vueUtils.navigationableInheritProps,
     size: {
       type: [String, Number],
@@ -933,11 +894,10 @@ function createAvatarProps() {
     src: String
   };
 }
-const VAvatar = vue.defineComponent({
+const VAvatar = /* @__PURE__ */ vue.defineComponent({
   name: 'VAvatar',
   inheritAttrs: false,
   props: createAvatarProps(),
-
   setup(props, ctx) {
     const vui = useVui();
     const defaults = vui.setting('buttonDefault');
@@ -987,12 +947,12 @@ const VAvatar = vue.defineComponent({
       });
     };
   }
-
 });
 
 const CHIP_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
 function createChipProps() {
-  return { ...vueColorScheme.colorSchemeProps(),
+  return {
+    ...vueColorScheme.colorSchemeProps(),
     ...vueUtils.navigationableInheritProps,
     size: {
       type: String,
@@ -1004,10 +964,8 @@ function createChipProps() {
     disabled: Boolean
   };
 }
-
 function resolveRawVChipIcon(raw, type) {
   if (!raw) return;
-
   if (typeof raw === 'function') {
     return () => {
       const child = raw();
@@ -1017,18 +975,15 @@ function resolveRawVChipIcon(raw, type) {
       }, [child]);
     };
   }
-
   return () => vue.createVNode(VIcon, {
     "class": ['v-chip__icon', `v-chip__icon--${type}`],
     "name": raw
   }, null);
 }
-
-const VChip = vue.defineComponent({
+const VChip = /* @__PURE__ */ vue.defineComponent({
   name: 'VChip',
   inheritAttrs: false,
   props: createChipProps(),
-
   setup(props, ctx) {
     const vui = useVui();
     const defaults = vui.setting('buttonDefault');
@@ -1038,12 +993,10 @@ const VChip = vue.defineComponent({
     });
     const startIcon = vue.computed(() => {
       const _icon = resolveRawVChipIcon(props.startIcon, 'start');
-
       return _icon && _icon();
     });
     const endIcon = vue.computed(() => {
       const _icon = resolveRawVChipIcon(props.endIcon, 'end');
-
       return _icon && _icon();
     });
     const navigationable = vueUtils.useNavigationable(ctx, {
@@ -1072,31 +1025,29 @@ const VChip = vue.defineComponent({
       });
     };
   }
-
 });
 
 function createCardProps() {
-  return { ...createPaperProps(),
+  return {
+    ...createPaperProps(),
     ...vueUtils.navigationableInheritProps,
     disabled: Boolean
   };
 }
-const VCard = vue.defineComponent({
+const VCard = /* @__PURE__ */ vue.defineComponent({
   name: 'VCard',
   inheritAttrs: false,
   props: createCardProps(),
-
   setup(props, ctx) {
     const _props = vue.computed(() => props);
-
     const data = vue.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 ? vueUtils.VLink : 'div'
       };
-
       if (props.disabled) {
         attrs.disabled = 'disabled';
         delete attrs.onClick;
@@ -1105,7 +1056,6 @@ const VCard = vue.defineComponent({
       } else {
         delete attrs.disabled;
       }
-
       return {
         attrs
       };
@@ -1114,12 +1064,10 @@ const VCard = vue.defineComponent({
       return vue.createVNode(VPaper, data.value.attrs, ctx.slots);
     };
   }
-
 });
 
-const VCardContent = vue.defineComponent({
+const VCardContent = /* @__PURE__ */ vue.defineComponent({
   name: 'VCardContent',
-
   setup(props, ctx) {
     return () => {
       return vue.createVNode("div", {
@@ -1127,12 +1075,10 @@ const VCardContent = vue.defineComponent({
       }, [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]);
     };
   }
-
 });
 
-const VCardActions = vue.defineComponent({
+const VCardActions = /* @__PURE__ */ vue.defineComponent({
   name: 'VCardActions',
-
   setup(props, ctx) {
     return () => {
       return vue.createVNode("div", {
@@ -1140,9 +1086,9 @@ const VCardActions = vue.defineComponent({
       }, [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]);
     };
   }
-
 });
 
+const BUTTON_ALIGNS = ['left', 'center', 'right'];
 function resolveRawVButtonIcon(raw, type = 'main') {
   if (!raw) return;
   return typeof raw === 'function' ? raw : () => vue.createVNode(VIcon, {
@@ -1150,8 +1096,8 @@ function resolveRawVButtonIcon(raw, type = 'main') {
     "name": raw
   }, null);
 }
-
-const vueButtonProps = vueUtils.createPropsOptions({ ...vueUtils.htmlAttributesPropOptions,
+const vueButtonProps = vueUtils.createPropsOptions({
+  ...vueUtils.htmlAttributesPropOptions,
   ...vueColorScheme.colorSchemeProps(),
   ...vueUtils.navigationableInheritProps,
   spacer: [Boolean, String],
@@ -1159,6 +1105,10 @@ const vueButtonProps = vueUtils.createPropsOptions({ ...vueUtils.htmlAttributesP
   icon: [String, Function],
   startIcon: [String, Function],
   endIcon: [String, Function],
+  align: {
+    type: String,
+    default: 'center'
+  },
   ...createControlProps()
 });
 const LOADING_SIZE_MAP = {
@@ -1166,28 +1116,24 @@ const LOADING_SIZE_MAP = {
   md: 20,
   lg: 28
 };
-const VButton = vue.defineComponent({
+const VButton = /* @__PURE__ */ vue.defineComponent({
   name: 'VButton',
   inheritAttrs: false,
   props: vueButtonProps,
-
   setup(props, ctx) {
     const vui = useVui();
     const control = useControl(props);
     const defaults = vui.setting('buttonDefault');
     const icon = vue.computed(() => {
       const _icon = resolveRawVButtonIcon(props.icon);
-
       return _icon && _icon();
     });
     const startIcon = vue.computed(() => {
       const _icon = resolveRawVButtonIcon(props.startIcon, 'start');
-
       return _icon && _icon();
     });
     const endIcon = vue.computed(() => {
       const _icon = resolveRawVButtonIcon(props.endIcon, 'end');
-
       return _icon && _icon();
     });
     const color = vueColorScheme.useColorClasses({
@@ -1195,18 +1141,19 @@ const VButton = vue.defineComponent({
       variant: () => props.variant || (icon.value ? vui.setting('plainVariant') : defaults.variant)
     });
     const isPlain = vue.computed(() => color.variant.value.value === vui.setting('plainVariant') && color.color.value.value === defaults.color);
-    const isLoading = vue.computed(() => props.loading); // const isDisabled = computed(() => props.disabled);
+    const isLoading = vue.computed(() => props.loading);
+    // const isDisabled = computed(() => props.disabled);
     // const isRounded = computed(() =>
     //   props.rounded != null ? props.rounded : !!icon.value,
     // );
-
     const spacer = vue.computed(() => {
       const _spacer = props.spacer;
       if (!_spacer) return;
       return _spacer === true ? 'left' : _spacer;
     });
-    const classes = vue.computed(() => [color.colorClasses.value, // navigationable.value.classes,
-    spacer.value ? `v-button--spacer-${spacer.value}` : undefined, `v-button--${control.size.value}`, {
+    const classes = vue.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,
@@ -1227,26 +1174,23 @@ const VButton = vue.defineComponent({
       });
     };
   }
-
 });
 
-const VButtonGroup = vue.defineComponent({
+const VButtonGroup = /* @__PURE__ */ vue.defineComponent({
   name: 'VButtonGroup',
-  props: { ...vueColorScheme.colorSchemeProps(),
+  props: {
+    ...vueColorScheme.colorSchemeProps(),
     ...createControlProps(),
     disabled: Boolean
   },
-
   setup(props, ctx) {
     return () => {
       let hasIcon = false;
       let buttonLength = 0;
       let tmp = vueUtils.renderSlotOrEmpty(ctx.slots) || [];
-
       if (tmp.length === 1 && vueUtils.isFragment(tmp[0])) {
         tmp = tmp[0].children;
       }
-
       const children = tmp.map(node => {
         if (!vue.isVNode(node) || node.type !== VButton) {
           return {
@@ -1254,13 +1198,10 @@ const VButtonGroup = vue.defineComponent({
             node
           };
         }
-
         buttonLength++;
-
         if (!hasIcon && node.props && !!node.props.icon) {
           hasIcon = true;
         }
-
         return {
           isButton: true,
           node
@@ -1273,7 +1214,8 @@ const VButtonGroup = vue.defineComponent({
           const hasLeft = buttonIndex > 1;
           const hasRight = buttonIndex < buttonLength;
           const childProps = child.node.props;
-          return vue.cloneVNode(child.node, { ...props,
+          return vue.cloneVNode(child.node, {
+            ...props,
             ...childProps,
             rouded: false,
             class: ['v-button-group__item', {
@@ -1283,7 +1225,6 @@ const VButtonGroup = vue.defineComponent({
             }]
           });
         }
-
         return child.node;
       });
       return vue.createVNode("div", {
@@ -1293,13 +1234,11 @@ const VButtonGroup = vue.defineComponent({
       }, [$children]);
     };
   }
-
 });
 
 function _isSlot$e(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
 const PAGINATION_ALIGNS = ['left', 'center', 'right'];
 function paginationProps() {
   return vueUtils.createPropsOptions({
@@ -1310,7 +1249,6 @@ function paginationProps() {
       type: vueUtils.rawNumberPropType,
       default: 1
     },
-
     /**
      * Total number of pages
      */
@@ -1318,12 +1256,10 @@ function paginationProps() {
       type: vueUtils.rawNumberPropType,
       default: 0
     },
-
     /**
      * Maximum number of links to display.
      */
     totalVisible: vueUtils.rawNumberPropType,
-
     /**
      * true when narrowing
      */
@@ -1333,7 +1269,6 @@ function paginationProps() {
       type: String,
       default: 'center'
     },
-
     /**
      * To synchronize with a query, use the query name
      */
@@ -1342,14 +1277,13 @@ function paginationProps() {
     color: String
   });
 }
-const VPagination = vue.defineComponent({
+const VPagination = /* @__PURE__ */ vue.defineComponent({
   name: 'VPagination',
   props: paginationProps(),
   emits: {
     change: page => true,
     'update:modelValue': page => true
   },
-
   setup(props, ctx) {
     const vui = useVui();
     const elRef = vue.ref(null);
@@ -1372,40 +1306,31 @@ const VPagination = vue.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 = vue.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;
@@ -1433,7 +1358,6 @@ const VPagination = vue.defineComponent({
       'v-pagination--dense': props.dense,
       [`v-pagination--${props.align}`]: true
     }, colorScope.value.className]);
-
     async function setPage(value) {
       if (isDisabled.value) return;
       const {
@@ -1442,7 +1366,6 @@ const VPagination = vue.defineComponent({
       } = props;
       const newPage = vueUtils.resolveNumberish(value);
       if (computedPage.value === newPage) return;
-
       if (beforeChange) {
         try {
           let result = beforeChange(newPage);
@@ -1450,7 +1373,6 @@ const VPagination = vue.defineComponent({
           if (result === false) return;
         } catch (e) {}
       }
-
       if (routeQuery) {
         const to = createRoutableLocationByPage(newPage, routeQuery);
         return router.push(to).then(failure => {
@@ -1462,7 +1384,6 @@ const VPagination = vue.defineComponent({
         ctx.emit('change', newPage);
       }
     }
-
     function createPageInfo(source) {
       const currentPage = computedPage.value;
       const length = computedLength.value;
@@ -1470,7 +1391,6 @@ const VPagination = vue.defineComponent({
       let page;
       let active;
       let disabled;
-
       if (typeof source === 'number') {
         number = true;
         page = source;
@@ -1488,7 +1408,6 @@ const VPagination = vue.defineComponent({
         active = false;
         disabled = page < 1 || page > length;
       }
-
       return {
         number,
         page,
@@ -1496,13 +1415,11 @@ const VPagination = vue.defineComponent({
         disabled
       };
     }
-
     function createRoutableLocationByPage(page, routeQuery) {
       return vui.location.getQueryMergedLocation({
         [routeQuery]: page
       });
     }
-
     function genItem(source, index) {
       const {
         number,
@@ -1520,25 +1437,21 @@ const VPagination = vue.defineComponent({
         if (type === 'truncate') {
           return vue.createVNode("span", null, [vue.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 vue.createVNode(vueRouter.RouterLink, {
@@ -1558,7 +1471,6 @@ const VPagination = vue.defineComponent({
         }, [children]);
       }
     }
-
     vue.watch(() => props.modelValue, modelValue => {
       internalValue.value = vueUtils.resolveNumberish(modelValue);
     }, {
@@ -1574,7 +1486,6 @@ const VPagination = vue.defineComponent({
         width
       }) => {
         const el = elRef.value;
-
         if (el) {
           const style = window.getComputedStyle(el, 'before');
           const width = style.getPropertyValue('width');
@@ -1582,17 +1493,16 @@ const VPagination = vue.defineComponent({
           const size = parseFloat(width) + parseFloat(margin) * 0.5;
           itemSize.value = size;
         }
-
         containerWidth.value = width;
       })]);
     };
   }
-
 });
 
 function createListTileProps() {
   const icon = rawIconProp();
-  return { ...vueUtils.navigationableInheritProps,
+  return {
+    ...vueUtils.navigationableInheritProps,
     ...vueUtils.createPropsOptions({
       startIcon: icon,
       endIcon: icon,
@@ -1609,26 +1519,25 @@ function createListTileProps() {
 const listTileEmits = {
   changeActive: isActive => true
 };
-const VListTile = vue.defineComponent({
+const VListTile = /* @__PURE__ */ vue.defineComponent({
   name: 'VListTile',
   inheritAttrs: false,
   props: createListTileProps(),
-  emits: { ...listTileEmits
+  emits: {
+    ...listTileEmits
   },
-
   setup(props, ctx) {
+    const vui = useVui();
     const startIcon = vue.computed(() => {
       let icon = resolveRawIconProp(false, props.startIcon);
-
       if (!icon && props.startIconEmptySpace) {
         icon = resolveRawIconProp(false, '$empty');
       }
-
       return icon;
     });
     const endIcon = vue.computed(() => resolveRawIconProp(false, props.endIcon));
     const hasTo = vue.computed(() => !!ctx.attrs.to);
-    const link = vueRouter.useLink({
+    const link = vui.useLink({
       to: ctx.attrs.to || ''
     });
     const isActive = vue.computed(() => {
@@ -1667,14 +1576,13 @@ const VListTile = vue.defineComponent({
       });
     };
   }
-
 });
 
-const VDrawerLayout = vue.defineComponent({
+const VDrawerLayout = /* @__PURE__ */ vue.defineComponent({
   name: 'VDrawerLayout',
-  props: { ...createPaperBaseProps()
+  props: {
+    ...createPaperBaseProps()
   },
-
   setup(props, ctx) {
     return () => {
       const paperProps = vue.computed(() => ({
@@ -1698,16 +1606,16 @@ const VDrawerLayout = vue.defineComponent({
       }), ctx.slots);
     };
   }
-
 });
 
+// Adornment
 function _isSlot$d(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
-const VHero = vue.defineComponent({
+const VHero = /* @__PURE__ */ vue.defineComponent({
   name: 'VHero',
-  props: { ...vueUtils.htmlAttributesPropOptions,
+  props: {
+    ...vueUtils.htmlAttributesPropOptions,
     color: {
       type: String,
       default: 'primary'
@@ -1722,11 +1630,9 @@ const VHero = vue.defineComponent({
     },
     ...vueUtils.defineSlotsProps()
   },
-
   setup(props, ctx) {
     return () => {
       let _slot;
-
       const TagName = props.tag;
       const HTagName = props.hTag;
       const adornment = vueUtils.renderSlotOrEmpty(ctx.slots, 'adornment');
@@ -1747,37 +1653,36 @@ const VHero = vue.defineComponent({
       });
     };
   }
-
 });
 
 function _isSlot$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.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,
@@ -1789,21 +1694,27 @@ function renderNavigationItemInput(input, extraProps) {
     label,
     props
   } = resolveNavigationItemInput(input);
-  return vue.createVNode(VNavigationItem, { ...props,
+  return vue.createVNode(VNavigationItem, {
+    ...props,
     ...extraProps
   }, _isSlot$c(label) ? label : {
     default: () => [label]
   });
 }
-const VNavigationItem = vue.defineComponent({
+const TRIM_END_SLASH_RE = /\/$/;
+function trimEndSlash(sorce) {
+  return sorce ? sorce.replace(TRIM_END_SLASH_RE, '') : sorce;
+}
+const VNavigationItem = /* @__PURE__ */ vue.defineComponent({
   name: 'VNavigationItem',
   inheritAttrs: false,
-  props: { ...createNavigationItemProps(),
+  props: {
+    ...createNavigationItemProps(),
     children: Array
   },
-  emits: { ...listTileEmits
+  emits: {
+    ...listTileEmits
   },
-
   setup(props, ctx) {
     const vui = useVui();
     const opened = vue.ref(false);
@@ -1819,51 +1730,59 @@ const VNavigationItem = vue.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 = vue.computed(() => [{
       'v-navigation-item--opened': opened.value,
       [`v-navigation-item--depth-${props.depth}`]: props.depth > 0
     }]);
-    const route = vueRouter.useRoute(); // const classes = computed(() => [
+    const route = vueRouter.useRoute();
+    // const classes = computed(() => [
     //   // {
     //   //   'v-navigation-item--matched': matched.value,
     //   // },
     // ]);
-
     vue.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 = vue.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,
@@ -1872,19 +1791,20 @@ const VNavigationItem = vue.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),
-
       };
     });
 
@@ -1892,25 +1812,22 @@ const VNavigationItem = vue.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 => {
@@ -1931,13 +1848,11 @@ const VNavigationItem = vue.defineComponent({
       // }
       ctx.emit('changeActive', isActive);
     };
-
     ctx.expose({
       close
     });
     return () => {
       let _slot;
-
       const _children = children.value;
       const fallbackTag = _children ? 'button' : undefined;
       return vue.createVNode(vue.Fragment, null, [vue.createVNode(VListTile, vue.mergeProps(ctx.attrs, _props.value, {
@@ -1956,19 +1871,17 @@ const VNavigationItem = vue.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,
-
         }))]), [[vue.vShow, opened.value]])]
       })]);
     };
   }
-
 });
 
-const VNavigation = vue.defineComponent({
-  name: 'VNavigation',
-  props: {
+function createNavigationProps() {
+  return vueUtils.createPropsOptions({
     items: {
       type: Array,
       required: true
@@ -1979,8 +1892,11 @@ const VNavigation = vue.defineComponent({
       default: true
     },
     caption: [String, Function]
-  },
-
+  });
+}
+const VNavigation = /* @__PURE__ */ vue.defineComponent({
+  name: 'VNavigation',
+  props: createNavigationProps(),
   setup(props, ctx) {
     const items = vue.computed(() => props.items);
     const color = vueColorScheme.useScopeColorClass(props);
@@ -1994,14 +1910,12 @@ const VNavigation = vue.defineComponent({
     vue.onBeforeUpdate(() => {
       itemsRef.value = [];
     });
-
     function setItemRef(item, itemRef) {
       itemsRef.value.push({
         key: item.key,
         ref: itemRef
       });
     }
-
     function onItemActivated(item) {
       itemsRef.value.forEach(({
         key,
@@ -2011,7 +1925,6 @@ const VNavigation = vue.defineComponent({
         ref.close();
       });
     }
-
     return () => {
       const $caption = caption.value;
       return vue.createVNode("nav", {
@@ -2025,27 +1938,24 @@ const VNavigation = vue.defineComponent({
           setItemRef(item, ref);
         },
         onChangeActive: isActive => {
-          if (isActive
-          /* && item.children && item.children.length*/
-          ) {
+          if (isActive /* && item.children && item.children.length*/) {
             onItemActivated(item);
           }
         }
       }))]);
     };
   }
-
 });
 
-const VCheckable = vue.defineComponent({
+const VCheckable = /* @__PURE__ */ vue.defineComponent({
   name: 'VCheckable',
   props: {
     invalid: Boolean,
     disabled: Boolean,
     readonly: Boolean,
     checked: Boolean,
-    ...vueKit.defineSlotsProps() // autoWidth: Boolean,
-
+    ...vueKit.defineSlotsProps()
+    // autoWidth: Boolean,
   },
 
   setup(props, ctx) {
@@ -2053,8 +1963,8 @@ const VCheckable = vue.defineComponent({
     const invalid = vue.computed(() => props.invalid);
     const disabled = vue.computed(() => props.disabled);
     const readonly = vue.computed(() => props.readonly);
-    const checked = vue.computed(() => props.checked); // const autoWidth = computed(() => props.autoWidth);
-
+    const checked = vue.computed(() => props.checked);
+    // const autoWidth = computed(() => props.autoWidth);
     const classes = vue.computed(() => {
       return [{
         'v-checkable--invalid': invalid.value,
@@ -2075,21 +1985,20 @@ const VCheckable = vue.defineComponent({
       "class": "v-checkable__label"
     }, [vueKit.renderSlotOrEmpty(ctx.slots, 'label')])]);
   }
-
 });
 
 const {
   props: props$7,
   emits: emits$7
 } = vueKit.createFormSelectorItemSettings();
-const VCheckbox = vue.defineComponent({
+const VCheckbox = /* @__PURE__ */ vue.defineComponent({
   name: 'VCheckbox',
-  props: { ...props$7,
+  props: {
+    ...props$7,
     ...createControlProps(),
     indeterminate: Boolean
   },
   emits: emits$7,
-
   setup(props, ctx) {
     const nodeControl = vueKit.useFormSelectorItemControl(props, ctx, {
       nodeType: VUI_CHECKBOX_SYMBOL,
@@ -2097,12 +2006,12 @@ const VCheckbox = vue.defineComponent({
     });
     const control = useControl(props);
     const isIndeterminate = vue.computed(() => props.indeterminate);
-    return { ...nodeControl.expose(),
+    return {
+      ...nodeControl.expose(),
       ...control,
       isIndeterminate
     };
   },
-
   render() {
     const {
       selectorItemControl,
@@ -2127,13 +2036,11 @@ const VCheckbox = vue.defineComponent({
       label: () => vueKit.renderSlotOrEmpty(this.$slots, 'default')
     });
   }
-
 });
 
 function _isSlot$b(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
 const VCheckboxGroup = defineFormSelectorComponent({
   name: 'VCheckboxGroup',
   defaultMultiple: true,
@@ -2151,24 +2058,24 @@ const {
   props: props$6,
   emits: emits$6
 } = vueKit.createFormSelectorItemSettings();
-const VRadio = vue.defineComponent({
+const VRadio = /* @__PURE__ */ vue.defineComponent({
   name: 'VRadio',
-  props: { ...props$6,
+  props: {
+    ...props$6,
     ...createControlProps()
   },
   emits: emits$6,
-
   setup(props, ctx) {
     const nodeControl = vueKit.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
@@ -2191,13 +2098,11 @@ const VRadio = vue.defineComponent({
       label: () => vueKit.renderSlotOrEmpty(this.$slots, 'default')
     });
   }
-
 });
 
 function _isSlot$a(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
 const VRadioGroup = defineFormSelectorComponent({
   name: 'VRadioGroup',
   nodeType: VUI_RADIO_GROUP_SYMBOL,
@@ -2214,30 +2119,28 @@ const {
   props: props$5,
   emits: emits$5
 } = vueKit.createFormSelectorItemSettings();
-const VSwitch = vue.defineComponent({
+const VSwitch = /* @__PURE__ */ vue.defineComponent({
   name: 'VSwitch',
-  props: { ...props$5,
+  props: {
+    ...props$5,
     ...createControlProps()
   },
   emits: emits$5,
-
   setup(props, ctx) {
     const nodeControl = vueKit.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
@@ -2264,13 +2167,11 @@ const VSwitch = vue.defineComponent({
       label: () => vueKit.renderSlotOrEmpty(this.$slots, 'default')
     });
   }
-
 });
 
 function _isSlot$9(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
 const VSwitchGroup = defineFormSelectorComponent({
   name: 'VSwitchGroup',
   defaultMultiple: true,
@@ -2288,13 +2189,13 @@ const {
   props: props$4,
   emits: emits$4
 } = vueKit.createFormSelectorItemSettings();
-const VOption = vue.defineComponent({
+const VOption = /* @__PURE__ */ vue.defineComponent({
   name: 'VOption',
-  props: { ...props$4,
+  props: {
+    ...props$4,
     ...createControlProps()
   },
   emits: emits$4,
-
   setup(props, ctx) {
     const nodeControl = vueKit.useFormSelectorItemControl(props, ctx, {
       nodeType: VUI_OPTION_SYMBOL,
@@ -2308,11 +2209,11 @@ const VOption = vue.defineComponent({
         'v-option--disabled': nodeControl.isDisabled
       }, control.classes.value];
     });
-    return { ...nodeControl.expose(),
+    return {
+      ...nodeControl.expose(),
       classes
     };
   },
-
   render() {
     const {
       selectorItemControl,
@@ -2329,17 +2230,16 @@ const VOption = vue.defineComponent({
       "class": "v-option__label"
     }, [vueKit.renderSlotOrEmpty(this.$slots, 'default')])]);
   }
-
 });
 
-const VOptionGroup = vue.defineComponent({
+const VOptionGroup = /* @__PURE__ */ vue.defineComponent({
   name: 'VOptionGroup',
-  props: { ...vueKit.createFormSelectorItemGroupProps(),
+  props: {
+    ...vueKit.createFormSelectorItemGroupProps(),
     // eslint-disable-next-line vue/require-prop-types
     label: {},
     ...vueKit.defineSlotsProps()
   },
-
   setup(props, ctx) {
     const groupControl = vueKit.useFormSelectorItemGroupControl(props, ctx, {
       parentNodeType: VUI_SELECT_SYMBOL
@@ -2352,12 +2252,12 @@ const VOptionGroup = vue.defineComponent({
         'v-option-group--disabled': groupControl.isDisabled
       }];
     });
-    return { ...groupControl.expose(),
+    return {
+      ...groupControl.expose(),
       classes,
       labelSlot
     };
   },
-
   render() {
     const {
       labelSlot,
@@ -2371,12 +2271,12 @@ const VOptionGroup = vue.defineComponent({
       "class": "v-option-group__label"
     }, [label]), vueKit.renderSlotOrEmpty(this.$slots, 'default')]);
   }
-
 });
 
 const ADORNMENT_POSITIONS = ['start', 'end'];
 function createControlFieldProps() {
-  return { ...vueKit.createPropsOptions({
+  return {
+    ...vueKit.createPropsOptions({
       startAdornment: {},
       endAdornment: {},
       tabindex: {
@@ -2388,9 +2288,10 @@ function createControlFieldProps() {
     ...createControlProps()
   };
 }
-const VControlField = vue.defineComponent({
+const VControlField = /* @__PURE__ */ vue.defineComponent({
   name: 'VControlField',
-  props: { ...createControlFieldProps(),
+  props: {
+    ...createControlFieldProps(),
     focused: Boolean,
     autoHeight: Boolean,
     ...vueKit.defineSlotsProps(),
@@ -2400,7 +2301,6 @@ const VControlField = vue.defineComponent({
   emits: {
     click: ev => true
   },
-
   setup(props, ctx) {
     const parentNode = vueKit.useParentFormNode();
     const control = useControl(props);
@@ -2409,11 +2309,11 @@ const VControlField = vue.defineComponent({
     const disabled = vue.computed(() => !!parentNode && parentNode.isDisabled);
     const invalid = vue.computed(() => !!parentNode && parentNode.invalid);
     const autoHeight = vue.computed(() => props.autoHeight);
-    const readonly = vue.computed(() => !!parentNode && parentNode.isReadonly); // const computedTabindex = computed(() =>
+    const readonly = vue.computed(() => !!parentNode && parentNode.isReadonly);
+    // const computedTabindex = computed(() =>
     //   disabled.value ? -1 : props.tabindex,
     // );
     // const isOutlined = computed(() => inputBox.variant.value === 'outlined');
-
     const colorProvider = useVuiColorProvider();
     const classes = vue.computed(() => {
       const classes = ['v-control-field', `v-control-field--${inputBox.variant.value}`, {
@@ -2433,10 +2333,8 @@ const VControlField = vue.defineComponent({
       });
       return slots;
     });
-
     const renderAdornment = position => {
       let child;
-
       if (position === 'end' && props.loading) {
         child = vue.createVNode(vueLoading.VProgressCircular, {
           "indeterminate": true,
@@ -2445,15 +2343,14 @@ const VControlField = vue.defineComponent({
       } else {
         child = vueKit.renderSlotOrEmpty(resolvedSlots.value, position);
       }
-
       if (!child) return;
       return vue.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);
       // }
     };
@@ -2462,8 +2359,8 @@ const VControlField = vue.defineComponent({
       classes,
       renderAdornment,
       hostElRef: () => hostElRef,
-      handleClick // computedTabindex,
-
+      handleClick
+      // computedTabindex,
     };
   },
 
@@ -2476,23 +2373,22 @@ const VControlField = vue.defineComponent({
       "class": "v-control-field__body"
     }, [vueKit.renderSlotOrEmpty(this.$slots, 'default')]), this.renderAdornment('end')]);
   }
-
 });
 
 function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
-const ARROW_KEY_TYPES = vueKit.useKeybord.Key(['ArrowUp', 'ArrowDown']);
-const CHOICE_KEY_TYPES = vueKit.useKeybord.Key(['Enter', ' ']);
-const KEYBORD_EVENT_TYPES = vueKit.useKeybord.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
+const ARROW_KEY_TYPES = vueKit.useKeyboard.Key(['ArrowUp', 'ArrowDown']);
+const CHOICE_KEY_TYPES = vueKit.useKeyboard.Key(['Enter', ' ']);
+const KEYBORD_EVENT_TYPES = vueKit.useKeyboard.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
 const {
   props: props$3,
   emits: emits$3
 } = vueKit.createFormSelectorSettings();
-const VSelect = vue.defineComponent({
+const VSelect = /* @__PURE__ */ vue.defineComponent({
   name: 'VSelect',
-  props: { ...props$3,
+  props: {
+    ...props$3,
     ...vueKit.createFormControlProps(),
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
@@ -2502,22 +2398,19 @@ const VSelect = vue.defineComponent({
       placeholder: String,
       loadingMessage: {},
       failedToLoadItemsMessage: {}
-    })
+    }),
+    closeOnNavigation: Boolean
   },
   emits: emits$3,
-
   setup(props, ctx) {
     const menuRef = vue.ref(null);
     const menuOpened = vue.ref(false);
-
     const showMenu = () => {
       menuOpened.value = true;
     };
-
     const closeMenu = () => {
       menuOpened.value = false;
     };
-
     const inputControl = vueKit.useFormSelectorControl(props, ctx, {
       nodeType: VUI_SELECT_SYMBOL,
       onSelectItem: item => {
@@ -2537,14 +2430,12 @@ const VSelect = vue.defineComponent({
       const slot = vueKit.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(vue.createVNode("span", {
           "class": "v-select__placeholder"
@@ -2558,18 +2449,19 @@ const VSelect = vue.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(vue.createVNode("span", {
           "class": "v-select__placeholder"
         }, [props.placeholder]));
       }
-
       return children;
     };
-
     const clearKeyFocused = () => {
       const menu = menuRef.value;
       if (!menu) return;
@@ -2578,7 +2470,6 @@ const VSelect = vue.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;
@@ -2594,7 +2485,6 @@ const VSelect = vue.defineComponent({
       if (!els.length) return;
       return els;
     };
-
     const arrowKeyHandler = ev => {
       const {
         key
@@ -2609,22 +2499,18 @@ const VSelect = vue.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');
@@ -2636,7 +2522,6 @@ const VSelect = vue.defineComponent({
         ev.preventDefault();
       }
     };
-
     const choiceKeyHandler = ev => {
       const {
         key
@@ -2645,7 +2530,6 @@ const VSelect = vue.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,
@@ -2659,19 +2543,18 @@ const VSelect = vue.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);
     };
-
-    vueKit.useKeybord([{
+    vueKit.useKeyboard([{
       key: KEYBORD_EVENT_TYPES,
-      handler: keybordEventHandler
+      handler: keyboardEventHandler
     }], {
       autorun: true
     });
-    return { ...inputControl.expose(),
+    return {
+      ...inputControl.expose(),
       ...control,
       iconName,
       menuOpened,
@@ -2684,7 +2567,6 @@ const VSelect = vue.defineComponent({
       clearKeyFocused
     };
   },
-
   render() {
     const {
       nodeControl,
@@ -2695,7 +2577,6 @@ const VSelect = vue.defineComponent({
     const children = this.$slots.default && this.$slots.default() || [];
     const propGroups = this.propGroups.map(group => {
       let _slot;
-
       return vue.createVNode(VOptionGroup, {
         "key": group.id,
         "groupId": group.id,
@@ -2724,10 +2605,12 @@ const VSelect = vue.defineComponent({
       "onClickLabel": ev => {
         this.focus();
       }
-    }, { ...this.$slots,
+    }, {
+      ...this.$slots,
       default: () => vue.createVNode(vueKit.VMenu, {
         "width": "fit",
         "maxWidth": "fit",
+        "closeOnNavigation": this.closeOnNavigation,
         "distance": 0,
         "alwaysRender": true,
         "modelValue": this.menuOpened,
@@ -2756,20 +2639,18 @@ const VSelect = vue.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: () => [vue.withDirectives(vue.createVNode("select", {
             "class": "v-select__input__element",
             "name": this.name,
@@ -2801,7 +2682,6 @@ const VSelect = vue.defineComponent({
                 }
               }, null);
             }
-
             if (this.clearable && this.nodeControl.value != null) {
               return vue.createVNode(VButton, {
                 "key": "clear",
@@ -2813,7 +2693,6 @@ const VSelect = vue.defineComponent({
                 }
               }, null);
             }
-
             return vue.createVNode(VIcon, {
               "key": "icon",
               "name": this.iconName,
@@ -2824,10 +2703,9 @@ const VSelect = vue.defineComponent({
       })
     });
   }
-
 });
 
-const VTextCounter = vue.defineComponent({
+const VTextCounter = /* @__PURE__ */ vue.defineComponent({
   name: 'VTextCounter',
   props: {
     length: {
@@ -2839,22 +2717,20 @@ const VTextCounter = vue.defineComponent({
       required: true
     }
   },
-
   render() {
     return vue.createVNode("span", {
       "class": "v-text-counter"
     }, [`${this.length} / ${this.maxlength}`]);
   }
-
 });
 
 const {
   props: props$2,
   emits: emits$2
 } = vueKit.createTextInputSettings();
-
 function createTextFieldProps() {
-  return { ...props$2,
+  return {
+    ...props$2,
     ...vueKit.createFormControlProps(),
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
@@ -2862,23 +2738,21 @@ function createTextFieldProps() {
     ...vueKit.defineSlotsProps()
   };
 }
-
-const VTextField = vue.defineComponent({
+const VTextField = /* @__PURE__ */ vue.defineComponent({
   name: 'VTextField',
   props: createTextFieldProps(),
   emits: emits$2,
-
   setup(props, ctx) {
     const inputControl = vueKit.useTextInputControl(props, ctx, {
       nodeType: VUI_TEXT_FIELD_SYMBOL
     });
     const control = useControl(props);
     useControlField(props);
-    return { ...inputControl.expose(),
+    return {
+      ...inputControl.expose(),
       ...control
     };
   },
-
   render() {
     return vue.createVNode(VFormControl, {
       "nodeControl": this.nodeControl,
@@ -2892,13 +2766,15 @@ const VTextField = vue.defineComponent({
       "onClickLabel": ev => {
         this.focus();
       }
-    }, { ...this.$slots,
+    }, {
+      ...this.$slots,
       default: () => vue.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'
         })
@@ -2912,35 +2788,33 @@ const VTextField = vue.defineComponent({
       }
     });
   }
-
 });
 
-const VNumberField = vue.defineComponent({
+const VNumberField = /* @__PURE__ */ vue.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 vue.createVNode(VTextField, vue.mergeProps(ctx.attrs, {
         "type": "number",
@@ -2954,16 +2828,16 @@ const VNumberField = vue.defineComponent({
       }), ctx.slots);
     };
   }
-
 });
 
 const {
   props: props$1,
   emits: emits$1
 } = vueKit.createTextareaSettings();
-const VTextarea = vue.defineComponent({
+const VTextarea = /* @__PURE__ */ vue.defineComponent({
   name: 'VTextarea',
-  props: { ...props$1,
+  props: {
+    ...props$1,
     ...vueKit.createFormControlProps(),
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
@@ -2971,7 +2845,6 @@ const VTextarea = vue.defineComponent({
     ...vueKit.defineSlotsProps()
   },
   emits: emits$1,
-
   setup(props, ctx) {
     const vui = useVui();
     const inputControl = vueKit.useTextareaControl(props, ctx, {
@@ -2980,11 +2853,11 @@ const VTextarea = vue.defineComponent({
     });
     const control = useControl(props);
     useControlField(props);
-    return { ...inputControl.expose(),
+    return {
+      ...inputControl.expose(),
       ...control
     };
   },
-
   render() {
     return vue.createVNode(VFormControl, {
       "nodeControl": this.nodeControl,
@@ -2998,14 +2871,16 @@ const VTextarea = vue.defineComponent({
       "onClickLabel": ev => {
         this.focus();
       }
-    }, { ...this.$slots,
+    }, {
+      ...this.$slots,
       default: () => vue.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'
         })
@@ -3019,7 +2894,6 @@ const VTextarea = vue.defineComponent({
       }
     });
   }
-
 });
 
 const EDITOR_EVENTS = [
@@ -3141,10 +3015,10 @@ function resolveRawWysiwygEditorTools(rawTools, vui) {
 function _isSlot$7(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
-const VWysiwygEditor = vue.defineComponent({
+const VWysiwygEditor = /* @__PURE__ */ vue.defineComponent({
   name: 'VWysiwygEditor',
-  props: { // ...props,
+  props: {
+    // ...props,
     ...vueFormControl.createTextableProps(),
     ...vueKit.createFormControlProps(),
     ...createControlFieldProps(),
@@ -3163,9 +3037,9 @@ const VWysiwygEditor = vue.defineComponent({
     disabledMinHeight: Boolean,
     disabledMaxHeight: Boolean
   },
-  emits: { ...vueFormControl.createTextableEmits()
+  emits: {
+    ...vueFormControl.createTextableEmits()
   },
-
   setup(props, ctx) {
     const vui = useVui();
     const textRef = vue.ref('');
@@ -3201,22 +3075,21 @@ const VWysiwygEditor = vue.defineComponent({
         textRef.value = editor.getText();
       }
     });
-    const extensions = [StarterKit__default.configure({
+    const extensions = [starterKit.StarterKit.configure({
       bold: false,
       bulletList: false,
       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);
     };
-
     vue.watch(() => inputControl.canOperation, updateEditable);
     vue.watch(() => props.modelValue, modelValue => {
       const $editor = editor.value;
@@ -3230,7 +3103,8 @@ const VWysiwygEditor = vue.defineComponent({
       textRef.value = editor.getText();
       updateEditable();
     });
-    const editor = vue3.useEditor({ ...initializeCtx.editorOptions(),
+    const editor = vue3.useEditor({
+      ...initializeCtx.editorOptions(),
       autofocus: props.autofocus,
       content: props.modelValue,
       extensions,
@@ -3239,33 +3113,29 @@ const VWysiwygEditor = vue.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 = vue.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;
@@ -3291,11 +3161,9 @@ const VWysiwygEditor = vue.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 {
@@ -3305,7 +3173,6 @@ const VWysiwygEditor = vue.defineComponent({
         } else {
           iconName = icon;
         }
-
         if (!iconName && child == null) return;
         return vue.createVNode(VButton, {
           "tabindex": -1,
@@ -3321,7 +3188,6 @@ const VWysiwygEditor = vue.defineComponent({
         default: () => [_slot]
       });
     };
-
     vue.onBeforeUnmount(() => {
       editor.value && editor.value.destroy();
     });
@@ -3334,7 +3200,6 @@ const VWysiwygEditor = vue.defineComponent({
       createTools
     };
   },
-
   render() {
     return vue.createVNode(VFormControl, {
       "nodeControl": this.nodeControl,
@@ -3353,7 +3218,8 @@ const VWysiwygEditor = vue.defineComponent({
           scrollIntoView: true
         });
       }
-    }, { ...this.$slots,
+    }, {
+      ...this.$slots,
       default: () => {
         const {
           editor
@@ -3366,10 +3232,10 @@ const VWysiwygEditor = vue.defineComponent({
           "startAdornment": this.startAdornment,
           "endAdornment": this.endAdornment,
           "size": this.size
-        }, { ...this.$slots,
+        }, {
+          ...this.$slots,
           default: () => {
             let _slot2;
-
             return vue.createVNode("div", {
               "class": "v-wysiwyg-editor__body"
             }, [vue.createVNode(vue3.EditorContent, vue.mergeProps({
@@ -3395,9 +3261,7 @@ const VWysiwygEditor = vue.defineComponent({
       }
     });
   }
-
 });
-
 function resolveContextableValue(ctx, source) {
   return typeof source === 'function' ? source(ctx) : source;
 }
@@ -3405,11 +3269,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'
@@ -3418,14 +3280,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 => {
@@ -3442,7 +3301,6 @@ function runAllLinterPlugins(doc, plugins) {
       'data-issue-id': issue.id,
       title: typeof message === 'string' ? message : undefined
     }));
-
     if (icon) {
       decorations.push(prosemirrorView.Decoration.widget(issue.from, view => renderIcon(view, issue)));
     }
@@ -3453,7 +3311,6 @@ function runAllLinterPlugins(doc, plugins) {
     decorationSet
   };
 }
-
 const WysiwygLinter = createWysiwygExtension(ctx => {
   function showMenu(view, issue, event) {
     const message = resolveWysiwygLinterFixMessage(issue.message);
@@ -3482,22 +3339,18 @@ const WysiwygLinter = createWysiwygExtension(ctx => {
       }, [resolveWysiwygLinterFixMessage(fixer.message)])])]))])])
     });
   }
-
   return core.Extension.create({
     name: 'linter',
-
     addOptions() {
       return {
         plugins: []
       };
     },
-
     addStorage() {
       return {
         issues: []
       };
     },
-
     addProseMirrorPlugins() {
       const {
         plugins
@@ -3505,7 +3358,6 @@ const WysiwygLinter = createWysiwygExtension(ctx => {
       const {
         storage
       } = this;
-
       const runAll = doc => {
         const {
           issues,
@@ -3514,14 +3366,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;
@@ -3529,7 +3378,6 @@ const WysiwygLinter = createWysiwygExtension(ctx => {
           issue
         };
       };
-
       const linterPlugin = new prosemirrorState.Plugin({
         key: new prosemirrorState.PluginKey('linter'),
         state: {
@@ -3538,24 +3386,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;
@@ -3563,19 +3406,15 @@ const WysiwygLinter = createWysiwygExtension(ctx => {
               from,
               to
             } = issue;
-
             const focus = () => view.dispatch(view.state.tr.setSelection(prosemirrorState.TextSelection.create(view.state.doc, from, to)).scrollIntoView());
-
             focus();
             showMenu(view, issue, event);
             return true;
           }
-
         }
       });
       return [linterPlugin];
     }
-
   });
 });
 
@@ -3638,9 +3477,7 @@ function WysiwygLinterBadWords(words) {
         if (!node.isText) {
           return;
         }
-
         const matches = regex.exec(node.text);
-
         if (matches) {
           const fixValue = matches[0] + '!!!!!';
           this.record({
@@ -3664,7 +3501,6 @@ function WysiwygLinterBadWords(words) {
       });
       return this;
     }
-
   };
 }
 
@@ -3952,13 +3788,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();
             }
@@ -3973,11 +3807,10 @@ function createWysiwygColorTool(opts) {
         });
       },
       floating: true,
-      extensions: [TextStyle__default, WysiwygColorExtension]
+      extensions: [TextStyle, WysiwygColorExtension]
     };
     return tool;
   };
-
   return WysiwygColorTool;
 }
 
@@ -3988,17 +3821,18 @@ const {
   nodeType: VUI_FORM_SYMBOL
 });
 function createVFormProps() {
-  return { ...props,
+  return {
+    ...props,
     ...createControlProps(),
-    ...vueKit.defineSlotsProps() // disableAutoScroll: Boolean,
-
+    ...vueKit.defineSlotsProps()
+    // disableAutoScroll: Boolean,
   };
 }
-const VForm = vue.defineComponent({
+
+const VForm = /* @__PURE__ */ vue.defineComponent({
   name: 'VForm',
   props: createVFormProps(),
   emits,
-
   setup(props, ctx) {
     const vui = useVui();
     const nodeControl = vueKit.useForm(props, ctx, {
@@ -4021,11 +3855,11 @@ const VForm = vue.defineComponent({
       }];
     });
     useControl(props);
-    return { ...nodeControl.expose(),
+    return {
+      ...nodeControl.expose(),
       classes
     };
   },
-
   render() {
     const {
       form
@@ -4038,14 +3872,12 @@ const VForm = vue.defineComponent({
       "onSubmit": form.handleSubmit
     }, [vueKit.renderSlotOrEmpty(this.$slots, 'default', form)]);
   }
-
 });
 
 function _isSlot$6(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
-const VTab = vue.defineComponent({
+const VTab = /* @__PURE__ */ vue.defineComponent({
   name: 'VTab',
   props: {
     value: {
@@ -4059,7 +3891,6 @@ const VTab = vue.defineComponent({
   emits: {
     click: ev => true
   },
-
   setup(props, ctx) {
     const classesRef = vue.computed(() => ({
       'v-tab--active': props.active
@@ -4077,13 +3908,11 @@ const VTab = vue.defineComponent({
         active
       } = props;
       const classes = ['v-tab', classesRef.value];
-
       const children = vue.createVNode("span", {
         "class": "v-tab__content"
       }, [icon && resolveRawIconProp(active, icon, {
         class: 'v-tab__icon'
       }), vueUtils.renderSlotOrEmpty(ctx.slots)]);
-
       if (to) {
         const replace = typeof to === 'string' ? undefined : to.replace;
         return vue.createVNode(vueRouter.RouterLink, {
@@ -4105,23 +3934,21 @@ const VTab = vue.defineComponent({
       }
     };
   }
-
 });
 
 function _isSlot$5(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
-const VTabs = vue.defineComponent({
+const VTabs = /* @__PURE__ */ vue.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;
       // },
-
     },
 
     /**
@@ -4131,12 +3958,10 @@ const VTabs = vue.defineComponent({
       type: Number,
       default: 20
     },
-
     /**
      * ルーター同期する場合設定する
      */
     router: Function,
-
     /**
      * ルーティング連携を行う際に、クエリベースのURLマッチングを行う
      * タブのURLが /page1?tab=xxx のようになる時に設定する
@@ -4150,7 +3975,6 @@ const VTabs = vue.defineComponent({
     'update:modelValue': newValue => true,
     change: newValue => true
   },
-
   setup(props, ctx) {
     const vui = useVui();
     const internalValueRef = vue.ref(null);
@@ -4183,7 +4007,6 @@ const VTabs = vue.defineComponent({
         } = item;
         const active = current === value;
         let location;
-
         if (router) {
           const to = router(value);
           const route = vui.router.resolve(to);
@@ -4192,31 +4015,26 @@ const VTabs = vue.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
@@ -4240,48 +4058,37 @@ const VTabs = vue.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 (helpers.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;
@@ -4308,15 +4115,12 @@ const VTabs = vue.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, {
@@ -4324,7 +4128,6 @@ const VTabs = vue.defineComponent({
         });
       }
     }
-
     vue.watch(() => props.modelValue, () => setupInternalValue(true));
     vue.watch(() => props.items, () => setupInternalValue(), {
       deep: true
@@ -4340,7 +4143,6 @@ const VTabs = vue.defineComponent({
       }) => {
         return location && location.route.fullPath === path;
       });
-
       if (hit) {
         currentRef.value = hit.value;
       }
@@ -4370,15 +4172,12 @@ const VTabs = vue.defineComponent({
         if (!label) {
           label = itemSlot;
         }
-
         const children = typeof label === 'function' ? label({
           value,
           active,
           vui
         }) : label;
-
         const _to = location && location.to || undefined;
-
         return vue.createVNode(VTab, {
           "value": value,
           "to": _to,
@@ -4409,22 +4208,20 @@ const VTabs = vue.defineComponent({
       })]);
     };
   }
-
 });
 
 function _isSlot$4(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
-const VBreadcrumbs = vue.defineComponent({
+const VBreadcrumbs = /* @__PURE__ */ vue.defineComponent({
   name: 'VBreadcrumbs',
   props: {
     items: {
       type: Array,
       default: () => []
     },
-    divider: [String, Function] // ...defineSlotsProps<{}>(),
-
+    divider: [String, Function]
+    // ...defineSlotsProps<{}>(),
   },
 
   setup(props, ctx) {
@@ -4441,33 +4238,30 @@ const VBreadcrumbs = vue.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 = vue.computed(() => computedItemsRef.value.length);
-
     const defaultDividerSlot = () => {
       return [vue.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 {
@@ -4476,10 +4270,8 @@ const VBreadcrumbs = vue.defineComponent({
           disabled,
           to
         } = item;
-
         if (index > 0) {
           const divider = dividerSlot(vui);
-
           if (divider) {
             children.push(vue.createVNode("li", {
               "class": "v-breadcrumbs__divider",
@@ -4487,19 +4279,15 @@ const VBreadcrumbs = vue.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 ? vue.createVNode(vueUtils.VLink, {
           "class": "v-breadcrumbs__link",
@@ -4522,14 +4310,12 @@ const VBreadcrumbs = vue.defineComponent({
       }, [children])]);
     };
   }
-
 });
 
 function _isSlot$3(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
-const VContentSwitcher = vue.defineComponent({
+const VContentSwitcher = /* @__PURE__ */ vue.defineComponent({
   name: 'VContentSwitcher',
   props: {
     modelValue: String,
@@ -4542,7 +4328,6 @@ const VContentSwitcher = vue.defineComponent({
   emits: {
     'update:modelValue': modelValue => true
   },
-
   setup(props, ctx) {
     const internalValueRef = vue.ref('');
     const transitionRef = vue.ref('');
@@ -4566,31 +4351,26 @@ const VContentSwitcher = vue.defineComponent({
       } = props;
       if (settings === true) settings = {};
       if (!settings) return;
-      return { ...settings
+      return {
+        ...settings
       };
     });
-
     function seeTop(options) {
       const scoller = vueScroller.getDocumentScroller();
       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;
     }
-
     vue.watch(() => props.modelValue, (value, beforeValue) => {
       if (value == null) return;
       internalValueRef.value = value;
@@ -4599,19 +4379,16 @@ const VContentSwitcher = vue.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
     });
     vue.watch(currentRef, () => {
       const autotopSettings = autotopSettingsRef.value;
-
       if (autotopSettings && props.modelValue != null) {
         seeTop(autotopSettings);
       }
@@ -4620,14 +4397,12 @@ const VContentSwitcher = vue.defineComponent({
       const current = currentRef.value;
       const children = vueUtils.renderSlotOrEmpty(ctx.slots) || [];
       const currentSlot = ctx.slots[current];
-
       if (currentSlot) {
         children.push(vue.createVNode("div", {
           "class": "v-content-switcher__content",
           "key": current
         }, [currentSlot(this)]));
       }
-
       return vue.createVNode("div", {
         "class": "v-content-switcher",
         "ref": elRef
@@ -4656,7 +4431,6 @@ const VContentSwitcher = vue.defineComponent({
       })]);
     };
   }
-
 });
 
 const DATA_TABLE_DEFAULTS = {
@@ -4675,13 +4449,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 = vue.defineComponent({
+const VDataTable = /* @__PURE__ */ vue.defineComponent({
   name: 'VDataTable',
   props: {
     /** 選択中のkeyの配列 */
@@ -4693,7 +4466,6 @@ const VDataTable = vue.defineComponent({
       type: String,
       default: () => DATA_TABLE_DEFAULTS.itemKey
     },
-
     /**
      * ページネーションクエリ名
      */
@@ -4701,7 +4473,6 @@ const VDataTable = vue.defineComponent({
       type: String,
       default: () => DATA_TABLE_DEFAULTS.pageQuery
     },
-
     /**
      * ソートクエリ名
      */
@@ -4709,7 +4480,6 @@ const VDataTable = vue.defineComponent({
       type: String,
       default: () => DATA_TABLE_DEFAULTS.sortQuery
     },
-
     /**
      * 表示順クエリ名
      */
@@ -4717,7 +4487,6 @@ const VDataTable = vue.defineComponent({
       type: String,
       default: () => DATA_TABLE_DEFAULTS.orderQuery
     },
-
     /**
      * 検索クエリ名
      */
@@ -4725,7 +4494,6 @@ const VDataTable = vue.defineComponent({
       type: [String, Array],
       default: () => DATA_TABLE_DEFAULTS.searchQuery
     },
-
     /**
      * リミット件数クエリ名
      */
@@ -4780,7 +4548,6 @@ const VDataTable = vue.defineComponent({
   emits: {
     input: selecteds => true
   },
-
   setup(props, ctx) {
     const vui = useVui();
     const bootedRef = vue.ref(false);
@@ -4794,13 +4561,11 @@ const VDataTable = vue.defineComponent({
         selectable
       } = props;
       const ret = [];
-
       if (selectable) {
         ret.push({
           key: SELECTABLE_HEADER_SYMBOL
         });
       }
-
       ret.push(...headers.filter(h => !h.hidden));
       return ret;
     });
@@ -4808,34 +4573,27 @@ const VDataTable = vue.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 = vue.computed(() => {
       let message;
-
       if (searchQueryValues.value.length) {
         message = props.noResultsMessage || vui.setting('noResultsMessage') || 'No search results found.'; // 検索結果が見つかりませんでした。
       } else {
@@ -4855,13 +4613,10 @@ const VDataTable = vue.defineComponent({
         maxHeight
       } = props;
       const footerHeight = footerHeightRef.value;
-
       const _maxHeight = maxHeight || (fixedHeader ? '100%' : maxHeight);
-
       if (!_maxHeight) {
         return;
       }
-
       return {
         maxHeight: layout.calicurateViewHeight(_maxHeight, -footerHeight - 100, 200)
       };
@@ -4876,35 +4631,29 @@ const VDataTable = vue.defineComponent({
       get: () => {
         return vui.location.getQuery(props.sortQuery);
       },
-
       set(value) {
         vui.location.pushQuery({
           [props.sortQuery]: value || null,
           [props.pageQuery]: 1
         });
       }
-
     });
     const ordersRef = vue.computed(() => [props.ascQueryValue, props.descQueryValue]);
     const usePaigingRef = vue.computed(() => props.limits.length > 0);
     const orderByRef = vue.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 = vue.computed(() => (pageRef.value - 1) * limitRef.value);
     const limitRef = vue.computed({
@@ -4926,14 +4675,12 @@ const VDataTable = vue.defineComponent({
       return Math.ceil(total / _limit);
     });
     const lengthRef = vue.computed(() => props.items.length);
-    const isASCRef = vue.computed(() => orderByRef.value === props.ascQueryValue); // const isDESCRef = computed(() => orderByRef.value === props.descQueryValue);
-
+    const isASCRef = vue.computed(() => orderByRef.value === props.ascQueryValue);
+    // const isDESCRef = computed(() => orderByRef.value === props.descQueryValue);
     const sortIconRef = vue.computed(() => {
       let icon = vui.icon('sort');
-
       if (typeof icon === 'string') {
         const name = icon;
-
         icon = gen => {
           return gen({
             name,
@@ -4941,7 +4688,6 @@ const VDataTable = vue.defineComponent({
           });
         };
       }
-
       return icon;
     });
     const isIndeterminateRef = vue.computed(() => {
@@ -4951,7 +4697,6 @@ const VDataTable = vue.defineComponent({
       return length > 0 && length < sortedItemKeysRef.value.length;
     });
     const isAllSelectedRef = vue.computed(() => internalValues.value.length === sortedItemKeysRef.value.length);
-
     function setSort(settings) {
       const {
         sort,
@@ -4959,30 +4704,27 @@ const VDataTable = vue.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();
@@ -4999,7 +4741,6 @@ const VDataTable = vue.defineComponent({
         ctx.emit('input', values);
       }
     }
-
     function selectAll() {
       if (!isAllSelectedRef.value) {
         const values = sortedItemKeysRef.value.slice();
@@ -5007,7 +4748,6 @@ const VDataTable = vue.defineComponent({
         ctx.emit('input', values);
       }
     }
-
     function deselectAll() {
       if (internalValues.value.length) {
         const values = [];
@@ -5015,34 +4755,28 @@ const VDataTable = vue.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 vue.createVNode(VPagination, {
         "class": "v-data-table__pagination",
@@ -5053,7 +4787,6 @@ const VDataTable = vue.defineComponent({
         "length": pageLengthRef.value
       }, null);
     }
-
     function genControls() {
       const {
         total
@@ -5087,7 +4820,6 @@ const VDataTable = vue.defineComponent({
         "class": "v-data-table__controls__pagination"
       }, [genPagination()])]);
     }
-
     function genTableHeader() {
       const sortBy = sortByRef.value;
       const isIndeterminate = isIndeterminateRef.value;
@@ -5096,7 +4828,7 @@ const VDataTable = vue.defineComponent({
         defaultOrder,
         ascQueryValue
       } = props;
-      const usePaiging = usePaigingRef.value;
+      // const usePaiging = usePaigingRef.value;
       const children = headersRef.value.map(header => {
         const {
           label,
@@ -5105,17 +4837,13 @@ const VDataTable = vue.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(vue.createVNode(VCheckbox, {
             "modelValue": isAllSelected,
@@ -5128,14 +4856,12 @@ const VDataTable = vue.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(vue.createVNode(VIcon, {
             "class": "v-data-table__table__sort-icon v-data-table__table__sort-icon--empty",
@@ -5148,21 +4874,18 @@ const VDataTable = vue.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 vue.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);
           }
         }, [vue.createVNode("div", {
@@ -5173,19 +4896,17 @@ const VDataTable = vue.defineComponent({
         "class": "v-data-table__table__header"
       }, [vue.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,
@@ -5194,23 +4915,18 @@ const VDataTable = vue.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:
@@ -5265,7 +4981,6 @@ const VDataTable = vue.defineComponent({
         "key": key
       }, [children]);
     }
-
     function genBody() {
       const {
         items,
@@ -5287,7 +5002,6 @@ const VDataTable = vue.defineComponent({
         "class": "v-data-table__table__body"
       }, [children]);
     }
-
     vue.watch(() => props.modelValue, modelValue => {
       internalValues.value = modelValue.slice();
     });
@@ -5336,36 +5050,31 @@ const VDataTable = vue.defineComponent({
       })])]);
     };
   }
-
 });
 
 function _isSlot$2(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
-const VApp = vue.defineComponent({
+const VApp = /* @__PURE__ */ vue.defineComponent({
   name: 'VApp',
-
   setup(props, ctx) {
     vueKit.useInjectTheme();
     return () => {
       let _slot;
-
       return vue.createVNode(vueKit.VStackRoot, null, _isSlot$2(_slot = vueKit.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       });
     };
   }
-
 });
 
-const VToolbar = vue.defineComponent({
+const VToolbar = /* @__PURE__ */ vue.defineComponent({
   name: 'VToolbar',
-  props: { ...createElevationProps(),
+  props: {
+    ...createElevationProps(),
     ...vueColorScheme.colorSchemeProps(),
     dense: Boolean
   },
-
   setup(props, ctx) {
     const vui = useVui();
     const elevation = useElevation(props, {
@@ -5388,24 +5097,20 @@ const VToolbar = vue.defineComponent({
       }, [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]);
     };
   }
-
 });
 
 function _isSlot$1(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
-const VToolbarMenu = vue.defineComponent({
+const VToolbarMenu = /* @__PURE__ */ vue.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 vue.createVNode(VButton, vue.mergeProps(ctx.attrs, {
         "variant": variant,
@@ -5415,10 +5120,9 @@ const VToolbarMenu = vue.defineComponent({
       });
     };
   }
-
 });
 
-const VToolbarEdge = vue.defineComponent({
+const VToolbarEdge = /* @__PURE__ */ vue.defineComponent({
   name: 'VToolbarEdge',
   props: {
     edge: {
@@ -5426,7 +5130,6 @@ const VToolbarEdge = vue.defineComponent({
       required: true
     }
   },
-
   setup(props, ctx) {
     const edge = vue.computed(() => props.edge);
     return () => {
@@ -5439,14 +5142,12 @@ const VToolbarEdge = vue.defineComponent({
       }, [children]);
     };
   }
-
 });
 
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-
-const VToolbarTitle = vue.defineComponent({
+const VToolbarTitle = /* @__PURE__ */ vue.defineComponent({
   name: 'VToolbarTitle',
   props: {
     tag: {
@@ -5454,13 +5155,10 @@ const VToolbarTitle = vue.defineComponent({
       default: 'span'
     }
   },
-
   setup(props, ctx) {
     const _TagName = vue.computed(() => props.tag);
-
     return () => {
       let _slot;
-
       const TagName = _TagName.value;
       return vue.createVNode(TagName, {
         "class": "v-toolbar-title"
@@ -5469,7 +5167,6 @@ const VToolbarTitle = vue.defineComponent({
       });
     };
   }
-
 });
 
 const DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP = -20;
@@ -5478,8 +5175,8 @@ function mergeVuiServiceUISettings(base, overrides) {
   if (!overrides) {
     return base;
   }
-
-  const merged = { ...base
+  const merged = {
+    ...base
   };
   Object.entries(overrides).forEach(([key, value]) => {
     if (value) {
@@ -5492,8 +5189,8 @@ function mergeVuiServiceIconSettings(base, overrides) {
   if (!overrides) {
     return base;
   }
-
-  const merged = { ...base
+  const merged = {
+    ...base
   };
   Object.entries(overrides).forEach(([key, value]) => {
     if (value) {
@@ -5506,8 +5203,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)
   };
@@ -5523,7 +5220,6 @@ class VuiService {
   get scroller() {
     return vueScroller.getDocumentScroller();
   }
-
   constructor(options, stackService) {
     this.options = options;
     this.configure();
@@ -5542,64 +5238,51 @@ class VuiService {
       router: this.router
     });
     this.stack = stackService;
+    this.useLink = options.useLink || vueRouter.useLink;
   }
-
   configure(options) {
     options && Object.assign(this.options, options);
     vueUtils.setDefaultRouterLink(this.getRouterLink());
   }
-
   getRouterLink() {
     return this.options.RouterLink || vueRouter.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 = {
@@ -5610,9 +5293,7 @@ class VuiService {
       size,
       state
     } = options;
-
     const _state = vue.reactive(state);
-
     options.actions = options.actions || [this.stack.action('cancel', undefined, {
       size
     }), this.stack.action('ok', undefined, {
@@ -5624,7 +5305,8 @@ class VuiService {
         }
       }
     })];
-    const resolved = vueKit.resolveVStackDynamicInput({ ...options,
+    const resolved = vueKit.resolveVStackDynamicInput({
+      ...options,
       content: stack => {
         return vue.createVNode(VForm, {
           "disableAutoScroll": true,
@@ -5648,15 +5330,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 {
@@ -5679,19 +5362,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 {
@@ -5700,11 +5381,11 @@ class VuiPlugin {
       colorScheme,
       stack,
       uiSettings
-    } = opts; // ColorScheme
-
+    } = opts;
+    // ColorScheme
     const vueColorSchemePlugin = new vueKit.VueColorSchemePlugin(colorScheme);
-    app.use(vueColorSchemePlugin); // Stack
-
+    app.use(vueColorSchemePlugin);
+    // Stack
     vueKit.installVueStackPlugin(app, {
       actions: {
         ok: ({
@@ -5725,8 +5406,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;
@@ -5734,7 +5415,6 @@ class VuiPlugin {
       delete app.config.globalProperties.$vui;
     });
   }
-
 }
 function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
@@ -5747,6 +5427,7 @@ exports.VTooltip = vueKit.VTooltip;
 exports.ICON_NAMES = iconFont.ICON_NAMES;
 exports.ARROW_KEY_TYPES = ARROW_KEY_TYPES;
 exports.AVATAR_SIZES = AVATAR_SIZES;
+exports.BUTTON_ALIGNS = BUTTON_ALIGNS;
 exports.CHIP_SIZES = CHIP_SIZES;
 exports.CHOICE_KEY_TYPES = CHOICE_KEY_TYPES;
 exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
@@ -5838,6 +5519,7 @@ exports.createControlProps = createControlProps;
 exports.createElevationProps = createElevationProps;
 exports.createListTileProps = createListTileProps;
 exports.createNavigationItemProps = createNavigationItemProps;
+exports.createNavigationProps = createNavigationProps;
 exports.createPaperBaseProps = createPaperBaseProps;
 exports.createPaperProps = createPaperProps;
 exports.createRequiredChipRenderer = createRequiredChipRenderer;