@fastkit/vui 0.6.35 → 0.6.39

package/dist/vui.cjs.js

@@ -3,16 +3,25 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vueKit = require('@fastkit/vue-kit');
+var vue = require('vue');
 var vueRouter = require('vue-router');
 var vueUtils = require('@fastkit/vue-utils');
-var vue = require('vue');
 var vueColorScheme = require('@fastkit/vue-color-scheme');
 var vueLoading = require('@fastkit/vue-loading');
 var iconFont = require('@fastkit/icon-font');
 var helpers = require('@fastkit/helpers');
 var vueAppLayout = require('@fastkit/vue-app-layout');
+var vueFormControl = require('@fastkit/vue-form-control');
 var vue3 = require('@tiptap/vue-3');
 var StarterKit = require('@tiptap/starter-kit');
+var extensionBulletList = require('@tiptap/extension-bullet-list');
+var extensionBold = require('@tiptap/extension-bold');
+var extensionItalic = require('@tiptap/extension-italic');
+var extensionUnderline = require('@tiptap/extension-underline');
+var extensionHistory = require('@tiptap/extension-history');
+var extensionLink = require('@tiptap/extension-link');
+var rules = require('@fastkit/rules');
+var extensionOrderedList = require('@tiptap/extension-ordered-list');
 var vueScroller = require('@fastkit/vue-scroller');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
@@ -28,6 +37,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';
@@ -440,7 +450,8 @@ function resolveRawVButtonIcon(raw, type = 'main') {
   }, null);
 }
 
-const vueButtonProps = vueUtils.createPropsOptions({ ...vueColorScheme.colorSchemeProps(),
+const vueButtonProps = vueUtils.createPropsOptions({ ...undefined,
+  ...vueColorScheme.colorSchemeProps(),
   ...vueUtils.navigationableInheritProps,
   spacer: [Boolean, String],
   loading: Boolean,
@@ -529,7 +540,13 @@ const VButtonGroup = vue.defineComponent({
   setup(props, ctx) {
     return () => {
       let buttonLength = 0;
-      const children = (vueUtils.renderSlotOrEmpty(ctx.slots) || []).map(node => {
+      let tmp = vueUtils.renderSlotOrEmpty(ctx.slots) || [];
+
+      if (tmp.length === 1 && vueUtils.isFragment(tmp[0])) {
+        tmp = tmp[0].children;
+      }
+
+      const children = tmp.map(node => {
         if (!vue.isVNode(node) || node.type !== VButton) {
           return {
             isButton: false,
@@ -542,16 +559,7 @@ const VButtonGroup = vue.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) {
@@ -579,7 +587,7 @@ const VButtonGroup = vue.defineComponent({
 
 });
 
-function _isSlot$c(s) {
+function _isSlot$d(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -827,7 +835,7 @@ const VPagination = vue.defineComponent({
           "class": classes,
           "to": to,
           "key": key
-        }, _isSlot$c(children) ? children : {
+        }, _isSlot$d(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -982,7 +990,7 @@ const VDrawerLayout = vue.defineComponent({
 
 });
 
-function _isSlot$b(s) {
+function _isSlot$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1017,7 +1025,7 @@ const VHero = vue.defineComponent({
         }, {
           default: () => [vue.createVNode(HTagName, {
             "class": "v-hero__title"
-          }, _isSlot$b(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+          }, _isSlot$c(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
             default: () => [_slot]
           })]
         })]
@@ -1027,7 +1035,7 @@ const VHero = vue.defineComponent({
 
 });
 
-function _isSlot$a(s) {
+function _isSlot$b(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1062,7 +1070,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return vue.createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$a(label) ? label : {
+  }, _isSlot$b(label) ? label : {
     default: () => [label]
   });
 }
@@ -1215,7 +1223,7 @@ const VNavigationItem = vue.defineComponent({
         "class": ['v-navigation-item', classes.value],
         "onClick": onClick,
         "onChangeActive": onChangeActive
-      }), _isSlot$a(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+      }), _isSlot$b(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       }), _children && vue.createVNode(vueUtils.VExpandTransition, null, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
@@ -1395,7 +1403,7 @@ const VCheckbox = vue.defineComponent({
 
 });
 
-function _isSlot$9(s) {
+function _isSlot$a(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1407,7 +1415,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VCheckbox, attrs, _isSlot$9(slots) ? slots : {
+  }) => vue.createVNode(VCheckbox, attrs, _isSlot$a(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1459,7 +1467,7 @@ const VRadio = vue.defineComponent({
 
 });
 
-function _isSlot$8(s) {
+function _isSlot$9(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1470,7 +1478,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VRadio, attrs, _isSlot$8(slots) ? slots : {
+  }) => vue.createVNode(VRadio, attrs, _isSlot$9(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1532,7 +1540,7 @@ const VSwitch = vue.defineComponent({
 
 });
 
-function _isSlot$7(s) {
+function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1544,7 +1552,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VSwitch, attrs, _isSlot$7(slots) ? slots : {
+  }) => vue.createVNode(VSwitch, attrs, _isSlot$8(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1927,15 +1935,20 @@ const {
   props: props$2,
   emits: emits$2
 } = vueKit.createTextInputSettings();
-const VTextField = vue.defineComponent({
-  name: 'VTextField',
-  props: { ...props$2,
+
+function createTextFieldProps() {
+  return { ...props$2,
     ...vueKit.createFormControlProps(),
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
     ...createControlProps(),
     ...vueKit.defineSlotsProps()
-  },
+  };
+}
+
+const VTextField = vue.defineComponent({
+  name: 'VTextField',
+  props: createTextFieldProps(),
   emits: emits$2,
 
   setup(props, ctx) {
@@ -2044,86 +2057,396 @@ const VTextarea = vue.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]' && !vue.isVNode(s);
+}
+
 const VWysiwygEditor = vue.defineComponent({
   name: 'VWysiwygEditor',
   props: { // ...props,
+    ...vueFormControl.createTextableProps(),
     ...vueKit.createFormControlProps(),
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
     ...createControlProps(),
-    ...vueKit.defineSlotsProps()
+    ...vueKit.defineSlotsProps(),
+    tools: {
+      type: Array,
+      default: () => []
+    },
+    floatingToolbar: Boolean,
+    disabledMinHeight: Boolean,
+    disabledMaxHeight: Boolean
+  },
+  emits: { ...vueFormControl.createTextableEmits()
   },
 
-  // emits,
   setup(props, ctx) {
+    const vui = useVui();
+    const textRef = vue.ref('');
+    const toolButtonActiveColor = vui.setting('primaryScope');
+    const wysiwygSettings = vue.computed(() => resolveRawWysiwygEditorTools(props.tools, vui));
+    const control = useControl(props);
+    useControlField(props);
+    const inputControl = new vueFormControl.TextableControl(props, ctx, {
+      nodeType: VUI_WYSIWYG_EDITOR_SYMBOL,
+      validationValue: () => textRef.value
+    });
+    const extensions = [StarterKit__default.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);
+    };
+
+    vue.watch(() => inputControl.canOperation, updateEditable);
+    vue.watch(() => props.modelValue, modelValue => {
+      editor.value && editor.value.commands.setContent(modelValue == null ? '' : modelValue);
+    });
     const editor = vue3.useEditor({
-      content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
-      extensions: [StarterKit__default]
-    }); // 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'
+        }
+      }
+    }); // editor.value.state.doc.content
 
-    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 = vue.computed(() => ({
+      vui,
+      editor: editor.value
+    }));
+
+    const createTools = (bubbleMenu = false) => {
+      let _slot;
+
+      const {
+        value: settings
+      } = wysiwygSettings;
+      const {
+        value: context
+      } = wysiwygContext;
+      const tools = bubbleMenu ? settings.tools.filter(t => !!t.floating) : settings.tools;
+      const _editor = editor.value;
+      const variant = vui.setting(bubbleMenu ? 'containedVariant' : 'plainVariant');
+      return vue.createVNode(VButtonGroup, {
+        "class": {
+          'v-wysiwyg-editor__floating-toolbar': props.floatingToolbar
+        },
+        "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 vue.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 vue.createVNode(VFormControl, {
       "nodeControl": this.nodeControl,
+      "focused": this.nodeControl.focused,
+      "class": ['v-wysiwyg-editor', this.classes, `v-wysiwyg-editor--${this.size}`, {
+        'v-wysiwyg-editor--disabled-min-heihgt': this.disabledMinHeight,
+        'v-wysiwyg-editor--disabled-max-heihgt': this.disabledMaxHeight
+      }],
       "label": this.label,
       "hint": this.hint,
       "hiddenInfo": this.hiddenInfo,
-      "onClickLabel": ev => {// this.focus();
+      "onClickLabel": ev => {
+        this.focus('start', {
+          scrollIntoView: true
+        });
       }
     }, { ...this.$slots,
-      default: () => vue.createVNode(VControlField, {
-        "class": "v-wysiwyg-editor__input",
-        "autoHeight": true,
-        "startAdornment": this.startAdornment,
-        "endAdornment": this.endAdornment
-      }, { ...this.$slots,
-        default: () => {
-          const {
-            editor
-          } = this;
-          return vue.createVNode(vue.Fragment, null, [vue.createVNode(vue3.EditorContent, {
-            "class": "v-wysiwyg-editor__input__element wysiwyg",
-            "editor": editor
-          }, null), !!editor && vue.createVNode(vue3.BubbleMenu, {
-            "class": "v-wysiwyg-editor__bubble-menu",
-            "editor": editor
-          }, {
-            default: () => [vue.createVNode(VButton, {
-              "size": "sm",
-              "onClick": () => {
-                editor.chain().focus().toggleBold().run();
-              }
-            }, {
-              default: () => [vue.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 vue.createVNode("div", {
+          "class": "v-wysiwyg-editor__wrapper"
+        }, [!this.isReadonly && this.createTools(), vue.createVNode("div", {
+          "class": "v-wysiwyg-editor__body"
+        }, [vue.createVNode(VControlField, {
+          "class": "v-wysiwyg-editor__input",
+          "autoHeight": true,
+          "startAdornment": this.startAdornment,
+          "endAdornment": this.endAdornment
+        }, { ...this.$slots,
+          default: () => {
+            let _slot2;
+
+            return vue.createVNode(vue.Fragment, null, [vue.createVNode(vue3.EditorContent, {
+              "class": "v-wysiwyg-editor__input__element wysiwyg",
+              "editor": editor
+            }, null), !this.floatingToolbar && !!editor && !this.isReadonly && vue.createVNode(vue3.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 vue.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: [extensionBulletList.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: [extensionBold.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: [extensionItalic.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: [extensionUnderline.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: [extensionHistory.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'),
+        // disabled: ({ editor }) => {
+        //   const { $from, $to } = editor.view.state.selection;
+        //   return $to.pos - $from.pos === 0;
+        // },
+        onClick: async ({ vui, editor }) => {
+            const { href = '' } = editor.getAttributes('link');
+            const result = await vui.prompt({
+                input: {
+                    label: 'Link URL',
+                    rules: [rules.validateIf, rules.url],
+                    initialValue: href,
+                    size: 'sm',
+                    autofocus: true,
+                },
+            });
+            if (result === undefined || result === false) {
+                return;
+            }
+            const range = editor.chain().focus().extendMarkRange('link');
+            if (!result) {
+                range.unsetLink().run();
+            }
+            else {
+                range
+                    .setLink({
+                    href: result,
+                })
+                    .run();
+            }
+        },
+        floating: true,
+        extensions: [
+            extensionLink.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: [extensionOrderedList.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
@@ -2134,7 +2457,8 @@ const VForm = vue.defineComponent({
   name: 'VForm',
   props: { ...props,
     ...createControlProps(),
-    ...vueKit.defineSlotsProps()
+    ...vueKit.defineSlotsProps(),
+    disableAutoScroll: Boolean
   },
   emits,
 
@@ -2143,6 +2467,7 @@ const VForm = vue.defineComponent({
     const nodeControl = vueKit.useForm(props, ctx, {
       nodeType: VUI_FORM_SYMBOL,
       onAutoValidateError: () => {
+        if (props.disableAutoScroll) return;
         const scroller = vueKit.getDocumentScroller();
         const {
           firstInvalidEl
@@ -3534,53 +3859,138 @@ const VToolbarTitle = vue.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 vueUtils.LocationService({
-            router: this.router,
-        });
-    }
-    configure(options) {
-        options && Object.assign(this.options, options);
-        vueUtils.setDefaultRouterLink(this.getRouterLink());
-    }
-    getRouterLink() {
-        return this.options.RouterLink || vueRouter.RouterLink;
-    }
-    setting(key) {
-        return this.options.uiSettings[key];
-    }
-    icon(iconType) {
-        return this.options.icons[iconType];
-    }
-    getAutoScrollToElementOffsetTop() {
-        let { autoScrollToElementOffsetTop } = this;
-        if (typeof autoScrollToElementOffsetTop === 'function') {
-            autoScrollToElementOffsetTop = autoScrollToElementOffsetTop();
-        }
-        return autoScrollToElementOffsetTop || 0;
-    }
-    getRequiredChip() {
-        const { requiredChip } = this;
-        return requiredChip && requiredChip();
-    }
+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 vueUtils.LocationService({
+      router: this.router
+    });
+    this.stack = stackService;
+  }
+
+  configure(options) {
+    options && Object.assign(this.options, options);
+    vueUtils.setDefaultRouterLink(this.getRouterLink());
+  }
+
+  getRouterLink() {
+    return this.options.RouterLink || vueRouter.RouterLink;
+  }
+
+  setting(key) {
+    return this.options.uiSettings[key];
+  }
+
+  icon(iconType) {
+    return this.options.icons[iconType];
+  }
+
+  getAutoScrollToElementOffsetTop() {
+    let {
+      autoScrollToElementOffsetTop
+    } = this;
+
+    if (typeof autoScrollToElementOffsetTop === 'function') {
+      autoScrollToElementOffsetTop = autoScrollToElementOffsetTop();
+    }
+
+    return autoScrollToElementOffsetTop || 0;
+  }
+
+  getRequiredChip() {
+    const {
+      requiredChip
+    } = this;
+    return requiredChip && requiredChip();
+  }
+
+  dialog(...args) {
+    return this.stack.dialog(...args);
+  }
+
+  alert(...args) {
+    return this.stack.alert(...args);
+  }
+
+  confirm(...args) {
+    return this.stack.confirm(...args);
+  }
+
+  snackbar(...args) {
+    return this.stack.snackbar(...args);
+  }
+
+  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 = vueKit.resolveVStackDynamicInput({ ...options,
+      content: stack => {
+        return vue.createVNode(VForm, {
+          "disableAutoScroll": true,
+          "size": size,
+          "onVnodeMounted": vnode => {
+            form = vnode.component.ctx.form;
+          },
+          "onVnodeBeforeUnmount": () => {
+            form = undefined;
+          },
+          "onSubmit": ev => {
+            stack.resolve(value);
+          }
+        }, {
+          default: () => [vue.createVNode(VTextField, vue.mergeProps(options.input, {
+            "modelValue": value,
+            "onChange": ev => {
+              stack.value = ev;
+              value = ev;
+            }
+          }), null)]
+        });
+      }
+    });
+    return this.dialog(resolved);
+  }
+
 }
 
 class VuiPlugin {
@@ -3624,7 +4034,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;
 
@@ -3692,6 +4102,7 @@ exports.VUI_SWITCH_GROUP_SYMBOL = VUI_SWITCH_GROUP_SYMBOL;
 exports.VUI_SWITCH_SYMBOL = VUI_SWITCH_SYMBOL;
 exports.VUI_TEXTAREA_SYMBOL = VUI_TEXTAREA_SYMBOL;
 exports.VUI_TEXT_FIELD_SYMBOL = VUI_TEXT_FIELD_SYMBOL;
+exports.VUI_WYSIWYG_EDITOR_SYMBOL = VUI_WYSIWYG_EDITOR_SYMBOL;
 exports.VWysiwygEditor = VWysiwygEditor;
 exports.VuiColorProviderInjectionKey = VuiColorProviderInjectionKey;
 exports.VuiControlFieldInjectionKey = VuiControlFieldInjectionKey;
@@ -3699,6 +4110,14 @@ exports.VuiControlInjectionKey = VuiControlInjectionKey;
 exports.VuiInjectionKey = VuiInjectionKey;
 exports.VuiPlugin = VuiPlugin;
 exports.VuiService = VuiService;
+exports.WysiwygBulletListTool = WysiwygBulletListTool;
+exports.WysiwygFormatBoldTool = WysiwygFormatBoldTool;
+exports.WysiwygFormatItalicTool = WysiwygFormatItalicTool;
+exports.WysiwygFormatUnderlineTool = WysiwygFormatUnderlineTool;
+exports.WysiwygHistoryTool = WysiwygHistoryTool;
+exports.WysiwygLinkTool = WysiwygLinkTool;
+exports.WysiwygOrderedListTool = WysiwygOrderedListTool;
+exports.WysiwygTextColorTool = WysiwygTextColorTool;
 exports.configureDataTableDefaults = configureDataTableDefaults;
 exports.createCardProps = createCardProps;
 exports.createControlFieldProviderProps = createControlFieldProviderProps;