@varlet/ui 3.20.0 → 3.20.2

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/date-picker/DatePicker.mjs

@@ -359,9 +359,7 @@ const __sfc__ = defineComponent({
       var _a, _b, _c, _d;
       const { multiple, range } = props2;
       if (range) {
-        const formattedDays = selectionState.selectedRangeDays.map(
-          (date) => dayjs(date).format(DatePickerFormats.DayPadded)
-        );
+        const formattedDays = selectionState.selectedRangeDays.map((date) => dayjs(date).format(DatePickerFormats.Day));
         return formattedDays.length ? formattedDays.join(" ~ ") : "";
       }
       if (multiple) {
@@ -380,7 +378,7 @@ const __sfc__ = defineComponent({
       if ((pt || t)("lang") === "zh-CN") {
         return `${selectionState.selectedMonth}-${showDay} ${weekName.slice(0, 3)}`;
       }
-      return `${weekName.slice(0, 3)}, ${monthName.slice(0, 3)} ${selectionState.selectedDay}`;
+      return `${weekName.slice(0, 3)}, ${monthName.slice(0, 3)} ${toNumber(selectionState.selectedDay)}`;
     });
     const dateSlotProps = computed(() => {
       var _a, _b;
@@ -396,7 +394,7 @@ const __sfc__ = defineComponent({
       };
     });
     const formattedRangeDays = computed(
-      () => selectionState.selectedRangeDays.map((date) => dayjs(date).format(DatePickerFormats.DayPadded))
+      () => selectionState.selectedRangeDays.map((date) => dayjs(date).format(DatePickerFormats.Day))
     );
     const selectedYearInPreview = computed(() => selectionState.selectedYear === previewYear.value);
     const selectedMonthInPreview = computed(() => selectionState.selectedMonth === previewMonth.value);
@@ -526,7 +524,7 @@ const __sfc__ = defineComponent({
     }
     function updateMultiple(selectedValue, pickerType) {
       const selectedMultipleValues = getMultipleValuesByType(pickerType);
-      const valueFormat = pickerType === DatePickerTypes.Year ? DatePickerFormats.Year : pickerType === DatePickerTypes.Month ? DatePickerFormats.Month : DatePickerFormats.DayPadded;
+      const valueFormat = pickerType === DatePickerTypes.Year ? DatePickerFormats.Year : pickerType === DatePickerTypes.Month ? DatePickerFormats.Month : DatePickerFormats.Day;
       const nextMultipleValues = selectedMultipleValues.map((date) => dayjs(date).format(valueFormat));
       const index = nextMultipleValues.findIndex((multipleValue) => multipleValue === selectedValue);
       const alreadySelected = index !== -1;
@@ -582,7 +580,7 @@ const __sfc__ = defineComponent({
         monthOffset,
         DatePickerUnits.Month
       );
-      const dayValue = `${targetMonthDayjsObject.format(DatePickerFormats.Month)}-${day}`;
+      const dayValue = targetMonthDayjsObject.date(day).format(DatePickerFormats.Day);
       if (!isSelectableDate(dayValue, DatePickerUnits.Day)) {
         return;
       }
@@ -592,7 +590,7 @@ const __sfc__ = defineComponent({
         previewMonth.value = targetMonthDayjsObject.format(DatePickerFormats.Month).split("-")[1];
         emitPreview();
       }
-      selectValue(dayjs(dayValue).format(DatePickerFormats.DayPadded), DatePickerTypes.Date);
+      selectValue(dayValue, DatePickerTypes.Date);
     }
     function selectMonthFromPanel(month) {
       const { type: pickerType, readonly } = props2;

package/es/date-picker/constants.mjs

@@ -14,8 +14,7 @@ const WeekHeader = ["0", "1", "2", "3", "4", "5", "6"];
 const DatePickerFormats = {
   Year: "YYYY",
   Month: "YYYY-MM",
-  Day: "YYYY-MM-D",
-  DayPadded: "YYYY-MM-DD"
+  Day: "YYYY-MM-DD"
 };
 const ShiftDirections = enumOf({
   Prev: "prev",

package/es/index.bundle.mjs

@@ -310,7 +310,7 @@ import './tree-menu/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.20.0'
+const version = '3.20.2'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -206,7 +206,7 @@ export * from './tree-menu/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.20.0'
+const version = '3.20.2'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/menu/usePopover.mjs

@@ -68,6 +68,7 @@ function usePopover(options) {
   let reference = void 0;
   let enterPopover = false;
   let enterReference = false;
+  let hoverSequence = 0;
   let allowClose = true;
   useEventListener(() => window, "keydown", handleKeydown);
   watch(() => [options.offsetX, options.offsetY, options.placement, options.strategy], resize);
@@ -149,6 +150,7 @@ function usePopover(options) {
       return;
     }
     enterReference = true;
+    hoverSequence++;
     open();
   }
   function handleReferenceMouseleave() {
@@ -157,8 +159,9 @@ function usePopover(options) {
         return;
       }
       enterReference = false;
+      const currentHoverSequence = ++hoverSequence;
       yield doubleRaf();
-      if (enterPopover) {
+      if (currentHoverSequence !== hoverSequence || enterReference || enterPopover) {
         return;
       }
       close();
@@ -169,6 +172,7 @@ function usePopover(options) {
       return;
     }
     enterPopover = true;
+    hoverSequence++;
     if (options.cascadeOptimization) {
       allowClose = false;
     }
@@ -179,8 +183,9 @@ function usePopover(options) {
         return;
       }
       enterPopover = false;
+      const currentHoverSequence = ++hoverSequence;
       yield doubleRaf();
-      if (enterReference) {
+      if (currentHoverSequence !== hoverSequence || enterReference || enterPopover) {
         return;
       }
       close();

package/es/tooltip/tooltip.css

@@ -1 +1 @@
-:root { --tooltip-opacity: 0.9; --tooltip-border-radius: 4px; --tooltip-font-size: 14px; --tooltip-padding: 8px 16px; --tooltip-offset: 10px; --tooltip-default-color: #616161; --tooltip-primary-color: var(--color-primary); --tooltip-info-color: var(--color-info); --tooltip-success-color: var(--color-success); --tooltip-warning-color: var(--color-warning); --tooltip-danger-color: var(--color-danger); --tooltip-default-text-color: #fff; --tooltip-primary-text-color: var(--color-on-primary); --tooltip-info-text-color: var(--color-on-info); --tooltip-success-text-color: var(--color-on-success); --tooltip-warning-text-color: var(--color-on-warning); --tooltip-danger-text-color: var(--color-on-danger);}.var-tooltip { display: inline-block;}.var-tooltip-enter-from,.var-tooltip-leave-to { opacity: 0; transform: scale(0.8);}.var-tooltip-enter-active,.var-tooltip-leave-active { transition-property: opacity, transform; transition-duration: 0.2s;}.var-tooltip__content-container { display: inline-block; text-align: center; border-radius: var(--tooltip-border-radius); font-size: var(--tooltip-font-size); padding: var(--tooltip-padding); opacity: var(--tooltip-opacity); transition: opacity 0.25s, background-color 0.25s;}.var-tooltip--default { color: var(--tooltip-default-text-color); background: var(--tooltip-default-color);}.var-tooltip--primary { color: var(--tooltip-primary-text-color); background-color: var(--tooltip-primary-color);}.var-tooltip--info { color: var(--tooltip-info-text-color); background-color: var(--tooltip-info-color);}.var-tooltip--success { color: var(--tooltip-success-text-color); background-color: var(--tooltip-success-color);}.var-tooltip--warning { color: var(--tooltip-warning-text-color); background-color: var(--tooltip-warning-color);}.var-tooltip--danger { color: var(--tooltip-danger-text-color); background-color: var(--tooltip-danger-color);}.var-tooltip__tooltip[data-popper-placement='top'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='top-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='top-end'] .var-tooltip__content-container { transform: translateY(calc(-1 * var(--tooltip-offset)));}.var-tooltip__tooltip[data-popper-placement='bottom'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='bottom-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='bottom-end'] .var-tooltip__content-container { transform: translateY(var(--tooltip-offset));}.var-tooltip__tooltip[data-popper-placement='right'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='right-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='right-end'] .var-tooltip__content-container { transform: translateX(var(--tooltip-offset));}.var-tooltip__tooltip[data-popper-placement='left'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='left-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='left-end'] .var-tooltip__content-container { transform: translateX(calc(-1 * var(--tooltip-offset)));}
+:root { --tooltip-opacity: 0.9; --tooltip-border-radius: 4px; --tooltip-font-size: 14px; --tooltip-padding: 8px 16px; --tooltip-offset: 10px; --tooltip-default-color: #616161; --tooltip-primary-color: var(--color-primary); --tooltip-info-color: var(--color-info); --tooltip-success-color: var(--color-success); --tooltip-warning-color: var(--color-warning); --tooltip-danger-color: var(--color-danger); --tooltip-default-text-color: #fff; --tooltip-primary-text-color: var(--color-on-primary); --tooltip-info-text-color: var(--color-on-info); --tooltip-success-text-color: var(--color-on-success); --tooltip-warning-text-color: var(--color-on-warning); --tooltip-danger-text-color: var(--color-on-danger);}.var-tooltip { display: inline-block;}.var-tooltip-enter-from,.var-tooltip-leave-to { opacity: 0; transform: scale(0.8);}.var-tooltip-enter-active,.var-tooltip-leave-active { transition-property: opacity, transform; transition-duration: 0.2s;}.var-tooltip-leave-active { pointer-events: none;}.var-tooltip__content-container { display: inline-block; text-align: center; border-radius: var(--tooltip-border-radius); font-size: var(--tooltip-font-size); padding: var(--tooltip-padding); opacity: var(--tooltip-opacity); transition: opacity 0.25s, background-color 0.25s;}.var-tooltip--default { color: var(--tooltip-default-text-color); background: var(--tooltip-default-color);}.var-tooltip--primary { color: var(--tooltip-primary-text-color); background-color: var(--tooltip-primary-color);}.var-tooltip--info { color: var(--tooltip-info-text-color); background-color: var(--tooltip-info-color);}.var-tooltip--success { color: var(--tooltip-success-text-color); background-color: var(--tooltip-success-color);}.var-tooltip--warning { color: var(--tooltip-warning-text-color); background-color: var(--tooltip-warning-color);}.var-tooltip--danger { color: var(--tooltip-danger-text-color); background-color: var(--tooltip-danger-color);}.var-tooltip__tooltip[data-popper-placement='top'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='top-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='top-end'] .var-tooltip__content-container { transform: translateY(calc(-1 * var(--tooltip-offset)));}.var-tooltip__tooltip[data-popper-placement='bottom'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='bottom-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='bottom-end'] .var-tooltip__content-container { transform: translateY(var(--tooltip-offset));}.var-tooltip__tooltip[data-popper-placement='right'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='right-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='right-end'] .var-tooltip__content-container { transform: translateX(var(--tooltip-offset));}.var-tooltip__tooltip[data-popper-placement='left'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='left-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='left-end'] .var-tooltip__content-container { transform: translateX(calc(-1 * var(--tooltip-offset)));}