mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
138 lines (137 loc) • 5.85 kB
JavaScript
import { defineComponent as F, mergeModels as G, useModel as S, computed as H, ref as h, watch as I, createBlock as J, openBlock as X, Transition as L, withCtx as O, createElementBlock as Q, createCommentVNode as Z, unref as n, normalizeClass as E, createElementVNode as b, withModifiers as ee, normalizeStyle as R, createVNode as y } from "vue";
import Y from "./slide.vue.js";
import oe from "./select-mode.vue.js";
import { name as D, getDefaultValue as te } from "./config.js";
import { colorType as x, hsbKey as p } from "./enums.js";
import { rgbExtractNum as le, hsbToRect as m, rgbToRgba as ae, setModelValue as P } from "./utils.js";
import re from "./color-panel.vue.js";
import { useSameTarget as se } from "../MeComposable/useSameTarget/index.js";
import { useColorTransform as w } from "../MeComposable/useColorTransform/index.js";
/*!
* mine-h5-ui v2.15.0
* Copyright (c) 2025 biaov
* @license MIT
*/
const ne = { class: "progress-box" }, ue = { class: "progress-box__group" }, $ = 10, A = 10, fe = /* @__PURE__ */ F({
__name: "dropdown",
props: /* @__PURE__ */ G({
duration: { default: 400 },
rect: { default: () => ({
width: 0,
height: 0,
x: 0,
y: 0
}) }
}, {
visible: { default: !1 },
visibleModifiers: {},
modelValue: { default: te() },
modelModifiers: {}
}),
emits: ["update:visible", "update:modelValue"],
setup(f) {
const K = f, k = S(f, "visible"), r = S(f, "modelValue"), s = { width: 260, height: 260 }, V = screen.width - s.width, W = H(() => {
const { width: l, height: e, x: o, y: i } = K.rect;
let a = o, u = i + e + A;
const g = 0, v = screen.width - l, q = screen.height - s.height;
let z = 45;
a < g ? a = g : a > v && (a = v), a > V && (a = V);
let d = ~~((l - $) / 2 + (o - a)), N = -5;
return d += $ / 2, u > q && (u -= s.height + e + A * 2, N = s.height + 5, z = 225), d < 0 ? d = 0 : d > s.width && (d = s.width), `left:${a}px;top:${u}px;width:${s.width}px;height:${s.height}px;--arrow-x:${d}px;--arrow-y:${N}px;--arrow-size:${$}px;--arrow-deg:rotate(${z}deg);`;
}), _ = () => {
k.value = !1;
}, { onClick: M, onMousedown: B, onMouseup: C } = se(_), t = h({
entity: {
value: 0,
bg: "linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
dotBg: ""
},
opacity: {
value: 100,
bg: "",
dotBg: ""
}
}), T = h(""), c = h({
x: 0,
y: 0
}), U = () => {
const { x: l, y: e } = c.value, o = m({ value: t.value.entity.value, type: p.h }), i = m({ value: l, type: p.s }), a = m({ value: e, type: p.b }), u = w(`hsb(${o},${i}%,${a}%)`, [x.hsb, r.value.type]);
P(r, { value: u });
};
I(
r,
(l) => {
const e = w(l.value, [l.type, x.rgb]), o = w(l.value, [l.type, x.hsb]), [i, a, u] = le(o, !0), g = m({ value: a, type: p.s, reverse: !0 }), v = m({ value: u, type: p.b, reverse: !0 });
c.value = { x: g, y: v }, t.value.entity.value = m({ value: i, type: p.h, reverse: !0 }), t.value.entity.dotBg = `hsl(${i},100%,50%)`, t.value.opacity.value = l.alpha, t.value.opacity.dotBg = ae(e, t.value.opacity.value), t.value.opacity.bg = `linear-gradient(90deg, transparent 0%, ${e} 100%)`, T.value = e.replace(")", `,${l.alpha / 100}`);
},
{ immediate: !0, deep: !0 }
);
const j = (l) => P(r, { alpha: Math.round(+l) });
return (l, e) => (X(), J(L, { name: "fade" }, {
default: O(() => [
k.value ? (X(), Q("div", {
key: 0,
class: E(`${n(D)}-mask`),
onClick: e[5] || (e[5] = //@ts-ignore
(...o) => n(M) && n(M)(...o)),
onMousedown: e[6] || (e[6] = //@ts-ignore
(...o) => n(B) && n(B)(...o)),
onMouseup: e[7] || (e[7] = //@ts-ignore
(...o) => n(C) && n(C)(...o))
}, [
b("div", {
class: E(`${n(D)}-dropdown`),
style: R(W.value),
onClick: e[4] || (e[4] = ee(() => {
}, ["stop"]))
}, [
y(re, {
modelValue: c.value,
"onUpdate:modelValue": [
e[0] || (e[0] = (o) => c.value = o),
U
],
background: t.value.entity.dotBg
}, null, 8, ["modelValue", "background"]),
b("div", ne, [
b("div", ue, [
y(Y, {
modelValue: t.value.entity.value,
"onUpdate:modelValue": [
e[1] || (e[1] = (o) => t.value.entity.value = o),
U
],
color: t.value.entity.dotBg,
opacity: "",
background: t.value.entity.bg
}, null, 8, ["modelValue", "color", "background"]),
y(Y, {
modelValue: r.value.alpha,
"onUpdate:modelValue": [
e[2] || (e[2] = (o) => r.value.alpha = o),
j
],
color: t.value.opacity.dotBg,
opacity: "",
background: t.value.opacity.bg
}, null, 8, ["modelValue", "color", "background"])
]),
b("div", {
class: "progress-box__block",
style: R({ backgroundColor: T.value })
}, null, 4)
]),
y(oe, {
modelValue: r.value,
"onUpdate:modelValue": e[3] || (e[3] = (o) => r.value = o)
}, null, 8, ["modelValue"])
], 6)
], 34)) : Z("", !0)
]),
_: 1
}));
}
});
export {
fe as default
};