@expcat/tigercat-vue 2.1.1 → 2.1.3

package/dist/{chunk-OHR7IUBQ.mjs → chunk-HNMVYUUZ.mjs}

@@ -1,9 +1,21 @@
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/RichTextEditor.ts
-import { defineComponent, h, ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  inject
+} from "vue";
 import {
   classNames,
   coerceClassValue,
@@ -13,20 +25,22 @@ import {
   richTextToolbarClasses,
   richTextToolbarSeparatorClasses,
   richTextPlaceholderClasses,
-  defaultToolbar,
-  isInlineFormat,
+  createDefaultRichTextToolbar,
   findHotkeyMatch,
   isContentEmpty,
   parseHeight,
   builtinRichTextEngine,
   isToolbarSeparator,
   mergeTigerLocale,
-  getRichTextEditorLabels
+  getRichTextEditorLabels,
+  getToolbarButtons,
+  nextToolbarRovingIndex
 } from "@expcat/tigercat-core";
 var RichTextEditor = defineComponent({
   name: "TigerRichTextEditor",
+  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: {
@@ -46,41 +60,62 @@ var RichTextEditor = defineComponent({
     locale: { type: Object, default: void 0 },
     labels: { type: Object, default: void 0 },
     className: { type: String, default: void 0 },
+    ariaLabel: { type: String, default: void 0 },
+    name: { type: String, default: void 0 },
+    id: { type: String, default: void 0 },
     engine: {
       type: Object,
       default: void 0
+    },
+    onRequestUrl: {
+      type: Function,
+      default: void 0
     }
   },
-  emits: ["update:value", "change"],
-  setup(props, { emit, attrs }) {
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs, expose }) {
     const config = useTigerConfig();
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
     const editorRef = ref(null);
     const internalValue = ref(props.defaultValue || "");
     const activeFormats = ref(/* @__PURE__ */ new Set());
+    const toolbarIndex = ref(0);
     let engineInstance = null;
-    const isControlled = computed(() => props.value !== void 0);
-    const currentContent = computed(
-      () => props.value !== void 0 ? props.value : internalValue.value
-    );
-    const toolbarItems = computed(() => props.toolbar ?? defaultToolbar);
+    const formValue = computed(() => formItemControl?.value.value);
+    const isControlled = computed(() => props.modelValue !== void 0);
+    const currentContent = computed(() => {
+      if (props.modelValue !== void 0) return props.modelValue;
+      if (typeof formValue.value === "string") return formValue.value;
+      return internalValue.value;
+    });
     const isEmpty = computed(() => isContentEmpty(currentContent.value));
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const labels = computed(() => getRichTextEditorLabels(mergedLocale.value, props.labels));
-    watch(
-      () => props.value,
-      (newVal) => {
-        if (newVal !== void 0 && engineInstance) {
-          engineInstance.setValue(newVal);
-        }
-      }
+    const toolbarItems = computed(
+      () => props.mode === "plain" ? [] : props.toolbar ?? createDefaultRichTextToolbar(labels.value)
     );
-    watch(
-      () => [props.readOnly, props.disabled],
-      ([ro, dis]) => {
-        engineInstance?.setReadOnly(ro, dis);
-      }
+    const toolbarButtons = computed(() => getToolbarButtons(toolbarItems.value));
+    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)
     );
-    onMounted(() => {
+    expose({
+      focus: () => editorRef.value?.focus(),
+      editor: editorRef
+    });
+    function commit(html) {
+      if (!isControlled.value) internalValue.value = html;
+      emit("update:modelValue", html);
+      emit("change", html);
+      formItemControl?.onChange(html);
+    }
+    function mountEngine() {
+      engineInstance?.destroy();
+      engineInstance = null;
       if (!editorRef.value) return;
       const engine = props.engine ?? builtinRichTextEngine;
       engineInstance = engine.create({
@@ -88,53 +123,100 @@ var RichTextEditor = defineComponent({
         initialValue: currentContent.value,
         mode: props.mode,
         readOnly: props.readOnly,
-        disabled: props.disabled,
+        disabled: effectiveDisabled.value,
         placeholder: props.placeholder,
         toolbar: toolbarItems.value,
-        notifyChange(html) {
-          if (!isControlled.value) internalValue.value = html;
-          emit("update:value", html);
-          emit("change", html);
-        },
+        requestUrl: props.onRequestUrl,
+        notifyChange: commit,
         notifyActiveFormats(next) {
           activeFormats.value = next;
         }
       });
+    }
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        if (newVal !== void 0 && engineInstance) {
+          engineInstance.setValue(newVal);
+        }
+      }
+    );
+    watch(
+      () => [props.readOnly, effectiveDisabled.value],
+      ([ro, dis]) => {
+        engineInstance?.setReadOnly(ro, dis);
+      }
+    );
+    watch(
+      () => props.mode,
+      (mode) => {
+        engineInstance?.setMode(mode);
+      }
+    );
+    watch(
+      () => toolbarItems.value,
+      (items) => {
+        engineInstance?.setToolbar(items);
+      }
+    );
+    watch(
+      () => props.engine,
+      () => {
+        mountEngine();
+      }
+    );
+    onMounted(() => {
+      mountEngine();
     });
     onBeforeUnmount(() => {
       engineInstance?.destroy();
       engineInstance = null;
     });
     function execButtonAction(btn) {
-      if (props.readOnly || props.disabled) return;
+      if (props.readOnly || effectiveDisabled.value) return;
       engineInstance?.exec(btn.name);
     }
     function handleKeydown(e) {
+      if (props.readOnly || effectiveDisabled.value) return;
       const match = findHotkeyMatch(toolbarItems.value, e);
       if (match) {
         e.preventDefault();
         execButtonAction(match);
       }
     }
+    function handleToolbarKeydown(e) {
+      const next = nextToolbarRovingIndex(toolbarIndex.value, toolbarButtons.value.length, e.key);
+      if (next === null) return;
+      e.preventDefault();
+      toolbarIndex.value = next;
+      const buttons = editorRef.value?.closest("[data-tiger-rte]")?.querySelectorAll('[role="toolbar"] button');
+      const target = buttons?.[next];
+      target?.focus();
+    }
     const containerClasses = computed(
       () => classNames(
-        getRichTextContainerClasses(props.disabled, props.className),
+        getRichTextContainerClasses(effectiveDisabled.value, props.className),
         coerceClassValue(attrs.class)
       )
     );
     const editorAreaClasses = computed(() => getEditorAreaClasses(props.readOnly));
     const containerStyle = computed(() => {
       const ht = parseHeight(props.height);
-      if (!ht) return void 0;
-      return { height: ht };
+      return {
+        ...ht ? { height: ht } : {},
+        ...attrs.style
+      };
     });
     return () => {
-      const toolbarEl = h(
+      const { class: _attrClass, style: _attrStyle, ...restAttrs } = attrs;
+      const showToolbar = toolbarItems.value.length > 0;
+      const toolbarEl = showToolbar ? h(
         "div",
         {
           class: richTextToolbarClasses,
           role: "toolbar",
-          "aria-label": labels.value.formattingToolbarAriaLabel
+          "aria-label": labels.value.formattingToolbarAriaLabel,
+          onKeydown: handleToolbarKeydown
         },
         toolbarItems.value.map((item, idx) => {
           if (isToolbarSeparator(item)) {
@@ -146,6 +228,7 @@ var RichTextEditor = defineComponent({
             });
           }
           const btn = item;
+          const buttonIndex = toolbarButtons.value.indexOf(btn);
           return h(
             "button",
             {
@@ -154,33 +237,38 @@ var RichTextEditor = defineComponent({
               class: getToolbarButtonClasses(activeFormats.value.has(btn.name)),
               title: btn.tooltip ?? btn.label,
               "aria-label": btn.label,
-              "aria-pressed": isInlineFormat(btn.name) ? activeFormats.value.has(btn.name) : void 0,
-              disabled: props.disabled || props.readOnly,
-              onClick: (e) => {
-                e.preventDefault();
-                execButtonAction(btn);
-              }
+              "aria-pressed": activeFormats.value.has(btn.name),
+              tabindex: buttonIndex === toolbarIndex.value ? 0 : -1,
+              disabled: effectiveDisabled.value || props.readOnly,
+              onMousedown: (e) => e.preventDefault(),
+              onClick: () => execButtonAction(btn)
             },
             btn.icon ? h("span", { innerHTML: btn.icon }) : btn.label
           );
         })
-      );
+      ) : null;
       const editorEl = h("div", {
+        ...restAttrs,
         ref: editorRef,
         class: editorAreaClasses.value,
         role: "textbox",
-        "aria-label": labels.value.editorAriaLabel,
+        id: effectiveId.value,
+        "aria-label": props.ariaLabel ?? restAttrs["aria-label"] ?? labels.value.editorAriaLabel,
+        "aria-labelledby": restAttrs["aria-labelledby"] ?? formItemControl?.labelId.value,
         "aria-multiline": true,
         "aria-readonly": props.readOnly || void 0,
-        "aria-disabled": props.disabled || void 0,
+        "aria-disabled": effectiveDisabled.value || void 0,
         "aria-placeholder": props.placeholder,
         "data-placeholder": props.placeholder,
-        onKeydown: handleKeydown
+        "data-name": effectiveName.value,
+        tabindex: props.readOnly && !effectiveDisabled.value ? 0 : void 0,
+        onKeydown: handleKeydown,
+        onBlur: () => formItemControl?.onBlur()
       });
       const placeholderEl = isEmpty.value && props.placeholder ? h(
         "div",
         {
-          class: `${richTextPlaceholderClasses} absolute top-0 left-0 p-4 pointer-events-none text-sm`,
+          class: `${richTextPlaceholderClasses} absolute top-0 start-0 p-4 pointer-events-none text-sm`,
           "aria-hidden": true
         },
         props.placeholder
@@ -193,7 +281,8 @@ var RichTextEditor = defineComponent({
         "div",
         {
           class: containerClasses.value,
-          style: containerStyle.value
+          style: containerStyle.value,
+          "data-tiger-rte": ""
         },
         [toolbarEl, editorWrapper]
       );

package/dist/{chunk-GBPMQJJJ.mjs → chunk-HSKBYNCP.mjs}

@@ -1,3 +1,7 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
 // src/components/ScrollSpy.ts
 import {
   computed,
@@ -20,13 +24,17 @@ import {
   getScrollSpyItemClasses,
   getScrollSpyItemByKey,
   getScrollSpyKeyString,
+  getScrollSpyLabels,
   getScrollSpyListClasses,
   getScrollSpyRootClasses,
+  getScrollSpyRootStyle,
   mergeStyleValues,
-  scrollSpyNestedListClasses,
-  scrollToScrollSpyItem
+  mergeTigerLocale,
+  resolveScrollSpyContainer,
+  resolveScrollSpyOffset,
+  shouldActivateScrollSpyClick,
+  activateScrollSpyClick
 } from "@expcat/tigercat-core";
-var getWindowContainer = () => window;
 var ScrollSpy = defineComponent({
   name: "TigerScrollSpy",
   inheritAttrs: false,
@@ -65,11 +73,11 @@ var ScrollSpy = defineComponent({
     },
     ariaLabel: {
       type: String,
-      default: "Scroll navigation"
+      default: void 0
     },
     getContainer: {
-      type: Function,
-      default: getWindowContainer
+      type: [String, Object, Function],
+      default: void 0
     },
     className: {
       type: String,
@@ -78,10 +86,19 @@ var ScrollSpy = defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
     }
   },
   emits: ["update:activeKey", "change", "click"],
   setup(props, { attrs, emit }) {
+    const config = useTigerConfig();
+    const labels = computed(
+      () => getScrollSpyLabels(mergeTigerLocale(config.value.locale, props.locale))
+    );
+    const offset = computed(() => resolveScrollSpyOffset(props.targetOffset, props.offsetTop));
     const innerActiveKey = ref(
       getInitialScrollSpyActiveKey(props.items, props.activeKey, props.defaultActiveKey)
     );
@@ -94,7 +111,9 @@ var ScrollSpy = defineComponent({
     );
     const flatItems = computed(() => flattenScrollSpyItems(props.items));
     let stopObserver = null;
-    const scrollLock = createProgrammaticScrollLock(() => props.getContainer());
+    const scrollLock = createProgrammaticScrollLock(
+      () => resolveScrollSpyContainer(props.getContainer)
+    );
     const emitActive = (item, source) => {
       const nextKeyString = getScrollSpyKeyString(item.key);
       if (nextKeyString === activeKeyString.value) return;
@@ -106,9 +125,8 @@ var ScrollSpy = defineComponent({
     const setupObserver = () => {
       stopObserver?.();
       stopObserver = createScrollSpyObserver(props.items, {
-        container: props.getContainer(),
-        offsetTop: props.offsetTop,
-        targetOffset: props.targetOffset,
+        container: props.getContainer,
+        offsetTop: offset.value,
         bounds: props.bounds,
         onChange: (item) => {
           if (scrollLock.isLocked()) return;
@@ -117,18 +135,30 @@ var ScrollSpy = defineComponent({
       });
     };
     const handleClick = (item, event) => {
+      if (item.disabled) {
+        event.preventDefault();
+        return;
+      }
+      if (!shouldActivateScrollSpyClick(item, event)) return;
       event.preventDefault();
-      if (item.disabled) return;
       emit("click", item, event);
       emitActive(item, "click");
       scrollLock.lock();
-      scrollToScrollSpyItem(item, props.getContainer(), props.targetOffset ?? props.offsetTop);
+      activateScrollSpyClick(item, resolveScrollSpyContainer(props.getContainer), offset.value);
     };
     onMounted(() => {
       nextTick(() => setupObserver());
     });
     watch(
-      () => [props.items, props.offsetTop, props.targetOffset, props.bounds, props.getContainer],
+      [
+        () => props.items,
+        offset,
+        () => props.bounds,
+        () => {
+          const container = resolveScrollSpyContainer(props.getContainer);
+          return container === window ? "window" : container;
+        }
+      ],
       () => nextTick(() => setupObserver())
     );
     watch(
@@ -151,21 +181,24 @@ var ScrollSpy = defineComponent({
     });
     const renderItems = (items, nested = false) => h(
       "ul",
-      { class: nested ? scrollSpyNestedListClasses : getScrollSpyListClasses(props.direction) },
+      { class: getScrollSpyListClasses(props.direction, nested), role: "list" },
       items.map((item) => {
         const keyString = getScrollSpyKeyString(item.key);
         const isActive = keyString === activeKeyString.value;
-        const depth = flatItems.value.find((flat) => flat.key === item.key)?.depth ?? 0;
+        const depth = flatItems.value.find((flat) => getScrollSpyKeyString(flat.key) === keyString)?.depth ?? 0;
+        const hasHref = Boolean(item.href);
+        const tag = hasHref ? "a" : "span";
         return h("li", { key: keyString, "data-depth": depth }, [
           h(
-            "a",
+            tag,
             {
-              href: item.href,
+              href: hasHref ? item.href : void 0,
               class: getScrollSpyItemClasses(isActive, item.disabled),
               "aria-current": isActive ? "location" : void 0,
               "aria-disabled": item.disabled || void 0,
+              tabindex: item.disabled ? -1 : void 0,
               "data-key": keyString,
-              onClick: (event) => handleClick(item, event)
+              onClick: hasHref ? (event) => handleClick(item, event) : void 0
             },
             item.label
           ),
@@ -183,8 +216,12 @@ var ScrollSpy = defineComponent({
             getScrollSpyRootClasses(props.sticky, props.className),
             coerceClassValue(attrsRecord.class)
           ),
-          style: mergeStyleValues(attrsRecord.style, props.style),
-          "aria-label": props.ariaLabel
+          style: mergeStyleValues(
+            getScrollSpyRootStyle(props.sticky, offset.value),
+            attrsRecord.style,
+            props.style
+          ),
+          "aria-label": props.ariaLabel ?? labels.value.ariaLabel
         },
         renderItems(props.items)
       );