@fastkit/vui 0.6.34 → 0.6.35

package/dist/vui.cjs.js

@@ -11,8 +11,14 @@ 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 vue3 = require('@tiptap/vue-3');
+var StarterKit = require('@tiptap/starter-kit');
 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'];
 
@@ -479,8 +485,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 +498,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,6 +519,66 @@ const VButton = vue.defineComponent({
 
 });
 
+const VButtonGroup = vue.defineComponent({
+  name: 'VButtonGroup',
+  props: { ...vueColorScheme.colorSchemeProps(),
+    ...createControlProps(),
+    disabled: Boolean
+  },
+
+  setup(props, ctx) {
+    return () => {
+      let buttonLength = 0;
+      const children = (vueUtils.renderSlotOrEmpty(ctx.slots) || []).map(node => {
+        if (!vue.isVNode(node) || node.type !== VButton) {
+          return {
+            isButton: false,
+            node
+          };
+        }
+
+        buttonLength++;
+        return {
+          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) {
+          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$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
@@ -1017,9 +1085,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;
@@ -1974,6 +2044,86 @@ const VTextarea = vue.defineComponent({
 
 });
 
+const VWysiwygEditor = vue.defineComponent({
+  name: 'VWysiwygEditor',
+  props: { // ...props,
+    ...vueKit.createFormControlProps(),
+    ...createControlFieldProps(),
+    ...createControlFieldProviderProps(),
+    ...createControlProps(),
+    ...vueKit.defineSlotsProps()
+  },
+
+  // emits,
+  setup(props, ctx) {
+    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);
+
+    return {
+      editor // ...inputControl.expose(),
+      // ...control,
+
+    };
+  },
+
+  render() {
+    return vue.createVNode(VFormControl, {
+      "nodeControl": this.nodeControl,
+      "label": this.label,
+      "hint": this.hint,
+      "hiddenInfo": this.hiddenInfo,
+      "onClickLabel": ev => {// this.focus();
+      }
+    }, { ...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} />;
+      // },
+
+    });
+  }
+
+});
+
 const {
   props,
   emits
@@ -3500,6 +3650,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,6 +3692,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.VWysiwygEditor = VWysiwygEditor;
 exports.VuiColorProviderInjectionKey = VuiColorProviderInjectionKey;
 exports.VuiControlFieldInjectionKey = VuiControlFieldInjectionKey;
 exports.VuiControlInjectionKey = VuiControlInjectionKey;

package/dist/vui.cjs.prod.js

@@ -11,8 +11,14 @@ 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 vue3 = require('@tiptap/vue-3');
+var StarterKit = require('@tiptap/starter-kit');
 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'];
 
@@ -479,8 +485,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 +498,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,6 +519,66 @@ const VButton = vue.defineComponent({
 
 });
 
+const VButtonGroup = vue.defineComponent({
+  name: 'VButtonGroup',
+  props: { ...vueColorScheme.colorSchemeProps(),
+    ...createControlProps(),
+    disabled: Boolean
+  },
+
+  setup(props, ctx) {
+    return () => {
+      let buttonLength = 0;
+      const children = (vueUtils.renderSlotOrEmpty(ctx.slots) || []).map(node => {
+        if (!vue.isVNode(node) || node.type !== VButton) {
+          return {
+            isButton: false,
+            node
+          };
+        }
+
+        buttonLength++;
+        return {
+          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) {
+          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$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
@@ -1017,9 +1085,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;
@@ -1974,6 +2044,86 @@ const VTextarea = vue.defineComponent({
 
 });
 
+const VWysiwygEditor = vue.defineComponent({
+  name: 'VWysiwygEditor',
+  props: { // ...props,
+    ...vueKit.createFormControlProps(),
+    ...createControlFieldProps(),
+    ...createControlFieldProviderProps(),
+    ...createControlProps(),
+    ...vueKit.defineSlotsProps()
+  },
+
+  // emits,
+  setup(props, ctx) {
+    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);
+
+    return {
+      editor // ...inputControl.expose(),
+      // ...control,
+
+    };
+  },
+
+  render() {
+    return vue.createVNode(VFormControl, {
+      "nodeControl": this.nodeControl,
+      "label": this.label,
+      "hint": this.hint,
+      "hiddenInfo": this.hiddenInfo,
+      "onClickLabel": ev => {// this.focus();
+      }
+    }, { ...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} />;
+      // },
+
+    });
+  }
+
+});
+
 const {
   props,
   emits
@@ -3500,6 +3650,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,6 +3692,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.VWysiwygEditor = VWysiwygEditor;
 exports.VuiColorProviderInjectionKey = VuiColorProviderInjectionKey;
 exports.VuiControlFieldInjectionKey = VuiControlFieldInjectionKey;
 exports.VuiControlInjectionKey = VuiControlInjectionKey;

package/dist/vui.css

@@ -965,13 +965,14 @@ thead th {
 .v-button--rounded {
   --padding: 0;
   min-width: 0;
+  aspect-ratio: 1/1;
   margin: calc(var(--root-em) * 0.125) calc(var(--root-em) * 0.125);
   border-radius: 50%;
-  aspect-ratio: 1/1;
   --height: auto;
 }
 .v-button--icon {
-  min-width: 0;
+  min-width: 1.9285714286em;
+  margin: calc(var(--root-em) * 0.125) calc(var(--root-em) * 0.125);
   --height: 1.9285714286em;
   --padding: 0em;
 }
@@ -1010,6 +1011,25 @@ thead th {
   z-index: 1;
   transform: translate(-50%, -50%);
 }
+.v-button-group {
+  display: inline-flex;
+  align-items: stretch;
+}
+.v-button-group__item {
+  position: relative;
+  margin: 0;
+}
+.v-button-group__item--has-left {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.v-button-group__item--has-right {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.v-button-group__item:focus {
+  z-index: 1;
+}
 .v-pagination {
   --pagination-size: var(--pagination-item-size);
   --pagination-margin: var(--pagination-item-margin);
@@ -1708,6 +1728,21 @@ thead th {
   font-style: italic;
   color: var(--control-disabled-color);
 }
+.v-wysiwyg-editor__input {
+  cursor: text;
+}
+.v-wysiwyg-editor__input__element {
+  width: 100%;
+  min-width: 0;
+  padding: 8px 0;
+  margin: 0;
+}
+.v-wysiwyg-editor__input__element .ProseMirror {
+  outline: none;
+}
+.v-wysiwyg-editor__input__element p {
+  margin: 0;
+}
 .v-tabs {
   position: relative;
   width: 100%;

package/dist/vui.d.ts

@@ -6,6 +6,7 @@ import { ComponentOptionsMixin } from 'vue';
 import { ComputedRef } from 'vue';
 import { CSSProperties } from 'vue';
 import { DefineComponent } from 'vue';
+import { Editor } from '@tiptap/vue-3';
 import { EmitsOptions } from 'vue';
 import { ExtractPropInput } from '@fastkit/vue-utils';
 import { ExtractPropTypes } from 'vue';
@@ -879,6 +880,38 @@ export declare const VButton: DefineComponent<{
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
 }>;
 
+export declare const VButtonGroup: DefineComponent<{
+    disabled: BooleanConstructor;
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        validator: (value: any) => boolean;
+    };
+    variant: PropType<ColorVariant>;
+    theme: PropType<ThemeName>;
+    color: PropType<ScopeName>;
+    textColor: PropType<PaletteName>;
+    borderColor: PropType<PaletteName>;
+}, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{
+    disabled?: unknown;
+    size?: unknown;
+    variant?: unknown;
+    theme?: unknown;
+    color?: unknown;
+    textColor?: unknown;
+    borderColor?: unknown;
+} & {
+    disabled: boolean;
+} & {
+    theme?: ThemeName | undefined;
+    color?: ScopeName | undefined;
+    textColor?: PaletteName | undefined;
+    borderColor?: PaletteName | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    variant?: ColorVariant | undefined;
+}>, {
+    disabled: boolean;
+}>;
+
 export declare type VButtonIcon = () => VNodeChild;
 
 export declare type VButtonProps = ExtractPropInput<typeof vueButtonProps>;
@@ -4080,6 +4113,114 @@ export declare interface VuiServiceUISettings {
 
 export declare type VuiVNodeResolver = () => VNodeChild;
 
+export declare const VWysiwygEditor: DefineComponent<{
+    'v-slots': PropType<ResolveRawSlots<FormControlSlots & InputBoxSlots>>;
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        validator: (value: any) => boolean;
+    };
+    variant: {
+        type: PropType<"flat" | "outlined" | "filled">;
+        validator: (value: any) => boolean;
+    };
+    startAdornment: PropType<VNodeChildOrSlot<any>>;
+    endAdornment: PropType<VNodeChildOrSlot<any>>;
+    tabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    nodeControl: PropType<FormNodeControl<any, any>>;
+    label: PropType<VNodeChildOrSlot<any>>;
+    hint: PropType<VNodeChildOrSlot<any>>;
+    infoAppends: PropType<VNodeChildOrSlot<any>>;
+    validating: BooleanConstructor;
+    pending: BooleanConstructor;
+    focused: BooleanConstructor;
+    dirty: BooleanConstructor;
+    pristine: BooleanConstructor;
+    errors: {
+        type: PropType<FormNodeError[]>;
+        default: () => FormNodeError[];
+    };
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    touched: BooleanConstructor;
+    untouched: BooleanConstructor;
+    required: BooleanConstructor;
+    invalid: BooleanConstructor;
+    valid: BooleanConstructor;
+    hiddenInfo: BooleanConstructor;
+}, {
+    editor: Ref<Editor>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{
+    'v-slots'?: unknown;
+    size?: unknown;
+    variant?: unknown;
+    startAdornment?: unknown;
+    endAdornment?: unknown;
+    tabindex?: unknown;
+    nodeControl?: unknown;
+    label?: unknown;
+    hint?: unknown;
+    infoAppends?: unknown;
+    validating?: unknown;
+    pending?: unknown;
+    focused?: unknown;
+    dirty?: unknown;
+    pristine?: unknown;
+    errors?: unknown;
+    disabled?: unknown;
+    readonly?: unknown;
+    touched?: unknown;
+    untouched?: unknown;
+    required?: unknown;
+    invalid?: unknown;
+    valid?: unknown;
+    hiddenInfo?: unknown;
+} & {
+    validating: boolean;
+    pending: boolean;
+    focused: boolean;
+    dirty: boolean;
+    pristine: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    touched: boolean;
+    untouched: boolean;
+    required: boolean;
+    invalid: boolean;
+    valid: boolean;
+    hiddenInfo: boolean;
+    errors: FormNodeError[];
+    tabindex: string | number;
+} & {
+    nodeControl?: FormNodeControl<any, any> | undefined;
+    label?: VNodeChildOrSlot<any>;
+    hint?: VNodeChildOrSlot<any>;
+    infoAppends?: VNodeChildOrSlot<any>;
+    startAdornment?: VNodeChildOrSlot<any>;
+    endAdornment?: VNodeChildOrSlot<any>;
+    variant?: "flat" | "outlined" | "filled" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    "v-slots"?: ResolveRawSlots<FormControlSlots & InputBoxSlots> | undefined;
+}>, {
+    validating: boolean;
+    pending: boolean;
+    focused: boolean;
+    dirty: boolean;
+    pristine: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    touched: boolean;
+    untouched: boolean;
+    required: boolean;
+    invalid: boolean;
+    valid: boolean;
+    hiddenInfo: boolean;
+    errors: FormNodeError[];
+    tabindex: string | number;
+}>;
+
 
 export * from "@fastkit/vue-kit";
 export * from "@fastkit/vue-loading";