@progress/kendo-vue-inputs/colors/ColorPalette.js

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),U=require("./utils/color-palette.service.js"),t=require("@progress/kendo-vue-common"),D=require("../package-metadata.js"),F=require("./models/palette-presets.js"),I=require("./utils/misc.js"),K=require("./utils/color-parser.js"),C=10,$="office",L=a.defineComponent({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:$},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(){t.validatePackage(D.packageMetadata),this.guid=t.guid()},mounted(){this.wrapper=t.getRef(this,"wrapper")},updated(){this.wrapper=t.getRef(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:s,class:o,tileSize:l}=this.$props,p=this.getPaletteInfo(),d=this.paletteService=new U.ColorPaletteService;d.setColorMatrix(p.colors,p.columns);const w=d.getCellCoordsFor(this.selectedColor),f=d.getCellCoordsFor(this.focusedColor),k=t.classNames("k-colorpalette",{[`k-colorpalette-${t.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-disabled":s},o),S=function(g,n,r,i){const c=r!==void 0&&r.row===n,N=r&&r.col,v=i!==void 0&&i.row===n,E=i&&i.col,u=typeof l!="number"?l:{width:l,height:l},b=u?u.width+"px":void 0,P=u?u.height+"px":void 0;return g.map(function(m,h){const y=c&&N===h,R=t.classNames("k-colorpalette-tile",{"k-selected":y,"k-focus":v&&E===h});return a.createVNode("td",{class:R,"aria-label":m,"aria-selected":y?!0:this.$props.disabled?void 0:!1,style:{backgroundColor:m,width:b,height:P,minWidth:b},onClick:T=>this.onColorClick(m,T),id:this.createCellId({row:n,col:h}),key:h,role:"gridcell"},null)},this)},V=function(g,n,r){return g.map(function(i,c){return a.createVNode("tr",{role:"row",key:c},[S.call(this,i,c,n,r)])},this)};return p.colors.length?a.createVNode("div",{id:this.$props.id,class:k,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:t.getTabIndex(this.$props.tabIndex,this.$props.disabled),ref:t.setRef(this,"wrapper")},[a.createVNode("table",{class:"k-colorpalette-table k-palette",role:"presentation"},[a.createVNode("tbody",null,[V.call(this,d.colorRows,w,f)])])]):""},methods:{focus(){this.wrapper&&this.wrapper.focus()},onKeyDown(e){switch(e.keyCode){case t.Keys.down:this.handleCellNavigation(e,0,1);break;case t.Keys.up:this.handleCellNavigation(e,0,-1);break;case t.Keys.right:this.handleCellNavigation(e,1,0);break;case t.Keys.left:this.handleCellNavigation(e,-1,0);break;case t.Keys.enter:this.handleEnter(e);break;default:this.$emit("keydown",e);return}this.$emit("keydown",e)},onColorClick(e,s){this.isUncontrolled?(this.currentValue=e,this.focusedColor=e):this.focusedColor=e,this.dispatchChangeEvent(e,s)},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,s,o){if(e.preventDefault(),this.focusedColorCooridanates){const l=this.paletteService.getNextCell(this.focusedColorCooridanates,s,o);this.focusedColor=this.paletteService.getColorAt(l)}else this.focusedColor=this.paletteService.colorRows[0][0]},handleEnter(e){this.isUncontrolled&&(this.currentValue=this.focusedColor),this.dispatchChangeEvent(this.focusedColor,e)},dispatchChangeEvent(e,s){const o=K.parseColor(e,"rgba");this.$emit("changemodel",e),this.$emit("update:modelValue",e),this.$emit("update:modelRgbaValue",o),this.$emit("change",{event:s,component:this,value:e,rgbaValue:o})},getPaletteInfo(){if(typeof this.$props.palette=="string"){const e=F.PALETTEPRESETS[this.$props.palette];return I.isPresent(e)?{colors:e.colors,columns:this.$props.columns||e.columns||C}:{colors:[],columns:0}}else return{colors:this.$props.palette||[],columns:this.$props.columns||C}},createCellId(e){return`${this.guid}_${e.row}_${e.col}`}}});exports.ColorPalette=L;exports.DEFAULT_COLUMNS_COUNT=C;exports.DEFAULT_PRESET=$;