@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
410 lines (409 loc) • 9.25 kB
JavaScript
import { defineComponent as x, ref as d, computed as c, watch as I, createVNode as l, createTextVNode as F, inject as D, onMounted as T } from "vue";
import { resolveAppearance as C, createPropsResolver as j } from "../dynamic-resolver/index.esm.js";
import { useDesignerComponent as z } from "../designer-canvas/index.esm.js";
const P = /* @__PURE__ */ new Map([
["appearance", C]
]);
function S(t, s, i) {
return s;
}
const $ = "https://json-schema.org/draft/2020-12/schema", A = "https://farris-design.gitee.io/nav.schema.json", M = "nav", R = "A Farris Component", _ = "object", q = {
id: {
description: "The unique identifier for a nav",
type: "string"
},
type: {
description: "The type string of nav component",
type: "string",
default: "nav"
},
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: ""
}
}, L = [
"id",
"type"
], B = {
$schema: $,
$id: A,
title: M,
description: R,
type: _,
properties: q,
required: L
}, w = "nav", O = "A Farris Component", V = "object", W = {
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: "右对齐"
}
]
}
}
}
}
}, E = {
title: w,
description: O,
type: V,
categories: W
}, h = {
/** 当前激活的id */
activeNavId: { Type: String, default: "1" },
/** 导航文本字段 */
displayField: { Type: String, default: "text" },
/** 控制禁用字段 */
disableField: { Type: String, default: "disable" },
/** 水平或垂直方向 */
horizontal: { Type: Boolean, default: !0 },
/** 标识字段 */
idField: { Type: String, default: "id" },
/** 最大数值 */
maxNum: { Type: Number, default: 99 },
/** 导航数据 */
navData: {
Type: Array,
default: [
{
id: "1",
text: "全部"
},
{
id: "2",
text: "已回复",
disable: !0
},
{
id: "3",
text: "待回复",
num: 200
},
{
id: "4",
text: "@我",
num: 33
}
]
},
/** 切换前事件 */
navPicking: {
type: Function,
default: () => (t) => !0
},
/** 徽标值字段 */
valueField: { Type: String, default: "num" }
}, N = j(h, B, P, S, E), b = /* @__PURE__ */ x({
name: "FNav",
props: h,
emits: ["nav", "update:activeNavId"],
setup(t, s) {
const i = d(t.activeNavId), v = d(t.navData), u = d(t.horizontal), p = d(t.navPicking), f = c(() => ({
paddingTop: "1rem"
}));
I(() => t.activeNavId, (a, e) => {
a !== e && (i.value = a);
});
const r = c({
get() {
return v.value;
},
set(a) {
v.value = a, g();
}
}), o = c({
get() {
return i.value;
},
set(a) {
if (i.value = a, i.value && r && r.value.length) {
const e = r.value.find((n) => n.id === i.value);
e && s.emit("nav", e);
}
}
}), m = c({
set(a) {
u.value = a;
},
get() {
return u.value;
}
});
function g() {
if (r.value && r.value.length && !i.value) {
const a = r.value.find((e) => !e.disable);
a && (i.value = a.id);
}
}
function y(a) {
a.disable || a.id === i.value || Promise.resolve().then(() => p.value(a)).then((e) => {
e && (i.value = a.id, s.emit("update:activeNavId", a.id), s.emit("nav", a));
});
}
return () => {
var a;
return l("div", {
class: ["farris-nav", {
"farris-nav-vertical": !m.value
}]
}, [(a = r.value) == null ? void 0 : a.map((e) => l("div", {
class: ["farris-nav-item", {
active: e[t.idField] === o.value
}, {
disabled: e[t.disableField]
}],
onClick: () => y(e)
}, [l("div", {
class: "farris-nav-item-link",
style: f.value
}, [l("span", {
class: "farris-nav-item-link-text"
}, [typeof e[t.displayField] == "function" ? e[t.displayField]() : e[t.displayField], e[t.valueField] && l("div", {
class: "farris-nav-item-tag"
}, [e[t.valueField] <= t.maxNum && l("span", {
class: "tag-text"
}, [e[t.valueField]]), e[t.valueField] > t.maxNum && l("span", {
class: "tag-text"
}, [t.maxNum, F("+")])])]), l("div", {
class: "farris-nav-item-bottom-line"
}, null)])]))]);
};
}
}), G = /* @__PURE__ */ x({
name: "FNavDesign",
props: h,
emits: ["nav"],
setup(t, s) {
const i = d(t.activeNavId), v = d(t.navData), u = d(t.horizontal);
d(t.navPicking);
const p = d(), f = D("design-item-context"), r = z(p, f);
T(() => {
p.value.componentInstance = r;
}), s.expose(r.value);
const o = c({
get() {
return v.value;
},
set(e) {
v.value = e, y();
}
}), m = c({
get() {
return i.value;
},
set(e) {
if (i.value = e, i.value && o && o.value.length) {
const n = o.value.find((k) => k.id === i.value);
n && s.emit("nav", n);
}
}
}), g = c({
set(e) {
u.value = e;
},
get() {
return u.value;
}
});
function y() {
if (o.value && o.value.length && !i.value) {
const e = o.value.find((n) => !n.disable);
e && (i.value = e.id);
}
}
function a(e) {
e.disable || e.id === i.value || (i.value = e.id, s.emit("nav", e));
}
return () => {
var e;
return l("div", {
ref: p,
class: ["farris-nav", {
"farris-nav-vertical": !g.value
}]
}, [(e = o.value) == null ? void 0 : e.map((n) => l("div", {
class: ["farris-nav-item", {
active: n.id === m.value
}, {
disabled: n.disable
}],
onClick: () => a(n)
}, [l("div", {
class: "farris-nav-item-link"
}, [l("span", {
class: "farris-nav-item-link-text"
}, [n.text, n.num && l("div", {
class: "farris-nav-item-tag"
}, [n.num <= t.maxNum && l("span", {
class: "tag-text"
}, [n.num]), n.num > t.maxNum && l("span", {
class: "tag-text"
}, [t.maxNum, F("+")])])])])]))]);
};
}
}), Q = {
install(t) {
t.component(b.name, b);
},
register(t, s, i, v) {
t.nav = b, s.nav = N;
},
registerDesigner(t, s, i) {
t.nav = G, s.nav = N;
}
};
export {
b as FNav,
Q as default,
h as navProps,
N as propsResolver
};