@fastkit/vui 1.1.1 → 1.3.0

package/dist/vui.mjs

@@ -20,7 +20,7 @@ import { VAppContainer, VueAppLayout, VAppLayout, installVueAppLayout } from '@f
 export * from '@fastkit/vue-app-layout';
 import { colorSchemeProps, useColorClasses, useScopeColorClass, toScopeColorClass, useInjectTheme, VueColorSchemePlugin } from '@fastkit/vue-color-scheme';
 export * from '@fastkit/vue-color-scheme';
-import { createFormNodeWrapperSettings, useFormNodeWrapper, useParentFormNode, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, createFormSelectorSettings, createFormNodeWrapperProps, useFormSelectorControl, createTextInputNodeSettings, useTextInputNodeControl, createTextareaNodeSettings, useTextareaNodeControl, createFormGroupSettings, useFormGroup, createFormSettings, useForm, installVueFormPlugin } from '@fastkit/vue-form-control';
+import { createFormNodeWrapperSettings, useFormNodeWrapper, useParentFormNode, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, createFormSelectorSettings, createFormNodeWrapperProps, useFormSelectorControl, createTextInputNodeSettings, useTextInputNodeControl, createTextareaNodeSettings, useTextareaNodeControl, createFileInputNodeSettings, useFileInputNodeControl, createFormGroupSettings, useFormGroup, createFormSettings, useForm, installVueFormPlugin } from '@fastkit/vue-form-control';
 export * from '@fastkit/vue-form-control';
 import { VScroller, getDocumentScroller } from '@fastkit/vue-scroller';
 export * from '@fastkit/vue-scroller';
@@ -90,6 +90,7 @@ __export(src_exports, {
   VDialog: () => VDialog,
   VDisabledReason: () => VDisabledReason,
   VDrawerLayout: () => VDrawerLayout,
+  VFileInput: () => VFileInput,
   VForm: () => VForm,
   VFormControl: () => VFormControl,
   VFormGroup: () => VFormGroup,
@@ -126,6 +127,7 @@ __export(src_exports, {
   VTooltip: () => VTooltip,
   VUI_CHECKBOX_GROUP_SYMBOL: () => VUI_CHECKBOX_GROUP_SYMBOL,
   VUI_CHECKBOX_SYMBOL: () => VUI_CHECKBOX_SYMBOL,
+  VUI_FILE_INPUT_SYMBOL: () => VUI_FILE_INPUT_SYMBOL,
   VUI_FORM_GROUP_SYMBOL: () => VUI_FORM_GROUP_SYMBOL,
   VUI_FORM_SYMBOL: () => VUI_FORM_SYMBOL,
   VUI_OPTION_SYMBOL: () => VUI_OPTION_SYMBOL,
@@ -206,6 +208,7 @@ var VUI_RADIO_GROUP_SYMBOL = "vui-radio-group";
 var VUI_RADIO_SYMBOL = "vui-radio";
 var VUI_SWITCH_GROUP_SYMBOL = "vui-switch-group";
 var VUI_SWITCH_SYMBOL = "vui-switch";
+var VUI_FILE_INPUT_SYMBOL = "vui-file-input";
 var VUI_FORM_GROUP_SYMBOL = "vui-form-group";
 var VUI_FORM_SYMBOL = "vui-form";
 function useVui() {
@@ -248,11 +251,11 @@ function createControlProps() {
     loading: Boolean
   });
 }
-function useControl(props12, opts = {}) {
+function useControl(props13, opts = {}) {
   const { defaultSize = "md" } = opts;
   const parentControl = inject(VuiControlInjectionKey, null);
   const size = computed(() => {
-    const propSize = props12.size;
+    const propSize = props13.size;
     return propSize || (parentControl ? parentControl.size.value : defaultSize);
   });
   const classes = computed(() => ["v-control", `v-control--${size.value}`]);
@@ -275,11 +278,11 @@ function createControlFieldProviderProps() {
     }
   });
 }
-function useControlField(props12, opts = {}) {
+function useControlField(props13, opts = {}) {
   const { defaultVariant = "flat" } = opts;
   const parentControlField = inject(VuiControlFieldInjectionKey, null);
   const variant = computed(() => {
-    const propVariant = props12.variant;
+    const propVariant = props13.variant;
     return propVariant || (parentControlField ? parentControlField.variant.value : defaultVariant);
   });
   const provider = {
@@ -314,8 +317,8 @@ var VIcon = defineComponent({
     ...iconProps
   },
   emits: {},
-  setup(props12, ctx) {
-    const iconName = computed(() => props12.name);
+  setup(props13, ctx) {
+    const iconName = computed(() => props13.name);
     const clickable = computed(() => typeof ctx.attrs.onClick !== "undefined");
     const classes = computed(() => [{
       "v-icon--clickable": clickable.value
@@ -326,7 +329,7 @@ var VIcon = defineComponent({
       };
       const {
         rotate
-      } = props12;
+      } = props13;
       if (rotate) {
         attrs.style = {
           transform: `rotate(${rotate}deg)`
@@ -398,13 +401,13 @@ var {
   props,
   emits
 } = createFormNodeWrapperSettings();
-function createRequiredChipRenderer(required, props12, vui = useVui()) {
+function createRequiredChipRenderer(required, props13, vui = useVui()) {
   return () => {
     if (!required()) return;
     let chip;
     const {
       requiredChip
-    } = props12;
+    } = props13;
     if (requiredChip === false) return;
     if (requiredChip) {
       if (typeof requiredChip === "string") {
@@ -429,9 +432,9 @@ var VFormControl = defineComponent({
   },
   emits,
   slots,
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const vui = useVui();
-    const control = useFormNodeWrapper(props12, ctx, {
+    const control = useFormNodeWrapper(props13, ctx, {
       hinttipPrepend: () => createVNode(VIcon, {
         "class": "v-form-control__label__hinttip__icon",
         "name": vui.icon("hinttip")
@@ -465,8 +468,8 @@ var VFormControl = defineComponent({
       "v-form-control--untouched": control.untouched,
       "v-form-control--invalid": control.invalid,
       "v-form-control--valid": control.valid
-    }, colorProvider.className(props12.error ? "error" : control.invalid && !control.isReadonly ? "error" : "primary")]);
-    const getRequiredChip = createRequiredChipRenderer(() => control.isRequired, props12, vui);
+    }, colorProvider.className(props13.error ? "error" : control.invalid && !control.isReadonly ? "error" : "primary")]);
+    const getRequiredChip = createRequiredChipRenderer(() => control.isRequired, props13, vui);
     const handleClick = (ev) => ctx.emit("clickLabel", ev, control);
     return () => {
       const label = control.renderLabel();
@@ -495,7 +498,7 @@ var VFormControl = defineComponent({
         })
       })]), createVNode("div", {
         "class": "v-form-control__body"
-      }, [ctx.slots.default?.(control), !props12.hiddenInfo && createVNode("div", {
+      }, [ctx.slots.default?.(control), !props13.hiddenInfo && createVNode("div", {
         "class": "v-form-control__info"
       }, [!!message && createVNode("div", {
         "class": "v-form-control__message"
@@ -520,15 +523,15 @@ function defineFormSelectorComponent(opts) {
     className
   } = opts;
   const {
-    props: props12,
-    emits: emits12
+    props: props13,
+    emits: emits13
   } = createFormSelectorSettings({
     defaultMultiple
   });
   return defineComponent({
     name: opts.name,
     props: {
-      ...props12,
+      ...props13,
       ...createFormNodeWrapperProps(),
       ...createControlProps(),
       stacked: {
@@ -541,25 +544,25 @@ function defineFormSelectorComponent(opts) {
       failedToLoadItemsMessage: {},
       ...slots2()
     },
-    emits: emits12,
+    emits: emits13,
     slots: slots2,
-    setup(props13, ctx) {
-      const selectorControl = useFormSelectorControl(props13, ctx, {
+    setup(props14, ctx) {
+      const selectorControl = useFormSelectorControl(props14, ctx, {
         nodeType,
         defaultMultiple
       });
-      const control = useControl(props13);
+      const control = useControl(props14);
       const classes = computed(() => ["v-form-selector", className, {
         ...control.classes.value,
-        "v-form-selector--stacked": props13.stacked
+        "v-form-selector--stacked": props14.stacked
       }]);
       const vui = useVui();
       const loadingMessageRef = computed(() => {
-        const slot = resolveVNodeChildOrSlots(props13.loadingMessage, vui.setting("loadingMessage"), "Loading...");
+        const slot = resolveVNodeChildOrSlots(props14.loadingMessage, vui.setting("loadingMessage"), "Loading...");
         return slot && slot(vui);
       });
       const failedToLoadItemsMessageRef = computed(() => {
-        const slot = resolveVNodeChildOrSlots(props13.failedToLoadItemsMessage, vui.setting("failedToLoadDataMessage"), "Failed to load data.");
+        const slot = resolveVNodeChildOrSlots(props14.failedToLoadItemsMessage, vui.setting("failedToLoadDataMessage"), "Failed to load data.");
         return slot && slot(vui);
       });
       const defaultSlot = () => createVNode("div", {
@@ -599,12 +602,12 @@ function defineFormSelectorComponent(opts) {
       });
       return () => createVNode(VFormControl, {
         "nodeControl": selectorControl,
-        "hiddenInfo": props13.hiddenInfo,
+        "hiddenInfo": props14.hiddenInfo,
         "class": classes.value,
-        "label": props13.label,
-        "hint": props13.hint,
-        "hinttip": props13.hinttip,
-        "requiredChip": props13.requiredChip,
+        "label": props14.label,
+        "hint": props14.hint,
+        "hinttip": props14.hinttip,
+        "requiredChip": props14.requiredChip,
         "error": selectorControl.itemsLoadFailed
       }, {
         ...ctx.slots,
@@ -618,9 +621,9 @@ function createElevationProps() {
     elevation: Number
   });
 }
-function useElevation(props12, opts = {}) {
+function useElevation(props13, opts = {}) {
   const elevationValue = computed(
-    () => props12.elevation == null ? opts.defaultValue : props12.elevation
+    () => props13.elevation == null ? opts.defaultValue : props13.elevation
   );
   const elevationClassName = computed(() => {
     const v = elevationValue.value;
@@ -662,6 +665,7 @@ __export(components_exports, {
   VDialog: () => VDialog,
   VDisabledReason: () => VDisabledReason,
   VDrawerLayout: () => VDrawerLayout,
+  VFileInput: () => VFileInput,
   VForm: () => VForm,
   VFormControl: () => VFormControl,
   VFormGroup: () => VFormGroup,
@@ -733,11 +737,11 @@ var VDialog = defineDialogComponent({
   },
   setup(ctx) {
     const {
-      props: props12,
+      props: props13,
       control
     } = ctx;
     const vui = useVui();
-    const actionControl = useStackAction(props12, control, {
+    const actionControl = useStackAction(props13, control, {
       resolver: (actions) => {
         if (actions.length === 0) {
           return [vui.stackAction("close")];
@@ -745,7 +749,7 @@ var VDialog = defineDialogComponent({
         return actions;
       }
     });
-    const color = useColorClasses(props12, {
+    const color = useColorClasses(props13, {
       useRootThemeDefault: true
     });
     return (children) => {
@@ -753,7 +757,7 @@ var VDialog = defineDialogComponent({
         $actions
       } = actionControl;
       return createVNode("div", {
-        "class": ["v-dialog", color.colorClasses.value, props12.dense && "v-dialog--dense"]
+        "class": ["v-dialog", color.colorClasses.value, props13.dense && "v-dialog--dense"]
       }, [createVNode("div", {
         "class": "v-dialog__body"
       }, [children]), $actions.length > 0 && createVNode("div", {
@@ -771,11 +775,11 @@ var VSnackbar = defineSnackbarComponent({
   },
   setup(ctx) {
     const {
-      props: props12,
+      props: props13,
       control
     } = ctx;
     const vui = useVui();
-    const actionControl = useStackAction(props12, control, {
+    const actionControl = useStackAction(props13, control, {
       resolver: (actions) => {
         if (actions.length === 0) {
           return [vui.stackAction("close")];
@@ -783,7 +787,7 @@ var VSnackbar = defineSnackbarComponent({
         return actions;
       }
     });
-    const color = useColorClasses(props12, {
+    const color = useColorClasses(props13, {
       useRootThemeDefault: true
     });
     return (children) => {
@@ -822,8 +826,8 @@ var VSheetModal = defineComponent({
   inheritAttrs: false,
   props: sheetModalProps,
   emits: emits2,
-  setup(props12, ctx) {
-    const stackControl = useStackControl(props12, ctx, {
+  setup(props13, ctx) {
+    const stackControl = useStackControl(props13, ctx, {
       stackType: SHEET_STACK_TYPE
     });
     const hasActiveChild = computed(() => {
@@ -862,9 +866,9 @@ var VSkeltonLoaderBone = defineComponent({
       default: "div"
     }
   },
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     return () => {
-      const TagName = props12.tag;
+      const TagName = props13.tag;
       return createVNode(TagName, mergeProps(ctx.attrs, {
         "class": "v-skelton-loader-bone"
       }), {
@@ -978,15 +982,15 @@ var VBusyImage = defineComponent({
     error: (ev) => true
   },
   slots: slots3,
-  setup(props12, ctx) {
-    const loadStateRef = ref(props12.cover && isAvailableSrc(ctx.attrs.src) ? "loading" : "pending");
+  setup(props13, ctx) {
+    const loadStateRef = ref(props13.cover && isAvailableSrc(ctx.attrs.src) ? "loading" : "pending");
     const attrsRef = computed(() => splitAttrs(ctx.attrs));
     const isPendingRef = computed(() => loadStateRef.value === "pending");
     const isLoadingRef = computed(() => loadStateRef.value === "loading");
     const isLoadedRef = computed(() => loadStateRef.value === "loaded");
     const isErrorRef = computed(() => loadStateRef.value === "error");
     const classesRef = computed(() => [`v-busy-image--${loadStateRef.value}`, {
-      "v-busy-image--cover": props12.cover,
+      "v-busy-image--cover": props13.cover,
       "v-busy-image--clickable": typeof ctx.attrs.onClick === "function"
     }]);
     const nodeRef = ref();
@@ -996,11 +1000,11 @@ var VBusyImage = defineComponent({
       const main = {};
       const {
         cover
-      } = props12;
+      } = props13;
       let {
         width,
         height
-      } = props12;
+      } = props13;
       if (height == null && cover) {
         height = DEFAULT_HEIGHT;
       }
@@ -1042,11 +1046,11 @@ var VBusyImage = defineComponent({
     const mounted = ref(false);
     watch(() => [ctx.attrs.src, mounted.value], ([src, _mounted], before) => {
       if (!_mounted) return;
-      if (src === before?.[0] && !props12.cover && !isPendingRef.value) return;
+      if (src === before?.[0] && !props13.cover && !isPendingRef.value) return;
       coverImageRef.value = void 0;
       if (isAvailableSrc(src)) {
         loadStateRef.value = "loading";
-        if (props12.cover) {
+        if (props13.cover) {
           loadImage(src).then((image) => {
             coverImageRef.value = image;
             setManualState("load");
@@ -1072,7 +1076,7 @@ var VBusyImage = defineComponent({
     };
     onMounted(() => {
       mounted.value = true;
-      if (booted || props12.cover) return;
+      if (booted || props13.cover) return;
       const image = nodeRef.value;
       if (!image) return;
       const loadType = imageIsReady(image);
@@ -1111,7 +1115,7 @@ var VBusyImage = defineComponent({
         "class": ["v-busy-image", classesRef.value]
       }, elAttrs, {
         "style": styles
-      }), [!props12.cover && createVNode("img", mergeProps({
+      }), [!props13.cover && createVNode("img", mergeProps({
         "key": "img",
         "ref": nodeRef,
         "class": "v-busy-image__node"
@@ -1156,7 +1160,7 @@ var VGridItem = defineComponent({
     justify: void 0,
     order: void 0
   },
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const data = computed(() => {
       const classes = [];
       const attrs = {
@@ -1167,7 +1171,7 @@ var VGridItem = defineComponent({
         align,
         justify,
         order
-      } = props12;
+      } = props13;
       delete attrs.size;
       delete attrs.align;
       delete attrs.justify;
@@ -1182,7 +1186,7 @@ var VGridItem = defineComponent({
       };
     });
     return () => {
-      const TagName = props12.tag;
+      const TagName = props13.tag;
       const {
         classes,
         attrs
@@ -1216,7 +1220,7 @@ var VGridContainer = defineComponent({
     alignContent: void 0,
     justifyContent: void 0
   },
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const data = computed(() => {
       const classes = [];
       const attrs = {
@@ -1230,7 +1234,7 @@ var VGridContainer = defineComponent({
         wrap,
         alignContent,
         justifyContent
-      } = props12;
+      } = props13;
       const wrapperClass = attrs.class;
       const wrapperStyle = attrs.style;
       delete attrs.class;
@@ -1257,8 +1261,8 @@ var VGridContainer = defineComponent({
       };
     });
     return () => {
-      const WrapperTag = props12.wrapperTag;
-      const TagName = props12.tag;
+      const WrapperTag = props13.wrapperTag;
+      const TagName = props13.tag;
       const {
         wrapperClass,
         wrapperStyle,
@@ -1303,20 +1307,20 @@ var VPaper = defineComponent({
   inheritAttrs: false,
   props: createPaperProps(),
   slots: paperBaseSlots,
-  setup(props12, ctx) {
-    const tag = computed(() => props12.tag);
-    const elevation = useElevation(props12, {
+  setup(props13, ctx) {
+    const tag = computed(() => props13.tag);
+    const elevation = useElevation(props13, {
       defaultValue: 1
     });
-    const scope = useScopeColorClass(props12);
+    const scope = useScopeColorClass(props13);
     const classes = computed(() => [elevation.elevationClassName.value, scope.value.className, {
       "v-paper--plain": !scope.value.value,
       "v-paper--has-color": !!scope.value.value || !!ctx.attrs.disabled,
-      "v-paper--square": props12.square
+      "v-paper--square": props13.square
     }]);
-    const headerProps = computed(() => props12.headerProps);
-    const bodyProps = computed(() => props12.bodyProps);
-    const footerProps = computed(() => props12.footerProps);
+    const headerProps = computed(() => props13.headerProps);
+    const bodyProps = computed(() => props13.bodyProps);
+    const footerProps = computed(() => props13.footerProps);
     return () => {
       const TagName = tag.value;
       const header = renderSlotOrEmpty(ctx.slots, "header");
@@ -1325,7 +1329,7 @@ var VPaper = defineComponent({
         "class": ["v-paper", classes.value]
       }, ctx.attrs), {
         default: () => [createVNode("div", {
-          "class": ["v-paper__inner", props12.innerClass]
+          "class": ["v-paper__inner", props13.innerClass]
         }, [header && createVNode("div", mergeProps({
           "class": "v-paper__header"
         }, headerProps.value), [header]), createVNode("div", mergeProps({
@@ -1356,26 +1360,26 @@ var VAvatar = defineComponent({
   name: "VAvatar",
   inheritAttrs: false,
   props: createAvatarProps(),
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const vui = useVui();
     const defaults = vui.setting("buttonDefault");
     const color = useColorClasses({
-      color: () => props12.color || defaults.color,
-      variant: () => props12.variant || defaults.variant
+      color: () => props13.color || defaults.color,
+      variant: () => props13.variant || defaults.variant
     });
     const classes = computed(() => {
       const {
         size
-      } = props12;
+      } = props13;
       return [{
-        "v-avatar--tile": props12.tile,
-        "v-avatar--rounded": props12.rounded
+        "v-avatar--tile": props13.tile,
+        "v-avatar--rounded": props13.rounded
       }, typeof size === "string" && `v-avatar--${size}`];
     });
     const styles = computed(() => {
       const {
         size
-      } = props12;
+      } = props13;
       if (typeof size !== "number") return;
       return {
         "--avatar-size": `${size}px`
@@ -1392,7 +1396,7 @@ var VAvatar = defineComponent({
     return () => {
       const {
         src
-      } = props12;
+      } = props13;
       return actionable.render(!!src && createVNode(VBusyImage, {
         "class": "v-avatar__image",
         "src": src,
@@ -1436,27 +1440,27 @@ var VChip = defineComponent({
   name: "VChip",
   inheritAttrs: false,
   props: createChipProps(),
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const vui = useVui();
     const defaults = vui.setting("buttonDefault");
     const color = useColorClasses({
-      color: () => props12.color || defaults.color,
-      variant: () => props12.variant || defaults.variant
+      color: () => props13.color || defaults.color,
+      variant: () => props13.variant || defaults.variant
     });
     const startIcon = computed(() => {
-      const _icon = resolveRawVChipIcon(props12.startIcon, "start");
+      const _icon = resolveRawVChipIcon(props13.startIcon, "start");
       return _icon && _icon();
     });
     const endIcon = computed(() => {
-      const _icon = resolveRawVChipIcon(props12.endIcon, "end");
+      const _icon = resolveRawVChipIcon(props13.endIcon, "end");
       return _icon && _icon();
     });
     const classes = computed(() => {
       const {
         size
-      } = props12;
+      } = props13;
       return [{
-        "v-chip--label": props12.label
+        "v-chip--label": props13.label
       }, typeof size === "string" && `v-chip--${size}`];
     });
     const actionable = useActionable(ctx, {
@@ -1482,8 +1486,8 @@ var VCard = defineComponent({
   name: "VCard",
   inheritAttrs: false,
   props: createCardProps(),
-  setup(props12, ctx) {
-    const _props = computed(() => props12);
+  setup(props13, ctx) {
+    const _props = computed(() => props13);
     const data = computed(() => {
       const attrs = {
         ..._props.value,
@@ -1492,7 +1496,7 @@ var VCard = defineComponent({
         tag: VAction,
         linkFallbackTag: "div"
       };
-      if (props12.disabled) {
+      if (props13.disabled) {
         attrs.disabled = "disabled";
         delete attrs.onClick;
         delete attrs.href;
@@ -1554,37 +1558,37 @@ var VButton = defineComponent({
   name: "VButton",
   inheritAttrs: false,
   props: vueButtonProps,
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const vui = useVui();
-    const control = useControl(props12);
+    const control = useControl(props13);
     const defaults = vui.setting("buttonDefault");
     const icon = computed(() => {
-      const _icon = resolveRawVButtonIcon(props12.icon);
+      const _icon = resolveRawVButtonIcon(props13.icon);
       return _icon && _icon();
     });
     const startIcon = computed(() => {
-      const _icon = resolveRawVButtonIcon(props12.startIcon, "start");
+      const _icon = resolveRawVButtonIcon(props13.startIcon, "start");
       return _icon && _icon();
     });
     const endIcon = computed(() => {
-      const _icon = resolveRawVButtonIcon(props12.endIcon, "end");
+      const _icon = resolveRawVButtonIcon(props13.endIcon, "end");
       return _icon && _icon();
     });
     const color = useColorClasses({
-      color: () => props12.color || defaults.color,
-      variant: () => props12.variant || (icon.value ? vui.setting("plainVariant") : defaults.variant)
+      color: () => props13.color || defaults.color,
+      variant: () => props13.variant || (icon.value ? vui.setting("plainVariant") : defaults.variant)
     });
     const isPlain = computed(() => color.variant.value.value === vui.setting("plainVariant") && color.color.value.value === defaults.color);
-    const isLoading = computed(() => props12.loading);
+    const isLoading = computed(() => props13.loading);
     const spacer = computed(() => {
-      const _spacer = props12.spacer;
+      const _spacer = props13.spacer;
       if (!_spacer) return;
       return _spacer === true ? "left" : _spacer;
     });
-    const classes = computed(() => [color.colorClasses.value, spacer.value ? `v-button--spacer-${spacer.value}` : void 0, `v-button--${control.size.value}`, `v-button--align-${props12.align}`, {
+    const classes = computed(() => [color.colorClasses.value, spacer.value ? `v-button--spacer-${spacer.value}` : void 0, `v-button--${control.size.value}`, `v-button--align-${props13.align}`, {
       "v-button--loading": isLoading.value,
       "v-button--icon": !!icon.value,
-      "v-button--rounded": props12.rounded,
+      "v-button--rounded": props13.rounded,
       "v-button--plain": isPlain.value
     }]);
     return () => createVNode(VAction, mergeProps(ctx.attrs, {
@@ -1608,7 +1612,7 @@ var VButtonGroup = defineComponent({
     ...createControlProps(),
     disabled: Boolean
   },
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     return () => {
       let hasIcon = false;
       let buttonLength = 0;
@@ -1640,7 +1644,7 @@ var VButtonGroup = defineComponent({
           const hasRight = buttonIndex < buttonLength;
           const childProps = child.node.props;
           return cloneVNode(child.node, {
-            ...props12,
+            ...props13,
             ...childProps,
             rounded: false,
             class: ["v-button-group__item", {
@@ -1708,7 +1712,7 @@ var VPagination = defineComponent({
     change: (page) => true,
     "update:modelValue": (page) => true
   },
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const vui = useVui();
     const elRef = ref(null);
     const router = useRouter();
@@ -1721,15 +1725,15 @@ var VPagination = defineComponent({
       return Math.floor(containerWidth.value / _itemSize);
     });
     const colorScope = useScopeColorClass({
-      color: () => props12.color || vui.setting("primaryScope")
+      color: () => props13.color || vui.setting("primaryScope")
     });
-    const computedLength = computed(() => resolveNumberish(props12.length));
-    const computedTotalVisible = computed(() => resolveNumberish(props12.totalVisible));
+    const computedLength = computed(() => resolveNumberish(props13.length));
+    const computedTotalVisible = computed(() => resolveNumberish(props13.totalVisible));
     const computedNumbersLength = computed(() => capacityLength.value - 2 - 2);
     const computedPage = computed(() => {
       const {
         routeQuery
-      } = props12;
+      } = props13;
       if (routeQuery) {
         return vui.location.getQuery(routeQuery, Number, 1);
       }
@@ -1774,21 +1778,21 @@ var VPagination = defineComponent({
     const isTransitioning = computed(() => {
       const {
         routeQuery
-      } = props12;
+      } = props13;
       return vui.location.isQueryOnlyTransitioning(routeQuery);
     });
-    const isDisabled = computed(() => props12.disabled || isTransitioning.value);
+    const isDisabled = computed(() => props13.disabled || isTransitioning.value);
     const classes = computed(() => [{
       "v-pagination--disabled": isDisabled.value,
-      "v-pagination--dense": props12.dense,
-      [`v-pagination--${props12.align}`]: true
+      "v-pagination--dense": props13.dense,
+      [`v-pagination--${props13.align}`]: true
     }, colorScope.value.className]);
     async function setPage(value) {
       if (isDisabled.value) return;
       const {
         beforeChange,
         routeQuery
-      } = props12;
+      } = props13;
       const newPage = resolveNumberish(value);
       if (computedPage.value === newPage) return;
       if (beforeChange) {
@@ -1876,7 +1880,7 @@ var VPagination = defineComponent({
       const key = `${source}-${index}`;
       const {
         routeQuery
-      } = props12;
+      } = props13;
       if (page !== void 0 && routeQuery) {
         const to = createRoutableLocationByPage(page, routeQuery);
         return createVNode(RouterLink, {
@@ -1895,7 +1899,7 @@ var VPagination = defineComponent({
         "key": key
       }, [children]);
     }
-    watch(() => props12.modelValue, (modelValue) => {
+    watch(() => props13.modelValue, (modelValue) => {
       internalValue.value = resolveNumberish(modelValue);
     }, {
       immediate: true
@@ -1949,25 +1953,25 @@ var VListTile = defineComponent({
   emits: {
     ...listTileEmits
   },
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const vui = useVui();
     const startIcon = computed(() => {
-      let icon = resolveRawIconProp(false, props12.startIcon);
-      if (!icon && props12.startIconEmptySpace) {
+      let icon = resolveRawIconProp(false, props13.startIcon);
+      if (!icon && props13.startIconEmptySpace) {
         icon = resolveRawIconProp(false, "$empty");
       }
       return icon;
     });
-    const endIcon = computed(() => resolveRawIconProp(false, props12.endIcon));
+    const endIcon = computed(() => resolveRawIconProp(false, props13.endIcon));
     const hasTo = computed(() => !!ctx.attrs.to);
     const link = vui.useLink({
       to: ctx.attrs.to || ""
     });
     const isActive = computed(() => {
       if (!hasTo.value) return false;
-      return props12.exactMatch ? link.isExactActive.value : link.isActive.value;
+      return props13.exactMatch ? link.isExactActive.value : link.isActive.value;
     });
-    const color = useScopeColorClass(props12);
+    const color = useScopeColorClass(props13);
     const classes = computed(() => {
       const _color = color.value;
       const hasColor = !!_color.value;
@@ -2006,11 +2010,11 @@ var VDrawerLayout = defineComponent({
     ...createPaperBaseProps()
   },
   slots: paperBaseSlots,
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     return () => {
       const paperProps = computed(() => ({
-        color: props12.color,
-        tag: props12.tag
+        color: props13.color,
+        tag: props13.tag
       }));
       return createVNode(VPaper, mergeProps({
         "class": "v-drawer-layout",
@@ -2049,16 +2053,16 @@ var VHero = defineComponent({
     ...slots4()
   },
   slots: slots4,
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     return () => {
-      const TagName = props12.tag;
-      const HTagName = props12.hTag;
+      const TagName = props13.tag;
+      const HTagName = props13.hTag;
       const adornment = ctx.slots.adornment?.();
       return createVNode(VAppContainer, {
         "pulled": true
       }, {
         default: () => [createVNode(TagName, {
-          "class": ["v-hero", toScopeColorClass(props12.color)]
+          "class": ["v-hero", toScopeColorClass(props13.color)]
         }, {
           default: () => [createVNode(HTagName, {
             "class": "v-hero__title"
@@ -2091,25 +2095,25 @@ function resolveNavigationItemInput(input) {
   let {
     label
   } = input;
-  const props12 = {
+  const props13 = {
     ...input
   };
   if (typeof label === "function") {
     label = label();
   }
-  delete props12.label;
+  delete props13.label;
   return {
     label,
-    props: props12
+    props: props13
   };
 }
 function renderNavigationItemInput(input, extraProps) {
   const {
     label,
-    props: props12
+    props: props13
   } = resolveNavigationItemInput(input);
   return createVNode(VNavigationItem, {
-    ...props12,
+    ...props13,
     ...extraProps
   }, _isSlot3(label) ? label : {
     default: () => [label]
@@ -2129,18 +2133,18 @@ var VNavigationItem = defineComponent({
   emits: {
     ...listTileEmits
   },
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const vui = useVui();
     const opened = ref(false);
     const children = computed(() => {
-      const c = props12.children;
+      const c = props13.children;
       return c && c.length ? c : void 0;
     });
     const to = computed(() => ctx.attrs.to);
     const match = computed(() => {
       const {
         match: match2
-      } = props12;
+      } = props13;
       const {
         to: to2
       } = ctx.attrs;
@@ -2154,7 +2158,7 @@ var VNavigationItem = defineComponent({
     });
     const classes = computed(() => [{
       "v-navigation-item--opened": opened.value,
-      [`v-navigation-item--depth-${props12.depth}`]: props12.depth > 0
+      [`v-navigation-item--depth-${props13.depth}`]: props13.depth > 0
     }]);
     const route = useRoute();
     watch(() => route.path, (newPath) => {
@@ -2176,7 +2180,7 @@ var VNavigationItem = defineComponent({
       const c = children.value;
       let {
         endIcon
-      } = props12;
+      } = props13;
       if (c && !endIcon) {
         endIcon = vui.icon("navigationExpand");
         if (typeof endIcon === "string") {
@@ -2188,7 +2192,7 @@ var VNavigationItem = defineComponent({
         }
       }
       const __props = {
-        ...props12,
+        ...props13,
         endIcon
       };
       delete __props.children;
@@ -2232,11 +2236,11 @@ var VNavigationItem = defineComponent({
         default: () => [withDirectives(createVNode("div", {
           "class": "v-navigation-item__expand"
         }, [_children.map((child) => renderNavigationItemInput({
-          color: props12.color,
+          color: props13.color,
           ...child
         }, {
           startIconEmptySpace: _props.value.startIconEmptySpace,
-          depth: props12.nested ? props12.depth + 1 : props12.depth
+          depth: props13.nested ? props13.depth + 1 : props13.depth
         }))]), [[vShow, opened.value]])]
       })]);
     };
@@ -2259,13 +2263,13 @@ function createNavigationProps() {
 var VNavigation = defineComponent({
   name: "VNavigation",
   props: createNavigationProps(),
-  setup(props12, ctx) {
-    const items = computed(() => props12.items);
-    const color = useScopeColorClass(props12);
+  setup(props13, ctx) {
+    const items = computed(() => props13.items);
+    const color = useScopeColorClass(props13);
     const classes = computed(() => [color.value.className]);
-    const startIconEmptySpace = computed(() => props12.startIconEmptySpace);
+    const startIconEmptySpace = computed(() => props13.startIconEmptySpace);
     const caption = computed(() => {
-      const c = props12.caption;
+      const c = props13.caption;
       return typeof c === "function" ? c() : c;
     });
     const itemsRef = ref([]);
@@ -2337,40 +2341,40 @@ var VControlField = defineComponent({
     click: (ev) => true
   },
   slots: slots5,
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const parentNode = useParentFormNode();
-    const control = useControl(props12);
-    const inputBox = useControlField(props12);
+    const control = useControl(props13);
+    const inputBox = useControlField(props13);
     const hostElRef = ref(null);
     const disabled = computed(() => !!parentNode && parentNode.isDisabled);
     const invalid = computed(() => !!parentNode && parentNode.invalid);
-    const autoHeight = computed(() => props12.autoHeight);
+    const autoHeight = computed(() => props13.autoHeight);
     const readonly = computed(() => !!parentNode && parentNode.isReadonly);
     const colorProvider = useVuiColorProvider();
     const classes = computed(() => {
       const _classes = ["v-control-field", `v-control-field--${inputBox.variant.value}`, {
         "v-control-field--disabled": disabled.value,
-        "v-control-field--invalid": invalid.value || props12.error,
+        "v-control-field--invalid": invalid.value || props13.error,
         "v-control-field--readonly": readonly.value,
-        "v-control-field--focused": props12.focused,
+        "v-control-field--focused": props13.focused,
         "v-control-field--auto-height": autoHeight.value
-      }, control.classes.value, colorProvider.className(props12.error ? "error" : invalid.value && !readonly.value ? "error" : "primary")];
+      }, control.classes.value, colorProvider.className(props13.error ? "error" : invalid.value && !readonly.value ? "error" : "primary")];
       return _classes;
     });
     const resolvedSlots = computed(() => {
       const _slots = {};
       ADORNMENT_POSITIONS.forEach((position) => {
         const key = `${position}Adornment`;
-        _slots[position] = resolveVNodeChildOrSlots(props12[key], ctx.slots[key]);
+        _slots[position] = resolveVNodeChildOrSlots(props13[key], ctx.slots[key]);
       });
       return _slots;
     });
     const renderAdornment = (position) => {
       let child;
-      if (position === "end" && props12.loading) {
+      if (position === "end" && props13.loading) {
         child = createVNode(loading_exports.VProgressCircular, {
           "indeterminate": true,
-          "size": CONTROL_LOADING_SPINNER_SIZES[props12.size || "md"]
+          "size": CONTROL_LOADING_SPINNER_SIZES[props13.size || "md"]
         }, null);
       } else {
         child = resolvedSlots.value[position]?.();
@@ -2420,12 +2424,12 @@ var VCheckable = defineComponent({
     // autoWidth: Boolean,
   },
   slots: CHECKABLE_SLOTS,
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const colorProvider = useVuiColorProvider();
-    const invalid = computed(() => props12.invalid);
-    const disabled = computed(() => props12.disabled);
-    const readonly = computed(() => props12.readonly);
-    const checked = computed(() => props12.checked);
+    const invalid = computed(() => props13.invalid);
+    const disabled = computed(() => props13.disabled);
+    const readonly = computed(() => props13.readonly);
+    const checked = computed(() => props13.checked);
     const classes = computed(() => [{
       "v-checkable--invalid": invalid.value,
       "v-checkable--disabled": disabled.value,
@@ -2459,13 +2463,13 @@ var VCheckbox = defineComponent({
     indeterminate: Boolean
   },
   emits: emits3,
-  setup(props12, ctx) {
-    const nodeControl = useFormSelectorItemControl(props12, ctx, {
+  setup(props13, ctx) {
+    const nodeControl = useFormSelectorItemControl(props13, ctx, {
       nodeType: VUI_CHECKBOX_SYMBOL,
       parentNodeType: VUI_CHECKBOX_GROUP_SYMBOL
     });
-    const control = useControl(props12);
-    const isIndeterminate = computed(() => props12.indeterminate);
+    const control = useControl(props13);
+    const isIndeterminate = computed(() => props13.indeterminate);
     const classes = computed(() => ["v-checkbox", {
       "v-checkbox--selected": nodeControl.selected,
       "v-checkbox--indeterminate": isIndeterminate.value
@@ -2478,7 +2482,7 @@ var VCheckbox = defineComponent({
     ctx.expose({
       control: api
     });
-    const slots12 = {
+    const slots13 = {
       input: () => nodeControl.createInputElement({
         type: "checkbox"
       }),
@@ -2493,7 +2497,7 @@ var VCheckbox = defineComponent({
       "invalid": nodeControl.invalid,
       "disabled": nodeControl.isDisabled,
       "readonly": nodeControl.isReadonly
-    }, withCtxForSlots(slots12));
+    }, withCtxForSlots(slots13));
   }
 });
 function _isSlot4(s) {
@@ -2506,9 +2510,9 @@ var VCheckboxGroup = defineFormSelectorComponent({
   className: "v-checkbox-group",
   itemRenderer: ({
     attrs,
-    slots: slots12
-  }) => createVNode(VCheckbox, attrs, _isSlot4(slots12) ? slots12 : {
-    default: () => [slots12]
+    slots: slots13
+  }) => createVNode(VCheckbox, attrs, _isSlot4(slots13) ? slots13 : {
+    default: () => [slots13]
   })
 });
 var {
@@ -2522,16 +2526,16 @@ var VRadio = defineComponent({
     ...createControlProps()
   },
   emits: emits4,
-  setup(props12, ctx) {
-    const nodeControl = useFormSelectorItemControl(props12, ctx, {
+  setup(props13, ctx) {
+    const nodeControl = useFormSelectorItemControl(props13, ctx, {
       nodeType: VUI_RADIO_SYMBOL,
       parentNodeType: VUI_RADIO_GROUP_SYMBOL
     });
-    const control = useControl(props12);
+    const control = useControl(props13);
     const classes = computed(() => ["v-radio", {
       "v-radio--selected": nodeControl.selected
     }, control.classes.value]);
-    const slots12 = {
+    const slots13 = {
       input: () => nodeControl.createInputElement({
         type: "radio"
       }),
@@ -2546,7 +2550,7 @@ var VRadio = defineComponent({
       "invalid": nodeControl.invalid,
       "disabled": nodeControl.isDisabled,
       "readonly": nodeControl.isReadonly
-    }, withCtxForSlots(slots12));
+    }, withCtxForSlots(slots13));
   }
 });
 function _isSlot5(s) {
@@ -2558,9 +2562,9 @@ var VRadioGroup = defineFormSelectorComponent({
   className: "v-radio-group",
   itemRenderer: ({
     attrs,
-    slots: slots12
-  }) => createVNode(VRadio, attrs, _isSlot5(slots12) ? slots12 : {
-    default: () => [slots12]
+    slots: slots13
+  }) => createVNode(VRadio, attrs, _isSlot5(slots13) ? slots13 : {
+    default: () => [slots13]
   })
 });
 var {
@@ -2574,12 +2578,12 @@ var VSwitch = defineComponent({
     ...createControlProps()
   },
   emits: emits5,
-  setup(props12, ctx) {
-    const nodeControl = useFormSelectorItemControl(props12, ctx, {
+  setup(props13, ctx) {
+    const nodeControl = useFormSelectorItemControl(props13, ctx, {
       nodeType: VUI_SWITCH_SYMBOL,
       parentNodeType: VUI_SWITCH_GROUP_SYMBOL
     });
-    const control = useControl(props12);
+    const control = useControl(props13);
     if (typeof window !== "undefined") {
       window.yy = {};
       window.yy[String(Date.now())] = nodeControl;
@@ -2588,7 +2592,7 @@ var VSwitch = defineComponent({
       "v-switch--selected": nodeControl.selected,
       "v-switch--disabled": nodeControl.isDisabled
     }, control.classes.value]);
-    const slots12 = {
+    const slots13 = {
       input: () => nodeControl.createInputElement({
         type: "checkbox"
       }),
@@ -2608,7 +2612,7 @@ var VSwitch = defineComponent({
       "invalid": nodeControl.invalid,
       "disabled": nodeControl.isDisabled,
       "readonly": nodeControl.isReadonly
-    }, withCtxForSlots(slots12));
+    }, withCtxForSlots(slots13));
   }
 });
 function _isSlot6(s) {
@@ -2621,9 +2625,9 @@ var VSwitchGroup = defineFormSelectorComponent({
   className: "v-switch-group",
   itemRenderer: ({
     attrs,
-    slots: slots12
-  }) => createVNode(VSwitch, attrs, _isSlot6(slots12) ? slots12 : {
-    default: () => [slots12]
+    slots: slots13
+  }) => createVNode(VSwitch, attrs, _isSlot6(slots13) ? slots13 : {
+    default: () => [slots13]
   })
 });
 var {
@@ -2637,12 +2641,12 @@ var VOption = defineComponent({
     ...createControlProps()
   },
   emits: emits6,
-  setup(props12, ctx) {
-    const nodeControl = useFormSelectorItemControl(props12, ctx, {
+  setup(props13, ctx) {
+    const nodeControl = useFormSelectorItemControl(props13, ctx, {
       nodeType: VUI_OPTION_SYMBOL,
       parentNodeType: VUI_SELECT_SYMBOL
     });
-    const control = useControl(props12);
+    const control = useControl(props13);
     const classes = computed(() => ["v-option", {
       "v-option--selected": nodeControl.selected,
       "v-option--has-not-value": !nodeControl.hasValue,
@@ -2669,11 +2673,11 @@ var VOptionGroup = defineComponent({
     ...slots6()
   },
   slots: slots6,
-  setup(props12, ctx) {
-    const groupControl = useFormSelectorItemGroupControl(props12, ctx, {
+  setup(props13, ctx) {
+    const groupControl = useFormSelectorItemGroupControl(props13, ctx, {
       parentNodeType: VUI_SELECT_SYMBOL
     });
-    const labelSlot = computed(() => resolveVNodeChildOrSlots(props12.label, ctx.slots.label));
+    const labelSlot = computed(() => resolveVNodeChildOrSlots(props13.label, ctx.slots.label));
     const classes = computed(() => ["v-option-group", {
       "v-option-group--disabled": groupControl.isDisabled
     }]);
@@ -2721,7 +2725,7 @@ var VSelect = defineComponent({
   },
   emits: emits7,
   slots: slots7,
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const menuRef = ref(null);
     const menuOpened = ref(false);
     const showMenu = () => {
@@ -2730,23 +2734,23 @@ var VSelect = defineComponent({
     const closeMenu = () => {
       menuOpened.value = false;
     };
-    const inputControl = useFormSelectorControl(props12, ctx, {
+    const inputControl = useFormSelectorControl(props13, ctx, {
       nodeType: VUI_SELECT_SYMBOL,
       onSelectItem: (item) => {
         closeMenu();
       }
     });
-    const control = useControl(props12);
-    useControlField(props12);
+    const control = useControl(props13);
+    useControlField(props13);
     const vui = useVui();
     const iconName = vui.icon("menuDown");
     const fieldRef = ref(null);
     const loadingMessageRef = computed(() => {
-      const slot = resolveVNodeChildOrSlots(props12.loadingMessage, vui.setting("loadingMessage"), "Loading...");
+      const slot = resolveVNodeChildOrSlots(props13.loadingMessage, vui.setting("loadingMessage"), "Loading...");
       return slot && slot(vui);
     });
     const failedToLoadItemsMessageRef = computed(() => {
-      const slot = resolveVNodeChildOrSlots(props12.failedToLoadItemsMessage, vui.setting("failedToLoadDataMessage"), "Failed to load data.");
+      const slot = resolveVNodeChildOrSlots(props13.failedToLoadItemsMessage, vui.setting("failedToLoadDataMessage"), "Failed to load data.");
       return slot && slot(vui);
     });
     const focus = (opts) => {
@@ -2774,10 +2778,10 @@ var VSelect = defineComponent({
           }) : item.renderDefaultSlot();
           children.push(child);
         });
-      } else if (props12.placeholder != null) {
+      } else if (props13.placeholder != null) {
         children.push(createVNode("span", {
           "class": "v-select__placeholder"
-        }, [props12.placeholder]));
+        }, [props13.placeholder]));
       }
       return children;
     };
@@ -2850,10 +2854,10 @@ var VSelect = defineComponent({
       if (!els) return;
       const currentEl = els.find((el) => el.classList.contains("v-option--key-focused"));
       if (currentEl) {
-        const ev2 = new MouseEvent("click", {
-          view: window,
+        const ev2 = new PointerEvent("click", {
           bubbles: true,
-          cancelable: true
+          cancelable: true,
+          view: window
         });
         currentEl.dispatchEvent(ev2);
         ev2.preventDefault();
@@ -2935,7 +2939,7 @@ var VSelect = defineComponent({
             }
           }, null);
         }
-        if (props12.clearable && inputControl.value != null) {
+        if (props13.clearable && inputControl.value != null) {
           return createVNode(VButton, {
             "key": "clear",
             "icon": vui.icon("clear"),
@@ -2959,8 +2963,8 @@ var VSelect = defineComponent({
         "ref": fieldRef,
         "loading": inputControl.itemsLoading,
         "error": inputControl.itemsLoadFailed,
-        "startAdornment": props12.startAdornment,
-        "endAdornment": props12.endAdornment,
+        "startAdornment": props13.startAdornment,
+        "endAdornment": props13.endAdornment,
         "size": control.size.value,
         "focused": menuOpened.value,
         "autoHeight": inputControl.multiple,
@@ -2993,7 +2997,7 @@ var VSelect = defineComponent({
       const defaultSlot = () => createVNode(VMenu, {
         "width": "fit",
         "maxWidth": "fit",
-        "closeOnNavigation": props12.closeOnNavigation,
+        "closeOnNavigation": props13.closeOnNavigation,
         "distance": 0,
         "alwaysRender": true,
         "modelValue": menuOpened.value,
@@ -3004,11 +3008,11 @@ var VSelect = defineComponent({
       return createVNode(VFormControl, {
         "nodeControl": inputControl,
         "class": classes.value,
-        "label": props12.label,
-        "hint": props12.hint,
-        "hinttip": props12.hinttip,
-        "hiddenInfo": props12.hiddenInfo,
-        "requiredChip": props12.requiredChip,
+        "label": props13.label,
+        "hint": props13.hint,
+        "hinttip": props13.hinttip,
+        "hiddenInfo": props13.hiddenInfo,
+        "requiredChip": props13.requiredChip,
         "onClickLabel": handleClickLabel
       }, {
         ...ctx.slots,
@@ -3037,20 +3041,20 @@ var VTextField = defineComponent({
   props: createTextFieldProps(),
   emits: emits8,
   slots: slots8,
-  setup(props12, ctx) {
-    const inputControl = useTextInputNodeControl(props12, ctx, {
+  setup(props13, ctx) {
+    const inputControl = useTextInputNodeControl(props13, ctx, {
       nodeType: VUI_TEXT_FIELD_SYMBOL
     });
-    const control = useControl(props12);
-    useControlField(props12);
+    const control = useControl(props13);
+    useControlField(props13);
     const classes = computed(() => ["v-text-field", control.classes.value]);
     const handleClickLabel = (ev) => {
       inputControl.focus();
     };
     const defaultSlot = () => createVNode(VControlField, {
       "class": "v-text-field__input",
-      "startAdornment": props12.startAdornment,
-      "endAdornment": props12.endAdornment,
+      "startAdornment": props13.startAdornment,
+      "endAdornment": props13.endAdornment,
       "size": control.size.value
     }, {
       ...ctx.slots,
@@ -3070,12 +3074,12 @@ var VTextField = defineComponent({
     });
     return () => createVNode(VFormControl, {
       "nodeControl": inputControl,
-      "hiddenInfo": props12.hiddenInfo,
+      "hiddenInfo": props13.hiddenInfo,
       "class": classes.value,
-      "label": props12.label,
-      "hint": props12.hint,
-      "hinttip": props12.hinttip,
-      "requiredChip": props12.requiredChip,
+      "label": props13.label,
+      "hint": props13.hint,
+      "hinttip": props13.hinttip,
+      "requiredChip": props13.requiredChip,
       "onClickLabel": handleClickLabel
     }, {
       ...ctx.slots,
@@ -3108,7 +3112,7 @@ var VNumberField = defineComponent({
     "update:modelValue": (value) => true,
     change: (value) => true
   },
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const hasNumberMask = computed(() => {
       const {
         mask
@@ -3132,7 +3136,7 @@ var VNumberField = defineComponent({
       "type": hasNumberMask.value ? "text" : "number",
       "inputmode": inputmode.value,
       "maskModel": "typed",
-      "modelValue": toString(props12.modelValue),
+      "modelValue": toString(props13.modelValue),
       "onUpdate:modelValue": onUpdateModelValue,
       "onChange": onChange
     }), ctx.slots);
@@ -3154,14 +3158,14 @@ var VTextarea = defineComponent({
     ...slots9()
   },
   emits: emits9,
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const vui = useVui();
-    const inputControl = useTextareaNodeControl(props12, ctx, {
+    const inputControl = useTextareaNodeControl(props13, ctx, {
       nodeType: VUI_TEXTAREA_SYMBOL,
       defaultRows: vui.textareaRows
     });
-    const control = useControl(props12);
-    useControlField(props12);
+    const control = useControl(props13);
+    useControlField(props13);
     ctx.expose({
       control: inputControl
     });
@@ -3169,8 +3173,8 @@ var VTextarea = defineComponent({
       "class": "v-textarea__input",
       "size": control.size.value,
       "autoHeight": true,
-      "startAdornment": props12.startAdornment,
-      "endAdornment": props12.endAdornment
+      "startAdornment": props13.startAdornment,
+      "endAdornment": props13.endAdornment
     }, {
       ...ctx.slots,
       default: withCtx(() => inputControl.createInputElement({
@@ -3187,11 +3191,11 @@ var VTextarea = defineComponent({
     return () => createVNode(VFormControl, {
       "nodeControl": inputControl,
       "class": ["v-textarea", control.classes.value],
-      "label": props12.label,
-      "hint": props12.hint,
-      "hinttip": props12.hinttip,
-      "hiddenInfo": props12.hiddenInfo,
-      "requiredChip": props12.requiredChip,
+      "label": props13.label,
+      "hint": props13.hint,
+      "hinttip": props13.hinttip,
+      "hiddenInfo": props13.hiddenInfo,
+      "requiredChip": props13.requiredChip,
       "onClickLabel": (ev) => {
         inputControl.focus();
       }
@@ -3205,11 +3209,128 @@ var VTextarea = defineComponent({
 var {
   props: props10,
   emits: emits10
+} = createFileInputNodeSettings();
+var slots10 = defineSlots();
+function createFileInputProps() {
+  return {
+    ...props10,
+    ...colorSchemeProps(),
+    ...createFormNodeWrapperProps(),
+    ...createControlFieldProps(),
+    ...createControlFieldProviderProps(),
+    ...createControlProps(),
+    ...slots10(),
+    buttonText: {
+      type: String,
+      default: "Choose File"
+    },
+    truncateLength: {
+      type: [Number, String],
+      default: 22
+    }
+  };
+}
+var VFileInput = defineComponent({
+  name: "VFileInput",
+  props: createFileInputProps(),
+  emits: emits10,
+  slots: slots10,
+  setup(props13, ctx) {
+    const vui = useVui();
+    const inputControl = useFileInputNodeControl(props13, ctx, {
+      nodeType: VUI_FILE_INPUT_SYMBOL
+    });
+    const control = useControl(props13);
+    useControlField(props13);
+    const classes = computed(() => ["v-file-input", control.classes.value]);
+    const handleClickLabel = (ev) => {
+      inputControl.focus();
+    };
+    const endAdornmentSlot = () => {
+      if (props13.clearable && inputControl.value.length) {
+        return createVNode(VButton, {
+          "key": "clear",
+          "icon": vui.icon("clear"),
+          "rounded": true,
+          "onClick": (ev) => {
+            ev.stopPropagation();
+            inputControl.clear();
+          }
+        }, null);
+      }
+    };
+    const showDialog = () => {
+      if (inputControl.canOperation) {
+        inputControl.inputElement?.click();
+      }
+    };
+    const renderSelections = () => {
+      if (ctx.slots.selections) {
+        return ctx.slots.selections(inputControl);
+      }
+      const {
+        files
+      } = inputControl.selectionContext;
+      if (!files.length) return createVNode("span", {
+        "class": "v-file-input__placeholder"
+      }, [inputControl.placeholder || "No file chosen"]);
+      return files.map((file) => file.truncatedName).join(", ");
+    };
+    const defaultSlot = () => createVNode("div", {
+      "class": "v-file-input__inner"
+    }, [createVNode(VButton, {
+      "key": "open",
+      "class": "v-file-input__button",
+      "color": "base",
+      "size": props13.size,
+      "startIcon": vui.icon("fileUpload"),
+      "variant": vui.setting("containedVariant"),
+      "onClick": showDialog
+    }, {
+      default: () => [props13.buttonText]
+    }), createVNode(VControlField, {
+      "class": "v-file-input__input",
+      "startAdornment": props13.startAdornment,
+      "endAdornment": props13.endAdornment,
+      "size": control.size.value,
+      "onClick": showDialog,
+      "autoHeight": true
+    }, {
+      ...ctx.slots,
+      default: withCtx(() => [inputControl.createInputElement({
+        class: "v-file-input__input__element"
+      }), createVNode("div", {
+        "class": "v-file-input__selections"
+      }, [renderSelections()])]),
+      endAdornment: withCtx(endAdornmentSlot)
+    })]);
+    ctx.expose({
+      control: inputControl
+    });
+    return () => createVNode(VFormControl, {
+      "nodeControl": inputControl,
+      "hiddenInfo": props13.hiddenInfo,
+      "class": classes.value,
+      "label": props13.label,
+      "hint": props13.hint,
+      "hinttip": props13.hinttip,
+      "requiredChip": props13.requiredChip,
+      "onClickLabel": handleClickLabel
+    }, {
+      ...ctx.slots,
+      default: withCtx(defaultSlot)
+      // infoAppends: withCtx(infoAppendsSlot),
+    });
+  }
+});
+var {
+  props: props11,
+  emits: emits11
 } = createFormGroupSettings();
 var formGroupSlots = defineSlots();
 function createVFormGroupProps() {
   return {
-    ...props10,
+    ...props11,
     ...createControlProps(),
     ...formGroupSlots()
   };
@@ -3218,13 +3339,13 @@ var VFormGroup = defineComponent({
   name: "VFormGroup",
   inheritAttrs: false,
   props: createVFormGroupProps(),
-  emits: emits10,
+  emits: emits11,
   slots: formGroupSlots,
-  setup(props12, ctx) {
-    const nodeControl = useFormGroup(props12, ctx, {
+  setup(props13, ctx) {
+    const nodeControl = useFormGroup(props13, ctx, {
       nodeType: VUI_FORM_GROUP_SYMBOL
     });
-    useControl(props12);
+    useControl(props13);
     ctx.expose({
       control: nodeControl
     });
@@ -3232,8 +3353,8 @@ var VFormGroup = defineComponent({
   }
 });
 var {
-  props: props11,
-  emits: emits11
+  props: props12,
+  emits: emits12
 } = createFormSettings({
   nodeType: VUI_FORM_SYMBOL
 });
@@ -3244,7 +3365,7 @@ function useRender(render) {
 var formSlots = defineSlots();
 function createVFormProps() {
   return {
-    ...props11,
+    ...props12,
     ...createControlProps(),
     ...formSlots()
   };
@@ -3252,10 +3373,10 @@ function createVFormProps() {
 var VForm = defineComponent({
   name: "VForm",
   props: createVFormProps(),
-  emits: emits11,
+  emits: emits12,
   slots: formSlots,
-  setup(props12, ctx) {
-    const nodeControl = useForm(props12, ctx, {
+  setup(props13, ctx) {
+    const nodeControl = useForm(props13, ctx, {
       nodeType: VUI_FORM_SYMBOL
     });
     const classes = computed(() => ["v-form", {
@@ -3266,7 +3387,7 @@ var VForm = defineComponent({
       "v-form--pending": nodeControl.pending,
       "v-form--sending": nodeControl.sending
     }]);
-    useControl(props12);
+    useControl(props13);
     useRender(() => createVNode("form", mergeProps({
       "class": classes.value
     }, nodeControl.formAttrs), [ctx.slots.default?.(nodeControl)]));
@@ -3292,13 +3413,13 @@ var VTab = defineComponent({
   emits: {
     click: (ev) => true
   },
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const classesRef = computed(() => ({
-      "v-tab--active": props12.active
+      "v-tab--active": props13.active
     }));
     const exposeValues = {
-      value: props12.value,
-      active: props12.active
+      value: props13.value,
+      active: props13.active
     };
     ctx.expose(exposeValues);
     return () => {
@@ -3307,7 +3428,7 @@ var VTab = defineComponent({
         value,
         icon,
         active
-      } = props12;
+      } = props13;
       const classes = ["v-tab", classesRef.value];
       const children = createVNode("span", {
         "class": "v-tab__content"
@@ -3340,7 +3461,7 @@ var VTab = defineComponent({
 function _isSlot9(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-var slots10 = defineSlots();
+var slots11 = defineSlots();
 var VTabs = defineComponent({
   name: "VTabs",
   props: {
@@ -3367,14 +3488,14 @@ var VTabs = defineComponent({
     withQuery: Boolean,
     color: String,
     onBeforeChange: Function,
-    ...slots10()
+    ...slots11()
   },
   emits: {
     "update:modelValue": (newValue) => true,
     change: (newValue) => true
   },
-  slots: slots10,
-  setup(props12, ctx) {
+  slots: slots11,
+  setup(props13, ctx) {
     const vui = useVui();
     const internalValueRef = ref(null);
     const ScrollerRef = VScroller.$ref();
@@ -3392,15 +3513,15 @@ var VTabs = defineComponent({
       }
     });
     const colorScope = useScopeColorClass({
-      color: () => props12.color || vui.setting("tabDefault").color
+      color: () => props13.color || vui.setting("tabDefault").color
     });
     const classes = computed(() => [colorScope.value.className]);
     const computedItemsRef = computed(() => {
       const current = currentRef.value;
       const {
         router
-      } = props12;
-      return props12.items.map((item) => {
+      } = props13;
+      return props13.items.map((item) => {
         const {
           value
         } = item;
@@ -3425,9 +3546,9 @@ var VTabs = defineComponent({
       tabRefs.value.push(ref10);
     };
     function setupInternalValue(routable) {
-      let value = props12.modelValue;
+      let value = props13.modelValue;
       if (value == null || value === "") {
-        const firstItem = props12.items[0];
+        const firstItem = props13.items[0];
         if (!firstItem) return;
         value = firstItem.value;
       }
@@ -3436,7 +3557,7 @@ var VTabs = defineComponent({
         if (routable) {
           const {
             router
-          } = props12;
+          } = props13;
           if (!router) return;
           const hit = computedItemsRef.value.find((item) => item.value === value);
           if (!hit) return;
@@ -3450,7 +3571,7 @@ var VTabs = defineComponent({
           } = location;
           if (route.fullPath === vui.location.currentRoute.fullPath) return;
           vui.router[to2.replace ? "replace" : "push"](to2);
-        } else if (!props12.router && props12.modelValue !== value) {
+        } else if (!props13.router && props13.modelValue !== value) {
           ctx.emit("update:modelValue", value);
           ctx.emit("change", value);
         }
@@ -3465,7 +3586,7 @@ var VTabs = defineComponent({
       }
       const {
         onBeforeChange
-      } = props12;
+      } = props13;
       if (onBeforeChange) {
         let result = onBeforeChange(value, currentRef.value);
         if (isPromise(result)) {
@@ -3495,7 +3616,7 @@ var VTabs = defineComponent({
       if (!container) return;
       const {
         autoScrollOffset
-      } = props12;
+      } = props13;
       const tabLeft = $tab.offsetLeft;
       const tabWidth = $tab.offsetWidth;
       const tabRight = tabLeft + tabWidth;
@@ -3523,16 +3644,16 @@ var VTabs = defineComponent({
         });
       }
     }
-    watch(() => props12.modelValue, () => setupInternalValue(true));
-    watch(() => props12.items, () => setupInternalValue(), {
+    watch(() => props13.modelValue, () => setupInternalValue(true));
+    watch(() => props13.items, () => setupInternalValue(), {
       deep: true
     });
     watch(() => internalValueRef.value, (newValue) => {
       scrollToTab(newValue);
     });
     vui.location.watchRoute((route) => {
-      if (!props12.router) return;
-      const path = props12.withQuery ? route.fullPath : route.path;
+      if (!props13.router) return;
+      const path = props13.withQuery ? route.fullPath : route.path;
       const hit = computedItemsRef.value.find(({
         location
       }) => location && location.route.fullPath === path);
@@ -3613,10 +3734,10 @@ var VBreadcrumbs = defineComponent({
     },
     divider: [String, Function]
   },
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const vui = useVui();
     const computedItemsRef = computed(() => {
-      const items = props12.items.map((rawItem) => typeof rawItem === "string" ? {
+      const items = props13.items.map((rawItem) => typeof rawItem === "string" ? {
         text: rawItem
       } : rawItem);
       return items.map((item) => {
@@ -3641,7 +3762,7 @@ var VBreadcrumbs = defineComponent({
     return () => {
       if (lengthRef.value < 1) return;
       let dividerSlot;
-      const propDivider = props12.divider;
+      const propDivider = props13.divider;
       if (propDivider) {
         dividerSlot = typeof propDivider === "function" ? propDivider : () => propDivider;
       } else {
@@ -3712,12 +3833,12 @@ var VContentSwitcher = defineComponent({
   emits: {
     "update:modelValue": (modelValue) => true
   },
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const internalValueRef = ref("");
     const transitionRef = ref("");
     const elRef = ref(null);
     const anchorRef = ref(null);
-    const computedOrderRef = computed(() => props12.order.map((row) => typeof row === "string" ? row : row.value));
+    const computedOrderRef = computed(() => props13.order.map((row) => typeof row === "string" ? row : row.value));
     const currentRef = computed({
       get: () => internalValueRef.value,
       set: (current) => {
@@ -3730,7 +3851,7 @@ var VContentSwitcher = defineComponent({
     const autotopSettingsRef = computed(() => {
       let {
         autotop: settings
-      } = props12;
+      } = props13;
       if (settings === true) settings = {};
       if (!settings) return;
       return {
@@ -3753,7 +3874,7 @@ var VContentSwitcher = defineComponent({
       }
       return el;
     }
-    watch(() => props12.modelValue, (value, beforeValue) => {
+    watch(() => props13.modelValue, (value, beforeValue) => {
       if (value == null) return;
       internalValueRef.value = value;
       if (beforeValue == null) return;
@@ -3771,7 +3892,7 @@ var VContentSwitcher = defineComponent({
     });
     watch(currentRef, () => {
       const autotopSettings = autotopSettingsRef.value;
-      if (autotopSettings && props12.modelValue != null) {
+      if (autotopSettings && props13.modelValue != null) {
         seeTop(autotopSettings);
       }
     });
@@ -3930,26 +4051,26 @@ var VDataTable = defineComponent({
   emits: {
     input: (selectedValues) => true
   },
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const vui = useVui();
     const bootedRef = ref(false);
     const footerHeightRef = ref(0);
-    const internalValues = ref(props12.modelValue.slice());
+    const internalValues = ref(props13.modelValue.slice());
     const rowSettings = computed(() => {
       const {
         rowSettings: rowSettings2
-      } = props12;
+      } = props13;
       if (!rowSettings2) return () => ({});
       return typeof rowSettings2 === "function" ? rowSettings2 : () => rowSettings2;
     });
     const containedVariant = vui.setting("containedVariant");
-    const sortedItemKeysRef = computed(() => props12.items.map((item) => item[props12.itemKey]));
-    const isEmptyRef = computed(() => props12.items.length === 0);
+    const sortedItemKeysRef = computed(() => props13.items.map((item) => item[props13.itemKey]));
+    const isEmptyRef = computed(() => props13.items.length === 0);
     const headersRef = computed(() => {
       const {
         headers,
         selectable
-      } = props12;
+      } = props13;
       const ret = [];
       if (selectable) {
         ret.push({
@@ -3964,7 +4085,7 @@ var VDataTable = defineComponent({
     const searchQueryValues = computed(() => {
       let {
         searchQuery
-      } = props12;
+      } = props13;
       if (!searchQuery) {
         return [];
       }
@@ -3987,14 +4108,14 @@ var VDataTable = defineComponent({
     const emptyMessage = computed(() => {
       let message;
       if (searchQueryValues.value.length) {
-        message = props12.noResultsMessage || vui.setting("noResultsMessage") || "No search results found.";
+        message = props13.noResultsMessage || vui.setting("noResultsMessage") || "No search results found.";
       } else {
-        message = props12.noDataMessage || vui.setting("noDataMessage") || "No data was available.";
+        message = props13.noDataMessage || vui.setting("noDataMessage") || "No data was available.";
       }
       return typeof message === "function" ? message(vui) : message;
     });
     const classesRef = computed(() => [{
-      "v-data-table--fixed-header": props12.fixedHeader
+      "v-data-table--fixed-header": props13.fixedHeader
     }]);
     const layout = VueAppLayout.use();
     const bodyInnerStylesRef = computed(() => {
@@ -4002,7 +4123,7 @@ var VDataTable = defineComponent({
       const {
         fixedHeader,
         maxHeight
-      } = props12;
+      } = props13;
       const footerHeight = footerHeightRef.value;
       const _maxHeight = maxHeight || (fixedHeader ? "100%" : maxHeight);
       if (!_maxHeight) {
@@ -4012,24 +4133,24 @@ var VDataTable = defineComponent({
         maxHeight: layout.calculateViewHeight(_maxHeight, -footerHeight - 100, 200)
       };
     });
-    const defaultOrderQueryRef = computed(() => props12.defaultOrder === props12.ascQueryValue ? props12.ascQueryValue : props12.descQueryValue);
-    const isTransitioningRef = computed(() => vui.location.isQueryOnlyTransitioning([props12.pageQuery, props12.sortQuery, props12.orderQuery, props12.limitQuery]));
-    const pageRef = computed(() => vui.location.getQuery(props12.pageQuery, Number, 1));
-    const needShowHeaderControlRef = computed(() => props12.items.length > props12.controlThreshold);
+    const defaultOrderQueryRef = computed(() => props13.defaultOrder === props13.ascQueryValue ? props13.ascQueryValue : props13.descQueryValue);
+    const isTransitioningRef = computed(() => vui.location.isQueryOnlyTransitioning([props13.pageQuery, props13.sortQuery, props13.orderQuery, props13.limitQuery]));
+    const pageRef = computed(() => vui.location.getQuery(props13.pageQuery, Number, 1));
+    const needShowHeaderControlRef = computed(() => props13.items.length > props13.controlThreshold);
     const sortByRef = computed({
-      get: () => vui.location.getQuery(props12.sortQuery),
+      get: () => vui.location.getQuery(props13.sortQuery),
       set(value) {
         vui.location.pushQuery({
-          [props12.sortQuery]: value || null,
-          [props12.pageQuery]: 1
+          [props13.sortQuery]: value || null,
+          [props13.pageQuery]: 1
         });
       }
     });
-    const ordersRef = computed(() => [props12.ascQueryValue, props12.descQueryValue]);
-    const usePagingRef = computed(() => props12.limits.length > 0);
+    const ordersRef = computed(() => [props13.ascQueryValue, props13.descQueryValue]);
+    const usePagingRef = computed(() => props13.limits.length > 0);
     const orderByRef = computed({
       get: () => {
-        const value = vui.location.getQuery(props12.orderQuery);
+        const value = vui.location.getQuery(props13.orderQuery);
         if (typeof value !== "string" || !ordersRef.value.includes(value)) {
           return;
         }
@@ -4037,32 +4158,32 @@ var VDataTable = defineComponent({
       },
       set(value) {
         vui.location.pushQuery({
-          [props12.orderQuery]: value || null,
-          [props12.pageQuery]: 1
+          [props13.orderQuery]: value || null,
+          [props13.pageQuery]: 1
         });
       }
     });
     const offsetRef = computed(() => (pageRef.value - 1) * limitRef.value);
     const limitRef = computed({
-      get: () => vui.location.getQuery(props12.limitQuery, Number, props12.limitDefault),
+      get: () => vui.location.getQuery(props13.limitQuery, Number, props13.limitDefault),
       set: (value) => {
         const page = Math.floor(offsetRef.value / value) + 1;
         vui.location.pushQuery({
-          [props12.limitQuery]: value,
-          [props12.pageQuery]: page
+          [props13.limitQuery]: value,
+          [props13.pageQuery]: page
         });
       }
     });
     const pageLengthRef = computed(() => {
       const {
         total
-      } = props12;
+      } = props13;
       const _limit = limitRef.value;
       if (!total) return 0;
       return Math.ceil(total / _limit);
     });
-    const lengthRef = computed(() => props12.items.length);
-    const isASCRef = computed(() => orderByRef.value === props12.ascQueryValue);
+    const lengthRef = computed(() => props13.items.length);
+    const isASCRef = computed(() => orderByRef.value === props13.ascQueryValue);
     const sortIconRef = computed(() => {
       let icon = vui.icon("sort");
       if (typeof icon === "string") {
@@ -4089,21 +4210,21 @@ var VDataTable = defineComponent({
       if ((sort === void 0 || sortByRef.value === sort) && (order === void 0 || orderByRef.value === order)) return;
       const queries = {};
       if (sort) {
-        queries[props12.sortQuery] = sort;
+        queries[props13.sortQuery] = sort;
       }
       if (order) {
-        queries[props12.orderQuery] = order;
+        queries[props13.orderQuery] = order;
       }
       vui.location.pushQuery({
         ...queries,
         ...usePagingRef.value ? {
-          [props12.pageQuery]: 1
+          [props13.pageQuery]: 1
         } : void 0
       });
     }
     function toggleOrderBy() {
       return setSort({
-        order: orderByRef.value === props12.ascQueryValue ? props12.descQueryValue : props12.ascQueryValue
+        order: orderByRef.value === props13.ascQueryValue ? props13.descQueryValue : props13.ascQueryValue
       });
     }
     function isSelected(key) {
@@ -4166,7 +4287,7 @@ var VDataTable = defineComponent({
         "class": "v-data-table__pagination",
         "dense": true,
         "align": "right",
-        "routeQuery": props12.pageQuery,
+        "routeQuery": props13.pageQuery,
         "modelValue": pageRef.value,
         "length": pageLengthRef.value
       }, null);
@@ -4174,7 +4295,7 @@ var VDataTable = defineComponent({
     function genControls() {
       const {
         total
-      } = props12;
+      } = props13;
       const offset = offsetRef.value;
       const length = lengthRef.value;
       return createVNode("div", {
@@ -4192,7 +4313,7 @@ var VDataTable = defineComponent({
         "size": "sm",
         "hiddenInfo": true,
         "disabled": isTransitioningRef.value,
-        "items": props12.limits.map((limit) => ({
+        "items": props13.limits.map((limit) => ({
           label: `${limit}\u4EF6`,
           value: limit
         })),
@@ -4209,7 +4330,7 @@ var VDataTable = defineComponent({
       const {
         defaultOrder,
         ascQueryValue
-      } = props12;
+      } = props13;
       const children = headersRef.value.map((header) => {
         const {
           label,
@@ -4357,7 +4478,7 @@ var VDataTable = defineComponent({
       const {
         items,
         itemKey
-      } = props12;
+      } = props13;
       const {
         item: itemSlot = defaultItemSlot
       } = ctx.slots;
@@ -4374,10 +4495,10 @@ var VDataTable = defineComponent({
         "class": "v-data-table__table__body"
       }, [children]);
     }
-    watch(() => props12.modelValue, (modelValue) => {
+    watch(() => props13.modelValue, (modelValue) => {
       internalValues.value = modelValue.slice();
     });
-    watch(() => props12.items, (items) => {
+    watch(() => props13.items, (items) => {
       internalValues.value = internalValues.value.filter((key) => sortedItemKeysRef.value.includes(key));
     });
     onMounted(() => {
@@ -4437,15 +4558,15 @@ var VToolbar = defineComponent({
     ...colorSchemeProps(),
     dense: Boolean
   },
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const vui = useVui();
-    const elevation = useElevation(props12, {
+    const elevation = useElevation(props13, {
       defaultValue: 4
     });
-    const dense = computed(() => props12.dense);
+    const dense = computed(() => props13.dense);
     const color = useColorClasses({
-      color: () => props12.color,
-      variant: () => props12.variant || vui.setting("containedVariant")
+      color: () => props13.color,
+      variant: () => props13.variant || vui.setting("containedVariant")
     });
     const classes = computed(() => [elevation.elevationClassName.value, color.colorClasses.value, {
       "v-toolbar--plain": !color.color.value.value,
@@ -4460,11 +4581,11 @@ var VToolbarMenu = defineComponent({
   name: "VToolbarMenu",
   inheritAttrs: false,
   props: {},
-  setup(props12, ctx) {
+  setup(props13, ctx) {
     const vui = useVui();
     const plain = vui.setting("plainVariant");
     return () => {
-      const variant = props12.variant || plain;
+      const variant = props13.variant || plain;
       return createVNode(VButton, mergeProps(ctx.attrs, {
         "variant": variant,
         "class": ["v-toolbar-menu"]
@@ -4482,8 +4603,8 @@ var VToolbarEdge = defineComponent({
       required: true
     }
   },
-  setup(props12, ctx) {
-    const edge = computed(() => props12.edge);
+  setup(props13, ctx) {
+    const edge = computed(() => props13.edge);
     return () => {
       const children = renderSlotOrEmpty(ctx.slots, "default");
       const hasChildren = !!children && children.length > 0;
@@ -4495,7 +4616,7 @@ var VToolbarEdge = defineComponent({
     };
   }
 });
-var slots11 = defineSlots();
+var slots12 = defineSlots();
 var VToolbarTitle = defineComponent({
   name: "VToolbarTitle",
   props: {
@@ -4503,11 +4624,11 @@ var VToolbarTitle = defineComponent({
       type: String,
       default: "span"
     },
-    ...slots11()
+    ...slots12()
   },
-  slots: slots11,
-  setup(props12, ctx) {
-    const _TagName = computed(() => props12.tag);
+  slots: slots12,
+  setup(props13, ctx) {
+    const _TagName = computed(() => props13.tag);
     return () => {
       const TagName = _TagName.value;
       return createVNode(TagName, {
@@ -4612,26 +4733,26 @@ var VuiService = class {
       })
     };
     this.dialog = this.stack.createLauncher(VDialog);
-    this.alert = this.stack.createLauncher(VDialog, (props12) => {
-      const actions = [...props12?.actions || []];
+    this.alert = this.stack.createLauncher(VDialog, (props13) => {
+      const actions = [...props13?.actions || []];
       if (!actions.length) {
         actions.push(this.stackAction("ok"));
       }
-      const backdrop = props12?.backdrop == null ? true : props12?.backdrop;
+      const backdrop = props13?.backdrop == null ? true : props13?.backdrop;
       return {
-        ...props12,
+        ...props13,
         backdrop,
         actions
       };
     });
-    this.confirm = this.stack.createLauncher(VDialog, (props12) => {
-      const actions = [...props12?.actions || []];
+    this.confirm = this.stack.createLauncher(VDialog, (props13) => {
+      const actions = [...props13?.actions || []];
       if (!actions.length) {
         actions.push(this.stackAction("cancel"), this.stackAction("ok"));
       }
-      const backdrop = props12?.backdrop == null ? true : props12?.backdrop;
+      const backdrop = props13?.backdrop == null ? true : props13?.backdrop;
       return {
-        ...props12,
+        ...props13,
         backdrop,
         actions
       };
@@ -4832,6 +4953,6 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { ARROW_KEY_TYPES, AVATAR_SIZES, BUTTON_ALIGNS, CHIP_SIZES, CHOICE_KEY_TYPES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, DISABLED_REASON_PROPS, KEYBOARD_EVENT_TYPES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VControlField, VDataTable, VDialog, VDisabledReason, VDrawerLayout, VForm, VFormControl, VFormGroup, VGridContainer, VGridItem, VHero, VIcon, VListTile, VMenu, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSheetModal, VSkeltonLoaderBone, VSnackbar, VSwitch, VSwitchGroup, VTabs, VTextCounter, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VTooltip, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_GROUP_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createNavigationProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormGroupProps, createVFormProps, defineFormSelectorComponent, formGroupSlots, formSlots, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, paperBaseSlots, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, sheetModalProps, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { ARROW_KEY_TYPES, AVATAR_SIZES, BUTTON_ALIGNS, CHIP_SIZES, CHOICE_KEY_TYPES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, DISABLED_REASON_PROPS, KEYBOARD_EVENT_TYPES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VControlField, VDataTable, VDialog, VDisabledReason, VDrawerLayout, VFileInput, VForm, VFormControl, VFormGroup, VGridContainer, VGridItem, VHero, VIcon, VListTile, VMenu, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSheetModal, VSkeltonLoaderBone, VSnackbar, VSwitch, VSwitchGroup, VTabs, VTextCounter, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VTooltip, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FILE_INPUT_SYMBOL, VUI_FORM_GROUP_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createNavigationProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormGroupProps, createVFormProps, defineFormSelectorComponent, formGroupSlots, formSlots, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, paperBaseSlots, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, sheetModalProps, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
 //# sourceMappingURL=vui.mjs.map
 //# sourceMappingURL=vui.mjs.map