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

Farris Vue, a Farris Design based Vue3 component library.

var q = Object.defineProperty;
var J = (e, h, u) => h in e ? q(e, h, { enumerable: !0, configurable: !0, writable: !0, value: u }) : e[h] = u;
var b = (e, h, u) => J(e, typeof h != "symbol" ? h + "" : h, u);
import { defineComponent as L, ref as l, watch as I, onBeforeMount as H, createVNode as t, createTextVNode as R, computed as z, onMounted as Y, inject as K, provide as Q } from "vue";
import { cloneDeep as N } from "lodash-es";
import Z from "../capsule/index.esm.js";
import _ from "../switch/index.esm.js";
import ee from "../combo-list/index.esm.js";
import te from "../radio-button/index.esm.js";
import ae from "../rate/index.esm.js";
import { FMessageBoxService as ne } from "../message-box/index.esm.js";
import { FModalService as oe } from "../modal/index.esm.js";
const le = {
  /** 接受传入的原始数据的defaultState */
  initialState: { type: Object, default: {} }
}, ue = {
  /** 记录默认模式及分组状态 */
  defaultStates: { type: Object, default: { mode: "" } },
  /** 当前开关模式 */
  onSwitchInStandardModeChanged: { type: Function, default: () => {
  } },
  /** 用户设置的屏幕分辨率变化-例:MD*/
  onCurrentScreenResolutionChanged: { type: Function, default: () => {
  } },
  /** 用户设置的屏幕分辨率缩写变化-例:中等屏幕 */
  onScreenNameChanged: { type: Function, default: () => {
  } }
}, re = /* @__PURE__ */ L({
  name: "FScreenResolutionSelector",
  props: ue,
  emits: ["screenNameChanged", "currentScreenResolutionChanged", "switchInStandardModeChanged"],
  setup(e, h) {
    const u = l([{
      name: "小屏幕",
      code: "SM",
      value: "SM",
      active: !1
    }, {
      name: "中等屏幕",
      code: "MD",
      value: "MD",
      active: !0
    }, {
      name: "大屏幕",
      code: "LG",
      value: "LG",
      active: !1
    }, {
      name: "极大屏幕",
      code: "EL",
      value: "EL",
      active: !1
    }]), r = l(e.defaultStates), a = l("MD"), S = l("中等屏幕"), f = l(!0);
    function p(v) {
      u.value.forEach((o) => {
        o.active = o.code === v, o.active && (a.value = o.code, S.value = o.name, h.emit("screenNameChanged", S.value), h.emit("currentScreenResolutionChanged", a.value));
      });
    }
    function w() {
      h.emit("switchInStandardModeChanged", f.value);
    }
    I(f, () => {
    }), H(() => {
      r.value.model === "standard" ? f.value = !0 : (f.value = !1, w());
    });
    function d() {
      return t(Z, {
        class: "f-layout-editor-screen-resolution-selector-frame",
        items: u.value,
        modelValue: a.value,
        "onUpdate:modelValue": (v) => a.value = v,
        onChange: p
      }, null);
    }
    return () => t("div", {
      class: "f-layout-editor-screen-resolution-selector"
    }, [t("div", {
      class: "f-layout-editor-screen-resolution-selector-header"
    }, [t("div", {
      class: "f-layout-editor-screen-resolution-selector-form"
    }, [R("表单布局配置")])]), d(), t("div", {
      class: "f-layout-editor-screen-resolution-selector-switch"
    }, [t(_, {
      class: "f-layout-editor-show-switch",
      modelValue: f.value,
      "onUpdate:modelValue": (v) => f.value = v,
      onModelValueChanged: w
    }, null), f.value ? t("div", {
      class: "f-layout-editor-show-switch-label"
    }, [R("标准模式")]) : t("div", {
      class: "f-layout-editor-show-switch-label"
    }, [R("自定义模式")])])]);
  }
}), ie = {
  /** 默认屏幕分辨率对应的英文缩写 */
  currentScreenResolution: { type: String, default: "" },
  /** 模式开关 */
  switchInStandardMode: { type: Boolean, default: !1 },
  /** 记录当前展示的区域 */
  currentArea: { type: Object, default: [] },
  /** 接受组件列表区传入的二维数组 */
  twoDimensionalArray: { type: Array, default: [] }
}, se = {
  /** 单个组件的预览状态 */
  item: { type: Object, default: {} },
  /** 默认屏幕分辨率对应的英文缩写 */
  currentScreenResolution: { type: String, default: "" },
  /** 接受switch状态，若为自定义模式，则需要改变Col-num的num来源；*/
  switchInStandardMode: { type: Boolean, default: !1 }
}, ce = /* @__PURE__ */ L({
  name: "FColumnWidthView",
  props: se,
  emits: [],
  setup(e, h) {
    const u = l(e.item), r = l(e.currentScreenResolution), a = z(() => `col-${u.value[`columnIn${r.value}`]}`);
    return I([() => e.item, () => e.currentScreenResolution], ([S, f], [p, w]) => {
      S !== p && (u.value = S), f !== w && (r.value = f);
    }), () => t("div", {
      class: a.value
    }, [t("div", {
      class: "f-layout-editor-column-width-view",
      title: u.value.label
    }, [t("div", {
      class: "f-layout-editor-column-width-view-label"
    }, [u.value.label])])]);
  }
}), de = /* @__PURE__ */ L({
  name: "FPreview",
  props: ie,
  emits: ["update:twoDimensionalArray"],
  setup(e, h) {
    const u = l(e.currentScreenResolution), r = l(e.switchInStandardMode), a = l(e.currentArea), S = l(e.twoDimensionalArray), f = l([]);
    I([() => e.currentArea, () => e.switchInStandardMode, () => e.currentScreenResolution], ([o, c, g], [y, A, M]) => {
      o !== y && (a.value = o), c !== A && (r.value = c), g !== M && (u.value = g);
    });
    function p(o, c) {
      const g = [];
      let y = [];
      return o.forEach((A) => {
        c !== A.componentRow && (c += 1, g.push(y), y = []), y.push(A);
      }), g.push(y), g;
    }
    function w() {
      const o = [];
      let c = 1;
      return f.value.forEach((g) => {
        const y = p(g, c);
        c += y.length, o.push(y);
      }), o;
    }
    function d() {
      f.value = N(S.value), f.value = w();
    }
    I(() => e.twoDimensionalArray, () => {
      S.value = e.twoDimensionalArray, d();
    }), Y(() => {
      d();
    });
    function v() {
      if (r.value)
        return "";
      const o = Array.from({
        length: 12
      }, () => t("div", {
        class: "col-1"
      }, [t("div", {
        class: "f-layout-editor-preview-customize-single-background"
      }, [R(" ")])]));
      return t("div", {
        class: "f-layout-editor-preview-customize-whole-background"
      }, [o]);
    }
    return () => t("div", {
      class: "f-layout-editor-preview f-utils-fill-flex-column"
    }, [t("div", {
      class: "f-layout-editor-preview-header"
    }, [R("预览区")]), v(), t("div", {
      class: "f-layout-editor-preview-view f-utils-overflow-xhya"
    }, [t("div", {
      class: "f-layout-editor-preview-row-group"
    }, [f.value.map((o) => {
      var c, g;
      return ((c = o[0][0]) == null ? void 0 : c.group.toString()) === ((g = a.value[0]) == null ? void 0 : g.id) && o.map((y) => t("div", {
        class: "f-layout-editor-row"
      }, [y.map((A) => t(ce, {
        item: A,
        "onUpdate:item": (M) => A = M,
        currentScreenResolution: u.value,
        switchInStandardMode: r.value
      }, null))]));
    })])])]);
  }
}), fe = {
  /** 用户切换屏幕分辨率-缩写-例:MD； */
  currentScreenResolution: { type: String, default: "" },
  /** 检测用户是否切换模式 */
  switchInStandardMode: { type: Boolean, default: !1 },
  /** 输入的控件原始数据 */
  originalData: { type: Array, default: [] },
  /** 在用户切换模式时显示原数据，确保两个模式下的数据不互通 */
  originalDataCopy: { type: Array, default: [] },
  /** 默认状态：包括defaultGroupNumber(默认显示组)及mode(当前模式：standard或customize) */
  defaultStates: { type: Object, default: {} },
  /** twoDimensionalArray值变化事件 */
  onTwoDimensionalArrayChanged: { type: Function, default: () => {
  } },
  /** originalData值变化事件 */
  onOriginalDataChanged: { type: Function, default: () => {
  } }
};
function ve(e, h) {
  const u = l(-1), r = l(!1);
  function a(o) {
    if (o.target.offsetParent) {
      const c = o.target.offsetParent, g = c.offsetWidth - o.target.offsetWidth / 2 - 4, y = c.offsetHeight / 2;
      o.dataTransfer && o.dataTransfer.setDragImage(c, g, y);
    }
  }
  function S(o) {
    if (o) {
      const c = e.value.findIndex((g) => g.label === o.label);
      setTimeout(() => {
        u.value = c, r.value = !0, o.moving = !0;
      });
    }
  }
  function f(o, c) {
    o.stopPropagation(), a(o), S(c);
  }
  function p(o) {
    const c = e.value.findIndex((g) => g.label === o.label);
    if (u.value !== c) {
      const g = e.value[u.value], y = e.value;
      y.splice(u.value, 1), y.splice(c, 0, g), u.value = c, h && h();
    }
  }
  function w(o, c) {
    o.preventDefault(), p(c);
  }
  function d(o) {
    o.preventDefault(), o.dataTransfer && (o.dataTransfer.dropEffect = "move");
  }
  function v(o, c) {
    c && (c.moving = !1), r.value = !1;
  }
  return {
    dragstart: f,
    dragenter: w,
    dragover: d,
    dragend: v,
    isDragging: r
  };
}
const me = {
  /** 默认屏幕分辨率对应的英文缩写 */
  currentScreenResolution: { type: String, default: "" },
  /** 传入的单个控件的响应式列宽值 */
  field: { type: Object, default: {} },
  /** 模式开关 */
  switchInStandardMode: { type: Boolean, default: !1 },
  /** 列数值变化事件 */
  fieldChanged: { type: Function, default: () => {
  } }
}, he = /* @__PURE__ */ L({
  name: "FColumnWidthEditor",
  props: me,
  emits: ["fieldChanged"],
  setup(e, h) {
    const u = {
      SM: ["1"],
      MD: ["1", "2"],
      LG: ["1", "2", "3", "4"],
      EL: ["1", "2", "3", "4", "5", "6"]
    }, r = l(e.currentScreenResolution), a = l(e.field), S = l(e.switchInStandardMode), f = l(), p = l(""), w = l(), d = l("customize"), v = l(), o = K("ResponseLayoutEditorDraggableComposition"), {
      dragstart: c,
      dragenter: g,
      dragover: y,
      dragend: A
    } = o;
    function M() {
      f.value = u == null ? void 0 : u[r.value], S.value ? (p.value = `displayWidthIn${r.value}`, d.value = `${a.value[p.value]}`) : (p.value = `columnIn${r.value}`, v.value = a.value[p.value]);
    }
    function V(m) {
      if (S.value === !0) {
        const D = Number(m == null ? void 0 : m.text);
        w.value = D;
        const F = a.value[`columnIn${r.value}`] / a.value[`displayWidthIn${r.value}`];
        a.value[`columnIn${r.value}`] = D * F, a.value[`displayWidthIn${r.value}`] = Number(D), h.emit("fieldChanged", a.value);
      }
    }
    function O(m) {
      v.value = m;
      const D = a.value[`columnIn${r.value}`] / a.value[`displayWidthIn${r.value}`];
      a.value[`columnIn${r.value}`] = v.value, a.value[`displayWidthIn${r.value}`] = v.value / D, h.emit("fieldChanged", a.value);
    }
    function T() {
      return t(ae, {
        enableHalf: !0,
        size: "extraLarge",
        pointSystem: 12,
        numOfStar: 6,
        lightColor: "#5D89FE",
        darkColor: "#e7e9f3",
        iconClass: "f-icon-column-rectangle",
        modelValue: v.value,
        "onUpdate:modelValue": (m) => v.value = m,
        enableScore: !1,
        onSelectedValue: () => O(v.value)
      }, null);
    }
    function W() {
      const m = [];
      f.value = u == null ? void 0 : u[r.value];
      const D = a.value[`displayWidthIn${r.value}`];
      return f.value.forEach((F) => {
        const P = {
          text: F,
          active: D.toString() === F
        };
        m.push(P);
      }), m;
    }
    function x() {
      const m = W();
      return t(te, {
        enumData: m,
        suffixValue: "列",
        onSelectedValueChanged: V
      }, {
        default: () => [R(" ")]
      });
    }
    function B() {
      var m;
      if (((m = a == null ? void 0 : a.value) == null ? void 0 : m.showTopBorder) === 1)
        return t("div", {
          class: "f-layout-editor-column-width-editor-row"
        }, [t("span", {
          class: "f-layout-editor-column-width-editor-row-left"
        }, null), t("span", {
          class: "f-layout-editor-column-width-editor-row-middle"
        }, [R("第"), a.value.componentRow, R("行")]), t("span", {
          class: "f-layout-editor-column-width-editor-row-right"
        }, null)]);
    }
    function i() {
      return S.value ? t("div", {
        class: "f-column-width-editor-switch-standard"
      }, [t("div", {
        class: "f-layout-editor-column-width-editor-click-button"
      }, [x()])]) : t("div", {
        class: "f-column-width-editor-switch-customize",
        onDragenter: (m) => g(m, a.value),
        onDragend: (m) => A(m, a.value),
        onDragover: (m) => y(m)
      }, [t("div", {
        class: "f-layout-editor-column-width-editor-rectangle"
      }, [T(), t("div", {
        class: "f-layout-editor-rate-show-column"
      }, [v.value, R("列")]), t("span", {
        class: "f-layout-editor-drag-handler f-icon f-icon-drag-vertical",
        draggable: "true",
        onDragstart: (m) => c(m, a.value)
      }, null)])]);
    }
    function E() {
      var m, D;
      return t("div", {
        class: "f-layout-editor-column-width-editor-component"
      }, [t("div", {
        class: "f-layout-editor-column-width-editor-label",
        title: (m = a == null ? void 0 : a.value) == null ? void 0 : m.label
      }, [(D = a == null ? void 0 : a.value) == null ? void 0 : D.label]), i()]);
    }
    return I(() => [e.field, e.switchInStandardMode, e.currentScreenResolution], ([m, D, F], [P, U, n]) => {
      F !== n && (r.value = F, f.value = u[r.value], M()), D !== U && (S.value = D), S.value === !1 && M(), m !== P && (a.value = m);
    }), Y(() => {
      M();
    }), () => t("div", {
      class: "f-layout-editor-column-width-editor"
    }, [B(), E()]);
  }
}), ge = /* @__PURE__ */ L({
  name: "FFieldList",
  props: fe,
  emits: ["update:currentArea", "twoDimensionalArrayChanged", "originalDataChanged"],
  setup(e, h) {
    const u = l(e.currentScreenResolution), r = l(e.switchInStandardMode), a = l(e.originalData), S = l(e.originalDataCopy), f = l(e.defaultStates), p = l(""), w = l([]), d = l(e.currentArea), v = l(0), o = l(), c = l(0), g = l("1"), y = l([]);
    function A() {
      const n = [];
      return a.value.forEach((s) => {
        n.indexOf(s.group) === -1 && n.push(s.group);
      }), n;
    }
    function M() {
      g.value = f.value.defaultGroupNumber.toString(), p.value = `区域${g.value}`, d.value = [w.value[Number(g.value) - 1]], h.emit("update:currentArea", d.value);
    }
    function V() {
      var s;
      const n = A();
      for (let C = 0; C < n.length; C++) {
        const $ = {
          id: (s = n[C]) == null ? void 0 : s.toString(),
          label: "区域" + n[C]
        };
        w.value.push($);
      }
      M();
    }
    function O() {
      let n = [];
      o.value = [];
      let s = 1;
      a.value.forEach((C) => {
        C.group === s || (s += 1, o.value.push(n), n = []), n.push(C);
      }), o.value.push(n);
    }
    function T(n, s) {
      let $ = 12;
      return v.value = 1 + s, n.forEach((k) => {
        k.showTopBorder = 0;
        const j = k[`columnIn${u.value}`];
        $ >= j ? (k.componentRow = v.value, $ -= j) : (v.value += 1, k.componentRow = v.value, $ = 12 - j, k.showTopBorder = 1);
      }), n[0].showTopBorder = 1, n;
    }
    function W(n) {
      let s = [];
      for (const C of n)
        s = s.concat(C);
      a.value = N(s), c.value = 0;
    }
    function x() {
      o.value[d.value[0].id - 1] = N(y.value);
      const n = [];
      c.value = 0, o.value.forEach((s) => {
        const C = T(s, c.value);
        n.push(C), c.value = C[C.length - 1].componentRow;
      }), W(n);
    }
    function B() {
      O();
      const n = [];
      return c.value = 0, o.value.forEach((s) => {
        const C = T(s, c.value);
        n.push(C), c.value = C[C.length - 1].componentRow;
      }), h.emit("twoDimensionalArrayChanged", o.value), W(n), a.value;
    }
    function i() {
      y.value = [], a.value.forEach((n) => {
        n.group === Number(d.value[0].id) && y.value.push(n);
      });
    }
    function E() {
      a.value = N(B()), h.emit("originalDataChanged", a.value);
    }
    function m(n) {
      y.value.forEach((s) => {
        s.id === n.id && Object.assign(s, n);
      }), x(), E(), i();
    }
    function D(n) {
      for (let s = 0; s < n.length; s++)
        d.value = [{
          id: n[s].id,
          label: n[s].label
        }];
      h.emit("update:currentArea", d.value), i(), x();
    }
    function F() {
      return t("div", {
        class: "f-layout-editor-field-list-top"
      }, [t("div", {
        class: "f-layout-editor-field-list-header"
      }, [R("组件列表")]), t("div", {
        class: "f-layout-editor-choose-group"
      }, [t(ee, {
        modelValue: g.value,
        "onUpdate:modelValue": (n) => g.value = n,
        placeholder: "当前可编辑组",
        enableClear: !1,
        "id-field": "id",
        "text-field": "label",
        data: w.value,
        editable: !1,
        onChange: D
      }, null)])]);
    }
    function P() {
      return t("div", {
        class: "f-layout-editor-field-list-content f-utils-overflow-xhya"
      }, [y.value.map((n) => t(he, {
        key: n.label,
        currentScreenResolution: u.value,
        field: n,
        "onUpdate:field": (s) => n = s,
        switchInStandardMode: r.value,
        "onUpdate:switchInStandardMode": (s) => r.value = s,
        onFieldChanged: m
      }, null))]);
    }
    const U = ve(y, () => {
      x(), E(), i();
    });
    return Q("ResponseLayoutEditorDraggableComposition", U), I(() => e.currentArea, (n, s) => {
      n !== s && (d.value = e.currentArea, i());
    }), I(d, (n, s) => {
      n !== s && i();
    }), I(() => e.currentGroup, (n, s) => {
      n !== s && (p.value = e.currentGroup);
    }), I(() => e.currentScreenResolution, (n, s) => {
      n !== s && (u.value = e.currentScreenResolution, E(), O(), d.value[0] && (y.value = N(o.value[Number(d.value[0].id) - 1])));
    }), I(() => e.switchInStandardMode, (n, s) => {
      n !== s && (r.value = e.switchInStandardMode, a.value = N(S.value));
    }), I(f, (n, s) => {
      n !== s && E();
    }), H(() => {
      V(), B(), i();
    }), () => t("div", {
      class: "f-layout-editor-field-list f-utils-fill-flex-column"
    }, [r.value ? (
      /* 标准模式 */
      t("div", {
        class: "f-layout-editor-field-list-standard f-utils-fill-flex-column"
      }, [F(), P()])
    ) : (
      /* 自定义模式 */
      t("div", {
        class: "f-layout-editor-field-list-customize f-utils-fill-flex-column"
      }, [F(), P()])
    )]);
  }
}), G = /* @__PURE__ */ L({
  name: "FResponseLayoutEditor",
  props: le,
  emits: ["close", "submit"],
  setup(e, h) {
    const u = l(e.initialState), r = l(), a = l(), S = l(""), f = l(""), p = l(!0), w = l([{
      id: "1",
      label: "区域1"
    }]), d = l([]), v = l();
    l(e.width), l(e.height), I(() => e.initialState, (i) => {
      u.value = i;
    }), I([() => e.currentArea, () => e.switchInStandardMode], ([i, E], [m, D]) => {
      i !== m && (w.value = i), E !== D && (p.value = E);
    });
    function o(i) {
      S.value = i;
    }
    function c(i) {
      f.value = i;
    }
    function g(i) {
      p.value = i;
    }
    function y(i) {
      w.value = [].concat(i);
    }
    function A(i) {
      r.value = N(i);
    }
    function M(i) {
      d.value = i;
    }
    function V() {
      h.emit("close");
    }
    function O() {
      h.emit("submit", r.value);
    }
    function T() {
      return t(ge, {
        class: "f-utils-fill-flex-column",
        defaultStates: a.value,
        originalDataCopy: v.value,
        currentScreenResolution: f.value,
        "onUpdate:currentScreenResolution": (i) => f.value = i,
        originalData: r.value,
        "onUpdate:originalData": (i) => r.value = i,
        switchInStandardMode: p.value,
        "onUpdate:switchInStandardMode": (i) => p.value = i,
        currentArea: w.value,
        "onUpdate:currentArea": (i) => w.value = i,
        onCurrentAreaChanged: y,
        onTwoDimensionalArrayChanged: M,
        onOriginalDataChanged: A
      }, null);
    }
    function W() {
      return t(de, {
        class: "f-utils-fill-flex-column",
        currentArea: w.value,
        "onUpdate:currentArea": (i) => w.value = i,
        currentScreenResolution: f.value,
        "onUpdate:currentScreenResolution": (i) => f.value = i,
        switchInStandardMode: p.value,
        twoDimensionalArray: d.value,
        "onUpdate:twoDimensionalArray": (i) => d.value = i
      }, null);
    }
    const x = z(() => p.value ? "f-layout-editor-left-standard f-utils-fill-flex-column" : "f-layout-editor-left-customize f-utils-fill-flex-column"), B = z(() => p.value ? "f-layout-editor-right-standard f-utils-fill-flex-column" : "f-layout-editor-right-customize f-utils-fill-flex-column");
    return H(() => {
      r.value = N(u.value.importData), v.value = N(u.value.importData), a.value = u.value.defaultState, S.value = "中等屏幕", f.value = "MD";
    }), (i) => t("div", {
      class: "f-layout-editor f-utils-flex-column"
    }, [t("div", {
      class: "f-layout-editor-top"
    }, [t(re, {
      defaultStates: a.value,
      onScreenNameChanged: o,
      onCurrentScreenResolutionChanged: c,
      onSwitchInStandardModeChanged: g
    }, null)]), t("div", {
      class: "f-layout-editor-content f-utils-fill"
    }, [t("div", {
      class: "f-layout-editor-left f-utils-fill-flex-column"
    }, [t("div", {
      class: x.value
    }, [T()])]), t("div", {
      class: "f-layout-editor-right f-utils-fill-flex-column"
    }, [t("div", {
      class: B.value
    }, [W()])])]), t("div", {
      class: "f-layout-editor-bottom"
    }, [t("div", {
      class: "f-layout-editor-button"
    }, [t("div", {
      class: "f-layout-editor-cancel-btn",
      onClick: V
    }, [t("span", {
      class: "f-layout-editor-text-cancel"
    }, [R("取消")])]), t("div", {
      class: "f-layout-editor-sure-btn",
      onClick: O
    }, [t("span", {
      class: "f-layout-editor-text-sure"
    }, [R("确认")])])])])]);
  }
}), ye = {
  /** 接受传入的原始数据的defaultState */
  initialState: { type: Object },
  /** 页面高度 */
  height: { type: Number, default: 0 },
  /** 页面宽度 */
  width: { type: Number, default: 0 },
  modelValue: { type: Object },
  /** 打开弹窗前进行校验 */
  beforeOpen: { type: Object }
}, X = /* @__PURE__ */ L({
  name: "FResponseLayoutEditorSetting",
  props: ye,
  emits: ["change"],
  setup(e, h) {
    const u = l(e.initialState), r = l(e.width), a = l(e.height);
    I(() => e.initialState, (d) => {
      u.value = d;
    });
    function S(d, v) {
      u.value.importData = v, h.emit("change", v), d && d.unmount();
    }
    function f(d) {
      d && d.unmount();
    }
    function p() {
      if (e.width > 0 && e.width > 0)
        return;
      const d = document.documentElement.clientWidth, v = document.documentElement.clientHeight;
      a.value = v < 650 ? 500 : v > 1200 ? 840 : 630, r.value = d < 850 ? 900 : d > 1400 ? 1e3 : 890;
    }
    function w() {
      if (e.beforeOpen && typeof e.beforeOpen == "function" && (u.value = e.beforeOpen()), !u.value.defaultState || !u.value.importData) {
        const d = u.value.message || "只可以在响应式表单组件中调整响应式布局配置";
        ne.info(d, "");
        return;
      }
      p(), oe.show({
        render: (d) => t(G, {
          initialState: u,
          onClose: () => f(d),
          onSubmit: (v) => S(d, v)
        }, null),
        width: r.value,
        height: a.value,
        fitContent: !1,
        showButtons: !1,
        showHeader: !1,
        showFloatingClose: !0
      });
    }
    return () => t("div", {
      class: "f-column-width-setting-button",
      onClick: w
    }, [t("i", {
      class: "f-icon f-icon-add"
    }, null), t("div", {
      class: "f-column-width-setting-button-name"
    }, [t("span", {
      class: "f-column-width-setting-button-center"
    }, [R("高级设置")])])]);
  }
});
class Fe {
  constructor() {
    /** 控件标题 */
    b(this, "label", "");
    /** 控件id */
    b(this, "id", "");
    /** 每个控件占用的栅格数 */
    b(this, "columnInSM", 12);
    b(this, "columnInMD", 6);
    b(this, "columnInLG", 3);
    b(this, "columnInEL", 2);
    /** 每个控件占用的列数 */
    b(this, "displayWidthInSM", 1);
    b(this, "displayWidthInMD", 1);
    b(this, "displayWidthInLG", 1);
    b(this, "displayWidthInEL", 1);
    /** 编辑器内部默认显示的屏幕大小-----可以去掉 */
    b(this, "displayColumnCountAtBreakPoint", "md");
    /** 控件所在行，传0即可-----编辑器内部使用 */
    b(this, "tagRow", 0);
    /** 控件是否显示上方空白：传0即可-----编辑器内部使用 */
    b(this, "showTopBorder", 0);
    /** 区域，从1开始。卡片内的控件从上往下，从左往右划分区域，遇到分组fieldSet时group+1，分组结束后group+1 */
    b(this, "group", 1);
    /** 控件是否符合标准的class配置(设计器用的) */
    b(this, "isSupportedClass", !0);
    /** 控件所在分组id(设计器用的) */
    b(this, "fieldSetId", "");
  }
}
G.install = (e) => {
  e.component(G.name, G), e.component(X.name, X);
};
export {
  Fe as ResponseFormLayoutContext,
  G as ResponseLayoutEditor,
  X as ResponseLayoutEditorSetting,
  G as default,
  le as responseLayoutEditorProps,
  ye as responseLayoutEditorSettingProps
};