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