@farris/ui-vue/components/code-editor/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as B, ref as y, watch as J, onMounted as K, onBeforeUnmount as G, createVNode as p, computed as Y, reactive as Q } from "vue";
import { FButtonEdit as X } from "../button-edit/index.esm.js";
import { createPropsResolver as Z } from "../dynamic-resolver/index.esm.js";
function _(e, t, n) {
  return t in e ? Object.defineProperty(e, t, {
    value: n,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : e[t] = n, e;
}
function A(e, t) {
  var n = Object.keys(e);
  if (Object.getOwnPropertySymbols) {
    var r = Object.getOwnPropertySymbols(e);
    t && (r = r.filter(function(o) {
      return Object.getOwnPropertyDescriptor(e, o).enumerable;
    })), n.push.apply(n, r);
  }
  return n;
}
function I(e) {
  for (var t = 1; t < arguments.length; t++) {
    var n = arguments[t] != null ? arguments[t] : {};
    t % 2 ? A(Object(n), !0).forEach(function(r) {
      _(e, r, n[r]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : A(Object(n)).forEach(function(r) {
      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(n, r));
    });
  }
  return e;
}
function k(e, t) {
  if (e == null) return {};
  var n = {}, r = Object.keys(e), o, a;
  for (a = 0; a < r.length; a++)
    o = r[a], !(t.indexOf(o) >= 0) && (n[o] = e[o]);
  return n;
}
function ee(e, t) {
  if (e == null) return {};
  var n = k(e, t), r, o;
  if (Object.getOwnPropertySymbols) {
    var a = Object.getOwnPropertySymbols(e);
    for (o = 0; o < a.length; o++)
      r = a[o], !(t.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
  }
  return n;
}
function te(e, t) {
  return ne(e) || re(e, t) || oe(e, t) || ae();
}
function ne(e) {
  if (Array.isArray(e)) return e;
}
function re(e, t) {
  if (!(typeof Symbol > "u" || !(Symbol.iterator in Object(e)))) {
    var n = [], r = !0, o = !1, a = void 0;
    try {
      for (var c = e[Symbol.iterator](), u; !(r = (u = c.next()).done) && (n.push(u.value), !(t && n.length === t)); r = !0)
        ;
    } catch (i) {
      o = !0, a = i;
    } finally {
      try {
        !r && c.return != null && c.return();
      } finally {
        if (o) throw a;
      }
    }
    return n;
  }
}
function oe(e, t) {
  if (e) {
    if (typeof e == "string") return R(e, t);
    var n = Object.prototype.toString.call(e).slice(8, -1);
    if (n === "Object" && e.constructor && (n = e.constructor.name), n === "Map" || n === "Set") return Array.from(e);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return R(e, t);
  }
}
function R(e, t) {
  (t == null || t > e.length) && (t = e.length);
  for (var n = 0, r = new Array(t); n < t; n++) r[n] = e[n];
  return r;
}
function ae() {
  throw new TypeError(`Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`);
}
function ie(e, t, n) {
  return t in e ? Object.defineProperty(e, t, {
    value: n,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : e[t] = n, e;
}
function D(e, t) {
  var n = Object.keys(e);
  if (Object.getOwnPropertySymbols) {
    var r = Object.getOwnPropertySymbols(e);
    t && (r = r.filter(function(o) {
      return Object.getOwnPropertyDescriptor(e, o).enumerable;
    })), n.push.apply(n, r);
  }
  return n;
}
function F(e) {
  for (var t = 1; t < arguments.length; t++) {
    var n = arguments[t] != null ? arguments[t] : {};
    t % 2 ? D(Object(n), !0).forEach(function(r) {
      ie(e, r, n[r]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : D(Object(n)).forEach(function(r) {
      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(n, r));
    });
  }
  return e;
}
function ce() {
  for (var e = arguments.length, t = new Array(e), n = 0; n < e; n++)
    t[n] = arguments[n];
  return function(r) {
    return t.reduceRight(function(o, a) {
      return a(o);
    }, r);
  };
}
function v(e) {
  return function t() {
    for (var n = this, r = arguments.length, o = new Array(r), a = 0; a < r; a++)
      o[a] = arguments[a];
    return o.length >= e.length ? e.apply(this, o) : function() {
      for (var c = arguments.length, u = new Array(c), i = 0; i < c; i++)
        u[i] = arguments[i];
      return t.apply(n, [].concat(o, u));
    };
  };
}
function j(e) {
  return {}.toString.call(e).includes("Object");
}
function ue(e) {
  return !Object.keys(e).length;
}
function b(e) {
  return typeof e == "function";
}
function le(e, t) {
  return Object.prototype.hasOwnProperty.call(e, t);
}
function se(e, t) {
  return j(t) || g("changeType"), Object.keys(t).some(function(n) {
    return !le(e, n);
  }) && g("changeField"), t;
}
function fe(e) {
  b(e) || g("selectorType");
}
function de(e) {
  b(e) || j(e) || g("handlerType"), j(e) && Object.values(e).some(function(t) {
    return !b(t);
  }) && g("handlersType");
}
function ge(e) {
  e || g("initialIsRequired"), j(e) || g("initialType"), ue(e) && g("initialContent");
}
function me(e, t) {
  throw new Error(e[t] || e.default);
}
var pe = {
  initialIsRequired: "initial state is required",
  initialType: "initial state should be an object",
  initialContent: "initial state shouldn't be an empty object",
  handlerType: "handler should be an object or a function",
  handlersType: "all handlers should be a functions",
  selectorType: "selector should be a function",
  changeType: "provided value of changes should be an object",
  changeField: 'it seams you want to change a field in the state which is not specified in the "initial" state',
  default: "an unknown error accured in `state-local` package"
}, g = v(me)(pe), w = {
  changes: se,
  selector: fe,
  handler: de,
  initial: ge
};
function he(e) {
  var t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
  w.initial(e), w.handler(t);
  var n = {
    current: e
  }, r = v(be)(n, t), o = v(ye)(n), a = v(w.changes)(e), c = v(ve)(n);
  function u() {
    var d = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : function(m) {
      return m;
    };
    return w.selector(d), d(n.current);
  }
  function i(d) {
    ce(r, o, a, c)(d);
  }
  return [u, i];
}
function ve(e, t) {
  return b(t) ? t(e.current) : t;
}
function ye(e, t) {
  return e.current = F(F({}, e.current), t), t;
}
function be(e, t, n) {
  return b(t) ? t(e.current) : Object.keys(n).forEach(function(r) {
    var o;
    return (o = t[r]) === null || o === void 0 ? void 0 : o.call(t, e.current[r]);
  }), n;
}
var Oe = {
  create: he
}, we = {
  paths: {
    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs"
  }
};
function je(e) {
  return function t() {
    for (var n = this, r = arguments.length, o = new Array(r), a = 0; a < r; a++)
      o[a] = arguments[a];
    return o.length >= e.length ? e.apply(this, o) : function() {
      for (var c = arguments.length, u = new Array(c), i = 0; i < c; i++)
        u[i] = arguments[i];
      return t.apply(n, [].concat(o, u));
    };
  };
}
function Pe(e) {
  return {}.toString.call(e).includes("Object");
}
function Se(e) {
  return e || q("configIsRequired"), Pe(e) || q("configType"), e.urls ? (Ee(), {
    paths: {
      vs: e.urls.monacoBase
    }
  }) : e;
}
function Ee() {
  console.warn(L.deprecation);
}
function Ce(e, t) {
  throw new Error(e[t] || e.default);
}
var L = {
  configIsRequired: "the configuration object is required",
  configType: "the configuration object should be an object",
  default: "an unknown error accured in `@monaco-editor/loader` package",
  deprecation: `Deprecation warning!
    You are using deprecated way of configuration.

    Instead of using
      monaco.config({ urls: { monacoBase: '...' } })
    use
      monaco.config({ paths: { vs: '...' } })

    For more please check the link https://github.com/suren-atoyan/monaco-loader#config
  `
}, q = je(Ce)(L), Te = {
  config: Se
}, Me = function() {
  for (var t = arguments.length, n = new Array(t), r = 0; r < t; r++)
    n[r] = arguments[r];
  return function(o) {
    return n.reduceRight(function(a, c) {
      return c(a);
    }, o);
  };
};
function z(e, t) {
  return Object.keys(t).forEach(function(n) {
    t[n] instanceof Object && e[n] && Object.assign(t[n], z(e[n], t[n]));
  }), I(I({}, e), t);
}
var xe = {
  type: "cancelation",
  msg: "operation is manually canceled"
};
function T(e) {
  var t = !1, n = new Promise(function(r, o) {
    e.then(function(a) {
      return t ? o(xe) : r(a);
    }), e.catch(o);
  });
  return n.cancel = function() {
    return t = !0;
  }, n;
}
var Ve = Oe.create({
  config: we,
  isInitialized: !1,
  resolve: null,
  reject: null,
  monaco: null
}), H = te(Ve, 2), O = H[0], S = H[1];
function $e(e) {
  var t = Te.config(e), n = t.monaco, r = ee(t, ["monaco"]);
  S(function(o) {
    return {
      config: z(o.config, r),
      monaco: n
    };
  });
}
function Ae() {
  var e = O(function(t) {
    var n = t.monaco, r = t.isInitialized, o = t.resolve;
    return {
      monaco: n,
      isInitialized: r,
      resolve: o
    };
  });
  if (!e.isInitialized) {
    if (S({
      isInitialized: !0
    }), e.monaco)
      return e.resolve(e.monaco), T(M);
    if (window.monaco && window.monaco.editor)
      return N(window.monaco), e.resolve(window.monaco), T(M);
    Me(Ie, De)(Fe);
  }
  return T(M);
}
function Ie(e) {
  return document.body.appendChild(e);
}
function Re(e) {
  var t = document.createElement("script");
  return e && (t.src = e), t;
}
function De(e) {
  var t = O(function(r) {
    var o = r.config, a = r.reject;
    return {
      config: o,
      reject: a
    };
  }), n = Re("".concat(t.config.paths.vs, "/loader.js"));
  return n.onload = function() {
    return e();
  }, n.onerror = t.reject, n;
}
function Fe() {
  var e = O(function(n) {
    var r = n.config, o = n.resolve, a = n.reject;
    return {
      config: r,
      resolve: o,
      reject: a
    };
  }), t = window.require;
  t.config(e.config), t(["vs/editor/editor.main"], function(n) {
    N(n), e.resolve(n);
  }, function(n) {
    e.reject(n);
  });
}
function N(e) {
  O().monaco || S({
    monaco: e
  });
}
function qe() {
  return O(function(e) {
    var t = e.monaco;
    return t;
  });
}
var M = new Promise(function(e, t) {
  return S({
    resolve: e,
    reject: t
  });
}), x = {
  config: $e,
  init: Ae,
  __getMonacoInstance: qe
};
const U = {
  /** 绑定值 */
  modelValue: { type: String, default: "" },
  /** 语言 */
  language: { type: String, default: "json" },
  /** 主题 */
  theme: { type: String, default: "vs-dark" },
  /** 是否只读 */
  readonly: { type: Boolean, default: !1 },
  /** 额外的 monaco-editor 配置 */
  monacoEditorOptions: { type: Object, default: {} },
  /** 配置文件路径，配置文件用于配置 monaco 资源文件的位置 */
  configPath: { type: String, default: "assets/monaco-editor.config.json" }
}, P = /* @__PURE__ */ B({
  name: "FCodeEditor",
  props: U,
  emits: [],
  setup(e, t) {
    const n = y();
    let r = null;
    const o = y(), a = y(e.modelValue || "");
    async function c() {
      return fetch(e.configPath).then((l) => l.json());
    }
    async function u() {
      if (n.value && !r) {
        const l = await c(), {
          vsPath: f
        } = l;
        x.config({
          paths: {
            vs: window.location.origin + f
          }
        }), x.config({
          "vs/nls": {
            availableLanguages: {
              "*": "zh-cn"
            }
          }
        }), x.init().then((h) => {
          o.value = h, r = h.editor.create(n.value, {
            value: a.value,
            language: e.language,
            theme: e.theme,
            folding: !0,
            readOnly: e.readonly,
            ...e.monacoEditorOptions
          });
        });
      }
    }
    const i = new ResizeObserver(() => {
      r == null || r.layout();
    });
    function d() {
      return r == null ? void 0 : r.getValue();
    }
    function m(l) {
      a.value = l, r == null || r.setValue(l);
    }
    function E() {
      m("");
    }
    J(() => e.modelValue, (l) => m(l));
    function C(l) {
      const f = r.getSelection(), h = new o.value.Range(f.startLineNumber, f.startColumn, f.endLineNumber, f.endColumn);
      r.executeEdits("insert-text", [{
        range: h,
        text: l,
        forceMoveMarkers: !0
        // 移动光标到插入后的位置
      }]);
    }
    function s(l) {
      if (!r || !l)
        return;
      const f = r.getModel().findMatches(l, !1, !1, !1, null, !0);
      if (f.length > 0) {
        const h = f[0], {
          range: $
        } = h;
        r.setPosition($.getStartPosition()), r.revealRangeInCenter($);
      }
    }
    return K(() => {
      u(), i.observe(n.value);
    }), G(() => {
      r && (r.dispose(), r = null, o.value = null), i == null || i.unobserve(n.value), i == null || i.disconnect();
    }), t.expose({
      getValue: d,
      setValue: m,
      clearValue: E,
      insertText: C,
      setPosition: s
    }), () => p("div", {
      class: "monaco-editor h-100 w-100",
      ref: n
    }, null);
  }
}), Be = "https://json-schema.org/draft/2020-12/schema", Le = "https://farris-design.gitee.io/code-editor.schema.json", ze = "code-editor", He = "A Farris Code Editor Component", Ne = "object", Ue = {
  id: {
    description: "The unique identifier for a Code Editor",
    type: "string"
  },
  type: {
    description: "The type string of Code Editor component",
    type: "string",
    default: "code-editor"
  },
  language: {
    description: "",
    type: "string",
    default: "json"
  },
  theme: {
    description: "",
    type: "string",
    default: "vs-dark"
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  monacoEditorOptions: {
    description: "",
    type: "object",
    default: {}
  },
  configPath: {
    description: "",
    type: "string",
    default: "assets/monaco-editor.config.json"
  },
  modalTitle: {
    description: "",
    type: "string",
    default: ""
  },
  onSubmitModal: {
    description: "",
    type: "function",
    default: null
  },
  leftTemplate: {
    description: "",
    type: "function"
  },
  enableClear: {
    description: "",
    type: "boolean",
    default: !1
  }
}, We = [
  "id",
  "type"
], Je = {
  $schema: Be,
  $id: Le,
  title: ze,
  description: He,
  type: Ne,
  properties: Ue,
  required: We
}, Ke = /* @__PURE__ */ new Map([]);
function Ge(e, t, n) {
  return t;
}
const W = {
  ...U,
  /** 弹框标题 */
  modalTitle: { type: String, default: "" },
  /** 确定后回调 */
  onSubmitModal: { type: Function, default: null },
  /** 左侧模板 */
  leftTemplate: { type: Function },
  enableClear: { type: Boolean, default: !1 }
}, Ye = Z(W, Je, Ke, Ge), V = /* @__PURE__ */ B({
  name: "FCodeTextbox",
  props: W,
  emits: ["update:modelValue"],
  setup(e, t) {
    const n = y(), r = y("");
    function o(s) {
      switch (s) {
        case "json":
          return "JSON编辑器";
        case "javascript":
          return "JavaScript编辑器";
        case "html":
          return "HTML编辑器";
        default:
          return "代码编辑器";
      }
    }
    const a = Y(() => e.modalTitle ? e.modalTitle : o(e.language));
    function c() {
      var s;
      return (s = n.value) == null ? void 0 : s.getValue();
    }
    function u(s) {
      t.emit("update:modelValue", s), e.onSubmitModal && typeof e.onSubmitModal == "function" && e.onSubmitModal(s);
    }
    function i() {
      const s = c() || "";
      return u(s), !0;
    }
    function d() {
      u("");
    }
    const m = Q({
      get title() {
        return a.value;
      },
      width: 900,
      height: 500,
      fitContent: !1,
      showHeader: !0,
      showCloseButton: !0,
      showMaxButton: !0,
      resizeable: !0,
      draggable: !0,
      buttons: [{
        class: "btn btn-secondary",
        text: "取消",
        handle: () => !0
      }, {
        class: "btn btn-primary",
        text: "确定",
        handle: () => i()
      }]
    });
    function E() {
      r.value = e.modelValue;
    }
    function C() {
      E();
    }
    return () => p(X, {
      modelValue: e.modelValue,
      editable: !1,
      readonly: e.readonly,
      enableClear: e.enableClear,
      buttonBehavior: "Modal",
      modalOptions: m,
      beforeOpen: C,
      onClear: d
    }, {
      default: () => [e.leftTemplate ? p("div", {
        class: "w-100 h-100",
        style: "display:flex;"
      }, [p("div", {
        class: "pt-2 pl-2 pr-2",
        style: "max-width:40%"
      }, [e.leftTemplate(n)]), p("div", {
        style: "flex: 1"
      }, [p(P, {
        ref: n,
        modelValue: r.value,
        language: e.language,
        theme: e.theme,
        readonly: e.readonly,
        monacoEditorOptions: e.monacoEditorOptions,
        configPath: e.configPath
      }, null)])]) : p(P, {
        ref: n,
        modelValue: r.value,
        language: e.language,
        theme: e.theme,
        readonly: e.readonly,
        monacoEditorOptions: e.monacoEditorOptions,
        configPath: e.configPath
      }, null)]
    });
  }
}), _e = {
  install(e) {
    e.component(P.name, P), e.component(V.name, V);
  },
  register(e, t, n, r) {
    e["code-editor"] = V, t["code-editor"] = Ye;
  }
};
export {
  P as FCodeEditor,
  V as FCodeTextbox,
  U as codeEditorProps,
  W as codeTextboxProps,
  _e as default
};