@varlet/ui 2.7.4 → 2.8.0-alpha.1676441771603

package/README.md

@@ -28,17 +28,19 @@ Varlet is a Material design mobile component library developed based on `Vue3`,
 
 
 ### Features
+
 - 🚀   Provide 50+ high quality general purpose components
 - 🚀   Components are very lightweight
 - 💪   Developed by Chinese, complete Chinese and English documentation and logistics support
 - 🛠️   Support on-demand introduction
 - 🛠️   Support theme customization
 - 🌍   Support internationalization
-- 💡   Support WebStorm, VS Code component syntax highlighting
+- 💡   Support WebStorm syntax highlighting
 - 💪   Support the SSR
 - 💡   Support the Typescript
 - 💪   Make sure more than 90 percent unit test coverage, providing stability assurance
 - 🛠️   Support dark mode
+- 🛠️   Provide official VSCode extension
 
 ### Install
 

package/README.zh-CN.md

@@ -28,17 +28,19 @@
 Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由 `varletjs` 社区团队进行维护。
 
 ### 特性
-- 🚀   提供50+个高质量通用组件 
+
+- 🚀   提供 50+ 个高质量通用组件
 - 🚀   组件十分轻量
 - 💪   由国人开发，完善的中英文文档和后勤保障
 - 🛠️   支持按需引入
 - 🛠️   支持主题定制
 - 🌍   支持国际化
-- 💡   支持 webstorm，vscode 组件属性高亮
+- 💡   支持 webstorm 组件属性高亮
 - 💪   支持 SSR
-- 💡   支持 Typescript 
-- 💪   确保90%以上单元测试覆盖率，提供稳定性保证
+- 💡   支持 Typescript
+- 💪   确保 90% 以上单元测试覆盖率，提供稳定性保证
 - 🛠️   支持暗黑模式
+- 🛠️   提供官方的 VSCode 插件
 
 ### 安装
 

package/es/app-bar/AppBar.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, onMounted, onUpdated } from 'vue';
+import { defineComponent, ref, onMounted, onUpdated, computed } from 'vue';
 import { props } from './props.mjs';
 import { createNamespace } from '../utils/components.mjs';
 var {
@@ -10,10 +10,9 @@ import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createT
 function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.round, _ctx.n('--round')], [_ctx.elevation, _ctx.n('$-elevation--3')])),
-    style: _normalizeStyle({
-      background: _ctx.color,
-      color: _ctx.textColor
-    })
+    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", {
@@ -49,7 +48,9 @@ function __render__(_ctx, _cache) {
   /* CLASS, STYLE */
   )) : _createCommentVNode("v-if", true), _renderSlot(_ctx.$slots, "right")], 2
   /* CLASS */
-  )], 6
+  )], 2
+  /* CLASS */
+  ), _renderSlot(_ctx.$slots, "content")], 6
   /* CLASS, STYLE */
   );
 }
@@ -70,11 +71,34 @@ var __sfc__ = defineComponent({
       paddingRight.value = slots.right ? 0 : undefined;
     };
 
+    var rootStyles = computed(() => {
+      var {
+        image,
+        color,
+        textColor,
+        imageLinearGradient
+      } = props;
+
+      if (image != null) {
+        var gradient = imageLinearGradient ? "linear-gradient(" + imageLinearGradient + "), " : '';
+        return {
+          'background-image': gradient + "url(" + image + ")",
+          'background-position': 'center center',
+          'background-size': 'cover'
+        };
+      }
+
+      return {
+        background: color,
+        color: textColor
+      };
+    });
     onMounted(computePadding);
     onUpdated(computePadding);
     return {
       n,
       classes,
+      rootStyles,
       paddingLeft,
       paddingRight
     };

package/es/app-bar/appBar.css

@@ -1 +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; display: flex; width: 100%; font-size: var(--app-bar-font-size); justify-content: center; align-items: center; height: var(--app-bar-height); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.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%; z-index: 2;}.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);}
+: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; z-index: 0; 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%; z-index: 2;}.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);}

package/es/app-bar/props.mjs

@@ -24,5 +24,11 @@ export var props = {
   round: {
     type: Boolean,
     default: false
+  },
+  image: {
+    type: String
+  },
+  imageLinearGradient: {
+    type: String
   }
 };

package/es/badge/Badge.mjs

@@ -90,8 +90,9 @@ var __sfc__ = defineComponent({
         position,
         dot
       } = props;
-      if (dot && position.includes('right')) return n('dot--right');
-      if (dot && position.includes('left')) return n('dot--left');
+      if (!dot) return;
+      if (position.includes('right')) return n('dot--right');
+      if (position.includes('left')) return n('dot--left');
     };
 
     return {

package/es/card/Card.mjs

@@ -36,7 +36,7 @@ function __render__(_ctx, _cache) {
       zIndex: _ctx.floated ? _ctx.zIndex : undefined
     }),
     onClick: _cache[0] || (_cache[0] = function () {
-      return _ctx.onClick && _ctx.onClick(...arguments);
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, [_createElementVNode("div", {
     ref: "cardFloater",
@@ -246,6 +246,10 @@ var __sfc__ = defineComponent({
       call(props['onUpdate:floating'], false);
     };
 
+    var handleClick = e => {
+      call(props.onClick, e);
+    };
+
     watch(() => props.floating, value => {
       if (isRow.value) return;
       nextTick(() => {
@@ -275,7 +279,8 @@ var __sfc__ = defineComponent({
       isRow,
       close,
       showFloatingButtons,
-      floated
+      floated,
+      handleClick
     };
   }
 

package/es/cell/Cell.mjs

@@ -1,52 +1,59 @@
-import { defineComponent } from 'vue';
-import { props } from './props.mjs';
 import VarIcon from '../icon/index.mjs';
-import { createNamespace } from '../utils/components.mjs';
+import Ripple from '../ripple/index.mjs';
+import { computed, defineComponent } from 'vue';
+import { props } from './props.mjs';
+import { call, createNamespace } from '../utils/components.mjs';
+import { toSizeUnit } from '../utils/elements.mjs';
 var {
   n,
   classes
 } = createNamespace('cell');
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
 
 function __render__(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
-  return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.border, _ctx.n('--border')]))
-  }, [_ctx.$slots.icon || _ctx.icon ? (_openBlock(), _createElementBlock("div", {
+  var _directive_ripple = _resolveDirective("ripple");
+
+  return _withDirectives((_openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.border, _ctx.n('--border')], [_ctx.onClick, _ctx.n('--cursor')])),
+    style: _normalizeStyle(_ctx.borderOffsetStyles),
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
+    })
+  }, [_renderSlot(_ctx.$slots, "icon", {}, () => [_ctx.icon ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [_ctx.iconClass, _ctx.iconClass]))
-  }, [_renderSlot(_ctx.$slots, "icon", {}, () => [_createVNode(_component_var_icon, {
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), _ctx.iconClass))
+  }, [_createVNode(_component_var_icon, {
     name: _ctx.icon
   }, null, 8
   /* PROPS */
-  , ["name"])])], 2
+  , ["name"])], 2
   /* CLASS */
-  )) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+  )) : _createCommentVNode("v-if", true)]), _createElementVNode("div", {
     class: _normalizeClass(_ctx.n('content'))
-  }, [_createElementVNode("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('title'), [_ctx.titleClass, _ctx.titleClass]))
-  }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.title), 1
-  /* TEXT */
-  )])], 2
-  /* CLASS */
-  ), _ctx.$slots.description || _ctx.description ? (_openBlock(), _createElementBlock("div", {
+  }, [_renderSlot(_ctx.$slots, "default", {}, () => [_ctx.title ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass(_ctx.classes(_ctx.n('description'), [_ctx.descriptionClass, _ctx.descriptionClass]))
-  }, [_renderSlot(_ctx.$slots, "description", {}, () => [_createTextVNode(_toDisplayString(_ctx.description), 1
-  /* TEXT */
-  )])], 2
-  /* CLASS */
-  )) : _createCommentVNode("v-if", true)], 2
+    class: _normalizeClass(_ctx.classes(_ctx.n('title'), _ctx.titleClass))
+  }, _toDisplayString(_ctx.title), 3
+  /* TEXT, CLASS */
+  )) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "description", {}, () => [_ctx.description ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.classes(_ctx.n('description'), _ctx.descriptionClass))
+  }, _toDisplayString(_ctx.description), 3
+  /* TEXT, CLASS */
+  )) : _createCommentVNode("v-if", true)])], 2
   /* CLASS */
   ), _ctx.$slots.extra ? (_openBlock(), _createElementBlock("div", {
-    key: 1,
-    class: _normalizeClass(_ctx.classes(_ctx.n('extra'), [_ctx.extraClass, _ctx.extraClass]))
+    key: 0,
+    class: _normalizeClass(_ctx.classes(_ctx.n('extra'), _ctx.extraClass))
   }, [_renderSlot(_ctx.$slots, "extra")], 2
   /* CLASS */
-  )) : _createCommentVNode("v-if", true)], 2
-  /* CLASS */
-  );
+  )) : _createCommentVNode("v-if", true)], 6
+  /* CLASS, STYLE */
+  )), [[_directive_ripple, {
+    disabled: !_ctx.ripple
+  }]]);
 }
 
 var __sfc__ = defineComponent({
@@ -54,12 +61,33 @@ var __sfc__ = defineComponent({
   components: {
     VarIcon
   },
+  directives: {
+    Ripple
+  },
   props,
 
-  setup() {
+  setup(props) {
+    var borderOffsetStyles = computed(() => {
+      if (props.borderOffset == null) {
+        return {};
+      }
+
+      return {
+        '--cell-border-left': toSizeUnit(props.borderOffset),
+        '--cell-border-right': toSizeUnit(props.borderOffset)
+      };
+    });
+
+    var handleClick = e => {
+      call(props.onClick, e);
+    };
+
     return {
       n,
-      classes
+      classes,
+      toSizeUnit,
+      borderOffsetStyles,
+      handleClick
     };
   }
 

package/es/cell/cell.css

@@ -1 +1 @@
-:root { --cell-color: var(--color-text); --cell-font-size: var(--font-size-md); --cell-description-font-size: var(--font-size-sm); --cell-description-color: rgba(0, 0, 0, 0.6); --cell-padding: 10px 12px; --cell-min-height: 40px; --cell-border-color: #bcc2cb; --cell-border-left: 12px; --cell-border-right: 12px; --cell-icon-right: 8px; --cell-extra-left: 8px;}.var-cell { align-items: center; display: flex; min-height: var(--cell-min-height); outline: none; width: 100%; padding: var(--cell-padding); position: relative; box-sizing: border-box; font-size: var(--cell-font-size); color: var(--cell-color);}.var-cell--border::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; right: var(--cell-border-right); bottom: 0; left: var(--cell-border-left); border-bottom: 1px solid var(--cell-border-color); transform: scaleY(0.5);}.var-cell__icon { margin-right: var(--cell-icon-right); flex: 0;}.var-cell__content { flex: 1; overflow: hidden;}.var-cell__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.var-cell__description { font-size: var(--cell-description-font-size); color: var(--cell-description-color);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}
+:root { --cell-color: var(--color-text); --cell-font-size: var(--font-size-md); --cell-description-font-size: var(--font-size-sm); --cell-description-color: rgba(0, 0, 0, 0.6); --cell-description-margin-top: 4px; --cell-padding: 10px 12px; --cell-min-height: 40px; --cell-border-color: #bcc2cb; --cell-border-left: 12px; --cell-border-right: 12px; --cell-icon-right: 8px; --cell-extra-left: 8px;}.var-cell { align-items: center; display: flex; min-height: var(--cell-min-height); outline: none; width: 100%; padding: var(--cell-padding); position: relative; box-sizing: border-box; font-size: var(--cell-font-size); color: var(--cell-color);}.var-cell--border::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; bottom: 0; right: var(--cell-border-right); left: var(--cell-border-left); border-bottom: 1px solid var(--cell-border-color); transform: scaleY(0.5);}.var-cell__icon { margin-right: var(--cell-icon-right); flex: 0;}.var-cell__content { flex: 1; overflow: hidden;}.var-cell__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.var-cell__description { font-size: var(--cell-description-font-size); color: var(--cell-description-color); margin-top: var(--cell-description-margin-top);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}.var-cell--cursor { cursor: pointer;}

package/es/cell/props.mjs

@@ -1,3 +1,4 @@
+import { defineListenerProp } from '../utils/components.mjs';
 export var props = {
   title: {
     type: [Number, String]
@@ -12,6 +13,9 @@ export var props = {
     type: Boolean,
     default: false
   },
+  borderOffset: {
+    type: [Number, String]
+  },
   iconClass: {
     type: String
   },
@@ -23,5 +27,12 @@ export var props = {
   },
   extraClass: {
     type: String
+  },
+  ripple: {
+    type: Boolean,
+    default: false
+  },
+  onClick: {
+    type: defineListenerProp
   }
 };

package/es/chip/Chip.mjs

@@ -1,7 +1,7 @@
 import VarIcon from '../icon/index.mjs';
 import { defineComponent, computed } from 'vue';
 import { props } from './props.mjs';
-import { createNamespace } from '../utils/components.mjs';
+import { call, createNamespace } from '../utils/components.mjs';
 var {
   n,
   classes
@@ -25,7 +25,7 @@ function __render__(_ctx, _cache) {
       key: 0,
       class: _normalizeClass(_ctx.n('--close')),
       onClick: _cache[0] || (_cache[0] = function () {
-        return _ctx.onClose && _ctx.onClose(...arguments);
+        return _ctx.handleClose && _ctx.handleClose(...arguments);
       })
     }, [_createVNode(_component_var_icon, {
       name: "" + (_ctx.iconName ? _ctx.iconName : 'close-circle')
@@ -85,11 +85,17 @@ var __sfc__ = defineComponent({
       var roundClass = round ? n('--round') : null;
       return [n("--" + size), blockClass, plainTypeClass, roundClass];
     });
+
+    var handleClose = e => {
+      call(props.onClose, e);
+    };
+
     return {
       n,
       classes,
       chipStyles,
-      contentClass
+      contentClass,
+      handleClose
     };
   }
 

package/es/col/Col.mjs

@@ -19,7 +19,7 @@ function __render__(_ctx, _cache) {
       paddingRight: _ctx.toSizeUnit(_ctx.padding.right)
     }),
     onClick: _cache[0] || (_cache[0] = function () {
-      return _ctx.onClick && _ctx.onClick(...arguments);
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, [_renderSlot(_ctx.$slots, "default")], 6
   /* CLASS, STYLE */
@@ -69,6 +69,10 @@ var __sfc__ = defineComponent({
       return classes;
     };
 
+    var handleClick = e => {
+      call(props.onClick, e);
+    };
+
     watch([() => props.span, () => props.offset], () => {
       row == null ? void 0 : row.computePadding();
     });
@@ -81,7 +85,8 @@ var __sfc__ = defineComponent({
       toSizeUnit,
       getSize,
       span,
-      offset
+      offset,
+      handleClick
     };
   }
 

package/es/collapse/Collapse.mjs

@@ -82,7 +82,7 @@ var __sfc__ = defineComponent({
             index,
             name
           } = _ref3;
-          return name.value === undefined ? props.modelValue === index.value : false;
+          return name.value === undefined && props.modelValue === index.value;
         });
       }
 
@@ -91,7 +91,7 @@ var __sfc__ = defineComponent({
           index,
           name
         } = _ref4;
-        return name.value === undefined ? props.modelValue.includes(index.value) : false;
+        return name.value === undefined && props.modelValue.includes(index.value);
       });
     };
 

package/es/ellipsis/Ellipsis.mjs

@@ -0,0 +1,106 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import VarTooltip from '../tooltip/index.mjs';
+import { computed, defineComponent, ref } from 'vue';
+import { createNamespace } from '../utils/components.mjs';
+import { props } from './props.mjs';
+var {
+  n,
+  classes
+} = createNamespace('ellipsis');
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
+
+var _hoisted_1 = {
+  key: 0
+};
+
+function __render__(_ctx, _cache) {
+  var _component_var_tooltip = _resolveComponent("var-tooltip");
+
+  return _openBlock(), _createBlock(_component_var_tooltip, _normalizeProps(_guardReactiveProps(_ctx.tooltip)), {
+    content: _withCtx(() => [_renderSlot(_ctx.$slots, "tooltip-content", {}, () => {
+      var _ctx$tooltip;
+
+      return [(_ctx$tooltip = _ctx.tooltip) != null && _ctx$tooltip.content ? (_openBlock(), _createElementBlock("span", _hoisted_1, _toDisplayString(_ctx.tooltip.content), 1
+      /* TEXT */
+      )) : _renderSlot(_ctx.$slots, "default", {
+        key: 1
+      })];
+    })]),
+    default: _withCtx(() => [_createElementVNode("span", {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.lineClamp, _ctx.n('--clamp'), _ctx.n('--line')], [_ctx.expandTrigger, _ctx.n('--cursor')], [_ctx.expanding, _ctx.n('--expand')])),
+      style: _normalizeStyle(_ctx.rootStyles),
+      onClick: _cache[0] || (_cache[0] = function () {
+        return _ctx.handleClick && _ctx.handleClick(...arguments);
+      })
+    }, [_renderSlot(_ctx.$slots, "default")], 6
+    /* CLASS, STYLE */
+    )]),
+    _: 3
+    /* FORWARDED */
+
+  }, 16
+  /* FULL_PROPS */
+  );
+}
+
+var __sfc__ = defineComponent({
+  name: 'VarEllipsis',
+  components: {
+    VarTooltip
+  },
+  props,
+
+  setup(props) {
+    var expanding = ref(false);
+    var rootStyles = computed(() => {
+      if (!props.lineClamp) {
+        return {};
+      }
+
+      return {
+        '-webkit-line-clamp': props.lineClamp
+      };
+    });
+    var tooltip = computed(() => {
+      if (props.tooltip === false) {
+        return {
+          disabled: true
+        };
+      }
+
+      if (props.tooltip === true) {
+        return {
+          sameWidth: true
+        };
+      }
+
+      return _extends({
+        sameWidth: true
+      }, props.tooltip);
+    });
+
+    var handleClick = () => {
+      if (!props.expandTrigger) {
+        return;
+      }
+
+      expanding.value = !expanding.value;
+    };
+
+    return {
+      n,
+      classes,
+      tooltip,
+      expanding,
+      rootStyles,
+      handleClick
+    };
+  }
+
+});
+
+__sfc__.render = __render__;
+export default __sfc__;

package/es/ellipsis/ellipsis.css

@@ -0,0 +1 @@
+.var-ellipsis { width: 100%; overflow: hidden; vertical-align: bottom;}.var-ellipsis--clamp { display: -webkit-inline-box; -webkit-box-orient: vertical;}.var-ellipsis--line { display: inline-block; white-space: nowrap; text-overflow: ellipsis;}.var-ellipsis--cursor { cursor: pointer;}.var-ellipsis--expand { display: inline-block; white-space: wrap; overflow: visible;}

package/es/ellipsis/index.mjs

@@ -0,0 +1,8 @@
+import Ellipsis from './Ellipsis.mjs';
+
+Ellipsis.install = function (app) {
+  app.component(Ellipsis.name, Ellipsis);
+};
+
+export var _EllipsisComponent = Ellipsis;
+export default Ellipsis;

package/es/ellipsis/props.mjs

@@ -0,0 +1,16 @@
+export function expandTriggerValidator(expandTrigger) {
+  return ['click'].includes(expandTrigger);
+}
+export var props = {
+  expandTrigger: {
+    type: String,
+    validator: expandTriggerValidator
+  },
+  lineClamp: {
+    type: [Number, String]
+  },
+  tooltip: {
+    type: [Object, Boolean],
+    default: true
+  }
+};

package/es/ellipsis/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../tooltip/tooltip.css'
+import '../ellipsis.css'
+import '../EllipsisSfc.css'

package/es/image/Image.mjs

@@ -44,7 +44,7 @@ function __render__(_ctx, _cache) {
       return _ctx.handleError && _ctx.handleError(...arguments);
     }),
     onClick: _cache[2] || (_cache[2] = function () {
-      return _ctx.onClick && _ctx.onClick(...arguments);
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, null, 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
@@ -64,7 +64,7 @@ function __render__(_ctx, _cache) {
       return _ctx.handleError && _ctx.handleError(...arguments);
     }),
     onClick: _cache[5] || (_cache[5] = function () {
-      return _ctx.onClick && _ctx.onClick(...arguments);
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, null, 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
@@ -108,12 +108,17 @@ var __sfc__ = defineComponent({
       !lazy && call(onError, e);
     };
 
+    var handleClick = e => {
+      call(props.onClick, e);
+    };
+
     return {
       n,
       classes,
       toSizeUnit,
       handleLoad,
-      handleError
+      handleError,
+      handleClick
     };
   }