@progress/kendo-vue-inputs
Version:
232 lines (231 loc) • 7.21 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 x, createVNode as a } from "vue";
import { ColorPaletteService as B } from "./utils/color-palette.service.mjs";
import { validatePackage as D, guid as F, getRef as $, classNames as w, kendoThemeMaps as U, getTabIndex as z, setRef as L, Keys as n } from "@progress/kendo-vue-common";
import { packageMetadata as A } from "../package-metadata.mjs";
import { PALETTEPRESETS as K } from "./models/palette-presets.mjs";
import { isPresent as M } from "./utils/misc.mjs";
import { parseColor as _ } from "./utils/color-parser.mjs";
const k = 10, O = "office", X = /* @__PURE__ */ x({
name: "KendoColorPalette",
model: {
event: "changemodel"
},
emits: {
keydown: null,
focus: null,
blur: null,
changemodel: null,
"update:modelValue": null,
"update:modelRgbaValue": null,
change: null
},
props: {
palette: {
type: [String, Array],
default: O
},
columns: Number,
tileSize: {
type: [Number, Object]
},
modelValue: String,
modelRgbaValue: String,
defaultValue: String,
value: String,
disabled: Boolean,
tabIndex: Number,
id: String,
class: String,
ariaLabelledBy: String,
ariaDescribedBy: String,
size: {
type: [String, null],
default: "medium"
}
},
created() {
D(A), this.guid = F();
},
mounted() {
this.wrapper = $(this, "wrapper");
},
updated() {
this.wrapper = $(this, "wrapper");
},
computed: {
focusedColorCooridanates() {
return this.focusedColor ? this.paletteService.getCellCoordsFor(this.focusedColor) : void 0;
},
isUncontrolled() {
return this.$props.value === void 0;
},
selectedColor() {
return this.$props.value !== void 0 ? this.$props.value : this.modelValue !== void 0 ? this.modelValue : this.modelRgbaValue !== void 0 ? this.modelRgbaValue : this.currentValue !== void 0 ? this.currentValue : this.$props.defaultValue;
}
},
data() {
return {
focusedColor: this.$props.value,
currentValue: void 0
};
},
render() {
const {
size: e,
disabled: t,
class: o,
tileSize: s
} = this.$props, p = this.getPaletteInfo(), d = this.paletteService = new B();
d.setColorMatrix(p.colors, p.columns);
const y = d.getCellCoordsFor(this.selectedColor), f = d.getCellCoordsFor(this.focusedColor), S = w("k-colorpalette", {
[`k-colorpalette-${U.sizeMap[e] || e}`]: e,
"k-disabled": t
}, o), V = function(m, r, i, l) {
const u = i !== void 0 && i.row === r, N = i && i.col, E = l !== void 0 && l.row === r, R = l && l.col, c = typeof s != "number" ? s : {
width: s,
height: s
}, C = c ? c.width + "px" : void 0, P = c ? c.height + "px" : void 0;
return m.map(function(g, h) {
const b = u && N === h, I = w("k-colorpalette-tile", {
"k-selected": b,
"k-focus": E && R === h
});
return a("td", {
class: I,
"aria-label": g,
"aria-selected": b ? !0 : this.$props.disabled ? void 0 : !1,
style: {
backgroundColor: g,
width: C,
height: P,
minWidth: C
},
onClick: (T) => this.onColorClick(g, T),
id: this.createCellId({
row: r,
col: h
}),
key: h,
role: "gridcell"
}, null);
}, this);
}, v = function(m, r, i) {
return m.map(function(l, u) {
return a("tr", {
role: "row",
key: u
}, [V.call(this, l, u, r, i)]);
}, this);
};
return p.colors.length ? a("div", {
id: this.$props.id,
class: S,
onFocusin: this.onFocus,
onFocusout: this.onBlur,
onKeydown: this.onKeyDown,
"aria-disabled": this.$props.disabled ? "true" : void 0,
"aria-activedescendant": f && this.createCellId(f),
"aria-labelledby": this.$props.ariaLabelledBy,
"aria-describedby": this.$props.ariaDescribedBy,
role: "grid",
tabindex: z(this.$props.tabIndex, this.$props.disabled),
ref: L(this, "wrapper")
}, [a("table", {
class: "k-colorpalette-table k-palette",
role: "presentation"
}, [a("tbody", null, [v.call(this, d.colorRows, y, f)])])]) : "";
},
methods: {
focus() {
this.wrapper && this.wrapper.focus();
},
onKeyDown(e) {
switch (e.keyCode) {
case n.down:
this.handleCellNavigation(e, 0, 1);
break;
case n.up:
this.handleCellNavigation(e, 0, -1);
break;
case n.right:
this.handleCellNavigation(e, 1, 0);
break;
case n.left:
this.handleCellNavigation(e, -1, 0);
break;
case n.enter:
this.handleEnter(e);
break;
default:
this.$emit("keydown", e);
return;
}
this.$emit("keydown", e);
},
onColorClick(e, t) {
this.isUncontrolled ? (this.currentValue = e, this.focusedColor = e) : this.focusedColor = e, this.dispatchChangeEvent(e, t);
},
onFocus(e) {
this.focusedColor = this.selectedColor || this.paletteService.colorRows[0][0], this.$emit("focus", {
event: e,
target: this
});
},
onBlur(e) {
this.focusedColor = void 0, this.$emit("blur", {
event: e,
target: this
});
},
handleCellNavigation(e, t, o) {
if (e.preventDefault(), this.focusedColorCooridanates) {
const s = this.paletteService.getNextCell(this.focusedColorCooridanates, t, o);
this.focusedColor = this.paletteService.getColorAt(s);
} else
this.focusedColor = this.paletteService.colorRows[0][0];
},
handleEnter(e) {
this.isUncontrolled && (this.currentValue = this.focusedColor), this.dispatchChangeEvent(this.focusedColor, e);
},
dispatchChangeEvent(e, t) {
const o = _(e, "rgba");
this.$emit("changemodel", e), this.$emit("update:modelValue", e), this.$emit("update:modelRgbaValue", o), this.$emit("change", {
event: t,
component: this,
value: e,
rgbaValue: o
});
},
getPaletteInfo() {
if (typeof this.$props.palette == "string") {
const e = K[this.$props.palette];
return M(e) ? {
colors: e.colors,
columns: this.$props.columns || e.columns || k
} : {
colors: [],
columns: 0
};
} else
return {
colors: this.$props.palette || [],
columns: this.$props.columns || k
};
},
createCellId(e) {
return `${this.guid}_${e.row}_${e.col}`;
}
}
});
export {
X as ColorPalette,
k as DEFAULT_COLUMNS_COUNT,
O as DEFAULT_PRESET
};