@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,904 lines • 109 kB
JavaScript
var tt = Object.defineProperty;
var at = (e, t, a) => t in e ? tt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
var N = (e, t, a) => at(e, typeof t != "symbol" ? t + "" : t, a);
import { defineComponent as G, ref as o, watch as V, computed as E, onMounted as J, createVNode as i, nextTick as he, toRefs as nt, onBeforeMount as se, createTextVNode as U, Fragment as re, withModifiers as oe, inject as Me, provide as lt, onUnmounted as Be, Teleport as ot, Transition as it, shallowRef as ut, createApp as st, render as me, h as rt, cloneVNode as ct, mergeProps as Te, reactive as Q } from "vue";
import { isPlainObject as Se, cloneDeep as Y } from "lodash-es";
import dt from "../list-view/index.esm.js";
import ft from "../button-edit/index.esm.js";
const vt = {
/** 接受传入的原始数据的defaultState */
initialState: { type: Object, default: {} }
}, mt = {
/** 记录默认模式及分组状态 */
defaultStates: { type: Object, default: { mode: "" } },
/** 当前开关模式 */
onSwitchInStandardModeChanged: { type: Function, default: () => {
} },
/** 用户设置的屏幕分辨率变化-例:MD*/
onCurrentScreenResolutionChanged: { type: Function, default: () => {
} },
/** 用户设置的屏幕分辨率缩写变化-例:中等屏幕 */
onScreenNameChanged: { type: Function, default: () => {
} }
}, pt = "https://json-schema.org/draft/2020-12/schema", ht = "https://farris-design.gitee.io/capsule.schema.json", gt = "capsule", yt = "A Farris Component", bt = "object", wt = {
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
}
}, Ct = [
"id",
"type"
], St = {
$schema: pt,
$id: ht,
title: gt,
description: yt,
type: bt,
properties: wt,
required: Ct
}, Fe = {}, Re = {};
function ge(e) {
const { properties: t, title: a, ignore: n } = e, l = n && Array.isArray(n), s = Object.keys(t).reduce((c, f) => ((!l || !n.find((h) => h === f)) && (c[f] = t[f].type === "object" && t[f].properties ? ge(t[f]) : Y(t[f].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 xt(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 ? ge(t[c]) : Y(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 ke(e, t = {}, a) {
const n = Fe[e];
if (n) {
let l = xt(n);
const s = Re[e];
return l = s ? s({ getSchemaByType: ke }, l, t, a) : l, l;
}
return null;
}
function Mt(e, t) {
const a = ge(t);
return Object.keys(a).reduce((n, l) => (Object.prototype.hasOwnProperty.call(e, l) && (n[l] && Se(n[l]) && Se(e[l] || !e[l]) ? Object.assign(n[l], e[l] || {}) : n[l] = e[l]), n), a), a;
}
function Ee(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 Bt(e, t, a = /* @__PURE__ */ new Map()) {
const n = Mt(e, t);
return Ee(n, a);
}
function Tt(e = {}) {
function t(r, p, u, d) {
if (typeof u == "number")
return d[r].length === u;
if (typeof u == "object") {
const y = Object.keys(u)[0], w = u[y];
if (y === "not")
return Number(d[r].length) !== Number(w);
if (y === "moreThan")
return Number(d[r].length) >= Number(w);
if (y === "lessThan")
return Number(d[r].length) <= Number(w);
}
return !1;
}
function a(r, p, u, d) {
return d[r] && d[r].propertyValue && String(d[r].propertyValue.value) === String(u);
}
const n = /* @__PURE__ */ new Map([
["length", t],
["getProperty", a]
]);
Object.keys(e).reduce((r, p) => (r.set(p, e[p]), r), n);
function l(r, p) {
const u = r;
return typeof p == "number" ? [{ target: u, operator: "length", param: null, value: Number(p) }] : typeof p == "boolean" ? [{ target: u, operator: "getProperty", param: r, value: !!p }] : typeof p == "object" ? Object.keys(p).map((d) => {
if (d === "length")
return { target: u, operator: "length", param: null, value: p[d] };
const y = d, w = p[d];
return { target: u, operator: "getProperty", param: y, value: w };
}) : [];
}
function s(r) {
return Object.keys(r).reduce((u, d) => {
const y = l(d, r[d]);
return u.push(...y), u;
}, []);
}
function c(r, p) {
if (n.has(r.operator)) {
const u = n.get(r.operator);
return u && u(r.target, r.param, r.value, p) || !1;
}
return !1;
}
function f(r, p) {
return s(r).reduce((y, w) => y && c(w, p), !0);
}
function h(r, p) {
const u = Object.keys(r), d = u.includes("allOf"), y = u.includes("anyOf"), w = d || y, M = (w ? r[w ? d ? "allOf" : "anyOf" : "allOf"] : [r]).map((R) => f(R, p));
return d ? !M.includes(!1) : M.includes(!0);
}
return { parseValueSchema: h };
}
const Ft = {}, Rt = {};
Tt();
function K(e, t, a = /* @__PURE__ */ new Map(), n = (c, f, h, r) => f, l = {}, s = (c) => c) {
return Fe[t.title] = t, Re[t.title] = n, Ft[t.title] = l, Rt[t.title] = s, (c = {}, f = !0) => {
if (!f)
return Ee(c, a);
const h = Bt(c, t, a), r = Object.keys(e).reduce((p, u) => (p[u] = e[u].default, p), {});
return Object.assign(r, h);
};
}
function ee(e, t) {
return { customClass: t.class, customStyle: t.style };
}
const kt = /* @__PURE__ */ new Map([
["appearance", ee]
]);
function Et(e, t, a) {
return t;
}
const Dt = "capsule", $t = "A Farris Component", Ot = "object", At = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, jt = {
title: Dt,
description: $t,
type: Ot,
categories: At
}, De = {
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" }
}, It = {
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 }
};
K(De, St, kt, Et, jt);
const Lt = /* @__PURE__ */ G({
name: "FCapsuleItem",
props: It,
emits: ["mounted", "active"],
setup(e, t) {
const a = o(), n = o(e.isActive);
V(() => e.isActive, (c) => {
n.value = c;
});
const l = E(() => ({
"f-capsule-item": !0,
"f-capsule-active-item": n.value,
"f-capsule-disabled": e.disabled
}));
J(() => {
t.emit("mounted", a, e.value);
});
function s(c) {
e.disabled || t.emit("active", c, {
name: e.name,
value: e.value
});
}
return () => i("div", {
ref: a,
class: l.value,
onClick: (c) => s(c)
}, [e.icon && i("i", {
class: e.icon
}, null), e.name]);
}
}), Vt = /* @__PURE__ */ G({
name: "FCapsule",
props: De,
emits: ["change", "update:modelValue"],
setup(e, t) {
const a = o(e.items), n = o(), l = 2, s = o(e.modelValue), c = o("none"), f = o(e.type), h = E(() => {
const g = {
"f-capsule-container": !0
};
return f.value && (g[f.value] = !0), g;
}), r = E(() => ({})), p = E(() => ({
"f-capsule": !0
})), u = o(l), d = o(0), y = o(0), w = E(() => ({
left: `${u.value}px`,
width: `${d.value}px`,
transition: c.value
})), k = E(() => ({
width: `${y.value}px`
})), b = /* @__PURE__ */ new Map();
function M(g) {
var m;
if (b.has(g.value)) {
const S = (m = b.get(g.value)) == null ? void 0 : m.value;
if (S) {
const j = S.getBoundingClientRect(), P = n.value.getBoundingClientRect();
u.value = j.left - P.left + l + n.value.scrollLeft, d.value = j.width - 2 * l;
}
}
}
function O(g, m) {
const S = g.value;
s.value = S, t.emit("update:modelValue", S), M(g), m && t.emit("change", S);
}
function R(g) {
const m = a.value.findIndex((S) => S.value === g);
m > -1 && O(a.value[m], !1);
}
V(() => e.modelValue, (g) => {
s.value = g, R(s.value);
}), J(async () => {
R(s.value), await he(), c.value = "0.1s ease-out all", y.value = Array.from(b.values()).reduce((g, m) => (g += m.value.clientWidth, g), 0);
});
function D(g, m) {
O(m, !0);
}
function I(g, m) {
b.set(m, g);
}
function L(g) {
Array.from(b.keys()).forEach((m) => {
g.find((j) => j.value === m) || b.delete(m);
});
}
function v(g, m) {
return i(Lt, {
name: g.name,
value: g.value,
isActive: g.value === s.value,
index: m,
disabled: g.disabled,
key: g.value,
onMounted: I,
onActive: D
}, null);
}
return V(() => e.items, async (g) => {
const m = g.filter((S) => S.show);
L(m), a.value = m, await he(), R(s.value), y.value = Array.from(b.values()).reduce((S, j) => (S += j.value.clientWidth, S), 0);
}), () => i("span", {
ref: n,
class: h.value,
style: r.value
}, [i("span", {
class: "f-capsule-pane"
}, [a.value.map((g, m) => v(g, m))]), i("small", {
class: p.value,
style: w.value
}, null), i("div", {
class: "f-capsule-board",
style: k.value
}, null)]);
}
}), zt = /* @__PURE__ */ new Map([
["appearance", ee]
]), Ht = "https://json-schema.org/draft/2020-12/schema", Pt = "https://farris-design.gitee.io/switch.schema.json", Nt = "switch", Wt = "A Farris Component", qt = "object", Ut = {
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
}
}, Gt = [
"type"
], Xt = [
"id",
"appearance",
"binding"
], Yt = {
$schema: Ht,
$id: Pt,
title: Nt,
description: Wt,
type: qt,
properties: Ut,
required: Gt,
ignore: Xt
};
function _t(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: () => {
} }
};
K($e, Yt, zt, _t);
const Jt = /* @__PURE__ */ G({
name: "FSwitch",
props: $e,
emits: ["update:modelValue", "modelValueChanged"],
setup(e, t) {
const {
disabled: a,
size: n,
onLabel: l,
offLabel: s,
onBackground: c,
offBackground: f,
onColor: h,
offColor: r,
readonly: p
} = nt(e), u = o(e.modelValue), d = E(() => ({
switch: !0,
"f-cmp-switch": !0,
checked: u.value,
disabled: p.value || a.value,
"switch-large": n.value === "large",
"switch-medium": n.value === "medium",
"switch-small": n.value === "small"
})), y = E(() => u.value ? {
outline: "none",
background: c.value
} : {
outline: "none",
backgroundColor: f.value
}), w = E(() => u.value ? {
background: h.value
} : {
backgroundColor: r.value
}), k = E(() => (l == null ? void 0 : l.value) || (s == null ? void 0 : s.value));
function b() {
p.value || a.value || (u.value = !u.value, t.emit("update:modelValue", u.value));
}
return V(u, (M, O) => {
M !== O && t.emit("modelValueChanged", M);
}), V(() => e.modelValue, (M, O) => {
M !== O && (u.value = M);
}), () => i("span", {
tabindex: "0",
role: "button",
class: d.value,
style: y.value,
onClick: b
}, [k.value && i("span", {
class: "switch-pane"
}, [i("span", {
class: "switch-label-checked"
}, [l == null ? void 0 : l.value]), i("span", {
class: "switch-label-unchecked"
}, [s == null ? void 0 : s.value])]), i("small", {
style: w.value
}, [t.slots.default && t.slots.default()])]);
}
}), Qt = /* @__PURE__ */ G({
name: "FScreenResolutionSelector",
props: mt,
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 f(p) {
a.value.forEach((u) => {
u.active = u.code === p, u.active && (l.value = u.code, s.value = u.name, t.emit("screenNameChanged", s.value), t.emit("currentScreenResolutionChanged", l.value));
});
}
function h() {
t.emit("switchInStandardModeChanged", c.value);
}
V(c, () => {
}), se(() => {
n.value.model === "standard" ? c.value = !0 : (c.value = !1, h());
});
function r() {
return i(Vt, {
class: "f-layout-editor-screen-resolution-selector-frame",
items: a.value,
modelValue: l.value,
"onUpdate:modelValue": (p) => l.value = p,
onChange: f
}, null);
}
return () => i("div", {
class: "f-layout-editor-screen-resolution-selector"
}, [i("div", {
class: "f-layout-editor-screen-resolution-selector-header"
}, [i("div", {
class: "f-layout-editor-screen-resolution-selector-form"
}, [U("表单布局配置")])]), r(), i("div", {
class: "f-layout-editor-screen-resolution-selector-switch"
}, [i(Jt, {
class: "f-layout-editor-show-switch",
modelValue: c.value,
"onUpdate:modelValue": (p) => c.value = p,
onModelValueChanged: h
}, null), c.value ? i("div", {
class: "f-layout-editor-show-switch-label"
}, [U("标准模式")]) : i("div", {
class: "f-layout-editor-show-switch-label"
}, [U("自定义模式")])])]);
}
}), Zt = {
/** 默认屏幕分辨率对应的英文缩写 */
currentScreenResolution: { type: String, default: "" },
/** 模式开关 */
switchInStandardMode: { type: Boolean, default: !1 },
/** 记录当前展示的区域 */
currentArea: { type: Object, default: [] },
/** 接受组件列表区传入的二维数组 */
twoDimensionalArray: { type: Array, default: [] }
}, Kt = {
/** 单个组件的预览状态 */
item: { type: Object, default: {} },
/** 默认屏幕分辨率对应的英文缩写 */
currentScreenResolution: { type: String, default: "" },
/** 接受switch状态，若为自定义模式，则需要改变Col-num的num来源；*/
switchInStandardMode: { type: Boolean, default: !1 }
}, ea = /* @__PURE__ */ G({
name: "FColumnWidthView",
props: Kt,
emits: [],
setup(e, t) {
const a = o(e.item), n = o(e.currentScreenResolution), l = E(() => `col-${a.value[`columnIn${n.value}`]}`);
return V([() => e.item, () => e.currentScreenResolution], ([s, c], [f, h]) => {
s !== f && (a.value = s), c !== h && (n.value = c);
}), () => i("div", {
class: l.value
}, [i("div", {
class: "f-layout-editor-column-width-view",
title: a.value.label
}, [i("div", {
class: "f-layout-editor-column-width-view-label"
}, [a.value.label])])]);
}
}), ta = /* @__PURE__ */ G({
name: "FPreview",
props: Zt,
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([]);
V([() => e.currentArea, () => e.switchInStandardMode, () => e.currentScreenResolution], ([u, d, y], [w, k, b]) => {
u !== w && (l.value = u), d !== k && (n.value = d), y !== b && (a.value = y);
});
function f(u, d) {
const y = [];
let w = [];
return u.forEach((k) => {
d !== k.componentRow && (d += 1, y.push(w), w = []), w.push(k);
}), y.push(w), y;
}
function h() {
const u = [];
let d = 1;
return c.value.forEach((y) => {
const w = f(y, d);
d += w.length, u.push(w);
}), u;
}
function r() {
c.value = Y(s.value), c.value = h();
}
V(() => e.twoDimensionalArray, () => {
s.value = e.twoDimensionalArray, r();
}), J(() => {
r();
});
function p() {
if (n.value)
return "";
const u = Array.from({
length: 12
}, () => i("div", {
class: "col-1"
}, [i("div", {
class: "f-layout-editor-preview-customize-single-background"
}, [U(" ")])]));
return i("div", {
class: "f-layout-editor-preview-customize-whole-background"
}, [u]);
}
return () => i("div", {
class: "f-layout-editor-preview f-utils-fill-flex-column"
}, [i("div", {
class: "f-layout-editor-preview-header"
}, [U("预览区")]), p(), i("div", {
class: "f-layout-editor-preview-view f-utils-overflow-xhya"
}, [i("div", {
class: "f-layout-editor-preview-row-group"
}, [c.value.map((u) => {
var d, y;
return ((d = u[0][0]) == null ? void 0 : d.group.toString()) === ((y = l.value[0]) == null ? void 0 : y.id) && u.map((w) => i("div", {
class: "f-layout-editor-row"
}, [w.map((k) => i(ea, {
item: k,
"onUpdate:item": (b) => k = b,
currentScreenResolution: a.value,
switchInStandardMode: n.value
}, null))]));
})])])]);
}
}), aa = {
/** 用户切换屏幕分辨率-缩写-例: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 na(e, t) {
const a = o(-1), n = o(!1);
function l(u) {
if (u.target.offsetParent) {
const d = u.target.offsetParent, y = d.offsetWidth - u.target.offsetWidth / 2 - 4, w = d.offsetHeight / 2;
u.dataTransfer && u.dataTransfer.setDragImage(d, y, w);
}
}
function s(u) {
if (u) {
const d = e.value.findIndex((y) => y.label === u.label);
setTimeout(() => {
a.value = d, n.value = !0, u.moving = !0;
});
}
}
function c(u, d) {
u.stopPropagation(), l(u), s(d);
}
function f(u) {
const d = e.value.findIndex((y) => y.label === u.label);
if (a.value !== d) {
const y = e.value[a.value], w = e.value;
w.splice(a.value, 1), w.splice(d, 0, y), a.value = d, t && t();
}
}
function h(u, d) {
u.preventDefault(), f(d);
}
function r(u) {
u.preventDefault(), u.dataTransfer && (u.dataTransfer.dropEffect = "move");
}
function p(u, d) {
d && (d.moving = !1), n.value = !1;
}
return {
dragstart: c,
dragenter: h,
dragover: r,
dragend: p,
isDragging: n
};
}
const la = /* @__PURE__ */ new Map([
["appearance", ee]
]), oa = "https://json-schema.org/draft/2020-12/schema", ia = "https://farris-design.gitee.io/combo-list.schema.json", ua = "combo-list", sa = "A Farris Input Component", ra = "object", ca = {
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
},
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
}
}, da = [
"type"
], fa = [
"id",
"appearance",
"binding",
"visible"
], va = {
$schema: oa,
$id: ia,
title: ua,
description: sa,
type: ra,
properties: ca,
required: da,
ignore: fa
};
function ma(e, t, a) {
return t;
}
const ye = {
/**
* 组件标识
*/
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: !0 },
/**
* 可选，鼠标悬停时是否显示控件值
* 默认显示
*/
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({}, ye, {
readonly: {}
});
K(ye, va, la, ma);
const pa = {
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 }
}, ha = /* @__PURE__ */ G({
name: "FComboListContainer",
props: pa,
emits: ["selectionChange"],
setup(e, t) {
const a = o(), n = o(e.dataSource), l = o([]), s = o(e.separator), c = o(e.width), f = o(e.maxHeight), h = o(String(e.selectedValues).split(s.value)), r = E(() => e.multiSelect), p = E(() => ({
enableSelectRow: !0,
multiSelect: e.multiSelect,
multiSelectMode: "OnCheckAndClick",
showCheckbox: r.value,
showSelectAll: !1,
showSelection: !0
}));
V(e.dataSource, () => {
n.value = e.dataSource;
}), E(() => e.enableSearch ? "SearchBar" : "ContentHeader");
const u = E(() => {
const b = {};
return c.value !== void 0 && (b.width = `${c.value}px`), f.value !== void 0 && f.value > 0 && (b.maxHeight = `${f.value}px`), b;
});
function d(b) {
a.value.search(b);
}
function y(b) {
l.value = b.map((M) => Object.assign({}, M)), h.value = b.map((M) => M[e.idField]), t.emit("selectionChange", l.value);
}
function w(b) {
if (e.enableHighlightSearch)
return;
let M = [];
const {
searchOption: O
} = e;
typeof O == "function" ? M = n.value.filter((R) => O(b, R)) : M = n.value.filter((R) => R[e.valueField].indexOf(b) > -1 || R[e.textField].indexOf(b) > -1), a.value.updateDataSource(M);
}
V([() => e.selectedValues], ([b]) => {
h.value = b.split(s.value);
});
function k(b) {
a.value.activeRowById(b);
}
return J(() => {
e.multiSelect || k(h.value[0]);
}), t.expose({
search: d,
activeRowById: k
}), () => i("div", {
class: "f-combo-list-container",
style: u.value
}, [i(dt, {
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: p.value,
enableHighlightSearch: e.enableHighlightSearch,
selectionValues: h.value,
onSelectionChange: y,
onAfterSearch: w
}, null)]);
}
});
function ga(e) {
const t = o(""), a = o(e.modelValue), n = o(e.data || []), l = o(e.editable);
function s(u) {
const d = e.multiSelect ? String(u).split(e.separator) : [String(u)], y = d.map((b) => [b, !0]), w = new Map(y);
return n.value.filter((b) => w.has(String(b[e.valueField]))).sort((b, M) => {
const O = d.indexOf(b[e.valueField]), R = d.indexOf(M[e.valueField]);
return O - R;
});
}
function c(u) {
const d = s(u).map((y) => y[e.textField]).join(e.separator);
t.value = l.value ? d || u : d;
}
function f(u) {
const d = u.split(e.separator).map((w) => [w, !0]), y = new Map(d);
return n.value.filter((w) => y.has(w[e.textField]));
}
function h(u) {
const d = {};
return d[e.idField] = u, d[e.textField] = u, [d];
}
function r(u) {
let d = f(u);
const y = d && d.length > 0;
return l.value && !y && (d = h(u)), d;
}
function p() {
const { url: u, method: d = "GET", headers: y = {}, body: w = null } = e.remote, k = d.toLowerCase() === "get" ? { method: d, headers: y } : { method: d, headers: y, body: w };
let b = !1;
fetch(u, k).then((M) => {
var R, D;
if (M.status === 200)
return b = !!((D = (R = M.headers) == null ? void 0 : R.get("content-type")) != null && D.includes("application/json")), b ? M.text() : M.json();
throw new Error(M.statusText);
}).then((M) => {
n.value = b ? JSON.parse(M) : M;
}).catch((M) => {
console.error(M);
});
}
return e.remote && p(), V(() => e.data, () => {
n.value = e.data;
}), V([n], ([u]) => {
if (e.modelValue != null) {
const d = u.find((y) => y[e.valueField] === e.modelValue);
d && (t.value = d[e.textField]);
}
}), V(() => e.modelValue, (u) => {
a.value = u, c(u);
}), c(e.modelValue), { dataSource: n, displayText: t, editable: l, modelValue: a, getItemsByDisplayText: f, getItemsByValue: s, getSelectedItemsByDisplayText: r };
}
const ya = /* @__PURE__ */ G({
name: "FComboList",
props: ye,
emits: ["clear", "update:modelValue", "change", "input"],
setup(e, t) {
const a = o(), n = o(), l = o(e.disabled), s = o(e.enableClear), c = o(e.enableSearch), f = o(e.readonly);
let h = "";
const {
dataSource: r,
displayText: p,
editable: u,
modelValue: d,
getSelectedItemsByDisplayText: y
} = ga(e), w = E(() => e.multiSelect), k = E(() => n.value ? n.value.elementRef.getBoundingClientRect().width : 0);
function b() {
!w.value && n.value && n.value.hidePopup();
}
function M(m) {
p.value = m.map((j) => j[e.textField]).join(e.separator);
let S = "";
m.length === 1 ? S = m[0][e.valueField] : S = m.map((j) => j[e.valueField]).join(e.separator), d.value !== S && (d.value = S, t.emit("update:modelValue", d.value), t.emit("change", m, d.value));
}
function O() {
const m = y(h);
M(m);
}
function R() {
f.value || (h = p.value);
}
function D(m) {
d.value = "", a.value.activeRowById(""), t.emit("update:modelValue", ""), t.emit("clear");
}
function I(m) {
e.enableSearch ? (a.value.search(m), a.value.activeRowById(m)) : (d.value = m, p.value = m, t.emit("update:modelValue", d.value), t.emit("change", [m], m));
}
function L() {
return p.value;
}
function v(m) {
I(m), t.emit("input", m);
}
function g() {
n.value.hidePopup();
}
return t.expose({
getDisplayText: L,
hidePopup: g
}), V([() => e.disabled, () => e.editable, () => e.enableClear, () => e.enableSearch, () => e.readonly], ([m, S, j, P, X]) => {
l.value = m, u.value = S, s.value = j, c.value = P, f.value = X;
}), () => i(ft, {
ref: n,
id: e.id,
disable: l.value,
readonly: f.value,
forcePlaceholder: e.forcePlaceholder,
editable: u.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: p.value,
"onUpdate:modelValue": (m) => p.value = m,
focusOnCreated: e.focusOnCreated,
selectOnCreated: e.selectOnCreated,
onClear: D,
onClick: R,
onBlur: O,
onInput: v,
beforeOpen: e.beforeOpen,
placement: e.placement,
popupMinWidth: e.minPanelWidth,
popupClass: "f-combo-list-wrapper",
popupOnClick: e.popupOnClick
}, {
default: () => [i(ha, {
ref: a,
idField: e.idField,
valueField: e.valueField,
textField: e.textField,
titleField: e.titleField,
dataSource: r.value,
selectedValues: d.value,
multiSelect: e.multiSelect,
enableSearch: c.value,
maxHeight: e.maxHeight,
enableHighlightSearch: e.enableHighlightSearch,
width: e.fitEditor ? k.value : void 0,
onSelectionChange: (m) => {
M(m), b();
}
}, null)]
});
}
}), ba = {
/** 默认屏幕分辨率对应的英文缩写 */
currentScreenResolution: { type: String, default: "" },
/** 传入的单个控件的响应式列宽值 */
field: { type: Object, default: {} },
/** 模式开关 */
switchInStandardMode: { type: Boolean, default: !1 },
/** 列数值变化事件 */
fieldChanged: { type: Function, default: () => {
} }
}, wa = /* @__PURE__ */ new Map([
["appearance", ee]
]);
function Ca(e, t, a) {
return t;
}
const Sa = "https://json-schema.org/draft/2020-12/schema", xa = "https://farris-design.gitee.io/radio-button.schema.json", Ma = "radio-button", Ba = "A Farris Component", Ta = "object", Fa = {
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"
], ka = {
$schema: Sa,
$id: xa,
title: Ma,
description: Ba,
type: Ta,
properties: Fa,
required: Ra
}, Ea = "radio-button", Da = "A Farris Component", $a = "object", Oa = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, Aa = {
title: Ea,
description: Da,
type: $a,
categories: Oa
}, Oe = {
/**
* 单选组枚举数组
*/
enumData: { type: Array, default: [{ text: "1", active: !0 }] },
/**
* 后缀
*/
suffixValue: { type: String, default: "" },
/**
* 返回值
*/
onSelectedValueChanged: { type: Function, default: () => {
} }
};
K(Oe, ka, wa, Ca, Aa);
const ja = /* @__PURE__ */ G({
name: "FRadioButton",
props: Oe,
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: f
} = s, h = f.parentElement;
Array.from(h.querySelectorAll("label")).filter((p) => p !== f).forEach((p) => p.classList.remove("active"));
}
t.emit("selectedValueChanged", c);
}
function l(s) {
return `${s.text}${e.suffixValue}`;
}
return V(() => e.enumData, (s, c) => {
s !== c && (a.value = e.enumData);
}), () => i("div", {
class: "f-radio-button"
}, [i("div", {
class: ["farris-input-wrap"]
}, [a.value.map((s, c) => i(re, null, [i("label", {
class: s.active ? "btn btn-secondary active" : "btn btn-secondary",
onClick: (f) => n(f, s)
}, [i("span", {
class: "f-radio-button-text"
}, [l(s)])])]))])]);
}
}), Ia = /* @__PURE__ */ new Map([
["appearance", ee]
]);
function La(e, t, a) {
return t;
}
const Va = "https://json-schema.org/draft/2020-12/schema", za = "https://farris-design.gitee.io/rate.schema.json", Ha = "rate", Pa = "A Farris Component", Na = "object", Wa = {
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
}
}, qa = [
"id",
"type"
], Ua = [
"id",
"appearance",
"binding"
], Ga = {
$schema: Va,
$id: za,
title: Ha,
description: Pa,
type: Na,
properties: Wa,
required: qa,
ignore: Ua
}, Xa = "rate", Ya = "A Farris Component", _a = "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: []
}
}
}
}
}, Qa = {
title: Xa,
description: Ya,
type: _a,
categories: Ja
}, Za = ["很不满意", "不满意", "一般", "满意", "非常满意"], Ae = {
/** 星星大小 */
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: Za },
/** 启用评分 */
enableScore: { type: Boolean, default: !0 },
/** 启用满意度 */
enableSatisfaction: { type: Boolean, default: !1 },
/**
* 绑定值
*/
value: { type: Number, default: 0 },
modelValue: { type: Number, default: 0 }
};
K(Ae, Ga, Ia, La, Qa);
const Ka = /* @__PURE__ */ G({
name: "FRate",
props: Ae,
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), f = o(e.lightColor), h = o(e.darkColor), r = o(e.iconClass), p = o(e.numOfStar), u = o(e.toolTipDisabled), d = o(e.toolTipContents), y = o(e.enableScore), w = o(e.enableSatisfaction);
let k;
const b = o(0), M = o(0), O = o(0), R = o(e.modelValue);
let D = 1, I, L, v;
const g = 4;
J(() => {
});
function m() {
const T = p.value;
v = [];
for (let A = 1; A <= T; A++)
v.push({
id: A
});
}
function S() {
let T;
n.value ? T = Math.ceil(R.value / D) : T = R.value, M.value = (k * R.value + Math.floor(R.value) * g) / D, I = d.value[T - 1];
}
function j() {
switch (a.value) {
case "small":
k = 14;
break;
case "middle":
k = 16;
break;
case "large":
k = 18;
break;
case "extraLarge":
k = 24;
break;
}
m(), p.value && (D = c.value / p.value), R.value && S();
}
j();
function P(T) {
return T.className.indexOf("f-icon") !== -1;
}
function X() {
return b.value === M.value && l.value && M.value !== 0 ? (M.value = 0, R.value = 0, L = null, b.value = 0, O.value = 0, t.emit("selectedValue", R.value), t.emit("update:modelValue", R.value), !0) : !1;
}
function F(T, A, W) {
if (T.movementX || T.movementY) {
if (s.value)
return;
w.value && (I = d.value[A - 1]), T.offsetX < k / 2 && n.value === !0 ? (b.value = k * A - k / 2 + g * (A - 1), O.value = D * A - D / 2) : (b.value = k * A + g * (A - 1), O.value = D * A);
}
if (W === !0) {
if (X())
return;
R.value = O.value, M.value = b.value, L = I, t.emit("update:modelValue", R.value), t.emit("selectedValue", R.value);
}
}
function $(T, A) {
var W;
if (P(T.target) && T.target) {
const ne = parseInt((W = T.target) == null ? void 0 : W.id);
F(T, ne, A);
}
}
const H = E(() => O.value ? O.value + "分" : R.value + "分"), x = E(() => ({
width: (b.value || M.value) + "px"
}));
function B() {
b.value = 0;
}
return V(() => e.modelValue, (T) => {
R.value = T, S();
}), () => i("div", {
class: "farris-star-rating",
onMouseover: oe((T) => $(T, !1), ["prevent"]),
onMousemove: oe((T) => $(T, !1), ["prevent"]),
onMouseleave: oe((T) => B(), ["prevent"]),
onClick: oe((T) => $(T, !0), ["prevent"])
}, [i("div", {
class: "star-light-area",
style: x.value
}, [v.map((T) => i("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: u.value
}],
id: T.id,
style: {
color: f.value
}
}, null))]), i("div", {
class: ["star-dark-area", {
small: a.value === "small"
}, {
middle: a.value === "middle"
}, {
large: a.value === "large"
}]
}, [v.map((T) => i("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: T.id,
style: {
color: h.value
}
}, null))]), i("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"
}]
}, [y.value && i("span", null, [U(" "), H.value, U(" ")]), w.value && (L || I) && i("span", null, [U(" "), I || L])])]);
}
}), en = /* @__PURE__ */ G({
name: "FColumnWidthEditor",
props: ba,
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(), f = o(""), h = o(), r = o("customize"), p = o(), u = Me("ResponseLayoutEditorDraggableComposition"), {
dragstart: d,
dragenter: y,
dragover: w,
dragend: k
} = u;
function b() {
c.value = a == null ? void 0 : a[n.value], s.value ? (f.value = `displayWidthIn${n.value}`, r.value = `${l.value[f.value]}`) : (f.value = `columnIn${n.value}`, p.value = l.value[f.value]);
}
function M(m) {
if (s.value === !0) {
const S = Number(m == null ? void 0 : m.text);
h.value = S;
const j = l.value[`columnIn${n.value}`] / l.value[`displayWidthIn${n.value}`];
l.value[`columnIn${n.value}`] = S * j, l.value[`displayWidthIn${n.value}`] = Number(S), t.emit("fieldChanged", l.value);
}
}
function O(m) {
p.value = m;
const S = l.value[`columnIn${n.value}`] / l.value[`displayWidthIn${n.value}`];
l.value[`columnIn${n.value}`] = p.value, l.value[`displayWidthIn${n.value}`] = p.value / S, t.emit("fieldChanged", l.value);
}
function R() {
return i(Ka, {
enableHalf: !0,
size: "extraLarge",
pointSystem: 12,
numOfStar: 6,
lightColor: "#5D89FE",
darkColor: "#e7e9f3",
iconClass: "f-icon-column-rectangle",
modelValue: p.value,
"onUpdate:modelValue": (m) => p.value = m,
enableScore: !1,
onSelectedValue: () => O(p.value)
}, null);
}
function D() {
const m = [];
c.value = a == null ? void 0 : a[n.value];
const S = l.value[`displayWidthIn${n.value}`];
return c.value.forEach((j) => {
const P = {
text: j,
active: S.toString() === j
};
m.push(P);
}), m;
}
function I() {
const m = D();
return i(ja, {
enumData: m,
suffixValue: "列",
onSelectedValueChanged: M
}, {
default: () => [U(" ")]
});
}
function L() {
var m;
if (((m = l == null ? void 0 : l.value) == null ? void 0 : m.showTopBorder) === 1)
return i("div", {
class: "f-layout-editor-column-width-editor-row"
}, [i("span", {
class: "f-layout-editor-column-width-editor-row-left"
}, null), i("span", {
class: "f-layout-editor-column-width-editor-row-middle"
}, [U("第"), l.value.componentRow, U("行")]), i("span", {
class: "f-layout-editor-column-width-editor-row-right"
}, null)]);
}
function v() {
return s.value ? i("div", {
class: "f-column-width-editor-switch-stand