@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-4KFAGTGA.mjs

@@ -0,0 +1,499 @@
+import {
+  Calendar
+} from "./chunk-XCIQNTJN.mjs";
+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-VFRB5L7W.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/DatePicker.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  h,
+  inject,
+  watch,
+  nextTick,
+  useId
+} from "vue";
+import {
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  calendarSolidIcon20PathD,
+  classNames,
+  closeSolidIcon20PathD,
+  coerceClassValue,
+  coerceDatePickerRange,
+  coerceDatePickerSingle,
+  commitDatePickerDay,
+  commitDatePickerToday,
+  datePickerFooterButtonClasses,
+  datePickerFooterClasses,
+  datePickerPanelClasses,
+  datePickerSheetScrimClasses,
+  datePickerShortcutButtonClasses,
+  datePickerShortcutListClasses,
+  emptyDatePickerValue,
+  formatDatePickerDisplay,
+  formDatePickerValue,
+  getDatePickerLabels,
+  getDatePickerLocaleCode,
+  getInputClearButtonClasses,
+  getInputFieldClasses,
+  getInputPasswordToggleClasses,
+  getInputWrapperClasses,
+  getWeekStartsOn,
+  icon20ViewBox,
+  isDatePickerValueEmpty,
+  mergeAriaDescribedBy,
+  mergeStyleValues,
+  mergeTigerLocale,
+  parseDatePickerShortcut,
+  parseTypedDatePickerValue,
+  resolveDatePickerDisabled,
+  resolveInputTrailingLayout,
+  resolveReadOnlyFlag,
+  runShakeAnimation,
+  toCalendarDate
+} 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 DatePicker = defineComponent({
+  name: "TigerDatePicker",
+  inheritAttrs: false,
+  props: {
+    range: { type: Boolean, default: false },
+    locale: { type: Object, default: void 0 },
+    labels: { type: Object, default: void 0 },
+    modelValue: {
+      type: [Date, String, Array, null],
+      default: void 0
+    },
+    defaultValue: {
+      type: [Date, 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: "yyyy-MM-dd" },
+    placeholder: { type: String, default: void 0 },
+    disabled: Boolean,
+    readonly: { type: Boolean, default: void 0 },
+    required: Boolean,
+    minDate: { type: [Date, String, null], default: void 0 },
+    maxDate: { type: [Date, String, null], default: void 0 },
+    disabledDate: { type: Function, default: void 0 },
+    weekStartsOn: { type: Number, default: void 0 },
+    now: { type: Date, default: void 0 },
+    clearable: { type: Boolean, default: true },
+    name: String,
+    id: String,
+    shortcuts: { type: Array, default: void 0 },
+    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(() => getDatePickerLocaleCode(mergedLocale.value));
+    const labels = computed(() => getDatePickerLabels(mergedLocale.value, props.labels));
+    const weekStartsOn = computed(() => props.weekStartsOn ?? getWeekStartsOn(localeCode.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 ? coerceDatePickerRange(props.defaultValue) : coerceDatePickerSingle(props.defaultValue)
+    );
+    const localOpen = ref(props.defaultOpen);
+    const previewRange = ref(null);
+    const draftText = ref(null);
+    const committed = computed(() => {
+      if (props.modelValue !== void 0) {
+        return props.range ? coerceDatePickerRange(props.modelValue) : coerceDatePickerSingle(props.modelValue);
+      }
+      if (formItemControl?.value.value !== void 0) {
+        return props.range ? coerceDatePickerRange(formItemControl.value.value) : coerceDatePickerSingle(formItemControl.value.value);
+      }
+      return localValue.value;
+    });
+    const isOpen = computed(() => props.open !== void 0 ? props.open : localOpen.value);
+    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(formDatePickerValue(props.range, next, null));
+    }
+    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) previewRange.value = null;
+    }
+    const displaySource = computed(
+      () => props.range ? previewRange.value ?? committed.value : committed.value
+    );
+    const displayValue = computed(
+      () => draftText.value ?? formatDatePickerDisplay(props.range, displaySource.value, props.format, localeCode.value)
+    );
+    const placeholderText = computed(
+      () => props.placeholder ?? (props.range ? labels.value.rangePlaceholder : labels.value.placeholder)
+    );
+    const minDate = computed(() => toCalendarDate(props.minDate ?? null));
+    const maxDate = computed(() => toCalendarDate(props.maxDate ?? null));
+    const rangeSelectingEnd = computed(
+      () => Boolean(props.range && previewRange.value?.[0] && !previewRange.value?.[1])
+    );
+    function isDateDisabled(date) {
+      return resolveDatePickerDisabled(date, {
+        minDate: minDate.value,
+        maxDate: maxDate.value,
+        disabledDate: props.disabledDate,
+        rangeStart: previewRange.value?.[0] ?? null,
+        rangeSelectingEnd: rangeSelectingEnd.value
+      });
+    }
+    const calendarValue = computed(() => {
+      if (!props.range) return committed.value;
+      return previewRange.value?.[0] ?? committed.value[0] ?? null;
+    });
+    const rangeHighlight = computed(
+      () => props.range ? previewRange.value ?? committed.value : void 0
+    );
+    const showClear = computed(
+      () => props.clearable && !effectiveDisabled.value && !isReadOnly.value && !isDatePickerValueEmpty(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 rootRef = ref(null);
+    const inputRef = ref(null);
+    const panelRef = ref(null);
+    const inputWrapperRef = ref(null);
+    const instanceId = useId();
+    const panelId = computed(() => `tiger-datepicker-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 });
+    watch(isOpen, (open) => {
+      if (!open) return;
+      nextTick(() => {
+        panelRef.value?.querySelector('[role="gridcell"][tabindex="0"]')?.focus();
+      });
+    });
+    function selectDay(date) {
+      const result = commitDatePickerDay({
+        range: props.range,
+        picked: date,
+        committed: committed.value,
+        preview: previewRange.value
+      });
+      writeCommitted(result.nextCommitted);
+      previewRange.value = result.nextPreview;
+      draftText.value = null;
+      if (result.close) setOpenSafe(false);
+    }
+    function selectToday() {
+      const today = props.now ?? /* @__PURE__ */ new Date();
+      if (isDateDisabled(today)) return;
+      const result = commitDatePickerToday(props.range, today);
+      writeCommitted(result.nextCommitted);
+      previewRange.value = null;
+      draftText.value = null;
+      if (result.close) setOpenSafe(false);
+    }
+    function applyShortcut(shortcut) {
+      const parsed = parseDatePickerShortcut(shortcut, props.range);
+      if (parsed == null) return;
+      writeCommitted(parsed);
+      previewRange.value = null;
+      draftText.value = null;
+      if (!props.range) setOpenSafe(false);
+    }
+    function clearValue() {
+      writeCommitted(emptyDatePickerValue(props.range));
+      previewRange.value = null;
+      draftText.value = null;
+      emit("clear");
+      inputRef.value?.focus();
+    }
+    function parseDraft() {
+      if (draftText.value == null) return;
+      const parsed = parseTypedDatePickerValue(draftText.value, props.format, props.range);
+      writeCommitted(
+        props.range ? parsed ?? [null, null] : parsed ?? null
+      );
+      draftText.value = null;
+    }
+    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.preventDefault();
+        if (isOpen.value || draftText.value != null) parseDraft();
+        else setOpenSafe(true);
+      }
+    }
+    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.clearDate,
+          onMousedown: (event) => event.preventDefault(),
+          onClick: clearValue
+        },
+        [filledIcon(closeSolidIcon20PathD, "w-4 h-4")]
+      ) : null;
+      const calendarBtn = h(
+        "button",
+        {
+          type: "button",
+          class: getInputPasswordToggleClasses(effectiveSize.value, { offsetSlots: 0 }),
+          disabled: effectiveDisabled.value || isReadOnly.value,
+          "aria-label": labels.value.toggleCalendar,
+          onMousedown: (event) => event.preventDefault(),
+          onClick: () => setOpenSafe(!isOpen.value)
+        },
+        [filledIcon(calendarSolidIcon20PathD, "w-5 h-5")]
+      );
+      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.calendar,
+            class: classNames(
+              datePickerPanelClasses,
+              overlay.floatingClasses.value,
+              props.dropdownClassName
+            ),
+            style: overlay.floatingStyles.value,
+            "data-positioned": overlay.positioned.value,
+            "data-tiger": "datepicker-panel",
+            onFocusout: handleFocusOut
+          },
+          [
+            h(Calendar, {
+              modelValue: calendarValue.value,
+              now: props.now,
+              locale: mergedLocale.value,
+              weekStartsOn: weekStartsOn.value,
+              disabledDate: isDateDisabled,
+              rangeValue: rangeHighlight.value,
+              onChange: selectDay
+            }),
+            props.shortcuts?.length ? h(
+              "div",
+              { class: datePickerShortcutListClasses },
+              props.shortcuts.map(
+                (shortcut) => h(
+                  "button",
+                  {
+                    key: shortcut.label,
+                    type: "button",
+                    class: datePickerShortcutButtonClasses,
+                    onClick: () => applyShortcut(shortcut)
+                  },
+                  shortcut.label
+                )
+              )
+            ) : null,
+            h("div", { class: datePickerFooterClasses }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: datePickerFooterButtonClasses,
+                  onClick: selectToday
+                },
+                labels.value.today
+              ),
+              props.range ? h(
+                "button",
+                {
+                  type: "button",
+                  class: datePickerFooterButtonClasses,
+                  onClick: () => setOpenSafe(false)
+                },
+                labels.value.ok
+              ) : null
+            ])
+          ]
+        )
+      ] : null;
+      const { class: _class, style: attrStyle, ...restAttrs } = attrRecord;
+      return h(
+        "div",
+        {
+          ...restAttrs,
+          ref: rootRef,
+          class: classNames(
+            "relative inline-block w-full",
+            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, calendarBtn]
+          ),
+          renderVueOverlayTeleport(panel, overlay.target.value)
+        ]
+      );
+    };
+  }
+});
+var DatePicker_default = DatePicker;
+
+export {
+  DatePicker,
+  DatePicker_default
+};

package/dist/chunk-4KIZXFFG.mjs

@@ -0,0 +1,155 @@
+import {
+  BUTTON_GROUP_INJECTION_KEY
+} from "./chunk-4QMHNTUU.mjs";
+
+// src/components/Button.ts
+import { defineComponent, computed, h, inject } from "vue";
+import {
+  composeComponentClasses,
+  mergeStyleValues,
+  resolveButtonClasses,
+  resolveButtonHtmlType,
+  resolveButtonIconPlacement,
+  getButtonIconSlotClasses,
+  getButtonSpinnerClasses,
+  getSpinnerSVG,
+  normalizeSvgAttrs,
+  omitUnsupportedColorProp,
+  warnMissingAccessibleName,
+  TIGER_CHROME_ATTR
+} from "@expcat/tigercat-core";
+function hasSlotContent(nodes) {
+  if (nodes == null || nodes === false) return false;
+  if (Array.isArray(nodes)) return nodes.some(hasSlotContent);
+  return true;
+}
+var createLoadingSpinner = (size) => {
+  const spinnerSvg = getSpinnerSVG("spinner");
+  return h(
+    "svg",
+    {
+      class: getButtonSpinnerClasses(size),
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: spinnerSvg.viewBox,
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    spinnerSvg.elements.map((el) => h(el.type, normalizeSvgAttrs(el.attrs)))
+  );
+};
+var Button = defineComponent({
+  name: "TigerButton",
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String,
+      default: "primary"
+    },
+    size: {
+      type: String,
+      default: void 0
+    },
+    disabled: Boolean,
+    loading: Boolean,
+    block: Boolean,
+    iconPosition: {
+      type: String,
+      default: "start"
+    },
+    htmlType: {
+      type: String,
+      default: void 0
+    },
+    type: {
+      type: String,
+      default: void 0
+    },
+    danger: Boolean,
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["click"],
+  setup(props, { slots, emit, attrs }) {
+    const group = inject(BUTTON_GROUP_INJECTION_KEY, null);
+    const resolvedSize = computed(() => props.size ?? group?.size ?? "md");
+    const buttonClasses = computed(
+      () => composeComponentClasses(
+        resolveButtonClasses({
+          variant: props.variant,
+          danger: props.danger,
+          size: resolvedSize.value,
+          disabled: props.disabled,
+          loading: props.loading,
+          block: props.block,
+          className: props.className
+        }),
+        attrs.class
+      )
+    );
+    const mergedStyle = computed(() => mergeStyleValues(attrs.style, props.style));
+    return () => {
+      const restAttrs = omitUnsupportedColorProp("Button", {
+        ...attrs
+      });
+      const {
+        class: _class,
+        style: _style,
+        type: attrType,
+        onClick: _onClick,
+        ...domAttrs
+      } = restAttrs;
+      const htmlType = resolveButtonHtmlType(props.htmlType, props.type ?? attrType);
+      const label = slots.default?.();
+      const hasLabel = hasSlotContent(label);
+      warnMissingAccessibleName("Button", {
+        text: hasLabel ? "named" : "",
+        ariaLabel: domAttrs["aria-label"],
+        ariaLabelledby: domAttrs["aria-labelledby"]
+      });
+      const placement = resolveButtonIconPlacement(props.iconPosition);
+      const slotClass = getButtonIconSlotClasses(placement, hasLabel);
+      const loadingNode = props.loading ? h(
+        "span",
+        { class: slotClass || void 0, "aria-hidden": "true" },
+        slots["loading-icon"] ? slots["loading-icon"]() : createLoadingSpinner(resolvedSize.value)
+      ) : null;
+      const iconNode = !props.loading && slots.icon ? h("span", { class: slotClass || void 0, "aria-hidden": "true" }, slots.icon()) : null;
+      const chrome = loadingNode ?? iconNode;
+      const children = placement === "end" ? [label, chrome] : [chrome, label];
+      return h(
+        "button",
+        {
+          ...domAttrs,
+          [TIGER_CHROME_ATTR]: "",
+          class: buttonClasses.value,
+          style: mergedStyle.value,
+          "aria-busy": attrs["aria-busy"] ?? (props.loading ? "true" : void 0),
+          "aria-disabled": attrs["aria-disabled"] ?? (props.disabled ? "true" : void 0),
+          disabled: props.disabled ? true : void 0,
+          type: htmlType,
+          onClick: (event) => {
+            if (props.disabled || props.loading) {
+              event.preventDefault();
+              return;
+            }
+            emit("click", event);
+          }
+        },
+        children
+      );
+    };
+  }
+});
+var Button_default = Button;
+
+export {
+  Button,
+  Button_default
+};