@progress/kendo-vue-inputs 8.4.0-develop.3 → 8.4.0-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/colors/ColorInput.js +1 -1
- package/colors/ColorInput.mjs +18 -18
- package/colors/ColorPicker.js +1 -1
- package/colors/ColorPicker.mjs +12 -12
- package/dist/cdn/js/kendo-vue-inputs.js +1 -1
- package/maskedtextbox/MaskedTextBox.js +1 -1
- package/maskedtextbox/MaskedTextBox.mjs +36 -40
- package/numerictextbox/NumericTextBox.js +1 -1
- package/numerictextbox/NumericTextBox.mjs +15 -19
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +15 -10
- package/rating/RatingItem.js +1 -1
- package/rating/RatingItem.mjs +29 -29
- package/slider/Slider.js +1 -1
- package/slider/Slider.mjs +38 -37
- package/textbox/TextBox.js +1 -1
- package/textbox/TextBox.mjs +20 -24
package/colors/ColorInput.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 t=require("vue"),f=require("./HexInput.js"),L=require("@progress/kendo-vue-buttons"),i=require("@progress/kendo-vue-labels"),k=require("@progress/kendo-vue-intl"),a=require("../messages/main.js"),h=require("@progress/kendo-vue-common"),I=require("@progress/kendo-svg-icons"),d=require("../numerictextbox/NumericTextBox.js");function r(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const o=["rgba","rgb","hex"],C=t.defineComponent({name:"KendoColorInput",emits:{hexchange:null,rgbachange:null},props:{tabIndex:Number,rgba:{type:Object,default:function(){return{}}},hex:String,opacity:Boolean,disabled:Boolean,size:String},inject:{kendoLocalizationService:{default:null}},created(){this.hexInputId=h.guid()},data(){return{inputMode:o[1]}},mounted(){this.lastFocusable=this.$refs.hexinput||this.$refs.numerica||this.$refs.numericb},updated(){this.lastFocusable=this.$refs.hexinput||this.$refs.numerica||this.$refs.numericb},render(){const e=k.provideLocalizationService(this),n=e.toLanguageString(a.colorGradientHex,a.messages[a.colorGradientHex]),s=e.toLanguageString(a.colorGradientInputColorButton,a.messages[a.colorGradientInputColorButton]),l=e.toLanguageString(a.colorGradientR,a.messages[a.colorGradientR]),c=e.toLanguageString(a.colorGradientG,a.messages[a.colorGradientG]),g=e.toLanguageString(a.colorGradientB,a.messages[a.colorGradientB]),u=e.toLanguageString(a.colorGradientA,a.messages[a.colorGradientA]),b=e.toLanguageString(a.colorGradientRLabel,a.messages[a.colorGradientRLabel]),p=e.toLanguageString(a.colorGradientGLabel,a.messages[a.colorGradientGLabel]),x=e.toLanguageString(a.colorGradientBLabel,a.messages[a.colorGradientBLabel]),m=e.toLanguageString(a.colorGradientALabel,a.messages[a.colorGradientALabel]);return t.createVNode("div",{class:"k-colorgradient-inputs k-hstack"},[t.createVNode("div",{class:"k-vstack"},[t.createVNode(L.Button,{ariaLabel:s,tabIndex:this.tabIndex,type:"button",fillMode:"flat",icon:"
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),f=require("./HexInput.js"),L=require("@progress/kendo-vue-buttons"),i=require("@progress/kendo-vue-labels"),k=require("@progress/kendo-vue-intl"),a=require("../messages/main.js"),h=require("@progress/kendo-vue-common"),I=require("@progress/kendo-svg-icons"),d=require("../numerictextbox/NumericTextBox.js");function r(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const o=["rgba","rgb","hex"],C=t.defineComponent({name:"KendoColorInput",emits:{hexchange:null,rgbachange:null},props:{tabIndex:Number,rgba:{type:Object,default:function(){return{}}},hex:String,opacity:Boolean,disabled:Boolean,size:String},inject:{kendoLocalizationService:{default:null}},created(){this.hexInputId=h.guid()},data(){return{inputMode:o[1]}},mounted(){this.lastFocusable=this.$refs.hexinput||this.$refs.numerica||this.$refs.numericb},updated(){this.lastFocusable=this.$refs.hexinput||this.$refs.numerica||this.$refs.numericb},render(){const e=k.provideLocalizationService(this),n=e.toLanguageString(a.colorGradientHex,a.messages[a.colorGradientHex]),s=e.toLanguageString(a.colorGradientInputColorButton,a.messages[a.colorGradientInputColorButton]),l=e.toLanguageString(a.colorGradientR,a.messages[a.colorGradientR]),c=e.toLanguageString(a.colorGradientG,a.messages[a.colorGradientG]),g=e.toLanguageString(a.colorGradientB,a.messages[a.colorGradientB]),u=e.toLanguageString(a.colorGradientA,a.messages[a.colorGradientA]),b=e.toLanguageString(a.colorGradientRLabel,a.messages[a.colorGradientRLabel]),p=e.toLanguageString(a.colorGradientGLabel,a.messages[a.colorGradientGLabel]),x=e.toLanguageString(a.colorGradientBLabel,a.messages[a.colorGradientBLabel]),m=e.toLanguageString(a.colorGradientALabel,a.messages[a.colorGradientALabel]);return t.createVNode("div",{class:"k-colorgradient-inputs k-hstack"},[t.createVNode("div",{class:"k-vstack"},[t.createVNode(L.Button,{ariaLabel:s,tabIndex:this.tabIndex,type:"button",fillMode:"flat",icon:"chevron-down",svgIcon:I.chevronDownIcon,class:"k-colorgradient-toggle-mode k-icon-button",onClick:this.onToggleModeChange,onKeydown:this.onKeyDown,size:this.$props.size},null)]),this.inputMode==="hex"&&t.createVNode("div",{class:"k-vstack k-flex-1"},[t.createVNode("span",{class:"k-hex-value"},[t.createVNode(f.HexInput,{id:this.hexInputId,tabIndex:this.tabIndex,hex:this.$props.hex,onHexchange:this.onHexChange,disabled:this.$props.disabled,ref:"hexinput",size:this.$props.size},null)]),t.createVNode(i.Label,{class:"k-colorgradient-input-label",editorId:this.hexInputId},r(n)?n:{default:()=>[n]})]),(this.inputMode==="rgb"||this.inputMode==="rgba")&&[t.createVNode("div",{class:"k-vstack"},[t.createVNode(d.NumericTextBox,{inputType:"number",tabIndex:this.tabIndex,value:this.$props.rgba.r,min:0,max:255,spinners:!1,format:"n",ariaLabel:b,onChange:this.onRgbaRChange,disabled:this.$props.disabled,size:this.$props.size},null),t.createVNode(i.Label,{class:"k-colorgradient-input-label"},r(l)?l:{default:()=>[l]})]),t.createVNode("div",{class:"k-vstack"},[t.createVNode(d.NumericTextBox,{inputType:"number",tabIndex:this.tabIndex,value:this.$props.rgba.g,min:0,max:255,spinners:!1,format:"n",ariaLabel:p,onChange:this.onRgbaGChange,disabled:this.$props.disabled,size:this.$props.size},null),t.createVNode(i.Label,{class:"k-colorgradient-input-label"},r(c)?c:{default:()=>[c]})]),t.createVNode("div",{class:"k-vstack"},[t.createVNode(d.NumericTextBox,{inputType:"number",tabIndex:this.tabIndex,value:this.$props.rgba.b,min:0,max:255,spinners:!1,format:"n",ariaLabel:x,onChange:this.onRgbaBChange,disabled:this.$props.disabled,ref:"numericb",size:this.$props.size},null),t.createVNode(i.Label,{class:"k-colorgradient-input-label"},r(g)?g:{default:()=>[g]})])],this.inputMode==="rgba"&&t.createVNode("div",{class:"k-vstack"},[this.$props.opacity&&t.createVNode(d.NumericTextBox,{inputType:"number",tabIndex:this.tabIndex,value:this.$props.rgba.a,min:0,max:1,step:.01,spinners:!1,format:"n2",ariaLabel:m,onChange:this.onRgbaAChange,disabled:this.$props.disabled,ref:"numerica",size:this.$props.size},null),this.$props.opacity&&t.createVNode(i.Label,{class:"k-colorgradient-input-label"},r(u)?u:{default:()=>[u]})])])},methods:{onHexChange(e){this.$emit("hexchange",e.hex,e.value,e)},onRgbaRChange(e){this.dispatchRgbaChange({r:e.value},e)},onRgbaGChange(e){this.dispatchRgbaChange({g:e.value},e)},onRgbaBChange(e){this.dispatchRgbaChange({b:e.value},e)},onRgbaAChange(e){this.dispatchRgbaChange({a:e.value},e)},dispatchRgbaChange(e,n){let s={...this.$props.rgba};e.r!==void 0&&(s.r=e.r),e.g!==void 0&&(s.g=e.g),e.b!==void 0&&(s.b=e.b),e.a!==void 0&&(s.a=e.a),this.$emit("rgbachange",s,n)},onToggleModeChange(){const e=o.length-1===o.indexOf(this.inputMode)?0:o.indexOf(this.inputMode)+1;if(this.$props.opacity)this.inputMode=o[e];else{const n=o[e]==="rgba"?e+1:e;this.inputMode=o[n]}},onKeyDown(e){e.keyCode===h.Keys.enter&&e.stopPropagation()}}});exports.ColorInput=C;
|
package/colors/ColorInput.mjs
CHANGED
|
@@ -12,12 +12,12 @@ import { Label as o } from "@progress/kendo-vue-labels";
|
|
|
12
12
|
import { provideLocalizationService as B } from "@progress/kendo-vue-intl";
|
|
13
13
|
import { colorGradientHex as c, messages as a, colorGradientInputColorButton as b, colorGradientR as u, colorGradientG as f, colorGradientB as m, colorGradientA as x, colorGradientRLabel as $, colorGradientGLabel as k, colorGradientBLabel as C, colorGradientALabel as I } from "../messages/main.mjs";
|
|
14
14
|
import { Keys as T, guid as j } from "@progress/kendo-vue-common";
|
|
15
|
-
import {
|
|
15
|
+
import { chevronDownIcon as H } from "@progress/kendo-svg-icons";
|
|
16
16
|
import { NumericTextBox as l } from "../numerictextbox/NumericTextBox.mjs";
|
|
17
17
|
function r(e) {
|
|
18
18
|
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !S(e);
|
|
19
19
|
}
|
|
20
|
-
const s = ["rgba", "rgb", "hex"],
|
|
20
|
+
const s = ["rgba", "rgb", "hex"], E = /* @__PURE__ */ R({
|
|
21
21
|
name: "KendoColorInput",
|
|
22
22
|
emits: {
|
|
23
23
|
hexchange: null,
|
|
@@ -56,18 +56,18 @@ const s = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
|
|
|
56
56
|
this.lastFocusable = this.$refs.hexinput || this.$refs.numerica || this.$refs.numericb;
|
|
57
57
|
},
|
|
58
58
|
render() {
|
|
59
|
-
const e = B(this),
|
|
59
|
+
const e = B(this), n = e.toLanguageString(c, a[c]), i = e.toLanguageString(b, a[b]), g = e.toLanguageString(u, a[u]), d = e.toLanguageString(f, a[f]), h = e.toLanguageString(m, a[m]), p = e.toLanguageString(x, a[x]), L = e.toLanguageString($, a[$]), v = e.toLanguageString(k, a[k]), M = e.toLanguageString(C, a[C]), y = e.toLanguageString(I, a[I]);
|
|
60
60
|
return t("div", {
|
|
61
61
|
class: "k-colorgradient-inputs k-hstack"
|
|
62
62
|
}, [t("div", {
|
|
63
63
|
class: "k-vstack"
|
|
64
64
|
}, [t(G, {
|
|
65
|
-
ariaLabel:
|
|
65
|
+
ariaLabel: i,
|
|
66
66
|
tabIndex: this.tabIndex,
|
|
67
67
|
type: "button",
|
|
68
68
|
fillMode: "flat",
|
|
69
|
-
icon: "
|
|
70
|
-
svgIcon:
|
|
69
|
+
icon: "chevron-down",
|
|
70
|
+
svgIcon: H,
|
|
71
71
|
class: "k-colorgradient-toggle-mode k-icon-button",
|
|
72
72
|
onClick: this.onToggleModeChange,
|
|
73
73
|
onKeydown: this.onKeyDown,
|
|
@@ -87,8 +87,8 @@ const s = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
|
|
|
87
87
|
}, null)]), t(o, {
|
|
88
88
|
class: "k-colorgradient-input-label",
|
|
89
89
|
editorId: this.hexInputId
|
|
90
|
-
}, r(
|
|
91
|
-
default: () => [
|
|
90
|
+
}, r(n) ? n : {
|
|
91
|
+
default: () => [n]
|
|
92
92
|
})]), (this.inputMode === "rgb" || this.inputMode === "rgba") && [t("div", {
|
|
93
93
|
class: "k-vstack"
|
|
94
94
|
}, [t(l, {
|
|
@@ -142,8 +142,8 @@ const s = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
|
|
|
142
142
|
size: this.$props.size
|
|
143
143
|
}, null), t(o, {
|
|
144
144
|
class: "k-colorgradient-input-label"
|
|
145
|
-
}, r(
|
|
146
|
-
default: () => [
|
|
145
|
+
}, r(h) ? h : {
|
|
146
|
+
default: () => [h]
|
|
147
147
|
})])], this.inputMode === "rgba" && t("div", {
|
|
148
148
|
class: "k-vstack"
|
|
149
149
|
}, [this.$props.opacity && t(l, {
|
|
@@ -162,8 +162,8 @@ const s = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
|
|
|
162
162
|
size: this.$props.size
|
|
163
163
|
}, null), this.$props.opacity && t(o, {
|
|
164
164
|
class: "k-colorgradient-input-label"
|
|
165
|
-
}, r(
|
|
166
|
-
default: () => [
|
|
165
|
+
}, r(p) ? p : {
|
|
166
|
+
default: () => [p]
|
|
167
167
|
})])]);
|
|
168
168
|
},
|
|
169
169
|
methods: {
|
|
@@ -190,19 +190,19 @@ const s = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
|
|
|
190
190
|
a: e.value
|
|
191
191
|
}, e);
|
|
192
192
|
},
|
|
193
|
-
dispatchRgbaChange(e,
|
|
194
|
-
let
|
|
193
|
+
dispatchRgbaChange(e, n) {
|
|
194
|
+
let i = {
|
|
195
195
|
...this.$props.rgba
|
|
196
196
|
};
|
|
197
|
-
e.r !== void 0 && (
|
|
197
|
+
e.r !== void 0 && (i.r = e.r), e.g !== void 0 && (i.g = e.g), e.b !== void 0 && (i.b = e.b), e.a !== void 0 && (i.a = e.a), this.$emit("rgbachange", i, n);
|
|
198
198
|
},
|
|
199
199
|
onToggleModeChange() {
|
|
200
200
|
const e = s.length - 1 === s.indexOf(this.inputMode) ? 0 : s.indexOf(this.inputMode) + 1;
|
|
201
201
|
if (this.$props.opacity)
|
|
202
202
|
this.inputMode = s[e];
|
|
203
203
|
else {
|
|
204
|
-
const
|
|
205
|
-
this.inputMode = s[
|
|
204
|
+
const n = s[e] === "rgba" ? e + 1 : e;
|
|
205
|
+
this.inputMode = s[n];
|
|
206
206
|
}
|
|
207
207
|
},
|
|
208
208
|
onKeyDown(e) {
|
|
@@ -211,5 +211,5 @@ const s = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
|
|
|
211
211
|
}
|
|
212
212
|
});
|
|
213
213
|
export {
|
|
214
|
-
|
|
214
|
+
E as ColorInput
|
|
215
215
|
};
|
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"),
|
|
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"),R=require("./common/ColorsAdaptiveMode.js");function A(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:"chevron-down",svgIcon:$.chevronDownIcon,"aria-label":v,disabled:o},null),!this.adaptiveState&&a.createVNode(V.Picker,{dir:l,id:this._popupId,open:this.computedOpen,onOpen:this.onOpenHandler,popupAnchor:this.focusableElementGuid,popupSettings:{...g}},A(e=u.call(this))?e:{default:()=>[e]}),this.adaptiveState&&a.createVNode(R.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
|
@@ -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
|
|
8
|
+
import { defineComponent as R, createVNode as o, isVNode as A, h as I } from "vue";
|
|
9
9
|
import { Button as D } from "@progress/kendo-vue-buttons";
|
|
10
10
|
import { ADAPTIVE_MEDIUM_BREAKPOINT as M, ADAPTIVE_SMALL_BREAKPOINT as E, getRef as a, Keys as n, getTabIndex as N, classNames as c, Icon as H, getIconName as F, canUseDOM as L, validatePackage as K, guid as p, kendoThemeMaps as h, setRef as _ } from "@progress/kendo-vue-common";
|
|
11
11
|
import { packageMetadata as z } from "../package-metadata.mjs";
|
|
@@ -13,14 +13,14 @@ 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
|
|
17
|
-
import {
|
|
16
|
+
import { colorPickerDropdownButtonAriaLabel as f, messages as r, colorPickerAdaptiveTitle as m, flatColorPickerApplyBtn as g, flatColorPickerCancelBtn as v } from "../messages/main.mjs";
|
|
17
|
+
import { chevronDownIcon 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";
|
|
20
20
|
function Q(e) {
|
|
21
|
-
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !
|
|
21
|
+
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !A(e);
|
|
22
22
|
}
|
|
23
|
-
const ue = /* @__PURE__ */
|
|
23
|
+
const ue = /* @__PURE__ */ R({
|
|
24
24
|
name: "KendoColorPicker",
|
|
25
25
|
model: {
|
|
26
26
|
event: "changemodel"
|
|
@@ -223,7 +223,7 @@ const ue = /* @__PURE__ */ A({
|
|
|
223
223
|
disabled: i,
|
|
224
224
|
tabIndex: t,
|
|
225
225
|
dir: u,
|
|
226
|
-
view:
|
|
226
|
+
view: b,
|
|
227
227
|
selectedView: k,
|
|
228
228
|
showClearButton: w,
|
|
229
229
|
showPreview: y,
|
|
@@ -231,11 +231,11 @@ const ue = /* @__PURE__ */ A({
|
|
|
231
231
|
popupSettings: S,
|
|
232
232
|
size: B,
|
|
233
233
|
adaptiveTitle: V
|
|
234
|
-
} = 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(v, r[v]), d = function() {
|
|
235
235
|
return I(x, {
|
|
236
236
|
onKeydown: this.onKeyDownHandler,
|
|
237
237
|
ref: _(this, "flatcolorpicker"),
|
|
238
|
-
view:
|
|
238
|
+
view: b,
|
|
239
239
|
selectedView: k,
|
|
240
240
|
showClearButton: w,
|
|
241
241
|
showPreview: y,
|
|
@@ -287,13 +287,13 @@ const ue = /* @__PURE__ */ A({
|
|
|
287
287
|
}, null)])]), o(D, {
|
|
288
288
|
type: "button",
|
|
289
289
|
tabIndex: -1,
|
|
290
|
-
ref: (
|
|
291
|
-
this.buttonRef =
|
|
290
|
+
ref: (l) => {
|
|
291
|
+
this.buttonRef = l;
|
|
292
292
|
},
|
|
293
293
|
onClick: this.onClickHandler,
|
|
294
294
|
rounded: null,
|
|
295
295
|
class: "k-input-button",
|
|
296
|
-
icon: "
|
|
296
|
+
icon: "chevron-down",
|
|
297
297
|
svgIcon: U,
|
|
298
298
|
"aria-label": O,
|
|
299
299
|
disabled: i
|
|
@@ -318,7 +318,7 @@ const ue = /* @__PURE__ */ A({
|
|
|
318
318
|
componentToRender: d.call(this),
|
|
319
319
|
onActionSheetClose: () => this.setOpen(!this.computedOpen),
|
|
320
320
|
onCancelBtnClick: () => this.flatcolorpickerRef.handleCancelBtnClick(),
|
|
321
|
-
onApplyBtnClick: (
|
|
321
|
+
onApplyBtnClick: (l) => this.flatcolorpickerRef.triggerChange(l)
|
|
322
322
|
}, null)]);
|
|
323
323
|
},
|
|
324
324
|
methods: {
|