@expcat/tigercat-vue 2.1.4 → 2.2.0

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, () => {

package/dist/chunk-JUSJUVFQ.mjs

@@ -0,0 +1,76 @@
+// src/composables/useFullscreen.ts
+import {
+  getCurrentInstance,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  toValue
+} from "vue";
+import {
+  exitElementFullscreen,
+  getFullscreenElement,
+  isElementFullscreen,
+  isFullscreenSupported,
+  requestElementFullscreen,
+  resolveFullscreenTarget,
+  subscribeFullscreenChange
+} from "@expcat/tigercat-core";
+function useFullscreen(options = {}) {
+  const getOptions = () => toValue(options);
+  const supported = isFullscreenSupported();
+  const isFullscreen = ref(false);
+  let stop;
+  const sync = () => {
+    const current = getOptions();
+    const target = resolveFullscreenTarget(current.target);
+    const next = isElementFullscreen(target);
+    isFullscreen.value = next;
+    current.onChange?.(next);
+  };
+  const enter = async () => {
+    const current = getOptions();
+    const target = resolveFullscreenTarget(current.target);
+    if (!target) return;
+    if (isElementFullscreen(target)) return;
+    try {
+      await requestElementFullscreen(target);
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error("Fullscreen request failed");
+      current.onError?.(err);
+    }
+  };
+  const exit = async () => {
+    if (!getFullscreenElement()) return;
+    const current = getOptions();
+    try {
+      await exitElementFullscreen();
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error("Fullscreen exit failed");
+      current.onError?.(err);
+    }
+  };
+  const toggle = async () => {
+    if (isFullscreen.value) await exit();
+    else await enter();
+  };
+  if (getCurrentInstance()) {
+    onMounted(() => {
+      sync();
+      stop = subscribeFullscreenChange(sync);
+    });
+    onBeforeUnmount(() => {
+      stop?.();
+    });
+  }
+  return {
+    isFullscreen,
+    supported,
+    enter,
+    exit,
+    toggle
+  };
+}
+
+export {
+  useFullscreen
+};