@progress/kendo-vue-buttons 10.0.1-develop.7 → 10.1.0-develop.2
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/EULA.pdf +0 -0
- package/EULA.rtf +2730 -0
- package/EULA.txt +292 -0
- package/ListButton/ButtonItem.d.ts +0 -6
- package/ListButton/ButtonItem.js +1 -1
- package/ListButton/ButtonItem.mjs +9 -13
- package/ListButton/DropDownButton.js +1 -1
- package/ListButton/DropDownButton.mjs +48 -50
- package/ListButton/SplitButton.js +1 -1
- package/ListButton/SplitButton.mjs +46 -48
- 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 +5 -10
|
@@ -5,9 +5,9 @@
|
|
|
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 a, createVNode as t, h as c } from "vue";
|
|
9
9
|
import { Icon as m, getTemplate as p } from "@progress/kendo-vue-common";
|
|
10
|
-
const
|
|
10
|
+
const x = /* @__PURE__ */ a({
|
|
11
11
|
name: "KendoButtonItem",
|
|
12
12
|
emits: {
|
|
13
13
|
click: (e, n) => !0,
|
|
@@ -21,17 +21,13 @@ const f = /* @__PURE__ */ d({
|
|
|
21
21
|
dataItem: [String, Object],
|
|
22
22
|
id: String,
|
|
23
23
|
textField: String,
|
|
24
|
-
role: String
|
|
25
|
-
first: Boolean,
|
|
26
|
-
last: Boolean
|
|
24
|
+
role: String
|
|
27
25
|
},
|
|
28
26
|
computed: {
|
|
29
27
|
wrapperClass() {
|
|
30
28
|
return {
|
|
31
29
|
"k-item": !0,
|
|
32
30
|
"k-menu-item": !0,
|
|
33
|
-
"k-first": this.$props.first,
|
|
34
|
-
"k-last": this.$props.last,
|
|
35
31
|
"k-focus": this.$props.focused
|
|
36
32
|
};
|
|
37
33
|
},
|
|
@@ -61,9 +57,9 @@ const f = /* @__PURE__ */ d({
|
|
|
61
57
|
render: o
|
|
62
58
|
} = this.$props, r = function() {
|
|
63
59
|
const {
|
|
64
|
-
textField:
|
|
60
|
+
textField: i,
|
|
65
61
|
index: l
|
|
66
|
-
} = this.$props,
|
|
62
|
+
} = this.$props, s = e.text !== void 0 ? e.text : i ? e[i] : e, d = t("span", {
|
|
67
63
|
tabindex: -1,
|
|
68
64
|
class: this.innerClass,
|
|
69
65
|
key: "icon"
|
|
@@ -80,13 +76,13 @@ const f = /* @__PURE__ */ d({
|
|
|
80
76
|
src: e.imageUrl,
|
|
81
77
|
role: "presentation",
|
|
82
78
|
key: "image"
|
|
83
|
-
}, null),
|
|
79
|
+
}, null), s && t("span", {
|
|
84
80
|
class: "k-menu-link-text"
|
|
85
|
-
}, [
|
|
81
|
+
}, [s])]);
|
|
86
82
|
return p.call(this, {
|
|
87
83
|
h: c,
|
|
88
84
|
template: this.$props.dataItem.render || o,
|
|
89
|
-
defaultRendering:
|
|
85
|
+
defaultRendering: d,
|
|
90
86
|
additionalProps: {
|
|
91
87
|
item: e,
|
|
92
88
|
itemIndex: l,
|
|
@@ -107,5 +103,5 @@ const f = /* @__PURE__ */ d({
|
|
|
107
103
|
}
|
|
108
104
|
});
|
|
109
105
|
export {
|
|
110
|
-
|
|
106
|
+
x as ButtonItem
|
|
111
107
|
};
|
|
@@ -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"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),y=require("../Button.js"),s=require("@progress/kendo-vue-common"),b=require("./utils/navigation.js"),C=require("./ButtonItem.js"),$=require("@progress/kendo-vue-popup"),a=require("./utils/popup.js"),I=require("../package-metadata.js"),k=i.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,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:i.ref(null)}},render(){const e=this.isRtl(),t=e?"rtl":void 0,{tabIndex:n,disabled:d}=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,u){const g=typeof r!="string"?{...r,render:s.templateRendering.call(this,r.render,s.getListeners.call(this))}:r;return i.createVNode(C.ButtonItem,{dataItem:g,textField:m,focused:this.focusedIndex===u,onClick:this.onItemClick,onDown:this.onItemDown,render:s.templateRendering.call(this,p,s.getListeners.call(this)),item:o,index:u,key:u,id:`${this.guid}-${u}`},null)},this):null},l=function(){const{popupSettings:o={},size:p}=this.$props;return i.createVNode($.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:()=>[i.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 i.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[i.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:d||void 0,tabIndex:n,accessKey:this.$props.accessKey,icon:this.$props.icon,svgIcon:this.$props.svgIcon,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":d||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=b(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);this.focusedIndex=t;const n=e.keyCode===s.Keys.up||e.keyCode===s.Keys.down||e.keyCode===s.Keys.left||e.keyCode===s.Keys.right;!e.altKey&&n&&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 n={event:e};this.$emit(t?"open":"close",n)},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,15 +5,15 @@
|
|
|
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 { Button as
|
|
10
|
-
import { canUseDOM as
|
|
11
|
-
import
|
|
12
|
-
import { ButtonItem as
|
|
13
|
-
import { Popup as
|
|
14
|
-
import { getPopupAlign as
|
|
15
|
-
import { packageMetadata as
|
|
16
|
-
const j = /* @__PURE__ */
|
|
8
|
+
import { defineComponent as y, createVNode as o, ref as I } from "vue";
|
|
9
|
+
import { Button as O } from "../Button.mjs";
|
|
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 w from "./utils/navigation.mjs";
|
|
12
|
+
import { ButtonItem as S } from "./ButtonItem.mjs";
|
|
13
|
+
import { Popup as v } from "@progress/kendo-vue-popup";
|
|
14
|
+
import { getPopupAlign as B, getAnchorAlign as E } from "./utils/popup.mjs";
|
|
15
|
+
import { packageMetadata as K } from "../package-metadata.mjs";
|
|
16
|
+
const j = /* @__PURE__ */ y({
|
|
17
17
|
name: "KendoDropDownButton",
|
|
18
18
|
emits: {
|
|
19
19
|
focus: (t) => !0,
|
|
@@ -64,7 +64,7 @@ const j = /* @__PURE__ */ I({
|
|
|
64
64
|
dir: String
|
|
65
65
|
},
|
|
66
66
|
created() {
|
|
67
|
-
this._blurTimeout = null, this._anchor =
|
|
67
|
+
this._blurTimeout = null, this._anchor = h(), this.wrapper = null, this.mainButton = null, this.guid = h(), this.buttonsData = [], x(K);
|
|
68
68
|
},
|
|
69
69
|
mounted() {
|
|
70
70
|
this.mainButton = this.$refs[this._anchor], (this.$props.dir === void 0 && this.isRtl() || this.computedOpened) && this.$forceUpdate();
|
|
@@ -88,73 +88,71 @@ const j = /* @__PURE__ */ I({
|
|
|
88
88
|
},
|
|
89
89
|
setup() {
|
|
90
90
|
return {
|
|
91
|
-
kendoAnchorRef:
|
|
91
|
+
kendoAnchorRef: I(null)
|
|
92
92
|
};
|
|
93
93
|
},
|
|
94
94
|
render() {
|
|
95
95
|
const t = this.isRtl(), e = t ? "rtl" : void 0, {
|
|
96
|
-
tabIndex:
|
|
96
|
+
tabIndex: s,
|
|
97
97
|
disabled: u
|
|
98
|
-
} = this.$props, p =
|
|
98
|
+
} = this.$props, p = D(this);
|
|
99
99
|
this.buttonsData = this.$props.items;
|
|
100
|
-
const
|
|
100
|
+
const m = function() {
|
|
101
101
|
const {
|
|
102
102
|
item: n,
|
|
103
103
|
itemRender: c,
|
|
104
104
|
textField: C
|
|
105
|
-
} = this.$props
|
|
106
|
-
return
|
|
107
|
-
const
|
|
108
|
-
...
|
|
109
|
-
render:
|
|
110
|
-
} :
|
|
111
|
-
return
|
|
112
|
-
dataItem:
|
|
105
|
+
} = this.$props;
|
|
106
|
+
return this.buttonsData.length > 0 ? this.buttonsData.map(function(r, d) {
|
|
107
|
+
const b = typeof r != "string" ? {
|
|
108
|
+
...r,
|
|
109
|
+
render: l.call(this, r.render, f.call(this))
|
|
110
|
+
} : r;
|
|
111
|
+
return o(S, {
|
|
112
|
+
dataItem: b,
|
|
113
113
|
textField: C,
|
|
114
|
-
focused: this.focusedIndex ===
|
|
114
|
+
focused: this.focusedIndex === d,
|
|
115
115
|
onClick: this.onItemClick,
|
|
116
116
|
onDown: this.onItemDown,
|
|
117
|
-
render:
|
|
117
|
+
render: l.call(this, c, f.call(this)),
|
|
118
118
|
item: n,
|
|
119
|
-
index:
|
|
120
|
-
key:
|
|
121
|
-
id: `${this.guid}-${
|
|
122
|
-
first: o === 0,
|
|
123
|
-
last: o === a - 1
|
|
119
|
+
index: d,
|
|
120
|
+
key: d,
|
|
121
|
+
id: `${this.guid}-${d}`
|
|
124
122
|
}, null);
|
|
125
123
|
}, this) : null;
|
|
126
|
-
},
|
|
124
|
+
}, g = function() {
|
|
127
125
|
const {
|
|
128
126
|
popupSettings: n = {},
|
|
129
127
|
size: c
|
|
130
128
|
} = this.$props;
|
|
131
|
-
return
|
|
129
|
+
return o(v, {
|
|
132
130
|
anchor: this._anchor,
|
|
133
131
|
show: this.computedOpened,
|
|
134
132
|
animate: n.animate,
|
|
135
|
-
popupClass:
|
|
136
|
-
anchorAlign: n.anchorAlign ||
|
|
137
|
-
popupAlign: n.popupAlign ||
|
|
133
|
+
popupClass: a("k-menu-popup", n.popupClass),
|
|
134
|
+
anchorAlign: n.anchorAlign || E(t),
|
|
135
|
+
popupAlign: n.popupAlign || B(t),
|
|
138
136
|
style: t ? {
|
|
139
137
|
direction: "rtl"
|
|
140
138
|
} : void 0
|
|
141
139
|
}, {
|
|
142
|
-
default: () => [
|
|
140
|
+
default: () => [o("ul", {
|
|
143
141
|
class: "k-menu-group",
|
|
144
142
|
role: "menu",
|
|
145
143
|
id: this.guid
|
|
146
|
-
}, [
|
|
144
|
+
}, [m.call(this)])]
|
|
147
145
|
});
|
|
148
|
-
},
|
|
146
|
+
}, $ = this.$props.text || p ? {
|
|
149
147
|
default: () => [this.$props.text, p]
|
|
150
148
|
} : {};
|
|
151
|
-
return
|
|
149
|
+
return o("div", {
|
|
152
150
|
class: this.wrapperClass,
|
|
153
151
|
onKeydown: this.onKeyDown,
|
|
154
152
|
onFocusin: this.onFocus,
|
|
155
153
|
onFocusout: this.onBlur,
|
|
156
154
|
dir: e
|
|
157
|
-
}, [
|
|
155
|
+
}, [o(O, {
|
|
158
156
|
size: this.$props.size,
|
|
159
157
|
rounded: this.$props.rounded,
|
|
160
158
|
fillMode: this.$props.fillMode,
|
|
@@ -162,12 +160,12 @@ const j = /* @__PURE__ */ I({
|
|
|
162
160
|
onClick: this.onClickMainButton,
|
|
163
161
|
onMousedown: this.mouseDown,
|
|
164
162
|
disabled: u || void 0,
|
|
165
|
-
tabIndex:
|
|
163
|
+
tabIndex: s,
|
|
166
164
|
accessKey: this.$props.accessKey,
|
|
167
165
|
icon: this.$props.icon,
|
|
168
166
|
svgIcon: this.$props.svgIcon,
|
|
169
167
|
iconClass: this.$props.iconClass,
|
|
170
|
-
class:
|
|
168
|
+
class: a("k-menu-button", this.$props.buttonClass),
|
|
171
169
|
imageUrl: this.$props.imageUrl,
|
|
172
170
|
dir: e,
|
|
173
171
|
ref: this._anchor,
|
|
@@ -177,7 +175,7 @@ const j = /* @__PURE__ */ I({
|
|
|
177
175
|
"aria-label": this.$props.ariaLabel || (this.$props.svgIcon || this.$props.icon || this.$props.iconClass ? "Menu" : void 0),
|
|
178
176
|
"aria-controls": this.computedOpened ? this.guid : void 0,
|
|
179
177
|
"aria-activedescendant": this.computedOpened && this.focusedIndex !== void 0 && this.focusedIndex >= 0 ? `${this.guid}-${this.focusedIndex}` : void 0
|
|
180
|
-
},
|
|
178
|
+
}, $), g.call(this)]);
|
|
181
179
|
},
|
|
182
180
|
methods: {
|
|
183
181
|
element() {
|
|
@@ -185,14 +183,14 @@ const j = /* @__PURE__ */ I({
|
|
|
185
183
|
},
|
|
186
184
|
onKeyDown(t) {
|
|
187
185
|
if (t.altKey) {
|
|
188
|
-
!this.computedOpened && t.keyCode ===
|
|
186
|
+
!this.computedOpened && t.keyCode === i.down ? (this.dispatchPopupEvent(t, !0), this.focusedIndex = 0, this.currentOpened = !0) : this.computedOpened && t.keyCode === i.up && (this.dispatchPopupEvent(t, !1), this.focusedIndex = -1, this.currentOpened = !1);
|
|
189
187
|
return;
|
|
190
188
|
}
|
|
191
|
-
if (t.keyCode ===
|
|
192
|
-
const e =
|
|
189
|
+
if (t.keyCode === i.enter || t.keyCode === i.space ? (this.focusedIndex !== void 0 && this.focusedIndex >= 0 && this.dispatchClickEvent(t, this.focusedIndex), t.preventDefault(), this.focusedIndex = this.computedOpened ? -1 : 0, this.currentOpened = !this.computedOpened, this.dispatchPopupEvent(t, this.currentOpened)) : this.computedOpened && t.keyCode === i.esc && (this.focusedIndex = -1, this.currentOpened = !1, this.dispatchPopupEvent(t, this.currentOpened)), this.computedOpened) {
|
|
190
|
+
const e = w(this.focusedIndex, t.keyCode, t.altKey, this.buttonsData.length);
|
|
193
191
|
this.focusedIndex = e;
|
|
194
|
-
const
|
|
195
|
-
!t.altKey &&
|
|
192
|
+
const s = t.keyCode === i.up || t.keyCode === i.down || t.keyCode === i.left || t.keyCode === i.right;
|
|
193
|
+
!t.altKey && s && t.preventDefault();
|
|
196
194
|
}
|
|
197
195
|
},
|
|
198
196
|
onFocus(t) {
|
|
@@ -206,7 +204,7 @@ const j = /* @__PURE__ */ I({
|
|
|
206
204
|
createBlurTimeout(t) {
|
|
207
205
|
const e = this;
|
|
208
206
|
this._blurTimeout = setTimeout(() => {
|
|
209
|
-
|
|
207
|
+
k && document.activeElement !== e.$el && (e.focused = !1, e.focusedIndex = -1, e.$emit("blur", {
|
|
210
208
|
event: t
|
|
211
209
|
}), e.computedOpened && (e.currentOpened = !1, e.dispatchPopupEvent(t, !1)));
|
|
212
210
|
}, 200);
|
|
@@ -234,10 +232,10 @@ const j = /* @__PURE__ */ I({
|
|
|
234
232
|
this.currentOpened = e, this.focused = !0, this.focusedIndex = e ? 0 : -1, this.dispatchPopupEvent(t, e);
|
|
235
233
|
},
|
|
236
234
|
dispatchPopupEvent(t, e) {
|
|
237
|
-
const
|
|
235
|
+
const s = {
|
|
238
236
|
event: t
|
|
239
237
|
};
|
|
240
|
-
this.$emit(e ? "open" : "close",
|
|
238
|
+
this.$emit(e ? "open" : "close", s);
|
|
241
239
|
},
|
|
242
240
|
isItemDisabled(t) {
|
|
243
241
|
return this.buttonsData[t] ? this.buttonsData[t].disabled : this.$props.disabled;
|
|
@@ -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"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),a=require("../Button.js"),i=require("@progress/kendo-vue-common"),y=require("./ButtonItem.js"),C=require("./utils/navigation.js"),$=require("@progress/kendo-vue-popup"),l=require("./utils/popup.js"),k=require("@progress/kendo-svg-icons"),O=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,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=i.guid(),this.mainButton=null,this.guid=i.guid(),this.buttonsData=[],i.validatePackage(O.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:s,disabled:r}=this.$props,c=i.getDefaultSlots(this),h=function(){const{item:n,itemRender:p,textField:g}=this.$props;return this.buttonsData.length>0?this.buttonsData.map(function(u,d){const b=typeof u!="string"?{...u,render:i.templateRendering.call(this,u.render,i.getListeners.call(this))}:u;return o.createVNode(y.ButtonItem,{role:"menuitem",dataItem:b,textField:g,focused:this.focusedIndex===d,onClick:this.onItemClick,onDown:this.onItemDown,render:i.templateRendering.call(this,p,i.getListeners.call(this)),item:n,key:d,index:d,id:`${this.guid}-${d}`},null)},this):null},f=function(){const{popupSettings:n={},size:p}=this.$props;return o.createVNode($.Popup,{anchor:this._anchor,show:this.computedOpened,animate:n.animate,popupClass:i.classNames("k-menu-popup",n.popupClass),anchorAlign:n.anchorAlign||l.getAnchorAlign(e),popupAlign:n.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:n=>this.onItemClick(n,-1),disabled:r||void 0,tabIndex:s,accessKey:this.$props.accessKey,class:this.$props.buttonClass,icon:this.$props.icon,svgIcon:this.$props.svgIcon,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===i.Keys.down?(this.dispatchPopupEvent(e,!0),this.focusedIndex=0,this.currentOpened=!0):this.computedOpened&&e.keyCode===i.Keys.up&&(this.dispatchPopupEvent(e,!1),this.focusedIndex=-1,this.currentOpened=!1);return}let t;if(e.keyCode===i.Keys.enter||e.keyCode===i.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===i.Keys.esc&&(t={focusedIndex:-1,currentOpened:!1},this.dispatchPopupEvent(e,t.currentOpened)),this.computedOpened){const s=C(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);s!==this.focusedIndex&&(t=t||{},t.focusedIndex=s);const r=e.keyCode===i.Keys.up||e.keyCode===i.Keys.down||e.keyCode===i.Keys.left||e.keyCode===i.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 s=this.computedOpened;s&&(this.focusedIndex=0,this.currentOpened=!1),this.dispatchClickEvent(e,t),s&&this.dispatchPopupEvent(e,!1)},onBlur(e){clearTimeout(this._blurTimeout),this.createBlurTimeout(e)},createBlurTimeout(e){const t=this;this._blurTimeout=setTimeout(()=>{i.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 s={event:e};this.$emit(t?"open":"close",s)},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;
|
|
@@ -5,16 +5,16 @@
|
|
|
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 { Button as
|
|
10
|
-
import { canUseDOM as
|
|
8
|
+
import { defineComponent as k, createVNode as o, ref as y } from "vue";
|
|
9
|
+
import { Button as l } from "../Button.mjs";
|
|
10
|
+
import { canUseDOM as O, Keys as s, getDefaultSlots as I, guid as a, validatePackage as S, classNames as D, templateRendering as h, getListeners as f } from "@progress/kendo-vue-common";
|
|
11
11
|
import { ButtonItem as x } from "./ButtonItem.mjs";
|
|
12
|
-
import
|
|
13
|
-
import { Popup as
|
|
14
|
-
import { getPopupAlign as
|
|
15
|
-
import { chevronDownIcon as
|
|
16
|
-
import { packageMetadata as
|
|
17
|
-
const L = /* @__PURE__ */
|
|
12
|
+
import w from "./utils/navigation.mjs";
|
|
13
|
+
import { Popup as v } from "@progress/kendo-vue-popup";
|
|
14
|
+
import { getPopupAlign as P, getAnchorAlign as B } from "./utils/popup.mjs";
|
|
15
|
+
import { chevronDownIcon as E } from "@progress/kendo-svg-icons";
|
|
16
|
+
import { packageMetadata as K } from "../package-metadata.mjs";
|
|
17
|
+
const L = /* @__PURE__ */ k({
|
|
18
18
|
name: "KendoSplitButton",
|
|
19
19
|
emits: {
|
|
20
20
|
focus: (t) => !0,
|
|
@@ -74,7 +74,7 @@ const L = /* @__PURE__ */ y({
|
|
|
74
74
|
};
|
|
75
75
|
},
|
|
76
76
|
created() {
|
|
77
|
-
this._blurTimeout = null, this._anchor =
|
|
77
|
+
this._blurTimeout = null, this._anchor = a(), this.mainButton = null, this.guid = a(), this.buttonsData = [], S(K);
|
|
78
78
|
},
|
|
79
79
|
mounted() {
|
|
80
80
|
this.mainButton = this.$refs[this._anchor], (this.$props.dir === void 0 && this.isRtl() || this.computedOpened) && this.$forceUpdate();
|
|
@@ -96,79 +96,77 @@ const L = /* @__PURE__ */ y({
|
|
|
96
96
|
},
|
|
97
97
|
setup() {
|
|
98
98
|
return {
|
|
99
|
-
kendoAnchorRef:
|
|
99
|
+
kendoAnchorRef: y(null)
|
|
100
100
|
};
|
|
101
101
|
},
|
|
102
102
|
render() {
|
|
103
103
|
this.buttonsData = this.$props.items;
|
|
104
104
|
const t = this.isRtl(), e = t ? "rtl" : void 0, {
|
|
105
105
|
tabIndex: i,
|
|
106
|
-
disabled:
|
|
107
|
-
} = this.$props, p =
|
|
106
|
+
disabled: r
|
|
107
|
+
} = this.$props, p = I(this), m = function() {
|
|
108
108
|
const {
|
|
109
109
|
item: n,
|
|
110
110
|
itemRender: c,
|
|
111
111
|
textField: C
|
|
112
|
-
} = this.$props
|
|
113
|
-
return
|
|
114
|
-
const
|
|
115
|
-
...
|
|
116
|
-
render:
|
|
117
|
-
} :
|
|
118
|
-
return
|
|
112
|
+
} = this.$props;
|
|
113
|
+
return this.buttonsData.length > 0 ? this.buttonsData.map(function(d, u) {
|
|
114
|
+
const $ = typeof d != "string" ? {
|
|
115
|
+
...d,
|
|
116
|
+
render: h.call(this, d.render, f.call(this))
|
|
117
|
+
} : d;
|
|
118
|
+
return o(x, {
|
|
119
119
|
role: "menuitem",
|
|
120
|
-
dataItem:
|
|
120
|
+
dataItem: $,
|
|
121
121
|
textField: C,
|
|
122
|
-
focused: this.focusedIndex ===
|
|
122
|
+
focused: this.focusedIndex === u,
|
|
123
123
|
onClick: this.onItemClick,
|
|
124
124
|
onDown: this.onItemDown,
|
|
125
|
-
render:
|
|
125
|
+
render: h.call(this, c, f.call(this)),
|
|
126
126
|
item: n,
|
|
127
|
-
key:
|
|
128
|
-
index:
|
|
129
|
-
id: `${this.guid}-${
|
|
130
|
-
first: o === 0,
|
|
131
|
-
last: o === l - 1
|
|
127
|
+
key: u,
|
|
128
|
+
index: u,
|
|
129
|
+
id: `${this.guid}-${u}`
|
|
132
130
|
}, null);
|
|
133
131
|
}, this) : null;
|
|
134
|
-
},
|
|
132
|
+
}, g = function() {
|
|
135
133
|
const {
|
|
136
134
|
popupSettings: n = {},
|
|
137
135
|
size: c
|
|
138
136
|
} = this.$props;
|
|
139
|
-
return
|
|
137
|
+
return o(v, {
|
|
140
138
|
anchor: this._anchor,
|
|
141
139
|
show: this.computedOpened,
|
|
142
140
|
animate: n.animate,
|
|
143
|
-
popupClass:
|
|
144
|
-
anchorAlign: n.anchorAlign ||
|
|
145
|
-
popupAlign: n.popupAlign ||
|
|
141
|
+
popupClass: D("k-menu-popup", n.popupClass),
|
|
142
|
+
anchorAlign: n.anchorAlign || B(t),
|
|
143
|
+
popupAlign: n.popupAlign || P(t),
|
|
146
144
|
style: t ? {
|
|
147
145
|
direction: "rtl"
|
|
148
146
|
} : void 0
|
|
149
147
|
}, {
|
|
150
|
-
default: () => [
|
|
148
|
+
default: () => [o("ul", {
|
|
151
149
|
class: "k-menu-group",
|
|
152
150
|
role: "menu",
|
|
153
151
|
id: this.guid
|
|
154
|
-
}, [
|
|
152
|
+
}, [m.call(this)])]
|
|
155
153
|
});
|
|
156
|
-
},
|
|
154
|
+
}, b = this.$props.text || p ? {
|
|
157
155
|
default: () => [this.$props.text, p]
|
|
158
156
|
} : {};
|
|
159
|
-
return
|
|
157
|
+
return o("div", {
|
|
160
158
|
class: this.wrapperClass,
|
|
161
159
|
onKeydown: this.onKeyDown,
|
|
162
160
|
onFocusin: this.onFocus,
|
|
163
161
|
onFocusout: this.onBlur,
|
|
164
162
|
dir: e
|
|
165
|
-
}, [
|
|
163
|
+
}, [o(l, {
|
|
166
164
|
size: this.$props.size,
|
|
167
165
|
rounded: this.$props.rounded,
|
|
168
166
|
fillMode: this.$props.fillMode,
|
|
169
167
|
themeColor: this.$props.themeColor,
|
|
170
168
|
onClick: (n) => this.onItemClick(n, -1),
|
|
171
|
-
disabled:
|
|
169
|
+
disabled: r || void 0,
|
|
172
170
|
tabIndex: i,
|
|
173
171
|
accessKey: this.$props.accessKey,
|
|
174
172
|
class: this.$props.buttonClass,
|
|
@@ -180,17 +178,17 @@ const L = /* @__PURE__ */ y({
|
|
|
180
178
|
id: this._anchor,
|
|
181
179
|
ref: this._anchor,
|
|
182
180
|
type: "button",
|
|
183
|
-
"aria-disabled":
|
|
181
|
+
"aria-disabled": r || void 0,
|
|
184
182
|
"aria-label": this.$props.ariaLabel || (!this.$props.text && !p && (this.$props.svgIcon || this.$props.icon || this.$props.iconClass) ? "Action" : void 0)
|
|
185
|
-
},
|
|
186
|
-
svgIcon:
|
|
183
|
+
}, b), o(l, {
|
|
184
|
+
svgIcon: E,
|
|
187
185
|
size: this.$props.size,
|
|
188
186
|
rounded: this.$props.rounded,
|
|
189
187
|
fillMode: this.$props.fillMode,
|
|
190
188
|
themeColor: this.$props.themeColor,
|
|
191
189
|
icon: "chevron-down",
|
|
192
190
|
class: "k-split-button-arrow",
|
|
193
|
-
disabled:
|
|
191
|
+
disabled: r || void 0,
|
|
194
192
|
tabIndex: -1,
|
|
195
193
|
onClick: this.onSplitPartClick,
|
|
196
194
|
onMousedown: this.onDownSplitPart,
|
|
@@ -199,7 +197,7 @@ const L = /* @__PURE__ */ y({
|
|
|
199
197
|
"aria-label": "Toggle dropdown",
|
|
200
198
|
"aria-expanded": this.computedOpened,
|
|
201
199
|
"aria-controls": this.computedOpened ? this.guid : void 0
|
|
202
|
-
}, null),
|
|
200
|
+
}, null), g.call(this)]);
|
|
203
201
|
},
|
|
204
202
|
methods: {
|
|
205
203
|
element() {
|
|
@@ -218,10 +216,10 @@ const L = /* @__PURE__ */ y({
|
|
|
218
216
|
focusedIndex: -1,
|
|
219
217
|
currentOpened: !1
|
|
220
218
|
}, this.dispatchPopupEvent(t, e.currentOpened)), this.computedOpened) {
|
|
221
|
-
const i =
|
|
219
|
+
const i = w(this.focusedIndex, t.keyCode, t.altKey, this.buttonsData.length);
|
|
222
220
|
i !== this.focusedIndex && (e = e || {}, e.focusedIndex = i);
|
|
223
|
-
const
|
|
224
|
-
!t.altKey &&
|
|
221
|
+
const r = t.keyCode === s.up || t.keyCode === s.down || t.keyCode === s.left || t.keyCode === s.right;
|
|
222
|
+
!t.altKey && r && t.preventDefault();
|
|
225
223
|
}
|
|
226
224
|
e && (this.focusedIndex = e.focusedIndex, this.focused = e.focused, e.currentOpened !== void 0 && (this.currentOpened = e.currentOpened));
|
|
227
225
|
},
|
|
@@ -240,7 +238,7 @@ const L = /* @__PURE__ */ y({
|
|
|
240
238
|
createBlurTimeout(t) {
|
|
241
239
|
const e = this;
|
|
242
240
|
this._blurTimeout = setTimeout(() => {
|
|
243
|
-
|
|
241
|
+
O && document.activeElement !== e.mainButton && (e.focused = !1, e.focusedIndex = -1, e.$emit("blur", {
|
|
244
242
|
event: t
|
|
245
243
|
}), e.computedOpened && (e.currentOpened = !1, e.dispatchPopupEvent(t, !1)));
|
|
246
244
|
}, 200);
|