@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
354 lines (353 loc) • 8.61 kB
JavaScript
import { ref as y, nextTick as w, createVNode as s, Fragment as C, defineComponent as h, inject as D, onMounted as M } from "vue";
import P from "../button/index.esm.js";
import { resolveAppearance as j, createPropsResolver as F } from "../dynamic-resolver/index.esm.js";
import R from "../popover/index.esm.js";
import { useDesignerComponent as S } from "../designer-canvas/index.esm.js";
import { withInstall as $ } from "../common/index.esm.js";
const G = "https://json-schema.org/draft/2020-12/schema", x = "https://farris-design.gitee.io/button-group.schema.json", T = "button-group", O = "A Farris Component", q = "object", z = {
id: {
description: "The unique identifier for button-group",
type: "string"
},
type: {
description: "The type string of button-group",
type: "string",
default: "button-group"
},
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
}
}, A = [
"id",
"type"
], N = {
$schema: G,
$id: x,
title: T,
description: O,
type: q,
properties: z,
required: A
};
function E(e, o, a) {
return o;
}
const H = /* @__PURE__ */ new Map([
["appearance", j]
]), V = "button-group", W = "A Farris Component", J = "object", K = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, L = {
title: V,
description: W,
type: J,
categories: K
}, m = {
/**
* 组件标识
*/
id: String,
/**
* 按钮信息
*/
data: {
type: Array,
default: []
},
/**
* 禁用
*/
disabled: { type: Boolean, default: !1 },
/**
* 显示的按钮数量 默认为2
*/
count: { type: Number, default: 2 },
/**
* 按钮组模式，默认按钮之间带间隔，另一种不带间隔
*/
mode: { type: String, default: "default" },
/**
* 按钮大小 small/middle/large
*/
size: { type: String, default: "middle" },
/**
* 按钮样式
*/
type: { type: String, default: "primary" },
/**
* 按钮展示位置
*/
placement: { type: String, default: "bottom-left" }
}, k = F(m, N, H, E, L);
function Q(e, o, a) {
const l = y(), i = y(!1), u = y();
function p() {
const c = l.value;
c && c.show(a.value);
}
async function f() {
i.value = !i.value, await w(), p();
}
function r() {
i.value = !1, o.emit("changeState", i.value);
}
function d(c) {
c.stopPropagation(), f(), o.emit("changeState", i.value);
}
function n(c, v) {
c.stopPropagation(), !v.disabled && (i.value = !1, o.emit("change", v.id), o.emit("click", v));
}
function g() {
i.value && (u.value = setTimeout(() => {
r();
}, 1e3));
}
function t() {
u.value && (clearTimeout(u.value), u.value = null);
}
return {
hidePopup: r,
onClickDropdownButton: d,
onClickDropdownMenuItem: n,
onMouseleaveDropdownButton: g,
onMouseenterDropdownButton: t,
popoverRef: l,
shouldPopupContent: i,
togglePopup: f
};
}
function U(e, o, a) {
const {
hidePopup: l,
onClickDropdownMenuItem: i,
popoverRef: u
} = a;
function p(r) {
return s(C, null, [r.divider && s("div", {
class: "dropdown-divider"
}, null), s("div", {
id: r.id,
class: "dropdown-item" + (r.disabled ? " disabled" : ""),
onClick: (d) => i(d, r)
}, [r.icon && s("i", {
class: "f-icon dropdown-item-icon" + r.icon
}, null), s("span", null, [r.text])])]);
}
function f(r) {
return s(R, {
id: `${e.id}-popover`,
ref: u,
visible: !0,
placement: e.placement,
host: o.value,
fitContent: !0,
onHidden: l,
minWidth: 120
}, {
default: () => [s("div", {
class: "bg-white"
}, [r.map((d) => p(d))])]
});
}
return {
renderDropdownMenu: f
};
}
function B(e, o) {
const a = y(), l = y(), i = Q(e, o, l), {
onMouseleaveDropdownButton: u,
onMouseenterDropdownButton: p,
onClickDropdownButton: f,
shouldPopupContent: r
} = i, {
renderDropdownMenu: d
} = U(e, a, i);
function n(g) {
return s("div", {
class: "btn-group f-btn-group-dropdown",
ref: a,
onMouseleave: u,
onMouseenter: p
}, [s("button", {
ref: l,
type: "button",
class: "f-btn-dropdown",
onClick: f
}, [s("span", {
class: "f-icon f-icon-lookup"
}, null)]), r.value && d(g)]);
}
return {
renderDropdownButton: n
};
}
const b = /* @__PURE__ */ h({
name: "FButtonGroup",
props: m,
emits: ["click", "change", "changeState"],
setup(e, o) {
const a = y(), l = e.data && e.data.slice(0, e.count) || [], i = e.data && e.data.slice(e.count) || [], u = (t) => t.type || e.type, p = (t) => t.disabled !== void 0 ? t.disabled : e.disabled, f = function(t) {
const c = {
"f-btn-ml": (t.type && t.type !== "link" || e.type !== "link") && e.mode === "default",
"btn-link": !t.type && !e.type || e.type === "link" || t.type === "link"
}, v = t.type ? t.type : e.type && e.type !== "link" ? e.type : "";
return v && (c[`btn-${v}`] = !0), c;
}, r = function() {
return {
"position-relative": !0,
"btn-group": e.mode === "group",
"f-btn-group-links": e.type === "link"
// 'btn-group-lg': props.size === 'large',
// 'btn-group-sm': props.size === 'small',
};
};
function d(t, c) {
o.emit("change", c.id), o.emit("click", c);
}
function n(t) {
return s(P, {
disabled: p(t),
id: t.id,
icon: t.icon,
size: e.size,
type: u(t),
customClass: f(t),
onClick: (c) => d(c, t)
}, {
default: () => [t.text]
});
}
const {
renderDropdownButton: g
} = B(e, o);
return () => s("div", {
class: "f-btn-group",
style: "position:relative;",
ref: a
}, [s("div", {
class: r(),
style: "display:inline-flex;vertical-align:middle"
}, [l.map((t) => n(t))]), !!i.length && g(i)]);
}
}), X = /* @__PURE__ */ h({
name: "FButtonGroupDesign",
props: m,
emits: ["click", "changeState", "change", "clickMenuOut"],
setup(e, o) {
const a = y(), l = D("design-item-context"), i = S(a, l);
M(() => {
a.value.componentInstance = i;
}), o.expose(i.value);
const u = e.data && e.data.slice(0, e.count) || [], p = e.data && e.data.slice(e.count) || [], f = function(n) {
const g = {
btn: !0,
"f-btn-ml": n.type && n.type !== "link",
"btn-link": !!n.icon || !n.type,
"btn-icontext": !!n.icon,
disabled: n.disabled
};
return n.type && (g[`btn-${n.type}`] = !0), g;
};
function r(n) {
return s("div", null, [s("button", {
type: "button",
id: n.id,
title: n.id,
class: f(n)
}, [n.icon && s("i", {
class: `f-icon ${n.icon}`
}, null), !n.icon && n.text])]);
}
const {
renderDropdownButton: d
} = B(e, o);
return () => s("div", {
class: "f-btn-group",
style: "position:relative;",
ref: a
}, [s("div", {
class: (e.size === "large" ? "btn-group-lg" : "btn-group-sm") + " btn-group f-btn-group-links"
}, [u.map((n) => r(n))]), !!p.length && d(p)]);
}
});
b.register = (e, o, a, l) => {
e["button-group"] = b, o["button-group"] = k;
};
b.registerDesigner = (e, o, a) => {
e["button-group"] = X, o["button-group"] = k;
};
const ne = $(b);
export {
b as FButtonGroup,
m as buttonGroupProps,
ne as default,
k as propsResolver
};