@varlet/ui 3.5.0 → 3.5.1

package/es/auto-complete/AutoComplete.mjs

@@ -1,361 +0,0 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import VarInput from "../input/index.mjs";
-import VarMenuSelect from "../menu-select/index.mjs";
-import VarMenuOption from "../menu-option/index.mjs";
-import VarFormDetails from "../form-details/index.mjs";
-import { computed, defineComponent, nextTick, ref, watch } from "vue";
-import { props } from "./props.mjs";
-import { createNamespace, useValidation } from "../utils/components.mjs";
-import { useClickOutside, useEventListener, useVModel } from "@varlet/use";
-import { call, isEmpty, preventDefault, raf, toNumber } from "@varlet/shared";
-import { useForm } from "../form/provide.mjs";
-const { name, n } = createNamespace("auto-complete");
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-const _hoisted_1 = ["tabindex"];
-function __render__(_ctx, _cache) {
-  const _component_var_input = _resolveComponent("var-input");
-  const _component_var_menu_option = _resolveComponent("var-menu-option");
-  const _component_var_menu_select = _resolveComponent("var-menu-select");
-  const _component_var_form_details = _resolveComponent("var-form-details");
-  return _openBlock(), _createElementBlock("div", {
-    ref: "root",
-    class: _normalizeClass(_ctx.n()),
-    tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
-    onFocusin: _cache[2] || (_cache[2] = (...args) => _ctx.focus && _ctx.focus(...args)),
-    onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-  }, [
-    _createVNode(_component_var_menu_select, {
-      "same-width": "",
-      "auto-complete-cover": "",
-      scrollable: "",
-      trigger: "manual",
-      placement: "bottom",
-      disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly,
-      class: _normalizeClass(_ctx.n("menu-select")),
-      "popover-class": _ctx.variant === "standard" ? _ctx.n("--standard-menu-margin") : void 0,
-      show: _ctx.isShowMenuSelect,
-      "onUpdate:show": _cache[1] || (_cache[1] = ($event) => _ctx.isShowMenuSelect = $event),
-      "onUpdate:modelValue": _ctx.handleAutoComplete,
-      onKeyEscape: _ctx.handleKeyEscape
-    }, {
-      options: _withCtx(() => [
-        _createElementVNode(
-          "div",
-          {
-            class: _normalizeClass(_ctx.n("options"))
-          },
-          [
-            (_openBlock(true), _createElementBlock(
-              _Fragment,
-              null,
-              _renderList(_ctx.viewOptions, (option) => {
-                return _openBlock(), _createBlock(_component_var_menu_option, {
-                  key: option[_ctx.valueKey],
-                  label: option[_ctx.labelKey],
-                  value: option[_ctx.valueKey],
-                  option,
-                  disabled: option.disabled
-                }, null, 8, ["label", "value", "option", "disabled"]);
-              }),
-              128
-              /* KEYED_FRAGMENT */
-            ))
-          ],
-          2
-          /* CLASS */
-        )
-      ]),
-      default: _withCtx(() => [
-        _createVNode(_component_var_input, _mergeProps({ ref: "input" }, {
-          maxlength: _ctx.maxlength,
-          enterkeyhint: _ctx.enterkeyhint,
-          placeholder: _ctx.placeholder,
-          size: _ctx.size,
-          variant: _ctx.variant,
-          line: _ctx.line,
-          hint: _ctx.hint,
-          textColor: _ctx.textColor,
-          focusColor: _ctx.focusColor,
-          blurColor: _ctx.blurColor,
-          readonly: _ctx.readonly,
-          disabled: _ctx.disabled,
-          clearable: _ctx.clearable
-        }, {
-          autocomplete: "off",
-          "is-force-focusing-effect": _ctx.isFocusing,
-          "is-force-error-effect": !!_ctx.errorMessage,
-          "is-show-form-details": false,
-          onInput: _ctx.handleInput,
-          onBlur: _ctx.handleBlur,
-          onClear: _ctx.handleClear,
-          onChange: _ctx.handleChange,
-          modelValue: _ctx.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.value = $event)
-        }), _createSlots({
-          _: 2
-          /* DYNAMIC */
-        }, [
-          _ctx.$slots["prepend-icon"] ? {
-            name: "prepend-icon",
-            fn: _withCtx(() => [
-              _renderSlot(_ctx.$slots, "prepend-icon")
-            ]),
-            key: "0"
-          } : void 0,
-          _ctx.$slots["append-icon"] ? {
-            name: "append-icon",
-            fn: _withCtx(() => [
-              _renderSlot(_ctx.$slots, "append-icon")
-            ]),
-            key: "1"
-          } : void 0,
-          _ctx.$slots["clear-icon"] ? {
-            name: "clear-icon",
-            fn: _withCtx(({ clear }) => [
-              _renderSlot(_ctx.$slots, "clear-icon", { clear })
-            ]),
-            key: "2"
-          } : void 0,
-          _ctx.$slots["extra-message"] ? {
-            name: "extra-message",
-            fn: _withCtx(() => [
-              _renderSlot(_ctx.$slots, "extra-message")
-            ]),
-            key: "3"
-          } : void 0
-        ]), 1040, ["is-force-focusing-effect", "is-force-error-effect", "onInput", "onBlur", "onClear", "onChange", "modelValue"])
-      ]),
-      _: 3
-      /* FORWARDED */
-    }, 8, ["disabled", "class", "popover-class", "show", "onUpdate:modelValue", "onKeyEscape"]),
-    _createVNode(_component_var_form_details, {
-      "error-message": _ctx.errorMessage,
-      "extra-message": _ctx.maxlengthText
-    }, null, 8, ["error-message", "extra-message"])
-  ], 42, _hoisted_1);
-}
-const __sfc__ = defineComponent({
-  name,
-  components: {
-    VarInput,
-    VarMenuSelect,
-    VarMenuOption,
-    VarFormDetails
-  },
-  props,
-  setup(props2) {
-    const root = ref();
-    const input = ref();
-    const isFocusing = ref(false);
-    const value = useVModel(props2, "modelValue");
-    const viewOptions = ref([]);
-    const isShowMenuSelect = ref(false);
-    const maxlengthText = computed(() => {
-      const { maxlength } = props2;
-      if (!maxlength) {
-        return "";
-      }
-      if (isEmpty(value.value)) {
-        return `0 / ${maxlength}`;
-      }
-      return `${String(value.value).length}/${maxlength}`;
-    });
-    const {
-      errorMessage,
-      validateWithTrigger: vt,
-      validate: v,
-      // expose
-      resetValidation
-    } = useValidation();
-    const { bindForm, form } = useForm();
-    let clearing = false;
-    const autoCompleteProvider = {
-      reset,
-      resetValidation,
-      validate
-    };
-    useClickOutside(
-      () => root.value,
-      "click",
-      () => {
-        if (clearing) {
-          clearing = false;
-          return;
-        }
-        blur();
-      }
-    );
-    watch(() => [props2.options, isFocusing.value], changeMenuState);
-    call(bindForm, autoCompleteProvider);
-    useEventListener(() => window, "keydown", handleKeydown);
-    function reset() {
-      call(props2["onUpdate:modelValue"], "");
-      resetValidation();
-    }
-    function validate() {
-      return v(props2.rules, props2.modelValue);
-    }
-    function focus() {
-      if (isFocusing.value || props2.disabled || (form == null ? void 0 : form.disabled.value)) {
-        return;
-      }
-      isFocusing.value = true;
-      input.value.focus();
-      call(props2.onFocus);
-      validateWithTrigger("onFocus");
-    }
-    function blur() {
-      if (!isFocusing.value) {
-        return;
-      }
-      isFocusing.value = false;
-      isShowMenuSelect.value = false;
-      input.value.blur();
-      call(props2.onBlur);
-      validateWithTrigger("onBlur");
-    }
-    function handleBlur() {
-      if (isShowMenuSelect.value) {
-        return;
-      }
-      blur();
-    }
-    function validateWithTrigger(trigger) {
-      nextTick(() => {
-        const { validateTrigger, rules, modelValue } = props2;
-        vt(validateTrigger, trigger, rules, modelValue);
-      });
-    }
-    function handleKeydown(event) {
-      return __async(this, null, function* () {
-        var _a;
-        if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || props2.disabled || props2.readonly || !isFocusing.value || !isShowMenuSelect.value) {
-          return;
-        }
-        const { key } = event;
-        if (key === "Tab") {
-          preventDefault(event);
-          root.value.focus();
-          isShowMenuSelect.value = false;
-          return;
-        }
-        if (!["ArrowUp", "ArrowDown", "Enter"].includes(key)) {
-          input.value.focus();
-          return;
-        }
-        if (key === "Enter") {
-          yield raf();
-          (_a = input.value) == null ? void 0 : _a.focus();
-        }
-      });
-    }
-    function changeMenuState() {
-      return __async(this, null, function* () {
-        if (isFocusing.value) {
-          isShowMenuSelect.value = getShowMenuSelect(value.value);
-        }
-        if (isShowMenuSelect.value) {
-          viewOptions.value = props2.options;
-        }
-      });
-    }
-    function handleInput(newValue, event) {
-      return __async(this, null, function* () {
-        changeMenuState();
-        call(props2.onInput, newValue, event);
-        validateWithTrigger("onInput");
-      });
-    }
-    function handleClear() {
-      clearing = true;
-      changeMenuState();
-      call(props2.onClear, value.value);
-      validateWithTrigger("onClear");
-    }
-    function handleClick(event) {
-      if (props2.disabled || (form == null ? void 0 : form.disabled.value)) {
-        return;
-      }
-      call(props2.onClick, event);
-      validateWithTrigger("onClick");
-    }
-    function handleChange(newValue) {
-      call(props2.onChange, newValue);
-      validateWithTrigger("onChange");
-    }
-    function handleAutoComplete(newValue) {
-      return __async(this, null, function* () {
-        var _a;
-        if (props2.maxlength != null) {
-          newValue = newValue.slice(0, toNumber(props2.maxlength));
-        }
-        if (newValue !== value.value) {
-          value.value = newValue;
-          call(props2.onChange, newValue);
-          validateWithTrigger("onChange");
-        }
-        yield raf();
-        (_a = input.value) == null ? void 0 : _a.focus();
-      });
-    }
-    function handleKeyEscape() {
-      input.value.focus();
-    }
-    function getShowMenuSelect(newValue) {
-      if (props2.disabled || props2.readonly || (form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value)) {
-        return false;
-      }
-      return props2.options.length > 0 && (props2.getShow != null ? props2.getShow(newValue) : newValue.length > 0);
-    }
-    return {
-      root,
-      input,
-      value,
-      isShowMenuSelect,
-      viewOptions,
-      isFocusing,
-      formDisabled: form == null ? void 0 : form.disabled,
-      formReadonly: form == null ? void 0 : form.readonly,
-      errorMessage,
-      maxlengthText,
-      n,
-      handleInput,
-      handleClear,
-      handleClick,
-      handleChange,
-      handleBlur,
-      handleKeyEscape,
-      handleAutoComplete,
-      reset,
-      validate,
-      resetValidation,
-      blur,
-      focus
-    };
-  }
-});
-__sfc__.render = __render__;
-var stdin_default = __sfc__;
-export {
-  stdin_default as default
-};

package/es/auto-complete/autoComplete.css

@@ -1 +0,0 @@
-:root { --auto-complete-options-padding: 6px 0;}.var-auto-complete { outline: none;}.var-auto-complete__menu-select[auto-complete-cover] { display: block;}.var-auto-complete__options { padding: var(--auto-complete-options-padding);}.var-auto-complete--standard-menu-margin { margin-top: var(--field-decorator-line-focus-size) !important;}

package/es/auto-complete/index.mjs

@@ -1,11 +0,0 @@
-import AutoComplete from "./AutoComplete.mjs";
-import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
-import { props as autoCompleteProps } from "./props.mjs";
-withInstall(AutoComplete);
-withPropsDefaultsSetter(AutoComplete, autoCompleteProps);
-const _AutoCompleteComponent = AutoComplete;
-var stdin_default = AutoComplete;
-export {
-  _AutoCompleteComponent,
-  stdin_default as default
-};

package/es/auto-complete/props.mjs

@@ -1,63 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-import { defineListenerProp, pickProps } from "../utils/components.mjs";
-import { inputProps } from "../input/index.mjs";
-const props = __spreadValues({
-  modelValue: String,
-  options: {
-    type: Array,
-    default: () => []
-  },
-  labelKey: {
-    type: String,
-    default: "label"
-  },
-  valueKey: {
-    type: String,
-    default: "value"
-  },
-  maxlength: [String, Number],
-  readonly: Boolean,
-  disabled: Boolean,
-  validateTrigger: {
-    type: Array,
-    default: () => ["onInput", "onClear", "onChange"]
-  },
-  getShow: Function,
-  rules: [Array, Function, Object],
-  onFocus: defineListenerProp(),
-  onBlur: defineListenerProp(),
-  onInput: defineListenerProp(),
-  onChange: defineListenerProp(),
-  onClear: defineListenerProp(),
-  onClick: defineListenerProp(),
-  "onUpdate:modelValue": defineListenerProp()
-}, pickProps(inputProps, [
-  "size",
-  "variant",
-  "placeholder",
-  "enterkeyhint",
-  "line",
-  "hint",
-  "textColor",
-  "focusColor",
-  "blurColor",
-  "clearable"
-]));
-export {
-  props
-};

package/es/auto-complete/style/index.mjs

@@ -1,11 +0,0 @@
-import '../../styles/common.css'
-import '../../styles/elevation.css'
-import '../../icon/icon.css'
-import '../../field-decorator/fieldDecorator.css'
-import '../../form-details/formDetails.css'
-import '../../input/input.css'
-import '../../menu/menu.css'
-import '../../menu-option/menuOption.css'
-import '../../menu-select/menuSelect.css'
-import '../autoComplete.css'
-import '../AutoCompleteSfc.css'

package/es/avatar/Avatar.mjs

@@ -1,144 +0,0 @@
-import Lazy from "../lazy/index.mjs";
-import { defineComponent, ref, onUpdated } from "vue";
-import { props } from "./props.mjs";
-import { toSizeUnit } from "../utils/elements.mjs";
-import { createNamespace } from "../utils/components.mjs";
-import { call } from "@varlet/shared";
-import { onSmartMounted } from "@varlet/use";
-const isInternalSize = (size) => ["mini", "small", "normal", "large"].includes(size);
-const { name, n, classes } = createNamespace("avatar");
-import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, Fragment as _Fragment, renderSlot as _renderSlot, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-const _hoisted_1 = ["src", "alt", "lazy-loading", "lazy-error"];
-const _hoisted_2 = ["src", "alt"];
-function __render__(_ctx, _cache) {
-  const _directive_lazy = _resolveDirective("lazy");
-  return _openBlock(), _createElementBlock(
-    "div",
-    {
-      ref: "avatarElement",
-      class: _normalizeClass(
-        _ctx.classes(
-          _ctx.n(),
-          _ctx.n("$--box"),
-          [_ctx.isInternalSize(_ctx.size), _ctx.n(`--${_ctx.size}`)],
-          [_ctx.round, _ctx.n("--round")],
-          [_ctx.bordered, _ctx.n("--bordered")],
-          [_ctx.hoverable, _ctx.n("--hoverable")]
-        )
-      ),
-      style: _normalizeStyle({
-        width: !_ctx.isInternalSize(_ctx.size) ? _ctx.toSizeUnit(_ctx.size) : void 0,
-        height: !_ctx.isInternalSize(_ctx.size) ? _ctx.toSizeUnit(_ctx.size) : void 0,
-        borderColor: _ctx.borderColor,
-        backgroundColor: _ctx.color
-      }),
-      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-    },
-    [
-      _ctx.src ? (_openBlock(), _createElementBlock(
-        _Fragment,
-        { key: 0 },
-        [
-          _ctx.lazy ? _withDirectives((_openBlock(), _createElementBlock("img", {
-            key: 0,
-            role: "img",
-            class: _normalizeClass(_ctx.n("image")),
-            src: _ctx.src,
-            alt: _ctx.alt,
-            style: _normalizeStyle({ objectFit: _ctx.fit }),
-            "lazy-loading": _ctx.loading,
-            "lazy-error": _ctx.error,
-            onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args))
-          }, null, 46, _hoisted_1)), [
-            [_directive_lazy, _ctx.src]
-          ]) : (_openBlock(), _createElementBlock("img", {
-            key: 1,
-            role: "img",
-            class: _normalizeClass(_ctx.n("image")),
-            src: _ctx.src,
-            alt: _ctx.alt,
-            style: _normalizeStyle({ objectFit: _ctx.fit }),
-            onLoad: _cache[1] || (_cache[1] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
-            onError: _cache[2] || (_cache[2] = (...args) => _ctx.handleError && _ctx.handleError(...args))
-          }, null, 46, _hoisted_2))
-        ],
-        64
-        /* STABLE_FRAGMENT */
-      )) : (_openBlock(), _createElementBlock(
-        "div",
-        {
-          key: 1,
-          ref: "textElement",
-          class: _normalizeClass(_ctx.n("text")),
-          style: _normalizeStyle({ transform: `scale(${_ctx.scale})` })
-        },
-        [
-          _renderSlot(_ctx.$slots, "default")
-        ],
-        6
-        /* CLASS, STYLE */
-      ))
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const __sfc__ = defineComponent({
-  name,
-  directives: { Lazy },
-  props,
-  setup(props2) {
-    const avatarElement = ref(null);
-    const textElement = ref(null);
-    const scale = ref(1);
-    onSmartMounted(getScale);
-    onUpdated(getScale);
-    function getScale() {
-      if (!avatarElement.value || !textElement.value) {
-        scale.value = 1;
-        return;
-      }
-      const avatarElementWidth = avatarElement.value.offsetWidth;
-      const textElementWidth = textElement.value.offsetWidth;
-      if (avatarElementWidth > textElementWidth) {
-        scale.value = 1;
-      } else {
-        scale.value = avatarElementWidth / textElementWidth;
-      }
-    }
-    function handleLoad(e) {
-      const el = e.currentTarget;
-      const { lazy, onLoad, onError } = props2;
-      if (lazy) {
-        el._lazy.state === "success" && call(onLoad, e);
-        el._lazy.state === "error" && call(onError, e);
-      } else {
-        call(onLoad, e);
-      }
-    }
-    function handleError(e) {
-      call(props2.onError, e);
-    }
-    function handleClick(e) {
-      call(props2.onClick, e);
-    }
-    return {
-      avatarElement,
-      textElement,
-      scale,
-      n,
-      classes,
-      isInternalSize,
-      toSizeUnit,
-      handleLoad,
-      handleError,
-      handleClick
-    };
-  }
-});
-__sfc__.render = __render__;
-var stdin_default = __sfc__;
-export {
-  stdin_default as default
-};

package/es/avatar/avatar.css

@@ -1 +0,0 @@
-:root { --avatar-text-color: #f5f5f5; --avatar-border-radius: 4px; --avatar-mini-size: 28px; --avatar-small-size: 36px; --avatar-normal-size: 48px; --avatar-large-size: 64px; --avatar-border: 2px solid #fff; --avatar-background-color: #bebebe; --avatar-hover-transform: scale(1.1);}.var-avatar { display: inline-flex; overflow: hidden; align-items: center; justify-content: center; color: var(--avatar-text-color); border-radius: var(--avatar-border-radius); background-color: var(--avatar-background-color); transition: background-color 0.25s; -webkit-tap-highlight-color: transparent;}.var-avatar img { width: 100%; height: 100%;}.var-avatar--mini { width: var(--avatar-mini-size); height: var(--avatar-mini-size);}.var-avatar--small { width: var(--avatar-small-size); height: var(--avatar-small-size);}.var-avatar--normal { width: var(--avatar-normal-size); height: var(--avatar-normal-size);}.var-avatar--large { width: var(--avatar-large-size); height: var(--avatar-large-size);}.var-avatar--round { border-radius: 50%;}.var-avatar--bordered { border: var(--avatar-border);}.var-avatar__text { padding: 0 4px; white-space: nowrap;}.var-avatar--hoverable { transition: transform 0.2s;}.var-avatar--hoverable:hover { transform: var(--avatar-hover-transform); cursor: pointer;}

package/es/avatar/index.mjs

@@ -1,12 +0,0 @@
-import Avatar from "./Avatar.mjs";
-import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
-import { props as avatarProps } from "./props.mjs";
-withInstall(Avatar);
-withPropsDefaultsSetter(Avatar, avatarProps);
-const _AvatarComponent = Avatar;
-var stdin_default = Avatar;
-export {
-  _AvatarComponent,
-  avatarProps,
-  stdin_default as default
-};

package/es/avatar/props.mjs

@@ -1,30 +0,0 @@
-import { defineListenerProp } from "../utils/components.mjs";
-const props = {
-  round: {
-    type: Boolean,
-    default: true
-  },
-  size: {
-    type: [String, Number],
-    default: "normal"
-  },
-  alt: String,
-  color: String,
-  src: String,
-  fit: {
-    type: String,
-    default: "cover"
-  },
-  bordered: Boolean,
-  borderColor: String,
-  loading: String,
-  error: String,
-  lazy: Boolean,
-  hoverable: Boolean,
-  onClick: defineListenerProp(),
-  onLoad: defineListenerProp(),
-  onError: defineListenerProp()
-};
-export {
-  props
-};

package/es/avatar/style/index.mjs

@@ -1,3 +0,0 @@
-import '../../styles/common.css'
-import '../avatar.css'
-import '../AvatarSfc.css'