uv-ui
Version:
基于vue3的移动端组件库
207 lines (206 loc) • 6.38 kB
JavaScript
import { ref as r, watch as O, nextTick as B, computed as E, openBlock as d, createBlock as P, unref as m, mergeProps as I, withCtx as Q, createElementVNode as K, createCommentVNode as R, normalizeStyle as Y, createElementBlock as k, Fragment as z, renderList as U, normalizeClass as Z, toDisplayString as _ } from "vue";
import ee from "../popup/index.js";
import te from "../tab/index.js";
import le from "../icon/index.js";
import { useTouch as ae } from "../../hooks/useTouch.js";
import "../../hooks/useCountDown.js";
import "./cascader.vue_vue_type_style_index_0_lang.js";
const ne = { class: "uv-cascader" }, oe = ["onClick"], ue = {
name: "UvCascader"
}, pe = /* @__PURE__ */ Object.assign(ue, {
props: {
popupProps: {
type: Object,
default: () => ({})
},
tabProps: {
type: Object,
default: () => ({})
},
list: {
type: Array,
default: () => []
},
labelKey: {
type: String,
default: "label"
},
valueKey: {
type: String,
default: "value"
},
childrenKey: {
type: String,
default: "children"
},
placeholder: {
type: String,
default: "\u8BF7\u9009\u62E9"
}
},
emits: ["finish", "change", "close"],
setup(o, { expose: W, emit: x }) {
const u = o, v = r(!1), $ = () => {
v.value = !0;
}, V = () => {
v.value = !1, x("close");
}, s = r(0), i = r([]), C = r(null), S = r(null), y = r(null), f = r(0);
O([() => v.value, () => i.value.length], () => {
v.value && B(() => {
f.value = C.value.offsetWidth, y.value = C.value.querySelectorAll(".uv-cascader-content-item-warp");
});
});
const D = E(() => i.value.length * f.value), T = r(), N = (t) => {
if (T.value = t[u.valueKey], x("change", t[u.valueKey]), w(), !t[u.childrenKey]) {
const l = [], e = [];
i.value.forEach((n) => {
n.selected && (l.push(n.selected[u.valueKey]), e.push(n.selected[u.labelKey]));
}), x("finish", {
value: l.join("/"),
label: e.join("/")
}), V();
}
}, j = E(() => {
const { labelKey: t, placeholder: l } = u, e = [];
return i.value.forEach((n) => {
const { selected: a } = n, c = a ? a[t] : l;
e.push(c);
}), e;
});
O(s, (t) => {
p.value = -f.value * t;
});
const q = (t) => {
s.value = t;
}, g = ae(), p = r(0);
let L = 0;
const F = () => {
S.value.style.transition = "transform 0.3s ease";
}, G = () => {
S.value.style.transition = "none";
};
function H(t) {
g.start(t), L = p.value;
}
function J(t) {
g.move(t), G();
const { deltaX: l } = g;
l.value < 0 && s.value === y.value.length - 1 || l.value > 0 && s.value === 0 || (p.value = L + l.value);
}
function M(t) {
const { deltaX: l } = g;
F();
let e = s.value;
l.value < -f.value / 3 ? (e++, e > y.value.length - 1 && (e = y.value.length - 1)) : l.value > f.value / 3 && (e--, e < 0 && (e = 0)), s.value = e, p.value = -f.value * s.value;
}
const X = (t, l) => {
const { valueKey: e, childrenKey: n } = u;
for (const a of t) {
if (a[e] === l)
return [a];
if (a[n]) {
const c = X(
a[n],
l
);
if (c)
return [a, ...c];
}
}
}, w = () => {
const { list: t, valueKey: l, childrenKey: e } = u;
if (T.value !== void 0) {
const n = X(t, T.value);
if (n) {
let a = t;
i.value = n.map((c) => {
const b = {
options: a,
selected: c
}, h = a.find(
(A) => A[l] === c[l]
);
return h && (a = h[e]), b;
}), a && i.value.push({
options: a,
selected: null
}), B(() => {
s.value = j.value.length - 1;
});
return;
}
}
i.value = [
{
options: t,
selected: null
}
];
};
return w(), O(() => u.list, w, { deep: !0 }), W({
open: $,
close: V
}), (t, l) => (d(), P(m(ee), I({
class: "cascader-popup",
modelValue: v.value,
"onUpdate:modelValue": l[0] || (l[0] = (e) => v.value = e),
close: "",
round: ""
}, o.popupProps), {
default: Q(() => [
K("div", ne, [
v.value ? (d(), P(m(te), I({
key: 0,
color: "#969799",
"acitve-index": s.value,
onChange: q,
list: m(j),
placeholder: o.placeholder,
scroll: "",
shrink: ""
}, o.tabProps), null, 16, ["acitve-index", "list", "placeholder"])) : R("", !0),
K("div", {
class: "uv-cascader-content",
ref_key: "contentRef",
ref: C
}, [
K("div", {
class: "uv-cascader-content-list",
onTouchstart: H,
onTouchmove: J,
onTouchend: M,
ref_key: "contentListRef",
ref: S,
style: Y({ width: `${m(D)}px`, transform: `translateX(${p.value}px)` })
}, [
(d(!0), k(z, null, U(i.value, (e, n) => (d(), k("div", {
class: "uv-cascader-content-item-warp",
key: n
}, [
(d(!0), k(z, null, U(e.options, (a, c) => {
var b, h;
return d(), k("div", {
onClick: (A) => N(a),
class: Z(["uv-cascader-content-item", a[o.valueKey] === ((b = e.selected) == null ? void 0 : b[o.valueKey]) ? "uv-cascader-content-active-item" : ""]),
key: c
}, [
K("div", null, _(a[o.labelKey]), 1),
a[o.valueKey] === ((h = e.selected) == null ? void 0 : h[o.valueKey]) ? (d(), P(m(le), {
key: 0,
name: "select",
size: "20"
})) : R("", !0)
], 10, oe);
}), 128))
]))), 128))
], 36)
], 512)
])
]),
_: 1
}, 16, ["modelValue"]));
}
});
export {
pe as default
};