vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
241 lines (240 loc) • 7.81 kB
JavaScript
import { ref as u, computed as T, watchEffect as U, onMounted as W, onBeforeUnmount as Y, watch as j, withDirectives as q, createElementBlock as d, openBlock as s, withKeys as A, createElementVNode as i, createCommentVNode as R, createBlock as G, normalizeStyle as a, renderSlot as H, normalizeProps as J, guardReactiveProps as Q, createVNode as C, withModifiers as n, Fragment as M, renderList as N, Teleport as X, unref as Z, nextTick as _ } from "vue";
import g from "./BaseIcon-CbVDYv89.js";
import { x as ee } from "./lib-2iaAPQ_c.js";
import { v as oe } from "./vClickOutside-C6WiFswA.js";
import { _ as te } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ne = ["onClick"], le = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-46%)" } }, re = ["value"], ie = ["onClick"], ue = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-46%)" } }, se = ["value"], ae = {
__name: "ColorPicker",
props: {
value: {
type: String,
default: "#ffffff"
},
size: {
type: String,
default: "50px"
},
backgroundColor: {
type: String,
default: "#FFFFFF"
},
buttonBorderColor: {
type: String,
default: "#FFFFFF"
},
teleported: {
type: Boolean,
default: !1
}
},
emits: ["update:value"],
setup(t, { emit: $ }) {
const v = t, F = $, O = u(null), b = u(null), c = u(null), r = u(!1), m = u(!1), y = u({ top: 0, left: 0 }), V = T(() => ({
backgroundColor: v.value,
width: "100%",
height: "100%",
cursor: "pointer"
})), p = T(() => ee(v.value));
function w(o) {
F("update:value", o), r.value = !1;
}
function E(o) {
F("update:value", o.target.value);
}
function x(o) {
o?.stopPropagation?.(), m.value = !0, c.value?.click();
}
function D() {
r.value = !1;
}
function L() {
!m.value && r.value && D();
}
async function K() {
r.value = !r.value, r.value && v.teleported && (await _(), B());
}
function B() {
if (!b.value) return;
const o = b.value.getBoundingClientRect();
y.value = { top: o.top + 36, left: o.right - 48 };
}
function f() {
r.value && v.teleported && B();
}
function k() {
setTimeout(() => m.value = !1, 0);
}
U((o) => {
const e = c.value;
if (!e) return;
const l = () => k(), I = () => k(), S = () => {
};
e.addEventListener("blur", l), e.addEventListener("change", I), e.addEventListener("input", S), o(() => {
e.removeEventListener("blur", l), e.removeEventListener("change", I), e.removeEventListener("input", S);
});
});
function h() {
k();
}
function P() {
document.visibilityState === "visible" && k();
}
W(() => {
window.addEventListener("scroll", f, { passive: !0 }), window.addEventListener("resize", f, { passive: !0 }), window.addEventListener("focus", h), document.addEventListener("visibilitychange", P);
}), Y(() => {
window.removeEventListener("scroll", f), window.removeEventListener("resize", f), window.removeEventListener("focus", h), document.removeEventListener("visibilitychange", P);
}), j(
() => v.value,
(o) => {
c.value && (c.value.value = o);
}
);
const z = u([
"#000000",
"#FFFFFF",
"#FF5733",
"#33FF57",
"#3357FF",
"#FFC300",
"#800080",
"#FF1493",
"#00CED1"
]);
return (o, e) => q((s(), d("div", {
ref_key: "wrapperRef",
ref: O,
onKeydown: A(L, ["esc"]),
style: { height: "100%", width: "100%", position: "relative" }
}, [
i("button", {
ref_key: "buttonRef",
ref: b,
class: "icon",
onClick: K,
style: a(V.value),
type: "button"
}, [
H(o.$slots, "annotator-action-color", J(Q({ color: p.value })), () => [
C(g, {
name: "palette",
stroke: p.value,
size: 22
}, null, 8, ["stroke"])
], !0)
], 4),
r.value && !t.teleported ? (s(), d("div", {
key: 0,
tabindex: "0",
class: "vue-ui-color-picker",
style: a({
backgroundColor: t.backgroundColor,
position: "absolute",
left: "calc(100% + 30px)",
top: "50%",
transform: "translateY(-18%)"
}),
onMousedown: e[2] || (e[2] = n(() => {
}, ["stop"])),
onClick: e[3] || (e[3] = n(() => {
}, ["stop"])),
onTouchstart: e[4] || (e[4] = n(() => {
}, ["stop"]))
}, [
(s(!0), d(M, null, N(z.value, (l) => (s(), d("button", {
key: l,
class: "vue-ui-color-picker-option",
type: "button",
style: a({ backgroundColor: l, outline: `1px solid ${t.buttonBorderColor}` }),
onClick: () => w(l)
}, null, 12, ne))), 128)),
i("button", {
class: "vue-ui-color-picker-option",
type: "button",
style: a({ backgroundColor: t.value, outline: `1px solid ${t.buttonBorderColor}` }),
onClick: n(x, ["stop"]),
onMousedown: e[0] || (e[0] = n(() => {
}, ["stop"])),
onTouchstart: e[1] || (e[1] = n(() => {
}, ["stop"]))
}, [
i("div", le, [
C(g, {
name: "colorPicker",
stroke: p.value,
size: 22
}, null, 8, ["stroke"])
]),
i("input", {
ref_key: "colorInput",
ref: c,
type: "color",
value: t.value,
class: "hidden-input",
onInput: E
}, null, 40, re)
], 36)
], 36)) : R("", !0),
r.value && t.teleported ? (s(), G(X, {
key: 1,
to: "body"
}, [
i("div", {
tabindex: "0",
class: "vue-ui-color-picker",
style: a({
backgroundColor: t.backgroundColor,
position: "fixed",
top: y.value.top + "px",
left: y.value.left + "px",
zIndex: 2147483647
}),
onMousedown: e[7] || (e[7] = n(() => {
}, ["stop"])),
onClick: e[8] || (e[8] = n(() => {
}, ["stop"])),
onTouchstart: e[9] || (e[9] = n(() => {
}, ["stop"]))
}, [
(s(!0), d(M, null, N(z.value, (l) => (s(), d("button", {
key: l,
class: "vue-ui-color-picker-option",
type: "button",
style: a({ backgroundColor: l, outline: `1px solid ${t.buttonBorderColor}` }),
onClick: () => w(l)
}, null, 12, ie))), 128)),
i("button", {
class: "vue-ui-color-picker-option",
type: "button",
style: a({ backgroundColor: t.value, outline: `1px solid ${t.buttonBorderColor}` }),
onClick: n(x, ["stop"]),
onMousedown: e[5] || (e[5] = n(() => {
}, ["stop"])),
onTouchstart: e[6] || (e[6] = n(() => {
}, ["stop"]))
}, [
i("div", ue, [
C(g, {
name: "colorPicker",
stroke: p.value,
size: 22
}, null, 8, ["stroke"])
]),
i("input", {
ref_key: "colorInput",
ref: c,
type: "color",
value: t.value,
class: "hidden-input",
onInput: E
}, null, 40, se)
], 36)
], 36)
])) : R("", !0)
], 32)), [
[Z(oe), L]
]);
}
}, ke = /* @__PURE__ */ te(ae, [["__scopeId", "data-v-e6c0b73a"]]);
export {
ke as C
};