@fastkit/vui 0.6.31 → 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);
 }
@@ -841,9 +909,9 @@ const VListTile = vue.defineComponent({
       return icon;
     });
     const endIcon = vue.computed(() => resolveRawIconProp(false, props.endIcon));
-    const hasTo = vue.computed(() => !!props.to);
+    const hasTo = vue.computed(() => !!ctx.attrs.to);
     const link = vueRouter.useLink({
-      to: props.to || ''
+      to: ctx.attrs.to || ''
     });
     const isActive = vue.computed(() => {
       if (!hasTo.value) return false;
@@ -965,7 +1033,11 @@ function _isSlot$a(s) {
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String
+    match: String // key: {
+    //   type: [String, Number],
+    //   required: true,
+    // },
+
   };
 }
 function resolveNavigationItemInput(input) {
@@ -1010,12 +1082,14 @@ const VNavigationItem = vue.defineComponent({
       const c = props.children;
       return c && c.length ? c : undefined;
     });
-    const to = vue.computed(() => props.to);
+    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;
@@ -1085,6 +1159,7 @@ const VNavigationItem = vue.defineComponent({
     });
 
     function open() {
+      if (!children.value) return;
       opened.value = true;
     }
 
@@ -1098,9 +1173,13 @@ const VNavigationItem = vue.defineComponent({
 
     const onClick = ev => {
       if (!to.value) {
-        toggle();
-      } // ctx.emit('click', ev);
+        return toggle();
+      }
 
+      open(); // if (!to.value) {
+      //   toggle();
+      // }
+      // ctx.emit('click', ev);
     };
 
     const onChangeActive = isActive => {
@@ -1122,6 +1201,9 @@ const VNavigationItem = vue.defineComponent({
       ctx.emit('changeActive', isActive);
     };
 
+    ctx.expose({
+      close
+    });
     return () => {
       let _slot;
 
@@ -1173,6 +1255,28 @@ const VNavigation = vue.defineComponent({
       const c = props.caption;
       return typeof c === 'function' ? c() : c;
     });
+    const itemsRef = vue.ref([]);
+    vue.onBeforeUpdate(() => {
+      itemsRef.value = [];
+    });
+
+    function setItemRef(item, itemRef) {
+      itemsRef.value.push({
+        key: item.key,
+        ref: itemRef
+      });
+    }
+
+    function onItemActivated(item) {
+      itemsRef.value.forEach(({
+        key,
+        ref
+      }) => {
+        if (key === item.key) return;
+        ref.close();
+      });
+    }
+
     return () => {
       const $caption = caption.value;
       return vue.createVNode("nav", {
@@ -1181,7 +1285,17 @@ const VNavigation = vue.defineComponent({
         "class": "v-navigation__caption"
       }, [$caption]), items.value.map(item => renderNavigationItemInput(item, {
         class: 'v-navigation__item',
-        startIconEmptySpace: startIconEmptySpace.value
+        startIconEmptySpace: startIconEmptySpace.value,
+        ref: ref => {
+          setItemRef(item, ref);
+        },
+        onChangeActive: isActive => {
+          if (isActive
+          /* && item.children && item.children.length*/
+          ) {
+            onItemActivated(item);
+          }
+        }
       }))]);
     };
   }
@@ -1930,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
@@ -3456,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;
@@ -3497,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);
 }
@@ -841,9 +909,9 @@ const VListTile = vue.defineComponent({
       return icon;
     });
     const endIcon = vue.computed(() => resolveRawIconProp(false, props.endIcon));
-    const hasTo = vue.computed(() => !!props.to);
+    const hasTo = vue.computed(() => !!ctx.attrs.to);
     const link = vueRouter.useLink({
-      to: props.to || ''
+      to: ctx.attrs.to || ''
     });
     const isActive = vue.computed(() => {
       if (!hasTo.value) return false;
@@ -965,7 +1033,11 @@ function _isSlot$a(s) {
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String
+    match: String // key: {
+    //   type: [String, Number],
+    //   required: true,
+    // },
+
   };
 }
 function resolveNavigationItemInput(input) {
@@ -1010,12 +1082,14 @@ const VNavigationItem = vue.defineComponent({
       const c = props.children;
       return c && c.length ? c : undefined;
     });
-    const to = vue.computed(() => props.to);
+    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;
@@ -1085,6 +1159,7 @@ const VNavigationItem = vue.defineComponent({
     });
 
     function open() {
+      if (!children.value) return;
       opened.value = true;
     }
 
@@ -1098,9 +1173,13 @@ const VNavigationItem = vue.defineComponent({
 
     const onClick = ev => {
       if (!to.value) {
-        toggle();
-      } // ctx.emit('click', ev);
+        return toggle();
+      }
 
+      open(); // if (!to.value) {
+      //   toggle();
+      // }
+      // ctx.emit('click', ev);
     };
 
     const onChangeActive = isActive => {
@@ -1122,6 +1201,9 @@ const VNavigationItem = vue.defineComponent({
       ctx.emit('changeActive', isActive);
     };
 
+    ctx.expose({
+      close
+    });
     return () => {
       let _slot;
 
@@ -1173,6 +1255,28 @@ const VNavigation = vue.defineComponent({
       const c = props.caption;
       return typeof c === 'function' ? c() : c;
     });
+    const itemsRef = vue.ref([]);
+    vue.onBeforeUpdate(() => {
+      itemsRef.value = [];
+    });
+
+    function setItemRef(item, itemRef) {
+      itemsRef.value.push({
+        key: item.key,
+        ref: itemRef
+      });
+    }
+
+    function onItemActivated(item) {
+      itemsRef.value.forEach(({
+        key,
+        ref
+      }) => {
+        if (key === item.key) return;
+        ref.close();
+      });
+    }
+
     return () => {
       const $caption = caption.value;
       return vue.createVNode("nav", {
@@ -1181,7 +1285,17 @@ const VNavigation = vue.defineComponent({
         "class": "v-navigation__caption"
       }, [$caption]), items.value.map(item => renderNavigationItemInput(item, {
         class: 'v-navigation__item',
-        startIconEmptySpace: startIconEmptySpace.value
+        startIconEmptySpace: startIconEmptySpace.value,
+        ref: ref => {
+          setItemRef(item, ref);
+        },
+        onChangeActive: isActive => {
+          if (isActive
+          /* && item.children && item.children.length*/
+          ) {
+            onItemActivated(item);
+          }
+        }
       }))]);
     };
   }
@@ -1930,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
@@ -3456,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;
@@ -3497,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;