@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
409 lines (408 loc) • 10.1 kB
JavaScript
import { defineComponent as D, ref as n, computed as c, createVNode as o, Fragment as $, inject as q, onMounted as L } from "vue";
import { resolveAppearance as N, createPropsResolver as V } from "../dynamic-resolver/index.esm.js";
import { useDesignerComponent as W } from "../designer-canvas/index.esm.js";
import { useDesignerRules as z } from "../dynamic-form/index.esm.js";
const E = /* @__PURE__ */ new Map([
["appearance", N]
]), G = "https://json-schema.org/draft/2020-12/schema", J = "https://farris-design.gitee.io/page-footer.schema.json", K = "page-footer", Q = "A Farris Input Component", U = "object", X = {
id: {
description: "The unique identifier for a page-footer",
type: "string"
},
type: {
description: "The type string of page-footer component",
type: "string",
default: "page-footer"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
editable: {
description: "",
type: "boolean",
default: !0
},
enableLinkLabel: {
description: "",
type: "boolean",
default: !1
},
label: {
description: "",
type: "string",
default: ""
},
lableWidth: {
description: "",
type: "number"
},
placeholder: {
description: "",
type: "string",
default: ""
},
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"
},
visible: {
description: "",
type: "boolean",
default: !0
},
onBlur: {
description: "",
type: "string",
default: ""
},
onClickLinkLabel: {
description: "",
type: "string",
default: ""
}
}, Y = [
"id",
"type"
], Z = {
$schema: G,
$id: J,
title: K,
description: Q,
type: U,
properties: X,
required: Y
};
function _(t, e, i) {
return e;
}
const ee = "page-footer", te = "A Farris Component", se = "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: []
}
}
}
},
behavior: {
description: "Basic Infomation",
title: "行为",
properties: {
editable: {
description: "",
title: "允许编辑",
type: "boolean"
},
readonly: {
description: "",
title: "只读",
type: "string"
},
required: {
description: "",
title: "必填",
type: "boolean"
},
visible: {
description: "",
title: "可见",
type: "boolean"
},
placeholder: {
description: "",
title: "提示文本",
type: "string"
},
tabindex: {
description: "",
title: "tab索引",
type: "number"
},
textAlign: {
description: "",
title: "对齐方式",
type: "enum",
editor: {
type: "combo-list",
textField: "name",
valueField: "value",
data: [
{
value: "left",
name: "左对齐"
},
{
value: "center",
name: "居中"
},
{
value: "right",
name: "右对齐"
}
]
}
}
}
}
}, ae = {
title: ee,
description: te,
type: se,
categories: oe
}, k = {
/**
* 组件自定义样式
*/
customClass: { type: String, default: "" },
/**
* 是否启用内容区收折
*/
enableCollapse: { type: Boolean, default: !1 },
/**
* 是否默认收折内容区
*/
collapsed: { type: Boolean, default: !0 },
/**
* 收折按钮文本
*/
collapsedText: { type: String, default: "More" },
/**
* 展开按钮文本
*/
expandedText: { type: String, default: "More" },
/**
* 内容区域样式
*/
contentClass: { type: String, default: "" },
/**
* 页脚组件样式
*/
headerClass: { type: String, default: "" },
/**
* 上方扩展区域左侧内容区样式
*/
headerContentClass: { type: String, default: "" },
/**
* 上方扩展区域右侧按钮区样式
*/
headerToolbarClass: { type: String, default: "" },
/**
* 是否显示上方扩展区域
*/
showHeader: { type: String, default: !1 }
}, B = V(k, Z, E, _, ae), w = /* @__PURE__ */ D({
name: "FPageFooter",
props: k,
emits: [],
setup(t, e) {
const i = n(t.collapsed), C = c(() => t.collapsedText), h = n(t.contentClass), p = c(() => t.enableCollapse), T = c(() => t.expandedText), y = n(t.headerClass), A = n(t.headerContentClass), H = n(t.headerToolbarClass), j = c(() => t.showHeader), m = n(t.customClass);
function b(s) {
s && s.stopImmediatePropagation(), i.value = !i.value;
}
function F() {
return p.value && o("div", {
class: "toolbar--collapse",
onClick: (s) => b(s)
}, [o("span", {
class: "toobar--collapse-text"
}, [i.value ? T.value : C.value]), o("i", {
class: "f-icon toolbar--collapse-icon"
}, null)]);
}
const S = c(() => {
const s = {
"f-toolbar": !0
};
return H.value.split(" ").reduce((r, d) => (r[d] = !0, r), s), s;
});
function g() {
return o("div", {
class: S.value
}, [e.slots.headerToolbar && e.slots.headerToolbar(), !e.slots.headerToolbar && F()]);
}
const O = c(() => {
const s = {
"f-content": !0
};
return A.value.split(" ").reduce((r, d) => (r[d] = !0, r), s), s;
});
function x() {
return o($, null, [e.slots.headerContent && o("div", {
class: O.value
}, [e.slots.headerContent()]), g()]);
}
const I = c(() => {
const s = {
"f-cmp-footer-header": !0
};
return y.value.split(" ").reduce((r, d) => (r[d] = !0, r), s), s;
});
function M() {
return o("header", {
class: I.value
}, [e.slots.header && e.slots.header(), !e.slots.header && x()]);
}
const P = c(() => {
const s = {
"f-cmp-footer": !0,
"f-state-collapse": p.value && i.value,
"f-cmp-footer-accordion": p.value
};
return m.value.split(" ").reduce((r, d) => (r[d] = !0, r), s), s;
}), R = c(() => {
const s = {
"f-cmp-footer-content": !0
};
return h.value.split(" ").reduce((r, d) => (r[d] = !0, r), s), s;
});
return () => o("div", {
class: P.value
}, [o("footer", {
class: "f-cmp-footer-container"
}, [j.value && M(), o("div", {
class: R.value
}, [e.slots.default && e.slots.default()])])]);
}
}), re = /* @__PURE__ */ D({
name: "FPageFooterDesign",
props: k,
emits: [],
setup(t, e) {
const i = n(t.collapsed), C = n(t.collapsedText), h = n(t.contentClass), p = n(t.enableCollapse), T = n(t.expandedText), y = n(t.headerClass), A = n(t.headerContentClass), H = n(t.headerToolbarClass), j = n(t.showHeader), m = n(), b = q("design-item-context"), F = q("designer-host-service"), S = z(b, F), g = W(m, b, S);
L(() => {
m.value.componentInstance = g;
}), e.expose(g.value);
function O(a) {
a && a.stopImmediatePropagation(), i.value = !i.value;
}
function x() {
return p.value && o("div", {
class: "toolbar--collapse",
onClick: (a) => O(a)
}, [o("span", {
class: "toobar--collapse-text"
}, [i.value ? T.value : C.value]), o("i", {
class: "f-icon toolbar--collapse-icon"
}, null)]);
}
const I = c(() => {
const a = {
"f-toolbar": !0
};
return H.value.split(" ").reduce((l, u) => (l[u] = !0, l), a), a;
});
function M() {
return o("div", {
class: I.value
}, [e.slots.headerToolbar && e.slots.headerToolbar(), !e.slots.headerToolbar && x()]);
}
const P = c(() => {
const a = {
"f-content": !0
};
return A.value.split(" ").reduce((l, u) => (l[u] = !0, l), a), a;
});
function R() {
return o($, null, [e.slots.headerContent && o("div", {
class: P.value
}, [e.slots.headerContent()]), M()]);
}
const s = c(() => {
const a = {
"f-cmp-footer-header": !0
};
return y.value.split(" ").reduce((l, u) => (l[u] = !0, l), a), a;
});
function f() {
return o("header", {
class: s.value
}, [e.slots.header && e.slots.header(), !e.slots.header && R()]);
}
const r = c(() => {
const a = {
"f-cmp-footer": !0,
"f-state-collapse": p.value && i.value,
"f-cmp-footer-accordion": p.value
};
return y.value.split(" ").reduce((l, u) => (l[u] = !0, l), a), a;
}), d = c(() => {
const a = {
"f-cmp-footer-content": !0
};
return h.value.split(" ").reduce((l, u) => (l[u] = !0, l), a), a;
});
return () => o("div", {
ref: m,
class: r.value
}, [o("footer", {
class: "f-cmp-footer-container"
}, [j.value && f(), o("div", {
class: d.value
}, [e.slots.default && e.slots.default()])])]);
}
}), de = {
install(t) {
t.component(w.name, w);
},
register(t, e, i, C) {
t["page-footer"] = w, e["page-footer"] = B;
},
registerDesigner(t, e, i) {
t["page-footer"] = re, e["page-footer"] = B;
}
};
export {
w as FPageFooter,
de as default,
k as pageFooterProps,
B as propsResolver
};