@farris/ui-vue 1.5.8 → 1.5.9

package/designer/section/index.esm.js

@@ -0,0 +1,744 @@
+import E, { sectionToolbarItemProps as z, sectionProps as R } from "../../components/section/index.esm.js";
+import { getCustomClass as w, withInstall as q } from "../../components/common/index.esm.js";
+import { schemaResolver as B, FResponseToolbarDesign as H } from "../response-toolbar/index.esm.js";
+import { createPropsResolver as P, resolveAppearance as L, createSectionEventHandlerResolver as N, getSchemaByType as O } from "../../components/dynamic-resolver/index.esm.js";
+import U, { responseToolbarProps as V } from "../../components/response-toolbar/index.esm.js";
+import { DgControl as D, canvasChanged as _, UseTemplateDragAndDropRules as G, useDragulaCommonRule as K, FDesignerInnerItem as Z, setPositionOfSelectedComponentBtnGroup as J, useDesignerComponent as Q } from "../../components/designer-canvas/index.esm.js";
+import { computed as b, ref as A, createVNode as l, Fragment as W, nextTick as X, defineComponent as Y, inject as I, onMounted as ee } from "vue";
+import { BaseControlProperty as te } from "../../components/property-panel/index.esm.js";
+const ne = "https://json-schema.org/draft/2020-12/schema", oe = "https://farris-design.gitee.io/section-toolbar-item.schema.json", se = "section-toolbar-item", ie = "A Farris Toolbar Item Component", re = "object", ae = {
+  id: {
+    description: "The unique identifier for a Response Toolbar",
+    type: "string"
+  },
+  type: {
+    description: "The type string of Response Toolbar",
+    type: "string",
+    default: "section-toolbar-item"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  text: {
+    description: "按钮",
+    type: "string",
+    default: "按钮"
+  },
+  icon: {
+    description: "图标",
+    type: "string",
+    default: ""
+  },
+  disabled: {
+    description: "禁用",
+    type: "boolean",
+    default: !1
+  },
+  visible: {
+    description: "是否可见",
+    type: "boolean",
+    default: !0
+  },
+  onClick: {
+    description: "点击事件",
+    type: "string",
+    default: ""
+  },
+  tipsEnable: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  tipsText: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  dropdownClass: {
+    description: "处于下拉菜单时的样式",
+    type: "string",
+    default: ""
+  },
+  split: {
+    description: "",
+    type: "boolean",
+    default: !1
+  }
+}, le = [
+  "id",
+  "type",
+  "text"
+], ce = {
+  $schema: ne,
+  $id: oe,
+  title: se,
+  description: ie,
+  type: re,
+  properties: ae,
+  required: le
+}, ue = P(z, ce);
+function de(t, e, n) {
+  return e ? { enableAccordion: n.accordionMode } : { enableAccordion: "" };
+}
+function pe(t, e) {
+  var n;
+  return {
+    buttons: e.buttons,
+    buttonPosition: e.position,
+    buttonsClass: (n = e.appearance) == null ? void 0 : n.class
+  };
+}
+const M = /* @__PURE__ */ new Map([
+  ["appearance", L],
+  ["expanded", "expandStatus"],
+  ["enableAccordion", de],
+  ["toolbar", pe]
+]);
+function fe(t, e, n) {
+  const i = Math.random().toString().slice(2, 6), a = n.parentComponentInstance;
+  Object.assign(e, {
+    id: `section-${i}`,
+    appearance: {
+      class: "f-section-in-mainsubcard"
+    },
+    mainTitle: n.mainTitle || e.mainTitle || "标题"
+  });
+  const r = t.getSchemaByType("content-container");
+  Object.assign(r, {
+    id: `container-${i}`,
+    appearance: {
+      class: "f-struct-wrapper"
+    },
+    contents: [e]
+  });
+  const c = a.schema;
+  switch (c && c.type) {
+    case D["splitter-pane"].type: {
+      e.appearance.class = "f-section-in-main";
+      break;
+    }
+  }
+  const g = a.elementRef, u = window.getComputedStyle(g);
+  return u && u.display === "flex" && (r.appearance.class += " d-block"), r;
+}
+function me(t, e, n) {
+  return n.parentComponentInstance ? fe(t, e, n) : e;
+}
+const be = "https://json-schema.org/draft/2020-12/schema", ye = "https://farris-design.gitee.io/section.schema.json", he = "section", ge = "A Farris Container Component", ve = "object", Ce = {
+  id: {
+    description: "The unique identifier for a Section",
+    type: "string"
+  },
+  type: {
+    description: "The type string of Section component",
+    type: "string",
+    default: "section"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  contentClass: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  contents: {
+    description: "",
+    type: "array",
+    default: []
+  },
+  enableAccordion: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  accordionMode: {
+    description: "",
+    type: "string",
+    default: "default"
+  },
+  enableMaximize: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  expanded: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  fill: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  headerClass: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  size: {
+    description: "",
+    type: "object",
+    properties: {
+      width: {
+        type: "number"
+      },
+      height: {
+        type: "number"
+      }
+    },
+    default: null
+  },
+  showHeader: {
+    description: "",
+    type: "string",
+    default: !0
+  },
+  mainTitle: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  subTitle: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  headerContentClass: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  extendClass: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  visible: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  expandStatus: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  toolbar: {
+    description: "",
+    type: "object",
+    properties: {
+      type: {
+        type: "string",
+        default: "section-toolbar"
+      },
+      position: {
+        type: "string",
+        default: "inHead"
+      },
+      buttons: {
+        type: "array",
+        default: []
+      },
+      appearance: {
+        description: "",
+        type: "object",
+        properties: {
+          class: {
+            type: "string",
+            default: ""
+          }
+        }
+      }
+    },
+    default: null
+  }
+}, Te = [
+  "id",
+  "type",
+  "contents"
+], xe = {
+  $schema: be,
+  $id: ye,
+  title: he,
+  description: ge,
+  type: ve,
+  properties: Ce,
+  required: Te
+}, Se = "https://json-schema.org/draft/2020-12/schema", Ae = "https://farris-design.gitee.io/section-toolbar.schema.json", $e = "section-toolbar", we = "A Farris Toolbar Component", Pe = "object", Ie = {
+  id: {
+    description: "The unique identifier for a Section Toolbar",
+    type: "string"
+  },
+  type: {
+    description: "The type string of Section Toolbar",
+    type: "string",
+    default: "section-toolbar"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string",
+        default: ""
+      }
+    }
+  },
+  alignment: {
+    description: "The alignment of Section Toolbar Button.",
+    type: "string",
+    default: "right"
+  },
+  buttons: {
+    description: "The items of Section Toolbar.",
+    type: "array",
+    default: []
+  },
+  buttonSize: {
+    type: "string",
+    default: ""
+  },
+  visible: {
+    description: "",
+    type: "boolean",
+    default: !0
+  }
+}, Re = [
+  "id",
+  "type",
+  "buttons"
+], De = {
+  onClick: "点击事件"
+}, Me = {
+  $schema: Se,
+  $id: Ae,
+  title: $e,
+  description: we,
+  type: Pe,
+  properties: Ie,
+  required: Re,
+  events: De
+}, k = P(R, xe, M, me), ke = N(), Fe = Object.assign({}, R, { componentId: { type: String, default: "" } }), je = P(
+  V,
+  Me,
+  M,
+  B
+);
+class Ee extends te {
+  constructor(e, n) {
+    super(e, n);
+  }
+  getPropertyConfig(e) {
+    const n = this.getBasicPropConfig(e), i = this.getAppearanceProperties(e), a = this.getBehaviorConfig(e, ""), r = this.getExtendConfig(e);
+    return this.propertyConfig.categories = {
+      basic: n,
+      appearance: i,
+      behavior: a,
+      extend: r
+    }, this.propertyConfig;
+  }
+  getAppearanceProperties(e) {
+    return {
+      title: "外观",
+      description: "Appearance",
+      properties: {
+        class: {
+          description: "组件的CSS样式",
+          title: "class样式"
+        },
+        style: {
+          description: "组件的内容样式",
+          title: "style样式"
+        },
+        fill: {
+          title: "填充内容区域",
+          type: "boolean",
+          description: ""
+        },
+        showHeader: {
+          title: "显示标题区域",
+          type: "boolean",
+          description: ""
+        },
+        mainTitle: {
+          title: "主标题",
+          type: "string",
+          description: "",
+          visible: {
+            showHeader: !0
+          }
+        },
+        subTitle: {
+          title: "副标题",
+          type: "string",
+          description: "",
+          visible: {
+            showHeader: !0
+          }
+        },
+        enableAccordion: {
+          title: "面板收折",
+          type: "enum",
+          description: "是否启用分组面板的收折特性",
+          editor: {
+            type: "combo-list",
+            textField: "value",
+            valueField: "key",
+            idField: "key",
+            editable: !1,
+            data: [
+              {
+                key: "",
+                value: "不启用"
+              },
+              {
+                key: "default",
+                value: "启用默认收折"
+              }
+            ]
+          },
+          // visible: {
+          //     showHeader: true // 属性面板上此属性不受showHeader限制，是因为expandStatus不受showHeader限制
+          // },
+          refreshPanelAfterChanged: !0
+        },
+        expandStatus: {
+          title: "默认状态",
+          type: "boolean",
+          description: "默认面板是展开还是收起",
+          editor: {
+            type: "combo-list",
+            textField: "name",
+            valueField: "value",
+            data: [{
+              name: "展开",
+              value: !0
+            }, {
+              name: "收起",
+              value: !1
+            }],
+            enableClear: !1
+          },
+          visible: e.enableAccordion === "default"
+        }
+      },
+      setPropertyRelates(n, i) {
+        if (n)
+          switch (n && n.propertyID) {
+            case "mainTitle": {
+              n.needRefreshControlTree = !0;
+              break;
+            }
+            case "showHeader": {
+              const a = document.getElementsByClassName("dgComponentFocused");
+              Array.from(a).forEach((r) => r.classList.remove("dgComponentFocused")), _.value++;
+              break;
+            }
+          }
+      }
+    };
+  }
+  getExtendConfig(e) {
+    return {
+      title: "扩展",
+      description: "",
+      properties: {
+        contentClass: {
+          title: "内容区域样式",
+          type: "string",
+          description: ""
+        }
+      }
+    };
+  }
+}
+function ze(t, e) {
+  const n = new G(), i = t.schema;
+  function a(o) {
+    return new Ee(o, e).getPropertyConfig(i);
+  }
+  function r(o) {
+    if (!K().basalDragulaRuleForContainer(o, e))
+      return !1;
+    const { canAccept: m } = n.getTemplateRule(t, e);
+    return m;
+  }
+  function c() {
+    const { canDelete: o } = n.getTemplateRule(t, e);
+    return o;
+  }
+  function g() {
+    const { canMove: o } = n.getTemplateRule(t, e);
+    return o;
+  }
+  function u() {
+    const { canMove: o, canDelete: s } = n.getTemplateRule(t, e);
+    return !o && !s;
+  }
+  function v(o) {
+    o && (o.stopPropagation(), o.preventDefault());
+    const { schema: s } = t;
+    (!s.toolbar || !s.toolbar.buttons) && (s.toolbar = { id: `${s.id}_toolbar`, buttons: [] });
+    const m = O("section-toolbar-item");
+    m.id = `section_toolbar_item_${Math.random().toString().slice(2, 6)}`, s.toolbar.buttons.push(m);
+  }
+  function p() {
+    var T;
+    const { schema: o } = t, s = e == null ? void 0 : e.formSchemaUtils;
+    if (o.showHeader === !1 || !s)
+      return;
+    const m = s.selectNode(o, (d) => d.type === D["response-form"].type), x = ((T = o.toolbar) == null ? void 0 : T.buttons) || [];
+    if (!m && x.length === 0)
+      return [{
+        id: "appendToolbar",
+        title: "新增按钮",
+        icon: "f-icon f-icon-plus-circle text-white",
+        onClick: (d) => v(d)
+      }];
+  }
+  function f() {
+    var x, T;
+    if (!e)
+      return;
+    const o = e.formSchemaUtils.getExpressions();
+    if (!o || !o.length)
+      return;
+    const { schema: s } = t;
+    if (!((T = (x = s.toolbar) == null ? void 0 : x.buttons) != null && T.length))
+      return;
+    const m = (d) => {
+      d.forEach((h) => {
+        const S = o.findIndex((C) => C.target === h.id);
+        S > -1 && o.splice(S, 1), h.children && h.children.length && m(h.children);
+      });
+    };
+    m(s.toolbar.buttons);
+  }
+  function y() {
+    f();
+  }
+  return {
+    canAccepts: r,
+    checkCanDeleteComponent: c,
+    checkCanMoveComponent: g,
+    hideNestedPaddingInDesginerView: u,
+    getPropsConfig: a,
+    getCustomButtons: p,
+    onRemoveComponent: y
+  };
+}
+function qe(t, e, n) {
+  let i;
+  function a(u = 1) {
+    const v = [
+      "body>.f-datagrid-settings-simple-host",
+      "body>div",
+      "body>farris-dialog>.farris-modal.show",
+      "body>.farris-modal.show",
+      "body>farris-filter-panel>.f-filter-panel-wrapper",
+      "body .f-sidebar-show>.f-sidebar-main",
+      "body>.popover.show",
+      "body>filter-row-panel>.f-datagrid-filter-panel",
+      "body>.f-section-maximize"
+    ], p = Array.from(document.body.querySelectorAll(v.join(","))).filter((y) => y).map((y) => {
+      const { display: o, zIndex: s } = window.getComputedStyle(y);
+      return o === "none" ? 0 : parseInt(s, 10);
+    }).filter((y) => y);
+    let f = Math.max(...p);
+    return f < 1040 && (f = 1040), f + u;
+  }
+  function r() {
+    i = t.value.nextElementSibling;
+    const u = document && document.querySelector("body");
+    u && (u.appendChild(t.value), t.value.style.zIndex = a());
+  }
+  function c() {
+    i ? e.value.insertBefore(
+      t.value,
+      i
+    ) : e.value.appendChild(t.value), t.value.style.zIndex = null;
+  }
+  function g() {
+    !t || !e.value || (n.value = !n.value, n.value ? r() : c());
+  }
+  return { onClickMaxMinIcon: g };
+}
+function F(t, e) {
+  var v, p;
+  const n = b(() => "f-section-toolbar col-6" + (t.buttonPosition === "inHead" ? " f-toolbar f-section-header--toolbar" : " f-section-content--toolbar") + (t.buttonsClass ? " " + t.buttonsClass : "")), i = A(t.buttons), a = A(e.schema.toolbar), r = t.componentId, c = `${r}-toolbar`, g = b(() => t.buttonPosition === "inHead" ? "right" : "left");
+  function u(f, y, o, s) {
+    var m;
+    (m = e.setupContext) == null || m.emit("selectionChange", f, y, o, s);
+  }
+  return l(W, null, [(p = (v = a.value) == null ? void 0 : v.buttons) != null && p.length ? l("div", {
+    class: n.value,
+    style: "padding-right:0;"
+  }, [l("div", {
+    class: "w-100",
+    style: "flex:1"
+  }, [l(Z, {
+    modelValue: a.value,
+    "onUpdate:modelValue": (f) => a.value = f,
+    class: "w-100 position-relative",
+    canAdd: !1,
+    childType: "section-toolbar-item",
+    childLabel: "按钮",
+    contentKey: "buttons",
+    id: c,
+    onSelectionChange: u,
+    componentId: r
+  }, {
+    default: () => [l(U, {
+      customClass: "d-block text-right",
+      items: i.value,
+      alignment: g.value,
+      componentId: r
+    }, null)]
+  })])]) : ""]);
+}
+function Be(t, e, n, i, a, r, c) {
+  const g = b(() => t.buttonPosition), {
+    onClickMaxMinIcon: u
+  } = qe(i, a, r), v = b(() => t.enableMaximize), p = b(() => t.enableAccordion !== ""), f = b(() => {
+    const d = {
+      "f-section-header": !0
+    };
+    return e.slots.header && t.headerClass.split(" ").reduce((S, C) => (S[C] = !0, S), d), d;
+  });
+  function y(d) {
+    d.stopPropagation(), t.enableAccordion !== "" && (n.value = !n.value, X(() => {
+      J(c.designerItemElementRef.value);
+    }));
+  }
+  function o() {
+    const d = b(() => ({
+      btn: !0,
+      "f-btn-collapse-expand": !0,
+      "f-btn-mx": !0,
+      "f-state-expand": n.value
+    })), h = b(() => ({
+      "f-icon": !0,
+      "f-icon-maximize": !r.value,
+      "f-icon-minimize": r.value
+    }));
+    return l("div", {
+      class: "f-max-accordion"
+    }, [v.value ? l("span", {
+      class: h.value,
+      onClick: u
+    }, null) : "", p.value ? l("button", {
+      class: d.value,
+      onClick: y
+    }, [l("span", null, [n.value ? t.collapseLabel : t.expandLabel])]) : ""]);
+  }
+  function s() {
+    return e.slots.header ? l("div", {
+      class: f.value
+    }, [e.slots.header()]) : "";
+  }
+  function m() {
+    return l("div", {
+      class: "f-title"
+    }, [l("h4", {
+      class: "f-title-text"
+    }, [t.mainTitle]), t.subTitle && l("span", null, [t.subTitle])]);
+  }
+  function x() {
+    const d = b(() => {
+      const h = {
+        "f-content": !0
+      };
+      return t.headerContentClass && t.headerContentClass.split(" ").reduce((C, j) => (C[j] = !0, C), h), h;
+    });
+    return e.slots.headerContent ? l("div", {
+      class: d.value
+    }, [e.slots.headerContent()]) : "";
+  }
+  function T() {
+    return l("div", {
+      class: f.value
+    }, [e.slots.headerTitle ? e.slots.headerTitle() : m(), x(), g.value === "inHead" && F(t, c), (v.value || p.value) && o()]);
+  }
+  return () => t.showHeader && (e.slots.header ? s() : T());
+}
+const $ = /* @__PURE__ */ Y({
+  name: "FSectionDesign",
+  props: Fe,
+  emits: [],
+  setup(t, e) {
+    const n = A(), i = A(), a = A(), r = I("designer-host-service"), c = I("design-item-context"), g = ze(c, r), u = Q(n, c, g);
+    u.value.styles = "display: inherit;", ee(() => {
+      n.value.componentInstance = u;
+    }), e.expose(u.value);
+    const v = A(t.customClass), p = b(() => t.enableAccordion), f = A(!0), y = b(() => t.buttonPosition), o = A(!1), s = Be(t, e, f, i, a, o, c), m = b(() => {
+      const C = {
+        "f-section": !0,
+        "f-section-accordion": p.value === "default",
+        "f-state-collapse": (p.value === "default" || p.value === "custom") && !f.value,
+        "f-section-custom-accordion": p.value === "custom",
+        "f-section-fill": t.fill,
+        "f-section-maximize": o.value,
+        "f-utils-fill": !0,
+        "p-0": !0
+      };
+      return w(C, v.value);
+    }), x = b(() => w({
+      "f-section-content": !0,
+      "drag-container": !0
+    }, t.contentClass)), T = b(() => ({
+      visibility: (p.value === "default" || p.value === "custom") && !f.value ? "hidden" : "visible"
+    })), d = b(() => w({
+      "f-section-extend": !0
+    }, d.value));
+    function h() {
+      return e.slots.extend && l("div", {
+        class: d.value
+      }, [e.slots.extend()]);
+    }
+    function S() {
+      return l("div", {
+        class: x.value,
+        ref: n,
+        "data-dragref": `${c.schema.id}-container`,
+        style: T.value
+      }, [y.value === "inContent" && F(t, c), e.slots.default && e.slots.default()]);
+    }
+    return () => l("div", {
+      class: m.value,
+      ref: i,
+      style: t.customStyle
+    }, [s(), h(), S()]);
+  }
+});
+$.register = (t, e, n, i) => {
+  t.section = E, e.section = k, i.section = { eventHandlerResolver: ke };
+};
+$.registerDesigner = (t, e, n) => {
+  t.section = $, e.section = k, e["section-toolbar-item"] = ue, t["section-toolbar"] = H, e["section-toolbar"] = je;
+};
+const Ke = q($);
+export {
+  Ke as default
+};