@nextcloud/vue
Version:
Nextcloud vue components
224 lines (223 loc) • 10 kB
JavaScript
import '../assets/NcColorPicker-CO_Jq2Ow.css';
import { defineComponent, mergeModels, useModel, ref, computed, createBlock, openBlock, unref, withCtx, createElementVNode, normalizeClass, createVNode, createElementBlock, createCommentVNode, Transition, Fragment, renderList, normalizeStyle, createTextVNode, toDisplayString, renderSlot, normalizeProps, guardReactiveProps } from "vue";
import { Chrome } from "@ckpack/vue-color";
import { d as mdiCheck, s as mdiCloseCircleOutline, t as mdiArrowLeft, u as mdiDotsHorizontal } from "./mdi-XFJRiRqJ.mjs";
import { r as register, a as t } from "./_l10n-DrTiip5c.mjs";
import { d as defaultPalette, a as COLOR_BLACK, b as COLOR_WHITE } from "./colors-Go3zmZRD.mjs";
import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
import { l as logger } from "./logger-D3RVzcfQ.mjs";
import { N as NcButton } from "./NcButton-Dc8V4Urj.mjs";
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
import { N as NcPopover } from "./NcPopover-C-MTaPCs.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
register();
const _hoisted_1 = ["aria-label"];
const _hoisted_2 = {
key: 0,
class: "color-picker__simple"
};
const _hoisted_3 = ["aria-label", "name", "checked", "onClick"];
const _hoisted_4 = ["title"];
const _hoisted_5 = ["aria-label", "name", "checked"];
const _hoisted_6 = {
key: 0,
class: "color-picker__navigation"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "NcColorPicker",
props: /* @__PURE__ */ mergeModels({
advancedFields: { type: Boolean },
clearable: { type: Boolean },
container: { default: "body" },
palette: { default: () => [] },
paletteOnly: { type: Boolean }
}, {
"modelValue": { required: true },
"modelModifiers": {},
"open": { type: Boolean },
"openModifiers": {}
}),
emits: /* @__PURE__ */ mergeModels(["submit", "closed"], ["update:modelValue", "update:open"]),
setup(__props, { emit: __emit }) {
const currentColor = useModel(__props, "modelValue");
const open = useModel(__props, "open");
const props = __props;
const emit = __emit;
const HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i;
const id = createElementId();
const advanced = ref(false);
const normalizedPalette = computed(() => {
let palette = props.palette;
for (const color of palette) {
if (typeof color === "string" && !color.match(HEX_REGEX) || typeof color === "object" && !color.color?.match(HEX_REGEX)) {
logger.error("[NcColorPicker] Invalid palette passed", { color });
palette = [];
break;
}
}
if (palette.length === 0) {
palette = props.clearable ? [...defaultPalette, COLOR_BLACK, COLOR_WHITE] : [...defaultPalette];
}
return palette.map((item) => ({
color: typeof item === "object" ? item.color : item,
name: typeof item === "object" && item.name ? item.name : t("A color with a HEX value {hex}", { hex: typeof item === "string" ? item : item.color })
}));
});
function handleConfirm(hideCallback) {
emit("submit", currentColor.value);
hideCallback();
advanced.value = false;
}
function toggleColor(color) {
color = typeof color === "string" ? color : color.color;
if (props.clearable && currentColor.value === color) {
currentColor.value = void 0;
} else {
currentColor.value = color;
}
}
function pickCustomColor(color) {
currentColor.value = color.hex;
}
function getContrastColor(color) {
return calculateLuma(color) > 0.5 ? COLOR_BLACK.color : COLOR_WHITE.color;
}
function calculateLuma(color) {
const [red, green, blue] = hexToRGB(color);
return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
}
function hexToRGB(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result) {
return [0, 0, 0];
}
return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
}
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(NcPopover), {
shown: open.value,
"onUpdate:shown": _cache[3] || (_cache[3] = ($event) => open.value = $event),
container: _ctx.container,
"popup-role": "dialog",
onApplyHide: _cache[4] || (_cache[4] = ($event) => emit("closed"))
}, {
trigger: withCtx((slotProps) => [
renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
]),
default: withCtx((slotProps) => [
createElementVNode("div", {
role: "dialog",
class: normalizeClass(["color-picker", {
"color-picker--advanced-fields": advanced.value && _ctx.advancedFields,
"color-picker--clearable": _ctx.clearable
}]),
"aria-modal": "true",
"aria-label": unref(t)("Color picker")
}, [
createVNode(Transition, {
name: "slide",
mode: "out-in"
}, {
default: withCtx(() => [
!advanced.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedPalette.value, ({ color, name }, index) => {
return openBlock(), createElementBlock("label", {
key: index,
class: normalizeClass(["color-picker__simple-color-circle", { "color-picker__simple-color-circle--active": color === currentColor.value }]),
style: normalizeStyle({
backgroundColor: color,
color: getContrastColor(color)
})
}, [
color === currentColor.value ? (openBlock(), createBlock(unref(NcIconSvgWrapper), {
key: 0,
path: unref(mdiCheck)
}, null, 8, ["path"])) : createCommentVNode("", true),
createElementVNode("input", {
type: "radio",
class: "hidden-visually",
"aria-label": name,
name: `color-picker-${unref(id)}`,
checked: color === currentColor.value,
onClick: ($event) => toggleColor(color)
}, null, 8, _hoisted_3)
], 6);
}), 128)),
_ctx.clearable ? (openBlock(), createElementBlock("label", {
key: 0,
class: "color-picker__clear",
title: unref(t)("No color")
}, [
createVNode(unref(NcIconSvgWrapper), {
size: currentColor.value ? 28 : 34,
path: unref(mdiCloseCircleOutline)
}, null, 8, ["size", "path"]),
createElementVNode("input", {
type: "radio",
class: "hidden-visually",
"aria-label": unref(t)("No color"),
name: `color-picker-${unref(id)}`,
checked: !currentColor.value,
onClick: _cache[0] || (_cache[0] = ($event) => currentColor.value = void 0)
}, null, 8, _hoisted_5)
], 8, _hoisted_4)) : createCommentVNode("", true)
])) : (openBlock(), createBlock(unref(Chrome), {
key: 1,
class: "color-picker__advanced",
"disable-alpha": true,
"disable-fields": !_ctx.advancedFields,
"model-value": currentColor.value ?? "#000000",
"onUpdate:modelValue": pickCustomColor
}, null, 8, ["disable-fields", "model-value"]))
]),
_: 1
}),
!_ctx.paletteOnly ? (openBlock(), createElementBlock("div", _hoisted_6, [
advanced.value ? (openBlock(), createBlock(unref(NcButton), {
key: 0,
"aria-label": unref(t)("Back"),
title: unref(t)("Back"),
variant: "tertiary",
onClick: _cache[1] || (_cache[1] = ($event) => advanced.value = false)
}, {
icon: withCtx(() => [
createVNode(unref(NcIconSvgWrapper), {
directional: "",
path: unref(mdiArrowLeft)
}, null, 8, ["path"])
]),
_: 1
}, 8, ["aria-label", "title"])) : (openBlock(), createBlock(unref(NcButton), {
key: 1,
"aria-label": unref(t)("More options"),
title: unref(t)("More options"),
variant: "tertiary",
onClick: _cache[2] || (_cache[2] = ($event) => advanced.value = true)
}, {
icon: withCtx(() => [
createVNode(unref(NcIconSvgWrapper), { path: unref(mdiDotsHorizontal) }, null, 8, ["path"])
]),
_: 1
}, 8, ["aria-label", "title"])),
createVNode(unref(NcButton), {
variant: "primary",
onClick: ($event) => handleConfirm(slotProps.hide)
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(t)("Choose")), 1)
]),
_: 2
}, 1032, ["onClick"])
])) : createCommentVNode("", true)
], 10, _hoisted_1)
]),
_: 3
}, 8, ["shown", "container"]);
};
}
});
const NcColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3d24879b"]]);
export {
NcColorPicker as N
};
//# sourceMappingURL=NcColorPicker-Kc0JqRtp.mjs.map