@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
91 lines (90 loc) • 2.56 kB
JavaScript
import { defineComponent as S, ref as C, watch as L } from "vue";
import { useNameHelper as x } from "@vexip-ui/config";
import { useModifier as A, useMoving as D } from "@vexip-ui/hooks";
import { toFixed as h, boundRange as N } from "@vexip-ui/utils";
const Y = S({
name: "ColorPalette",
props: {
hue: {
type: Number,
default: 0,
validator: (e) => e >= 0 && e <= 360
},
value: {
type: Number,
default: 1,
validator: (e) => e >= 0 && e <= 1
},
saturation: {
type: Number,
default: 0,
validator: (e) => e >= 0 && e <= 1
}
},
emits: ["edit-start", "edit-end", "change"],
setup(e, { emit: i }) {
const a = C((1 - e.value) * 100), l = C(e.saturation * 100);
let v = a.value, s = l.value, g, m, b, w;
const { target: r } = A({
passive: !1,
onKeyDown: (t, u) => {
if (u.up || u.down || u.left || u.right) {
t.preventDefault();
const d = t.ctrlKey ? 10 : t.altKey ? 0.5 : 2, f = u.up || u.left ? -1 : 1, o = d * f;
u.up || u.down ? a.value += o : l.value += o, n(), v = a.value, s = l.value, c();
}
}
}), { moving: K } = D({
target: r,
onStart: (t, u) => {
if (!r.value || u.button > 0)
return !1;
const d = r.value.getBoundingClientRect(), { top: f, left: o, width: y, height: M } = d;
g = y, m = M, a.value = (b = t.clientY - f) / M * 100, l.value = (w = t.clientX - o) / y * 100, n(), i("edit-start");
let p = !1;
Math.abs(a.value - v) >= 0.01 && (v = a.value, p = !0), Math.abs(l.value - s) >= 0.01 && (s = l.value, p = !0), p && c();
},
onMove: (t) => {
a.value = (b + t.deltaY) / m * 100, l.value = (w + t.deltaX) / g * 100, n(), c();
},
onEnd: () => {
i("edit-end");
}
});
L(
() => e.value,
(t) => {
a.value = (1 - t) * 100, n();
},
{ immediate: !0 }
), L(
() => e.saturation,
(t) => {
l.value = t * 100, n();
},
{ immediate: !0 }
);
function n() {
a.value = h(N(a.value, 0, 100), 3), l.value = h(N(l.value, 0, 100), 3);
}
function c() {
i("change", {
h: e.hue,
s: l.value / 100,
v: h(1 - a.value / 100, 3)
});
}
return {
nh: x("color-picker"),
currentTop: a,
currentLeft: l,
editing: K,
wrapper: r
// handleMouseDown
};
}
});
export {
Y as default
};
//# sourceMappingURL=color-palette.vue2.mjs.map