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