@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/{chunk-7XDNHGDA.mjs → chunk-OGKNRXUA.mjs}

@@ -3,17 +3,16 @@ import { defineComponent, computed, h } from "vue";
 import {
   classNames,
   coerceClassValue,
+  getIconDefinition,
   iconSizeClasses,
   iconSvgBaseClasses,
-  iconSvgDefaultStrokeLinecap,
-  iconSvgDefaultStrokeLinejoin,
-  iconSvgDefaultStrokeWidth,
   iconWrapperClasses,
-  getIconDefinition,
-  SVG_DEFAULT_FILL,
-  SVG_DEFAULT_STROKE,
-  SVG_DEFAULT_VIEWBOX_24,
-  SVG_DEFAULT_XMLNS
+  mergeChildSvgAttrs,
+  resolveIconSize,
+  resolveIconSvgAttrs,
+  resolveIconWrapperStyle,
+  toVueSvgAttrs,
+  warnUnknownIconName
 } from "@expcat/tigercat-core";
 var Icon = defineComponent({
   name: "TigerIcon",
@@ -44,53 +43,48 @@ var Icon = defineComponent({
       default: "md"
     },
     /**
-     * Icon color (CSS color value)
-     * @default 'currentColor'
+     * Icon color written onto the wrapper. Omitted values inherit CSS `color`.
      */
     color: {
       type: String,
-      default: "currentColor"
+      default: void 0
     }
   },
   setup(props, { slots, attrs }) {
     const wrapperClasses = computed(
       () => classNames(iconWrapperClasses, coerceClassValue(attrs.class))
     );
-    const svgClasses = computed(() => classNames(iconSvgBaseClasses, iconSizeClasses[props.size]));
+    const svgClasses = computed(
+      () => classNames(iconSvgBaseClasses, iconSizeClasses[resolveIconSize(props.size)])
+    );
     return () => {
       const defaultSlot = slots.default?.();
       const hasSlotContent = Array.isArray(defaultSlot) && defaultSlot.length > 0;
       const isDecorative = attrs["aria-label"] == null && attrs["aria-labelledby"] == null && attrs.role == null;
       const definition = !hasSlotContent ? props.icon ?? (props.name ? getIconDefinition(props.name) : void 0) : void 0;
+      if (!hasSlotContent && !definition && props.name) {
+        warnUnknownIconName(props.name);
+      }
       const builtInSvg = definition ? h(
         "svg",
         {
           class: svgClasses.value,
-          xmlns: SVG_DEFAULT_XMLNS,
-          viewBox: definition.viewBox,
-          fill: definition.mode === "fill" ? "currentColor" : SVG_DEFAULT_FILL,
-          stroke: definition.mode === "stroke" ? "currentColor" : SVG_DEFAULT_STROKE,
-          "stroke-width": definition.mode === "stroke" ? 1.5 : void 0,
-          "stroke-linecap": definition.mode === "stroke" ? iconSvgDefaultStrokeLinecap : void 0,
-          "stroke-linejoin": definition.mode === "stroke" ? iconSvgDefaultStrokeLinejoin : void 0
+          ...toVueSvgAttrs(
+            resolveIconSvgAttrs({ mode: definition.mode, viewBox: definition.viewBox })
+          )
         },
         definition.paths.map((d) => h("path", { d }))
       ) : null;
       const normalizeSlotNode = (node) => {
         if (node && typeof node === "object" && node.type === "svg") {
           const svgProps = node.props ?? {};
+          const merged = mergeChildSvgAttrs(svgProps);
           return h(
             "svg",
             {
               ...svgProps,
-              class: classNames(svgClasses.value, coerceClassValue(svgProps.class)),
-              xmlns: svgProps.xmlns ?? SVG_DEFAULT_XMLNS,
-              viewBox: svgProps.viewBox ?? SVG_DEFAULT_VIEWBOX_24,
-              fill: svgProps.fill ?? SVG_DEFAULT_FILL,
-              stroke: svgProps.stroke ?? SVG_DEFAULT_STROKE,
-              "stroke-width": svgProps["stroke-width"] ?? iconSvgDefaultStrokeWidth,
-              "stroke-linecap": svgProps["stroke-linecap"] ?? iconSvgDefaultStrokeLinecap,
-              "stroke-linejoin": svgProps["stroke-linejoin"] ?? iconSvgDefaultStrokeLinejoin
+              ...toVueSvgAttrs(merged),
+              class: classNames(svgClasses.value, coerceClassValue(svgProps.class))
             },
             node.children === null ? void 0 : node.children
           );
@@ -98,12 +92,14 @@ var Icon = defineComponent({
         return node;
       };
       const children = builtInSvg ? [builtInSvg] : (defaultSlot ?? []).map(normalizeSlotNode);
+      const attrsStyle = attrs.style;
+      const styleObject = attrsStyle && typeof attrsStyle === "object" ? attrsStyle : void 0;
       return h(
         "span",
         {
           ...attrs,
           class: wrapperClasses.value,
-          style: { ...attrs.style, color: props.color },
+          style: resolveIconWrapperStyle(props.color, styleObject),
           ...isDecorative ? { "aria-hidden": "true" } : { role: attrs.role ?? "img" }
         },
         children

package/dist/chunk-OGXSLKXD.mjs

@@ -0,0 +1,182 @@
+import {
+  AVATAR_GROUP_INJECTION_KEY
+} from "./chunk-PVJDEAOW.mjs";
+
+// src/components/Avatar.ts
+import { defineComponent, computed, h, ref, watch, inject } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  avatarBaseClasses,
+  avatarSizeClasses,
+  avatarShapeClasses,
+  avatarDefaultBgColor,
+  avatarDefaultTextColor,
+  avatarGeneratedTextColor,
+  avatarImageClasses,
+  generateAvatarColor,
+  getInitials,
+  pickAvatarImageAttrs,
+  resolveAvatarName,
+  resolveAvatarPaint
+} from "@expcat/tigercat-core";
+function invokeListener(handler, event) {
+  if (typeof handler === "function") {
+    handler(event);
+    return;
+  }
+  if (Array.isArray(handler)) {
+    for (const fn of handler) {
+      if (typeof fn === "function") fn(event);
+    }
+  }
+}
+var Avatar = defineComponent({
+  name: "TigerAvatar",
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: void 0
+    },
+    shape: {
+      type: String,
+      default: void 0
+    },
+    src: {
+      type: String,
+      default: void 0
+    },
+    alt: {
+      type: String,
+      default: ""
+    },
+    text: {
+      type: String,
+      default: void 0
+    },
+    bgColor: {
+      type: String,
+      default: void 0
+    },
+    textColor: {
+      type: String,
+      default: void 0
+    },
+    srcSet: { type: String, default: void 0 },
+    sizes: { type: String, default: void 0 },
+    crossOrigin: {
+      type: String,
+      default: void 0
+    },
+    referrerPolicy: { type: String, default: void 0 },
+    decoding: { type: String, default: void 0 },
+    fetchPriority: { type: String, default: void 0 },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["load", "error"],
+  setup(props, { slots, attrs, emit }) {
+    const imageError = ref(false);
+    const group = inject(AVATAR_GROUP_INJECTION_KEY, null);
+    watch(
+      () => props.src,
+      () => {
+        imageError.value = false;
+      }
+    );
+    const hasImage = computed(() => Boolean(props.src) && !imageError.value);
+    const resolvedSize = computed(() => props.size ?? group?.size ?? "md");
+    const resolvedShape = computed(() => props.shape ?? group?.shape ?? "circle");
+    return () => {
+      const attrsRecord = attrs;
+      const { image: imageAttrs, rest: spanAttrs } = pickAvatarImageAttrs(attrsRecord);
+      const { computedLabel, isDecorative } = resolveAvatarName({
+        alt: props.alt,
+        text: props.text,
+        ariaLabel: spanAttrs["aria-label"],
+        ariaLabelledby: spanAttrs["aria-labelledby"],
+        ariaHidden: spanAttrs["aria-hidden"]
+      });
+      const autoBg = !props.bgColor && props.text ? generateAvatarColor(props.text) : void 0;
+      const bgPaint = resolveAvatarPaint(props.bgColor, "bg", autoBg ?? avatarDefaultBgColor);
+      const textPaint = resolveAvatarPaint(
+        props.textColor,
+        "text",
+        autoBg ? avatarGeneratedTextColor : avatarDefaultTextColor
+      );
+      const avatarClasses = classNames(
+        avatarBaseClasses,
+        avatarSizeClasses[resolvedSize.value],
+        avatarShapeClasses[resolvedShape.value],
+        group?.itemClass,
+        !hasImage.value && bgPaint.className,
+        !hasImage.value && textPaint.className,
+        props.className,
+        coerceClassValue(spanAttrs.class)
+      );
+      const paintStyle = !hasImage.value && (bgPaint.style || textPaint.style) ? { ...bgPaint.style, ...textPaint.style } : void 0;
+      const baseSpanProps = {
+        ...spanAttrs,
+        class: avatarClasses,
+        style: mergeStyleValues(spanAttrs.style, props.style, paintStyle)
+      };
+      const handleError = (event) => {
+        invokeListener(imageAttrs.onError ?? spanAttrs.onError, event);
+        emit("error", event);
+        if (!event.defaultPrevented) imageError.value = true;
+      };
+      const handleLoad = (event) => {
+        invokeListener(imageAttrs.onLoad ?? spanAttrs.onLoad, event);
+        emit("load", event);
+      };
+      if (hasImage.value) {
+        return h(
+          "span",
+          { ...baseSpanProps, "aria-hidden": isDecorative ? true : spanAttrs["aria-hidden"] },
+          [
+            h("img", {
+              src: props.src,
+              alt: computedLabel ?? "",
+              srcset: props.srcSet ?? imageAttrs.srcSet,
+              sizes: props.sizes ?? imageAttrs.sizes,
+              crossorigin: props.crossOrigin ?? imageAttrs.crossOrigin,
+              referrerpolicy: props.referrerPolicy ?? imageAttrs.referrerPolicy,
+              decoding: props.decoding ?? imageAttrs.decoding,
+              fetchpriority: props.fetchPriority ?? imageAttrs.fetchPriority,
+              class: avatarImageClasses,
+              onLoad: handleLoad,
+              onError: handleError
+            })
+          ]
+        );
+      }
+      const displayText = props.text ? getInitials(props.text) : "";
+      return h(
+        "span",
+        {
+          ...baseSpanProps,
+          ...isDecorative ? { "aria-hidden": true } : {
+            role: "img",
+            "aria-label": computedLabel,
+            "aria-labelledby": spanAttrs["aria-labelledby"]
+          }
+        },
+        displayText || slots.default?.()
+      );
+    };
+  }
+});
+var Avatar_default = Avatar;
+
+export {
+  Avatar,
+  Avatar_default
+};

package/dist/chunk-OKVAKVTR.mjs

@@ -0,0 +1,8 @@
+// src/utils/layout-context.ts
+var LayoutContextKey = /* @__PURE__ */ Symbol("TigerLayout");
+var SidebarContextKey = /* @__PURE__ */ Symbol("TigerSidebar");
+
+export {
+  LayoutContextKey,
+  SidebarContextKey
+};

package/dist/{chunk-BBNCP55O.mjs → chunk-ONMBVAXK.mjs}

@@ -1,12 +1,22 @@
 // src/components/Highlight.ts
-import { Comment, defineComponent, h } from "vue";
+import {
+  Comment,
+  Fragment,
+  Text,
+  cloneVNode,
+  defineComponent,
+  h,
+  isVNode
+} from "vue";
 import {
   composeComponentClasses,
+  findHighlightRanges,
   getHighlightMarkClasses,
   getHighlightRootClasses,
   getHighlightSegments,
   mergeStyleValues,
-  resolveHighlightText
+  resolveHighlightText,
+  sliceTextByHighlightRanges
 } from "@expcat/tigercat-core";
 function flattenVueText(input) {
   if (input == null || typeof input === "boolean") return "";
@@ -39,12 +49,65 @@ function flattenVueText(input) {
   }
   return "";
 }
+function renderMark(text, markClasses, markStyle) {
+  return h(
+    "mark",
+    {
+      class: markClasses,
+      style: markStyle,
+      "data-highlight-mark": ""
+    },
+    text
+  );
+}
+function highlightVueNode(input, ranges, offset, markClasses, markStyle) {
+  if (input == null || typeof input === "boolean") return null;
+  if (typeof input === "string" || typeof input === "number") {
+    const text = String(input);
+    const pieces = sliceTextByHighlightRanges(text, offset.value, ranges);
+    offset.value += text.length;
+    if (pieces.length === 1 && !pieces[0].highlighted) return text;
+    return pieces.map(
+      (piece) => piece.highlighted ? renderMark(piece.text, markClasses, markStyle) : piece.text
+    );
+  }
+  if (Array.isArray(input)) {
+    return input.map((item) => highlightVueNode(item, ranges, offset, markClasses, markStyle));
+  }
+  if (!isVNode(input)) return null;
+  if (input.type === Comment) return input;
+  if (input.type === Text) {
+    return highlightVueNode(input.children, ranges, offset, markClasses, markStyle);
+  }
+  if (input.type === Fragment) {
+    return highlightVueNode(input.children, ranges, offset, markClasses, markStyle);
+  }
+  if (typeof input.children === "string" || typeof input.children === "number") {
+    const highlighted = highlightVueNode(input.children, ranges, offset, markClasses, markStyle);
+    return h(input.type, input.props ?? void 0, highlighted ?? void 0);
+  }
+  if (Array.isArray(input.children)) {
+    const highlighted = highlightVueNode(input.children, ranges, offset, markClasses, markStyle);
+    if (typeof input.type === "string") {
+      return h(input.type, input.props ?? void 0, highlighted ?? void 0);
+    }
+    return cloneVNode(input, null, true);
+  }
+  if (input.children && typeof input.children === "object") {
+    const slots = input.children;
+    if (typeof slots.default === "function") {
+      const highlighted = highlightVueNode(slots.default(), ranges, offset, markClasses, markStyle);
+      return h(input.type, input.props, () => highlighted);
+    }
+  }
+  return input;
+}
 var Highlight = defineComponent({
   name: "TigerHighlight",
   inheritAttrs: false,
   props: {
     /**
-     * Source text to search. When omitted, the default slot is flattened to a string.
+     * Source text to search. When set, it wins over the default slot.
      */
     text: {
       type: String,
@@ -105,30 +168,28 @@ var Highlight = defineComponent({
   setup(props, { slots, attrs }) {
     return () => {
       const attrsRecord = attrs;
-      const source = resolveHighlightText(props.text, flattenVueText(slots.default?.()));
-      const segments = getHighlightSegments(source, props.keywords, {
+      const slotNodes = slots.default?.();
+      const source = resolveHighlightText(props.text, flattenVueText(slotNodes));
+      const options = {
         caseSensitive: props.caseSensitive,
         global: props.global
-      });
+      };
       const markClasses = getHighlightMarkClasses(props.highlightClassName);
       const markStyle = mergeStyleValues(props.highlightStyle);
-      const children = [];
-      for (const segment of segments) {
-        if (segment.highlighted) {
-          children.push(
-            h(
-              "mark",
-              {
-                class: markClasses,
-                style: markStyle,
-                "data-highlight-mark": ""
-              },
-              segment.text
-            )
-          );
-        } else {
-          children.push(segment.text);
-        }
+      let children;
+      if (props.text != null) {
+        const segments = getHighlightSegments(source, props.keywords, options);
+        children = segments.map(
+          (segment) => segment.highlighted ? renderMark(segment.text, markClasses, markStyle) : segment.text
+        );
+      } else {
+        children = highlightVueNode(
+          slotNodes,
+          findHighlightRanges(source, props.keywords, options),
+          { value: 0 },
+          markClasses,
+          markStyle
+        );
       }
       return h(
         "span",
@@ -143,7 +204,7 @@ var Highlight = defineComponent({
           "data-highlight-case-sensitive": props.caseSensitive ? "true" : "false",
           "data-highlight-global": props.global ? "true" : "false"
         },
-        children
+        children ?? void 0
       );
     };
   }