@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
64 lines (63 loc) • 1.83 kB
JavaScript
import { defineComponent as v, inject as p, ref as r, reactive as b, toRef as s, computed as h, onMounted as y, onBeforeUnmount as w, createElementBlock as S, openBlock as g, normalizeStyle as x, normalizeClass as B, unref as d, renderSlot as E, createTextVNode as N, toDisplayString as k } from "vue";
import { useNameHelper as I } from "@vexip-ui/config";
import { WHEEL_STATE as T } from "./symbol.mjs";
const $ = ["aria-disabled", "aria-selected"], W = /* @__PURE__ */ v({
name: "WheelItem",
__name: "wheel-item",
props: {
value: {
type: [Number, String],
default: null
},
disabled: {
type: Boolean,
default: !1
},
active: {
type: Boolean,
default: !1
},
meta: {
type: [String, Number, Object],
default: null
}
},
setup(e, { expose: m }) {
const t = e, a = I("wheel"), l = p(T, null), i = r(0), o = r(0), n = r(), c = b({
width: i,
height: o,
el: n,
value: s(t, "value"),
disabled: s(t, "disabled"),
meta: s(t, "meta")
}), u = h(() => ({
width: i.value ? `${i.value}px` : void 0,
height: o.value ? `${o.value}px` : void 0
}));
return l && (y(() => {
l.increaseItem(c);
}), w(() => {
l.decreaseItem(c);
})), m({ wrapper: n }), (f, j) => (g(), S("li", {
ref_key: "wrapper",
ref: n,
class: B([
d(a).be("item"),
e.disabled && d(a).bem("item", "disabled"),
e.active && d(a).bem("item", "active")
]),
role: "option",
"aria-disabled": e.disabled ? "true" : void 0,
"aria-selected": e.active,
style: x(u.value)
}, [
E(f.$slots, "default", {}, () => [
N(k(e.value), 1)
])
], 14, $));
}
});
export {
W as default
};
//# sourceMappingURL=wheel-item.vue2.mjs.map