y-design-ssr
Version:
SSR component library of YUI with Vue3
242 lines (241 loc) • 6.15 kB
JavaScript
import { ref as k, reactive as R, inject as z, getCurrentInstance as x, onUnmounted as I, computed as f, watch as w, defineComponent as V, createVNode as i } from "vue";
const p = (e, n) => n ? typeof n == "string" ? ` ${e}--${n}` : Array.isArray(n) ? n.reduce((l, t) => l + p(e, t), "") : Object.keys(n).reduce(
(l, t) => l + (n[t] ? p(e, t) : ""),
""
) : "", O = (e) => (n, l) => {
let t = n, r = l;
return t && typeof t != "string" && (r = t, t = ""), t = t ? `${e}__${t}` : e, `${t}${p(t, r)}`;
}, j = () => (e, n) => n ? `${p(`y-${e}`, n)}` : `y-${e}`, E = {
"pull-refresh": {
pulling: "下拉刷新...",
loosing: "释放刷新...",
loading: "数据加载中...",
success: "数据已更新",
failed: "数据跟新失败,请稍后再试"
},
"form-item": {
validateMessage: "请输入正确内容"
}
};
k("zh-CN");
R({
"zh-CN": E
});
const S = (e) => {
const n = `y-${e}`;
return [n, O(n), j()];
}, N = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, M = (e) => {
const n = z(e, null), l = x();
if (n && l) {
const { children: t, addChild: r, removeChild: c } = n;
return r(l), I(() => c(l)), {
index: f(() => t.indexOf(l)),
parent: n
};
}
return {
parent: null,
index: k(-1)
};
}, q = "y-form-item", F = () => {
const e = z(q, null), n = x();
if (e && (n != null && n.proxy)) {
const { setField: l } = e, { resetValidation: t, change: r, validateWithTrigger: c } = e;
return w(
() => n.proxy.modelValue,
() => {
e.instance && e.instance.exposed && (t(), r(), c("onChange"));
}
), l(n), I(() => l(null)), {
parent: e
};
}
return {
parent: null
};
}, [P, Y] = S("radio-group"), A = P, [T, h] = S("icon"), D = (e) => new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/).test(e.toLowerCase()), L = /* @__PURE__ */ V({
name: T,
props: {
dot: {
type: Boolean,
default: !1
},
name: {
type: String,
default: ""
},
size: {
type: [Number, String],
default: ""
},
info: {
type: [Number, String],
default: ""
},
badge: {
type: [Number, String],
default: ""
},
color: {
type: String,
default: ""
},
subColor: {
type: String,
default: ""
},
subBg: {
type: String,
default: ""
},
classPrefix: {
type: String,
default: "y-icon"
},
/**
* @ignore
*/
tag: {
type: String,
default: "i"
}
},
emits: ["click"],
setup(e, {
slots: n,
emit: l
}) {
const t = D(e.name), r = () => ({
fontSize: N(e.size),
color: e.color
}), c = (u) => {
l("click", u);
};
return () => {
const {
name: u,
classPrefix: g,
badge: m,
dot: y,
subColor: v,
subBg: o,
tag: b
} = e;
return i(b, {
class: `${g}${t ? "" : ` y-icon--${u}`}`,
style: r(),
onClick: c
}, {
default: () => {
var d;
return [t ? i("em", {
class: h("node")
}, [i("img", {
class: h("image"),
src: u,
alt: "icon"
}, null)]) : null, y ? i("em", {
class: h("dot"),
style: {
backgroundColor: o
}
}, null) : null, m ? i("em", {
class: h("badge"),
style: {
color: v,
backgroundColor: o
}
}, [m]) : null, ((d = n.default) == null ? void 0 : d.call(n)) || null];
}
});
};
}
});
function _(e) {
const n = e;
return n.install = (l) => {
const { name: t } = e;
t && l.component(t, e);
}, n;
}
const U = _(L), [G, C] = S("radio"), K = /* @__PURE__ */ V({
name: G,
props: {
modelValue: {
type: [Boolean, String, Number],
default: !1
},
name: {
type: String,
default: null
},
disabled: {
type: Boolean,
default: !1
},
square: {
type: Boolean,
default: !0
},
checkedColor: {
type: String,
default: null
},
size: {
type: [Number, String],
default: 20
}
},
setup(e, {
slots: n,
emit: l,
expose: t
}) {
const {
parent: r
} = M(A), c = r === null ? F().parent : null, u = (a, s = null) => f(() => r && r.props[a] !== null ? r.props[a] : Object.keys(e).includes(a) ? e[a] : s), g = u("disabled"), m = u("square"), y = u("checkedColor"), v = u("horizontal", !1), o = f(() => r ? r.props.modelValue === e.name : typeof e.modelValue == "boolean" ? e.modelValue : e.modelValue === e.name), b = (a) => {
var s;
g.value || typeof a < "u" && o.value === a || ((s = r == null ? void 0 : r.onItemChange) == null || s.call(r, e.name), l("update:modelValue", !e.modelValue), l("change", !e.modelValue));
};
t({
toggle: b
});
const d = f(() => ["mini", "small", "middle", "large"].includes(e.size.toString() || (c == null ? void 0 : c.getProp("size"))) ? null : N(e.size)), B = f(() => {
const a = {};
return d.value && (a.width = d.value, a.height = d.value), o.value && y.value && (a.backgroundColor = y.value), a;
});
return () => {
var s, $;
const {
size: a
} = e;
return i("div", {
class: C({
disabled: g.value,
checked: o.value,
horizontal: v.value,
[a]: ["mini", "small", "middle", "large"].includes(a.toString())
}),
onClick: () => b(),
role: "radio",
"aria-checked": o.value
}, [((s = n.icon) == null ? void 0 : s.call(n, {
checked: o.value
})) || i("div", {
class: C("icon", {
checked: o.value,
square: m.value
}),
style: B.value
}, [o.value ? i(U, {
name: "done"
}, null) : null]), i("div", {
class: C("label")
}, [($ = n.default) == null ? void 0 : $.call(n)])]);
};
}
});
const H = _(K);
export {
H as default
};