@varlet/ui 2.20.1 → 2.20.2-alpha.1702826405229

package/es/action-sheet/ActionSheet.mjs

@@ -0,0 +1,146 @@
+import Ripple from "../ripple/index.mjs";
+import VarPopup from "../popup/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import { defineComponent, ref, watch } from "vue";
+import { props } from "./props.mjs";
+import { pack } from "../locale/index.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { call } from "@varlet/shared";
+const { name, n, classes } = createNamespace("action-sheet");
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, mergeProps as _mergeProps, withCtx as _withCtx, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
+const _hoisted_1 = ["onClick"];
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_popup = _resolveComponent("var-popup");
+  const _directive_ripple = _resolveDirective("ripple");
+  return _openBlock(), _createBlock(_component_var_popup, _mergeProps({
+    class: _ctx.n("popup-radius"),
+    position: "bottom",
+    show: _ctx.popupShow,
+    overlay: _ctx.overlay,
+    "overlay-class": _ctx.overlayClass,
+    "overlay-style": _ctx.overlayStyle,
+    "lock-scroll": _ctx.lockScroll,
+    "close-on-click-overlay": _ctx.closeOnClickOverlay,
+    teleport: _ctx.teleport,
+    "safe-area": _ctx.safeArea
+  }, {
+    "onUpdate:show": _ctx.handlePopupUpdateShow
+  }, {
+    onOpen: _ctx.onOpen,
+    onClose: _ctx.onClose,
+    onClosed: _ctx.onClosed,
+    onOpened: _ctx.onOpened,
+    onRouteChange: _ctx.onRouteChange
+  }), {
+    default: _withCtx(() => [
+      _createElementVNode(
+        "div",
+        _mergeProps({
+          class: _ctx.classes(_ctx.n(), _ctx.n("$--box"))
+        }, _ctx.$attrs),
+        [
+          _renderSlot(_ctx.$slots, "title", {}, () => {
+            var _a;
+            return [
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.n("title"))
+                },
+                _toDisplayString((_a = _ctx.title) != null ? _a : _ctx.pack.actionSheetTitle),
+                3
+                /* TEXT, CLASS */
+              )
+            ];
+          }),
+          _renderSlot(_ctx.$slots, "actions", {}, () => [
+            (_openBlock(true), _createElementBlock(
+              _Fragment,
+              null,
+              _renderList(_ctx.actions, (action) => {
+                return _withDirectives((_openBlock(), _createElementBlock("div", {
+                  class: _normalizeClass(_ctx.classes(_ctx.n("action-item"), action.className, [action.disabled, _ctx.n("--disabled")])),
+                  key: action.name,
+                  style: _normalizeStyle({ color: action.color }),
+                  onClick: ($event) => _ctx.handleSelect(action)
+                }, [
+                  action.icon ? (_openBlock(), _createBlock(_component_var_icon, {
+                    key: 0,
+                    class: _normalizeClass(_ctx.n("action-icon")),
+                    "var-action-sheet-cover": "",
+                    namespace: action.namespace,
+                    name: action.icon,
+                    size: action.iconSize
+                  }, null, 8, ["class", "namespace", "name", "size"])) : _createCommentVNode("v-if", true),
+                  _createElementVNode(
+                    "div",
+                    {
+                      class: _normalizeClass(_ctx.n("action-name"))
+                    },
+                    _toDisplayString(action.name),
+                    3
+                    /* TEXT, CLASS */
+                  )
+                ], 14, _hoisted_1)), [
+                  [_directive_ripple, { disabled: action.disabled }]
+                ]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ])
+        ],
+        16
+        /* FULL_PROPS */
+      )
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 16, ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "safe-area", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  directives: { Ripple },
+  components: {
+    VarPopup,
+    VarIcon
+  },
+  inheritAttrs: false,
+  props,
+  setup(props2) {
+    const popupShow = ref(false);
+    watch(
+      () => props2.show,
+      (newValue) => {
+        popupShow.value = newValue;
+      },
+      { immediate: true }
+    );
+    function handleSelect(action) {
+      if (action.disabled) {
+        return;
+      }
+      const { closeOnClickAction, onSelect } = props2;
+      call(onSelect, action);
+      closeOnClickAction && call(props2["onUpdate:show"], false);
+    }
+    function handlePopupUpdateShow(value) {
+      call(props2["onUpdate:show"], value);
+    }
+    return {
+      popupShow,
+      pack,
+      n,
+      classes,
+      handlePopupUpdateShow,
+      handleSelect
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/action-sheet/actionSheet.css

@@ -0,0 +1 @@
+:root { --action-sheet-border-radius: 2px; --action-sheet-border-top: none; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; background: var(--action-sheet-background); transition: background-color 0.25s;}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius); border-top: var(--action-sheet-border-top);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}

package/es/action-sheet/index.mjs

@@ -0,0 +1,86 @@
+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 VarActionSheet from "./ActionSheet.mjs";
+import { nextTick, reactive } from "vue";
+import { inBrowser, call } from "@varlet/shared";
+import { mountInstance, withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as actionSheetProps } from "./props.mjs";
+let singletonOptions;
+let defaultOptions = {};
+function normalizeOptions(options = {}) {
+  return __spreadValues(__spreadValues({}, defaultOptions), options);
+}
+function ActionSheet(options) {
+  if (!inBrowser()) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    ActionSheet.close();
+    const reactiveActionSheetOptions = reactive(normalizeOptions(options));
+    reactiveActionSheetOptions.teleport = "body";
+    singletonOptions = reactiveActionSheetOptions;
+    const { unmountInstance } = mountInstance(VarActionSheet, reactiveActionSheetOptions, {
+      onSelect: (action) => {
+        call(reactiveActionSheetOptions.onSelect, action);
+        resolve(action);
+      },
+      onClose: () => {
+        call(reactiveActionSheetOptions.onClose);
+        resolve("close");
+      },
+      onClosed: () => {
+        call(reactiveActionSheetOptions.onClosed);
+        unmountInstance();
+        singletonOptions === reactiveActionSheetOptions && (singletonOptions = null);
+      },
+      onRouteChange: () => {
+        unmountInstance();
+        singletonOptions === reactiveActionSheetOptions && (singletonOptions = null);
+      },
+      "onUpdate:show": (value) => {
+        reactiveActionSheetOptions.show = value;
+      }
+    });
+    reactiveActionSheetOptions.show = true;
+  });
+}
+ActionSheet.setDefaultOptions = function(options) {
+  defaultOptions = options;
+};
+ActionSheet.resetDefaultOptions = function() {
+  defaultOptions = {};
+};
+ActionSheet.close = function() {
+  if (singletonOptions != null) {
+    const prevSingletonOptions = singletonOptions;
+    singletonOptions = null;
+    nextTick().then(() => {
+      prevSingletonOptions.show = false;
+    });
+  }
+};
+ActionSheet.Component = VarActionSheet;
+withInstall(VarActionSheet);
+withInstall(VarActionSheet, ActionSheet);
+withPropsDefaultsSetter(ActionSheet, actionSheetProps);
+const _ActionSheetComponent = VarActionSheet;
+var stdin_default = ActionSheet;
+export {
+  _ActionSheetComponent,
+  actionSheetProps,
+  stdin_default as default
+};

package/es/action-sheet/props.mjs

@@ -0,0 +1,50 @@
+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 { popupProps } from "../popup/index.mjs";
+const props = __spreadValues({
+  show: Boolean,
+  title: String,
+  actions: {
+    type: Array,
+    default: () => []
+  },
+  closeOnClickAction: {
+    type: Boolean,
+    default: true
+  },
+  onSelect: defineListenerProp(),
+  "onUpdate:show": defineListenerProp()
+}, pickProps(popupProps, [
+  "overlay",
+  "overlayClass",
+  "overlayStyle",
+  "lockScroll",
+  "closeOnClickOverlay",
+  "safeArea",
+  "teleport",
+  "onOpen",
+  "onClose",
+  "onOpened",
+  "onClosed",
+  "onClickOverlay",
+  // internal for function call closes the dialog
+  "onRouteChange"
+]));
+export {
+  props
+};

package/es/action-sheet/style/index.mjs

@@ -0,0 +1,6 @@
+import '../../styles/common.css'
+import '../../icon/icon.css'
+import '../../ripple/ripple.css'
+import '../../popup/popup.css'
+import '../actionSheet.css'
+import '../ActionSheetSfc.css'

package/es/app-bar/AppBar.mjs

@@ -0,0 +1,158 @@
+import { defineComponent, ref, onUpdated, computed } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace, formatElevation } from "../utils/components.mjs";
+import { onSmartMounted } from "@varlet/use";
+const { name, n, classes } = createNamespace("app-bar");
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(
+        _ctx.classes(
+          _ctx.n(),
+          _ctx.n("$--box"),
+          [_ctx.safeAreaTop, _ctx.n("--safe-area-top")],
+          [_ctx.round, _ctx.n("--round")],
+          _ctx.formatElevation(_ctx.elevation, 3)
+        )
+      ),
+      style: _normalizeStyle(_ctx.rootStyles)
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("toolbar"))
+        },
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("left"))
+            },
+            [
+              _renderSlot(_ctx.$slots, "left"),
+              _ctx.titlePosition === "left" ? (_openBlock(), _createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  class: _normalizeClass(_ctx.n("title")),
+                  style: _normalizeStyle({ paddingLeft: _ctx.paddingLeft })
+                },
+                [
+                  _renderSlot(_ctx.$slots, "default", {}, () => [
+                    _createTextVNode(
+                      _toDisplayString(_ctx.title),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ],
+                6
+                /* CLASS, STYLE */
+              )) : _createCommentVNode("v-if", true)
+            ],
+            2
+            /* CLASS */
+          ),
+          _ctx.titlePosition === "center" ? (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: _normalizeClass(_ctx.n("title"))
+            },
+            [
+              _renderSlot(_ctx.$slots, "default", {}, () => [
+                _createTextVNode(
+                  _toDisplayString(_ctx.title),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ],
+            2
+            /* CLASS */
+          )) : _createCommentVNode("v-if", true),
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("right"))
+            },
+            [
+              _ctx.titlePosition === "right" ? (_openBlock(), _createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  class: _normalizeClass(_ctx.n("title")),
+                  style: _normalizeStyle({ paddingRight: _ctx.paddingRight })
+                },
+                [
+                  _renderSlot(_ctx.$slots, "default", {}, () => [
+                    _createTextVNode(
+                      _toDisplayString(_ctx.title),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ],
+                6
+                /* CLASS, STYLE */
+              )) : _createCommentVNode("v-if", true),
+              _renderSlot(_ctx.$slots, "right")
+            ],
+            2
+            /* CLASS */
+          )
+        ],
+        2
+        /* CLASS */
+      ),
+      _renderSlot(_ctx.$slots, "content")
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2, { slots }) {
+    const paddingLeft = ref();
+    const paddingRight = ref();
+    const rootStyles = computed(() => {
+      const { image, color, textColor, imageLinearGradient } = props2;
+      if (image != null) {
+        const gradient = imageLinearGradient ? `linear-gradient(${imageLinearGradient}), ` : "";
+        return {
+          "background-image": `${gradient}url(${image})`,
+          "background-position": "center center",
+          "background-size": "cover"
+        };
+      }
+      return {
+        background: color,
+        color: textColor
+      };
+    });
+    onSmartMounted(computePadding);
+    onUpdated(computePadding);
+    function computePadding() {
+      paddingLeft.value = slots.left ? 0 : void 0;
+      paddingRight.value = slots.right ? 0 : void 0;
+    }
+    return {
+      rootStyles,
+      paddingLeft,
+      paddingRight,
+      n,
+      classes,
+      formatElevation
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/app-bar/appBar.css

@@ -0,0 +1 @@
+:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-title-font-size: var(--font-size-lg); --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px; --app-bar-border-radius: 4px; --app-bar-font-size: var(--font-size-lg);}.var-app-bar { position: relative; width: 100%; font-size: var(--app-bar-font-size); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__toolbar { position: relative; display: flex; justify-content: center; align-items: center; height: var(--app-bar-height);}.var-app-bar__title { font-size: var(--app-bar-title-font-size); flex: 1; display: flex; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}.var-app-bar--round { border-radius: var(--app-bar-border-radius);}.var-app-bar--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); box-sizing: content-box !important;}

package/es/app-bar/index.mjs

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

package/es/app-bar/props.mjs

@@ -0,0 +1,20 @@
+const props = {
+  color: String,
+  textColor: String,
+  title: String,
+  titlePosition: {
+    type: String,
+    default: "left"
+  },
+  elevation: {
+    type: [Boolean, String, Number],
+    default: true
+  },
+  round: Boolean,
+  image: String,
+  imageLinearGradient: String,
+  safeAreaTop: Boolean
+};
+export {
+  props
+};

package/es/app-bar/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../appBar.css'
+import '../AppBarSfc.css'

package/es/avatar/Avatar.mjs

@@ -0,0 +1,142 @@
+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,
+            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,
+            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

@@ -0,0 +1 @@
+: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;}.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

@@ -0,0 +1,12 @@
+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
+};