@expcat/tigercat-vue 2.1.1 → 2.1.3

package/dist/chunk-JOZYNAU6.mjs

@@ -0,0 +1,131 @@
+// src/components/Skeleton.ts
+import { defineComponent, computed, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getSkeletonClasses,
+  getSkeletonInlineStyle,
+  getParagraphRowWidth,
+  isSkeletonNamed,
+  resolveSkeletonAriaHidden,
+  mergeStyleValues
+} from "@expcat/tigercat-core";
+var Skeleton = defineComponent({
+  name: "TigerSkeleton",
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String,
+      default: "text"
+    },
+    animation: {
+      type: String,
+      default: "pulse"
+    },
+    width: {
+      type: String,
+      default: void 0
+    },
+    height: {
+      type: String,
+      default: void 0
+    },
+    shape: {
+      type: String,
+      default: "circle"
+    },
+    rows: {
+      type: Number,
+      default: 1
+    },
+    paragraph: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { attrs }) {
+    const visualOptions = computed(() => ({
+      width: props.width,
+      height: props.height
+    }));
+    return () => {
+      const attrsRecord = attrs;
+      const attrsClass = attrsRecord.class;
+      const attrsStyle = attrsRecord.style;
+      const named = isSkeletonNamed(attrsRecord["aria-label"], attrsRecord["aria-labelledby"]);
+      const computedAriaHidden = resolveSkeletonAriaHidden(attrsRecord["aria-hidden"], named);
+      const namedStatus = named && computedAriaHidden !== true;
+      const inlineStyle = getSkeletonInlineStyle(props.width, props.height);
+      const a11y = {
+        "aria-hidden": computedAriaHidden,
+        role: namedStatus ? "status" : void 0,
+        "aria-busy": namedStatus ? true : void 0
+      };
+      if (props.variant === "text" && props.rows > 1) {
+        const rows = [];
+        for (let i = 0; i < props.rows; i++) {
+          const rowStyle = {};
+          if (props.paragraph) {
+            rowStyle.width = getParagraphRowWidth(i, props.rows);
+          }
+          if (props.height) rowStyle.height = props.height;
+          rows.push(
+            h("div", {
+              key: i,
+              class: classNames(
+                getSkeletonClasses(props.variant, props.animation, props.shape, {
+                  height: props.height,
+                  omitWidth: true
+                }),
+                !props.paragraph && "w-full",
+                i < props.rows - 1 && "mb-2"
+              ),
+              style: Object.keys(rowStyle).length > 0 ? rowStyle : void 0
+            })
+          );
+        }
+        return h(
+          "div",
+          {
+            ...attrs,
+            class: classNames(
+              "flex flex-col",
+              !props.width && "w-full",
+              props.className,
+              coerceClassValue(attrsClass)
+            ),
+            style: mergeStyleValues(inlineStyle, attrsStyle, props.style),
+            "data-tiger-skeleton": "",
+            ...a11y
+          },
+          rows
+        );
+      }
+      return h("div", {
+        ...attrs,
+        class: classNames(
+          getSkeletonClasses(props.variant, props.animation, props.shape, visualOptions.value),
+          props.className,
+          coerceClassValue(attrsClass)
+        ),
+        style: mergeStyleValues(inlineStyle, attrsStyle, props.style),
+        "data-tiger-skeleton": "",
+        ...a11y
+      });
+    };
+  }
+});
+var Skeleton_default = Skeleton;
+
+export {
+  Skeleton,
+  Skeleton_default
+};

package/dist/{chunk-JQSIWPNM.mjs → chunk-K46SNCCE.mjs}

@@ -1,61 +1,49 @@
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/Timeline.ts
-import { defineComponent, computed, h } from "vue";
+import { computed, defineComponent, h } from "vue";
 import {
+  EMPTY_TIMELINE_ITEMS,
   classNames,
   coerceClassValue,
-  mergeStyleValues,
+  getPendingDotClasses,
   getTimelineContainerClasses,
+  getTimelineContentClasses,
+  getTimelineDotClasses,
+  getTimelineHeadClasses,
   getTimelineItemClasses,
+  getTimelineItemKey,
   getTimelineTailClasses,
-  getTimelineHeadClasses,
-  getTimelineDotClasses,
-  getTimelineContentClasses,
-  getPendingDotClasses,
-  timelineListClasses,
-  timelineLabelClasses,
-  timelineDescriptionClasses,
+  mergeStyleValues,
+  mergeTigerLocale,
+  processTimelineItems,
   resolveLocaleText,
-  mergeTigerLocale
+  timelineDescriptionClasses,
+  timelineLabelClasses,
+  timelineListClasses
 } from "@expcat/tigercat-core";
 var Timeline = defineComponent({
   name: "TigerTimeline",
   inheritAttrs: false,
   props: {
-    /**
-     * Timeline data source
-     */
     items: {
       type: Array,
-      default: () => []
+      default: void 0
     },
-    /**
-     * Timeline mode/direction
-     */
     mode: {
       type: String,
       default: "left"
     },
-    /**
-     * Whether to show pending state
-     */
     pending: {
       type: Boolean,
       default: false
     },
-    /**
-     * Pending item dot content
-     */
     pendingDot: {
       type: [String, Object],
-      default: null
+      default: void 0
     },
-    /**
-     * Whether to reverse the timeline order
-     */
     reverse: {
       type: Boolean,
       default: false
@@ -76,19 +64,12 @@ var Timeline = defineComponent({
   setup(props, { slots, attrs }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const processedItems = computed(() => {
-      let items = [...props.items];
-      if (props.reverse) {
-        items = items.reverse();
-      }
-      if (props.mode === "alternate") {
-        return items.map((item, index) => ({
-          ...item,
-          position: item.position || (index % 2 === 0 ? "left" : "right")
-        }));
-      }
-      return items;
-    });
+    const processedItems = computed(
+      () => processTimelineItems(props.items ?? EMPTY_TIMELINE_ITEMS, {
+        reverse: props.reverse,
+        mode: props.mode
+      })
+    );
     const containerClasses = computed(() => {
       return classNames(
         getTimelineContainerClasses(props.mode),
@@ -98,12 +79,20 @@ var Timeline = defineComponent({
       );
     });
     const containerStyle = computed(() => mergeStyleValues(attrs.style, props.style));
-    function getItemKey(item, index) {
-      return item.key || index;
-    }
     function renderDot(item, isPending = false) {
+      if (isPending && props.pendingDot) {
+        return h(
+          "div",
+          { class: getTimelineDotClasses(void 0, true) },
+          props.pendingDot
+        );
+      }
       if (slots.dot) {
-        return h("div", { class: getTimelineDotClasses(void 0, true) }, slots.dot({ item }));
+        return h(
+          "div",
+          { class: getTimelineDotClasses(void 0, true) },
+          slots.dot({ item, pending: isPending })
+        );
       }
       if (item.dot) {
         return h(
@@ -113,13 +102,6 @@ var Timeline = defineComponent({
         );
       }
       if (isPending) {
-        if (props.pendingDot) {
-          return h(
-            "div",
-            { class: getTimelineDotClasses(void 0, true) },
-            props.pendingDot
-          );
-        }
         return h("div", { class: getPendingDotClasses() });
       }
       const dotClasses = getTimelineDotClasses(item.color);
@@ -127,7 +109,7 @@ var Timeline = defineComponent({
       return h("div", { class: dotClasses, style: dotStyle });
     }
     function renderTimelineItem(item, index) {
-      const key = getItemKey(item, index);
+      const key = getTimelineItemKey(item, index);
       const isLast = index === processedItems.value.length - 1 && !props.pending;
       const position = item.position;
       const itemClasses = getTimelineItemClasses(props.mode, position, isLast);
@@ -193,6 +175,7 @@ var Timeline = defineComponent({
           ...attrs,
           class: containerClasses.value,
           style: containerStyle.value,
+          role: "list",
           "aria-busy": attrs["aria-busy"] ?? (props.pending ? "true" : void 0)
         },
         [

package/dist/{chunk-FSJRNEZK.mjs → chunk-KFWSS65S.mjs}

@@ -1,14 +1,17 @@
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/MarkdownEditor.ts
-import { defineComponent, h, ref, computed, nextTick } from "vue";
+import { defineComponent, h, ref, computed, watch, inject } from "vue";
 import {
   applyMarkdownToolbarAction,
   classNames,
   coerceClassValue,
-  defaultMarkdownToolbar,
+  createDefaultMarkdownToolbar,
   findMarkdownHotkeyMatch,
   getMarkdownBodyClasses,
   getMarkdownContainerClasses,
@@ -24,13 +27,18 @@ import {
   parseMarkdownHeight,
   renderMarkdownToHtml,
   mergeTigerLocale,
-  getMarkdownEditorLabels
+  getMarkdownEditorLabels,
+  handleTabKey,
+  resolveEditorTabAction,
+  nextToolbarRovingIndex,
+  getMarkdownToolbarButtons
 } from "@expcat/tigercat-core";
 var modes = ["edit", "split", "preview"];
 var MarkdownEditor = defineComponent({
   name: "TigerMarkdownEditor",
+  inheritAttrs: false,
   props: {
-    value: { type: String, default: void 0 },
+    modelValue: { type: String, default: void 0 },
     defaultValue: { type: String, default: "" },
     placeholder: { type: String, default: void 0 },
     mode: {
@@ -62,38 +70,65 @@ var MarkdownEditor = defineComponent({
     style: {
       type: Object,
       default: void 0
-    }
+    },
+    tabSize: { type: Number, default: 2 },
+    ariaLabel: { type: String, default: void 0 },
+    name: { type: String, default: void 0 },
+    id: { type: String, default: void 0 }
   },
-  emits: ["update:value", "change", "update:mode", "mode-change"],
-  setup(props, { emit, attrs }) {
+  emits: ["update:modelValue", "change", "update:mode", "mode-change"],
+  setup(props, { emit, attrs, expose }) {
     const config = useTigerConfig();
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
     const internalValue = ref(props.defaultValue || "");
     const internalMode = ref(props.defaultMode);
     const textareaRef = ref(null);
-    const currentValue = computed(
-      () => props.value !== void 0 ? props.value : internalValue.value
-    );
+    const allowTabExit = ref(false);
+    const pendingSelection = ref(null);
+    const formatToolbarIndex = ref(0);
+    const formValue = computed(() => formItemControl?.value.value);
+    const currentValue = computed(() => {
+      if (props.modelValue !== void 0) return props.modelValue;
+      if (typeof formValue.value === "string") return formValue.value;
+      return internalValue.value;
+    });
     const currentMode = computed(() => props.mode ?? internalMode.value);
-    const toolbarItems = computed(
-      () => props.toolbar === false ? [] : props.toolbar ?? defaultMarkdownToolbar
-    );
     const previewHtml = computed(() => renderMarkdownToHtml(currentValue.value, props.renderer));
-    const showFormattingToolbar = computed(() => props.toolbar !== false);
+    const canEdit = computed(() => currentMode.value === "edit" || currentMode.value === "split");
+    const showFormattingToolbar = computed(
+      () => props.toolbar !== false && canEdit.value && !props.readOnly
+    );
     const showTopbar = computed(() => showFormattingToolbar.value || props.showModeSwitch);
-    const showEditor = computed(() => currentMode.value === "edit" || currentMode.value === "split");
+    const showEditor = computed(() => canEdit.value);
     const showPreview = computed(
       () => currentMode.value === "preview" || currentMode.value === "split"
     );
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const labels = computed(() => getMarkdownEditorLabels(mergedLocale.value, props.labels));
+    const toolbarItems = computed(
+      () => props.toolbar === false ? [] : props.toolbar ?? createDefaultMarkdownToolbar(labels.value)
+    );
+    const toolbarButtons = computed(() => getMarkdownToolbarButtons(toolbarItems.value));
     const modeLabels = computed(() => ({
       edit: labels.value.editModeLabel,
       split: labels.value.splitModeLabel,
       preview: labels.value.previewModeLabel
     }));
+    const effectiveId = computed(() => props.id ?? formItemControl?.id.value);
+    const effectiveName = computed(() => props.name ?? formItemControl?.name.value);
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    expose({
+      focus: () => textareaRef.value?.focus(),
+      textarea: textareaRef
+    });
     const containerClasses = computed(
       () => classNames(
-        getMarkdownContainerClasses(props.disabled, props.className),
+        getMarkdownContainerClasses(effectiveDisabled.value, props.className),
         coerceClassValue(attrs.class)
       )
     );
@@ -101,68 +136,103 @@ var MarkdownEditor = defineComponent({
       const parsedHeight = parseMarkdownHeight(props.height);
       return {
         ...parsedHeight ? { height: parsedHeight } : {},
-        ...props.style
+        ...props.style,
+        ...attrs.style
       };
     });
     function commitValue(nextValue) {
-      if (props.value === void 0) internalValue.value = nextValue;
-      emit("update:value", nextValue);
+      if (props.modelValue === void 0) internalValue.value = nextValue;
+      emit("update:modelValue", nextValue);
       emit("change", nextValue);
+      formItemControl?.onChange(nextValue);
     }
     function commitMode(nextMode) {
       if (props.mode === void 0) internalMode.value = nextMode;
       emit("update:mode", nextMode);
       emit("mode-change", nextMode);
     }
-    async function restoreSelection(selectionStart, selectionEnd) {
-      await nextTick();
-      const textarea = textareaRef.value;
-      if (!textarea) return;
-      textarea.selectionStart = selectionStart;
-      textarea.selectionEnd = selectionEnd;
-      textarea.focus();
-    }
+    watch(
+      currentValue,
+      () => {
+        const pending = pendingSelection.value;
+        if (!pending) return;
+        pendingSelection.value = null;
+        const textarea = textareaRef.value;
+        if (!textarea) return;
+        textarea.selectionStart = pending.start;
+        textarea.selectionEnd = pending.end;
+        textarea.focus();
+      },
+      { flush: "post" }
+    );
     function applyToolbarButton(button) {
-      if (props.readOnly || props.disabled) return;
+      if (props.readOnly || effectiveDisabled.value || !canEdit.value) return;
       const textarea = textareaRef.value;
+      if (!textarea) return;
       const selection = {
         value: currentValue.value,
-        selectionStart: textarea?.selectionStart ?? currentValue.value.length,
-        selectionEnd: textarea?.selectionEnd ?? currentValue.value.length
+        selectionStart: textarea.selectionStart,
+        selectionEnd: textarea.selectionEnd
       };
-      const result = applyMarkdownToolbarAction(button, selection);
+      const result = applyMarkdownToolbarAction(button, selection, labels.value);
+      pendingSelection.value = { start: result.selectionStart, end: result.selectionEnd };
       commitValue(result.value);
-      void restoreSelection(result.selectionStart, result.selectionEnd);
     }
     function handleKeydown(event) {
-      if (event.key === "Tab") {
+      const action = resolveEditorTabAction(event, {
+        readOnly: props.readOnly,
+        disabled: effectiveDisabled.value,
+        allowTabExit: allowTabExit.value
+      });
+      if (action === "arm-exit") {
+        allowTabExit.value = true;
+        return;
+      }
+      if (action === "indent" || action === "outdent") {
         event.preventDefault();
+        allowTabExit.value = false;
         const textarea = event.currentTarget;
-        const before = textarea.value.slice(0, textarea.selectionStart);
-        const after = textarea.value.slice(textarea.selectionEnd);
-        const result = {
-          value: `${before}  ${after}`,
-          selectionStart: textarea.selectionStart + 2,
-          selectionEnd: textarea.selectionStart + 2
-        };
+        const result = handleTabKey(
+          textarea.value,
+          textarea.selectionStart,
+          textarea.selectionEnd,
+          props.tabSize,
+          { shift: action === "outdent" }
+        );
+        pendingSelection.value = { start: result.selectionStart, end: result.selectionEnd };
         commitValue(result.value);
-        void restoreSelection(result.selectionStart, result.selectionEnd);
         return;
       }
+      if (event.key !== "Tab") allowTabExit.value = false;
+      if (props.readOnly || effectiveDisabled.value) return;
       const match = findMarkdownHotkeyMatch(toolbarItems.value, event);
       if (match) {
         event.preventDefault();
         applyToolbarButton(match);
       }
     }
+    function handleFormatToolbarKeydown(event) {
+      const next = nextToolbarRovingIndex(
+        formatToolbarIndex.value,
+        toolbarButtons.value.length,
+        event.key
+      );
+      if (next === null) return;
+      event.preventDefault();
+      formatToolbarIndex.value = next;
+      const buttons = event.currentTarget.querySelectorAll("button");
+      buttons[next]?.focus();
+    }
     return () => {
+      const { class: _attrClass, style: _attrStyle, ...restAttrs } = attrs;
       const toolbarNode = showTopbar.value ? h("div", { class: markdownEditorToolbarClasses }, [
         showFormattingToolbar.value ? h(
           "div",
           {
             class: markdownEditorToolbarGroupClasses,
             role: "toolbar",
-            "aria-label": labels.value.formattingToolbarAriaLabel
+            "aria-label": labels.value.formattingToolbarAriaLabel,
+            onKeydown: handleFormatToolbarKeydown
           },
           toolbarItems.value.map((item, index) => {
             if (isMarkdownToolbarSeparator(item)) {
@@ -173,6 +243,9 @@ var MarkdownEditor = defineComponent({
                 "aria-orientation": "vertical"
               });
             }
+            const buttonIndex = toolbarButtons.value.findIndex(
+              (entry) => entry.name === item.name
+            );
             return h(
               "button",
               {
@@ -181,7 +254,9 @@ var MarkdownEditor = defineComponent({
                 class: getMarkdownToolbarButtonClasses(false),
                 title: item.tooltip ?? item.label,
                 "aria-label": item.tooltip ?? item.label,
-                disabled: props.disabled || props.readOnly,
+                tabindex: buttonIndex === formatToolbarIndex.value ? 0 : -1,
+                disabled: effectiveDisabled.value || props.readOnly,
+                onMousedown: (event) => event.preventDefault(),
                 onClick: () => applyToolbarButton(item)
               },
               item.icon ? h("span", { innerHTML: item.icon }) : item.label
@@ -204,7 +279,7 @@ var MarkdownEditor = defineComponent({
                 class: getMarkdownToolbarButtonClasses(currentMode.value === item),
                 "aria-label": modeLabels.value[item],
                 "aria-pressed": currentMode.value === item,
-                disabled: props.disabled,
+                disabled: effectiveDisabled.value,
                 onClick: () => commitMode(item)
               },
               modeLabels.value[item]
@@ -213,16 +288,21 @@ var MarkdownEditor = defineComponent({
         ) : null
       ]) : null;
       const textareaNode = showEditor.value ? h("textarea", {
+        ...restAttrs,
         ref: textareaRef,
         class: markdownEditorTextareaClasses,
         value: currentValue.value,
         onInput: (event) => commitValue(event.target.value),
         onKeydown: handleKeydown,
+        onBlur: () => formItemControl?.onBlur(),
         placeholder: props.placeholder,
-        readonly: props.readOnly || props.disabled,
-        disabled: props.disabled,
+        readonly: props.readOnly || effectiveDisabled.value,
+        disabled: effectiveDisabled.value,
         spellcheck: true,
-        "aria-label": labels.value.editorAriaLabel,
+        id: effectiveId.value,
+        name: effectiveName.value,
+        "aria-label": props.ariaLabel ?? restAttrs["aria-label"] ?? labels.value.editorAriaLabel,
+        "aria-labelledby": restAttrs["aria-labelledby"] ?? formItemControl?.labelId.value,
         "aria-multiline": true
       }) : null;
       const previewNode = showPreview.value ? h(