@progress/kendo-vue-layout 6.1.0-develop.5 → 6.1.0-develop.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/actionsheet/ActionSheet.js +1 -1
- package/actionsheet/ActionSheet.mjs +48 -44
- package/dist/cdn/js/kendo-vue-layout.js +1 -1
- package/index.d.mts +42 -25
- package/index.d.ts +42 -25
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +7 -7
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue")
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),A=require("@progress/kendo-vue-animation"),n=require("@progress/kendo-vue-common"),E=require("../package-metadata.js"),N=require("./ActionSheetItem.js"),V=require("./ActionSheetHeader.js"),x=require("./ActionSheetFooter.js"),O=require("./ActionSheetContent.js");function m(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const T=300,w=t.defineComponent({name:"KendoActionSheet",props:{expand:Boolean,animation:{type:Boolean,default:!0},animationDuration:{type:Number,default:T},animationStyles:Object,tabIndex:Number,items:Array,subTitle:String,title:String,className:String,headerClassName:{type:String,default:void 0},contentClassName:{type:String,default:void 0},headerStyle:{type:String,default:void 0},footerClassName:{type:String,default:void 0},header:[String,Object,Function],content:[String,Object,Function],footer:[String,Object,Function],item:[String,Object,Function],navigatable:{type:Boolean,default:!0},navigatableElements:{type:Array,default:function(){return[]}},actions:Object,onClose:Function},created(){this.bottomPosition={bottom:"0px",width:"100%"},this.guidId=n.guid(),n.validatePackage(E.packageMetadata)},mounted(){this.element=n.getRef(this,"actionSheet"),this.$props.expand&&!this.show&&(this.show=!0)},updated(){if(this.element=n.getRef(this,"actionSheet"),this.$props.expand&&!this.show&&(this.show=!0),this.element&&!this.$props.className&&(this.element.style.setProperty("--kendo-actionsheet-height","auto"),this.element.style.setProperty("--kendo-actionsheet-max-height","none")),this.element&&this.$props.navigatable){const e=this.$props.navigatableElements,s=[".k-actionsheet-item",".k-actionsheet-actions",...[".k-actionsheet-footer",".k-actionsheet-content",".k-actionsheet-titlebar"].map(r=>n.FOCUSABLE_ELEMENTS.concat(e).map(l=>`${r} ${l}`)).flat()];this.navigation=new n.Navigation({tabIndex:this.$props.tabIndex||0,root:this.element,rovingTabIndex:!1,selectors:s,keyboardEvents:{keydown:{Tab:this.onTab,Enter:this.onEnter,Escape:this.onEscape}}}),e.length!==0?this.navigation.focusElement(this.element.querySelector(e[0]),null):this.navigation.focusElement(this.navigation.first,null)}},data(){return{show:!1,slide:!1}},computed:{topGroupItems(){var e;return(e=this.items)==null?void 0:e.filter(o=>!o.group||o.group==="top")},bottomGroupItems(){var e;return(e=this.items)==null?void 0:e.filter(o=>o.group==="bottom")},shouldRenderSeparator(){return this.topGroupItems&&this.topGroupItems.length>0&&this.bottomGroupItems&&this.bottomGroupItems.length>0}},render(){const{title:e,subTitle:o,animationStyles:s,animation:r,expand:l,tabIndex:a,className:f,animationDuration:g,headerClassName:k,contentClassName:y,footerClassName:v,actions:b}=this.$props,I=n.templateRendering.call(this,this.$props.header,n.getListeners.call(this)),d=n.getTemplate.call(this,{h:t.h,template:I,defaultRendering:null}),C=n.templateRendering.call(this,this.$props.content,n.getListeners.call(this)),p=n.getTemplate.call(this,{h:t.h,template:C,defaultRendering:null}),$=n.templateRendering.call(this,this.$props.footer,n.getListeners.call(this)),u=n.getTemplate.call(this,{h:t.h,template:$,defaultRendering:null}),S=t.createVNode("div",{class:n.classNames("k-actionsheet",f,{"k-actionsheet-bottom":!f}),role:"dialog","aria-modal":"true","aria-hidden":!1,"aria-labelledby":this.guidId,ref:n.setRef(this,"actionSheet"),onKeydown:this.handleKeyDown},[this.$props.header&&!e&&!o&&t.createVNode(V.ActionSheetHeader,{headerClassName:k},m(d)?d:{default:()=>[d]}),(e||o)&&t.createVNode("div",{class:"k-actionsheet-titlebar k-text-center"},[t.createVNode("div",{class:"k-actionsheet-titlebar-group k-hbox"},[t.createVNode("div",{class:"k-actionsheet-title",id:this.guidId},[e&&t.createVNode("div",null,[e]),o&&t.createVNode("div",{class:"k-actionsheet-subtitle"},[o])]),b&&t.createVNode("div",{class:"k-actionsheet-actions"},[b])])]),this.$props.content?t.createVNode(O.ActionSheetContent,{contentClassName:y},m(p)?p:{default:()=>[p]}):t.createVNode("div",{class:"k-actionsheet-content"},[t.createVNode("div",{class:"k-list-ul",role:"group"},[this.topGroupItems&&this.topGroupItems.map(function(i,c){const h=n.templateRendering.call(this,this.$props.item||i.content,n.getListeners.call(this));return t.createVNode(N.ActionSheetItem,{style:i.style,class:i.class,title:i.title,description:i.description,disabled:i.disabled,id:c,key:c,item:i,icon:i.icon,svgIcon:i.svgIcon,iconSize:i.iconSize,iconColor:i.iconColor,tabIndex:a||0,content:h,onClick:this.handleItemClick},null)},this)]),this.shouldRenderSeparator&&t.createVNode("hr",{class:"k-hr"},null),t.createVNode("div",{class:"k-list-ul",role:"group"},[this.bottomGroupItems&&this.bottomGroupItems.map(function(i,c){var h;return t.createVNode(N.ActionSheetItem,{style:i.style,class:i.class,id:c+(((h=this.topGroupItems)==null?void 0:h.length)||0),key:c,item:i,title:i.title,description:i.description,disabled:i.disabled,icon:i.icon,svgIcon:i.svgIcon,iconSize:i.iconSize,iconColor:i.iconColor,tabIndex:a||0,onClick:this.handleItemClick},null)},this)])]),this.$props.footer&&t.createVNode(x.ActionSheetFooter,{footerClassName:v},m(u)?u:{default:()=>[u]})]);return this.show&&t.createVNode("div",{class:"k-actionsheet-container"},[t.createVNode("div",{class:"k-overlay",onClick:this.handleOverlayClick},null),r?t.createVNode(A.Slide,{onExited:this.hideActionSheet,direction:"up",componentChildStyle:s||this.bottomPosition,transitionEnterDuration:g,transitionExitDuration:g,appear:l},{default:()=>[l?S:null]}):S])},methods:{handleKeyDown(e){this.$props.navigatable&&this.navigation.triggerKeyboardEvent(e)},onTab(e,o,s){s.preventDefault(),s.shiftKey?o.focusPrevious(e):o.focusNext(e)},handleOverlayClick(e){this.$emit("close",e),this.$props.animation||this.hideActionSheet()},handleItemClick(e){this.$emit("itemselect",e),this.$props.animation||this.hideActionSheet()},onEnter(e,o,s){if(e.ariaDisabled)return;const r=e.className&&e.className.indexOf("k-actionsheet-item")!==-1,l=o.elements.filter(a=>a.className.indexOf("k-actionsheet-item")!==-1);if(r){s.preventDefault();const a=this.$props.items[l.indexOf(e)];this.$emit("itemselect",{syntheticEvent:s,item:a,title:a&&a.title})}this.$props.animation||this.hideActionSheet()},onEscape(e,o,s){s.preventDefault(),this.$emit("close",s),this.$props.animation||this.hideActionSheet()},hideActionSheet(){this.show=!1}}});exports.ActionSheet=w;
|
|
@@ -5,18 +5,18 @@
|
|
|
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 { Slide as
|
|
10
|
-
import { guid as
|
|
11
|
-
import { packageMetadata as
|
|
12
|
-
import { ActionSheetItem as
|
|
13
|
-
import { ActionSheetHeader as
|
|
14
|
-
import { ActionSheetFooter as
|
|
15
|
-
import { ActionSheetContent as
|
|
8
|
+
import { defineComponent as w, h as f, createVNode as i, isVNode as D } from "vue";
|
|
9
|
+
import { Slide as G } from "@progress/kendo-vue-animation";
|
|
10
|
+
import { guid as T, validatePackage as j, getRef as I, FOCUSABLE_ELEMENTS as R, Navigation as F, templateRendering as h, getListeners as d, getTemplate as g, classNames as P, setRef as K } from "@progress/kendo-vue-common";
|
|
11
|
+
import { packageMetadata as _ } from "../package-metadata.mjs";
|
|
12
|
+
import { ActionSheetItem as C } from "./ActionSheetItem.mjs";
|
|
13
|
+
import { ActionSheetHeader as z } from "./ActionSheetHeader.mjs";
|
|
14
|
+
import { ActionSheetFooter as B } from "./ActionSheetFooter.mjs";
|
|
15
|
+
import { ActionSheetContent as L } from "./ActionSheetContent.mjs";
|
|
16
16
|
function b(t) {
|
|
17
|
-
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !
|
|
17
|
+
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !D(t);
|
|
18
18
|
}
|
|
19
|
-
const
|
|
19
|
+
const U = 300, Y = /* @__PURE__ */ w({
|
|
20
20
|
name: "KendoActionSheet",
|
|
21
21
|
props: {
|
|
22
22
|
expand: Boolean,
|
|
@@ -26,7 +26,7 @@ const L = 300, X = /* @__PURE__ */ O({
|
|
|
26
26
|
},
|
|
27
27
|
animationDuration: {
|
|
28
28
|
type: Number,
|
|
29
|
-
default:
|
|
29
|
+
default: U
|
|
30
30
|
},
|
|
31
31
|
animationStyles: Object,
|
|
32
32
|
tabIndex: Number,
|
|
@@ -64,21 +64,22 @@ const L = 300, X = /* @__PURE__ */ O({
|
|
|
64
64
|
return [];
|
|
65
65
|
}
|
|
66
66
|
},
|
|
67
|
+
actions: Object,
|
|
67
68
|
onClose: Function
|
|
68
69
|
},
|
|
69
70
|
created() {
|
|
70
71
|
this.bottomPosition = {
|
|
71
72
|
bottom: "0px",
|
|
72
73
|
width: "100%"
|
|
73
|
-
}, this.guidId =
|
|
74
|
+
}, this.guidId = T(), j(_);
|
|
74
75
|
},
|
|
75
76
|
mounted() {
|
|
76
|
-
this.element =
|
|
77
|
+
this.element = I(this, "actionSheet"), this.$props.expand && !this.show && (this.show = !0);
|
|
77
78
|
},
|
|
78
79
|
updated() {
|
|
79
|
-
if (this.element =
|
|
80
|
-
const t = this.$props.navigatableElements, o = [".k-actionsheet-item", ...[".k-actionsheet-footer", ".k-actionsheet-content", ".k-actionsheet-titlebar"].map((l) => R.concat(t).map((a) => `${l} ${a}`)).flat()];
|
|
81
|
-
this.navigation = new
|
|
80
|
+
if (this.element = I(this, "actionSheet"), this.$props.expand && !this.show && (this.show = !0), this.element && !this.$props.className && (this.element.style.setProperty("--kendo-actionsheet-height", "auto"), this.element.style.setProperty("--kendo-actionsheet-max-height", "none")), this.element && this.$props.navigatable) {
|
|
81
|
+
const t = this.$props.navigatableElements, o = [".k-actionsheet-item", ".k-actionsheet-actions", ...[".k-actionsheet-footer", ".k-actionsheet-content", ".k-actionsheet-titlebar"].map((l) => R.concat(t).map((a) => `${l} ${a}`)).flat()];
|
|
82
|
+
this.navigation = new F({
|
|
82
83
|
tabIndex: this.$props.tabIndex || 0,
|
|
83
84
|
root: this.element,
|
|
84
85
|
rovingTabIndex: !1,
|
|
@@ -122,33 +123,34 @@ const L = 300, X = /* @__PURE__ */ O({
|
|
|
122
123
|
tabIndex: s,
|
|
123
124
|
className: S,
|
|
124
125
|
animationDuration: y,
|
|
125
|
-
headerClassName:
|
|
126
|
-
contentClassName:
|
|
127
|
-
footerClassName:
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
template: N,
|
|
131
|
-
defaultRendering: null
|
|
132
|
-
}), x = c.call(this, this.$props.content, d.call(this)), m = g.call(this, {
|
|
126
|
+
headerClassName: $,
|
|
127
|
+
contentClassName: E,
|
|
128
|
+
footerClassName: N,
|
|
129
|
+
actions: k
|
|
130
|
+
} = this.$props, x = h.call(this, this.$props.header, d.call(this)), p = g.call(this, {
|
|
133
131
|
h: f,
|
|
134
132
|
template: x,
|
|
135
133
|
defaultRendering: null
|
|
136
|
-
}), A =
|
|
134
|
+
}), A = h.call(this, this.$props.content, d.call(this)), m = g.call(this, {
|
|
137
135
|
h: f,
|
|
138
136
|
template: A,
|
|
139
137
|
defaultRendering: null
|
|
140
|
-
}),
|
|
141
|
-
|
|
138
|
+
}), O = h.call(this, this.$props.footer, d.call(this)), u = g.call(this, {
|
|
139
|
+
h: f,
|
|
140
|
+
template: O,
|
|
141
|
+
defaultRendering: null
|
|
142
|
+
}), v = i("div", {
|
|
143
|
+
class: P("k-actionsheet", S, {
|
|
142
144
|
"k-actionsheet-bottom": !S
|
|
143
145
|
}),
|
|
144
146
|
role: "dialog",
|
|
145
147
|
"aria-modal": "true",
|
|
146
148
|
"aria-hidden": !1,
|
|
147
149
|
"aria-labelledby": this.guidId,
|
|
148
|
-
ref:
|
|
150
|
+
ref: K(this, "actionSheet"),
|
|
149
151
|
onKeydown: this.handleKeyDown
|
|
150
|
-
}, [this.$props.header && !t && !n && i(
|
|
151
|
-
headerClassName:
|
|
152
|
+
}, [this.$props.header && !t && !n && i(z, {
|
|
153
|
+
headerClassName: $
|
|
152
154
|
}, b(p) ? p : {
|
|
153
155
|
default: () => [p]
|
|
154
156
|
}), (t || n) && i("div", {
|
|
@@ -160,8 +162,10 @@ const L = 300, X = /* @__PURE__ */ O({
|
|
|
160
162
|
id: this.guidId
|
|
161
163
|
}, [t && i("div", null, [t]), n && i("div", {
|
|
162
164
|
class: "k-actionsheet-subtitle"
|
|
163
|
-
}, [n])])
|
|
164
|
-
|
|
165
|
+
}, [n])]), k && i("div", {
|
|
166
|
+
class: "k-actionsheet-actions"
|
|
167
|
+
}, [k])])]), this.$props.content ? i(L, {
|
|
168
|
+
contentClassName: E
|
|
165
169
|
}, b(m) ? m : {
|
|
166
170
|
default: () => [m]
|
|
167
171
|
}) : i("div", {
|
|
@@ -170,8 +174,8 @@ const L = 300, X = /* @__PURE__ */ O({
|
|
|
170
174
|
class: "k-list-ul",
|
|
171
175
|
role: "group"
|
|
172
176
|
}, [this.topGroupItems && this.topGroupItems.map(function(e, r) {
|
|
173
|
-
const
|
|
174
|
-
return i(
|
|
177
|
+
const c = h.call(this, this.$props.item || e.content, d.call(this));
|
|
178
|
+
return i(C, {
|
|
175
179
|
style: e.style,
|
|
176
180
|
class: e.class,
|
|
177
181
|
title: e.title,
|
|
@@ -185,7 +189,7 @@ const L = 300, X = /* @__PURE__ */ O({
|
|
|
185
189
|
iconSize: e.iconSize,
|
|
186
190
|
iconColor: e.iconColor,
|
|
187
191
|
tabIndex: s || 0,
|
|
188
|
-
content:
|
|
192
|
+
content: c,
|
|
189
193
|
onClick: this.handleItemClick
|
|
190
194
|
}, null);
|
|
191
195
|
}, this)]), this.shouldRenderSeparator && i("hr", {
|
|
@@ -194,11 +198,11 @@ const L = 300, X = /* @__PURE__ */ O({
|
|
|
194
198
|
class: "k-list-ul",
|
|
195
199
|
role: "group"
|
|
196
200
|
}, [this.bottomGroupItems && this.bottomGroupItems.map(function(e, r) {
|
|
197
|
-
var
|
|
198
|
-
return i(
|
|
201
|
+
var c;
|
|
202
|
+
return i(C, {
|
|
199
203
|
style: e.style,
|
|
200
204
|
class: e.class,
|
|
201
|
-
id: r + (((
|
|
205
|
+
id: r + (((c = this.topGroupItems) == null ? void 0 : c.length) || 0),
|
|
202
206
|
key: r,
|
|
203
207
|
item: e,
|
|
204
208
|
title: e.title,
|
|
@@ -211,8 +215,8 @@ const L = 300, X = /* @__PURE__ */ O({
|
|
|
211
215
|
tabIndex: s || 0,
|
|
212
216
|
onClick: this.handleItemClick
|
|
213
217
|
}, null);
|
|
214
|
-
}, this)])]), this.$props.footer && i(
|
|
215
|
-
footerClassName:
|
|
218
|
+
}, this)])]), this.$props.footer && i(B, {
|
|
219
|
+
footerClassName: N
|
|
216
220
|
}, b(u) ? u : {
|
|
217
221
|
default: () => [u]
|
|
218
222
|
})]);
|
|
@@ -221,7 +225,7 @@ const L = 300, X = /* @__PURE__ */ O({
|
|
|
221
225
|
}, [i("div", {
|
|
222
226
|
class: "k-overlay",
|
|
223
227
|
onClick: this.handleOverlayClick
|
|
224
|
-
}, null), l ? i(
|
|
228
|
+
}, null), l ? i(G, {
|
|
225
229
|
onExited: this.hideActionSheet,
|
|
226
230
|
direction: "up",
|
|
227
231
|
componentChildStyle: o || this.bottomPosition,
|
|
@@ -229,8 +233,8 @@ const L = 300, X = /* @__PURE__ */ O({
|
|
|
229
233
|
transitionExitDuration: y,
|
|
230
234
|
appear: a
|
|
231
235
|
}, {
|
|
232
|
-
default: () => [a ?
|
|
233
|
-
}) :
|
|
236
|
+
default: () => [a ? v : null]
|
|
237
|
+
}) : v]);
|
|
234
238
|
},
|
|
235
239
|
methods: {
|
|
236
240
|
handleKeyDown(t) {
|
|
@@ -269,5 +273,5 @@ const L = 300, X = /* @__PURE__ */ O({
|
|
|
269
273
|
}
|
|
270
274
|
});
|
|
271
275
|
export {
|
|
272
|
-
|
|
276
|
+
Y as ActionSheet
|
|
273
277
|
};
|