@fastkit/vui 0.6.31 → 0.6.35

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";

package/dist/vui.esm-bundler.js

@@ -3,13 +3,15 @@ export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar } from '@fastkit/vue-kit';
 import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
 import { createPropsOptions as createPropsOptions$1, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableInheritProps, VLink, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
-import { inject, computed, provide, defineComponent, createVNode, mergeProps, ref, watch, withDirectives, createTextVNode, isVNode, Fragment, vShow, vModelSelect, onMounted, onBeforeUnmount, onBeforeUpdate, Transition } from 'vue';
+import { inject, computed, provide, defineComponent, createVNode, mergeProps, isVNode, cloneVNode, ref, watch, withDirectives, createTextVNode, Fragment, vShow, onBeforeUpdate, vModelSelect, onMounted, onBeforeUnmount, Transition } from 'vue';
 import { useScopeColorClass, colorSchemeProps, useColorClasses, toScopeColorClass } from '@fastkit/vue-color-scheme';
 import { VProgressCircular } from '@fastkit/vue-loading';
 export * from '@fastkit/vue-loading';
 export { ICON_NAMES } from '@fastkit/icon-font';
 import { isPromise } from '@fastkit/helpers';
 import { VAppContainer, VAppLayoutControl } from '@fastkit/vue-app-layout';
+import { useEditor, EditorContent, BubbleMenu } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
 import { getDocumentScroller as getDocumentScroller$1 } from '@fastkit/vue-scroller';
 
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
@@ -478,8 +480,10 @@ const VButton = defineComponent({
     });
     const isPlain = computed(() => color.variant.value.value === vui.setting('plainVariant') && color.color.value.value === defaults.color);
     const isLoading = computed(() => props.loading); // const isDisabled = computed(() => props.disabled);
+    // const isRounded = computed(() =>
+    //   props.rounded != null ? props.rounded : !!icon.value,
+    // );
 
-    const isRounded = computed(() => props.rounded || !!icon.value);
     const spacer = computed(() => {
       const _spacer = props.spacer;
       if (!_spacer) return;
@@ -489,7 +493,7 @@ const VButton = 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 () => {
@@ -510,6 +514,66 @@ const VButton = defineComponent({
 
 });
 
+const VButtonGroup = defineComponent({
+  name: 'VButtonGroup',
+  props: { ...colorSchemeProps(),
+    ...createControlProps(),
+    disabled: Boolean
+  },
+
+  setup(props, ctx) {
+    return () => {
+      let buttonLength = 0;
+      const children = (renderSlotOrEmpty$1(ctx.slots) || []).map(node => {
+        if (!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 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 createVNode("div", {
+        "class": "v-button-group"
+      }, [$children]);
+    };
+  }
+
+});
+
 function _isSlot$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
@@ -840,9 +904,9 @@ const VListTile = defineComponent({
       return icon;
     });
     const endIcon = computed(() => resolveRawIconProp(false, props.endIcon));
-    const hasTo = computed(() => !!props.to);
+    const hasTo = computed(() => !!ctx.attrs.to);
     const link = useLink({
-      to: props.to || ''
+      to: ctx.attrs.to || ''
     });
     const isActive = computed(() => {
       if (!hasTo.value) return false;
@@ -964,7 +1028,11 @@ function _isSlot$a(s) {
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String
+    match: String // key: {
+    //   type: [String, Number],
+    //   required: true,
+    // },
+
   };
 }
 function resolveNavigationItemInput(input) {
@@ -1009,12 +1077,14 @@ const VNavigationItem = defineComponent({
       const c = props.children;
       return c && c.length ? c : undefined;
     });
-    const to = computed(() => props.to);
+    const to = computed(() => ctx.attrs.to);
     const match = computed(() => {
       const {
-        match,
-        to
+        match
       } = props;
+      const {
+        to
+      } = ctx.attrs;
       if (match) return match;
       if (!to) return;
       if (typeof to === 'string') return to;
@@ -1084,6 +1154,7 @@ const VNavigationItem = defineComponent({
     });
 
     function open() {
+      if (!children.value) return;
       opened.value = true;
     }
 
@@ -1097,9 +1168,13 @@ const VNavigationItem = 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 => {
@@ -1121,6 +1196,9 @@ const VNavigationItem = defineComponent({
       ctx.emit('changeActive', isActive);
     };
 
+    ctx.expose({
+      close
+    });
     return () => {
       let _slot;
 
@@ -1172,6 +1250,28 @@ const VNavigation = defineComponent({
       const c = props.caption;
       return typeof c === 'function' ? c() : c;
     });
+    const itemsRef = ref([]);
+    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 createVNode("nav", {
@@ -1180,7 +1280,17 @@ const VNavigation = 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);
+          }
+        }
       }))]);
     };
   }
@@ -1929,6 +2039,86 @@ const VTextarea = defineComponent({
 
 });
 
+const VWysiwygEditor = defineComponent({
+  name: 'VWysiwygEditor',
+  props: { // ...props,
+    ...createFormControlProps(),
+    ...createControlFieldProps(),
+    ...createControlFieldProviderProps(),
+    ...createControlProps(),
+    ...defineSlotsProps()
+  },
+
+  // emits,
+  setup(props, ctx) {
+    const editor = useEditor({
+      content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
+      extensions: [StarterKit]
+    }); // const vui = useVui();
+    // const inputControl = useTiptapControl(props, ctx, {
+    //   nodeType: VUI_TEXTAREA_SYMBOL,
+    //   defaultRows: vui.tiptapRows,
+    // });
+    // const control = useControl(props);
+    // useControlField(props);
+
+    return {
+      editor // ...inputControl.expose(),
+      // ...control,
+
+    };
+  },
+
+  render() {
+    return createVNode(VFormControl, {
+      "nodeControl": this.nodeControl,
+      "label": this.label,
+      "hint": this.hint,
+      "hiddenInfo": this.hiddenInfo,
+      "onClickLabel": ev => {// this.focus();
+      }
+    }, { ...this.$slots,
+      default: () => createVNode(VControlField, {
+        "class": "v-wysiwyg-editor__input",
+        "autoHeight": true,
+        "startAdornment": this.startAdornment,
+        "endAdornment": this.endAdornment
+      }, { ...this.$slots,
+        default: () => {
+          const {
+            editor
+          } = this;
+          return createVNode(Fragment, null, [createVNode(EditorContent, {
+            "class": "v-wysiwyg-editor__input__element wysiwyg",
+            "editor": editor
+          }, null), !!editor && createVNode(BubbleMenu, {
+            "class": "v-wysiwyg-editor__bubble-menu",
+            "editor": editor
+          }, {
+            default: () => [createVNode(VButton, {
+              "size": "sm",
+              "onClick": () => {
+                editor.chain().focus().toggleBold().run();
+              }
+            }, {
+              default: () => [createTextVNode("Bold")]
+            })]
+          })]);
+        } // this.tiptapControl.createInputElement({
+        //   class: 'v-wysiwyg-editor__input__element',
+        // }),
+
+      }) // infoAppends: () => {
+      //   const { counterResult } = this;
+      //   if (!counterResult) return;
+      //   return <VTextCounter {...counterResult} />;
+      // },
+
+    });
+  }
+
+});
+
 const {
   props,
   emits
@@ -3445,4 +3635,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VBreadcrumbs, VButton, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VBreadcrumbs, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };