@fastkit/vui 0.7.46 → 0.7.47

package/dist/vui.cjs.prod.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');
@@ -409,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}`;
@@ -634,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,
@@ -4520,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;
@@ -4532,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;
@@ -4551,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;
@@ -4588,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;
@@ -4611,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;

package/dist/vui.css

@@ -365,6 +365,7 @@ template {
   --typo-base-weight: 400;
   --typo-base-height: 1.5;
   --typo-base-spacing: 0em;
+  --typo-medium-weight: 500;
   --typo-h1-size: 2.5rem;
   --typo-h1-weight: 500;
   --typo-h1-height: 1.2222222222222223;
@@ -410,6 +411,18 @@ template {
   --typo-subtitle2-height: 1.57;
   --typo-subtitle2-spacing: 0.00714em;
   --typo-sm-size: calc(var(--root-em) * 0.875);
+  --chip-padding: 0.875em;
+  --chip-font-weight: var(--typo-base-weight);
+  --chip-height-xs: 16px;
+  --chip-font-size-xs: 10px;
+  --chip-height-sm: 24px;
+  --chip-font-size-sm: 12px;
+  --chip-height-md: 32px;
+  --chip-font-size-md: 14px;
+  --chip-height-lg: 54px;
+  --chip-font-size-lg: 16px;
+  --chip-height-xl: 66px;
+  --chip-font-size-xl: 18px;
   --control-field-rem-sm: 0.875rem;
   --control-field-rem-md: 1rem;
   --control-field-rem-lg: 1.125rem;
@@ -935,6 +948,82 @@ thead th {
   justify-content: center;
   transition: transform 150ms linear;
 }
+.v-skelton-loader-bone {
+  position: relative;
+  overflow: hidden;
+  cursor: progress;
+  background: rgba(0, 0, 0, 0.12);
+  border-radius: inherit;
+}
+.v-skelton-loader-bone::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  height: 100%;
+  content: "";
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+  transform: translateX(-100%);
+  animation: v-skelton-loader-bone-loading 1.5s infinite;
+}
+
+@keyframes v-skelton-loader-bone-loading {
+  100% {
+    transform: translateX(100%);
+  }
+}
+.v-busy-image {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: bottom;
+}
+.v-busy-image--clickable {
+  cursor: pointer;
+}
+.v-busy-image--cover {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+.v-busy-image--loading::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  content: "";
+  background: rgba(0, 0, 0, 0.1);
+  animation: v-tiny-image-blink normal 1.5s infinite ease-in-out;
+}
+.v-busy-image__node {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: bottom;
+}
+.v-busy-image__slot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+@keyframes v-tiny-image-blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .v-grid-item {
   display: block;
 }
@@ -974,6 +1063,146 @@ thead th {
   border-bottom-right-radius: inherit;
   border-bottom-left-radius: inherit;
 }
+.v-avatar {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  padding: 0;
+  touch-action: manipulation;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  appearance: none;
+  --avatar-radius: 50%;
+  --avatar-font-weight: var(--typo-medium-weight);
+  --avatar-base-font-size: var(--typo-base-size);
+  --avatar-font-size: var(--avatar-base-font-size);
+  display: inline-flex;
+  flex-basis: var(--avatar-size);
+  align-items: center;
+  justify-content: center;
+  width: var(--avatar-size);
+  min-width: var(--avatar-size);
+  height: var(--avatar-size);
+  overflow: hidden;
+  font-size: var(--avatar-font-size);
+  font-weight: var(--avatar-font-weight);
+  line-height: 1;
+  text-align: center;
+  vertical-align: bottom;
+  cursor: default;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--avatar-radius);
+  --shadow-color: rgba(0, 0, 0, 0) !important;
+  --focusShadow-color: rgba(0, 0, 0, 0) !important;
+}
+.v-avatar::-moz-focus-inner {
+  border: 0;
+}
+.v-avatar, .v-avatar:hover, .v-avatar:focus {
+  text-decoration: none;
+}
+.v-avatar--clickable {
+  cursor: pointer;
+}
+.v-avatar--sm {
+  --avatar-size: 36px;
+  --avatar-font-size: calc(var(--avatar-base-font-size) * 0.75);
+}
+.v-avatar--md {
+  --avatar-size: 48px;
+}
+.v-avatar--lg {
+  --avatar-size: 62px;
+  --avatar-font-size: calc(var(--avatar-base-font-size) * 1.25);
+}
+.v-avatar--rounded {
+  --avatar-radius: 4px;
+}
+.v-avatar--tile {
+  --avatar-radius: 0;
+}
+.v-avatar img, .v-avatar__image {
+  display: inline-flex;
+  width: inherit !important;
+  height: inherit !important;
+  border-radius: inherit;
+  object-fit: cover;
+}
+.v-chip {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  padding: 0;
+  touch-action: manipulation;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  appearance: none;
+  --chip-radius: calc(var(--chip-height) / 2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--chip-height);
+  padding: 0 var(--chip-padding);
+  overflow: hidden;
+  font-size: var(--chip-font-size);
+  font-weight: var(--chip-font-weight);
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: bottom;
+  cursor: default;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--chip-radius);
+  --shadow-color: rgba(0, 0, 0, 0) !important;
+  --focusShadow-color: rgba(0, 0, 0, 0) !important;
+}
+.v-chip::-moz-focus-inner {
+  border: 0;
+}
+.v-chip, .v-chip:hover, .v-chip:focus {
+  text-decoration: none;
+}
+.v-chip--clickable {
+  cursor: pointer;
+}
+.v-chip--xs {
+  --chip-height: var(--chip-height-xs);
+  --chip-font-size: var(--chip-font-size-xs);
+}
+.v-chip--sm {
+  --chip-height: var(--chip-height-sm);
+  --chip-font-size: var(--chip-font-size-sm);
+}
+.v-chip--md {
+  --chip-height: var(--chip-height-md);
+  --chip-font-size: var(--chip-font-size-md);
+}
+.v-chip--lg {
+  --chip-height: var(--chip-height-lg);
+  --chip-font-size: var(--chip-font-size-lg);
+}
+.v-chip--xl {
+  --chip-height: var(--chip-height-xl);
+  --chip-font-size: var(--chip-font-size-xl);
+}
+.v-chip--label {
+  --chip-radius: 4px;
+}
+.v-chip__icon--start {
+  margin-right: calc(var(--chip-padding) * 0.5);
+  margin-left: calc(var(--chip-padding) * -0.5);
+}
+.v-chip__icon--end {
+  margin-right: calc(var(--chip-padding) * -0.5);
+  margin-left: calc(var(--chip-padding) * 0.5);
+}
+.v-chip .v-avatar {
+  --avatar-size: 14px;
+}
 .v-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   position: relative;