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