@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, openBlock as S, createElementBlock as g, normalizeClass as x, unref as d, normalizeStyle as B, 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) => (S(), g("li", {
ref_key: "wrapper",
ref: n,
class: x([
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: B(u.value)
}, [
E(f.$slots, "default", {}, () => [
N(k(e.value), 1)
])
], 14, $));
}
});
export {
W as default
};
//# sourceMappingURL=wheel-item.vue2.mjs.map