@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-HWL36OCD.mjs → chunk-7G6YBK6O.mjs}

@@ -1,3 +1,10 @@
+import {
+  flattenElementVNodes
+} from "./chunk-FEVDV3I6.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
 // src/components/Steps.ts
 import {
   defineComponent,
@@ -5,7 +12,8 @@ import {
   inject,
   provide,
   h,
-  reactive
+  reactive,
+  ref
 } from "vue";
 import {
   classNames,
@@ -19,11 +27,19 @@ import {
   getStepDescriptionClasses,
   getStepsContainerClasses,
   calculateStepStatus,
+  clampStepCurrent,
+  getStepStatusText,
+  isStepsItemType,
+  mergeTigerLocale,
+  getStepsLabels,
   stepFinishIconViewBox,
   stepFinishIconStrokeWidth,
   stepFinishIconPathD
 } from "@expcat/tigercat-core";
 var StepsContextKey = /* @__PURE__ */ Symbol("StepsContext");
+function useStepsContext() {
+  return inject(StepsContextKey);
+}
 var StepsItem = defineComponent({
   name: "TigerStepsItem",
   inheritAttrs: false,
@@ -87,14 +103,10 @@ var StepsItem = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const stepsContext = inject(StepsContextKey, {
-      current: 0,
-      status: "process",
-      direction: "horizontal",
-      size: "default",
-      simple: false,
-      clickable: false
-    });
+    const stepsContext = inject(StepsContextKey);
+    if (!stepsContext) {
+      throw new Error("StepsItem must be used within a Steps component");
+    }
     const stepStatus = computed(() => {
       return calculateStepStatus(
         props.stepIndex,
@@ -148,54 +160,34 @@ var StepsItem = defineComponent({
       stepsContext.handleStepClick(props.stepIndex);
     };
     const renderIcon = () => {
-      if (slots.icon) {
-        return h("div", { class: iconClasses.value }, slots.icon());
-      }
-      if (props.icon) {
-        return h("div", { class: iconClasses.value }, props.icon);
-      }
-      if (stepStatus.value === "finish") {
-        return h("div", { class: iconClasses.value, "aria-hidden": "true" }, [
-          h(
-            "svg",
-            {
-              class: "w-4 h-4 shrink-0 transition-transform duration-300 animate-fade-in",
-              fill: "none",
-              stroke: "currentColor",
-              "stroke-width": stepFinishIconStrokeWidth,
-              viewBox: stepFinishIconViewBox
-            },
-            [
-              h("path", {
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round",
-                d: stepFinishIconPathD
-              })
-            ]
-          )
-        ]);
-      }
-      return h("div", { class: iconClasses.value }, String(props.stepIndex + 1));
+      let inner;
+      if (slots.icon) inner = slots.icon();
+      else if (props.icon) inner = props.icon;
+      else if (stepStatus.value === "finish") {
+        inner = h(
+          "svg",
+          {
+            class: "w-4 h-4 shrink-0 tiger-animate-fade-in",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": stepFinishIconStrokeWidth,
+            viewBox: stepFinishIconViewBox,
+            "aria-hidden": "true"
+          },
+          [
+            h("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              d: stepFinishIconPathD
+            })
+          ]
+        );
+      } else if (stepStatus.value === "error") inner = h("span", { "aria-hidden": "true" }, "!");
+      else inner = h("span", { "aria-hidden": "true" }, String(props.stepIndex + 1));
+      return h("div", { class: iconClasses.value, "aria-hidden": "true" }, inner);
     };
     const renderContent = () => {
-      const children = [];
-      if (stepsContext.clickable) {
-        children.push(
-          h(
-            "button",
-            {
-              type: "button",
-              class: titleClasses.value,
-              onClick: handleClick,
-              disabled: props.disabled,
-              "aria-disabled": props.disabled || void 0
-            },
-            props.title
-          )
-        );
-      } else {
-        children.push(h("div", { class: titleClasses.value }, props.title));
-      }
+      const children = [h("div", { class: titleClasses.value }, props.title)];
       if (!stepsContext.simple && (props.description || slots.description)) {
         children.push(
           h(
@@ -210,22 +202,28 @@ var StepsItem = defineComponent({
     const mergedStyle = computed(() => mergeStyleValues(attrs.style, props.style));
     return () => {
       const { class: _class, style: _style, ...restAttrs } = attrs;
-      if (stepsContext.direction === "vertical") {
-        return h(
-          "li",
-          {
-            class: itemClasses.value,
-            style: mergedStyle.value,
-            "aria-current": props.stepIndex === stepsContext.current ? "step" : void 0,
-            "aria-disabled": props.disabled || void 0,
-            ...restAttrs
-          },
-          [
-            h("div", { class: "relative" }, [renderIcon(), h("div", { class: tailClasses.value })]),
-            renderContent()
-          ]
-        );
-      }
+      const body = stepsContext.direction === "vertical" ? [
+        h("div", { class: "relative" }, [
+          renderIcon(),
+          h("div", { class: tailClasses.value })
+        ]),
+        renderContent(),
+        h(
+          "span",
+          { class: "sr-only" },
+          getStepStatusText(stepStatus.value, stepsContext.labels)
+        )
+      ] : [
+        renderIcon(),
+        h("div", { class: tailClasses.value }),
+        renderContent(),
+        h(
+          "span",
+          { class: "sr-only" },
+          getStepStatusText(stepStatus.value, stepsContext.labels)
+        )
+      ];
+      const isClickable = !!stepsContext.handleStepClick && !props.disabled;
       return h(
         "li",
         {
@@ -235,7 +233,17 @@ var StepsItem = defineComponent({
           "aria-disabled": props.disabled || void 0,
           ...restAttrs
         },
-        [renderIcon(), h("div", { class: tailClasses.value }), renderContent()]
+        isClickable ? [
+          h(
+            "button",
+            {
+              type: "button",
+              class: stepsContext.direction === "vertical" ? "flex w-full flex-row items-start bg-transparent p-0 text-start" : "flex w-full flex-col items-center bg-transparent p-0",
+              onClick: handleClick
+            },
+            body
+          )
+        ] : body
       );
     };
   }
@@ -292,6 +300,18 @@ var Steps = defineComponent({
       type: Boolean,
       default: false
     },
+    items: {
+      type: Array,
+      default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    labels: {
+      type: Object,
+      default: void 0
+    },
     /**
      * Additional CSS classes
      */
@@ -314,6 +334,10 @@ var Steps = defineComponent({
       )
     );
     const mergedStyle = computed(() => mergeStyleValues(attrs.style, props.style));
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const stepLabels = computed(() => getStepsLabels(mergedLocale.value, props.labels));
+    const itemCount = ref(0);
     const handleStepClick = (index) => {
       if (!props.clickable) {
         return;
@@ -324,41 +348,62 @@ var Steps = defineComponent({
     provide(
       StepsContextKey,
       reactive({
-        current: computed(() => props.current),
+        current: computed(() => clampStepCurrent(props.current, itemCount.value)),
         status: computed(() => props.status),
         direction: computed(() => props.direction),
         size: computed(() => props.size),
         simple: computed(() => props.simple),
         clickable: computed(() => props.clickable),
+        labels: computed(() => stepLabels.value),
         handleStepClick: computed(() => props.clickable ? handleStepClick : void 0)
       })
     );
     return () => {
-      const children = slots.default?.() || [];
-      const { class: _class, style: _style, ...restAttrs } = attrs;
-      const stepsWithProps = children.map((child, index) => {
-        const childType = child?.type;
-        const childName = typeof childType === "object" && childType && "name" in childType ? childType.name : void 0;
-        if (childName === "TigerStepsItem") {
-          const childProps = child.props ?? {};
-          const stepItemType = typeof child.type === "string" || typeof child.type === "object" ? child.type : "div";
-          return h(
-            stepItemType,
-            {
-              ...childProps,
-              stepIndex: index,
-              isLast: index === children.length - 1
-            },
-            child.children ?? void 0
-          );
-        }
-        return child;
+      const {
+        class: _class,
+        style: _style,
+        "aria-label": ariaLabelAttr,
+        ...restAttrs
+      } = attrs;
+      let itemVNodes;
+      if (props.items && props.items.length > 0) {
+        itemVNodes = props.items.map(
+          (item) => h(StepsItem, {
+            key: item.key ?? item.title,
+            title: item.title,
+            description: item.description,
+            icon: item.icon,
+            status: item.status,
+            disabled: item.disabled
+          })
+        );
+      } else {
+        itemVNodes = flattenElementVNodes(slots.default?.()).filter(
+          (child) => isStepsItemType(child.type, StepsItem)
+        );
+      }
+      itemCount.value = itemVNodes.length;
+      const stepsWithProps = itemVNodes.map((child, index) => {
+        const childProps = child.props ?? {};
+        const stepItemType = typeof child.type === "string" || typeof child.type === "object" ? child.type : "div";
+        return h(
+          stepItemType,
+          {
+            ...childProps,
+            key: child.key ?? index,
+            stepIndex: index,
+            isLast: index === itemVNodes.length - 1
+          },
+          child.children ?? void 0
+        );
       });
       return h(
         "ol",
         {
           class: containerClasses.value,
           style: mergedStyle.value,
+          role: "list",
+          "aria-label": typeof ariaLabelAttr === "string" ? ariaLabelAttr : stepLabels.value.ariaLabel,
           ...restAttrs
         },
         stepsWithProps
@@ -370,6 +415,7 @@ var Steps_default = Steps;
 
 export {
   StepsContextKey,
+  useStepsContext,
   StepsItem,
   Steps,
   Steps_default

package/dist/{chunk-342DH5CF.mjs → chunk-7PLYHGMY.mjs}

@@ -1,9 +1,9 @@
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/Tag.ts
-import { defineComponent, computed, h, ref } from "vue";
+import { defineComponent, computed, h } from "vue";
 import {
   classNames,
   coerceClassValue,
@@ -16,9 +16,10 @@ import {
   mergeStyleValues,
   tagBaseClasses,
   tagSizeClasses,
+  tagPillClasses,
   tagCloseButtonBaseClasses,
   tagCloseIconPath,
-  warnUnsupportedColorProp,
+  omitUnsupportedColorProp,
   getStatusLabels,
   mergeTigerLocale
 } from "@expcat/tigercat-core";
@@ -75,13 +76,32 @@ var Tag = defineComponent({
       default: false
     },
     /**
-     * Accessible label for the close button (when `closable` is true)
-     * @default 'Close tag'
+     * Accessible label for the close button (when `closable` is true).
+     * Defaults to ConfigProvider locale `status.tagCloseAriaLabel`.
      */
     closeAriaLabel: {
       type: String,
       default: void 0
     },
+    closeTabIndex: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * When `false`, the tag is not rendered. Closing never hides internally.
+     */
+    open: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * Fully rounded pill shape
+     * @default false
+     */
+    pill: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Additional CSS classes
      */
@@ -97,18 +117,18 @@ var Tag = defineComponent({
       default: void 0
     }
   },
-  emits: ["close"],
+  emits: ["close", "update:open"],
   setup(props, { slots, emit, attrs }) {
     const config = useTigerConfig();
     const labels = computed(
       () => getStatusLabels(mergeTigerLocale(config.value.locale, props.locale))
     );
-    const isVisible = ref(true);
     const tagClasses = computed(
       () => classNames(
         tagBaseClasses,
         getTagVariantClasses(props.variant),
         tagSizeClasses[props.size],
+        props.pill && tagPillClasses,
         props.className
       )
     );
@@ -119,25 +139,23 @@ var Tag = defineComponent({
     const handleClose = (event) => {
       event.stopPropagation();
       emit("close", event);
-      if (!event.defaultPrevented) {
-        isVisible.value = false;
-      }
+      emit("update:open", false);
     };
     return () => {
-      warnUnsupportedColorProp("Tag", attrs);
-      if (!isVisible.value) {
+      if (props.open === false) {
         return null;
       }
-      const attrsRecord = attrs;
+      const attrsRecord = omitUnsupportedColorProp("Tag", {
+        ...attrs
+      });
       const attrsClass = attrsRecord.class;
       const attrsStyle = attrsRecord.style;
       return h(
         "span",
         {
-          ...attrs,
+          ...attrsRecord,
           class: classNames(tagClasses.value, coerceClassValue(attrsClass)),
-          style: mergeStyleValues(attrsStyle, props.style),
-          role: "status"
+          style: mergeStyleValues(attrsStyle, props.style)
         },
         [
           slots.default ? h("span", {}, slots.default()) : null,
@@ -147,6 +165,7 @@ var Tag = defineComponent({
               class: closeButtonClasses.value,
               onClick: handleClose,
               "aria-label": props.closeAriaLabel ?? labels.value.tagCloseAriaLabel,
+              tabindex: props.closeTabIndex,
               type: "button"
             },
             CloseIcon()