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