@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
464 lines (463 loc) • 12.7 kB
JavaScript
import { defineComponent as C, computed as h, provide as R, createVNode as p, ref as y, inject as I, onMounted as P } from "vue";
import { isPlainObject as A, cloneDeep as D } from "lodash-es";
import { resolveAppearance as M, createPropsResolver as T } from "../dynamic-resolver/index.esm.js";
import { getCustomClass as N } from "../common/index.esm.js";
import { useDesignerComponent as B } from "../designer-canvas/index.esm.js";
const q = {}, z = {};
function x(e) {
const { properties: t, title: o, ignore: n } = e, r = n && Array.isArray(n), u = Object.keys(t).reduce((d, f) => ((!r || !n.find((m) => m === f)) && (d[f] = t[f].type === "object" && t[f].properties ? x(t[f]) : D(t[f].default)), d), {});
if (o && (!r || !n.find((d) => d === "id"))) {
const d = o.toLowerCase().replace(/-/g, "_");
u.id = `${d}_${Math.random().toString().slice(2, 6)}`;
}
return u;
}
function V(e, t) {
const o = x(t);
return Object.keys(o).reduce((n, r) => (Object.prototype.hasOwnProperty.call(e, r) && (n[r] && A(n[r]) && A(e[r] || !e[r]) ? Object.assign(n[r], e[r] || {}) : n[r] = e[r]), n), o), o;
}
function F(e, t) {
return Object.keys(e).filter((n) => e[n] != null).reduce((n, r) => {
if (t.has(r)) {
const u = t.get(r);
if (typeof u == "string")
n[u] = e[r];
else {
const d = u(r, e[r], e);
Object.assign(n, d);
}
} else
n[r] = e[r];
return n;
}, {});
}
function L(e, t, o = /* @__PURE__ */ new Map()) {
const n = V(e, t);
return F(n, o);
}
function U(e = {}) {
function t(s, i, c, l) {
if (typeof c == "number")
return l[s].length === c;
if (typeof c == "object") {
const a = Object.keys(c)[0], g = c[a];
if (a === "not")
return Number(l[s].length) !== Number(g);
if (a === "moreThan")
return Number(l[s].length) >= Number(g);
if (a === "lessThan")
return Number(l[s].length) <= Number(g);
}
return !1;
}
function o(s, i, c, l) {
return l[s] && l[s].propertyValue && String(l[s].propertyValue.value) === String(c);
}
const n = /* @__PURE__ */ new Map([
["length", t],
["getProperty", o]
]);
Object.keys(e).reduce((s, i) => (s.set(i, e[i]), s), n);
function r(s, i) {
const c = s;
return typeof i == "number" ? [{ target: c, operator: "length", param: null, value: Number(i) }] : typeof i == "boolean" ? [{ target: c, operator: "getProperty", param: s, value: !!i }] : typeof i == "object" ? Object.keys(i).map((l) => {
if (l === "length")
return { target: c, operator: "length", param: null, value: i[l] };
const a = l, g = i[l];
return { target: c, operator: "getProperty", param: a, value: g };
}) : [];
}
function u(s) {
return Object.keys(s).reduce((c, l) => {
const a = r(l, s[l]);
return c.push(...a), c;
}, []);
}
function d(s, i) {
if (n.has(s.operator)) {
const c = n.get(s.operator);
return c && c(s.target, s.param, s.value, i) || !1;
}
return !1;
}
function f(s, i) {
return u(s).reduce((a, g) => a && d(g, i), !0);
}
function m(s, i) {
const c = Object.keys(s), l = c.includes("allOf"), a = c.includes("anyOf"), g = l || a, O = (g ? s[g ? l ? "allOf" : "anyOf" : "allOf"] : [s]).map((E) => f(E, i));
return l ? !O.includes(!1) : O.includes(!0);
}
return { parseValueSchema: m };
}
const _ = {}, G = {};
U();
function J(e, t, o = /* @__PURE__ */ new Map(), n = (d, f, m, s) => f, r = {}, u = (d) => d) {
return q[t.title] = t, z[t.title] = n, _[t.title] = r, G[t.title] = u, (d = {}, f = !0) => {
if (!f)
return F(d, o);
const m = L(d, t, o), s = Object.keys(e).reduce((i, c) => (i[c] = e[c].default, i), {});
return Object.assign(s, m);
};
}
const k = /* @__PURE__ */ new Map([
["appearance", M],
["size", (e, t) => {
const o = {};
return t.width && (o.width = Number(t.width)), t.height && (o.height = Number(t.height)), o;
}]
]), Q = "https://json-schema.org/draft/2020-12/schema", W = "https://farris-design.gitee.io/accordion.schema.json", X = "accordion", Y = "A Farris Container Component", Z = "object", K = {
id: {
description: "The unique identifier for a Accordion",
type: "string"
},
type: {
description: "The type string of Accordion component",
type: "string",
default: "accordion"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
contents: {
description: "",
type: "array",
default: []
},
customClass: {
description: "",
type: "string",
default: ""
},
size: {
description: "",
type: "object",
properties: {
width: {
type: "number"
},
height: {
type: "number"
}
},
default: null
},
enableFold: {
description: "",
type: "boolean",
default: !0
},
expanded: {
description: "",
type: "boolean",
default: !1
}
}, ee = [
"id",
"type",
"contents"
], te = {
$schema: Q,
$id: W,
title: X,
description: Y,
type: Z,
properties: K,
required: ee
};
function ne(e, t, o) {
return t;
}
const se = "accordion", re = "A Farris Component", oe = "object", ie = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, ce = {
title: se,
description: re,
type: oe,
categories: ie
}, j = {
customClass: { type: String, default: "" },
enableFold: { type: Boolean, default: !0 },
expanded: { type: Boolean, default: !1 },
height: { type: Number },
width: { type: Number }
}, H = J(j, te, k, ne, ce), b = /* @__PURE__ */ C({
name: "FAccordion",
props: j,
emits: [],
setup(e, t) {
const o = h(() => ({
height: e.height ? `${e.height}px` : "",
width: e.width ? `${e.width}px` : ""
}));
R("accordionContext", {
parentProps: e
});
const n = h(() => N({
"farris-panel": !0,
accordion: !0
}, e.customClass));
return () => p("div", {
class: n.value,
style: o.value
}, [t.slots.default && t.slots.default()]);
}
}), ae = "https://json-schema.org/draft/2020-12/schema", le = "https://farris-design.gitee.io/accordion-item.schema.json", ue = "AccordionItem", de = "A Farris Container Component", pe = "object", fe = {
id: {
description: "The unique identifier for a Accordion Item",
type: "string"
},
type: {
description: "The type string of Accordion Item component",
type: "string"
},
contents: {
description: "",
type: "array",
default: []
},
size: {
description: "",
type: "object",
properties: {
width: {
type: "number"
},
height: {
type: "number"
}
},
default: null
},
title: {
description: "",
type: "string",
default: ""
},
disable: {
description: "",
type: "boolean",
default: !1
}
}, me = [
"id",
"type",
"contents"
], he = {
$schema: ae,
$id: le,
title: ue,
description: de,
type: pe,
properties: fe,
required: me
}, w = {
active: { type: Boolean, default: !1 },
customClass: { type: String, default: "" },
disabled: { type: Boolean, default: !1 },
height: { type: Number },
iconUri: { type: String, default: "" },
maxHeight: { type: Number },
title: { type: String, default: "" },
width: { type: Number }
}, S = T(w, he, k), $ = /* @__PURE__ */ C({
name: "FAccordionItem",
props: w,
emits: ["ClickHeader"],
setup(e, t) {
const o = y(), n = I("accordionContext"), r = y(e.title), u = y(e.active);
function d() {
var a;
e.disabled || !((a = n == null ? void 0 : n.parentProps) != null && a.enableFold) || (u.value = !u.value);
}
function f(a) {
t.emit("ClickHeader"), d();
}
const m = h(() => {
const a = {
card: !0,
"farris-panel-item": !0,
"f-state-disabled": e.disabled,
"f-state-selected": u.value
};
return N(a, e.customClass);
}), s = h(() => !0), i = h(() => ({
"f-icon": !0,
"f-accordion-collapse": !u.value,
"f-accordion-expand": u.value
}));
function c() {
return o.value ? o.value.getBoundingClientRect().height : 0;
}
const l = h(() => {
const a = e.maxHeight ? {
transition: "maxHeight 0.36s ease 0s",
"max-height": u.value ? `${e.maxHeight}px` : 0
} : {
transition: "height 0.36s ease 0s",
height: u.value ? `${c()}px` : 0
};
return u.value || (a.overflow = "hidden"), a;
});
return P(() => {
var a;
(a = n == null ? void 0 : n.parentProps) != null && a.expanded && (u.value = !0);
}), () => p("div", {
class: m.value
}, [p("div", {
class: "card-header",
onClick: f
}, [p("div", {
class: "panel-item-title"
}, [e.iconUri && p("img", {
class: "panel-item-title-image",
src: e.iconUri,
title: "title-icon"
}, null), s.value && p("span", null, [r.value]), t.slots.head && t.slots.head(), p("i", {
class: i.value
}, null)]), p("div", {
class: "panel-item-tool"
}, [t.slots.toolbar && t.slots.toolbar()]), p("div", {
class: "panel-item-clear"
}, null)]), p("div", {
style: l.value
}, [p("div", {
class: "card-body",
ref: o
}, [t.slots.default && t.slots.default()])])]);
}
}), ge = /* @__PURE__ */ C({
name: "FAccordionDesign",
props: j,
emits: [],
setup(e, t) {
const o = h(() => ({
height: e.height ? `${e.height}px` : "",
width: e.width ? `${e.width}px` : ""
})), n = h(() => {
const f = e.customClass.split(" "), m = {
"farris-panel": !0,
accordion: !0
};
return f.reduce((s, i) => (s[i] = !0, s), m), m;
}), r = y(), u = I("design-item-context"), d = B(r, u);
return P(() => {
r.value.componentInstance = d;
}), t.expose(d.value), () => p("div", {
ref: r,
class: n.value,
style: o.value
}, [t.slots.default && t.slots.default()]);
}
}), ye = /* @__PURE__ */ C({
name: "FAccordionItemDesign",
props: w,
emits: [],
setup(e, t) {
const o = y(e.title), n = y(!1), r = y(!1);
function u() {
n.value = !n.value;
}
function d(v) {
u();
}
const f = h(() => ({
"f-state-disabled": r.value,
card: !0,
"farris-panel-item": !0,
"f-state-selected": n.value
})), m = h(() => !0), s = h(() => !1), i = h(() => ({
"f-icon": !0,
"f-accordion-collapse": !n.value,
"f-accordion-expand": n.value
})), c = h(() => {
const v = e.maxHeight ? {
transition: "maxHeight 0.36s ease 0s",
"max-height": n.value ? `${e.maxHeight}px` : 0
} : {
transition: "height 0.36s ease 0s",
height: n.value ? `${e.height}px` : 0
};
return n.value || (v.overflow = "hidden"), v;
});
function l() {
return !0;
}
function a() {
return !1;
}
function g() {
return !0;
}
return t.expose({
canMove: l(),
canSelectParent: a(),
canDelete: g(),
canNested: !0
}), () => p("div", {
class: f.value
}, [p("div", {
class: "card-header",
onClick: d
}, [p("div", {
class: "panel-item-title"
}, [m.value && p("span", null, [o.value]), s.value && t.slots.head && t.slots.head(), p("span", {
class: i.value
}, null)]), p("div", {
class: "panel-item-tool"
}, [t.slots.toolbar && t.slots.toolbar()]), p("div", {
class: "panel-item-clear"
}, null)]), p("div", {
style: c.value
}, [p("div", {
class: "card-body drag-container"
}, [t.slots.default && t.slots.default()])])]);
}
});
b.install = (e) => {
e.component(b.name, b), e.component($.name, $);
};
b.register = (e, t, o, n) => {
e.accordion = b, e["accordion-item"] = $, t.accordion = H, t["accordion-item"] = S;
};
b.registerDesigner = (e, t, o) => {
e.accordion = ge, e["accordion-item"] = ye, t.accordion = H, t["accordion-item"] = S;
};
export {
b as FAccordion,
$ as FAccordionItem,
w as accordionItemProps,
S as accordionItemPropsResolver,
j as accordionProps,
H as accordionPropsResolver,
b as default
};