@expcat/tigercat-vue 2.1.1 → 2.1.3

package/README.md

@@ -55,6 +55,12 @@ import subpaths lives in
 `Message` and `notification` are also available as imperative command APIs from
 the package root; `notification` is a command API, not a component.
 
+## Composables
+
+`useFormController`, `useDrag`, and `useChartInteraction`. Signatures are listed
+in
+[api-summary.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/shared/api-summary.md).
+
 ## License
 
 [MIT](https://opensource.org/licenses/MIT)

package/dist/{chunk-RRLE7QRH.mjs → chunk-2GYERJBM.mjs}

@@ -1,66 +1,64 @@
 import {
   TabPane,
   Tabs
-} from "./chunk-U6OGGZBY.mjs";
+} from "./chunk-B4RZHDOU.mjs";
 import {
   List
-} from "./chunk-GQOPDD44.mjs";
-import {
-  Button
-} from "./chunk-YZBQ6IR7.mjs";
+} from "./chunk-MPYKNKZU.mjs";
 import {
   Loading
-} from "./chunk-ZOP7PEKY.mjs";
+} from "./chunk-OO27UB75.mjs";
 import {
   Text
-} from "./chunk-NN6AINLG.mjs";
+} from "./chunk-I77GUQV4.mjs";
 import {
   Card
-} from "./chunk-TC6ZPQFT.mjs";
+} from "./chunk-W4A6L2TC.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/NotificationCenter.ts
-import { defineComponent, computed, ref, watch, h } from "vue";
+import { defineComponent, computed, ref, watch, getCurrentInstance, h } from "vue";
 import {
   classNames,
   coerceClassValue,
   mergeStyleValues,
   buildNotificationGroups,
   formatActivityTime,
+  formatBadgeCountLabel,
+  shouldUseNotificationTabs,
   getNotificationCenterLabels,
   mergeTigerLocale,
-  resolveLocaleText
+  resolveLocaleText,
+  notificationCenterItemClasses,
+  notificationCenterUnreadItemClasses,
+  notificationCenterReadItemClasses,
+  notificationCenterReadTitleClasses,
+  notificationCenterUnreadTitleClasses,
+  notificationCenterUnreadDotClasses,
+  notificationCenterTimeClasses,
+  notificationCenterReadDescriptionClasses,
+  notificationCenterUnreadDescriptionClasses,
+  notificationCenterItemActionClasses,
+  notificationCenterEmptyIconWrapperClasses,
+  notificationCenterEmptyIconClasses,
+  notificationCenterEmptyTextClasses,
+  notificationCenterLoadingClasses,
+  notificationCenterCardClasses,
+  notificationCenterTitleClasses,
+  notificationCenterUnreadBadgeClasses,
+  notificationCenterMarkAllBaseClasses,
+  notificationCenterMarkAllEnabledClasses,
+  notificationCenterMarkAllDisabledClasses,
+  notificationCenterFilterGroupClasses,
+  notificationCenterFilterButtonClasses,
+  notificationCenterFilterActiveClasses,
+  notificationCenterFilterIdleClasses
 } from "@expcat/tigercat-core";
-
-// ../core/src/internal/notification-center-styles.ts
-var notificationCenterItemClasses = "tiger-motion-aware group relative flex items-start gap-3.5 w-full p-3.5 rounded-[var(--tiger-radius-lg,0.75rem)] hover:bg-[var(--tiger-surface-muted,#f9fafb)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var notificationCenterUnreadItemClasses = "bg-[var(--tiger-outline-bg-hover,#eff6ff)] border-l-[3px] border-l-[var(--tiger-primary,#2563eb)] -ml-[3px] pl-[calc(0.875rem-3px)]";
-var notificationCenterReadItemClasses = "border-l-[3px] border-l-transparent -ml-[3px] pl-[calc(0.875rem-3px)]";
-var notificationCenterReadTitleClasses = "text-[var(--tiger-text-secondary,#4b5563)]";
-var notificationCenterUnreadTitleClasses = "text-[var(--tiger-text,#111827)]";
-var notificationCenterUnreadDotClasses = "tiger-motion-aware w-1.5 h-1.5 rounded-full bg-[var(--tiger-primary,#2563eb)] shrink-0 shadow-sm animate-pulse";
-var notificationCenterTimeClasses = "text-[11px] text-[var(--tiger-text-muted,#6b7280)] font-medium whitespace-nowrap flex-shrink-0 self-center";
-var notificationCenterReadDescriptionClasses = "text-[var(--tiger-text-muted,#6b7280)]";
-var notificationCenterUnreadDescriptionClasses = "text-[var(--tiger-text-secondary,#4b5563)]";
-var notificationCenterItemActionClasses = "tiger-motion-aware opacity-0 group-hover:opacity-100 focus:opacity-100 rounded-full px-2.5 py-1 text-[11px] font-semibold bg-[var(--tiger-surface-muted,#f3f4f6)] hover:bg-[var(--tiger-fill-hover,#e5e7eb)] text-[var(--tiger-text-secondary,#374151)] border-0 flex-shrink-0 self-center [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var notificationCenterEmptyIconWrapperClasses = "p-3.5 bg-[var(--tiger-surface-muted,#f9fafb)] rounded-full mb-3 shadow-inner";
-var notificationCenterEmptyIconClasses = "tiger-motion-aware w-8 h-8 text-[var(--tiger-text-muted,#9ca3af)] animate-pulse";
-var notificationCenterEmptyTextClasses = "font-semibold text-[var(--tiger-text-muted,#6b7280)]";
-var notificationCenterLoadingClasses = "text-[var(--tiger-primary,#2563eb)] font-medium";
-var notificationCenterCardClasses = "tiger-motion-aware w-full rounded-[var(--tiger-radius-xl,1rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-[var(--tiger-shadow-glass,0_8px_30px_rgb(0_0_0_/_0.04))] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] overflow-hidden";
-var notificationCenterTitleClasses = "text-[var(--tiger-text,#111827)]";
-var notificationCenterUnreadBadgeClasses = "tiger-motion-aware inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[11px] font-bold rounded-full bg-[var(--tiger-primary,#2563eb)] text-white shadow-sm animate-pulse";
-var notificationCenterMarkAllBaseClasses = "tiger-motion-aware text-xs font-semibold transition-colors";
-var notificationCenterMarkAllEnabledClasses = "text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)]";
-var notificationCenterMarkAllDisabledClasses = "text-[var(--tiger-text-muted,#9ca3af)]";
-var notificationCenterFilterGroupClasses = "inline-flex items-center gap-0.5 p-0.5 rounded-[var(--tiger-radius-md,0.5rem)] bg-[var(--tiger-surface-muted,#f3f4f6)] self-start";
-var notificationCenterFilterButtonClasses = "tiger-motion-aware px-3.5 py-1 text-xs font-semibold rounded-[var(--tiger-radius-sm,0.375rem)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var notificationCenterFilterActiveClasses = "bg-[var(--tiger-surface,#ffffff)] text-[var(--tiger-text,#111827)] shadow-sm";
-var notificationCenterFilterIdleClasses = "text-[var(--tiger-text-muted,#6b7280)] hover:text-[var(--tiger-text,#111827)]";
-
-// src/components/NotificationCenter.ts
 var getGroupKey = (group, index) => {
   return group.key ?? group.title ?? index;
 };
@@ -171,11 +169,19 @@ var NotificationCenter = defineComponent({
     "item-read-change"
   ],
   setup(props, { emit, attrs }) {
+    const instance = getCurrentInstance();
+    const vnodeProps = () => instance?.vnode.props ?? {};
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const labels = computed(() => getNotificationCenterLabels(mergedLocale.value, props.labels));
     const resolvedGroups = computed(
-      () => buildNotificationGroups(props.items, props.groups, props.groupBy, props.groupOrder)
+      () => buildNotificationGroups(
+        props.items,
+        props.groups,
+        props.groupBy,
+        props.groupOrder,
+        labels.value.defaultGroupTitle
+      )
     );
     const internalActiveGroupKey = ref(props.defaultActiveGroupKey);
     const internalReadFilter = ref(props.defaultReadFilter ?? "all");
@@ -214,9 +220,16 @@ var NotificationCenter = defineComponent({
       });
     };
     watch(
-      () => props.items,
+      () => [props.items, props.groups],
       () => {
-        if (props.manageReadState) readStateOverrides.value = /* @__PURE__ */ new Map();
+        if (!props.manageReadState || readStateOverrides.value.size === 0) return;
+        const source = (props.groups ?? []).flatMap((group) => group.items ?? []).concat(props.items ?? []);
+        const next = new Map(readStateOverrides.value);
+        for (const [id, read] of readStateOverrides.value) {
+          const item = source.find((entry) => entry.id === id);
+          if (!item || Boolean(item.read) === read) next.delete(id);
+        }
+        readStateOverrides.value = next;
       }
     );
     const effectiveGroups = computed(
@@ -225,17 +238,6 @@ var NotificationCenter = defineComponent({
         items: applyReadOverrides(group.items)
       }))
     );
-    const effectiveCurrentGroup = computed(() => {
-      const groups = effectiveGroups.value;
-      if (groups.length === 0) return void 0;
-      const activeKey = currentGroupKey.value;
-      if (activeKey === void 0) return groups[0];
-      const matchedIndex = groups.findIndex(
-        (group, index) => getGroupKey(group, index) === activeKey
-      );
-      return matchedIndex >= 0 ? groups[matchedIndex] : groups[0];
-    });
-    const effectiveCurrentGroupItems = computed(() => effectiveCurrentGroup.value?.items ?? []);
     const effectiveItems = computed(() => applyReadOverrides(props.items));
     const totalUnread = computed(() => {
       const allItems = effectiveGroups.value.flatMap((group) => group.items);
@@ -251,7 +253,11 @@ var NotificationCenter = defineComponent({
         return true;
       });
     };
-    const hasUnread = computed(() => effectiveCurrentGroupItems.value.some((item) => !item.read));
+    const allManagedItems = computed(() => {
+      const grouped = effectiveGroups.value.flatMap((group) => group.items);
+      return grouped.length > 0 ? grouped : effectiveItems.value;
+    });
+    const hasUnread = computed(() => allManagedItems.value.some((item) => !item.read));
     const groupTabData = computed(
       () => resolvedGroups.value.map((group, index) => {
         const effectiveGroup = effectiveGroups.value.find(
@@ -292,13 +298,13 @@ var NotificationCenter = defineComponent({
       emit("read-filter-change", filter);
     };
     const handleMarkAllRead = () => {
-      const items = effectiveCurrentGroupItems.value;
+      const items = allManagedItems.value;
       if (props.manageReadState) {
         const next = new Map(readStateOverrides.value);
         items.forEach((item) => next.set(item.id, true));
         readStateOverrides.value = next;
       }
-      emit("mark-all-read", currentGroupKey.value, items);
+      emit("mark-all-read", void 0, items);
     };
     const handleItemClick = (item, index) => {
       emit("item-click", item, index);
@@ -320,13 +326,17 @@ var NotificationCenter = defineComponent({
       return h(
         "div",
         {
-          class: notificationCenterFilterGroupClasses
+          class: notificationCenterFilterGroupClasses,
+          role: "radiogroup"
         },
         options.map(
           (option) => h(
             "button",
             {
               key: option.key,
+              type: "button",
+              role: "radio",
+              "aria-checked": currentReadFilter.value === option.key,
               class: classNames(
                 notificationCenterFilterButtonClasses,
                 currentReadFilter.value === option.key ? notificationCenterFilterActiveClasses : notificationCenterFilterIdleClasses
@@ -340,7 +350,7 @@ var NotificationCenter = defineComponent({
     };
     const renderListItem = (item, _index) => {
       const isRead = Boolean(item.read);
-      const timeText = item.time ? formatActivityTime(item.time) : "";
+      const timeText = formatActivityTime(item.time, mergedLocale.value);
       return h(
         "div",
         {
@@ -364,7 +374,8 @@ var NotificationCenter = defineComponent({
                   { default: () => item.title }
                 ),
                 !isRead ? h("span", {
-                  class: notificationCenterUnreadDotClasses
+                  class: notificationCenterUnreadDotClasses,
+                  "aria-hidden": "true"
                 }) : null
               ]),
               timeText ? h(
@@ -452,11 +463,11 @@ var NotificationCenter = defineComponent({
         List,
         {
           dataSource: items,
+          rowKey: "id",
           split: true,
-          bordered: "divided",
-          hoverable: true,
+          hoverable: typeof vnodeProps().onItemClick === "function",
           emptyText: resolveLocaleText(labels.value.emptyText, props.emptyText),
-          onItemClick: handleItemClick
+          onItemClick: typeof vnodeProps().onItemClick === "function" ? handleItemClick : void 0
         },
         {
           renderItem: ({ item, index }) => renderListItem(item, index)
@@ -468,6 +479,7 @@ var NotificationCenter = defineComponent({
       {
         type: "line",
         size: "small",
+        swipeable: false,
         activeKey: currentGroupKey.value,
         onChange: handleGroupChange
       },
@@ -508,7 +520,12 @@ var NotificationCenter = defineComponent({
             totalUnread.value > 0 ? h(
               "span",
               {
-                class: notificationCenterUnreadBadgeClasses
+                class: notificationCenterUnreadBadgeClasses,
+                "aria-label": formatBadgeCountLabel(
+                  labels.value.unreadCountText,
+                  totalUnread.value,
+                  mergedLocale.value?.locale
+                )
               },
               String(totalUnread.value)
             ) : null
@@ -532,13 +549,29 @@ var NotificationCenter = defineComponent({
         ]),
         renderReadFilterButtons()
       ]);
-      const content = props.loading ? h("div", { class: "flex items-center justify-center py-16" }, [
+      const listBody = shouldUseNotificationTabs(props.groups, props.groupBy) ? resolvedGroups.value.length > 0 ? h("div", { class: "-mx-4 -mb-4" }, [renderTabs()]) : h("div", { class: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto" }, [renderList([])]) : h("div", { class: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto" }, [
+        renderList(filteredFlatItems.value)
+      ]);
+      const hasList = shouldUseNotificationTabs(props.groups, props.groupBy) ? resolvedGroups.value.length > 0 || filteredFlatItems.value.length > 0 : filteredFlatItems.value.length > 0;
+      const content = props.loading && !hasList ? h("div", { class: "flex items-center justify-center py-16" }, [
         h(Loading, {
           text: resolveLocaleText(labels.value.loadingText, props.loadingText),
           class: notificationCenterLoadingClasses
         })
-      ]) : resolvedGroups.value.length > 0 ? h("div", { class: "-mx-4 -mb-4" }, [renderTabs()]) : h("div", { class: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto" }, [
-        renderList(filteredFlatItems.value)
+      ]) : h("div", { class: "relative", "aria-busy": props.loading ? "true" : void 0 }, [
+        listBody,
+        props.loading ? h(
+          "div",
+          {
+            class: "absolute inset-0 flex items-center justify-center bg-[var(--tiger-surface,#ffffff)]/70"
+          },
+          [
+            h(Loading, {
+              text: resolveLocaleText(labels.value.loadingText, props.loadingText),
+              class: notificationCenterLoadingClasses
+            })
+          ]
+        ) : null
       ]);
       const ariaLabel = attrs["aria-label"] ?? (attrs["aria-labelledby"] ? void 0 : resolveLocaleText(labels.value.title, props.title));
       return h(
@@ -548,6 +581,7 @@ var NotificationCenter = defineComponent({
           class: wrapperClasses.value,
           style: wrapperStyle.value,
           role: attrs.role ?? "region",
+          "aria-busy": props.loading ? "true" : void 0,
           "aria-label": ariaLabel,
           "data-tiger-notification-center": true
         },

package/dist/{chunk-3MO7A4GU.mjs → chunk-2HP6DX7Q.mjs}

@@ -1,13 +1,18 @@
 // src/components/Link.ts
 import { defineComponent, computed, h } from "vue";
 import {
-  classNames,
-  getLinkVariantClasses,
   getSecureRel,
-  linkBaseClasses,
-  linkDisabledClasses,
-  linkSizeClasses
+  resolveLinkClasses
 } from "@expcat/tigercat-core";
+function callListener(listener, event) {
+  if (typeof listener === "function") {
+    listener(event);
+    return;
+  }
+  if (Array.isArray(listener)) {
+    for (const item of listener) callListener(item, event);
+  }
+}
 var Link = defineComponent({
   name: "TigerLink",
   inheritAttrs: false,
@@ -31,9 +36,9 @@ var Link = defineComponent({
     target: {
       type: String
     },
-    /** Auto-set to 'noopener noreferrer' when target="_blank" */
+    /** `_blank` always merges noopener noreferrer into rel */
     rel: { type: String },
-    /** @default true */
+    /** Underline at rest. @default true */
     underline: {
       type: Boolean,
       default: true
@@ -44,13 +49,12 @@ var Link = defineComponent({
   },
   setup(props, { slots, emit, attrs }) {
     const linkClasses = computed(
-      () => classNames(
-        linkBaseClasses,
-        getLinkVariantClasses(props.variant, void 0, { disabled: props.disabled }),
-        linkSizeClasses[props.size],
-        props.underline && "hover:underline",
-        props.disabled && linkDisabledClasses
-      )
+      () => resolveLinkClasses({
+        variant: props.variant,
+        size: props.size,
+        underline: props.underline,
+        disabled: props.disabled
+      })
     );
     const computedRel = computed(() => getSecureRel(props.target, props.rel));
     const handleClick = (event) => {
@@ -65,14 +69,16 @@ var Link = defineComponent({
       if (props.disabled && (event.key === "Enter" || event.key === " ")) {
         event.preventDefault();
         event.stopPropagation();
+        return;
       }
+      callListener(attrs.onKeydown, event);
     };
     return () => h(
       "a",
       {
         ...attrs,
         class: [linkClasses.value, attrs.class],
-        href: props.disabled ? void 0 : props.href,
+        href: props.href,
         target: props.target,
         rel: computedRel.value,
         "aria-disabled": props.disabled ? "true" : void 0,

package/dist/{chunk-BC74Z6IG.mjs → chunk-2J6F4OVC.mjs}

@@ -4,44 +4,32 @@ import {
   classNames,
   coerceClassValue,
   getLayoutHeaderClasses,
+  injectLayoutGridStyles,
   mergeStyleValues
 } from "@expcat/tigercat-core";
 var Header = defineComponent({
   name: "TigerHeader",
   inheritAttrs: false,
   props: {
-    /**
-     * Additional CSS classes
-     */
     className: {
       type: String,
       default: void 0
     },
-    /**
-     * Header visual style.
-     * @default 'default'
-     */
     variant: {
       type: String,
       default: "default"
     },
-    /**
-     * Header height (CSS value)
-     * @default '64px'
-     */
     height: {
       type: String,
-      default: "64px"
+      default: void 0
     },
-    /**
-     * Custom styles
-     */
     style: {
       type: Object,
       default: void 0
     }
   },
   setup(props, { slots, attrs }) {
+    injectLayoutGridStyles();
     const headerClasses = computed(
       () => classNames(
         getLayoutHeaderClasses(props.variant),
@@ -54,7 +42,7 @@ var Header = defineComponent({
       {
         ...attrs,
         class: headerClasses.value,
-        style: mergeStyleValues(props.style, { height: props.height })
+        style: mergeStyleValues(props.style, props.height ? { height: props.height } : void 0)
       },
       slots.default?.()
     );