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

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as F, computed as L, createVNode as m, ref as R, inject as P, 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 w = /* @__PURE__ */ new Map([
  ["appearance", Z]
]);
function _(o, e, t) {
  if (t.componentFeature) {
    const l = JSON.parse(t.componentFeature);
    e.appearance = { class: "bg-white" }, e.contents = String(l.splitter).split(":").map((r) => {
      const c = o.getSchemaByType("response-layout-item");
      return c.appearance = {
        class: `h-100 col-${r} px-0`
      }, c;
    });
  }
  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, w, _), k = B(
  A,
  K,
  w,
  _
), T = /* @__PURE__ */ F({
  name: "FResponseLayout",
  props: A,
  emits: [],
  setup(o, e) {
    function t(r, c) {
      r && c && c.split(" ").reduce((a, f) => (a[f] = !0, a), r);
    }
    const l = L(() => {
      const r = {
        "d-flex": !0,
        "f-response-layout": !0
      };
      return t(r, o.customClass), r;
    });
    return () => m("div", {
      class: l.value,
      style: o.customStyle
    }, [e.slots.default && e.slots.default()]);
  }
}), le = "https://json-schema.org/draft/2020-12/schema", ce = "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: le,
  $id: ce,
  title: pe,
  description: ue,
  type: de,
  properties: ye,
  required: fe
}, S = {
  customClass: { type: String, default: "" },
  customStyle: { type: String, default: "" }
};
V(S, Q, w);
const U = B(
  S,
  Q,
  w,
  void 0
), D = /* @__PURE__ */ F({
  name: "FResponseLayoutItem",
  props: S,
  emits: [],
  setup(o, e) {
    const t = L(() => ({
      "f-response-layout-item": !0,
      [o.customClass]: !!o.customClass
    }));
    return () => m("div", {
      class: t.value,
      style: o.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(l, r) {
        ee.value++;
      }
    };
  }
}
function ge(o, e) {
  const t = o.schema;
  function l(a) {
    return !1;
  }
  function r(a) {
    return new me(a, e).getPropertyConfig(t);
  }
  function c() {
    var g;
    const a = o.designerItemElementRef.value.querySelector(`#${t.id}`);
    if (!a)
      return;
    const f = ((g = o.schema.contents) == null ? void 0 : g.map((h) => h.id)) || [];
    Array.from(a.children).map((h) => {
      var v;
      const y = (v = h.componentInstance) == null ? void 0 : v.value;
      y != null && y.schema && !f.includes(y.schema.id) && y.onRemoveComponent && y.onRemoveComponent(e);
    });
  }
  function p(a) {
    var f;
    a && ((f = a == null ? void 0 : a.changeObject) == null ? void 0 : f.propertyID) === "layout" && c();
  }
  return {
    canAccepts: l,
    getPropsConfig: r,
    onPropertyChanged: p
  };
}
const he = /* @__PURE__ */ F({
  name: "FResponseLayoutDesign",
  props: A,
  emits: [],
  setup(o, e) {
    const t = R(), l = P("design-item-context"), r = P("designer-host-service"), c = ge(l, r), p = J(t, l, c), {
      designerContext: a
    } = r, f = L(() => a && a.terminalRef.value === "Mobile");
    z(() => {
      t.value.componentInstance = p;
    }), e.expose(p.value);
    function g(y, v) {
      y && v && v.split(" ").reduce((s, i) => (s[i] = !0, s), y);
    }
    const h = L(() => {
      const y = {
        "d-flex": !0,
        "f-response-layout": !0,
        "response-layout": !0,
        "is-mobile": f.value
      };
      return g(y, o.customClass), y;
    });
    return () => m("div", {
      ref: t,
      class: h.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(o, e) {
  const t = o.schema;
  function l(n) {
    var G, x, N;
    const { componentType: s, sourceType: i, bindingTargetId: u, sourceElement: d } = n, { schemaService: I, formSchemaUtils: C } = e, b = C.getViewModelIdByComponentId((x = (G = o.componentInstance) == null ? void 0 : G.value) == null ? void 0 : x.belongedComponentId), E = C.getViewModelById(b);
    if ([$["response-layout"].type, $["query-solution"].type, $.fieldset.type, $["filter-bar"].type, $.drawer.type].includes(s) || (N = t.contents) != null && N.length)
      return !1;
    if (i === "field") {
      const M = I.getFieldByIDAndVMID(u, b);
      if (!M || !M.schemaField)
        return !1;
    }
    if (d && d.componentInstance) {
      const { componentInstance: M } = d, O = C.getViewModelIdByComponentId(M.value.belongedComponentId);
      if (O !== b && s === "form-group")
        return C.getViewModelById(O).bindTo === E.bindTo;
    }
    return !0;
  }
  function r() {
    return !1;
  }
  function c() {
    return !1;
  }
  function p() {
    return !0;
  }
  function a(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 g(n, s) {
    var i, u, d;
    if (n.componentCategory === "input") {
      const { label: I } = n;
      let C;
      const b = e == null ? void 0 : e.controlCreatorUtils;
      return (i = n.bindingSourceContext) != null && i.entityFieldNode ? C = b.setFormFieldProperty((u = n.bindingSourceContext) == null ? void 0 : u.entityFieldNode, s == null ? void 0 : s.type, "col-12") : (C = b.createFormGroupWithoutField(s == null ? void 0 : s.type, "col-12"), C.label = I), f(), X(o, e).syncFieldToViewModel(n, (d = C.editor) == null ? void 0 : d.type), C;
    }
    return s;
  }
  function h(n, s) {
    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(o, e);
    d.onAcceptMovedChildElement && d.onAcceptMovedChildElement(n, s);
  }
  function y() {
    !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 s, i, u;
    n && ((u = (i = (s = n.componentInstance) == null ? void 0 : s.value) == null ? void 0 : i.schema) == null ? void 0 : u.type) === "form-group" && y();
  }
  return {
    canAccepts: l,
    checkCanDeleteComponent: r,
    checkCanMoveComponent: c,
    hideNestedPaddingInDesginerView: p,
    getPropsConfig: a,
    onResolveNewComponentSchema: g,
    onAcceptMovedChildElement: h,
    onChildElementMovedOut: v
  };
}
const Le = /* @__PURE__ */ F({
  name: "FResponseLayoutItemDesign",
  props: S,
  emits: [],
  setup(o, e) {
    const t = R(), l = P("design-item-context"), r = P("designer-host-service"), c = ve(l, r), p = J(t, l, c), {
      designerContext: a
    } = r, f = L(() => a && a.terminalRef.value === "Mobile");
    z(() => {
      t.value.componentInstance = p;
    }), e.expose(p.value);
    const g = L(() => ({
      "f-response-layout-item": !0,
      [o.customClass]: !!o.customClass
    })), h = L(() => ({
      display: "inherit",
      flex: 1,
      paddingRight: f.value ? void 0 : "8px"
    }));
    return () => m("div", {
      ref: t,
      class: g.value,
      style: h.value,
      "data-dragref": `${l.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", Pe = "object", Fe = {
  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: {}
  }
}, Me = [
  "id",
  "type"
], Y = {
  $schema: Ie,
  $id: be,
  title: Re,
  description: $e,
  type: Pe,
  properties: Fe,
  required: Me
}, q = {
  layout: { type: Array }
};
V(q, Y);
const we = B(
  q,
  Y,
  void 0,
  void 0
);
function Ae(o, e) {
  const t = P("FMessageBoxService"), l = [
    "12",
    "6:6",
    "3:9",
    "9:3",
    "4:4:4",
    "3:6:3",
    "3:3:6",
    "3:3:3:3"
  ], r = R([]), c = R(""), p = R(o.layout || []), a = R(!0);
  function f() {
    l.forEach((n) => {
      r.value.push(n.split(":").map((s) => `col-${s}`));
    });
  }
  function g() {
    if (!(o != null && o.layout))
      return;
    if (!p.value.length) {
      c.value = "";
      return;
    }
    a.value = !0;
    const n = [];
    p.value.forEach((s) => {
      s.appearance || (s.appearance = { class: "" });
      const u = (s.appearance.class || "").split(" ").find((d) => /^col-([1-9]|10|11|12)$/.test(d));
      u ? n.push(parseInt(u.replace("col-", ""), 10)) : n.push(0);
    }), c.value = n.join(":"), a.value = l.includes(c.value);
  }
  function h(n) {
    for (let s = n.length; s < p.value.length; s++) {
      const i = p.value[s];
      if (i && i.contents && i.contents.length)
        return !0;
    }
    return !1;
  }
  function y(n, s) {
    a.value = !0, c.value = n;
    for (let i = 0; i < s.length; i++) {
      const u = p.value[i];
      if (u) {
        let d = u.appearance && u.appearance.class || "";
        const I = d.split(" ").find((C) => /^col-([1-9]|10|11|12)$/.test(C));
        I ? (d = d.replace(I, `col-${s[i]}`), u.appearance.class = d) : u.appearance.class += ` col-${s[i]}`;
      } else {
        const d = H("response-layout-item");
        d.id = `layout_${Math.random().toString().slice(2, 6)}`, d.appearance = { class: `h-100 col-${s[i]} px-0` }, p.value.push(d);
      }
    }
    p.value.length = s.length, e.emit("change");
  }
  function v(n) {
    const s = n.split(":");
    if (s.length < p.value.length && h(s)) {
      let i = "应用XXX列布局将删除右侧区域内的控件，此操作不可撤销，确定应用？";
      i = i.replace("XXX", s.length + ""), t == null || t.question(i, "", () => {
        y(n, s);
      }, () => {
      });
    } else
      y(n, s);
  }
  return f(), g(), {
    standardLayouts: l,
    standardLayoutClass: r,
    selectedLayout: c,
    currentLayoutItems: p,
    isStandardLayout: a,
    onSelectColumnLayout: v
  };
}
const Se = /* @__PURE__ */ F({
  name: "FResponseLayoutSplitter",
  props: q,
  emits: ["change"],
  setup(o, e) {
    const {
      standardLayouts: t,
      standardLayoutClass: l,
      selectedLayout: r,
      isStandardLayout: c,
      onSelectColumnLayout: p
    } = Ae(o, e), a = L(() => (g) => ({
      "columns-layout-option": !0,
      active: r.value === g
    }));
    function f() {
      return m("ul", {
        class: "columns-layout-list"
      }, [t.map((g, h) => m("li", {
        class: a.value(g),
        onClick: () => p(g)
      }, [m("div", {
        class: "columns-layout-icon d-flex"
      }, [l.value[h].map((y) => m("div", {
        class: {
          "columns-layout-item": !0,
          [y]: !0
        }
      }, [j(" ")]))])])), c.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(), c.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: r.value,
      readonly: !0
    }, null)])])]) : ""]);
  }
}), xe = {
  install(o) {
    o.component(T.name, T).component(D.name, D);
  },
  register(o, e, t, l, r) {
    o["response-layout"] = T, o["response-layout-item"] = D, e["response-layout"] = k(r), e["response-layout-item"] = U(r), o["response-layout-splitter"] = Se, e["response-layout-splitter"] = we(r);
  },
  registerDesigner(o, e, t, l) {
    o["response-layout"] = he, o["response-layout-item"] = Le, e["response-layout"] = k(l), e["response-layout-item"] = U(l);
  }
};
export {
  T as FResponseLayout,
  D as FResponseLayoutItem,
  Se as FResponseLayoutSplitter,
  xe as default,
  A as responseLayoutProps,
  Ge as responseLayoutPropsResolver,
  k as responseLayoutPropsResolverGenerator
};