@varlet/ui 3.2.2 → 3.2.4

package/README.md

@@ -3,7 +3,7 @@
     <img src="https://varlet.gitee.io/varlet-ui/logo.svg" width="150">
   </a>
   <h1>VARLET</h1>
-  <p>Material design mobile component library for Vue3</p>
+  <p>A mobile component library based on Vue3, Material Design 2, Material Design 3, and supports desktop development.</p>
   <p>
     <a href="https://varlet-varletjs.vercel.app/#/en-US/index">Documentation(Vercel)</a> |
     <a href="https://varlet.gitee.io/varlet-ui/#/en-US/index">Documentation(Gitee)</a> | 
@@ -15,7 +15,6 @@
     <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
     <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
     <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
-    <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
     <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
   </p>
 </div>

package/README.zh-CN.md

@@ -4,7 +4,7 @@
     <img src="https://varlet.gitee.io/varlet-ui/logo.svg" width="150">
   </a>
   <h1>VARLET</h1>
-  <p>基于 Vue3 的 Material design 风格移动端组件库</p>
+  <p>一个移动端组件库，基于 Vue3, Material Design 2, Material Design 3，并支持桌面端开发。</p>
   <p>
     <a href="https://varlet-varletjs.vercel.app">文档(Vercel)</a> | 
     <a href="https://varlet.gitee.io/varlet-ui">文档(Gitee)</a> |
@@ -16,7 +16,6 @@
     <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
     <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
     <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
-    <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
     <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
   </p>
 </div>

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

@@ -3,5 +3,5 @@ import '../../icon/icon.css'
 import '../../ripple/ripple.css'
 import '../../popup/popup.css'
 import '../actionSheet.css'
-import '../ActionSheetSfc.css'
 import '../ActionItemSfc.css'
+import '../ActionSheetSfc.css'

package/es/avatar-group/AvatarGroup.mjs

@@ -33,8 +33,7 @@ const __sfc__ = defineComponent({
     return {
       rootStyles,
       n,
-      classes,
-      toSizeUnit
+      classes
     };
   }
 });

package/es/date-picker/src/year-picker-panel.mjs

@@ -138,16 +138,11 @@ const __sfc__ = defineComponent({
       right: false
     });
     const yearList = computed(() => {
-      const list = [];
-      if (!props.preview)
-        return list;
-      let startYear = Math.floor(toNumber(props.preview) / 100 + page.value) * 100;
-      startYear = startYear < 0 ? 0 : startYear;
-      const yearRange = [startYear, startYear + 100];
-      for (let i = yearRange[0]; i < yearRange[1]; i++) {
-        list.push(i);
+      if (!props.preview) {
+        return [];
       }
-      return list;
+      const startYear = Math.floor(toNumber(props.preview) / 100 + page.value) * 100;
+      return Array.from(Array(100), (_v, k) => Math.max(0, startYear) + k);
     });
     const shouldChoose = (val) => {
       const {
@@ -171,12 +166,8 @@ const __sfc__ = defineComponent({
       const {
         componentProps: { min, max }
       } = props;
-      let isBeforeMax = true;
-      let isAfterMin = true;
-      if (max)
-        isBeforeMax = dayjs(year).isSameOrBefore(dayjs(max), "year");
-      if (min)
-        isAfterMin = dayjs(year).isSameOrAfter(dayjs(min), "year");
+      const isBeforeMax = max ? dayjs(year).isSameOrBefore(dayjs(max), "year") : true;
+      const isAfterMin = min ? dayjs(year).isSameOrAfter(dayjs(min), "year") : true;
       return isBeforeMax && isAfterMin;
     };
     const buttonProps = (year) => {
@@ -247,9 +238,10 @@ const __sfc__ = defineComponent({
       });
     };
     const checkDate = (checkType) => {
-      reverse.value = checkType === "prev";
-      panelKey.value += checkType === "prev" ? -1 : 1;
-      page.value += checkType === "prev" ? -1 : 1;
+      const isPrevType = checkType === "prev";
+      reverse.value = isPrevType;
+      panelKey.value += isPrevType ? -1 : 1;
+      page.value += isPrevType ? -1 : 1;
     };
     const forwardRef = (checkType) => {
       headerEl.value.checkDate(checkType);

package/es/divider/Divider.mjs

@@ -21,7 +21,8 @@ function __render__(_ctx, _cache) {
           [_ctx.hairline, _ctx.n("--hairline")]
         )
       ),
-      style: _normalizeStyle(_ctx.style)
+      style: _normalizeStyle(_ctx.style),
+      role: "separator"
     },
     [
       !_ctx.vertical ? _renderSlot(_ctx.$slots, "default", { key: 0 }, () => [

package/es/image/Image.mjs

@@ -34,7 +34,7 @@ function __render__(_ctx, _cache) {
         referrerpolicy: _ctx.referrerpolicy,
         "lazy-loading": _ctx.loading,
         "lazy-error": _ctx.error,
-        style: _normalizeStyle({ objectFit: _ctx.fit }),
+        style: _normalizeStyle({ objectFit: _ctx.fit, objectPosition: _ctx.position }),
         onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
         onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
       }, null, 46, _hoisted_1)), [
@@ -47,7 +47,7 @@ function __render__(_ctx, _cache) {
         alt: _ctx.alt,
         title: _ctx.title,
         referrerpolicy: _ctx.referrerpolicy,
-        style: _normalizeStyle({ objectFit: _ctx.fit }),
+        style: _normalizeStyle({ objectFit: _ctx.fit, objectPosition: _ctx.position }),
         src: _ctx.src,
         onLoad: _cache[2] || (_cache[2] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
         onError: _cache[3] || (_cache[3] = (...args) => _ctx.handleError && _ctx.handleError(...args)),

package/es/image/props.mjs

@@ -5,6 +5,10 @@ const props = {
     type: String,
     default: "fill"
   },
+  position: {
+    type: String,
+    default: "50% 50%"
+  },
   alt: String,
   title: String,
   referrerpolicy: String,

package/es/index.bundle.mjs

@@ -262,7 +262,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.2.2'
+const version = '3.2.4'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -174,7 +174,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.2.2'
+const version = '3.2.4'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/menu/usePopover.mjs

@@ -54,9 +54,8 @@ function usePopover(options) {
   const show = useVModel(options, "show", {
     passive: true,
     defaultValue: false,
-    emit(event, value) {
+    emit(_event, value) {
       if (value) {
-        resize();
         call(options.onOpen);
       } else {
         call(options.onClose);
@@ -301,8 +300,7 @@ function usePopover(options) {
     popoverInstance.setOptions(getPopperOptions());
   };
   const open = () => {
-    const { disabled } = options;
-    if (disabled) {
+    if (options.disabled) {
       return;
     }
     show.value = true;
@@ -317,6 +315,14 @@ function usePopover(options) {
   onWindowResize(resize);
   watch(() => [options.offsetX, options.offsetY, options.placement, options.strategy], resize);
   watch(() => options.disabled, close);
+  watch(
+    () => show.value,
+    (newValue) => {
+      if (newValue) {
+        resize();
+      }
+    }
+  );
   onMounted(() => {
     var _a;
     popoverInstance = createPopper((_a = getReference()) != null ? _a : host.value, popover.value, getPopperOptions());

package/es/result/Result.mjs

@@ -5,10 +5,9 @@ import Success from "./Success.mjs";
 import Question from "./Question.mjs";
 import Empty from "./Empty.mjs";
 import { computed, defineComponent } from "vue";
-import { toNumber } from "@varlet/shared";
 import { props } from "./props.mjs";
 import { createNamespace } from "../utils/components.mjs";
-import { toPxNum, toSizeUnit } from "../utils/elements.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
 const { name, n, classes } = createNamespace("result");
 import { renderSlot as _renderSlot, resolveDynamicComponent as _resolveDynamicComponent, openBlock as _openBlock, createBlock as _createBlock, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString } from "vue";
 function __render__(_ctx, _cache) {
@@ -103,22 +102,17 @@ const __sfc__ = defineComponent({
   },
   props,
   setup(props2) {
-    const circleSize = computed(() => {
-      const { imageSize } = props2;
-      return `calc(${imageSize ? toSizeUnit(imageSize) : "var(--result-image-size)"} * 0.9)`;
-    });
-    const borderSize = computed(() => {
-      const { imageSize } = props2;
-      return `calc(${imageSize ? toSizeUnit(props2.imageSize) : "var(--result-image-size)"} * 0.05)`;
-    });
+    const circleSize = computed(
+      () => `calc(${props2.imageSize ? toSizeUnit(props2.imageSize) : "var(--result-image-size)"} * 0.9)`
+    );
+    const borderSize = computed(
+      () => `calc(${props2.imageSize ? toSizeUnit(props2.imageSize) : "var(--result-image-size)"} * 0.05)`
+    );
     return {
       circleSize,
       borderSize,
-      toSizeUnit,
       n,
-      classes,
-      toNumber,
-      toPxNum
+      classes
     };
   }
 });

package/es/result/Success.mjs

@@ -1,6 +1,5 @@
 import { defineComponent } from "vue";
 import { createNamespace } from "../utils/components.mjs";
-import { toNumber } from "@varlet/shared";
 const { n, classes } = createNamespace("result");
 import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 function __render__(_ctx, _cache) {
@@ -22,7 +21,7 @@ function __render__(_ctx, _cache) {
         {
           class: _normalizeClass(_ctx.classes(_ctx.n("success-line"), _ctx.n("success-line-tip"))),
           style: _normalizeStyle({
-            animationDuration: _ctx.animation ? `760ms` : "0ms",
+            animationDuration: _ctx.animation ? "760ms" : "0ms",
             borderRadius: `calc(${_ctx.borderSize} * 0.625)`
           })
         },
@@ -35,7 +34,7 @@ function __render__(_ctx, _cache) {
         {
           class: _normalizeClass(_ctx.classes(_ctx.n("success-line"), _ctx.n("success-line-long"))),
           style: _normalizeStyle({
-            animationDuration: _ctx.animation ? `770ms` : "0ms",
+            animationDuration: _ctx.animation ? "770ms" : "0ms",
             borderRadius: `calc(${_ctx.borderSize} * 0.625)`
           })
         },
@@ -68,7 +67,7 @@ function __render__(_ctx, _cache) {
         {
           class: _normalizeClass(_ctx.n("success-cover-right")),
           style: _normalizeStyle({
-            animationDuration: _ctx.animation ? `4250ms` : "0ms"
+            animationDuration: _ctx.animation ? "4250ms" : "0ms"
           })
         },
         null,
@@ -92,8 +91,7 @@ const __sfc__ = defineComponent({
   setup() {
     return {
       n,
-      classes,
-      toNumber
+      classes
     };
   }
 });

package/es/snackbar/style/index.mjs

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