@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
276 lines (275 loc) • 6.96 kB
JavaScript
import T, { capsuleProps as N } from "../../components/capsule/index.esm.js";
import { withInstall as E } from "../../components/common/index.esm.js";
import { resolveAppearance as L, createPropsResolver as z } from "../../components/dynamic-resolver/index.esm.js";
import { defineComponent as x, ref as i, watch as b, computed as r, onMounted as h, createVNode as p, inject as G, nextTick as $ } from "vue";
import { useDesignerComponent as H } from "../../components/designer-canvas/index.esm.js";
const J = {
/**
* 展示项数组
* @default [{ name: '升序', value: 'asc', icon: 'f-icon f-icon-col-ascendingorder' }, { name: '降序', value: 'desc', icon: 'f-icon f-icon-col-descendingorder' }]
*/
items: {
Type: Array,
default: [
{ name: "升序", value: "asc", icon: "f-icon f-icon-col-ascendingorder" },
{ name: "降序", value: "desc", icon: "f-icon f-icon-col-descendingorder" }
]
},
/**
* 选中值
* @default ''
*/
modelValue: { type: String, default: "" },
/**
* 按钮显示类型
* @default 'primary'
*/
type: { type: String, default: "primary" }
}, K = {
/**
* 选项名称
* @default ''
*/
name: { type: String, default: "" },
/**
* 选项值
* @default ''
*/
value: { type: String, default: "" },
isActive: { type: Boolean, default: !1 },
icon: { type: String, default: "" },
index: { type: Number, default: 0 },
show: { type: Boolean, default: !0 },
disabled: { type: Boolean, default: !1 },
minWidth: { type: Number, default: 20 }
}, Q = /* @__PURE__ */ x({
name: "FCapsuleItem",
props: K,
emits: ["mounted", "active"],
setup(t, n) {
const s = i(), o = i(t.isActive);
b(() => t.isActive, (l) => {
o.value = l;
});
const d = r(() => ({
"f-capsule-item": !0,
"f-capsule-active-item": o.value,
"f-capsule-disabled": t.disabled
})), u = r(() => ({
minWidth: `${t.minWidth}px`
}));
h(() => {
n.emit("mounted", s, t.value);
});
function f(l) {
t.disabled || n.emit("active", l, {
name: t.name,
value: t.value
});
}
return () => p("div", {
ref: s,
class: d.value,
style: u.value,
onClick: (l) => f(l)
}, [t.icon && p("i", {
class: t.icon
}, null), t.name]);
}
}), v = /* @__PURE__ */ x({
name: "FCapsuleDesign",
props: J,
emits: ["change", "update:modelValue"],
setup(t, n) {
const s = i(t.items), o = i(), d = 2, u = i(t.modelValue), f = i("none"), l = i(t.type), w = G("design-item-context"), C = H(o, w);
h(() => {
o.value.componentInstance = C;
}), n.expose(C.value);
const S = r(() => {
const e = {
"f-capsule-container": !0
};
return l.value && (e[l.value] = !0), e;
}), B = r(() => ({})), M = r(() => ({
"f-capsule": !0
})), I = i(d), j = i(0), y = i(0), V = r(() => ({
left: `${I.value}px`,
width: `${j.value}px`,
transition: f.value
})), F = r(() => ({
width: `${y.value}px`
})), m = /* @__PURE__ */ new Map();
function P(e) {
var a;
if (m.has(e.value)) {
const c = (a = m.get(e.value)) == null ? void 0 : a.value;
if (c) {
const O = c.getBoundingClientRect(), D = o.value.getBoundingClientRect();
I.value = O.left - D.left + d + o.value.scrollLeft, j.value = O.width - 2 * d;
}
}
}
function A(e, a) {
const c = e.value;
u.value = c, n.emit("update:modelValue", c), P(e), a && n.emit("change", c);
}
function g(e) {
const a = s.value.findIndex((c) => c.value === e);
a > -1 && A(s.value[a], !1);
}
b(() => t.modelValue, (e) => {
u.value = e, g(u.value);
}), b(() => t.items, async (e) => {
s.value = e, await $(), g(u.value), y.value = Array.from(m.values()).reduce((a, c) => (a += c.value.clientWidth, a), 0);
}), h(async () => {
g(u.value), await $(), f.value = "0.1s ease-out all", y.value = Array.from(m.values()).reduce((e, a) => (e += a.value.clientWidth, e), 0);
});
function W(e, a) {
A(a, !0);
}
function k(e, a) {
m.set(a, e);
}
function q(e, a) {
return p(Q, {
name: e.name,
value: e.value,
isActive: e.value === u.value,
index: a,
onMounted: k,
onActive: W
}, null);
}
return () => p("span", {
ref: o,
class: S.value,
style: B.value
}, [p("span", {
class: "f-capsule-pane"
}, [s.value.map((e, a) => q(e, a))]), p("small", {
class: M.value,
style: V.value
}, null), p("div", {
class: "f-capsule-board",
style: F.value
}, null)]);
}
}), U = "https://json-schema.org/draft/2020-12/schema", X = "https://farris-design.gitee.io/capsule.schema.json", Y = "capsule", Z = "A Farris Component", _ = "object", ee = {
id: {
description: "The unique identifier for a capsule",
type: "string"
},
type: {
description: "The type string of capsule component",
type: "string",
default: "capsule"
},
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
}
}, te = [
"id",
"type"
], ae = {
$schema: U,
$id: X,
title: Y,
description: Z,
type: _,
properties: ee,
required: te
}, ne = /* @__PURE__ */ new Map([
["appearance", L]
]);
function se(t, n, s) {
return n;
}
const le = "capsule", ce = "A Farris Component", ie = "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: []
}
}
}
}
}, ue = {
title: le,
description: ce,
type: ie,
categories: oe
}, R = z(N, ae, ne, se, ue);
v.register = (t, n, s) => {
t.capsule = T, n.capsule = R;
};
v.registerDesigner = (t, n, s) => {
t.capsule = v, n.capsule = R;
};
const ve = E(v);
export {
v as CapsuleDesign,
ve as default,
R as propsResolver
};