@varlet/ui 2.19.2 → 2.19.3

package/es/badge/Badge.mjs

@@ -1,8 +1,25 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 import VarIcon from "../icon/index.mjs";
 import { toNumber } from "@varlet/shared";
 import { computed, defineComponent } from "vue";
 import { props } from "./props.mjs";
 import { createNamespace } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
 const { name, n, classes } = createNamespace("badge");
 import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, vShow as _vShow, mergeProps as _mergeProps, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
@@ -27,11 +44,11 @@ function __render__(_ctx, _cache) {
               class: _ctx.classes(
                 _ctx.n("content"),
                 _ctx.n(`--${_ctx.type}`),
-                [_ctx.$slots.default, _ctx.n(`--${_ctx.position}`)],
+                [_ctx.$slots.default, _ctx.n(`--${_ctx.position}`), _ctx.n("--offset")],
                 [_ctx.dot, _ctx.n("--dot")],
                 [_ctx.icon, _ctx.n("--icon")]
               ),
-              style: { background: _ctx.color }
+              style: __spreadValues({ background: _ctx.color }, _ctx.offsetStyle)
             }, _ctx.$attrs),
             [
               _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
@@ -75,8 +92,13 @@ const __sfc__ = defineComponent({
       const { value: value2, maxValue } = props2;
       return value2 != null && maxValue != null && toNumber(value2) > toNumber(maxValue) ? `${maxValue}+` : value2;
     });
+    const offsetStyle = computed(() => ({
+      [`--badge-offset-y`]: toSizeUnit(props2.offsetY),
+      [`--badge-offset-x`]: toSizeUnit(props2.offsetX)
+    }));
     return {
       value,
+      offsetStyle,
       n,
       classes
     };

package/es/badge/badge.css

@@ -1 +1 @@
-:root { --badge-content-padding: 2px 6px; --badge-content-border: none; --badge-content-border-radius: 100px; --badge-content-font-size: 12px; --badge-icon-size: 12px; --badge-default-color: #e0e0e0; --badge-primary-color: var(--color-primary); --badge-danger-color: var(--color-danger); --badge-success-color: var(--color-success); --badge-warning-color: var(--color-warning); --badge-info-color: var(--color-info); --badge-dot-width: 8px; --badge-dot-height: 8px;}.var-badge { display: inline-block; position: relative; transition: background-color 0.25s;}.var-badge__content { display: inline-block; vertical-align: middle; text-align: center; padding: var(--badge-content-padding); border: var(--badge-content-border); border-radius: var(--badge-content-border-radius); color: #fff; font-size: var(--badge-content-font-size);}.var-badge__icon[var-badge-cover] { font-size: var(--badge-icon-size);}.var-badge--icon { padding: 2px 4px;}.var-badge--dot { box-sizing: content-box; width: var(--badge-dot-width); height: var(--badge-dot-height); padding: 0;}.var-badge--default { background: var(--badge-default-color);}.var-badge--primary { background: var(--badge-primary-color);}.var-badge--info { background: var(--badge-info-color);}.var-badge--warning { background: var(--badge-warning-color);}.var-badge--success { background: var(--badge-success-color);}.var-badge--danger { background: var(--badge-danger-color);}.var-badge--right-top { position: absolute; top: 0; right: 0; transform: translateY(-50%) translateX(50%);}.var-badge--left-top { position: absolute; top: 0; left: 0; transform: translateY(-50%) translateX(-50%);}.var-badge--right-bottom { position: absolute; bottom: 0; right: 0; transform: translateY(50%) translateX(50%);}.var-badge--left-bottom { position: absolute; bottom: 0; left: 0; transform: translateY(50%) translateX(-50%);}.var-badge-fade-enter-active,.var-badge-fade-leave-active { transition: opacity 0.15s var(--cubic-bezier);}.var-badge-fade-enter-from,.var-badge-fade-leave-to { opacity: 0;}
+:root { --badge-content-padding: 2px 6px; --badge-content-border: none; --badge-content-border-radius: 100px; --badge-content-font-size: 12px; --badge-icon-size: 12px; --badge-default-color: #e0e0e0; --badge-primary-color: var(--color-primary); --badge-danger-color: var(--color-danger); --badge-success-color: var(--color-success); --badge-warning-color: var(--color-warning); --badge-info-color: var(--color-info); --badge-dot-width: 8px; --badge-dot-height: 8px;}.var-badge { display: inline-block; position: relative; transition: background-color 0.25s;}.var-badge__content { display: inline-block; vertical-align: middle; text-align: center; padding: var(--badge-content-padding); border: var(--badge-content-border); border-radius: var(--badge-content-border-radius); color: #fff; font-size: var(--badge-content-font-size);}.var-badge--offset { transform: translateX(var(--badge-offset-x)) translateY(var(--badge-offset-y));}.var-badge__icon[var-badge-cover] { font-size: var(--badge-icon-size);}.var-badge--icon { padding: 2px 4px;}.var-badge--dot { box-sizing: content-box; width: var(--badge-dot-width); height: var(--badge-dot-height); padding: 0;}.var-badge--default { background: var(--badge-default-color);}.var-badge--primary { background: var(--badge-primary-color);}.var-badge--info { background: var(--badge-info-color);}.var-badge--warning { background: var(--badge-warning-color);}.var-badge--success { background: var(--badge-success-color);}.var-badge--danger { background: var(--badge-danger-color);}.var-badge--right-top { position: absolute; top: 0; right: 0; transform: translateY(calc(-50% + var(--badge-offset-y))) translateX(calc(50% + var(--badge-offset-x)));}.var-badge--left-top { position: absolute; top: 0; left: 0; transform: translateY(calc(-50% + var(--badge-offset-y))) translateX(calc(-50% + var(--badge-offset-x)));}.var-badge--right-bottom { position: absolute; bottom: 0; right: 0; transform: translateY(calc(50% + var(--badge-offset-y))) translateX(calc(50% + var(--badge-offset-x)));}.var-badge--left-bottom { position: absolute; bottom: 0; left: 0; transform: translateY(calc(50% + var(--badge-offset-y))) translateX(calc(-50% + var(--badge-offset-x)));}.var-badge-fade-enter-active,.var-badge-fade-leave-active { transition: opacity 0.15s var(--cubic-bezier);}.var-badge-fade-enter-from,.var-badge-fade-leave-to { opacity: 0;}

package/es/badge/props.mjs

@@ -18,7 +18,15 @@ const props = {
   dot: Boolean,
   icon: pickProps(iconProps, "name"),
   namespace: pickProps(iconProps, "namespace"),
-  color: String
+  color: String,
+  offsetX: {
+    type: [String, Number],
+    default: 0
+  },
+  offsetY: {
+    type: [String, Number],
+    default: 0
+  }
 };
 export {
   props

package/es/collapse/Collapse.mjs

@@ -2,7 +2,7 @@ import { computed, defineComponent, nextTick, watch } from "vue";
 import { useCollapseItem } from "./provide.mjs";
 import { props } from "./props.mjs";
 import { createNamespace } from "../utils/components.mjs";
-import { isArray, call } from "@varlet/shared";
+import { normalizeToArray, call, removeArrayBlank } from "@varlet/shared";
 const { name, n } = createNamespace("collapse");
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 function __render__(_ctx, _cache) {
@@ -22,13 +22,12 @@ const __sfc__ = defineComponent({
   name,
   props,
   setup(props2) {
-    const active = computed(() => props2.modelValue);
     const offset = computed(() => props2.offset);
     const divider = computed(() => props2.divider);
     const elevation = computed(() => props2.elevation);
-    const { length, collapseItem, bindCollapseItem } = useCollapseItem();
+    const normalizeValues = computed(() => normalizeToArray(props2.modelValue));
+    const { length, collapseItems, bindCollapseItems } = useCollapseItem();
     const collapseProvider = {
-      active,
       offset,
       divider,
       elevation,
@@ -42,64 +41,44 @@ const __sfc__ = defineComponent({
       () => props2.modelValue,
       () => nextTick().then(resize)
     );
-    bindCollapseItem(collapseProvider);
-    function checkValue() {
-      if (!props2.accordion && !isArray(props2.modelValue)) {
-        console.error('[Varlet] Collapse: type of prop "modelValue" should be an Array');
-        return false;
-      }
-      if (props2.accordion && isArray(props2.modelValue)) {
-        console.error('[Varlet] Collapse: type of prop "modelValue" should be a String or Number');
-        return false;
+    bindCollapseItems(collapseProvider);
+    function updateItem(itemValue, targetExpand) {
+      if (props2.accordion) {
+        const modelValue2 = targetExpand ? itemValue : void 0;
+        updateModelValue(modelValue2);
+        return;
       }
-      return true;
+      const modelValue = targetExpand ? [...normalizeValues.value, itemValue] : normalizeValues.value.filter((value) => value !== itemValue);
+      updateModelValue(modelValue);
     }
-    function getValue(value, isExpand) {
-      if (!checkValue())
-        return null;
-      if (isExpand)
-        return props2.accordion ? value : [...props2.modelValue, value];
-      return props2.accordion ? null : props2.modelValue.filter((name2) => name2 !== value);
-    }
-    function updateItem(value, isExpand) {
-      const modelValue = getValue(value, isExpand);
+    function updateModelValue(modelValue) {
       call(props2["onUpdate:modelValue"], modelValue);
       call(props2.onChange, modelValue);
     }
-    function matchName() {
-      if (props2.accordion) {
-        return collapseItem.find(({ name: name2 }) => props2.modelValue === name2.value);
-      }
-      const filterItem = collapseItem.filter(({ name: name2 }) => {
-        if (name2.value === void 0)
-          return false;
-        return props2.modelValue.includes(name2.value);
-      });
-      return filterItem.length ? filterItem : void 0;
-    }
-    function matchIndex() {
+    function matchItems() {
       if (props2.accordion) {
-        return collapseItem.find(
-          ({ index, name: name2 }) => name2.value === void 0 && props2.modelValue === index.value
-        );
+        const [value] = normalizeValues.value;
+        if (value == null) {
+          return;
+        }
+        const matchedNameItem = collapseItems.find(({ name: name2 }) => value === name2.value);
+        if (matchedNameItem == null) {
+          return collapseItems.find(({ index, name: name2 }) => name2.value == null && value === index.value);
+        }
+        return matchedNameItem;
       }
-      return collapseItem.filter(
-        ({ index, name: name2 }) => name2.value === void 0 && props2.modelValue.includes(index.value)
+      const matchedNameItems = collapseItems.filter(
+        ({ name: name2 }) => name2.value != null && normalizeValues.value.includes(name2.value)
+      );
+      const matchedIndexItems = collapseItems.filter(
+        ({ index, name: name2 }) => name2.value == null && normalizeValues.value.includes(index.value)
       );
+      return [...matchedNameItems, ...matchedIndexItems];
     }
     function resize() {
-      if (!checkValue())
-        return;
-      const matchProviders = matchName() || matchIndex();
-      if (props2.accordion && !matchProviders || !props2.accordion && !matchProviders.length) {
-        collapseItem.forEach((provider) => {
-          provider.init(props2.accordion, false);
-        });
-        return;
-      }
-      collapseItem.forEach((provider) => {
-        const isShow = props2.accordion ? matchProviders === provider : matchProviders.includes(provider);
-        provider.init(props2.accordion, isShow);
+      const matchedItems = removeArrayBlank(normalizeToArray(matchItems()));
+      collapseItems.forEach((collapseItem) => {
+        collapseItem.init(matchedItems.includes(collapseItem));
       });
     }
     return {

package/es/collapse/provide.mjs

@@ -6,8 +6,8 @@ function useCollapseItem() {
   );
   return {
     length,
-    collapseItem: childProviders,
-    bindCollapseItem: bindChildren
+    collapseItems: childProviders,
+    bindCollapseItems: bindChildren
   };
 }
 export {

package/es/collapse-item/CollapseItem.mjs

@@ -20,7 +20,7 @@ var __async = (__this, __arguments, generator) => {
 };
 import VarIcon from "../icon/index.mjs";
 import { defineComponent, ref, watch, computed } from "vue";
-import { isArray, doubleRaf, raf } from "@varlet/shared";
+import { doubleRaf, raf } from "@varlet/shared";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
 import { useCollapse } from "./provide.mjs";
 import { props } from "./props.mjs";
@@ -48,7 +48,7 @@ function __render__(_ctx, _cache) {
         "div",
         {
           class: _normalizeClass(_ctx.n("header")),
-          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggle())
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args))
         },
         [
           _createElementVNode(
@@ -138,7 +138,7 @@ const __sfc__ = defineComponent({
     const contentEl = ref(null);
     const name2 = computed(() => props2.name);
     const { index, collapse, bindCollapse } = useCollapse();
-    const { active, offset, divider, elevation, updateItem } = collapse;
+    const { offset, divider, elevation, updateItem } = collapse;
     const collapseItemProvider = {
       index,
       name: name2,
@@ -187,18 +187,15 @@ const __sfc__ = defineComponent({
         contentEl.value.style.height = "0px";
       });
     }
-    function init(accordion, show) {
-      if (active.value === void 0 || accordion && isArray(active.value) || show === isShow.value)
-        return;
+    function init(show) {
       isShow.value = show;
-      toggle(true);
     }
-    function toggle(initOrAccordion) {
-      if (props2.disabled)
+    function toggle() {
+      var _a;
+      if (props2.disabled) {
         return;
-      if (!initOrAccordion) {
-        updateItem(props2.name || index.value, !isShow.value);
       }
+      updateItem((_a = props2.name) != null ? _a : index.value, !isShow.value);
     }
     function start() {
       isInitToTrigger = false;

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

@@ -189,9 +189,10 @@ const __sfc__ = defineComponent({
     );
     const sortWeekList = computed(() => {
       const index = WEEK_HEADER.findIndex((week) => week === props.componentProps.firstDayOfWeek);
-      if (index === -1 || index === 0)
+      if (index === -1 || index === 0) {
         return WEEK_HEADER;
-      return WEEK_HEADER.slice(index).concat(WEEK_HEADER.slice(0, index));
+      }
+      return [...WEEK_HEADER.slice(index), ...WEEK_HEADER.slice(0, index)];
     });
     const getDayAbbr = (key) => {
       var _a, _b;

package/es/index.bundle.mjs

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

package/es/index.mjs

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

package/es/input/Input.mjs

@@ -248,7 +248,11 @@ const __sfc__ = defineComponent({
       if (props2.type === "number") {
         value = formatNumber(value);
       }
-      return withMaxlength(withTrim(value));
+      const targetValue = withMaxlength(withTrim(value));
+      if (targetValue === props2.modelValue) {
+        target.value = targetValue;
+      }
+      return targetValue;
     }
     function handleCompositionStart() {
       isComposing.value = true;

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'