@varlet/ui/es/time-picker/clock.mjs

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

import { computed, defineComponent, ref, watch } from "vue";
import { getRect, toNumber } from "@varlet/shared";
import dayjs from "dayjs/esm/index.js";
import { createNamespace } from "../utils/components.mjs";
import { padStart } from "../utils/shared.mjs";
import { hours24, hoursAmpm, minSec } from "./props.mjs";
import { convertHour, getIsDisableMinute, getIsDisableSecond, getNumberTime, notConvert } from "./utils.mjs";
const { n, classes } = createNamespace("time-picker");
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode } from "vue";
function __render__(_ctx, _cache) {
  return _openBlock(), _createElementBlock(
    "div",
    {
      class: _normalizeClass(_ctx.n("clock"))
    },
    [
      _createElementVNode(
        "div",
        {
          class: _normalizeClass(_ctx.n("clock-hand")),
          style: _normalizeStyle(_ctx.handStyle)
        },
        null,
        6
        /* CLASS, STYLE */
      ),
      (_openBlock(true), _createElementBlock(
        _Fragment,
        null,
        _renderList(_ctx.timeScales, (timeScale, index) => {
          return _openBlock(), _createElementBlock(
            "div",
            {
              key: timeScale,
              class: _normalizeClass(
                _ctx.classes(
                  _ctx.n("clock-item"),
                  [_ctx.isActive(index, false), _ctx.n("clock-item--active")],
                  [_ctx.isDisable(timeScale), _ctx.n("clock-item--disable")]
                )
              ),
              style: _normalizeStyle(_ctx.getStyle(index, timeScale, false))
            },
            _toDisplayString(timeScale),
            7
            /* TEXT, CLASS, STYLE */
          );
        }),
        128
        /* KEYED_FRAGMENT */
      )),
      _ctx.format === "24hr" && _ctx.type === "hour" ? (_openBlock(), _createElementBlock(
        "div",
        {
          key: 0,
          ref: "inner",
          class: _normalizeClass(_ctx.n("clock-inner"))
        },
        [
          (_openBlock(true), _createElementBlock(
            _Fragment,
            null,
            _renderList(_ctx.hours24, (hour, index) => {
              return _openBlock(), _createElementBlock(
                "div",
                {
                  key: hour,
                  class: _normalizeClass(
                    _ctx.classes(
                      _ctx.n("clock-item"),
                      [_ctx.isActive(index, true), _ctx.n("clock-item--active")],
                      [_ctx.isDisable(hour), _ctx.n("clock-item--disable")]
                    )
                  ),
                  style: _normalizeStyle(_ctx.getStyle(index, hour, true))
                },
                _toDisplayString(hour),
                7
                /* TEXT, CLASS, STYLE */
              );
            }),
            128
            /* KEYED_FRAGMENT */
          ))
        ],
        2
        /* CLASS */
      )) : _createCommentVNode("v-if", true)
    ],
    2
    /* CLASS */
  );
}
const __sfc__ = defineComponent({
  name: "Clock",
  props: {
    isInner: {
      type: Boolean,
      required: true
    },
    rad: {
      type: Number
    },
    format: {
      type: String,
      default: "ampm"
    },
    allowedTime: {
      type: Object
    },
    time: {
      type: Object,
      required: true
    },
    useSeconds: {
      type: Boolean
    },
    preventNextUpdate: {
      type: Boolean
    },
    type: {
      type: String,
      default: "hour"
    },
    ampm: {
      type: String,
      default: "am"
    },
    color: {
      type: String
    },
    min: {
      type: String
    },
    max: {
      type: String
    }
  },
  emits: ["update", "change-prevent-update"],
  setup(props, { emit }) {
    const inner = ref(null);
    const disableHour = ref([]);
    const disable24HourIndex = ref([]);
    const handStyle = computed(() => ({
      transform: `rotate(${toNumber(props.rad)}deg)`,
      height: props.isInner && props.type === "hour" ? "calc(50% - 40px)" : "calc(50% - 4px)",
      backgroundColor: getHandleColor(),
      borderColor: getHandleColor()
    }));
    const activeItemIndex = computed(() => {
      if (props.rad === void 0) {
        return;
      }
      const value = props.rad / 30;
      return value >= 0 ? value : value + 12;
    });
    const timeScales = computed(() => {
      if (props.type === "hour") {
        return hoursAmpm;
      }
      return minSec;
    });
    const isDisableMinSec = (time, isDisable2) => {
      time = time != null ? time : props.type === "minute" ? props.time.minute : props.time.second;
      const disableMethod = props.type === "minute" ? getIsDisableMinute : getIsDisableSecond;
      const values = {
        time: toNumber(time),
        format: props.format,
        ampm: props.ampm,
        hour: props.time.hour,
        minute: toNumber(props.time.minute),
        max: props.max,
        min: props.min,
        allowedTime: props.allowedTime,
        disableHour: disableHour.value
      };
      if (isDisable2 && props.type === "minute") {
        Reflect.deleteProperty(values, "minute");
      }
      return disableMethod(values);
    };
    const getHandleColor = () => {
      if (activeItemIndex.value === void 0) {
        return props.color;
      }
      const hour = props.isInner ? hours24[activeItemIndex.value] : timeScales.value[activeItemIndex.value];
      if (timeScales.value === minSec) {
        return isDisableMinSec() ? "var(--time-picker-clock-item-disable-background)" : props.color;
      }
      return isDisable(hour) ? "var(--time-picker-clock-item-disable-background)" : props.color;
    };
    const isActive = (index, inner2) => {
      if (inner2) {
        return activeItemIndex.value === index && props.isInner;
      }
      return activeItemIndex.value === index && (!props.isInner || props.type !== "hour");
    };
    const isDisable = (time) => {
      if (props.type === "hour") {
        if (notConvert(props.format, props.ampm)) {
          return disableHour.value.includes(time);
        }
        const timeIndex = hoursAmpm.findIndex((hour) => hour === time);
        return disable24HourIndex.value.includes(timeIndex);
      }
      return isDisableMinSec(time, true);
    };
    const getStyle = (index, hour, inner2) => {
      const rad = 2 * Math.PI / 12 * index - Math.PI / 2;
      const left = 50 * (1 + Math.cos(rad));
      const top = 50 * (1 + Math.sin(rad));
      const computedColor = () => {
        if (!isActive(index, inner2)) {
          return {
            backgroundColor: void 0,
            color: void 0
          };
        }
        if (isDisable(hour)) {
          return {
            backgroundColor: "var(--time-picker-clock-item-disable-background)",
            color: "var(--time-picker-clock-item-disable-color)"
          };
        }
        return {
          backgroundColor: props.color,
          color: void 0
        };
      };
      const { backgroundColor, color } = computedColor();
      return {
        left: `${left}%`,
        top: `${top}%`,
        backgroundColor,
        color
      };
    };
    const getSize = () => {
      const { width, height } = getRect(inner.value);
      return {
        width,
        height
      };
    };
    const getHour = () => {
      if (activeItemIndex.value === void 0) {
        return void 0;
      }
      const hours = props.ampm === "am" ? hoursAmpm : hours24;
      return padStart(hours[activeItemIndex.value], 2, "0");
    };
    watch([activeItemIndex, () => props.isInner], ([index, inner2], [oldIndex, oldInner]) => {
      const isSame = index === oldIndex && inner2 === oldInner;
      if (isSame || props.type !== "hour" || activeItemIndex.value === void 0) {
        return;
      }
      const newHour = inner2 ? hours24[activeItemIndex.value] : getHour();
      const second = props.useSeconds ? `:${props.time.second}` : "";
      const newTime = `${newHour}:${props.time.minute}${second}`;
      if (!props.preventNextUpdate) {
        emit("update", newTime);
      }
      emit("change-prevent-update");
    });
    watch(
      () => props.rad,
      (rad, oldRad) => {
        if (props.type === "hour" || rad === void 0 || oldRad === void 0) {
          return;
        }
        const radToMinSec = rad / 6 >= 0 ? rad / 6 : rad / 6 + 60;
        const oldRadToMinSec = oldRad / 6 >= 0 ? oldRad / 6 : oldRad / 6 + 60;
        if (radToMinSec === oldRadToMinSec) {
          return;
        }
        let newTime;
        const { hourStr } = convertHour(props.format, props.ampm, props.time.hour);
        if (props.type === "minute") {
          const newMinute = dayjs().minute(radToMinSec).format("mm");
          const second = props.useSeconds ? `:${props.time.second}` : "";
          newTime = `${hourStr}:${newMinute}${second}`;
        }
        if (props.type === "second") {
          const newSecond = dayjs().second(radToMinSec).format("ss");
          const second = props.useSeconds ? `:${newSecond}` : "";
          newTime = `${hourStr}:${props.time.minute}${second}`;
        }
        emit("update", newTime);
      }
    );
    watch(
      [() => props.max, () => props.min, () => props.allowedTime],
      ([max, min, allowedTime]) => {
        disableHour.value = [];
        if (max && !min) {
          const { hour: maxHour } = getNumberTime(max);
          const disableAmpmHours = hoursAmpm.filter((hour) => toNumber(hour) > maxHour);
          const disable24Hours = hours24.filter((hour) => toNumber(hour) > maxHour);
          disableHour.value = [...disableAmpmHours, ...disable24Hours];
        }
        if (!max && min) {
          const { hour: minHour } = getNumberTime(min);
          const disableAmpmHours = hoursAmpm.filter((hour) => toNumber(hour) < minHour);
          const disable24Hours = hours24.filter((hour) => toNumber(hour) < minHour);
          disableHour.value = [...disableAmpmHours, ...disable24Hours];
        }
        if (max && min) {
          const { hour: maxHour } = getNumberTime(max);
          const { hour: minHour } = getNumberTime(min);
          const disableAmpmHours = hoursAmpm.filter((hour) => toNumber(hour) < minHour || toNumber(hour) > maxHour);
          const disable24Hours = hours24.filter((hour) => toNumber(hour) < minHour || toNumber(hour) > maxHour);
          disableHour.value = [...disableAmpmHours, ...disable24Hours];
        }
        if (allowedTime == null ? void 0 : allowedTime.hours) {
          const { hours } = allowedTime;
          const disableAmpmHours = hoursAmpm.filter((hour) => !hours(toNumber(hour)));
          const disable24Hours = hours24.filter((hour) => !hours(toNumber(hour)));
          disableHour.value = [.../* @__PURE__ */ new Set([...disableHour.value, ...disableAmpmHours, ...disable24Hours])];
        }
        disable24HourIndex.value = disableHour.value.map((hour) => hours24.findIndex((hour24) => hour === hour24)).filter((hour) => hour >= 0);
      },
      { immediate: true, deep: true }
    );
    return {
      n,
      classes,
      hours24,
      timeScales,
      inner,
      handStyle,
      disableHour,
      isActive,
      isDisable,
      getSize,
      getStyle,
      activeItemIndex
    };
  }
});
__sfc__.render = __render__;
var stdin_default = __sfc__;
export {
  stdin_default as default
};