@fastkit/vui 0.15.0 → 0.16.1

package/dist/vui.mjs

@@ -18,15 +18,14 @@ import { installClickOutsideDirective } from '@fastkit/vue-click-outside';
 export * from '@fastkit/vue-click-outside';
 import { VAppContainer, VueAppLayout, VAppLayout, installVueAppLayout } from '@fastkit/vue-app-layout';
 export * from '@fastkit/vue-app-layout';
-import { useScopeColorClass, useColorClasses, colorSchemeProps, toScopeColorClass, useInjectTheme, VueColorSchemePlugin } from '@fastkit/vue-color-scheme';
+import { colorSchemeProps, useColorClasses, useScopeColorClass, toScopeColorClass, useInjectTheme, VueColorSchemePlugin } from '@fastkit/vue-color-scheme';
 export * from '@fastkit/vue-color-scheme';
 import { createFormControlSettings, useFormControl, useParentFormNode, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm } from '@fastkit/vue-form-control';
 export * from '@fastkit/vue-form-control';
 import { getDocumentScroller, useVScrollerRef, VScroller } from '@fastkit/vue-scroller';
 export * from '@fastkit/vue-scroller';
-import { VTooltip, VMenu, VStackRoot, VDialog, VSnackbar, resolveVStackDynamicInput, installVueStackPlugin } from '@fastkit/vue-stack';
+import { defineMenuComponent, defineDialogComponent, createStackActionProps, useStackAction, defineSnackbarComponent, createStackableDefine, useStackControl, VStackContainer, BUILTIN_ACTION_HANDLERS, installVueStackPlugin } from '@fastkit/vue-stack';
 export * from '@fastkit/vue-stack';
-export { VDialog, VMenu, VSnackbar, VTooltip } from '@fastkit/vue-stack';
 import { useActionable, VAction, actionableInheritProps, setDefaultRouterLink } from '@fastkit/vue-action';
 export * from '@fastkit/vue-action';
 export { VAction as VLink } from '@fastkit/vue-action';
@@ -107,6 +106,7 @@ __export(src_exports, {
   VRadio: () => VRadio,
   VRadioGroup: () => VRadioGroup,
   VSelect: () => VSelect,
+  VSheetModal: () => VSheetModal,
   VSkeltonLoaderBone: () => VSkeltonLoaderBone,
   VSnackbar: () => VSnackbar,
   VSwitch: () => VSwitch,
@@ -167,6 +167,7 @@ __export(src_exports, {
   renderNavigationItemInput: () => renderNavigationItemInput,
   resolveNavigationItemInput: () => resolveNavigationItemInput,
   resolveRawIconProp: () => resolveRawIconProp,
+  sheetModalProps: () => sheetModalProps,
   splitAttrs: () => splitAttrs,
   useControl: () => useControl,
   useControlField: () => useControlField,
@@ -240,11 +241,11 @@ function createControlProps() {
     loading: Boolean
   });
 }
-function useControl(props10, opts = {}) {
+function useControl(props11, opts = {}) {
   const { defaultSize = "md" } = opts;
   const parentControl = inject(VuiControlInjectionKey, null);
   const size = computed(() => {
-    const psize = props10.size;
+    const psize = props11.size;
     return psize ? psize : parentControl ? parentControl.size.value : defaultSize;
   });
   const classes = computed(() => {
@@ -270,11 +271,11 @@ function createControlFieldProviderProps() {
     }
   });
 }
-function useControlField(props10, opts = {}) {
+function useControlField(props11, opts = {}) {
   const { defaultVariant = "flat" } = opts;
   const parentControlField = inject(VuiControlFieldInjectionKey, null);
   const variant = computed(() => {
-    const pvariant = props10.variant;
+    const pvariant = props11.variant;
     return pvariant ? pvariant : parentControlField ? parentControlField.variant.value : defaultVariant;
   });
   const provider = {
@@ -310,8 +311,8 @@ var VIcon = defineComponent({
     ...iconProps
   },
   emits: {},
-  setup(props10, ctx) {
-    const iconName = computed(() => props10.name);
+  setup(props11, ctx) {
+    const iconName = computed(() => props11.name);
     const clickable = computed(() => typeof ctx.attrs.onClick !== "undefined");
     const classes = computed(() => [{
       "v-icon--clickable": clickable.value
@@ -320,7 +321,7 @@ var VIcon = defineComponent({
     const bodyStyles = computed(() => {
       const {
         rotate
-      } = props10;
+      } = props11;
       if (!rotate)
         return;
       return {
@@ -335,20 +336,74 @@ var VIcon = defineComponent({
     }, null)]);
   }
 });
+var colorProps = colorSchemeProps();
+var VMenu = defineMenuComponent({
+  name: "VMenu",
+  attrs: {
+    class: "v-menu"
+  },
+  props: {
+    ...colorProps
+  },
+  setup(ctx) {
+    const color = useColorClasses(ctx.props, {
+      useRootThemeDefault: true
+    });
+    ctx.setupContext.expose({
+      menu: ctx
+    });
+    return (children) => {
+      return createVNode("div", mergeProps({
+        "class": ["v-menu__body", color.colorClasses.value]
+      }, ctx.attrs), [children]);
+    };
+  }
+});
+
+// src/components/VTooltip/VTooltip.tsx
+var VTooltip = defineComponent({
+  name: "VTooltip",
+  inheritAttrs: false,
+  setup(_props, ctx) {
+    return () => {
+      const attrs = {
+        ...ctx.attrs
+      };
+      const defaultSlot = ctx.slots.default;
+      if (attrs.openOnHover == null) {
+        attrs.openOnHover = true;
+      }
+      if (attrs.openDelay == null) {
+        attrs.openDelay = 200;
+      }
+      return createVNode(VMenu, mergeProps(attrs, {
+        "scrollLock": false,
+        "class": "v-tooltip"
+      }), {
+        ...ctx.slots,
+        default: (payload) => {
+          return [createVNode("span", {
+            "class": "v-tooltip__inner"
+          }, [defaultSlot && defaultSlot(payload)])];
+        }
+      });
+    };
+  }
+});
 
 // src/components/VFormControl/VFormControl.tsx
 var {
   props,
   emits
 } = createFormControlSettings();
-function createRequiredChipRenderer(required, props10, vui = useVui()) {
+function createRequiredChipRenderer(required, props11, vui = useVui()) {
   return () => {
     if (!required())
       return;
     let chip;
     const {
       requiredChip
-    } = props10;
+    } = props11;
     if (requiredChip === false)
       return;
     if (requiredChip) {
@@ -374,9 +429,9 @@ var VFormControl = defineComponent({
   },
   slots,
   emits,
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const vui = useVui();
-    const control = useFormControl(props10, ctx, {
+    const control = useFormControl(props11, ctx, {
       hinttipPrepend: () => createVNode(VIcon, {
         "class": "v-form-control__label__hinttip__icon",
         "name": vui.icon("hinttip")
@@ -408,8 +463,9 @@ var VFormControl = defineComponent({
       "v-form-control--untouched": control.untouched,
       "v-form-control--invalid": control.invalid,
       "v-form-control--valid": control.valid
-    }, colorProvider.className(props10.error ? "error" : control.invalid && !control.readonly ? "error" : "primary")]);
-    const getRequiredChip = createRequiredChipRenderer(() => control.required, props10, vui);
+    }, colorProvider.className(props11.error ? "error" : control.invalid && !control.readonly ? "error" : "primary")]);
+    const getRequiredChip = createRequiredChipRenderer(() => control.required, props11, vui);
+    const handleClick = (ev) => ctx.emit("clickLabel", ev, control);
     return () => {
       const label = control.renderLabel();
       const message = control.renderMessage();
@@ -420,9 +476,7 @@ var VFormControl = defineComponent({
         "class": ["v-form-control", classes.value]
       }, [label && createVNode("label", {
         "class": "v-form-control__label",
-        "onClick": (ev) => {
-          ctx.emit("clickLabel", ev, control);
-        }
+        "onClick": handleClick
       }, [label, getRequiredChip(), hinttip && createVNode(VTooltip, {
         "y": "top",
         "openOnHover": _hinttipDelay !== "click",
@@ -437,7 +491,7 @@ var VFormControl = defineComponent({
         }, ctx2.attrs), [hinttip.tip])
       })]), createVNode("div", {
         "class": "v-form-control__body"
-      }, [ctx.slots.default?.(control), !props10.hiddenInfo && createVNode("div", {
+      }, [ctx.slots.default?.(control), !props11.hiddenInfo && createVNode("div", {
         "class": "v-form-control__info"
       }, [!!message && createVNode("div", {
         "class": "v-form-control__message"
@@ -462,15 +516,15 @@ function defineFormSelectorComponent(opts) {
     className
   } = opts;
   const {
-    props: props10,
-    emits: emits10
+    props: props11,
+    emits: emits11
   } = createFormSelectorSettings({
     defaultMultiple
   });
   return defineComponent({
     name: opts.name,
     props: {
-      ...props10,
+      ...props11,
       ...createFormControlProps(),
       ...createControlProps(),
       stacked: {
@@ -484,20 +538,20 @@ function defineFormSelectorComponent(opts) {
       ...slots2()
     },
     slots: slots2,
-    emits: emits10,
-    setup(props11, ctx) {
-      const selectorControl = useFormSelectorControl(props11, ctx, {
+    emits: emits11,
+    setup(props12, ctx) {
+      const selectorControl = useFormSelectorControl(props12, ctx, {
         nodeType,
         defaultMultiple
       });
-      const control = useControl(props11);
+      const control = useControl(props12);
       const vui = useVui();
       const loadingMessageRef = computed(() => {
-        const slot = resolveVNodeChildOrSlots(props11.loadingMessage, vui.setting("loadingMessage"), "Loading...");
+        const slot = resolveVNodeChildOrSlots(props12.loadingMessage, vui.setting("loadingMessage"), "Loading...");
         return slot && slot(vui);
       });
       const failedToLoadItemsMessageRef = computed(() => {
-        const slot = resolveVNodeChildOrSlots(props11.failedToLoadItemsMessage, vui.setting("failedToLoadDataMessage"), "Failed to load data.");
+        const slot = resolveVNodeChildOrSlots(props12.failedToLoadItemsMessage, vui.setting("failedToLoadDataMessage"), "Failed to load data.");
         return slot && slot(vui);
       });
       return {
@@ -567,9 +621,9 @@ function createElevationProps() {
     elevation: Number
   });
 }
-function useElevation(props10, opts = {}) {
+function useElevation(props11, opts = {}) {
   const elevationValue = computed(
-    () => props10.elevation == null ? opts.defaultValue : props10.elevation
+    () => props11.elevation == null ? opts.defaultValue : props11.elevation
   );
   const elevationClassName = computed(() => {
     const v = elevationValue.value;
@@ -627,6 +681,7 @@ __export(components_exports, {
   VRadio: () => VRadio,
   VRadioGroup: () => VRadioGroup,
   VSelect: () => VSelect,
+  VSheetModal: () => VSheetModal,
   VSkeltonLoaderBone: () => VSkeltonLoaderBone,
   VSnackbar: () => VSnackbar,
   VSwitch: () => VSwitch,
@@ -661,10 +716,150 @@ __export(components_exports, {
   renderNavigationItemInput: () => renderNavigationItemInput,
   resolveNavigationItemInput: () => resolveNavigationItemInput,
   resolveRawIconProp: () => resolveRawIconProp,
+  sheetModalProps: () => sheetModalProps,
   splitAttrs: () => splitAttrs,
   vueButtonProps: () => vueButtonProps
 });
 __reExport(components_exports, loading_exports);
+var colorProps2 = colorSchemeProps();
+var VDialog = defineDialogComponent({
+  name: "VDialog",
+  props: {
+    ...createStackActionProps(),
+    ...colorProps2,
+    dense: Boolean
+  },
+  setup(ctx) {
+    const {
+      props: props11,
+      control
+    } = ctx;
+    const vui = useVui();
+    const actionControl = useStackAction(props11, control, {
+      resolver: (actions) => {
+        if (actions.length === 0) {
+          return [vui.stackAction("close")];
+        } else {
+          return actions;
+        }
+      }
+    });
+    const color = useColorClasses(props11, {
+      useRootThemeDefault: true
+    });
+    return (children) => {
+      const {
+        $actions
+      } = actionControl;
+      return createVNode("div", {
+        "class": ["v-dialog", color.colorClasses.value, props11.dense && "v-dialog--dense"]
+      }, [createVNode("div", {
+        "class": "v-dialog__body"
+      }, [children]), $actions.length > 0 && createVNode("div", {
+        "class": "v-dialog__actions"
+      }, [$actions])]);
+    };
+  }
+});
+var colorProps3 = colorSchemeProps();
+var VSnackbar = defineSnackbarComponent({
+  name: "VSnackbar",
+  props: {
+    ...createStackActionProps(),
+    ...colorProps3
+  },
+  setup(ctx) {
+    const {
+      props: props11,
+      control
+    } = ctx;
+    const vui = useVui();
+    const actionControl = useStackAction(props11, control, {
+      resolver: (actions) => {
+        if (actions.length === 0) {
+          return [vui.stackAction("close")];
+        } else {
+          return actions;
+        }
+      }
+    });
+    const color = useColorClasses(props11, {
+      useRootThemeDefault: true
+    });
+    return (children) => {
+      const {
+        $actions
+      } = actionControl;
+      return createVNode("div", mergeProps({
+        "class": ["v-snackbar", color.colorClasses.value]
+      }, ctx.attrs), [createVNode("div", {
+        "class": "v-snackbar__inner"
+      }, [createVNode("div", {
+        "class": "v-snackbar__body"
+      }, [children]), $actions.length > 0 && createVNode("div", {
+        "class": "v-snackbar__actions"
+      }, [$actions])])]);
+    };
+  }
+});
+var {
+  props: props2,
+  emits: emits2
+} = createStackableDefine({
+  defaultTransition: "v-sheet-modal",
+  defaultFocusTrap: true,
+  defaultFocusRestorable: true,
+  defaultScrollLock: true
+});
+var sheetModalProps = {
+  ...props2,
+  header: Function,
+  "v-slots": void 0
+};
+var SHEET_STACK_TYPE = Symbol("VSheetModal");
+var VSheetModal = defineComponent({
+  name: "VSheetModal",
+  inheritAttrs: false,
+  props: sheetModalProps,
+  emits: emits2,
+  setup(props11, ctx) {
+    const stackControl = useStackControl(props11, ctx, {
+      stackType: SHEET_STACK_TYPE
+    });
+    const hasActiveChild = computed(() => {
+      const myIndex = stackControl.zIndex;
+      const stacks = stackControl.$service.getActiveStacks().filter((stack) => stack.stackType === SHEET_STACK_TYPE);
+      return stacks.some((stack) => stack.zIndex > myIndex);
+    });
+    return {
+      stackControl,
+      hasActiveChild
+    };
+  },
+  render() {
+    const {
+      render
+      // color,
+    } = this.stackControl;
+    const headerSlot = this.$slots.header || this.header;
+    return render((children) => {
+      return createVNode("div", {
+        "class": [
+          "v-sheet-modal",
+          {
+            "v-sheet-modal--has-active-child": this.hasActiveChild
+          }
+          // color.colorClasses.value,
+        ],
+        "tabindex": "0"
+      }, [headerSlot && createVNode("div", {
+        "class": "v-sheet-modal__header"
+      }, [headerSlot(this.stackControl)]), createVNode("div", {
+        "class": "v-sheet-modal__scroller"
+      }, [children])]);
+    });
+  }
+});
 var VSkeltonLoaderBone = defineComponent({
   name: "VSkeltonLoaderBone",
   inheritAttrs: false,
@@ -674,9 +869,9 @@ var VSkeltonLoaderBone = defineComponent({
       default: "div"
     }
   },
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     return () => {
-      const TagName = props10.tag;
+      const TagName = props11.tag;
       return createVNode(TagName, mergeProps(ctx.attrs, {
         "class": "v-skelton-loader-bone"
       }), {
@@ -725,15 +920,15 @@ var VBusyImage = defineComponent({
     error: (ev) => true
   },
   slots: slots3,
-  setup(props10, ctx) {
-    const loadStateRef = ref(props10.cover && isAvailableSrc(ctx.attrs.src) ? "loading" : "pending");
+  setup(props11, ctx) {
+    const loadStateRef = ref(props11.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": props10.cover,
+      "v-busy-image--cover": props11.cover,
       "v-busy-image--clickable": typeof ctx.attrs.onClick === "function"
     }]);
     const nodeRef = ref();
@@ -743,11 +938,11 @@ var VBusyImage = defineComponent({
       const main = {};
       const {
         cover
-      } = props10;
+      } = props11;
       let {
         width,
         height
-      } = props10;
+      } = props11;
       if (height == null && cover) {
         height = DEFAULT_HEIGHT;
       }
@@ -790,7 +985,7 @@ var VBusyImage = defineComponent({
       coverImageRef.value = void 0;
       if (isAvailableSrc(value)) {
         loadStateRef.value = "loading";
-        if (props10.cover) {
+        if (props11.cover) {
           loadImage(value).then((image) => {
             coverImageRef.value = image;
             setManualState("load");
@@ -814,7 +1009,7 @@ var VBusyImage = defineComponent({
       ctx.emit(loadType, ev);
     };
     onMounted(() => {
-      if (booted || props10.cover)
+      if (booted || props11.cover)
         return;
       const image = nodeRef.value;
       if (!image)
@@ -855,7 +1050,7 @@ var VBusyImage = defineComponent({
         "class": ["v-busy-image", classesRef.value]
       }, elAttrs, {
         "style": styles
-      }), [!props10.cover && createVNode("img", mergeProps({
+      }), [!props11.cover && createVNode("img", mergeProps({
         "key": "img",
         "ref": nodeRef,
         "class": "v-busy-image__node"
@@ -901,7 +1096,7 @@ var VGridItem = defineComponent({
     justify: void 0,
     order: void 0
   },
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const data = computed(() => {
       const classes = [];
       const attrs = {
@@ -912,7 +1107,7 @@ var VGridItem = defineComponent({
         align,
         justify,
         order
-      } = props10;
+      } = props11;
       delete attrs.size;
       delete attrs.align;
       delete attrs.justify;
@@ -927,7 +1122,7 @@ var VGridItem = defineComponent({
       };
     });
     return () => {
-      const TagName = props10.tag;
+      const TagName = props11.tag;
       const {
         classes,
         attrs
@@ -961,7 +1156,7 @@ var VGridContainer = defineComponent({
     alignContent: void 0,
     justifyContent: void 0
   },
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const data = computed(() => {
       const classes = [];
       const attrs = {
@@ -975,7 +1170,7 @@ var VGridContainer = defineComponent({
         wrap,
         alignContent,
         justifyContent
-      } = props10;
+      } = props11;
       const wrapperClass = attrs.class;
       const wrapperStyle = attrs.style;
       delete attrs.class;
@@ -1002,8 +1197,8 @@ var VGridContainer = defineComponent({
       };
     });
     return () => {
-      const WrapperTag = props10.wrapperTag;
-      const TagName = props10.tag;
+      const WrapperTag = props11.wrapperTag;
+      const TagName = props11.tag;
       const {
         wrapperClass,
         wrapperStyle,
@@ -1048,20 +1243,20 @@ var VPaper = defineComponent({
   inheritAttrs: false,
   props: createPaperProps(),
   slots: paperBaseSlots,
-  setup(props10, ctx) {
-    const tag = computed(() => props10.tag);
-    const elevation = useElevation(props10, {
+  setup(props11, ctx) {
+    const tag = computed(() => props11.tag);
+    const elevation = useElevation(props11, {
       defaultValue: 1
     });
-    const scope = useScopeColorClass(props10);
+    const scope = useScopeColorClass(props11);
     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": props10.square
+      "v-paper--square": props11.square
     }]);
-    const headerProps = computed(() => props10.headerProps);
-    const bodyProps = computed(() => props10.bodyProps);
-    const footerProps = computed(() => props10.footerProps);
+    const headerProps = computed(() => props11.headerProps);
+    const bodyProps = computed(() => props11.bodyProps);
+    const footerProps = computed(() => props11.footerProps);
     return () => {
       const TagName = tag.value;
       const header = renderSlotOrEmpty(ctx.slots, "header");
@@ -1070,7 +1265,7 @@ var VPaper = defineComponent({
         "class": ["v-paper", classes.value]
       }, ctx.attrs), {
         default: () => [createVNode("div", {
-          "class": ["v-paper__inner", props10.innerClass]
+          "class": ["v-paper__inner", props11.innerClass]
         }, [header && createVNode("div", mergeProps({
           "class": "v-paper__header"
         }, headerProps.value), [header]), createVNode("div", mergeProps({
@@ -1101,12 +1296,12 @@ var VAvatar = defineComponent({
   name: "VAvatar",
   inheritAttrs: false,
   props: createAvatarProps(),
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const vui = useVui();
     const defaults = vui.setting("buttonDefault");
     const color = useColorClasses({
-      color: () => props10.color || defaults.color,
-      variant: () => props10.variant || defaults.variant
+      color: () => props11.color || defaults.color,
+      variant: () => props11.variant || defaults.variant
     });
     const actionable = useActionable(ctx, {
       clickableClassName: () => "v-avatar--clickable",
@@ -1115,16 +1310,16 @@ var VAvatar = defineComponent({
     const classes = computed(() => {
       const {
         size
-      } = props10;
+      } = props11;
       return [{
-        "v-avatar--tile": props10.tile,
-        "v-avatar--rounded": props10.rounded
+        "v-avatar--tile": props11.tile,
+        "v-avatar--rounded": props11.rounded
       }, typeof size === "string" && `v-avatar--${size}`];
     });
     const styles = computed(() => {
       const {
         size
-      } = props10;
+      } = props11;
       if (typeof size !== "number")
         return;
       return {
@@ -1134,7 +1329,7 @@ var VAvatar = defineComponent({
     return () => {
       const {
         src
-      } = props10;
+      } = props11;
       const {
         Tag,
         attrs
@@ -1189,19 +1384,19 @@ var VChip = defineComponent({
   name: "VChip",
   inheritAttrs: false,
   props: createChipProps(),
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const vui = useVui();
     const defaults = vui.setting("buttonDefault");
     const color = useColorClasses({
-      color: () => props10.color || defaults.color,
-      variant: () => props10.variant || defaults.variant
+      color: () => props11.color || defaults.color,
+      variant: () => props11.variant || defaults.variant
     });
     const startIcon = computed(() => {
-      const _icon = resolveRawVChipIcon(props10.startIcon, "start");
+      const _icon = resolveRawVChipIcon(props11.startIcon, "start");
       return _icon && _icon();
     });
     const endIcon = computed(() => {
-      const _icon = resolveRawVChipIcon(props10.endIcon, "end");
+      const _icon = resolveRawVChipIcon(props11.endIcon, "end");
       return _icon && _icon();
     });
     const actionable = useActionable(ctx, {
@@ -1211,9 +1406,9 @@ var VChip = defineComponent({
     const classes = computed(() => {
       const {
         size
-      } = props10;
+      } = props11;
       return [{
-        "v-chip--label": props10.label
+        "v-chip--label": props11.label
       }, typeof size === "string" && `v-chip--${size}`];
     });
     return () => {
@@ -1242,8 +1437,8 @@ var VCard = defineComponent({
   name: "VCard",
   inheritAttrs: false,
   props: createCardProps(),
-  setup(props10, ctx) {
-    const _props = computed(() => props10);
+  setup(props11, ctx) {
+    const _props = computed(() => props11);
     const data = computed(() => {
       const hasLink = !!ctx.attrs.href || !!ctx.attrs.to;
       const attrs = {
@@ -1252,7 +1447,7 @@ var VCard = defineComponent({
         class: ["v-card", ctx.attrs.class, typeof ctx.attrs.onClick === "function" && "clickable"],
         tag: hasLink ? VAction : "div"
       };
-      if (props10.disabled) {
+      if (props11.disabled) {
         attrs.disabled = "disabled";
         delete attrs.onClick;
         delete attrs.href;
@@ -1321,38 +1516,38 @@ var VButton = defineComponent({
   name: "VButton",
   inheritAttrs: false,
   props: vueButtonProps,
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const vui = useVui();
-    const control = useControl(props10);
+    const control = useControl(props11);
     const defaults = vui.setting("buttonDefault");
     const icon = computed(() => {
-      const _icon = resolveRawVButtonIcon(props10.icon);
+      const _icon = resolveRawVButtonIcon(props11.icon);
       return _icon && _icon();
     });
     const startIcon = computed(() => {
-      const _icon = resolveRawVButtonIcon(props10.startIcon, "start");
+      const _icon = resolveRawVButtonIcon(props11.startIcon, "start");
       return _icon && _icon();
     });
     const endIcon = computed(() => {
-      const _icon = resolveRawVButtonIcon(props10.endIcon, "end");
+      const _icon = resolveRawVButtonIcon(props11.endIcon, "end");
       return _icon && _icon();
     });
     const color = useColorClasses({
-      color: () => props10.color || defaults.color,
-      variant: () => props10.variant || (icon.value ? vui.setting("plainVariant") : defaults.variant)
+      color: () => props11.color || defaults.color,
+      variant: () => props11.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(() => props10.loading);
+    const isLoading = computed(() => props11.loading);
     const spacer = computed(() => {
-      const _spacer = props10.spacer;
+      const _spacer = props11.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-${props10.align}`, {
+    const classes = computed(() => [color.colorClasses.value, spacer.value ? `v-button--spacer-${spacer.value}` : void 0, `v-button--${control.size.value}`, `v-button--align-${props11.align}`, {
       "v-button--loading": isLoading.value,
       "v-button--icon": !!icon.value,
-      "v-button--rounded": props10.rounded,
+      "v-button--rounded": props11.rounded,
       "v-button--plain": isPlain.value
     }]);
     return () => {
@@ -1377,7 +1572,7 @@ var VButtonGroup = defineComponent({
     ...createControlProps(),
     disabled: Boolean
   },
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     return () => {
       let hasIcon = false;
       let buttonLength = 0;
@@ -1409,7 +1604,7 @@ var VButtonGroup = defineComponent({
           const hasRight = buttonIndex < buttonLength;
           const childProps = child.node.props;
           return cloneVNode(child.node, {
-            ...props10,
+            ...props11,
             ...childProps,
             rouded: false,
             class: ["v-button-group__item", {
@@ -1477,7 +1672,7 @@ var VPagination = defineComponent({
     change: (page) => true,
     "update:modelValue": (page) => true
   },
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const vui = useVui();
     const elRef = ref(null);
     const router = useRouter();
@@ -1491,15 +1686,15 @@ var VPagination = defineComponent({
       return Math.floor(containerWidth.value / _itemSize);
     });
     const colorScope = useScopeColorClass({
-      color: () => props10.color || vui.setting("primaryScope")
+      color: () => props11.color || vui.setting("primaryScope")
     });
-    const computedLength = computed(() => resolveNumberish(props10.length));
-    const computedTotalVisible = computed(() => resolveNumberish(props10.totalVisible));
+    const computedLength = computed(() => resolveNumberish(props11.length));
+    const computedTotalVisible = computed(() => resolveNumberish(props11.totalVisible));
     const computedNumbersLength = computed(() => capacityLength.value - 2 - 2);
     const computedPage = computed(() => {
       const {
         routeQuery
-      } = props10;
+      } = props11;
       if (routeQuery) {
         return vui.location.getQuery(routeQuery, Number, 1);
       }
@@ -1543,14 +1738,14 @@ var VPagination = defineComponent({
     const isTransitioning = computed(() => {
       const {
         routeQuery
-      } = props10;
+      } = props11;
       return vui.location.isQueryOnlyTransitioning(routeQuery);
     });
-    const isDisabled = computed(() => props10.disabled || isTransitioning.value);
+    const isDisabled = computed(() => props11.disabled || isTransitioning.value);
     const classes = computed(() => [{
       "v-pagination--disabled": isDisabled.value,
-      "v-pagination--dense": props10.dense,
-      [`v-pagination--${props10.align}`]: true
+      "v-pagination--dense": props11.dense,
+      [`v-pagination--${props11.align}`]: true
     }, colorScope.value.className]);
     async function setPage(value) {
       if (isDisabled.value)
@@ -1558,7 +1753,7 @@ var VPagination = defineComponent({
       const {
         beforeChange,
         routeQuery
-      } = props10;
+      } = props11;
       const newPage = resolveNumberish(value);
       if (computedPage.value === newPage)
         return;
@@ -1651,7 +1846,7 @@ var VPagination = defineComponent({
       const key = `${source}-${index}`;
       const {
         routeQuery
-      } = props10;
+      } = props11;
       if (page !== void 0 && routeQuery) {
         const to = createRoutableLocationByPage(page, routeQuery);
         return createVNode(RouterLink, {
@@ -1671,7 +1866,7 @@ var VPagination = defineComponent({
         }, [children]);
       }
     }
-    watch(() => props10.modelValue, (modelValue) => {
+    watch(() => props11.modelValue, (modelValue) => {
       internalValue.value = resolveNumberish(modelValue);
     }, {
       immediate: true
@@ -1726,16 +1921,16 @@ var VListTile = defineComponent({
   emits: {
     ...listTileEmits
   },
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const vui = useVui();
     const startIcon = computed(() => {
-      let icon = resolveRawIconProp(false, props10.startIcon);
-      if (!icon && props10.startIconEmptySpace) {
+      let icon = resolveRawIconProp(false, props11.startIcon);
+      if (!icon && props11.startIconEmptySpace) {
         icon = resolveRawIconProp(false, "$empty");
       }
       return icon;
     });
-    const endIcon = computed(() => resolveRawIconProp(false, props10.endIcon));
+    const endIcon = computed(() => resolveRawIconProp(false, props11.endIcon));
     const hasTo = computed(() => !!ctx.attrs.to);
     const link = vui.useLink({
       to: ctx.attrs.to || ""
@@ -1743,9 +1938,9 @@ var VListTile = defineComponent({
     const isActive = computed(() => {
       if (!hasTo.value)
         return false;
-      return props10.exactMatch ? link.isExactActive.value : link.isActive.value;
+      return props11.exactMatch ? link.isExactActive.value : link.isActive.value;
     });
-    const color = useScopeColorClass(props10);
+    const color = useScopeColorClass(props11);
     const classes = computed(() => {
       const _color = color.value;
       const hasColor = !!_color.value;
@@ -1784,11 +1979,11 @@ var VDrawerLayout = defineComponent({
     ...createPaperBaseProps()
   },
   slots: paperBaseSlots,
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     return () => {
       const paperProps = computed(() => ({
-        color: props10.color,
-        tag: props10.tag
+        color: props11.color,
+        tag: props11.tag
       }));
       return createVNode(VPaper, mergeProps({
         "class": "v-drawer-layout",
@@ -1827,16 +2022,16 @@ var VHero = defineComponent({
     ...slots4()
   },
   slots: slots4,
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     return () => {
-      const TagName = props10.tag;
-      const HTagName = props10.hTag;
+      const TagName = props11.tag;
+      const HTagName = props11.hTag;
       const adornment = ctx.slots.adornment?.();
       return createVNode(VAppContainer, {
         "pulled": true
       }, {
         default: () => [createVNode(TagName, {
-          "class": ["v-hero", toScopeColorClass(props10.color)]
+          "class": ["v-hero", toScopeColorClass(props11.color)]
         }, {
           default: () => [createVNode(HTagName, {
             "class": "v-hero__title"
@@ -1871,25 +2066,25 @@ function createNavigationItemProps() {
 }
 function resolveNavigationItemInput(input) {
   let label = input.label;
-  const props10 = {
+  const props11 = {
     ...input
   };
   if (typeof label === "function") {
     label = label();
   }
-  delete props10.label;
+  delete props11.label;
   return {
     label,
-    props: props10
+    props: props11
   };
 }
 function renderNavigationItemInput(input, extraProps) {
   const {
     label,
-    props: props10
+    props: props11
   } = resolveNavigationItemInput(input);
   return createVNode(VNavigationItem, {
-    ...props10,
+    ...props11,
     ...extraProps
   }, _isSlot2(label) ? label : {
     default: () => [label]
@@ -1909,18 +2104,18 @@ var VNavigationItem = defineComponent({
   emits: {
     ...listTileEmits
   },
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const vui = useVui();
     const opened = ref(false);
     const children = computed(() => {
-      const c = props10.children;
+      const c = props11.children;
       return c && c.length ? c : void 0;
     });
     const to = computed(() => ctx.attrs.to);
     const match = computed(() => {
       const {
         match: match2
-      } = props10;
+      } = props11;
       const {
         to: to2
       } = ctx.attrs;
@@ -1936,7 +2131,7 @@ var VNavigationItem = defineComponent({
     });
     const classes = computed(() => [{
       "v-navigation-item--opened": opened.value,
-      [`v-navigation-item--depth-${props10.depth}`]: props10.depth > 0
+      [`v-navigation-item--depth-${props11.depth}`]: props11.depth > 0
     }]);
     const route = useRoute();
     watch(() => route.path, (newPath) => {
@@ -1958,7 +2153,7 @@ var VNavigationItem = defineComponent({
       const c = children.value;
       let {
         endIcon
-      } = props10;
+      } = props11;
       if (c && !endIcon) {
         endIcon = vui.icon("navigationExpand");
         if (typeof endIcon === "string") {
@@ -1972,7 +2167,7 @@ var VNavigationItem = defineComponent({
         }
       }
       const __props = {
-        ...props10,
+        ...props11,
         endIcon
       };
       delete __props.children;
@@ -2020,11 +2215,11 @@ var VNavigationItem = defineComponent({
         default: () => [withDirectives(createVNode("div", {
           "class": "v-navigation-item__expand"
         }, [_children.map((child) => renderNavigationItemInput({
-          color: props10.color,
+          color: props11.color,
           ...child
         }, {
           startIconEmptySpace: _props.value.startIconEmptySpace,
-          depth: props10.nested ? props10.depth + 1 : props10.depth
+          depth: props11.nested ? props11.depth + 1 : props11.depth
           // onClick,
           // onChangeActive,
         }))]), [[vShow, opened.value]])]
@@ -2049,13 +2244,13 @@ function createNavigationProps() {
 var VNavigation = defineComponent({
   name: "VNavigation",
   props: createNavigationProps(),
-  setup(props10, ctx) {
-    const items = computed(() => props10.items);
-    const color = useScopeColorClass(props10);
+  setup(props11, ctx) {
+    const items = computed(() => props11.items);
+    const color = useScopeColorClass(props11);
     const classes = computed(() => [color.value.className]);
-    const startIconEmptySpace = computed(() => props10.startIconEmptySpace);
+    const startIconEmptySpace = computed(() => props11.startIconEmptySpace);
     const caption = computed(() => {
-      const c = props10.caption;
+      const c = props11.caption;
       return typeof c === "function" ? c() : c;
     });
     const itemsRef = ref([]);
@@ -2128,40 +2323,40 @@ var VControlField = defineComponent({
   emits: {
     click: (ev) => true
   },
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const parentNode = useParentFormNode();
-    const control = useControl(props10);
-    const inputBox = useControlField(props10);
+    const control = useControl(props11);
+    const inputBox = useControlField(props11);
     const hostElRef = ref(null);
     const disabled = computed(() => !!parentNode && parentNode.isDisabled);
     const invalid = computed(() => !!parentNode && parentNode.invalid);
-    const autoHeight = computed(() => props10.autoHeight);
+    const autoHeight = computed(() => props11.autoHeight);
     const readonly = computed(() => !!parentNode && parentNode.isReadonly);
     const colorProvider = useVuiColorProvider();
     const classes = computed(() => {
       const classes2 = ["v-control-field", `v-control-field--${inputBox.variant.value}`, {
         "v-control-field--disabled": disabled.value,
-        "v-control-field--invalid": invalid.value || props10.error,
+        "v-control-field--invalid": invalid.value || props11.error,
         "v-control-field--readonly": readonly.value,
-        "v-control-field--focused": props10.focused,
+        "v-control-field--focused": props11.focused,
         "v-control-field--auto-height": autoHeight.value
-      }, control.classes.value, colorProvider.className(props10.error ? "error" : invalid.value && !readonly.value ? "error" : "primary")];
+      }, control.classes.value, colorProvider.className(props11.error ? "error" : invalid.value && !readonly.value ? "error" : "primary")];
       return classes2;
     });
     const resolvedSlots = computed(() => {
       const slots13 = {};
       ADORNMENT_POSITIONS.forEach((position) => {
         const key = `${position}Adornment`;
-        slots13[position] = resolveVNodeChildOrSlots(props10[key], ctx.slots[key]);
+        slots13[position] = resolveVNodeChildOrSlots(props11[key], ctx.slots[key]);
       });
       return slots13;
     });
     const renderAdornment = (position) => {
       let child;
-      if (position === "end" && props10.loading) {
+      if (position === "end" && props11.loading) {
         child = createVNode(loading_exports.VProgressCircular, {
           "indeterminate": true,
-          "size": CONTROL_LOADING_SPINNER_SIZES[props10.size || "md"]
+          "size": CONTROL_LOADING_SPINNER_SIZES[props11.size || "md"]
         }, null);
       } else {
         child = resolvedSlots.value[position]?.();
@@ -2172,25 +2367,16 @@ var VControlField = defineComponent({
         "class": ["v-control-field__adornment", `v-control-field__adornment--${position}`]
       }, [child]);
     };
-    const handleClick = (ev) => {
-      ctx.emit("click", ev);
-    };
-    return {
-      classes,
-      renderAdornment,
-      hostElRef: () => hostElRef,
-      handleClick
-      // computedTabindex,
+    const handleClick = (ev) => ctx.emit("click", ev);
+    return () => {
+      return createVNode("div", {
+        "class": classes.value,
+        "onClick": handleClick,
+        "ref": hostElRef
+      }, [renderAdornment("start"), createVNode("div", {
+        "class": "v-control-field__body"
+      }, [ctx.slots.default?.()]), renderAdornment("end")]);
     };
-  },
-  render() {
-    return createVNode("div", {
-      "class": this.classes,
-      "onClick": this.handleClick,
-      "ref": this.hostElRef()
-    }, [this.renderAdornment("start"), createVNode("div", {
-      "class": "v-control-field__body"
-    }, [this.$slots.default?.()]), this.renderAdornment("end")]);
   }
 });
 var VTextCounter = defineComponent({
@@ -2223,12 +2409,12 @@ var VCheckable = defineComponent({
     // autoWidth: Boolean,
   },
   slots: slots6,
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const colorProvider = useVuiColorProvider();
-    const invalid = computed(() => props10.invalid);
-    const disabled = computed(() => props10.disabled);
-    const readonly = computed(() => props10.readonly);
-    const checked = computed(() => props10.checked);
+    const invalid = computed(() => props11.invalid);
+    const disabled = computed(() => props11.disabled);
+    const readonly = computed(() => props11.readonly);
+    const checked = computed(() => props11.checked);
     const classes = computed(() => {
       return [{
         "v-checkable--invalid": invalid.value,
@@ -2253,24 +2439,24 @@ var VCheckable = defineComponent({
 
 // src/components/VCheckbox/VCheckbox.tsx
 var {
-  props: props2,
-  emits: emits2
+  props: props3,
+  emits: emits3
 } = createFormSelectorItemSettings();
 var VCheckbox = defineComponent({
   name: "VCheckbox",
   props: {
-    ...props2,
+    ...props3,
     ...createControlProps(),
     indeterminate: Boolean
   },
-  emits: emits2,
-  setup(props10, ctx) {
-    const nodeControl = useFormSelectorItemControl(props10, ctx, {
+  emits: emits3,
+  setup(props11, ctx) {
+    const nodeControl = useFormSelectorItemControl(props11, ctx, {
       nodeType: VUI_CHECKBOX_SYMBOL,
       parentNodeType: VUI_CHECKBOX_GROUP_SYMBOL
     });
-    const control = useControl(props10);
-    const isIndeterminate = computed(() => props10.indeterminate);
+    const control = useControl(props11);
+    const isIndeterminate = computed(() => props11.indeterminate);
     return {
       ...nodeControl.expose(),
       ...control,
@@ -2318,22 +2504,22 @@ var VCheckboxGroup = defineFormSelectorComponent({
   })
 });
 var {
-  props: props3,
-  emits: emits3
+  props: props4,
+  emits: emits4
 } = createFormSelectorItemSettings();
 var VRadio = defineComponent({
   name: "VRadio",
   props: {
-    ...props3,
+    ...props4,
     ...createControlProps()
   },
-  emits: emits3,
-  setup(props10, ctx) {
-    const nodeControl = useFormSelectorItemControl(props10, ctx, {
+  emits: emits4,
+  setup(props11, ctx) {
+    const nodeControl = useFormSelectorItemControl(props11, ctx, {
       nodeType: VUI_RADIO_SYMBOL,
       parentNodeType: VUI_RADIO_GROUP_SYMBOL
     });
-    const control = useControl(props10);
+    const control = useControl(props11);
     return {
       ...nodeControl.expose(),
       ...control
@@ -2377,22 +2563,22 @@ var VRadioGroup = defineFormSelectorComponent({
   })
 });
 var {
-  props: props4,
-  emits: emits4
+  props: props5,
+  emits: emits5
 } = createFormSelectorItemSettings();
 var VSwitch = defineComponent({
   name: "VSwitch",
   props: {
-    ...props4,
+    ...props5,
     ...createControlProps()
   },
-  emits: emits4,
-  setup(props10, ctx) {
-    const nodeControl = useFormSelectorItemControl(props10, ctx, {
+  emits: emits5,
+  setup(props11, ctx) {
+    const nodeControl = useFormSelectorItemControl(props11, ctx, {
       nodeType: VUI_SWITCH_SYMBOL,
       parentNodeType: VUI_SWITCH_GROUP_SYMBOL
     });
-    const control = useControl(props10);
+    const control = useControl(props11);
     if (typeof window !== "undefined") {
       window.yy = {};
       window.yy[String(Date.now())] = nodeControl;
@@ -2409,8 +2595,7 @@ var VSwitch = defineComponent({
     return createVNode(VCheckable, {
       "class": ["v-switch", {
         "v-switch--selected": selectorItemControl.selected,
-        "v-switch--disabled": selectorItemControl.isDisabled,
-        xxxxx: selectorItemControl.booted
+        "v-switch--disabled": selectorItemControl.isDisabled
       }, this.classes],
       "checked": this.selected,
       "invalid": this.invalid,
@@ -2445,22 +2630,22 @@ var VSwitchGroup = defineFormSelectorComponent({
   })
 });
 var {
-  props: props5,
-  emits: emits5
+  props: props6,
+  emits: emits6
 } = createFormSelectorItemSettings();
 var VOption = defineComponent({
   name: "VOption",
   props: {
-    ...props5,
+    ...props6,
     ...createControlProps()
   },
-  emits: emits5,
-  setup(props10, ctx) {
-    const nodeControl = useFormSelectorItemControl(props10, ctx, {
+  emits: emits6,
+  setup(props11, ctx) {
+    const nodeControl = useFormSelectorItemControl(props11, ctx, {
       nodeType: VUI_OPTION_SYMBOL,
       parentNodeType: VUI_SELECT_SYMBOL
     });
-    const control = useControl(props10);
+    const control = useControl(props11);
     const classes = computed(() => {
       return ["v-option", {
         "v-option--selected": nodeControl.selected,
@@ -2500,12 +2685,12 @@ var VOptionGroup = defineComponent({
     ...slots7()
   },
   slots: slots7,
-  setup(props10, ctx) {
-    const groupControl = useFormSelectorItemGroupControl(props10, ctx, {
+  setup(props11, ctx) {
+    const groupControl = useFormSelectorItemGroupControl(props11, ctx, {
       parentNodeType: VUI_SELECT_SYMBOL
     });
     const labelSlot = computed(() => {
-      return resolveVNodeChildOrSlots(props10.label, ctx.slots.label);
+      return resolveVNodeChildOrSlots(props11.label, ctx.slots.label);
     });
     const classes = computed(() => {
       return ["v-option-group", {
@@ -2539,14 +2724,14 @@ var ARROW_KEY_TYPES = useKeyboard.Key(["ArrowUp", "ArrowDown"]);
 var CHOICE_KEY_TYPES = useKeyboard.Key(["Enter", " "]);
 var KEYBORD_EVENT_TYPES = useKeyboard.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
 var {
-  props: props6,
-  emits: emits6
+  props: props7,
+  emits: emits7
 } = createFormSelectorSettings();
 var slots8 = defineSlots();
 var VSelect = defineComponent({
   name: "VSelect",
   props: {
-    ...props6,
+    ...props7,
     ...createFormControlProps(),
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
@@ -2560,8 +2745,8 @@ var VSelect = defineComponent({
     closeOnNavigation: Boolean
   },
   slots: slots8,
-  emits: emits6,
-  setup(props10, ctx) {
+  emits: emits7,
+  setup(props11, ctx) {
     const menuRef = ref(null);
     const menuOpened = ref(false);
     const showMenu = () => {
@@ -2570,27 +2755,27 @@ var VSelect = defineComponent({
     const closeMenu = () => {
       menuOpened.value = false;
     };
-    const inputControl = useFormSelectorControl(props10, ctx, {
+    const inputControl = useFormSelectorControl(props11, ctx, {
       nodeType: VUI_SELECT_SYMBOL,
       onSelectItem: (item) => {
         closeMenu();
       }
     });
-    const control = useControl(props10);
-    useControlField(props10);
+    const control = useControl(props11);
+    useControlField(props11);
     const vui = useVui();
     const iconName = vui.icon("menuDown");
     const fieldRef = ref(null);
     const loadingMessageRef = computed(() => {
-      const slot = resolveVNodeChildOrSlots(props10.loadingMessage, vui.setting("loadingMessage"), "Loading...");
+      const slot = resolveVNodeChildOrSlots(props11.loadingMessage, vui.setting("loadingMessage"), "Loading...");
       return slot && slot(vui);
     });
     const failedToLoadItemsMessageRef = computed(() => {
-      const slot = resolveVNodeChildOrSlots(props10.failedToLoadItemsMessage, vui.setting("failedToLoadDataMessage"), "Failed to load data.");
+      const slot = resolveVNodeChildOrSlots(props11.failedToLoadItemsMessage, vui.setting("failedToLoadDataMessage"), "Failed to load data.");
       return slot && slot(vui);
     });
     const focus = (opts) => {
-      fieldRef.value && fieldRef.value.focus(opts);
+      fieldRef.value?.focus?.(opts);
     };
     const renderSelections = (selectedItems) => {
       const selectionSlot = ctx.slots.selection;
@@ -2614,28 +2799,28 @@ var VSelect = defineComponent({
           }) : item.renderDefaultSlot();
           children.push(child);
         });
-      } else if (props10.placeholder != null) {
+      } else if (props11.placeholder != null) {
         children.push(createVNode("span", {
           "class": "v-select__placeholder"
-        }, [props10.placeholder]));
+        }, [props11.placeholder]));
       }
       return children;
     };
     const clearKeyFocused = () => {
-      const menu = menuRef.value;
+      const menu = menuRef.value?.menu;
       if (!menu)
         return;
-      const bodyEl = menu.stackMenuControl.bodyRef.value;
+      const bodyEl = menu.bodyRef.value;
       if (!bodyEl)
         return;
       const els = Array.from(bodyEl.querySelectorAll(".v-option"));
       els.forEach((el) => el.classList.remove("v-option--key-focused"));
     };
     const getItemElements = () => {
-      const menu = menuRef.value;
+      const menu = menuRef.value?.menu;
       if (!menu)
         return;
-      const bodyEl = menu.stackMenuControl.bodyRef.value;
+      const bodyEl = menu.bodyRef.value;
       if (!bodyEl)
         return;
       const els = Array.from(bodyEl.querySelectorAll(".v-option")).filter((el) => {
@@ -2877,13 +3062,13 @@ var VSelect = defineComponent({
   }
 });
 var {
-  props: props7,
-  emits: emits7
+  props: props8,
+  emits: emits8
 } = createTextInputSettings();
 var slots9 = defineSlots();
 function createTextFieldProps() {
   return {
-    ...props7,
+    ...props8,
     ...createFormControlProps(),
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
@@ -2894,14 +3079,14 @@ function createTextFieldProps() {
 var VTextField = defineComponent({
   name: "VTextField",
   props: createTextFieldProps(),
-  emits: emits7,
+  emits: emits8,
   slots: slots9,
-  setup(props10, ctx) {
-    const inputControl = useTextInputControl(props10, ctx, {
+  setup(props11, ctx) {
+    const inputControl = useTextInputControl(props11, ctx, {
       nodeType: VUI_TEXT_FIELD_SYMBOL
     });
-    const control = useControl(props10);
-    useControlField(props10);
+    const control = useControl(props11);
+    useControlField(props11);
     return {
       ...inputControl.expose(),
       ...control
@@ -2958,7 +3143,7 @@ var VNumberField = defineComponent({
     "update:modelValue": (value) => true,
     change: (value) => true
   },
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const toString = (value) => {
       if (value == null)
         return "";
@@ -2976,7 +3161,7 @@ var VNumberField = defineComponent({
     return () => {
       return createVNode(VTextField, mergeProps(ctx.attrs, {
         "type": "number",
-        "modelValue": toString(props10.modelValue),
+        "modelValue": toString(props11.modelValue),
         "onUpdate:modelValue": (value) => {
           ctx.emit("update:modelValue", toNumber(value));
         },
@@ -2988,29 +3173,29 @@ var VNumberField = defineComponent({
   }
 });
 var {
-  props: props8,
-  emits: emits8
+  props: props9,
+  emits: emits9
 } = createTextareaSettings();
 var slots10 = defineSlots();
 var VTextarea = defineComponent({
   name: "VTextarea",
   props: {
-    ...props8,
+    ...props9,
     ...createFormControlProps(),
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
     ...createControlProps(),
     ...slots10()
   },
-  emits: emits8,
-  setup(props10, ctx) {
+  emits: emits9,
+  setup(props11, ctx) {
     const vui = useVui();
-    const inputControl = useTextareaControl(props10, ctx, {
+    const inputControl = useTextareaControl(props11, ctx, {
       nodeType: VUI_TEXTAREA_SYMBOL,
       defaultRows: vui.textareaRows
     });
-    const control = useControl(props10);
-    useControlField(props10);
+    const control = useControl(props11);
+    useControlField(props11);
     return {
       ...inputControl.expose(),
       ...control
@@ -3055,15 +3240,15 @@ var VTextarea = defineComponent({
   }
 });
 var {
-  props: props9,
-  emits: emits9
+  props: props10,
+  emits: emits10
 } = createFormSettings({
   nodeType: VUI_FORM_SYMBOL
 });
 var formSlots = defineSlots();
 function createVFormProps() {
   return {
-    ...props9,
+    ...props10,
     ...createControlProps(),
     ...formSlots()
     // disableAutoScroll: Boolean,
@@ -3072,11 +3257,11 @@ function createVFormProps() {
 var VForm = defineComponent({
   name: "VForm",
   props: createVFormProps(),
-  emits: emits9,
+  emits: emits10,
   slots: formSlots,
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const vui = useVui();
-    const nodeControl = useForm(props10, ctx, {
+    const nodeControl = useForm(props11, ctx, {
       nodeType: VUI_FORM_SYMBOL,
       scrollToElement: (el) => {
         const scroller = getDocumentScroller();
@@ -3095,7 +3280,7 @@ var VForm = defineComponent({
         "v-form--sending": nodeControl.sending
       }];
     });
-    useControl(props10);
+    useControl(props11);
     return {
       ...nodeControl.expose(),
       classes
@@ -3131,13 +3316,13 @@ var VTab = defineComponent({
   emits: {
     click: (ev) => true
   },
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const classesRef = computed(() => ({
-      "v-tab--active": props10.active
+      "v-tab--active": props11.active
     }));
     const exposeValues = {
-      value: props10.value,
-      active: props10.active
+      value: props11.value,
+      active: props11.active
     };
     ctx.expose(exposeValues);
     return () => {
@@ -3146,7 +3331,7 @@ var VTab = defineComponent({
         value,
         icon,
         active
-      } = props10;
+      } = props11;
       const classes = ["v-tab", classesRef.value];
       const children = createVNode("span", {
         "class": "v-tab__content"
@@ -3215,7 +3400,7 @@ var VTabs = defineComponent({
     change: (newValue) => true
   },
   slots: slots11,
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const vui = useVui();
     const internalValueRef = ref(null);
     const scrollerRef = useVScrollerRef();
@@ -3233,15 +3418,15 @@ var VTabs = defineComponent({
       }
     });
     const colorScope = useScopeColorClass({
-      color: () => props10.color || vui.setting("tabDefault").color
+      color: () => props11.color || vui.setting("tabDefault").color
     });
     const classes = computed(() => [colorScope.value.className]);
     const computedItemsRef = computed(() => {
       const current = currentRef.value;
       const {
         router
-      } = props10;
-      return props10.items.map((item) => {
+      } = props11;
+      return props11.items.map((item) => {
         const {
           value
         } = item;
@@ -3266,9 +3451,9 @@ var VTabs = defineComponent({
       tabRefs.value.push(ref10);
     };
     function setupInternalValue(routable) {
-      let value = props10.modelValue;
+      let value = props11.modelValue;
       if (value == null || value === "") {
-        const firstItem = props10.items[0];
+        const firstItem = props11.items[0];
         if (!firstItem)
           return;
         value = firstItem.value;
@@ -3278,7 +3463,7 @@ var VTabs = defineComponent({
         if (routable) {
           const {
             router
-          } = props10;
+          } = props11;
           if (!router)
             return;
           const hit = computedItemsRef.value.find((item) => item.value === value);
@@ -3296,7 +3481,7 @@ var VTabs = defineComponent({
           if (route.fullPath === vui.location.currentRoute.fullPath)
             return;
           vui.router[to2.replace ? "replace" : "push"](to2);
-        } else if (!props10.router && props10.modelValue !== value) {
+        } else if (!props11.router && props11.modelValue !== value) {
           ctx.emit("update:modelValue", value);
           ctx.emit("change", value);
         }
@@ -3311,7 +3496,7 @@ var VTabs = defineComponent({
       }
       const {
         onBeforeChange
-      } = props10;
+      } = props11;
       if (onBeforeChange) {
         let result = onBeforeChange(value, currentRef.value);
         if (isPromise(result)) {
@@ -3348,7 +3533,7 @@ var VTabs = defineComponent({
         return;
       const {
         autoScrollOffset
-      } = props10;
+      } = props11;
       const tabLeft = $tab.offsetLeft;
       const tabWidth = $tab.offsetWidth;
       const tabRight = tabLeft + tabWidth;
@@ -3378,17 +3563,17 @@ var VTabs = defineComponent({
         });
       }
     }
-    watch(() => props10.modelValue, () => setupInternalValue(true));
-    watch(() => props10.items, () => setupInternalValue(), {
+    watch(() => props11.modelValue, () => setupInternalValue(true));
+    watch(() => props11.items, () => setupInternalValue(), {
       deep: true
     });
     watch(() => internalValueRef.value, (newValue) => {
       scrollToTab(newValue);
     });
     vui.location.watchRoute((route) => {
-      if (!props10.router)
+      if (!props11.router)
         return;
-      const path = props10.withQuery ? route.fullPath : route.path;
+      const path = props11.withQuery ? route.fullPath : route.path;
       const hit = computedItemsRef.value.find(({
         location
       }) => {
@@ -3472,10 +3657,10 @@ var VBreadcrumbs = defineComponent({
     },
     divider: [String, Function]
   },
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const vui = useVui();
     const computedItemsRef = computed(() => {
-      const items = props10.items.map((rawItem) => {
+      const items = props11.items.map((rawItem) => {
         return typeof rawItem === "string" ? {
           text: rawItem
         } : rawItem;
@@ -3505,7 +3690,7 @@ var VBreadcrumbs = defineComponent({
       if (lengthRef.value < 1)
         return;
       let dividerSlot;
-      const propDivider = props10.divider;
+      const propDivider = props11.divider;
       if (propDivider) {
         dividerSlot = typeof propDivider === "function" ? propDivider : () => propDivider;
       } else {
@@ -3577,12 +3762,12 @@ var VContentSwitcher = defineComponent({
   emits: {
     "update:modelValue": (modelValue) => true
   },
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const internalValueRef = ref("");
     const transitionRef = ref("");
     const elRef = ref(null);
     const anchorRef = ref(null);
-    const computedOrderRef = computed(() => props10.order.map((row) => {
+    const computedOrderRef = computed(() => props11.order.map((row) => {
       return typeof row === "string" ? row : row.value;
     }));
     const currentRef = computed({
@@ -3597,7 +3782,7 @@ var VContentSwitcher = defineComponent({
     const autotopSettingsRef = computed(() => {
       let {
         autotop: settings
-      } = props10;
+      } = props11;
       if (settings === true)
         settings = {};
       if (!settings)
@@ -3622,7 +3807,7 @@ var VContentSwitcher = defineComponent({
       }
       return el;
     }
-    watch(() => props10.modelValue, (value, beforeValue) => {
+    watch(() => props11.modelValue, (value, beforeValue) => {
       if (value == null)
         return;
       internalValueRef.value = value;
@@ -3644,7 +3829,7 @@ var VContentSwitcher = defineComponent({
     });
     watch(currentRef, () => {
       const autotopSettings = autotopSettingsRef.value;
-      if (autotopSettings && props10.modelValue != null) {
+      if (autotopSettings && props11.modelValue != null) {
         seeTop(autotopSettings);
       }
     });
@@ -3803,27 +3988,27 @@ var VDataTable = defineComponent({
   emits: {
     input: (selecteds) => true
   },
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const vui = useVui();
     const bootedRef = ref(false);
     const footerHeightRef = ref(0);
-    const internalValues = ref(props10.modelValue.slice());
+    const internalValues = ref(props11.modelValue.slice());
     const rowSettings = computed(() => {
       const {
         rowSettings: rowSettings2
-      } = props10;
+      } = props11;
       if (!rowSettings2)
         return () => ({});
       return typeof rowSettings2 === "function" ? rowSettings2 : () => rowSettings2;
     });
     const containedVariant = vui.setting("containedVariant");
-    const sortedItemKeysRef = computed(() => props10.items.map((item) => item[props10.itemKey]));
-    const isEmptyRef = computed(() => props10.items.length === 0);
+    const sortedItemKeysRef = computed(() => props11.items.map((item) => item[props11.itemKey]));
+    const isEmptyRef = computed(() => props11.items.length === 0);
     const headersRef = computed(() => {
       const {
         headers,
         selectable
-      } = props10;
+      } = props11;
       const ret = [];
       if (selectable) {
         ret.push({
@@ -3838,7 +4023,7 @@ var VDataTable = defineComponent({
     const searchQueryValues = computed(() => {
       let {
         searchQuery
-      } = props10;
+      } = props11;
       if (!searchQuery) {
         return [];
       }
@@ -3861,14 +4046,14 @@ var VDataTable = defineComponent({
     const emptyMessage = computed(() => {
       let message;
       if (searchQueryValues.value.length) {
-        message = props10.noResultsMessage || vui.setting("noResultsMessage") || "No search results found.";
+        message = props11.noResultsMessage || vui.setting("noResultsMessage") || "No search results found.";
       } else {
-        message = props10.noDataMessage || vui.setting("noDataMessage") || "No data was available.";
+        message = props11.noDataMessage || vui.setting("noDataMessage") || "No data was available.";
       }
       return typeof message === "function" ? message(vui) : message;
     });
     const classesRef = computed(() => [{
-      "v-data-table--fixed-header": props10.fixedHeader
+      "v-data-table--fixed-header": props11.fixedHeader
     }]);
     const layout = VueAppLayout.use();
     const bodyInnerStylesRef = computed(() => {
@@ -3877,7 +4062,7 @@ var VDataTable = defineComponent({
       const {
         fixedHeader,
         maxHeight
-      } = props10;
+      } = props11;
       const footerHeight = footerHeightRef.value;
       const _maxHeight = maxHeight || (fixedHeader ? "100%" : maxHeight);
       if (!_maxHeight) {
@@ -3887,28 +4072,28 @@ var VDataTable = defineComponent({
         maxHeight: layout.calicurateViewHeight(_maxHeight, -footerHeight - 100, 200)
       };
     });
-    const defaultOrderQueryRef = computed(() => props10.defaultOrder === props10.ascQueryValue ? props10.ascQueryValue : props10.descQueryValue);
+    const defaultOrderQueryRef = computed(() => props11.defaultOrder === props11.ascQueryValue ? props11.ascQueryValue : props11.descQueryValue);
     const isTransitioningRef = computed(() => {
-      return vui.location.isQueryOnlyTransitioning([props10.pageQuery, props10.sortQuery, props10.orderQuery, props10.limitQuery]);
+      return vui.location.isQueryOnlyTransitioning([props11.pageQuery, props11.sortQuery, props11.orderQuery, props11.limitQuery]);
     });
-    const pageRef = computed(() => vui.location.getQuery(props10.pageQuery, Number, 1));
-    const needShowHeaderControlRef = computed(() => props10.items.length > props10.contorolThreshold);
+    const pageRef = computed(() => vui.location.getQuery(props11.pageQuery, Number, 1));
+    const needShowHeaderControlRef = computed(() => props11.items.length > props11.contorolThreshold);
     const sortByRef = computed({
       get: () => {
-        return vui.location.getQuery(props10.sortQuery);
+        return vui.location.getQuery(props11.sortQuery);
       },
       set(value) {
         vui.location.pushQuery({
-          [props10.sortQuery]: value || null,
-          [props10.pageQuery]: 1
+          [props11.sortQuery]: value || null,
+          [props11.pageQuery]: 1
         });
       }
     });
-    const ordersRef = computed(() => [props10.ascQueryValue, props10.descQueryValue]);
-    const usePaigingRef = computed(() => props10.limits.length > 0);
+    const ordersRef = computed(() => [props11.ascQueryValue, props11.descQueryValue]);
+    const usePaigingRef = computed(() => props11.limits.length > 0);
     const orderByRef = computed({
       get: () => {
-        const value = vui.location.getQuery(props10.orderQuery);
+        const value = vui.location.getQuery(props11.orderQuery);
         if (typeof value !== "string" || !ordersRef.value.includes(value)) {
           return;
         }
@@ -3916,33 +4101,33 @@ var VDataTable = defineComponent({
       },
       set(value) {
         vui.location.pushQuery({
-          [props10.orderQuery]: value || null,
-          [props10.pageQuery]: 1
+          [props11.orderQuery]: value || null,
+          [props11.pageQuery]: 1
         });
       }
     });
     const offsetRef = computed(() => (pageRef.value - 1) * limitRef.value);
     const limitRef = computed({
-      get: () => vui.location.getQuery(props10.limitQuery, Number, props10.limitDefault),
+      get: () => vui.location.getQuery(props11.limitQuery, Number, props11.limitDefault),
       set: (value) => {
         const page = Math.floor(offsetRef.value / value) + 1;
         vui.location.pushQuery({
-          [props10.limitQuery]: value,
-          [props10.pageQuery]: page
+          [props11.limitQuery]: value,
+          [props11.pageQuery]: page
         });
       }
     });
     const pageLengthRef = computed(() => {
       const {
         total
-      } = props10;
+      } = props11;
       const _limit = limitRef.value;
       if (!total)
         return 0;
       return Math.ceil(total / _limit);
     });
-    const lengthRef = computed(() => props10.items.length);
-    const isASCRef = computed(() => orderByRef.value === props10.ascQueryValue);
+    const lengthRef = computed(() => props11.items.length);
+    const isASCRef = computed(() => orderByRef.value === props11.ascQueryValue);
     const sortIconRef = computed(() => {
       let icon = vui.icon("sort");
       if (typeof icon === "string") {
@@ -3972,21 +4157,21 @@ var VDataTable = defineComponent({
         return;
       const queries = {};
       if (sort) {
-        queries[props10.sortQuery] = sort;
+        queries[props11.sortQuery] = sort;
       }
       if (order) {
-        queries[props10.orderQuery] = order;
+        queries[props11.orderQuery] = order;
       }
       vui.location.pushQuery({
         ...queries,
         ...usePaigingRef.value ? {
-          [props10.pageQuery]: 1
+          [props11.pageQuery]: 1
         } : void 0
       });
     }
     function toggleOrderBy() {
       return setSort({
-        order: orderByRef.value === props10.ascQueryValue ? props10.descQueryValue : props10.ascQueryValue
+        order: orderByRef.value === props11.ascQueryValue ? props11.descQueryValue : props11.ascQueryValue
       });
     }
     function isSelected(key) {
@@ -4052,7 +4237,7 @@ var VDataTable = defineComponent({
         "class": "v-data-table__pagination",
         "dense": true,
         "align": "right",
-        "routeQuery": props10.pageQuery,
+        "routeQuery": props11.pageQuery,
         "modelValue": pageRef.value,
         "length": pageLengthRef.value
       }, null);
@@ -4060,7 +4245,7 @@ var VDataTable = defineComponent({
     function genControls() {
       const {
         total
-      } = props10;
+      } = props11;
       const offset = offsetRef.value;
       const length = lengthRef.value;
       return createVNode("div", {
@@ -4078,7 +4263,7 @@ var VDataTable = defineComponent({
         "size": "sm",
         "hiddenInfo": true,
         "disabled": isTransitioningRef.value,
-        "items": props10.limits.map((limit) => {
+        "items": props11.limits.map((limit) => {
           return {
             label: `${limit}\u4EF6`,
             value: limit
@@ -4097,7 +4282,7 @@ var VDataTable = defineComponent({
       const {
         defaultOrder,
         ascQueryValue
-      } = props10;
+      } = props11;
       const children = headersRef.value.map((header) => {
         const {
           label,
@@ -4246,7 +4431,7 @@ var VDataTable = defineComponent({
       const {
         items,
         itemKey
-      } = props10;
+      } = props11;
       const {
         item: itemSlot = defaultItemSlot
       } = ctx.slots;
@@ -4263,10 +4448,10 @@ var VDataTable = defineComponent({
         "class": "v-data-table__table__body"
       }, [children]);
     }
-    watch(() => props10.modelValue, (modelValue) => {
+    watch(() => props11.modelValue, (modelValue) => {
       internalValues.value = modelValue.slice();
     });
-    watch(() => props10.items, (items) => {
+    watch(() => props11.items, (items) => {
       internalValues.value = internalValues.value.filter((key) => {
         return sortedItemKeysRef.value.includes(key);
       });
@@ -4314,10 +4499,10 @@ var VDataTable = defineComponent({
 });
 var VApp = defineComponent({
   name: "VApp",
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     useInjectTheme();
     return () => {
-      return createVNode(VStackRoot, null, {
+      return createVNode(VStackContainer, null, {
         default: () => [createVNode(VAppLayout, null, ctx.slots)]
       });
     };
@@ -4330,15 +4515,15 @@ var VToolbar = defineComponent({
     ...colorSchemeProps(),
     dense: Boolean
   },
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const vui = useVui();
-    const elevation = useElevation(props10, {
+    const elevation = useElevation(props11, {
       defaultValue: 4
     });
-    const dense = computed(() => props10.dense);
+    const dense = computed(() => props11.dense);
     const color = useColorClasses({
-      color: () => props10.color,
-      variant: () => props10.variant || vui.setting("containedVariant")
+      color: () => props11.color,
+      variant: () => props11.variant || vui.setting("containedVariant")
     });
     const classes = computed(() => {
       return [elevation.elevationClassName.value, color.colorClasses.value, {
@@ -4357,11 +4542,11 @@ var VToolbarMenu = defineComponent({
   name: "VToolbarMenu",
   inheritAttrs: false,
   props: {},
-  setup(props10, ctx) {
+  setup(props11, ctx) {
     const vui = useVui();
     const plain = vui.setting("plainVariant");
     return () => {
-      const variant = props10.variant || plain;
+      const variant = props11.variant || plain;
       return createVNode(VButton, mergeProps(ctx.attrs, {
         "variant": variant,
         "class": ["v-toolbar-menu"]
@@ -4379,8 +4564,8 @@ var VToolbarEdge = defineComponent({
       required: true
     }
   },
-  setup(props10, ctx) {
-    const edge = computed(() => props10.edge);
+  setup(props11, ctx) {
+    const edge = computed(() => props11.edge);
     return () => {
       const children = renderSlotOrEmpty(ctx.slots, "default");
       const hasChildren = !!children && children.length > 0;
@@ -4403,8 +4588,8 @@ var VToolbarTitle = defineComponent({
     ...slots12()
   },
   slots: slots12,
-  setup(props10, ctx) {
-    const _TagName = computed(() => props10.tag);
+  setup(props11, ctx) {
+    const _TagName = computed(() => props11.tag);
     return () => {
       const TagName = _TagName.value;
       return createVNode(TagName, {
@@ -4486,8 +4671,52 @@ var VuiService = class {
     this.location = new LocationService({
       router: this.router
     });
-    this.stack = stackService;
     this.useLink = options.useLink || useLink;
+    this.stack = stackService;
+    const {
+      uiSettings
+    } = options;
+    this.stackActions = {
+      ok: ({
+        bindings
+      }) => createVNode(VButton, mergeProps(uiSettings.dialogOk, bindings), {
+        default: () => [createTextVNode("OK")]
+      }),
+      cancel: ({
+        bindings
+      }) => createVNode(VButton, mergeProps(uiSettings.dialogCancel, bindings), {
+        default: () => [createTextVNode("CANCEL")]
+      }),
+      close: ({
+        bindings
+      }) => createVNode(VButton, mergeProps(uiSettings.dialogClose, bindings), {
+        default: () => [createTextVNode("CLOSE")]
+      })
+    };
+    this.dialog = stackService.createLauncher(VDialog);
+    this.alert = stackService.createLauncher(VDialog, (props11) => {
+      const actions = [...props11?.actions || []];
+      if (!actions.length) {
+        actions.push(this.stackAction("ok"));
+      }
+      return {
+        ...props11,
+        actions
+      };
+    });
+    this.confirm = stackService.createLauncher(VDialog, (props11) => {
+      const actions = [...props11?.actions || []];
+      if (!actions.length) {
+        actions.push(this.stackAction("cancel"), this.stackAction("ok"));
+      }
+      return {
+        ...props11,
+        actions
+      };
+    });
+    this.snackbar = stackService.createLauncher(VSnackbar);
+    this.menu = stackService.createLauncher(VMenu);
+    this.sheet = stackService.createLauncher(VSheetModal);
   }
   configure(options) {
     options && Object.assign(this.options, options);
@@ -4517,21 +4746,6 @@ var VuiService = class {
     } = 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 = {
@@ -4543,9 +4757,9 @@ var VuiService = class {
       state
     } = options;
     const _state = reactive(state);
-    options.actions = options.actions || [this.stack.action("cancel", void 0, {
+    options.actions = options.actions || [this.stackAction("cancel", void 0, {
       size
-    }), this.stack.action("ok", void 0, {
+    }), this.stackAction("ok", void 0, {
       size,
       onClick: () => {
         if (form) {
@@ -4554,30 +4768,26 @@ var VuiService = class {
         }
       }
     })];
-    const resolved = resolveVStackDynamicInput({
-      ...options,
-      content: (stack) => {
-        return createVNode(VForm, {
-          "disableAutoScroll": true,
-          "size": size,
-          "onVnodeBeforeUnmount": () => {
-            form = void 0;
-          },
-          "onSubmit": (ev) => {
-            stack.resolve(_state);
-          }
-        }, {
-          default: (_form) => {
-            form = _form;
-            return slot(_state, {
-              form,
-              stack
-            });
-          }
-        });
-      }
+    return this.dialog(options, (stack) => {
+      return createVNode(VForm, {
+        "disableAutoScroll": true,
+        "size": size,
+        "onVnodeBeforeUnmount": () => {
+          form = void 0;
+        },
+        "onSubmit": (ev) => {
+          stack.resolve(_state);
+        }
+      }, {
+        default: (_form) => {
+          form = _form;
+          return slot(_state, {
+            form,
+            stack
+          });
+        }
+      });
     });
-    return this.dialog(resolved);
   }
   prompt(rawOptions = {}) {
     const options = typeof rawOptions === "string" ? {
@@ -4611,6 +4821,30 @@ var VuiService = class {
       return result ? result.input : result;
     });
   }
+  stackAction(key, override, attrs) {
+    const factory = this.stackActions[key];
+    const _onClick = BUILTIN_ACTION_HANDLERS[key];
+    const action = {
+      key,
+      content: ({
+        control,
+        key: key2
+      }) => {
+        const onClick = (ev) => _onClick(control, ev);
+        return factory({
+          service: this.stack,
+          control,
+          key: key2,
+          bindings: {
+            onClick,
+            ...attrs
+          }
+        });
+      },
+      ...override
+    };
+    return action;
+  }
 };
 function mergeVuiPluginOptions(base, override) {
   if (!override)
@@ -4628,32 +4862,11 @@ var VuiPlugin = class {
   static install(app, opts) {
     const {
       colorScheme,
-      stack,
-      uiSettings
+      stack
     } = opts;
     const vueColorSchemePlugin = new VueColorSchemePlugin(colorScheme);
     app.use(vueColorSchemePlugin);
-    installVueStackPlugin(app, {
-      actions: {
-        ok: ({
-          bindings
-        }) => createVNode(VButton, mergeProps(uiSettings.dialogOk, bindings), {
-          default: () => [createTextVNode("OK")]
-        }),
-        cancel: ({
-          bindings
-        }) => createVNode(VButton, mergeProps(uiSettings.dialogCancel, bindings), {
-          default: () => [createTextVNode("CANCEL")]
-        }),
-        close: ({
-          bindings
-        }) => createVNode(VButton, mergeProps(uiSettings.dialogClose, bindings), {
-          default: () => [createTextVNode("CLOSE")]
-        }),
-        ...stack ? stack.actions : {}
-      },
-      ...stack
-    });
+    installVueStackPlugin(app, stack);
     installVueAppLayout(app);
     installBodyScrollLockDirective(app);
     installClickOutsideDirective(app);
@@ -4670,6 +4883,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, KEYBORD_EVENT_TYPES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VControlField, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, VSwitch, VSwitchGroup, VTabs, VTextCounter, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createNavigationProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, defineFormSelectorComponent, formSlots, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, paperBaseSlots, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { ARROW_KEY_TYPES, AVATAR_SIZES, BUTTON_ALIGNS, CHIP_SIZES, CHOICE_KEY_TYPES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, KEYBORD_EVENT_TYPES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VControlField, VDataTable, VDialog, VDrawerLayout, VForm, VFormControl, 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_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, createVFormProps, defineFormSelectorComponent, formSlots, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, paperBaseSlots, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, sheetModalProps, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=vui.mjs.map