@progress/kendo-vue-inputs 7.0.1-develop.2 → 7.0.1-develop.4
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 +23 -19
- package/colors/ColorGradient.js +2 -2
- package/colors/ColorGradient.mjs +10 -10
- package/colors/ColorPalette.js +1 -1
- package/colors/ColorPalette.mjs +16 -16
- package/colors/ColorPicker.js +1 -1
- package/colors/ColorPicker.mjs +16 -16
- package/colors/FlatColorPicker.js +1 -1
- package/colors/FlatColorPicker.mjs +35 -35
- package/colors/HexInput.js +1 -1
- package/colors/HexInput.mjs +15 -11
- package/dist/cdn/js/kendo-vue-inputs.js +1 -1
- package/index.d.mts +559 -226
- package/index.d.ts +559 -226
- package/input/Input.js +1 -1
- package/input/Input.mjs +39 -35
- package/maskedtextbox/MaskedTextBox.js +1 -1
- package/maskedtextbox/MaskedTextBox.mjs +12 -5
- package/numerictextbox/NumericTextBox.js +1 -1
- package/numerictextbox/NumericTextBox.mjs +11 -7
- 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 +30 -24
- package/radiobutton/RadioGroup.js +1 -1
- package/radiobutton/RadioGroup.mjs +30 -30
- package/rating/Rating.js +1 -1
- package/rating/Rating.mjs +34 -30
- package/rating/RatingItem.js +1 -1
- package/rating/RatingItem.mjs +4 -4
- package/signature/Signature.js +1 -1
- package/signature/Signature.mjs +11 -11
- package/slider/Slider.js +1 -1
- package/slider/Slider.mjs +18 -14
- package/switch/Switch.js +1 -1
- package/switch/Switch.mjs +15 -11
- package/textarea/TextArea.js +1 -1
- package/textarea/TextArea.mjs +18 -18
- package/textbox/TextBox.js +1 -1
- package/textbox/TextBox.mjs +25 -21
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:
|
|
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,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},rounded:{type:String,default:"medium",validator:function(e){return[null,"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:g,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=g;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 m=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),m.call(this),h]):n.createVNode("span",{class:p,dir:this.currentDir},[f.call(this),m.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,handle:a,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
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { defineComponent as x, h as B, createVNode as
|
|
8
|
+
import { defineComponent as x, h as B, createVNode as a, ref as D, inject as M } from "vue";
|
|
9
9
|
import { Keys as O, getDefaultSlots as P, classNames as f, kendoThemeMaps as m, templateRendering as z, getListeners as L, getTemplate as w, getRef as g, validatePackage as I, guid as H, getTabIndex as T, setRef as N } from "@progress/kendo-vue-common";
|
|
10
10
|
import { packageMetadata as R } from "../package-metadata.mjs";
|
|
11
11
|
import { provideLocalizationService as q } from "@progress/kendo-vue-intl";
|
|
@@ -13,11 +13,11 @@ import { messages as K, checkboxValidation as j, checkboxOptionalText as A } fro
|
|
|
13
13
|
const U = /* @__PURE__ */ x({
|
|
14
14
|
name: "KendoCheckbox",
|
|
15
15
|
emits: {
|
|
16
|
-
changemodel:
|
|
17
|
-
"update:modelValue":
|
|
18
|
-
change:
|
|
19
|
-
focus:
|
|
20
|
-
blur:
|
|
16
|
+
changemodel: (e) => !0,
|
|
17
|
+
"update:modelValue": (e) => !0,
|
|
18
|
+
change: (e) => !0,
|
|
19
|
+
focus: (e) => !0,
|
|
20
|
+
blur: (e) => !0
|
|
21
21
|
},
|
|
22
22
|
model: {
|
|
23
23
|
event: "changemodel"
|
|
@@ -165,13 +165,13 @@ const U = /* @__PURE__ */ x({
|
|
|
165
165
|
labelPlacement: k,
|
|
166
166
|
name: $,
|
|
167
167
|
labelOptional: C,
|
|
168
|
-
tabIndex:
|
|
168
|
+
tabIndex: v,
|
|
169
169
|
required: d,
|
|
170
|
-
validityStyles:
|
|
170
|
+
validityStyles: V,
|
|
171
171
|
size: r,
|
|
172
172
|
rounded: u
|
|
173
173
|
} = this.$props, o = P(this);
|
|
174
|
-
let
|
|
174
|
+
let l = b;
|
|
175
175
|
this.localizationService = q(this), this.defaultValidationMessage = this.localizeMessage(j), this.optionalMessage = this.localizeMessage(A);
|
|
176
176
|
const h = f({
|
|
177
177
|
"k-checkbox-wrap": !0,
|
|
@@ -182,9 +182,9 @@ const U = /* @__PURE__ */ x({
|
|
|
182
182
|
[`k-rounded-${m.roundedMap[u]}`]: u,
|
|
183
183
|
"k-indeterminate": this.indeterminateProp,
|
|
184
184
|
"k-disabled": i,
|
|
185
|
-
"k-invalid": !this.isValid &&
|
|
185
|
+
"k-invalid": !this.isValid && V !== !1
|
|
186
186
|
}), c = function() {
|
|
187
|
-
return
|
|
187
|
+
return a("input", {
|
|
188
188
|
type: "checkbox",
|
|
189
189
|
class: y,
|
|
190
190
|
name: $,
|
|
@@ -194,7 +194,7 @@ const U = /* @__PURE__ */ x({
|
|
|
194
194
|
"aria-describedby": e,
|
|
195
195
|
checked: !!this.checkedProp,
|
|
196
196
|
disabled: i,
|
|
197
|
-
tabindex: T(
|
|
197
|
+
tabindex: T(v, i),
|
|
198
198
|
role: "checkbox",
|
|
199
199
|
required: d !== void 0 ? d : !1,
|
|
200
200
|
"aria-checked": this.computedChecked || this.checkedProp ? !0 : this.indeterminateProp ? "mixed" : !1,
|
|
@@ -207,26 +207,26 @@ const U = /* @__PURE__ */ x({
|
|
|
207
207
|
};
|
|
208
208
|
if (n) {
|
|
209
209
|
const S = n ? z.call(this, n, L.call(this)) : null;
|
|
210
|
-
|
|
210
|
+
l = w.call(this, {
|
|
211
211
|
h: B,
|
|
212
212
|
template: S
|
|
213
213
|
});
|
|
214
214
|
}
|
|
215
215
|
const p = function() {
|
|
216
|
-
return
|
|
216
|
+
return l !== void 0 ? a("label", {
|
|
217
217
|
class: this.labelComputedClass,
|
|
218
218
|
for: s || this.calculatedId,
|
|
219
219
|
style: {
|
|
220
220
|
userSelect: "none"
|
|
221
221
|
}
|
|
222
|
-
}, [
|
|
222
|
+
}, [l, C && a("span", {
|
|
223
223
|
class: "k-label-optional"
|
|
224
224
|
}, [this.optionalMessage])]) : null;
|
|
225
225
|
};
|
|
226
|
-
return k === "before" ?
|
|
226
|
+
return k === "before" ? a("span", {
|
|
227
227
|
class: h,
|
|
228
228
|
dir: "rtl"
|
|
229
|
-
}, [c.call(this), p.call(this), o]) :
|
|
229
|
+
}, [c.call(this), p.call(this), o]) : a("span", {
|
|
230
230
|
class: h,
|
|
231
231
|
dir: this.currentDir
|
|
232
232
|
}, [c.call(this), p.call(this), o]);
|
|
@@ -273,10 +273,14 @@ const U = /* @__PURE__ */ x({
|
|
|
273
273
|
t === O.space && (e.preventDefault(), e.stopPropagation(), this.setValue(e, !i));
|
|
274
274
|
},
|
|
275
275
|
onBlurHandler(e) {
|
|
276
|
-
this.$props.disabled || this.$emit("blur",
|
|
276
|
+
this.$props.disabled || this.$emit("blur", {
|
|
277
|
+
event: e
|
|
278
|
+
});
|
|
277
279
|
},
|
|
278
280
|
onFocusHandler(e) {
|
|
279
|
-
this.$props.disabled || this.$emit("focus",
|
|
281
|
+
this.$props.disabled || this.$emit("focus", {
|
|
282
|
+
event: e
|
|
283
|
+
});
|
|
280
284
|
}
|
|
281
285
|
}
|
|
282
286
|
});
|
package/colors/ColorGradient.js
CHANGED
|
@@ -5,6 +5,6 @@
|
|
|
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"),i=require("@progress/kendo-vue-common"),V=require("../package-metadata.js"),u=require("./utils/misc.js"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),i=require("@progress/kendo-vue-common"),V=require("../package-metadata.js"),u=require("./utils/misc.js"),s=require("./utils/color-parser.js"),B=require("./utils/color-cache.js"),$=require("./ColorInput.js"),G=require("./ColorContrastLabels.js"),L=require("./ColorContrastSvg.js"),F=require("@progress/kendo-vue-intl"),l=require("../messages/main.js"),v=require("../slider/Slider.js"),I="rgba",m="rgba(255, 255, 255, 1)",T=n.defineComponent({name:"KendoColorGradient",model:{event:"changemodel"},emits:{change:e=>!0,focus:e=>!0,blur:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,keydown:e=>!0},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(){i.validatePackage(V.packageMetadata),this.guid=i.guid()},computed:{valueSet(){return this.value||this.modelValue||this.modelRgbaValue},computedValue(){let e=this.valueSet||this.currentValue||this.defaultValue||s.parseColor(m,I);return u.isPresent(s.parseColor(e,"hex",this.opacity))||(e=m),e},hsva(){return this.valueSet?s.getHSV(this.computedValue):this.currentHsva||s.getHSV(this.computedValue)},rgba(){return this.valueSet?s.getRGBA(this.computedValue):this.currentRgba},hex(){return this.valueSet?s.parseColor(this.computedValue,"hex",this.opacity):this.currentHex},computedBgColor(){return this.currentBgColor||s.getColorFromHue(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(){B.removeCachedColor(this.guid)},updated(){this.setAlphaSliderBackground(this.computedBgColor)},render(){const{size:e,disabled:t,class:r,opacity:a,id:o,tabIndex:h,ariaDescribedBy:g,ariaLabelledBy:C,adaptive:c}=this.$props,f=i.classNames("k-colorgradient",{"k-disabled":t,[`k-colorgradient-${i.kendoThemeMaps.sizeMap[e]||e}`]:e},r),b=F.provideLocalizationService(this),k=b.toLanguageString(l.colorGradientHueSliderLabel,l.messages[l.colorGradientHueSliderLabel]),S=b.toLanguageString(l.colorGradientAlphaSliderLabel,l.messages[l.colorGradientAlphaSliderLabel]),y=b.toLanguageString(l.colorGradientDragHandle,l.messages[l.colorGradientDragHandle]),x=function(){let d={};if(!this.isFirstRender){const p=this.getGradientRectMetrics(),R=(1-this.hsva.v)*p.height,H=this.hsva.s*p.width;d.top=`${R}px`,d.left=`${H}px`}return n.createVNode("div",{class:"k-hsv-draghandle k-draghandle",role:"slider","aria-orientation":void 0,"aria-label":y+`${this.value||"none"}`,"aria-valuenow":Math.round(this.hsva.s*100),"aria-valuetext":`
|
|
9
9
|
saturation: ${Math.round(this.hsva.s*100)}%,
|
|
10
|
-
value: ${Math.round(this.hsva.v*100)}%`,tabindex:this.computedTabIndex,onKeydown:this.dragKeyDown,style:d,ref:i.setRef(this,"draghandle")},null)};return n.createVNode("div",{id:o,class:f,role:h!==-1?"textbox":void 0,"aria-disabled":t,tabindex:i.getTabIndex(h,t),"aria-labelledby":C,"aria-describedby":g,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onKeyDownHandler},[n.createVNode("div",{class:`k-colorgradient-canvas ${c?"k-vstack":"k-hstack"}`},[n.createVNode("div",{class:"k-hsv-rectangle",style:{background:this.computedBgColor}},[n.createVNode(i.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:"draggable"},{default:()=>[n.createVNode("div",{class:"k-hsv-gradient",style:{touchAction:"none"},tabindex:-1,onClick:this.onGradientWrapperClick},[x.call(this)])]}),this.backgroundColor&&!this.isFirstRender&&n.createVNode(L.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.hsva,backgroundColor:this.backgroundColor},null)]),n.createVNode("div",{class:`k-hsv-controls ${c?"k-vstack":"k-hstack"}`},[n.createVNode(v.Slider,{tabIndex:this.computedTabIndex,value:this.hsva.h,buttons:!1,vertical:!c,min:0,max:360,step:5,onChange:this.onHueSliderChange,class:"k-hue-slider k-colorgradient-slider",disabled:t,ariaLabel:k},null),a&&n.createVNode(v.Slider,{tabIndex:this.computedTabIndex,value:u.isPresent(this.hsva.a)?this.hsva.a*100:100,buttons:!1,vertical:!c,min:0,max:100,step:1,onChange:this.onAlphaSliderChange,class:"k-alpha-slider k-colorgradient-slider",disabled:t,ariaLabel:S,ref:d=>{this.alphaSliderRef=d}},null)])]),n.createVNode($.ColorInput,{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&&n.createVNode(G.ColorContrastLabels,{bgColor:
|
|
10
|
+
value: ${Math.round(this.hsva.v*100)}%`,tabindex:this.computedTabIndex,onKeydown:this.dragKeyDown,style:d,ref:i.setRef(this,"draghandle")},null)};return n.createVNode("div",{id:o,class:f,role:h!==-1?"textbox":void 0,"aria-disabled":t,tabindex:i.getTabIndex(h,t),"aria-labelledby":C,"aria-describedby":g,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onKeyDownHandler},[n.createVNode("div",{class:`k-colorgradient-canvas ${c?"k-vstack":"k-hstack"}`},[n.createVNode("div",{class:"k-hsv-rectangle",style:{background:this.computedBgColor}},[n.createVNode(i.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:"draggable"},{default:()=>[n.createVNode("div",{class:"k-hsv-gradient",style:{touchAction:"none"},tabindex:-1,onClick:this.onGradientWrapperClick},[x.call(this)])]}),this.backgroundColor&&!this.isFirstRender&&n.createVNode(L.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.hsva,backgroundColor:this.backgroundColor},null)]),n.createVNode("div",{class:`k-hsv-controls ${c?"k-vstack":"k-hstack"}`},[n.createVNode(v.Slider,{tabIndex:this.computedTabIndex,value:this.hsva.h,buttons:!1,vertical:!c,min:0,max:360,step:5,onChange:this.onHueSliderChange,class:"k-hue-slider k-colorgradient-slider",disabled:t,ariaLabel:k},null),a&&n.createVNode(v.Slider,{tabIndex:this.computedTabIndex,value:u.isPresent(this.hsva.a)?this.hsva.a*100:100,buttons:!1,vertical:!c,min:0,max:100,step:1,onChange:this.onAlphaSliderChange,class:"k-alpha-slider k-colorgradient-slider",disabled:t,ariaLabel:S,ref:d=>{this.alphaSliderRef=d}},null)])]),n.createVNode($.ColorInput,{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&&n.createVNode(G.ColorContrastLabels,{bgColor:s.getRGBA(this.backgroundColor),rgba:this.rgba},null)])},methods:{onKeyDownHandler(e){const t=this.$el;this.innerTabIndex===void 0&&(this.focused=i.focusContainer(e,t)),this.$emit("keydown",e)},onHexChange(e,t,r){const a=s.getRGBA(t),o=s.getHSV(t);this.currentHsva=o,this.currentBgColor=s.getColorFromHue(o.h),this.currentRgba=a,this.currentHex=e,this.dispatchChangeEvent(t,r.event,e,t)},onRgbaChange(e,t){const r=s.getColorFromRGBA(e),a=s.parseColor(r,"hex",this.opacity),o=s.getHSV(r);this.currentHsva=o,this.currentBgColor=s.getColorFromHue(o.h),this.currentRgba=e,this.currentHex=a,this.dispatchChangeEvent(r,t.event,a,r)},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=i.getRef(this,"draghandle"),this.firstFocusable&&this.firstFocusable.focus(),this.changePosition(e)},move(e,t,r){const a=this.hsva;a[t]+=r*(e.shiftKey?.01:.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 i.Keys.left:this.move(e,"s",-1);break;case i.Keys.right:this.move(e,"s",1);break;case i.Keys.up:this.move(e,"v",1);break;case i.Keys.down:this.move(e,"v",-1);break;case i.Keys.enter:break;case i.Keys.esc:break}},changePosition(e){const t=this.getGradientRectMetrics(),r=e.clientX-t.left,a=e.clientY-t.top,o=u.fitIntoBounds(r,0,t.width),h=u.fitIntoBounds(a,0,t.height),g=Object.assign({},this.hsva,{s:o/t.width,v:1-h/t.height});this.handleHsvaChange(g,e,e.event)},handleHsvaChange(e,t){const r=s.getColorFromHSV(e),a=s.parseColor(r,"hex",this.opacity),o=s.parseColor(r,"rgba");this.currentHsva=e,this.currentBgColor=s.getColorFromHue(e.h),this.currentRgba=s.getRGBA(r),this.currentHex=a,this.dispatchChangeEvent(r,t,a,o)},dispatchChangeEvent(e,t,r,a){this.currentValue=e,this.$emit("changemodel",r),this.$emit("update:modelRgbaValue",a),this.$emit("update:modelValue",r),this.$emit("change",{event:t,target:this,value:r,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(()=>{i.focusFirstFocusableChild(this.$el)},1)}}});exports.ColorGradient=T;
|
package/colors/ColorGradient.mjs
CHANGED
|
@@ -15,7 +15,7 @@ import { ColorInput as _ } from "./ColorInput.mjs";
|
|
|
15
15
|
import { ColorContrastLabels as U } from "./ColorContrastLabels.mjs";
|
|
16
16
|
import { ColorContrastSvg as q } from "./ColorContrastSvg.mjs";
|
|
17
17
|
import { provideLocalizationService as J } from "@progress/kendo-vue-intl";
|
|
18
|
-
import { colorGradientHueSliderLabel as k, messages as
|
|
18
|
+
import { colorGradientHueSliderLabel as k, messages as v, colorGradientAlphaSliderLabel as S, colorGradientDragHandle as x } from "../messages/main.mjs";
|
|
19
19
|
import { Slider as R } from "../slider/Slider.mjs";
|
|
20
20
|
const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
|
|
21
21
|
name: "KendoColorGradient",
|
|
@@ -23,13 +23,13 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
|
|
|
23
23
|
event: "changemodel"
|
|
24
24
|
},
|
|
25
25
|
emits: {
|
|
26
|
-
change:
|
|
27
|
-
focus:
|
|
28
|
-
blur:
|
|
29
|
-
changemodel:
|
|
30
|
-
"update:modelValue":
|
|
31
|
-
"update:modelRgbaValue":
|
|
32
|
-
keydown:
|
|
26
|
+
change: (e) => !0,
|
|
27
|
+
focus: (e) => !0,
|
|
28
|
+
blur: (e) => !0,
|
|
29
|
+
changemodel: (e) => !0,
|
|
30
|
+
"update:modelValue": (e) => !0,
|
|
31
|
+
"update:modelRgbaValue": (e) => !0,
|
|
32
|
+
keydown: (e) => !0
|
|
33
33
|
},
|
|
34
34
|
inject: {
|
|
35
35
|
kendoLocalizationService: {
|
|
@@ -120,10 +120,10 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
|
|
|
120
120
|
} = this.$props, B = A("k-colorgradient", {
|
|
121
121
|
"k-disabled": t,
|
|
122
122
|
[`k-colorgradient-${K.sizeMap[e] || e}`]: e
|
|
123
|
-
}, i), b = J(this), $ = b.toLanguageString(k,
|
|
123
|
+
}, i), b = J(this), $ = b.toLanguageString(k, v[k]), V = b.toLanguageString(S, v[S]), L = b.toLanguageString(x, v[x]), F = function() {
|
|
124
124
|
let l = {};
|
|
125
125
|
if (!this.isFirstRender) {
|
|
126
|
-
const
|
|
126
|
+
const m = this.getGradientRectMetrics(), I = (1 - this.hsva.v) * m.height, T = this.hsva.s * m.width;
|
|
127
127
|
l.top = `${I}px`, l.left = `${T}px`;
|
|
128
128
|
}
|
|
129
129
|
return s("div", {
|
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:
|
|
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],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: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
|
@@ -18,13 +18,13 @@ const k = 10, O = "office", X = /* @__PURE__ */ x({
|
|
|
18
18
|
event: "changemodel"
|
|
19
19
|
},
|
|
20
20
|
emits: {
|
|
21
|
-
keydown:
|
|
22
|
-
focus:
|
|
23
|
-
blur:
|
|
24
|
-
changemodel:
|
|
25
|
-
"update:modelValue":
|
|
26
|
-
"update:modelRgbaValue":
|
|
27
|
-
change:
|
|
21
|
+
keydown: (e) => !0,
|
|
22
|
+
focus: (e) => !0,
|
|
23
|
+
blur: (e) => !0,
|
|
24
|
+
changemodel: (e) => !0,
|
|
25
|
+
"update:modelValue": (e) => !0,
|
|
26
|
+
"update:modelRgbaValue": (e) => !0,
|
|
27
|
+
change: (e) => !0
|
|
28
28
|
},
|
|
29
29
|
props: {
|
|
30
30
|
palette: {
|
|
@@ -84,11 +84,11 @@ const k = 10, O = "office", X = /* @__PURE__ */ x({
|
|
|
84
84
|
tileSize: s
|
|
85
85
|
} = this.$props, p = this.getPaletteInfo(), d = this.paletteService = new B();
|
|
86
86
|
d.setColorMatrix(p.colors, p.columns);
|
|
87
|
-
const y = d.getCellCoordsFor(this.selectedColor), f = d.getCellCoordsFor(this.focusedColor),
|
|
87
|
+
const y = d.getCellCoordsFor(this.selectedColor), f = d.getCellCoordsFor(this.focusedColor), v = $("k-colorpalette", {
|
|
88
88
|
[`k-colorpalette-${D.sizeMap[e] || e}`]: e,
|
|
89
89
|
"k-disabled": t
|
|
90
|
-
}, o),
|
|
91
|
-
const u = i !== void 0 && i.row ===
|
|
90
|
+
}, o), S = function(m, l, i, r) {
|
|
91
|
+
const u = i !== void 0 && i.row === l, N = i && i.col, E = r !== void 0 && r.row === l, R = r && r.col, c = typeof s != "number" ? s : {
|
|
92
92
|
width: s,
|
|
93
93
|
height: s
|
|
94
94
|
}, C = c ? c.width + "px" : void 0, P = c ? c.height + "px" : void 0;
|
|
@@ -109,24 +109,24 @@ const k = 10, O = "office", X = /* @__PURE__ */ x({
|
|
|
109
109
|
},
|
|
110
110
|
onClick: (T) => this.onColorClick(g, T),
|
|
111
111
|
id: this.createCellId({
|
|
112
|
-
row:
|
|
112
|
+
row: l,
|
|
113
113
|
col: h
|
|
114
114
|
}),
|
|
115
115
|
key: h,
|
|
116
116
|
role: "gridcell"
|
|
117
117
|
}, null);
|
|
118
118
|
}, this);
|
|
119
|
-
},
|
|
120
|
-
return m.map(function(
|
|
119
|
+
}, V = function(m, l, i) {
|
|
120
|
+
return m.map(function(r, u) {
|
|
121
121
|
return a("tr", {
|
|
122
122
|
role: "row",
|
|
123
123
|
key: u
|
|
124
|
-
}, [
|
|
124
|
+
}, [S.call(this, r, u, l, i)]);
|
|
125
125
|
}, this);
|
|
126
126
|
};
|
|
127
127
|
return p.colors.length ? a("div", {
|
|
128
128
|
id: this.$props.id,
|
|
129
|
-
class:
|
|
129
|
+
class: v,
|
|
130
130
|
onFocusin: this.onFocus,
|
|
131
131
|
onFocusout: this.onBlur,
|
|
132
132
|
onKeydown: this.onKeyDown,
|
|
@@ -140,7 +140,7 @@ const k = 10, O = "office", X = /* @__PURE__ */ x({
|
|
|
140
140
|
}, [a("table", {
|
|
141
141
|
class: "k-colorpalette-table k-palette",
|
|
142
142
|
role: "presentation"
|
|
143
|
-
}, [a("tbody", null, [
|
|
143
|
+
}, [a("tbody", null, [V.call(this, d.colorRows, y, f)])])]) : "";
|
|
144
144
|
},
|
|
145
145
|
methods: {
|
|
146
146
|
focus() {
|
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:
|
|
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,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},rounded:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return[null,"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:r,view:d,selectedView:c,showClearButton:p,showPreview:h,showButtons:f,popupSettings:m,size:g,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:d,selectedView:c,showClearButton:p,showPreview:h,showButtons:this.adaptiveState?!1:f,size:this.adaptiveState?"large":g,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:r,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:l=>{this.buttonRef=l},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:r,id:this._popupId,open:this.computedOpen,onOpen:this.onOpenHandler,popupAnchor:this.focusableElementGuid,popupSettings:{...m}},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:l=>this.flatcolorpickerRef.triggerChange(l)},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 l, 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";
|
|
@@ -26,16 +26,16 @@ const ue = /* @__PURE__ */ A({
|
|
|
26
26
|
event: "changemodel"
|
|
27
27
|
},
|
|
28
28
|
emits: {
|
|
29
|
-
open:
|
|
30
|
-
close:
|
|
31
|
-
changemodel:
|
|
32
|
-
"update:modelValue":
|
|
33
|
-
"update:modelRgbaValue":
|
|
34
|
-
activecolorclick:
|
|
35
|
-
focus:
|
|
36
|
-
blur:
|
|
37
|
-
change:
|
|
38
|
-
viewchange:
|
|
29
|
+
open: () => !0,
|
|
30
|
+
close: () => !0,
|
|
31
|
+
changemodel: (e) => !0,
|
|
32
|
+
"update:modelValue": (e) => !0,
|
|
33
|
+
"update:modelRgbaValue": (e) => !0,
|
|
34
|
+
activecolorclick: (e) => !0,
|
|
35
|
+
focus: (e) => !0,
|
|
36
|
+
blur: (e) => !0,
|
|
37
|
+
change: (e) => !0,
|
|
38
|
+
viewchange: (e) => !0
|
|
39
39
|
},
|
|
40
40
|
props: {
|
|
41
41
|
modelValue: String,
|
|
@@ -226,20 +226,20 @@ const ue = /* @__PURE__ */ A({
|
|
|
226
226
|
disabled: i,
|
|
227
227
|
tabIndex: t,
|
|
228
228
|
dir: u,
|
|
229
|
-
view:
|
|
230
|
-
selectedView:
|
|
229
|
+
view: v,
|
|
230
|
+
selectedView: k,
|
|
231
231
|
showClearButton: w,
|
|
232
232
|
showPreview: y,
|
|
233
233
|
showButtons: C,
|
|
234
234
|
popupSettings: S,
|
|
235
235
|
size: B,
|
|
236
236
|
adaptiveTitle: V
|
|
237
|
-
} = this.$props,
|
|
237
|
+
} = this.$props, s = G(this), O = s.toLanguageString(f, l[f]), $ = V || s.toLanguageString(m, l[m]), T = s.toLanguageString(g, l[g]), P = s.toLanguageString(b, l[b]), d = function() {
|
|
238
238
|
return I(x, {
|
|
239
239
|
onKeydown: this.onKeyDownHandler,
|
|
240
240
|
ref: _(this, "flatcolorpicker"),
|
|
241
|
-
view:
|
|
242
|
-
selectedView:
|
|
241
|
+
view: v,
|
|
242
|
+
selectedView: k,
|
|
243
243
|
showClearButton: w,
|
|
244
244
|
showPreview: y,
|
|
245
245
|
showButtons: this.adaptiveState ? !1 : C,
|
|
@@ -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"),
|
|
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,default:"medium"},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]),m=o.templateRendering.call(this,this.$props.header,o.getListeners.call(this)),f=o.templateRendering.call(this,this.$props.footer,o.getListeners.call(this)),k=o.getTemplate.call(this,{h:t.h,template:m}),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},[k,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;
|