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