mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
64 lines (63 loc) • 2.37 kB
JavaScript
import { defineComponent as g, useSlots as k, useModel as p, watch as T, openBlock as i, createElementBlock as d, Fragment as b, createElementVNode as v, unref as e, normalizeClass as V, renderSlot as w, normalizeStyle as C, toDisplayString as M, createCommentVNode as x, createVNode as N, isRef as B, mergeModels as R } from "vue";
import { useHandler as D, useRender as E, useSize as F } from "./hooks.js";
import { name as m, getDefaultValue as z } from "./config.js";
import U from "./dropdown.vue.js";
import { colorType as H } from "./enums.js";
const j = {
key: 0,
class: "inner-label"
}, K = /* @__PURE__ */ g({
name: m,
__name: "index",
props: /* @__PURE__ */ R({
filterText: { type: Function, default: ({ value: l, type: s, alpha: u }) => s === H.hex ? l : l.replace(")", `,${u / 100})`) },
size: { default: "default" },
showText: { type: Boolean, default: !1 }
}, {
modelValue: { default: z() },
modelModifiers: {},
value: { default: z().value },
valueModifiers: {}
}),
emits: ["update:modelValue", "update:value"],
setup(l) {
const s = k(), u = l, t = p(l, "modelValue"), y = p(l, "value");
T(
t,
(a) => {
a && (y.value = a.value);
},
{ immediate: !0, deep: !0 }
);
const { colorRect: S, dropdown: r, onToggle: f } = D(), { showColor: $ } = E({ modelValue: t }), { sizeValue: c } = F(u);
return (a, o) => (i(), d(b, null, [
v("div", {
ref: "colorNode",
class: V(e(m)),
onClick: o[0] || (o[0] = //@ts-ignore
(...n) => e(f) && e(f)(...n))
}, [
w(a.$slots, "default"),
s.default ? x("", !0) : (i(), d("div", {
key: 0,
class: V(`${e(m)}-inner`),
style: C(`--color:${e($)};--size:${e(c).size}px;fontSize:${e(c).fontSize}px;`)
}, [
o[3] || (o[3] = v("div", { class: "inner-block" }, null, -1)),
l.showText ? (i(), d("div", j, M(l.filterText(t.value)), 1)) : x("", !0)
], 6))
], 2),
N(U, {
modelValue: t.value,
"onUpdate:modelValue": o[1] || (o[1] = (n) => t.value = n),
visible: e(r),
"onUpdate:visible": o[2] || (o[2] = (n) => B(r) ? r.value = n : null),
rect: e(S),
duration: 400
}, null, 8, ["modelValue", "visible", "rect"])
], 64));
}
});
export {
K as default
};