@progress/kendo-vue-inputs 7.1.0-develop.6 → 8.0.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/checkbox/Checkbox.js +1 -1
- package/checkbox/Checkbox.mjs +2 -4
- package/colors/ColorPalette.js +1 -1
- package/colors/ColorPalette.mjs +6 -7
- package/colors/ColorPicker.js +1 -1
- package/colors/ColorPicker.mjs +8 -11
- package/colors/FlatColorPicker.js +1 -1
- package/colors/FlatColorPicker.mjs +8 -9
- package/dist/cdn/js/kendo-vue-inputs.js +1 -1
- package/index.d.mts +149 -254
- package/index.d.ts +149 -254
- package/input/Input.js +1 -1
- package/input/Input.mjs +3 -6
- package/maskedtextbox/MaskedTextBox.js +1 -1
- package/maskedtextbox/MaskedTextBox.mjs +3 -6
- package/numerictextbox/NumericTextBox.js +1 -1
- package/numerictextbox/NumericTextBox.mjs +3 -6
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +9 -9
- package/radiobutton/RadioButton.js +1 -1
- package/radiobutton/RadioButton.mjs +1 -2
- package/signature/Signature.js +1 -1
- package/signature/Signature.mjs +3 -7
- package/signature/SignatureBottomActions.js +1 -1
- package/signature/SignatureBottomActions.mjs +0 -1
- package/signature/SignatureDialog.js +1 -1
- package/signature/SignatureDialog.mjs +2 -3
- package/switch/Switch.js +1 -1
- package/switch/Switch.mjs +15 -18
- package/textarea/TextArea.js +1 -1
- package/textarea/TextArea.mjs +3 -6
- package/textbox/TextBox.js +1 -1
- package/textbox/TextBox.mjs +3 -6
package/checkbox/Checkbox.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),t=require("@progress/kendo-vue-common"),S=require("../package-metadata.js"),x=require("@progress/kendo-vue-intl"),d=require("../messages/main.js"),B=n.defineComponent({name:"KendoCheckbox",emits:{changemodel:e=>!0,"update:modelValue":e=>!0,change:e=>!0,focus:e=>!0,blur:e=>!0},model:{event:"changemodel"},inject:{kendoLocalizationService:{default:null}},props:{checked:{type:Boolean,default:void 0},defaultChecked:{type:Boolean,default:void 0},defaultValue:{type:[String,Boolean],default:void 0},modelValue:{type:[String,Boolean],default:void 0},dir:String,disabled:Boolean,id:String,ariaLabelledBy:String,ariaDescribedBy:String,label:String,labelRender:[String,Number,Boolean,Object],labelPlacement:String,labelOptional:Boolean,labelClass:String,name:String,size:{type:String,
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),t=require("@progress/kendo-vue-common"),S=require("../package-metadata.js"),x=require("@progress/kendo-vue-intl"),d=require("../messages/main.js"),B=n.defineComponent({name:"KendoCheckbox",emits:{changemodel:e=>!0,"update:modelValue":e=>!0,change:e=>!0,focus:e=>!0,blur:e=>!0},model:{event:"changemodel"},inject:{kendoLocalizationService:{default:null}},props:{checked:{type:Boolean,default:void 0},defaultChecked:{type:Boolean,default:void 0},defaultValue:{type:[String,Boolean],default:void 0},modelValue:{type:[String,Boolean],default:void 0},dir:String,disabled:Boolean,id:String,ariaLabelledBy:String,ariaDescribedBy:String,label:String,labelRender:[String,Number,Boolean,Object],labelPlacement:String,labelOptional:Boolean,labelClass:String,name:String,size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},rounded:{type:String,validator:function(e){return["none","small","medium","large"].includes(e)}},tabIndex:Number,value:{type:[String,Boolean],default:void 0},validationMessage:String,required:Boolean,valid:{type:Boolean,default:void 0},validityStyles:{type:Boolean,default:!0}},data(){return{valueDuringOnChange:void 0,currentDir:"ltr",currentChecked:void 0,currentValue:void 0}},created(){t.validatePackage(S.packageMetadata),this.calculatedId=t.guid(),this.$props.defaultChecked!==void 0&&(this.currentChecked=this.$props.defaultChecked),this.$props.defaultValue!==void 0&&(this.currentValue=this.$props.defaultValue),this.currentDir=this.$props.dir},computed:{valueIsBooleanOrNull(){const e=this.$props.value;return typeof e=="boolean"||e===null},isCheckedControlled(){return this.$props.checked!==void 0},isValueControlled(){return this.$props.value!==void 0&&this.valueIsBooleanOrNull},computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$data.currentValue},computedChecked(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$props.checked!==void 0?this.$props.checked:this.$props.modelValue!==void 0?this.$props.modelValue:this.$data.currentChecked},useValueAsChecked(){return this.computedChecked===void 0&&this.computedValue},checkedProp(){return this.useValueAsChecked?this.computedValue:this.computedChecked},valueProp(){const e=this.$props.value;return this.useValueAsChecked||this.isValueControlled?e===null?e:void 0:e||this.computedValue},indeterminateProp(){return this.checkedProp===null||this.valueProp===null},isValid(){const e=this.$props.valid;return e!==void 0?e:this.$props.required?!!this.computedChecked:!0},labelComputedClass(){return{"k-checkbox-label":!0,[this.$props.labelClass]:this.$props.labelClass}}},mounted(){if(this.input=t.getRef(this,"input"),!this.currentDir&&window&&this.$el){const e=window.getComputedStyle(this.$el).direction;e&&(this.currentDir=e)}this.setValidity()},updated(){this.input||(this.input=t.getRef(this,"input")),this.setValidity()},setup(){const e=n.ref(null),i=n.inject("kendoLocalizationService",{});return{inputRef:e,kendoLocalizationService:i}},render(){const{ariaDescribedBy:e,ariaLabelledBy:i,disabled:a,id:r,label:m,labelRender:l,labelPlacement:k,name:b,labelOptional:C,tabIndex:$,required:u,validityStyles:v,size:o,rounded:c}=this.$props,h=t.getDefaultSlots(this);let s=m;this.localizationService=x.provideLocalizationService(this),this.defaultValidationMessage=this.localizeMessage(d.checkboxValidation),this.optionalMessage=this.localizeMessage(d.checkboxOptionalText);const p=t.classNames({"k-checkbox-wrap":!0,"k-disabled":a}),V=t.classNames({"k-checkbox":!0,[`k-checkbox-${t.kendoThemeMaps.sizeMap[o]}`]:o,[`k-rounded-${t.kendoThemeMaps.roundedMap[c]}`]:c,"k-indeterminate":this.indeterminateProp,"k-disabled":a,"k-invalid":!this.isValid&&v!==!1}),f=function(){return n.createVNode("input",{type:"checkbox",class:V,name:b,id:r||this.calculatedId,ref:t.setRef(this,"input"),"aria-labelledby":i,"aria-describedby":e,checked:!!this.checkedProp,disabled:a,tabindex:t.getTabIndex($,a),role:"checkbox",required:u!==void 0?u:!1,"aria-checked":this.computedChecked||this.checkedProp?!0:this.indeterminateProp?"mixed":!1,"aria-disabled":a||void 0,onChange:this.onChangeHandler,onKeydown:this.onKeyDownHandler,onFocus:this.onFocusHandler,onBlur:this.onBlurHandler},null)};if(l){const y=l?t.templateRendering.call(this,l,t.getListeners.call(this)):null;s=t.getTemplate.call(this,{h:n.h,template:y})}const g=function(){return s!==void 0?n.createVNode("label",{class:this.labelComputedClass,for:r||this.calculatedId,style:{userSelect:"none"}},[s,C&&n.createVNode("span",{class:"k-label-optional"},[this.optionalMessage])]):null};return k==="before"?n.createVNode("span",{class:p,dir:"rtl"},[f.call(this),g.call(this),h]):n.createVNode("span",{class:p,dir:this.currentDir},[f.call(this),g.call(this),h])},methods:{setValidity(){const e=this.$props.valid!==void 0?this.$props.valid:this.$props.required?!!this.computedChecked:!0;this.input&&this.input.setCustomValidity&&this.input.setCustomValidity(e?"":this.$props.validationMessage||this.defaultValidationMessage)},localizeMessage(e){return this.localizationService.toLanguageString(e,d.messages[e])},focusElement(){this.input&&this.input.focus()},setValue(e,i){this.$data.valueDuringOnChange=i,this.$nextTick(()=>{if(!this.isCheckedControlled&&!this.isValueControlled&&!this.$props.disabled&&(this.currentValue=i,this.currentChecked=i),!this.$props.disabled){const a={element:this.$el,focus:null};this.$emit("changemodel",i),this.$emit("update:modelValue",i),this.$emit("change",{e,event:e,handle:a,target:e.target,value:i})}this.$data.valueDuringOnChange=void 0})},onChangeHandler(e){let i=e.target.checked;this.setValue(e,i)},onKeyDownHandler(e){if(this.$props.disabled)return;const{keyCode:i}=e;let a=e.currentTarget.checked;i===t.Keys.space&&(e.preventDefault(),e.stopPropagation(),this.setValue(e,!a))},onBlurHandler(e){this.$props.disabled||this.$emit("blur",{event:e})},onFocusHandler(e){this.$props.disabled||this.$emit("focus",{event:e})}}});exports.Checkbox=B;
|
package/checkbox/Checkbox.mjs
CHANGED
|
@@ -57,16 +57,14 @@ const U = /* @__PURE__ */ x({
|
|
|
57
57
|
name: String,
|
|
58
58
|
size: {
|
|
59
59
|
type: String,
|
|
60
|
-
default: "medium",
|
|
61
60
|
validator: function(e) {
|
|
62
|
-
return [
|
|
61
|
+
return ["small", "medium", "large"].includes(e);
|
|
63
62
|
}
|
|
64
63
|
},
|
|
65
64
|
rounded: {
|
|
66
65
|
type: String,
|
|
67
|
-
default: "medium",
|
|
68
66
|
validator: function(e) {
|
|
69
|
-
return [
|
|
67
|
+
return ["none", "small", "medium", "large"].includes(e);
|
|
70
68
|
}
|
|
71
69
|
},
|
|
72
70
|
tabIndex: Number,
|
package/colors/ColorPalette.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"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:e=>!0,focus:e=>!0,blur:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,change:e=>!0},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]
|
|
8
|
+
"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:e=>!0,focus:e=>!0,blur:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,change:e=>!0},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]}},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:r}=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,i,l){const c=i!==void 0&&i.row===n,V=i&&i.col,N=l!==void 0&&l.row===n,E=l&&l.col,u=typeof r!="number"?r:{width:r,height:r},b=u?u.width+"px":void 0,P=u?u.height+"px":void 0;return g.map(function(m,h){const y=c&&V===h,R=t.classNames("k-colorpalette-tile",{"k-selected":y,"k-focus":N&&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,i){return g.map(function(l,c){return a.createVNode("tr",{role:"row",key:c},[S.call(this,l,c,n,i)])},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 r=this.paletteService.getNextCell(this.focusedColorCooridanates,s,o);this.focusedColor=this.paletteService.getColorAt(r)}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=$;
|
package/colors/ColorPalette.mjs
CHANGED
|
@@ -46,8 +46,7 @@ const k = 10, O = "office", X = /* @__PURE__ */ x({
|
|
|
46
46
|
ariaLabelledBy: String,
|
|
47
47
|
ariaDescribedBy: String,
|
|
48
48
|
size: {
|
|
49
|
-
type: [String, null]
|
|
50
|
-
default: "medium"
|
|
49
|
+
type: [String, null]
|
|
51
50
|
}
|
|
52
51
|
},
|
|
53
52
|
created() {
|
|
@@ -87,8 +86,8 @@ const k = 10, O = "office", X = /* @__PURE__ */ x({
|
|
|
87
86
|
const y = d.getCellCoordsFor(this.selectedColor), f = d.getCellCoordsFor(this.focusedColor), v = $("k-colorpalette", {
|
|
88
87
|
[`k-colorpalette-${D.sizeMap[e] || e}`]: e,
|
|
89
88
|
"k-disabled": t
|
|
90
|
-
}, o), S = function(m, l,
|
|
91
|
-
const u =
|
|
89
|
+
}, o), S = function(m, l, r, i) {
|
|
90
|
+
const u = r !== void 0 && r.row === l, N = r && r.col, E = i !== void 0 && i.row === l, R = i && i.col, c = typeof s != "number" ? s : {
|
|
92
91
|
width: s,
|
|
93
92
|
height: s
|
|
94
93
|
}, C = c ? c.width + "px" : void 0, P = c ? c.height + "px" : void 0;
|
|
@@ -116,12 +115,12 @@ const k = 10, O = "office", X = /* @__PURE__ */ x({
|
|
|
116
115
|
role: "gridcell"
|
|
117
116
|
}, null);
|
|
118
117
|
}, this);
|
|
119
|
-
}, V = function(m, l,
|
|
120
|
-
return m.map(function(
|
|
118
|
+
}, V = function(m, l, r) {
|
|
119
|
+
return m.map(function(i, u) {
|
|
121
120
|
return a("tr", {
|
|
122
121
|
role: "row",
|
|
123
122
|
key: u
|
|
124
|
-
}, [S.call(this,
|
|
123
|
+
}, [S.call(this, i, u, l, r)]);
|
|
125
124
|
}, this);
|
|
126
125
|
};
|
|
127
126
|
return p.colors.length ? a("div", {
|
package/colors/ColorPicker.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),w=require("@progress/kendo-vue-buttons"),t=require("@progress/kendo-vue-common"),S=require("../package-metadata.js"),V=require("./Picker.js"),B=require("./FlatColorPicker.js"),P=require("./utils/color-cache.js"),O=require("@progress/kendo-vue-intl"),n=require("../messages/main.js"),$=require("@progress/kendo-svg-icons"),T=require("./ColorPalette.js"),A=require("./common/ColorsAdaptiveMode.js");function R(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!a.isVNode(e)}const N=a.defineComponent({name:"KendoColorPicker",model:{event:"changemodel"},emits:{open:()=>!0,close:()=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,activecolorclick:e=>!0,focus:e=>!0,blur:e=>!0,change:e=>!0,viewchange:e=>!0},props:{modelValue:String,modelRgbaValue:String,value:{type:String,default:void 0},defaultValue:String,disabled:Boolean,dir:String,id:String,ariaLabelledBy:String,ariaDescribedBy:String,showClearButton:{type:Boolean,default:!0},showPreview:{type:Boolean,default:!0},showButtons:{type:Boolean,default:!0},paletteSettings:{type:Object,default:function(){return{palette:T.DEFAULT_PRESET}}},valid:{type:Boolean,default:!0},tabIndex:{type:Number,default:0},title:String,icon:String,svgIcon:Object,iconClassName:String,popupSettings:{type:Object,default:function(){return{}}},gradientSettings:{type:Object,default:function(){return P.DEFAULT_GRADIENT_SETTINGS}},flatColorPickerSettings:{type:Object,default:function(){return{}}},open:{type:Boolean,default:void 0},size:{type:String,
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),w=require("@progress/kendo-vue-buttons"),t=require("@progress/kendo-vue-common"),S=require("../package-metadata.js"),V=require("./Picker.js"),B=require("./FlatColorPicker.js"),P=require("./utils/color-cache.js"),O=require("@progress/kendo-vue-intl"),n=require("../messages/main.js"),$=require("@progress/kendo-svg-icons"),T=require("./ColorPalette.js"),A=require("./common/ColorsAdaptiveMode.js");function R(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!a.isVNode(e)}const N=a.defineComponent({name:"KendoColorPicker",model:{event:"changemodel"},emits:{open:()=>!0,close:()=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,activecolorclick:e=>!0,focus:e=>!0,blur:e=>!0,change:e=>!0,viewchange:e=>!0},props:{modelValue:String,modelRgbaValue:String,value:{type:String,default:void 0},defaultValue:String,disabled:Boolean,dir:String,id:String,ariaLabelledBy:String,ariaDescribedBy:String,showClearButton:{type:Boolean,default:!0},showPreview:{type:Boolean,default:!0},showButtons:{type:Boolean,default:!0},paletteSettings:{type:Object,default:function(){return{palette:T.DEFAULT_PRESET}}},valid:{type:Boolean,default:!0},tabIndex:{type:Number,default:0},title:String,icon:String,svgIcon:Object,iconClassName:String,popupSettings:{type:Object,default:function(){return{}}},gradientSettings:{type:Object,default:function(){return P.DEFAULT_GRADIENT_SETTINGS}},flatColorPickerSettings:{type:Object,default:function(){return{}}},open:{type:Boolean,default:void 0},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},view:{type:String,default:"combo",validator:function(e){return["gradient","palette","combo"].includes(e)}},selectedView:{type:Number,default:void 0},adaptive:{type:Boolean,default:!1},adaptiveTitle:{type:String}},inject:{kendoLocalizationService:{default:null},adaptiveModeBreakpoints:{default:{small:t.ADAPTIVE_SMALL_BREAKPOINT,medium:t.ADAPTIVE_MEDIUM_BREAKPOINT}}},data(){return{focused:!1,currentValue:this.$props.defaultValue,currentOpen:!1,flatcolorpickerRef:null,windowWidth:0,observer:null}},computed:{isValueControlled(){return this.$props.value!==void 0},isOpenControlled(){return this.$props.open!==void 0},computedValue(){return this.isValueControlled?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$props.modelRgbaValue!==void 0?this.$props.modelRgbaValue:this.currentValue!==void 0?this.currentValue:this.defaultValue},computedOpen(){return this.isOpenControlled?this.$props.open:this.currentOpen},wrapperClassName(){const{size:e,fillMode:o,rounded:i}=this.$props;return{"k-picker":!0,"k-colorpicker":!0,"k-icon-picker":!0,[`k-picker-${t.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-picker-${o}`]:o,[`k-rounded-${t.kendoThemeMaps.roundedMap[i]||i}`]:i,"k-invalid":!this.valid,"k-disabled":this.disabled,"k-focus":this.focused}},animationStyles(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?{top:0,width:"100%",height:"100%"}:void 0},classNameAdaptive(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"},adaptiveState(){return!!(this.$props.adaptive&&this.windowWidth&&this.windowWidth<=this.adaptiveModeBreakpoints.medium)}},created(){t.validatePackage(S.packageMetadata),this._popupId="popup"+t.guid(),this.focusableElementGuid=t.guid()},mounted(){this.observer=t.canUseDOM&&window.ResizeObserver&&new ResizeObserver(this.calculateMedia),document!=null&&document.body&&this.observer&&this.observer.observe(document.body),this.flatcolorpickerRef=t.getRef(this,"flatcolorpicker"),this.button=t.getRef(this,"button")},unmounted(){var e;(e=this.document)!=null&&e.body&&this.observer&&this.observer.disconnect()},render(){let e;const{disabled:o,tabIndex:i,dir:l,view:c,selectedView:d,showClearButton:p,showPreview:h,showButtons:f,popupSettings:g,size:m,adaptiveTitle:k}=this.$props,s=O.provideLocalizationService(this),v=s.toLanguageString(n.colorPickerDropdownButtonAriaLabel,n.messages[n.colorPickerDropdownButtonAriaLabel]),b=k||s.toLanguageString(n.colorPickerAdaptiveTitle,n.messages[n.colorPickerAdaptiveTitle]),C=s.toLanguageString(n.flatColorPickerApplyBtn,n.messages[n.flatColorPickerApplyBtn]),y=s.toLanguageString(n.flatColorPickerCancelBtn,n.messages[n.flatColorPickerCancelBtn]),u=function(){return a.h(B.FlatColorPicker,{onKeydown:this.onKeyDownHandler,ref:t.setRef(this,"flatcolorpicker"),view:c,selectedView:d,showClearButton:p,showPreview:h,showButtons:this.adaptiveState?!1:f,size:this.adaptiveState?"large":m,value:this.computedValue||void 0,onChange:this.onFlatChangeHandler,onFocusout:this.onBlurHandler,onViewchange:this.onViewChange,paletteSettings:this.paletteSettings,gradientSettings:this.gradientSettings,adaptive:this.adaptiveState,...this.flatColorPickerSettings})};return a.createVNode("span",{class:this.wrapperClassName,role:"combobox",dir:l,id:this.$props.id,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-disabled":this.$props.disabled,"aria-haspopup":"dialog","aria-expanded":this.computedOpen,ref:this.focusableElementGuid,tabindex:t.getTabIndex(i,o),title:this.$props.title,onKeydown:this.onButtonKeyDown,onFocusin:this.onFocusHandler,onFocusout:this.onButtonBlur},[a.createVNode("span",{onClick:this.onActiveColorClickHandler,class:"k-input-inner"},[a.createVNode("span",{class:t.classNames("k-value-icon","k-color-preview",{"k-no-color":!this.computedValue,"k-icon-color-preview":this.icon||this.iconClassName})},[(this.iconClassName||this.icon||this.svgIcon)&&a.createVNode(t.Icon,{class:t.classNames("k-color-preview-icon",this.iconClassName),name:t.getIconName(this.icon),icon:this.svgIcon},null),a.createVNode("span",{class:"k-color-preview-mask",style:{backgroundColor:this.computedValue}},null)])]),a.createVNode(w.Button,{type:"button",tabIndex:-1,ref:r=>{this.buttonRef=r},onClick:this.onClickHandler,rounded:null,class:"k-input-button",icon:"caret-alt-down",svgIcon:$.caretAltDownIcon,"aria-label":v},null),!this.adaptiveState&&a.createVNode(V.Picker,{dir:l,id:this._popupId,open:this.computedOpen,onOpen:this.onOpenHandler,popupAnchor:this.focusableElementGuid,popupSettings:{...g}},R(e=u.call(this))?e:{default:()=>[e]}),this.adaptiveState&&a.createVNode(A.ColorsAdaptiveMode,{expand:this.computedOpen,animationStyles:this.animationStyles,classNameAdaptive:this.classNameAdaptive,title:b,applyText:C,cancelText:y,componentToRender:u.call(this),onActionSheetClose:()=>this.setOpen(!this.computedOpen),onCancelBtnClick:()=>this.flatcolorpickerRef.handleCancelBtnClick(),onApplyBtnClick:r=>this.flatcolorpickerRef.triggerChange(r)},null)])},methods:{calculateMedia(e){for(let o of e)this.windowWidth=o.target.clientWidth},focusElement(){this.$el&&this.$el.focus()},setOpen(e,o){!e&&!o&&this.$el&&this.$el.focus(),this.currentOpen=e,this.$emit(e?"open":"close")},onButtonKeyDown(e){const{altKey:o,keyCode:i}=e;if(i===t.Keys.esc){e.preventDefault(),e.stopPropagation(),this.setOpen(!1);return}if(i===t.Keys.enter){e.preventDefault(),e.stopPropagation(),this.setOpen(!this.computedOpen);return}o&&i===t.Keys.down&&(e.preventDefault(),e.stopPropagation(),this.setOpen(!0))},onKeyDownHandler(e){const{altKey:o,keyCode:i}=e;if(i===t.Keys.esc){e.preventDefault(),e.stopPropagation(),this.setOpen(!1);return}if(i===t.Keys.enter){e.preventDefault(),e.stopPropagation(),this.focusElement();return}o&&i===t.Keys.up&&(e.preventDefault(),e.stopPropagation(),this.setOpen(!1),this.focusElement())},onOpenHandler(){const e=t.getRef(this,"flatcolorpicker");e&&e.focus()},onClickHandler(){this.setOpen(!this.computedOpen,!0)},onActiveColorClickHandler(e){this.$emit("activecolorclick",{event:e,value:this.computedValue})},isViewFocused(){return!!(document.activeElement&&document.activeElement.closest(`#${this._popupId}`))},onButtonBlur(e){this.focused=this.isViewFocused(),this.$emit("blur",{event:e})},onFocusHandler(e){this.blurTimeoutRef?(clearTimeout(this.blurTimeoutRef),this.blurTimeoutRef=void 0,e.target===this.$el&&this.setOpen(!1)):this.focused=!0,this.$emit("focus",{event:e})},onBlurTimeout(){const e=this.isViewFocused();e||this.setOpen(!1,!0),this.focused=e,this.blurTimeoutRef=void 0},onBlurHandler(){clearTimeout(this.blurTimeoutRef),this.palette=t.getRef(this,"palette"),this.gradient=t.getRef(this,"gradient"),this.blurTimeoutRef=setTimeout(this.onBlurTimeout,200)},onViewChange(e){this.$emit("viewchange",e)},onChangeHandler(e,o){const i=e.value;this.isValueControlled||(this.currentValue=i),o&&this.setOpen(!1),this.$emit("changemodel",i),this.$emit("update:modelRgbaValue",e.rgbaValue),this.$emit("update:modelValue",i),this.$emit("change",{value:i,rgbaValue:e.rgbaValue,event:e})},onFlatChangeHandler(e){this.onChangeHandler(e,!0)}}});exports.ColorPicker=N;
|
package/colors/ColorPicker.mjs
CHANGED
|
@@ -13,7 +13,7 @@ import { Picker as j } from "./Picker.mjs";
|
|
|
13
13
|
import { FlatColorPicker as x } from "./FlatColorPicker.mjs";
|
|
14
14
|
import { DEFAULT_GRADIENT_SETTINGS as W } from "./utils/color-cache.mjs";
|
|
15
15
|
import { provideLocalizationService as G } from "@progress/kendo-vue-intl";
|
|
16
|
-
import { colorPickerDropdownButtonAriaLabel as f, messages as
|
|
16
|
+
import { colorPickerDropdownButtonAriaLabel as f, messages as r, colorPickerAdaptiveTitle as m, flatColorPickerApplyBtn as g, flatColorPickerCancelBtn as b } from "../messages/main.mjs";
|
|
17
17
|
import { caretAltDownIcon as U } from "@progress/kendo-svg-icons";
|
|
18
18
|
import { DEFAULT_PRESET as q } from "./ColorPalette.mjs";
|
|
19
19
|
import { ColorsAdaptiveMode as J } from "./common/ColorsAdaptiveMode.mjs";
|
|
@@ -106,23 +106,20 @@ const ue = /* @__PURE__ */ A({
|
|
|
106
106
|
},
|
|
107
107
|
size: {
|
|
108
108
|
type: String,
|
|
109
|
-
default: "medium",
|
|
110
109
|
validator: function(e) {
|
|
111
|
-
return [
|
|
110
|
+
return ["small", "medium", "large"].includes(e);
|
|
112
111
|
}
|
|
113
112
|
},
|
|
114
113
|
rounded: {
|
|
115
114
|
type: String,
|
|
116
|
-
default: "medium",
|
|
117
115
|
validator: function(e) {
|
|
118
|
-
return [
|
|
116
|
+
return ["none", "small", "medium", "large", "full"].includes(e);
|
|
119
117
|
}
|
|
120
118
|
},
|
|
121
119
|
fillMode: {
|
|
122
120
|
type: String,
|
|
123
|
-
default: "solid",
|
|
124
121
|
validator: function(e) {
|
|
125
|
-
return [
|
|
122
|
+
return ["solid", "flat", "outline"].includes(e);
|
|
126
123
|
}
|
|
127
124
|
},
|
|
128
125
|
view: {
|
|
@@ -234,7 +231,7 @@ const ue = /* @__PURE__ */ A({
|
|
|
234
231
|
popupSettings: S,
|
|
235
232
|
size: B,
|
|
236
233
|
adaptiveTitle: V
|
|
237
|
-
} = this.$props, s = G(this), O = s.toLanguageString(f,
|
|
234
|
+
} = this.$props, s = G(this), O = s.toLanguageString(f, r[f]), $ = V || s.toLanguageString(m, r[m]), T = s.toLanguageString(g, r[g]), P = s.toLanguageString(b, r[b]), d = function() {
|
|
238
235
|
return I(x, {
|
|
239
236
|
onKeydown: this.onKeyDownHandler,
|
|
240
237
|
ref: _(this, "flatcolorpicker"),
|
|
@@ -290,8 +287,8 @@ const ue = /* @__PURE__ */ A({
|
|
|
290
287
|
}, null)])]), o(D, {
|
|
291
288
|
type: "button",
|
|
292
289
|
tabIndex: -1,
|
|
293
|
-
ref: (
|
|
294
|
-
this.buttonRef =
|
|
290
|
+
ref: (l) => {
|
|
291
|
+
this.buttonRef = l;
|
|
295
292
|
},
|
|
296
293
|
onClick: this.onClickHandler,
|
|
297
294
|
rounded: null,
|
|
@@ -320,7 +317,7 @@ const ue = /* @__PURE__ */ A({
|
|
|
320
317
|
componentToRender: d.call(this),
|
|
321
318
|
onActionSheetClose: () => this.setOpen(!this.computedOpen),
|
|
322
319
|
onCancelBtnClick: () => this.flatcolorpickerRef.handleCancelBtnClick(),
|
|
323
|
-
onApplyBtnClick: (
|
|
320
|
+
onApplyBtnClick: (l) => this.flatcolorpickerRef.triggerChange(l)
|
|
324
321
|
}, null)]);
|
|
325
322
|
},
|
|
326
323
|
methods: {
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),d=require("@progress/kendo-svg-icons"),o=require("@progress/kendo-vue-common"),i=require("@progress/kendo-vue-buttons"),u=require("./ColorPalette.js"),w=require("./ColorGradient.js"),y=require("../package-metadata.js"),a=require("../messages/main.js"),B=require("./utils/color-parser.js"),P=require("./utils/color-cache.js"),S=require("@progress/kendo-vue-intl");function h(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const I=t.defineComponent({name:"KendoFlatColorPicker",emits:{viewchange:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,focus:e=>!0,blur:e=>!0,focusout:e=>!0,keydown:e=>!0,change:e=>!0},props:{modelValue:String,modelRgbaValue:String,value:String,prevValue:String,tabIndex:Number,disabled:Boolean,view:{type:String,default:"combo",validator:function(e){return["gradient","palette","combo"].includes(e)}},selectedView:{type:Number,default:void 0},header:[String,Function,Object],footer:[String,Function,Object],showClearButton:{type:Boolean,default:!0},showPreview:{type:Boolean,default:!0},showButtons:{type:Boolean,default:!0},gradientSettings:{type:Object,default:function(){return P.DEFAULT_GRADIENT_SETTINGS}},paletteSettings:{type:Object,default:function(){return{palette:u.DEFAULT_PRESET}}},size:{type:String
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),d=require("@progress/kendo-svg-icons"),o=require("@progress/kendo-vue-common"),i=require("@progress/kendo-vue-buttons"),u=require("./ColorPalette.js"),w=require("./ColorGradient.js"),y=require("../package-metadata.js"),a=require("../messages/main.js"),B=require("./utils/color-parser.js"),P=require("./utils/color-cache.js"),S=require("@progress/kendo-vue-intl");function h(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const I=t.defineComponent({name:"KendoFlatColorPicker",emits:{viewchange:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,focus:e=>!0,blur:e=>!0,focusout:e=>!0,keydown:e=>!0,change:e=>!0},props:{modelValue:String,modelRgbaValue:String,value:String,prevValue:String,tabIndex:Number,disabled:Boolean,view:{type:String,default:"combo",validator:function(e){return["gradient","palette","combo"].includes(e)}},selectedView:{type:Number,default:void 0},header:[String,Function,Object],footer:[String,Function,Object],showClearButton:{type:Boolean,default:!0},showPreview:{type:Boolean,default:!0},showButtons:{type:Boolean,default:!0},gradientSettings:{type:Object,default:function(){return P.DEFAULT_GRADIENT_SETTINGS}},paletteSettings:{type:Object,default:function(){return{palette:u.DEFAULT_PRESET}}},size:{type:String},adaptive:Boolean},inject:{kendoLocalizationService:{default:null}},created(){o.validatePackage(y.packageMetadata)},computed:{isColorGradient(){return this.view!=="combo"?this.view==="gradient":this.selectedView!==void 0?this.selectedView===0:this.currentView==="gradient"},computedColor(){return this.value!==void 0?this.value:this.modelValue!==void 0?this.modelValue:this.modelRgbaValue!==void 0?this.modelRgbaValue:this.colorValue},computedPrevColor(){return this.prevValue!==void 0?this.prevValue:this.currentPrevColor},previewClass(){return{"k-coloreditor-preview-color":!0,"k-color-preview":!0,"k-no-color":!this.colorValue}},currentClass(){return{"k-coloreditor-current-color":!0,"k-color-preview":!0,"k-no-color":!this.computedPrevColor}},computedTabIndex(){return this.focused?0:-1}},data(){const e=this.value||this.defaultValue||this.modelValue||this.modelRgbaValue;return{currentView:"gradient",colorValue:e,currentPrevColor:e,focused:!1}},render(){const{size:e,adaptive:r}=this.$props,n=S.provideLocalizationService(this),p=n.toLanguageString(a.flatColorPickerGradientBtn,a.messages[a.flatColorPickerGradientBtn]),g=n.toLanguageString(a.flatColorPickerPaletteBtn,a.messages[a.flatColorPickerPaletteBtn]),C=n.toLanguageString(a.flatColorPickerClearBtn,a.messages[a.flatColorPickerClearBtn]),l=n.toLanguageString(a.flatColorPickerCancelBtn,a.messages[a.flatColorPickerCancelBtn]),s=n.toLanguageString(a.flatColorPickerApplyBtn,a.messages[a.flatColorPickerApplyBtn]),k=o.templateRendering.call(this,this.$props.header,o.getListeners.call(this)),f=o.templateRendering.call(this,this.$props.footer,o.getListeners.call(this)),m=o.getTemplate.call(this,{h:t.h,template:k}),v=o.getTemplate.call(this,{h:t.h,template:f}),V=function(){return t.h(w.ColorGradient,{ref:o.setRef(this,"gradient"),tabIndex:-1,value:this.colorValue,innerTabIndex:this.computedTabIndex,size:e,onChange:this.handleColorChange,onKeydown:this.innerKeyDown,adaptive:r,...this.gradientSettings})},b=function(){return t.h(u.ColorPalette,{ref:o.setRef(this,"palette"),tabIndex:this.computedTabIndex,value:this.colorValue,size:e,onChange:this.handlePaletteColorChange,onKeydown:this.gradientKeyDown,...this.paletteSettings})};return t.createVNode("div",{tabindex:o.getTabIndex(this.$props.tabIndex,this.$props.disabled),onFocus:this.onFocus,onBlur:this.onBlur,onFocusout:this.onFocusout,onKeydown:this.onKeyDownHandler,class:o.classNames("k-flatcolorpicker k-coloreditor",{[`k-coloreditor-${o.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-disabled":this.$props.disabled}),"aria-disabled":this.$props.disabled},[m,this.$props.showClearButton&&this.$props.showPreview&&t.createVNode("div",{class:"k-coloreditor-header k-hstack"},[this.$props.view==="combo"&&t.createVNode("div",{class:"k-coloreditor-header-actions k-hstack"},[t.createVNode(i.ButtonGroup,{class:"k-button-group-flat"},{default:()=>[t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",togglable:!0,fillMode:"flat",selected:this.isColorGradient,onKeydown:this.handleButtonKeydown,ariaLabel:p,size:e,onClick:c=>this.handleViewChange(c,"gradient")},{default:()=>[t.createVNode(o.Icon,{size:e,name:"droplet-slider",icon:d.dropletSliderIcon},null)]}),t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",togglable:!0,fillMode:"flat",selected:!this.isColorGradient,onKeydown:this.handleButtonKeydown,ariaLabel:g,size:e,onClick:c=>this.handleViewChange(c,"palette")},{default:()=>[t.createVNode(o.Icon,{size:e,name:"palette",icon:d.paletteIcon},null)]})]})]),t.createVNode("div",{class:"k-spacer"},null),t.createVNode("div",{class:"k-coloreditor-header-actions k-hstack"},[this.$props.showClearButton&&t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",fillMode:"flat",ariaLabel:C,size:e,onKeydown:this.handleButtonKeydown,onClick:this.handleResetColor},{default:()=>[t.createVNode(o.Icon,{size:e,name:"droplet-slash",icon:d.dropletSlashIcon},null)]}),this.$props.showPreview&&t.createVNode("div",{class:"k-coloreditor-preview k-vstack"},[t.createVNode("span",{class:this.previewClass,style:{background:this.colorValue}},[!this.colorValue&&t.createVNode("span",{class:"k-color-preview-mask"},null)]),t.createVNode("span",{class:this.currentClass,style:{background:this.computedPrevColor},onClick:this.handlePrevColorClick},[!this.computedPrevColor&&t.createVNode("span",{class:"k-color-preview-mask"},null)])])])]),t.createVNode("div",{class:"k-coloreditor-views k-vstack"},[this.isColorGradient?V.call(this):b.call(this)]),this.$props.showButtons&&t.createVNode("div",{class:"k-coloreditor-footer k-actions k-actions-end"},[t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",class:"k-coloreditor-cancel",size:e,onKeydown:this.handleButtonKeydown,onClick:this.handleCancelBtnClick},h(l)?l:{default:()=>[l]}),t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",class:"k-coloreditor-apply k-primary",size:e,onKeydown:this.handleButtonKeydown,onClick:this.triggerChange},h(s)?s:{default:()=>[s]})]),v])},methods:{focus(){this.focused=!0,setTimeout(()=>{o.focusFirstFocusableChild(this.$el)},1)},onKeyDownHandler(e){const r=this.$el;this.focused=o.focusContainer(e,r),this.$emit("keydown",e)},handleViewChange(e,r){this.currentView=r,this.$emit("viewchange",{event:e,viewType:r})},handleResetColor(){this.colorValue=null,!this.showButtons&&!this.adaptive&&this.triggerChange()},handleColorChange(e){this.colorValue=e.value,!this.showButtons&&!this.adaptive&&this.triggerChange(e)},handlePaletteColorChange(e){this.colorValue=e.value,!this.showButtons&&!this.adaptive&&this.triggerChange(e)},triggerChange(e){const r=B.parseColor(this.colorValue,"rgba");this.currentPrevColor=this.colorValue,this.$emit("changemodel",this.colorValue),this.$emit("update:modelValue",this.colorValue),this.$emit("update:modelRgbaValue",r),this.$emit("change",{event:e,value:this.colorValue,rgbaValue:r})},innerKeyDown(e){e.keyCode===o.Keys.enter&&this.triggerChange(e)},gradientKeyDown(e){e.stopPropagation(),!this.showButtons&&e.keyCode===o.Keys.enter&&this.triggerChange(e)},handleButtonKeydown(e){e.keyCode===o.Keys.enter&&e.stopPropagation()},handleCancelBtnClick(){this.colorValue=this.computedPrevColor},handlePrevColorClick(){this.colorValue=this.computedPrevColor},onFocus(e){this.$emit("focus",{event:e,target:this})},onBlur(e){this.$emit("blur",{event:e,target:this})},onFocusout(e){this.$emit("focusout",{event:e,target:this})}}});exports.FlatColorPicker=I;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import { defineComponent as T, h as l, createVNode as t, isVNode as z } from "vue";
|
|
9
9
|
import { dropletSliderIcon as F, paletteIcon as L, dropletSlashIcon as R } from "@progress/kendo-svg-icons";
|
|
10
|
-
import { Keys as
|
|
10
|
+
import { Keys as c, focusContainer as M, focusFirstFocusableChild as G, templateRendering as h, getListeners as p, getTemplate as g, classNames as D, getTabIndex as j, kendoThemeMaps as N, Icon as u, validatePackage as E, setRef as m } from "@progress/kendo-vue-common";
|
|
11
11
|
import { ButtonGroup as O, Button as a } from "@progress/kendo-vue-buttons";
|
|
12
12
|
import { DEFAULT_PRESET as A, ColorPalette as _ } from "./ColorPalette.mjs";
|
|
13
13
|
import { ColorGradient as H } from "./ColorGradient.mjs";
|
|
@@ -79,8 +79,7 @@ const ne = /* @__PURE__ */ T({
|
|
|
79
79
|
}
|
|
80
80
|
},
|
|
81
81
|
size: {
|
|
82
|
-
type: String
|
|
83
|
-
default: "medium"
|
|
82
|
+
type: String
|
|
84
83
|
},
|
|
85
84
|
adaptive: Boolean
|
|
86
85
|
},
|
|
@@ -191,7 +190,7 @@ const ne = /* @__PURE__ */ T({
|
|
|
191
190
|
size: e,
|
|
192
191
|
onClick: (d) => this.handleViewChange(d, "gradient")
|
|
193
192
|
}, {
|
|
194
|
-
default: () => [t(
|
|
193
|
+
default: () => [t(u, {
|
|
195
194
|
size: e,
|
|
196
195
|
name: "droplet-slider",
|
|
197
196
|
icon: F
|
|
@@ -207,7 +206,7 @@ const ne = /* @__PURE__ */ T({
|
|
|
207
206
|
size: e,
|
|
208
207
|
onClick: (d) => this.handleViewChange(d, "palette")
|
|
209
208
|
}, {
|
|
210
|
-
default: () => [t(
|
|
209
|
+
default: () => [t(u, {
|
|
211
210
|
size: e,
|
|
212
211
|
name: "palette",
|
|
213
212
|
icon: L
|
|
@@ -226,7 +225,7 @@ const ne = /* @__PURE__ */ T({
|
|
|
226
225
|
onKeydown: this.handleButtonKeydown,
|
|
227
226
|
onClick: this.handleResetColor
|
|
228
227
|
}, {
|
|
229
|
-
default: () => [t(
|
|
228
|
+
default: () => [t(u, {
|
|
230
229
|
size: e,
|
|
231
230
|
name: "droplet-slash",
|
|
232
231
|
icon: R
|
|
@@ -306,13 +305,13 @@ const ne = /* @__PURE__ */ T({
|
|
|
306
305
|
});
|
|
307
306
|
},
|
|
308
307
|
innerKeyDown(e) {
|
|
309
|
-
e.keyCode ===
|
|
308
|
+
e.keyCode === c.enter && this.triggerChange(e);
|
|
310
309
|
},
|
|
311
310
|
gradientKeyDown(e) {
|
|
312
|
-
e.stopPropagation(), !this.showButtons && e.keyCode ===
|
|
311
|
+
e.stopPropagation(), !this.showButtons && e.keyCode === c.enter && this.triggerChange(e);
|
|
313
312
|
},
|
|
314
313
|
handleButtonKeydown(e) {
|
|
315
|
-
e.keyCode ===
|
|
314
|
+
e.keyCode === c.enter && e.stopPropagation();
|
|
316
315
|
},
|
|
317
316
|
handleCancelBtnClick() {
|
|
318
317
|
this.colorValue = this.computedPrevColor;
|