@varlet/ui 3.2.2 → 3.2.4

package/lib/varlet.cjs.js

@@ -602,15 +602,23 @@ function useVModel(props2, key, options = {}) {
     });
   }
   const proxy = vue.ref(getValue());
+  let shouldEmit = true;
   vue.watch(
     () => props2[key],
     () => {
+      shouldEmit = false;
       proxy.value = getValue();
+      vue.nextTick(() => {
+        shouldEmit = true;
+      });
     }
   );
   vue.watch(
     () => proxy.value,
     (newValue) => {
+      if (!shouldEmit) {
+        return;
+      }
       emit ? emit(event, newValue) : call(props2[event], newValue);
     }
   );
@@ -3123,8 +3131,7 @@ const __sfc__$1i = vue.defineComponent({
     return {
       rootStyles,
       n: n$1h,
-      classes: classes$13,
-      toSizeUnit
+      classes: classes$13
     };
   }
 });
@@ -10224,16 +10231,11 @@ const __sfc__$V = vue.defineComponent({
       right: false
     });
     const yearList = vue.computed(() => {
-      const list = [];
-      if (!props2.preview)
-        return list;
-      let startYear = Math.floor(toNumber(props2.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 (!props2.preview) {
+        return [];
       }
-      return list;
+      const startYear = Math.floor(toNumber(props2.preview) / 100 + page.value) * 100;
+      return Array.from(Array(100), (_v, k) => Math.max(0, startYear) + k);
     });
     const shouldChoose = (val) => {
       const {
@@ -10257,12 +10259,8 @@ const __sfc__$V = vue.defineComponent({
       const {
         componentProps: { min: min2, max: max2 }
       } = props2;
-      let isBeforeMax = true;
-      let isAfterMin = true;
-      if (max2)
-        isBeforeMax = dayjs(year).isSameOrBefore(dayjs(max2), "year");
-      if (min2)
-        isAfterMin = dayjs(year).isSameOrAfter(dayjs(min2), "year");
+      const isBeforeMax = max2 ? dayjs(year).isSameOrBefore(dayjs(max2), "year") : true;
+      const isAfterMin = min2 ? dayjs(year).isSameOrAfter(dayjs(min2), "year") : true;
       return isBeforeMax && isAfterMin;
     };
     const buttonProps = (year) => {
@@ -10333,9 +10331,10 @@ const __sfc__$V = vue.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);
@@ -11809,7 +11808,8 @@ function __render__$Q(_ctx, _cache) {
           [_ctx.hairline, _ctx.n("--hairline")]
         )
       ),
-      style: vue.normalizeStyle(_ctx.style)
+      style: vue.normalizeStyle(_ctx.style),
+      role: "separator"
     },
     [
       !_ctx.vertical ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }, () => [
@@ -13465,9 +13465,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);
@@ -13712,8 +13711,7 @@ function usePopover(options) {
     popoverInstance.setOptions(getPopperOptions());
   };
   const open = () => {
-    const { disabled } = options;
-    if (disabled) {
+    if (options.disabled) {
       return;
     }
     show.value = true;
@@ -13728,6 +13726,14 @@ function usePopover(options) {
   onWindowResize(resize);
   vue.watch(() => [options.offsetX, options.offsetY, options.placement, options.strategy], resize);
   vue.watch(() => options.disabled, close);
+  vue.watch(
+    () => show.value,
+    (newValue) => {
+      if (newValue) {
+        resize();
+      }
+    }
+  );
   vue.onMounted(() => {
     var _a;
     popoverInstance = createPopper((_a = getReference()) != null ? _a : host.value, popover.value, getPopperOptions());
@@ -14880,6 +14886,10 @@ const props$F = {
     type: String,
     default: "fill"
   },
+  position: {
+    type: String,
+    default: "50% 50%"
+  },
   alt: String,
   title: String,
   referrerpolicy: String,
@@ -14928,7 +14938,7 @@ function __render__$J(_ctx, _cache) {
         referrerpolicy: _ctx.referrerpolicy,
         "lazy-loading": _ctx.loading,
         "lazy-error": _ctx.error,
-        style: vue.normalizeStyle({ objectFit: _ctx.fit }),
+        style: vue.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$m)), [
@@ -14941,7 +14951,7 @@ function __render__$J(_ctx, _cache) {
         alt: _ctx.alt,
         title: _ctx.title,
         referrerpolicy: _ctx.referrerpolicy,
-        style: vue.normalizeStyle({ objectFit: _ctx.fit }),
+        style: vue.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)),
@@ -20516,7 +20526,7 @@ function __render__$l(_ctx, _cache) {
         {
           class: vue.normalizeClass(_ctx.classes(_ctx.n("success-line"), _ctx.n("success-line-tip"))),
           style: vue.normalizeStyle({
-            animationDuration: _ctx.animation ? `760ms` : "0ms",
+            animationDuration: _ctx.animation ? "760ms" : "0ms",
             borderRadius: `calc(${_ctx.borderSize} * 0.625)`
           })
         },
@@ -20529,7 +20539,7 @@ function __render__$l(_ctx, _cache) {
         {
           class: vue.normalizeClass(_ctx.classes(_ctx.n("success-line"), _ctx.n("success-line-long"))),
           style: vue.normalizeStyle({
-            animationDuration: _ctx.animation ? `770ms` : "0ms",
+            animationDuration: _ctx.animation ? "770ms" : "0ms",
             borderRadius: `calc(${_ctx.borderSize} * 0.625)`
           })
         },
@@ -20562,7 +20572,7 @@ function __render__$l(_ctx, _cache) {
         {
           class: vue.normalizeClass(_ctx.n("success-cover-right")),
           style: vue.normalizeStyle({
-            animationDuration: _ctx.animation ? `4250ms` : "0ms"
+            animationDuration: _ctx.animation ? "4250ms" : "0ms"
           })
         },
         null,
@@ -20586,8 +20596,7 @@ const __sfc__$m = vue.defineComponent({
   setup() {
     return {
       n: n$l,
-      classes: classes$h,
-      toNumber
+      classes: classes$h
     };
   }
 });
@@ -20741,22 +20750,17 @@ const __sfc__$j = vue.defineComponent({
   },
   props: props$i,
   setup(props2) {
-    const circleSize = vue.computed(() => {
-      const { imageSize } = props2;
-      return `calc(${imageSize ? toSizeUnit(imageSize) : "var(--result-image-size)"} * 0.9)`;
-    });
-    const borderSize = vue.computed(() => {
-      const { imageSize } = props2;
-      return `calc(${imageSize ? toSizeUnit(props2.imageSize) : "var(--result-image-size)"} * 0.05)`;
-    });
+    const circleSize = vue.computed(
+      () => `calc(${props2.imageSize ? toSizeUnit(props2.imageSize) : "var(--result-image-size)"} * 0.9)`
+    );
+    const borderSize = vue.computed(
+      () => `calc(${props2.imageSize ? toSizeUnit(props2.imageSize) : "var(--result-image-size)"} * 0.05)`
+    );
     return {
       circleSize,
       borderSize,
-      toSizeUnit,
       n: n$k,
-      classes: classes$g,
-      toNumber,
-      toPxNum
+      classes: classes$g
     };
   }
 });
@@ -23042,6 +23046,7 @@ const props$8 = {
   loadingColor: String,
   closeColor: String,
   size: [String, Number],
+  variant: Boolean,
   rules: Array,
   ripple: {
     type: Boolean,
@@ -23084,14 +23089,14 @@ function __render__$9(_ctx, _cache) {
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
     "div",
     {
-      class: vue.normalizeClass(_ctx.n())
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), [_ctx.variant, _ctx.n("--variant")]))
     },
     [
       vue.createElementVNode(
         "div",
         {
           ref: "switchRef",
-          class: vue.normalizeClass(_ctx.classes(_ctx.n("block"), [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")])),
+          class: vue.normalizeClass(_ctx.classes(_ctx.n("block"), [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")], [_ctx.isActive, _ctx.n("block--active")])),
           style: vue.normalizeStyle(_ctx.styleComputed.switch),
           onClick: _cache[2] || (_cache[2] = (...args) => _ctx.switchActive && _ctx.switchActive(...args))
         },
@@ -23100,16 +23105,14 @@ function __render__$9(_ctx, _cache) {
             "div",
             {
               style: vue.normalizeStyle(_ctx.styleComputed.track),
-              class: vue.normalizeClass(
-                _ctx.classes(_ctx.n("track"), [_ctx.modelValue === _ctx.activeValue, _ctx.n("track--active")], [_ctx.errorMessage, _ctx.n("track--error")])
-              )
+              class: vue.normalizeClass(_ctx.classes(_ctx.n("track"), [_ctx.isActive, _ctx.n("track--active")], [_ctx.errorMessage && !_ctx.variant, _ctx.n("track--error")]))
             },
             null,
             6
             /* CLASS, STYLE */
           ),
           vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-            class: vue.normalizeClass(_ctx.classes(_ctx.n("ripple"), [_ctx.modelValue === _ctx.activeValue, _ctx.n("ripple--active")])),
+            class: vue.normalizeClass(_ctx.classes(_ctx.n("ripple"), [_ctx.isActive, _ctx.n("ripple--active")])),
             style: vue.normalizeStyle(_ctx.styleComputed.ripple),
             tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
             onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
@@ -23123,8 +23126,9 @@ function __render__$9(_ctx, _cache) {
                   _ctx.classes(
                     _ctx.n("handle"),
                     _ctx.n("$-elevation--2"),
-                    [_ctx.modelValue === _ctx.activeValue, _ctx.n("handle--active")],
-                    [_ctx.errorMessage, _ctx.n("handle--error")]
+                    [_ctx.isActive, _ctx.n("handle--active")],
+                    [_ctx.errorMessage && !_ctx.variant, _ctx.n("handle--error")],
+                    [_ctx.hovering, _ctx.n("handle--hover")]
                   )
                 )
               },
@@ -23182,31 +23186,33 @@ const __sfc__$9 = vue.defineComponent({
     const { bindForm, form } = useForm();
     const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation();
     const { hovering, handleHovering } = useHoverOverlay();
+    const isActive = vue.computed(() => props2.modelValue === props2.activeValue);
     const styleComputed = vue.computed(() => {
-      const { size, modelValue, color, closeColor, loadingColor, activeValue } = props2;
+      const { size, color, closeColor, loadingColor, variant } = props2;
       return {
         handle: {
           width: multiplySizeUnit(size),
           height: multiplySizeUnit(size),
-          backgroundColor: modelValue === activeValue ? color : closeColor,
+          backgroundColor: isActive.value ? color : closeColor,
           color: loadingColor
         },
         ripple: {
-          left: modelValue === activeValue ? multiplySizeUnit(size, 0.5) : `-${multiplySizeUnit(size, 0.5)}`,
-          color: modelValue === activeValue ? color : closeColor || "currentColor",
+          left: isActive.value ? multiplySizeUnit(size, 0.5) : `-${multiplySizeUnit(size, variant ? 1 / 3 : 0.5)}`,
+          color: isActive.value ? color : closeColor || "currentColor",
           width: multiplySizeUnit(size, 2),
           height: multiplySizeUnit(size, 2)
         },
         track: {
-          height: multiplySizeUnit(size, 0.72),
-          width: multiplySizeUnit(size, 1.9),
+          width: multiplySizeUnit(size, variant ? 13 / 6 : 1.9),
+          height: multiplySizeUnit(size, variant ? 4 / 3 : 0.72),
           borderRadius: multiplySizeUnit(size, 2 / 3),
-          filter: modelValue === activeValue || (errorMessage == null ? void 0 : errorMessage.value) ? void 0 : "brightness(.6)",
-          backgroundColor: modelValue === activeValue ? color : closeColor
+          filter: isActive.value || (errorMessage == null ? void 0 : errorMessage.value) ? void 0 : `brightness(${variant ? 1 : 0.6})`,
+          backgroundColor: isActive.value ? color : closeColor,
+          borderWidth: variant && !isActive.value ? multiplySizeUnit(size, 1 / 12) : void 0
         },
         switch: {
-          height: multiplySizeUnit(size, 1.2),
-          width: multiplySizeUnit(size, 2)
+          width: multiplySizeUnit(size, variant ? 13 / 6 : 2),
+          height: multiplySizeUnit(size, variant ? 4 / 3 : 1.2)
         }
       };
     });
@@ -23253,7 +23259,6 @@ const __sfc__$9 = vue.defineComponent({
         disabled,
         loading,
         readonly,
-        modelValue,
         activeValue,
         inactiveValue,
         lazyChange,
@@ -23267,7 +23272,7 @@ const __sfc__$9 = vue.defineComponent({
       if (loading || readonly || (form == null ? void 0 : form.readonly.value)) {
         return;
       }
-      const newValue = modelValue === activeValue ? inactiveValue : activeValue;
+      const newValue = isActive.value ? inactiveValue : activeValue;
       if (lazyChange) {
         call(onBeforeChange, newValue, (value) => {
           call(updateModelValue, value);
@@ -23290,6 +23295,7 @@ const __sfc__$9 = vue.defineComponent({
       resetValidation();
     }
     return {
+      isActive,
       switchRef,
       hovering,
       isFocusing,
@@ -24346,10 +24352,21 @@ var stdin_default$2P = {
   "--switch-track-active-background": "var(--color-primary)",
   "--switch-track-error-background": "var(--color-danger)",
   "--switch-ripple-color": "var(--color-primary)",
-  "--switch-handle-color": "#fff",
+  "--switch-handle-color": "var(--color-on-primary)",
+  "--switch-handle-active-color": "var(--color-on-primary)",
   "--switch-handle-active-background": "var(--color-primary)",
   "--switch-handle-error-background": "var(--color-danger)",
-  "--switch-disabled-opacity": "var(--opacity-disabled)"
+  "--switch-disabled-opacity": "var(--opacity-disabled)",
+  "--switch-variant-width": "52px",
+  "--switch-variant-height": "32px",
+  "--switch-variant-track-background": "var(--color-surface-container-highest)",
+  "--switch-variant-handle-width": "24px",
+  "--switch-variant-handle-height": "24px",
+  "--switch-variant-track-border-color": "rgb(255, 255, 255, .7)",
+  "--switch-variant-handle-background": "rgb(255, 255, 255, .7)",
+  "--switch-variant-handle-color": "var(--color-primary)",
+  "--switch-variant-handle-active-color": "var(--color-primary)",
+  "--switch-variant-handle-active-background": "var(--color-on-primary)"
 };
 var stdin_default$2O = {
   "--tab-inactive-color": "rgba(255, 255, 255, .65)",
@@ -25495,10 +25512,21 @@ var stdin_default$1x = {
   "--switch-track-active-background": "var(--color-primary)",
   "--switch-track-error-background": "var(--color-danger)",
   "--switch-ripple-color": "var(--color-primary)",
-  "--switch-handle-color": "#fff",
+  "--switch-handle-color": "var(--color-primary)",
+  "--switch-handle-active-color": "var(--color-on-primary)",
   "--switch-handle-active-background": "var(--color-primary)",
   "--switch-handle-error-background": "var(--color-danger)",
-  "--switch-disabled-opacity": "var(--opacity-disabled)"
+  "--switch-disabled-opacity": "var(--opacity-disabled)",
+  "--switch-variant-width": "52px",
+  "--switch-variant-height": "32px",
+  "--switch-variant-track-background": "var(--color-surface-container-highest)",
+  "--switch-variant-handle-width": "24px",
+  "--switch-variant-handle-height": "24px",
+  "--switch-variant-track-border-color": "#79747E",
+  "--switch-variant-handle-color": "var(--color-on-primary)",
+  "--switch-variant-handle-active-color": "var(--color-primary)",
+  "--switch-variant-handle-background": "#79747E",
+  "--switch-variant-handle-active-background": "var(--color-on-primary)"
 };
 var stdin_default$1w = {
   "--rate-color": "var(--color-on-surface-variant)",
@@ -26389,10 +26417,21 @@ var stdin_default$t = {
   "--switch-track-active-background": "var(--color-primary)",
   "--switch-track-error-background": "var(--color-danger)",
   "--switch-ripple-color": "var(--color-primary)",
-  "--switch-handle-color": "var(--color-on-primary)",
+  "--switch-handle-color": "var(--color-primary)",
+  "--switch-handle-active-color": "var(--color-on-primary)",
   "--switch-handle-active-background": "var(--color-primary)",
   "--switch-handle-error-background": "var(--color-danger)",
-  "--switch-disabled-opacity": "var(--opacity-disabled)"
+  "--switch-disabled-opacity": "var(--opacity-disabled)",
+  "--switch-variant-width": "52px",
+  "--switch-variant-height": "32px",
+  "--switch-variant-track-background": "var(--color-surface-container-highest)",
+  "--switch-variant-handle-width": "24px",
+  "--switch-variant-handle-height": "24px",
+  "--switch-variant-track-border-color": "#938F99",
+  "--switch-variant-handle-color": "var(--color-on-primary)",
+  "--switch-variant-handle-active-color": "var(--color-primary)",
+  "--switch-variant-handle-background": "#938F99",
+  "--switch-variant-handle-active-background": "var(--color-on-primary)"
 };
 var stdin_default$s = {
   "--slider-thumb-size": "16px",
@@ -26941,12 +26980,10 @@ const __sfc__$3 = vue.defineComponent({
       required: true
     },
     useSeconds: {
-      type: Boolean,
-      default: false
+      type: Boolean
     },
     preventNextUpdate: {
-      type: Boolean,
-      default: false
+      type: Boolean
     },
     type: {
       type: String,
@@ -27138,7 +27175,7 @@ const __sfc__$3 = vue.defineComponent({
         }
         disable24HourIndex.value = disableHour.value.map((hour) => hours24.findIndex((hour24) => hour === hour24)).filter((hour) => hour >= 0);
       },
-      { immediate: true }
+      { immediate: true, deep: true }
     );
     return {
       n: n$3,
@@ -28451,7 +28488,7 @@ withInstall(stdin_default$1);
 withPropsDefaultsSetter(stdin_default$1, props);
 const _WatermarkComponent = stdin_default$1;
 var stdin_default = stdin_default$1;
-const version = "3.2.2";
+const version = "3.2.4";
 function install(app) {
   stdin_default$5E.install && app.use(stdin_default$5E);
   stdin_default$5C.install && app.use(stdin_default$5C);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.2.2",
+  "version": "3.2.4",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -48,9 +48,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "3.2.2",
-    "@varlet/shared": "3.2.2",
-    "@varlet/use": "3.2.2"
+    "@varlet/icons": "3.2.4",
+    "@varlet/shared": "3.2.4",
+    "@varlet/use": "3.2.4"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.4.21",
@@ -66,9 +66,9 @@
     "typescript": "^5.1.5",
     "vue": "3.4.21",
     "vue-router": "4.2.0",
-    "@varlet/cli": "3.2.2",
-    "@varlet/touch-emulator": "3.2.2",
-    "@varlet/ui": "3.2.2"
+    "@varlet/cli": "3.2.4",
+    "@varlet/ui": "3.2.4",
+    "@varlet/touch-emulator": "3.2.4"
   },
   "scripts": {
     "dev": "varlet-cli dev",

package/types/image.d.ts

@@ -8,6 +8,7 @@ export type ImageFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
 export interface ImageProps extends BasicAttributes {
   src?: string
   fit?: ImageFit
+  position?: string
   title?: string
   alt?: string
   referrerpolicy?: ImgHTMLAttributes['referrerpolicy']

package/types/styleVars.d.ts

@@ -1205,12 +1205,34 @@ export interface StyleVars {
   switchHandleBackground?: string
   '--switch-handle-color'?: string
   switchHandleColor?: string
+  '--switch-handle-active-color'?: string
+  switchHandleActiveColor?: string
   '--switch-handle-active-background'?: string
   switchHandleActiveBackground?: string
   '--switch-handle-error-background'?: string
   switchHandleErrorBackground?: string
   '--switch-disabled-opacity'?: string
   switchDisabledOpacity?: string
+  '--switch-variant-width'?: string
+  switchVariantWidth?: string
+  '--switch-variant-height'?: string
+  switchVariantHeight?: string
+  '--switch-variant-track-border-color'?: string
+  switchVariantTrackBorderColor?: string
+  '--switch-variant-track-background'?: string
+  switchVariantTrackBackground?: string
+  '--switch-variant-handle-width'?: string
+  switchVariantHandleWidth?: string
+  '--switch-variant-handle-height'?: string
+  switchVariantHandleHeight?: string
+  '--switch-variant-handle-color'?: string
+  switchVariantHandleColor?: string
+  '--switch-variant-handle-active-color'?: string
+  switchVariantHandleActiveColor?: string
+  '--switch-variant-handle-background'?: string
+  switchVariantHandleBackground?: string
+  '--switch-variant-handle-active-background'?: string
+  switchVariantHandleActiveBackground?: string
   '--table-background'?: string
   tableBackground?: string
   '--table-border-radius'?: string

package/types/switch.d.ts

@@ -18,6 +18,7 @@ export interface SwitchProps extends BasicAttributes {
   size?: string | number
   lazyChange?: boolean
   validateTrigger?: Array<SwitchValidateTrigger>
+  variant?: boolean
   rules?: Array<(value: any) => any>
   onClick?: ListenerProp<(event: Event) => void>
   onChange?: ListenerProp<(value: any) => void>