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

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as E, ref as b, watch as F, createVNode as n, Fragment as S, createTextVNode as h, computed as x } from "vue";
import { cloneDeep as T } from "lodash-es";
import B from "../button-edit/index.esm.js";
import w from "../input-group/index.esm.js";
import { useGuid as M } from "../common/index.esm.js";
const D = {
  items: { type: Array, default: [] },
  valueField: { type: String, default: "id" },
  textField: { type: String, default: "name" },
  beforeOpen: { type: Function, default: () => !0 },
  disabled: { type: Boolean, default: !1 },
  readonly: { type: Boolean, default: !1 }
}, V = {
  items: { type: Array, default: [] },
  valueField: { type: String, default: "value" },
  textField: { type: String, default: "name" }
}, A = /* @__PURE__ */ E({
  name: "FEnumEditorTable",
  props: V,
  emits: ["selected"],
  setup(l, v) {
    const c = b(l.items || []), r = b(), t = b();
    function o(e) {
      if (!t.value || !c.value || c.value.length === 0) {
        t.value = void 0;
        return;
      }
      const a = t.value.index;
      let i = a;
      a === e ? (i = Math.min(a + 1, c.value.length - 1), i < 0 ? t.value = void 0 : (i = i < e ? i : e, t.value = {
        item: c.value[i],
        index: i
      })) : (i = a > e ? a - 1 : a, i >= 0 && i < c.value.length && (t.value = {
        item: c.value[i],
        index: i
      }));
    }
    function u(e, a) {
      e.stopPropagation();
      try {
        c.value.splice(a, 1), t.value && (o(a), v.emit("selected", t.value));
      } catch (i) {
        console.error("An error occurred during the enumeration data update:", i);
      }
    }
    function s(e, a) {
      t.value = a, v.emit("selected", a);
    }
    function m(e) {
      var a;
      return (a = r.value) == null ? void 0 : a.querySelector('[data-index="' + e + '"]');
    }
    function p(e) {
      var i;
      if (!e || !e.length) {
        t.value = void 0;
        return;
      }
      const a = (i = t.value) == null ? void 0 : i.item;
      a && typeof l.valueField == "string" && l.valueField in a && (new Set(e.map((g) => g[l.valueField])).has(a[l.valueField]) || (t.value = void 0));
    }
    F(() => l.items, (e) => {
      c.value = e, p(e);
    }), F(() => {
      var e;
      return (e = t.value) == null ? void 0 : e.index;
    }, (e) => {
      if (e === void 0)
        return;
      const a = m(e);
      a && a.scrollIntoView({
        block: "center",
        inline: "nearest"
      });
    });
    function d(e) {
      return e.map((a, i) => {
        var y;
        return n("tr", {
          onClick: (f) => s(f, {
            item: a,
            index: i
          }),
          key: a.id,
          "data-index": i,
          class: ((y = t.value) == null ? void 0 : y.index) === i ? "selected" : ""
        }, [n("td", null, [n(w, {
          modelValue: a[l.valueField],
          "onUpdate:modelValue": (f) => a[l.valueField] = f
        }, null)]), n("td", null, [n(w, {
          modelValue: a[l.textField],
          "onUpdate:modelValue": (f) => a[l.textField] = f
        }, null)]), n("td", {
          style: "width: 42px"
        }, [n("button", {
          type: "button",
          class: "btn btn-link",
          onClick: (f) => u(f, i)
        }, [n("span", {
          class: "f-icon f-icon-close"
        }, null)])])]);
      });
    }
    return () => n(S, null, [n("div", {
      class: "shading-border-top",
      style: "position: absolute;top: 0;width: 100%;z-index: 2;"
    }, null), n("div", {
      class: "table-body f-utils-fill win11Scroll show nobtn ml-3",
      style: "overflow-y: scroll;"
    }, [n("table", {
      class: "table table-bordered",
      ref: r
    }, [n("thead", {
      style: "position: sticky; top: 0; z-index: 1;"
    }, [n("tr", null, [n("th", null, [n("b", null, [h("编码")])]), n("th", null, [n("b", null, [h("名称")])]), n("th", {
      style: "width: 42px"
    }, null)])]), n("tbody", null, [d(c.value)])])])]);
  }
}), U = {
  activeData: { type: Object, default: null },
  itemsTotal: { type: Number, default: 0 }
}, N = /* @__PURE__ */ E({
  name: "EnumEditorButtons",
  props: U,
  emits: ["add", "clear", "move"],
  setup(l, v) {
    const c = b(l.activeData), r = b(l.itemsTotal), t = x(() => {
      var d;
      return ((d = c.value) == null ? void 0 : d.index) ?? -1;
    }), o = x(() => r.value && t.value > 0), u = x(() => r.value && t.value > -1 && t.value < r.value - 1);
    function s() {
      v.emit("add");
    }
    function m() {
      v.emit("clear");
    }
    function p(d, e) {
      v.emit("move", d, e);
    }
    return F(() => l.activeData, (d) => {
      c.value = d;
    }), F(() => l.itemsTotal, (d) => {
      r.value = d;
    }), () => n("div", {
      class: "footer-container mx-3 d-flex align-items-center",
      style: "height: 36px;"
    }, [n("button", {
      type: "button",
      onClick: s,
      class: "btn btn-sm btn-primary mr-2"
    }, [n("span", {
      class: "f-icon f-icon-add"
    }, null), h("新增")]), n("button", {
      type: "button",
      onClick: m,
      class: "btn btn-sm btn-secondary mr-3",
      disabled: !r.value
    }, [n("span", {
      class: "f-icon f-icon-delete"
    }, null), h("清空")]), n("button", {
      type: "button",
      disabled: !o.value,
      onClick: (d) => p(d, "top"),
      class: "btn btn-sm btn-secondary mr-1"
    }, [n("span", {
      class: "f-icon f-icon-roofing"
    }, null), h("置顶")]), n("button", {
      type: "button",
      disabled: !o.value,
      onClick: (d) => p(d, "up"),
      class: "btn btn-sm btn-secondary mr-1"
    }, [n("span", {
      class: "f-icon f-icon-arrow-chevron-up"
    }, null), h("上移")]), n("button", {
      type: "button",
      disabled: !u.value,
      onClick: (d) => p(d, "down"),
      class: "btn btn-sm btn-secondary mr-1"
    }, [n("span", {
      class: "f-icon f-icon-arrow-chevron-down"
    }, null), h("下移")]), n("button", {
      type: "button",
      disabled: !u.value,
      onClick: (d) => p(d, "bottom"),
      class: "btn btn-sm btn-secondary"
    }, [n("span", {
      class: "f-icon f-icon-page-last",
      style: "transform: rotate(90deg);"
    }, null), h("置底")])]);
  }
});
function O() {
  function l(t, o) {
    if (o) {
      const { index: u } = o;
      u > 0 && (t.unshift(o.item), t.splice(u + 1, 1), o.index = 0);
    }
  }
  function v(t, o) {
    if (o) {
      const { index: u } = o;
      if (u > 0) {
        const s = t.splice(u, 1);
        t.splice(u - 1, 0, ...s), o.index = u - 1;
      }
    }
  }
  function c(t, o) {
    if (o) {
      const { index: u } = o;
      if (u < t.length - 1) {
        const s = t.splice(u, 1);
        t.splice(u + 1, 0, ...s), o.index = u + 1;
      }
    }
  }
  function r(t, o) {
    if (o) {
      const { index: u } = o;
      u < t.length - 1 && (t.push(o.item), t.splice(o.index, 1), o.index = t.length - 1);
    }
  }
  return {
    moveTop: l,
    moveUp: v,
    moveDown: c,
    moveBottom: r
  };
}
const C = /* @__PURE__ */ E({
  name: "FEnumEditorContainer",
  props: D,
  emits: ["dataChanged"],
  setup(l, v) {
    const {
      moveTop: c,
      moveDown: r,
      moveBottom: t,
      moveUp: o
    } = O(), {
      guid: u
    } = M(), s = b(l.items || []), m = b(), p = b();
    function d() {
      s.value.push({
        id: u(),
        [l.valueField]: "",
        [l.textField]: ""
      }), v.emit("dataChanged", s.value);
    }
    function e() {
      s.value = [], m.value = void 0, v.emit("dataChanged", []);
    }
    function a(y, f) {
      switch (f) {
        case "top":
          c(s.value, m.value);
          break;
        case "up":
          o(s.value, m.value);
          break;
        case "down":
          r(s.value, m.value);
          break;
        case "bottom":
          t(s.value, m.value);
          break;
      }
      v.emit("dataChanged", s.value);
    }
    function i(y) {
      m.value = y;
    }
    return () => {
      var y;
      return n("div", {
        class: "h-100 d-flex flex-column"
      }, [n(A, {
        ref: p,
        valueField: l.valueField,
        textField: l.textField,
        items: s.value,
        onSelected: i
      }, null), n(N, {
        activeData: m.value,
        itemsTotal: (y = s.value) == null ? void 0 : y.length,
        onAdd: d,
        onClear: e,
        onMove: (f, g) => a(f, g)
      }, null)]);
    };
  }
}), k = /* @__PURE__ */ E({
  name: "FEnumEditor",
  props: D,
  emits: ["submitModal"],
  setup(l, v) {
    const c = '<i class="f-icon f-icon-lookup"></i>', r = b(l.valueField), t = b(l.textField), o = b(l.items || []), u = b(), s = x(() => {
      var e;
      return `共 ${((e = o.value) == null ? void 0 : e.length) || 0} 项`;
    });
    F(() => l.items, (e) => {
      o.value = e;
    }), F(() => l.valueField, (e) => {
      r.value = e;
    }), F(() => l.textField, (e) => {
      t.value = e;
    });
    function m(e) {
      u.value = e;
    }
    function p() {
      return u.value = T(o.value), n(C, {
        valueField: r.value,
        textField: t.value,
        items: u.value,
        onDataChanged: m
      }, null);
    }
    const d = {
      title: "枚举数据编辑器",
      fitContent: !1,
      height: 500,
      width: 600,
      acceptCallback: () => {
        o.value = u.value;
        const e = u.value.map((a) => ({
          [r.value]: a[r.value],
          [t.value]: a[t.value]
        }));
        v.emit("submitModal", e);
      },
      rejectCallback: () => {
      }
    };
    return () => n(B, {
      modelValue: s.value,
      "onUpdate:modelValue": (e) => s.value = e,
      editable: !1,
      disabled: l.disabled,
      readonly: l.readonly,
      inputType: "text",
      enableClear: !1,
      buttonContent: c,
      buttonBehavior: "Modal",
      modalOptions: d
    }, {
      default: () => [n("div", {
        class: "h-100 d-flex flex-column"
      }, [p()])]
    });
  }
}), q = {
  install(l) {
    l.component(k.name, k), l.component(C.name, C);
  }
};
export {
  k as EnumEditor,
  q as default,
  D as enumEditorProps
};