@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-ASOJXXU6.mjs → chunk-WULBKPDO.mjs}

@@ -1,6 +1,6 @@
 import {
   createStatusIcon
-} from "./chunk-2TNZ4JNT.mjs";
+} from "./chunk-5VSSB4QF.mjs";
 
 // src/components/Result.ts
 import { defineComponent, computed, h } from "vue";
@@ -11,12 +11,15 @@ import {
   resultBaseClasses,
   resultIconContainerBaseClasses,
   resultIconClasses,
+  resultHttpLabelClasses,
   resultTitleClasses,
   resultSubTitleClasses,
   resultExtraClasses,
+  RESULT_ICON_SIZE_PX,
   getResultColorScheme,
   getResultIconPath,
-  isHttpResultStatus
+  isHttpResultStatus,
+  resultHeadingTag
 } from "@expcat/tigercat-core";
 var Result = defineComponent({
   name: "TigerResult",
@@ -34,6 +37,10 @@ var Result = defineComponent({
       type: String,
       default: void 0
     },
+    headingLevel: {
+      type: Number,
+      default: void 0
+    },
     className: {
       type: String,
       default: void 0
@@ -47,16 +54,27 @@ var Result = defineComponent({
     const colors = computed(() => getResultColorScheme(props.status));
     const iconPath = computed(() => getResultIconPath(props.status));
     const httpLabel = computed(() => isHttpResultStatus(props.status) ? props.status : void 0);
-    const iconContainerClasses = computed(
-      () => classNames(resultIconContainerBaseClasses, colors.value.iconBg)
-    );
+    const headingTag = computed(() => resultHeadingTag(props.headingLevel));
     const iconSvgClasses = computed(() => classNames(resultIconClasses, colors.value.iconColor));
-    const titleCls = computed(() => classNames(resultTitleClasses, colors.value.titleColor));
     return () => {
       const attrsRecord = attrs;
       const children = [];
+      const hasTitle = Boolean(props.title || slots.title);
       if (slots.icon) {
-        children.push(h("div", { class: iconContainerClasses.value }, slots.icon()));
+        children.push(
+          h(
+            "div",
+            {
+              class: resultIconContainerBaseClasses,
+              style: {
+                width: `${RESULT_ICON_SIZE_PX}px`,
+                height: `${RESULT_ICON_SIZE_PX}px`,
+                background: colors.value.iconBg
+              }
+            },
+            slots.icon()
+          )
+        );
       } else {
         const iconContent = [];
         if (httpLabel.value) {
@@ -64,19 +82,42 @@ var Result = defineComponent({
             h(
               "span",
               {
-                class: classNames("text-5xl font-bold", colors.value.iconColor)
+                class: classNames(resultHttpLabelClasses, colors.value.iconColor),
+                "aria-hidden": hasTitle ? "true" : void 0
               },
               httpLabel.value
             )
           );
         } else {
-          iconContent.push(createStatusIcon(iconPath.value, iconSvgClasses.value));
+          iconContent.push(
+            createStatusIcon(iconPath.value, iconSvgClasses.value, {
+              "aria-hidden": "true",
+              focusable: "false"
+            })
+          );
         }
-        children.push(h("div", { class: iconContainerClasses.value }, iconContent));
+        children.push(
+          h(
+            "div",
+            {
+              class: resultIconContainerBaseClasses,
+              style: {
+                width: `${RESULT_ICON_SIZE_PX}px`,
+                height: `${RESULT_ICON_SIZE_PX}px`,
+                background: colors.value.iconBg
+              }
+            },
+            iconContent
+          )
+        );
       }
-      if (props.title || slots.title) {
+      if (hasTitle) {
         children.push(
-          h("div", { class: titleCls.value }, slots.title ? slots.title() : props.title)
+          h(
+            headingTag.value,
+            { class: resultTitleClasses },
+            slots.title ? slots.title() : props.title
+          )
         );
       }
       if (props.subTitle || slots.subTitle) {
@@ -103,8 +144,7 @@ var Result = defineComponent({
             props.className,
             coerceClassValue(attrsRecord.class)
           ),
-          style: mergeStyleValues(attrsRecord.style, props.style),
-          role: "status"
+          style: mergeStyleValues(attrsRecord.style, props.style)
         },
         children
       );

package/dist/chunk-X2FGWVNP.mjs

@@ -0,0 +1,276 @@
+import {
+  flattenElementVNodes
+} from "./chunk-FEVDV3I6.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Breadcrumb.ts
+import {
+  defineComponent,
+  computed,
+  inject,
+  provide,
+  reactive,
+  ref,
+  watch,
+  h
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  breadcrumbContainerClasses,
+  breadcrumbEllipsisClasses,
+  breadcrumbExtraClasses,
+  breadcrumbListClasses,
+  getBreadcrumbItemClasses,
+  getBreadcrumbLinkClasses,
+  getBreadcrumbSeparatorClasses,
+  getBreadcrumbSlots,
+  getSeparatorKind,
+  getSeparatorContent,
+  resolveBreadcrumbItemCurrent,
+  mergeTigerLocale,
+  getBreadcrumbLabels,
+  chevronLeftSolidIcon20PathD,
+  icon20ViewBox
+} from "@expcat/tigercat-core";
+var BreadcrumbContextKey = /* @__PURE__ */ Symbol("BreadcrumbContext");
+function useBreadcrumbContext() {
+  return inject(BreadcrumbContextKey);
+}
+function renderSeparator(separator) {
+  const kind = getSeparatorKind(separator);
+  const classes = getBreadcrumbSeparatorClasses();
+  if (kind === "arrow" || kind === "chevron") {
+    return h("span", { class: classes, "aria-hidden": "true" }, [
+      h(
+        "svg",
+        {
+          class: `h-3.5 w-3.5 ${kind === "arrow" ? "-scale-x-100 rtl:scale-x-100" : "rtl:-scale-x-100"}`,
+          viewBox: icon20ViewBox,
+          fill: "currentColor"
+        },
+        h("path", {
+          "fill-rule": "evenodd",
+          d: chevronLeftSolidIcon20PathD,
+          "clip-rule": "evenodd"
+        })
+      )
+    ]);
+  }
+  return h("span", { class: classes, "aria-hidden": "true" }, getSeparatorContent(separator));
+}
+var BreadcrumbItem = defineComponent({
+  name: "TigerBreadcrumbItem",
+  inheritAttrs: false,
+  props: {
+    href: { type: String, default: void 0 },
+    target: {
+      type: String,
+      default: void 0
+    },
+    current: { type: Boolean, default: void 0 },
+    separator: { type: String, default: void 0 },
+    className: { type: String, default: void 0 },
+    style: { type: Object, default: void 0 },
+    icon: { type: [String, Object], default: void 0 },
+    isLast: { type: Boolean, default: false }
+  },
+  emits: {
+    click: (event) => event instanceof MouseEvent
+  },
+  setup(props, { slots, emit, attrs }) {
+    const isCurrent = computed(() => resolveBreadcrumbItemCurrent(props.current, props.isLast));
+    const hasHandler = typeof attrs.onClick === "function";
+    const handleClick = (event) => {
+      if (!isCurrent.value) emit("click", event);
+    };
+    return () => {
+      const children = slots.default ? slots.default() : [];
+      const iconElement = props.icon ? h("span", { class: "inline-flex" }, props.icon) : null;
+      const contentElements = iconElement ? [iconElement, ...children] : children;
+      const linkClasses = getBreadcrumbLinkClasses(isCurrent.value);
+      const computedRel = props.target === "_blank" ? "noopener noreferrer" : void 0;
+      let control;
+      if (isCurrent.value) {
+        control = h("span", { class: linkClasses, "aria-current": "page" }, contentElements);
+      } else if (props.href) {
+        control = h(
+          "a",
+          {
+            class: linkClasses,
+            href: props.href,
+            target: props.target,
+            rel: computedRel,
+            onClick: handleClick
+          },
+          contentElements
+        );
+      } else if (hasHandler) {
+        control = h(
+          "button",
+          { type: "button", class: linkClasses, onClick: handleClick },
+          contentElements
+        );
+      } else {
+        control = h("span", { class: getBreadcrumbLinkClasses(true) }, contentElements);
+      }
+      const {
+        class: attrClass,
+        style: attrStyle,
+        onClick: _onClick,
+        ...rest
+      } = attrs;
+      return h(
+        "li",
+        {
+          ...rest,
+          class: classNames(getBreadcrumbItemClasses(props.className), coerceClassValue(attrClass)),
+          style: mergeStyleValues(attrStyle, props.style)
+        },
+        [control]
+      );
+    };
+  }
+});
+var Breadcrumb = defineComponent({
+  name: "TigerBreadcrumb",
+  inheritAttrs: false,
+  props: {
+    separator: {
+      type: String,
+      default: "/"
+    },
+    maxItems: { type: Number, default: void 0 },
+    className: { type: String, default: void 0 },
+    style: { type: Object, default: void 0 },
+    extra: {
+      type: null,
+      default: void 0
+    },
+    locale: { type: Object, default: void 0 },
+    labels: { type: Object, default: void 0 }
+  },
+  setup(props, { slots, attrs }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getBreadcrumbLabels(mergedLocale.value, props.labels));
+    const expanded = ref(false);
+    const itemSignature = ref("");
+    const extraContent = computed(() => {
+      const slotValue = slots.extra?.();
+      if (slotValue && slotValue.length > 0) return slotValue;
+      if (props.extra != null) return props.extra;
+      return null;
+    });
+    const breadcrumbContext = reactive({
+      separator: props.separator
+    });
+    watch(
+      () => props.separator,
+      (separator) => {
+        breadcrumbContext.separator = separator;
+      }
+    );
+    provide(BreadcrumbContextKey, breadcrumbContext);
+    watch(
+      () => [itemSignature.value, props.maxItems],
+      () => {
+        expanded.value = false;
+      }
+    );
+    return () => {
+      const items = flattenElementVNodes(slots.default?.());
+      itemSignature.value = items.map((item) => String(item.key ?? "")).join("|");
+      const slotsList = getBreadcrumbSlots(items.length, props.maxItems, expanded.value);
+      const nodes = [];
+      slotsList.forEach((slot, index) => {
+        if (slot.type === "ellipsis") {
+          nodes.push(
+            h("li", { key: "__tiger-breadcrumb-ellipsis", class: getBreadcrumbItemClasses() }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: breadcrumbEllipsisClasses,
+                  "aria-label": labels.value.expandAriaLabel,
+                  "aria-expanded": "false",
+                  onClick: () => {
+                    expanded.value = true;
+                  }
+                },
+                "..."
+              )
+            ])
+          );
+        } else {
+          const child = items[slot.index];
+          const isLast = slot.index === items.length - 1;
+          const childProps = child.props ?? {};
+          const childType = typeof child.type === "string" || typeof child.type === "object" ? child.type : "li";
+          nodes.push(
+            h(
+              childType,
+              {
+                ...childProps,
+                key: child.key ?? slot.index,
+                isLast
+              },
+              child.children
+            )
+          );
+        }
+        if (index !== slotsList.length - 1) {
+          nodes.push(
+            h(
+              "li",
+              { key: `sep-${index}`, class: getBreadcrumbItemClasses(), "aria-hidden": "true" },
+              [renderSeparator(props.separator)]
+            )
+          );
+        }
+      });
+      const attrsRecord = attrs;
+      const ariaLabel = attrsRecord["aria-label"] ?? labels.value.ariaLabel;
+      const hasExtra = Boolean(extraContent.value);
+      const rootClass = classNames(
+        breadcrumbContainerClasses,
+        hasExtra && "w-full",
+        props.className,
+        coerceClassValue(attrsRecord.class)
+      );
+      const nav = h(
+        "nav",
+        {
+          "aria-label": ariaLabel,
+          class: hasExtra ? void 0 : rootClass,
+          style: hasExtra ? void 0 : mergeStyleValues(attrsRecord.style, props.style)
+        },
+        [
+          h(
+            "ol",
+            {
+              class: hasExtra ? breadcrumbListClasses : classNames(breadcrumbListClasses, "w-full")
+            },
+            nodes
+          )
+        ]
+      );
+      if (!hasExtra) return nav;
+      return h(
+        "div",
+        { class: rootClass, style: mergeStyleValues(attrsRecord.style, props.style) },
+        [nav, h("div", { class: breadcrumbExtraClasses }, extraContent.value ?? void 0)]
+      );
+    };
+  }
+});
+
+export {
+  BreadcrumbContextKey,
+  useBreadcrumbContext,
+  BreadcrumbItem,
+  Breadcrumb
+};

package/dist/{chunk-SJINC5NF.mjs → chunk-X7UK3A6Z.mjs}

@@ -1,6 +1,6 @@
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/Empty.ts
 import { defineComponent, computed, h } from "vue";
@@ -12,10 +12,11 @@ import {
   emptyImageClasses,
   emptyDescriptionClasses,
   emptyActionsClasses,
-  emptyIllustrationViewBox,
-  emptyIllustrationPaths,
   getEmptyDescription,
-  mergeTigerLocale
+  getEmptyIllustration,
+  resolveEmptyImageMode,
+  mergeTigerLocale,
+  devWarn
 } from "@expcat/tigercat-core";
 var Empty = defineComponent({
   name: "TigerEmpty",
@@ -54,35 +55,48 @@ var Empty = defineComponent({
     );
     return () => {
       const attrsRecord = attrs;
+      const hasCustomImage = Boolean(slots.image);
+      const imageMode = resolveEmptyImageMode({
+        showImage: props.showImage,
+        hasCustomImage,
+        preset: props.preset
+      });
+      const illustration = imageMode === "builtin" ? getEmptyIllustration(props.preset) : null;
+      if (props.showImage === false && hasCustomImage) {
+        devWarn(
+          "Empty.showImage.custom",
+          "Empty: the image slot still renders when `showImage` is false. Omit the slot to hide the illustration."
+        );
+      }
       const children = [];
-      if (props.showImage) {
-        if (slots.image) {
-          children.push(h("div", { class: emptyImageClasses }, slots.image()));
-        } else {
-          const paths = emptyIllustrationPaths.map(
-            (p, i) => h("path", {
-              key: i,
-              d: p.d,
-              fill: p.fill ?? "none",
-              stroke: p.stroke,
-              "stroke-width": p.strokeWidth,
-              opacity: p.opacity
-            })
-          );
-          children.push(
-            h("div", { class: emptyImageClasses }, [
-              h(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  viewBox: emptyIllustrationViewBox,
-                  class: "mx-auto h-24 w-24"
-                },
-                paths
-              )
-            ])
-          );
-        }
+      if (imageMode === "custom" && slots.image) {
+        children.push(h("div", { class: emptyImageClasses || void 0 }, slots.image()));
+      } else if (illustration) {
+        const paths = illustration.paths.map(
+          (p, i) => h("path", {
+            key: i,
+            d: p.d,
+            fill: p.fill ?? "none",
+            stroke: p.stroke,
+            "stroke-width": p.strokeWidth,
+            opacity: p.opacity
+          })
+        );
+        children.push(
+          h("div", { class: emptyImageClasses || void 0 }, [
+            h(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: illustration.viewBox,
+                class: "mx-auto h-24 w-24",
+                "aria-hidden": "true",
+                focusable: "false"
+              },
+              paths
+            )
+          ])
+        );
       }
       if (slots.description || descText.value) {
         children.push(