@varlet/ui 2.20.0 → 2.20.1

package/es/time-picker/TimePicker.mjs

@@ -1,438 +0,0 @@
-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
-};