@progress/kendo-vue-buttons 7.1.0-develop.6 → 7.1.0-develop.7
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/Button.js +1 -1
- package/Button.mjs +58 -76
- package/Chip/Chip.js +1 -1
- package/Chip/Chip.mjs +22 -30
- package/Chip/ChipList.js +1 -1
- package/Chip/ChipList.mjs +6 -13
- package/FloatingActionButton/FloatingActionButton.js +1 -1
- package/FloatingActionButton/FloatingActionButton.mjs +64 -87
- package/ListButton/DropDownButton.js +1 -1
- package/ListButton/DropDownButton.mjs +24 -40
- package/ListButton/SplitButton.js +1 -1
- package/ListButton/SplitButton.mjs +8 -16
- package/SpeechToText/SpeechToTextButton.js +1 -1
- package/SpeechToText/SpeechToTextButton.mjs +34 -47
- package/dist/cdn/js/kendo-vue-buttons.js +1 -1
- package/index.d.mts +122 -387
- package/index.d.ts +122 -387
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +5 -5
- package/toolbar/Toolbar.js +1 -1
- package/toolbar/Toolbar.mjs +2 -4
package/Button.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
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),t=require("@progress/kendo-vue-common"),v=require("./util.js"),k=require("./package-metadata.js"),y=v.default.styles,S=n.defineComponent({name:"KendoButton",emits:{click:e=>!0,mousedown:e=>!0,mouseup:e=>!0,pointerdown:e=>!0,pointerup:e=>!0,focus:e=>!0,blur:e=>!0,keypress:e=>!0,keydown:e=>!0,contextmenu:e=>!0},props:{ariaLabel:String,ariaPressed:Boolean,title:String,dir:String,selected:{type:Boolean,default:void 0},togglable:{type:Boolean,default:!1},icon:{type:String,default:function(){}},svgIcon:Object,iconSize:{type:String},iconClass:{type:String,default:function(){}},imageUrl:{type:String,default:function(){}},imageAlt:String,disabled:{type:Boolean,default:void 0},size:String,rounded:String,fillMode:String,themeColor:String,tabIndex:Number,accessKey:String,id:String,type:String,role:String},created(){t.validatePackage(k.packageMetadata),this.currentActive=this.$props.togglable===!0&&this.$props.selected===!0,this._activeTemp=void 0},data(){return{currentActive:null}},computed:{computedSelected(){return this._activeTemp!==void 0?this._activeTemp:this.$props.selected!==void 0?this.$props.selected:this.currentActive},buttonClasses(){const{disabled:e,icon:d,iconClass:l,imageUrl:i,dir:r,svgIcon:c,size:s,rounded:o,fillMode:a,themeColor:u}=this.$props,h=c!==void 0||d!==void 0||l!==void 0||i!==void 0,p=t.getDefaultSlots(this);return{[y.button]:!0,[`k-button-${t.kendoThemeMaps.sizeMap[s]||s}`]:s,[`k-rounded-${t.kendoThemeMaps.roundedMap[o]||o}`]:o,"k-icon-button":!p&&h,"k-disabled":e,"k-selected":this.computedSelected,"k-rtl":r==="rtl",[`k-button-${a}`]:a,[`k-button-${u}`]:u}}},updated(){this.$props.togglable&&this.$props.selected!==void 0&&this.$props.selected!==this.currentActive&&(this.currentActive=this.$props.selected)},methods:{focus(e){this.$el.focus(e)},toggleIfApplicable(){if(!this.disabled&&this.$props.togglable&&this.$props.selected===void 0){const e=!this.currentActive;this._activeTemp=e,this.currentActive=e,this._activeTemp=void 0}},handleClick(e){this.toggleIfApplicable(),this.disabled||this.$emit("click",e)},handleMouseDown(e){this.disabled||this.$emit("mousedown",e)},handlePointerDown(e){this.disabled||this.$emit("pointerdown",e)},handleMouseUp(e){this.disabled||this.$emit("mouseup",e)},handlePointerUp(e){this.disabled||this.$emit("pointerup",e)},handleFocus(e){this.disabled||this.$emit("focus",{event:e})},handleBlur(e){this.disabled||this.$emit("blur",{event:e})},handleKeypress(e){this.disabled||this.$emit("keypress",e)},handleKeydown(e){this.disabled||this.$emit("keydown",e)},handleContextmenu(e){this.disabled||this.$emit("contextmenu",e)}},render(){const{togglable:e,icon:d,svgIcon:l,iconClass:i,imageUrl:r,imageAlt:c,accessKey:s,tabIndex:o,id:a,type:u,disabled:h,role:f,iconSize:p}=this.$props,m=t.getDefaultSlots(this),g=function(){if(r)return n.createVNode("img",{role:"presentation",class:"k-image",alt:c,src:r},null);if(d||l){const b=t.classNames("k-button-icon",i);return n.createVNode(t.Icon,{name:d,icon:l,class:b,size:p},null)}else if(i)return n.createVNode("span",{role:"presentation",class:i},null);return null};return n.createVNode("button",{class:this.buttonClasses,onClick:this.handleClick,onMousedown:this.handleMouseDown,onMouseup:this.handleMouseUp,onPointerdown:this.handlePointerDown,onPointerup:this.handlePointerUp,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeypress:this.handleKeypress,onKeydown:this.handleKeydown,onContextmenu:this.handleContextmenu,title:this.title,"aria-label":this.ariaLabel,"aria-disabled":h||void 0,"aria-pressed":e?!!this.currentActive:void 0,accesskey:s,tabindex:o,id:a,type:u,role:f},[g.call(this),m&&n.createVNode("span",{class:"k-button-text"},[m])])}});exports.Button=S;
|
package/Button.mjs
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { defineComponent as $, createVNode as
|
|
9
|
-
import { getDefaultSlots as m, kendoThemeMaps as b, validatePackage as
|
|
8
|
+
import { defineComponent as $, createVNode as s } from "vue";
|
|
9
|
+
import { getDefaultSlots as m, kendoThemeMaps as b, validatePackage as y, classNames as k, Icon as S } from "@progress/kendo-vue-common";
|
|
10
10
|
import C from "./util.mjs";
|
|
11
11
|
import { packageMetadata as w } from "./package-metadata.mjs";
|
|
12
12
|
const A = C.styles, K = /* @__PURE__ */ $({
|
|
@@ -43,8 +43,7 @@ const A = C.styles, K = /* @__PURE__ */ $({
|
|
|
43
43
|
},
|
|
44
44
|
svgIcon: Object,
|
|
45
45
|
iconSize: {
|
|
46
|
-
type: String
|
|
47
|
-
default: "medium"
|
|
46
|
+
type: String
|
|
48
47
|
},
|
|
49
48
|
iconClass: {
|
|
50
49
|
type: String,
|
|
@@ -61,25 +60,10 @@ const A = C.styles, K = /* @__PURE__ */ $({
|
|
|
61
60
|
type: Boolean,
|
|
62
61
|
default: void 0
|
|
63
62
|
},
|
|
64
|
-
size:
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
shape: {
|
|
69
|
-
type: String
|
|
70
|
-
},
|
|
71
|
-
rounded: {
|
|
72
|
-
type: String,
|
|
73
|
-
default: "medium"
|
|
74
|
-
},
|
|
75
|
-
fillMode: {
|
|
76
|
-
type: String,
|
|
77
|
-
default: "solid"
|
|
78
|
-
},
|
|
79
|
-
themeColor: {
|
|
80
|
-
type: String,
|
|
81
|
-
default: "base"
|
|
82
|
-
},
|
|
63
|
+
size: String,
|
|
64
|
+
rounded: String,
|
|
65
|
+
fillMode: String,
|
|
66
|
+
themeColor: String,
|
|
83
67
|
tabIndex: Number,
|
|
84
68
|
accessKey: String,
|
|
85
69
|
id: String,
|
|
@@ -87,7 +71,7 @@ const A = C.styles, K = /* @__PURE__ */ $({
|
|
|
87
71
|
role: String
|
|
88
72
|
},
|
|
89
73
|
created() {
|
|
90
|
-
|
|
74
|
+
y(w), this.currentActive = this.$props.togglable === !0 && this.$props.selected === !0, this._activeTemp = void 0;
|
|
91
75
|
},
|
|
92
76
|
data() {
|
|
93
77
|
return {
|
|
@@ -101,28 +85,26 @@ const A = C.styles, K = /* @__PURE__ */ $({
|
|
|
101
85
|
buttonClasses() {
|
|
102
86
|
const {
|
|
103
87
|
disabled: e,
|
|
104
|
-
icon:
|
|
105
|
-
iconClass:
|
|
106
|
-
imageUrl:
|
|
107
|
-
dir:
|
|
108
|
-
svgIcon:
|
|
109
|
-
size:
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
} = this.$props, p = h !== void 0 || l !== void 0 || r !== void 0 || i !== void 0, c = m(this);
|
|
88
|
+
icon: o,
|
|
89
|
+
iconClass: d,
|
|
90
|
+
imageUrl: t,
|
|
91
|
+
dir: l,
|
|
92
|
+
svgIcon: u,
|
|
93
|
+
size: i,
|
|
94
|
+
rounded: n,
|
|
95
|
+
fillMode: r,
|
|
96
|
+
themeColor: a
|
|
97
|
+
} = this.$props, c = u !== void 0 || o !== void 0 || d !== void 0 || t !== void 0, h = m(this);
|
|
115
98
|
return {
|
|
116
99
|
[A.button]: !0,
|
|
117
|
-
[`k-button-${b.sizeMap[
|
|
118
|
-
[`k-
|
|
119
|
-
|
|
120
|
-
"k-icon-button": !c && p,
|
|
100
|
+
[`k-button-${b.sizeMap[i] || i}`]: i,
|
|
101
|
+
[`k-rounded-${b.roundedMap[n] || n}`]: n,
|
|
102
|
+
"k-icon-button": !h && c,
|
|
121
103
|
"k-disabled": e,
|
|
122
104
|
"k-selected": this.computedSelected,
|
|
123
|
-
"k-rtl":
|
|
124
|
-
[`k-button-${
|
|
125
|
-
[`k-button-${
|
|
105
|
+
"k-rtl": l === "rtl",
|
|
106
|
+
[`k-button-${r}`]: r,
|
|
107
|
+
[`k-button-${a}`]: a
|
|
126
108
|
};
|
|
127
109
|
}
|
|
128
110
|
},
|
|
@@ -177,42 +159,42 @@ const A = C.styles, K = /* @__PURE__ */ $({
|
|
|
177
159
|
render() {
|
|
178
160
|
const {
|
|
179
161
|
togglable: e,
|
|
180
|
-
icon:
|
|
181
|
-
svgIcon:
|
|
182
|
-
iconClass:
|
|
183
|
-
imageUrl:
|
|
184
|
-
imageAlt:
|
|
185
|
-
accessKey:
|
|
186
|
-
tabIndex:
|
|
187
|
-
id:
|
|
188
|
-
type:
|
|
189
|
-
disabled:
|
|
162
|
+
icon: o,
|
|
163
|
+
svgIcon: d,
|
|
164
|
+
iconClass: t,
|
|
165
|
+
imageUrl: l,
|
|
166
|
+
imageAlt: u,
|
|
167
|
+
accessKey: i,
|
|
168
|
+
tabIndex: n,
|
|
169
|
+
id: r,
|
|
170
|
+
type: a,
|
|
171
|
+
disabled: c,
|
|
190
172
|
role: p,
|
|
191
|
-
iconSize:
|
|
192
|
-
} = this.$props,
|
|
193
|
-
if (
|
|
194
|
-
return
|
|
173
|
+
iconSize: h
|
|
174
|
+
} = this.$props, f = m(this), g = function() {
|
|
175
|
+
if (l)
|
|
176
|
+
return s("img", {
|
|
195
177
|
role: "presentation",
|
|
196
178
|
class: "k-image",
|
|
197
|
-
alt:
|
|
198
|
-
src:
|
|
179
|
+
alt: u,
|
|
180
|
+
src: l
|
|
199
181
|
}, null);
|
|
200
|
-
if (
|
|
201
|
-
const
|
|
202
|
-
return
|
|
203
|
-
name:
|
|
204
|
-
icon:
|
|
205
|
-
class:
|
|
206
|
-
size:
|
|
182
|
+
if (o || d) {
|
|
183
|
+
const v = k("k-button-icon", t);
|
|
184
|
+
return s(S, {
|
|
185
|
+
name: o,
|
|
186
|
+
icon: d,
|
|
187
|
+
class: v,
|
|
188
|
+
size: h
|
|
207
189
|
}, null);
|
|
208
|
-
} else if (
|
|
209
|
-
return
|
|
190
|
+
} else if (t)
|
|
191
|
+
return s("span", {
|
|
210
192
|
role: "presentation",
|
|
211
|
-
class:
|
|
193
|
+
class: t
|
|
212
194
|
}, null);
|
|
213
195
|
return null;
|
|
214
196
|
};
|
|
215
|
-
return
|
|
197
|
+
return s("button", {
|
|
216
198
|
class: this.buttonClasses,
|
|
217
199
|
onClick: this.handleClick,
|
|
218
200
|
onMousedown: this.handleMouseDown,
|
|
@@ -226,16 +208,16 @@ const A = C.styles, K = /* @__PURE__ */ $({
|
|
|
226
208
|
onContextmenu: this.handleContextmenu,
|
|
227
209
|
title: this.title,
|
|
228
210
|
"aria-label": this.ariaLabel,
|
|
229
|
-
"aria-disabled":
|
|
211
|
+
"aria-disabled": c || void 0,
|
|
230
212
|
"aria-pressed": e ? !!this.currentActive : void 0,
|
|
231
|
-
accesskey:
|
|
232
|
-
tabindex:
|
|
233
|
-
id:
|
|
234
|
-
type:
|
|
213
|
+
accesskey: i,
|
|
214
|
+
tabindex: n,
|
|
215
|
+
id: r,
|
|
216
|
+
type: a,
|
|
235
217
|
role: p
|
|
236
|
-
}, [g.call(this),
|
|
218
|
+
}, [g.call(this), f && s("span", {
|
|
237
219
|
class: "k-button-text"
|
|
238
|
-
}, [
|
|
220
|
+
}, [f])]);
|
|
239
221
|
}
|
|
240
222
|
});
|
|
241
223
|
export {
|
package/Chip/Chip.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"),t=require("@progress/kendo-vue-common"),m=require("@progress/kendo-svg-icons"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),t=require("@progress/kendo-vue-common"),m=require("@progress/kendo-svg-icons"),o=require("./focus-reducer.js"),$=require("./data-reducer.js"),l=require("./selection-reducer.js"),S=require("../package-metadata.js"),b=a.defineComponent({name:"KendoVueChip",props:{id:String,text:String,avatar:{type:[String,Function,Object],default:function(){}},value:[String,Object],dir:{type:String,default:function(){return"ltr"}},removable:{type:Boolean,default:!1},removeIcon:{type:String,default:function(){return"x-circle"}},removeSvgIcon:{type:Object,default:function(){return m.xCircleIcon}},disabled:{type:Boolean,default:!1},icon:String,svgIcon:Object,selectedIcon:{type:String,default:function(){return"check"}},selectedSvgIcon:{type:Object,default:function(){return m.checkIcon}},size:String,rounded:String,fillMode:{type:String,validator:function(e){return["flat","outline","solid"].includes(e)}},themeColor:{type:String,validator:function(e){return["base","error","info","success","warning"].includes(e)}},dataItem:Object,selected:Boolean,ariaDescribedBy:String,role:{type:String,default:"button"},tabIndex:Number,onMousedown:Function},emits:{click:e=>!0,keydown:e=>!0,blur:e=>!0,focus:e=>!0,remove:e=>!0},inject:{kendoSelection:{default:{value:null}},kendoFocused:{default:{value:null}},kendoDataItems:{default:null},handleDispatchDataItems:{default:t.noop},handleDispatchSelection:{default:t.noop},handleDispatchFocus:{default:t.noop}},created(){this.currentDir=void 0,t.validatePackage(S.packageMetadata)},mounted(){this.chip=t.getRef(this,"chip"),this.currentDir=this.$props.dir!==void 0?this.$props.dir==="rtl":this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1},updated(){this.kendoFocused.value===this.$props.value&&this.$el&&this.$el.focus()},computed:{currentSelected(){return this.$props.selected||(Array.isArray(this.kendoSelection.value)?this.kendoSelection.value.some(e=>e===this.$props.value):this.kendoSelection.value===this.$props.value)},chipLabelClass(){return{"k-chip-label":!0}}},methods:{computedFocused(){return this.kendoFocused.value===this.$props.value},handleMouseDown(e){this.$emit("mousedown",e)},handleClick(e){this.handleDispatchSelection&&this.handleDispatchSelection({type:l.SELECTION_ACTION.toggle,payload:this.$props.value,event:e}),this.$emit("click",{target:this.target,event:e})},handleRemove(e){e.stopPropagation(),this.$props.removable&&(this.handleDispatchFocus&&(this.handleDispatchDataItems({type:$.DATA_ACTION.remove,payload:this.$props.value,event:e}),this.handleDispatchFocus({type:o.FOCUS_ACTION.reset,payload:this.$props.value,event:e}),this.handleDispatchSelection({type:l.SELECTION_ACTION.remove,payload:this.$props.value,event:e})),this.$emit("remove",{target:this.target,event:e}))},handleKeyDown(e){switch(e.keyCode){case t.Keys.left:this.handleDispatchFocus&&this.handleDispatchFocus({type:o.FOCUS_ACTION.prev,payload:this.$props.value,event:e});break;case t.Keys.right:this.handleDispatchFocus&&this.handleDispatchFocus({type:o.FOCUS_ACTION.next,payload:this.$props.value,event:e});break;case t.Keys.enter:this.handleDispatchFocus&&this.handleDispatchSelection({type:l.SELECTION_ACTION.toggle,payload:this.$props.value,event:e});break;case t.Keys.delete:this.handleRemove(e);break}this.$emit("keydown",{target:this.target,event:e})},handleFocus(e){this.handleDispatchFocus&&this.handleDispatchFocus({payload:this.$props.value,type:o.FOCUS_ACTION.current,event:e}),this.$emit("focus",{target:this.target,event:e})},handleBlur(e){this.$emit("blur",{target:this.target,event:e})}},setup(){return{chipRef:a.ref(null)}},render(){const{size:e,rounded:n,themeColor:c,fillMode:r,look:s,avatar:i,icon:d,svgIcon:h,selectedIcon:u,selectedSvgIcon:p,removeIcon:v,removeSvgIcon:f}=this.$props,g=t.templateRendering.call(this,i,t.getListeners.call(this)),k=i?a.createVNode("div",{class:`k-chip-avatar k-avatar k-rounded-${i.rounded||"medium"} k-avatar-${t.kendoThemeMaps.sizeMap[e]||e} k-avatar-solid k-avatar-solid-primary`,style:i.style},[a.createVNode("span",{class:"k-avatar-image"},[a.createVNode("img",{src:i.imageUrl,alt:i.imageAlt},null)])]):null,y=t.getTemplate.call(this,{h:a.h,template:g});return a.createVNode("div",{role:this.$props.role,id:this.$props.value,ref:t.setRef(this,"chip"),dir:this.currentDir,tabindex:t.getTabIndex(this.$props.tabIndex,this.$props.disabled,void 0),class:t.classNames("k-chip",{"k-rtl":this.currentDir==="rtl","k-disabled":this.$props.disabled,"k-selected":this.currentSelected,"k-focus":this.computedFocused(),[`k-chip-${t.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-rounded-${t.kendoThemeMaps.roundedMap[n]||n}`]:n,[`k-chip-${r}`]:r,[`k-chip-${c}`]:c,"k-chip-outline":s==="outline"||s==="outlined","k-chip-solid":s==="solid"||s==="filled"||r==="solid"}),"aria-pressed":this.$props.role==="button"?this.currentSelected:void 0,"aria-selected":this.$props.role==="option"?this.currentSelected:void 0,"aria-disabled":this.$props.disabled,"aria-describedby":this.$props.ariaDescribedBy,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleClick,onKeydown:this.handleKeyDown,onMousedown:this.handleMouseDown},[this.currentSelected&&(u||p)&&a.createVNode(t.Icon,{name:t.getIconName(u),icon:p,size:"small"},null),(d||h)&&a.createVNode(t.Icon,{name:t.getIconName(d),icon:h,size:"small"},null),i?i.imageUrl?k:y:null,a.createVNode("span",{class:"k-chip-content"},[this.$props.text&&a.createVNode("span",{"aria-label":this.$props.text,class:this.chipLabelClass},[this.$props.text])]),this.$props.removable&&a.createVNode("span",{class:"k-chip-actions"},[a.createVNode("span",{class:"k-chip-action k-chip-remove-action"},[a.createVNode(t.Icon,{name:t.getIconName(v),icon:f,size:"small",onClick:this.handleRemove},null)])])])}});exports.Chip=b;
|
package/Chip/Chip.mjs
CHANGED
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import { defineComponent as D, createVNode as t, h as I, ref as F } from "vue";
|
|
9
|
-
import { noop as
|
|
10
|
-
import { checkIcon as
|
|
9
|
+
import { noop as n, templateRendering as C, getListeners as w, kendoThemeMaps as c, getTemplate as x, classNames as M, getTabIndex as O, setRef as R, Icon as d, getIconName as h, Keys as a, getRef as T, validatePackage as A } from "@progress/kendo-vue-common";
|
|
10
|
+
import { checkIcon as B, xCircleIcon as N } from "@progress/kendo-svg-icons";
|
|
11
11
|
import { FOCUS_ACTION as o } from "./focus-reducer.mjs";
|
|
12
12
|
import { DATA_ACTION as j } from "./data-reducer.mjs";
|
|
13
13
|
import { SELECTION_ACTION as p } from "./selection-reducer.mjs";
|
|
@@ -60,29 +60,21 @@ const q = /* @__PURE__ */ D({
|
|
|
60
60
|
selectedSvgIcon: {
|
|
61
61
|
type: Object,
|
|
62
62
|
default: function() {
|
|
63
|
-
return
|
|
63
|
+
return B;
|
|
64
64
|
}
|
|
65
65
|
},
|
|
66
|
-
size:
|
|
67
|
-
|
|
68
|
-
default: "medium"
|
|
69
|
-
},
|
|
70
|
-
rounded: {
|
|
71
|
-
type: String,
|
|
72
|
-
default: "medium"
|
|
73
|
-
},
|
|
66
|
+
size: String,
|
|
67
|
+
rounded: String,
|
|
74
68
|
fillMode: {
|
|
75
69
|
type: String,
|
|
76
|
-
default: "solid",
|
|
77
70
|
validator: function(e) {
|
|
78
|
-
return [
|
|
71
|
+
return ["flat", "outline", "solid"].includes(e);
|
|
79
72
|
}
|
|
80
73
|
},
|
|
81
74
|
themeColor: {
|
|
82
75
|
type: String,
|
|
83
|
-
default: "base",
|
|
84
76
|
validator: function(e) {
|
|
85
|
-
return [
|
|
77
|
+
return ["base", "error", "info", "success", "warning"].includes(e);
|
|
86
78
|
}
|
|
87
79
|
},
|
|
88
80
|
dataItem: Object,
|
|
@@ -117,20 +109,20 @@ const q = /* @__PURE__ */ D({
|
|
|
117
109
|
default: null
|
|
118
110
|
},
|
|
119
111
|
handleDispatchDataItems: {
|
|
120
|
-
default:
|
|
112
|
+
default: n
|
|
121
113
|
},
|
|
122
114
|
handleDispatchSelection: {
|
|
123
|
-
default:
|
|
115
|
+
default: n
|
|
124
116
|
},
|
|
125
117
|
handleDispatchFocus: {
|
|
126
|
-
default:
|
|
118
|
+
default: n
|
|
127
119
|
}
|
|
128
120
|
},
|
|
129
121
|
created() {
|
|
130
|
-
this.currentDir = void 0,
|
|
122
|
+
this.currentDir = void 0, A(z);
|
|
131
123
|
},
|
|
132
124
|
mounted() {
|
|
133
|
-
this.chip =
|
|
125
|
+
this.chip = T(this, "chip"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir === "rtl" : this.$el && getComputedStyle(this.$el).direction === "rtl" || !1;
|
|
134
126
|
},
|
|
135
127
|
updated() {
|
|
136
128
|
this.kendoFocused.value === this.$props.value && this.$el && this.$el.focus();
|
|
@@ -182,28 +174,28 @@ const q = /* @__PURE__ */ D({
|
|
|
182
174
|
},
|
|
183
175
|
handleKeyDown(e) {
|
|
184
176
|
switch (e.keyCode) {
|
|
185
|
-
case
|
|
177
|
+
case a.left:
|
|
186
178
|
this.handleDispatchFocus && this.handleDispatchFocus({
|
|
187
179
|
type: o.prev,
|
|
188
180
|
payload: this.$props.value,
|
|
189
181
|
event: e
|
|
190
182
|
});
|
|
191
183
|
break;
|
|
192
|
-
case
|
|
184
|
+
case a.right:
|
|
193
185
|
this.handleDispatchFocus && this.handleDispatchFocus({
|
|
194
186
|
type: o.next,
|
|
195
187
|
payload: this.$props.value,
|
|
196
188
|
event: e
|
|
197
189
|
});
|
|
198
190
|
break;
|
|
199
|
-
case
|
|
191
|
+
case a.enter:
|
|
200
192
|
this.handleDispatchFocus && this.handleDispatchSelection({
|
|
201
193
|
type: p.toggle,
|
|
202
194
|
payload: this.$props.value,
|
|
203
195
|
event: e
|
|
204
196
|
});
|
|
205
197
|
break;
|
|
206
|
-
case
|
|
198
|
+
case a.delete:
|
|
207
199
|
this.handleRemove(e);
|
|
208
200
|
break;
|
|
209
201
|
}
|
|
@@ -237,9 +229,9 @@ const q = /* @__PURE__ */ D({
|
|
|
237
229
|
render() {
|
|
238
230
|
const {
|
|
239
231
|
size: e,
|
|
240
|
-
rounded:
|
|
232
|
+
rounded: l,
|
|
241
233
|
themeColor: u,
|
|
242
|
-
fillMode:
|
|
234
|
+
fillMode: r,
|
|
243
235
|
look: s,
|
|
244
236
|
avatar: i,
|
|
245
237
|
icon: m,
|
|
@@ -272,11 +264,11 @@ const q = /* @__PURE__ */ D({
|
|
|
272
264
|
"k-selected": this.currentSelected,
|
|
273
265
|
"k-focus": this.computedFocused(),
|
|
274
266
|
[`k-chip-${c.sizeMap[e] || e}`]: e,
|
|
275
|
-
[`k-rounded-${c.roundedMap[
|
|
276
|
-
[`k-chip-${
|
|
277
|
-
[`k-chip-${
|
|
267
|
+
[`k-rounded-${c.roundedMap[l] || l}`]: l,
|
|
268
|
+
[`k-chip-${r}`]: r,
|
|
269
|
+
[`k-chip-${u}`]: u,
|
|
278
270
|
"k-chip-outline": s === "outline" || s === "outlined",
|
|
279
|
-
"k-chip-solid": s === "solid" || s === "filled" ||
|
|
271
|
+
"k-chip-solid": s === "solid" || s === "filled" || r === "solid"
|
|
280
272
|
}),
|
|
281
273
|
"aria-pressed": this.$props.role === "button" ? this.currentSelected : void 0,
|
|
282
274
|
"aria-selected": this.$props.role === "option" ? this.currentSelected : void 0,
|
package/Chip/ChipList.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 s=require("vue"),i=require("@progress/kendo-vue-common"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),i=require("@progress/kendo-vue-common"),n=require("./selection-reducer.js"),l=require("./focus-reducer.js"),u=require("./data-reducer.js"),d=require("./Chip.js"),o=require("../package-metadata.js"),p=s.defineComponent({name:"KendoVueChipList",inheritAttrs:!1,props:{id:String,tabIndex:Number,dataItems:Array,defaultDataItems:{type:Array,default:function(){return[]}},value:[Object,Array,String,Number],defaultValue:{type:[Object,Array,String,Number],default:function(){return null}},size:String,rounded:String,fillMode:{type:String,validator:function(e){return["flat","outline","solid"].includes(e)}},selection:{type:String,default:function(){return"none"}},textField:{type:String,default:function(){return"text"}},valueField:{type:String,default:function(){return"value"}},avatarField:{type:String,default:function(){return"avatar"}},disabled:{type:Boolean,default:!1},dir:{type:String,default:function(){return"ltr"}},chip:[String,Function,Object],ariaLabelledBy:String,ariaDescribedBy:String},emits:{change:e=>!0,datachange:e=>!0},provide(){return{kendoSelection:this.currentValue,kendoFocused:this.currentFocused,kendoDataItems:this.computedDataItems,handleDispatchDataItems:this.handleDispatchDataItems,handleDispatchSelection:this.handleDispatchSelection,handleDispatchFocus:this.handleDispatchFocus}},created(){i.validatePackage(o.packageMetadata),this.currentDataItems=this.$props.dataItems||this.$props.defaultDataItems,this.currentValue.value=this.$props.value||this.$props.defaultValue},data(){return{currentDataItems:[],currentDir:"ltr",isRtl:!1,currentFocused:{value:!1},currentValue:{value:null}}},mounted(){this.chipList=this.chipListRef,this.currentDir=this.$props.dir!==void 0?this.$props.dir:this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1,this.isRtl=this.currentDir==="rtl"},computed:{computedDataItems(){return this.$props.dataItems||this.currentDataItems},computedValue(){return this.$props.value||this.currentValue.value},items(){return this.computedDataItems.reduce(this.itemsReducer,[])}},methods:{handleDispatchSelection(e){const t=n.selectionReducer(this.computedValue,{...e,selection:this.$props.selection,state:this.computedValue});this.handleChange(t,e.event),this.currentValue.value=t},handleDispatchFocus(e){const t=l.focusReducer(e.payload,{...e,items:this.items});this.currentFocused.value=t},handleDispatchDataItems(e){const t=u.dataReducer(this.computedDataItems,{...e,state:this.computedDataItems,valueField:this.$props.valueField});this.handleDataChange(t,e.event),this.currentDataItems=t},handleChange(e,t){this.$el&&this.$emit("change",{value:e,target:this.$el,event:t})},handleDataChange(e,t){this.$el&&this.$emit("datachange",{value:e,target:this.$el,event:t})},itemsReducer(e,t){return e.push(t[this.$props.valueField||this.$props.valueField]),e}},setup(){return{chipListRef:s.ref(null)}},render(){const{size:e}=this.$props;return s.createVNode("div",{ref:i.setRef(this,"chipList"),role:"listbox",id:this.$props.id,dir:this.currentDir,style:this.$attrs.style,tabindex:i.getTabIndex(this.$props.tabIndex,this.$props.disabled,void 0),class:i.classNames("k-chip-list",{[`k-chip-list-${i.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-rtl":this.currentDir==="rtl","k-selection-single":this.$props.selection==="single","k-selection-multiple":this.$props.selection==="multiple","k-disabled":this.$props.disabled}),"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-orientation":"horizontal","aria-multiselectable":this.$props.selection==="multiple"?!0:void 0},[this.computedDataItems.map(function(t){const a=i.templateRendering.call(this,this.$props.chip,i.getListeners.call(this)),r=s.createVNode(d.Chip,{role:"option",dataItem:t,key:t[this.$props.valueField],text:t[this.$props.textField],value:t[this.$props.valueField],avatar:t[this.$props.avatarField],size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode},null);return i.getTemplate.call(this,{h:s.h,template:a,defaultRendering:r,additionalProps:{dataItem:t,key:t[this.$props.valueField],text:t[this.$props.textField],value:t[this.$props.valueField],size:this.$props.size}})},this)])}});exports.ChipList=p;
|
package/Chip/ChipList.mjs
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import { defineComponent as r, createVNode as i, h as l, ref as n } from "vue";
|
|
9
|
-
import { classNames as u, getTabIndex as
|
|
9
|
+
import { classNames as u, getTabIndex as p, setRef as d, kendoThemeMaps as o, templateRendering as h, getListeners as c, getTemplate as m, validatePackage as f } from "@progress/kendo-vue-common";
|
|
10
10
|
import { selectionReducer as $ } from "./selection-reducer.mjs";
|
|
11
11
|
import { focusReducer as v } from "./focus-reducer.mjs";
|
|
12
12
|
import { dataReducer as g } from "./data-reducer.mjs";
|
|
@@ -32,19 +32,12 @@ const V = /* @__PURE__ */ r({
|
|
|
32
32
|
return null;
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
|
-
size:
|
|
36
|
-
|
|
37
|
-
default: "medium"
|
|
38
|
-
},
|
|
39
|
-
rounded: {
|
|
40
|
-
type: String,
|
|
41
|
-
default: "medium"
|
|
42
|
-
},
|
|
35
|
+
size: String,
|
|
36
|
+
rounded: String,
|
|
43
37
|
fillMode: {
|
|
44
38
|
type: String,
|
|
45
|
-
default: "solid",
|
|
46
39
|
validator: function(e) {
|
|
47
|
-
return [
|
|
40
|
+
return ["flat", "outline", "solid"].includes(e);
|
|
48
41
|
}
|
|
49
42
|
},
|
|
50
43
|
selection: {
|
|
@@ -181,12 +174,12 @@ const V = /* @__PURE__ */ r({
|
|
|
181
174
|
size: e
|
|
182
175
|
} = this.$props;
|
|
183
176
|
return i("div", {
|
|
184
|
-
ref:
|
|
177
|
+
ref: d(this, "chipList"),
|
|
185
178
|
role: "listbox",
|
|
186
179
|
id: this.$props.id,
|
|
187
180
|
dir: this.currentDir,
|
|
188
181
|
style: this.$attrs.style,
|
|
189
|
-
tabindex:
|
|
182
|
+
tabindex: p(this.$props.tabIndex, this.$props.disabled, void 0),
|
|
190
183
|
class: u("k-chip-list", {
|
|
191
184
|
[`k-chip-list-${o.sizeMap[e] || e}`]: e,
|
|
192
185
|
"k-rtl": this.currentDir === "rtl",
|
|
@@ -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
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),s=require("@progress/kendo-vue-common"),I=require("./FloatingActionButtonItem.js"),y=require("../package-metadata.js"),a=require("./utils.js"),x=require("@progress/kendo-vue-popup"),v=n.defineComponent({name:"KendoVueFloatingActionButton",props:{id:String,dir:String,tabIndex:Number,accessKey:String,disabled:{type:Boolean,default:!1},icon:String,svgIcon:Object,iconClass:String,items:[Object,Array],item:[String,Function,Object],text:String,alignOffset:Object,opened:{type:Boolean,default:void 0},align:{type:Object,default:function(){return{vertical:"bottom",horizontal:"end"}}},positionMode:{type:String,default:function(){return"fixed"}},popupSettings:{type:Object,default:function(){return{}}},rounded:String,fillMode:{type:String,validator:function(e){return["flat","link","outline","solid"].includes(e)}},size:String,themeColor:String},emits:{click:e=>!0,mousedown:e=>!0,mouseup:e=>!0,open:e=>!0,close:e=>!0,itemclick:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0},data(){return{currentOpened:!1,currentFocused:!1,focusedIndex:-1,currentDir:"ltr",isRtl:!1}},created(){s.validatePackage(y.packageMetadata),this.element=void 0,this._anchor=s.guid(),this.listId=s.guid(),this.buttonId=s.guid()},mounted(){this.element=this.kendoAnchorRef,this.list=s.getRef(this,"list"),this.popup=s.getRef(this,"popup"),this.currentDir=this.$props.dir!==void 0?this.$props.dir:this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1,this.isRtl=this.currentDir==="rtl",this.opened!==void 0&&a.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl)},updated(){a.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl),this.currentFocused&&this.element&&this.element.focus()},computed:{buttonClassNames(){const{size:e,themeColor:t,fillMode:o,rounded:i}=this.$props;return{"k-fab":!0,[`k-fab-${s.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-rounded-${s.kendoThemeMaps.roundedMap[i]||i}`]:i,[`k-fab-${o}`]:o,[`k-fab-${t}`]:t,"k-disabled":this.$props.disabled,"k-focus":this.currentFocused,[`k-${this.$props.align.vertical}-${this.$props.align.horizontal}`]:!0}},computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},rootClassNames(){return s.classNames({"k-pos-absolute":this.$props.positionMode==="absolute","k-pos-fixed":this.$props.positionMode==="fixed"})}},methods:{dispatchPopupEvent(e,t){this.$props.items&&this.$emit(t?"open":"close",{event:e,isOpened:!t})},handleClick(e){if(!(!e.target||this.$props.disabled))if(!this.$props.items)this.$emit("click",e,void 0);else{const t=!this.computedOpened;this.currentOpened=t,this.currentFocused=!0,this.focusedIndex=t?0:-1,this.dispatchPopupEvent(e,!this.computedOpened)}},handleFocus(e){this.currentFocused=!0,this.focusedIndex=this.computedOpened?0:-1,this.$emit("focus",{event:e})},handleBlur(e){this.currentFocused=!1,this.currentOpened=!1,this.focusedIndex=-1,this.$emit("blur",{event:e}),this.computedOpened&&this.dispatchPopupEvent(e,!1)},handleMouseDown(e){e.preventDefault(),this.$emit("mousedown",e)},handleMouseUp(e){this.$emit("mouseup",e)},dispatchItemClickEvent(e,t){this.$props.items&&(this.$props.items[t].disabled||this.$emit("itemclick",e,{itemProps:this.$props.items[t],itemIndex:t}))},handleItemClick(e,t){!e.target||!this.$props.items||(this.focusedIndex=t,this.currentOpened=!1,this.dispatchItemClickEvent(e,t),this.dispatchPopupEvent(e,!1))},handleItemDown(e){s.canUseDOM&&document.activeElement===this.element&&e.preventDefault()},handleKeyDown(e){const t=this.focusedIndex,o=this.$props.items?this.$props.items.length-1:-1,i=this.$props.align.vertical==="bottom";switch(e.keyCode){case s.Keys.enter:case s.Keys.space:t>=0&&this.dispatchItemClickEvent(e,t),e.preventDefault(),this.currentOpened=!this.currentOpened,this.focusedIndex=this.currentOpened?-1:0;break;case s.Keys.esc:e.preventDefault(),this.currentOpened=!1,this.focusedIndex=-1;break;case s.Keys.home:e.preventDefault(),this.focusedIndex=0;break;case s.Keys.end:e.preventDefault(),this.focusedIndex=o;break;case s.Keys.down:case s.Keys.right:e.preventDefault(),t<o&&!i&&(this.focusedIndex=t+1),t>0&&i&&(this.focusedIndex=t-1);break;case s.Keys.up:case s.Keys.left:e.preventDefault(),t>0&&!i&&(this.focusedIndex=t-1),t<o&&i&&(this.focusedIndex=t+1);break}this.$emit("keydown",e,void 0)}},setup(){const e=n.ref(null),t=n.ref(null);return{chipRef:e,kendoAnchorRef:t}},render(){const{align:e,disabled:t,icon:o,svgIcon:i,iconClass:p,id:h,items:r,text:u,tabIndex:b,accessKey:g,popupSettings:c}=this.$props,k=s.templateRendering.call(this,this.$props.item,s.getListeners.call(this)),$=function(){return r&&r.map(function(d,l){return n.createVNode(I.FloatingActionButtonItem,{key:l,index:l,id:`${this.listId}-${l}`,disabled:t||d.disabled,focused:this.focusedIndex===l,dataItem:d,item:k,class:s.classNames(d.className,a.getTextDirectionClass(this.currentDir||"ltr",e.horizontal)),onClick:this.handleItemClick,onDown:this.handleItemDown},null)},this)},f=o&&!u,m=(this.element?this.element.offsetWidth:0)/2-32/2;return n.createVNode("div",{class:this.rootClassNames},[n.createVNode("button",{ref:d=>{this.kendoAnchorRef=d},id:h||this.buttonId,role:r?"menubutton":"button",type:"button","aria-disabled":t,"aria-expanded":r?this.computedOpened:void 0,"aria-haspopup":!!r,"aria-label":`${u||""} floatingactionbutton`,"aria-owns":r?this.listId:void 0,"aria-activedescendant":this.focusedIndex>=0&&r?`${this.listId}-${this.focusedIndex}`:void 0,tabindex:s.getTabIndex(b,t),accesskey:g,dir:this.currentDir,disabled:t,class:this.buttonClassNames,onClick:this.handleClick,onMousedown:this.handleMouseDown,onMouseup:this.handleMouseUp,onFocusin:this.handleFocus,onBlur:this.handleBlur,onKeydown:this.handleKeyDown},[o||i?n.createVNode(s.Icon,{name:o,icon:i,class:"k-fab-icon"},null):p?n.createVNode(s.Icon,{class:p},null):null,u&&n.createVNode("span",{class:"k-fab-text"},[u])]),n.createVNode(x.Popup,{ref:s.setRef(this,"popup"),show:this.computedOpened,anchor:this._anchor,animate:c.animate,popupClass:s.classNames("k-popup-transparent k-fab-popup",c.popupClass),anchorAlign:c.anchorAlign||a.getAnchorAlign(e,this.isRtl),popupAlign:c.popupAlign||a.getPopupAlign(e,this.isRtl),style:{boxShadow:"none"}},{default:()=>[n.createVNode("ul",{ref:s.setRef(this,"list"),role:"menu","aria-labelledby":h,id:this.listId,class:s.classNames("k-fab-items",{"k-fab-items-bottom":e.vertical!=="bottom","k-fab-items-top":e.vertical==="bottom"}),style:{paddingLeft:f?m+"px":void 0,paddingRight:f?m+"px":void 0}},[$.call(this)])]})])}});exports.FloatingActionButton=v;
|