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

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as q, ref as O, watch as X, onMounted as Z, onBeforeUnmount as _, createVNode as $, computed as k, reactive as K } from "vue";
import { FButtonEdit as ee } from "../button-edit/index.esm.js";
import { isPlainObject as A, cloneDeep as te } from "lodash-es";
function ne(e, t, n) {
  return t in e ? Object.defineProperty(e, t, {
    value: n,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : e[t] = n, e;
}
function I(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 R(e) {
  for (var t = 1; t < arguments.length; t++) {
    var n = arguments[t] != null ? arguments[t] : {};
    t % 2 ? I(Object(n), !0).forEach(function(r) {
      ne(e, r, n[r]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : I(Object(n)).forEach(function(r) {
      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(n, r));
    });
  }
  return e;
}
function re(e, t) {
  if (e == null) return {};
  var n = {}, r = Object.keys(e), o, i;
  for (i = 0; i < r.length; i++)
    o = r[i], !(t.indexOf(o) >= 0) && (n[o] = e[o]);
  return n;
}
function oe(e, t) {
  if (e == null) return {};
  var n = re(e, t), r, o;
  if (Object.getOwnPropertySymbols) {
    var i = Object.getOwnPropertySymbols(e);
    for (o = 0; o < i.length; o++)
      r = i[o], !(t.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
  }
  return n;
}
function ie(e, t) {
  return ae(e) || ce(e, t) || ue(e, t) || se();
}
function ae(e) {
  if (Array.isArray(e)) return e;
}
function ce(e, t) {
  if (!(typeof Symbol > "u" || !(Symbol.iterator in Object(e)))) {
    var n = [], r = !0, o = !1, i = void 0;
    try {
      for (var c = e[Symbol.iterator](), d; !(r = (d = c.next()).done) && (n.push(d.value), !(t && n.length === t)); r = !0)
        ;
    } catch (l) {
      o = !0, i = l;
    } finally {
      try {
        !r && c.return != null && c.return();
      } finally {
        if (o) throw i;
      }
    }
    return n;
  }
}
function ue(e, t) {
  if (e) {
    if (typeof e == "string") return D(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 D(e, t);
  }
}
function D(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 se() {
  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 le(e, t, n) {
  return t in e ? Object.defineProperty(e, t, {
    value: n,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : e[t] = n, e;
}
function N(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 ? N(Object(n), !0).forEach(function(r) {
      le(e, r, n[r]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : N(Object(n)).forEach(function(r) {
      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(n, r));
    });
  }
  return e;
}
function fe() {
  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, i) {
      return i(o);
    }, r);
  };
}
function y(e) {
  return function t() {
    for (var n = this, r = arguments.length, o = new Array(r), i = 0; i < r; i++)
      o[i] = arguments[i];
    return o.length >= e.length ? e.apply(this, o) : function() {
      for (var c = arguments.length, d = new Array(c), l = 0; l < c; l++)
        d[l] = arguments[l];
      return t.apply(n, [].concat(o, d));
    };
  };
}
function E(e) {
  return {}.toString.call(e).includes("Object");
}
function de(e) {
  return !Object.keys(e).length;
}
function j(e) {
  return typeof e == "function";
}
function ge(e, t) {
  return Object.prototype.hasOwnProperty.call(e, t);
}
function pe(e, t) {
  return E(t) || h("changeType"), Object.keys(t).some(function(n) {
    return !ge(e, n);
  }) && h("changeField"), t;
}
function me(e) {
  j(e) || h("selectorType");
}
function he(e) {
  j(e) || E(e) || h("handlerType"), E(e) && Object.values(e).some(function(t) {
    return !j(t);
  }) && h("handlersType");
}
function be(e) {
  e || h("initialIsRequired"), E(e) || h("initialType"), de(e) && h("initialContent");
}
function ve(e, t) {
  throw new Error(e[t] || e.default);
}
var ye = {
  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"
}, h = y(ve)(ye), P = {
  changes: pe,
  selector: me,
  handler: he,
  initial: be
};
function Oe(e) {
  var t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
  P.initial(e), P.handler(t);
  var n = {
    current: e
  }, r = y(Pe)(n, t), o = y(we)(n), i = y(P.changes)(e), c = y(je)(n);
  function d() {
    var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : function(s) {
      return s;
    };
    return P.selector(a), a(n.current);
  }
  function l(a) {
    fe(r, o, i, c)(a);
  }
  return [d, l];
}
function je(e, t) {
  return j(t) ? t(e.current) : t;
}
function we(e, t) {
  return e.current = F(F({}, e.current), t), t;
}
function Pe(e, t, n) {
  return j(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 Ee = {
  create: Oe
}, Se = {
  paths: {
    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs"
  }
};
function Te(e) {
  return function t() {
    for (var n = this, r = arguments.length, o = new Array(r), i = 0; i < r; i++)
      o[i] = arguments[i];
    return o.length >= e.length ? e.apply(this, o) : function() {
      for (var c = arguments.length, d = new Array(c), l = 0; l < c; l++)
        d[l] = arguments[l];
      return t.apply(n, [].concat(o, d));
    };
  };
}
function Ce(e) {
  return {}.toString.call(e).includes("Object");
}
function Me(e) {
  return e || L("configIsRequired"), Ce(e) || L("configType"), e.urls ? (Ve(), {
    paths: {
      vs: e.urls.monacoBase
    }
  }) : e;
}
function Ve() {
  console.warn(B.deprecation);
}
function $e(e, t) {
  throw new Error(e[t] || e.default);
}
var B = {
  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
  `
}, L = Te($e)(B), xe = {
  config: Me
}, Ae = 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(i, c) {
      return c(i);
    }, 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]));
  }), R(R({}, e), t);
}
var Ie = {
  type: "cancelation",
  msg: "operation is manually canceled"
};
function T(e) {
  var t = !1, n = new Promise(function(r, o) {
    e.then(function(i) {
      return t ? o(Ie) : r(i);
    }), e.catch(o);
  });
  return n.cancel = function() {
    return t = !0;
  }, n;
}
var Re = Ee.create({
  config: Se,
  isInitialized: !1,
  resolve: null,
  reject: null,
  monaco: null
}), H = ie(Re, 2), w = H[0], S = H[1];
function De(e) {
  var t = xe.config(e), n = t.monaco, r = oe(t, ["monaco"]);
  S(function(o) {
    return {
      config: z(o.config, r),
      monaco: n
    };
  });
}
function Ne() {
  var e = w(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(C);
    if (window.monaco && window.monaco.editor)
      return U(window.monaco), e.resolve(window.monaco), T(C);
    Ae(Fe, qe)(Be);
  }
  return T(C);
}
function Fe(e) {
  return document.body.appendChild(e);
}
function Le(e) {
  var t = document.createElement("script");
  return e && (t.src = e), t;
}
function qe(e) {
  var t = w(function(r) {
    var o = r.config, i = r.reject;
    return {
      config: o,
      reject: i
    };
  }), n = Le("".concat(t.config.paths.vs, "/loader.js"));
  return n.onload = function() {
    return e();
  }, n.onerror = t.reject, n;
}
function Be() {
  var e = w(function(n) {
    var r = n.config, o = n.resolve, i = n.reject;
    return {
      config: r,
      resolve: o,
      reject: i
    };
  }), t = window.require;
  t.config(e.config), t(["vs/editor/editor.main"], function(n) {
    U(n), e.resolve(n);
  }, function(n) {
    e.reject(n);
  });
}
function U(e) {
  w().monaco || S({
    monaco: e
  });
}
function ze() {
  return w(function(e) {
    var t = e.monaco;
    return t;
  });
}
var C = new Promise(function(e, t) {
  return S({
    resolve: e,
    reject: t
  });
}), M = {
  config: De,
  init: Ne,
  __getMonacoInstance: ze
};
const W = {
  /** 绑定值 */
  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" }
}, x = /* @__PURE__ */ q({
  name: "FCodeEditor",
  props: W,
  emits: [],
  setup(e, t) {
    const n = O();
    let r = null;
    const o = O(), i = O(e.modelValue || "");
    async function c() {
      return fetch(e.configPath).then((g) => g.json());
    }
    async function d() {
      if (n.value && !r) {
        const g = await c(), {
          vsPath: m
        } = g;
        M.config({
          paths: {
            vs: window.location.origin + m
          }
        }), M.config({
          "vs/nls": {
            availableLanguages: {
              "*": "zh-cn"
            }
          }
        }), M.init().then((b) => {
          o.value = b, r = b.editor.create(n.value, {
            value: i.value,
            language: e.language,
            theme: e.theme,
            folding: !0,
            readOnly: e.readonly,
            ...e.monacoEditorOptions
          });
        });
      }
    }
    const l = new ResizeObserver(() => {
      r == null || r.layout();
    });
    function a() {
      return r == null ? void 0 : r.getValue();
    }
    function s(g) {
      i.value = g, r == null || r.setValue(g);
    }
    function f() {
      s("");
    }
    X(() => e.modelValue, (g) => s(g));
    function u(g) {
      const m = r.getSelection(), b = new o.value.Range(m.startLineNumber, m.startColumn, m.endLineNumber, m.endColumn);
      r.executeEdits("insert-text", [{
        range: b,
        text: g,
        forceMoveMarkers: !0
        // 移动光标到插入后的位置
      }]);
    }
    function p(g) {
      if (!r || !g)
        return;
      const m = r.getModel().findMatches(g, !1, !1, !1, null, !0);
      if (m.length > 0) {
        const b = m[0], {
          range: v
        } = b;
        r.setPosition(v.getStartPosition()), r.revealRangeInCenter(v);
      }
    }
    return Z(() => {
      d(), l.observe(n.value);
    }), _(() => {
      r && (r.dispose(), r = null, o.value = null), l == null || l.unobserve(n.value), l == null || l.disconnect();
    }), t.expose({
      getValue: a,
      setValue: s,
      clearValue: f,
      insertText: u,
      setPosition: p
    }), () => $("div", {
      class: "monaco-editor h-100 w-100",
      ref: n
    }, null);
  }
}), He = {}, Ue = {};
function J(e) {
  const { properties: t, title: n, ignore: r } = e, o = r && Array.isArray(r), i = Object.keys(t).reduce((c, d) => ((!o || !r.find((l) => l === d)) && (c[d] = t[d].type === "object" && t[d].properties ? J(t[d]) : te(t[d].default)), c), {});
  if (n && (!o || !r.find((c) => c === "id"))) {
    const c = n.toLowerCase().replace(/-/g, "_");
    i.id = `${c}_${Math.random().toString().slice(2, 6)}`;
  }
  return i;
}
function We(e, t) {
  const n = J(t);
  return Object.keys(n).reduce((r, o) => (Object.prototype.hasOwnProperty.call(e, o) && (r[o] && A(r[o]) && A(e[o] || !e[o]) ? Object.assign(r[o], e[o] || {}) : r[o] = e[o]), r), n), n;
}
function G(e, t) {
  return Object.keys(e).filter((r) => e[r] != null).reduce((r, o) => {
    if (t.has(o)) {
      const i = t.get(o);
      if (typeof i == "string")
        r[i] = e[o];
      else {
        const c = i(o, e[o], e);
        Object.assign(r, c);
      }
    } else
      r[o] = e[o];
    return r;
  }, {});
}
function Je(e, t, n = /* @__PURE__ */ new Map()) {
  const r = We(e, t);
  return G(r, n);
}
function Ge(e = {}) {
  function t(a, s, f, u) {
    if (typeof f == "number")
      return u[a].length === f;
    if (typeof f == "object") {
      const p = Object.keys(f)[0], g = f[p];
      if (p === "not")
        return Number(u[a].length) !== Number(g);
      if (p === "moreThan")
        return Number(u[a].length) >= Number(g);
      if (p === "lessThan")
        return Number(u[a].length) <= Number(g);
    }
    return !1;
  }
  function n(a, s, f, u) {
    return u[a] && u[a].propertyValue && String(u[a].propertyValue.value) === String(f);
  }
  const r = /* @__PURE__ */ new Map([
    ["length", t],
    ["getProperty", n]
  ]);
  Object.keys(e).reduce((a, s) => (a.set(s, e[s]), a), r);
  function o(a, s) {
    const f = a;
    return typeof s == "number" ? [{ target: f, operator: "length", param: null, value: Number(s) }] : typeof s == "boolean" ? [{ target: f, operator: "getProperty", param: a, value: !!s }] : typeof s == "object" ? Object.keys(s).map((u) => {
      if (u === "length")
        return { target: f, operator: "length", param: null, value: s[u] };
      const p = u, g = s[u];
      return { target: f, operator: "getProperty", param: p, value: g };
    }) : [];
  }
  function i(a) {
    return Object.keys(a).reduce((f, u) => {
      const p = o(u, a[u]);
      return f.push(...p), f;
    }, []);
  }
  function c(a, s) {
    if (r.has(a.operator)) {
      const f = r.get(a.operator);
      return f && f(a.target, a.param, a.value, s) || !1;
    }
    return !1;
  }
  function d(a, s) {
    return i(a).reduce((p, g) => p && c(g, s), !0);
  }
  function l(a, s) {
    const f = Object.keys(a), u = f.includes("allOf"), p = f.includes("anyOf"), g = u || p, v = (g ? a[g ? u ? "allOf" : "anyOf" : "allOf"] : [a]).map((Q) => d(Q, s));
    return u ? !v.includes(!1) : v.includes(!0);
  }
  return { parseValueSchema: l };
}
const Ye = {}, Qe = {};
Ge();
function Xe(e, t, n = /* @__PURE__ */ new Map(), r = (c, d, l, a) => d, o = {}, i = (c) => c) {
  return He[t.title] = t, Ue[t.title] = r, Ye[t.title] = o, Qe[t.title] = i, (c = {}, d = !0) => {
    if (!d)
      return G(c, n);
    const l = Je(c, t, n), a = Object.keys(e).reduce((s, f) => (s[f] = e[f].default, s), {});
    return Object.assign(a, l);
  };
}
const Ze = "https://json-schema.org/draft/2020-12/schema", _e = "https://farris-design.gitee.io/code-editor.schema.json", ke = "code-editor", Ke = "A Farris Code Editor Component", et = "object", tt = {
  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
  }
}, nt = [
  "id",
  "type"
], rt = {
  $schema: Ze,
  $id: _e,
  title: ke,
  description: Ke,
  type: et,
  properties: tt,
  required: nt
}, ot = /* @__PURE__ */ new Map([]);
function it(e, t, n) {
  return t;
}
const Y = {
  ...W,
  /** 弹框标题 */
  modalTitle: { type: String, default: "" },
  /** 确定后回调 */
  onSubmitModal: { type: Function, default: null }
}, at = Xe(Y, rt, ot, it), V = /* @__PURE__ */ q({
  name: "FCodeTextbox",
  props: Y,
  emits: ["update:modelValue"],
  setup(e, t) {
    const n = O(), r = O("");
    function o(u) {
      switch (u) {
        case "json":
          return "JSON编辑器";
        case "javascript":
          return "JavaScript编辑器";
        case "html":
          return "HTML编辑器";
        default:
          return "代码编辑器";
      }
    }
    const i = k(() => e.modalTitle ? e.modalTitle : o(e.language));
    function c() {
      var u;
      return (u = n.value) == null ? void 0 : u.getValue();
    }
    function d(u) {
      t.emit("update:modelValue", u), e.onSubmitModal && typeof e.onSubmitModal == "function" && e.onSubmitModal(u);
    }
    function l() {
      const u = c() || "";
      return d(u), !0;
    }
    const a = K({
      get title() {
        return i.value;
      },
      width: 900,
      height: 500,
      fitContent: !1,
      showHeader: !0,
      showCloseButton: !0,
      showMaxButton: !1,
      resizeable: !1,
      draggable: !0,
      buttons: [{
        class: "btn btn-secondary",
        text: "取消",
        handle: () => !0
      }, {
        class: "btn btn-primary",
        text: "确定",
        handle: () => l()
      }]
    });
    function s() {
      r.value = e.modelValue;
    }
    function f() {
      s();
    }
    return () => $(ee, {
      modelValue: e.modelValue,
      editable: !1,
      readonly: e.readonly,
      enableClear: !1,
      buttonBehavior: "Modal",
      modalOptions: a,
      beforeOpen: f
    }, {
      default: () => [$(x, {
        ref: n,
        modelValue: r.value,
        language: e.language,
        theme: e.theme,
        readonly: e.readonly,
        monacoEditorOptions: e.monacoEditorOptions,
        configPath: e.configPath
      }, null)]
    });
  }
}), ft = {
  install(e) {
    e.component(x.name, x), e.component(V.name, V);
  },
  register(e, t, n, r) {
    e["code-editor"] = V, t["code-editor"] = at;
  }
};
export {
  x as FCodeEditor,
  V as FCodeTextbox,
  W as codeEditorProps,
  Y as codeTextboxProps,
  ft as default
};