@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
255 lines (254 loc) • 6.47 kB
JavaScript
import N, { capsuleProps as W } 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 w, ref as c, watch as g, computed as p, onMounted as b, createVNode as r, inject as G, nextTick as $ } from "vue";
import { useDesignerComponent as H } from "../../components/designer-canvas/index.esm.js";
const J = {
items: {
Type: Array,
default: [
{ name: "升序", value: "asc", icon: "f-icon f-icon-col-ascendingorder" },
{ name: "降序", value: "desc", icon: "f-icon f-icon-col-descendingorder" }
]
},
/**
* 组件值
*/
modelValue: { type: String, default: "" },
type: { type: String, default: "primary" }
}, K = {
name: { type: String, 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 }
}, Q = /* @__PURE__ */ w({
name: "FCapsuleItem",
props: K,
emits: ["mounted", "active"],
setup(t, n) {
const s = c(), o = c(t.isActive);
g(() => t.isActive, (i) => {
o.value = i;
});
const d = p(() => ({
"f-capsule-item": !0,
"f-capsule-active-item": o.value,
"f-capsule-disabled": t.disabled
}));
b(() => {
n.emit("mounted", s, t.value);
});
function u(i) {
t.disabled || n.emit("active", i, {
name: t.name,
value: t.value
});
}
return () => r("div", {
ref: s,
class: d.value,
onClick: (i) => u(i)
}, [t.icon && r("i", {
class: t.icon
}, null), t.name]);
}
}), m = /* @__PURE__ */ w({
name: "FCapsuleDesign",
props: J,
emits: ["change", "update:modelValue"],
setup(t, n) {
const s = c(t.items), o = c(), d = 2, u = c(t.modelValue), i = c("none"), C = c(t.type), O = G("design-item-context"), h = H(o, O);
b(() => {
o.value.componentInstance = h;
}), n.expose(h.value);
const S = p(() => {
const e = {
"f-capsule-container": !0
};
return C.value && (e[C.value] = !0), e;
}), B = p(() => ({})), M = p(() => ({
"f-capsule": !0
})), I = c(d), j = c(0), v = c(0), V = p(() => ({
left: `${I.value}px`,
width: `${j.value}px`,
transition: i.value
})), F = p(() => ({
width: `${v.value}px`
})), f = /* @__PURE__ */ new Map();
function P(e) {
var a;
if (f.has(e.value)) {
const l = (a = f.get(e.value)) == null ? void 0 : a.value;
if (l) {
const R = l.getBoundingClientRect(), T = o.value.getBoundingClientRect();
I.value = R.left - T.left + d + o.value.scrollLeft, j.value = R.width - 2 * d;
}
}
}
function A(e, a) {
const l = e.value;
u.value = l, n.emit("update:modelValue", l), P(e), a && n.emit("change", l);
}
function y(e) {
const a = s.value.findIndex((l) => l.value === e);
a > -1 && A(s.value[a], !1);
}
g(() => t.modelValue, (e) => {
u.value = e, y(u.value);
}), g(() => t.items, async (e) => {
s.value = e, await $(), y(u.value), v.value = Array.from(f.values()).reduce((a, l) => (a += l.value.clientWidth, a), 0);
}), b(async () => {
y(u.value), await $(), i.value = "0.1s ease-out all", v.value = Array.from(f.values()).reduce((e, a) => (e += a.value.clientWidth, e), 0);
});
function k(e, a) {
A(a, !0);
}
function q(e, a) {
f.set(a, e);
}
function D(e, a) {
return r(Q, {
name: e.name,
value: e.value,
isActive: e.value === u.value,
index: a,
onMounted: q,
onActive: k
}, null);
}
return () => r("span", {
ref: o,
class: S.value,
style: B.value
}, [r("span", {
class: "f-capsule-pane"
}, [s.value.map((e, a) => D(e, a))]), r("small", {
class: M.value,
style: V.value
}, null), r("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
}, x = z(W, ae, ne, se, ue);
m.register = (t, n, s) => {
t.capsule = N, n.capsule = x;
};
m.registerDesigner = (t, n, s) => {
t.capsule = m, n.capsule = x;
};
const ve = E(m);
export {
m as CapsuleDesign,
ve as default,
x as propsResolver
};