@talex-touch/tuffex 0.3.3 → 0.3.4

package/dist/es/code-editor/src/TxCodeEditorToolbar.vue2.js

@@ -0,0 +1,89 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, renderSlot, createElementVNode, Fragment, renderList, createBlock, createCommentVNode, unref, toDisplayString } from 'vue';
+import { TxIcon } from '../../icon/index.js';
+
+const _hoisted_1 = { class: "tx-code-editor-toolbar__actions" };
+const _hoisted_2 = ["disabled", "onClick"];
+const _hoisted_3 = { class: "tx-code-editor-toolbar__label" };
+const _hoisted_4 = {
+  key: 2,
+  class: "tx-code-editor-toolbar__shortcut"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TxCodeEditorToolbar"
+  },
+  __name: "TxCodeEditorToolbar",
+  props: {
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    compact: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["action"],
+  setup(__props, { emit: __emit }) {
+    const defaultLabels = {
+      format: "Format",
+      search: "Search",
+      foldAll: "Fold",
+      unfoldAll: "Unfold",
+      copy: "Copy"
+    };
+    const defaultActions = [
+      { key: "format" },
+      { key: "search" },
+      { key: "foldAll" },
+      { key: "unfoldAll" },
+      { key: "copy" }
+    ];
+    const props = __props;
+    const emit = __emit;
+    const resolvedActions = computed(() => {
+      return props.actions?.length ? props.actions : defaultActions;
+    });
+    function resolveLabel(action) {
+      return action.label ?? defaultLabels[action.key] ?? action.key;
+    }
+    function handleAction(action) {
+      if (action.disabled)
+        return;
+      emit("action", action.key);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["tx-code-editor-toolbar", { "is-compact": __props.compact }])
+      }, [
+        renderSlot(_ctx.$slots, "leading", {}, void 0, true),
+        createElementVNode("div", _hoisted_1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedActions.value, (action) => {
+            return openBlock(), createElementBlock("button", {
+              key: action.key,
+              type: "button",
+              class: normalizeClass(["tx-code-editor-toolbar__action", { "is-active": action.active }]),
+              disabled: action.disabled,
+              onClick: ($event) => handleAction(action)
+            }, [
+              action.icon && typeof action.icon !== "string" ? (openBlock(), createBlock(unref(TxIcon), {
+                key: 0,
+                icon: action.icon,
+                size: 16
+              }, null, 8, ["icon"])) : action.icon ? (openBlock(), createBlock(unref(TxIcon), {
+                key: 1,
+                name: action.icon,
+                size: 16
+              }, null, 8, ["name"])) : createCommentVNode("", true),
+              createElementVNode("span", _hoisted_3, toDisplayString(resolveLabel(action)), 1),
+              action.shortcut ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(action.shortcut), 1)) : createCommentVNode("", true)
+            ], 10, _hoisted_2);
+          }), 128))
+        ]),
+        renderSlot(_ctx.$slots, "trailing", {}, void 0, true)
+      ], 2);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/code-editor/src/types.d.ts

@@ -0,0 +1,47 @@
+import { Extension } from '@codemirror/state';
+import { TxIconSource } from '../../icon';
+
+export type CodeEditorLanguage = 'json' | 'yaml' | 'toml' | 'ini' | 'javascript' | 'js';
+export type CodeEditorTheme = 'auto' | 'light' | 'dark' | 'github' | 'dracula' | 'monokai';
+export interface CodeEditorProps {
+    modelValue?: string;
+    language?: CodeEditorLanguage;
+    theme?: CodeEditorTheme;
+    readOnly?: boolean;
+    lineNumbers?: boolean;
+    lineWrapping?: boolean;
+    placeholder?: string;
+    tabSize?: number;
+    formatOnBlur?: boolean;
+    formatOnInit?: boolean;
+    lint?: boolean;
+    search?: boolean;
+    completion?: boolean;
+    extensions?: Extension[];
+}
+export interface CodeEditorEmits {
+    (e: 'update:modelValue', value: string): void;
+    (e: 'change', value: string): void;
+    (e: 'focus'): void;
+    (e: 'blur'): void;
+    (e: 'format', payload: {
+        value: string;
+        language: CodeEditorLanguage;
+    }): void;
+}
+export type CodeEditorToolbarActionKey = 'format' | 'search' | 'foldAll' | 'unfoldAll' | 'copy';
+export interface CodeEditorToolbarAction {
+    key: CodeEditorToolbarActionKey;
+    label?: string;
+    icon?: TxIconSource | string;
+    active?: boolean;
+    disabled?: boolean;
+    shortcut?: string;
+}
+export interface CodeEditorToolbarProps {
+    actions?: CodeEditorToolbarAction[];
+    compact?: boolean;
+}
+export interface CodeEditorToolbarEmits {
+    (e: 'action', key: CodeEditorToolbarActionKey): void;
+}

package/dist/es/command-palette/index.js

@@ -1,4 +1,4 @@
-import { withInstall } from '../utils/withInstall.js';
+import { withInstall } from '../packages/tuffex/packages/utils/withInstall.js';
 import TxCommandPalette from './src/TxCommandPalette.vue.js';
 
 const CommandPalette = withInstall(TxCommandPalette);

package/dist/es/command-palette/src/TxCommandPalette.vue.js

@@ -2,6 +2,6 @@ import _sfc_main from './TxCommandPalette.vue2.js';
 /* empty css                      */
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-const TxCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b2251e05"]]);
+const TxCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-26178124"]]);
 
 export { TxCommandPalette as default };

package/dist/es/command-palette/src/TxCommandPalette.vue2.js

@@ -1,26 +1,41 @@
-import { defineComponent, ref, computed, watch, nextTick, createBlock, openBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createCommentVNode, withModifiers, createElementVNode, normalizeStyle, Fragment, renderList, normalizeClass, unref, toDisplayString } from 'vue';
+import { defineComponent, ref, computed, watch, nextTick, createBlock, openBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createCommentVNode, withModifiers, normalizeStyle, createElementVNode, unref, Fragment, renderList, normalizeClass, toDisplayString } from 'vue';
+import { getZIndex, nextZIndex } from '../../packages/tuffex/packages/utils/z-index-manager.js';
 import { TxIcon } from '../../icon/index.js';
 
 const _hoisted_1 = { class: "tx-command-palette__search" };
-const _hoisted_2 = ["value", "placeholder"];
-const _hoisted_3 = { class: "tx-command-palette__list" };
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = {
+const _hoisted_2 = {
+  class: "tx-command-palette__search-icon",
+  "aria-hidden": "true"
+};
+const _hoisted_3 = ["value", "placeholder"];
+const _hoisted_4 = { class: "tx-command-palette__list" };
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = {
   key: 0,
   class: "tx-command-palette__icon",
   "aria-hidden": "true"
 };
-const _hoisted_6 = { class: "tx-command-palette__content" };
-const _hoisted_7 = { class: "tx-command-palette__title" };
-const _hoisted_8 = {
+const _hoisted_7 = { class: "tx-command-palette__content" };
+const _hoisted_8 = { class: "tx-command-palette__title" };
+const _hoisted_9 = {
+  key: 0,
+  class: "tx-command-palette__highlight"
+};
+const _hoisted_10 = { key: 1 };
+const _hoisted_11 = {
   key: 0,
   class: "tx-command-palette__desc"
 };
-const _hoisted_9 = {
+const _hoisted_12 = {
+  key: 0,
+  class: "tx-command-palette__highlight"
+};
+const _hoisted_13 = { key: 1 };
+const _hoisted_14 = {
   key: 1,
   class: "tx-command-palette__shortcut"
 };
-const _hoisted_10 = {
+const _hoisted_15 = {
   key: 0,
   class: "tx-command-palette__empty"
 };
@@ -43,6 +58,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const inputRef = ref(null);
     const query = ref("");
     const activeIndex = ref(0);
+    const zIndex = ref(getZIndex());
+    const composing = ref(false);
     const visible = computed({
       get: () => props.modelValue,
       set: (v) => emit("update:modelValue", v)
@@ -64,6 +81,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => props.modelValue,
       async (v) => {
         if (v) {
+          zIndex.value = nextZIndex();
           emit("open");
           activeIndex.value = 0;
           await nextTick();
@@ -104,7 +122,71 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return icon;
     }
+    function normalizeSegments(value) {
+      return value.split(/\s+/).map((item) => item.trim().toLowerCase()).filter(Boolean);
+    }
+    function getHighlightedParts(text) {
+      if (!text)
+        return [{ text, highlighted: false }];
+      const tokens = normalizeSegments(query.value);
+      if (!tokens.length)
+        return [{ text, highlighted: false }];
+      const lowerText = text.toLowerCase();
+      const ranges = [];
+      for (const token of tokens) {
+        let from = 0;
+        while (from < lowerText.length) {
+          const index = lowerText.indexOf(token, from);
+          if (index === -1)
+            break;
+          ranges.push({ start: index, end: index + token.length });
+          from = index + token.length;
+        }
+      }
+      if (!ranges.length)
+        return [{ text, highlighted: false }];
+      ranges.sort((a, b) => a.start - b.start);
+      const merged = [];
+      for (const range of ranges) {
+        const current = merged[merged.length - 1];
+        if (!current || range.start > current.end) {
+          merged.push({ ...range });
+          continue;
+        }
+        current.end = Math.max(current.end, range.end);
+      }
+      const parts = [];
+      let cursor = 0;
+      for (const range of merged) {
+        if (range.start > cursor) {
+          parts.push({
+            text: text.slice(cursor, range.start),
+            highlighted: false
+          });
+        }
+        parts.push({
+          text: text.slice(range.start, range.end),
+          highlighted: true
+        });
+        cursor = range.end;
+      }
+      if (cursor < text.length) {
+        parts.push({
+          text: text.slice(cursor),
+          highlighted: false
+        });
+      }
+      return parts;
+    }
+    function onCompositionStart() {
+      composing.value = true;
+    }
+    function onCompositionEnd() {
+      composing.value = false;
+    }
     function onKeydown(e) {
+      if (e.isComposing || e.keyCode === 229 || composing.value)
+        return;
       if (!filteredCommands.value.length)
         return;
       if (e.key === "ArrowDown") {
@@ -135,6 +217,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             visible.value ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: "tx-command-palette__overlay",
+              style: normalizeStyle({ zIndex: zIndex.value }),
               role: "dialog",
               "aria-modal": "true",
               onClick: withModifiers(close, ["self"])
@@ -144,6 +227,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle({ "--tx-command-palette-max": `${__props.maxHeight}px` })
               }, [
                 createElementVNode("div", _hoisted_1, [
+                  createElementVNode("span", _hoisted_2, [
+                    createVNode(unref(TxIcon), {
+                      icon: { type: "builtin", value: "search" },
+                      size: 16
+                    })
+                  ]),
                   createElementVNode("input", {
                     ref_key: "inputRef",
                     ref: inputRef,
@@ -151,10 +240,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     value: query.value,
                     placeholder: __props.placeholder,
                     onInput: _cache[0] || (_cache[0] = (e) => onInput(e.target.value)),
-                    onKeydown
-                  }, null, 40, _hoisted_2)
+                    onKeydown,
+                    onCompositionstart: onCompositionStart,
+                    onCompositionend: onCompositionEnd
+                  }, null, 40, _hoisted_3)
                 ]),
-                createElementVNode("div", _hoisted_3, [
+                createElementVNode("div", _hoisted_4, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(filteredCommands.value, (cmd, index) => {
                     return openBlock(), createElementBlock("button", {
                       key: cmd.id,
@@ -165,23 +256,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       }]),
                       onClick: ($event) => selectItem(cmd)
                     }, [
-                      cmd.icon ? (openBlock(), createElementBlock("span", _hoisted_5, [
+                      cmd.icon ? (openBlock(), createElementBlock("span", _hoisted_6, [
                         createVNode(unref(TxIcon), {
                           icon: resolveIcon(cmd.icon),
                           size: 16
                         }, null, 8, ["icon"])
                       ])) : createCommentVNode("", true),
-                      createElementVNode("span", _hoisted_6, [
-                        createElementVNode("span", _hoisted_7, toDisplayString(cmd.title), 1),
-                        cmd.description ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(cmd.description), 1)) : createCommentVNode("", true)
+                      createElementVNode("span", _hoisted_7, [
+                        createElementVNode("span", _hoisted_8, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(getHighlightedParts(cmd.title), (part, partIndex) => {
+                            return openBlock(), createElementBlock(Fragment, {
+                              key: `${cmd.id}-title-${partIndex}`
+                            }, [
+                              part.highlighted ? (openBlock(), createElementBlock("mark", _hoisted_9, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(part.text), 1))
+                            ], 64);
+                          }), 128))
+                        ]),
+                        cmd.description ? (openBlock(), createElementBlock("span", _hoisted_11, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(getHighlightedParts(cmd.description), (part, partIndex) => {
+                            return openBlock(), createElementBlock(Fragment, {
+                              key: `${cmd.id}-desc-${partIndex}`
+                            }, [
+                              part.highlighted ? (openBlock(), createElementBlock("mark", _hoisted_12, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(part.text), 1))
+                            ], 64);
+                          }), 128))
+                        ])) : createCommentVNode("", true)
                       ]),
-                      cmd.shortcut ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(cmd.shortcut), 1)) : createCommentVNode("", true)
-                    ], 10, _hoisted_4);
+                      cmd.shortcut ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(cmd.shortcut), 1)) : createCommentVNode("", true)
+                    ], 10, _hoisted_5);
                   }), 128)),
-                  !filteredCommands.value.length ? (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(__props.emptyText), 1)) : createCommentVNode("", true)
+                  !filteredCommands.value.length ? (openBlock(), createElementBlock("div", _hoisted_15, toDisplayString(__props.emptyText), 1)) : createCommentVNode("", true)
                 ])
               ], 4)
-            ])) : createCommentVNode("", true)
+            ], 4)) : createCommentVNode("", true)
           ]),
           _: 1
         })