@fastkit/vui 0.6.33 → 0.6.37

package/dist/vui.cjs.prod.js

@@ -3,16 +3,31 @@
 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; }
+
+var StarterKit__default = /*#__PURE__*/_interopDefaultLegacy(StarterKit);
+
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
 const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'];
 
@@ -22,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';
@@ -479,8 +495,10 @@ const VButton = vue.defineComponent({
     });
     const isPlain = vue.computed(() => color.variant.value.value === vui.setting('plainVariant') && color.color.value.value === defaults.color);
     const isLoading = vue.computed(() => props.loading); // const isDisabled = computed(() => props.disabled);
+    // const isRounded = computed(() =>
+    //   props.rounded != null ? props.rounded : !!icon.value,
+    // );
 
-    const isRounded = vue.computed(() => props.rounded || !!icon.value);
     const spacer = vue.computed(() => {
       const _spacer = props.spacer;
       if (!_spacer) return;
@@ -490,7 +508,7 @@ const VButton = vue.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 () => {
@@ -511,7 +529,64 @@ const VButton = vue.defineComponent({
 
 });
 
-function _isSlot$c(s) {
+const VButtonGroup = vue.defineComponent({
+  name: 'VButtonGroup',
+  props: { ...vueColorScheme.colorSchemeProps(),
+    ...createControlProps(),
+    disabled: Boolean
+  },
+
+  setup(props, ctx) {
+    return () => {
+      let buttonLength = 0;
+      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,
+            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 vue.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 vue.createVNode("div", {
+        "class": "v-button-group"
+      }, [$children]);
+    };
+  }
+
+});
+
+function _isSlot$d(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -759,7 +834,7 @@ const VPagination = vue.defineComponent({
           "class": classes,
           "to": to,
           "key": key
-        }, _isSlot$c(children) ? children : {
+        }, _isSlot$d(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -914,7 +989,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);
 }
 
@@ -949,7 +1024,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]
           })]
         })]
@@ -959,7 +1034,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);
 }
 
@@ -994,7 +1069,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return vue.createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$a(label) ? label : {
+  }, _isSlot$b(label) ? label : {
     default: () => [label]
   });
 }
@@ -1017,9 +1092,11 @@ const VNavigationItem = vue.defineComponent({
     const to = vue.computed(() => ctx.attrs.to);
     const match = vue.computed(() => {
       const {
-        match,
-        to
+        match
       } = props;
+      const {
+        to
+      } = ctx.attrs;
       if (match) return match;
       if (!to) return;
       if (typeof to === 'string') return to;
@@ -1145,7 +1222,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", {
@@ -1325,7 +1402,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);
 }
 
@@ -1337,7 +1414,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]
   })
 });
@@ -1389,7 +1466,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);
 }
 
@@ -1400,7 +1477,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]
   })
 });
@@ -1462,7 +1539,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);
 }
 
@@ -1474,7 +1551,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]
   })
 });
@@ -1857,15 +1934,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) {
@@ -1974,6 +2056,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(),
+    tools: {
+      type: Array,
+      default: () => []
+    },
+    floatingToolbar: Boolean,
+    disabledMinHeight: Boolean,
+    disabledMaxHeight: Boolean
+  },
+  emits: { ...vueFormControl.createTextableEmits()
+  },
+
+  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({
+      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
+
+    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('start', {
+          scrollIntoView: true
+        });
+      }
+    }, { ...this.$slots,
+      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
@@ -1984,7 +2456,8 @@ const VForm = vue.defineComponent({
   name: 'VForm',
   props: { ...props,
     ...createControlProps(),
-    ...vueKit.defineSlotsProps()
+    ...vueKit.defineSlotsProps(),
+    disableAutoScroll: Boolean
   },
   emits,
 
@@ -1993,6 +2466,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
@@ -3384,53 +3858,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 {
@@ -3474,7 +4033,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;
 
@@ -3500,6 +4059,7 @@ exports.PAGINATION_ALIGNS = PAGINATION_ALIGNS;
 exports.VApp = VApp;
 exports.VBreadcrumbs = VBreadcrumbs;
 exports.VButton = VButton;
+exports.VButtonGroup = VButtonGroup;
 exports.VCard = VCard;
 exports.VCardActions = VCardActions;
 exports.VCardContent = VCardContent;
@@ -3541,12 +4101,22 @@ 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;
 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;