@varlet/ui 3.5.2 → 3.5.3

package/es/time-picker/TimePicker.mjs

@@ -250,24 +250,37 @@ const __sfc__ = defineComponent({
     watch(
       () => props2.modelValue,
       (value) => {
-        if (value) {
-          const { hour, minute, second } = getNumberTime(value);
-          const formatHour12 = dayjs().hour(hour).format("hh");
-          const formatHour24 = dayjs().hour(hour).format("HH");
-          const formatMinute = dayjs().minute(minute).format("mm");
-          const formatSecond = dayjs().second(second).format("ss");
-          hourRad.value = (formatHour12 === "12" ? 0 : toNumber(formatHour12)) * 30;
-          minuteRad.value = toNumber(formatMinute) * 6;
-          secondRad.value = toNumber(formatSecond) * 6;
-          time.value = getTime(value);
-          if (props2.format !== "24hr") {
-            ampm.value = padStart(`${hour}`, 2, "0") === formatHour24 && hours24.includes(formatHour24) ? "pm" : "am";
-          }
-          isInner.value = props2.format === "24hr" && hours24.includes(formatHour24);
+        if (value === void 0 || value === "") {
+          resetTime();
+          return;
         }
+        const { hour, minute, second } = getNumberTime(value);
+        const formatHour12 = dayjs().hour(hour).format("hh");
+        const formatHour24 = dayjs().hour(hour).format("HH");
+        const formatMinute = dayjs().minute(minute).format("mm");
+        const formatSecond = dayjs().second(second).format("ss");
+        hourRad.value = (formatHour12 === "12" ? 0 : toNumber(formatHour12)) * 30;
+        minuteRad.value = toNumber(formatMinute) * 6;
+        secondRad.value = toNumber(formatSecond) * 6;
+        time.value = getTime(value);
+        if (props2.format !== "24hr") {
+          ampm.value = padStart(`${hour}`, 2, "0") === formatHour24 && hours24.includes(formatHour24) ? "pm" : "am";
+        }
+        isInner.value = props2.format === "24hr" && hours24.includes(formatHour24);
       },
       { immediate: true }
     );
+    function resetTime() {
+      hourRad.value = void 0;
+      minuteRad.value = 0;
+      secondRad.value = 0;
+      time.value = {
+        hour: "00",
+        minute: "00",
+        second: "00"
+      };
+      ampm.value = "am";
+    }
     function update(newTime) {
       call(props2["onUpdate:modelValue"], newTime);
       call(props2.onChange, newTime);

package/es/time-picker/timePicker.css

@@ -1 +1 @@
-:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-title-height: 105px; --time-picker-title-padding: 16px; --time-picker-title-margin-bottom: 8px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-hint-color: '#fff'; --time-picker-title-hint-font-size: 14px; --time-picker-title-inactive-opacity: 0.6; --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-time-border-radius: 0; --time-picker-title-time-padding: 0; --time-picker-title-time-background: transparent; --time-picker-title-time-active-background: transparent; --time-picker-title-time-container-justify-content: flex-end; --time-picker-title-ampm-button-active-background: transparent; --time-picker-title-ampm-margin-left: 10px; --time-picker-title-ampm-border-radius: 0; --time-picker-title-ampm-border: none; --time-picker-title-ampm-button-padding: 2px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 256px; --time-picker-clock-container-height: 256px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: var(--color-on-primary); --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-clock-item-disable-background: #bdbdbd; --time-picker-clock-item-text-color: #555; --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: #fff; --time-picker-body-height: 288px; --time-picker-actions-padding: 0 8px 12px 8px;}.var-time-picker-after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); overflow: hidden; -webkit-tap-highlight-color: transparent;}.var-time-picker__title { min-height: var(--time-picker-title-height); padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); transition: 0.25s background-color; display: block;}.var-time-picker__title-splitter { display: flex; align-items: center;}.var-time-picker__title-hint { color: var(--time-picker-title-hint-color); font-size: var(--time-picker-title-hint-font-size); margin-bottom: var(--time-picker-title-margin-bottom);}.var-time-picker__title-time-container { display: flex; align-items: center; justify-content: var(--time-picker-title-time-container-justify-content);}.var-time-picker__title-btn { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: 0.3s var(--cubic-bezier); white-space: nowrap; background: var(--time-picker-title-time-background); padding: var(--time-picker-title-time-padding); border-radius: var(--time-picker-title-time-border-radius); opacity: var(--time-picker-title-inactive-opacity);}.var-time-picker__title-btn--active { background: var(--time-picker-title-time-active-background); opacity: 1;}.var-time-picker__title-time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker__title-time .var-time-picker__title-btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker__title-ampm { border: var(--time-picker-title-ampm-border); border-radius: var(--time-picker-title-ampm-border-radius); margin-left: var(--time-picker-title-ampm-margin-left); overflow: hidden;}.var-time-picker__title-ampm .var-time-picker__title-btn { padding: var(--time-picker-title-ampm-button-padding); border-radius: 0; opacity: var(--time-picker-title-inactive-opacity);}.var-time-picker__title-ampm .var-time-picker__title-btn--active { background: var(--time-picker-title-ampm-button-active-background); opacity: 1;}.var-time-picker__title-ampm .var-time-picker__title-btn:first-child { border-bottom: var(--time-picker-title-ampm-border);}.var-time-picker__body { display: flex; align-items: center; justify-content: center; height: var(--time-picker-body-height); background-color: var(--time-picker-body-background); transition: 0.25s background-color;}.var-time-picker__clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker__clock-container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker__clock-hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker__clock-hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker__clock-hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker__clock-item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%); color: var(--time-picker-clock-item-text-color);}.var-time-picker__clock-item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker__clock-item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker__clock-inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker__actions { display: flex; justify-content: flex-end; align-items: center; background-color: var(--time-picker-body-background); padding: var(--time-picker-actions-padding);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}
+:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-title-height: 105px; --time-picker-title-padding: 16px; --time-picker-title-margin-bottom: 8px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-hint-color: '#fff'; --time-picker-title-hint-font-size: 14px; --time-picker-title-hint-min-height: 21px; --time-picker-title-inactive-opacity: 0.6; --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-time-border-radius: 0; --time-picker-title-time-padding: 0; --time-picker-title-time-background: transparent; --time-picker-title-time-active-background: transparent; --time-picker-title-time-container-justify-content: flex-end; --time-picker-title-ampm-button-active-background: transparent; --time-picker-title-ampm-margin-left: 10px; --time-picker-title-ampm-border-radius: 0; --time-picker-title-ampm-border: none; --time-picker-title-ampm-button-padding: 2px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 256px; --time-picker-clock-container-height: 256px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: var(--color-on-primary); --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-clock-item-disable-background: #bdbdbd; --time-picker-clock-item-text-color: #555; --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: #fff; --time-picker-body-height: 288px; --time-picker-actions-padding: 0 8px 12px 8px;}.var-time-picker-after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); overflow: hidden; -webkit-tap-highlight-color: transparent;}.var-time-picker__title { min-height: var(--time-picker-title-height); padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); transition: 0.25s background-color; display: block;}.var-time-picker__title-splitter { display: flex; align-items: center;}.var-time-picker__title-hint { color: var(--time-picker-title-hint-color); font-size: var(--time-picker-title-hint-font-size); margin-bottom: var(--time-picker-title-margin-bottom); min-height: var(--time-picker-title-hint-min-height);}.var-time-picker__title-time-container { display: flex; align-items: center; justify-content: var(--time-picker-title-time-container-justify-content);}.var-time-picker__title-btn { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: 0.3s var(--cubic-bezier); white-space: nowrap; background: var(--time-picker-title-time-background); padding: var(--time-picker-title-time-padding); border-radius: var(--time-picker-title-time-border-radius); opacity: var(--time-picker-title-inactive-opacity);}.var-time-picker__title-btn--active { background: var(--time-picker-title-time-active-background); opacity: 1;}.var-time-picker__title-time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker__title-time .var-time-picker__title-btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker__title-ampm { border: var(--time-picker-title-ampm-border); border-radius: var(--time-picker-title-ampm-border-radius); margin-left: var(--time-picker-title-ampm-margin-left); overflow: hidden;}.var-time-picker__title-ampm .var-time-picker__title-btn { padding: var(--time-picker-title-ampm-button-padding); border-radius: 0; opacity: var(--time-picker-title-inactive-opacity);}.var-time-picker__title-ampm .var-time-picker__title-btn--active { background: var(--time-picker-title-ampm-button-active-background); opacity: 1;}.var-time-picker__title-ampm .var-time-picker__title-btn:first-child { border-bottom: var(--time-picker-title-ampm-border);}.var-time-picker__body { display: flex; align-items: center; justify-content: center; height: var(--time-picker-body-height); background-color: var(--time-picker-body-background); transition: 0.25s background-color;}.var-time-picker__clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker__clock-container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker__clock-hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker__clock-hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker__clock-hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker__clock-item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%); color: var(--time-picker-clock-item-text-color);}.var-time-picker__clock-item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker__clock-item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker__clock-inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker__actions { display: flex; justify-content: flex-end; align-items: center; background-color: var(--time-picker-body-background); padding: var(--time-picker-actions-padding);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}