@layui/layui-vue
Version:
a component library for Vue 3 base on layui-vue
16 lines (15 loc) • 3.58 kB
JavaScript
import { defineComponent as I, useSlots as T, provide as A, toRefs as K, computed as Y, openBlock as t, createElementBlock as o, normalizeClass as j, unref as a, createElementVNode as q, normalizeStyle as y, createVNode as G, isRef as S, createSlots as c, withCtx as u, renderSlot as m, normalizeProps as f, guardReactiveProps as k, createBlock as V, createCommentVNode as v, Fragment as B, renderList as b } from "vue";
/* empty css */
import _ from "./components/bar.js";
import H from "./components/mark.js";
import { useSlider as J, LAYUI_SLIDER_KEY as O } from "./use-slider.js";
import { useSliderMark as Q } from "./components/use-slider-mark.js";
const W = { key: 1, class: "layui-slider-stops" }, X = { key: 2, class: "layui-slider-mark" }, oe = I({ name: "LaySlider", __name: "index", props: { vertical: { type: Boolean, default: !1 }, modelValue: { default: 0 }, rangeValue: { default: () => [] }, min: { default: 0 }, max: { default: 100 }, step: { default: 1 }, disabled: { type: Boolean, default: !1 }, range: { type: Boolean, default: !1 }, showDots: { type: Boolean, default: !1 }, marks: {}, reverse: { type: Boolean, default: !1 }, isFollowMark: { type: Boolean, default: !0 }, tooltipProps: { default: () => ({ disabled: !1, placement: "top", isDark: !1 }) }, alwayShowTooltip: { type: Boolean, default: !1 }, formatTooltip: {} }, emits: ["update:modelValue", "update:rangeValue", "change"], setup(C, { emit: w }) {
const r = C, D = w, d = T(), { marksList: i, getSortMarks: P } = Q(r), { handClick: g, barStyle: L, firstVal: n, secondVal: p, slider: $, laySliderBar1: x, laySliderBar2: z, dotStyle: h, getStop: E, getCalcPos: M, updateDragging: N, tooltipProp: R } = J(r, D, P);
A(O, { ...K(r), tooltipProp: R, firstVal: n, secondVal: p, updateDragging: N, getCalcPos: M });
const U = Y(() => r.marks ? i.value.reduce((l, s) => (l.push(s.pos), l), []) : r.showDots ? E.value : []);
return (l, s) => (t(), o("div", { class: j(["layui-slider", { "layui-slider-horizontal": !l.vertical, "layui-slider-vertical": l.vertical, "is-disabled": l.disabled, "is-reverse": l.reverse }]), ref_key: "slider", ref: $, onClick: s[2] || (s[2] = (...e) => a(g) && a(g)(...e)) }, [q("div", { class: "layui-slider-bar", style: y(a(L)) }, null, 4), G(_, { ref_key: "laySliderBar1", ref: x, modelValue: a(n), "onUpdate:modelValue": s[0] || (s[0] = (e) => S(n) ? n.value = e : null) }, c({ _: 2 }, [a(d).thumb ? { name: "thumb", fn: u(() => [m(l.$slots, "thumb")]), key: "0" } : void 0, a(d).custom ? { name: "custom", fn: u((e) => [m(l.$slots, "custom", f(k(e)))]), key: "1" } : void 0]), 1032, ["modelValue"]), l.range ? (t(), V(_, { key: 0, ref_key: "laySliderBar2", ref: z, modelValue: a(p), "onUpdate:modelValue": s[1] || (s[1] = (e) => S(p) ? p.value = e : null) }, c({ _: 2 }, [a(d).thumb ? { name: "thumb", fn: u(() => [m(l.$slots, "thumb")]), key: "0" } : void 0, a(d).custom ? { name: "custom", fn: u((e) => [m(l.$slots, "custom", f(k(e)))]), key: "1" } : void 0]), 1032, ["modelValue"])) : v("", !0), l.showDots || a(i).length > 0 ? (t(), o("div", W, [(t(!0), o(B, null, b(U.value, (e) => (t(), o("div", { class: "layui-slider-stop", key: e, style: y(a(h)(e)) }, null, 4))), 128))])) : v("", !0), a(i) && a(i).length > 0 ? (t(), o("div", X, [(t(!0), o(B, null, b(a(i), (e) => (t(), V(H, { mark: e.mark, style: y(a(h)(e.pos)), key: e.pos }, c({ _: 2 }, [a(d).mark ? { name: "mark", fn: u(({ mark: F }) => [m(l.$slots, "mark", f(k(F)))]), key: "0" } : void 0]), 1032, ["mark", "style"]))), 128))])) : v("", !0)], 2));
} });
export {
oe as default
};