@talex-touch/tuffex 0.3.3 → 0.3.4

package/dist/lib/code-editor/src/TxCodeEditor.vue2.js

@@ -0,0 +1,662 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const state = require('@codemirror/state');
+const view = require('@codemirror/view');
+const language = require('@codemirror/language');
+const index$1 = require('../../node_modules/.pnpm/@lezer_highlight@1.2.3/node_modules/@lezer/highlight/dist/index.js');
+const autocomplete = require('@codemirror/autocomplete');
+const commands = require('@codemirror/commands');
+const search = require('@codemirror/search');
+const lint = require('@codemirror/lint');
+const langJson = require('@codemirror/lang-json');
+const langJavascript = require('@codemirror/lang-javascript');
+const langYaml = require('@codemirror/lang-yaml');
+const properties = require('../../node_modules/.pnpm/@codemirror_legacy-modes@6.5.2/node_modules/@codemirror/legacy-modes/mode/properties.js');
+const toml = require('../../node_modules/.pnpm/@codemirror_legacy-modes@6.5.2/node_modules/@codemirror/legacy-modes/mode/toml.js');
+const yaml = require('yaml');
+const index = require('../../packages/utils/env/index.js');
+
+const _hoisted_1 = ["data-theme"];
+const _hoisted_2 = {
+  key: 0,
+  class: "tx-code-editor__toolbar"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "TxCodeEditor"
+  },
+  __name: "TxCodeEditor",
+  props: {
+    modelValue: { default: "" },
+    language: { default: "json" },
+    theme: { default: "auto" },
+    readOnly: { type: Boolean, default: false },
+    lineNumbers: { type: Boolean, default: true },
+    lineWrapping: { type: Boolean, default: false },
+    placeholder: { default: "" },
+    tabSize: { default: 2 },
+    formatOnBlur: { type: Boolean, default: false },
+    formatOnInit: { type: Boolean, default: false },
+    lint: { type: Boolean, default: true },
+    search: { type: Boolean, default: true },
+    completion: { type: Boolean, default: true },
+    extensions: { default: () => [] }
+  },
+  emits: ["update:modelValue", "change", "focus", "blur", "format"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const containerRef = vue.ref(null);
+    const viewRef = vue.ref(null);
+    const isFocused = vue.ref(false);
+    const autoTheme = vue.ref("light");
+    let themeObserver = null;
+    let suppressEmit = false;
+    let allowEmit = false;
+    const baseTheme = view.EditorView.theme({
+      "&": {
+        fontSize: "13px",
+        fontFamily: "var(--tx-font-family-mono, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace)",
+        backgroundColor: "transparent"
+      },
+      ".cm-content": {
+        padding: "12px"
+      },
+      ".cm-scroller": {
+        fontFamily: "inherit"
+      },
+      ".cm-gutters": {
+        border: "none"
+      },
+      "&.cm-focused": {
+        outline: "none"
+      }
+    });
+    const themePalettes = {
+      light: {
+        dark: false,
+        background: "var(--tx-fill-color-blank, #ffffff)",
+        text: "var(--tx-text-color-primary, #303133)",
+        gutter: "var(--tx-fill-color-lighter, #fafafa)",
+        gutterText: "var(--tx-text-color-secondary, #909399)",
+        border: "var(--tx-border-color, #dcdfe6)",
+        selection: "color-mix(in srgb, var(--tx-color-primary, #409eff) 20%, transparent)",
+        activeLine: "var(--tx-fill-color-lighter, #fafafa)",
+        cursor: "var(--tx-color-primary, #409eff)",
+        toolbarBg: "color-mix(in srgb, var(--tx-fill-color-blank, #ffffff) 88%, transparent)"
+      },
+      dark: {
+        dark: true,
+        background: "#0d1117",
+        text: "#e6edf3",
+        gutter: "#0d1117",
+        gutterText: "#7d8590",
+        border: "#30363d",
+        selection: "rgba(56, 139, 253, 0.3)",
+        activeLine: "#161b22",
+        cursor: "#58a6ff",
+        toolbarBg: "rgba(22, 27, 34, 0.9)"
+      },
+      github: {
+        dark: false,
+        background: "#ffffff",
+        text: "#24292f",
+        gutter: "#f6f8fa",
+        gutterText: "#57606a",
+        border: "#d0d7de",
+        selection: "#b6d6fd",
+        activeLine: "#f6f8fa",
+        cursor: "#0969da",
+        toolbarBg: "#f6f8fa"
+      },
+      dracula: {
+        dark: true,
+        background: "#282a36",
+        text: "#f8f8f2",
+        gutter: "#282a36",
+        gutterText: "#6272a4",
+        border: "#44475a",
+        selection: "#44475a",
+        activeLine: "#343746",
+        cursor: "#ff79c6",
+        toolbarBg: "#2b2d3a"
+      },
+      monokai: {
+        dark: true,
+        background: "#272822",
+        text: "#f8f8f2",
+        gutter: "#272822",
+        gutterText: "#75715e",
+        border: "#3e3d32",
+        selection: "#49483e",
+        activeLine: "#3e3d32",
+        cursor: "#f8f8f2",
+        toolbarBg: "#2f2f2a"
+      }
+    };
+    const highlightPalettes = {
+      light: {
+        keyword: "#cf222e",
+        atom: "#0550ae",
+        number: "#0550ae",
+        string: "#0a3069",
+        comment: "#6e7781",
+        variable: "#24292f",
+        type: "#8250df",
+        property: "#0550ae",
+        punctuation: "#24292f",
+        operator: "#cf222e",
+        emphasis: "#1f6feb"
+      },
+      dark: {
+        keyword: "#ff7b72",
+        atom: "#79c0ff",
+        number: "#79c0ff",
+        string: "#a5d6ff",
+        comment: "#8b949e",
+        variable: "#e6edf3",
+        type: "#d2a8ff",
+        property: "#79c0ff",
+        punctuation: "#e6edf3",
+        operator: "#ff7b72",
+        emphasis: "#58a6ff"
+      },
+      github: {
+        keyword: "#cf222e",
+        atom: "#0550ae",
+        number: "#0550ae",
+        string: "#0a3069",
+        comment: "#6e7781",
+        variable: "#24292f",
+        type: "#8250df",
+        property: "#0550ae",
+        punctuation: "#24292f",
+        operator: "#cf222e",
+        emphasis: "#1f6feb"
+      },
+      dracula: {
+        keyword: "#ff79c6",
+        atom: "#bd93f9",
+        number: "#bd93f9",
+        string: "#f1fa8c",
+        comment: "#6272a4",
+        variable: "#f8f8f2",
+        type: "#8be9fd",
+        property: "#50fa7b",
+        punctuation: "#f8f8f2",
+        operator: "#ff79c6",
+        emphasis: "#8be9fd"
+      },
+      monokai: {
+        keyword: "#f92672",
+        atom: "#ae81ff",
+        number: "#ae81ff",
+        string: "#e6db74",
+        comment: "#75715e",
+        variable: "#f8f8f2",
+        type: "#66d9ef",
+        property: "#a6e22e",
+        punctuation: "#f8f8f2",
+        operator: "#f92672",
+        emphasis: "#66d9ef"
+      }
+    };
+    function resolveAutoTheme() {
+      if (!index.hasDocument())
+        return "light";
+      const root = document.documentElement;
+      const body = document.body;
+      const dataTheme = root.getAttribute("data-theme") || body?.getAttribute("data-theme");
+      if (dataTheme === "dark")
+        return "dark";
+      if (dataTheme === "light")
+        return "light";
+      if (root.classList.contains("dark") || body?.classList.contains("dark"))
+        return "dark";
+      if (root.classList.contains("light") || body?.classList.contains("light"))
+        return "light";
+      return "light";
+    }
+    function syncAutoTheme() {
+      autoTheme.value = resolveAutoTheme();
+    }
+    function setupThemeObserver() {
+      if (!index.hasDocument() || typeof MutationObserver === "undefined")
+        return;
+      const root = document.documentElement;
+      themeObserver?.disconnect();
+      themeObserver = new MutationObserver(() => {
+        syncAutoTheme();
+      });
+      themeObserver.observe(root, {
+        attributes: true,
+        attributeFilter: ["class", "data-theme"]
+      });
+    }
+    const resolvedTheme = vue.computed(() => {
+      const theme = props.theme ?? "auto";
+      if (theme === "auto")
+        return autoTheme.value;
+      return theme;
+    });
+    const themeStyles = vue.computed(() => themePalettes[resolvedTheme.value]);
+    const rootStyle = vue.computed(() => ({
+      "--tx-code-editor-bg": themeStyles.value.background,
+      "--tx-code-editor-border": themeStyles.value.border,
+      "--tx-code-editor-toolbar-bg": themeStyles.value.toolbarBg,
+      "--tx-code-editor-text": themeStyles.value.text,
+      "--tx-code-editor-focus": themeStyles.value.cursor
+    }));
+    function normalizeTabSize(value) {
+      if (!value || Number.isNaN(value) || value < 1)
+        return 2;
+      return Math.round(value);
+    }
+    function createHighlightStyle(theme) {
+      const palette = highlightPalettes[theme];
+      return language.HighlightStyle.define([
+        { tag: index$1.tags.keyword, color: palette.keyword },
+        { tag: [index$1.tags.atom, index$1.tags.bool, index$1.tags.null], color: palette.atom },
+        { tag: [index$1.tags.number, index$1.tags.integer, index$1.tags.float], color: palette.number },
+        { tag: [index$1.tags.string, index$1.tags.special(index$1.tags.string)], color: palette.string },
+        { tag: [index$1.tags.comment, index$1.tags.lineComment, index$1.tags.blockComment], color: palette.comment, fontStyle: "italic" },
+        { tag: [index$1.tags.variableName, index$1.tags.definition(index$1.tags.variableName)], color: palette.variable },
+        { tag: [index$1.tags.typeName, index$1.tags.className], color: palette.type },
+        { tag: [index$1.tags.propertyName, index$1.tags.attributeName], color: palette.property },
+        { tag: index$1.tags.operator, color: palette.operator },
+        { tag: index$1.tags.punctuation, color: palette.punctuation },
+        { tag: index$1.tags.emphasis, color: palette.emphasis, fontStyle: "italic" },
+        { tag: index$1.tags.strong, fontWeight: "700" },
+        { tag: index$1.tags.link, color: palette.emphasis, textDecoration: "underline" }
+      ]);
+    }
+    function createEditorTheme(theme) {
+      const palette = themePalettes[theme];
+      return view.EditorView.theme(
+        {
+          "&": {
+            color: palette.text,
+            backgroundColor: palette.background
+          },
+          ".cm-content": {
+            caretColor: palette.cursor
+          },
+          ".cm-gutters": {
+            backgroundColor: palette.gutter,
+            color: palette.gutterText,
+            borderRight: `1px solid ${palette.border}`
+          },
+          ".cm-activeLine": {
+            backgroundColor: palette.activeLine
+          },
+          ".cm-activeLineGutter": {
+            backgroundColor: palette.activeLine
+          },
+          ".cm-selectionBackground": {
+            backgroundColor: palette.selection
+          },
+          "&.cm-focused .cm-selectionBackground": {
+            backgroundColor: palette.selection
+          }
+        },
+        { dark: palette.dark }
+      );
+    }
+    function normalizeLanguage(language) {
+      if (language === "js")
+        return "javascript";
+      return language;
+    }
+    function getLanguageExtension(language$1) {
+      if (language$1 === "yaml")
+        return langYaml.yaml();
+      if (language$1 === "toml")
+        return language.StreamLanguage.define(toml.toml);
+      if (language$1 === "ini")
+        return language.StreamLanguage.define(properties.properties);
+      if (language$1 === "javascript")
+        return langJavascript.javascript();
+      return langJson.json();
+    }
+    function resolveDiagnosticsRange(pos, docLength) {
+      const from = Math.max(0, Math.min(docLength, pos?.[0] ?? 0));
+      const rawTo = pos?.[1] ?? from + 1;
+      let to = Math.max(from, Math.min(docLength, rawTo));
+      if (to === from && docLength > from)
+        to = from + 1;
+      return { from, to };
+    }
+    function createYamlDiagnostics(view) {
+      const text = view.state.doc.toString();
+      if (!text.trim())
+        return [];
+      try {
+        const doc = yaml.parseDocument(text);
+        const diagnostics = [];
+        const errors = doc.errors ?? [];
+        const warnings = doc.warnings ?? [];
+        for (const error of errors) {
+          const range = resolveDiagnosticsRange(error.pos, view.state.doc.length);
+          diagnostics.push({
+            ...range,
+            severity: "error",
+            message: error.message || "YAML parse error"
+          });
+        }
+        for (const warning of warnings) {
+          const range = resolveDiagnosticsRange(warning.pos, view.state.doc.length);
+          diagnostics.push({
+            ...range,
+            severity: "warning",
+            message: warning.message || "YAML warning"
+          });
+        }
+        return diagnostics;
+      } catch (error) {
+        const range = resolveDiagnosticsRange(void 0, view.state.doc.length);
+        return [
+          {
+            ...range,
+            severity: "error",
+            message: error instanceof Error ? error.message : "YAML parse error"
+          }
+        ];
+      }
+    }
+    function createLintExtension(language) {
+      if (language === "yaml")
+        return lint.linter((view) => createYamlDiagnostics(view));
+      if (language === "json")
+        return lint.linter(langJson.jsonParseLinter());
+      return null;
+    }
+    function formatValue(value, language) {
+      if (!value.trim())
+        return value;
+      const tabSize = normalizeTabSize(props.tabSize);
+      try {
+        if (language === "yaml") {
+          const parsed2 = yaml.parse(value);
+          return yaml.stringify(parsed2, { indent: tabSize });
+        }
+        if (language !== "json")
+          return null;
+        const parsed = JSON.parse(value);
+        return JSON.stringify(parsed, null, tabSize);
+      } catch {
+        return null;
+      }
+    }
+    function applyValue(next, emitChange) {
+      const view = viewRef.value;
+      if (!view)
+        return;
+      const current = view.state.doc.toString();
+      if (next === current)
+        return;
+      suppressEmit = true;
+      allowEmit = emitChange;
+      view.dispatch({
+        changes: { from: 0, to: current.length, insert: next }
+      });
+      suppressEmit = false;
+      allowEmit = false;
+    }
+    const updateListener = view.EditorView.updateListener.of((update) => {
+      if (!update.docChanged)
+        return;
+      const value = update.state.doc.toString();
+      if (suppressEmit && !allowEmit)
+        return;
+      emit("update:modelValue", value);
+      emit("change", value);
+    });
+    function format() {
+      const view = viewRef.value;
+      if (!view || props.readOnly)
+        return false;
+      const language = normalizeLanguage(props.language);
+      const current = view.state.doc.toString();
+      const formatted = formatValue(current, language);
+      if (formatted === null || formatted === current)
+        return false;
+      applyValue(formatted, true);
+      emit("format", { value: formatted, language });
+      return true;
+    }
+    function openSearch() {
+      const view = viewRef.value;
+      if (!view || !props.search)
+        return false;
+      search.openSearchPanel(view);
+      view.focus();
+      return true;
+    }
+    function foldAllLines() {
+      const view = viewRef.value;
+      if (!view)
+        return false;
+      return language.foldAll(view);
+    }
+    function unfoldAllLines() {
+      const view = viewRef.value;
+      if (!view)
+        return false;
+      return language.unfoldAll(view);
+    }
+    async function copyToClipboard() {
+      const view = viewRef.value;
+      if (!view)
+        return false;
+      const value = view.state.doc.toString();
+      if (!index.hasNavigator() || !navigator.clipboard)
+        return false;
+      try {
+        await navigator.clipboard.writeText(value);
+        return true;
+      } catch {
+        return false;
+      }
+    }
+    function getValue() {
+      const view = viewRef.value;
+      return view ? view.state.doc.toString() : "";
+    }
+    function buildExtensions() {
+      const language$1 = normalizeLanguage(props.language);
+      const tabSize = normalizeTabSize(props.tabSize);
+      const theme = resolvedTheme.value;
+      const extensions = [
+        baseTheme,
+        createEditorTheme(theme),
+        language.syntaxHighlighting(createHighlightStyle(theme), { fallback: true }),
+        language.indentUnit.of(" ".repeat(tabSize)),
+        state.EditorState.tabSize.of(tabSize),
+        view.EditorView.editable.of(!props.readOnly),
+        updateListener,
+        view.drawSelection(),
+        view.highlightActiveLine(),
+        language.bracketMatching(),
+        commands.history(),
+        language.foldGutter(),
+        getLanguageExtension(language$1),
+        view.keymap.of([
+          ...commands.defaultKeymap,
+          ...commands.historyKeymap,
+          ...language.foldKeymap,
+          ...props.search ? search.searchKeymap : [],
+          ...props.completion ? autocomplete.completionKeymap : [],
+          ...props.completion ? autocomplete.closeBracketsKeymap : [],
+          ...props.lint ? lint.lintKeymap : [],
+          {
+            key: "Mod-Shift-f",
+            run: () => {
+              format();
+              return true;
+            }
+          }
+        ])
+      ];
+      if (props.lineNumbers) {
+        extensions.push(view.lineNumbers());
+        extensions.push(view.highlightActiveLineGutter());
+      }
+      if (props.lineWrapping)
+        extensions.push(view.EditorView.lineWrapping);
+      if (props.placeholder)
+        extensions.push(view.placeholder(props.placeholder));
+      if (props.search)
+        extensions.push(search.search());
+      if (props.completion) {
+        extensions.push(autocomplete.autocompletion());
+        extensions.push(autocomplete.closeBrackets());
+      }
+      if (props.lint) {
+        const lintExtension = createLintExtension(language$1);
+        if (lintExtension) {
+          extensions.push(lintExtension);
+          extensions.push(lint.lintGutter());
+        }
+      }
+      if (props.extensions?.length)
+        extensions.push(...props.extensions);
+      return extensions;
+    }
+    function reconfigure() {
+      const view = viewRef.value;
+      if (!view)
+        return;
+      view.dispatch({ effects: state.StateEffect.reconfigure.of(buildExtensions()) });
+    }
+    function handleFocus() {
+      if (!isFocused.value) {
+        isFocused.value = true;
+        emit("focus");
+      }
+    }
+    function handleBlur() {
+      if (isFocused.value) {
+        isFocused.value = false;
+        emit("blur");
+      }
+      if (props.formatOnBlur)
+        format();
+    }
+    vue.onMounted(() => {
+      if (!containerRef.value)
+        return;
+      if (props.theme === "auto") {
+        syncAutoTheme();
+        setupThemeObserver();
+      }
+      const state$1 = state.EditorState.create({
+        doc: props.modelValue ?? "",
+        extensions: buildExtensions()
+      });
+      const view$1 = new view.EditorView({
+        state: state$1,
+        parent: containerRef.value
+      });
+      viewRef.value = view$1;
+      view$1.dom.addEventListener("focus", handleFocus, true);
+      view$1.dom.addEventListener("blur", handleBlur, true);
+      if (props.formatOnInit)
+        format();
+    });
+    vue.onBeforeUnmount(() => {
+      themeObserver?.disconnect();
+      themeObserver = null;
+      const view = viewRef.value;
+      if (!view)
+        return;
+      view.dom.removeEventListener("focus", handleFocus, true);
+      view.dom.removeEventListener("blur", handleBlur, true);
+      view.destroy();
+      viewRef.value = null;
+    });
+    vue.watch(
+      () => props.theme,
+      (next) => {
+        if (next === "auto") {
+          syncAutoTheme();
+          setupThemeObserver();
+          return;
+        }
+        themeObserver?.disconnect();
+        themeObserver = null;
+      }
+    );
+    vue.watch(
+      () => props.modelValue,
+      (next) => {
+        applyValue(next ?? "", false);
+      }
+    );
+    vue.watch(
+      () => [
+        props.language,
+        props.readOnly,
+        props.lineNumbers,
+        props.lineWrapping,
+        props.placeholder,
+        props.tabSize,
+        props.lint,
+        props.search,
+        props.completion,
+        props.extensions
+      ],
+      () => {
+        reconfigure();
+      },
+      { deep: true }
+    );
+    vue.watch(
+      () => resolvedTheme.value,
+      () => {
+        reconfigure();
+      }
+    );
+    __expose({
+      focus: () => viewRef.value?.focus(),
+      blur: () => viewRef.value?.contentDOM?.blur(),
+      format: () => format(),
+      openSearch: () => openSearch(),
+      foldAll: () => foldAllLines(),
+      unfoldAll: () => unfoldAllLines(),
+      copy: () => copyToClipboard(),
+      getValue: () => getValue(),
+      getView: () => viewRef.value
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["tx-code-editor", {
+          "is-focused": isFocused.value,
+          "is-readonly": __props.readOnly
+        }]),
+        "data-theme": resolvedTheme.value,
+        style: vue.normalizeStyle(rootStyle.value)
+      }, [
+        _ctx.$slots.toolbar ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          vue.renderSlot(_ctx.$slots, "toolbar", {
+            format,
+            openSearch,
+            foldAll: foldAllLines,
+            unfoldAll: unfoldAllLines,
+            copy: copyToClipboard,
+            getValue
+          }, void 0, true)
+        ])) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", {
+          ref_key: "containerRef",
+          ref: containerRef,
+          class: "tx-code-editor__view"
+        }, null, 512)
+      ], 14, _hoisted_1);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/code-editor/src/TxCodeEditorToolbar.vue.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const TxCodeEditorToolbar_vue_vue_type_script_setup_true_lang = require('./TxCodeEditorToolbar.vue2.js');
+;/* empty css                          */
+const _pluginVue_exportHelper = require('../../_virtual/_plugin-vue_export-helper.js');
+
+const TxCodeEditorToolbar = /* @__PURE__ */ _pluginVue_exportHelper.default(TxCodeEditorToolbar_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-38eb2702"]]);
+
+exports.default = TxCodeEditorToolbar;