@varlet/ui 2.7.5 → 2.8.0-alpha.1676455225773

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/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/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/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,10 @@ export var props = {
   },
   extraClass: {
     type: String
-  }
+  },
+  ripple: {
+    type: Boolean,
+    default: false
+  },
+  onClick: defineListenerProp
 };

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