@varlet/ui 2.20.1 → 2.20.2

package/es/time-picker/TimePicker.mjs

@@ -0,0 +1,438 @@
+import dayjs from "dayjs/esm";
+import Clock from "./clock.mjs";
+import { computed, defineComponent, reactive, ref, watch } from "vue";
+import { props, hoursAmpm, hours24 } from "./props.mjs";
+import { toNumber, getRect, preventDefault, call } from "@varlet/shared";
+import { createNamespace, formatElevation } from "../utils/components.mjs";
+import { padStart } from "../utils/shared.mjs";
+import { getNumberTime, getIsDisableMinute, getIsDisableSecond } from "./utils.mjs";
+import { pack } from "../locale/index.mjs";
+const { name, n, classes } = createNamespace("time-picker");
+import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock, 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);
+const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ _createElementVNode(
+  "span",
+  null,
+  ":",
+  -1
+  /* HOISTED */
+));
+const _hoisted_2 = { key: 0 };
+function __render__(_ctx, _cache) {
+  var _a;
+  const _component_clock = _resolveComponent("clock");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.formatElevation(_ctx.elevation, 2))),
+      ref: "picker"
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("title")),
+          style: _normalizeStyle({ background: _ctx.titleColor || _ctx.headerColor || _ctx.color })
+        },
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("title-hint"))
+            },
+            _toDisplayString((_a = _ctx.hint) != null ? _a : _ctx.pack.timePickerHint),
+            3
+            /* TEXT, CLASS */
+          ),
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("title-time-container"))
+            },
+            [
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.n("title-time"))
+                },
+                [
+                  _createElementVNode(
+                    "div",
+                    {
+                      class: _normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "hour", _ctx.n("title-btn--active")])),
+                      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.checkPanel("hour"))
+                    },
+                    _toDisplayString(_ctx.time.hour),
+                    3
+                    /* TEXT, CLASS */
+                  ),
+                  _hoisted_1,
+                  _createElementVNode(
+                    "div",
+                    {
+                      class: _normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "minute", _ctx.n("title-btn--active")])),
+                      onClick: _cache[1] || (_cache[1] = ($event) => _ctx.checkPanel("minute"))
+                    },
+                    _toDisplayString(_ctx.time.minute),
+                    3
+                    /* TEXT, CLASS */
+                  ),
+                  _ctx.useSeconds ? (_openBlock(), _createElementBlock("span", _hoisted_2, ":")) : _createCommentVNode("v-if", true),
+                  _ctx.useSeconds ? (_openBlock(), _createElementBlock(
+                    "div",
+                    {
+                      key: 1,
+                      class: _normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "second", _ctx.n("title-btn--active")])),
+                      onClick: _cache[2] || (_cache[2] = ($event) => _ctx.checkPanel("second"))
+                    },
+                    _toDisplayString(_ctx.time.second),
+                    3
+                    /* TEXT, CLASS */
+                  )) : _createCommentVNode("v-if", true)
+                ],
+                2
+                /* CLASS */
+              ),
+              _ctx.format === "ampm" ? (_openBlock(), _createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  class: _normalizeClass(_ctx.n("title-ampm"))
+                },
+                [
+                  _createElementVNode(
+                    "div",
+                    {
+                      class: _normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.ampm === "am", _ctx.n("title-btn--active")])),
+                      onClick: _cache[3] || (_cache[3] = ($event) => _ctx.checkAmpm("am"))
+                    },
+                    " AM ",
+                    2
+                    /* CLASS */
+                  ),
+                  _createElementVNode(
+                    "div",
+                    {
+                      class: _normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.ampm === "pm", _ctx.n("title-btn--active")])),
+                      onClick: _cache[4] || (_cache[4] = ($event) => _ctx.checkAmpm("pm"))
+                    },
+                    " PM ",
+                    2
+                    /* CLASS */
+                  )
+                ],
+                2
+                /* CLASS */
+              )) : _createCommentVNode("v-if", true)
+            ],
+            2
+            /* CLASS */
+          )
+        ],
+        6
+        /* CLASS, STYLE */
+      ),
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("body"))
+        },
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("clock-container")),
+              onTouchstart: _cache[5] || (_cache[5] = (...args) => _ctx.moveHand && _ctx.moveHand(...args)),
+              onTouchmove: _cache[6] || (_cache[6] = (...args) => _ctx.moveHand && _ctx.moveHand(...args)),
+              onTouchend: _cache[7] || (_cache[7] = (...args) => _ctx.end && _ctx.end(...args)),
+              ref: "container"
+            },
+            [
+              _createVNode(_Transition, {
+                name: `${_ctx.n()}-panel-fade`
+              }, {
+                default: _withCtx(() => [
+                  (_openBlock(), _createBlock(_component_clock, {
+                    key: _ctx.type,
+                    ref: "inner",
+                    type: _ctx.type,
+                    ampm: _ctx.ampm,
+                    color: _ctx.color,
+                    "is-inner": _ctx.isInner,
+                    format: _ctx.format,
+                    "allowed-time": _ctx.allowedTime,
+                    rad: _ctx.getRad,
+                    time: _ctx.time,
+                    "prevent-next-update": _ctx.isPreventNextUpdate,
+                    "use-seconds": _ctx.useSeconds,
+                    max: _ctx.max,
+                    min: _ctx.min,
+                    onUpdate: _ctx.update,
+                    onChangePreventUpdate: _ctx.changePreventUpdate
+                  }, null, 8, ["type", "ampm", "color", "is-inner", "format", "allowed-time", "rad", "time", "prevent-next-update", "use-seconds", "max", "min", "onUpdate", "onChangePreventUpdate"]))
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["name"])
+            ],
+            34
+            /* CLASS, HYDRATE_EVENTS */
+          )
+        ],
+        2
+        /* CLASS */
+      )
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: { Clock },
+  props,
+  setup(props2) {
+    const container = ref(null);
+    const picker = ref(null);
+    const inner = ref(null);
+    const isInner = ref(false);
+    const isPreventNextUpdate = ref(false);
+    const isActualInner = ref(false);
+    const isChosenUsableHour = ref(false);
+    const isChosenUsableMinute = ref(false);
+    const isDisableHour = ref(false);
+    const isDisableMinute = ref(false);
+    const minuteRad = ref(0);
+    const secondRad = ref(0);
+    const hourRad = ref();
+    const type = ref("hour");
+    const ampm = ref("am");
+    const time = ref({
+      hour: "00",
+      minute: "00",
+      second: "00"
+    });
+    const center = reactive({
+      x: 0,
+      y: 0
+    });
+    const innerRange = reactive({
+      x: [],
+      y: []
+    });
+    const getRad = computed(() => {
+      if (type.value === "hour")
+        return hourRad.value;
+      if (type.value === "minute")
+        return minuteRad.value;
+      return secondRad.value;
+    });
+    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);
+        }
+      },
+      { immediate: true }
+    );
+    function update(newTime) {
+      call(props2["onUpdate:modelValue"], newTime);
+      call(props2.onChange, newTime);
+    }
+    function rad2deg(rad) {
+      return rad * 57.29577951308232;
+    }
+    function checkPanel(panelType) {
+      isChosenUsableHour.value = false;
+      isDisableMinute.value = false;
+      type.value = panelType;
+    }
+    function findAvailableHour(ampm2) {
+      const { disableHour } = inner.value;
+      const index = hoursAmpm.findIndex((hour) => toNumber(hour) === toNumber(time.value.hour));
+      const hours = ampm2 === "am" ? hoursAmpm : hours24;
+      const realignmentHours = [...hours.slice(index), ...hours.slice(0, index)];
+      return realignmentHours.find((hour, index2) => {
+        isPreventNextUpdate.value = index2 !== 0;
+        return !disableHour.includes(hour);
+      });
+    }
+    function checkAmpm(ampmType) {
+      if (props2.readonly)
+        return;
+      ampm.value = ampmType;
+      const newHour = findAvailableHour(ampmType);
+      if (!newHour)
+        return;
+      const second = props2.useSeconds ? `:${time.value.second}` : "";
+      const newTime = `${padStart(newHour, 2, "0")}:${time.value.minute}${second}`;
+      update(newTime);
+    }
+    function getInner(clientX, clientY) {
+      const xIsInRange = clientX >= innerRange.x[0] && clientX <= innerRange.x[1];
+      const yIsInRange = clientY >= innerRange.y[0] && clientY <= innerRange.y[1];
+      return xIsInRange && yIsInRange;
+    }
+    function getTime(value) {
+      const hourFormat = props2.format === "24hr" ? "HH" : "hh";
+      const { hour, minute, second } = getNumberTime(value);
+      return {
+        hour: dayjs().hour(hour).format(hourFormat),
+        minute: dayjs().minute(minute).format("mm"),
+        second: dayjs().second(second).format("ss")
+      };
+    }
+    function getHourIndex(rad) {
+      const value = rad / 30;
+      return value >= 0 ? value : value + 12;
+    }
+    function getRangeSize() {
+      const { width: innerWidth, height: innerHeight } = inner.value.getSize();
+      const rangeXMin = center.x - innerWidth / 2 - 8;
+      const rangeXMax = center.x + innerWidth / 2 + 8;
+      const rangeYMin = center.y - innerHeight / 2 - 8;
+      const rangeYMax = center.y + innerHeight / 2 + 8;
+      return {
+        rangeXMin,
+        rangeXMax,
+        rangeYMin,
+        rangeYMax
+      };
+    }
+    function setHourRad(clientX, clientY, roundDeg) {
+      const { disableHour } = inner.value;
+      isActualInner.value = getInner(clientX, clientY);
+      const rad = Math.round(roundDeg / 30) * 30 + 90;
+      const index = getHourIndex(rad);
+      const anotherHour = isInner.value ? hoursAmpm[index] : hours24[index];
+      if (!disableHour.includes(anotherHour)) {
+        isInner.value = props2.format === "24hr" ? getInner(clientX, clientY) : false;
+      }
+      if (isInner.value !== isActualInner.value)
+        return;
+      const newHour = isInner.value || ampm.value === "pm" ? hours24[index] : hoursAmpm[index];
+      isDisableHour.value = disableHour.includes(newHour);
+      if (isDisableHour.value)
+        return;
+      hourRad.value = rad;
+      isChosenUsableHour.value = true;
+    }
+    function setMinuteRad(roundDeg) {
+      const { disableHour } = inner.value;
+      const rad = Math.round(roundDeg / 6) * 6 + 90;
+      const radToMin = rad / 6 >= 0 ? rad / 6 : rad / 6 + 60;
+      const values = {
+        time: radToMin,
+        format: props2.format,
+        ampm: ampm.value,
+        hour: time.value.hour,
+        max: props2.max,
+        min: props2.min,
+        disableHour,
+        allowedTime: props2.allowedTime
+      };
+      isDisableMinute.value = getIsDisableMinute(values);
+      if (isDisableMinute.value)
+        return;
+      minuteRad.value = rad;
+      isChosenUsableMinute.value = true;
+    }
+    function setSecondRad(roundDeg) {
+      const { disableHour } = inner.value;
+      const rad = Math.round(roundDeg / 6) * 6 + 90;
+      const radToSec = rad / 6 >= 0 ? rad / 6 : rad / 6 + 60;
+      const values = {
+        time: radToSec,
+        format: props2.format,
+        ampm: ampm.value,
+        hour: time.value.hour,
+        minute: toNumber(time.value.minute),
+        max: props2.max,
+        min: props2.min,
+        disableHour,
+        allowedTime: props2.allowedTime
+      };
+      if (!getIsDisableSecond(values))
+        secondRad.value = rad;
+    }
+    function setCenterAndRange() {
+      const { left, top, width, height } = getRect(container.value);
+      center.x = left + width / 2;
+      center.y = top + height / 2;
+      if (type.value === "hour" && props2.format === "24hr") {
+        const { rangeXMin, rangeXMax, rangeYMin, rangeYMax } = getRangeSize();
+        innerRange.x = [rangeXMin, rangeXMax];
+        innerRange.y = [rangeYMin, rangeYMax];
+      }
+    }
+    function moveHand(event) {
+      preventDefault(event);
+      if (props2.readonly)
+        return;
+      setCenterAndRange();
+      const { clientX, clientY } = event.touches[0];
+      const x = clientX - center.x;
+      const y = clientY - center.y;
+      const roundDeg = Math.round(rad2deg(Math.atan2(y, x)));
+      if (type.value === "hour")
+        setHourRad(clientX, clientY, roundDeg);
+      else if (type.value === "minute")
+        setMinuteRad(roundDeg);
+      else
+        setSecondRad(roundDeg);
+    }
+    function end() {
+      if (props2.readonly)
+        return;
+      if (type.value === "hour" && isChosenUsableHour.value) {
+        type.value = "minute";
+        return;
+      }
+      if (type.value === "minute" && props2.useSeconds && isChosenUsableMinute.value) {
+        type.value = "second";
+      }
+    }
+    function changePreventUpdate() {
+      isPreventNextUpdate.value = false;
+    }
+    return {
+      getRad,
+      time,
+      container,
+      inner,
+      picker,
+      isInner,
+      type,
+      ampm,
+      isPreventNextUpdate,
+      n,
+      classes,
+      pack,
+      moveHand,
+      checkPanel,
+      checkAmpm,
+      end,
+      update,
+      changePreventUpdate,
+      formatElevation
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};