@progress/kendo-vue-scrollview 8.4.0-develop.3 → 8.4.0-develop.4

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/ScrollView.d.ts CHANGED
@@ -105,7 +105,6 @@ declare const ScrollView: import('vue').DefineComponent<import('vue').ExtractPro
105
105
  'k-scrollview-light': boolean;
106
106
  'k-scrollview-dark': boolean;
107
107
  };
108
- viewCount(): number;
109
108
  displayLeftArrow(): boolean;
110
109
  displayRightArrow(): boolean;
111
110
  isRtl(): boolean;
package/ScrollView.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 t=require("vue"),i=require("@progress/kendo-vue-common"),p=require("./package-metadata.js"),n=require("@progress/kendo-svg-icons"),w=t.defineComponent({name:"KendoScrollView",props:{activeView:{type:Number,default:1},dataItems:{type:Array,default:function(){return[]}},arrows:{type:Boolean,default:!0},automaticViewChange:{type:Boolean,default:!0},automaticViewChangeInterval:{type:Number,default:5e3},content:[Object,String,Function],dir:String,endless:Boolean,pageable:{type:Boolean,default:!0},pagerOverlay:{type:String,default:"none"}},created(){i.validatePackage(p.packageMetadata),this.timeoutRef=null},mounted(){this.wrapElement=i.getRef(this,"wrapElement"),this.currentDir=this.$props.dir!==void 0?this.$props.dir:i.isRtl(this.$el)?"rtl":"ltr",this.runAutomaticChange()},updated(){const e=this.viewCount;this.wrapElement&&(this.wrapElement.style.setProperty("--kendo-scrollview-views",`${e}`),this.wrapElement.style.setProperty("--kendo-scrollview-current",`${this.active}`)),this.runAutomaticChange()},data(){return{active:this.activeView||1,currentDir:void 0}},computed:{scrollViewClasses(){return{"k-scrollview":!0,"k-scrollview-light":this.pagerOverlay==="light","k-scrollview-dark":this.pagerOverlay==="dark"}},viewCount(){var s,r;return this.dataItems.length>0?this.dataItems.length:(((r=(s=this.$slots).default)==null?void 0:r.call(s))||[]).length},displayLeftArrow(){let e;return this.isRtl?e=this.active<this.viewCount:e=this.active>1,(this.endless||e)&&this.viewCount>0},displayRightArrow(){let e;return this.isRtl?e=this.active>1:e=this.active<this.viewCount,(this.endless||e)&&this.viewCount>0},isRtl(){return this.currentDir==="rtl"}},render(){var h,d;const{pageable:e,arrows:s,content:r}=this.$props,c=this.viewCount;let o;return this.dataItems.length>0?o=this.dataItems.map(function(a,l){const v=i.templateRendering.call(this,a.content||r,i.getListeners.call(this)),u=i.getTemplate.call(this,{h:t.h,template:v,defaultRendering:null,additionalProps:{item:a,items:this.dataItems}});return t.createVNode("div",{class:"k-scrollview-view",role:"listitem","aria-roledescription":"slide","aria-hidden":this.active!==l+1},[u])},this):o=(((d=(h=this.$slots).default)==null?void 0:d.call(h))||[]).map((l,v)=>t.createVNode("div",{class:"k-scrollview-view",role:"listitem","aria-roledescription":"slide"},[l])),t.createVNode("div",{class:this.scrollViewClasses,tabindex:0,dir:this.currentDir,onKeydown:this.handleKeyDown,role:"application","aria-roledescription":"carousel"},[t.createVNode("div",{class:"k-scrollview-wrap k-scrollview-animate",style:`--kendo-scrollview-views:${c}; --kendo-scrollview-current:${this.active};`,ref:i.setRef(this,"wrapElement"),id:"scrollview-wrap",role:"list"},[o]),t.createVNode("div",{class:"k-scrollview-elements"},[s&&[this.displayLeftArrow&&t.createVNode("span",{class:"k-scrollview-prev","aria-label":"Previous",role:"button",tabindex:0,"aria-controls":"scrollview-wrap",onClick:this.handlePrevClick},[t.createVNode(i.Icon,{name:this.isRtl?"chevron-right":"chevron-left",icon:this.isRtl?n.chevronRightIcon:n.chevronLeftIcon,size:"xxxlarge"},null)]),this.displayRightArrow&&t.createVNode("span",{class:"k-scrollview-next","aria-label":"Next",role:"button",tabindex:0,"aria-controls":"scrollview-wrap",onClick:this.handleNextClick},[t.createVNode(i.Icon,{name:this.isRtl?"chevron-left":"chevron-right",icon:this.isRtl?n.chevronLeftIcon:n.chevronRightIcon,size:"xxxlarge"},null)])],e&&t.createVNode("div",{class:"k-scrollview-nav-wrap"},[t.createVNode("div",{class:"k-scrollview-nav"},[Array.from({length:c}).map((a,l)=>t.createVNode("span",{class:i.classNames("k-link",{"k-primary":this.active===l+1}),key:l+1,role:"button",tabindex:0,"aria-label":`Go to slide ${l+1}`,onClick:()=>this.setActive(l+1)},null))])])]),t.createVNode("div",{class:"k-sr-only","aria-live":"polite"},null)])},methods:{runAutomaticChange(){if(this.automaticViewChange){this.resetTimeout();const e=this,s=this.active;this.timeoutRef=setTimeout(function(){e.setActive(s===e.viewCount?e.endless?1:s:s+1)},this.automaticViewChangeInterval)}},resetTimeout(){this.timeoutRef&&clearTimeout(this.timeoutRef)},setActive(e){this.active=e},focusElement(){this.$el&&this.$el.focus()},prev(){this.endless?this.active>1?this.setActive(this.active-1):this.setActive(this.viewCount):this.active>1&&this.setActive(this.active-1)},next(){this.endless?this.active<this.viewCount?this.setActive(this.active+1):this.setActive(1):this.active<this.viewCount&&this.setActive(this.active+1)},handlePrevClick(){this.isRtl?this.next():this.prev()},handleNextClick(){this.isRtl?this.prev():this.next()},handleKeyDown(e){switch(e.keyCode){case i.Keys.left:e.preventDefault(),this.isRtl?this.next():this.prev();break;case i.Keys.right:e.preventDefault(),this.isRtl?this.prev():this.next();break}}}});exports.ScrollView=w;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),i=require("@progress/kendo-vue-common"),v=require("./package-metadata.js"),l=require("@progress/kendo-svg-icons"),u=t.defineComponent({name:"KendoScrollView",props:{activeView:{type:Number,default:1},dataItems:{type:Array,default:function(){return[]}},arrows:{type:Boolean,default:!0},automaticViewChange:{type:Boolean,default:!0},automaticViewChangeInterval:{type:Number,default:5e3},content:[Object,String,Function],dir:String,endless:Boolean,pageable:{type:Boolean,default:!0},pagerOverlay:{type:String,default:"none"}},created(){i.validatePackage(v.packageMetadata),this.timeoutRef=null},mounted(){this.wrapElement=i.getRef(this,"wrapElement"),this.currentDir=this.$props.dir!==void 0?this.$props.dir:i.isRtl(this.$el)?"rtl":"ltr",this.runAutomaticChange()},updated(){const e=this.dataItems.length;this.wrapElement&&(this.wrapElement.style.setProperty("--kendo-scrollview-views",`${e}`),this.wrapElement.style.setProperty("--kendo-scrollview-current",`${this.active}`)),this.runAutomaticChange()},data(){return{active:this.activeView||1,currentDir:void 0}},computed:{scrollViewClasses(){return{"k-scrollview":!0,"k-scrollview-light":this.pagerOverlay==="light","k-scrollview-dark":this.pagerOverlay==="dark"}},displayLeftArrow(){let e;return this.isRtl?e=this.active<this.dataItems.length:e=this.active>1,(this.endless||e)&&this.dataItems.length>0},displayRightArrow(){let e;return this.isRtl?e=this.active>1:e=this.active<this.dataItems.length,(this.endless||e)&&this.dataItems.length>0},isRtl(){return this.currentDir==="rtl"}},render(){const{pageable:e,arrows:s,content:n}=this.$props,c=this.dataItems.length,o=this.dataItems.map(function(r,a){const h=i.templateRendering.call(this,r.content||n,i.getListeners.call(this)),d=i.getTemplate.call(this,{h:t.h,template:h,defaultRendering:null,additionalProps:{item:r,items:this.dataItems}});return t.createVNode("div",{class:"k-scrollview-view","aria-hidden":this.active!==a+1},[d])},this);return t.createVNode("div",{class:this.scrollViewClasses,tabindex:0,dir:this.currentDir,onKeydown:this.handleKeyDown},[t.createVNode("div",{class:"k-scrollview-wrap k-scrollview-animate",style:`--kendo-scrollview-views:${c}; --kendo-scrollview-current:${this.active};`,ref:i.setRef(this,"wrapElement")},[o]),t.createVNode("div",{class:"k-scrollview-elements"},[s&&[this.displayLeftArrow&&t.createVNode("span",{class:"k-scrollview-prev","aria-label":"previous",onClick:this.handlePrevClick},[t.createVNode(i.Icon,{name:this.isRtl?"chevron-right":"chevron-left",icon:this.isRtl?l.chevronRightIcon:l.chevronLeftIcon,size:"xxxlarge"},null)]),this.displayRightArrow&&t.createVNode("span",{class:"k-scrollview-next","aria-label":"next",onClick:this.handleNextClick},[t.createVNode(i.Icon,{name:this.isRtl?"chevron-left":"chevron-right",icon:this.isRtl?l.chevronLeftIcon:l.chevronRightIcon,size:"xxxlarge"},null)])],e&&t.createVNode("div",{class:"k-scrollview-nav-wrap"},[t.createVNode("ul",{class:"k-scrollview-nav"},[this.dataItems.map(function(r,a){return t.createVNode("li",{role:"button",class:i.classNames("k-link",{"k-primary":this.active===a+1}),key:a+1,onClick:()=>this.setActive(a+1)},null)},this)])])])])},methods:{runAutomaticChange(){if(this.automaticViewChange){this.resetTimeout();const e=this,s=this.active;this.timeoutRef=setTimeout(function(){e.setActive(s===e.dataItems.length?e.endless?1:s:s+1)},this.automaticViewChangeInterval)}},resetTimeout(){this.timeoutRef&&clearTimeout(this.timeoutRef)},setActive(e){this.active=e},focusElement(){this.$el&&this.$el.focus()},prev(){this.endless?this.active>1?this.setActive(this.active-1):this.setActive(this.dataItems.length):this.active>1&&this.setActive(this.active-1)},next(){this.endless?this.active<this.dataItems.length?this.setActive(this.active+1):this.setActive(1):this.active<this.dataItems.length&&this.setActive(this.active+1)},handlePrevClick(){this.isRtl?this.next():this.prev()},handleNextClick(){this.isRtl?this.prev():this.next()},handleKeyDown(e){switch(e.keyCode){case i.Keys.left:e.preventDefault(),this.isRtl?this.next():this.prev();break;case i.Keys.right:e.preventDefault(),this.isRtl?this.prev():this.next();break}}}});exports.ScrollView=u;
package/ScrollView.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 m, h as f, createVNode as t } from "vue";
9
- import { Keys as v, templateRendering as g, getListeners as C, getTemplate as k, setRef as y, Icon as d, classNames as R, getRef as x, isRtl as A, validatePackage as b } from "@progress/kendo-vue-common";
10
- import { packageMetadata as I } from "./package-metadata.mjs";
11
- import { chevronRightIcon as u, chevronLeftIcon as p } from "@progress/kendo-svg-icons";
12
- const E = /* @__PURE__ */ m({
8
+ import { defineComponent as m, h as p, createVNode as e } from "vue";
9
+ import { Keys as a, templateRendering as f, getListeners as w, getTemplate as g, setRef as k, Icon as r, classNames as y, getRef as R, isRtl as I, validatePackage as C } from "@progress/kendo-vue-common";
10
+ import { packageMetadata as A } from "./package-metadata.mjs";
11
+ import { chevronRightIcon as n, chevronLeftIcon as h } from "@progress/kendo-svg-icons";
12
+ const D = /* @__PURE__ */ m({
13
13
  name: "KendoScrollView",
14
14
  props: {
15
15
  activeView: {
@@ -47,14 +47,14 @@ const E = /* @__PURE__ */ m({
47
47
  }
48
48
  },
49
49
  created() {
50
- b(I), this.timeoutRef = null;
50
+ C(A), this.timeoutRef = null;
51
51
  },
52
52
  mounted() {
53
- this.wrapElement = x(this, "wrapElement"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : A(this.$el) ? "rtl" : "ltr", this.runAutomaticChange();
53
+ this.wrapElement = R(this, "wrapElement"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : I(this.$el) ? "rtl" : "ltr", this.runAutomaticChange();
54
54
  },
55
55
  updated() {
56
- const e = this.viewCount;
57
- this.wrapElement && (this.wrapElement.style.setProperty("--kendo-scrollview-views", `${e}`), this.wrapElement.style.setProperty("--kendo-scrollview-current", `${this.active}`)), this.runAutomaticChange();
56
+ const t = this.dataItems.length;
57
+ this.wrapElement && (this.wrapElement.style.setProperty("--kendo-scrollview-views", `${t}`), this.wrapElement.style.setProperty("--kendo-scrollview-current", `${this.active}`)), this.runAutomaticChange();
58
58
  },
59
59
  data() {
60
60
  return {
@@ -70,131 +70,104 @@ const E = /* @__PURE__ */ m({
70
70
  "k-scrollview-dark": this.pagerOverlay === "dark"
71
71
  };
72
72
  },
73
- viewCount() {
74
- var i, l;
75
- return this.dataItems.length > 0 ? this.dataItems.length : (((l = (i = this.$slots).default) == null ? void 0 : l.call(i)) || []).length;
76
- },
77
73
  displayLeftArrow() {
78
- let e;
79
- return this.isRtl ? e = this.active < this.viewCount : e = this.active > 1, (this.endless || e) && this.viewCount > 0;
74
+ let t;
75
+ return this.isRtl ? t = this.active < this.dataItems.length : t = this.active > 1, (this.endless || t) && this.dataItems.length > 0;
80
76
  },
81
77
  displayRightArrow() {
82
- let e;
83
- return this.isRtl ? e = this.active > 1 : e = this.active < this.viewCount, (this.endless || e) && this.viewCount > 0;
78
+ let t;
79
+ return this.isRtl ? t = this.active > 1 : t = this.active < this.dataItems.length, (this.endless || t) && this.dataItems.length > 0;
84
80
  },
85
81
  isRtl() {
86
82
  return this.currentDir === "rtl";
87
83
  }
88
84
  },
89
85
  render() {
90
- var o, h;
91
86
  const {
92
- pageable: e,
87
+ pageable: t,
93
88
  arrows: i,
94
- content: l
95
- } = this.$props, n = this.viewCount;
96
- let a;
97
- return this.dataItems.length > 0 ? a = this.dataItems.map(function(r, s) {
98
- const c = g.call(this, r.content || l, C.call(this)), w = k.call(this, {
99
- h: f,
100
- template: c,
89
+ content: o
90
+ } = this.$props, c = this.dataItems.length, d = this.dataItems.map(function(l, s) {
91
+ const v = f.call(this, l.content || o, w.call(this)), u = g.call(this, {
92
+ h: p,
93
+ template: v,
101
94
  defaultRendering: null,
102
95
  additionalProps: {
103
- item: r,
96
+ item: l,
104
97
  items: this.dataItems
105
98
  }
106
99
  });
107
- return t("div", {
100
+ return e("div", {
108
101
  class: "k-scrollview-view",
109
- role: "listitem",
110
- "aria-roledescription": "slide",
111
102
  "aria-hidden": this.active !== s + 1
112
- }, [w]);
113
- }, this) : a = (((h = (o = this.$slots).default) == null ? void 0 : h.call(o)) || []).map((s, c) => t("div", {
114
- class: "k-scrollview-view",
115
- role: "listitem",
116
- "aria-roledescription": "slide"
117
- }, [s])), t("div", {
103
+ }, [u]);
104
+ }, this);
105
+ return e("div", {
118
106
  class: this.scrollViewClasses,
119
107
  tabindex: 0,
120
108
  dir: this.currentDir,
121
- onKeydown: this.handleKeyDown,
122
- role: "application",
123
- "aria-roledescription": "carousel"
124
- }, [t("div", {
109
+ onKeydown: this.handleKeyDown
110
+ }, [e("div", {
125
111
  class: "k-scrollview-wrap k-scrollview-animate",
126
- style: `--kendo-scrollview-views:${n}; --kendo-scrollview-current:${this.active};`,
127
- ref: y(this, "wrapElement"),
128
- id: "scrollview-wrap",
129
- role: "list"
130
- }, [a]), t("div", {
112
+ style: `--kendo-scrollview-views:${c}; --kendo-scrollview-current:${this.active};`,
113
+ ref: k(this, "wrapElement")
114
+ }, [d]), e("div", {
131
115
  class: "k-scrollview-elements"
132
- }, [i && [this.displayLeftArrow && t("span", {
116
+ }, [i && [this.displayLeftArrow && e("span", {
133
117
  class: "k-scrollview-prev",
134
- "aria-label": "Previous",
135
- role: "button",
136
- tabindex: 0,
137
- "aria-controls": "scrollview-wrap",
118
+ "aria-label": "previous",
138
119
  onClick: this.handlePrevClick
139
- }, [t(d, {
120
+ }, [e(r, {
140
121
  name: this.isRtl ? "chevron-right" : "chevron-left",
141
- icon: this.isRtl ? u : p,
122
+ icon: this.isRtl ? n : h,
142
123
  size: "xxxlarge"
143
- }, null)]), this.displayRightArrow && t("span", {
124
+ }, null)]), this.displayRightArrow && e("span", {
144
125
  class: "k-scrollview-next",
145
- "aria-label": "Next",
146
- role: "button",
147
- tabindex: 0,
148
- "aria-controls": "scrollview-wrap",
126
+ "aria-label": "next",
149
127
  onClick: this.handleNextClick
150
- }, [t(d, {
128
+ }, [e(r, {
151
129
  name: this.isRtl ? "chevron-left" : "chevron-right",
152
- icon: this.isRtl ? p : u,
130
+ icon: this.isRtl ? h : n,
153
131
  size: "xxxlarge"
154
- }, null)])], e && t("div", {
132
+ }, null)])], t && e("div", {
155
133
  class: "k-scrollview-nav-wrap"
156
- }, [t("div", {
134
+ }, [e("ul", {
157
135
  class: "k-scrollview-nav"
158
- }, [Array.from({
159
- length: n
160
- }).map((r, s) => t("span", {
161
- class: R("k-link", {
162
- "k-primary": this.active === s + 1
163
- }),
164
- key: s + 1,
165
- role: "button",
166
- tabindex: 0,
167
- "aria-label": `Go to slide ${s + 1}`,
168
- onClick: () => this.setActive(s + 1)
169
- }, null))])])]), t("div", {
170
- class: "k-sr-only",
171
- "aria-live": "polite"
172
- }, null)]);
136
+ }, [this.dataItems.map(function(l, s) {
137
+ return e("li", {
138
+ role: "button",
139
+ class: y("k-link", {
140
+ "k-primary": this.active === s + 1
141
+ }),
142
+ key: s + 1,
143
+ onClick: () => this.setActive(s + 1)
144
+ }, null);
145
+ }, this)])])])]);
173
146
  },
174
147
  methods: {
175
148
  runAutomaticChange() {
176
149
  if (this.automaticViewChange) {
177
150
  this.resetTimeout();
178
- const e = this, i = this.active;
151
+ const t = this, i = this.active;
179
152
  this.timeoutRef = setTimeout(function() {
180
- e.setActive(i === e.viewCount ? e.endless ? 1 : i : i + 1);
153
+ t.setActive(i === t.dataItems.length ? t.endless ? 1 : i : i + 1);
181
154
  }, this.automaticViewChangeInterval);
182
155
  }
183
156
  },
184
157
  resetTimeout() {
185
158
  this.timeoutRef && clearTimeout(this.timeoutRef);
186
159
  },
187
- setActive(e) {
188
- this.active = e;
160
+ setActive(t) {
161
+ this.active = t;
189
162
  },
190
163
  focusElement() {
191
164
  this.$el && this.$el.focus();
192
165
  },
193
166
  prev() {
194
- this.endless ? this.active > 1 ? this.setActive(this.active - 1) : this.setActive(this.viewCount) : this.active > 1 && this.setActive(this.active - 1);
167
+ this.endless ? this.active > 1 ? this.setActive(this.active - 1) : this.setActive(this.dataItems.length) : this.active > 1 && this.setActive(this.active - 1);
195
168
  },
196
169
  next() {
197
- this.endless ? this.active < this.viewCount ? this.setActive(this.active + 1) : this.setActive(1) : this.active < this.viewCount && this.setActive(this.active + 1);
170
+ this.endless ? this.active < this.dataItems.length ? this.setActive(this.active + 1) : this.setActive(1) : this.active < this.dataItems.length && this.setActive(this.active + 1);
198
171
  },
199
172
  handlePrevClick() {
200
173
  this.isRtl ? this.next() : this.prev();
@@ -202,18 +175,18 @@ const E = /* @__PURE__ */ m({
202
175
  handleNextClick() {
203
176
  this.isRtl ? this.prev() : this.next();
204
177
  },
205
- handleKeyDown(e) {
206
- switch (e.keyCode) {
207
- case v.left:
208
- e.preventDefault(), this.isRtl ? this.next() : this.prev();
178
+ handleKeyDown(t) {
179
+ switch (t.keyCode) {
180
+ case a.left:
181
+ t.preventDefault(), this.isRtl ? this.next() : this.prev();
209
182
  break;
210
- case v.right:
211
- e.preventDefault(), this.isRtl ? this.prev() : this.next();
183
+ case a.right:
184
+ t.preventDefault(), this.isRtl ? this.prev() : this.next();
212
185
  break;
213
186
  }
214
187
  }
215
188
  }
216
189
  });
217
190
  export {
218
- E as ScrollView
191
+ D as ScrollView
219
192
  };
@@ -12,4 +12,4 @@
12
12
  * Licensed under commercial license. See LICENSE.md in the package root for more information
13
13
  *-------------------------------------------------------------------------------------------
14
14
  */
15
- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("@progress/kendo-vue-common"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-vue-common","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoVueScrollview={},e.Vue,e.KendoVueCommon,e.KendoSVGIcons)}(this,function(e,t,i,s){"use strict";const l={name:"@progress/kendo-vue-scrollview",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:0,version:"8.4.0-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/"},r=t.defineComponent({name:"KendoScrollView",props:{activeView:{type:Number,default:1},dataItems:{type:Array,default:function(){return[]}},arrows:{type:Boolean,default:!0},automaticViewChange:{type:Boolean,default:!0},automaticViewChangeInterval:{type:Number,default:5e3},content:[Object,String,Function],dir:String,endless:Boolean,pageable:{type:Boolean,default:!0},pagerOverlay:{type:String,default:"none"}},created(){i.validatePackage(l),this.timeoutRef=null},mounted(){this.wrapElement=i.getRef(this,"wrapElement"),this.currentDir=void 0!==this.$props.dir?this.$props.dir:i.isRtl(this.$el)?"rtl":"ltr",this.runAutomaticChange()},updated(){const e=this.viewCount;this.wrapElement&&(this.wrapElement.style.setProperty("--kendo-scrollview-views",`${e}`),this.wrapElement.style.setProperty("--kendo-scrollview-current",`${this.active}`)),this.runAutomaticChange()},data(){return{active:this.activeView||1,currentDir:void 0}},computed:{scrollViewClasses(){return{"k-scrollview":!0,"k-scrollview-light":"light"===this.pagerOverlay,"k-scrollview-dark":"dark"===this.pagerOverlay}},viewCount(){var e,t;return this.dataItems.length>0?this.dataItems.length:((null==(t=(e=this.$slots).default)?void 0:t.call(e))||[]).length},displayLeftArrow(){let e;return e=this.isRtl?this.active<this.viewCount:this.active>1,(this.endless||e)&&this.viewCount>0},displayRightArrow(){let e;return e=this.isRtl?this.active>1:this.active<this.viewCount,(this.endless||e)&&this.viewCount>0},isRtl(){return"rtl"===this.currentDir}},render(){var e,l;const{pageable:r,arrows:o,content:a}=this.$props,n=this.viewCount;let c;return c=this.dataItems.length>0?this.dataItems.map(function(e,s){const l=i.templateRendering.call(this,e.content||a,i.getListeners.call(this)),r=i.getTemplate.call(this,{h:t.h,template:l,defaultRendering:null,additionalProps:{item:e,items:this.dataItems}});return t.createVNode("div",{class:"k-scrollview-view",role:"listitem","aria-roledescription":"slide","aria-hidden":this.active!==s+1},[r])},this):((null==(l=(e=this.$slots).default)?void 0:l.call(e))||[]).map((e,i)=>t.createVNode("div",{class:"k-scrollview-view",role:"listitem","aria-roledescription":"slide"},[e])),t.createVNode("div",{class:this.scrollViewClasses,tabindex:0,dir:this.currentDir,onKeydown:this.handleKeyDown,role:"application","aria-roledescription":"carousel"},[t.createVNode("div",{class:"k-scrollview-wrap k-scrollview-animate",style:`--kendo-scrollview-views:${n}; --kendo-scrollview-current:${this.active};`,ref:i.setRef(this,"wrapElement"),id:"scrollview-wrap",role:"list"},[c]),t.createVNode("div",{class:"k-scrollview-elements"},[o&&[this.displayLeftArrow&&t.createVNode("span",{class:"k-scrollview-prev","aria-label":"Previous",role:"button",tabindex:0,"aria-controls":"scrollview-wrap",onClick:this.handlePrevClick},[t.createVNode(i.Icon,{name:this.isRtl?"chevron-right":"chevron-left",icon:this.isRtl?s.chevronRightIcon:s.chevronLeftIcon,size:"xxxlarge"},null)]),this.displayRightArrow&&t.createVNode("span",{class:"k-scrollview-next","aria-label":"Next",role:"button",tabindex:0,"aria-controls":"scrollview-wrap",onClick:this.handleNextClick},[t.createVNode(i.Icon,{name:this.isRtl?"chevron-left":"chevron-right",icon:this.isRtl?s.chevronLeftIcon:s.chevronRightIcon,size:"xxxlarge"},null)])],r&&t.createVNode("div",{class:"k-scrollview-nav-wrap"},[t.createVNode("div",{class:"k-scrollview-nav"},[Array.from({length:n}).map((e,s)=>t.createVNode("span",{class:i.classNames("k-link",{"k-primary":this.active===s+1}),key:s+1,role:"button",tabindex:0,"aria-label":`Go to slide ${s+1}`,onClick:()=>this.setActive(s+1)},null))])])]),t.createVNode("div",{class:"k-sr-only","aria-live":"polite"},null)])},methods:{runAutomaticChange(){if(this.automaticViewChange){this.resetTimeout();const e=this,t=this.active;this.timeoutRef=setTimeout(function(){e.setActive(t===e.viewCount?e.endless?1:t:t+1)},this.automaticViewChangeInterval)}},resetTimeout(){this.timeoutRef&&clearTimeout(this.timeoutRef)},setActive(e){this.active=e},focusElement(){this.$el&&this.$el.focus()},prev(){this.endless?this.active>1?this.setActive(this.active-1):this.setActive(this.viewCount):this.active>1&&this.setActive(this.active-1)},next(){this.endless?this.active<this.viewCount?this.setActive(this.active+1):this.setActive(1):this.active<this.viewCount&&this.setActive(this.active+1)},handlePrevClick(){this.isRtl?this.next():this.prev()},handleNextClick(){this.isRtl?this.prev():this.next()},handleKeyDown(e){switch(e.keyCode){case i.Keys.left:e.preventDefault(),this.isRtl?this.next():this.prev();break;case i.Keys.right:e.preventDefault(),this.isRtl?this.prev():this.next()}}}});e.ScrollView=r});
15
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("@progress/kendo-vue-common"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-vue-common","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoVueScrollview={},e.Vue,e.KendoVueCommon,e.KendoSVGIcons)}(this,function(e,t,i,s){"use strict";const r={name:"@progress/kendo-vue-scrollview",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:0,version:"8.4.0-develop.4",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/"},a=t.defineComponent({name:"KendoScrollView",props:{activeView:{type:Number,default:1},dataItems:{type:Array,default:function(){return[]}},arrows:{type:Boolean,default:!0},automaticViewChange:{type:Boolean,default:!0},automaticViewChangeInterval:{type:Number,default:5e3},content:[Object,String,Function],dir:String,endless:Boolean,pageable:{type:Boolean,default:!0},pagerOverlay:{type:String,default:"none"}},created(){i.validatePackage(r),this.timeoutRef=null},mounted(){this.wrapElement=i.getRef(this,"wrapElement"),this.currentDir=void 0!==this.$props.dir?this.$props.dir:i.isRtl(this.$el)?"rtl":"ltr",this.runAutomaticChange()},updated(){const e=this.dataItems.length;this.wrapElement&&(this.wrapElement.style.setProperty("--kendo-scrollview-views",`${e}`),this.wrapElement.style.setProperty("--kendo-scrollview-current",`${this.active}`)),this.runAutomaticChange()},data(){return{active:this.activeView||1,currentDir:void 0}},computed:{scrollViewClasses(){return{"k-scrollview":!0,"k-scrollview-light":"light"===this.pagerOverlay,"k-scrollview-dark":"dark"===this.pagerOverlay}},displayLeftArrow(){let e;return e=this.isRtl?this.active<this.dataItems.length:this.active>1,(this.endless||e)&&this.dataItems.length>0},displayRightArrow(){let e;return e=this.isRtl?this.active>1:this.active<this.dataItems.length,(this.endless||e)&&this.dataItems.length>0},isRtl(){return"rtl"===this.currentDir}},render(){const{pageable:e,arrows:r,content:a}=this.$props,l=this.dataItems.length,n=this.dataItems.map(function(e,s){const r=i.templateRendering.call(this,e.content||a,i.getListeners.call(this)),l=i.getTemplate.call(this,{h:t.h,template:r,defaultRendering:null,additionalProps:{item:e,items:this.dataItems}});return t.createVNode("div",{class:"k-scrollview-view","aria-hidden":this.active!==s+1},[l])},this);return t.createVNode("div",{class:this.scrollViewClasses,tabindex:0,dir:this.currentDir,onKeydown:this.handleKeyDown},[t.createVNode("div",{class:"k-scrollview-wrap k-scrollview-animate",style:`--kendo-scrollview-views:${l}; --kendo-scrollview-current:${this.active};`,ref:i.setRef(this,"wrapElement")},[n]),t.createVNode("div",{class:"k-scrollview-elements"},[r&&[this.displayLeftArrow&&t.createVNode("span",{class:"k-scrollview-prev","aria-label":"previous",onClick:this.handlePrevClick},[t.createVNode(i.Icon,{name:this.isRtl?"chevron-right":"chevron-left",icon:this.isRtl?s.chevronRightIcon:s.chevronLeftIcon,size:"xxxlarge"},null)]),this.displayRightArrow&&t.createVNode("span",{class:"k-scrollview-next","aria-label":"next",onClick:this.handleNextClick},[t.createVNode(i.Icon,{name:this.isRtl?"chevron-left":"chevron-right",icon:this.isRtl?s.chevronLeftIcon:s.chevronRightIcon,size:"xxxlarge"},null)])],e&&t.createVNode("div",{class:"k-scrollview-nav-wrap"},[t.createVNode("ul",{class:"k-scrollview-nav"},[this.dataItems.map(function(e,s){return t.createVNode("li",{role:"button",class:i.classNames("k-link",{"k-primary":this.active===s+1}),key:s+1,onClick:()=>this.setActive(s+1)},null)},this)])])])])},methods:{runAutomaticChange(){if(this.automaticViewChange){this.resetTimeout();const e=this,t=this.active;this.timeoutRef=setTimeout(function(){e.setActive(t===e.dataItems.length?e.endless?1:t:t+1)},this.automaticViewChangeInterval)}},resetTimeout(){this.timeoutRef&&clearTimeout(this.timeoutRef)},setActive(e){this.active=e},focusElement(){this.$el&&this.$el.focus()},prev(){this.endless?this.active>1?this.setActive(this.active-1):this.setActive(this.dataItems.length):this.active>1&&this.setActive(this.active-1)},next(){this.endless?this.active<this.dataItems.length?this.setActive(this.active+1):this.setActive(1):this.active<this.dataItems.length&&this.setActive(this.active+1)},handlePrevClick(){this.isRtl?this.next():this.prev()},handleNextClick(){this.isRtl?this.prev():this.next()},handleKeyDown(e){switch(e.keyCode){case i.Keys.left:e.preventDefault(),this.isRtl?this.next():this.prev();break;case i.Keys.right:e.preventDefault(),this.isRtl?this.prev():this.next()}}}});e.ScrollView=a});
@@ -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 e={name:"@progress/kendo-vue-scrollview",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1779097759,version:"8.4.0-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/"};exports.packageMetadata=e;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-vue-scrollview",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1779123401,version:"8.4.0-develop.4",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/"};exports.packageMetadata=e;
@@ -10,8 +10,8 @@ const e = {
10
10
  productName: "Kendo UI for Vue",
11
11
  productCode: "KENDOUIVUE",
12
12
  productCodes: ["KENDOUIVUE"],
13
- publishDate: 1779097759,
14
- version: "8.4.0-develop.3",
13
+ publishDate: 1779123401,
14
+ version: "8.4.0-develop.4",
15
15
  licensingDocsUrl: "https://www.telerik.com/kendo-vue-ui/my-license/"
16
16
  };
17
17
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-vue-scrollview",
3
- "version": "8.4.0-develop.3",
3
+ "version": "8.4.0-develop.4",
4
4
  "description": "TODO",
5
5
  "author": "Progress",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -25,8 +25,8 @@
25
25
  "sideEffects": false,
26
26
  "peerDependencies": {
27
27
  "@progress/kendo-licensing": "^1.7.2",
28
- "@progress/kendo-vue-common": "8.4.0-develop.3",
29
- "@progress/kendo-svg-icons": "^4.4.0",
28
+ "@progress/kendo-vue-common": "8.4.0-develop.4",
29
+ "@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
30
30
  "vue": "^3.0.2"
31
31
  },
32
32
  "dependencies": {},
@@ -46,7 +46,7 @@
46
46
  "package": {
47
47
  "productName": "Kendo UI for Vue",
48
48
  "productCode": "KENDOUIVUE",
49
- "publishDate": 1779097759,
49
+ "publishDate": 1779123401,
50
50
  "licensingDocsUrl": "https://www.telerik.com/kendo-vue-ui/my-license/"
51
51
  }
52
52
  },
@@ -56,5 +56,10 @@
56
56
  "repository": {
57
57
  "type": "git",
58
58
  "url": "git+https://github.com/telerik/kendo-vue.git"
59
+ },
60
+ "peerDependenciesMeta": {
61
+ "@progress/kendo-svg-icons": {
62
+ "optional": true
63
+ }
59
64
  }
60
65
  }