@fastkit/vui 0.6.36 → 0.6.40

package/dist/tool/index.js

@@ -18,6 +18,8 @@ const name = 'vui';
 new tinyLogger.TinyLogger(name);
 const VuiError = tinyLogger.createTinyError(name);
 
+const VUI_PACKAGE_DIR = path__default.resolve(__dirname, '../..');
+const STYLE_AFTER_EFFECTS_PATH = path__default.join(VUI_PACKAGE_DIR, 'src/styles/after-effects.scss');
 const COLOR_DUMP_STYLE = `@include dump-color-scheme(true);`;
 const TEMPLATE = `
 /* eslint-disable */
@@ -37,6 +39,7 @@ import { installVuiPlugin as _installVuiPlugin, VuiPluginOptions } from '@fastki
 import { colorScheme } from '<%~ it.colorScheme %>';
 import '<%~ it.mediaMatch %>';
 import './icon-font';
+import '${STYLE_AFTER_EFFECTS_PATH}';
 
 export function installVui(settings: { app: App, router: Router }) {
   _installVuiPlugin(settings.app, {

package/dist/tool/vite-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAwF/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAuJrB"}
+{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA+F/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAuJrB"}

package/dist/vui.cjs.js

@@ -6,8 +6,10 @@ var vueKit = require('@fastkit/vue-kit');
 var vue = require('vue');
 var vueRouter = require('vue-router');
 var vueUtils = require('@fastkit/vue-utils');
+var vueScroller = require('@fastkit/vue-scroller');
 var vueColorScheme = require('@fastkit/vue-color-scheme');
 var vueLoading = require('@fastkit/vue-loading');
+var mediaMatch = require('@fastkit/media-match');
 var iconFont = require('@fastkit/icon-font');
 var helpers = require('@fastkit/helpers');
 var vueAppLayout = require('@fastkit/vue-app-layout');
@@ -22,7 +24,6 @@ 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; }
 
@@ -274,6 +275,169 @@ function useElevation(props, opts = {}) {
     };
 }
 
+function extractRawGridValueClasses(value, prefix, getter) {
+    if (typeof value !== 'object')
+        return `${prefix}${getter ? getter(value) : value}`;
+    return Object.entries(value).map(([breakpoint, breakpointValue]) => {
+        return `${prefix}${getter ? getter(breakpointValue) : breakpointValue}--${breakpoint}`;
+    });
+}
+// export const DEFAULT_MEDIA_MATCH_KEY = MEDIA_MATCH_CONDITIONS[0].key;
+
+const VGridItem = vue.defineComponent({
+  name: 'VGridItem',
+  inheritAttrs: false,
+  props: { ...vueUtils.htmlAttributesPropOptions,
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    ...undefined,
+    align: undefined,
+    justify: undefined,
+    order: undefined
+  },
+
+  setup(props, ctx) {
+    const data = vue.computed(() => {
+      const classes = [];
+      const attrs = { ...ctx.attrs
+      };
+      const {
+        align,
+        justify,
+        order
+      } = props;
+      delete attrs.align;
+      delete attrs.justify;
+      delete attrs.order;
+      align && classes.push(extractRawGridValueClasses(align, 'self-align-'));
+      justify && classes.push(extractRawGridValueClasses(justify, 'self-justify-'));
+      order != null && classes.push(extractRawGridValueClasses(order, 'order-'));
+      mediaMatch.MEDIA_MATCH_CONDITIONS.forEach(({
+        key
+      }) => {
+        const v = attrs[key];
+        delete attrs[key];
+
+        if (v != null) {
+          classes.push(`grid-size-${v}--${key}`);
+        }
+      });
+      return {
+        classes,
+        attrs
+      };
+    });
+    return () => {
+      const TagName = props.tag;
+      const {
+        classes,
+        attrs
+      } = data.value;
+      return vue.createVNode(TagName, vue.mergeProps({
+        "class": ['v-grid-item grid-item', classes]
+      }, attrs), ctx.slots);
+    };
+  }
+
+});
+
+function spacingValueToString(value) {
+  return Number.isInteger(value) ? String(value) : `${value}h`;
+}
+
+const VGridContainer = vue.defineComponent({
+  name: 'VGridContainer',
+  inheritAttrs: false,
+  props: { ...vueUtils.htmlAttributesPropOptions,
+    wrapperTag: {
+      type: String,
+      default: 'div'
+    },
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    spacing: undefined,
+    spacingX: undefined,
+    spacingY: undefined,
+    direction: undefined,
+    wrap: undefined,
+    alignContent: undefined,
+    justifyContent: undefined
+  },
+
+  setup(props, ctx) {
+    const data = vue.computed(() => {
+      const classes = [];
+      const attrs = { ...ctx.attrs
+      };
+      const {
+        spacing,
+        spacingX,
+        spacingY,
+        direction,
+        wrap,
+        alignContent,
+        justifyContent
+      } = props;
+      const wrapperClass = attrs.class;
+      const wrapperStyle = attrs.style;
+      delete attrs.class;
+      delete attrs.style;
+      delete attrs.spacing;
+      delete attrs.spacingX;
+      delete attrs.spacingY;
+      delete attrs.direction;
+      delete attrs.wrap;
+      delete attrs.alignContent;
+      delete attrs.justifyContent; // spacingX = mergeSpacing(spacing, spacingX);
+      // spacingY = mergeSpacing(spacing, spacingY);
+      // if (!spacingX) {
+      //   spacingX = spacing;
+      // }
+      // align &&
+      //   classes.push(extractRawGridItemValueClasses(align, 'self-align-'));
+      // justify &&
+      //   classes.push(extractRawGridItemValueClasses(justify, 'self-justify-'));
+
+      spacing != null && classes.push(extractRawGridValueClasses(spacing, 'grid-spacing-', spacingValueToString));
+      spacingX != null && classes.push(extractRawGridValueClasses(spacingX, 'grid-spacing-x-', spacingValueToString));
+      spacingY != null && classes.push(extractRawGridValueClasses(spacingY, 'grid-spacing-y-', spacingValueToString));
+      direction && classes.push(extractRawGridValueClasses(direction, 'direction-'));
+      wrap && classes.push(extractRawGridValueClasses(wrap, ''));
+      alignContent && classes.push(extractRawGridValueClasses(alignContent, 'align-'));
+      justifyContent && classes.push(extractRawGridValueClasses(justifyContent, 'justify-'));
+      return {
+        wrapperClass,
+        wrapperStyle,
+        classes,
+        attrs
+      };
+    });
+    return () => {
+      const WrapperTag = props.wrapperTag;
+      const TagName = props.tag;
+      const {
+        wrapperClass,
+        wrapperStyle,
+        classes,
+        attrs
+      } = data.value;
+      return vue.createVNode(WrapperTag, {
+        "class": ['v-grid-container-wrapper', wrapperClass],
+        "style": wrapperStyle
+      }, {
+        default: () => [vue.createVNode(TagName, vue.mergeProps({
+          "class": ['v-grid-container grid-container', classes]
+        }, attrs), ctx.slots)]
+      });
+    };
+  }
+
+});
+
 function createPaperBaseProps() {
   return {
     color: String,
@@ -450,7 +614,8 @@ function resolveRawVButtonIcon(raw, type = 'main') {
   }, null);
 }
 
-const vueButtonProps = vueUtils.createPropsOptions({ ...vueColorScheme.colorSchemeProps(),
+const vueButtonProps = vueUtils.createPropsOptions({ ...vueUtils.htmlAttributesPropOptions,
+  ...vueColorScheme.colorSchemeProps(),
   ...vueUtils.navigationableInheritProps,
   spacer: [Boolean, String],
   loading: Boolean,
@@ -995,7 +1160,7 @@ function _isSlot$c(s) {
 
 const VHero = vue.defineComponent({
   name: 'VHero',
-  props: {
+  props: { ...vueUtils.htmlAttributesPropOptions,
     color: {
       type: String,
       default: 'primary'
@@ -1007,7 +1172,8 @@ const VHero = vue.defineComponent({
     hTag: {
       type: String,
       default: 'h1'
-    }
+    },
+    ...vueUtils.defineSlotsProps()
   },
 
   setup(props, ctx) {
@@ -1016,6 +1182,7 @@ const VHero = vue.defineComponent({
 
       const TagName = props.tag;
       const HTagName = props.hTag;
+      const adornment = vueUtils.renderSlotOrEmpty(ctx.slots, 'adornment');
       return vue.createVNode(vueAppLayout.VAppContainer, {
         "pulled": true
       }, {
@@ -1026,7 +1193,9 @@ const VHero = vue.defineComponent({
             "class": "v-hero__title"
           }, _isSlot$c(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
             default: () => [_slot]
-          })]
+          }), adornment && vue.createVNode("div", {
+            "class": "v-hero__adornment"
+          }, [adornment])]
         })]
       });
     };
@@ -2096,7 +2265,10 @@ const VWysiwygEditor = vue.defineComponent({
     tools: {
       type: Array,
       default: () => []
-    }
+    },
+    floatingToolbar: Boolean,
+    disabledMinHeight: Boolean,
+    disabledMaxHeight: Boolean
   },
   emits: { ...vueFormControl.createTextableEmits()
   },
@@ -2126,6 +2298,9 @@ const VWysiwygEditor = vue.defineComponent({
     };
 
     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
@@ -2151,7 +2326,7 @@ const VWysiwygEditor = vue.defineComponent({
           class: 'v-wysiwyg-editor__input__prose'
         }
       }
-    });
+    }); // editor.value.state.doc.content
 
     const focus = (position, options) => {
       return editor.value.chain().focus(position, options);
@@ -2166,7 +2341,7 @@ const VWysiwygEditor = vue.defineComponent({
       editor: editor.value
     }));
 
-    const createTools = (floating = false) => {
+    const createTools = (bubbleMenu = false) => {
       let _slot;
 
       const {
@@ -2175,10 +2350,13 @@ const VWysiwygEditor = vue.defineComponent({
       const {
         value: context
       } = wysiwygContext;
-      const tools = floating ? settings.tools.filter(t => !!t.floating) : settings.tools;
+      const tools = bubbleMenu ? settings.tools.filter(t => !!t.floating) : settings.tools;
       const _editor = editor.value;
-      const variant = vui.setting(floating ? 'containedVariant' : 'plainVariant');
+      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,
@@ -2201,6 +2379,7 @@ const VWysiwygEditor = vue.defineComponent({
 
         if (!iconName) return;
         return vue.createVNode(VButton, {
+          "tabindex": -1,
           "key": key,
           "icon": iconName,
           "onClick": ev => onClick(context, ev),
@@ -2226,7 +2405,10 @@ const VWysiwygEditor = vue.defineComponent({
     return vue.createVNode(VFormControl, {
       "nodeControl": this.nodeControl,
       "focused": this.nodeControl.focused,
-      "class": ['v-wysiwyg-editor', this.classes],
+      "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,
@@ -2240,7 +2422,11 @@ const VWysiwygEditor = vue.defineComponent({
         const {
           editor
         } = this;
-        return vue.createVNode(vue.Fragment, null, [!this.isReadonly && this.createTools(), vue.createVNode(VControlField, {
+        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,
@@ -2252,14 +2438,14 @@ const VWysiwygEditor = vue.defineComponent({
             return vue.createVNode(vue.Fragment, null, [vue.createVNode(vue3.EditorContent, {
               "class": "v-wysiwyg-editor__input__element wysiwyg",
               "editor": editor
-            }, null), !!editor && !this.isReadonly && vue.createVNode(vue3.BubbleMenu, {
+            }, 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 {
@@ -2357,11 +2543,15 @@ const WysiwygHistoryTool = (vui, options) => {
 const WysiwygLinkTool = (vui, options) => {
     const tool = {
         key: 'link',
-        icon: ({ editor }) => {
-            return vui.icon(editor.isActive('link') ? 'editorLinkOff' : 'editorLink');
-        },
-        // icon: vui.icon('editorLink'),
+        // 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({
@@ -2377,7 +2567,6 @@ const WysiwygLinkTool = (vui, options) => {
                 return;
             }
             const range = editor.chain().focus().extendMarkRange('link');
-            console.log(range);
             if (!result) {
                 range.unsetLink().run();
             }
@@ -3842,6 +4031,10 @@ const VToolbarTitle = vue.defineComponent({
 const DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP = -20;
 const DEFAULT_TEXTAREA_ROWS = 3;
 class VuiService {
+  get scroller() {
+    return vueScroller.getDocumentScroller();
+  }
+
   constructor(options, stackService) {
     this.options = options;
     this.configure();
@@ -4050,6 +4243,8 @@ exports.VContentSwitcher = VContentSwitcher;
 exports.VDataTable = VDataTable;
 exports.VDrawerLayout = VDrawerLayout;
 exports.VForm = VForm;
+exports.VGridContainer = VGridContainer;
+exports.VGridItem = VGridItem;
 exports.VHero = VHero;
 exports.VIcon = VIcon;
 exports.VListTile = VListTile;