mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
155 lines (154 loc) • 5.27 kB
JavaScript
import { defineComponent as S, useModel as D, ref as g, watch as b, createElementBlock as i, openBlock as s, createElementVNode as u, createVNode as n, normalizeClass as k, toDisplayString as U, Transition as N, withCtx as B, createCommentVNode as E, Fragment as $, renderList as T, unref as V, createBlock as h } from "vue";
import d from "./input.vue.js";
import { colorType as r } from "./enums.js";
import { setModelValue as f, rgbExtractNum as z } from "./utils.js";
import { getDefaultValue as A } from "./config.js";
import { useColorTransform as F } from "../MeComposable/useColorTransform/index.js";
/*!
* mine-h5-ui v2.15.0
* Copyright (c) 2025 biaov
* @license MIT
*/
const L = { class: "color-mode" }, j = { class: "color-mode__select" }, q = ["title"], G = { key: 0 }, H = { class: "child-dropdown" }, I = ["onClick"], J = { class: "color-mode__input-number" }, X = /* @__PURE__ */ S({
__name: "select-mode",
props: {
modelValue: { default: A() },
modelModifiers: {}
},
emits: ["update:modelValue"],
setup(C) {
const o = D(C, "modelValue"), t = g([0, 0, 0]), m = g(""), c = g(!1), y = (a) => {
c.value = a;
}, _ = ({ value: a }) => {
if (o.value.type === a) return;
const e = F(o.value.value, [o.value.type, a]);
f(o, { value: e, type: a }), y(!1);
}, w = (a) => {
f(o, { alpha: Math.round(+a) });
}, M = () => {
const { value: a } = o.value, { value: e } = m;
e.length !== 6 || a.slice(1) === m.value || f(o, { value: `#${e}` });
};
return b(
t,
([a, e, l]) => {
const { type: p, value: x } = o.value;
let v = null;
switch (p) {
case r.rgb:
v = `${p}(${a},${e},${l})`;
break;
case r.hsb:
v = `${p}(${a},${e}%,${l}%)`;
break;
}
v && x !== v && f(o, { value: v });
},
{
deep: !0,
immediate: !0
}
), b(
o,
(a) => {
a.type === r.hex ? m.value = `${a.value}`.replace("#", "") : t.value = z(a.value);
},
{
immediate: !0,
deep: !0
}
), (a, e) => (s(), i("div", L, [
u("div", j, [
u("div", {
class: "item-wrap",
onClick: e[0] || (e[0] = (l) => y(!0))
}, [
u("span", {
class: k(["text", { disabled: c.value }]),
title: o.value.type
}, U(o.value.type), 11, q),
e[10] || (e[10] = u("span", { class: "iconfont icon-right1" }, null, -1))
]),
n(N, { name: "fade" }, {
default: B(() => [
c.value ? (s(), i("div", G, [
u("div", {
class: "child-dropdown--mask",
onClick: e[1] || (e[1] = (l) => y(!1))
}),
u("ul", H, [
(s(!0), i($, null, T(V(r).options(), (l, p) => (s(), i("li", {
key: p,
class: k(["item", { active: o.value.type === l.value }]),
onClick: (x) => _(l)
}, U(l.value), 11, I))), 128))
])
])) : E("", !0)
]),
_: 1
})
]),
u("div", {
class: k(["color-mode__input", { group: o.value.type !== V(r).hex }])
}, [
o.value.type === V(r).hex ? (s(), h(d, {
key: 0,
modelValue: m.value,
"onUpdate:modelValue": [
e[2] || (e[2] = (l) => m.value = l),
M
],
prefix: "#"
}, null, 8, ["modelValue"])) : o.value.type === V(r).hsb ? (s(), i($, { key: 1 }, [
n(d, {
modelValue: t.value[0],
"onUpdate:modelValue": e[3] || (e[3] = (l) => t.value[0] = l),
range: [0, 359]
}, null, 8, ["modelValue"]),
n(d, {
modelValue: t.value[1],
"onUpdate:modelValue": e[4] || (e[4] = (l) => t.value[1] = l),
suffix: "%",
range: [0, 100]
}, null, 8, ["modelValue"]),
n(d, {
modelValue: t.value[2],
"onUpdate:modelValue": e[5] || (e[5] = (l) => t.value[2] = l),
suffix: "%",
range: [0, 100]
}, null, 8, ["modelValue"])
], 64)) : (s(), i($, { key: 2 }, [
n(d, {
modelValue: t.value[0],
"onUpdate:modelValue": e[6] || (e[6] = (l) => t.value[0] = l),
range: [0, 255]
}, null, 8, ["modelValue"]),
n(d, {
modelValue: t.value[1],
"onUpdate:modelValue": e[7] || (e[7] = (l) => t.value[1] = l),
range: [0, 255]
}, null, 8, ["modelValue"]),
n(d, {
modelValue: t.value[2],
"onUpdate:modelValue": e[8] || (e[8] = (l) => t.value[2] = l),
range: [0, 255]
}, null, 8, ["modelValue"])
], 64))
], 2),
u("div", J, [
n(d, {
modelValue: o.value.alpha,
"onUpdate:modelValue": [
e[9] || (e[9] = (l) => o.value.alpha = l),
w
],
range: [0, 100],
suffix: "%"
}, null, 8, ["modelValue"])
])
]));
}
});
export {
X as default
};