@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-XNBR5ETD.mjs

@@ -0,0 +1,380 @@
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/CronEditor.ts
+import { computed, defineComponent, h, inject, reactive, ref, watch } from "vue";
+import {
+  applyCronFieldMode,
+  buildCronFieldValueFromDraft,
+  classNames,
+  coerceClassValue,
+  cronEditorBaseClasses,
+  cronEditorErrorClasses,
+  cronEditorFieldClasses,
+  cronEditorFieldsClasses,
+  cronEditorLabelClasses,
+  cronFieldMetas,
+  cronFieldModes,
+  formatCronControlLabel,
+  getCronEditorControlClasses,
+  getCronEditorLabels,
+  getCronExpressionIssue,
+  getCronFieldIssue,
+  getCronFieldValue,
+  getCronModeLabels,
+  getDefaultCronPresets,
+  isCronExpressionEmpty,
+  isCronFieldCountValid,
+  markFormItemGroupControl,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  parseOptionalInt,
+  seedCronFieldDraft,
+  updateCronExpressionField,
+  validateCronExpressionWithLabels
+} from "@expcat/tigercat-core";
+function seedAllDrafts(expression, sticky) {
+  const ready = isCronFieldCountValid(expression);
+  return Object.fromEntries(
+    cronFieldMetas.map((meta) => {
+      const raw = ready ? getCronFieldValue(expression, meta.key) ?? "*" : "*";
+      return [meta.key, seedCronFieldDraft(raw, sticky[meta.key])];
+    })
+  );
+}
+var CronEditor = markFormItemGroupControl(
+  defineComponent({
+    name: "TigerCronEditor",
+    inheritAttrs: false,
+    props: {
+      modelValue: { type: String, default: void 0 },
+      defaultValue: { type: String, default: void 0 },
+      disabled: { type: Boolean, default: false },
+      readonly: { type: Boolean, default: false },
+      size: { type: String, default: "md" },
+      presets: { type: Array, default: void 0 },
+      ariaLabel: { type: String, default: void 0 },
+      locale: { type: Object, default: void 0 },
+      labels: { type: Object, default: void 0 },
+      name: String,
+      id: String,
+      status: { type: String, default: void 0 },
+      className: String
+    },
+    emits: ["update:modelValue", "change", "input", "validate", "blur"],
+    setup(props, { attrs, emit, expose }) {
+      const config = useTigerConfig();
+      const formItemControl = inject(
+        FORM_ITEM_CONTROL_INJECTION_KEY,
+        null
+      );
+      const innerValue = ref(props.defaultValue ?? "");
+      const expressionInput = ref(null);
+      const stickyModes = reactive({});
+      const drafts = reactive(
+        seedAllDrafts(props.modelValue ?? props.defaultValue ?? "", stickyModes)
+      );
+      const instanceId = `tiger-cron-${Math.random().toString(36).slice(2, 9)}`;
+      watch(
+        () => props.modelValue,
+        (value) => {
+          if (value !== void 0) innerValue.value = value;
+        }
+      );
+      const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+      const labels = computed(() => getCronEditorLabels(mergedLocale.value, props.labels));
+      const fieldLabels = computed(() => ({
+        minute: labels.value.minuteLabel,
+        hour: labels.value.hourLabel,
+        dayOfMonth: labels.value.dayOfMonthLabel,
+        month: labels.value.monthLabel,
+        dayOfWeek: labels.value.dayOfWeekLabel
+      }));
+      const localizedMetas = computed(
+        () => cronFieldMetas.map((meta) => ({ ...meta, label: fieldLabels.value[meta.key] }))
+      );
+      const resolvedPresets = computed(
+        () => props.presets === void 0 ? getDefaultCronPresets(labels.value) : props.presets
+      );
+      const modeLabels = computed(() => getCronModeLabels(labels.value));
+      const effectiveDisabled = computed(
+        () => props.disabled || (formItemControl?.disabled.value ?? false)
+      );
+      const inactive = computed(() => effectiveDisabled.value || props.readonly);
+      const status = computed(() => props.status ?? formItemControl?.status.value ?? "default");
+      const effectiveId = computed(() => props.id ?? formItemControl?.id.value);
+      const effectiveName = computed(() => props.name ?? formItemControl?.name.value);
+      const expression = computed(() => {
+        if (props.modelValue !== void 0) return props.modelValue;
+        if (formItemControl?.value.value !== void 0) {
+          return String(formItemControl.value.value ?? "");
+        }
+        return innerValue.value;
+      });
+      watch(
+        expression,
+        (next) => {
+          const seeded = seedAllDrafts(next, stickyModes);
+          for (const meta of cronFieldMetas) drafts[meta.key] = seeded[meta.key];
+        },
+        { immediate: true }
+      );
+      const validation = computed(
+        () => validateCronExpressionWithLabels(expression.value, labels.value, fieldLabels.value)
+      );
+      const fieldsReady = computed(() => isCronFieldCountValid(expression.value));
+      function writeValue(nextValue) {
+        const nextValidation = validateCronExpressionWithLabels(
+          nextValue,
+          labels.value,
+          fieldLabels.value
+        );
+        if (props.modelValue === void 0) innerValue.value = nextValue;
+        emit("update:modelValue", nextValue);
+        emit("input", nextValue);
+        emit("change", nextValue, nextValidation);
+        emit("validate", nextValidation);
+        formItemControl?.onChange(nextValue);
+      }
+      function handleRawExpressionChange(nextValue) {
+        for (const key of Object.keys(stickyModes)) {
+          delete stickyModes[key];
+        }
+        writeValue(nextValue);
+      }
+      function writeField(meta, draft) {
+        const raw = buildCronFieldValueFromDraft(draft, meta);
+        if (isCronExpressionEmpty(expression.value)) {
+          const parts = ["*", "*", "*", "*", "*"];
+          const index = cronFieldMetas.findIndex((item) => item.key === meta.key);
+          parts[index] = raw;
+          writeValue(parts.join(" "));
+          return;
+        }
+        const updated = updateCronExpressionField(expression.value, meta.key, raw);
+        if (updated == null) return;
+        writeValue(updated);
+      }
+      function handleModeChange(meta, mode) {
+        stickyModes[meta.key] = mode;
+        const next = applyCronFieldMode(drafts[meta.key], mode, meta);
+        drafts[meta.key] = next;
+        writeField(meta, next);
+      }
+      function handleFocusout(event) {
+        const next = event.relatedTarget;
+        const root = event.currentTarget?.closest("[data-tiger-croneditor]");
+        if (root && next && root.contains(next)) return;
+        formItemControl?.onBlur();
+        emit("blur", event);
+      }
+      expose({
+        focus: () => expressionInput.value?.focus()
+      });
+      function renderFieldControl(meta, draft, invalid) {
+        if (draft.mode === "any") return void 0;
+        if (draft.mode === "every") {
+          return h("input", {
+            type: "text",
+            inputmode: "numeric",
+            class: getCronEditorControlClasses(props.size, invalid),
+            value: draft.stepText,
+            disabled: inactive.value || !fieldsReady.value,
+            "aria-label": formatCronControlLabel(labels.value.stepAriaLabel, meta.label),
+            onInput: (event) => {
+              const text = event.target.value;
+              drafts[meta.key] = { ...draft, stepText: text, mode: "every" };
+              if (parseOptionalInt(text) != null) writeField(meta, drafts[meta.key]);
+            }
+          });
+        }
+        if (draft.mode === "specific") {
+          return h("input", {
+            type: "text",
+            inputmode: "numeric",
+            class: getCronEditorControlClasses(props.size, invalid),
+            value: draft.valueText,
+            disabled: inactive.value || !fieldsReady.value,
+            "aria-label": formatCronControlLabel(labels.value.valueAriaLabel, meta.label),
+            onInput: (event) => {
+              const text = event.target.value;
+              drafts[meta.key] = { ...draft, valueText: text, mode: "specific" };
+              if (parseOptionalInt(text) != null) writeField(meta, drafts[meta.key]);
+            }
+          });
+        }
+        if (draft.mode === "range") {
+          return h("div", { class: "grid grid-cols-2 gap-1" }, [
+            h("input", {
+              type: "text",
+              inputmode: "numeric",
+              class: getCronEditorControlClasses(props.size, invalid),
+              value: draft.startText,
+              disabled: inactive.value || !fieldsReady.value,
+              "aria-label": formatCronControlLabel(labels.value.rangeStartAriaLabel, meta.label),
+              onInput: (event) => {
+                const text = event.target.value;
+                drafts[meta.key] = { ...draft, startText: text, mode: "range" };
+                if (parseOptionalInt(text) != null && parseOptionalInt(drafts[meta.key].endText) != null) {
+                  writeField(meta, drafts[meta.key]);
+                }
+              }
+            }),
+            h("input", {
+              type: "text",
+              inputmode: "numeric",
+              class: getCronEditorControlClasses(props.size, invalid),
+              value: draft.endText,
+              disabled: inactive.value || !fieldsReady.value,
+              "aria-label": formatCronControlLabel(labels.value.rangeEndAriaLabel, meta.label),
+              onInput: (event) => {
+                const text = event.target.value;
+                drafts[meta.key] = { ...draft, endText: text, mode: "range" };
+                if (parseOptionalInt(drafts[meta.key].startText) != null && parseOptionalInt(text) != null) {
+                  writeField(meta, drafts[meta.key]);
+                }
+              }
+            })
+          ]);
+        }
+        return h("input", {
+          type: "text",
+          class: getCronEditorControlClasses(props.size, invalid),
+          value: draft.raw,
+          disabled: inactive.value || !fieldsReady.value,
+          "aria-label": formatCronControlLabel(labels.value.customValueAriaLabel, meta.label),
+          onInput: (event) => {
+            const text = event.target.value;
+            drafts[meta.key] = { ...draft, raw: text, mode: "custom" };
+            writeField(meta, drafts[meta.key]);
+          }
+        });
+      }
+      return () => {
+        const attrRecord = attrs;
+        const labelledby = typeof attrRecord["aria-labelledby"] === "string" && attrRecord["aria-labelledby"].trim() ? attrRecord["aria-labelledby"] : formItemControl?.labelId.value;
+        const describedBy = mergeAriaDescribedBy(
+          typeof attrRecord["aria-describedby"] === "string" ? attrRecord["aria-describedby"] : void 0,
+          formItemControl?.describedBy.value
+        );
+        const expressionIssue = getCronExpressionIssue(validation.value);
+        const expressionInvalid = Boolean(expressionIssue) && !isCronExpressionEmpty(expression.value);
+        const errorId = `${instanceId}-error`;
+        const groupName = props.ariaLabel ?? labels.value.ariaLabel;
+        return h(
+          "div",
+          {
+            class: classNames(
+              cronEditorBaseClasses,
+              props.className,
+              coerceClassValue(attrs.class)
+            ),
+            role: "group",
+            "data-tiger-croneditor": "",
+            "aria-label": labelledby ? void 0 : groupName,
+            "aria-labelledby": labelledby,
+            "aria-describedby": describedBy,
+            "aria-invalid": status.value === "error" || expressionInvalid ? true : void 0,
+            onFocusout: handleFocusout
+          },
+          [
+            h("div", { class: "flex flex-col gap-2 sm:flex-row" }, [
+              h("input", {
+                ref: expressionInput,
+                type: "text",
+                id: effectiveId.value,
+                name: effectiveName.value,
+                class: classNames(
+                  getCronEditorControlClasses(props.size, expressionInvalid),
+                  "flex-1"
+                ),
+                value: expression.value,
+                disabled: effectiveDisabled.value,
+                readonly: props.readonly,
+                "aria-label": labels.value.expressionAriaLabel,
+                "aria-invalid": expressionInvalid || void 0,
+                "aria-describedby": expressionIssue ? errorId : describedBy,
+                onInput: (event) => handleRawExpressionChange(event.target.value)
+              }),
+              resolvedPresets.value.length > 0 ? h(
+                "select",
+                {
+                  class: getCronEditorControlClasses(props.size),
+                  value: resolvedPresets.value.some(
+                    (preset) => preset.value === expression.value
+                  ) ? expression.value : "",
+                  disabled: inactive.value,
+                  "aria-label": labels.value.presetAriaLabel,
+                  onChange: (event) => {
+                    const nextValue = event.target.value;
+                    if (nextValue) {
+                      for (const key of Object.keys(stickyModes)) {
+                        delete stickyModes[key];
+                      }
+                      writeValue(nextValue);
+                    }
+                  }
+                },
+                [
+                  h("option", { value: "" }, labels.value.presetPlaceholder),
+                  ...resolvedPresets.value.map(
+                    (preset) => h("option", { key: preset.value, value: preset.value }, preset.label)
+                  )
+                ]
+              ) : void 0
+            ]),
+            expressionIssue ? h(
+              "div",
+              { id: errorId, class: cronEditorErrorClasses, role: "alert" },
+              expressionIssue.message
+            ) : void 0,
+            h(
+              "div",
+              { class: cronEditorFieldsClasses },
+              localizedMetas.value.map((meta) => {
+                const draft = drafts[meta.key];
+                const issue = getCronFieldIssue(validation.value, meta.key);
+                const modeId = `${instanceId}-${meta.key}-mode`;
+                const fieldErrorId = `${instanceId}-${meta.key}-error`;
+                return h("div", { key: meta.key, class: cronEditorFieldClasses }, [
+                  h("label", { class: cronEditorLabelClasses, for: modeId }, meta.label),
+                  h(
+                    "select",
+                    {
+                      id: modeId,
+                      class: getCronEditorControlClasses(props.size, !!issue),
+                      value: draft.mode,
+                      disabled: inactive.value || !fieldsReady.value,
+                      "aria-invalid": issue ? true : void 0,
+                      "aria-describedby": issue ? fieldErrorId : void 0,
+                      "aria-label": formatCronControlLabel(labels.value.modeAriaLabel, meta.label),
+                      onChange: (event) => handleModeChange(
+                        meta,
+                        event.target.value
+                      )
+                    },
+                    cronFieldModes.map(
+                      (mode) => h("option", { key: mode, value: mode }, modeLabels.value[mode])
+                    )
+                  ),
+                  renderFieldControl(meta, draft, !!issue),
+                  issue ? h("div", { id: fieldErrorId, class: cronEditorErrorClasses }, issue.message) : void 0
+                ]);
+              })
+            )
+          ]
+        );
+      };
+    }
+  })
+);
+var CronEditor_default = CronEditor;
+
+export {
+  CronEditor,
+  CronEditor_default
+};

package/dist/{chunk-PWWWACHC.mjs → chunk-XOGS6MRO.mjs}

@@ -2,16 +2,19 @@ import {
   Dropdown,
   DropdownItem,
   DropdownMenu
-} from "./chunk-PJQTRDIG.mjs";
+} from "./chunk-IWIRPC5E.mjs";
+import {
+  flattenSlotVNodes
+} from "./chunk-FEVDV3I6.mjs";
 import {
   Button
-} from "./chunk-YZBQ6IR7.mjs";
+} from "./chunk-4KIZXFFG.mjs";
 import {
-  ButtonGroup
-} from "./chunk-Z2ZECCGD.mjs";
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/SplitButton.ts
-import { Comment, Fragment, defineComponent, h } from "vue";
+import { defineComponent, h } from "vue";
 import {
   DROPDOWN_CHEVRON_PATH,
   composeComponentClasses,
@@ -20,24 +23,14 @@ import {
   getSplitButtonRootClasses,
   getSplitButtonTriggerClasses,
   mergeStyleValues,
+  splitButtonDropdownClasses,
+  resolveLocaleText,
   resolveSplitButtonSize,
   resolveSplitButtonTriggerAriaLabel,
   resolveSplitButtonVariant
 } from "@expcat/tigercat-core";
-function flattenVNodes(nodes) {
-  const out = [];
-  for (const node of nodes ?? []) {
-    if (!node || node.type === Comment) continue;
-    if (node.type === Fragment && Array.isArray(node.children)) {
-      out.push(...flattenVNodes(node.children));
-      continue;
-    }
-    out.push(node);
-  }
-  return out;
-}
 function wrapMenu(nodes) {
-  const flattened = flattenVNodes(nodes);
+  const flattened = flattenSlotVNodes(nodes);
   if (flattened.length === 0) return null;
   const existing = flattened.find((node) => node.type === DropdownMenu);
   if (existing) return existing;
@@ -47,7 +40,7 @@ function partitionDefaultSlot(nodes) {
   const primary = [];
   const menuItems = [];
   let menu = null;
-  for (const node of flattenVNodes(nodes)) {
+  for (const node of flattenSlotVNodes(nodes)) {
     if (node.type === DropdownMenu) {
       menu = node;
       continue;
@@ -63,11 +56,11 @@ function partitionDefaultSlot(nodes) {
   }
   return { primary, menu };
 }
-function createChevron(open) {
+function createChevron(open, size) {
   return h(
     "svg",
     {
-      class: getDropdownChevronClasses(open),
+      class: getDropdownChevronClasses(open, { tone: "current", size }),
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -84,119 +77,62 @@ var SplitButton = defineComponent({
   name: "TigerSplitButton",
   inheritAttrs: false,
   props: {
-    /**
-     * Visual variant applied to the primary action and the menu trigger
-     * @default 'primary'
-     */
     variant: {
       type: String,
       default: "primary"
     },
-    /**
-     * Size applied to the primary action and the menu trigger
-     * @default 'md'
-     */
     size: {
       type: String,
       default: "md"
     },
-    /**
-     * Whether both the primary action and the menu trigger are disabled
-     */
     disabled: Boolean,
-    /**
-     * Whether the primary action is in a loading state. Also disables the menu trigger.
-     */
     loading: Boolean,
-    /**
-     * Whether to apply danger/destructive styling to both buttons
-     */
     danger: Boolean,
-    /**
-     * Whether the split control should take the full width of its parent
-     */
     block: Boolean,
-    /**
-     * HTML button type for the primary action
-     * @default 'button'
-     */
     htmlType: {
       type: String,
-      default: "button"
+      default: void 0
     },
-    /**
-     * Position of the icon relative to the primary action text
-     * @default 'left'
-     */
     iconPosition: {
       type: String,
       default: "left"
     },
-    /**
-     * Whether the menu is open (controlled mode)
-     */
     open: {
       type: Boolean,
       default: void 0
     },
-    /**
-     * Default open state (uncontrolled mode)
-     * @default false
-     */
     defaultOpen: {
       type: Boolean,
       default: false
     },
-    /**
-     * Whether to close the menu when a menu item is clicked
-     * @default true
-     */
     closeOnClick: {
       type: Boolean,
       default: true
     },
-    /**
-     * Render the menu into document.body (Teleport)
-     * @default true
-     */
     portal: {
       type: Boolean,
       default: true
     },
-    /**
-     * Accessible name for the chevron menu trigger
-     * @default 'More options'
-     */
     triggerAriaLabel: {
       type: String,
       default: void 0
     },
-    /**
-     * Dropdown placement relative to the chevron trigger
-     * @default 'bottom-end'
-     */
+    primaryAriaLabel: {
+      type: String,
+      default: void 0
+    },
     placement: {
       type: String,
       default: "bottom-end"
     },
-    /**
-     * Offset distance from the chevron trigger
-     * @default 4
-     */
     offset: {
       type: Number,
       default: 4
     },
-    /**
-     * Additional CSS classes
-     */
     className: {
       type: String,
       default: void 0
     },
-    /**
-     * Inline styles
-     */
     style: {
       type: Object,
       default: void 0
@@ -204,17 +140,22 @@ var SplitButton = defineComponent({
   },
   emits: ["click", "update:open", "open-change"],
   setup(props, { slots, emit, attrs }) {
+    const config = useTigerConfig();
     return () => {
       const attrsRecord = attrs;
       const {
         class: _class,
         style: _style,
+        type: attrType,
         ...restAttrs
       } = attrsRecord;
       const variant = resolveSplitButtonVariant(props.variant);
       const size = resolveSplitButtonSize(props.size);
-      const isDisabled = props.disabled || props.loading;
-      const triggerLabel = resolveSplitButtonTriggerAriaLabel(props.triggerAriaLabel);
+      const triggerLabel = resolveSplitButtonTriggerAriaLabel(
+        props.triggerAriaLabel,
+        resolveLocaleText("More options", config.value.locale?.common?.moreOptionsText)
+      );
+      const htmlType = props.htmlType ?? attrType ?? "button";
       const partitioned = partitionDefaultSlot(slots.default?.());
       const menuNode = wrapMenu(slots.menu?.()) ?? partitioned.menu;
       const primaryButton = h(
@@ -225,9 +166,10 @@ var SplitButton = defineComponent({
           disabled: props.disabled,
           loading: props.loading,
           danger: props.danger,
-          htmlType: props.htmlType,
+          htmlType,
           iconPosition: props.iconPosition,
           className: getSplitButtonPrimaryClasses({ block: props.block }),
+          "aria-label": props.primaryAriaLabel,
           "data-split-button-primary": "",
           onClick: (event) => emit("click", event)
         },
@@ -237,20 +179,28 @@ var SplitButton = defineComponent({
           "loading-icon": slots["loading-icon"]
         }
       );
-      const dropdown = h(
+      const dropdown = menuNode ? h(
         Dropdown,
         {
+          className: splitButtonDropdownClasses,
           trigger: "click",
           showArrow: false,
-          disabled: isDisabled,
+          asChild: true,
+          disabled: props.disabled,
           open: props.open,
           defaultOpen: props.defaultOpen,
           closeOnClick: props.closeOnClick,
           portal: props.portal,
           placement: props.placement,
           offset: props.offset,
-          "onUpdate:open": (visible) => emit("update:open", visible),
-          onOpenChange: (visible) => emit("open-change", visible)
+          "onUpdate:open": (visible) => {
+            if (props.loading) return;
+            emit("update:open", visible);
+          },
+          onOpenChange: (visible) => {
+            if (props.loading) return;
+            emit("open-change", visible);
+          }
         },
         {
           trigger: ({ open }) => h(
@@ -258,28 +208,29 @@ var SplitButton = defineComponent({
             {
               variant,
               size,
-              disabled: isDisabled,
+              disabled: props.disabled,
               danger: props.danger,
               htmlType: "button",
               className: getSplitButtonTriggerClasses({ size }),
               "aria-label": triggerLabel,
-              "aria-haspopup": "menu",
-              "aria-expanded": open,
-              "data-split-button-trigger": ""
+              "aria-disabled": props.loading || void 0,
+              "data-split-button-trigger": "",
+              onClick: (event) => {
+                if (props.loading) event.preventDefault();
+              }
             },
             {
-              default: () => slots.trigger?.({ open }) ?? createChevron(open)
+              default: () => slots.trigger?.({ open }) ?? createChevron(open, size)
             }
           ),
           default: () => menuNode
         }
-      );
+      ) : null;
       return h(
-        ButtonGroup,
+        "div",
         {
           ...restAttrs,
-          size,
-          className: composeComponentClasses(
+          class: composeComponentClasses(
             getSplitButtonRootClasses({
               block: props.block,
               className: props.className
@@ -287,9 +238,10 @@ var SplitButton = defineComponent({
             attrsRecord.class
           ),
           style: mergeStyleValues(attrsRecord.style, props.style),
+          role: "group",
           "data-split-button": ""
         },
-        { default: () => [primaryButton, dropdown] }
+        [primaryButton, dropdown]
       );
     };
   }