@shopware-ag/meteor-component-library
Version:
The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).
1,224 lines (1,223 loc) • 41.1 kB
JavaScript
import '../mt-colorpicker.css';
"use strict";
const vue = require("vue");
const debounce = require("../debounce-77fa4677.js");
const MtBaseField = require("../mt-base-field-6a3a56a0.js");
const mtFloatingUi_vue_vue_type_style_index_0_lang = require("../mt-floating-ui.vue_vue_type_style_index_0_lang-1a484bca.js");
const MtText = require("./MtText.js");
const focusTrap_esm = require("../focus-trap.esm-8d514d11.js");
const MtButton = require("./MtButton.js");
const MtFieldError = require("./MtFieldError.js");
const vueI18n = require("vue-i18n");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("./MtInheritanceSwitch.js");
require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
require("./MtTooltip.js");
require("../floating-ui.vue-48d5c774.js");
require("../floating-ui.dom-fe395b67.js");
require("../useIsInsideTooltip-f4674e27.js");
require("../index-ab705c2a.js");
require("./MtFieldCopyable.js");
require("../tooltip.directive-7b51326d.js");
require("../id-8e80f112.js");
require("./MtHelpText.js");
require("../useFutureFlags-35232480.js");
require("./MtLoader.js");
const _sfc_main = vue.defineComponent({
name: "MtColorpicker",
components: {
"mt-base-field": MtBaseField.MtBaseField,
"mt-text": MtText,
"mt-floating-ui": mtFloatingUi_vue_vue_type_style_index_0_lang._sfc_main,
"mt-button": MtButton,
"mt-field-error": MtFieldError
},
props: {
/**
* The value of the colorpicker field.
*/
modelValue: {
type: [String, null],
required: false,
default: ""
},
/**
* A label for your text field. Usually used to guide the user what value this field controls.
*/
label: {
type: String,
required: false,
default: null
},
/**
* A text that helps the user to understand what this field does.
*/
helpText: {
type: String,
required: false,
default: null
},
/**
* Change the output value which gets emitted and shown in the field.
* @values auto, hex, hsl, rgb
*/
colorOutput: {
type: String,
required: false,
default: "auto"
},
/**
* If activated then the color value can contain alpha values
*/
alpha: {
type: Boolean,
required: false,
default: true
},
/**
* Determines if the field is disabled.
*/
disabled: {
type: Boolean,
required: false,
default: false
},
/**
* Determines if the field is required.
*/
required: {
type: Boolean,
required: false,
default: false
},
placeholder: {
type: String,
required: false
},
/**
* Toggles the inheritance visualization.
*/
isInherited: {
type: Boolean,
required: false,
default: false
},
/**
* Determines if the field is inheritable.
*/
isInheritanceField: {
type: Boolean,
required: false,
default: false
},
/**
* Determines the active state of the inheritance toggle.
*/
disableInheritanceToggle: {
type: Boolean,
required: false,
default: false
},
/**
* Determines if the field can be edited
*/
readonly: {
type: Boolean,
required: false,
default: false
},
/**
* Toggle the labels above each field inside the colorpicker
*/
colorLabels: {
type: Boolean,
required: false,
default: true
},
zIndex: {
type: [Number, null],
required: false,
default: null
},
/**
* An error in your business logic related to this field.
*
* @example {"code": 500, "detail": "Error while saving"}
*/
error: {
type: Object,
required: false,
default: null
},
/**
* @ignore
*/
name: {
type: String,
required: false,
default: null
},
/**
* Show the colorpicker in a compact mode
*/
compact: {
type: Boolean,
required: false,
default: false
},
/**
* Use apply-mode to apply the color value on button click
*/
applyMode: {
type: Boolean,
required: false,
default: false
}
},
emits: ["update:modelValue", "inheritance-restore", "inheritance-remove"],
setup() {
const { t } = vueI18n.useI18n({
messages: {
en: {
"mt-colorpicker": {
apply: "Apply"
}
},
de: {
"mt-colorpicker": {
apply: "Anwenden"
}
}
}
});
return {
t
};
},
data() {
return {
localValue: this.modelValue || "",
visible: false,
isDragging: false,
userInput: null,
luminanceValue: 50,
saturationValue: 50,
hueValue: 0,
alphaValue: 1,
hasFocus: false,
trap: null,
hueStep: 1,
alphaStep: 0.01
};
},
computed: {
colorValue: {
get() {
return this.localValue;
},
set(newColor) {
this.localValue = newColor;
this.debounceEmitColorValue();
}
},
integerAlpha: {
get() {
return Math.floor(this.alphaValue * 100);
},
set(newAlphaValue) {
this.alphaValue = newAlphaValue / 100;
}
},
sliderBackground() {
return `linear-gradient(90deg, hsla(${this.hueValue}, ${this.saturationValue}%, ${this.luminanceValue}%, 0), hsl(${this.hueValue}, ${this.saturationValue}%, ${this.luminanceValue}%)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='100%25' height='100%25'%3E%3Crect width='10' height='10' x='00' y='00' fill='%23cdd5db' /%3E%3Crect width='10' height='10' x='10' y='10' fill='%23cdd5db' /%3E%3C/svg%3E")`;
},
isColorValid() {
if (typeof this.colorValue === "string") {
return this.colorValue.startsWith("rgb") || this.colorValue.startsWith("hsl") || this.colorValue.startsWith("#");
}
if (!this.colorValue || !this.colorValue.string) {
return false;
}
return this.colorValue.string.startsWith("rgb") || this.colorValue.string.startsWith("hsl") || this.colorValue.string.startsWith("#");
},
previewColorValue() {
if (!this.isColorValid) {
return "transparent";
}
return typeof this.colorValue === "string" ? this.colorValue : this.colorValue.string;
},
selectorBackground() {
return `hsl(${this.hueValue}, 100%, 50%)`;
},
redValue: {
get() {
const value = this.convertHSLtoRGB(
this.hueValue,
this.saturationValue,
this.luminanceValue,
this.alphaValue
);
if (typeof value !== "string") {
return Number(value.red);
}
return Number(value);
},
set(newRedValue) {
this.setSingleRGBValue(newRedValue, "red");
}
},
greenValue: {
get() {
const value = this.convertHSLtoRGB(
this.hueValue,
this.saturationValue,
this.luminanceValue,
this.alphaValue
);
if (typeof value !== "string") {
return Number(value.green);
}
return Number(value);
},
set(newGreenValue) {
this.setSingleRGBValue(newGreenValue, "green");
}
},
blueValue: {
get() {
const value = this.convertHSLtoRGB(
this.hueValue,
this.saturationValue,
this.luminanceValue,
this.alphaValue
);
if (typeof value !== "string") {
return Number(value.blue);
}
return Number(value);
},
set(newBlueValue) {
this.setSingleRGBValue(newBlueValue, "blue");
}
},
rgbValue() {
const value = this.convertHSLtoRGB(
Math.abs(this.hueValue),
Math.abs(this.saturationValue),
Math.abs(this.luminanceValue),
Math.abs(this.alphaValue)
);
if (typeof value !== "string") {
return value.string;
}
return value;
},
hslValue() {
const hue = Math.abs(Math.floor(this.hueValue));
const saturation = Math.abs(Math.floor(this.saturationValue));
const luminance = Math.abs(Math.floor(this.luminanceValue));
if (this.alphaValue !== 1) {
const alpha = Math.abs(Number(this.alphaValue.toFixed(2)));
return `hsla(${hue}, ${saturation}%, ${luminance}%, ${alpha})`;
}
return `hsl(${hue}, ${saturation}%, ${luminance}%)`;
},
hexValue: {
get() {
if (this.alphaValue < 1) {
return this.convertHSLtoHEX(
this.hueValue,
this.saturationValue,
this.luminanceValue,
this.alphaValue
);
}
return this.convertHSLtoHEX(this.hueValue, this.saturationValue, this.luminanceValue);
},
set(newValue) {
const newHexValue = newValue;
const validHexCharacters = /^#[0-9a-f]{3,8}/i;
if (!validHexCharacters.test(newHexValue)) {
return;
}
const hslValue = this.convertHEXtoHSL(newValue);
if (hslValue === false) {
return;
}
this.setHslaValues(
hslValue.hue,
hslValue.saturation,
hslValue.luminance,
hslValue.alpha ?? this.alphaValue
);
}
},
convertedValue() {
switch (this.colorOutput) {
case "auto": {
return this.alphaValue < 1 ? this.rgbValue : this.hexValue;
}
case "rgb": {
return this.rgbValue;
}
case "hsl": {
return this.hslValue;
}
case "hex":
default: {
return this.hexValue;
}
}
},
selectorPositionX() {
const offsetX = 9;
return `calc(${this.saturationValue}% - ${offsetX}px)`;
},
selectorPositionY() {
const offsetY = 9;
return `calc(${Math.abs(this.luminanceValue - 100)}% - ${offsetY}px)`;
},
selectorStyles() {
return {
backgroundColor: this.hslValue,
top: this.selectorPositionY,
left: this.selectorPositionX
};
},
componentClasses() {
return {
"mt-colorpicker": true,
"mt-colorpicker--compact": this.compact
};
}
},
watch: {
modelValue() {
this.colorValue = this.modelValue || "";
},
hslValue() {
this.colorValue = this.convertedValue;
},
visible(visibleStatus, visibleStatusBefore) {
var _a;
if (this.applyMode) {
if (!visibleStatus && visibleStatusBefore) {
this.colorValue = this.modelValue || "";
}
}
if (!visibleStatus) {
(_a = this.trap) == null ? void 0 : _a.deactivate();
return;
}
const color = this.colorValue;
const colorString = typeof color === "string" ? color : color == null ? void 0 : color.string;
if (!colorString) {
return;
}
if (colorString.startsWith("#")) {
const convertedHSLValue = this.convertHEXtoHSL(colorString);
if (!convertedHSLValue) {
return;
}
this.setHslaValues(
convertedHSLValue.hue,
convertedHSLValue.saturation,
convertedHSLValue.luminance,
convertedHSLValue.alpha
);
} else if (colorString.startsWith("rgb")) {
const rgbValues = this.splitRGBValues(colorString);
const convertedHSLValue = this.convertRGBtoHSL(
rgbValues.red,
rgbValues.green,
rgbValues.blue
);
this.setHslaValues(
convertedHSLValue.hue,
convertedHSLValue.saturation,
convertedHSLValue.luminance,
rgbValues.alpha
);
} else if (colorString.startsWith("hsl")) {
const hslValues = this.splitHSLValues(colorString);
this.setHslaValues(
hslValues.hue,
hslValues.saturation,
hslValues.luminance,
hslValues.alpha
);
}
}
},
beforeUnmount() {
window.removeEventListener("mousedown", this.outsideClick);
if (this.trap) {
this.trap.deactivate();
}
},
methods: {
debounceEmitColorValue: debounce.debounce(function emitValue() {
if (this.applyMode) {
return;
}
this.$emit("update:modelValue", this.colorValue);
}, 50),
outsideClick(e) {
if (/^mt-colorpicker__previewColor.active/.test(e.target._prevClass)) {
return;
}
const isColorpicker = e.target.closest(".mt-colorpicker__colorpicker");
if (isColorpicker !== null) {
return;
}
this.visible = false;
if (this.trap) {
this.trap.deactivate();
}
this.removeOutsideClickEvent();
},
setOutsideClickEvent() {
window.addEventListener("mousedown", this.outsideClick);
},
removeOutsideClickEvent() {
window.removeEventListener("mousedown", this.outsideClick);
},
toggleColorPicker() {
if (this.disabled) {
return;
}
this.visible = !this.visible;
this.$nextTick(() => {
const modal = this.$refs.modal;
if (modal) {
this.trap = focusTrap_esm.createFocusTrap(modal, {
escapeDeactivates: true,
clickOutsideDeactivates: true,
initialFocus: false,
tabbableOptions: {
displayCheck: "none"
}
});
this.trap.activate();
}
});
if (this.visible) {
this.setOutsideClickEvent();
return;
}
this.removeOutsideClickEvent();
},
applyColor() {
this.$emit("update:modelValue", this.colorValue);
this.visible = false;
},
moveSelector(event) {
if (!this.isDragging) {
return;
}
const colorpickerLocation = this.$refs.colorPicker.getBoundingClientRect();
const cursorX = event.clientX - colorpickerLocation.left;
const cursorY = event.clientY - colorpickerLocation.top;
const xValue = cursorX / colorpickerLocation.width * 100;
let correctedXValue;
if (xValue > 100) {
correctedXValue = 100;
} else if (xValue < 0) {
correctedXValue = 0;
} else {
correctedXValue = xValue;
}
const yValue = (cursorY / colorpickerLocation.height - 1) * -100;
let correctedYValue;
if (yValue > 100) {
correctedYValue = 100;
} else if (yValue < 0) {
correctedYValue = 0;
} else {
correctedYValue = yValue;
}
this.saturationValue = Math.floor(correctedXValue);
this.luminanceValue = Math.floor(correctedYValue);
},
keyMoveSelector(event) {
if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
return;
}
event.preventDefault();
const BASE_STEP = 1;
const multiplier = event.shiftKey && event.ctrlKey ? 10 : event.shiftKey ? 5 : 1;
const STEP_SIZE = BASE_STEP * multiplier;
let newSaturationValue = this.saturationValue;
let newLuminanceValue = this.luminanceValue;
switch (event.key) {
case "ArrowRight":
newSaturationValue = Math.min(100, newSaturationValue + STEP_SIZE);
break;
case "ArrowLeft":
newSaturationValue = Math.max(0, newSaturationValue - STEP_SIZE);
break;
case "ArrowUp":
newLuminanceValue = Math.min(100, newLuminanceValue + STEP_SIZE);
break;
case "ArrowDown":
newLuminanceValue = Math.max(0, newLuminanceValue - STEP_SIZE);
break;
}
this.saturationValue = newSaturationValue;
this.luminanceValue = newLuminanceValue;
},
setDragging(event) {
document.body.style.userSelect = "none";
this.isDragging = true;
this.moveSelector(event);
window.addEventListener("mousemove", this.moveSelector, false);
window.addEventListener("mouseup", this.removeDragging, false);
},
removeDragging() {
document.body.style.userSelect = null;
this.isDragging = false;
window.removeEventListener("mousemove", this.moveSelector);
window.removeEventListener("mouseup", this.removeDragging);
},
setSingleRGBValue(newColorValue, type) {
const validTypes = ["red", "green", "blue"];
if (!validTypes.includes(type)) {
return;
}
let sanitizedColorValue = null;
if (newColorValue > 255) {
sanitizedColorValue = 255;
} else if (newColorValue < 0) {
sanitizedColorValue = 0;
} else {
sanitizedColorValue = newColorValue;
}
const hslValue = this.convertRGBtoHSL(
type === "red" ? sanitizedColorValue : this.redValue,
type === "green" ? sanitizedColorValue : this.greenValue,
type === "blue" ? sanitizedColorValue : this.blueValue
);
this.setHslaValues(hslValue.hue, hslValue.saturation, hslValue.luminance, this.alphaValue);
},
setHslaValues(hue, saturation, luminance, alpha) {
this.hueValue = hue;
this.luminanceValue = luminance;
this.saturationValue = saturation;
this.alphaValue = !alpha ? 1 : alpha;
},
splitRGBValues(rgbString) {
const rgbValues = rgbString.slice(rgbString.indexOf("(") + 1, rgbString.length - 1).split(", ");
const red = Number(rgbValues[0]);
const green = Number(rgbValues[1]);
const blue = Number(rgbValues[2]);
const returnValue = {
red,
green,
blue
};
if (rgbString.includes("a")) {
returnValue.alpha = Number(rgbValues[3]);
}
return returnValue;
},
splitHSLValues(hslString) {
const hslValue = hslString.slice(hslString.indexOf("(") + 1, hslString.length - 1).split(", ");
const hue = Number(hslValue[0]);
const saturation = Number(hslValue[1].slice(0, hslValue[1].length - 1));
const luminance = Number(hslValue[2].slice(0, hslValue[2].length - 1));
const alpha = hslValue[3] || Number(hslValue[3]) === 0 ? Number(hslValue[3]) : void 0;
const returnValue = {
hue,
saturation,
luminance
};
if (alpha !== void 0) {
returnValue.alpha = alpha;
}
return returnValue;
},
convertHSLtoRGB(previousHue, previousSaturation, previousLuminance, previousAlpha) {
const hsla = {
hue: previousHue,
saturation: previousSaturation,
luminance: previousLuminance,
alpha: previousAlpha
};
return this.convertHSL("rgb", hsla);
},
convertHSLtoHEX(previousHue, previousSaturation, previousLuminance, previousAlpha) {
const hsla = {
hue: previousHue,
saturation: previousSaturation,
luminance: previousLuminance,
alpha: previousAlpha
};
return this.convertHSL("hex", hsla);
},
convertHSL(mode, color) {
const validModes = ["hex", "rgb"];
if (!validModes.includes(mode)) {
return {
string: "",
red: "",
green: "",
blue: ""
};
}
let { hue, saturation, luminance, alpha } = color;
saturation /= 100;
luminance /= 100;
const chroma = (1 - Math.abs(2 * luminance - 1)) * saturation;
const x = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
const m = luminance - chroma / 2;
let red = 0;
let green = 0;
let blue = 0;
if (hue >= 0 && hue < 60) {
red = chroma;
green = x;
blue = 0;
} else if (hue >= 60 && hue < 120) {
red = x;
green = chroma;
blue = 0;
} else if (hue >= 120 && hue < 180) {
red = 0;
green = chroma;
blue = x;
} else if (hue >= 180 && hue < 240) {
red = 0;
green = x;
blue = chroma;
} else if (hue >= 240 && hue < 300) {
red = x;
green = 0;
blue = chroma;
} else if (hue >= 300 && hue < 361) {
red = chroma;
green = 0;
blue = x;
}
red = Math.round((red + m) * 255);
green = Math.round((green + m) * 255);
blue = Math.round((blue + m) * 255);
if (mode === "hex") {
red = red.toString(16);
green = green.toString(16);
blue = blue.toString(16);
if (red.length === 1) {
red = `0${red}`;
}
if (green.length === 1) {
green = `0${green}`;
}
if (blue.length === 1) {
blue = `0${blue}`;
}
if (alpha === void 0) {
return `#${red}${green}${blue}`;
}
alpha = Math.round(alpha * 255).toString(16);
if (alpha.length === 1) {
alpha = `0${alpha}`;
}
return `#${red}${green}${blue}${alpha}`;
}
const rgbValue = {
string: `rgb(${red}, ${green}, ${blue})`,
red: typeof red === "string" ? red : red.toString(),
green: typeof green === "string" ? green : green.toString(),
blue: typeof blue === "string" ? blue : blue.toString(),
alpha: void 0
};
if (alpha !== 1) {
rgbValue.string = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
if (typeof alpha === "string") {
rgbValue.alpha = alpha;
} else if (alpha !== void 0) {
rgbValue.alpha = alpha.toString();
} else {
rgbValue.alpha = alpha;
}
}
return rgbValue;
},
convertRGBtoHSL(previousRed, previousGreen, previousBlue) {
let red = previousRed;
let green = previousGreen;
let blue = previousBlue;
if (red.toString().startsWith("-")) {
red = Math.abs(red);
}
if (blue.toString().startsWith("-")) {
blue = Math.abs(blue);
}
if (green.toString().startsWith("-")) {
green = Math.abs(green);
}
red /= 255;
green /= 255;
blue /= 255;
const cmin = Math.min(red, green, blue);
const cmax = Math.max(red, green, blue);
const delta = cmax - cmin;
let hue = 0;
let saturation = 0;
let luminance = 0;
if (delta === 0) {
hue = 0;
} else if (cmax === red) {
hue = (green - blue) / delta % 6;
} else if (cmax === green) {
hue = (blue - red) / delta + 2;
} else {
hue = (red - green) / delta + 4;
}
hue = Math.round(hue * 60);
if (hue < 0) {
hue += 360;
}
luminance = (cmax + cmin) / 2;
saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * luminance - 1));
saturation = +(saturation * 100).toFixed(1);
luminance = +(luminance * 100).toFixed(1);
return {
string: `hsl(${hue},${saturation}%,${luminance}%)`,
hue,
saturation,
luminance
};
},
convertHEXtoHSL(previousHex) {
const hex = previousHex;
let red = 0;
let green = 0;
let blue = 0;
let alpha;
if (hex.length !== 5 && hex.length !== 9 && hex.length !== 4 && hex.length !== 7) {
return false;
}
if (hex.length === 5) {
red = `0x${hex[1]}${hex[1]}`;
green = `0x${hex[2]}${hex[2]}`;
blue = `0x${hex[3]}${hex[3]}`;
alpha = `0x${hex[4]}${hex[4]}`;
} else if (hex.length === 9) {
red = `0x${hex[1]}${hex[2]}`;
green = `0x${hex[3]}${hex[4]}`;
blue = `0x${hex[5]}${hex[6]}`;
alpha = `0x${hex[7]}${hex[8]}`;
} else if (hex.length === 4) {
red = `0x${hex[1]}${hex[1]}`;
green = `0x${hex[2]}${hex[2]}`;
blue = `0x${hex[3]}${hex[3]}`;
} else if (hex.length === 7) {
red = `0x${hex[1]}${hex[2]}`;
green = `0x${hex[3]}${hex[4]}`;
blue = `0x${hex[5]}${hex[6]}`;
}
red /= 255;
green /= 255;
blue /= 255;
const cmin = Math.min(Number(red), Number(green), Number(blue));
const cmax = Math.max(Number(red), Number(green), Number(blue));
const delta = cmax - cmin;
let hue = 0;
let saturation = 0;
let luminance = 0;
if (delta === 0) {
hue = 0;
} else if (cmax === red) {
hue = (Number(green) - Number(blue)) / delta % 6;
} else if (cmax === green) {
hue = (Number(blue) - Number(red)) / delta + 2;
} else {
hue = (Number(red) - Number(green)) / delta + 4;
}
hue = Math.round(hue * 60);
if (hue < 0) {
hue += 360;
}
luminance = (cmax + cmin) / 2;
saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * luminance - 1));
saturation = +(saturation * 100).toFixed(1);
luminance = +(luminance * 100).toFixed(1);
const hslValue = {
string: `hsl(${hue}, ${saturation}%, ${luminance}%)`,
hue,
saturation,
luminance,
alpha: void 0
};
hslValue.string = `hsla(${hue}, ${saturation}%, ${luminance}, ${alpha}%)`;
alpha = Number((Number(alpha) / 255).toFixed(2));
hslValue.alpha = alpha;
return hslValue;
},
onClickInput() {
if (!this.readonly) {
return;
}
this.toggleColorPicker();
},
setFocusClass() {
this.hasFocus = true;
},
removeFocusClass() {
this.hasFocus = false;
},
adjustHueStepSize(event) {
if (event.shiftKey && event.ctrlKey) {
this.hueStep = 10;
} else if (event.shiftKey) {
this.hueStep = 5;
} else {
this.hueStep = 1;
}
},
adjustAlphaStepSize(event) {
if (event.shiftKey && event.ctrlKey) {
this.alphaStep = 0.1;
} else if (event.shiftKey) {
this.alphaStep = 0.05;
} else {
this.alphaStep = 0.01;
}
}
}
});
const mtColorpicker_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = ["aria-pressed"];
const _hoisted_2 = ["id", "placeholder", "disabled", "readonly"];
const _hoisted_3 = { class: "mt-colorpicker__row" };
const _hoisted_4 = { class: "mt-colorpicker__sliders" };
const _hoisted_5 = ["step"];
const _hoisted_6 = ["step"];
const _hoisted_7 = { class: "mt-colorpicker__row mt-colorpicker__input-row" };
const _hoisted_8 = { class: "mt-colorpicker__row-column" };
const _hoisted_9 = { class: "mt-colorpicker__row-column" };
const _hoisted_10 = { class: "mt-colorpicker__row-column" };
const _hoisted_11 = { class: "mt-colorpicker__row-column" };
const _hoisted_12 = {
key: 0,
class: "mt-colorpicker__row-column"
};
const _hoisted_13 = {
key: 0,
class: "mt-colorpicker__row mt-colorpicker__apply-row"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_mt_text = vue.resolveComponent("mt-text");
const _component_mt_button = vue.resolveComponent("mt-button");
const _component_mt_floating_ui = vue.resolveComponent("mt-floating-ui");
const _component_mt_field_error = vue.resolveComponent("mt-field-error");
const _component_mt_base_field = vue.resolveComponent("mt-base-field");
return vue.openBlock(), vue.createBlock(_component_mt_base_field, {
class: vue.normalizeClass(_ctx.componentClasses),
disabled: _ctx.disabled,
required: _ctx.required,
"is-inherited": _ctx.isInherited,
"is-inheritance-field": _ctx.isInheritanceField,
"disable-inheritance-toggle": _ctx.disableInheritanceToggle,
"has-focus": _ctx.hasFocus,
"help-text": _ctx.helpText,
name: _ctx.name,
onInheritanceRestore: _cache[19] || (_cache[19] = ($event) => _ctx.$emit("inheritance-restore", $event)),
onInheritanceRemove: _cache[20] || (_cache[20] = ($event) => _ctx.$emit("inheritance-remove", $event))
}, {
label: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
]),
"field-prefix": vue.withCtx(() => [
vue.createElementVNode("div", {
class: "mt-colorpicker__previewWrapper",
role: "button",
"aria-pressed": _ctx.visible,
"aria-label": "colorpicker-toggle",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleColorPicker && _ctx.toggleColorPicker(...args))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(["mt-colorpicker__previewColor", { active: _ctx.visible }]),
style: vue.normalizeStyle({ background: _ctx.previewColorValue })
}, null, 6),
vue.createElementVNode("div", {
class: vue.normalizeClass(["mt-colorpicker__previewBackground", { "is--invalid": !_ctx.isColorValid }])
}, null, 2)
], 8, _hoisted_1)
]),
element: vue.withCtx(({ identification }) => [
vue.withDirectives(vue.createElementVNode("input", {
id: identification,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.colorValue = $event),
class: "mt-colorpicker__input",
spellcheck: false,
placeholder: _ctx.placeholder,
disabled: _ctx.disabled,
readonly: _ctx.readonly,
type: "text",
onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onClickInput && _ctx.onClickInput(...args)),
onKeyup: [
_cache[3] || (_cache[3] = vue.withKeys((...args) => _ctx.toggleColorPicker && _ctx.toggleColorPicker(...args), ["enter"])),
_cache[4] || (_cache[4] = vue.withKeys((...args) => _ctx.outsideClick && _ctx.outsideClick(...args), ["escape"]))
],
onFocus: _cache[5] || (_cache[5] = ($event) => _ctx.hasFocus = true),
onBlur: _cache[6] || (_cache[6] = ($event) => _ctx.hasFocus = false)
}, null, 40, _hoisted_2), [
[vue.vModelText, _ctx.colorValue]
]),
vue.createVNode(_component_mt_floating_ui, {
"is-opened": _ctx.visible,
class: "mt-colorpicker__colorpicker-position",
"z-index": _ctx.zIndex,
offset: -12
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", {
ref: "modal",
class: "mt-colorpicker__colorpicker",
"data-testid": "mt-colorpicker-dialog",
onKeyup: _cache[18] || (_cache[18] = vue.withKeys((...args) => _ctx.outsideClick && _ctx.outsideClick(...args), ["escape"]))
}, [
vue.createElementVNode("div", {
ref: "colorPicker",
class: "mt-colorpicker__colorpicker-selection",
style: vue.normalizeStyle({ backgroundColor: _ctx.selectorBackground }),
onMousedown: _cache[7] || (_cache[7] = (...args) => _ctx.setDragging && _ctx.setDragging(...args)),
onKeydown: _cache[8] || (_cache[8] = (...args) => _ctx.keyMoveSelector && _ctx.keyMoveSelector(...args))
}, [
vue.createElementVNode("div", {
class: "mt-colorpicker__colorpicker-selector",
style: vue.normalizeStyle(_ctx.selectorStyles),
tabindex: "0"
}, null, 4)
], 36),
vue.createElementVNode("div", _hoisted_3, [
vue.createElementVNode("div", _hoisted_4, [
vue.withDirectives(vue.createElementVNode("input", {
"onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => _ctx.hueValue = $event),
"aria-label": "colorpicker-color-range",
class: "mt-colorpicker__colorpicker-slider-range",
type: "range",
min: "0",
max: "360",
step: _ctx.hueStep,
onKeydown: _cache[10] || (_cache[10] = (...args) => _ctx.adjustHueStepSize && _ctx.adjustHueStepSize(...args))
}, null, 40, _hoisted_5), [
[
vue.vModelText,
_ctx.hueValue,
void 0,
{ number: true }
]
]),
_ctx.alpha ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
key: 0,
"onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => _ctx.alphaValue = $event),
class: "mt-colorpicker__alpha-slider",
"aria-label": "colorpicker-alpha-range",
type: "range",
min: "0",
max: "1",
step: _ctx.alphaStep,
style: vue.normalizeStyle({ backgroundImage: _ctx.sliderBackground }),
onKeydown: _cache[12] || (_cache[12] = (...args) => _ctx.adjustAlphaStepSize && _ctx.adjustAlphaStepSize(...args))
}, null, 44, _hoisted_6)), [
[
vue.vModelText,
_ctx.alphaValue,
void 0,
{ number: true }
]
]) : vue.createCommentVNode("", true)
]),
vue.createElementVNode("div", {
class: vue.normalizeClass(["mt-colorpicker__colorpicker-wrapper", { "is--small": !_ctx.alpha }])
}, [
vue.createElementVNode("div", {
class: "mt-colorpicker__colorpicker-previewColor",
style: vue.normalizeStyle({ background: _ctx.previewColorValue })
}, null, 4),
vue.createElementVNode("div", {
class: vue.normalizeClass(["mt-colorpicker__colorpicker-previewBackground", { "is--invalid": !_ctx.isColorValid }])
}, null, 2)
], 2)
]),
vue.createElementVNode("div", _hoisted_7, [
vue.createElementVNode("div", _hoisted_8, [
vue.withDirectives(vue.createElementVNode("input", {
"onUpdate:modelValue": _cache[13] || (_cache[13] = ($event) => _ctx.hexValue = $event),
class: "mt-colorpicker__colorpicker-input is--hex",
"aria-label": "hex-value",
type: "text",
spellcheck: false
}, null, 512), [
[
vue.vModelText,
_ctx.hexValue,
void 0,
{ lazy: true }
]
]),
_ctx.colorLabels ? (vue.openBlock(), vue.createBlock(_component_mt_text, {
key: 0,
size: "2xs",
as: "label",
class: "mt-colorpicker__row-column-label"
}, {
default: vue.withCtx(() => _cache[21] || (_cache[21] = [
vue.createTextVNode(" HEX ")
])),
_: 1
})) : vue.createCommentVNode("", true)
]),
vue.createElementVNode("div", _hoisted_9, [
vue.withDirectives(vue.createElementVNode("input", {
"onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => _ctx.redValue = $event),
class: "mt-colorpicker__colorpicker-input",
"aria-label": "red-value",
type: "number",
min: "0",
max: "255",
step: "1",
placeholder: "0"
}, null, 512), [
[
vue.vModelText,
_ctx.redValue,
void 0,
{ number: true }
]
]),
_ctx.colorLabels ? (vue.openBlock(), vue.createBlock(_component_mt_text, {
key: 0,
size: "2xs",
as: "label",
class: "mt-colorpicker__row-column-label"
}, {
default: vue.withCtx(() => _cache[22] || (_cache[22] = [
vue.createTextVNode(" R ")
])),
_: 1
})) : vue.createCommentVNode("", true)
]),
vue.createElementVNode("div", _hoisted_10, [
vue.withDirectives(vue.createElementVNode("input", {
"onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => _ctx.greenValue = $event),
class: "mt-colorpicker__colorpicker-input",
"aria-label": "green-value",
type: "number",
min: "0",
max: "255",
step: "1",
placeholder: "0"
}, null, 512), [
[
vue.vModelText,
_ctx.greenValue,
void 0,
{ number: true }
]
]),
_ctx.colorLabels ? (vue.openBlock(), vue.createBlock(_component_mt_text, {
key: 0,
size: "2xs",
as: "label",
class: "mt-colorpicker__row-column-label"
}, {
default: vue.withCtx(() => _cache[23] || (_cache[23] = [
vue.createTextVNode(" G ")
])),
_: 1
})) : vue.createCommentVNode("", true)
]),
vue.createElementVNode("div", _hoisted_11, [
vue.withDirectives(vue.createElementVNode("input", {
"onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => _ctx.blueValue = $event),
class: "mt-colorpicker__colorpicker-input",
"aria-label": "blue-value",
type: "number",
min: "0",
max: "255",
step: "1",
placeholder: "0"
}, null, 512), [
[
vue.vModelText,
_ctx.blueValue,
void 0,
{ number: true }
]
]),
_ctx.colorLabels ? (vue.openBlock(), vue.createBlock(_component_mt_text, {
key: 0,
size: "2xs",
as: "label",
class: "mt-colorpicker__row-column-label"
}, {
default: vue.withCtx(() => _cache[24] || (_cache[24] = [
vue.createTextVNode(" B ")
])),
_: 1
})) : vue.createCommentVNode("", true)
]),
_ctx.alpha ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
vue.withDirectives(vue.createElementVNode("input", {
"onUpdate:modelValue": _cache[17] || (_cache[17] = ($event) => _ctx.integerAlpha = $event),
class: "mt-colorpicker__colorpicker-input",
"aria-label": "alpha-value",
type: "number",
min: "0",
max: "100",
step: "1",
placeholder: "0"
}, null, 512), [
[
vue.vModelText,
_ctx.integerAlpha,
void 0,
{ number: true }
]
]),
_ctx.colorLabels ? (vue.openBlock(), vue.createBlock(_component_mt_text, {
key: 0,
as: "label",
size: "2xs",
class: "mt-colorpicker__row-column-label"
}, {
default: vue.withCtx(() => _cache[25] || (_cache[25] = [
vue.createTextVNode(" Alpha ")
])),
_: 1
})) : vue.createCommentVNode("", true)
])) : vue.createCommentVNode("", true)
]),
_ctx.applyMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
vue.createVNode(_component_mt_button, {
variant: "primary",
block: "",
"aria-label": "colorpicker-apply-color",
onClick: _ctx.applyColor
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.t("mt-colorpicker.apply")), 1)
]),
_: 1
}, 8, ["onClick"])
])) : vue.createCommentVNode("", true)
], 544)
]),
_: 1
}, 8, ["is-opened", "z-index"])
]),
error: vue.withCtx(() => [
_ctx.error ? (vue.openBlock(), vue.createBlock(_component_mt_field_error, {
key: 0,
error: _ctx.error
}, null, 8, ["error"])) : vue.createCommentVNode("", true)
]),
_: 1
}, 8, ["class", "disabled", "required", "is-inherited", "is-inheritance-field", "disable-inheritance-toggle", "has-focus", "help-text", "name"]);
}
const MtColorpicker = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = MtColorpicker;
//# sourceMappingURL=MtColorpicker.js.map