y-design-ssr
Version:
SSR component library of YUI with Vue3
313 lines (312 loc) • 7.11 kB
JavaScript
import { ref as M, reactive as V, defineComponent as I, onMounted as L, onUnmounted as w, watch as z, createVNode as i, Transition as v, withDirectives as $, vShow as b, computed as C, Teleport as O, Fragment as j } from "vue";
const k = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((o, a) => o + k(e, a), "") : Object.keys(t).reduce(
(o, a) => o + (t[a] ? k(e, a) : ""),
""
) : "", D = (e) => (t, o) => {
let a = t, f = o;
return a && typeof a != "string" && (f = a, a = ""), a = a ? `${e}__${a}` : e, `${a}${k(a, f)}`;
}, R = () => (e, t) => t ? `${k(`y-${e}`, t)}` : `y-${e}`, T = {
"pull-refresh": {
pulling: "下拉刷新...",
loosing: "释放刷新...",
loading: "数据加载中...",
success: "数据已更新",
failed: "数据跟新失败，请稍后再试"
},
"form-item": {
validateMessage: "请输入正确内容"
}
};
M("zh-CN");
V({
"zh-CN": T
});
const A = (e) => {
const t = `y-${e}`;
return [t, D(t), R()];
}, U = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, [F, P, E] = A("mask"), G = {
// 控制显示
modelValue: {
type: Boolean,
default: !1
},
// 层级
zIndex: {
type: [Number, String],
default: null
},
// 动画时长
duration: {
type: Number,
default: 300
},
// 自定义类名
customClass: {
type: String,
default: ""
},
// 自定义样式
customStyle: {
type: Object,
default: () => ({})
},
// 触摸滚动开关
lockScroll: {
type: Boolean,
default: !0
},
onAfterLeave: {
type: Function,
default: null
}
}, s = V([]);
let h = 0;
const q = /* @__PURE__ */ I({
name: F,
props: G,
emits: ["update:modelValue"],
setup(e, {
slots: t
}) {
const o = M("");
L(() => {
o.value = `mask${h}`, h += 1, a(e.modelValue, !0);
}), w(() => {
const n = s.findIndex((l) => l._id === o.value);
n >= 0 && s.splice(n, 1);
}), z(() => e.modelValue, (n) => {
a(n);
});
const a = (n, l) => {
n ? (s.unshift({
_id: o.value,
_state: n
}), s.length > 1 && (s[1]._state = !1)) : l || (s.splice(0, 1), s.length > 0 && (s[0]._state = !0));
}, f = () => {
let n = !1;
for (let l = 0; l < s.length; l++)
s[l]._id === o.value && (n = s[l]._state);
return {
_state: n
};
}, c = (n) => {
const {
lockScroll: l
} = e;
l && (n.preventDefault(), n.stopPropagation());
};
return () => {
const {
customClass: n,
duration: l,
zIndex: m,
customStyle: p,
onAfterLeave: y
} = e, {
_state: u
} = f();
return i(v, {
name: E("animation", "fade"),
onAfterLeave: y
}, {
default: () => {
var r;
return [$(i("div", {
style: {
animationDuration: `${l}ms`,
zIndex: m,
...p
},
class: [P(), n],
onTouchmove: c
}, [(r = t.default) == null ? void 0 : r.call(t)]), [[b, u]])];
}
});
};
}
});
function B(e) {
const t = e;
return t.install = (o) => {
const { name: a } = e;
a && o.component(a, e);
}, t;
}
const _ = B(q), [H, x, N] = A("popup"), J = {
// 控制显示
modelValue: {
type: Boolean,
default: !1
},
// 位置
position: {
type: String,
default: "center"
},
// 圆角
borderRadius: {
type: [Number, String],
default: ""
},
// 自定义类名
customClass: {
type: String,
default: ""
},
// 自定义属性
customStyle: {
type: Object,
default: () => ({})
},
// 自定义类名
maskCustomClass: {
type: String,
default: ""
},
// 自定义属性
maskCustomStyle: {
type: Object,
default: () => ({})
},
// 插入对象
teleport: {
type: String,
default: "body"
},
// 动画时长
duration: {
type: Number,
default: 300
},
// 点击遮罩是否关闭
isCloseOnClickMask: {
type: Boolean,
default: !0
},
onAfterLeave: {
type: Function,
default: null
},
lockScroll: {
type: Boolean,
default: !0
},
zIndex: {
type: Number,
default: 100
}
}, K = /* @__PURE__ */ I({
name: H,
props: J,
emits: ["clickMask", "update:modelValue"],
setup(e, {
slots: t,
emit: o
}) {
const a = C(() => {
const {
position: n,
borderRadius: l,
customStyle: m,
duration: p,
zIndex: y
} = e, u = U(l);
let r = "0";
switch (n) {
case "top":
r = ` 0 0 ${u} ${u}`;
break;
case "bottom":
r = `${u} ${u} 0 0`;
break;
case "left":
r = `0 ${u} ${u} 0`;
break;
case "right":
r = `${u} 0 0 ${u}`;
break;
default:
r = `${u}`;
}
return {
borderRadius: r,
animationDuration: `${p}ms`,
...m,
zIndex: y + 1
};
}), f = (n) => {
o("clickMask", n), e.isCloseOnClickMask && (c.value = !1);
}, c = C({
get: () => e.modelValue,
set: (n) => o("update:modelValue", n)
});
return z(() => c.value, (n, l) => {
n !== l && (n && e.lockScroll ? document.body.style.overflow = "hidden" : document.body.style.overflow = "");
}), () => {
const {
teleport: n,
position: l,
customClass: m,
duration: p,
onAfterLeave: y,
lockScroll: u,
zIndex: r,
maskCustomClass: g,
maskCustomStyle: S
} = e;
return n ? i(O, {
to: n
}, {
default: () => [i(_, {
modelValue: c.value,
"onUpdate:modelValue": (d) => c.value = d,
duration: p,
lockScroll: u,
onClick: f,
onAfterLeave: y,
zIndex: r,
customClass: g,
customStyle: S
}, null), i(v, {
name: N("animation", `slide-${l}`)
}, {
default: () => {
var d;
return [$(i("div", {
style: a.value,
class: [x("content", {
[l]: l
}), m]
}, [((d = t.default) == null ? void 0 : d.call(t)) || null]), [[b, c.value]])];
}
})]
}) : i(j, null, [i(_, {
modelValue: c.value,
"onUpdate:modelValue": (d) => c.value = d,
duration: p,
lockScroll: u,
onClick: f,
onAfterLeave: y,
zIndex: r,
customClass: g,
customStyle: S
}, null), i(v, {
name: N("animation", `slide-${l}`)
}, {
default: () => {
var d;
return [$(i("div", {
style: a.value,
class: [x("content", {
[l]: l
}), m]
}, [((d = t.default) == null ? void 0 : d.call(t)) || null]), [[b, c.value]])];
}
})]);
};
}
});
const W = B(K);
export {
W as default
};