@fastkit/vui 0.6.32 → 0.6.36

package/dist/vui.esm-bundler.js

@@ -1,15 +1,26 @@
-import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, resolveVNodeChildOrSlots, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
+import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, resolveVNodeChildOrSlots, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
 export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar } from '@fastkit/vue-kit';
+import { inject, computed, provide, defineComponent, createVNode, mergeProps, isVNode, cloneVNode, ref, watch, withDirectives, createTextVNode, Fragment, vShow, onBeforeUpdate, vModelSelect, onMounted, onBeforeUnmount, Transition } from 'vue';
 import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
-import { createPropsOptions as createPropsOptions$1, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableInheritProps, VLink, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
-import { inject, computed, provide, defineComponent, createVNode, mergeProps, ref, watch, withDirectives, createTextVNode, isVNode, Fragment, vShow, onBeforeUpdate, vModelSelect, onMounted, onBeforeUnmount, Transition } from 'vue';
+import { createPropsOptions as createPropsOptions$1, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableInheritProps, VLink, isFragment, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
 import { useScopeColorClass, colorSchemeProps, useColorClasses, toScopeColorClass } from '@fastkit/vue-color-scheme';
 import { VProgressCircular } from '@fastkit/vue-loading';
 export * from '@fastkit/vue-loading';
 export { ICON_NAMES } from '@fastkit/icon-font';
 import { isPromise } from '@fastkit/helpers';
 import { VAppContainer, VAppLayoutControl } from '@fastkit/vue-app-layout';
+import { createTextableProps, createTextableEmits, TextableControl } from '@fastkit/vue-form-control';
+import { useEditor, EditorContent, BubbleMenu } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import { BulletList } from '@tiptap/extension-bullet-list';
+import { Bold } from '@tiptap/extension-bold';
+import { Italic } from '@tiptap/extension-italic';
+import { Underline } from '@tiptap/extension-underline';
+import { History } from '@tiptap/extension-history';
+import { Link } from '@tiptap/extension-link';
+import { validateIf, url } from '@fastkit/rules';
+import { OrderedList } from '@tiptap/extension-ordered-list';
 import { getDocumentScroller as getDocumentScroller$1 } from '@fastkit/vue-scroller';
 
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
@@ -21,6 +32,7 @@ const VuiControlFieldInjectionKey = Symbol();
 const VuiColorProviderInjectionKey = Symbol();
 const VUI_TEXT_FIELD_SYMBOL = 'vui-text-field';
 const VUI_TEXTAREA_SYMBOL = 'vui-textarea';
+const VUI_WYSIWYG_EDITOR_SYMBOL = 'vui-wysiwyg-editor';
 const VUI_SELECT_SYMBOL = 'vui-select';
 const VUI_OPTION_SYMBOL = 'vui-option';
 const VUI_CHECKBOX_GROUP_SYMBOL = 'vui-checkbox-group';
@@ -478,8 +490,10 @@ const VButton = defineComponent({
     });
     const isPlain = computed(() => color.variant.value.value === vui.setting('plainVariant') && color.color.value.value === defaults.color);
     const isLoading = computed(() => props.loading); // const isDisabled = computed(() => props.disabled);
+    // const isRounded = computed(() =>
+    //   props.rounded != null ? props.rounded : !!icon.value,
+    // );
 
-    const isRounded = computed(() => props.rounded || !!icon.value);
     const spacer = computed(() => {
       const _spacer = props.spacer;
       if (!_spacer) return;
@@ -489,7 +503,7 @@ const VButton = defineComponent({
     spacer.value ? `v-button--spacer-${spacer.value}` : undefined, `v-button--${control.size.value}`, {
       'v-button--loading': isLoading.value,
       'v-button--icon': !!icon.value,
-      'v-button--rounded': isRounded.value,
+      'v-button--rounded': props.rounded,
       'v-button--plain': isPlain.value
     }]);
     return () => {
@@ -510,7 +524,64 @@ const VButton = defineComponent({
 
 });
 
-function _isSlot$c(s) {
+const VButtonGroup = defineComponent({
+  name: 'VButtonGroup',
+  props: { ...colorSchemeProps(),
+    ...createControlProps(),
+    disabled: Boolean
+  },
+
+  setup(props, ctx) {
+    return () => {
+      let buttonLength = 0;
+      let tmp = renderSlotOrEmpty$1(ctx.slots) || [];
+
+      if (tmp.length === 1 && isFragment(tmp[0])) {
+        tmp = tmp[0].children;
+      }
+
+      const children = tmp.map(node => {
+        if (!isVNode(node) || node.type !== VButton) {
+          return {
+            isButton: false,
+            node
+          };
+        }
+
+        buttonLength++;
+        return {
+          isButton: true,
+          node
+        };
+      });
+      let buttonIndex = 0;
+      const $children = children.map(child => {
+        if (child.isButton) {
+          buttonIndex++;
+          const hasLeft = buttonIndex > 1;
+          const hasRight = buttonIndex < buttonLength;
+          const childProps = child.node.props;
+          return cloneVNode(child.node, { ...props,
+            ...childProps,
+            rouded: false,
+            class: ['v-button-group__item', {
+              'v-button-group__item--has-left': hasLeft,
+              'v-button-group__item--has-right': hasRight
+            }]
+          });
+        }
+
+        return child.node;
+      });
+      return createVNode("div", {
+        "class": "v-button-group"
+      }, [$children]);
+    };
+  }
+
+});
+
+function _isSlot$d(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -758,7 +829,7 @@ const VPagination = defineComponent({
           "class": classes,
           "to": to,
           "key": key
-        }, _isSlot$c(children) ? children : {
+        }, _isSlot$d(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -913,7 +984,7 @@ const VDrawerLayout = defineComponent({
 
 });
 
-function _isSlot$b(s) {
+function _isSlot$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -948,7 +1019,7 @@ const VHero = defineComponent({
         }, {
           default: () => [createVNode(HTagName, {
             "class": "v-hero__title"
-          }, _isSlot$b(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+          }, _isSlot$c(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
             default: () => [_slot]
           })]
         })]
@@ -958,7 +1029,7 @@ const VHero = defineComponent({
 
 });
 
-function _isSlot$a(s) {
+function _isSlot$b(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -993,7 +1064,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$a(label) ? label : {
+  }, _isSlot$b(label) ? label : {
     default: () => [label]
   });
 }
@@ -1016,9 +1087,11 @@ const VNavigationItem = defineComponent({
     const to = computed(() => ctx.attrs.to);
     const match = computed(() => {
       const {
-        match,
-        to
+        match
       } = props;
+      const {
+        to
+      } = ctx.attrs;
       if (match) return match;
       if (!to) return;
       if (typeof to === 'string') return to;
@@ -1144,7 +1217,7 @@ const VNavigationItem = defineComponent({
         "class": ['v-navigation-item', classes.value],
         "onClick": onClick,
         "onChangeActive": onChangeActive
-      }), _isSlot$a(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+      }), _isSlot$b(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       }), _children && createVNode(VExpandTransition, null, {
         default: () => [withDirectives(createVNode("div", {
@@ -1324,7 +1397,7 @@ const VCheckbox = defineComponent({
 
 });
 
-function _isSlot$9(s) {
+function _isSlot$a(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1336,7 +1409,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VCheckbox, attrs, _isSlot$9(slots) ? slots : {
+  }) => createVNode(VCheckbox, attrs, _isSlot$a(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1388,7 +1461,7 @@ const VRadio = defineComponent({
 
 });
 
-function _isSlot$8(s) {
+function _isSlot$9(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1399,7 +1472,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VRadio, attrs, _isSlot$8(slots) ? slots : {
+  }) => createVNode(VRadio, attrs, _isSlot$9(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1461,7 +1534,7 @@ const VSwitch = defineComponent({
 
 });
 
-function _isSlot$7(s) {
+function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1473,7 +1546,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VSwitch, attrs, _isSlot$7(slots) ? slots : {
+  }) => createVNode(VSwitch, attrs, _isSlot$8(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1856,15 +1929,20 @@ const {
   props: props$2,
   emits: emits$2
 } = createTextInputSettings();
-const VTextField = defineComponent({
-  name: 'VTextField',
-  props: { ...props$2,
+
+function createTextFieldProps() {
+  return { ...props$2,
     ...createFormControlProps(),
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
     ...createControlProps(),
     ...defineSlotsProps()
-  },
+  };
+}
+
+const VTextField = defineComponent({
+  name: 'VTextField',
+  props: createTextFieldProps(),
   emits: emits$2,
 
   setup(props, ctx) {
@@ -1973,6 +2051,377 @@ const VTextarea = defineComponent({
 
 });
 
+function resolveRawWysiwygEditorTool(raw, vui) {
+    return typeof raw === 'function' ? raw(vui) : raw;
+}
+function resolveRawWysiwygEditorTools(raws, vui) {
+    const tools = [];
+    const extensions = [];
+    raws.forEach((raw) => {
+        let resolved = resolveRawWysiwygEditorTool(raw, vui);
+        if (!Array.isArray(resolved)) {
+            resolved = [resolved];
+        }
+        resolved.forEach((tool) => {
+            tools.push(tool);
+            if (tool.extensions) {
+                extensions.push(...tool.extensions);
+            }
+        });
+    });
+    return {
+        tools,
+        extensions,
+    };
+}
+
+function _isSlot$7(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
+const VWysiwygEditor = defineComponent({
+  name: 'VWysiwygEditor',
+  props: { // ...props,
+    ...createTextableProps(),
+    ...createFormControlProps(),
+    ...createControlFieldProps(),
+    ...createControlFieldProviderProps(),
+    ...createControlProps(),
+    ...defineSlotsProps(),
+    tools: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: { ...createTextableEmits()
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const textRef = ref('');
+    const toolButtonActiveColor = vui.setting('primaryScope');
+    const wysiwygSettings = computed(() => resolveRawWysiwygEditorTools(props.tools, vui));
+    const control = useControl(props);
+    useControlField(props);
+    const inputControl = new TextableControl(props, ctx, {
+      nodeType: VUI_WYSIWYG_EDITOR_SYMBOL,
+      validationValue: () => textRef.value
+    });
+    const extensions = [StarterKit.configure({
+      bold: false,
+      bulletList: false,
+      orderedList: false,
+      history: false,
+      italic: false
+    }), ...wysiwygSettings.value.extensions];
+
+    const updateEditable = () => {
+      if (!editor.value) return;
+      editor.value.setEditable(inputControl.canOperation);
+    };
+
+    watch(() => inputControl.canOperation, updateEditable);
+    const editor = useEditor({
+      onCreate: ({
+        editor
+      }) => {
+        textRef.value = editor.getText();
+        updateEditable();
+      },
+      onFocus: ctx => {
+        inputControl.focusHandler(ctx.event);
+      },
+      onBlur: ctx => {
+        inputControl.blurHandler(ctx.event);
+      },
+      onUpdate: ev => {
+        inputControl.value = ev.editor.getHTML();
+        textRef.value = ev.editor.getText();
+      },
+      autofocus: props.autofocus,
+      content: props.modelValue,
+      extensions,
+      editorProps: {
+        attributes: {
+          class: 'v-wysiwyg-editor__input__prose'
+        }
+      }
+    });
+
+    const focus = (position, options) => {
+      return editor.value.chain().focus(position, options);
+    };
+
+    const blur = () => {
+      return editor.value.chain().blur();
+    };
+
+    const wysiwygContext = computed(() => ({
+      vui,
+      editor: editor.value
+    }));
+
+    const createTools = (floating = false) => {
+      let _slot;
+
+      const {
+        value: settings
+      } = wysiwygSettings;
+      const {
+        value: context
+      } = wysiwygContext;
+      const tools = floating ? settings.tools.filter(t => !!t.floating) : settings.tools;
+      const _editor = editor.value;
+      const variant = vui.setting(floating ? 'containedVariant' : 'plainVariant');
+      return createVNode(VButtonGroup, {
+        "variant": variant
+      }, _isSlot$7(_slot = tools.map(({
+        key,
+        icon,
+        onClick,
+        disabled,
+        active
+      }) => {
+        const isActive = !!_editor && resolveContextableValue(context, active);
+        const isDisabled = !inputControl.canOperation || !!_editor && resolveContextableValue(context, disabled);
+        let iconName;
+
+        if (typeof icon === 'function') {
+          if (_editor) {
+            iconName = icon(context);
+          }
+        } else {
+          iconName = icon;
+        }
+
+        if (!iconName) return;
+        return createVNode(VButton, {
+          "key": key,
+          "icon": iconName,
+          "onClick": ev => onClick(context, ev),
+          "color": isActive ? toolButtonActiveColor : undefined,
+          "disabled": isDisabled
+        }, null);
+      })) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+
+    return {
+      editor,
+      ...inputControl.expose(),
+      ...control,
+      focus,
+      blur,
+      createTools
+    };
+  },
+
+  render() {
+    return createVNode(VFormControl, {
+      "nodeControl": this.nodeControl,
+      "focused": this.nodeControl.focused,
+      "class": ['v-wysiwyg-editor', this.classes],
+      "label": this.label,
+      "hint": this.hint,
+      "hiddenInfo": this.hiddenInfo,
+      "onClickLabel": ev => {
+        this.focus('start', {
+          scrollIntoView: true
+        });
+      }
+    }, { ...this.$slots,
+      default: () => {
+        const {
+          editor
+        } = this;
+        return createVNode(Fragment, null, [!this.isReadonly && this.createTools(), createVNode(VControlField, {
+          "class": "v-wysiwyg-editor__input",
+          "autoHeight": true,
+          "startAdornment": this.startAdornment,
+          "endAdornment": this.endAdornment
+        }, { ...this.$slots,
+          default: () => {
+            let _slot2;
+
+            return createVNode(Fragment, null, [createVNode(EditorContent, {
+              "class": "v-wysiwyg-editor__input__element wysiwyg",
+              "editor": editor
+            }, null), !!editor && !this.isReadonly && createVNode(BubbleMenu, {
+              "class": "v-wysiwyg-editor__bubble-menu",
+              "editor": editor
+            }, _isSlot$7(_slot2 = this.createTools(true)) ? _slot2 : {
+              default: () => [_slot2]
+            })]);
+          }
+        })]);
+      },
+      infoAppends: () => {
+        const {
+          counterResult
+        } = this;
+        if (!counterResult) return;
+        return createVNode(VTextCounter, counterResult, null);
+      }
+    });
+  }
+
+});
+
+function resolveContextableValue(ctx, source) {
+  return typeof source === 'function' ? source(ctx) : source;
+}
+
+const WysiwygBulletListTool = (vui, options) => {
+    const tool = {
+        key: 'bulletList',
+        icon: vui.icon('editorformatListBulleted'),
+        active: ({ editor }) => editor.isActive('bulletList'),
+        onClick: ({ editor }) => {
+            editor.chain().focus().toggleBulletList().run();
+        },
+        floating: true,
+        extensions: [BulletList.configure(options)],
+    };
+    return tool;
+};
+
+const WysiwygFormatBoldTool = (vui, options) => {
+    const tool = {
+        key: 'formatBold',
+        icon: vui.icon('editorformatBold'),
+        active: ({ editor }) => editor.isActive('bold'),
+        onClick: ({ editor }) => {
+            editor.chain().focus().toggleBold().run();
+        },
+        floating: true,
+        extensions: [Bold.configure(options)],
+    };
+    return tool;
+};
+
+const WysiwygFormatItalicTool = (vui, options) => {
+    const tool = {
+        key: 'formatItalic',
+        icon: vui.icon('editorformatItalic'),
+        active: ({ editor }) => editor.isActive('italic'),
+        onClick: ({ editor }) => {
+            editor.chain().focus().toggleItalic().run();
+        },
+        floating: true,
+        extensions: [Italic.configure(options)],
+    };
+    return tool;
+};
+
+const WysiwygFormatUnderlineTool = (vui, options) => {
+    const tool = {
+        key: 'formatUnderline',
+        icon: vui.icon('editorformatUnderline'),
+        active: ({ editor }) => editor.isActive('underline'),
+        onClick: ({ editor }) => {
+            editor.chain().focus().toggleUnderline().run();
+        },
+        floating: true,
+        extensions: [Underline.configure(options)],
+    };
+    return tool;
+};
+
+const WysiwygHistoryTool = (vui, options) => {
+    const undo = {
+        key: 'history-undo',
+        icon: vui.icon('editorUndo'),
+        disabled: ({ editor }) => !editor.can().undo(),
+        onClick: ({ editor }) => {
+            editor.chain().focus().undo().run();
+        },
+        extensions: [History.configure(options)],
+    };
+    const redo = {
+        key: 'history-redo',
+        icon: vui.icon('editorRedo'),
+        disabled: ({ editor }) => !editor.can().redo(),
+        onClick: ({ editor }) => {
+            editor.chain().focus().redo().run();
+        },
+    };
+    return [undo, redo];
+};
+
+const WysiwygLinkTool = (vui, options) => {
+    const tool = {
+        key: 'link',
+        icon: ({ editor }) => {
+            return vui.icon(editor.isActive('link') ? 'editorLinkOff' : 'editorLink');
+        },
+        // icon: vui.icon('editorLink'),
+        active: ({ editor }) => editor.isActive('link'),
+        onClick: async ({ vui, editor }) => {
+            const { href = '' } = editor.getAttributes('link');
+            const result = await vui.prompt({
+                input: {
+                    label: 'Link URL',
+                    rules: [validateIf, url],
+                    initialValue: href,
+                    size: 'sm',
+                    autofocus: true,
+                },
+            });
+            if (result === undefined || result === false) {
+                return;
+            }
+            const range = editor.chain().focus().extendMarkRange('link');
+            console.log(range);
+            if (!result) {
+                range.unsetLink().run();
+            }
+            else {
+                range
+                    .setLink({
+                    href: result,
+                })
+                    .run();
+            }
+        },
+        floating: true,
+        extensions: [
+            Link.configure({
+                openOnClick: false,
+                ...options,
+            }),
+        ],
+    };
+    return tool;
+};
+
+const WysiwygOrderedListTool = (vui, options) => {
+    const tool = {
+        key: 'orderedList',
+        icon: vui.icon('editorformatListNumbered'),
+        active: ({ editor }) => editor.isActive('orderedList'),
+        onClick: ({ editor }) => {
+            editor.chain().focus().toggleOrderedList().run();
+        },
+        floating: true,
+        extensions: [OrderedList.configure(options)],
+    };
+    return tool;
+};
+
+const WysiwygTextColorTool = (vui) => {
+    const tool = {
+        key: 'textColor',
+        icon: vui.icon('editorTextColor'),
+        // icon: (gen) => vui.icon('editorTextColor'),
+        onClick: (ctx) => {
+            ctx.vui.alert('ok');
+        },
+        floating: true,
+    };
+    return tool;
+};
+
 const {
   props,
   emits
@@ -1983,7 +2432,8 @@ const VForm = defineComponent({
   name: 'VForm',
   props: { ...props,
     ...createControlProps(),
-    ...defineSlotsProps()
+    ...defineSlotsProps(),
+    disableAutoScroll: Boolean
   },
   emits,
 
@@ -1992,6 +2442,7 @@ const VForm = defineComponent({
     const nodeControl = useForm(props, ctx, {
       nodeType: VUI_FORM_SYMBOL,
       onAutoValidateError: () => {
+        if (props.disableAutoScroll) return;
         const scroller = getDocumentScroller();
         const {
           firstInvalidEl
@@ -3383,53 +3834,138 @@ const VToolbarTitle = defineComponent({
 
 });
 
-const DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP = -20;
-const DEFAULT_TEXTAREA_ROWS = 3;
-class VuiService {
-    options;
-    selectionSeparator;
-    autoScrollToElementOffsetTop;
-    textareaRows;
-    requiredChip;
-    router;
-    location;
-    constructor(options) {
-        this.options = options;
-        this.configure();
-        const { selectionSeparator = () => ', ', autoScrollToElementOffsetTop = DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP, textareaRows = DEFAULT_TEXTAREA_ROWS, requiredChip = () => '*', } = options;
-        this.selectionSeparator = selectionSeparator;
-        this.autoScrollToElementOffsetTop = autoScrollToElementOffsetTop;
-        this.textareaRows = textareaRows;
-        this.requiredChip = requiredChip;
-        this.router = options.router;
-        this.location = new LocationService({
-            router: this.router,
-        });
-    }
-    configure(options) {
-        options && Object.assign(this.options, options);
-        setDefaultRouterLink(this.getRouterLink());
-    }
-    getRouterLink() {
-        return this.options.RouterLink || RouterLink;
-    }
-    setting(key) {
-        return this.options.uiSettings[key];
-    }
-    icon(iconType) {
-        return this.options.icons[iconType];
-    }
-    getAutoScrollToElementOffsetTop() {
-        let { autoScrollToElementOffsetTop } = this;
-        if (typeof autoScrollToElementOffsetTop === 'function') {
-            autoScrollToElementOffsetTop = autoScrollToElementOffsetTop();
-        }
-        return autoScrollToElementOffsetTop || 0;
-    }
-    getRequiredChip() {
-        const { requiredChip } = this;
-        return requiredChip && requiredChip();
-    }
+const DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP = -20;
+const DEFAULT_TEXTAREA_ROWS = 3;
+class VuiService {
+  constructor(options, stackService) {
+    this.options = options;
+    this.configure();
+    const {
+      selectionSeparator = () => ', ',
+      autoScrollToElementOffsetTop = DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP,
+      textareaRows = DEFAULT_TEXTAREA_ROWS,
+      requiredChip = () => '*'
+    } = options;
+    this.selectionSeparator = selectionSeparator;
+    this.autoScrollToElementOffsetTop = autoScrollToElementOffsetTop;
+    this.textareaRows = textareaRows;
+    this.requiredChip = requiredChip;
+    this.router = options.router;
+    this.location = new LocationService({
+      router: this.router
+    });
+    this.stack = stackService;
+  }
+
+  configure(options) {
+    options && Object.assign(this.options, options);
+    setDefaultRouterLink(this.getRouterLink());
+  }
+
+  getRouterLink() {
+    return this.options.RouterLink || RouterLink;
+  }
+
+  setting(key) {
+    return this.options.uiSettings[key];
+  }
+
+  icon(iconType) {
+    return this.options.icons[iconType];
+  }
+
+  getAutoScrollToElementOffsetTop() {
+    let {
+      autoScrollToElementOffsetTop
+    } = this;
+
+    if (typeof autoScrollToElementOffsetTop === 'function') {
+      autoScrollToElementOffsetTop = autoScrollToElementOffsetTop();
+    }
+
+    return autoScrollToElementOffsetTop || 0;
+  }
+
+  getRequiredChip() {
+    const {
+      requiredChip
+    } = this;
+    return requiredChip && requiredChip();
+  }
+
+  dialog(...args) {
+    return this.stack.dialog(...args);
+  }
+
+  alert(...args) {
+    return this.stack.alert(...args);
+  }
+
+  confirm(...args) {
+    return this.stack.confirm(...args);
+  }
+
+  snackbar(...args) {
+    return this.stack.snackbar(...args);
+  }
+
+  prompt(rawOptions = {}) {
+    const options = typeof rawOptions === 'string' ? {
+      input: {
+        label: rawOptions
+      }
+    } : { ...rawOptions
+    };
+    options.input = { ...options.input
+    };
+    options.dense = true;
+    let {
+      initialValue: value = ''
+    } = options.input;
+    const {
+      size
+    } = options.input;
+    delete options.input.initialValue;
+    let form;
+    options.actions = options.actions || [this.stack.action('cancel', undefined, {
+      size
+    }), this.stack.action('ok', undefined, {
+      size,
+      onClick: () => {
+        if (form) {
+          const ev = new Event('submit');
+          form.handleSubmit(ev);
+        }
+      }
+    })];
+    const resolved = resolveVStackDynamicInput({ ...options,
+      content: stack => {
+        return createVNode(VForm, {
+          "disableAutoScroll": true,
+          "size": size,
+          "onVnodeMounted": vnode => {
+            form = vnode.component.ctx.form;
+          },
+          "onVnodeBeforeUnmount": () => {
+            form = undefined;
+          },
+          "onSubmit": ev => {
+            stack.resolve(value);
+          }
+        }, {
+          default: () => [createVNode(VTextField, mergeProps(options.input, {
+            "modelValue": value,
+            "onChange": ev => {
+              stack.value = ev;
+              value = ev;
+            }
+          }), null)]
+        });
+      }
+    });
+    return this.dialog(resolved);
+  }
+
 }
 
 class VuiPlugin {
@@ -3473,7 +4009,7 @@ class VuiPlugin {
       ...stack
     }); // Vui
 
-    const $vui = new VuiService(opts);
+    const $vui = new VuiService(opts, app.config.globalProperties.$vstack);
     app.provide(VuiInjectionKey, $vui);
     app.config.globalProperties.$vui = $vui;
 
@@ -3489,4 +4025,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VBreadcrumbs, VButton, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VBreadcrumbs, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygOrderedListTool, WysiwygTextColorTool, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };