@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-XY2NDPX7.mjs

@@ -0,0 +1,713 @@
+import {
+  INPUT_GROUP_INJECTION_KEY
+} from "./chunk-J4HGCSOE.mjs";
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay,
+  useVueFocusTrap
+} from "./chunk-Y63TRXZO.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/TimePicker.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  h,
+  inject,
+  watch,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  useId
+} from "vue";
+import {
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  TIME_PICKER_DESKTOP_QUERY,
+  adjacentTimePickerColumn,
+  applyTimePickerColumn,
+  applyTimePickerRangeColumn,
+  buildTimePickerColumns,
+  classNames,
+  clockSolidIcon20PathD,
+  closeSolidIcon20PathD,
+  coerceClassValue,
+  coerceTimePickerRange,
+  coerceTimePickerSingle,
+  commitTimePickerNow,
+  commitTimePickerOk,
+  datePickerSheetScrimClasses,
+  emptyTimePickerValue,
+  focusTimePickerOption,
+  formatTime,
+  formatTimePickerDisplay,
+  formTimePickerValue,
+  getInputClearButtonClasses,
+  getInputFieldClasses,
+  getInputPasswordToggleClasses,
+  getInputWrapperClasses,
+  getLocaleDirection,
+  getTimePeriodLabels,
+  getTimePickerItemClasses,
+  getTimePickerLabels,
+  getTimePickerMobileSelectRowClasses,
+  getTimePickerRangeTabButtonClasses,
+  icon20ViewBox,
+  isTimePickerDesktopLayout,
+  isTimePickerValueEmpty,
+  mergeAriaDescribedBy,
+  mergeStyleValues,
+  mergeTigerLocale,
+  parseTypedTimePickerValue,
+  resolveInputTrailingLayout,
+  resolveReadOnlyFlag,
+  runShakeAnimation,
+  seedTimePickerDraft,
+  timePickerBaseClasses,
+  timePickerColumnClasses,
+  timePickerColumnHeaderClasses,
+  timePickerColumnListClasses,
+  timePickerDesktopColumnsClasses,
+  timePickerFooterButtonClasses,
+  timePickerFooterClasses,
+  timePickerMobileSelectClasses,
+  timePickerPanelClasses,
+  timePickerRangeHeaderClasses,
+  visibleTimePickerColumns
+} from "@expcat/tigercat-core";
+function filledIcon(path, className) {
+  return h(
+    "svg",
+    {
+      class: className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: icon20ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    [h("path", { "fill-rule": "evenodd", d: path, "clip-rule": "evenodd" })]
+  );
+}
+var TimePicker = defineComponent({
+  name: "TigerTimePicker",
+  inheritAttrs: false,
+  props: {
+    range: { type: Boolean, default: false },
+    locale: { type: Object, default: void 0 },
+    labels: { type: Object, default: void 0 },
+    modelValue: {
+      type: [String, Array, null],
+      default: void 0
+    },
+    defaultValue: {
+      type: [String, Array, null],
+      default: void 0
+    },
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    format: { type: String, default: "24" },
+    showSeconds: Boolean,
+    hourStep: { type: Number, default: 1 },
+    minuteStep: { type: Number, default: 1 },
+    secondStep: { type: Number, default: 1 },
+    placeholder: { type: String, default: void 0 },
+    disabled: Boolean,
+    readonly: { type: Boolean, default: void 0 },
+    required: Boolean,
+    minTime: { type: String, default: void 0 },
+    maxTime: { type: String, default: void 0 },
+    disabledTime: { type: Function, default: void 0 },
+    now: { type: Date, default: void 0 },
+    clearable: { type: Boolean, default: true },
+    name: String,
+    id: String,
+    status: { type: String, default: void 0 },
+    placement: { type: String, default: "bottom-start" },
+    offset: { type: Number, default: 4 },
+    dropdownClassName: String,
+    getPopupContainer: { type: Function },
+    className: String
+  },
+  emits: ["update:modelValue", "update:open", "change", "input", "open-change", "clear", "blur"],
+  setup(props, { emit, attrs, expose }) {
+    const config = useTigerConfig();
+    const inputGroup = inject(INPUT_GROUP_INJECTION_KEY, null);
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const localeCode = computed(() => mergedLocale.value?.locale);
+    const labels = computed(() => getTimePickerLabels(mergedLocale.value, props.labels));
+    const periodLabels = computed(() => getTimePeriodLabels(localeCode.value));
+    const dir = computed(() => getLocaleDirection(mergedLocale.value));
+    const isReadOnly = computed(() => resolveReadOnlyFlag(props.readonly));
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    const status = computed(
+      () => props.status ?? formItemControl?.status.value ?? "default"
+    );
+    const inGroup = computed(() => inputGroup != null);
+    const effectiveSize = computed(() => props.size ?? inputGroup?.size ?? "md");
+    const effectiveId = computed(() => props.id ?? formItemControl?.id.value);
+    const effectiveName = computed(() => props.name ?? formItemControl?.name.value);
+    const required = computed(() => props.required || Boolean(formItemControl?.required.value));
+    const localValue = ref(
+      props.range ? coerceTimePickerRange(props.defaultValue) : coerceTimePickerSingle(props.defaultValue)
+    );
+    const localOpen = ref(props.defaultOpen);
+    const draft = ref(seedTimePickerDraft(null, props.format));
+    const draftRange = ref(null);
+    const activePart = ref("start");
+    const draftText = ref(null);
+    const desktop = ref(isTimePickerDesktopLayout());
+    const committed = computed(() => {
+      if (props.modelValue !== void 0) {
+        return props.range ? coerceTimePickerRange(props.modelValue) : coerceTimePickerSingle(props.modelValue);
+      }
+      if (formItemControl?.value.value !== void 0) {
+        return props.range ? coerceTimePickerRange(formItemControl.value.value) : coerceTimePickerSingle(formItemControl.value.value);
+      }
+      return localValue.value;
+    });
+    const isOpen = computed(() => props.open !== void 0 ? props.open : localOpen.value);
+    const constraints = computed(() => ({
+      minTime: props.minTime,
+      maxTime: props.maxTime,
+      disabledTime: props.disabledTime,
+      hourStep: props.hourStep,
+      minuteStep: props.minuteStep,
+      secondStep: props.secondStep,
+      format: props.format,
+      showSeconds: props.showSeconds
+    }));
+    function writeCommitted(next) {
+      if (props.modelValue === void 0 && formItemControl?.value.value === void 0) {
+        localValue.value = next;
+      }
+      emit("update:modelValue", next);
+      emit("change", next);
+      emit("input", next);
+      formItemControl?.onChange(formTimePickerValue(props.range, next));
+      draftText.value = null;
+    }
+    function seedPanel(value, part) {
+      if (props.range) {
+        const tuple = value ?? null;
+        draftRange.value = tuple;
+        const active = tuple?.[part === "start" ? 0 : 1] ?? null;
+        draft.value = seedTimePickerDraft(active, props.format);
+        return;
+      }
+      draft.value = seedTimePickerDraft(value, props.format);
+    }
+    function setOpenSafe(next) {
+      if (effectiveDisabled.value || isReadOnly.value) return;
+      if (props.open === void 0) localOpen.value = next;
+      emit("update:open", next);
+      emit("open-change", next);
+      if (!next) draftText.value = null;
+    }
+    const displaySource = computed(() => {
+      if (!isOpen.value) return committed.value;
+      if (props.range) return draftRange.value;
+      return draft.value.parts ? formatTime(
+        draft.value.parts.hours,
+        draft.value.parts.minutes,
+        draft.value.parts.seconds,
+        props.showSeconds
+      ) : null;
+    });
+    const displayValue = computed(
+      () => draftText.value ?? formatTimePickerDisplay(
+        props.range,
+        displaySource.value,
+        props.format,
+        props.showSeconds,
+        localeCode.value
+      )
+    );
+    const placeholderText = computed(
+      () => props.placeholder ?? (props.range ? labels.value.selectTimeRange : labels.value.selectTime)
+    );
+    const showClear = computed(
+      () => props.clearable && !effectiveDisabled.value && !isReadOnly.value && !isTimePickerValueEmpty(props.range, committed.value)
+    );
+    const trailing = computed(
+      () => resolveInputTrailingLayout({
+        clearable: props.clearable,
+        disabled: effectiveDisabled.value,
+        readOnly: isReadOnly.value,
+        valueLength: showClear.value ? 1 : 0,
+        hasCustomSuffix: true
+      })
+    );
+    const columns = computed(
+      () => buildTimePickerColumns({
+        instanceId: panelId.value,
+        draft: draft.value,
+        constraints: constraints.value,
+        labels: labels.value,
+        periodLabels: periodLabels.value
+      })
+    );
+    const rootRef = ref(null);
+    const inputRef = ref(null);
+    const panelRef = ref(null);
+    const inputWrapperRef = ref(null);
+    const instanceId = useId();
+    const panelId = computed(() => `tiger-timepicker-panel-${instanceId}`);
+    watch(
+      () => [status.value, formItemControl?.shakeTrigger.value],
+      () => {
+        if (status.value === "error") runShakeAnimation(rootRef.value);
+      }
+    );
+    const overlay = useVueAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: inputWrapperRef,
+      floatingRef: panelRef,
+      placement: () => props.placement ?? "bottom-start",
+      offset: () => props.offset ?? 4,
+      layout: "bottom-sheet-sm",
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      getContainer: () => props.getPopupContainer?.() ?? null,
+      onDismiss: () => setOpenSafe(false)
+    });
+    useVueFocusTrap({ enabled: isOpen, containerRef: panelRef, inert: true });
+    function focusPanel() {
+      const panel = panelRef.value;
+      if (!panel) return;
+      if (desktop.value) {
+        const selected = panel.querySelector(
+          '[data-tiger-timepicker-unit="hour"][aria-selected="true"]'
+        );
+        const first = panel.querySelector(
+          '[data-tiger-timepicker-unit="hour"]:not([aria-disabled="true"])'
+        );
+        (selected ?? first)?.focus();
+        panel.querySelectorAll('[aria-selected="true"]').forEach((node) => {
+          ;
+          node.scrollIntoView({ block: "nearest" });
+        });
+        return;
+      }
+      panel.querySelector("select")?.focus();
+    }
+    watch(
+      isOpen,
+      (open) => {
+        if (!open) return;
+        activePart.value = "start";
+        seedPanel(committed.value, "start");
+        nextTick(focusPanel);
+      },
+      { immediate: true }
+    );
+    watch(activePart, () => {
+      if (isOpen.value) nextTick(focusPanel);
+    });
+    let media = null;
+    const syncDesktop = () => {
+      desktop.value = isTimePickerDesktopLayout();
+    };
+    onMounted(() => {
+      syncDesktop();
+      if (typeof window.matchMedia !== "function") return;
+      media = window.matchMedia(TIME_PICKER_DESKTOP_QUERY);
+      media.addEventListener("change", syncDesktop);
+    });
+    onUnmounted(() => {
+      media?.removeEventListener("change", syncDesktop);
+    });
+    function selectColumn(unit, option) {
+      if (props.range) {
+        const next = applyTimePickerRangeColumn({
+          draftRange: draftRange.value,
+          activePart: activePart.value,
+          column: unit,
+          option,
+          constraints: constraints.value
+        });
+        draftRange.value = next.nextRange;
+        activePart.value = next.nextActivePart;
+        const active = next.nextRange?.[next.nextActivePart === "start" ? 0 : 1] ?? null;
+        draft.value = seedTimePickerDraft(active, props.format);
+        return;
+      }
+      draft.value = applyTimePickerColumn(draft.value, unit, option, constraints.value);
+    }
+    function confirmDraft() {
+      const result = commitTimePickerOk({
+        range: props.range,
+        draft: draft.value,
+        draftRange: draftRange.value,
+        constraints: constraints.value
+      });
+      if (!result) {
+        setOpenSafe(false);
+        return;
+      }
+      writeCommitted(result.nextCommitted);
+      if (result.close) setOpenSafe(false);
+    }
+    function selectNow() {
+      const result = commitTimePickerNow(props.range, props.now ?? /* @__PURE__ */ new Date(), constraints.value);
+      writeCommitted(result.nextCommitted);
+      seedPanel(result.nextCommitted, "start");
+      if (result.close) setOpenSafe(false);
+    }
+    function clearValue() {
+      writeCommitted(emptyTimePickerValue(props.range));
+      emit("clear");
+      inputRef.value?.focus();
+    }
+    function parseDraft() {
+      if (draftText.value == null) return;
+      const parsed = parseTypedTimePickerValue(
+        draftText.value,
+        props.format,
+        props.showSeconds,
+        props.range,
+        periodLabels.value
+      );
+      writeCommitted(parsed);
+    }
+    function handleFocusOut(event) {
+      const next = event.relatedTarget;
+      if (rootRef.value && next && rootRef.value.contains(next) || panelRef.value && next && panelRef.value.contains(next)) {
+        return;
+      }
+      parseDraft();
+      formItemControl?.onBlur();
+      emit("blur", event);
+    }
+    function handleInputKeyDown(event) {
+      if (effectiveDisabled.value || isReadOnly.value) return;
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setOpenSafe(true);
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (draftText.value != null) {
+          parseDraft();
+          return;
+        }
+        if (isOpen.value) {
+          confirmDraft();
+          return;
+        }
+        setOpenSafe(true);
+      }
+    }
+    function handlePanelKeyDown(event) {
+      const unit = event.target.getAttribute(
+        "data-tiger-timepicker-unit"
+      );
+      if (!unit) return;
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        focusTimePickerOption(panelRef.value, unit, "prev");
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        focusTimePickerOption(panelRef.value, unit, "next");
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusTimePickerOption(panelRef.value, unit, "first");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusTimePickerOption(panelRef.value, unit, "last");
+        return;
+      }
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        event.preventDefault();
+        const next = adjacentTimePickerColumn(
+          unit,
+          visibleTimePickerColumns(props.format, props.showSeconds),
+          dir.value,
+          event.key
+        );
+        if (next) focusTimePickerOption(panelRef.value, next, "first");
+      }
+    }
+    function switchPart(part) {
+      activePart.value = part;
+      const active = draftRange.value?.[part === "start" ? 0 : 1] ?? null;
+      draft.value = seedTimePickerDraft(active, props.format);
+    }
+    expose({
+      focus: () => inputRef.value?.focus(),
+      open: () => setOpenSafe(true),
+      close: () => setOpenSafe(false)
+    });
+    return () => {
+      const attrRecord = attrs;
+      const describedBy = mergeAriaDescribedBy(
+        typeof attrRecord["aria-describedby"] === "string" ? attrRecord["aria-describedby"] : void 0,
+        formItemControl?.describedBy.value
+      );
+      const labelledby = typeof attrRecord["aria-labelledby"] === "string" && attrRecord["aria-labelledby"].trim() ? attrRecord["aria-labelledby"] : formItemControl?.labelId.value;
+      const ariaLabel = typeof attrRecord["aria-label"] === "string" && attrRecord["aria-label"].trim() ? attrRecord["aria-label"] : void 0;
+      const trailingLayout = trailing.value;
+      const input = h("input", {
+        ref: inputRef,
+        type: "text",
+        class: getInputFieldClasses({
+          size: effectiveSize.value,
+          status: status.value,
+          hasSuffix: trailingLayout.hasSuffix,
+          hasDualSuffix: trailingLayout.hasDualSuffix
+        }),
+        value: displayValue.value,
+        placeholder: placeholderText.value,
+        disabled: effectiveDisabled.value,
+        readonly: isReadOnly.value,
+        required: required.value,
+        name: effectiveName.value,
+        id: effectiveId.value,
+        autocomplete: "off",
+        "aria-label": ariaLabel ?? (labelledby ? void 0 : placeholderText.value),
+        "aria-labelledby": labelledby,
+        "aria-describedby": describedBy,
+        "aria-invalid": status.value === "error" ? true : void 0,
+        "aria-required": required.value ? true : void 0,
+        "aria-controls": isOpen.value ? panelId.value : void 0,
+        onInput: (event) => {
+          draftText.value = event.target.value;
+        },
+        onClick: () => setOpenSafe(true),
+        onKeydown: handleInputKeyDown,
+        onBlur: parseDraft
+      });
+      const clearBtn = showClear.value ? h(
+        "button",
+        {
+          type: "button",
+          class: getInputClearButtonClasses(effectiveSize.value, {
+            offsetSlots: trailingLayout.clearOffsetSlots
+          }),
+          "aria-label": labels.value.clear,
+          onMousedown: (event) => event.preventDefault(),
+          onClick: clearValue
+        },
+        [filledIcon(closeSolidIcon20PathD, "w-4 h-4")]
+      ) : null;
+      const clockBtn = h(
+        "button",
+        {
+          type: "button",
+          class: getInputPasswordToggleClasses(effectiveSize.value, { offsetSlots: 0 }),
+          disabled: effectiveDisabled.value || isReadOnly.value,
+          "aria-label": labels.value.toggle,
+          onMousedown: (event) => event.preventDefault(),
+          onClick: () => setOpenSafe(!isOpen.value)
+        },
+        [filledIcon(clockSolidIcon20PathD, "w-5 h-5")]
+      );
+      const columnTree = desktop.value ? h(
+        "div",
+        { class: timePickerDesktopColumnsClasses },
+        columns.value.map((column) => {
+          const active = column.options.find((option) => option.selected) ?? column.options.find((option) => !option.disabled);
+          return h("div", { class: timePickerColumnClasses, key: column.unit }, [
+            h(
+              "div",
+              { id: column.headerId, class: timePickerColumnHeaderClasses },
+              column.label
+            ),
+            h(
+              "div",
+              {
+                id: column.listId,
+                role: "listbox",
+                "aria-labelledby": column.headerId,
+                "aria-activedescendant": active ? `${column.listId}-${String(active.value)}` : void 0,
+                class: timePickerColumnListClasses,
+                onKeydown: handlePanelKeyDown
+              },
+              column.options.map((option) => {
+                const selected = option.selected;
+                const tabIndex = option.disabled ? -1 : selected || option === active ? 0 : -1;
+                return h(
+                  "div",
+                  {
+                    key: String(option.value),
+                    id: `${column.listId}-${String(option.value)}`,
+                    role: "option",
+                    tabindex: tabIndex,
+                    "aria-selected": selected,
+                    "aria-disabled": option.disabled || void 0,
+                    "aria-label": option.ariaLabel,
+                    "data-tiger-timepicker-unit": column.unit,
+                    class: getTimePickerItemClasses(selected, option.disabled),
+                    onClick: () => {
+                      if (!option.disabled) selectColumn(column.unit, option.value);
+                    }
+                  },
+                  option.label
+                );
+              })
+            )
+          ]);
+        })
+      ) : h(
+        "div",
+        { class: getTimePickerMobileSelectRowClasses(columns.value.length) },
+        columns.value.map((column) => {
+          const selected = column.options.find((option) => option.selected);
+          return h(
+            "select",
+            {
+              key: column.unit,
+              class: timePickerMobileSelectClasses,
+              "aria-label": column.label,
+              value: selected ? String(selected.value) : "",
+              onChange: (event) => {
+                const raw = event.target.value;
+                const option = column.unit === "period" ? raw : Number(raw);
+                selectColumn(column.unit, option);
+              }
+            },
+            [
+              selected ? null : h("option", { value: "", disabled: true }),
+              ...column.options.map(
+                (option) => h(
+                  "option",
+                  {
+                    value: String(option.value),
+                    disabled: option.disabled
+                  },
+                  option.label
+                )
+              )
+            ]
+          );
+        })
+      );
+      const panel = isOpen.value ? [
+        h("button", {
+          type: "button",
+          class: datePickerSheetScrimClasses,
+          tabindex: -1,
+          "aria-hidden": "true",
+          onClick: () => setOpenSafe(false)
+        }),
+        h(
+          "div",
+          {
+            ref: panelRef,
+            id: panelId.value,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": labels.value.dialog,
+            class: classNames(
+              timePickerPanelClasses,
+              overlay.floatingClasses.value,
+              props.dropdownClassName
+            ),
+            style: overlay.floatingStyles.value,
+            "data-positioned": overlay.positioned.value,
+            "data-tiger": "timepicker-panel",
+            onFocusout: handleFocusOut
+          },
+          [
+            props.range ? h("div", { class: timePickerRangeHeaderClasses, role: "tablist" }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  class: getTimePickerRangeTabButtonClasses(activePart.value === "start"),
+                  "aria-selected": activePart.value === "start",
+                  onClick: () => switchPart("start")
+                },
+                labels.value.start
+              ),
+              h(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  class: getTimePickerRangeTabButtonClasses(activePart.value === "end"),
+                  "aria-selected": activePart.value === "end",
+                  onClick: () => switchPart("end")
+                },
+                labels.value.end
+              )
+            ]) : null,
+            columnTree,
+            h("div", { class: timePickerFooterClasses }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: timePickerFooterButtonClasses,
+                  onClick: selectNow
+                },
+                labels.value.now
+              ),
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: timePickerFooterButtonClasses,
+                  onClick: confirmDraft
+                },
+                labels.value.ok
+              )
+            ])
+          ]
+        )
+      ] : null;
+      const { class: _class, style: attrStyle, ...restAttrs } = attrRecord;
+      return h(
+        "div",
+        {
+          ...restAttrs,
+          ref: rootRef,
+          class: classNames(timePickerBaseClasses, props.className, coerceClassValue(_class)),
+          style: mergeStyleValues(attrStyle),
+          [TIGER_CHROME_ATTR]: "",
+          onAnimationend: () => rootRef.value?.classList.remove(SHAKE_CLASS),
+          onFocusout: handleFocusOut
+        },
+        [
+          h(
+            "div",
+            {
+              ref: inputWrapperRef,
+              class: getInputWrapperClasses(status.value, { inGroup: inGroup.value })
+            },
+            [input, clearBtn, clockBtn]
+          ),
+          renderVueOverlayTeleport(panel, overlay.target.value)
+        ]
+      );
+    };
+  }
+});
+var TimePicker_default = TimePicker;
+
+export {
+  TimePicker,
+  TimePicker_default
+};