@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-3ONCXHE5.mjs → chunk-H7IBRMXU.mjs}

@@ -1,8 +1,10 @@
 // src/components/Marquee.ts
-import { defineComponent, h, ref } from "vue";
+import { defineComponent, h, onMounted, ref } from "vue";
 import {
   composeComponentClasses,
+  getMarqueeCloneAttributes,
   getMarqueeContentClasses,
+  getMarqueeContentStyle,
   getMarqueeRootClasses,
   getMarqueeTrackClasses,
   getMarqueeTrackStyle,
@@ -10,9 +12,10 @@ import {
   isMarqueeFocusInside,
   isMarqueePaused,
   mergeStyleValues,
-  resolveMarqueeAriaLabel,
   resolveMarqueeDirection,
+  resolveMarqueePauseOnFocus,
   resolveMarqueePauseOnHover,
+  resolveMarqueeRegion,
   resolveMarqueeRepeat
 } from "@expcat/tigercat-core";
 var Marquee = defineComponent({
@@ -20,7 +23,8 @@ var Marquee = defineComponent({
   inheritAttrs: false,
   props: {
     /**
-     * Scroll direction
+     * Scroll direction. `left`/`right` are logical (inline-start/end).
+     * Vertical height is the first copy unless the root height is set.
      * @default 'left'
      */
     direction: {
@@ -36,13 +40,30 @@ var Marquee = defineComponent({
       default: void 0
     },
     /**
-     * Pause looping while hovered or while focus is inside the region
+     * Pause looping while hovered. Does not control focus-within pause.
      * @default true
      */
     pauseOnHover: {
       type: Boolean,
       default: true
     },
+    /**
+     * Pause looping while focus is inside the region.
+     * Independent of pauseOnHover; default stays on so turning off hover
+     * does not remove the keyboard pause.
+     * @default true
+     */
+    pauseOnFocus: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Controlled pause. When set, hover/focus no longer derive the flag.
+     */
+    paused: {
+      type: Boolean,
+      default: void 0
+    },
     /**
      * Gap between items and between duplicated copies.
      * A number is pixels; a string is a CSS length.
@@ -54,7 +75,8 @@ var Marquee = defineComponent({
     },
     /**
      * How many copies of the content to render for a seamless loop.
-     * Values below 2 skip looping and show a single static copy.
+     * Omitted or non-finite → 2. Values below 2 (including 0) show one
+     * static copy. Extra copies do not grow a vertical viewport.
      * @default 2
      */
     repeat: {
@@ -62,8 +84,7 @@ var Marquee = defineComponent({
       default: void 0
     },
     /**
-     * Accessible name for the region
-     * @default 'Scrolling content'
+     * Accessible name for the region. Omitted or blank: not a landmark.
      */
     ariaLabel: {
       type: String,
@@ -85,7 +106,9 @@ var Marquee = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    injectMarqueeStyles();
+    onMounted(() => {
+      injectMarqueeStyles();
+    });
     const hovered = ref(false);
     const focused = ref(false);
     function callAttrHandler(handler, event) {
@@ -98,22 +121,30 @@ var Marquee = defineComponent({
       const attrsRecord = attrs;
       const direction = resolveMarqueeDirection(props.direction);
       const pauseOnHover = resolveMarqueePauseOnHover(props.pauseOnHover);
+      const pauseOnFocus = resolveMarqueePauseOnFocus(props.pauseOnFocus);
       const copies = resolveMarqueeRepeat(props.repeat);
       const paused = isMarqueePaused({
+        paused: props.paused,
         pauseOnHover,
+        pauseOnFocus,
         hovered: hovered.value,
         focused: focused.value
       });
       const attrAriaLabel = typeof attrsRecord["aria-label"] === "string" ? attrsRecord["aria-label"] : void 0;
-      const ariaLabel = resolveMarqueeAriaLabel(attrAriaLabel ?? props.ariaLabel);
+      const attrLabelledBy = typeof attrsRecord["aria-labelledby"] === "string" ? attrsRecord["aria-labelledby"] : void 0;
+      const region = resolveMarqueeRegion({
+        ariaLabel: attrAriaLabel ?? props.ariaLabel,
+        labelledBy: attrLabelledBy
+      });
       const contentCopies = Array.from({ length: copies }, (_, index) => {
         const clone = index > 0;
         return h(
           "div",
           {
             class: getMarqueeContentClasses({ direction, clone }),
+            style: getMarqueeContentStyle({ clone, index }),
             "data-marquee-content": "",
-            ...clone ? { "data-marquee-clone": "", "aria-hidden": "true" } : {}
+            ...clone ? getMarqueeCloneAttributes() : {}
           },
           slots.default?.()
         );
@@ -126,18 +157,21 @@ var Marquee = defineComponent({
             getMarqueeRootClasses({
               direction,
               pauseOnHover,
+              pauseOnFocus,
+              paused: props.paused,
               repeat: copies,
               className: props.className
             }),
             attrsRecord.class
           ),
           style: mergeStyleValues(attrsRecord.style, props.style),
-          role: "region",
-          "aria-label": ariaLabel,
+          role: region.role,
+          "aria-label": region.ariaLabel,
           "data-marquee": "",
           "data-marquee-direction": direction,
           "data-marquee-paused": paused ? "true" : "false",
           "data-marquee-pause-on-hover": pauseOnHover ? "true" : "false",
+          "data-marquee-pause-on-focus": pauseOnFocus ? "true" : "false",
           onMouseenter: (event) => {
             if (pauseOnHover) hovered.value = true;
             callAttrHandler(attrsRecord.onMouseenter, event);
@@ -147,11 +181,11 @@ var Marquee = defineComponent({
             callAttrHandler(attrsRecord.onMouseleave, event);
           },
           onFocusin: (event) => {
-            if (pauseOnHover) focused.value = true;
+            if (pauseOnFocus) focused.value = true;
             callAttrHandler(attrsRecord.onFocusin, event);
           },
           onFocusout: (event) => {
-            if (pauseOnHover && !isMarqueeFocusInside(event.currentTarget, event.relatedTarget)) {
+            if (pauseOnFocus && !isMarqueeFocusInside(event.currentTarget, event.relatedTarget)) {
               focused.value = false;
             }
             callAttrHandler(attrsRecord.onFocusout, event);

package/dist/chunk-HFGELYYC.mjs

@@ -0,0 +1,295 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Descriptions.ts
+import { computed, defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  devWarn,
+  getDescriptionsClasses,
+  getDescriptionsContentClasses,
+  getDescriptionsHorizontalColSpan,
+  getDescriptionsLabelClasses,
+  getDescriptionsLabels,
+  getDescriptionsTableClasses,
+  getDescriptionsVerticalGridStyle,
+  getDescriptionsVerticalItemClasses,
+  groupItemsIntoRows,
+  descriptionsCaptionClasses,
+  descriptionsExtraClasses,
+  descriptionsHeaderClasses,
+  descriptionsTitleClasses,
+  isResponsiveMap,
+  mergeStyleValues,
+  mergeTigerLocale,
+  observeElementSize,
+  resolveResponsiveValue
+} from "@expcat/tigercat-core";
+var descriptionsId = 0;
+var Descriptions = defineComponent({
+  name: "TigerDescriptions",
+  inheritAttrs: false,
+  props: {
+    title: { type: [String, Number], default: void 0 },
+    extra: { type: null, default: void 0 },
+    bordered: { type: Boolean, default: false },
+    column: {
+      type: [Number, Object],
+      default: 3
+    },
+    size: { type: String, default: "md" },
+    layout: {
+      type: String,
+      default: "horizontal"
+    },
+    colon: { type: Boolean, default: true },
+    labelStyle: {
+      type: Object,
+      default: void 0
+    },
+    contentStyle: {
+      type: Object,
+      default: void 0
+    },
+    items: { type: Array, default: () => [] },
+    locale: { type: Object, default: void 0 },
+    className: { type: String, default: void 0 },
+    style: {
+      type: [Object, String],
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const colonGlyph = computed(() => getDescriptionsLabels(mergedLocale.value).colon);
+    const titleId = `tiger-descriptions-title-${++descriptionsId}`;
+    const rootRef = ref(null);
+    const containerWidth = ref(0);
+    let stopSize;
+    const bindSize = () => {
+      stopSize?.();
+      stopSize = void 0;
+      if (!isResponsiveMap(props.column)) {
+        containerWidth.value = 0;
+        return;
+      }
+      stopSize = observeElementSize(rootRef.value, ({ width }) => {
+        containerWidth.value = width;
+      });
+    };
+    onMounted(bindSize);
+    onBeforeUnmount(() => stopSize?.());
+    watch(
+      () => props.column,
+      () => bindSize()
+    );
+    const column = computed(() => resolveResponsiveValue(props.column, containerWidth.value, 3));
+    const rows = computed(() => groupItemsIntoRows(props.items, column.value));
+    const useCaption = computed(
+      () => Boolean(
+        props.title && !props.extra && !slots.extra && (props.layout === "horizontal" || props.bordered)
+      )
+    );
+    const showHeader = computed(
+      () => Boolean(props.extra || slots.extra || slots.title || props.title && !useCaption.value)
+    );
+    function labelText(item) {
+      return [item.label, props.colon ? colonGlyph.value : ""];
+    }
+    function renderHorizontal() {
+      if (props.items.length === 0) return null;
+      return h(
+        "table",
+        {
+          class: getDescriptionsTableClasses(props.bordered),
+          "aria-labelledby": props.title ? titleId : void 0
+        },
+        [
+          useCaption.value ? h("caption", { class: descriptionsCaptionClasses, id: titleId }, props.title) : null,
+          h(
+            "tbody",
+            {},
+            rows.value.map(
+              (rowItems) => h(
+                "tr",
+                {},
+                rowItems.flatMap((item) => [
+                  h(
+                    "th",
+                    {
+                      scope: "row",
+                      class: classNames(
+                        getDescriptionsLabelClasses(props.bordered, props.size, "horizontal"),
+                        item.labelClassName
+                      ),
+                      style: props.labelStyle
+                    },
+                    labelText(item)
+                  ),
+                  h(
+                    "td",
+                    {
+                      class: classNames(
+                        getDescriptionsContentClasses(props.bordered, props.size, "horizontal"),
+                        item.contentClassName
+                      ),
+                      style: props.contentStyle,
+                      colspan: getDescriptionsHorizontalColSpan(item.span || 1)
+                    },
+                    item.content
+                  )
+                ])
+              )
+            )
+          )
+        ]
+      );
+    }
+    function renderVertical() {
+      if (props.items.length === 0) return null;
+      if (props.bordered) {
+        return h(
+          "table",
+          {
+            class: getDescriptionsTableClasses(true),
+            "aria-labelledby": props.title ? titleId : void 0
+          },
+          [
+            useCaption.value ? h("caption", { class: descriptionsCaptionClasses, id: titleId }, props.title) : null,
+            h(
+              "tbody",
+              {},
+              rows.value.map(
+                (rowItems) => h(
+                  "tr",
+                  {},
+                  rowItems.map(
+                    (item) => h(
+                      "td",
+                      {
+                        colspan: item.span || 1,
+                        class: getDescriptionsVerticalItemClasses(props.size, true)
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: classNames(
+                              getDescriptionsLabelClasses(true, props.size, "vertical"),
+                              item.labelClassName
+                            ),
+                            style: props.labelStyle
+                          },
+                          labelText(item)
+                        ),
+                        h(
+                          "div",
+                          {
+                            class: classNames(
+                              getDescriptionsContentClasses(true, props.size, "vertical"),
+                              item.contentClassName
+                            ),
+                            style: props.contentStyle
+                          },
+                          item.content
+                        )
+                      ]
+                    )
+                  )
+                )
+              )
+            )
+          ]
+        );
+      }
+      return h(
+        "dl",
+        {
+          class: "grid w-full",
+          style: getDescriptionsVerticalGridStyle(column.value),
+          "aria-labelledby": props.title ? titleId : void 0
+        },
+        rows.value.flatMap(
+          (rowItems) => rowItems.map(
+            (item) => h(
+              "div",
+              {
+                class: getDescriptionsVerticalItemClasses(props.size, false),
+                style: { gridColumn: `span ${item.span || 1}` }
+              },
+              [
+                h(
+                  "dt",
+                  {
+                    class: classNames(
+                      getDescriptionsLabelClasses(false, props.size, "vertical"),
+                      item.labelClassName
+                    ),
+                    style: props.labelStyle
+                  },
+                  labelText(item)
+                ),
+                h(
+                  "dd",
+                  {
+                    class: classNames(
+                      getDescriptionsContentClasses(false, props.size, "vertical"),
+                      item.contentClassName
+                    ),
+                    style: props.contentStyle
+                  },
+                  item.content
+                )
+              ]
+            )
+          )
+        )
+      );
+    }
+    return () => {
+      if (slots.default && props.items.length === 0) {
+        devWarn(
+          "Descriptions.children",
+          "Descriptions: `items` is the data source. Default slot content is ignored and is not description rows."
+        );
+      }
+      return h(
+        "div",
+        {
+          ...attrs,
+          ref: rootRef,
+          class: classNames(
+            getDescriptionsClasses(props.size, props.bordered),
+            props.className,
+            coerceClassValue(attrs.class)
+          ),
+          style: mergeStyleValues(props.style, attrs.style)
+        },
+        [
+          showHeader.value ? h("div", { class: descriptionsHeaderClasses }, [
+            props.title || slots.title ? h(
+              "div",
+              { class: descriptionsTitleClasses, id: titleId },
+              slots.title?.() || props.title
+            ) : null,
+            props.extra || slots.extra ? h(
+              "div",
+              { class: descriptionsExtraClasses },
+              slots.extra?.() || props.extra
+            ) : null
+          ]) : null,
+          props.layout === "horizontal" ? renderHorizontal() : renderVertical()
+        ]
+      );
+    };
+  }
+});
+var Descriptions_default = Descriptions;
+
+export {
+  Descriptions,
+  Descriptions_default
+};