@farris/ui-vue/components/response-layout/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as P, computed as R, createVNode as m, ref as b, inject as F, onMounted as z, createTextVNode as j } from "vue";
import { resolveAppearance as Z, createPropsResolver as V, getPropsResolverGenerator as B, getSchemaByType as H } from "../dynamic-resolver/index.esm.js";
import { canvasChanged as ee, useDesignerComponent as J, DgControl as $ } from "../designer-canvas/index.esm.js";
import { BaseControlProperty as W } from "../property-panel/index.esm.js";
import { useDesignerRules as X } from "../dynamic-form/index.esm.js";
const M = /* @__PURE__ */ new Map([
  ["appearance", Z]
]);
function _(s, e, t) {
  if (t.componentFeature) {
    const i = JSON.parse(t.componentFeature);
    e.appearance = { class: "bg-white" }, e.contents = String(i.splitter).split(":").map((a) => {
      const l = s.getSchemaByType("response-layout-item");
      return l.appearance = {
        class: `h-100 col-${a} px-0`
      }, l;
    });
  }
  return e;
}
const te = "https://json-schema.org/draft/2020-12/schema", se = "https://farris-design.gitee.io/response-layout.schema.json", oe = "response-layout", ne = "A Farris Container Component", re = "object", ae = {
  id: {
    description: "The unique identifier for a Respnse Layout",
    type: "string"
  },
  type: {
    description: "The type string of Respnse Layout component",
    type: "string",
    default: "response-layout"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  size: {
    description: "",
    type: "object",
    properties: {
      width: {
        type: "number"
      },
      height: {
        type: "number"
      }
    },
    default: null
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  }
}, ie = [
  "id",
  "type",
  "contents"
], K = {
  $schema: te,
  $id: se,
  title: oe,
  description: ne,
  type: re,
  properties: ae,
  required: ie
}, A = {
  customClass: { type: String, default: "" },
  customStyle: { type: String, default: "" }
}, Ge = V(A, K, M, _), k = B(
  A,
  K,
  M,
  _
), T = /* @__PURE__ */ P({
  name: "FResponseLayout",
  props: A,
  emits: [],
  setup(s, e) {
    function t(a, l) {
      a && l && l.split(" ").reduce((r, f) => (r[f] = !0, r), a);
    }
    const i = R(() => {
      const a = {
        "d-flex": !0,
        "f-response-layout": !0
      };
      return t(a, s.customClass), a;
    });
    return () => m("div", {
      class: i.value,
      style: s.customStyle
    }, [e.slots.default && e.slots.default()]);
  }
}), ce = "https://json-schema.org/draft/2020-12/schema", le = "https://farris-design.gitee.io/response-layout-item.schema.json", pe = "response-layout-item", ue = "A Farris Container Component", de = "object", ye = {
  id: {
    description: "The unique identifier for a Respnse Layout Item",
    type: "string"
  },
  type: {
    description: "The type string of Respnse Layout Item component",
    type: "string",
    default: "response-layout-item"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  size: {
    description: "",
    type: "object",
    properties: {
      width: {
        type: "number"
      },
      height: {
        type: "number"
      }
    },
    default: null
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  }
}, fe = [
  "id",
  "type",
  "contents"
], Q = {
  $schema: ce,
  $id: le,
  title: pe,
  description: ue,
  type: de,
  properties: ye,
  required: fe
}, S = {
  customClass: { type: String, default: "" },
  customStyle: { type: String, default: "" }
};
V(S, Q, M);
const U = B(
  S,
  Q,
  M,
  void 0
), D = /* @__PURE__ */ P({
  name: "FResponseLayoutItem",
  props: S,
  emits: [],
  setup(s, e) {
    const t = R(() => ({
      "f-response-layout-item": !0,
      [s.customClass]: !!s.customClass
    }));
    return () => m("div", {
      class: t.value,
      style: s.customStyle
    }, [e.slots.default && e.slots.default()]);
  }
});
class me extends W {
  constructor(e, t) {
    super(e, t);
  }
  getPropertyConfig(e) {
    return this.propertyConfig.categories.basic = this.getBasicPropConfig(e), this.propertyConfig.categories.appearance = this.getAppearanceConfig(e), this.propertyConfig.categories.layout = this.getLayoutPropConfig(e, this.viewModelId), this.propertyConfig;
  }
  getLayoutPropConfig(e, t) {
    return {
      title: "布局",
      description: "layout",
      properties: {
        layout: {
          title: "",
          type: "select",
          description: "配置布局容器内区块个数及比例。",
          editor: {
            type: "response-layout-splitter",
            layout: e.contents || []
          }
        }
      },
      setPropertyRelates(i, a) {
        ee.value++;
      }
    };
  }
}
function ge(s, e) {
  const t = s.schema;
  function i(r) {
    return !1;
  }
  function a(r) {
    return new me(r, e).getPropertyConfig(t);
  }
  function l() {
    var y;
    const r = s.designerItemElementRef.value.querySelector(`#${t.id}`);
    if (!r)
      return;
    const f = ((y = s.schema.contents) == null ? void 0 : y.map((g) => g.id)) || [];
    Array.from(r.children).map((g) => {
      var v;
      const h = (v = g.componentInstance) == null ? void 0 : v.value;
      h != null && h.schema && !f.includes(h.schema.id) && h.onRemoveComponent && h.onRemoveComponent(e);
    });
  }
  function p(r) {
    var f;
    r && ((f = r == null ? void 0 : r.changeObject) == null ? void 0 : f.propertyID) === "layout" && l();
  }
  return {
    canAccepts: i,
    getPropsConfig: a,
    onPropertyChanged: p
  };
}
const he = /* @__PURE__ */ P({
  name: "FResponseLayoutDesign",
  props: A,
  emits: [],
  setup(s, e) {
    const t = b(), i = F("design-item-context"), a = F("designer-host-service"), l = ge(i, a), p = J(t, i, l);
    z(() => {
      t.value.componentInstance = p;
    }), e.expose(p.value);
    function r(y, g) {
      y && g && g.split(" ").reduce((v, n) => (v[n] = !0, v), y);
    }
    const f = R(() => {
      const y = {
        "d-flex": !0,
        "response-layout": !0
      };
      return r(y, s.customClass), y;
    });
    return () => m("div", {
      ref: t,
      class: f.value,
      style: "height:inherit;"
    }, [e.slots.default && e.slots.default()]);
  }
});
class Ce extends W {
  constructor(e, t) {
    super(e, t);
  }
  getPropertyConfig(e) {
    return this.propertyConfig.categories.basic = this.getBasicPropConfig(e), this.propertyConfig.categories.appearance = this.getAppearanceConfig(e), this.propertyConfig;
  }
}
function ve(s, e) {
  const t = s.schema;
  function i(n) {
    var G, x, N;
    const { componentType: o, sourceType: c, bindingTargetId: u, sourceElement: d } = n, { schemaService: L, formSchemaUtils: C } = e, I = C.getViewModelIdByComponentId((x = (G = s.componentInstance) == null ? void 0 : G.value) == null ? void 0 : x.belongedComponentId), E = C.getViewModelById(I);
    if ([$["response-layout"].type, $["query-solution"].type, $.fieldset.type, $["filter-bar"].type, $.drawer.type].includes(o) || (N = t.contents) != null && N.length)
      return !1;
    if (c === "field") {
      const w = L.getFieldByIDAndVMID(u, I);
      if (!w || !w.schemaField)
        return !1;
    }
    if (d && d.componentInstance) {
      const { componentInstance: w } = d, O = C.getViewModelIdByComponentId(w.value.belongedComponentId);
      if (O !== I && o === "form-group")
        return C.getViewModelById(O).bindTo === E.bindTo;
    }
    return !0;
  }
  function a() {
    return !1;
  }
  function l() {
    return !1;
  }
  function p() {
    return !0;
  }
  function r(n) {
    return new Ce(n, e).getPropertyConfig(t);
  }
  function f() {
    t.appearance || (t.appearance = { class: "" }), t.appearance.class || (t.appearance.class = ""), t.appearance.class.includes("farris-form") || (t.appearance.class += " f-form-layout farris-form farris-form-controls-inline farris-form-auto");
  }
  function y(n, o) {
    var c, u, d;
    if (n.componentCategory === "input") {
      const { label: L } = n;
      let C;
      const I = e == null ? void 0 : e.controlCreatorUtils;
      return (c = n.bindingSourceContext) != null && c.entityFieldNode ? C = I.setFormFieldProperty((u = n.bindingSourceContext) == null ? void 0 : u.entityFieldNode, o == null ? void 0 : o.type, "col-12") : (C = I.createFormGroupWithoutField(o == null ? void 0 : o.type, "col-12"), C.label = L), f(), X(s, e).syncFieldToViewModel(n, (d = C.editor) == null ? void 0 : d.type), C;
    }
    return o;
  }
  function g(n, o) {
    if (!n || !n.componentInstance || !e)
      return;
    const u = n.componentInstance.value.schema;
    if (u.type === "form-group" && f(), !u.binding || !u.binding.field)
      return;
    const d = X(s, e);
    d.onAcceptMovedChildElement && d.onAcceptMovedChildElement(n, o);
  }
  function h() {
    !t.appearance || !t.appearance.class || (t.appearance.class = t.appearance.class.replace("f-form-layout", ""), t.appearance.class = t.appearance.class.replace("farris-form", ""), t.appearance.class = t.appearance.class.replace("farris-form-controls-inline", ""), t.appearance.class = t.appearance.class.replace("farris-form-auto", ""), t.appearance.class = t.appearance.class.trim());
  }
  function v(n) {
    var o, c, u;
    n && ((u = (c = (o = n.componentInstance) == null ? void 0 : o.value) == null ? void 0 : c.schema) == null ? void 0 : u.type) === "form-group" && h();
  }
  return {
    canAccepts: i,
    checkCanDeleteComponent: a,
    checkCanMoveComponent: l,
    hideNestedPaddingInDesginerView: p,
    getPropsConfig: r,
    onResolveNewComponentSchema: y,
    onAcceptMovedChildElement: g,
    onChildElementMovedOut: v
  };
}
const Le = /* @__PURE__ */ P({
  name: "FResponseLayoutItemDesign",
  props: S,
  emits: [],
  setup(s, e) {
    const t = b(), i = F("design-item-context"), a = F("designer-host-service"), l = ve(i, a), p = J(t, i, l), {
      designerContext: r
    } = a, f = !!r && !!r.responsiveForm && r.designerMode === "Mobile";
    z(() => {
      t.value.componentInstance = p;
    }), e.expose(p.value);
    const y = R(() => ({
      "f-response-layout-item": !0,
      [s.customClass]: !!s.customClass
    })), g = R(() => ({
      display: "inherit",
      flex: 1,
      paddingRight: f ? void 0 : "8px"
    }));
    return () => m("div", {
      ref: t,
      class: y.value,
      style: g.value,
      "data-dragref": `${i.schema.id}-container`
    }, [e.slots.default && e.slots.default()]);
  }
}), Ie = "https://json-schema.org/draft/2020-12/schema", be = "https://farris-design.gitee.io/response-layout-splitter.schema.json", Re = "response-layout-splitter", $e = "A Splitter Editor for Response Layout", Fe = "object", Pe = {
  id: {
    description: "The unique identifier for response layout splitter editor",
    type: "string"
  },
  type: {
    description: "The type string of response layout splitter editor component",
    type: "string",
    default: "response-layout-splitter"
  },
  layout: {
    description: "",
    type: "object",
    default: {}
  }
}, we = [
  "id",
  "type"
], Y = {
  $schema: Ie,
  $id: be,
  title: Re,
  description: $e,
  type: Fe,
  properties: Pe,
  required: we
}, q = {
  layout: { type: Array }
};
V(q, Y);
const Me = B(
  q,
  Y,
  void 0,
  void 0
);
function Ae(s, e) {
  const t = F("FMessageBoxService"), i = [
    "12",
    "6:6",
    "3:9",
    "9:3",
    "4:4:4",
    "3:6:3",
    "3:3:6",
    "3:3:3:3"
  ], a = b([]), l = b(""), p = b(s.layout || []), r = b(!0);
  function f() {
    i.forEach((n) => {
      a.value.push(n.split(":").map((o) => `col-${o}`));
    });
  }
  function y() {
    if (!(s != null && s.layout))
      return;
    if (!p.value.length) {
      l.value = "";
      return;
    }
    r.value = !0;
    const n = [];
    p.value.forEach((o) => {
      o.appearance || (o.appearance = { class: "" });
      const u = (o.appearance.class || "").split(" ").find((d) => /^col-([1-9]|10|11|12)$/.test(d));
      u ? n.push(parseInt(u.replace("col-", ""), 10)) : n.push(0);
    }), l.value = n.join(":"), r.value = i.includes(l.value);
  }
  function g(n) {
    for (let o = n.length; o < p.value.length; o++) {
      const c = p.value[o];
      if (c && c.contents && c.contents.length)
        return !0;
    }
    return !1;
  }
  function h(n, o) {
    r.value = !0, l.value = n;
    for (let c = 0; c < o.length; c++) {
      const u = p.value[c];
      if (u) {
        let d = u.appearance && u.appearance.class || "";
        const L = d.split(" ").find((C) => /^col-([1-9]|10|11|12)$/.test(C));
        L ? (d = d.replace(L, `col-${o[c]}`), u.appearance.class = d) : u.appearance.class += ` col-${o[c]}`;
      } else {
        const d = H("response-layout-item");
        d.id = `layout_${Math.random().toString().slice(2, 6)}`, d.appearance = { class: `h-100 col-${o[c]} px-0` }, p.value.push(d);
      }
    }
    p.value.length = o.length, e.emit("change");
  }
  function v(n) {
    const o = n.split(":");
    if (o.length < p.value.length && g(o)) {
      let c = "应用XXX列布局将删除右侧区域内的控件，此操作不可撤销，确定应用？";
      c = c.replace("XXX", o.length + ""), t == null || t.question(c, "", () => {
        h(n, o);
      }, () => {
      });
    } else
      h(n, o);
  }
  return f(), y(), {
    standardLayouts: i,
    standardLayoutClass: a,
    selectedLayout: l,
    currentLayoutItems: p,
    isStandardLayout: r,
    onSelectColumnLayout: v
  };
}
const Se = /* @__PURE__ */ P({
  name: "FResponseLayoutSplitter",
  props: q,
  emits: ["change"],
  setup(s, e) {
    const {
      standardLayouts: t,
      standardLayoutClass: i,
      selectedLayout: a,
      isStandardLayout: l,
      onSelectColumnLayout: p
    } = Ae(s, e), r = R(() => (y) => ({
      "columns-layout-option": !0,
      active: a.value === y
    }));
    function f() {
      return m("ul", {
        class: "columns-layout-list"
      }, [t.map((y, g) => m("li", {
        class: r.value(y),
        onClick: () => p(y)
      }, [m("div", {
        class: "columns-layout-icon d-flex"
      }, [i.value[g].map((h) => m("div", {
        class: {
          "columns-layout-item": !0,
          [h]: !0
        }
      }, [j(" ")]))])])), l.value ? "" : m("li", {
        class: "columns-layout-option active",
        title: "自定义布局"
      }, [m("div", {
        class: "columns-layout-icon icon-custom"
      }, [j(" ")])])]);
    }
    return () => m("div", {
      class: "columns-layout"
    }, [f(), l.value ? m("div", {
      class: "farris-group-wrap mt-2"
    }, [m("div", {
      class: "form-group farris-form-group d-flex"
    }, [m("label", {
      class: "col-form-label mb-0",
      style: "width: 89px;"
    }, [m("div", {
      class: "wrap"
    }, [m("span", {
      class: "farris-label-text"
    }, [j(" 布局比例 ")])])]), m("div", {
      class: "farris-input-wrap"
    }, [m("input", {
      type: "input",
      class: "form-control form-control-sm",
      value: a.value,
      readonly: !0
    }, null)])])]) : ""]);
  }
}), xe = {
  install(s) {
    s.component(T.name, T).component(D.name, D);
  },
  register(s, e, t, i, a) {
    s["response-layout"] = T, s["response-layout-item"] = D, e["response-layout"] = k(a), e["response-layout-item"] = U(a), s["response-layout-splitter"] = Se, e["response-layout-splitter"] = Me(a);
  },
  registerDesigner(s, e, t, i) {
    s["response-layout"] = he, s["response-layout-item"] = Le, e["response-layout"] = k(i), e["response-layout-item"] = U(i);
  }
};
export {
  T as FResponseLayout,
  D as FResponseLayoutItem,
  Se as FResponseLayoutSplitter,
  xe as default,
  A as responseLayoutProps,
  Ge as responseLayoutPropsResolver,
  k as responseLayoutPropsResolverGenerator
};