@fastkit/vui 0.6.36 → 0.6.40

package/dist/vui.cjs.prod.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;

package/dist/vui.css

@@ -346,7 +346,7 @@ template {
 
 :root {
   --root-em: 16px;
-  --root-spacing: 4px;
+  --root-spacing: 8px;
   --transition-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
   --transition-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);
   --transition-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);
@@ -431,7 +431,7 @@ template {
   --control-label-height: 1.4375em;
   --control-message-color: rgba(0, 0, 0, 0.6);
   --control-message-font-size: 0.75em;
-  --control-message-horizontal-margin: var(--root-spacing);
+  --control-message-horizontal-margin: calc(var(--root-spacing) * 0.5);
   --control-checkable-outer-size: 2em;
   --control-checkable-icon-size: 1em;
   --control-checkable-faux-scale: 1.2;
@@ -440,6 +440,12 @@ template {
   --control-switch-width: 3.625em;
   --control-switch-track-width: 2.125em;
   --control-switch-track-height: 0.875em;
+  --wysiwyg-min-height-sm: 3em;
+  --wysiwyg-min-height-md: 6em;
+  --wysiwyg-min-height-lg: 9em;
+  --wysiwyg-max-height-sm: 9em;
+  --wysiwyg-max-height-md: 13em;
+  --wysiwyg-max-height-lg: 16em;
   --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
   --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
   --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);
@@ -585,8 +591,7 @@ body {
   font-family: var(--typo-font);
 }
 
-h1,
-.text-h1 {
+h1 {
   font-size: var(--typo-h1-size);
   font-weight: var(--typo-h1-weight);
   line-height: var(--typo-h1-height);
@@ -595,8 +600,7 @@ h1,
   color: var(--typo-h1-color);
 }
 
-h2,
-.text-h2 {
+h2 {
   font-size: var(--typo-h2-size);
   font-weight: var(--typo-h2-weight);
   line-height: var(--typo-h2-height);
@@ -605,8 +609,7 @@ h2,
   color: var(--typo-h2-color);
 }
 
-h3,
-.text-h3 {
+h3 {
   font-size: var(--typo-h3-size);
   font-weight: var(--typo-h3-weight);
   line-height: var(--typo-h3-height);
@@ -615,8 +618,7 @@ h3,
   color: var(--typo-h3-color);
 }
 
-h4,
-.text-h4 {
+h4 {
   font-size: var(--typo-h4-size);
   font-weight: var(--typo-h4-weight);
   line-height: var(--typo-h4-height);
@@ -625,8 +627,7 @@ h4,
   color: var(--typo-h4-color);
 }
 
-h5,
-.text-h5 {
+h5 {
   font-size: var(--typo-h5-size);
   font-weight: var(--typo-h5-weight);
   line-height: var(--typo-h5-height);
@@ -635,8 +636,7 @@ h5,
   color: var(--typo-h5-color);
 }
 
-h6,
-.text-h6 {
+h6 {
   font-size: var(--typo-h6-size);
   font-weight: var(--typo-h6-weight);
   line-height: var(--typo-h6-height);
@@ -837,6 +837,9 @@ thead th {
 .wysiwyg table:last-child {
   margin-bottom: 0;
 }
+.wysiwyg p {
+  margin: 0;
+}
 .v-form-selector__body {
   display: block;
 }
@@ -848,6 +851,7 @@ thead th {
 .v-form-control {
   display: flex;
   flex-direction: column;
+  max-width: 100%;
   margin: var(--control-horizontal-margin) 0;
   --my-label-color: var(--control-label-color);
   --my-message-color: var(--control-message-color);
@@ -885,6 +889,13 @@ thead th {
   flex: 0 1;
   margin-left: auto;
 }
+.v-grid-item {
+  display: block;
+}
+.v-grid-container {
+  display: flex;
+  flex-wrap: wrap;
+}
 .v-paper {
   --paper-radius: var(--control-field-radius);
   color: var(--paper-text-color);
@@ -978,6 +989,9 @@ thead th {
 .v-button--plain {
   color: inherit !important;
 }
+.v-button--plain[disabled] {
+  opacity: 0.5;
+}
 .v-button--sm {
   font-size: calc(var(--root-em) * 0.75);
 }
@@ -1232,18 +1246,26 @@ thead th {
 .v-hero {
   --hero-background-color: var(--main-color);
   --hero-text-color: var(--text-color);
+  display: flex;
+  align-items: center;
   padding: 20px 30px;
   margin: 0;
   color: var(--hero-text-color);
   background-color: var(--hero-background-color);
 }
 .v-hero__title {
+  flex: 1 1 100%;
   margin: 0;
   font-size: 1.75rem;
   font-weight: 300;
   line-height: 1;
   color: inherit;
 }
+.v-hero__adornment {
+  flex: 0 0 auto;
+  padding-left: 10px;
+  margin-left: auto;
+}
 .v-navigation-item--opened {
   --tile-background: var(--tile-active-background);
   --tile-text-color: var(--tile-text-active-color);
@@ -1753,6 +1775,32 @@ thead th {
   font-style: italic;
   color: var(--control-disabled-color);
 }
+.v-wysiwyg-editor--sm {
+  --min-height: var(--wysiwyg-min-height-sm);
+  --max-height: var(--wysiwyg-max-height-sm);
+}
+.v-wysiwyg-editor--md {
+  --min-height: var(--wysiwyg-min-height-md);
+  --max-height: var(--wysiwyg-max-height-md);
+}
+.v-wysiwyg-editor--lg {
+  --min-height: var(--wysiwyg-min-height-lg);
+  --max-height: var(--wysiwyg-max-height-lg);
+}
+.v-wysiwyg-editor__wrapper {
+  position: relative;
+}
+.v-wysiwyg-editor__floating-toolbar {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  z-index: 1;
+}
+.v-wysiwyg-editor__body {
+  position: relative;
+  max-height: var(--max-height);
+  overflow: auto;
+}
 .v-wysiwyg-editor__input {
   cursor: text;
 }
@@ -1762,11 +1810,15 @@ thead th {
   padding: 8px 0;
   margin: 0;
 }
-.v-wysiwyg-editor__input__element .ProseMirror {
+.v-wysiwyg-editor__input__prose {
+  min-height: var(--min-height);
   outline: none;
 }
-.v-wysiwyg-editor__input__element p {
-  margin: 0;
+.v-wysiwyg-editor--disabled-min-heihgt .v-wysiwyg-editor__input__prose {
+  min-height: 0;
+}
+.v-wysiwyg-editor--disabled-max-heihgt .v-wysiwyg-editor__body {
+  max-height: none;
 }
 .v-tabs {
   position: relative;