@progress/kendo-vue-buttons 10.2.0-develop.1 → 10.2.0-develop.10
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.d.ts +4 -0
- package/Button.js +1 -1
- package/Button.mjs +53 -44
- package/ButtonInterface.d.ts +18 -0
- package/ListButton/DropDownButton.d.ts +4 -0
- package/ListButton/DropDownButton.js +1 -1
- package/ListButton/DropDownButton.mjs +68 -64
- package/ListButton/SplitButton.d.ts +4 -0
- package/ListButton/SplitButton.js +1 -1
- package/ListButton/SplitButton.mjs +29 -25
- package/ListButton/models/ListButtonProps.d.ts +20 -0
- package/SegmentedControl/SegmentedControl.js +1 -1
- package/SegmentedControl/SegmentedControl.mjs +50 -44
- package/SegmentedControl/interfaces/SegmentedControlTypes.d.ts +12 -1
- package/SmartPasteButton/SmartPasteButton.d.ts +4 -0
- package/SmartPasteButton/SmartPasteButton.js +1 -1
- package/SmartPasteButton/SmartPasteButton.mjs +38 -32
- package/dist/cdn/js/kendo-vue-buttons.js +1 -1
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +6 -6
package/Button.d.ts
CHANGED
|
@@ -148,6 +148,8 @@ declare const Button: import('vue').DefineComponent<import('vue').ExtractPropTyp
|
|
|
148
148
|
default: () => any;
|
|
149
149
|
};
|
|
150
150
|
svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
|
|
151
|
+
endIcon: PropType<string>;
|
|
152
|
+
endSvgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
|
|
151
153
|
iconSize: {
|
|
152
154
|
type: PropType<import('@progress/kendo-vue-common').IconSize>;
|
|
153
155
|
};
|
|
@@ -226,6 +228,8 @@ declare const Button: import('vue').DefineComponent<import('vue').ExtractPropTyp
|
|
|
226
228
|
default: () => any;
|
|
227
229
|
};
|
|
228
230
|
svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
|
|
231
|
+
endIcon: PropType<string>;
|
|
232
|
+
endSvgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
|
|
229
233
|
iconSize: {
|
|
230
234
|
type: PropType<import('@progress/kendo-vue-common').IconSize>;
|
|
231
235
|
};
|
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 i=require("vue"),n=require("@progress/kendo-vue-common"),k=require("./util.js"),$=require("./package-metadata.js"),C=k.default.styles,I=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,endIcon:String,endSvgIcon: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(){n.validatePackage($.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:o,iconClass:t,imageUrl:s,dir:d,svgIcon:h,size:l,rounded:a,fillMode:r,themeColor:u}=this.$props,p=h!==void 0||o!==void 0||t!==void 0||s!==void 0,c=n.getDefaultSlots(this);return{[C.button]:!0,[`k-button-${n.kendoThemeMaps.sizeMap[l]||l}`]:l,[`k-rounded-${n.kendoThemeMaps.roundedMap[a]||a}`]:a,"k-icon-button":!c&&p,"k-disabled":e,"k-selected":this.computedSelected,"k-rtl":d==="rtl",[`k-button-${r}`]:r,[`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:o,svgIcon:t,iconClass:s,imageUrl:d,imageAlt:h,accessKey:l,tabIndex:a,id:r,type:u,disabled:p,role:m,iconSize:c,endIcon:b,endSvgIcon:g}=this.$props,f=n.getDefaultSlots(this),v=!f&&(t!==void 0||o!==void 0||s!==void 0||d!==void 0)&&(t!=null&&t.name)?t.name.charAt(0).toUpperCase()+t.name.slice(1):void 0,S=function(){if(d)return i.createVNode("img",{role:"presentation",class:"k-image",alt:h,src:d},null);if(o||t){const y=n.classNames("k-button-icon",s);return i.createVNode(n.Icon,{name:o,icon:t,class:y,size:c},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||v,"aria-disabled":p||void 0,"aria-pressed":e?!!this.currentActive:void 0,accesskey:l,tabindex:a,id:r,type:u,role:m},[S.call(this),f&&i.createVNode("span",{class:"k-button-text"},[f]),(b||g)&&i.createVNode(n.Icon,{name:b,icon:g,class:"k-button-icon",size:c},null)])}});exports.Button=I;
|
package/Button.mjs
CHANGED
|
@@ -5,11 +5,11 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { defineComponent as
|
|
9
|
-
import { getDefaultSlots as
|
|
10
|
-
import
|
|
11
|
-
import { packageMetadata as
|
|
12
|
-
const
|
|
8
|
+
import { defineComponent as C, createVNode as i } from "vue";
|
|
9
|
+
import { getDefaultSlots as g, Icon as v, kendoThemeMaps as y, validatePackage as w, classNames as I } from "@progress/kendo-vue-common";
|
|
10
|
+
import A from "./util.mjs";
|
|
11
|
+
import { packageMetadata as M } from "./package-metadata.mjs";
|
|
12
|
+
const x = A.styles, D = /* @__PURE__ */ C({
|
|
13
13
|
name: "KendoButton",
|
|
14
14
|
emits: {
|
|
15
15
|
click: (e) => !0,
|
|
@@ -42,6 +42,8 @@ const M = w.styles, z = /* @__PURE__ */ v({
|
|
|
42
42
|
}
|
|
43
43
|
},
|
|
44
44
|
svgIcon: Object,
|
|
45
|
+
endIcon: String,
|
|
46
|
+
endSvgIcon: Object,
|
|
45
47
|
iconSize: {
|
|
46
48
|
type: String
|
|
47
49
|
},
|
|
@@ -71,7 +73,7 @@ const M = w.styles, z = /* @__PURE__ */ v({
|
|
|
71
73
|
role: String
|
|
72
74
|
},
|
|
73
75
|
created() {
|
|
74
|
-
|
|
76
|
+
w(M), this.currentActive = this.$props.togglable === !0 && this.$props.selected === !0, this._activeTemp = void 0;
|
|
75
77
|
},
|
|
76
78
|
data() {
|
|
77
79
|
return {
|
|
@@ -85,24 +87,24 @@ const M = w.styles, z = /* @__PURE__ */ v({
|
|
|
85
87
|
buttonClasses() {
|
|
86
88
|
const {
|
|
87
89
|
disabled: e,
|
|
88
|
-
icon:
|
|
90
|
+
icon: s,
|
|
89
91
|
iconClass: t,
|
|
90
92
|
imageUrl: n,
|
|
91
|
-
dir:
|
|
92
|
-
svgIcon:
|
|
93
|
-
size:
|
|
94
|
-
rounded:
|
|
93
|
+
dir: o,
|
|
94
|
+
svgIcon: c,
|
|
95
|
+
size: d,
|
|
96
|
+
rounded: l,
|
|
95
97
|
fillMode: r,
|
|
96
98
|
themeColor: a
|
|
97
|
-
} = this.$props,
|
|
99
|
+
} = this.$props, h = c !== void 0 || s !== void 0 || t !== void 0 || n !== void 0, u = g(this);
|
|
98
100
|
return {
|
|
99
|
-
[
|
|
100
|
-
[`k-button-${
|
|
101
|
-
[`k-rounded-${
|
|
102
|
-
"k-icon-button": !
|
|
101
|
+
[x.button]: !0,
|
|
102
|
+
[`k-button-${y.sizeMap[d] || d}`]: d,
|
|
103
|
+
[`k-rounded-${y.roundedMap[l] || l}`]: l,
|
|
104
|
+
"k-icon-button": !u && h,
|
|
103
105
|
"k-disabled": e,
|
|
104
106
|
"k-selected": this.computedSelected,
|
|
105
|
-
"k-rtl":
|
|
107
|
+
"k-rtl": o === "rtl",
|
|
106
108
|
[`k-button-${r}`]: r,
|
|
107
109
|
[`k-button-${a}`]: a
|
|
108
110
|
};
|
|
@@ -159,42 +161,44 @@ const M = w.styles, z = /* @__PURE__ */ v({
|
|
|
159
161
|
render() {
|
|
160
162
|
const {
|
|
161
163
|
togglable: e,
|
|
162
|
-
icon:
|
|
164
|
+
icon: s,
|
|
163
165
|
svgIcon: t,
|
|
164
166
|
iconClass: n,
|
|
165
|
-
imageUrl:
|
|
166
|
-
imageAlt:
|
|
167
|
-
accessKey:
|
|
168
|
-
tabIndex:
|
|
167
|
+
imageUrl: o,
|
|
168
|
+
imageAlt: c,
|
|
169
|
+
accessKey: d,
|
|
170
|
+
tabIndex: l,
|
|
169
171
|
id: r,
|
|
170
172
|
type: a,
|
|
171
|
-
disabled:
|
|
173
|
+
disabled: h,
|
|
172
174
|
role: f,
|
|
173
|
-
iconSize:
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
175
|
+
iconSize: u,
|
|
176
|
+
endIcon: m,
|
|
177
|
+
endSvgIcon: b
|
|
178
|
+
} = this.$props, p = g(this), S = !p && (t !== void 0 || s !== void 0 || n !== void 0 || o !== void 0) && (t != null && t.name) ? t.name.charAt(0).toUpperCase() + t.name.slice(1) : void 0, $ = function() {
|
|
179
|
+
if (o)
|
|
180
|
+
return i("img", {
|
|
177
181
|
role: "presentation",
|
|
178
182
|
class: "k-image",
|
|
179
|
-
alt:
|
|
180
|
-
src:
|
|
183
|
+
alt: c,
|
|
184
|
+
src: o
|
|
181
185
|
}, null);
|
|
182
|
-
if (
|
|
183
|
-
const
|
|
184
|
-
return
|
|
185
|
-
name:
|
|
186
|
+
if (s || t) {
|
|
187
|
+
const k = I("k-button-icon", n);
|
|
188
|
+
return i(v, {
|
|
189
|
+
name: s,
|
|
186
190
|
icon: t,
|
|
187
|
-
class:
|
|
188
|
-
size:
|
|
191
|
+
class: k,
|
|
192
|
+
size: u
|
|
189
193
|
}, null);
|
|
190
194
|
} else if (n)
|
|
191
|
-
return
|
|
195
|
+
return i("span", {
|
|
192
196
|
role: "presentation",
|
|
193
197
|
class: n
|
|
194
198
|
}, null);
|
|
195
199
|
return null;
|
|
196
200
|
};
|
|
197
|
-
return
|
|
201
|
+
return i("button", {
|
|
198
202
|
class: this.buttonClasses,
|
|
199
203
|
onClick: this.handleClick,
|
|
200
204
|
onMousedown: this.handleMouseDown,
|
|
@@ -207,19 +211,24 @@ const M = w.styles, z = /* @__PURE__ */ v({
|
|
|
207
211
|
onKeydown: this.handleKeydown,
|
|
208
212
|
onContextmenu: this.handleContextmenu,
|
|
209
213
|
title: this.title,
|
|
210
|
-
"aria-label": this.ariaLabel ||
|
|
211
|
-
"aria-disabled":
|
|
214
|
+
"aria-label": this.ariaLabel || S,
|
|
215
|
+
"aria-disabled": h || void 0,
|
|
212
216
|
"aria-pressed": e ? !!this.currentActive : void 0,
|
|
213
|
-
accesskey:
|
|
214
|
-
tabindex:
|
|
217
|
+
accesskey: d,
|
|
218
|
+
tabindex: l,
|
|
215
219
|
id: r,
|
|
216
220
|
type: a,
|
|
217
221
|
role: f
|
|
218
|
-
}, [
|
|
222
|
+
}, [$.call(this), p && i("span", {
|
|
219
223
|
class: "k-button-text"
|
|
220
|
-
}, [p])
|
|
224
|
+
}, [p]), (m || b) && i(v, {
|
|
225
|
+
name: m,
|
|
226
|
+
icon: b,
|
|
227
|
+
class: "k-button-icon",
|
|
228
|
+
size: u
|
|
229
|
+
}, null)]);
|
|
221
230
|
}
|
|
222
231
|
});
|
|
223
232
|
export {
|
|
224
|
-
|
|
233
|
+
D as Button
|
|
225
234
|
};
|
package/ButtonInterface.d.ts
CHANGED
|
@@ -42,6 +42,24 @@ export interface ButtonInterface {
|
|
|
42
42
|
* Defines an SVGIcon to be rendered within the button.
|
|
43
43
|
*/
|
|
44
44
|
svgIcon?: SVGIcon;
|
|
45
|
+
/**
|
|
46
|
+
* Defines the name for an existing font icon in a Kendo UI for Vue theme that is rendered after the Button text.
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* ```vue
|
|
50
|
+
* <KButton :end-icon="'chevron-right'">Next</KButton>
|
|
51
|
+
* ```
|
|
52
|
+
*/
|
|
53
|
+
endIcon?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Defines an SVGIcon that is rendered after the Button text.
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
* ```vue
|
|
59
|
+
* <KButton :end-svg-icon="chevronRightIcon">Next</KButton>
|
|
60
|
+
* ```
|
|
61
|
+
*/
|
|
62
|
+
endSvgIcon?: SVGIcon;
|
|
45
63
|
/**
|
|
46
64
|
* Defines a CSS class—or multiple classes separated by spaces—which are applied to a `span` element inside the Button ([see example]({% slug icons_button %})). Allows the usage of custom icons.
|
|
47
65
|
*/
|
|
@@ -68,6 +68,8 @@ declare const DropDownButton: import('vue').DefineComponent<import('vue').Extrac
|
|
|
68
68
|
disabled: PropType<boolean>;
|
|
69
69
|
icon: PropType<string>;
|
|
70
70
|
svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
|
|
71
|
+
endIcon: PropType<string>;
|
|
72
|
+
endSvgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
|
|
71
73
|
iconClass: PropType<string>;
|
|
72
74
|
imageUrl: PropType<string>;
|
|
73
75
|
popupSettings: PropType<import('..').ButtonsPopupSettings>;
|
|
@@ -131,6 +133,8 @@ declare const DropDownButton: import('vue').DefineComponent<import('vue').Extrac
|
|
|
131
133
|
disabled: PropType<boolean>;
|
|
132
134
|
icon: PropType<string>;
|
|
133
135
|
svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
|
|
136
|
+
endIcon: PropType<string>;
|
|
137
|
+
endSvgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
|
|
134
138
|
iconClass: PropType<string>;
|
|
135
139
|
imageUrl: PropType<string>;
|
|
136
140
|
popupSettings: PropType<import('..').ButtonsPopupSettings>;
|
|
@@ -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"),y=require("../Button.js"),s=require("@progress/kendo-vue-common"),$=require("./utils/navigation.js"),b=require("./ButtonItem.js"),C=require("@progress/kendo-vue-popup"),a=require("./utils/popup.js"),I=require("../package-metadata.js"),k=n.defineComponent({name:"KendoDropDownButton",emits:{focus:e=>!0,blur:e=>!0,itemclick:e=>!0,open:e=>!0,close:e=>!0},props:{accessKey:String,items:{type:Array,default:function(){return[]}},ariaLabel:String,text:String,textField:String,tabIndex:Number,disabled:Boolean,icon:String,svgIcon:Object,endIcon:String,endSvgIcon:Object,iconClass:String,imageUrl:String,popupSettings:Object,itemRender:[String,Object,Function],item:Function,size:String,rounded:String,fillMode:{type:String,validator:function(e){return["flat","link","outline","solid"].includes(e)}},themeColor:{type:String,validator:function(e){return["base","error","info","inverse","primary","secondary","success","tertiary","warning"].includes(e)}},opened:{type:Boolean,default:void 0},buttonClass:String,dir:String},created(){this._blurTimeout=null,this._anchor=s.guid(),this.wrapper=null,this.mainButton=null,this.guid=s.guid(),this.buttonsData=[],s.validatePackage(I.packageMetadata)},mounted(){this.mainButton=this.$refs[this._anchor],(this.$props.dir===void 0&&this.isRtl()||this.computedOpened)&&this.$forceUpdate()},updated(){this.focused&&this.element()&&(this.mainButton=this.$refs[this._anchor],this.mainButton.focus())},data(){return{currentOpened:!1,focused:!1,focusedIndex:-1}},computed:{computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},wrapperClass(){}},setup(){return{kendoAnchorRef:n.ref(null)}},render(){const e=this.isRtl(),t=e?"rtl":void 0,{tabIndex:i,disabled:u}=this.$props,c=s.getDefaultSlots(this);this.buttonsData=this.$props.items;const h=function(){const{item:o,itemRender:p,textField:m}=this.$props;return this.buttonsData.length>0?this.buttonsData.map(function(r,d){const g=typeof r!="string"?{...r,render:s.templateRendering.call(this,r.render,s.getListeners.call(this))}:r;return n.createVNode(b.ButtonItem,{dataItem:g,textField:m,focused:this.focusedIndex===d,onClick:this.onItemClick,onDown:this.onItemDown,render:s.templateRendering.call(this,p,s.getListeners.call(this)),item:o,index:d,key:d,id:`${this.guid}-${d}`},null)},this):null},l=function(){const{popupSettings:o={},size:p}=this.$props;return n.createVNode(C.Popup,{anchor:this._anchor,show:this.computedOpened,animate:o.animate,popupClass:s.classNames("k-menu-popup",o.popupClass),anchorAlign:o.anchorAlign||a.getAnchorAlign(e),popupAlign:o.popupAlign||a.getPopupAlign(e),style:e?{direction:"rtl"}:void 0},{default:()=>[n.createVNode("ul",{class:"k-menu-group",role:"menu",id:this.guid},[h.call(this)])]})},f=this.$props.text||c?{default:()=>[this.$props.text,c]}:{};return n.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[n.createVNode(y.Button,{size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:this.onClickMainButton,onMousedown:this.mouseDown,disabled:u||void 0,tabIndex:i,accessKey:this.$props.accessKey,icon:this.$props.icon,svgIcon:this.$props.svgIcon,endIcon:this.$props.endIcon,endSvgIcon:this.$props.endSvgIcon,iconClass:this.$props.iconClass,class:s.classNames("k-menu-button",this.$props.buttonClass),imageUrl:this.$props.imageUrl,dir:t,ref:this._anchor,type:"button","aria-disabled":u||void 0,"aria-expanded":this.computedOpened,"aria-label":this.$props.ariaLabel||(this.$props.svgIcon||this.$props.icon||this.$props.iconClass?"Menu":void 0),"aria-controls":this.computedOpened?this.guid:void 0,"aria-activedescendant":this.computedOpened&&this.focusedIndex!==void 0&&this.focusedIndex>=0?`${this.guid}-${this.focusedIndex}`:void 0},f),l.call(this)])},methods:{element(){return this.mainButton},onKeyDown(e){if(e.altKey){!this.computedOpened&&e.keyCode===s.Keys.down?(this.dispatchPopupEvent(e,!0),this.focusedIndex=0,this.currentOpened=!0):this.computedOpened&&e.keyCode===s.Keys.up&&(this.dispatchPopupEvent(e,!1),this.focusedIndex=-1,this.currentOpened=!1);return}if(e.keyCode===s.Keys.enter||e.keyCode===s.Keys.space?(this.focusedIndex!==void 0&&this.focusedIndex>=0&&this.dispatchClickEvent(e,this.focusedIndex),e.preventDefault(),this.focusedIndex=this.computedOpened?-1:0,this.currentOpened=!this.computedOpened,this.dispatchPopupEvent(e,this.currentOpened)):this.computedOpened&&e.keyCode===s.Keys.esc&&(this.focusedIndex=-1,this.currentOpened=!1,this.dispatchPopupEvent(e,this.currentOpened)),this.computedOpened){const t=$(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);this.focusedIndex=t;const i=e.keyCode===s.Keys.up||e.keyCode===s.Keys.down||e.keyCode===s.Keys.left||e.keyCode===s.Keys.right;!e.altKey&&i&&e.preventDefault()}},onFocus(e){this.focused||(this.focused=!0,this.$emit("focus",{event:e})),this.focusedIndex=this.computedOpened?0:-1,clearTimeout(this._blurTimeout)},onBlur(e){clearTimeout(this._blurTimeout),this.createBlurTimeout(e)},createBlurTimeout(e){const t=this;this._blurTimeout=setTimeout(()=>{s.canUseDOM&&document.activeElement!==t.$el&&(t.focused=!1,t.focusedIndex=-1,t.$emit("blur",{event:e}),t.computedOpened&&(t.currentOpened=!1,t.dispatchPopupEvent(e,!1)))},200)},onItemClick(e,t){this.focusedIndex=-1,this.currentOpened=!1,this.dispatchClickEvent(e,t),this.dispatchPopupEvent(e,!1)},onItemDown(e){document.activeElement===this.element()&&e.preventDefault()},mouseDown(e){e.preventDefault()},dispatchClickEvent(e,t){this.isItemDisabled(t)||this.$emit("itemclick",{event:e,item:this.buttonsData[t],itemIndex:t})},onClickMainButton(e){if(!this.buttonsData.length)return;const t=!this.computedOpened;this.currentOpened=t,this.focused=!0,this.focusedIndex=t?0:-1,this.dispatchPopupEvent(e,t)},dispatchPopupEvent(e,t){const i={event:e};this.$emit(t?"open":"close",i)},isItemDisabled(e){return this.buttonsData[e]?this.buttonsData[e].disabled:this.$props.disabled},isRtl(){return this.$props.dir!==void 0?this.$props.dir==="rtl":!!this.$el&&getComputedStyle(this.$el).direction==="rtl"}}});exports.DropDownButton=k;
|
|
@@ -5,22 +5,22 @@
|
|
|
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 I, createVNode as o, ref as y } from "vue";
|
|
9
9
|
import { Button as O } from "../Button.mjs";
|
|
10
10
|
import { canUseDOM as k, Keys as i, getDefaultSlots as D, classNames as a, guid as h, validatePackage as x, templateRendering as l, getListeners as f } from "@progress/kendo-vue-common";
|
|
11
|
-
import
|
|
12
|
-
import { ButtonItem as
|
|
13
|
-
import { Popup as
|
|
11
|
+
import S from "./utils/navigation.mjs";
|
|
12
|
+
import { ButtonItem as v } from "./ButtonItem.mjs";
|
|
13
|
+
import { Popup as w } from "@progress/kendo-vue-popup";
|
|
14
14
|
import { getPopupAlign as B, getAnchorAlign as E } from "./utils/popup.mjs";
|
|
15
15
|
import { packageMetadata as K } from "../package-metadata.mjs";
|
|
16
|
-
const
|
|
16
|
+
const z = /* @__PURE__ */ I({
|
|
17
17
|
name: "KendoDropDownButton",
|
|
18
18
|
emits: {
|
|
19
|
-
focus: (
|
|
20
|
-
blur: (
|
|
21
|
-
itemclick: (
|
|
22
|
-
open: (
|
|
23
|
-
close: (
|
|
19
|
+
focus: (e) => !0,
|
|
20
|
+
blur: (e) => !0,
|
|
21
|
+
itemclick: (e) => !0,
|
|
22
|
+
open: (e) => !0,
|
|
23
|
+
close: (e) => !0
|
|
24
24
|
},
|
|
25
25
|
props: {
|
|
26
26
|
accessKey: String,
|
|
@@ -37,6 +37,8 @@ const j = /* @__PURE__ */ y({
|
|
|
37
37
|
disabled: Boolean,
|
|
38
38
|
icon: String,
|
|
39
39
|
svgIcon: Object,
|
|
40
|
+
endIcon: String,
|
|
41
|
+
endSvgIcon: Object,
|
|
40
42
|
iconClass: String,
|
|
41
43
|
imageUrl: String,
|
|
42
44
|
popupSettings: Object,
|
|
@@ -46,14 +48,14 @@ const j = /* @__PURE__ */ y({
|
|
|
46
48
|
rounded: String,
|
|
47
49
|
fillMode: {
|
|
48
50
|
type: String,
|
|
49
|
-
validator: function(
|
|
50
|
-
return ["flat", "link", "outline", "solid"].includes(
|
|
51
|
+
validator: function(e) {
|
|
52
|
+
return ["flat", "link", "outline", "solid"].includes(e);
|
|
51
53
|
}
|
|
52
54
|
},
|
|
53
55
|
themeColor: {
|
|
54
56
|
type: String,
|
|
55
|
-
validator: function(
|
|
56
|
-
return ["base", "error", "info", "inverse", "primary", "secondary", "success", "tertiary", "warning"].includes(
|
|
57
|
+
validator: function(e) {
|
|
58
|
+
return ["base", "error", "info", "inverse", "primary", "secondary", "success", "tertiary", "warning"].includes(e);
|
|
57
59
|
}
|
|
58
60
|
},
|
|
59
61
|
opened: {
|
|
@@ -88,11 +90,11 @@ const j = /* @__PURE__ */ y({
|
|
|
88
90
|
},
|
|
89
91
|
setup() {
|
|
90
92
|
return {
|
|
91
|
-
kendoAnchorRef:
|
|
93
|
+
kendoAnchorRef: y(null)
|
|
92
94
|
};
|
|
93
95
|
},
|
|
94
96
|
render() {
|
|
95
|
-
const
|
|
97
|
+
const e = this.isRtl(), t = e ? "rtl" : void 0, {
|
|
96
98
|
tabIndex: s,
|
|
97
99
|
disabled: u
|
|
98
100
|
} = this.$props, p = D(this);
|
|
@@ -101,16 +103,16 @@ const j = /* @__PURE__ */ y({
|
|
|
101
103
|
const {
|
|
102
104
|
item: n,
|
|
103
105
|
itemRender: c,
|
|
104
|
-
textField:
|
|
106
|
+
textField: b
|
|
105
107
|
} = this.$props;
|
|
106
108
|
return this.buttonsData.length > 0 ? this.buttonsData.map(function(r, d) {
|
|
107
|
-
const
|
|
109
|
+
const C = typeof r != "string" ? {
|
|
108
110
|
...r,
|
|
109
111
|
render: l.call(this, r.render, f.call(this))
|
|
110
112
|
} : r;
|
|
111
|
-
return o(
|
|
112
|
-
dataItem:
|
|
113
|
-
textField:
|
|
113
|
+
return o(v, {
|
|
114
|
+
dataItem: C,
|
|
115
|
+
textField: b,
|
|
114
116
|
focused: this.focusedIndex === d,
|
|
115
117
|
onClick: this.onItemClick,
|
|
116
118
|
onDown: this.onItemDown,
|
|
@@ -126,14 +128,14 @@ const j = /* @__PURE__ */ y({
|
|
|
126
128
|
popupSettings: n = {},
|
|
127
129
|
size: c
|
|
128
130
|
} = this.$props;
|
|
129
|
-
return o(
|
|
131
|
+
return o(w, {
|
|
130
132
|
anchor: this._anchor,
|
|
131
133
|
show: this.computedOpened,
|
|
132
134
|
animate: n.animate,
|
|
133
135
|
popupClass: a("k-menu-popup", n.popupClass),
|
|
134
|
-
anchorAlign: n.anchorAlign || E(
|
|
135
|
-
popupAlign: n.popupAlign || B(
|
|
136
|
-
style:
|
|
136
|
+
anchorAlign: n.anchorAlign || E(e),
|
|
137
|
+
popupAlign: n.popupAlign || B(e),
|
|
138
|
+
style: e ? {
|
|
137
139
|
direction: "rtl"
|
|
138
140
|
} : void 0
|
|
139
141
|
}, {
|
|
@@ -151,7 +153,7 @@ const j = /* @__PURE__ */ y({
|
|
|
151
153
|
onKeydown: this.onKeyDown,
|
|
152
154
|
onFocusin: this.onFocus,
|
|
153
155
|
onFocusout: this.onBlur,
|
|
154
|
-
dir:
|
|
156
|
+
dir: t
|
|
155
157
|
}, [o(O, {
|
|
156
158
|
size: this.$props.size,
|
|
157
159
|
rounded: this.$props.rounded,
|
|
@@ -164,10 +166,12 @@ const j = /* @__PURE__ */ y({
|
|
|
164
166
|
accessKey: this.$props.accessKey,
|
|
165
167
|
icon: this.$props.icon,
|
|
166
168
|
svgIcon: this.$props.svgIcon,
|
|
169
|
+
endIcon: this.$props.endIcon,
|
|
170
|
+
endSvgIcon: this.$props.endSvgIcon,
|
|
167
171
|
iconClass: this.$props.iconClass,
|
|
168
172
|
class: a("k-menu-button", this.$props.buttonClass),
|
|
169
173
|
imageUrl: this.$props.imageUrl,
|
|
170
|
-
dir:
|
|
174
|
+
dir: t,
|
|
171
175
|
ref: this._anchor,
|
|
172
176
|
type: "button",
|
|
173
177
|
"aria-disabled": u || void 0,
|
|
@@ -181,64 +185,64 @@ const j = /* @__PURE__ */ y({
|
|
|
181
185
|
element() {
|
|
182
186
|
return this.mainButton;
|
|
183
187
|
},
|
|
184
|
-
onKeyDown(
|
|
185
|
-
if (
|
|
186
|
-
!this.computedOpened &&
|
|
188
|
+
onKeyDown(e) {
|
|
189
|
+
if (e.altKey) {
|
|
190
|
+
!this.computedOpened && e.keyCode === i.down ? (this.dispatchPopupEvent(e, !0), this.focusedIndex = 0, this.currentOpened = !0) : this.computedOpened && e.keyCode === i.up && (this.dispatchPopupEvent(e, !1), this.focusedIndex = -1, this.currentOpened = !1);
|
|
187
191
|
return;
|
|
188
192
|
}
|
|
189
|
-
if (
|
|
190
|
-
const
|
|
191
|
-
this.focusedIndex =
|
|
192
|
-
const s =
|
|
193
|
-
!
|
|
193
|
+
if (e.keyCode === i.enter || e.keyCode === i.space ? (this.focusedIndex !== void 0 && this.focusedIndex >= 0 && this.dispatchClickEvent(e, this.focusedIndex), e.preventDefault(), this.focusedIndex = this.computedOpened ? -1 : 0, this.currentOpened = !this.computedOpened, this.dispatchPopupEvent(e, this.currentOpened)) : this.computedOpened && e.keyCode === i.esc && (this.focusedIndex = -1, this.currentOpened = !1, this.dispatchPopupEvent(e, this.currentOpened)), this.computedOpened) {
|
|
194
|
+
const t = S(this.focusedIndex, e.keyCode, e.altKey, this.buttonsData.length);
|
|
195
|
+
this.focusedIndex = t;
|
|
196
|
+
const s = e.keyCode === i.up || e.keyCode === i.down || e.keyCode === i.left || e.keyCode === i.right;
|
|
197
|
+
!e.altKey && s && e.preventDefault();
|
|
194
198
|
}
|
|
195
199
|
},
|
|
196
|
-
onFocus(
|
|
200
|
+
onFocus(e) {
|
|
197
201
|
this.focused || (this.focused = !0, this.$emit("focus", {
|
|
198
|
-
event:
|
|
202
|
+
event: e
|
|
199
203
|
})), this.focusedIndex = this.computedOpened ? 0 : -1, clearTimeout(this._blurTimeout);
|
|
200
204
|
},
|
|
201
|
-
onBlur(
|
|
202
|
-
clearTimeout(this._blurTimeout), this.createBlurTimeout(
|
|
205
|
+
onBlur(e) {
|
|
206
|
+
clearTimeout(this._blurTimeout), this.createBlurTimeout(e);
|
|
203
207
|
},
|
|
204
|
-
createBlurTimeout(
|
|
205
|
-
const
|
|
208
|
+
createBlurTimeout(e) {
|
|
209
|
+
const t = this;
|
|
206
210
|
this._blurTimeout = setTimeout(() => {
|
|
207
|
-
k && document.activeElement !==
|
|
208
|
-
event:
|
|
209
|
-
}),
|
|
211
|
+
k && document.activeElement !== t.$el && (t.focused = !1, t.focusedIndex = -1, t.$emit("blur", {
|
|
212
|
+
event: e
|
|
213
|
+
}), t.computedOpened && (t.currentOpened = !1, t.dispatchPopupEvent(e, !1)));
|
|
210
214
|
}, 200);
|
|
211
215
|
},
|
|
212
|
-
onItemClick(
|
|
213
|
-
this.focusedIndex = -1, this.currentOpened = !1, this.dispatchClickEvent(
|
|
216
|
+
onItemClick(e, t) {
|
|
217
|
+
this.focusedIndex = -1, this.currentOpened = !1, this.dispatchClickEvent(e, t), this.dispatchPopupEvent(e, !1);
|
|
214
218
|
},
|
|
215
|
-
onItemDown(
|
|
216
|
-
document.activeElement === this.element() &&
|
|
219
|
+
onItemDown(e) {
|
|
220
|
+
document.activeElement === this.element() && e.preventDefault();
|
|
217
221
|
},
|
|
218
|
-
mouseDown(
|
|
219
|
-
|
|
222
|
+
mouseDown(e) {
|
|
223
|
+
e.preventDefault();
|
|
220
224
|
},
|
|
221
|
-
dispatchClickEvent(
|
|
222
|
-
this.isItemDisabled(
|
|
223
|
-
event:
|
|
224
|
-
item: this.buttonsData[
|
|
225
|
-
itemIndex:
|
|
225
|
+
dispatchClickEvent(e, t) {
|
|
226
|
+
this.isItemDisabled(t) || this.$emit("itemclick", {
|
|
227
|
+
event: e,
|
|
228
|
+
item: this.buttonsData[t],
|
|
229
|
+
itemIndex: t
|
|
226
230
|
});
|
|
227
231
|
},
|
|
228
|
-
onClickMainButton(
|
|
232
|
+
onClickMainButton(e) {
|
|
229
233
|
if (!this.buttonsData.length)
|
|
230
234
|
return;
|
|
231
|
-
const
|
|
232
|
-
this.currentOpened =
|
|
235
|
+
const t = !this.computedOpened;
|
|
236
|
+
this.currentOpened = t, this.focused = !0, this.focusedIndex = t ? 0 : -1, this.dispatchPopupEvent(e, t);
|
|
233
237
|
},
|
|
234
|
-
dispatchPopupEvent(
|
|
238
|
+
dispatchPopupEvent(e, t) {
|
|
235
239
|
const s = {
|
|
236
|
-
event:
|
|
240
|
+
event: e
|
|
237
241
|
};
|
|
238
|
-
this.$emit(
|
|
242
|
+
this.$emit(t ? "open" : "close", s);
|
|
239
243
|
},
|
|
240
|
-
isItemDisabled(
|
|
241
|
-
return this.buttonsData[
|
|
244
|
+
isItemDisabled(e) {
|
|
245
|
+
return this.buttonsData[e] ? this.buttonsData[e].disabled : this.$props.disabled;
|
|
242
246
|
},
|
|
243
247
|
isRtl() {
|
|
244
248
|
return this.$props.dir !== void 0 ? this.$props.dir === "rtl" : !!this.$el && getComputedStyle(this.$el).direction === "rtl";
|
|
@@ -246,5 +250,5 @@ const j = /* @__PURE__ */ y({
|
|
|
246
250
|
}
|
|
247
251
|
});
|
|
248
252
|
export {
|
|
249
|
-
|
|
253
|
+
z as DropDownButton
|
|
250
254
|
};
|
|
@@ -69,6 +69,8 @@ declare const SplitButton: import('vue').DefineComponent<import('vue').ExtractPr
|
|
|
69
69
|
disabled: PropType<boolean>;
|
|
70
70
|
icon: PropType<string>;
|
|
71
71
|
svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
|
|
72
|
+
endIcon: PropType<string>;
|
|
73
|
+
endSvgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
|
|
72
74
|
size: PropType<"small" | "medium" | "xs" | "large">;
|
|
73
75
|
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
|
|
74
76
|
fillMode: {
|
|
@@ -138,6 +140,8 @@ declare const SplitButton: import('vue').DefineComponent<import('vue').ExtractPr
|
|
|
138
140
|
disabled: PropType<boolean>;
|
|
139
141
|
icon: PropType<string>;
|
|
140
142
|
svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
|
|
143
|
+
endIcon: PropType<string>;
|
|
144
|
+
endSvgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
|
|
141
145
|
size: PropType<"small" | "medium" | "xs" | "large">;
|
|
142
146
|
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
|
|
143
147
|
fillMode: {
|
|
@@ -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 o=require("vue"),a=require("../Button.js"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),a=require("../Button.js"),n=require("@progress/kendo-vue-common"),$=require("./ButtonItem.js"),y=require("./utils/navigation.js"),C=require("@progress/kendo-vue-popup"),l=require("./utils/popup.js"),k=require("@progress/kendo-svg-icons"),I=require("../package-metadata.js"),S=o.defineComponent({name:"KendoSplitButton",emits:{focus:e=>!0,blur:e=>!0,buttonclick:e=>!0,itemclick:e=>!0,open:e=>!0,close:e=>!0},props:{accessKey:String,ariaLabel:String,text:String,items:{type:Array,default:function(){return[]}},textField:String,tabIndex:Number,disabled:Boolean,icon:String,svgIcon:Object,endIcon:String,endSvgIcon:Object,size:String,rounded:String,fillMode:{type:String,validator:function(e){return["flat","link","outline","solid"].includes(e)}},themeColor:{type:String,validator:function(e){return["base","dark","error","info","inverse","light","primary","secondary","success","tertiary","warning"].includes(e)}},opened:{type:Boolean,default:void 0},iconClass:String,imageUrl:String,popupSettings:Object,itemRender:[String,Function,Object],item:[String,Function,Object],className:String,buttonClass:String,dir:String},data(){return{focused:!1,focusedIndex:-1,currentOpened:!1}},created(){this._blurTimeout=null,this._anchor=n.guid(),this.mainButton=null,this.guid=n.guid(),this.buttonsData=[],n.validatePackage(I.packageMetadata)},mounted(){this.mainButton=this.$refs[this._anchor],(this.$props.dir===void 0&&this.isRtl()||this.computedOpened)&&this.$forceUpdate()},updated(){this.focused&&this.element()&&(this.mainButton=this.$refs[this._anchor],this.mainButton.focus())},computed:{computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},wrapperClass(){return{"k-split-button":!0,"k-button-group":!0,"k-focus":this.focused}}},setup(){return{kendoAnchorRef:o.ref(null)}},render(){this.buttonsData=this.$props.items;const e=this.isRtl(),t=e?"rtl":void 0,{tabIndex:i,disabled:r}=this.$props,c=n.getDefaultSlots(this),h=function(){const{item:s,itemRender:p,textField:g}=this.$props;return this.buttonsData.length>0?this.buttonsData.map(function(d,u){const b=typeof d!="string"?{...d,render:n.templateRendering.call(this,d.render,n.getListeners.call(this))}:d;return o.createVNode($.ButtonItem,{role:"menuitem",dataItem:b,textField:g,focused:this.focusedIndex===u,onClick:this.onItemClick,onDown:this.onItemDown,render:n.templateRendering.call(this,p,n.getListeners.call(this)),item:s,key:u,index:u,id:`${this.guid}-${u}`},null)},this):null},f=function(){const{popupSettings:s={},size:p}=this.$props;return o.createVNode(C.Popup,{anchor:this._anchor,show:this.computedOpened,animate:s.animate,popupClass:n.classNames("k-menu-popup",s.popupClass),anchorAlign:s.anchorAlign||l.getAnchorAlign(e),popupAlign:s.popupAlign||l.getPopupAlign(e),style:e?{direction:"rtl"}:void 0},{default:()=>[o.createVNode("ul",{class:"k-menu-group",role:"menu",id:this.guid},[h.call(this)])]})},m=this.$props.text||c?{default:()=>[this.$props.text,c]}:{};return o.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[o.createVNode(a.Button,{size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:s=>this.onItemClick(s,-1),disabled:r||void 0,tabIndex:i,accessKey:this.$props.accessKey,class:this.$props.buttonClass,icon:this.$props.icon,svgIcon:this.$props.svgIcon,endIcon:this.$props.endIcon,endSvgIcon:this.$props.endSvgIcon,iconClass:this.$props.iconClass,imageUrl:this.$props.imageUrl,dir:t,id:this._anchor,ref:this._anchor,type:"button","aria-disabled":r||void 0,"aria-label":this.$props.ariaLabel||(!this.$props.text&&!c&&(this.$props.svgIcon||this.$props.icon||this.$props.iconClass)?"Action":void 0)},m),o.createVNode(a.Button,{svgIcon:k.chevronDownIcon,size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,icon:"chevron-down",class:"k-split-button-arrow",disabled:r||void 0,tabIndex:-1,onClick:this.onSplitPartClick,onMousedown:this.onDownSplitPart,onPointerdown:this.onDownSplitPart,dir:t,"aria-label":"Toggle dropdown","aria-expanded":this.computedOpened,"aria-controls":this.computedOpened?this.guid:void 0},null),f.call(this)])},methods:{element(){return this.mainButton},onKeyDown(e){if(e.altKey){!this.computedOpened&&e.keyCode===n.Keys.down?(this.dispatchPopupEvent(e,!0),this.focusedIndex=0,this.currentOpened=!0):this.computedOpened&&e.keyCode===n.Keys.up&&(this.dispatchPopupEvent(e,!1),this.focusedIndex=-1,this.currentOpened=!1);return}let t;if(e.keyCode===n.Keys.enter||e.keyCode===n.Keys.space?(e.preventDefault(),this.dispatchClickEvent(e,this.focusedIndex),this.focusedIndex!==void 0&&this.focusedIndex>=0&&(t={focusedIndex:this.computedOpened?-1:0,currentOpened:!this.computedOpened},this.dispatchPopupEvent(e,t.currentOpened))):this.computedOpened&&e.keyCode===n.Keys.esc&&(t={focusedIndex:-1,currentOpened:!1},this.dispatchPopupEvent(e,t.currentOpened)),this.computedOpened){const i=y(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);i!==this.focusedIndex&&(t=t||{},t.focusedIndex=i);const r=e.keyCode===n.Keys.up||e.keyCode===n.Keys.down||e.keyCode===n.Keys.left||e.keyCode===n.Keys.right;!e.altKey&&r&&e.preventDefault()}t&&(this.focusedIndex=t.focusedIndex,this.focused=t.focused,t.currentOpened!==void 0&&(this.currentOpened=t.currentOpened))},onFocus(e){this.focused||(this.$emit("focus",{event:e}),this.focused=!0),this.focusedIndex=-1,clearTimeout(this._blurTimeout)},onItemClick(e,t){const i=this.computedOpened;i&&(this.focusedIndex=0,this.currentOpened=!1),this.dispatchClickEvent(e,t),i&&this.dispatchPopupEvent(e,!1)},onBlur(e){clearTimeout(this._blurTimeout),this.createBlurTimeout(e)},createBlurTimeout(e){const t=this;this._blurTimeout=setTimeout(()=>{n.canUseDOM&&document.activeElement!==t.mainButton&&(t.focused=!1,t.focusedIndex=-1,t.$emit("blur",{event:e}),t.computedOpened&&(t.currentOpened=!1,t.dispatchPopupEvent(e,!1)))},200)},dispatchClickEvent(e,t){this.isItemDisabled(t)||(t===-1?this.$emit("buttonclick",{event:e}):this.$emit("itemclick",{event:e,component:this,item:this.buttonsData[t],itemIndex:t}))},onSplitPartClick(e){if(this.buttonsData.length){const t=!this.computedOpened;this.dispatchPopupEvent(e,t),this.focusedIndex=t?0:-1,this.currentOpened=t,this.focused=!0}},onDownSplitPart(e){e.preventDefault(),this.element()&&document.activeElement!==this.element()&&this.element().focus()},onItemDown(e){document.activeElement===this.element()&&e.preventDefault()},dispatchPopupEvent(e,t){const i={event:e};this.$emit(t?"open":"close",i)},isItemDisabled(e){return this.buttonsData[e]?this.buttonsData[e].disabled:this.$props.disabled},isRtl(){return this.$props.dir!==void 0?this.$props.dir==="rtl":!!this.$el&&getComputedStyle(this.$el).direction==="rtl"}}});exports.SplitButton=S;
|