@nextcloud/vue
Version:
Nextcloud vue components
223 lines (222 loc) • 8.12 kB
JavaScript
require('../assets/NcColorPicker-C1DuuANb.css');
"use strict";
const Components_NcButton = require("../Components/NcButton.cjs");
const NcPopover = require("./NcPopover-BKlH1mbx.cjs");
const _l10n = require("./_l10n-CjO_W5Dt.cjs");
const GenColors = require("./GenColors-Di5GSft7.cjs");
const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
const ArrowLeft = require("./ArrowLeft-BP7yfzCQ.cjs");
const Check = require("./Check-Du8mPz_B.cjs");
const DotsHorizontal = require("./DotsHorizontal-BoI3vnhk.cjs");
const vueColor = require("vue-color");
const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
_l10n.register(_l10n.t1);
const HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i;
const _sfc_main = {
name: "NcColorPicker",
components: {
ArrowLeft: ArrowLeft.ArrowLeft,
Check: Check.Check,
Chrome: vueColor.Chrome,
DotsHorizontal: DotsHorizontal.DotsHorizontal,
NcButton: Components_NcButton,
NcPopover: NcPopover.NcPopover
},
model: {
prop: "modelValue",
event: "update:modelValue"
},
props: {
/**
* Removed in v9 - use `modelValue` (`v-model`) instead
* @deprecated
*/
value: {
type: String,
default: void 0
},
/**
* A HEX color that represents the initial value of the picker
*/
modelValue: {
type: String,
default: void 0
},
/**
* Set to `true` to enable advanced fields including HEX, RGB, and HSL
*/
advancedFields: {
type: Boolean,
default: false
},
/**
* Limit selectable colors to only the provided palette
*/
paletteOnly: {
type: Boolean,
default: false
},
/**
* Provide a custom array of colors to show.
* Can be either an array of string hexadecimal colors,
* or an array of object with a `color` property with hexadecimal color string,
* and a `name` property for accessibility.
*
* @type {string[] | {color: string, name: string}[]}
*/
palette: {
type: Array,
default: () => [...GenColors.defaultPalette],
validator: (palette) => palette.every(
(item) => typeof item === "string" && HEX_REGEX.test(item) || typeof item === "object" && item.color && HEX_REGEX.test(item.color)
)
},
/**
* Selector for the popover container
*/
container: {
type: [String, Object, Element, Boolean],
default: "body"
}
},
emits: [
"submit",
"close",
"update:open",
/**
* Removed in v9 - use `update:modelValue` (`v-model`) instead
* @deprecated
*/
"update:value",
/**
* Emits a hexadecimal string e.g. '#ffffff'
*/
"update:modelValue",
/** Same as update:modelValue for Vue 2 compatibility */
"update:model-value",
"input"
],
setup() {
const model = useModelMigration.useModelMigration("value", "update:value", true);
return {
model
};
},
data() {
return {
currentColor: this.model,
advanced: false,
ariaBack: _l10n.t("Back"),
ariaMore: _l10n.t("More options")
};
},
computed: {
normalizedPalette() {
return this.palette.map((item) => ({
color: typeof item === "object" ? item.color : item,
name: typeof item === "object" && item.name ? item.name : _l10n.t("A color with a HEX value {hex}", { hex: item.color })
}));
},
uid() {
return GenRandomId.GenRandomId();
},
contrastColor() {
const black = "#000000";
const white = "#FFFFFF";
return this.calculateLuma(this.currentColor) > 0.5 ? black : white;
}
},
watch: {
model(color) {
this.currentColor = color;
}
},
methods: {
t: _l10n.t,
/**
* Submit a picked colour and close picker
* @param {Function} hideCallback callback to close popover
*/
handleConfirm(hideCallback) {
this.$emit("submit", this.currentColor);
hideCallback();
this.advanced = false;
},
handleClose() {
this.$emit("close");
this.$emit("update:open", false);
},
/**
* Inner navigations
*/
handleBack() {
this.advanced = false;
},
handleMoreSettings() {
this.advanced = true;
},
/**
* Pick a colour
*
* @param {string} color the picked color
*/
pickColor(color) {
if (typeof color !== "string") {
color = this.currentColor.hex;
}
this.currentColor = color;
this.model = color;
this.$emit("input", color);
},
/**
* Calculate luminance of provided hex color
*
* @param {string} color the hex color
*/
calculateLuma(color) {
const [red, green, blue] = this.hexToRGB(color);
return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
},
/**
* Convert hex color to RGB
*
* @param {string} hex the hex color
*/
hexToRGB(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("NcPopover", _vm._g(_vm._b({ attrs: { "popup-role": "dialog", "container": _vm.container }, on: { "apply-hide": _vm.handleClose }, scopedSlots: _vm._u([{ key: "trigger", fn: function(slotProps) {
return [_vm._t("default", null, null, slotProps)];
} }, { key: "default", fn: function(slotProps) {
return [_c("div", { staticClass: "color-picker", class: { "color-picker--advanced-fields": _vm.advanced && _vm.advancedFields }, attrs: { "role": "dialog", "aria-modal": "true", "aria-label": _vm.t("Color picker") } }, [_c("Transition", { attrs: { "name": "slide", "mode": "out-in" } }, [!_vm.advanced ? _c("div", { staticClass: "color-picker__simple" }, _vm._l(_vm.normalizedPalette, function({ color, name }, index) {
return _c("label", { key: index, staticClass: "color-picker__simple-color-circle", class: { "color-picker__simple-color-circle--active": color === _vm.currentColor }, style: { backgroundColor: color } }, [color === _vm.currentColor ? _c("Check", { attrs: { "size": 20, "fill-color": _vm.contrastColor } }) : _vm._e(), _c("input", { staticClass: "hidden-visually", attrs: { "type": "radio", "aria-label": name, "name": `color-picker-${_vm.uid}` }, domProps: { "checked": color === _vm.currentColor }, on: { "click": function($event) {
return _vm.pickColor(color);
} } })], 1);
}), 0) : _c("Chrome", { staticClass: "color-picker__advanced", attrs: { "disable-alpha": true, "disable-fields": !_vm.advancedFields }, on: { "input": _vm.pickColor }, model: { value: _vm.currentColor, callback: function($$v) {
_vm.currentColor = $$v;
}, expression: "currentColor" } })], 1), !_vm.paletteOnly ? _c("div", { staticClass: "color-picker__navigation" }, [_vm.advanced ? _c("NcButton", { attrs: { "type": "tertiary", "aria-label": _vm.ariaBack }, on: { "click": _vm.handleBack }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("ArrowLeft", { attrs: { "size": 20 } })];
}, proxy: true }], null, true) }) : _c("NcButton", { attrs: { "type": "tertiary", "aria-label": _vm.ariaMore }, on: { "click": _vm.handleMoreSettings }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("DotsHorizontal", { attrs: { "size": 20 } })];
}, proxy: true }], null, true) }), _c("NcButton", { attrs: { "type": "primary" }, on: { "click": function($event) {
return _vm.handleConfirm(slotProps.hide);
} } }, [_vm._v(" " + _vm._s(_vm.t("Choose")) + " ")])], 1) : _vm._e()], 1)];
} }], null, true) }, "NcPopover", _vm.$attrs, false), _vm.$listeners));
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"d877eef3"
);
const NcColorPicker = __component__.exports;
exports.NcColorPicker = NcColorPicker;