@progress/kendo-vue-buttons 7.0.1-develop.2 → 7.0.1-develop.3
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 +42 -38
- package/Chip/Chip.js +1 -1
- package/Chip/Chip.mjs +5 -5
- package/Chip/ChipList.js +1 -1
- package/Chip/ChipList.mjs +41 -37
- package/FloatingActionButton/FloatingActionButton.js +1 -1
- package/FloatingActionButton/FloatingActionButton.mjs +45 -41
- package/FloatingActionButton/FloatingActionButtonItem.js +1 -1
- package/FloatingActionButton/FloatingActionButtonItem.mjs +14 -14
- package/ListButton/ButtonItem.js +1 -1
- package/ListButton/ButtonItem.mjs +16 -16
- package/ListButton/DropDownButton.js +1 -1
- package/ListButton/DropDownButton.mjs +41 -34
- package/ListButton/SplitButton.js +1 -1
- package/ListButton/SplitButton.mjs +47 -38
- package/dist/cdn/js/kendo-vue-buttons.js +1 -1
- package/index.d.mts +193 -96
- package/index.d.ts +193 -96
- 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 +6 -3
- package/toolbar/tools/ToolbarOverflowSection.js +1 -1
- package/toolbar/tools/ToolbarOverflowSection.mjs +11 -9
- package/toolbar/tools/ToolbarScrollButton.js +1 -1
- package/toolbar/tools/ToolbarScrollButton.mjs +7 -5
- package/toolbar/tools/ToolbarScrollable.js +1 -1
- package/toolbar/tools/ToolbarScrollable.mjs +12 -10
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 i=require("vue"),t=require("@progress/kendo-vue-common"),y=require("./util.js")
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),t=require("@progress/kendo-vue-common"),y=require("./util.js"),v=require("./package-metadata.js"),$=y.default.styles,k=i.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,default:"medium"},iconClass:{type:String,default:function(){}},imageUrl:{type:String,default:function(){}},imageAlt:String,disabled:{type:Boolean,default:void 0},size:{type:String,default:"medium"},shape:{type:String},rounded:{type:String,default:"medium"},fillMode:{type:String,default:"solid"},themeColor:{type:String,default:"base"},tabIndex:Number,accessKey:String,id:String,type:String,role:String},created(){t.validatePackage(v.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:a,iconClass:r,imageUrl:s,dir:u,svgIcon:p,size:o,shape:d,rounded:l,fillMode:n,themeColor:c}=this.$props,f=p!==void 0||a!==void 0||r!==void 0||s!==void 0,h=t.getDefaultSlots(this);return{[$.button]:!0,[`k-button-${t.kendoThemeMaps.sizeMap[o]||o}`]:o,[`k-button-${d}`]:d&&d!=="rectangle",[`k-rounded-${t.kendoThemeMaps.roundedMap[l]||l}`]:l,"k-icon-button":!h&&f,"k-disabled":e,"k-selected":this.computedSelected,"k-rtl":u==="rtl",[`k-button-${n}`]:n,[`k-button-${n}-${c}`]:n&&c}}},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:a,svgIcon:r,iconClass:s,imageUrl:u,imageAlt:p,accessKey:o,tabIndex:d,id:l,type:n,disabled:c,role:f,iconSize:m}=this.$props,h=t.getDefaultSlots(this),g=function(){if(u)return i.createVNode("img",{role:"presentation",class:"k-image",alt:p,src:u},null);if(a||r){const b=t.classNames("k-button-icon",s);return i.createVNode(t.Icon,{name:a,icon:r,class:b,size:m},null)}else if(s)return i.createVNode("span",{role:"presentation",class:s},null);return null};return i.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":c||void 0,"aria-pressed":e?!!this.currentActive:void 0,accesskey:o,tabindex:d,id:l,type:n,role:f},[g.call(this),h&&i.createVNode("span",{class:"k-button-text"},[h])])}});exports.Button=k;
|
package/Button.mjs
CHANGED
|
@@ -5,23 +5,23 @@
|
|
|
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 d } from "vue";
|
|
9
|
+
import { getDefaultSlots as m, kendoThemeMaps as b, validatePackage as v, 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__ */ $({
|
|
13
13
|
name: "KendoButton",
|
|
14
14
|
emits: {
|
|
15
|
-
click:
|
|
16
|
-
mousedown:
|
|
17
|
-
mouseup:
|
|
18
|
-
pointerdown:
|
|
19
|
-
pointerup:
|
|
20
|
-
focus:
|
|
21
|
-
blur:
|
|
22
|
-
keypress:
|
|
23
|
-
keydown:
|
|
24
|
-
contextmenu:
|
|
15
|
+
click: (e) => !0,
|
|
16
|
+
mousedown: (e) => !0,
|
|
17
|
+
mouseup: (e) => !0,
|
|
18
|
+
pointerdown: (e) => !0,
|
|
19
|
+
pointerup: (e) => !0,
|
|
20
|
+
focus: (e) => !0,
|
|
21
|
+
blur: (e) => !0,
|
|
22
|
+
keypress: (e) => !0,
|
|
23
|
+
keydown: (e) => !0,
|
|
24
|
+
contextmenu: (e) => !0
|
|
25
25
|
},
|
|
26
26
|
props: {
|
|
27
27
|
ariaLabel: String,
|
|
@@ -87,7 +87,7 @@ const A = C.styles, K = /* @__PURE__ */ $({
|
|
|
87
87
|
role: String
|
|
88
88
|
},
|
|
89
89
|
created() {
|
|
90
|
-
|
|
90
|
+
v(w), this.currentActive = this.$props.togglable === !0 && this.$props.selected === !0, this._activeTemp = void 0;
|
|
91
91
|
},
|
|
92
92
|
data() {
|
|
93
93
|
return {
|
|
@@ -101,26 +101,26 @@ const A = C.styles, K = /* @__PURE__ */ $({
|
|
|
101
101
|
buttonClasses() {
|
|
102
102
|
const {
|
|
103
103
|
disabled: e,
|
|
104
|
-
icon:
|
|
105
|
-
iconClass:
|
|
104
|
+
icon: l,
|
|
105
|
+
iconClass: r,
|
|
106
106
|
imageUrl: i,
|
|
107
|
-
dir:
|
|
107
|
+
dir: a,
|
|
108
108
|
svgIcon: h,
|
|
109
109
|
size: n,
|
|
110
110
|
shape: s,
|
|
111
|
-
rounded:
|
|
111
|
+
rounded: o,
|
|
112
112
|
fillMode: t,
|
|
113
113
|
themeColor: u
|
|
114
|
-
} = this.$props, p = h !== void 0 ||
|
|
114
|
+
} = this.$props, p = h !== void 0 || l !== void 0 || r !== void 0 || i !== void 0, c = m(this);
|
|
115
115
|
return {
|
|
116
116
|
[A.button]: !0,
|
|
117
117
|
[`k-button-${b.sizeMap[n] || n}`]: n,
|
|
118
118
|
[`k-button-${s}`]: s && s !== "rectangle",
|
|
119
|
-
[`k-rounded-${b.roundedMap[
|
|
119
|
+
[`k-rounded-${b.roundedMap[o] || o}`]: o,
|
|
120
120
|
"k-icon-button": !c && p,
|
|
121
121
|
"k-disabled": e,
|
|
122
122
|
"k-selected": this.computedSelected,
|
|
123
|
-
"k-rtl":
|
|
123
|
+
"k-rtl": a === "rtl",
|
|
124
124
|
[`k-button-${t}`]: t,
|
|
125
125
|
[`k-button-${t}-${u}`]: t && u
|
|
126
126
|
};
|
|
@@ -155,10 +155,14 @@ const A = C.styles, K = /* @__PURE__ */ $({
|
|
|
155
155
|
this.disabled || this.$emit("pointerup", e);
|
|
156
156
|
},
|
|
157
157
|
handleFocus(e) {
|
|
158
|
-
this.disabled || this.$emit("focus",
|
|
158
|
+
this.disabled || this.$emit("focus", {
|
|
159
|
+
event: e
|
|
160
|
+
});
|
|
159
161
|
},
|
|
160
162
|
handleBlur(e) {
|
|
161
|
-
this.disabled || this.$emit("blur",
|
|
163
|
+
this.disabled || this.$emit("blur", {
|
|
164
|
+
event: e
|
|
165
|
+
});
|
|
162
166
|
},
|
|
163
167
|
handleKeypress(e) {
|
|
164
168
|
this.disabled || this.$emit("keypress", e);
|
|
@@ -173,42 +177,42 @@ const A = C.styles, K = /* @__PURE__ */ $({
|
|
|
173
177
|
render() {
|
|
174
178
|
const {
|
|
175
179
|
togglable: e,
|
|
176
|
-
icon:
|
|
177
|
-
svgIcon:
|
|
180
|
+
icon: l,
|
|
181
|
+
svgIcon: r,
|
|
178
182
|
iconClass: i,
|
|
179
|
-
imageUrl:
|
|
183
|
+
imageUrl: a,
|
|
180
184
|
imageAlt: h,
|
|
181
185
|
accessKey: n,
|
|
182
186
|
tabIndex: s,
|
|
183
|
-
id:
|
|
187
|
+
id: o,
|
|
184
188
|
type: t,
|
|
185
189
|
disabled: u,
|
|
186
190
|
role: p,
|
|
187
191
|
iconSize: f
|
|
188
192
|
} = this.$props, c = m(this), g = function() {
|
|
189
|
-
if (
|
|
190
|
-
return
|
|
193
|
+
if (a)
|
|
194
|
+
return d("img", {
|
|
191
195
|
role: "presentation",
|
|
192
196
|
class: "k-image",
|
|
193
197
|
alt: h,
|
|
194
|
-
src:
|
|
198
|
+
src: a
|
|
195
199
|
}, null);
|
|
196
|
-
if (
|
|
197
|
-
const y =
|
|
198
|
-
return
|
|
199
|
-
name:
|
|
200
|
-
icon:
|
|
200
|
+
if (l || r) {
|
|
201
|
+
const y = k("k-button-icon", i);
|
|
202
|
+
return d(S, {
|
|
203
|
+
name: l,
|
|
204
|
+
icon: r,
|
|
201
205
|
class: y,
|
|
202
206
|
size: f
|
|
203
207
|
}, null);
|
|
204
208
|
} else if (i)
|
|
205
|
-
return
|
|
209
|
+
return d("span", {
|
|
206
210
|
role: "presentation",
|
|
207
211
|
class: i
|
|
208
212
|
}, null);
|
|
209
213
|
return null;
|
|
210
214
|
};
|
|
211
|
-
return
|
|
215
|
+
return d("button", {
|
|
212
216
|
class: this.buttonClasses,
|
|
213
217
|
onClick: this.handleClick,
|
|
214
218
|
onMousedown: this.handleMouseDown,
|
|
@@ -226,10 +230,10 @@ const A = C.styles, K = /* @__PURE__ */ $({
|
|
|
226
230
|
"aria-pressed": e ? !!this.currentActive : void 0,
|
|
227
231
|
accesskey: n,
|
|
228
232
|
tabindex: s,
|
|
229
|
-
id:
|
|
233
|
+
id: o,
|
|
230
234
|
type: t,
|
|
231
235
|
role: p
|
|
232
|
-
}, [g.call(this), c &&
|
|
236
|
+
}, [g.call(this), c && d("span", {
|
|
233
237
|
class: "k-button-text"
|
|
234
238
|
}, [c])]);
|
|
235
239
|
}
|
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"),n=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:{type:String,default:"medium"},rounded:{type:String,default:"medium"},fillMode:{type:String,default:"solid",validator:function(e){return[null,"flat","outline","solid"].includes(e)}},themeColor:{type:String,default:"base",validator:function(e){return[null,"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:n.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:n.FOCUS_ACTION.prev,payload:this.$props.value,event:e});break;case t.Keys.right:this.handleDispatchFocus&&this.handleDispatchFocus({type:n.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:n.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:r,themeColor:c,fillMode:s,look:o,avatar:i,icon:d,svgIcon:u,selectedIcon:h,selectedSvgIcon:p,removeIcon:f,removeSvgIcon:v}=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[r]||r}`]:r,[`k-chip-${s}`]:s,[`k-chip-${s}-${c}`]:!!(s&&c),"k-chip-outline":o==="outline"||o==="outlined","k-chip-solid":o==="solid"||o==="filled"||s==="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&&(h||p)&&a.createVNode(t.Icon,{name:t.getIconName(h),icon:p,size:"small"},null),(d||u)&&a.createVNode(t.Icon,{name:t.getIconName(d),icon:u,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(f),icon:v,size:"small",onClick:this.handleRemove},null)])])])}});exports.Chip=b;
|
package/Chip/Chip.mjs
CHANGED
|
@@ -96,11 +96,11 @@ const q = /* @__PURE__ */ D({
|
|
|
96
96
|
onMousedown: Function
|
|
97
97
|
},
|
|
98
98
|
emits: {
|
|
99
|
-
click:
|
|
100
|
-
keydown:
|
|
101
|
-
blur:
|
|
102
|
-
focus:
|
|
103
|
-
remove:
|
|
99
|
+
click: (e) => !0,
|
|
100
|
+
keydown: (e) => !0,
|
|
101
|
+
blur: (e) => !0,
|
|
102
|
+
focus: (e) => !0,
|
|
103
|
+
remove: (e) => !0
|
|
104
104
|
},
|
|
105
105
|
inject: {
|
|
106
106
|
kendoSelection: {
|
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"),l=require("./selection-reducer.js"),n=require("./focus-reducer.js"),u=require("./data-reducer.js"),d=require("./Chip.js"),p=require("../package-metadata.js"),o=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:{type:String,default:"medium"},rounded:{type:String,default:"medium"},fillMode:{type:String,default:"solid",validator:function(
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),i=require("@progress/kendo-vue-common"),l=require("./selection-reducer.js"),n=require("./focus-reducer.js"),u=require("./data-reducer.js"),d=require("./Chip.js"),p=require("../package-metadata.js"),o=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:{type:String,default:"medium"},rounded:{type:String,default:"medium"},fillMode:{type:String,default:"solid",validator:function(e){return[null,"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(p.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=l.selectionReducer(this.computedValue,{...e,selection:this.$props.selection,state:this.computedValue});this.handleChange(t,e.event),this.currentValue.value=t},handleDispatchFocus(e){const t=n.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=o;
|
package/Chip/ChipList.mjs
CHANGED
|
@@ -9,8 +9,8 @@ import { defineComponent as r, createVNode as i, h as l, ref as n } from "vue";
|
|
|
9
9
|
import { classNames as u, getTabIndex as d, setRef as p, 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
|
-
import { dataReducer as
|
|
13
|
-
import { Chip as
|
|
12
|
+
import { dataReducer as g } from "./data-reducer.mjs";
|
|
13
|
+
import { Chip as D } from "./Chip.mjs";
|
|
14
14
|
import { packageMetadata as y } from "../package-metadata.mjs";
|
|
15
15
|
const V = /* @__PURE__ */ r({
|
|
16
16
|
name: "KendoVueChipList",
|
|
@@ -43,8 +43,8 @@ const V = /* @__PURE__ */ r({
|
|
|
43
43
|
fillMode: {
|
|
44
44
|
type: String,
|
|
45
45
|
default: "solid",
|
|
46
|
-
validator: function(
|
|
47
|
-
return [null, "flat", "outline", "solid"].includes(
|
|
46
|
+
validator: function(e) {
|
|
47
|
+
return [null, "flat", "outline", "solid"].includes(e);
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
selection: {
|
|
@@ -85,6 +85,10 @@ const V = /* @__PURE__ */ r({
|
|
|
85
85
|
ariaLabelledBy: String,
|
|
86
86
|
ariaDescribedBy: String
|
|
87
87
|
},
|
|
88
|
+
emits: {
|
|
89
|
+
change: (e) => !0,
|
|
90
|
+
datachange: (e) => !0
|
|
91
|
+
},
|
|
88
92
|
provide() {
|
|
89
93
|
return {
|
|
90
94
|
kendoSelection: this.currentValue,
|
|
@@ -126,45 +130,45 @@ const V = /* @__PURE__ */ r({
|
|
|
126
130
|
}
|
|
127
131
|
},
|
|
128
132
|
methods: {
|
|
129
|
-
handleDispatchSelection(
|
|
130
|
-
const
|
|
131
|
-
...
|
|
133
|
+
handleDispatchSelection(e) {
|
|
134
|
+
const t = $(this.computedValue, {
|
|
135
|
+
...e,
|
|
132
136
|
selection: this.$props.selection,
|
|
133
137
|
state: this.computedValue
|
|
134
138
|
});
|
|
135
|
-
this.handleChange(
|
|
139
|
+
this.handleChange(t, e.event), this.currentValue.value = t;
|
|
136
140
|
},
|
|
137
|
-
handleDispatchFocus(
|
|
138
|
-
const
|
|
139
|
-
...
|
|
141
|
+
handleDispatchFocus(e) {
|
|
142
|
+
const t = v(e.payload, {
|
|
143
|
+
...e,
|
|
140
144
|
items: this.items
|
|
141
145
|
});
|
|
142
|
-
this.currentFocused.value =
|
|
146
|
+
this.currentFocused.value = t;
|
|
143
147
|
},
|
|
144
|
-
handleDispatchDataItems(
|
|
145
|
-
const
|
|
146
|
-
...
|
|
148
|
+
handleDispatchDataItems(e) {
|
|
149
|
+
const t = g(this.computedDataItems, {
|
|
150
|
+
...e,
|
|
147
151
|
state: this.computedDataItems,
|
|
148
152
|
valueField: this.$props.valueField
|
|
149
153
|
});
|
|
150
|
-
this.handleDataChange(
|
|
154
|
+
this.handleDataChange(t, e.event), this.currentDataItems = t;
|
|
151
155
|
},
|
|
152
|
-
handleChange(
|
|
156
|
+
handleChange(e, t) {
|
|
153
157
|
this.$el && this.$emit("change", {
|
|
154
|
-
value:
|
|
158
|
+
value: e,
|
|
155
159
|
target: this.$el,
|
|
156
|
-
event:
|
|
160
|
+
event: t
|
|
157
161
|
});
|
|
158
162
|
},
|
|
159
|
-
handleDataChange(
|
|
163
|
+
handleDataChange(e, t) {
|
|
160
164
|
this.$el && this.$emit("datachange", {
|
|
161
|
-
value:
|
|
165
|
+
value: e,
|
|
162
166
|
target: this.$el,
|
|
163
|
-
event:
|
|
167
|
+
event: t
|
|
164
168
|
});
|
|
165
169
|
},
|
|
166
|
-
itemsReducer(
|
|
167
|
-
return
|
|
170
|
+
itemsReducer(e, t) {
|
|
171
|
+
return e.push(t[this.$props.valueField || this.$props.valueField]), e;
|
|
168
172
|
}
|
|
169
173
|
},
|
|
170
174
|
setup() {
|
|
@@ -174,7 +178,7 @@ const V = /* @__PURE__ */ r({
|
|
|
174
178
|
},
|
|
175
179
|
render() {
|
|
176
180
|
const {
|
|
177
|
-
size:
|
|
181
|
+
size: e
|
|
178
182
|
} = this.$props;
|
|
179
183
|
return i("div", {
|
|
180
184
|
ref: p(this, "chipList"),
|
|
@@ -184,7 +188,7 @@ const V = /* @__PURE__ */ r({
|
|
|
184
188
|
style: this.$attrs.style,
|
|
185
189
|
tabindex: d(this.$props.tabIndex, this.$props.disabled, void 0),
|
|
186
190
|
class: u("k-chip-list", {
|
|
187
|
-
[`k-chip-list-${o.sizeMap[
|
|
191
|
+
[`k-chip-list-${o.sizeMap[e] || e}`]: e,
|
|
188
192
|
"k-rtl": this.currentDir === "rtl",
|
|
189
193
|
"k-selection-single": this.$props.selection === "single",
|
|
190
194
|
"k-selection-multiple": this.$props.selection === "multiple",
|
|
@@ -194,14 +198,14 @@ const V = /* @__PURE__ */ r({
|
|
|
194
198
|
"aria-describedby": this.$props.ariaDescribedBy,
|
|
195
199
|
"aria-orientation": "horizontal",
|
|
196
200
|
"aria-multiselectable": this.$props.selection === "multiple" ? !0 : void 0
|
|
197
|
-
}, [this.computedDataItems.map(function(
|
|
198
|
-
const s = h.call(this, this.$props.chip, c.call(this)), a = i(
|
|
201
|
+
}, [this.computedDataItems.map(function(t) {
|
|
202
|
+
const s = h.call(this, this.$props.chip, c.call(this)), a = i(D, {
|
|
199
203
|
role: "option",
|
|
200
|
-
dataItem:
|
|
201
|
-
key:
|
|
202
|
-
text:
|
|
203
|
-
value:
|
|
204
|
-
avatar:
|
|
204
|
+
dataItem: t,
|
|
205
|
+
key: t[this.$props.valueField],
|
|
206
|
+
text: t[this.$props.textField],
|
|
207
|
+
value: t[this.$props.valueField],
|
|
208
|
+
avatar: t[this.$props.avatarField],
|
|
205
209
|
size: this.$props.size,
|
|
206
210
|
rounded: this.$props.rounded,
|
|
207
211
|
fillMode: this.$props.fillMode
|
|
@@ -211,10 +215,10 @@ const V = /* @__PURE__ */ r({
|
|
|
211
215
|
template: s,
|
|
212
216
|
defaultRendering: a,
|
|
213
217
|
additionalProps: {
|
|
214
|
-
dataItem:
|
|
215
|
-
key:
|
|
216
|
-
text:
|
|
217
|
-
value:
|
|
218
|
+
dataItem: t,
|
|
219
|
+
key: t[this.$props.valueField],
|
|
220
|
+
text: t[this.$props.textField],
|
|
221
|
+
value: t[this.$props.valueField],
|
|
218
222
|
size: this.$props.size
|
|
219
223
|
}
|
|
220
224
|
});
|
|
@@ -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 i=require("vue"),s=require("@progress/kendo-vue-common"),I=require("./FloatingActionButtonItem.js"),y=require("../package-metadata.js"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),s=require("@progress/kendo-vue-common"),I=require("./FloatingActionButtonItem.js"),y=require("../package-metadata.js"),l=require("./utils.js"),x=require("@progress/kendo-vue-popup"),v=i.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{}}},shape:{type:String,default:function(){return"rectangle"}},rounded:{type:String,default:"full"},fillMode:{type:String,default:"solid",validator:function(e){return[null,"flat","link","outline","solid"].includes(e)}},size:{type:String,default:function(){return"medium"}},themeColor:{type:String,default:function(){return"primary"}}},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&&l.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl)},updated(){l.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl),this.currentFocused&&this.element&&this.element.focus()},computed:{buttonClassNames(){const{size:e,icon:t,shape:n,themeColor:o,fillMode:r,rounded:d}=this.$props;return{"k-fab":!0,[`k-fab-${n||"rectangle"}`]:n!==null,[`k-fab-${s.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-rounded-${s.kendoThemeMaps.roundedMap[d]||d}`]:d,[`k-fab-${r}`]:r,[`k-fab-${r}-${o}`]:r&&o,"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,n=this.$props.items?this.$props.items.length-1:-1,o=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=n;break;case s.Keys.down:case s.Keys.right:e.preventDefault(),t<n&&!o&&(this.focusedIndex=t+1),t>0&&o&&(this.focusedIndex=t-1);break;case s.Keys.up:case s.Keys.left:e.preventDefault(),t>0&&!o&&(this.focusedIndex=t-1),t<n&&o&&(this.focusedIndex=t+1);break}this.$emit("keydown",e,void 0)}},setup(){const e=i.ref(null),t=i.ref(null);return{chipRef:e,kendoAnchorRef:t}},render(){const{align:e,disabled:t,icon:n,svgIcon:o,iconClass:r,id:d,items:a,text:c,tabIndex:g,accessKey:b,popupSettings:p}=this.$props,k=s.templateRendering.call(this,this.$props.item,s.getListeners.call(this)),$=function(){return a&&a.map(function(u,h){return i.createVNode(I.FloatingActionButtonItem,{key:h,index:h,id:`${this.listId}-${h}`,disabled:t||u.disabled,focused:this.focusedIndex===h,dataItem:u,item:k,class:s.classNames(u.className,l.getTextDirectionClass(this.currentDir||"ltr",e.horizontal)),onClick:this.handleItemClick,onDown:this.handleItemDown},null)},this)},f=n&&!c,m=(this.element?this.element.offsetWidth:0)/2-32/2;return i.createVNode("div",{class:this.rootClassNames},[i.createVNode("button",{ref:u=>{this.kendoAnchorRef=u},id:d||this.buttonId,role:a?"menubutton":"button",type:"button","aria-disabled":t,"aria-expanded":a?this.computedOpened:void 0,"aria-haspopup":!!a,"aria-label":`${c||""} floatingactionbutton`,"aria-owns":a?this.listId:void 0,"aria-activedescendant":this.focusedIndex>=0&&a?`${this.listId}-${this.focusedIndex}`:void 0,tabindex:s.getTabIndex(g,t),accesskey:b,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},[n||o?i.createVNode(s.Icon,{name:n,icon:o,class:"k-fab-icon"},null):r?i.createVNode(s.Icon,{class:r},null):null,c&&i.createVNode("span",{class:"k-fab-text"},[c])]),i.createVNode(x.Popup,{ref:s.setRef(this,"popup"),show:this.computedOpened,anchor:this._anchor,animate:p.animate,popupClass:s.classNames("k-popup-transparent k-fab-popup",p.popupClass),anchorAlign:p.anchorAlign||l.getAnchorAlign(e,this.isRtl),popupAlign:p.popupAlign||l.getPopupAlign(e,this.isRtl),style:{boxShadow:"none"}},{default:()=>[i.createVNode("ul",{ref:s.setRef(this,"list"),role:"menu","aria-labelledby":d,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;
|
|
@@ -5,13 +5,13 @@
|
|
|
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 w, createVNode as o, ref as g } from "vue";
|
|
9
9
|
import { templateRendering as S, getListeners as M, getTabIndex as A, Icon as $, classNames as h, setRef as k, Keys as n, canUseDOM as F, kendoThemeMaps as I, getRef as x, validatePackage as R, guid as f } from "@progress/kendo-vue-common";
|
|
10
10
|
import { FloatingActionButtonItem as E } from "./FloatingActionButtonItem.mjs";
|
|
11
11
|
import { packageMetadata as B } from "../package-metadata.mjs";
|
|
12
12
|
import { getPopupAlign as N, getAnchorAlign as P, position as y, getTextDirectionClass as K } from "./utils.mjs";
|
|
13
13
|
import { Popup as j } from "@progress/kendo-vue-popup";
|
|
14
|
-
const G = /* @__PURE__ */
|
|
14
|
+
const G = /* @__PURE__ */ w({
|
|
15
15
|
name: "KendoVueFloatingActionButton",
|
|
16
16
|
props: {
|
|
17
17
|
id: String,
|
|
@@ -85,15 +85,15 @@ const G = /* @__PURE__ */ v({
|
|
|
85
85
|
}
|
|
86
86
|
},
|
|
87
87
|
emits: {
|
|
88
|
-
click:
|
|
89
|
-
mousedown:
|
|
90
|
-
mouseup:
|
|
91
|
-
open:
|
|
92
|
-
close:
|
|
93
|
-
itemclick:
|
|
94
|
-
focus:
|
|
95
|
-
blur:
|
|
96
|
-
keydown:
|
|
88
|
+
click: (e) => !0,
|
|
89
|
+
mousedown: (e) => !0,
|
|
90
|
+
mouseup: (e) => !0,
|
|
91
|
+
open: (e) => !0,
|
|
92
|
+
close: (e) => !0,
|
|
93
|
+
itemclick: (e) => !0,
|
|
94
|
+
focus: (e) => !0,
|
|
95
|
+
blur: (e) => !0,
|
|
96
|
+
keydown: (e) => !0
|
|
97
97
|
},
|
|
98
98
|
data() {
|
|
99
99
|
return {
|
|
@@ -120,7 +120,7 @@ const G = /* @__PURE__ */ v({
|
|
|
120
120
|
icon: t,
|
|
121
121
|
shape: s,
|
|
122
122
|
themeColor: i,
|
|
123
|
-
fillMode:
|
|
123
|
+
fillMode: r,
|
|
124
124
|
rounded: a
|
|
125
125
|
} = this.$props;
|
|
126
126
|
return {
|
|
@@ -128,8 +128,8 @@ const G = /* @__PURE__ */ v({
|
|
|
128
128
|
[`k-fab-${s || "rectangle"}`]: s !== null,
|
|
129
129
|
[`k-fab-${I.sizeMap[e] || e}`]: e,
|
|
130
130
|
[`k-rounded-${I.roundedMap[a] || a}`]: a,
|
|
131
|
-
[`k-fab-${
|
|
132
|
-
[`k-fab-${
|
|
131
|
+
[`k-fab-${r}`]: r,
|
|
132
|
+
[`k-fab-${r}-${i}`]: r && i,
|
|
133
133
|
"k-disabled": this.$props.disabled,
|
|
134
134
|
"k-focus": this.currentFocused,
|
|
135
135
|
[`k-${this.$props.align.vertical}-${this.$props.align.horizontal}`]: !0
|
|
@@ -162,10 +162,14 @@ const G = /* @__PURE__ */ v({
|
|
|
162
162
|
}
|
|
163
163
|
},
|
|
164
164
|
handleFocus(e) {
|
|
165
|
-
this.currentFocused = !0, this.focusedIndex = this.computedOpened ? 0 : -1, this.$emit("focus",
|
|
165
|
+
this.currentFocused = !0, this.focusedIndex = this.computedOpened ? 0 : -1, this.$emit("focus", {
|
|
166
|
+
event: e
|
|
167
|
+
});
|
|
166
168
|
},
|
|
167
169
|
handleBlur(e) {
|
|
168
|
-
this.currentFocused = !1, this.currentOpened = !1, this.focusedIndex = -1, this.$emit("blur",
|
|
170
|
+
this.currentFocused = !1, this.currentOpened = !1, this.focusedIndex = -1, this.$emit("blur", {
|
|
171
|
+
event: e
|
|
172
|
+
}), this.computedOpened && this.dispatchPopupEvent(e, !1);
|
|
169
173
|
},
|
|
170
174
|
handleMouseDown(e) {
|
|
171
175
|
e.preventDefault(), this.$emit("mousedown", e);
|
|
@@ -226,46 +230,46 @@ const G = /* @__PURE__ */ v({
|
|
|
226
230
|
disabled: t,
|
|
227
231
|
icon: s,
|
|
228
232
|
svgIcon: i,
|
|
229
|
-
iconClass:
|
|
233
|
+
iconClass: r,
|
|
230
234
|
id: a,
|
|
231
|
-
items:
|
|
232
|
-
text:
|
|
235
|
+
items: d,
|
|
236
|
+
text: l,
|
|
233
237
|
tabIndex: O,
|
|
234
|
-
accessKey:
|
|
238
|
+
accessKey: v,
|
|
235
239
|
popupSettings: p
|
|
236
|
-
} = this.$props,
|
|
237
|
-
return
|
|
240
|
+
} = this.$props, C = S.call(this, this.$props.item, M.call(this)), D = function() {
|
|
241
|
+
return d && d.map(function(u, c) {
|
|
238
242
|
return o(E, {
|
|
239
243
|
key: c,
|
|
240
244
|
index: c,
|
|
241
245
|
id: `${this.listId}-${c}`,
|
|
242
|
-
disabled: t ||
|
|
246
|
+
disabled: t || u.disabled,
|
|
243
247
|
focused: this.focusedIndex === c,
|
|
244
|
-
dataItem:
|
|
245
|
-
item:
|
|
246
|
-
class: h(
|
|
248
|
+
dataItem: u,
|
|
249
|
+
item: C,
|
|
250
|
+
class: h(u.className, K(this.currentDir || "ltr", e.horizontal)),
|
|
247
251
|
onClick: this.handleItemClick,
|
|
248
252
|
onDown: this.handleItemDown
|
|
249
253
|
}, null);
|
|
250
254
|
}, this);
|
|
251
|
-
}, m = s && !
|
|
255
|
+
}, m = s && !l, b = (this.element ? this.element.offsetWidth : 0) / 2 - 32 / 2;
|
|
252
256
|
return o("div", {
|
|
253
257
|
class: this.rootClassNames
|
|
254
258
|
}, [o("button", {
|
|
255
|
-
ref: (
|
|
256
|
-
this.kendoAnchorRef =
|
|
259
|
+
ref: (u) => {
|
|
260
|
+
this.kendoAnchorRef = u;
|
|
257
261
|
},
|
|
258
262
|
id: a || this.buttonId,
|
|
259
|
-
role:
|
|
263
|
+
role: d ? "menubutton" : "button",
|
|
260
264
|
type: "button",
|
|
261
265
|
"aria-disabled": t,
|
|
262
|
-
"aria-expanded":
|
|
263
|
-
"aria-haspopup": !!
|
|
264
|
-
"aria-label": `${
|
|
265
|
-
"aria-owns":
|
|
266
|
-
"aria-activedescendant": this.focusedIndex >= 0 &&
|
|
266
|
+
"aria-expanded": d ? this.computedOpened : void 0,
|
|
267
|
+
"aria-haspopup": !!d,
|
|
268
|
+
"aria-label": `${l || ""} floatingactionbutton`,
|
|
269
|
+
"aria-owns": d ? this.listId : void 0,
|
|
270
|
+
"aria-activedescendant": this.focusedIndex >= 0 && d ? `${this.listId}-${this.focusedIndex}` : void 0,
|
|
267
271
|
tabindex: A(O, t),
|
|
268
|
-
accesskey:
|
|
272
|
+
accesskey: v,
|
|
269
273
|
dir: this.currentDir,
|
|
270
274
|
disabled: t,
|
|
271
275
|
class: this.buttonClassNames,
|
|
@@ -279,11 +283,11 @@ const G = /* @__PURE__ */ v({
|
|
|
279
283
|
name: s,
|
|
280
284
|
icon: i,
|
|
281
285
|
class: "k-fab-icon"
|
|
282
|
-
}, null) :
|
|
283
|
-
class:
|
|
284
|
-
}, null) : null,
|
|
286
|
+
}, null) : r ? o($, {
|
|
287
|
+
class: r
|
|
288
|
+
}, null) : null, l && o("span", {
|
|
285
289
|
class: "k-fab-text"
|
|
286
|
-
}, [
|
|
290
|
+
}, [l])]), o(j, {
|
|
287
291
|
ref: k(this, "popup"),
|
|
288
292
|
show: this.computedOpened,
|
|
289
293
|
anchor: this._anchor,
|
|
@@ -308,7 +312,7 @@ const G = /* @__PURE__ */ v({
|
|
|
308
312
|
paddingLeft: m ? b + "px" : void 0,
|
|
309
313
|
paddingRight: m ? b + "px" : void 0
|
|
310
314
|
}
|
|
311
|
-
}, [
|
|
315
|
+
}, [D.call(this)])]
|
|
312
316
|
})]);
|
|
313
317
|
}
|
|
314
318
|
});
|