@expcat/tigercat-vue 1.0.7 → 1.1.0

package/dist/{chunk-LHPBK4MG.js → chunk-EHBPMUT2.js}

@@ -9,6 +9,15 @@ var VirtualList = vue.defineComponent({
   props: {
     itemCount: { type: Number, default: 0 },
     itemHeight: { type: Number, default: 40 },
+    estimatedItemHeight: { type: Number, default: void 0 },
+    getItemHeight: {
+      type: Function,
+      default: void 0
+    },
+    sizeStrategy: {
+      type: Object,
+      default: void 0
+    },
     height: { type: Number, default: 400 },
     overscan: { type: Number, default: 5 }
   },
@@ -16,11 +25,20 @@ var VirtualList = vue.defineComponent({
   setup(props, { emit, attrs, slots }) {
     const scrollTop = vue.ref(0);
     const containerRef = vue.ref(null);
+    const strategy = vue.computed(() => {
+      if (props.sizeStrategy) return props.sizeStrategy;
+      if (props.getItemHeight) {
+        return tigercatCore.variableSizeStrategy(props.getItemHeight, props.itemCount);
+      }
+      if (props.estimatedItemHeight !== void 0) {
+        return tigercatCore.dynamicSizeStrategy(props.estimatedItemHeight, props.itemCount);
+      }
+      return tigercatCore.fixedSizeStrategy(props.itemHeight);
+    });
     const range = vue.computed(
-      () => tigercatCore.getFixedVirtualRange(
+      () => strategy.value.getRange(
         scrollTop.value,
         props.height,
-        props.itemHeight,
         props.itemCount,
         props.overscan
       )
@@ -32,9 +50,11 @@ var VirtualList = vue.defineComponent({
       }
     }
     return () => {
-      const { startIndex, endIndex, offsetTop, totalHeight } = range.value;
+      const { startIndex, endIndex, totalHeight } = range.value;
+      const currentStrategy = strategy.value;
       const items = [];
       for (let i = startIndex; i <= endIndex; i++) {
+        const itemH = currentStrategy.getItemHeight(i);
         const slotContent = slots.default?.({ index: i });
         items.push(
           vue.h(
@@ -42,7 +62,7 @@ var VirtualList = vue.defineComponent({
             {
               key: i,
               style: {
-                height: `${props.itemHeight}px`,
+                height: `${itemH}px`,
                 width: "100%"
               }
             },
@@ -50,6 +70,7 @@ var VirtualList = vue.defineComponent({
           )
         );
       }
+      const offsetTop = startIndex >= 0 ? currentStrategy.getItemOffset(startIndex) : 0;
       return vue.h(
         "div",
         {

package/dist/{chunk-XGJWUZWS.js → chunk-EVOXC3CD.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var chunkTT5LWQIZ_js = require('./chunk-TT5LWQIZ.js');
-var chunkPBWSBNDS_js = require('./chunk-PBWSBNDS.js');
-var chunkAGAJJYP2_js = require('./chunk-AGAJJYP2.js');
+var chunkWU2KCS6H_js = require('./chunk-WU2KCS6H.js');
+var chunkOZYJ3U4H_js = require('./chunk-OZYJ3U4H.js');
 var chunkBYNMOQBB_js = require('./chunk-BYNMOQBB.js');
-var chunkU7CCKZAG_js = require('./chunk-U7CCKZAG.js');
+var chunk5436FG3B_js = require('./chunk-5436FG3B.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -117,6 +116,9 @@ var DataTableWithToolbar = vue.defineComponent({
   setup(props, { attrs, emit }) {
     const internalSearch = vue.ref(props.toolbar?.defaultSearchValue ?? "");
     const internalFilters = vue.ref({});
+    const previousPageSize = vue.ref(
+      props.pagination && typeof props.pagination === "object" ? props.pagination.pageSize ?? props.pagination.defaultPageSize ?? 10 : void 0
+    );
     const vnodeProps = vue.getCurrentInstance()?.vnode.props ?? {};
     const hasSearchListener = Boolean(vnodeProps.onSearch || vnodeProps.onSearchChange);
     vue.watch(
@@ -127,6 +129,14 @@ var DataTableWithToolbar = vue.defineComponent({
         }
       }
     );
+    vue.watch(
+      () => props.pagination,
+      (nextValue) => {
+        if (nextValue && typeof nextValue === "object") {
+          previousPageSize.value = nextValue.pageSize ?? nextValue.defaultPageSize ?? 10;
+        }
+      }
+    );
     vue.watch(
       () => props.toolbar?.filters,
       (filters) => {
@@ -202,6 +212,16 @@ var DataTableWithToolbar = vue.defineComponent({
       action.onClick?.(keys);
       emit("bulk-action", action, keys);
     };
+    const handleTablePageChange = ({
+      current,
+      pageSize
+    }) => {
+      emit("page-change", current, pageSize);
+      if (previousPageSize.value !== void 0 && previousPageSize.value !== pageSize) {
+        emit("page-size-change", current, pageSize);
+      }
+      previousPageSize.value = pageSize;
+    };
     const renderToolbar = () => {
       if (!hasSearch.value && !hasFilters.value && !hasBulkActions.value) return null;
       const leftNodes = [];
@@ -225,7 +245,7 @@ var DataTableWithToolbar = vue.defineComponent({
                 }
               }),
               showButton ? vue.h(
-                chunkU7CCKZAG_js.Button,
+                chunk5436FG3B_js.Button,
                 {
                   size: "sm",
                   variant: "primary",
@@ -245,7 +265,7 @@ var DataTableWithToolbar = vue.defineComponent({
           const clearable = filter.clearable !== false;
           leftNodes.push(
             vue.h("div", { class: "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]" }, [
-              vue.h(chunkPBWSBNDS_js.Select, {
+              vue.h(chunkOZYJ3U4H_js.Select, {
                 size: "sm",
                 options: filter.options.map((opt) => ({
                   label: opt.label,
@@ -276,7 +296,7 @@ var DataTableWithToolbar = vue.defineComponent({
         (props.toolbar?.bulkActions ?? []).forEach((action) => {
           bulkChildren.push(
             vue.h(
-              chunkU7CCKZAG_js.Button,
+              chunk5436FG3B_js.Button,
               {
                 key: action.key,
                 size: "sm",
@@ -291,7 +311,11 @@ var DataTableWithToolbar = vue.defineComponent({
       }
       return vue.h(
         "div",
-        { class: "tiger-data-table-toolbar flex flex-wrap items-center gap-2 pb-3" },
+        {
+          class: "tiger-data-table-toolbar flex flex-wrap items-center gap-2 pb-3",
+          role: "toolbar",
+          "aria-label": "\u6570\u636E\u8868\u683C\u5DE5\u5177\u680F"
+        },
         [
           vue.h("div", { class: "flex items-center gap-2 flex-wrap flex-1 min-w-0" }, leftNodes),
           hasBulkActions.value ? vue.h(
@@ -304,7 +328,6 @@ var DataTableWithToolbar = vue.defineComponent({
     };
     return () => {
       const { class: _class, style: _style, ...restAttrs } = attrs;
-      const showPagination = props.pagination && typeof props.pagination === "object";
       const tableProps = {
         ...restAttrs,
         columns: props.columns,
@@ -320,14 +343,15 @@ var DataTableWithToolbar = vue.defineComponent({
         hoverable: props.hoverable,
         loading: props.loading,
         emptyText: props.emptyText,
-        pagination: false,
+        pagination: props.pagination,
         rowSelection: props.rowSelection,
         rowKey: props.rowKey,
         rowClassName: props.rowClassName,
         stickyHeader: props.stickyHeader,
         maxHeight: props.maxHeight,
         tableLayout: props.tableLayout,
-        onSelectionChange: (keys) => emit("selection-change", keys)
+        onSelectionChange: (keys) => emit("selection-change", keys),
+        onPageChange: handleTablePageChange
       };
       return vue.h(
         "div",
@@ -339,12 +363,7 @@ var DataTableWithToolbar = vue.defineComponent({
         [
           renderToolbar(),
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          vue.h(chunkTT5LWQIZ_js.Table, tableProps),
-          showPagination ? vue.h(chunkAGAJJYP2_js.Pagination, {
-            ...props.pagination,
-            onChange: (current, pageSize) => emit("page-change", current, pageSize),
-            onPageSizeChange: (current, pageSize) => emit("page-size-change", current, pageSize)
-          }) : null
+          vue.h(chunkWU2KCS6H_js.Table, tableProps)
         ]
       );
     };

package/dist/{chunk-4BMFV4CH.mjs → chunk-F7G7K3TF.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, h } from 'vue';
-import { defaultToolbar, isContentEmpty, sanitizeHtml, classNames, getRichTextContainerClasses, coerceClassValue, getEditorAreaClasses, parseHeight, richTextToolbarClasses, getToolbarButtonClasses, isInlineFormat, richTextPlaceholderClasses, mapToolbarAction, isValidUrl, findHotkeyMatch } from '@expcat/tigercat-core';
+import { defaultToolbar, isContentEmpty, builtinRichTextEngine, classNames, getRichTextContainerClasses, coerceClassValue, getEditorAreaClasses, parseHeight, richTextToolbarClasses, isToolbarSeparator, richTextToolbarSeparatorClasses, getToolbarButtonClasses, isInlineFormat, richTextPlaceholderClasses, findHotkeyMatch } from '@expcat/tigercat-core';
 
 // src/components/RichTextEditor.ts
 var RichTextEditor = defineComponent({
@@ -22,107 +22,75 @@ var RichTextEditor = defineComponent({
     },
     readOnly: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    className: { type: String, default: void 0 }
+    className: { type: String, default: void 0 },
+    engine: {
+      type: Object,
+      default: void 0
+    }
   },
   emits: ["update:value", "change"],
   setup(props, { emit, attrs }) {
     const editorRef = ref(null);
     const internalValue = ref(props.defaultValue || "");
     const activeFormats = ref(/* @__PURE__ */ new Set());
+    let engineInstance = null;
     const isControlled = computed(() => props.value !== void 0);
     const currentContent = computed(() => isControlled.value ? props.value : internalValue.value);
-    const toolbarButtons = computed(() => props.toolbar ?? defaultToolbar);
+    const toolbarItems = computed(() => props.toolbar ?? defaultToolbar);
     const isEmpty = computed(() => isContentEmpty(currentContent.value));
     watch(
       () => props.value,
       (newVal) => {
-        if (newVal !== void 0 && editorRef.value) {
-          const sanitized = sanitizeHtml(newVal);
-          if (editorRef.value.innerHTML !== sanitized) {
-            editorRef.value.innerHTML = sanitized;
-          }
+        if (newVal !== void 0 && engineInstance) {
+          engineInstance.setValue(newVal);
         }
       }
     );
+    watch(
+      () => [props.readOnly, props.disabled],
+      ([ro, dis]) => {
+        engineInstance?.setReadOnly(ro, dis);
+      }
+    );
     onMounted(() => {
-      if (editorRef.value) {
-        const initial = sanitizeHtml(currentContent.value);
-        if (initial) {
-          editorRef.value.innerHTML = initial;
+      if (!editorRef.value) return;
+      const engine = props.engine ?? builtinRichTextEngine;
+      engineInstance = engine.create({
+        element: editorRef.value,
+        initialValue: currentContent.value,
+        readOnly: props.readOnly,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        toolbar: toolbarItems.value,
+        notifyChange(html) {
+          if (!isControlled.value) internalValue.value = html;
+          emit("update:value", html);
+          emit("change", html);
+        },
+        notifyActiveFormats(next) {
+          activeFormats.value = next;
         }
-      }
+      });
     });
-    function updateActiveFormats() {
-      if (typeof document === "undefined") return;
-      const next = /* @__PURE__ */ new Set();
-      if (document.queryCommandState("bold")) next.add("bold");
-      if (document.queryCommandState("italic")) next.add("italic");
-      if (document.queryCommandState("underline")) next.add("underline");
-      if (document.queryCommandState("strikeThrough")) next.add("strikethrough");
-      if (document.queryCommandState("insertUnorderedList")) next.add("bulletList");
-      if (document.queryCommandState("insertOrderedList")) next.add("orderedList");
-      activeFormats.value = next;
-    }
-    function execAction(actionName) {
+    onBeforeUnmount(() => {
+      engineInstance?.destroy();
+      engineInstance = null;
+    });
+    function execButtonAction(btn) {
       if (props.readOnly || props.disabled) return;
-      editorRef.value?.focus();
-      const mapping = mapToolbarAction(actionName);
-      if (mapping) {
-        document.execCommand(mapping.command, false, mapping.argument);
-        handleInput();
-        updateActiveFormats();
-        return;
-      }
-      if (actionName === "codeBlock") {
-        document.execCommand("formatBlock", false, "PRE");
-        handleInput();
+      if (btn.action && editorRef.value) {
+        btn.action(editorRef.value);
         return;
       }
-      if (actionName === "link") {
-        const url = typeof window !== "undefined" ? window.prompt("Enter URL:") : null;
-        if (url && isValidUrl(url)) {
-          document.execCommand("createLink", false, url);
-          handleInput();
-        }
-        return;
-      }
-      if (actionName === "image") {
-        const url = typeof window !== "undefined" ? window.prompt("Enter image URL:") : null;
-        if (url && isValidUrl(url)) {
-          document.execCommand("insertImage", false, url);
-          handleInput();
-        }
-      }
-    }
-    function handleInput() {
-      if (!editorRef.value) return;
-      const html = editorRef.value.innerHTML;
-      const sanitized = sanitizeHtml(html);
-      if (!isControlled.value) {
-        internalValue.value = sanitized;
-      }
-      emit("update:value", sanitized);
-      emit("change", sanitized);
+      engineInstance?.exec(btn.name);
     }
     function handleKeydown(e) {
-      const match = findHotkeyMatch(toolbarButtons.value, e);
+      const match = findHotkeyMatch(toolbarItems.value, e);
       if (match) {
         e.preventDefault();
-        execAction(match);
+        execButtonAction(match);
       }
     }
-    let selectionHandler = null;
-    onMounted(() => {
-      if (typeof document !== "undefined") {
-        selectionHandler = updateActiveFormats;
-        document.addEventListener("selectionchange", selectionHandler);
-      }
-    });
-    onBeforeUnmount(() => {
-      if (selectionHandler && typeof document !== "undefined") {
-        document.removeEventListener("selectionchange", selectionHandler);
-      }
-    });
     const containerClasses = computed(
       () => classNames(
         getRichTextContainerClasses(props.disabled, props.className),
@@ -143,8 +111,17 @@ var RichTextEditor = defineComponent({
           role: "toolbar",
           "aria-label": "Text formatting"
         },
-        toolbarButtons.value.map(
-          (btn) => h(
+        toolbarItems.value.map((item, idx) => {
+          if (isToolbarSeparator(item)) {
+            return h("div", {
+              key: `sep-${idx}`,
+              class: richTextToolbarSeparatorClasses,
+              role: "separator",
+              "aria-orientation": "vertical"
+            });
+          }
+          const btn = item;
+          return h(
             "button",
             {
               key: btn.name,
@@ -156,24 +133,22 @@ var RichTextEditor = defineComponent({
               disabled: props.disabled || props.readOnly,
               onClick: (e) => {
                 e.preventDefault();
-                execAction(btn.name);
+                execButtonAction(btn);
               }
             },
-            btn.label
-          )
-        )
+            btn.icon ? h("span", { innerHTML: btn.icon }) : btn.label
+          );
+        })
       );
       const editorEl = h("div", {
         ref: editorRef,
         class: editorAreaClasses.value,
-        contenteditable: !(props.readOnly || props.disabled),
         role: "textbox",
         "aria-multiline": true,
         "aria-readonly": props.readOnly || void 0,
         "aria-disabled": props.disabled || void 0,
         "aria-placeholder": props.placeholder,
         "data-placeholder": props.placeholder,
-        onInput: handleInput,
         onKeydown: handleKeydown
       });
       const placeholderEl = isEmpty.value && props.placeholder ? h(

package/dist/{chunk-3FVWZYBQ.js → chunk-FC27Q4CL.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkFLAJKB2O_js = require('./chunk-FLAJKB2O.js');
-var chunkBKTQ6RWR_js = require('./chunk-BKTQ6RWR.js');
+var chunkGZK6R2E3_js = require('./chunk-GZK6R2E3.js');
+var chunkACYYQJ6M_js = require('./chunk-ACYYQJ6M.js');
 var chunkHBFFINAI_js = require('./chunk-HBFFINAI.js');
-var chunkEPE6OOV7_js = require('./chunk-EPE6OOV7.js');
-var chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
+var chunkZOUJFFG4_js = require('./chunk-ZOUJFFG4.js');
+var chunkUHVUKLHF_js = require('./chunk-UHVUKLHF.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -19,6 +19,7 @@ var TreeMapChart = vue.defineComponent({
     showLabels: { type: Boolean, default: true },
     minLabelSize: { type: Number, default: 10 },
     colors: { type: Array },
+    gradient: { type: Boolean, default: false },
     // Interaction
     hoverable: { type: Boolean, default: false },
     hoveredIndex: { type: Number, default: void 0 },
@@ -55,7 +56,7 @@ var TreeMapChart = vue.defineComponent({
       handleLegendHover,
       handleLegendLeave,
       wrapperClasses
-    } = chunkFLAJKB2O_js.useChartInteraction({
+    } = chunkGZK6R2E3_js.useChartInteraction({
       hoverable: vue.computed(() => props.hoverable),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: vue.computed(() => props.selectable),
@@ -72,6 +73,7 @@ var TreeMapChart = vue.defineComponent({
     });
     const innerRect = vue.computed(() => tigercatCore.getChartInnerRect(props.width, props.height, props.padding));
     const palette = vue.computed(() => tigercatCore.resolveChartPalette(props.colors));
+    const gradientPrefix = tigercatCore.getTreeMapGradientPrefix();
     const nodes = vue.computed(
       () => tigercatCore.computeTreeMapNodes(props.data, {
         width: innerRect.value.width,
@@ -99,7 +101,7 @@ var TreeMapChart = vue.defineComponent({
     return () => {
       const interactive = props.hoverable || props.selectable;
       const chart = vue.h(
-        chunkFCV4ML6I_js.ChartCanvas,
+        chunkUHVUKLHF_js.ChartCanvas,
         {
           width: props.width,
           height: props.height,
@@ -110,61 +112,96 @@ var TreeMapChart = vue.defineComponent({
         },
         {
           default: () => {
+            const gradientDefs = props.gradient ? vue.h(
+              "defs",
+              null,
+              nodes.value.map(
+                (node) => vue.h(
+                  "linearGradient",
+                  {
+                    id: `${gradientPrefix}-${node.index}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    vue.h("stop", {
+                      offset: "0%",
+                      "stop-color": node.color,
+                      "stop-opacity": "1"
+                    }),
+                    vue.h("stop", {
+                      offset: "100%",
+                      "stop-color": node.color,
+                      "stop-opacity": "0.7"
+                    })
+                  ]
+                )
+              )
+            ) : null;
             return vue.h(
               chunkHBFFINAI_js.ChartSeries,
               { data: nodes.value, type: "treemap" },
               {
-                default: () => nodes.value.map((node) => {
-                  const opacity = tigercatCore.getChartElementOpacity(node.index, activeIndex.value, {
-                    activeOpacity: props.activeOpacity,
-                    inactiveOpacity: props.inactiveOpacity
-                  });
-                  const elems = [
-                    vue.h("rect", {
-                      key: `node-${node.index}`,
-                      x: node.x,
-                      y: node.y,
-                      width: node.w,
-                      height: node.h,
-                      rx: 2,
-                      fill: node.color,
-                      opacity,
-                      class: tigercatCore.classNames(interactive && "cursor-pointer"),
-                      style: { transition: "opacity 0.2s ease-out" },
-                      onMouseenter: (e) => handleMouseEnter(node.index, e),
-                      onMousemove: handleMouseMove,
-                      onMouseleave: handleMouseLeave,
-                      onClick: () => handleClick(node.index)
-                    })
-                  ];
-                  if (props.showLabels && node.w > 30 && node.h > props.minLabelSize + 4) {
-                    elems.push(
-                      vue.h(
-                        "text",
-                        {
-                          key: `label-${node.index}`,
-                          x: node.x + node.w / 2,
-                          y: node.y + node.h / 2,
-                          class: "fill-white text-xs",
-                          "text-anchor": "middle",
-                          "dominant-baseline": "middle",
-                          style: {
-                            pointerEvents: "none",
-                            fontSize: `${Math.min(12, node.h * 0.3)}px`
-                          }
+                default: () => [
+                  gradientDefs,
+                  ...nodes.value.map((node) => {
+                    const opacity = tigercatCore.getChartElementOpacity(node.index, activeIndex.value, {
+                      activeOpacity: props.activeOpacity,
+                      inactiveOpacity: props.inactiveOpacity
+                    });
+                    const elems = [
+                      vue.h("rect", {
+                        key: `node-${node.index}`,
+                        x: node.x,
+                        y: node.y,
+                        width: node.w,
+                        height: node.h,
+                        rx: 2,
+                        fill: props.gradient ? `url(#${gradientPrefix}-${node.index})` : node.color,
+                        opacity,
+                        class: tigercatCore.classNames(interactive && "cursor-pointer"),
+                        style: {
+                          transition: "opacity 0.2s ease-out, filter 0.2s ease-out",
+                          rx: "var(--tiger-chart-block-radius, 2px)",
+                          filter: activeIndex.value === node.index ? "var(--tiger-chart-block-active-filter, none)" : "none"
                         },
-                        node.label
-                      )
-                    );
-                  }
-                  return elems;
-                }).flat()
+                        onMouseenter: (e) => handleMouseEnter(node.index, e),
+                        onMousemove: handleMouseMove,
+                        onMouseleave: handleMouseLeave,
+                        onClick: () => handleClick(node.index)
+                      })
+                    ];
+                    if (props.showLabels && node.w > 30 && node.h > props.minLabelSize + 4) {
+                      elems.push(
+                        vue.h(
+                          "text",
+                          {
+                            key: `label-${node.index}`,
+                            x: node.x + node.w / 2,
+                            y: node.y + node.h / 2,
+                            class: "fill-white text-xs",
+                            "text-anchor": "middle",
+                            "dominant-baseline": "middle",
+                            style: {
+                              pointerEvents: "none",
+                              fontSize: `${Math.min(12, node.h * 0.3)}px`
+                            }
+                          },
+                          node.label
+                        )
+                      );
+                    }
+                    return elems;
+                  }).flat()
+                ]
               }
             );
           }
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkEPE6OOV7_js.ChartTooltip, {
+      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkZOUJFFG4_js.ChartTooltip, {
         content: tooltipContent.value,
         visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
@@ -175,7 +212,7 @@ var TreeMapChart = vue.defineComponent({
       }
       return vue.h("div", { class: wrapperClasses.value }, [
         chart,
-        vue.h(chunkBKTQ6RWR_js.ChartLegend, {
+        vue.h(chunkACYYQJ6M_js.ChartLegend, {
           items: legendItems.value,
           position: props.legendPosition,
           markerSize: props.legendMarkerSize,

package/dist/{chunk-WB6JGQWN.js → chunk-FE2HR4E5.js}

@@ -158,7 +158,10 @@ var Transfer = vue.defineComponent({
         // Body
         vue.h(
           "div",
-          { class: tigercatCore.transferPanelBodyClasses, role: "listbox" },
+          {
+            class: tigercatCore.transferPanelBodyClasses,
+            ...tigercatCore.getPickerListboxAria({ label: `${title} items` })
+          },
           items.length > 0 ? items.map((item) => {
             const isSelected = selectedKeys.has(item.key);
             const isDisabled = props.disabled || !!item.disabled;
@@ -167,9 +170,7 @@ var Transfer = vue.defineComponent({
               {
                 key: item.key,
                 class: tigercatCore.getTransferItemClasses(isSelected, isDisabled, props.size),
-                role: "option",
-                "aria-selected": isSelected,
-                "aria-disabled": isDisabled
+                ...tigercatCore.getPickerOptionAria({ selected: isSelected, disabled: isDisabled })
               },
               [
                 vue.h("input", {

package/dist/{chunk-I5K3R4FN.mjs → chunk-FMH4CLSA.mjs}

@@ -28,6 +28,10 @@ var CodeEditor = defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    highlighter: {
+      type: Object,
+      default: void 0
     }
   },
   emits: ["update:value", "change"],
@@ -83,6 +87,14 @@ var CodeEditor = defineComponent({
       }
     };
     const renderHighlightedLine = (line, lineIndex) => {
+      const engine = props.highlighter;
+      if (engine?.highlightLine) {
+        return h("div", {
+          key: lineIndex,
+          class: "min-h-[1.625rem]",
+          innerHTML: engine.highlightLine(line, props.language, props.theme) || (line === "" ? "\n" : "")
+        });
+      }
       const tokens = tokenizeLine(line, props.language);
       const spans = tokens.map((token, ti) => {
         const cls = getTokenClasses(token.type, props.theme);
@@ -103,7 +115,13 @@ var CodeEditor = defineComponent({
         },
         lineNums.value.map((n) => h("div", { key: n, class: "min-h-[1.625rem]" }, String(n)))
       ) : null;
-      const highlightNode = h(
+      const blockEngine = props.highlighter;
+      const blockHtml = blockEngine && !blockEngine.highlightLine && blockEngine.highlightCode ? blockEngine.highlightCode(code.value, props.language, props.theme) : null;
+      const highlightNode = blockHtml !== null ? h("div", {
+        class: classNames(codeEditorHighlightClasses, wrapClass),
+        "aria-hidden": "true",
+        innerHTML: blockHtml
+      }) : h(
         "div",
         { class: classNames(codeEditorHighlightClasses, wrapClass), "aria-hidden": "true" },
         lines.value.map((line, i) => renderHighlightedLine(line, i))