@expcat/tigercat-vue 1.4.0 → 2.0.0-preview.1

package/dist/chunk-GMIKUE67.mjs

@@ -0,0 +1,201 @@
+import {
+  createStatusIcon
+} from "./chunk-2TNZ4JNT.mjs";
+
+// src/components/NotificationContainer.ts
+import { computed, defineComponent, h, Teleport, TransitionGroup } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getNotificationIconPath,
+  getNotificationTypeClasses,
+  notificationActionButtonClasses,
+  notificationActionButtonTypeClasses,
+  notificationActionsClasses,
+  notificationBaseClasses,
+  notificationCloseButtonClasses,
+  notificationCloseIconClasses,
+  notificationCloseIconPath,
+  notificationContainerBaseClasses,
+  notificationContentClasses,
+  notificationDescriptionClasses,
+  notificationIconClasses,
+  notificationPositionClasses,
+  notificationTitleClasses
+} from "@expcat/tigercat-core";
+var NOTIFICATION_CONTAINER_ID_PREFIX = "tiger-notification-container";
+var NOTIFICATION_CLOSE_ARIA_LABEL = "Close notification";
+var IS_TEST_ENV = (() => {
+  const proc = globalThis.process;
+  return typeof proc !== "undefined" && proc.env?.NODE_ENV === "test";
+})();
+var NotificationContainer = /* @__PURE__ */ defineComponent({
+  name: "TigerNotificationContainer",
+  inheritAttrs: false,
+  props: {
+    position: {
+      type: String,
+      default: "top-right"
+    },
+    notifications: {
+      type: Array,
+      default: () => []
+    },
+    onClose: Function
+  },
+  setup(props, { attrs }) {
+    const containerClasses = computed(
+      () => classNames(
+        notificationContainerBaseClasses,
+        notificationPositionClasses[props.position],
+        coerceClassValue(attrs.class)
+      )
+    );
+    const renderNotificationItem = (notification) => {
+      const colorScheme = getNotificationTypeClasses(notification.type);
+      const notificationClasses = classNames(
+        notificationBaseClasses,
+        colorScheme.bg,
+        colorScheme.border,
+        notification.className
+      );
+      const iconPath = notification.icon || getNotificationIconPath(notification.type);
+      const iconClass = classNames(notificationIconClasses, colorScheme.icon);
+      const a11yRole = notification.type === "error" ? "alert" : "status";
+      const ariaLive = notification.type === "error" ? "assertive" : "polite";
+      const contentChildren = [
+        h(
+          "div",
+          {
+            class: classNames(notificationTitleClasses, colorScheme.titleText)
+          },
+          notification.title
+        )
+      ];
+      if (notification.description) {
+        contentChildren.push(
+          h(
+            "div",
+            {
+              class: classNames(notificationDescriptionClasses, colorScheme.descriptionText)
+            },
+            notification.description
+          )
+        );
+      }
+      if (notification.actions?.length) {
+        contentChildren.push(
+          h(
+            "div",
+            { class: notificationActionsClasses },
+            notification.actions.map(
+              (action) => h(
+                "button",
+                {
+                  key: action.key ?? action.label,
+                  class: classNames(
+                    notificationActionButtonClasses,
+                    notificationActionButtonTypeClasses[action.type ?? "default"]
+                  ),
+                  type: "button",
+                  disabled: action.disabled,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    action.onClick?.({
+                      id: notification.id,
+                      close: () => props.onClose?.(notification.id)
+                    });
+                    if (action.closeOnClick) {
+                      props.onClose?.(notification.id);
+                    }
+                  }
+                },
+                action.label
+              )
+            )
+          )
+        );
+      }
+      const children = [
+        createStatusIcon(iconPath, iconClass, { "aria-hidden": "true", focusable: "false" }),
+        h("div", { class: notificationContentClasses }, contentChildren)
+      ];
+      if (notification.closable) {
+        children.push(
+          h(
+            "button",
+            {
+              class: notificationCloseButtonClasses,
+              onClick: (e) => {
+                e.stopPropagation();
+                props.onClose?.(notification.id);
+              },
+              "aria-label": NOTIFICATION_CLOSE_ARIA_LABEL,
+              type: "button"
+            },
+            createStatusIcon(notificationCloseIconPath, notificationCloseIconClasses, {
+              "aria-hidden": "true",
+              focusable: "false"
+            })
+          )
+        );
+      }
+      return h(
+        "div",
+        {
+          key: notification.id,
+          class: notificationClasses,
+          role: a11yRole,
+          "aria-live": ariaLive,
+          "aria-atomic": "true",
+          onClick: notification.onClick,
+          onKeydown: (e) => {
+            if (!notification.onClick) return;
+            const key = e.key;
+            if (key === "Enter" || key === " ") {
+              e.preventDefault();
+              notification.onClick();
+            }
+          },
+          tabindex: notification.onClick ? 0 : void 0,
+          style: notification.onClick ? "cursor: pointer;" : void 0,
+          "data-tiger-notification": "",
+          "data-tiger-notification-type": notification.type,
+          "data-tiger-notification-id": String(notification.id)
+        },
+        children
+      );
+    };
+    return () => h(
+      Teleport,
+      { to: "body" },
+      h(
+        "div",
+        {
+          ...attrs,
+          class: containerClasses.value,
+          id: `${NOTIFICATION_CONTAINER_ID_PREFIX}-${props.position}`,
+          "aria-live": "polite",
+          "aria-relevant": "additions",
+          "data-tiger-notification-container": "",
+          "data-tiger-notification-position": props.position
+        },
+        IS_TEST_ENV ? props.notifications.map(renderNotificationItem) : h(
+          TransitionGroup,
+          {
+            name: "notification",
+            tag: "div",
+            class: "flex flex-col gap-3"
+          },
+          () => props.notifications.map(renderNotificationItem)
+        )
+      )
+    );
+  }
+});
+var NotificationContainer_default = NotificationContainer;
+
+export {
+  NotificationContainer,
+  NotificationContainer_default
+};

package/dist/chunk-GTFAC625.mjs

@@ -0,0 +1,120 @@
+import {
+  createStatusIcon,
+  createStatusIconWithLoading
+} from "./chunk-2TNZ4JNT.mjs";
+
+// src/components/MessageContainer.ts
+import { computed, defineComponent, h, Teleport, TransitionGroup } from "vue";
+import {
+  classNames,
+  defaultMessageThemeColors,
+  getMessageIconPath,
+  getMessageTypeClasses,
+  messageBaseClasses,
+  messageCloseButtonClasses,
+  messageCloseIconPath,
+  messageContainerBaseClasses,
+  messageContentClasses,
+  messageIconClasses,
+  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: {
+    position: {
+      type: String,
+      default: "top"
+    },
+    messages: {
+      type: Array,
+      default: () => []
+    },
+    onClose: Function
+  },
+  setup(props) {
+    const containerClasses = computed(() => {
+      return classNames(messageContainerBaseClasses, messagePositionClasses[props.position]);
+    });
+    const renderMessageItem = (message) => {
+      const colorScheme = getMessageTypeClasses(message.type, defaultMessageThemeColors);
+      const messageClasses = classNames(
+        messageBaseClasses,
+        colorScheme.bg,
+        colorScheme.border,
+        colorScheme.text,
+        message.className
+      );
+      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 children = [
+        createStatusIconWithLoading(
+          iconPath,
+          iconClass,
+          message.type === "loading",
+          messageLoadingSpinnerClasses
+        ),
+        h("div", { class: messageContentClasses }, message.content)
+      ];
+      if (message.closable) {
+        children.push(
+          h(
+            "button",
+            {
+              class: messageCloseButtonClasses,
+              onClick: () => props.onClose?.(message.id),
+              "aria-label": MESSAGE_CLOSE_ARIA_LABEL,
+              type: "button"
+            },
+            createStatusIcon(messageCloseIconPath, "w-4 h-4")
+          )
+        );
+      }
+      return h(
+        "div",
+        {
+          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,
+          "data-tiger-message-id": String(message.id)
+        },
+        children
+      );
+    };
+    return () => h(
+      Teleport,
+      { to: "body" },
+      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))
+      )
+    );
+  }
+});
+var MessageContainer_default = MessageContainer;
+
+export {
+  MessageContainer,
+  MessageContainer_default
+};

package/dist/{chunk-W6ZFHHD3.mjs → chunk-GZWZP5AL.mjs}

@@ -1,5 +1,5 @@
 // src/components/AvatarGroup.ts
-import { defineComponent, h, provide } from "vue";
+import { defineComponent, h, provide, reactive, watch } from "vue";
 import {
   coerceClassValue,
   getAvatarGroupClasses,
@@ -28,10 +28,17 @@ var AvatarGroup = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    provide(AVATAR_GROUP_INJECTION_KEY, {
+    const groupContext = reactive({
       size: props.size,
       itemClass: getAvatarGroupItemClasses()
     });
+    watch(
+      () => props.size,
+      (size) => {
+        groupContext.size = size;
+      }
+    );
+    provide(AVATAR_GROUP_INJECTION_KEY, groupContext);
     return () => {
       const children = slots.default?.() ?? [];
       const flatChildren = children.flatMap(

package/dist/{chunk-FMH4CLSA.mjs → chunk-H6FZBFRT.mjs}

@@ -10,6 +10,8 @@ import {
   countLines,
   generateLineNumbers,
   handleTabKey,
+  getActiveLineIndex,
+  getCodeEditorActiveLineClasses,
   codeEditorTextareaClasses,
   codeEditorHighlightClasses
 } from "@expcat/tigercat-core";
@@ -49,6 +51,12 @@ var CodeEditor = defineComponent({
   setup(props, { emit, attrs }) {
     const internalValue = ref(props.defaultValue || "");
     const textareaRef = ref(null);
+    const activeLine = ref(0);
+    const updateActiveLine = () => {
+      const ta = textareaRef.value;
+      if (!ta) return;
+      activeLine.value = getActiveLineIndex(ta.value, ta.selectionStart);
+    };
     const code = computed(() => props.value !== void 0 ? props.value : internalValue.value);
     watch(
       () => props.value,
@@ -77,10 +85,12 @@ var CodeEditor = defineComponent({
       return s;
     });
     const onInput = (e) => {
-      const val = e.target.value;
+      const target = e.target;
+      const val = target.value;
       internalValue.value = val;
       emit("update:value", val);
       emit("change", val);
+      activeLine.value = getActiveLineIndex(val, target.selectionStart);
     };
     const onKeyDown = (e) => {
       if (e.key === "Tab") {
@@ -98,11 +108,18 @@ var CodeEditor = defineComponent({
       }
     };
     const renderHighlightedLine = (line, lineIndex) => {
+      const showActiveLine = props.highlightActiveLine && !props.disabled;
+      const isActive = showActiveLine && lineIndex === activeLine.value;
+      const lineClass = classNames(
+        "min-h-[1.625rem]",
+        isActive && getCodeEditorActiveLineClasses(props.theme)
+      );
       const engine = props.highlighter;
       if (engine?.highlightLine) {
         return h("div", {
           key: lineIndex,
-          class: "min-h-[1.625rem]",
+          class: lineClass,
+          "data-active-line": isActive ? "" : void 0,
           innerHTML: engine.highlightLine(line, props.language, props.theme) || (line === "" ? "\n" : "")
         });
       }
@@ -111,10 +128,11 @@ var CodeEditor = defineComponent({
         const cls = getTokenClasses(token.type, props.theme);
         return cls ? h("span", { class: cls, key: ti }, token.value) : token.value;
       });
-      return h("div", { key: lineIndex, class: "min-h-[1.625rem]" }, [
-        ...spans,
-        line === "" ? "\n" : null
-      ]);
+      return h(
+        "div",
+        { key: lineIndex, class: lineClass, "data-active-line": isActive ? "" : void 0 },
+        [...spans, line === "" ? "\n" : null]
+      );
     };
     return () => {
       const wrapClass = props.wordWrap ? "whitespace-pre-wrap break-all" : "";
@@ -143,6 +161,9 @@ var CodeEditor = defineComponent({
         value: code.value,
         onInput,
         onKeydown: onKeyDown,
+        onSelect: updateActiveLine,
+        onClick: updateActiveLine,
+        onKeyup: updateActiveLine,
         readonly: props.readOnly || props.disabled,
         disabled: props.disabled,
         placeholder: props.placeholder,

package/dist/{chunk-PXRF4IJO.mjs → chunk-HGXD57QM.mjs}

@@ -1,5 +1,13 @@
 // src/components/FloatButton.ts
-import { defineComponent, computed, h, ref, Teleport } from "vue";
+import {
+  defineComponent,
+  computed,
+  h,
+  ref,
+  provide,
+  inject,
+  Teleport
+} from "vue";
 import {
   classNames,
   coerceClassValue,
@@ -9,15 +17,19 @@ import {
   floatButtonSizeClasses,
   floatButtonTypeClasses,
   floatButtonDisabledClasses,
-  floatButtonGroupClasses
+  floatButtonGroupClasses,
+  getViewportOffsetStyle,
+  viewportFloatingBaseClasses,
+  viewportPlacementClasses
 } from "@expcat/tigercat-core";
+var FloatButtonGroupShapeKey = /* @__PURE__ */ Symbol("FloatButtonGroupShape");
 var FloatButton = defineComponent({
   name: "TigerFloatButton",
   inheritAttrs: false,
   props: {
     shape: {
       type: String,
-      default: "circle"
+      default: void 0
     },
     size: {
       type: String,
@@ -43,6 +55,18 @@ var FloatButton = defineComponent({
       type: String,
       default: void 0
     },
+    floating: {
+      type: Boolean,
+      default: false
+    },
+    placement: {
+      type: String,
+      default: "bottom-right"
+    },
+    offset: {
+      type: [Number, String, Object],
+      default: void 0
+    },
     style: {
       type: Object,
       default: void 0
@@ -50,13 +74,22 @@ var FloatButton = defineComponent({
   },
   emits: ["click"],
   setup(props, { slots, emit, attrs }) {
+    const groupShape = inject(
+      FloatButtonGroupShapeKey,
+      void 0
+    );
+    const resolvedShape = computed(
+      () => props.shape ?? groupShape?.value ?? "circle"
+    );
     const classes = computed(
       () => classNames(
         floatButtonBaseClasses,
-        floatButtonShapeClasses[props.shape],
+        floatButtonShapeClasses[resolvedShape.value],
         floatButtonSizeClasses[props.size],
         floatButtonTypeClasses[props.type],
         props.disabled && floatButtonDisabledClasses,
+        props.floating && viewportFloatingBaseClasses,
+        props.floating && viewportPlacementClasses[props.placement],
         props.className,
         coerceClassValue(attrs.class)
       )
@@ -73,7 +106,11 @@ var FloatButton = defineComponent({
         {
           ...attrs,
           class: classes.value,
-          style: mergeStyleValues(attrsRecord.style, props.style),
+          style: mergeStyleValues(
+            props.floating ? getViewportOffsetStyle(props.placement, props.offset) : void 0,
+            attrsRecord.style,
+            props.style
+          ),
           type: "button",
           disabled: props.disabled,
           "aria-label": props.ariaLabel ?? props.tooltip,
@@ -115,6 +152,10 @@ var FloatButtonGroup = defineComponent({
   setup(props, { slots, emit, attrs }) {
     const internalOpen = ref(false);
     const isOpen = computed(() => props.open ?? internalOpen.value);
+    provide(
+      FloatButtonGroupShapeKey,
+      computed(() => props.shape)
+    );
     const toggle = () => {
       const next = !isOpen.value;
       internalOpen.value = next;

package/dist/{chunk-HKRMZODL.mjs → chunk-HIXWZVE5.mjs}

@@ -210,16 +210,20 @@ var MarkdownEditor = defineComponent({
         "aria-label": "Markdown editor",
         "aria-multiline": true
       }) : null;
-      const previewNode = showPreview.value ? h("div", {
-        class: classNames(
-          markdownEditorPreviewClasses,
-          currentMode.value === "split" ? markdownEditorSplitDividerClasses : void 0,
-          !currentValue.value ? markdownEditorEmptyPreviewClasses : void 0
-        ),
-        role: "region",
-        "aria-label": "Markdown preview",
-        innerHTML: currentValue.value ? previewHtml.value : props.placeholder || ""
-      }) : null;
+      const previewNode = showPreview.value ? h(
+        "div",
+        {
+          class: classNames(
+            markdownEditorPreviewClasses,
+            currentMode.value === "split" ? markdownEditorSplitDividerClasses : void 0,
+            !currentValue.value ? markdownEditorEmptyPreviewClasses : void 0
+          ),
+          role: "region",
+          "aria-label": "Markdown preview",
+          ...currentValue.value ? { innerHTML: previewHtml.value } : {}
+        },
+        currentValue.value ? void 0 : props.placeholder
+      ) : null;
       return h(
         "div",
         {

package/dist/{chunk-VVS2CQS4.mjs → chunk-HLPSHCXO.mjs}

@@ -57,7 +57,9 @@ var ChartLegend = defineComponent({
       {
         class: containerClasses.value,
         style: containerStyle.value,
-        role: "list",
+        // A group of toggle buttons is not a "list"; only use list semantics
+        // for the static (non-interactive) legend.
+        role: props.interactive ? "group" : "list",
         "aria-label": "Chart legend",
         "data-chart-legend": "true"
       },
@@ -73,7 +75,10 @@ var ChartLegend = defineComponent({
               props.interactive ? "cursor-pointer hover:text-[color:var(--tiger-text,#374151)] hover:bg-[var(--tiger-chart-legend-row-hover-bg,transparent)] transition-colors" : "cursor-default",
               item.active === false ? "opacity-50" : void 0
             ),
-            role: "listitem",
+            // Interactive items are real buttons; `role="listitem"` would
+            // override the button role, so it is only set for the static legend.
+            role: props.interactive ? void 0 : "listitem",
+            "aria-pressed": props.interactive ? item.active !== false : void 0,
             "data-legend-item": "true",
             onClick: props.interactive ? () => handleClick(item) : void 0,
             onMouseenter: props.interactive ? () => handleHover(item) : void 0,
@@ -91,7 +96,7 @@ var ChartLegend = defineComponent({
               "aria-hidden": "true",
               "data-legend-marker": "true"
             }),
-            h("span", { style: { marginRight: `${props.gap}px` } }, item.label)
+            h("span", null, item.label)
           ]
         )
       )

package/dist/{chunk-PENI3H3I.mjs → chunk-HS4YQGZQ.mjs}

@@ -1,5 +1,5 @@
 // src/components/VirtualList.ts
-import { defineComponent, h, ref, computed } from "vue";
+import { defineComponent, h, ref, computed, onMounted, onUpdated } from "vue";
 import {
   virtualListContainerClasses,
   virtualListInnerClasses,
@@ -24,12 +24,19 @@ var VirtualList = defineComponent({
       default: void 0
     },
     height: { type: Number, default: 400 },
-    overscan: { type: Number, default: 5 }
+    overscan: { type: Number, default: 5 },
+    /** Custom class name (merged with the `class` attribute) */
+    className: { type: String, default: void 0 }
   },
   emits: ["scroll"],
   setup(props, { emit, attrs, slots }) {
     const scrollTop = ref(0);
+    const measureVersion = ref(0);
     const containerRef = ref(null);
+    const itemEls = /* @__PURE__ */ new Map();
+    const isDynamic = computed(
+      () => !props.sizeStrategy && !props.getItemHeight && props.estimatedItemHeight !== void 0
+    );
     const strategy = computed(() => {
       if (props.sizeStrategy) return props.sizeStrategy;
       if (props.getItemHeight) {
@@ -40,9 +47,26 @@ var VirtualList = defineComponent({
       }
       return fixedSizeStrategy(props.itemHeight);
     });
-    const range = computed(
-      () => strategy.value.getRange(scrollTop.value, props.height, props.itemCount, props.overscan)
-    );
+    const range = computed(() => {
+      void measureVersion.value;
+      return strategy.value.getRange(scrollTop.value, props.height, props.itemCount, props.overscan);
+    });
+    function measureDynamic() {
+      if (!isDynamic.value) return;
+      const strat = strategy.value;
+      if (!strat.updateItemHeight) return;
+      let changed = false;
+      itemEls.forEach((el, i) => {
+        const measured = el.offsetHeight;
+        if (measured > 0 && measured !== strat.getItemHeight(i)) {
+          strat.updateItemHeight(i, measured);
+          changed = true;
+        }
+      });
+      if (changed) measureVersion.value += 1;
+    }
+    onMounted(measureDynamic);
+    onUpdated(measureDynamic);
     function handleScroll() {
       if (containerRef.value) {
         scrollTop.value = containerRef.value.scrollTop;
@@ -53,18 +77,24 @@ var VirtualList = defineComponent({
       const { startIndex, endIndex, totalHeight } = range.value;
       const currentStrategy = strategy.value;
       const items = [];
+      const dynamic = isDynamic.value;
+      if (dynamic) itemEls.clear();
       for (let i = startIndex; i <= endIndex; i++) {
         const itemH = currentStrategy.getItemHeight(i);
         const slotContent = slots.default?.({ index: i });
+        const index = i;
         items.push(
           h(
             "div",
             {
-              key: i,
-              style: {
-                height: `${itemH}px`,
-                width: "100%"
-              }
+              key: index,
+              // Auto height in dynamic mode so real content height is measurable.
+              style: dynamic ? { width: "100%" } : { height: `${itemH}px`, width: "100%" },
+              ref: dynamic ? (el) => {
+                if (el)
+                  itemEls.set(index, el.$el ?? el);
+                else itemEls.delete(index);
+              } : void 0
             },
             slotContent
           )
@@ -75,7 +105,11 @@ var VirtualList = defineComponent({
         "div",
         {
           ref: containerRef,
-          class: classNames(virtualListContainerClasses, coerceClassValue(attrs.class)),
+          class: classNames(
+            virtualListContainerClasses,
+            props.className,
+            coerceClassValue(attrs.class)
+          ),
           style: { height: `${props.height}px` },
           onScroll: handleScroll
         },