@progress/kendo-vue-inputs
Version:
336 lines (335 loc) • 10.8 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as w, createVNode as s } from "vue";
import { validatePackage as D, guid as G, classNames as M, kendoThemeMaps as A, getTabIndex as K, Draggable as E, focusContainer as z, getRef as W, Keys as n, focusFirstFocusableChild as O, setRef as N } from "@progress/kendo-vue-common";
import { packageMetadata as P } from "../package-metadata.mjs";
import { isPresent as f, fitIntoBounds as C } from "./utils/misc.mjs";
import { parseColor as o, getHSV as c, getRGBA as u, getColorFromHue as g, getColorFromRGBA as j, getColorFromHSV as X } from "./utils/color-parser.mjs";
import { removeCachedColor as Y } from "./utils/color-cache.mjs";
import { ColorInput as _ } from "./ColorInput.mjs";
import { ColorContrastLabels as U } from "./ColorContrastLabels.mjs";
import { ColorContrastSvg as q } from "./ColorContrastSvg.mjs";
import { provideLocalizationService as J } from "@progress/kendo-vue-intl";
import { colorGradientHueSliderLabel as k, messages as m, colorGradientAlphaSliderLabel as S, colorGradientDragHandle as x } from "../messages/main.mjs";
import { Slider as R } from "../slider/Slider.mjs";
const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
name: "KendoColorGradient",
model: {
event: "changemodel"
},
emits: {
change: null,
focus: null,
blur: null,
changemodel: null,
"update:modelValue": null,
"update:modelRgbaValue": null,
keydown: null
},
inject: {
kendoLocalizationService: {
default: null
}
},
props: {
modelValue: String,
modelRgbaValue: String,
defaultValue: String,
value: String,
opacity: {
type: Boolean,
default: !0
},
backgroundColor: String,
disabled: Boolean,
id: String,
ariaLabelledBy: String,
ariaDescribedBy: String,
tabIndex: Number,
innerTabIndex: {
type: Number,
default: void 0
},
size: String,
class: String,
adaptive: Boolean
},
created() {
D(P), this.guid = G();
},
computed: {
valueSet() {
return this.value || this.modelValue || this.modelRgbaValue;
},
computedValue() {
let e = this.valueSet || this.currentValue || this.defaultValue || o(y, Q);
return f(o(e, "hex", this.opacity)) || (e = y), e;
},
hsva() {
return this.valueSet ? c(this.computedValue) : this.currentHsva || c(this.computedValue);
},
rgba() {
return this.valueSet ? u(this.computedValue) : this.currentRgba;
},
hex() {
return this.valueSet ? o(this.computedValue, "hex", this.opacity) : this.currentHex;
},
computedBgColor() {
return this.currentBgColor || g(this.hsva.h);
},
computedTabIndex() {
return this.innerTabIndex !== void 0 ? this.innerTabIndex : this.focused ? 0 : -1;
}
},
data() {
return {
currentValue: void 0,
currentBgColor: void 0,
isFirstRender: !0,
currentHsva: void 0,
currentRgba: void 0,
currentHex: void 0,
focused: !1
};
},
mounted() {
this.alphaSlider = this.alphaSliderRef, this.setAlphaSliderBackground(this.computedBgColor), this.$el && (this.draggable = this.$refs.draggable, this.gradientWrapper = this.draggable && this.draggable.element), this.isFirstRender && (this.isFirstRender = !1);
},
destroyed() {
Y(this.guid);
},
updated() {
this.setAlphaSliderBackground(this.computedBgColor);
},
render() {
const {
size: e,
disabled: t,
class: i,
opacity: a,
id: r,
tabIndex: h,
ariaDescribedBy: p,
ariaLabelledBy: H,
adaptive: d
} = this.$props, B = M("k-colorgradient", {
"k-disabled": t,
[`k-colorgradient-${A.sizeMap[e] || e}`]: e
}, i), b = J(this), $ = b.toLanguageString(k, m[k]), V = b.toLanguageString(S, m[S]), L = b.toLanguageString(x, m[x]), F = function() {
let l = {};
if (!this.isFirstRender) {
const v = this.getGradientRectMetrics(), I = (1 - this.hsva.v) * v.height, T = this.hsva.s * v.width;
l.top = `${I}px`, l.left = `${T}px`;
}
return s("div", {
class: "k-hsv-draghandle k-draghandle",
role: "slider",
"aria-orientation": void 0,
"aria-label": L + `${this.value || "none"}`,
"aria-valuenow": Math.round(this.hsva.s * 100),
"aria-valuetext": `
saturation: ${Math.round(this.hsva.s * 100)}%,
value: ${Math.round(this.hsva.v * 100)}%`,
tabindex: this.computedTabIndex,
onKeydown: this.dragKeyDown,
style: l,
ref: N(this, "draghandle")
}, null);
};
return s("div", {
id: r,
class: B,
role: h !== -1 ? "textbox" : void 0,
"aria-disabled": t,
tabindex: K(h, t),
"aria-labelledby": H,
"aria-describedby": p,
onFocus: this.onFocus,
onBlur: this.onBlur,
onKeydown: this.onKeyDownHandler
}, [s("div", {
class: `k-colorgradient-canvas ${d ? "k-vstack" : "k-hstack"}`
}, [s("div", {
class: "k-hsv-rectangle",
style: {
background: this.computedBgColor
}
}, [s(E, {
onDrag: this.onDrag,
onRelease: this.onRelease,
ref: "draggable"
}, {
default: () => [s("div", {
class: "k-hsv-gradient",
style: {
touchAction: "none"
},
tabindex: -1,
onClick: this.onGradientWrapperClick
}, [F.call(this)])]
}), this.backgroundColor && !this.isFirstRender && s(q, {
metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
hsva: this.hsva,
backgroundColor: this.backgroundColor
}, null)]), s("div", {
class: `k-hsv-controls ${d ? "k-vstack" : "k-hstack"}`
}, [s(R, {
tabIndex: this.computedTabIndex,
value: this.hsva.h,
buttons: !1,
vertical: !d,
min: 0,
max: 360,
step: 5,
onChange: this.onHueSliderChange,
class: "k-hue-slider k-colorgradient-slider",
disabled: t,
ariaLabel: $
}, null), a && s(R, {
tabIndex: this.computedTabIndex,
value: f(this.hsva.a) ? this.hsva.a * 100 : 100,
buttons: !1,
vertical: !d,
min: 0,
max: 100,
step: 1,
onChange: this.onAlphaSliderChange,
class: "k-alpha-slider k-colorgradient-slider",
disabled: t,
ariaLabel: V,
ref: (l) => {
this.alphaSliderRef = l;
}
}, null)])]), s(_, {
tabIndex: this.computedTabIndex,
rgba: this.rgba,
onRgbachange: this.onRgbaChange,
hex: this.hex,
onHexchange: this.onHexChange,
opacity: a,
disabled: t,
ref: "colorInput",
size: e
}, null), this.backgroundColor && s(U, {
bgColor: u(this.backgroundColor),
rgba: this.rgba
}, null)]);
},
methods: {
onKeyDownHandler(e) {
const t = this.$el;
this.innerTabIndex === void 0 && (this.focused = z(e, t)), this.$emit("keydown", e);
},
onHexChange(e, t, i) {
const a = u(t), r = c(t);
this.currentHsva = r, this.currentBgColor = g(r.h), this.currentRgba = a, this.currentHex = e, this.dispatchChangeEvent(t, i.event, e, t);
},
onRgbaChange(e, t) {
const i = j(e), a = o(i, "hex", this.opacity), r = c(i);
this.currentHsva = r, this.currentBgColor = g(r.h), this.currentRgba = e, this.currentHex = a, this.dispatchChangeEvent(i, t.event, a, i);
},
onAlphaSliderChange(e) {
this.handleHsvaChange(Object.assign({}, this.hsva, {
a: e.value / 100
}), e.event);
},
onHueSliderChange(e) {
this.handleHsvaChange(Object.assign({}, this.hsva, {
h: e.value
}), e.event);
},
onDrag(e) {
this.gradientWrapper.classList.add("k-dragging"), this.changePosition(e);
},
onRelease() {
this.gradientWrapper.classList.remove("k-dragging");
},
onGradientWrapperClick(e) {
this.firstFocusable = W(this, "draghandle"), this.firstFocusable && this.firstFocusable.focus(), this.changePosition(e);
},
move(e, t, i) {
const a = this.hsva;
a[t] += i * (e.shiftKey ? 0.01 : 0.05), a[t] < 0 && (a[t] = 0), a[t] > 1 && (a[t] = 1), e.preventDefault(), this.handleHsvaChange(a, e);
},
dragKeyDown(e) {
switch (e.keyCode) {
case n.left:
this.move(e, "s", -1);
break;
case n.right:
this.move(e, "s", 1);
break;
case n.up:
this.move(e, "v", 1);
break;
case n.down:
this.move(e, "v", -1);
break;
case n.enter:
break;
case n.esc:
break;
}
},
changePosition(e) {
const t = this.getGradientRectMetrics(), i = e.clientX - t.left, a = e.clientY - t.top, r = C(i, 0, t.width), h = C(a, 0, t.height), p = Object.assign({}, this.hsva, {
s: r / t.width,
v: 1 - h / t.height
});
this.handleHsvaChange(p, e, e.event);
},
handleHsvaChange(e, t) {
const i = X(e), a = o(i, "hex", this.opacity), r = o(i, "rgba");
this.currentHsva = e, this.currentBgColor = g(e.h), this.currentRgba = u(i), this.currentHex = a, this.dispatchChangeEvent(i, t, a, r);
},
dispatchChangeEvent(e, t, i, a) {
this.currentValue = e, this.$emit("changemodel", i), this.$emit("update:modelRgbaValue", a), this.$emit("update:modelValue", i), this.$emit("change", {
event: t,
target: this,
value: i,
rgbaValue: a
});
},
onFocus(e) {
this.$emit("focus", {
event: e,
target: this
});
},
onBlur(e) {
this.$emit("blur", {
event: e,
target: this
});
},
setAlphaSliderBackground(e) {
this.$props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack && (this.alphaSlider.sliderTrack.style.background = `linear-gradient(to ${this.$props.adaptive ? "right" : "top"}, transparent, ${e})`);
},
getGradientRectMetrics() {
const e = this.gradientWrapper.getBoundingClientRect();
return {
top: e.top,
right: e.right,
bottom: e.bottom,
left: e.left,
width: e.width,
height: e.height,
x: e.x,
y: e.y
};
},
focus() {
this.focused = !0, setTimeout(() => {
O(this.$el);
}, 1);
}
}
});
export {
ce as ColorGradient
};