@fastkit/vui 0.6.35 → 0.6.36

package/dist/vui.esm-bundler.js

@@ -1,17 +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 { 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, 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, 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'];
@@ -23,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';
@@ -524,7 +534,13 @@ const VButtonGroup = defineComponent({
   setup(props, ctx) {
     return () => {
       let buttonLength = 0;
-      const children = (renderSlotOrEmpty$1(ctx.slots) || []).map(node => {
+      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,
@@ -537,16 +553,7 @@ const VButtonGroup = defineComponent({
           isButton: true,
           node
         };
-      }); // const children = renderSlotOrEmpty(ctx.slots) || [];
-      // const $children = children.map((child) => {
-      //   if (!isVNode(child) || child.type !== VButton) return child;
-      //   const $child = cloneVNode(child, {
-      //     ...props,
-      //     ...child.props,
-      //   });
-      //   return $child;
-      // });
-
+      });
       let buttonIndex = 0;
       const $children = children.map(child => {
         if (child.isButton) {
@@ -574,7 +581,7 @@ const VButtonGroup = defineComponent({
 
 });
 
-function _isSlot$c(s) {
+function _isSlot$d(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -822,7 +829,7 @@ const VPagination = defineComponent({
           "class": classes,
           "to": to,
           "key": key
-        }, _isSlot$c(children) ? children : {
+        }, _isSlot$d(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -977,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);
 }
 
@@ -1012,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]
           })]
         })]
@@ -1022,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);
 }
 
@@ -1057,7 +1064,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$a(label) ? label : {
+  }, _isSlot$b(label) ? label : {
     default: () => [label]
   });
 }
@@ -1210,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", {
@@ -1390,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);
 }
 
@@ -1402,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]
   })
 });
@@ -1454,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);
 }
 
@@ -1465,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]
   })
 });
@@ -1527,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);
 }
 
@@ -1539,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]
   })
 });
@@ -1922,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) {
@@ -2039,86 +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()
+    ...defineSlotsProps(),
+    tools: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: { ...createTextableEmits()
   },
 
-  // emits,
   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({
-      content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
-      extensions: [StarterKit]
-    }); // const vui = useVui();
-    // const inputControl = useTiptapControl(props, ctx, {
-    //   nodeType: VUI_TEXTAREA_SYMBOL,
-    //   defaultRows: vui.tiptapRows,
-    // });
-    // const control = useControl(props);
-    // useControlField(props);
+      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'
+        }
+      }
+    });
 
-    return {
-      editor // ...inputControl.expose(),
-      // ...control,
+    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();
+      "onClickLabel": ev => {
+        this.focus('start', {
+          scrollIntoView: true
+        });
       }
     }, { ...this.$slots,
-      default: () => createVNode(VControlField, {
-        "class": "v-wysiwyg-editor__input",
-        "autoHeight": true,
-        "startAdornment": this.startAdornment,
-        "endAdornment": this.endAdornment
-      }, { ...this.$slots,
-        default: () => {
-          const {
-            editor
-          } = this;
-          return createVNode(Fragment, null, [createVNode(EditorContent, {
-            "class": "v-wysiwyg-editor__input__element wysiwyg",
-            "editor": editor
-          }, null), !!editor && createVNode(BubbleMenu, {
-            "class": "v-wysiwyg-editor__bubble-menu",
-            "editor": editor
-          }, {
-            default: () => [createVNode(VButton, {
-              "size": "sm",
-              "onClick": () => {
-                editor.chain().focus().toggleBold().run();
-              }
-            }, {
-              default: () => [createTextVNode("Bold")]
-            })]
-          })]);
-        } // this.tiptapControl.createInputElement({
-        //   class: 'v-wysiwyg-editor__input__element',
-        // }),
-
-      }) // infoAppends: () => {
-      //   const { counterResult } = this;
-      //   if (!counterResult) return;
-      //   return <VTextCounter {...counterResult} />;
-      // },
-
+      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
@@ -2129,7 +2432,8 @@ const VForm = defineComponent({
   name: 'VForm',
   props: { ...props,
     ...createControlProps(),
-    ...defineSlotsProps()
+    ...defineSlotsProps(),
+    disableAutoScroll: Boolean
   },
   emits,
 
@@ -2138,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
@@ -3529,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 {
@@ -3619,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;
 
@@ -3635,4 +4025,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-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, VWysiwygEditor, 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 };