@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,896 lines • 112 kB
JavaScript
var at = Object.defineProperty;
var nt = (e, t, a) => t in e ? at(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
var N = (e, t, a) => nt(e, typeof t != "symbol" ? t + "" : t, a);
import { defineComponent as X, ref as o, watch as z, computed as O, onMounted as Q, createVNode as u, nextTick as ue, toRefs as lt, onBeforeMount as re, createTextVNode as G, Fragment as ce, withModifiers as oe, inject as Be, provide as ot, onUnmounted as Te, Teleport as it, Transition as ut, shallowRef as st, createApp as rt, render as he, h as ct, cloneVNode as dt, mergeProps as Fe, reactive as ee } from "vue";
import { isPlainObject as xe, cloneDeep as J, isUndefined as ft } from "lodash-es";
import vt from "../list-view/index.esm.js";
import mt from "../button-edit/index.esm.js";
const pt = {
/** 接受传入的原始数据的defaultState */
initialState: { type: Object, default: {} }
}, ht = {
/** 记录默认模式及分组状态 */
defaultStates: { type: Object, default: { mode: "" } },
/** 当前开关模式 */
onSwitchInStandardModeChanged: { type: Function, default: () => {
} },
/** 用户设置的屏幕分辨率变化-例:MD*/
onCurrentScreenResolutionChanged: { type: Function, default: () => {
} },
/** 用户设置的屏幕分辨率缩写变化-例:中等屏幕 */
onScreenNameChanged: { type: Function, default: () => {
} }
}, gt = "https://json-schema.org/draft/2020-12/schema", yt = "https://farris-design.gitee.io/capsule.schema.json", bt = "capsule", wt = "A Farris Component", Ct = "object", St = {
id: {
description: "The unique identifier for a capsule",
type: "string"
},
type: {
description: "The type string of capsule component",
type: "string",
default: "capsule"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disable: {
type: "string",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !0
},
placeholder: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
require: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
visible: {
description: "",
type: "boolean",
default: !0
}
}, xt = [
"id",
"type"
], Mt = {
$schema: gt,
$id: yt,
title: bt,
description: wt,
type: Ct,
properties: St,
required: xt
}, ke = {}, Ee = {};
function ye(e) {
const { properties: t, title: a, ignore: n } = e, l = n && Array.isArray(n), s = Object.keys(t).reduce((c, d) => ((!l || !n.find((m) => m === d)) && (c[d] = t[d].type === "object" && t[d].properties ? ye(t[d]) : J(t[d].default)), c), {});
if (a && (!l || !n.find((c) => c === "id"))) {
const c = a.toLowerCase().replace(/-/g, "_");
s.id = `${c}_${Math.random().toString().slice(2, 6)}`;
}
return s;
}
function Bt(e) {
const { properties: t, title: a, required: n } = e;
if (n && Array.isArray(n)) {
const l = n.reduce((s, c) => (s[c] = t[c].type === "object" && t[c].properties ? ye(t[c]) : J(t[c].default), s), {});
if (a && n.find((s) => s === "id")) {
const s = a.toLowerCase().replace(/-/g, "_");
l.id = `${s}_${Math.random().toString().slice(2, 6)}`;
}
return l;
}
return {
type: a
};
}
function Re(e, t = {}, a) {
const n = ke[e];
if (n) {
let l = Bt(n);
const s = Ee[e];
return l = s ? s({ getSchemaByType: Re }, l, t, a) : l, l;
}
return null;
}
function Tt(e, t) {
const a = ye(t);
return Object.keys(a).reduce((n, l) => (Object.prototype.hasOwnProperty.call(e, l) && (n[l] && xe(n[l]) && xe(e[l] || !e[l]) ? Object.assign(n[l], e[l] || {}) : n[l] = e[l]), n), a), a;
}
function De(e, t) {
return Object.keys(e).filter((n) => e[n] != null).reduce((n, l) => {
if (t.has(l)) {
const s = t.get(l);
if (typeof s == "string")
n[s] = e[l];
else {
const c = s(l, e[l], e);
Object.assign(n, c);
}
} else
n[l] = e[l];
return n;
}, {});
}
function Ft(e, t, a = /* @__PURE__ */ new Map()) {
const n = Tt(e, t);
return De(n, a);
}
function kt(e = {}) {
function t(r, v, i, f) {
if (typeof i == "number")
return f[r].length === i;
if (typeof i == "object") {
const w = Object.keys(i)[0], x = i[w];
if (w === "not")
return Number(f[r].length) !== Number(x);
if (w === "moreThan")
return Number(f[r].length) >= Number(x);
if (w === "lessThan")
return Number(f[r].length) <= Number(x);
}
return !1;
}
function a(r, v, i, f) {
return f[r] && f[r].propertyValue && String(f[r].propertyValue.value) === String(i);
}
const n = /* @__PURE__ */ new Map([
["length", t],
["getProperty", a]
]);
Object.keys(e).reduce((r, v) => (r.set(v, e[v]), r), n);
function l(r, v) {
const i = r;
return typeof v == "number" ? [{ target: i, operator: "length", param: null, value: Number(v) }] : typeof v == "boolean" ? [{ target: i, operator: "getProperty", param: r, value: !!v }] : typeof v == "object" ? Object.keys(v).map((f) => {
if (f === "length")
return { target: i, operator: "length", param: null, value: v[f] };
const w = f, x = v[f];
return { target: i, operator: "getProperty", param: w, value: x };
}) : [];
}
function s(r) {
return Object.keys(r).reduce((i, f) => {
const w = l(f, r[f]);
return i.push(...w), i;
}, []);
}
function c(r, v) {
if (n.has(r.operator)) {
const i = n.get(r.operator);
return i && i(r.target, r.param, r.value, v) || !1;
}
return !1;
}
function d(r, v) {
return s(r).reduce((w, x) => w && c(x, v), !0);
}
function m(r, v) {
const i = Object.keys(r), f = i.includes("allOf"), w = i.includes("anyOf"), x = f || w, F = (x ? r[x ? f ? "allOf" : "anyOf" : "allOf"] : [r]).map((B) => d(B, v));
return f ? !F.includes(!1) : F.includes(!0);
}
return { parseValueSchema: m };
}
const Et = {}, Rt = {};
kt();
function ae(e, t, a = /* @__PURE__ */ new Map(), n = (c, d, m, r) => d, l = {}, s = (c) => c) {
return ke[t.title] = t, Ee[t.title] = n, Et[t.title] = l, Rt[t.title] = s, (c = {}, d = !0) => {
if (!d)
return De(c, a);
const m = Ft(c, t, a), r = Object.keys(e).reduce((v, i) => (v[i] = e[i].default, v), {});
return Object.assign(r, m);
};
}
function ne(e, t) {
return { customClass: t.class, customStyle: t.style };
}
const Dt = /* @__PURE__ */ new Map([
["appearance", ne]
]);
function Ot(e, t, a) {
return t;
}
const $t = "capsule", At = "A Farris Component", jt = "object", It = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, Lt = {
title: $t,
description: At,
type: jt,
categories: It
}, Oe = {
items: {
Type: Array,
default: [
{ name: "升序", value: "asc", icon: "f-icon f-icon-col-ascendingorder" },
{ name: "降序", value: "desc", icon: "f-icon f-icon-col-descendingorder" }
]
},
/**
* 组件值
*/
modelValue: { type: String, default: "" },
type: { type: String, default: "primary" }
}, Vt = {
name: { type: String, default: "" },
value: { type: String, default: "" },
isActive: { type: Boolean, default: !1 },
icon: { type: String, default: "" },
index: { type: Number, default: 0 },
show: { type: Boolean, default: !0 },
disabled: { type: Boolean, default: !1 }
};
ae(Oe, Mt, Dt, Ot, Lt);
const zt = /* @__PURE__ */ X({
name: "FCapsuleItem",
props: Vt,
emits: ["mounted", "active"],
setup(e, t) {
const a = o(), n = o(e.isActive);
z(() => e.isActive, (c) => {
n.value = c;
});
const l = O(() => ({
"f-capsule-item": !0,
"f-capsule-active-item": n.value,
"f-capsule-disabled": e.disabled
}));
Q(() => {
t.emit("mounted", a, e.value);
});
function s(c) {
e.disabled || t.emit("active", c, {
name: e.name,
value: e.value
});
}
return () => u("div", {
ref: a,
class: l.value,
onClick: (c) => s(c)
}, [e.icon && u("i", {
class: e.icon
}, null), e.name]);
}
}), Ht = /* @__PURE__ */ X({
name: "FCapsule",
props: Oe,
emits: ["change", "update:modelValue"],
setup(e, t) {
const a = o(e.items), n = o(), l = 2, s = o(e.modelValue), c = o("none"), d = o(e.type), m = O(() => {
const h = {
"f-capsule-container": !0
};
return d.value && (h[d.value] = !0), h;
}), r = O(() => ({})), v = O(() => ({
"f-capsule": !0
})), i = o(l), f = o(0), w = o(0), x = O(() => ({
left: `${i.value}px`,
width: `${f.value}px`,
transition: c.value
})), R = O(() => ({
width: `${w.value}px`
})), C = /* @__PURE__ */ new Map();
function F(h) {
var g;
if (C.has(h.value)) {
const y = (g = C.get(h.value)) == null ? void 0 : g.value;
if (y) {
const M = y.getBoundingClientRect(), j = n.value.getBoundingClientRect();
i.value = M.left - j.left + l + n.value.scrollLeft, f.value = M.width - 2 * l;
}
}
}
function E(h, g) {
const y = h.value;
s.value = y, t.emit("update:modelValue", y), F(h), g && t.emit("change", y);
}
function B(h) {
const g = a.value.findIndex((y) => y.value === h);
g > -1 && E(a.value[g], !1);
}
z(() => e.modelValue, (h) => {
s.value = h, B(s.value);
}), Q(async () => {
B(s.value), await ue(), c.value = "0.1s ease-out all", w.value = Array.from(C.values()).reduce((h, g) => (h += g.value.clientWidth, h), 0);
});
function V(h, g) {
E(g, !0);
}
function D(h, g) {
C.set(g, h);
}
function L(h) {
Array.from(C.keys()).forEach((g) => {
h.find((M) => M.value === g) || C.delete(g);
});
}
function p(h, g) {
return u(zt, {
name: h.name,
value: h.value,
isActive: h.value === s.value,
index: g,
disabled: h.disabled,
key: h.value,
onMounted: D,
onActive: V
}, null);
}
return z(() => e.items, async (h) => {
const g = h.filter((y) => y.show);
L(g), a.value = g, await ue(), B(s.value), w.value = Array.from(C.values()).reduce((y, M) => (y += M.value.clientWidth, y), 0);
}), () => u("span", {
ref: n,
class: m.value,
style: r.value
}, [u("span", {
class: "f-capsule-pane"
}, [a.value.map((h, g) => p(h, g))]), u("small", {
class: v.value,
style: x.value
}, null), u("div", {
class: "f-capsule-board",
style: R.value
}, null)]);
}
}), Pt = /* @__PURE__ */ new Map([
["appearance", ne]
]), Nt = "https://json-schema.org/draft/2020-12/schema", Wt = "https://farris-design.gitee.io/switch.schema.json", qt = "switch", Ut = "A Farris Component", Gt = "object", Xt = {
id: {
description: "The unique identifier for a switch",
type: "string"
},
type: {
description: "The type string of switch component",
type: "string",
default: "switch"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disabled: {
type: "boolean",
default: !1
},
onBackground: {
description: "",
type: "string",
default: ""
},
offBackground: {
description: "",
type: "string",
default: ""
},
onColor: {
description: "",
type: "string",
default: ""
},
offColor: {
description: "",
type: "string",
default: ""
},
onLabel: {
description: "",
type: "string",
default: ""
},
offLabel: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
size: {
description: "",
type: "enum",
default: "medium"
},
required: {
description: "",
type: "boolean",
default: !1
}
}, Yt = [
"type"
], _t = [
"id",
"appearance",
"binding"
], Jt = {
$schema: Nt,
$id: Wt,
title: qt,
description: Ut,
type: Gt,
properties: Xt,
required: Yt,
ignore: _t
};
function Qt(e, t, a) {
return t;
}
const $e = {
modelValue: { type: Boolean, default: !1 },
/** 禁用 */
disabled: { type: Boolean, default: !1 },
/**
* 同disabled
*/
readonly: { type: Boolean, default: !1 },
onBackground: { type: String },
offBackground: { type: String },
onColor: { type: String },
offColor: { type: String },
onLabel: { type: String },
offLabel: { type: String },
/** 尺寸大小 */
size: { type: String, default: "medium" },
/** 开关值变化事件 */
onModelValueChanged: { type: Function, default: () => {
} },
focusOnCreated: { type: Boolean, default: !1 }
};
ae($e, Jt, Pt, Qt);
const Zt = /* @__PURE__ */ X({
name: "FSwitch",
props: $e,
emits: ["update:modelValue", "modelValueChanged"],
setup(e, t) {
const {
disabled: a,
size: n,
onLabel: l,
offLabel: s,
onBackground: c,
offBackground: d,
onColor: m,
offColor: r,
readonly: v
} = lt(e), i = o(!!e.modelValue), f = o(), w = O(() => ({
switch: !0,
"f-cmp-switch": !0,
checked: i.value,
disabled: v.value || a.value,
"switch-large": n.value === "large",
"switch-medium": n.value === "medium",
"switch-small": n.value === "small"
})), x = O(() => i.value ? {
outline: "none",
background: c.value
} : {
outline: "none",
backgroundColor: d.value
}), R = O(() => i.value ? {
background: m.value
} : {
backgroundColor: r.value
}), C = O(() => (l == null ? void 0 : l.value) || (s == null ? void 0 : s.value));
function F() {
v.value || a.value || (i.value = !i.value, t.emit("update:modelValue", i.value));
}
return z(i, (E, B) => {
E !== B && t.emit("modelValueChanged", E);
}), z(() => e.modelValue, (E, B) => {
E !== B && (i.value = E);
}), Q(() => {
var E;
e.focusOnCreated && ((E = f.value) == null || E.focus());
}), () => u("span", {
ref: f,
tabindex: "0",
role: "button",
class: w.value,
style: x.value,
onClick: F
}, [C.value && u("span", {
class: "switch-pane"
}, [u("span", {
class: "switch-label-checked"
}, [l == null ? void 0 : l.value]), u("span", {
class: "switch-label-unchecked"
}, [s == null ? void 0 : s.value])]), u("small", {
style: R.value
}, [t.slots.default && t.slots.default()])]);
}
}), Kt = /* @__PURE__ */ X({
name: "FScreenResolutionSelector",
props: ht,
emits: ["screenNameChanged", "currentScreenResolutionChanged", "switchInStandardModeChanged"],
setup(e, t) {
const a = o([{
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
}]), n = o(e.defaultStates), l = o("MD"), s = o("中等屏幕"), c = o(!0);
function d(v) {
a.value.forEach((i) => {
i.active = i.code === v, i.active && (l.value = i.code, s.value = i.name, t.emit("screenNameChanged", s.value), t.emit("currentScreenResolutionChanged", l.value));
});
}
function m() {
t.emit("switchInStandardModeChanged", c.value);
}
z(c, () => {
}), re(() => {
n.value.model === "standard" ? c.value = !0 : (c.value = !1, m());
});
function r() {
return u(Ht, {
class: "f-layout-editor-screen-resolution-selector-frame",
items: a.value,
modelValue: l.value,
"onUpdate:modelValue": (v) => l.value = v,
onChange: d
}, null);
}
return () => u("div", {
class: "f-layout-editor-screen-resolution-selector"
}, [u("div", {
class: "f-layout-editor-screen-resolution-selector-header"
}, [u("div", {
class: "f-layout-editor-screen-resolution-selector-form"
}, [G("表单布局配置")])]), r(), u("div", {
class: "f-layout-editor-screen-resolution-selector-switch"
}, [u(Zt, {
class: "f-layout-editor-show-switch",
modelValue: c.value,
"onUpdate:modelValue": (v) => c.value = v,
onModelValueChanged: m
}, null), c.value ? u("div", {
class: "f-layout-editor-show-switch-label"
}, [G("标准模式")]) : u("div", {
class: "f-layout-editor-show-switch-label"
}, [G("自定义模式")])])]);
}
}), ea = {
/** 默认屏幕分辨率对应的英文缩写 */
currentScreenResolution: { type: String, default: "" },
/** 模式开关 */
switchInStandardMode: { type: Boolean, default: !1 },
/** 记录当前展示的区域 */
currentArea: { type: Object, default: [] },
/** 接受组件列表区传入的二维数组 */
twoDimensionalArray: { type: Array, default: [] }
}, ta = {
/** 单个组件的预览状态 */
item: { type: Object, default: {} },
/** 默认屏幕分辨率对应的英文缩写 */
currentScreenResolution: { type: String, default: "" },
/** 接受switch状态，若为自定义模式，则需要改变Col-num的num来源；*/
switchInStandardMode: { type: Boolean, default: !1 }
}, aa = /* @__PURE__ */ X({
name: "FColumnWidthView",
props: ta,
emits: [],
setup(e, t) {
const a = o(e.item), n = o(e.currentScreenResolution), l = O(() => `col-${a.value[`columnIn${n.value}`]}`);
return z([() => e.item, () => e.currentScreenResolution], ([s, c], [d, m]) => {
s !== d && (a.value = s), c !== m && (n.value = c);
}), () => u("div", {
class: l.value
}, [u("div", {
class: "f-layout-editor-column-width-view",
title: a.value.label
}, [u("div", {
class: "f-layout-editor-column-width-view-label"
}, [a.value.label])])]);
}
}), na = /* @__PURE__ */ X({
name: "FPreview",
props: ea,
emits: ["update:twoDimensionalArray"],
setup(e, t) {
const a = o(e.currentScreenResolution), n = o(e.switchInStandardMode), l = o(e.currentArea), s = o(e.twoDimensionalArray), c = o([]);
z([() => e.currentArea, () => e.switchInStandardMode, () => e.currentScreenResolution], ([i, f, w], [x, R, C]) => {
i !== x && (l.value = i), f !== R && (n.value = f), w !== C && (a.value = w);
});
function d(i, f) {
const w = [];
let x = [];
return i.forEach((R) => {
f !== R.componentRow && (f += 1, w.push(x), x = []), x.push(R);
}), w.push(x), w;
}
function m() {
const i = [];
let f = 1;
return c.value.forEach((w) => {
const x = d(w, f);
f += x.length, i.push(x);
}), i;
}
function r() {
c.value = J(s.value), c.value = m();
}
z(() => e.twoDimensionalArray, () => {
s.value = e.twoDimensionalArray, r();
}), Q(() => {
r();
});
function v() {
if (n.value)
return "";
const i = Array.from({
length: 12
}, () => u("div", {
class: "col-1"
}, [u("div", {
class: "f-layout-editor-preview-customize-single-background"
}, [G(" ")])]));
return u("div", {
class: "f-layout-editor-preview-customize-whole-background"
}, [i]);
}
return () => u("div", {
class: "f-layout-editor-preview f-utils-fill-flex-column"
}, [u("div", {
class: "f-layout-editor-preview-header"
}, [G("预览区")]), v(), u("div", {
class: "f-layout-editor-preview-view f-utils-overflow-xhya"
}, [u("div", {
class: "f-layout-editor-preview-row-group"
}, [c.value.map((i) => {
var f, w;
return ((f = i[0][0]) == null ? void 0 : f.group.toString()) === ((w = l.value[0]) == null ? void 0 : w.id) && i.map((x) => u("div", {
class: "f-layout-editor-row"
}, [x.map((R) => u(aa, {
item: R,
"onUpdate:item": (C) => R = C,
currentScreenResolution: a.value,
switchInStandardMode: n.value
}, null))]));
})])])]);
}
}), la = {
/** 用户切换屏幕分辨率-缩写-例: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 oa(e, t) {
const a = o(-1), n = o(!1);
function l(i) {
if (i.target.offsetParent) {
const f = i.target.offsetParent, w = f.offsetWidth - i.target.offsetWidth / 2 - 4, x = f.offsetHeight / 2;
i.dataTransfer && i.dataTransfer.setDragImage(f, w, x);
}
}
function s(i) {
if (i) {
const f = e.value.findIndex((w) => w.label === i.label);
setTimeout(() => {
a.value = f, n.value = !0, i.moving = !0;
});
}
}
function c(i, f) {
i.stopPropagation(), l(i), s(f);
}
function d(i) {
const f = e.value.findIndex((w) => w.label === i.label);
if (a.value !== f) {
const w = e.value[a.value], x = e.value;
x.splice(a.value, 1), x.splice(f, 0, w), a.value = f, t && t();
}
}
function m(i, f) {
i.preventDefault(), d(f);
}
function r(i) {
i.preventDefault(), i.dataTransfer && (i.dataTransfer.dropEffect = "move");
}
function v(i, f) {
f && (f.moving = !1), n.value = !1;
}
return {
dragstart: c,
dragenter: m,
dragover: r,
dragend: v,
isDragging: n
};
}
const ia = /* @__PURE__ */ new Map([
["appearance", ne]
]), ua = "https://json-schema.org/draft/2020-12/schema", sa = "https://farris-design.gitee.io/combo-list.schema.json", ra = "combo-list", ca = "A Farris Input Component", da = "object", fa = {
id: {
description: "The unique identifier for a combo list",
type: "string"
},
type: {
description: "The type string of number combo list component",
type: "string",
default: "combo-list"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disabled: {
description: "",
type: "boolean",
default: !1
},
enableClear: {
description: "",
type: "boolean",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !1
},
enableLinkLabel: {
description: "",
type: "boolean",
default: !1
},
label: {
description: "",
type: "string",
default: ""
},
lableWidth: {
description: "",
type: "number"
},
placeholder: {
description: "",
type: "string",
default: "请选择"
},
idField: {
description: "",
type: "string",
default: "id"
},
valueField: {
description: "",
type: "string",
default: "id"
},
titleField: {
description: "",
type: "string",
default: "name"
},
textField: {
description: "",
type: "string",
default: "name"
},
dataSourceType: {
description: "",
type: "string",
default: "static"
},
data: {
description: "",
type: "array"
},
remote: {
description: "",
type: "string"
},
readonly: {
description: "",
type: "boolean",
default: !1
},
required: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
textAlign: {
description: "",
type: "string",
enum: [
"left",
"middle",
"right"
],
default: "left"
},
multiSelect: {
description: "",
type: "boolean",
default: !1
},
maxLength: {
description: "",
type: "number",
default: null
},
visible: {
description: "",
type: "boolean",
default: !0
},
onBlur: {
description: "",
type: "string",
default: ""
},
onClickLinkLabel: {
description: "",
type: "sting",
default: ""
},
maxHeight: {
description: "",
type: "number",
default: 350
},
minPanelWidth: {
description: "",
type: "number",
default: 160
},
popupOnClick: {
description: "",
type: "boolean",
default: !0
},
separator: {
description: "",
type: "string",
default: ","
}
}, va = [
"type"
], ma = [
"id",
"appearance",
"binding",
"visible"
], pa = {
$schema: ua,
$id: sa,
title: ra,
description: ca,
type: da,
properties: fa,
required: va,
ignore: ma
};
function ha(e, t, a) {
return t;
}
const be = {
/**
* 组件标识
*/
id: { type: String },
/**
* 下拉数据源
*/
data: { type: Array, default: [] },
/**
* 可选，展示文本
* 默认为空字符串 -----内部需要根据value重新生成展示文本，此属性不生效
* displayText: { type: String, default: '' },
*/
/**
* 可选，是否禁用
* 默认为`false`
*/
disabled: { default: !1, type: Boolean },
/**
* 可选，下拉图标
* 默认为'<span class="f-icon f-icon-arrow-60-down"></span>'
*/
dropDownIcon: { type: String, default: '<span class="f-icon f-icon-arrow-60-down"></span>' },
/**
* 可选，是否可编辑
* 默认`false`
*/
editable: { default: !1, type: Boolean },
/**
* 可选，是否启用清空
* 默认启用
*/
enableClear: { default: !0, type: Boolean },
/**
* 可选，启用搜索
* 默认为`false`
*/
enableSearch: { type: Boolean, default: !1 },
/**
* 可选，鼠标悬停时是否显示控件值
* 默认显示
*/
enableTitle: { default: !0, type: Boolean },
fitEditor: { default: !1, type: Boolean },
/**
* 可选，强制显示占位符
* 默认`false`
*/
forcePlaceholder: { default: !1, type: Boolean },
/**
* 可选，清空值时隐藏面板
* 默认`true`
*/
hidePanelOnClear: { default: !0, type: Boolean },
/**
* 可选，数据源id字段
* 默认为`id`
*/
idField: { default: "id", type: String },
/**
* 可选，字段映射
*/
mapFields: { type: Object },
/**
* 可选，最大高度
* 默认`350`
*/
maxHeight: { default: 350, type: Number },
/**
* 最大输入长度
*/
maxLength: { type: Number },
/**
* 可选，是否支持多选
* 默认`false`
*/
multiSelect: { type: Boolean, default: !1 },
/**
* 绑定值
*/
modelValue: {},
/**
* 占位符
*/
placeholder: { type: String, default: "请选择" },
/**
* 可选，下拉面板展示位置
* 默认为`auto`
*/
placement: {
type: String,
default: "auto"
/* auto */
},
/**
* 可选，是否只读
* 默认为`false`
*/
readonly: { default: !1, type: Boolean },
/**
* 远端数据源信息
*/
remote: { default: null, type: Object },
/**
* 可选，是否支持远端过滤
* 默认`false`
*/
remoteSearch: { default: !1, type: Boolean },
/**
* 可选，分隔符
* 默认`,`
*/
separator: { default: ",", type: String },
/**
* tabIndex
*/
tabIndex: { type: Number, default: -1 },
/**
* 可选，数据源显示字段
* 默认为`name`
*/
textField: { default: "name", type: String },
/**
* 可选，数据源的title
* 默认为`name`
*/
titleField: { default: "name", type: String },
/**
* 可选，数据源值字段
* 默认为`id`
*/
valueField: { default: "id", type: String },
/**
* 可选，启用多选下，下拉列表值在输入框中的展示方式
* 支持text | tag
* 因为ButtonEdit内部处理类型只有在批量的情况下才会有展示类型区分
*/
viewType: { default: "tag", type: String },
/**
* 值变化事件
*/
change: { type: Function, default: () => {
} },
/**
* 作为内嵌编辑器被创建后默认获得焦点
*/
focusOnCreated: { type: Boolean, default: !1 },
/**
* 作为内嵌编辑器被创建后默认选中文本
*/
selectOnCreated: { type: Boolean, default: !1 },
/**
* 此属性废弃
*/
autoHeight: { type: Boolean, default: !0 },
/**
* 打开前
*/
beforeOpen: { type: Function, default: null },
searchOption: {
type: [Boolean, Function],
default: !1
},
// 搜索启用高亮
enableHighlightSearch: { type: Boolean, default: !0 },
minPanelWidth: { type: Number, default: 160 },
popupOnClick: { type: Boolean, default: !0 }
};
Object.assign({}, be, {
readonly: {}
});
ae(be, pa, ia, ha);
const ga = {
dataSource: { type: Array, default: [] },
enableSearch: { type: Boolean, default: !1 },
idField: { type: String, default: "id" },
multiSelect: { type: Boolean, default: !1 },
selectedValues: { type: String, default: "" },
separator: { type: String, default: "," },
textField: { type: String, default: "name" },
titleField: { type: String, default: "name" },
width: { type: Number },
maxHeight: { type: Number },
valueField: { type: String, default: "id" },
/** 值变化事件 */
onSelectionChange: { type: Function, default: () => {
} },
searchOption: {
type: [Boolean, Function],
default: !1
},
// 搜索启用高亮
enableHighlightSearch: { type: Boolean, default: !0 }
}, ya = /* @__PURE__ */ X({
name: "FComboListContainer",
props: ga,
emits: ["selectionChange"],
setup(e, t) {
const a = o(), n = o(e.dataSource), l = o([]), s = o(e.separator), c = o(e.width), d = o(e.maxHeight), m = o(String(e.selectedValues).split(s.value)), r = O(() => e.multiSelect), v = O(() => ({
enableSelectRow: !0,
multiSelect: e.multiSelect,
multiSelectMode: "OnCheckAndClick",
showCheckbox: r.value,
showSelectAll: !1,
showSelection: !0
}));
z(e.dataSource, () => {
n.value = e.dataSource;
}), O(() => e.enableSearch ? "SearchBar" : "ContentHeader");
const i = O(() => {
const C = {};
return c.value !== void 0 && (C.width = `${c.value}px`), d.value !== void 0 && d.value > 0 && (C.maxHeight = `${d.value}px`), C;
});
function f(C) {
a.value.search(C);
}
function w(C) {
l.value = C.map((F) => Object.assign({}, F)), m.value = C.map((F) => F[e.idField]), t.emit("selectionChange", l.value);
}
function x(C) {
if (e.enableHighlightSearch)
return;
let F = [];
const {
searchOption: E
} = e;
typeof E == "function" ? F = n.value.filter((B) => E(C, B)) : F = n.value.filter((B) => B[e.valueField].indexOf(C) > -1 || B[e.textField].indexOf(C) > -1), a.value.updateDataSource(F);
}
z([() => e.selectedValues], ([C]) => {
e.multiSelect ? m.value = C.split(s.value) : m.value = [C];
});
function R(C) {
a.value.activeRowById(C);
}
return Q(() => {
var C, F;
if (!e.multiSelect) {
const E = (C = m.value) == null ? void 0 : C[0];
let B = E;
if (!ft(E)) {
const V = typeof E, D = typeof ((F = n.value[0]) == null ? void 0 : F[e.valueField || e.idField]);
D === "number" && V !== D && (B = Number(E)), D === "boolean" && V !== D && (B = E === "true" ? !0 : E === "false" ? !1 : E), R(B);
}
}
}), t.expose({
search: f,
activeRowById: R
}), () => u("div", {
class: "f-combo-list-container",
style: i.value
}, [u(vt, {
ref: a,
size: "small",
itemClass: "f-combo-list-item",
itemContentClass: "text-truncate",
header: "ContentHeader",
headerClass: "f-combo-list-search-box",
data: n.value,
idField: e.idField,
textField: e.textField,
titleField: e.titleField,
multiSelect: e.multiSelect,
selection: v.value,
enableHighlightSearch: e.enableHighlightSearch,
selectionValues: m.value,
onSelectionChange: w,
onAfterSearch: x
}, null)]);
}
});
function ba(e) {
const t = o(""), a = o(e.modelValue), n = o(e.data || []), l = o(e.editable);
function s(i) {
const f = e.multiSelect ? String(i).split(e.separator) : [String(i)], w = f.map((C) => [C, !0]), x = new Map(w);
return n.value.filter((C) => x.has(String(C[e.valueField]))).sort((C, F) => {
const E = f.indexOf(C[e.valueField]), B = f.indexOf(F[e.valueField]);
return E - B;
});
}
function c(i) {
const f = s(i).map((w) => w[e.textField]).join(e.separator);
t.value = l.value ? f || i : f;
}
function d(i) {
if (e.multiSelect) {
const f = i.split(e.separator).map((x) => [x, !0]), w = new Map(f);
return n.value.filter((x) => w.has(x[e.textField]));
}
return n.value.filter((f) => "" + f[e.textField] === i);
}
function m(i) {
const f = {};
return f[e.idField] = i, f[e.textField] = i, [f];
}
function r(i) {
let f = d(i);
const w = f && f.length > 0;
return l.value && !w && (f = m(i)), f;
}
function v() {
const { url: i, method: f = "GET", headers: w = {}, body: x = null } = e.remote, R = f.toLowerCase() === "get" ? { method: f, headers: w } : { method: f, headers: w, body: x };
let C = !1;
fetch(i, R).then((F) => {
var B, V;
if (F.status === 200)
return C = !!((V = (B = F.headers) == null ? void 0 : B.get("content-type")) != null && V.includes("application/json")), C ? F.text() : F.json();
throw new Error(F.statusText);
}).then((F) => {
n.value = C ? JSON.parse(F) : F;
}).catch((F) => {
console.error(F);
});
}
return e.remote && v(), z(() => e.data, () => {
n.value = e.data;
}), z([n], ([i]) => {
if (e.modelValue != null) {
const f = i.find((w) => w[e.valueField] === e.modelValue);
f && (t.value = f[e.textField]);
}
}), z(() => e.modelValue, (i) => {
a.value = i, c(i);
}), c(e.modelValue), { dataSource: n, displayText: t, editable: l, modelValue: a, getItemsByDisplayText: d, getItemsByValue: s, getSelectedItemsByDisplayText: r };
}
const wa = /* @__PURE__ */ X({
name: "FComboList",
props: be,
emits: ["clear", "update:modelValue", "change", "input"],
setup(e, t) {
const a = o(), n = o(), l = o(e.disabled || e.readonly), s = o(e.enableClear), c = o(e.enableSearch), d = o(e.readonly), {
dataSource: m,
displayText: r,
editable: v,
modelValue: i,
getSelectedItemsByDisplayText: f,
getItemsByDisplayText: w
} = ba(e), x = O(() => e.multiSelect), R = O(() => n.value ? n.value.elementRef.getBoundingClientRect().width : 0);
function C() {
!x.value && n.value && n.value.hidePopup();
}
function F(y) {
r.value = y.map((j) => j[e.textField]).join(e.separator);
let M = "";
y.length === 1 ? M = y[0][e.valueField] : M = y.map((j) => j[e.valueField]).join(e.separator), i.value !== M && (i.value = M, t.emit("update:modelValue", i.value), t.emit("change", y, i.value));
}
function E() {
const y = f(r.value);
F(y);
}
function B() {
d.value || r.value;
}
function V(y) {
var M;
i.value = "", (M = a.value) == null || M.activeRowById(""), t.emit("update:modelValue", ""), t.emit("change", [], ""), t.emit("clear");
}
function D(y) {
var M, j;
e.enableSearch ? ((M = a.value) == null || M.search(y), (j = a.value) == null || j.activeRowById(y)) : (i.value = y, r.value = y, t.emit("update:modelValue", i.value), t.emit("change", [y], y));
}
function L(y) {
if (e.multiSelect) {
const M = w(y), U = M.map((k) => k[e.idField || e.valueField]).join(e.separator);
i.value !== U && (i.value = U, t.emit("update:modelValue", i.value), t.emit("change", M, i.value));
}
}
function p() {
return r.value;
}
function h(y) {
D(y), t.emit("input", y);
}
function g() {
n.value.hidePopup();
}
return t.expose({
getDisplayText: p,
hidePopup: g
}), z([() => e.disabled, () => e.editable, () => e.enableClear, () => e.enableSearch, () => e.readonly], ([y, M, j, U, k]) => {
l.value = y, v.value = M, s.value = j, c.value = U, d.value = k;
}), () => u(mt, {
ref: n,
id: e.id,
disable: l.value,
readonly: d.value,
forcePlaceholder: e.forcePlaceholder,
editable: v.value,
buttonContent: e.dropDownIcon,
placeholder: e.placeholder,
enableClear: s.value,
maxLength: e.maxLength,
tabIndex: e.tabIndex,
enableTitle: e.enableTitle,
multiSelect: e.multiSelect,
inputType: e.multiSelect ? e.viewType : "text",
modelValue: r.value,
"onUpdate:modelValue": (y) => r.value = y,
focusOnCreated: e.focusOnCreated,
selectOnCreated: e.selectOnCreated,
onClear: V,
onClick: B,
onChange: L,
onBlur: E,
onInput: h,
beforeOpen: e.beforeOpen,
placement: e.placement,
popupMinWidth: e.minPanelWidth,
popupClass: "f-combo-list-wrapper",
popupOnClick: e.popupOnClick
}, {
default: () => [u(ya, {
ref: a,
idField: e.idField,
valueField: e.valueField,
textField: e.textField,
titleField: e.titleField,
dataSource: m.value,
selectedValues: i.value,
separator: e.separator,
multiSelect: e.multiSelect,
enableSearch: c.value,
maxHeight: e.maxHeight,
enableHighlightSearch: e.enableHighlightSearch,
width: e.fitEditor ? R.value : void 0,
onSelectionChange: (y) => {
F(y), C();
}
}, null)]
});
}
}), Ca = {
/** 默认屏幕分辨率对应的英文缩写 */
currentScreenResolution: { type: String, default: "" },
/** 传入的单个控件的响应式列宽值 */
field: { type: Object, default: {} },
/** 模式开关 */
switchInStandardMode: { type: Boolean, default: !1 },
/** 列数值变化事件 */
fieldChanged: { type: Function, default: () => {
} }
}, Sa = /* @__PURE__ */ new Map([
["appearance", ne]
]);
function xa(e, t, a) {
return t;
}
const Ma = "https://json-schema.org/draft/2020-12/schema", Ba = "https://farris-design.gitee.io/radio-button.schema.json", Ta = "radio-button", Fa = "A Farris Component", ka = "object", Ea = {
id: {
description: "The unique identifier for radio-button",
type: "string"
},
type: {
description: "The type string of radio-button",
type: "string",
default: "radio-button"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disable: {
type: "string",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !0
},
placeholder: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
require: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
visible: {
description: "",
type: "boolean",
default: !0
}
}, Ra = [
"id",
"type"
], Da = {
$schema: Ma,
$id: Ba,
title: Ta,
description: Fa,
type: ka,
properties: Ea,
required: Ra
}, Oa = "radio-button", $a = "A Farris Component", Aa = "object", ja = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, Ia = {
title: Oa,
description: $a,
type: Aa,
categories: ja
}, Ae = {
/**
* 单选组枚举数组
*/
enumData: { type: Array, default: [{ text: "1", active: !0 }] },
/**
* 后缀
*/
suffixValue: { type: String, default: "" },
/**
* 返回值
*/
onSelectedValueChanged: { type: Function, default: () => {
} }
};
ae(Ae, Da, Sa, xa, Ia);
const La = /* @__PURE__ */ X({
name: "FRadioButton",
props: Ae,
emits: ["selectedValueChanged"],
setup(e, t) {
const a = o(e.enumData);
function n(s, c) {
if (s.currentTarget.classList.value = "btn btn-secondary active", s.currentTarget.tagName.toLowerCase() === "label") {
const {
currentTarget: d
} = s, m = d.parentElement;
Array.from(m.querySelectorAll("label")).filter((v) => v !== d).forEach((v) => v.classList.remove("active"));
}
t.emit("selectedValueChanged", c);
}
function l(s) {
return `${s.text}${e.suffixValue}`;
}
return z(() => e.enumData, (s, c) => {
s !== c && (a.value = e.enumData);
}), () => u("div", {
class: "f-radio-button"
}, [u("div", {
class: ["farris-input-wrap"]
}, [a.value.map((s, c) => u(ce, null, [u("label", {
class: s.active ? "btn btn-secondary active" : "btn btn-secondary",
onClick: (d) => n(d, s)
}, [u("span", {
class: "f-radio-button-text"
}, [l(s)])])]))])]);
}
}), Va = /* @__PURE__ */ new Map([
["appearance", ne]
]);
function za(e, t, a) {
return t;
}
const Ha = "https://json-schema.org/draft/2020-12/schema", Pa = "https://farris-design.gitee.io/rate.schema.json", Na = "rate", Wa = "A Farris Component", qa = "object", Ua = {
id: {
description: "The unique identifier for rate",
type: "string"
},
type: {
description: "The type string of rate",
type: "string",
default: "rate"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disable: {
type: "string",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !0
},
placeholder: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
require: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
visible: {
description: "",
type: "boolean",
default: !0
}
}, Ga = [
"id",
"type"
], Xa = [
"id",
"appearance",
"binding"
], Ya = {
$schema: Ha,
$id: Pa,
title: Na,
description: Wa,
type: qa,
properties: Ua,
required: Ga,
ignore: Xa
}, _a = "rate", Ja = "A Farris Component", Qa = "object", Za = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, Ka = {
title: _a,
description: Ja,
type: Qa,
categories: Za
}, en = ["很不满意", "不满意", "一般", "满意", "非常满意"], je = {
/** 星星大小 */
size: { type: String, default: "large" },
/** 启用半颗星模式 */
enableHalf: { type: Boolean, default: !1 },
/** 启用再次点击后清除 */
enableClear: { type: Boolean, default: !1 },
/** 只读 */
disabled: { type: Boolean, default: !1 },
/** 分制 */
pointSystem: { type: Number, default: 5 },
/** 星星亮色 */
lightColor: { type: String, default: "" },
/** 星星暗色（底色） */
darkColor: { type: String, default: "" },
/** 图案样式 */
iconClass: { type: String, default: "f-icon-star" },
/** 星星个数 */
numOfStar: { type: Number, default: 5 },
/** 禁用单个星星的文字提示 */
toolTipDisabled: { type: Boolean, default: !0 },
/** 默认的满意度文案 */
toolTipContents: { type: Array, default: en },
/** 启用评分 */
enableScore: { type: Boolean, default: !0 },
/** 启用满意度 */
enableSatisfaction: { type: Boolean, default: !1 },
/**
* 绑定值
*/
value: { type: Number, default: 0 },
modelValue: { type: Number, default: 0 }
};
ae(je, Ya, Va, za, Ka);
const tn = /* @__PURE__ */ X({
name: "FRate",
props: je,
emits: ["selectedValue", "update:modelValue"],
setup(e, t) {
const a = o(e.size), n = o(e.enableHalf), l = o(e.enableClear), s = o(e.disabled), c = o(e.pointSystem), d = o(e.lightColor), m = o(e.darkColor), r = o(e.iconClass), v = o(e.numOfStar), i = o(e.toolTipDisabled), f = o(e.toolTipContents), w = o(e.enableScore), x = o(e.enableSatisfaction);
let R;
const C = o(0), F = o(0), E = o(0), B = o(e.modelValue);
let V = 1, D, L, p;
const h = 4;
Q(() => {
});
function g() {
const b = v.value;
p = [];
for (let A = 1; A <= b; A++)
p.push({
id: A
});
}
function y() {
let b;
n.value ? b = Math.ceil(B.value / V) : b = B.value, F.value = (R * B.value + Math.floor(B.value) * h) / V, D = f.value[b - 1];
}
function M() {
switch (a.value) {
case "small":
R = 14;
break;
case "middle":
R = 16;
break;
case "large":
R = 18;
break;
case "extraLarge":
R = 24;
break;
}
g(), v.value && (V = c.value / v.value), B.value && y();
}
M();
function j(b) {
return b.className.indexOf("f-icon") !== -1;
}
function U() {
return C.value === F.value && l.value && F.value !== 0 ? (F.value = 0, B.value = 0, L = null, C.value = 0, E.value = 0, t.emit("selectedValue", B.value), t.emit("update:modelValue", B.value), !0) : !1;
}
function k(b, A, I) {
if (b.movementX || b.movementY) {
if (s.value)
return;
x.value && (D = f.value[A - 1]), b.offsetX < R / 2 && n.value === !0 ? (C.value = R * A - R / 2 + h * (A - 1), E.value = V * A - V / 2) : (C.value = R * A + h * (A - 1), E.value = V * A);
}
if (I === !0) {
if (U())
return;
B.value = E.value, F.value = C.value, L = D, t.emit("update:modelValue", B.value), t.emit("selectedValue", B.value);
}
}
function $(b, A) {
var I;
if (j(b.target) && b.target) {
const W = parseInt((I = b.target) == null ? void 0 : I.id);
k(b, W, A);
}
}
const P = O(() => E.value ? E.value + "分" : B.value + "分"), _ = O(() => ({
width: (C.value || F.value) + "px"
}));
function T() {
C.value = 0;
}
return z(() => e.modelValue, (b) => {
B.value = b, y();
}), () => u("div", {
class: "farris-star-rating",
onMouseover: oe((b) => $(b, !1), ["prevent"]),
onMousemove: oe((b) => $(b, !1), ["prevent"]),
onMouseleave: oe((b) => T(), ["prevent"]),
onClick: oe((b) => $(b, !0), ["prevent"])
}, [u("div", {
class: "star-light-area",
style: _.value
}, [p.map((b) => u("span", {
class: ["f-icon default-light-color ", r.value, {
"f-star-sm": a.value === "small"
}, {
"f-star-md": a.value === "middle"
}, {
"f-star-lg": a.value === "large"
}, {
"f-star-exlarge": a.value === "extraLarge"
}, {
disabled: i.value
}],
id: b.id,
style: {
color: d.value
}
}, null))]), u("div", {
class: ["star-dark-area", {
small: a.value === "small"
}, {
middle: a.value === "middle"
}, {
large: a.value === "large"
}]
}, [p.map((b) => u("span", {
class: ["f-icon default-dark-color", r.value, {
"f-star-sm": a.value === "small"
}, {
"f-star-md": a.value === "middle"
}, {
"f-star-lg": a.value === "large"
}, {
"f-star-exlarge": a.value === "extraLarge"
}],
id: b.id,
style: {
color: m.value
}
}, null))]), u("div", {
class: ["f-utils-fill", {
"font-small": a.value === "small"
}, {
"font-middle": a.value === "middle"
}, {
"font-large": a.value === "large"
}, {
"font-exlarge": a.value === "extraLarge"
}]
}, [w.value && u("span", null, [G(" "), P.value, G(" ")]), x.value && (L || D) && u("span", null, [G(" "), D || L])])]);
}
}), an = /* @__PURE__ */ X({
name: "FColumnWidthEditor",
props: Ca,
emits: ["fieldChanged"],
setup(e, t) {
const a = {
SM: ["1"],
MD: ["1", "2"],
LG: ["1", "2", "3", "4"],
EL: ["1", "2", "3", "4", "5", "6"]
}, n = o(e.currentScreenResolution), l = o(e.field), s = o(e.switchInStandardMode), c = o(), d = o(""), m = o(), r = o("customize"), v = o(), i = Be("ResponseLayoutEditorDraggableComposition"), {
dragstart: f,
dragenter: w,
dragover: x,
dragend: R
} = i;
function C() {
c.value = a == null ? void 0 : a[n.value], s.value ? (d.value = `displayWidthIn${n.value}`, r.value = `${l.value[d.value]}`) : (d.value = `columnIn${n.value}`, v.value = l.value[d.value]);
}
function F(g) {
if (s.value === !0) {
const y = Number(g == null ? void 0 : g.text);
m.value = y;
const M = l.value[`columnIn${n.value}`] / l.value[`displayWidthIn${n.value}`];
l.value[`columnIn${n.value}`] = y * M, l.value[`displayWidthIn${n.value}`] = Number(y), t.emit("fieldChanged", l.value);
}
}
function E(g) {
v.value = g;
const y = l.value[`columnIn${n.value}`] / l.value[`displayWidthIn${n.value}`];
l.value[`columnIn${n.value}`] = v.value, l.value[`displayWidthIn${n.value}`] = v.value / y, t.emit("fieldChanged", l.value);
}
function B() {
return u(tn, {
enableHalf: !0,
size: "extraLarge",
pointSystem: 12,
numOfStar: 6,
lightColor: "#5D89FE",
darkColor: "#e7e9f3",
iconClass: "f-icon-column-rectangle",
modelValue: v.value,
"on