vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
48 lines (47 loc) • 1.6 kB
JavaScript
import { defineComponent as v, useTemplateRef as E, createElementBlock as S, openBlock as x, unref as e, normalizeStyle as a, normalizeClass as r, createElementVNode as i } from "vue";
import { useSlider as B } from "./hook/useSlider.mjs";
const h = /* @__PURE__ */ v({
name: "Slider",
__name: "index",
props: {
modelValue: {},
min: { default: 0 },
max: { default: 100 },
height: { default: 200 },
width: { default: 4 },
step: { default: 1 },
direction: { default: "horizontal" },
disabled: { type: Boolean, default: !1 },
theme: { default: "var(--app-theme)" },
animated: { type: Boolean }
},
emits: ["update:modelValue", "change"],
setup(m, { emit: u }) {
const n = m, f = u, d = E("sliderEl"), { classNames: p, styles: y, fillStyle: c, thumbStyle: k, onClickTrack: o, startDrag: s } = B(n, d, f);
return (C, l) => (x(), S("div", {
ref_key: "sliderEl",
ref: d,
class: r(["app-slider", e(p)]),
style: a(e(y)),
onClick: l[2] || (l[2] = //@ts-ignore
(...t) => e(o) && e(o)(...t))
}, [
l[3] || (l[3] = i("div", { class: "slider-track" }, null, -1)),
i("div", {
class: r(["slider-fill", { "is-animated": n.animated }]),
style: a(e(c))
}, null, 6),
i("div", {
class: "slider-thumb",
style: a(e(k)),
onMousedown: l[0] || (l[0] = //@ts-ignore
(...t) => e(s) && e(s)(...t)),
onTouchstartPassive: l[1] || (l[1] = //@ts-ignore
(...t) => e(s) && e(s)(...t))
}, null, 36)
], 6));
}
});
export {
h as default
};