@fastkit/vui 0.7.46 → 0.7.49

package/dist/vui.mjs

@@ -1,15 +1,15 @@
 import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, VTooltip, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, resolveVNodeChildOrSlots, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
 export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar, VTooltip } from '@fastkit/vue-kit';
-import { inject, computed, provide, createVNode, mergeProps, defineComponent, isVNode, cloneVNode, ref, watch, withDirectives, createTextVNode, Fragment, vShow, onBeforeUpdate, vModelSelect, onMounted, onBeforeUnmount, Transition, reactive } from 'vue';
+import { inject, computed, provide, createVNode, mergeProps, defineComponent, isVNode, ref, watch, onMounted, onBeforeUnmount, cloneVNode, withDirectives, createTextVNode, Fragment, vShow, onBeforeUpdate, vModelSelect, Transition, reactive } from 'vue';
 import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
-import { createPropsOptions as createPropsOptions$1, htmlAttributesPropOptions, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableInheritProps, VLink, isFragment, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
+import { createPropsOptions as createPropsOptions$1, renderSlotOrEmpty as renderSlotOrEmpty$1, defineSlotsProps as defineSlotsProps$1, htmlAttributesPropOptions, navigationableInheritProps, useNavigationable, VLink, isFragment, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
 import { getDocumentScroller as getDocumentScroller$1 } from '@fastkit/vue-scroller';
 import { useScopeColorClass, colorSchemeProps, useColorClasses, toScopeColorClass } from '@fastkit/vue-color-scheme';
 import { VProgressCircular } from '@fastkit/vue-loading';
 export * from '@fastkit/vue-loading';
+import { loadImage, IN_WINDOW, isPromise } from '@fastkit/helpers';
 export { ICON_NAMES } from '@fastkit/icon-font';
-import { isPromise } from '@fastkit/helpers';
 import { VAppContainer, VAppLayoutControl } from '@fastkit/vue-app-layout';
 import { createTextableProps, createTextableEmits, TextableControl } from '@fastkit/vue-form-control';
 import { useEditor, EditorContent, BubbleMenu } from '@tiptap/vue-3';
@@ -287,7 +287,7 @@ const VFormControl = defineComponent({
           ctx.emit('clickLabel', ev, control);
         }
       }, [label, getRequiredChip(), hinttip && createVNode(VTooltip, {
-        "top": true,
+        "y": "top",
         "openOnHover": _hinttipDelay !== 'click',
         "openDelay": typeof _hinttipDelay === 'number' ? _hinttipDelay : undefined
       }, {
@@ -404,6 +404,248 @@ function useElevation(props, opts = {}) {
     };
 }
 
+function _isSlot$e(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
+const VSkeltonLoaderBone = defineComponent({
+  name: 'VSkeltonLoaderBone',
+  inheritAttrs: false,
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+
+  setup(props, ctx) {
+    return () => {
+      let _slot;
+
+      const TagName = props.tag;
+      return createVNode(TagName, mergeProps(ctx.attrs, {
+        "class": "v-skelton-loader-bone"
+      }), _isSlot$e(_slot = renderSlotOrEmpty$1(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 = defineComponent({
+  name: 'VBusyImage',
+  props: { ...undefined,
+    aspectRatio: String,
+    width: NUMBERISH_PROP,
+    height: NUMBERISH_PROP,
+    cover: Boolean,
+    ...defineSlotsProps$1()
+  },
+  emits: {
+    load: ev => true,
+    error: ev => true
+  },
+
+  setup(props, ctx) {
+    const loadStateRef = ref(props.cover && isAvairableSrc(ctx.attrs.src) ? '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();
+    const coverImageRef = ref();
+    const rectsRef = 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 = computed(() => isLoadedRef.value ? rectsRef.value.main : rectsRef.value.placeholder);
+    const stylesRef = 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;
+    watch(() => ctx.attrs.src, 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 => {
+      loadStateRef.value = loadType === 'load' ? 'loaded' : 'error';
+      const ev = new Event(loadType, {
+        bubbles: false,
+        cancelable: false,
+        composed: false
+      });
+      ctx.emit(loadType, 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 => {
+      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 createVNode("span", mergeProps({
+        "class": ['v-busy-image', classesRef.value]
+      }, elAttrs, {
+        "style": styles
+      }), [!props.cover && createVNode("img", mergeProps({
+        "key": "img",
+        "ref": nodeRef,
+        "class": "v-busy-image__node"
+      }, imgAttrs, {
+        "onLoad": handleLoad,
+        "onError": handleError
+      }), null), !!children && 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}`;
@@ -629,6 +871,162 @@ const VPaper = defineComponent({
 
 });
 
+const AVATAR_SIZES = ['sm', 'md', 'lg'];
+function createAvatarProps() {
+  return { ...colorSchemeProps(),
+    ...navigationableInheritProps,
+    size: {
+      type: [String, Number],
+      default: 'md'
+    },
+    tile: Boolean,
+    rounded: Boolean,
+    disabled: Boolean,
+    src: String
+  };
+}
+const VAvatar = defineComponent({
+  name: 'VAvatar',
+  inheritAttrs: false,
+  props: createAvatarProps(),
+
+  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 navigationable = useNavigationable(ctx, {
+      clickableClassName: () => 'v-avatar--clickable',
+      linkFallbackTag: 'div'
+    });
+    const classes = computed(() => {
+      const {
+        size
+      } = props;
+      return [{
+        'v-avatar--tile': props.tile,
+        'v-avatar--rounded': props.rounded
+      }, typeof size === 'string' && `v-avatar--${size}`];
+    });
+    const styles = computed(() => {
+      const {
+        size
+      } = props;
+      if (typeof size !== 'number') return;
+      return {
+        '--avatar-size': `${size}px`
+      };
+    });
+    return () => {
+      const {
+        src
+      } = props;
+      const {
+        Tag,
+        attrs
+      } = navigationable.value;
+      return createVNode(Tag, mergeProps(attrs, {
+        "class": ['v-avatar', classes.value, color.colorClasses.value],
+        "style": styles.value
+      }), {
+        default: () => [!!src && createVNode(VBusyImage, {
+          "class": "v-avatar__image",
+          "src": src,
+          "cover": true
+        }, null) || renderSlotOrEmpty$1(ctx.slots)]
+      });
+    };
+  }
+
+});
+
+const CHIP_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
+function createChipProps() {
+  return { ...colorSchemeProps(),
+    ...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 createVNode("span", {
+        "class": ['v-chip__icon', `v-chip__icon--${type}`]
+      }, [child]);
+    };
+  }
+
+  return () => createVNode(VIcon, {
+    "class": ['v-chip__icon', `v-chip__icon--${type}`],
+    "name": raw
+  }, null);
+}
+
+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 createVNode(Tag, mergeProps(attrs, {
+        "class": ['v-chip', classes.value, color.colorClasses.value]
+      }), {
+        default: () => [startIcon.value, createVNode("span", {
+          "class": "v-chip__content"
+        }, [renderSlotOrEmpty$1(ctx.slots)]), endIcon.value]
+      });
+    };
+  }
+
+});
+
 function createCardProps() {
   return { ...createPaperProps(),
     ...navigationableInheritProps,
@@ -2419,7 +2817,10 @@ const VWysiwygEditor = defineComponent({
 
     watch(() => inputControl.canOperation, updateEditable);
     watch(() => props.modelValue, modelValue => {
-      editor.value && editor.value.commands.setContent(modelValue == null ? '' : modelValue);
+      const $editor = editor.value;
+      if (!$editor) return;
+      $editor.commands.setContent(modelValue == null ? '' : modelValue);
+      textRef.value = $editor.getText();
     });
     const editor = useEditor({
       onCreate: ({
@@ -2437,6 +2838,7 @@ const VWysiwygEditor = defineComponent({
       onUpdate: ev => {
         inputControl.value = ev.editor.getHTML();
         textRef.value = ev.editor.getText();
+        console.log(textRef.value);
       },
       autofocus: props.autofocus,
       content: props.modelValue,
@@ -4510,4 +4912,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VBreadcrumbs, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygOrderedListTool, WysiwygTextColorTool, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { AVATAR_SIZES, CHIP_SIZES, CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygOrderedListTool, WysiwygTextColorTool, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.7.46",
+  "version": "0.7.49",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.46",
-    "@fastkit/icon-font": "0.7.46",
-    "@fastkit/tiny-logger": "0.7.46",
-    "@fastkit/vite-kit": "0.7.46",
-    "@fastkit/vue-kit": "0.7.46",
+    "@fastkit/color-scheme": "0.7.49",
+    "@fastkit/icon-font": "0.7.49",
+    "@fastkit/tiny-logger": "0.7.49",
+    "@fastkit/vite-kit": "0.7.49",
+    "@fastkit/vue-kit": "0.7.49",
     "@tiptap/extension-link": "^2.0.0-beta.36",
     "@tiptap/extension-underline": "^2.0.0-beta.23",
     "@tiptap/starter-kit": "^2.0.0-beta.183",

package/src/components/VAvatar/VAvatar.scss

@@ -0,0 +1,76 @@
+@use '../../styles/core.scss';
+
+.v-avatar {
+  @include core.button-reset();
+
+  --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);
+  // border-radius: var(--control-field-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;
+  }
+
+  &--sm {
+    --avatar-size: 36px;
+    --avatar-font-size: calc(var(--avatar-base-font-size) * 0.75);
+  }
+
+  &--md {
+    --avatar-size: 48px;
+  }
+
+  &--lg {
+    --avatar-size: 62px;
+    --avatar-font-size: calc(var(--avatar-base-font-size) * 1.25);
+  }
+
+  &--rounded {
+    --avatar-radius: 4px;
+  }
+
+  &--tile {
+    --avatar-radius: 0;
+  }
+
+  // &[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;
+  }
+}

package/src/components/VAvatar/VAvatar.tsx

@@ -0,0 +1,81 @@
+import './VAvatar.scss';
+import { defineComponent, computed, PropType } from 'vue';
+import {
+  navigationableInheritProps,
+  useNavigationable,
+  renderSlotOrEmpty,
+} from '@fastkit/vue-utils';
+import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
+import { useVui } from '../../injections';
+import { VBusyImage } from '../VBusyImage';
+
+export const AVATAR_SIZES = ['sm', 'md', 'lg'] as const;
+
+export type AvatarSize = typeof AVATAR_SIZES[number];
+
+export function createAvatarProps() {
+  return {
+    ...colorSchemeProps(),
+    ...navigationableInheritProps,
+    size: {
+      type: [String, Number] as PropType<AvatarSize | number>,
+      default: 'md',
+    },
+    tile: Boolean,
+    rounded: Boolean,
+    disabled: Boolean,
+    src: String,
+  };
+}
+
+export const VAvatar = defineComponent({
+  name: 'VAvatar',
+  inheritAttrs: false,
+  props: createAvatarProps(),
+  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 navigationable = useNavigationable(ctx, {
+      clickableClassName: () => 'v-avatar--clickable',
+      linkFallbackTag: 'div',
+    });
+
+    const classes = computed(() => {
+      const { size } = props;
+      return [
+        {
+          'v-avatar--tile': props.tile,
+          'v-avatar--rounded': props.rounded,
+        },
+        typeof size === 'string' && `v-avatar--${size}`,
+      ];
+    });
+
+    const styles = computed(() => {
+      const { size } = props;
+      if (typeof size !== 'number') return;
+
+      return {
+        '--avatar-size': `${size}px`,
+      };
+    });
+
+    return () => {
+      const { src } = props;
+      const { Tag, attrs } = navigationable.value;
+      return (
+        <Tag
+          {...attrs}
+          class={['v-avatar', classes.value, color.colorClasses.value]}
+          style={styles.value}>
+          {(!!src && <VBusyImage class="v-avatar__image" src={src} cover />) ||
+            renderSlotOrEmpty(ctx.slots)}
+        </Tag>
+      );
+    };
+  },
+});

package/src/components/VAvatar/index.ts

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