@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/{chunk-BGGHSTMP.mjs → chunk-TZRNMUWB.mjs}

@@ -1,15 +1,24 @@
 import {
   createStatusIcon,
   createStatusIconWithLoading
-} from "./chunk-2TNZ4JNT.mjs";
+} from "./chunk-5VSSB4QF.mjs";
+import {
+  renderVueBodyTeleport
+} from "./chunk-VFRB5L7W.mjs";
+import {
+  getGlobalTigerLocale,
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/MessageContainer.ts
-import { computed, defineComponent, h, Teleport, TransitionGroup } from "vue";
+import { computed, defineComponent, h } from "vue";
 import {
   classNames,
   defaultMessageThemeColors,
+  getMessageCloseAriaLabel,
   getMessageIconPath,
   getMessageTypeClasses,
+  getToastItemRole,
   messageBaseClasses,
   messageCloseButtonClasses,
   messageCloseIconPath,
@@ -19,12 +28,6 @@ import {
   messageLoadingSpinnerClasses,
   messagePositionClasses
 } from "@expcat/tigercat-core";
-var MESSAGE_CONTAINER_ID = "tiger-message-container";
-var MESSAGE_CLOSE_ARIA_LABEL = "Close message";
-var IS_TEST_ENV = (() => {
-  const proc = globalThis.process;
-  return typeof proc !== "undefined" && proc.env?.NODE_ENV === "test";
-})();
 var MessageContainer = /* @__PURE__ */ defineComponent({
   name: "TigerMessageContainer",
   props: {
@@ -36,12 +39,18 @@ var MessageContainer = /* @__PURE__ */ defineComponent({
       type: Array,
       default: () => []
     },
-    onClose: Function
+    portal: {
+      type: Boolean,
+      default: true
+    }
   },
-  setup(props) {
-    const containerClasses = computed(() => {
-      return classNames(messageContainerBaseClasses, messagePositionClasses[props.position]);
-    });
+  emits: ["close"],
+  setup(props, { emit }) {
+    const config = useTigerConfig();
+    const locale = computed(() => config.value.locale ?? getGlobalTigerLocale());
+    const containerClasses = computed(
+      () => classNames(messageContainerBaseClasses, messagePositionClasses[props.position])
+    );
     const renderMessageItem = (message) => {
       const colorScheme = getMessageTypeClasses(message.type, defaultMessageThemeColors);
       const messageClasses = classNames(
@@ -53,14 +62,15 @@ var MessageContainer = /* @__PURE__ */ defineComponent({
       );
       const iconPath = message.icon || getMessageIconPath(message.type);
       const iconClass = classNames(messageIconClasses, colorScheme.icon);
-      const a11yRole = message.type === "error" ? "alert" : "status";
-      const ariaLive = message.type === "error" ? "assertive" : "polite";
+      const a11yRole = getToastItemRole(message.type);
+      const closeLabel = getMessageCloseAriaLabel(locale.value, message.closeAriaLabel);
       const children = [
         createStatusIconWithLoading(
           iconPath,
           iconClass,
           message.type === "loading",
-          messageLoadingSpinnerClasses
+          messageLoadingSpinnerClasses,
+          { "aria-hidden": "true", focusable: "false" }
         ),
         h("div", { class: messageContentClasses }, message.content)
       ];
@@ -70,11 +80,14 @@ var MessageContainer = /* @__PURE__ */ defineComponent({
             "button",
             {
               class: messageCloseButtonClasses,
-              onClick: () => props.onClose?.(message.id),
-              "aria-label": message.closeAriaLabel ?? MESSAGE_CLOSE_ARIA_LABEL,
+              onClick: () => emit("close", message.id),
+              "aria-label": closeLabel,
               type: "button"
             },
-            createStatusIcon(messageCloseIconPath, "w-4 h-4")
+            createStatusIcon(messageCloseIconPath, "w-4 h-4", {
+              "aria-hidden": "true",
+              focusable: "false"
+            })
           )
         );
       }
@@ -84,8 +97,6 @@ var MessageContainer = /* @__PURE__ */ defineComponent({
           key: message.id,
           class: messageClasses,
           role: a11yRole,
-          "aria-live": ariaLive,
-          "aria-atomic": "true",
           "aria-busy": message.type === "loading" ? "true" : void 0,
           "data-tiger-message": "",
           "data-tiger-message-type": message.type,
@@ -94,22 +105,18 @@ var MessageContainer = /* @__PURE__ */ defineComponent({
         children
       );
     };
-    return () => h(
-      Teleport,
-      { to: "body" },
-      h(
+    return () => {
+      const node = h(
         "div",
         {
           class: containerClasses.value,
-          id: props.position === "top" ? MESSAGE_CONTAINER_ID : `${MESSAGE_CONTAINER_ID}-${props.position}`,
-          "aria-live": "polite",
-          "aria-relevant": "additions",
           "data-tiger-message-position": props.position,
           "data-tiger-message-container": ""
         },
-        IS_TEST_ENV ? props.messages.map(renderMessageItem) : h(TransitionGroup, { name: "message" }, () => props.messages.map(renderMessageItem))
-      )
-    );
+        props.messages.map(renderMessageItem)
+      );
+      return props.portal ? renderVueBodyTeleport(node) : node;
+    };
   }
 });
 var MessageContainer_default = MessageContainer;

package/dist/chunk-UDYEWEBD.mjs

@@ -0,0 +1,351 @@
+import {
+  Steps
+} from "./chunk-7G6YBK6O.mjs";
+import {
+  useFormContext
+} from "./chunk-ONSDH4KJ.mjs";
+import {
+  Icon
+} from "./chunk-OGKNRXUA.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/FormWizard.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  h,
+  useId
+} from "vue";
+import {
+  canClickWizardStep,
+  classNames,
+  clampStepIndex,
+  coerceClassValue,
+  createAsyncLock,
+  findNextUnskippedStep,
+  getFormWizardActionsClasses,
+  getFormWizardBodyClasses,
+  getFormWizardHeaderClasses,
+  getFormWizardLabels,
+  getFormWizardWrapperClasses,
+  isLastAvailableStep,
+  isStepSkipped,
+  mergeStyleValues,
+  mergeTigerLocale,
+  resolveLocaleText,
+  runWizardAdvanceGate
+} from "@expcat/tigercat-core";
+var FormWizard = defineComponent({
+  name: "TigerFormWizard",
+  inheritAttrs: false,
+  props: {
+    steps: {
+      type: Array,
+      default: () => []
+    },
+    current: {
+      type: Number,
+      default: void 0
+    },
+    defaultCurrent: {
+      type: Number,
+      default: 0
+    },
+    clickable: {
+      type: Boolean,
+      default: false
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    size: {
+      type: String,
+      default: "default"
+    },
+    simple: {
+      type: Boolean,
+      default: false
+    },
+    showSteps: {
+      type: Boolean,
+      default: true
+    },
+    showActions: {
+      type: Boolean,
+      default: true
+    },
+    prevText: {
+      type: String,
+      default: void 0
+    },
+    nextText: {
+      type: String,
+      default: void 0
+    },
+    finishText: {
+      type: String,
+      default: void 0
+    },
+    beforeNext: {
+      type: Function,
+      default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    labels: {
+      type: Object,
+      default: void 0
+    },
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    autoSave: {
+      type: Function,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["change", "update:current", "finish"],
+  setup(props, { slots, attrs, emit, expose }) {
+    const config = useTigerConfig();
+    const formContext = useFormContext();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getFormWizardLabels(mergedLocale.value, props.labels));
+    const innerCurrent = ref(clampStepIndex(props.defaultCurrent ?? 0, props.steps.length));
+    const errorMessage = ref();
+    const pending = ref(false);
+    const lock = createAsyncLock();
+    const titleId = useId();
+    const totalCount = computed(() => props.steps.length);
+    const currentIndex = computed(
+      () => clampStepIndex(
+        props.current !== void 0 ? props.current : innerCurrent.value,
+        totalCount.value
+      )
+    );
+    const currentStep = computed(() => props.steps[currentIndex.value]);
+    const isLast = computed(() => isLastAvailableStep(currentIndex.value, props.steps));
+    const isFirst = computed(() => {
+      if (currentIndex.value <= 0) return true;
+      return findNextUnskippedStep(currentIndex.value - 1, -1, props.steps, currentIndex.value) === currentIndex.value;
+    });
+    const wrapperClasses = computed(
+      () => getFormWizardWrapperClasses({
+        bordered: props.bordered,
+        className: classNames(props.className, coerceClassValue(attrs.class))
+      })
+    );
+    const wrapperStyle = computed(() => mergeStyleValues(attrs.style, props.style));
+    const setCurrent = async (next) => {
+      const clamped = clampStepIndex(next, totalCount.value);
+      const prev = currentIndex.value;
+      if (props.current === void 0) innerCurrent.value = clamped;
+      emit("update:current", clamped);
+      emit("change", clamped, prev);
+      if (props.autoSave && props.steps[clamped]) {
+        await props.autoSave(clamped, props.steps[clamped]);
+      }
+    };
+    const formApi = () => formContext?.value;
+    const validateAdvance = () => {
+      const form = formApi();
+      return runWizardAdvanceGate({
+        currentIndex: currentIndex.value,
+        currentStep: currentStep.value,
+        steps: props.steps,
+        beforeNext: props.beforeNext,
+        validateFields: form ? (fields) => form.validateFields(fields) : void 0
+      });
+    };
+    const finishAt = async (index) => {
+      const form = formApi();
+      if (form) {
+        const fields = props.steps[index]?.fields;
+        const valid = fields?.length ? await form.validateFields(fields) : await form.validate();
+        if (!valid) return;
+        await form.submit();
+      }
+      emit("finish", index, props.steps, form?.getValues());
+      if (props.autoSave && props.steps[index]) {
+        await props.autoSave(index, props.steps[index]);
+      }
+    };
+    const handlePrev = () => {
+      if (currentIndex.value <= 0) return;
+      const target = findNextUnskippedStep(
+        currentIndex.value - 1,
+        -1,
+        props.steps,
+        currentIndex.value
+      );
+      if (target === currentIndex.value) return;
+      errorMessage.value = void 0;
+      void setCurrent(target);
+    };
+    const handleNext = async () => {
+      if (totalCount.value === 0) return;
+      await lock.run(async () => {
+        pending.value = true;
+        try {
+          const outcome = await validateAdvance();
+          if (!outcome.ok) {
+            errorMessage.value = outcome.message;
+            return;
+          }
+          errorMessage.value = void 0;
+          if (isLast.value) {
+            await finishAt(currentIndex.value);
+            return;
+          }
+          const target = findNextUnskippedStep(
+            currentIndex.value + 1,
+            1,
+            props.steps,
+            currentIndex.value
+          );
+          if (target === currentIndex.value) return;
+          await setCurrent(target);
+        } finally {
+          pending.value = false;
+        }
+      });
+    };
+    const handleStepChange = (nextIndex) => {
+      if (!canClickWizardStep(nextIndex, currentIndex.value, props.steps)) return;
+      errorMessage.value = void 0;
+      void setCurrent(nextIndex);
+    };
+    expose({
+      next: handleNext,
+      prev: handlePrev,
+      finish: handleNext
+    });
+    const renderContent = () => {
+      if (!currentStep.value) return void 0;
+      if (slots.step) return slots.step({ step: currentStep.value, index: currentIndex.value });
+      if (slots.default) {
+        return slots.default({ step: currentStep.value, index: currentIndex.value });
+      }
+      if (currentStep.value.content != null) return currentStep.value.content;
+      return void 0;
+    };
+    return () => {
+      const stepItems = props.steps.map((step, index) => ({
+        key: step.key ?? index,
+        title: step.title,
+        description: isStepSkipped(step) ? labels.value.skippedText : step.description,
+        status: step.status,
+        icon: step.icon,
+        disabled: step.disabled || isStepSkipped(step) || props.clickable && index > currentIndex.value
+      }));
+      const { class: _class, style: _style, ...hostAttrs } = attrs;
+      if (totalCount.value === 0) {
+        return h("div", {
+          ...hostAttrs,
+          class: wrapperClasses.value,
+          style: wrapperStyle.value,
+          "data-tiger-form-wizard": "",
+          role: "group",
+          "aria-label": labels.value.ariaLabel
+        });
+      }
+      return h(
+        "div",
+        {
+          ...hostAttrs,
+          class: wrapperClasses.value,
+          style: wrapperStyle.value,
+          "data-tiger-form-wizard": "",
+          role: "group",
+          "aria-label": labels.value.ariaLabel
+        },
+        [
+          props.showSteps ? h("div", { class: getFormWizardHeaderClasses(props.bordered) }, [
+            h(Steps, {
+              current: currentIndex.value,
+              direction: props.direction,
+              size: props.size,
+              simple: props.simple,
+              clickable: props.clickable,
+              items: stepItems,
+              "onUpdate:current": handleStepChange
+            })
+          ]) : void 0,
+          h("div", { class: getFormWizardBodyClasses(), "aria-labelledby": titleId }, [
+            h("div", { id: titleId, class: "sr-only" }, currentStep.value?.title),
+            h("div", { class: "sr-only", "aria-live": "polite" }, currentStep.value?.title),
+            errorMessage.value ? h(
+              "div",
+              {
+                role: "alert",
+                class: "mb-3 w-full text-sm text-[var(--tiger-error,#dc2626)]"
+              },
+              errorMessage.value
+            ) : void 0,
+            renderContent()
+          ]),
+          props.showActions ? h("div", { class: getFormWizardActionsClasses(props.bordered), role: "group" }, [
+            !isFirst.value ? h(
+              Button,
+              {
+                htmlType: "button",
+                variant: "secondary",
+                class: "group",
+                onClick: handlePrev,
+                disabled: pending.value,
+                size: props.size === "small" ? "sm" : "md"
+              },
+              {
+                icon: () => h(Icon, { name: "arrow-left", class: "w-3.5 h-3.5" }),
+                default: () => resolveLocaleText(labels.value.prevText, props.prevText)
+              }
+            ) : h("div"),
+            h(
+              Button,
+              {
+                htmlType: "button",
+                variant: "primary",
+                class: "group",
+                onClick: handleNext,
+                loading: pending.value,
+                disabled: pending.value,
+                size: props.size === "small" ? "sm" : "md",
+                iconPosition: isLast.value ? "start" : "end"
+              },
+              {
+                icon: () => h(Icon, {
+                  name: isLast.value ? "check" : "arrow-right",
+                  class: "w-3.5 h-3.5"
+                }),
+                default: () => isLast.value ? resolveLocaleText(labels.value.finishText, props.finishText) : resolveLocaleText(labels.value.nextText, props.nextText)
+              }
+            )
+          ]) : void 0
+        ]
+      );
+    };
+  }
+});
+var FormWizard_default = FormWizard;
+
+export {
+  FormWizard,
+  FormWizard_default
+};