ucc-ui/dist/es/CodeEditor-CoBtVBCt.js

ucc-ui components library

import { render as L, h as _, defineComponent as k, inject as F, reactive as T, openBlock as s, createElementBlock as p, Fragment as D, renderList as R, unref as m, createBlock as x, mergeProps as E, withCtx as M, createVNode as v, withDirectives as H, createElementVNode as O, toDisplayString as I, vShow as A, toRaw as y, computed as P, ref as C, shallowRef as U, provide as N, onBeforeUnmount as $, onMounted as V, normalizeClass as j, normalizeStyle as q, renderSlot as b } from "vue";
import { W as K, a as G, b as Q, c as X, e as Z, l as J, m as Y, f as ee, d as oe } from "./vendors-PY6Ic9FA.js";
import { w as te, r as z, i as ne, p as ie } from "./utils-BzE2Aob-.js";
import "./ConfigProvider-C-6nRyrn.js";
import { U as w } from "./Button-DOc5qANu.js";
import { _ as ae } from "./Tooltip-vRZR9o6X.js";
const re = "u-popper-container", Be = {
  DARK: "dark",
  LIGHT: "light"
}, Se = {
  HOVER: "hover",
  CLICK: "click",
  FOCUS: "focus",
  CONTEXTMENU: "contextmenu"
}, le = te(ae, (u) => L(_("div", { id: re }), document.body));
self.MonacoEnvironment = {
  // 提供一个定义worker路径的全局变量
  getWorker(u, o) {
    return o === "json" ? new K() : o === "css" || o === "scss" || o === "less" ? new G() : o === "html" || o === "handlebars" || o === "razor" ? new Q() : o === "typescript" || o === "javascript" ? new X() : new Z();
  }
};
J.typescript.typescriptDefaults.setEagerModelSync(!0);
const W = Symbol("CCodeEditorCtx"), d = {
  IncrementFontSize: "IncrementFontSize",
  DecrementFontSize: "DecrementFontSize",
  ResetFontSize: "ResetFontSize",
  Fomatter: "Fomatter",
  ToggleMinimap: "ToggleMinimap",
  ToggleReadOnly: "ToggleReadOnly",
  ToggleWordWrap: "ToggleWordWrap"
}, se = { class: "u-code-editor__toolbox" }, ce = ["onClick"], de = {
  key: 1,
  class: "content"
}, pe = /* @__PURE__ */ k({
  __name: "CodeEditorToolbox",
  setup(u) {
    const {
      editor: o,
      options: n
    } = F(W), g = T([
      { name: d.IncrementFontSize, label: "增加字号", icon: "fa-plus", onClick: f },
      { name: d.DecrementFontSize, label: "减小字号", icon: "fa-minus", onClick: h },
      { name: d.ResetFontSize, label: "重置字号", icon: "fa-undo", onClick: l },
      { name: d.Fomatter, label: "格式化", icon: "fa-code", onClick: i },
      { name: d.ToggleMinimap, label: "缩略图", icon: "fa-compress", onClick: r }
    ]);
    function f() {
      var e;
      n.fontSize += 1, (e = o.value) == null || e.updateOptions({ fontSize: n.fontSize });
    }
    function h() {
      var e;
      n.fontSize -= 1, (e = o.value) == null || e.updateOptions({ fontSize: n.fontSize });
    }
    function l() {
      var e;
      n.fontSize = z, (e = o.value) == null || e.updateOptions({ fontSize: n.fontSize });
    }
    function i() {
      var e, c;
      (c = (e = o.value) == null ? void 0 : e.getAction("editor.action.formatDocument")) == null || c.run();
    }
    function r() {
      var e;
      n.minimap.enabled = !n.minimap.enabled, (e = o.value) == null || e.updateOptions({ minimap: n.minimap });
    }
    return (e, c) => (s(), p("section", se, [
      (s(!0), p(D, null, R(g, (t, B) => (s(), p("div", {
        class: "u-code-editor__toolbox-item",
        key: B,
        onClick: (a) => m(ne)(t.onClick) && t.onClick(t)
      }, [
        t.showLabel ? (s(), p("div", de, [
          v(m(w), {
            icon: t.icon,
            "v-bind": t.iconProps ?? void 0
          }, null, 8, ["icon", "v-bind"]),
          H(O("span", { class: "u-code-editor__toolbox-item-label" }, I(t.label), 513), [
            [A, t.showLabel ?? !1]
          ])
        ])) : (s(), x(m(le), E({
          key: 0,
          class: "content",
          visible: !1,
          placement: "top",
          content: t.tooltip ?? t.label,
          effect: "light",
          width: 50,
          ref_for: !0
        }, t.tooltipProps ?? void 0), {
          default: M(() => [
            v(m(w), {
              icon: t.icon,
              "v-bind": t.iconProps ?? void 0
            }, null, 8, ["icon", "v-bind"])
          ]),
          _: 2
        }, 1040, ["content"]))
      ], 8, ce))), 128))
    ]));
  }
}), Ce = /* @__PURE__ */ k({
  name: "UCodeEditor",
  __name: "CodeEditor",
  props: {
    showToolbox: { type: Boolean, default: !0 },
    showToolboxLabel: { type: Boolean },
    height: { default: 400 },
    shadow: { default: "hover" },
    model: {},
    value: { default: `function hello() {
	console.log('Hello, world!');
}` },
    language: { default: "javascript" },
    theme: { default: "vs-dark" },
    autoDetectHighContrast: { type: Boolean },
    accessibilityHelpUrl: {},
    ariaContainerElement: {},
    dimension: {},
    overflowWidgetsDomNode: {},
    inDiffEditor: { type: Boolean },
    ariaLabel: {},
    ariaRequired: { type: Boolean },
    screenReaderAnnounceInlineSuggestion: { type: Boolean },
    tabIndex: {},
    rulers: {},
    wordSegmenterLocales: {},
    wordSeparators: {},
    selectionClipboard: { type: Boolean },
    lineNumbers: {},
    cursorSurroundingLines: {},
    cursorSurroundingLinesStyle: {},
    renderFinalNewline: {},
    unusualLineTerminators: {},
    selectOnLineNumbers: { type: Boolean },
    lineNumbersMinChars: {},
    glyphMargin: { type: Boolean },
    lineDecorationsWidth: {},
    revealHorizontalRightPadding: {},
    roundedSelection: { type: Boolean },
    extraEditorClassName: {},
    readOnly: { type: Boolean, default: !1 },
    readOnlyMessage: {},
    domReadOnly: { type: Boolean },
    linkedEditing: { type: Boolean },
    renameOnType: { type: Boolean },
    renderValidationDecorations: {},
    scrollbar: {},
    stickyScroll: {},
    minimap: { default: { enabled: !0 } },
    find: {},
    fixedOverflowWidgets: { type: Boolean },
    overviewRulerLanes: {},
    overviewRulerBorder: { type: Boolean },
    cursorBlinking: {},
    mouseWheelZoom: { type: Boolean },
    mouseStyle: {},
    cursorSmoothCaretAnimation: {},
    cursorStyle: {},
    cursorWidth: {},
    fontLigatures: { type: [Boolean, String] },
    fontVariations: { type: [Boolean, String] },
    defaultColorDecorators: { type: Boolean },
    disableLayerHinting: { type: Boolean },
    disableMonospaceOptimizations: { type: Boolean },
    hideCursorInOverviewRuler: { type: Boolean },
    scrollBeyondLastLine: { type: Boolean },
    scrollBeyondLastColumn: {},
    smoothScrolling: { type: Boolean },
    automaticLayout: { type: Boolean, default: !1 },
    wordWrap: {},
    wordWrapOverride1: {},
    wordWrapOverride2: {},
    wordWrapColumn: {},
    wrappingIndent: {},
    wrappingStrategy: {},
    wordWrapBreakBeforeCharacters: {},
    wordWrapBreakAfterCharacters: {},
    wordBreak: {},
    stopRenderingLineAfter: {},
    hover: {},
    links: { type: Boolean },
    colorDecorators: { type: Boolean },
    colorDecoratorsActivatedOn: {},
    colorDecoratorsLimit: {},
    comments: {},
    contextmenu: { type: Boolean },
    mouseWheelScrollSensitivity: {},
    fastScrollSensitivity: {},
    scrollPredominantAxis: { type: Boolean },
    columnSelection: { type: Boolean },
    multiCursorModifier: {},
    multiCursorMergeOverlapping: { type: Boolean },
    multiCursorPaste: {},
    multiCursorLimit: {},
    accessibilitySupport: {},
    accessibilityPageSize: {},
    suggest: {},
    inlineSuggest: {},
    experimentalInlineEdit: {},
    smartSelect: {},
    gotoLocation: {},
    quickSuggestions: { type: [Boolean, Object] },
    quickSuggestionsDelay: {},
    padding: {},
    parameterHints: {},
    autoClosingBrackets: {},
    autoClosingComments: {},
    autoClosingQuotes: {},
    autoClosingDelete: {},
    autoClosingOvertype: {},
    autoSurround: {},
    autoIndent: {},
    stickyTabStops: { type: Boolean },
    formatOnType: { type: Boolean },
    formatOnPaste: { type: Boolean },
    dragAndDrop: { type: Boolean },
    suggestOnTriggerCharacters: { type: Boolean },
    acceptSuggestionOnEnter: {},
    acceptSuggestionOnCommitCharacter: { type: Boolean },
    snippetSuggestions: {},
    emptySelectionClipboard: { type: Boolean },
    copyWithSyntaxHighlighting: { type: Boolean },
    suggestSelection: {},
    suggestFontSize: {},
    suggestLineHeight: {},
    tabCompletion: {},
    selectionHighlight: { type: Boolean },
    occurrencesHighlight: {},
    codeLens: { type: Boolean },
    codeLensFontFamily: {},
    codeLensFontSize: {},
    lightbulb: {},
    codeActionsOnSaveTimeout: {},
    folding: { type: Boolean },
    foldingStrategy: {},
    foldingHighlight: { type: Boolean },
    foldingImportsByDefault: { type: Boolean },
    foldingMaximumRegions: {},
    showFoldingControls: {},
    unfoldOnClickAfterEndOfLine: { type: Boolean },
    matchBrackets: {},
    experimentalWhitespaceRendering: {},
    renderWhitespace: {},
    renderControlCharacters: { type: Boolean },
    renderLineHighlight: {},
    renderLineHighlightOnlyWhenFocus: { type: Boolean },
    useTabStops: { type: Boolean },
    fontFamily: {},
    fontWeight: {},
    fontSize: { default: z },
    lineHeight: {},
    letterSpacing: {},
    showUnused: { type: Boolean },
    peekWidgetDefaultFocus: {},
    placeholder: {},
    definitionLinkOpensInPeek: { type: Boolean },
    showDeprecated: { type: Boolean },
    matchOnWordStartOnly: { type: Boolean },
    inlayHints: {},
    useShadowDOM: { type: Boolean },
    guides: {},
    unicodeHighlight: {},
    bracketPairColorization: {},
    dropIntoEditor: {},
    pasteAs: {},
    tabFocusMode: { type: Boolean },
    inlineCompletionsAccessibilityVerbose: { type: Boolean },
    tabSize: { default: 2 },
    insertSpaces: { type: Boolean },
    detectIndentation: { type: Boolean },
    trimAutoWhitespace: { type: Boolean },
    largeFileOptimizations: { type: Boolean },
    wordBasedSuggestions: {},
    wordBasedSuggestionsOnlySameLanguage: { type: Boolean },
    "semanticHighlighting.enabled": { type: [Boolean, String] },
    stablePeek: { type: Boolean },
    maxTokenizationLineLength: {}
  },
  emits: ["update:value", "change"],
  setup(u, { emit: o }) {
    const n = u, g = o, f = ee(y(n)), h = P(() => ie(n.height, { unit: "rem" })), l = C(null), i = C(null), r = C(null), e = U(null);
    N(W, {
      editor: i,
      options: f
    }), $(() => {
      i.value && i.value.dispose(), l.value && l.value.disconnect();
    }), V(() => {
      c();
    });
    function c() {
      if (!r.value)
        return console.error("UCodeEditor：editorRef is null");
      i.value = Y.editor.create(r.value, y(n)), e.value = i.value.getModel(), t(), i.value.onDidChangeModelContent((a) => {
        var S;
        g("update:value", (S = y(e.value)) == null ? void 0 : S.getValue()), g("change", a);
      });
    }
    function t() {
      r.value && (l.value = new ResizeObserver(oe(() => B())), l.value.observe(r.value));
    }
    function B() {
      var a;
      (a = y(i.value)) == null || a.layout();
    }
    return (a, S) => (s(), p("main", {
      class: j([
        "u-code-editor",
        `is-shadow--${a.shadow}`
      ]),
      style: q({ height: h.value })
    }, [
      O("section", {
        ref_key: "editorRef",
        ref: r,
        class: "u-code-editor__inner"
      }, null, 512),
      b(a.$slots, "default"),
      b(a.$slots, "toolbox", {}, () => [
        v(pe)
      ])
    ], 6));
  }
});
export {
  Se as C,
  le as U,
  Ce as _,
  Be as a,
  re as b
};