@expcat/tigercat-vue 2.1.4 → 2.3.0

package/dist/chunk-2WUDJQT7.mjs

@@ -0,0 +1,219 @@
+import {
+  Timeline
+} from "./chunk-K46SNCCE.mjs";
+import {
+  Tag
+} from "./chunk-7PLYHGMY.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
+
+// src/components/WorkflowTimeline.ts
+import { computed, defineComponent, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  resolveWorkflowActionButtonProps,
+  shouldShowWorkflowActions,
+  timelineDescriptionClasses,
+  timelineLabelClasses,
+  workflowStepsToTimelineItems,
+  workflowStepStatusLabel,
+  workflowStepStatusTagVariant
+} from "@expcat/tigercat-core";
+var workflowTimelineRootClasses = "flex flex-col gap-4";
+var workflowActionBarClasses = "flex flex-wrap items-center gap-2";
+var workflowStepHeaderClasses = "flex flex-wrap items-center gap-2";
+var workflowStepActorClasses = "text-sm text-[var(--tiger-text-muted,#6b7280)]";
+var workflowStepCommentClasses = "text-sm text-[var(--tiger-text-secondary,#4b5563)] mt-1";
+function isWorkflowTimelineItem(item) {
+  return typeof item === "object" && item != null && "step" in item && "status" in item && typeof item.status === "string";
+}
+function renderStepContent(item) {
+  const step = item.step;
+  const title = step.title ?? step.label;
+  const statusLabel = workflowStepStatusLabel(item.status);
+  return h("div", { class: "min-w-0" }, [
+    step.time ? h("div", { class: timelineLabelClasses }, step.time) : null,
+    h("div", { class: workflowStepHeaderClasses }, [
+      title ? h("div", { class: timelineDescriptionClasses }, title) : null,
+      h(
+        Tag,
+        {
+          variant: workflowStepStatusTagVariant(item.status),
+          size: "sm",
+          pill: true
+        },
+        { default: () => statusLabel }
+      )
+    ]),
+    step.actor?.name ? h("div", { class: workflowStepActorClasses }, step.actor.name) : null,
+    step.comment ? h("div", { class: workflowStepCommentClasses }, step.comment) : null
+  ]);
+}
+var WorkflowActionBar = defineComponent({
+  name: "TigerWorkflowActionBar",
+  inheritAttrs: false,
+  props: {
+    items: {
+      type: Array,
+      default: void 0
+    },
+    disabled: Boolean,
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["action"],
+  setup(props, { emit, attrs }) {
+    const toolbarClasses = computed(
+      () => classNames(workflowActionBarClasses, props.className, coerceClassValue(attrs.class))
+    );
+    const toolbarStyle = computed(() => mergeStyleValues(attrs.style, props.style));
+    return () => {
+      const items = props.items ?? [];
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: toolbarClasses.value,
+          style: toolbarStyle.value,
+          role: "toolbar",
+          "aria-label": props.ariaLabel ?? attrs["aria-label"] ?? "Workflow actions"
+        },
+        items.map((item) => {
+          const buttonProps = resolveWorkflowActionButtonProps(item);
+          const disabled = Boolean(props.disabled || item.disabled);
+          return h(
+            Button,
+            {
+              key: item.key,
+              size: "sm",
+              variant: buttonProps.variant,
+              danger: buttonProps.danger,
+              disabled,
+              onClick: () => {
+                if (disabled) return;
+                emit("action", item);
+              }
+            },
+            { default: () => item.label }
+          );
+        })
+      );
+    };
+  }
+});
+var WorkflowTimeline = defineComponent({
+  name: "TigerWorkflowTimeline",
+  inheritAttrs: false,
+  props: {
+    steps: {
+      type: Array,
+      default: void 0
+    },
+    actions: {
+      type: Array,
+      default: void 0
+    },
+    showActions: {
+      type: Boolean,
+      default: void 0
+    },
+    mode: {
+      type: String,
+      default: "left"
+    },
+    pending: {
+      type: Boolean,
+      default: false
+    },
+    pendingDot: {
+      type: [String, Object],
+      default: void 0
+    },
+    reverse: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["action"],
+  setup(props, { emit, slots, attrs }) {
+    const timelineItems = computed(() => workflowStepsToTimelineItems(props.steps));
+    const showActionBar = computed(
+      () => shouldShowWorkflowActions(props.steps, props.actions, props.showActions)
+    );
+    const rootClasses = computed(
+      () => classNames(workflowTimelineRootClasses, props.className, coerceClassValue(attrs.class))
+    );
+    const rootStyle = computed(() => mergeStyleValues(attrs.style, props.style));
+    return () => {
+      const timelineSlots = {};
+      if (slots.dot) timelineSlots.dot = slots.dot;
+      if (slots.pending) timelineSlots.pending = slots.pending;
+      timelineSlots.item = (slotProps) => {
+        if (slots.item) return slots.item(slotProps);
+        if (isWorkflowTimelineItem(slotProps.item)) return renderStepContent(slotProps.item);
+        return null;
+      };
+      const actionBar = showActionBar.value && props.actions ? slots.actions ? slots.actions({ actions: props.actions }) : h(WorkflowActionBar, {
+        items: props.actions,
+        onAction: (item) => emit("action", item)
+      }) : null;
+      const {
+        class: _class,
+        style: _style,
+        "aria-label": ariaLabel,
+        ...restAttrs
+      } = attrs;
+      return h(
+        "div",
+        {
+          ...restAttrs,
+          class: rootClasses.value,
+          style: rootStyle.value
+        },
+        [
+          h(
+            Timeline,
+            {
+              items: timelineItems.value,
+              mode: props.mode,
+              pending: props.pending,
+              pendingDot: props.pendingDot,
+              reverse: props.reverse,
+              "aria-label": (typeof ariaLabel === "string" ? ariaLabel : void 0) ?? "Workflow timeline"
+            },
+            timelineSlots
+          ),
+          actionBar
+        ]
+      );
+    };
+  }
+});
+var WorkflowTimeline_default = WorkflowTimeline;
+
+export {
+  WorkflowActionBar,
+  WorkflowTimeline,
+  WorkflowTimeline_default
+};

package/dist/{chunk-4KFAGTGA.mjs → chunk-3GNK4XIP.mjs}

@@ -1,6 +1,6 @@
 import {
   Calendar
-} from "./chunk-XCIQNTJN.mjs";
+} from "./chunk-77L52YWC.mjs";
 import {
   INPUT_GROUP_INJECTION_KEY
 } from "./chunk-J4HGCSOE.mjs";

package/dist/{chunk-MWYNO42Z.mjs → chunk-5IVN54XY.mjs}

@@ -12,7 +12,7 @@ import {
 } from "./chunk-7PLYHGMY.mjs";
 import {
   Text
-} from "./chunk-I77GUQV4.mjs";
+} from "./chunk-OEHI4BZZ.mjs";
 import {
   Card
 } from "./chunk-W4A6L2TC.mjs";

package/dist/{chunk-BFIYTA3E.mjs → chunk-72XR5ZIW.mjs}

@@ -3,8 +3,8 @@ import { defineComponent, h, computed } from "vue";
 import {
   classNames,
   coerceClassValue,
+  getLayoutFooterClasses,
   injectLayoutGridStyles,
-  layoutFooterClasses,
   mergeStyleValues
 } from "@expcat/tigercat-core";
 var Footer = defineComponent({
@@ -23,6 +23,10 @@ var Footer = defineComponent({
       type: String,
       default: void 0
     },
+    size: {
+      type: String,
+      default: "default"
+    },
     style: {
       type: Object,
       default: void 0
@@ -32,7 +36,7 @@ var Footer = defineComponent({
     injectLayoutGridStyles();
     const footerClasses = computed(
       () => classNames(
-        layoutFooterClasses,
+        getLayoutFooterClasses(props.size),
         props.className,
         coerceClassValue(attrs.class)
       )

package/dist/{chunk-XCIQNTJN.mjs → chunk-77L52YWC.mjs}

@@ -15,6 +15,10 @@ import {
 } from "vue";
 import { classNames, coerceClassValue } from "@expcat/tigercat-core";
 import {
+  appendCalendarEventCountLabel,
+  buildCalendarDateCellExtra,
+  calendarDateCellDotClasses,
+  calendarDateCellExtraClasses,
   calendarGridClasses,
   calendarHeaderClasses,
   calendarNavButtonClasses,
@@ -25,6 +29,7 @@ import {
   followCalendarValue,
   formatCalendarDayLabel,
   formatCalendarDayNumber,
+  getCalendarEventDotStyle,
   formatMonthYear,
   getCalendarContainerClasses,
   getCalendarDayClasses,
@@ -78,10 +83,11 @@ var Calendar = defineComponent({
       default: void 0
     },
     locale: { type: Object, default: void 0 },
-    className: { type: String, default: void 0 }
+    className: { type: String, default: void 0 },
+    events: { type: Array, default: void 0 }
   },
   emits: ["update:modelValue", "update:mode", "change", "panel-change"],
-  setup(props, { emit, attrs, expose }) {
+  setup(props, { emit, attrs, expose, slots }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const localeCode = computed(() => mergedLocale.value?.locale);
@@ -351,6 +357,27 @@ var Calendar = defineComponent({
               );
               const isTodayDate = today.value ? isSameDay(date, today.value) : false;
               const isDisabled = isCalendarDateDisabled(date, props.disabledDate);
+              const extra = buildCalendarDateCellExtra({
+                date,
+                events: props.events,
+                inCurrentMonth: isCurrentMonth,
+                today: isTodayDate,
+                selected: isSelected,
+                disabled: isDisabled
+              });
+              const customCell = slots.dateCell?.({ date, events: extra.events, extra });
+              const hasExtra = Boolean(customCell) || extra.events.length > 0;
+              const defaultDots = !customCell && extra.events.length > 0 ? h(
+                "span",
+                { class: calendarDateCellExtraClasses, "aria-hidden": "true" },
+                extra.events.map(
+                  (event, index) => h("span", {
+                    key: event.key ?? `${extra.iso}-${index}`,
+                    class: calendarDateCellDotClasses,
+                    style: getCalendarEventDotStyle(event.color)
+                  })
+                )
+              ) : null;
               return h(
                 "button",
                 {
@@ -358,7 +385,11 @@ var Calendar = defineComponent({
                   type: "button",
                   role: "gridcell",
                   "data-date": iso,
-                  "aria-label": formatCalendarDayLabel(date, localeCode.value),
+                  "aria-label": appendCalendarEventCountLabel(
+                    formatCalendarDayLabel(date, localeCode.value),
+                    extra.events.length,
+                    labels.value.eventCountText
+                  ),
                   "aria-selected": isSelected || isRangeStart || isRangeEnd,
                   "aria-current": isTodayDate ? "date" : void 0,
                   disabled: isDisabled,
@@ -371,12 +402,13 @@ var Calendar = defineComponent({
                     isActive: activeIso.value === iso,
                     isInRange,
                     isRangeStart,
-                    isRangeEnd
+                    isRangeEnd,
+                    hasExtra
                   }),
                   onClick: () => selectDay(date),
                   onFocus: () => activeIso.value = iso
                 },
-                formatCalendarDayNumber(date, localeCode.value)
+                [formatCalendarDayNumber(date, localeCode.value), customCell ?? defaultDots]
               );
             })
           )

package/dist/chunk-7L5MXXHC.mjs

@@ -0,0 +1,85 @@
+import {
+  useDrag
+} from "./chunk-DXL3YHRP.mjs";
+
+// src/components/Drag.ts
+import { computed, defineComponent, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  reorderSequence
+} from "@expcat/tigercat-core";
+var Drag = defineComponent({
+  name: "TigerDrag",
+  inheritAttrs: false,
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    config: {
+      type: Object,
+      default: void 0
+    },
+    containerId: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:items", "items-change", "drag-start", "drag-over", "drop", "drag-end"],
+  setup(props, { emit, slots, attrs }) {
+    const drag = useDrag(() => ({
+      config: props.config,
+      containerId: props.containerId,
+      onDragStart: (event) => emit("drag-start", event),
+      onDragOver: (event) => emit("drag-over", event),
+      onDragEnd: (event) => emit("drag-end", event),
+      onDrop: (event) => {
+        emit("drop", event);
+        if (event.fromIndex === event.toIndex) return;
+        const next = reorderSequence(props.items, event.fromIndex, event.toIndex).map(
+          (item, index) => ({ ...item, index })
+        );
+        emit("update:items", next);
+        emit("items-change", next);
+      }
+    }));
+    const rootClass = computed(
+      () => classNames(
+        "m-0 list-none p-0",
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    return () => {
+      const zone = drag.getDropZoneAttrs();
+      return h(
+        "ul",
+        {
+          ...attrs,
+          ...zone,
+          class: rootClass.value,
+          "data-tiger-drag": "",
+          role: "list"
+        },
+        props.items.map((item) => {
+          const itemAttrs = drag.getDragItemAttrs(item);
+          const isDragging = drag.draggedItem.value?.id === item.id;
+          const custom = slots.item?.({ item, attrs: itemAttrs, isDragging });
+          if (custom) return custom;
+          return h("li", { ...itemAttrs, key: item.id, role: "listitem" }, String(item.id));
+        })
+      );
+    };
+  }
+});
+var Drag_default = Drag;
+
+export {
+  Drag,
+  Drag_default
+};

package/dist/{chunk-FZQAYEIU.mjs → chunk-AIONRIMJ.mjs}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-NWPALCKN.mjs";
 import {
   Text
-} from "./chunk-I77GUQV4.mjs";
+} from "./chunk-OEHI4BZZ.mjs";
 import {
   Card
 } from "./chunk-W4A6L2TC.mjs";

package/dist/{chunk-ETJ4QD6U.mjs → chunk-AYCK22RG.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-7PLYHGMY.mjs";
 import {
   Text
-} from "./chunk-I77GUQV4.mjs";
+} from "./chunk-OEHI4BZZ.mjs";
 import {
   Avatar
 } from "./chunk-OGXSLKXD.mjs";

package/dist/{chunk-35JLHFUT.mjs → chunk-ETW3MBHS.mjs}

@@ -15,6 +15,7 @@ import {
   getCodeLabels,
   mergeStyleValues,
   mergeTigerLocale,
+  renderCodeHighlightHtml,
   resolveLocaleText
 } from "@expcat/tigercat-core";
 var Code = defineComponent({
@@ -29,6 +30,14 @@ var Code = defineComponent({
       type: Boolean,
       default: true
     },
+    language: {
+      type: String,
+      default: void 0
+    },
+    highlighter: {
+      type: Object,
+      default: void 0
+    },
     copyLabel: {
       type: String,
       default: void 0
@@ -110,7 +119,19 @@ var Code = defineComponent({
         style: mergeStyleValues(attrs.style, props.style)
       },
       [
-        h("pre", { class: codeBlockPreClasses }, [h("code", { class: "block" }, props.code)]),
+        h("pre", { class: codeBlockPreClasses }, [
+          (() => {
+            const highlighted = renderCodeHighlightHtml(
+              props.code,
+              props.language,
+              props.highlighter
+            );
+            return highlighted == null ? h("code", { class: "block" }, props.code) : h("code", {
+              class: "block",
+              innerHTML: highlighted
+            });
+          })()
+        ]),
         props.copyable ? h(
           "button",
           {

package/dist/{chunk-ZHAIO7DA.mjs → chunk-GAIFRCYZ.mjs}

@@ -60,6 +60,8 @@ import {
   mergeStyleValues,
   mergeTigerLocale,
   moveFocusInMenu,
+  resolveMenuSearchQuery,
+  shouldShowMenuSearch,
   nextOpenKeys,
   nextSelectedKeys,
   reconcileSearchOpenKeys,
@@ -161,7 +163,7 @@ var Menu = defineComponent({
     popupPortal: { type: Boolean, default: true },
     className: { type: String, default: void 0 },
     style: { type: Object, default: void 0 },
-    searchable: { type: Boolean, default: false },
+    searchable: { type: [Boolean, String], default: false },
     searchValue: { type: String, default: void 0 },
     defaultSearchValue: { type: String, default: "" },
     searchPlaceholder: { type: String, default: void 0 },
@@ -225,10 +227,11 @@ var Menu = defineComponent({
       emit("update:searchValue", value);
       emit("search", value);
     };
+    const showSearch = computed(() => shouldShowMenuSearch(props.searchable, collapsed.value));
     const searchResult = computed(
       () => resolveSearchFilter({
         items: props.items,
-        query: currentSearchValue.value,
+        query: resolveMenuSearchQuery(props.searchable, collapsed.value, currentSearchValue.value),
         filterMode: props.filterMode
       })
     );
@@ -348,7 +351,7 @@ var Menu = defineComponent({
           ...passthroughAttrs.value
         },
         [
-          props.searchable ? h("div", { class: menuSearchFieldClasses }, [
+          showSearch.value ? h("div", { class: menuSearchFieldClasses }, [
             h("input", {
               type: "search",
               value: currentSearchValue.value,

package/dist/chunk-GFSZU7EJ.mjs

@@ -0,0 +1,98 @@
+import {
+  useFullscreen
+} from "./chunk-JUSJUVFQ.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/FullscreenButton.ts
+import { computed, defineComponent, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  fullscreenButtonClasses,
+  getFullscreenLabels,
+  getIconDefinition,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+function renderGlyph(name) {
+  const definition = getIconDefinition(name);
+  if (!definition) return void 0;
+  return h(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: definition.viewBox,
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: "h-5 w-5",
+      "aria-hidden": "true"
+    },
+    definition.paths.map((d) => h("path", { d }))
+  );
+}
+var FullscreenButton = defineComponent({
+  name: "TigerFullscreenButton",
+  inheritAttrs: false,
+  props: {
+    target: {
+      type: [Object, Function],
+      default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    labels: {
+      type: Object,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["change", "error"],
+  setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const labelSet = computed(
+      () => getFullscreenLabels(mergeTigerLocale(config.value.locale, props.locale), props.labels)
+    );
+    const fullscreen = useFullscreen(() => ({
+      target: props.target,
+      onChange: (next) => emit("change", next),
+      onError: (error) => emit("error", error)
+    }));
+    return () => {
+      const label = fullscreen.isFullscreen.value ? labelSet.value.exitAriaLabel : labelSet.value.enterAriaLabel;
+      return h(
+        "button",
+        {
+          ...attrs,
+          type: "button",
+          class: classNames(
+            fullscreenButtonClasses,
+            props.className,
+            coerceClassValue(attrs.class)
+          ),
+          "aria-label": label,
+          "aria-pressed": fullscreen.isFullscreen.value,
+          disabled: !fullscreen.supported,
+          onClick: () => {
+            void fullscreen.toggle();
+          }
+        },
+        renderGlyph(fullscreen.isFullscreen.value ? "fullscreen-exit" : "fullscreen")
+      );
+    };
+  }
+});
+var FullscreenButton_default = FullscreenButton;
+
+export {
+  FullscreenButton,
+  FullscreenButton_default
+};

package/dist/{chunk-TQEN6GDE.mjs → chunk-IKM3NBMK.mjs}

@@ -187,9 +187,8 @@ var Anchor = defineComponent({
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const labelSet = computed(() => getAnchorLabels(mergedLocale.value, props.labels));
-    const scrollLock = createProgrammaticScrollLock(
-      () => resolveAnchorScrollContainer(props.getContainer)
-    );
+    const resolveContainer = () => resolveAnchorScrollContainer(props.getContainer, anchorRef.value);
+    const scrollLock = createProgrammaticScrollLock(() => resolveContainer());
     const scrollOffset = computed(() => props.targetOffset ?? props.offsetTop);
     const links = computed(() => sortAnchorHrefsByDocumentOrder(linkEntries.value));
     const registerLink = (href, node) => {
@@ -217,7 +216,7 @@ var Anchor = defineComponent({
     let stopObserver = null;
     const setupObserver = () => {
       stopObserver?.();
-      const container = resolveAnchorScrollContainer(props.getContainer);
+      const container = resolveContainer();
       const root = container === window ? null : container;
       stopObserver = createAnchorObserver(links.value, {
         offsetTop: scrollOffset.value,
@@ -230,7 +229,7 @@ var Anchor = defineComponent({
       });
     };
     const scrollTo = (href) => {
-      scrollToAnchor(href, resolveAnchorScrollContainer(props.getContainer), scrollOffset.value);
+      scrollToAnchor(href, resolveContainer(), scrollOffset.value);
     };
     const handleLinkClick = (href, event, targetAttr) => {
       const hasTargetElement = Boolean(getAnchorTargetElement(href));
@@ -263,7 +262,7 @@ var Anchor = defineComponent({
       inkRef.value.style.width = next.width;
     };
     const resolvedKey = computed(() => {
-      const resolved = resolveScrollRoot(props.getContainer);
+      const resolved = resolveScrollRoot(props.getContainer, { from: anchorRef.value });
       return resolved.isWindow ? "window" : resolved.target;
     });
     watch(activeLink, () => {