@fastkit/vui 0.7.43 → 0.7.47

package/dist/vui.cjs.js

@@ -9,8 +9,8 @@ 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 iconFont = require('@fastkit/icon-font');
 var helpers = require('@fastkit/helpers');
+var iconFont = require('@fastkit/icon-font');
 var vueAppLayout = require('@fastkit/vue-app-layout');
 var vueFormControl = require('@fastkit/vue-form-control');
 var vue3 = require('@tiptap/vue-3');
@@ -355,6 +355,9 @@ function defineFormSelectorComponent(opts) {
     },
 
     render() {
+      const {
+        selectorControl
+      } = this;
       return vue.createVNode(VFormControl, {
         "nodeControl": this.nodeControl,
         "focused": this.nodeControl.focused,
@@ -369,14 +372,20 @@ function defineFormSelectorComponent(opts) {
       }, { ...this.$slots,
         default: () => vue.createVNode("div", {
           "class": "v-form-selector__body"
-        }, [this.propItems.map(attrs => itemRenderer({
-          attrs: { ...attrs,
-            key: attrs.value
-          },
-          slots: {
-            default: () => attrs.label(this.selectorControl)
-          }
-        })), vueKit.renderSlotOrEmpty(this.$slots, 'default')])
+        }, [this.propItems.map(attrs => {
+          const selected = selectorControl.isSelected(attrs.value);
+          return itemRenderer({
+            selected,
+            control: selectorControl,
+            attrs: { ...attrs,
+              modelValue: selected,
+              key: attrs.value
+            },
+            slots: {
+              default: () => attrs.label(this.selectorControl)
+            }
+          });
+        }), vueKit.renderSlotOrEmpty(this.$slots, 'default')])
       });
     }
 
@@ -400,6 +409,248 @@ function useElevation(props, opts = {}) {
     };
 }
 
+function _isSlot$e(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const VSkeltonLoaderBone = vue.defineComponent({
+  name: 'VSkeltonLoaderBone',
+  inheritAttrs: false,
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+
+  setup(props, ctx) {
+    return () => {
+      let _slot;
+
+      const TagName = props.tag;
+      return vue.createVNode(TagName, vue.mergeProps(ctx.attrs, {
+        "class": "v-skelton-loader-bone"
+      }), _isSlot$e(_slot = vueUtils.renderSlotOrEmpty(ctx.slots)) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+
+});
+
+const IMAGE_ATTRS = ['alt', 'crossorigin', 'decoding', 'sizes', 'src', 'srcset', 'usemap'];
+function splitAttrs(attrs) {
+  const el = { ...attrs
+  };
+  const img = {};
+
+  for (const ATTR of IMAGE_ATTRS) {
+    const value = attrs[ATTR];
+
+    if (value != null) {
+      img[ATTR] = value;
+    }
+  }
+
+  return {
+    el,
+    img
+  };
+}
+const NUMBERISH_PROP = [Number, String];
+const DEFAULT_HEIGHT = 150;
+
+const resolveBusyImageSizeValue = source => {
+  if (source == null) return;
+  return isNaN(source) ? String(source) : `${source}px`;
+};
+/**
+ * 画像表示用コンポーネント
+ * <img /> タグのように振る舞うが、ローディング表示や、表示サイズの調整など、ちょっといい感じにやるためのコンポーネント
+ */
+
+
+const VBusyImage = vue.defineComponent({
+  name: 'VBusyImage',
+  props: { ...undefined,
+    aspectRatio: String,
+    width: NUMBERISH_PROP,
+    height: NUMBERISH_PROP,
+    cover: Boolean,
+    ...vueUtils.defineSlotsProps()
+  },
+  emits: {
+    load: ev => true,
+    error: ev => true
+  },
+
+  setup(props, ctx) {
+    const loadStateRef = vue.ref(props.cover && isAvairableSrc(ctx.attrs.src) ? 'loading' : 'pending');
+    const attrsRef = vue.computed(() => splitAttrs(ctx.attrs));
+    const isPendingRef = vue.computed(() => loadStateRef.value === 'pending');
+    const isLoadingRef = vue.computed(() => loadStateRef.value === 'loading');
+    const isLoadedRef = vue.computed(() => loadStateRef.value === 'loaded');
+    const isErrorRef = vue.computed(() => loadStateRef.value === 'error');
+    const classesRef = vue.computed(() => [`v-busy-image--${loadStateRef.value}`, {
+      'v-busy-image--cover': props.cover,
+      'v-busy-image--clickable': typeof ctx.attrs.onClick === 'function'
+    }]);
+    const nodeRef = vue.ref();
+    const coverImageRef = vue.ref();
+    const rectsRef = vue.computed(() => {
+      const placeholder = {};
+      const main = {};
+      const {
+        cover
+      } = props;
+      let {
+        width,
+        height
+      } = props;
+
+      if (height == null && cover) {
+        height = DEFAULT_HEIGHT;
+      }
+
+      if (width == null && cover) {
+        width = height;
+      }
+
+      width = resolveBusyImageSizeValue(width);
+      height = resolveBusyImageSizeValue(height);
+      main.width = width;
+      main.height = height;
+      placeholder.width = width;
+      placeholder.height = height;
+
+      if (placeholder.height == null) {
+        placeholder.height = resolveBusyImageSizeValue(DEFAULT_HEIGHT);
+      }
+
+      if (placeholder.width == null) {
+        placeholder.width = placeholder.height;
+      }
+
+      return {
+        placeholder,
+        main
+      };
+    });
+    const currentRectRef = vue.computed(() => isLoadedRef.value ? rectsRef.value.main : rectsRef.value.placeholder);
+    const stylesRef = vue.computed(() => {
+      const {
+        value: coverImage
+      } = coverImageRef;
+      const coverSrc = coverImage && coverImage.src;
+      const styles = { ...currentRectRef.value
+      };
+
+      if (coverSrc) {
+        styles.backgroundImage = `url(${coverSrc})`;
+      }
+
+      return styles;
+    });
+    let booted = false;
+    vue.watch(() => ctx.attrs.src, value => {
+      coverImageRef.value = undefined;
+
+      if (isAvairableSrc(value)) {
+        loadStateRef.value = 'loading';
+
+        if (props.cover) {
+          helpers.loadImage(value).then(image => {
+            coverImageRef.value = image;
+            setManualState('load');
+          }).catch(err => {
+            setManualState('error');
+          });
+        }
+      } else {
+        loadStateRef.value = 'pending';
+      }
+    }, {
+      immediate: helpers.IN_WINDOW
+    });
+
+    const setManualState = loadType => {
+      loadStateRef.value = loadType === 'load' ? 'loaded' : 'error';
+      const ev = new Event(loadType, {
+        bubbles: false,
+        cancelable: false,
+        composed: false
+      });
+      ctx.emit(loadType, ev);
+    };
+
+    vue.onMounted(() => {
+      if (booted || props.cover) return;
+      const image = nodeRef.value;
+      if (!image) return;
+      const loadType = imageIsReady(image);
+
+      if (loadType) {
+        setManualState(loadType);
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      coverImageRef.value = undefined;
+    });
+
+    const handleLoad = ev => {
+      booted = true;
+      loadStateRef.value = 'loaded';
+      ctx.emit('load', ev);
+    };
+
+    const handleError = ev => {
+      booted = true;
+      loadStateRef.value = 'error';
+      ctx.emit('error', ev);
+    };
+
+    ctx.expose({
+      state: loadStateRef,
+      isPending: isPendingRef,
+      isLoading: isLoadingRef,
+      isLoaded: isLoadedRef,
+      isError: isErrorRef
+    });
+    return () => {
+      const {
+        el: elAttrs,
+        img: imgAttrs
+      } = attrsRef.value;
+      const styles = stylesRef.value;
+      const children = ctx.slots.default && ctx.slots.default();
+      return vue.createVNode("span", vue.mergeProps({
+        "class": ['v-busy-image', classesRef.value]
+      }, elAttrs, {
+        "style": styles
+      }), [!props.cover && vue.createVNode("img", vue.mergeProps({
+        "key": "img",
+        "ref": nodeRef,
+        "class": "v-busy-image__node"
+      }, imgAttrs, {
+        "onLoad": handleLoad,
+        "onError": handleError
+      }), null), !!children && vue.createVNode("span", {
+        "class": "v-busy-image__slot"
+      }, [children])]);
+    };
+  }
+
+});
+
+function imageIsReady(image) {
+  if (!image.complete) return false;
+  return image.naturalWidth + image.naturalHeight > 0 ? 'load' : 'error';
+}
+
+function isAvairableSrc(src) {
+  return typeof src === 'string' && src !== '';
+}
+
 function extractRawGridValueClasses(value, prefix, getter) {
     if (typeof value !== 'object')
         return `${prefix}${getter ? getter(value) : value}`;
@@ -625,6 +876,162 @@ const VPaper = vue.defineComponent({
 
 });
 
+const AVATAR_SIZES = ['sm', 'md', 'lg'];
+function createAvatarProps() {
+  return { ...vueColorScheme.colorSchemeProps(),
+    ...vueUtils.navigationableInheritProps,
+    size: {
+      type: [String, Number],
+      default: 'md'
+    },
+    tile: Boolean,
+    rounded: Boolean,
+    disabled: Boolean,
+    src: String
+  };
+}
+const VAvatar = vue.defineComponent({
+  name: 'VAvatar',
+  inheritAttrs: false,
+  props: createAvatarProps(),
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const defaults = vui.setting('buttonDefault');
+    const color = vueColorScheme.useColorClasses({
+      color: () => props.color || defaults.color,
+      variant: () => props.variant || defaults.variant
+    });
+    const navigationable = vueUtils.useNavigationable(ctx, {
+      clickableClassName: () => 'v-avatar--clickable',
+      linkFallbackTag: 'div'
+    });
+    const classes = vue.computed(() => {
+      const {
+        size
+      } = props;
+      return [{
+        'v-avatar--tile': props.tile,
+        'v-avatar--rounded': props.rounded
+      }, typeof size === 'string' && `v-avatar--${size}`];
+    });
+    const styles = vue.computed(() => {
+      const {
+        size
+      } = props;
+      if (typeof size !== 'number') return;
+      return {
+        '--avatar-size': `${size}px`
+      };
+    });
+    return () => {
+      const {
+        src
+      } = props;
+      const {
+        Tag,
+        attrs
+      } = navigationable.value;
+      return vue.createVNode(Tag, vue.mergeProps(attrs, {
+        "class": ['v-avatar', classes.value, color.colorClasses.value],
+        "style": styles.value
+      }), {
+        default: () => [!!src && vue.createVNode(VBusyImage, {
+          "class": "v-avatar__image",
+          "src": src,
+          "cover": true
+        }, null) || vueUtils.renderSlotOrEmpty(ctx.slots)]
+      });
+    };
+  }
+
+});
+
+const CHIP_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
+function createChipProps() {
+  return { ...vueColorScheme.colorSchemeProps(),
+    ...vueUtils.navigationableInheritProps,
+    size: {
+      type: String,
+      default: 'md'
+    },
+    startIcon: [String, Function],
+    endIcon: [String, Function],
+    label: Boolean,
+    disabled: Boolean
+  };
+}
+
+function resolveRawVChipIcon(raw, type) {
+  if (!raw) return;
+
+  if (typeof raw === 'function') {
+    return () => {
+      const child = raw();
+      if (child == null) return;
+      return vue.createVNode("span", {
+        "class": ['v-chip__icon', `v-chip__icon--${type}`]
+      }, [child]);
+    };
+  }
+
+  return () => vue.createVNode(VIcon, {
+    "class": ['v-chip__icon', `v-chip__icon--${type}`],
+    "name": raw
+  }, null);
+}
+
+const VChip = vue.defineComponent({
+  name: 'VChip',
+  inheritAttrs: false,
+  props: createChipProps(),
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const defaults = vui.setting('buttonDefault');
+    const color = vueColorScheme.useColorClasses({
+      color: () => props.color || defaults.color,
+      variant: () => props.variant || defaults.variant
+    });
+    const startIcon = vue.computed(() => {
+      const _icon = resolveRawVChipIcon(props.startIcon, 'start');
+
+      return _icon && _icon();
+    });
+    const endIcon = vue.computed(() => {
+      const _icon = resolveRawVChipIcon(props.endIcon, 'end');
+
+      return _icon && _icon();
+    });
+    const navigationable = vueUtils.useNavigationable(ctx, {
+      clickableClassName: () => 'v-chip--clickable',
+      linkFallbackTag: 'div'
+    });
+    const classes = vue.computed(() => {
+      const {
+        size
+      } = props;
+      return [{
+        'v-chip--label': props.label
+      }, typeof size === 'string' && `v-chip--${size}`];
+    });
+    return () => {
+      const {
+        Tag,
+        attrs
+      } = navigationable.value;
+      return vue.createVNode(Tag, vue.mergeProps(attrs, {
+        "class": ['v-chip', classes.value, color.colorClasses.value]
+      }), {
+        default: () => [startIcon.value, vue.createVNode("span", {
+          "class": "v-chip__content"
+        }, [vueUtils.renderSlotOrEmpty(ctx.slots)]), endIcon.value]
+      });
+    };
+  }
+
+});
+
 function createCardProps() {
   return { ...createPaperProps(),
     ...vueUtils.navigationableInheritProps,
@@ -2753,8 +3160,8 @@ const VForm = vue.defineComponent({
   name: 'VForm',
   props: { ...props,
     ...createControlProps(),
-    ...vueKit.defineSlotsProps(),
-    disableAutoScroll: Boolean
+    ...vueKit.defineSlotsProps() // disableAutoScroll: Boolean,
+
   },
   emits,
 
@@ -2762,13 +3169,9 @@ const VForm = vue.defineComponent({
     const vui = useVui();
     const nodeControl = vueKit.useForm(props, ctx, {
       nodeType: VUI_FORM_SYMBOL,
-      onAutoValidateError: () => {
-        if (props.disableAutoScroll) return;
+      scrollToElement: el => {
         const scroller = vueKit.getDocumentScroller();
-        const {
-          firstInvalidEl
-        } = nodeControl;
-        firstInvalidEl && scroller.toElement(firstInvalidEl, {
+        return scroller.toElement(el, {
           offset: vui.getAutoScrollToElementOffsetTop()
         });
       }
@@ -2906,7 +3309,8 @@ const VTabs = vue.defineComponent({
      */
     withQuery: Boolean,
     ...vueUtils.defineSlotsProps(),
-    color: String
+    color: String,
+    onBeforeChange: Function
   },
   emits: {
     'update:modelValue': newValue => true,
@@ -3003,7 +3407,33 @@ const VTabs = vue.defineComponent({
       }
     }
 
-    function to(value) {
+    async function to(value) {
+      const {
+        value: currentValue
+      } = currentRef;
+
+      if (currentValue === value) {
+        return;
+      }
+
+      const {
+        onBeforeChange
+      } = props;
+
+      if (onBeforeChange) {
+        let result = onBeforeChange(value, currentRef.value);
+
+        if (helpers.isPromise(result)) {
+          result = await result;
+        }
+
+        console.log(result);
+
+        if (result === false) {
+          return;
+        }
+      }
+
       currentRef.value = value;
     }
 
@@ -4488,11 +4918,15 @@ exports.VMenu = vueKit.VMenu;
 exports.VSnackbar = vueKit.VSnackbar;
 exports.VTooltip = vueKit.VTooltip;
 exports.ICON_NAMES = iconFont.ICON_NAMES;
+exports.AVATAR_SIZES = AVATAR_SIZES;
+exports.CHIP_SIZES = CHIP_SIZES;
 exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
 exports.CONTROL_SIZES = CONTROL_SIZES;
 exports.PAGINATION_ALIGNS = PAGINATION_ALIGNS;
 exports.VApp = VApp;
+exports.VAvatar = VAvatar;
 exports.VBreadcrumbs = VBreadcrumbs;
+exports.VBusyImage = VBusyImage;
 exports.VButton = VButton;
 exports.VButtonGroup = VButtonGroup;
 exports.VCard = VCard;
@@ -4500,6 +4934,7 @@ exports.VCardActions = VCardActions;
 exports.VCardContent = VCardContent;
 exports.VCheckbox = VCheckbox;
 exports.VCheckboxGroup = VCheckboxGroup;
+exports.VChip = VChip;
 exports.VContentSwitcher = VContentSwitcher;
 exports.VDataTable = VDataTable;
 exports.VDrawerLayout = VDrawerLayout;
@@ -4519,6 +4954,7 @@ exports.VPaper = VPaper;
 exports.VRadio = VRadio;
 exports.VRadioGroup = VRadioGroup;
 exports.VSelect = VSelect;
+exports.VSkeltonLoaderBone = VSkeltonLoaderBone;
 exports.VSwitch = VSwitch;
 exports.VSwitchGroup = VSwitchGroup;
 exports.VTabs = VTabs;
@@ -4556,7 +4992,9 @@ exports.WysiwygLinkTool = WysiwygLinkTool;
 exports.WysiwygOrderedListTool = WysiwygOrderedListTool;
 exports.WysiwygTextColorTool = WysiwygTextColorTool;
 exports.configureDataTableDefaults = configureDataTableDefaults;
+exports.createAvatarProps = createAvatarProps;
 exports.createCardProps = createCardProps;
+exports.createChipProps = createChipProps;
 exports.createControlFieldProviderProps = createControlFieldProviderProps;
 exports.createControlProps = createControlProps;
 exports.createElevationProps = createElevationProps;
@@ -4579,6 +5017,7 @@ exports.renderNavigationItemInput = renderNavigationItemInput;
 exports.resolveNavigationItemInput = resolveNavigationItemInput;
 exports.resolveRawIconProp = resolveRawIconProp;
 exports.resolveRawWysiwygEditorTools = resolveRawWysiwygEditorTools;
+exports.splitAttrs = splitAttrs;
 exports.useControl = useControl;
 exports.useControlField = useControlField;
 exports.useElevation = useElevation;