@fastkit/vui 0.7.46 → 0.7.47

package/src/components/VBusyImage/VBusyImage.tsx

@@ -0,0 +1,278 @@
+import './VBusyImage.scss';
+
+import {
+  defineComponent,
+  HTMLAttributes,
+  ImgHTMLAttributes,
+  PropType,
+  computed,
+  ref,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  CSSProperties,
+} from 'vue';
+import { IN_WINDOW, loadImage } from '@fastkit/helpers';
+import { defineSlotsProps } from '@fastkit/vue-utils';
+
+export declare type ImgHTMLAttributesPropOptions = {
+  [K in keyof ImgHTMLAttributes]-?: PropType<ImgHTMLAttributes[K]>;
+};
+
+const IMAGE_ATTRS = [
+  'alt',
+  'crossorigin',
+  'decoding',
+  'sizes',
+  'src',
+  'srcset',
+  'usemap',
+] as const;
+
+export function splitAttrs(attrs: ImgHTMLAttributes): {
+  el: HTMLAttributes;
+  img: ImgHTMLAttributes;
+} {
+  const el: HTMLAttributes = { ...attrs };
+  const img: ImgHTMLAttributes = {};
+
+  for (const ATTR of IMAGE_ATTRS) {
+    const value = attrs[ATTR];
+    if (value != null) {
+      img[ATTR] = value as any;
+    }
+  }
+
+  return {
+    el,
+    img,
+  };
+}
+
+export type BusyImageLoadState = 'pending' | 'loading' | 'loaded' | 'error';
+
+export type BusyImageSizeValue = number | string;
+
+const NUMBERISH_PROP = [Number, String] as PropType<BusyImageSizeValue>;
+
+const DEFAULT_HEIGHT = 150;
+
+const resolveBusyImageSizeValue = (
+  source?: BusyImageSizeValue,
+): string | undefined => {
+  if (source == null) return;
+  return isNaN(source as number) ? String(source) : `${source}px`;
+};
+
+export interface BusyImageRect {
+  width?: string;
+  height?: string;
+}
+
+export interface BusyImageRects {
+  placeholder: BusyImageRect;
+  main: BusyImageRect;
+}
+
+/**
+ * 画像表示用コンポーネント
+ * <img /> タグのように振る舞うが、ローディング表示や、表示サイズの調整など、ちょっといい感じにやるためのコンポーネント
+ */
+export const VBusyImage = defineComponent({
+  name: 'VBusyImage',
+  props: {
+    ...(undefined as unknown as ImgHTMLAttributesPropOptions),
+    aspectRatio: String,
+    width: NUMBERISH_PROP,
+    height: NUMBERISH_PROP,
+    cover: Boolean,
+    ...defineSlotsProps<{
+      default: void;
+    }>(),
+  },
+  emits: {
+    load: (ev: Event) => true,
+    error: (ev: Event) => true,
+  },
+  setup(props, ctx) {
+    const loadStateRef = ref<BusyImageLoadState>(
+      props.cover && isAvairableSrc(ctx.attrs.src as any)
+        ? 'loading'
+        : 'pending',
+    );
+    const attrsRef = computed(() => splitAttrs(ctx.attrs));
+    const isPendingRef = computed(() => loadStateRef.value === 'pending');
+    const isLoadingRef = computed(() => loadStateRef.value === 'loading');
+    const isLoadedRef = computed(() => loadStateRef.value === 'loaded');
+    const isErrorRef = computed(() => loadStateRef.value === 'error');
+    const classesRef = computed(() => [
+      `v-busy-image--${loadStateRef.value}`,
+      {
+        'v-busy-image--cover': props.cover,
+        'v-busy-image--clickable': typeof ctx.attrs.onClick === 'function',
+      },
+    ]);
+    const nodeRef = ref<HTMLImageElement>();
+    const coverImageRef = ref<HTMLImageElement>();
+    const rectsRef = computed<BusyImageRects>(() => {
+      const placeholder: BusyImageRect = {};
+      const main: BusyImageRect = {};
+      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 = computed<BusyImageRect>(() =>
+      isLoadedRef.value ? rectsRef.value.main : rectsRef.value.placeholder,
+    );
+
+    const stylesRef = computed<CSSProperties>(() => {
+      const { value: coverImage } = coverImageRef;
+      const coverSrc = coverImage && coverImage.src;
+      const styles: CSSProperties = {
+        ...currentRectRef.value,
+      };
+      if (coverSrc) {
+        styles.backgroundImage = `url(${coverSrc})`;
+      }
+      return styles;
+    });
+
+    let booted = false;
+
+    watch(
+      () => ctx.attrs.src as string | null | undefined,
+      (value) => {
+        coverImageRef.value = undefined;
+        if (isAvairableSrc(value)) {
+          loadStateRef.value = 'loading';
+          if (props.cover) {
+            loadImage(value)
+              .then((image) => {
+                coverImageRef.value = image;
+                setManualState('load');
+              })
+              .catch((err) => {
+                setManualState('error');
+              });
+          }
+        } else {
+          loadStateRef.value = 'pending';
+        }
+      },
+      { immediate: IN_WINDOW },
+    );
+
+    const setManualState = (loadType: 'load' | 'error') => {
+      loadStateRef.value = loadType === 'load' ? 'loaded' : 'error';
+
+      const ev = new Event(loadType, {
+        bubbles: false,
+        cancelable: false,
+        composed: false,
+      });
+
+      ctx.emit(loadType as any, ev);
+    };
+
+    onMounted(() => {
+      if (booted || props.cover) return;
+
+      const image = nodeRef.value;
+      if (!image) return;
+
+      const loadType = imageIsReady(image);
+
+      if (loadType) {
+        setManualState(loadType);
+      }
+    });
+
+    onBeforeUnmount(() => {
+      coverImageRef.value = undefined;
+    });
+
+    const handleLoad = (ev: Event) => {
+      booted = true;
+      loadStateRef.value = 'loaded';
+      ctx.emit('load', ev);
+    };
+
+    const handleError = (ev: Event) => {
+      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 (
+        <span
+          class={['v-busy-image', classesRef.value]}
+          {...elAttrs}
+          style={styles}>
+          {!props.cover && (
+            <img
+              key="img"
+              ref={nodeRef}
+              class="v-busy-image__node"
+              {...imgAttrs}
+              onLoad={handleLoad}
+              onError={handleError}
+            />
+          )}
+          {!!children && <span class="v-busy-image__slot">{children}</span>}
+        </span>
+      );
+    };
+  },
+});
+
+function imageIsReady(image: HTMLImageElement): 'load' | 'error' | false {
+  if (!image.complete) return false;
+  return image.naturalWidth + image.naturalHeight > 0 ? 'load' : 'error';
+}
+
+function isAvairableSrc(src: string | null | undefined): src is string {
+  return typeof src === 'string' && src !== '';
+}

package/src/components/VBusyImage/index.ts

@@ -0,0 +1 @@
+export * from './VBusyImage';

package/src/components/VChip/VChip.scss

@@ -0,0 +1,78 @@
+@use '../../styles/core.scss';
+
+.v-chip {
+  @include core.button-reset();
+
+  $chip-sizes: xs, sm, md, lg, xl;
+
+  --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; // @TODO layer supports
+  --focusShadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
+
+  &--clickable {
+    cursor: pointer;
+  }
+
+  @each $size in $chip-sizes {
+    &--#{$size} {
+      --chip-height: var(--chip-height-#{$size});
+      --chip-font-size: var(--chip-font-size-#{$size});
+    }
+  }
+
+  &--label {
+    --chip-radius: 4px;
+  }
+
+  // &[disabled] {
+  //   pointer-events: none;
+
+  //   &::before {
+  //     content: none;
+  //   }
+  // }
+  // // noop
+
+  // img,
+  // &__image {
+  //   display: inline-flex;
+  //   width: inherit !important;
+  //   height: inherit !important;
+  //   border-radius: inherit;
+  //   object-fit: cover;
+  // }
+
+  &__icon {
+    &--start {
+      margin-right: calc(var(--chip-padding) * 0.5);
+      margin-left: calc(var(--chip-padding) * -0.5);
+    }
+
+    &--end {
+      margin-right: calc(var(--chip-padding) * -0.5);
+      margin-left: calc(var(--chip-padding) * 0.5);
+    }
+  }
+
+  .v-avatar {
+    --avatar-size: 14px;
+  }
+}

package/src/components/VChip/VChip.tsx

@@ -0,0 +1,102 @@
+import './VChip.scss';
+import { defineComponent, computed, PropType, VNodeChild } from 'vue';
+import {
+  navigationableInheritProps,
+  useNavigationable,
+  renderSlotOrEmpty,
+} from '@fastkit/vue-utils';
+import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
+import { useVui } from '../../injections';
+import type { IconName } from '../VIcon';
+import { VIcon } from '../VIcon';
+
+export const CHIP_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+
+export type ChipSize = typeof CHIP_SIZES[number];
+
+export type VChipIcon = () => VNodeChild;
+
+export type RawVChipIcon = IconName | VChipIcon;
+
+export function createChipProps() {
+  return {
+    ...colorSchemeProps(),
+    ...navigationableInheritProps,
+    size: {
+      type: String as PropType<ChipSize>,
+      default: 'md',
+    },
+    startIcon: [String, Function] as PropType<RawVChipIcon>,
+    endIcon: [String, Function] as PropType<RawVChipIcon>,
+    label: Boolean,
+    disabled: Boolean,
+  };
+}
+
+function resolveRawVChipIcon(
+  raw: RawVChipIcon | undefined,
+  type: 'start' | 'end',
+): VChipIcon | undefined {
+  if (!raw) return;
+  if (typeof raw === 'function') {
+    return () => {
+      const child = raw();
+      if (child == null) return;
+      return (
+        <span class={['v-chip__icon', `v-chip__icon--${type}`]}>{child}</span>
+      );
+    };
+  }
+  return () => (
+    <VIcon class={['v-chip__icon', `v-chip__icon--${type}`]} name={raw} />
+  );
+}
+
+export const VChip = defineComponent({
+  name: 'VChip',
+  inheritAttrs: false,
+  props: createChipProps(),
+  setup(props, ctx) {
+    const vui = useVui();
+    const defaults = vui.setting('buttonDefault');
+    const color = useColorClasses({
+      color: () => props.color || defaults.color,
+      variant: () => props.variant || defaults.variant,
+    });
+    const startIcon = computed(() => {
+      const _icon = resolveRawVChipIcon(props.startIcon, 'start');
+      return _icon && _icon();
+    });
+    const endIcon = computed(() => {
+      const _icon = resolveRawVChipIcon(props.endIcon, 'end');
+      return _icon && _icon();
+    });
+    const navigationable = useNavigationable(ctx, {
+      clickableClassName: () => 'v-chip--clickable',
+      linkFallbackTag: 'div',
+    });
+
+    const classes = computed(() => {
+      const { size } = props;
+      return [
+        {
+          'v-chip--label': props.label,
+        },
+        typeof size === 'string' && `v-chip--${size}`,
+      ];
+    });
+
+    return () => {
+      const { Tag, attrs } = navigationable.value;
+      return (
+        <Tag
+          {...attrs}
+          class={['v-chip', classes.value, color.colorClasses.value]}>
+          {startIcon.value}
+          <span class="v-chip__content">{renderSlotOrEmpty(ctx.slots)}</span>
+          {endIcon.value}
+        </Tag>
+      );
+    };
+  },
+});

package/src/components/VChip/index.ts

@@ -0,0 +1 @@
+export * from './VChip';

package/src/components/VSkeltonLoader/VSkeltonLoaderBone.scss

@@ -0,0 +1,31 @@
+.v-skelton-loader-bone {
+  position: relative;
+  overflow: hidden;
+  cursor: progress;
+  background: rgba(0, 0, 0, 0.12);
+  border-radius: inherit;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1;
+    height: 100%;
+    content: '';
+    background: linear-gradient(
+      90deg,
+      hsla(0deg, 0%, 100%, 0),
+      hsla(0deg, 0%, 100%, 0.3),
+      hsla(0deg, 0%, 100%, 0)
+    );
+    transform: translateX(-100%);
+    animation: v-skelton-loader-bone-loading 1.5s infinite;
+  }
+}
+
+@keyframes v-skelton-loader-bone-loading {
+  100% {
+    transform: translateX(100%);
+  }
+}

package/src/components/VSkeltonLoader/VSkeltonLoaderBone.tsx

@@ -0,0 +1,25 @@
+import './VSkeltonLoaderBone.scss';
+
+import { defineComponent } from 'vue';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
+
+export const VSkeltonLoaderBone = defineComponent({
+  name: 'VSkeltonLoaderBone',
+  inheritAttrs: false,
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+  setup(props, ctx) {
+    return () => {
+      const TagName = props.tag as 'div';
+      return (
+        <TagName {...ctx.attrs} class="v-skelton-loader-bone">
+          {renderSlotOrEmpty(ctx.slots)}
+        </TagName>
+      );
+    };
+  },
+});

package/src/components/VSkeltonLoader/index.ts

@@ -0,0 +1 @@
+export * from './VSkeltonLoaderBone';

package/src/components/index.ts

@@ -1,7 +1,11 @@
 export * from './loading';
 export * from './kits';
+export * from './VSkeltonLoader';
+export * from './VBusyImage';
 export * from './VGrid';
 export * from './VPaper';
+export * from './VAvatar';
+export * from './VChip';
 export * from './VCard';
 export * from './VIcon';
 export * from './VButton';

package/src/styles/variables.scss

@@ -30,6 +30,9 @@
   --typo-base-height: 1.5;
   --typo-base-spacing: 0em;
 
+  // medium
+  --typo-medium-weight: 500;
+
   // h1
   --typo-h1-size: 2.5rem;
   --typo-h1-weight: 500;
@@ -123,6 +126,22 @@
   // --typo-overline-height: 2.66;
   // --typo-overline-spacing: 0.08333em;
 
+  // =============================================
+  // chips
+  // =============================================
+  --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;
+
   // =============================================
   // controls
   // =============================================