@varlet/ui 2.8.0-alpha.1676441771603 → 2.8.0-alpha.1676455225773

package/es/avatar/Avatar.mjs

@@ -0,0 +1,148 @@
+import { defineComponent, ref, onMounted, onUpdated } from 'vue';
+import { props, internalSizeValidator, sizeValidator } from './props.mjs';
+import { toSizeUnit } from '../utils/elements.mjs';
+import { createNamespace, call } from '../utils/components.mjs';
+var {
+  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";
+
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
+
+var _hoisted_1 = ["src", "lazy-loading", "lazy-error"];
+var _hoisted_2 = ["src"];
+
+function __render__(_ctx, _cache) {
+  var _directive_lazy = _resolveDirective("lazy");
+
+  return _openBlock(), _createElementBlock("div", {
+    ref: "avatarElement",
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.internalSizeValidator(_ctx.size), _ctx.n("--" + _ctx.size)], [_ctx.round, _ctx.n('--round')], [_ctx.bordered, _ctx.n('--bordered')])),
+    style: _normalizeStyle({
+      width: !_ctx.internalSizeValidator(_ctx.size) ? _ctx.toSizeUnit(_ctx.size) : undefined,
+      height: !_ctx.internalSizeValidator(_ctx.size) ? _ctx.toSizeUnit(_ctx.size) : undefined,
+      borderColor: _ctx.borderColor,
+      backgroundColor: _ctx.color
+    }),
+    onClick: _cache[3] || (_cache[3] = function () {
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
+    })
+  }, [_ctx.src ? (_openBlock(), _createElementBlock(_Fragment, {
+    key: 0
+  }, [_ctx.lazy ? _withDirectives((_openBlock(), _createElementBlock("img", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('image')),
+    src: _ctx.src,
+    style: _normalizeStyle({
+      objectFit: _ctx.fit
+    }),
+    "lazy-loading": _ctx.loading,
+    "lazy-error": _ctx.error,
+    onLoad: _cache[0] || (_cache[0] = function () {
+      return _ctx.handleLoad && _ctx.handleLoad(...arguments);
+    })
+  }, null, 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+  , _hoisted_1)), [[_directive_lazy, _ctx.src]]) : (_openBlock(), _createElementBlock("img", {
+    key: 1,
+    class: _normalizeClass(_ctx.n('image')),
+    src: _ctx.src,
+    style: _normalizeStyle({
+      objectFit: _ctx.fit
+    }),
+    onLoad: _cache[1] || (_cache[1] = function () {
+      return _ctx.handleLoad && _ctx.handleLoad(...arguments);
+    }),
+    onError: _cache[2] || (_cache[2] = function () {
+      return _ctx.handleError && _ctx.handleError(...arguments);
+    })
+  }, null, 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+  , _hoisted_2))], 2112
+  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+  )) : (_openBlock(), _createElementBlock("div", {
+    key: 1,
+    ref: "textElement",
+    class: _normalizeClass(_ctx.n('text')),
+    style: _normalizeStyle({
+      scale: _ctx.scale
+    })
+  }, [_renderSlot(_ctx.$slots, "default")], 6
+  /* CLASS, STYLE */
+  ))], 6
+  /* CLASS, STYLE */
+  );
+}
+
+var __sfc__ = defineComponent({
+  name: 'VarAvatar',
+  components: {},
+  props,
+
+  setup(props) {
+    var avatarElement = ref(null);
+    var textElement = ref(null);
+    var scale = ref(1);
+
+    var getScale = () => {
+      if (!avatarElement.value || !textElement.value) {
+        scale.value = 1;
+        return;
+      }
+
+      var avatarElementWidth = avatarElement.value.offsetWidth;
+      var textElementWidth = textElement.value.offsetWidth;
+
+      if (avatarElementWidth > textElementWidth) {
+        scale.value = 1;
+      } else {
+        scale.value = avatarElementWidth / textElementWidth;
+      }
+    };
+
+    var handleLoad = e => {
+      var el = e.currentTarget;
+      var {
+        lazy,
+        onLoad,
+        onError
+      } = props;
+
+      if (lazy) {
+        el._lazy.state === 'success' && call(onLoad, e);
+        el._lazy.state === 'error' && call(onError, e);
+      } else {
+        call(onLoad, e);
+      }
+    };
+
+    var handleError = e => {
+      call(props.onError, e);
+    };
+
+    var handleClick = e => {
+      call(props.onClick, e);
+    };
+
+    onMounted(getScale);
+    onUpdated(getScale);
+    return {
+      internalSizeValidator,
+      sizeValidator,
+      toSizeUnit,
+      n,
+      classes,
+      avatarElement,
+      textElement,
+      scale,
+      handleLoad,
+      handleError,
+      handleClick
+    };
+  }
+
+});
+
+__sfc__.render = __render__;
+export default __sfc__;

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;}.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;}

package/es/avatar/index.mjs

@@ -0,0 +1,9 @@
+import Avatar from './Avatar.mjs';
+
+Avatar.install = function (app) {
+  app.component(Avatar.name, Avatar);
+};
+
+export { props as avatarProps } from './props.mjs';
+export var _AvatarComponent = Avatar;
+export default Avatar;

package/es/avatar/props.mjs

@@ -0,0 +1,53 @@
+import { defineListenerProp } from '../utils/components.mjs';
+import { isNumber, isString } from '@varlet/shared';
+
+function fitValidator(fit) {
+  return ['fill', 'contain', 'cover', 'none', 'scale-down'].includes(fit);
+}
+
+export var internalSizeValidator = size => ['mini', 'small', 'normal', 'large'].includes(size);
+export function sizeValidator(size) {
+  return internalSizeValidator(size) || isNumber(size) || isString(size);
+}
+export var props = {
+  round: {
+    type: Boolean,
+    default: true
+  },
+  size: {
+    type: [String, Number],
+    validator: sizeValidator,
+    default: 'normal'
+  },
+  color: {
+    type: String
+  },
+  src: {
+    type: String
+  },
+  fit: {
+    type: String,
+    validator: fitValidator,
+    default: 'cover'
+  },
+  bordered: {
+    type: Boolean,
+    default: false
+  },
+  borderColor: {
+    type: String
+  },
+  loading: {
+    type: String
+  },
+  error: {
+    type: String
+  },
+  lazy: {
+    type: Boolean,
+    default: false
+  },
+  onClick: defineListenerProp(),
+  onLoad: defineListenerProp(),
+  onError: defineListenerProp()
+};

package/es/avatar/style/index.mjs

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

package/es/avatar-group/AvatarGroup.mjs

@@ -0,0 +1,46 @@
+import { defineComponent, computed } from 'vue';
+import { props } from './props.mjs';
+import { createNamespace } from '../utils/components.mjs';
+import { toSizeUnit } from '../utils/elements.mjs';
+var {
+  n,
+  classes
+} = createNamespace('avatar-group');
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.vertical, _ctx.n('--column'), _ctx.n('--row')])),
+    style: _normalizeStyle(_ctx.rootStyles)
+  }, [_renderSlot(_ctx.$slots, "default"), _renderSlot(_ctx.$slots, "rest")], 6
+  /* CLASS, STYLE */
+  );
+}
+
+var __sfc__ = defineComponent({
+  name: 'VarAvatarGroup',
+  components: {},
+  props,
+
+  setup(props) {
+    var rootStyles = computed(() => {
+      if (props.offset == null) {
+        return {};
+      }
+
+      return {
+        '--avatar-group-offset': toSizeUnit(props.offset)
+      };
+    });
+    return {
+      n,
+      classes,
+      toSizeUnit,
+      rootStyles
+    };
+  }
+
+});
+
+__sfc__.render = __render__;
+export default __sfc__;

package/es/avatar-group/avatarGroup.css

@@ -0,0 +1 @@
+:root { --avatar-group-offset: -10px;}.var-avatar-group { display: flex; flex-wrap: wrap;}.var-avatar-group--row { margin-left: calc(var(--avatar-group-offset) * -1);}.var-avatar-group--row > * { margin-left: var(--avatar-group-offset);}.var-avatar-group--column { flex-direction: column; margin-top: calc(var(--avatar-group-offset) * -1);}.var-avatar-group--column > * { margin-top: var(--avatar-group-offset);}

package/es/avatar-group/index.mjs

@@ -0,0 +1,9 @@
+import AvatarGroup from './AvatarGroup.mjs';
+
+AvatarGroup.install = function (app) {
+  app.component(AvatarGroup.name, AvatarGroup);
+};
+
+export { props as avatarGroupProps } from './props.mjs';
+export var _AvatarGroupComponent = AvatarGroup;
+export default AvatarGroup;

package/es/avatar-group/props.mjs

@@ -0,0 +1,9 @@
+export var props = {
+  offset: {
+    type: [Number, String]
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  }
+};

package/es/avatar-group/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../avatarGroup.css'
+import '../AvatarGroupSfc.css'

package/es/cell/props.mjs

@@ -32,7 +32,5 @@ export var props = {
     type: Boolean,
     default: false
   },
-  onClick: {
-    type: defineListenerProp
-  }
+  onClick: defineListenerProp
 };

package/es/index.bundle.mjs

@@ -1,5 +1,7 @@
 import ActionSheet from './action-sheet/index.mjs'
 import AppBar from './app-bar/index.mjs'
+import Avatar from './avatar/index.mjs'
+import AvatarGroup from './avatar-group/index.mjs'
 import BackTop from './back-top/index.mjs'
 import Badge from './badge/index.mjs'
 import BottomNavigation from './bottom-navigation/index.mjs'
@@ -75,6 +77,8 @@ import Uploader from './uploader/index.mjs'
 
 export * from './action-sheet/index.mjs'
 export * from './app-bar/index.mjs'
+export * from './avatar/index.mjs'
+export * from './avatar-group/index.mjs'
 export * from './back-top/index.mjs'
 export * from './badge/index.mjs'
 export * from './bottom-navigation/index.mjs'
@@ -150,6 +154,8 @@ export * from './uploader/index.mjs'
 
 import './action-sheet/style/index.mjs'
 import './app-bar/style/index.mjs'
+import './avatar/style/index.mjs'
+import './avatar-group/style/index.mjs'
 import './back-top/style/index.mjs'
 import './badge/style/index.mjs'
 import './bottom-navigation/style/index.mjs'
@@ -223,11 +229,13 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.8.0-alpha.1676441771603'
+const version = '2.8.0-alpha.1676455225773'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
   AppBar.install && app.use(AppBar)
+  Avatar.install && app.use(Avatar)
+  AvatarGroup.install && app.use(AvatarGroup)
   BackTop.install && app.use(BackTop)
   Badge.install && app.use(Badge)
   BottomNavigation.install && app.use(BottomNavigation)
@@ -307,6 +315,8 @@ export {
   install,
   ActionSheet,
   AppBar,
+  Avatar,
+  AvatarGroup,
   BackTop,
   Badge,
   BottomNavigation,
@@ -386,6 +396,8 @@ export default {
   install,
   ActionSheet,
   AppBar,
+  Avatar,
+  AvatarGroup,
   BackTop,
   Badge,
   BottomNavigation,

package/es/index.mjs

@@ -1,5 +1,7 @@
 import ActionSheet from './action-sheet/index.mjs'
 import AppBar from './app-bar/index.mjs'
+import Avatar from './avatar/index.mjs'
+import AvatarGroup from './avatar-group/index.mjs'
 import BackTop from './back-top/index.mjs'
 import Badge from './badge/index.mjs'
 import BottomNavigation from './bottom-navigation/index.mjs'
@@ -75,6 +77,8 @@ import Uploader from './uploader/index.mjs'
 
 export * from './action-sheet/index.mjs'
 export * from './app-bar/index.mjs'
+export * from './avatar/index.mjs'
+export * from './avatar-group/index.mjs'
 export * from './back-top/index.mjs'
 export * from './badge/index.mjs'
 export * from './bottom-navigation/index.mjs'
@@ -148,11 +152,13 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.8.0-alpha.1676441771603'
+const version = '2.8.0-alpha.1676455225773'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
   AppBar.install && app.use(AppBar)
+  Avatar.install && app.use(Avatar)
+  AvatarGroup.install && app.use(AvatarGroup)
   BackTop.install && app.use(BackTop)
   Badge.install && app.use(Badge)
   BottomNavigation.install && app.use(BottomNavigation)
@@ -232,6 +238,8 @@ export {
   install,
   ActionSheet,
   AppBar,
+  Avatar,
+  AvatarGroup,
   BackTop,
   Badge,
   BottomNavigation,
@@ -311,6 +319,8 @@ export default {
   install,
   ActionSheet,
   AppBar,
+  Avatar,
+  AvatarGroup,
   BackTop,
   Badge,
   BottomNavigation,

package/es/snackbar/style/index.mjs

@@ -1,8 +1,8 @@
 import '../../styles/common.css'
+import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../button/button.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
-import '../SnackbarSfc.css'