@progress/kendo-vue-scrollview 5.3.0-dev.202410141143 → 5.3.0-develop.1

package/dist/esm/ScrollView.js

@@ -1,353 +0,0 @@
-// @ts-ignore
-import * as Vue from 'vue';
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-import { classNames, getListeners, getRef, getTemplate, Icon, isRtl, Keys, setRef, templateRendering, validatePackage } from '@progress/kendo-vue-common';
-import { packageMetadata } from './package-metadata.js';
-import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
-/**
- * @hidden
- */
-var ScrollViewVue2 = {
-  name: 'KendoScrollView',
-  props: {
-    activeView: {
-      type: Number,
-      default: 1
-    },
-    dataItems: {
-      type: Array,
-      default: function _default() {
-        return [];
-      }
-    },
-    arrows: {
-      type: Boolean,
-      default: true
-    },
-    automaticViewChange: {
-      type: Boolean,
-      default: true
-    },
-    automaticViewChangeInterval: {
-      type: Number,
-      default: 5000
-    },
-    content: [Object, String, Function],
-    dir: String,
-    endless: Boolean,
-    pageable: {
-      type: Boolean,
-      default: true
-    },
-    pagerOverlay: {
-      type: String,
-      default: 'none'
-    }
-  },
-  created: function created() {
-    validatePackage(packageMetadata);
-    this.timeoutRef = null;
-  },
-  mounted: function mounted() {
-    this.wrapElement = getRef(this, 'wrapElement');
-    this.currentDir = this.$props.dir !== undefined ? this.$props.dir : isRtl(this.$el) ? 'rtl' : 'ltr';
-    this.runAutomaticChange();
-  },
-  updated: function updated() {
-    var viewsCount = this.dataItems.length;
-    if (this.wrapElement) {
-      this.wrapElement.style.setProperty('--kendo-scrollview-views', "".concat(viewsCount));
-      this.wrapElement.style.setProperty('--kendo-scrollview-current', "".concat(this.active));
-    }
-    this.runAutomaticChange();
-  },
-  data: function data() {
-    return {
-      active: this.activeView || 1,
-      currentDir: undefined
-    };
-  },
-  computed: {
-    scrollViewClasses: function scrollViewClasses() {
-      return {
-        'k-scrollview': true,
-        'k-scrollview-light': this.pagerOverlay === 'light',
-        'k-scrollview-dark': this.pagerOverlay === 'dark'
-      };
-    },
-    displayLeftArrow: function displayLeftArrow() {
-      var isNotBorderItem;
-      if (this.isRtl) {
-        isNotBorderItem = this.active < this.dataItems.length;
-      } else {
-        isNotBorderItem = this.active > 1;
-      }
-      return (this.endless || isNotBorderItem) && this.dataItems.length > 0;
-    },
-    displayRightArrow: function displayRightArrow() {
-      var isNotBorderItem;
-      if (this.isRtl) {
-        isNotBorderItem = this.active > 1;
-      } else {
-        isNotBorderItem = this.active < this.dataItems.length;
-      }
-      return (this.endless || isNotBorderItem) && this.dataItems.length > 0;
-    },
-    isRtl: function isRtl() {
-      return this.currentDir === 'rtl';
-    }
-  },
-  // @ts-ignore
-  setup: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    return {
-      v3: v3
-    };
-  },
-  // @ts-ignore
-  render: function render(createElement) {
-    var h = gh || createElement;
-    var _a = this.$props,
-      pageable = _a.pageable,
-      arrows = _a.arrows,
-      content = _a.content;
-    var viewsCount = this.dataItems.length;
-    var allContent = this.dataItems.map(function (item, index) {
-      var contentTemplate = templateRendering.call(this, item.content || content, getListeners.call(this));
-      var contentRender = getTemplate.call(this, {
-        h: h,
-        template: contentTemplate,
-        defaultRendering: null,
-        additionalProps: {
-          item: item,
-          items: this.dataItems
-        }
-      });
-      return h("div", {
-        "class": "k-scrollview-view",
-        "aria-hidden": this.active === index + 1 ? false : true,
-        attrs: this.v3 ? undefined : {
-          "aria-hidden": this.active === index + 1 ? false : true
-        }
-      }, [contentRender]);
-    }, this);
-    return h("div", {
-      "class": this.scrollViewClasses,
-      tabindex: 0,
-      attrs: this.v3 ? undefined : {
-        tabindex: 0,
-        dir: this.currentDir
-      },
-      dir: this.currentDir,
-      onKeydown: this.handleKeyDown,
-      on: this.v3 ? undefined : {
-        "keydown": this.handleKeyDown
-      }
-    }, [h("div", {
-      "class": "k-scrollview-wrap k-scrollview-animate",
-      style: "--kendo-scrollview-views:".concat(viewsCount, "; --kendo-scrollview-current:").concat(this.active, ";"),
-      ref: setRef(this, 'wrapElement')
-    }, [allContent]), h("div", {
-      "class": "k-scrollview-elements"
-    }, [arrows && [this.displayLeftArrow && h("span", {
-      "class": "k-scrollview-prev",
-      "aria-label": "previous",
-      attrs: this.v3 ? undefined : {
-        "aria-label": "previous"
-      },
-      onClick: this.handlePrevClick,
-      on: this.v3 ? undefined : {
-        "click": this.handlePrevClick
-      }
-    }, [h(Icon, {
-      name: this.isRtl ? 'chevron-right' : 'chevron-left',
-      attrs: this.v3 ? undefined : {
-        name: this.isRtl ? 'chevron-right' : 'chevron-left',
-        icon: this.isRtl ? chevronRightIcon : chevronLeftIcon,
-        size: 'xxxlarge'
-      },
-      icon: this.isRtl ? chevronRightIcon : chevronLeftIcon,
-      size: 'xxxlarge'
-    })]), this.displayRightArrow && h("span", {
-      "class": "k-scrollview-next",
-      "aria-label": "next",
-      attrs: this.v3 ? undefined : {
-        "aria-label": "next"
-      },
-      onClick: this.handleNextClick,
-      on: this.v3 ? undefined : {
-        "click": this.handleNextClick
-      }
-    }, [h(Icon, {
-      name: this.isRtl ? 'chevron-left' : 'chevron-right',
-      attrs: this.v3 ? undefined : {
-        name: this.isRtl ? 'chevron-left' : 'chevron-right',
-        icon: this.isRtl ? chevronLeftIcon : chevronRightIcon,
-        size: 'xxxlarge'
-      },
-      icon: this.isRtl ? chevronLeftIcon : chevronRightIcon,
-      size: 'xxxlarge'
-    })])], pageable && h("div", {
-      "class": "k-scrollview-nav-wrap"
-    }, [h("ul", {
-      "class": "k-scrollview-nav"
-    }, [this.dataItems.map(function (_, index) {
-      var _this = this;
-      return h("li", {
-        "class": classNames('k-link', {
-          'k-primary': this.active === index + 1
-        }),
-        key: index + 1,
-        onClick: function onClick() {
-          return _this.setActive(index + 1);
-        },
-        on: this.v3 ? undefined : {
-          "click": function onClick() {
-            return _this.setActive(index + 1);
-          }
-        }
-      });
-    }, this)])])])]);
-  },
-  methods: {
-    runAutomaticChange: function runAutomaticChange() {
-      if (this.automaticViewChange) {
-        this.resetTimeout();
-        var that_1 = this;
-        var prevIndex_1 = this.active;
-        this.timeoutRef = setTimeout(function () {
-          that_1.setActive(prevIndex_1 === that_1.dataItems.length ? that_1.endless ? 1 : prevIndex_1 : prevIndex_1 + 1);
-        }, this.automaticViewChangeInterval);
-      }
-    },
-    resetTimeout: function resetTimeout() {
-      if (this.timeoutRef) {
-        clearTimeout(this.timeoutRef);
-      }
-    },
-    setActive: function setActive(value) {
-      this.active = value;
-    },
-    focusElement: function focusElement() {
-      if (this.$el) {
-        this.$el.focus();
-      }
-    },
-    prev: function prev() {
-      if (!this.endless) {
-        if (this.active > 1) {
-          this.setActive(this.active - 1);
-        }
-      } else {
-        this.active > 1 ? this.setActive(this.active - 1) : this.setActive(this.dataItems.length);
-      }
-    },
-    next: function next() {
-      if (!this.endless) {
-        if (this.active < this.dataItems.length) {
-          this.setActive(this.active + 1);
-        }
-      } else {
-        this.active < this.dataItems.length ? this.setActive(this.active + 1) : this.setActive(1);
-      }
-    },
-    handlePrevClick: function handlePrevClick() {
-      if (!this.isRtl) {
-        this.prev();
-      } else {
-        this.next();
-      }
-    },
-    handleNextClick: function handleNextClick() {
-      if (!this.isRtl) {
-        this.next();
-      } else {
-        this.prev();
-      }
-    },
-    handleKeyDown: function handleKeyDown(event) {
-      switch (event.keyCode) {
-        case Keys.left:
-          event.preventDefault();
-          if (!this.isRtl) {
-            this.prev();
-          } else {
-            this.next();
-          }
-          break;
-        case Keys.right:
-          event.preventDefault();
-          if (!this.isRtl) {
-            this.next();
-          } else {
-            this.prev();
-          }
-          break;
-        default:
-          break;
-      }
-    }
-  }
-};
-/**
- *
- * Represents the [Kendo UI for Vue Native ScrollView component]({% slug overview_scrollview %}).
- *
- *  ```jsx
- *  <template>
- *    <div>
- *      <ScrollView
- *        :style="{
- *          width: '512px',
- *          height: '384px',
- *        }"
- *        :data-items="items"
- *        :content="'content'"
- *      >
- *        <template v-slot:content="{ props }">
- *          <div class="image-with-text">
- *            <img
- *              :src="props.item.url"
- *              :alt="`Photo ${props.item.position}`"
- *              :style="{
- *                width: '512px',
- *                height: '384px',
- *              }"
- *              :draggable="false"
- *            />
- *          </div>
- *        </template>
- *      </ScrollView>
- *    </div>
- *  </template>
- *
- *  <script>
- *  import { ScrollView } from '@progress/kendo-vue-scrollview';
- *
- *  export default {
- *    components: {
- *      ScrollView,
- *    },
- *    data() {
- *      return {
- *        items: [
- *          {
- *            url: 'https://www.telerik.com/kendo-vue-ui/components/layout/assets/card/kukeri.jpg',
- *          },
- *          {
- *            url: 'https://www.telerik.com/kendo-vue-ui/components/layout/assets/card/martenitsa.jpg',
- *          },
- *          {
- *            url: 'https://www.telerik.com/kendo-vue-ui/components/layout/assets/card/rose_festival.jpg',
- *          },
- *        ],
- *      };
- *    },
- *  };
- *  </script>
- *  ```
- */
-var ScrollView = ScrollViewVue2;
-export { ScrollView, ScrollViewVue2 };

package/dist/esm/ScrollViewProps.d.ts

@@ -1,54 +0,0 @@
-/**
- * Represents the props of the [Kendo UI for Vue ScrollView component]({% slug overview_scrollview %}).
- */
-export interface ScrollViewProps {
-    /**
-     * Represents the current active view ([see example]({% slug activeview_scrollview %})). Defaults to `1`.
-     */
-    activeView?: number;
-    /**
-     * Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})). Defaults to `true`.
-     */
-    arrows?: boolean;
-    /**
-     * Allows the ScrollView to switch the next page automatically after a short delay ([see example]({% slug automatic_scrolling_scrollview %})).
-     * Defaults to `true`.
-     */
-    automaticViewChange?: boolean;
-    /**
-     * Defines the automatic page change delay in milliseconds ([see example]({% slug automatic_scrolling_scrollview %})).
-     * Defaults to `5000`.
-     */
-    automaticViewChangeInterval?: number;
-    /**
-     * Content Template for the ScrollView items.
-     */
-    content?: any;
-    /**
-     * An array of the items that are passed to the ScrollView component.
-     */
-    dataItems?: any[];
-    /**
-     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
-     */
-    dir?: string;
-    /**
-     * Toggles the endless scrolling mode in which the data items are endlessly looped
-     * ([see example]({% slug endlessscrolling_scrollview %})). Defaults to `false`.
-     */
-    endless?: boolean;
-    /**
-     * Toggles the built-in pager ([see example]({% slug paging_scrollview %})). Defaults to `true`.
-     */
-    pageable?: boolean;
-    /**
-     * Sets the pager overlay ([see example]({% slug paging_scrollview %})).
-     *
-     *  * The possible values are:
-     * * `none`(Default) — No overlay is set.
-     * * `dark` — Dark overlay is set.
-     * * `light` — Light overlay is set.
-     *
-     */
-    pagerOverlay?: 'dark' | 'light' | 'none' | string;
-}

package/dist/esm/ScrollViewProps.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/additionalTypes.ts

@@ -1,21 +0,0 @@
-// @ts-ignore
-import { DefineComponent } from 'vue';
-// @ts-ignore
-import * as Vue from 'vue';
-
-/**
- * @hidden
- */
-// @ts-ignore
-type Vue2type = Vue.default;
-
-/**
- * @hidden
- */
-// @ts-ignore
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
-/**
- * @hidden
- */
-// @ts-ignore
-export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };

package/dist/esm/main.d.ts

@@ -1,2 +0,0 @@
-export * from './ScrollView';
-export * from './ScrollViewProps';

package/dist/esm/main.js

@@ -1,2 +0,0 @@
-export * from './ScrollView.js';
-export * from './ScrollViewProps.js';

package/dist/esm/package-metadata.d.ts

@@ -1,5 +0,0 @@
-import { PackageMetadata } from '@progress/kendo-licensing';
-/**
- * @hidden
- */
-export declare const packageMetadata: PackageMetadata;

package/dist/esm/package-metadata.js

@@ -1,11 +0,0 @@
-/**
- * @hidden
- */
-export var packageMetadata = {
-    name: '@progress/kendo-vue-scrollview',
-    productName: 'Kendo UI for Vue',
-    productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1728906087,
-    version: '',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
-};

package/dist/esm/package.json

@@ -1,3 +0,0 @@
-{
-                    "type": "module"
-                 }

package/dist/npm/ScrollView.d.ts

@@ -1,115 +0,0 @@
-import { DefineComponent } from './additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
-declare type DefaultData<V> = object | ((this: V) => {});
-declare type DefaultMethods<V> = {
-    [key: string]: (this: V, ...args: any[]) => any;
-};
-import { ScrollViewProps } from './ScrollViewProps';
-/**
- * @hidden
- */
-export interface ScrollViewHandle {
-    /**
-     * The ScrollView element.
-     */
-    element: HTMLDivElement | null;
-    /**
-     * Focus the ScrollView.
-     */
-    focus: () => void;
-}
-/**
- * @hidden
- */
-export interface ScrollViewState {
-    timeoutRef: any;
-}
-/**
- * @hidden
- */
-export interface ScrollViewComputed {
-    [key: string]: any;
-    scrollViewClasses: object;
-}
-/**
- * @hidden
- */
-export interface ScrollViewMethods {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface ScrollViewData {
-    active: number;
-    currentDir?: string;
-}
-/**
- * @hidden
- */
-export interface ScrollViewAll extends Vue, ScrollViewMethods, ScrollViewData, ScrollViewComputed, ScrollViewState {
-}
-/**
- * @hidden
- */
-declare let ScrollViewVue2: ComponentOptions<ScrollViewAll, DefaultData<ScrollViewData>, DefaultMethods<ScrollViewAll>, ScrollViewComputed, RecordPropsDefinition<ScrollViewProps>>;
-/**
- *
- * Represents the [Kendo UI for Vue Native ScrollView component]({% slug overview_scrollview %}).
- *
- *  ```jsx
- *  <template>
- *    <div>
- *      <ScrollView
- *        :style="{
- *          width: '512px',
- *          height: '384px',
- *        }"
- *        :data-items="items"
- *        :content="'content'"
- *      >
- *        <template v-slot:content="{ props }">
- *          <div class="image-with-text">
- *            <img
- *              :src="props.item.url"
- *              :alt="`Photo ${props.item.position}`"
- *              :style="{
- *                width: '512px',
- *                height: '384px',
- *              }"
- *              :draggable="false"
- *            />
- *          </div>
- *        </template>
- *      </ScrollView>
- *    </div>
- *  </template>
- *
- *  <script>
- *  import { ScrollView } from '@progress/kendo-vue-scrollview';
- *
- *  export default {
- *    components: {
- *      ScrollView,
- *    },
- *    data() {
- *      return {
- *        items: [
- *          {
- *            url: 'https://www.telerik.com/kendo-vue-ui/components/layout/assets/card/kukeri.jpg',
- *          },
- *          {
- *            url: 'https://www.telerik.com/kendo-vue-ui/components/layout/assets/card/martenitsa.jpg',
- *          },
- *          {
- *            url: 'https://www.telerik.com/kendo-vue-ui/components/layout/assets/card/rose_festival.jpg',
- *          },
- *        ],
- *      };
- *    },
- *  };
- *  </script>
- *  ```
- */
-declare const ScrollView: DefineComponent<ScrollViewProps, any, ScrollViewData, ScrollViewComputed, ScrollViewMethods, {}, {}, {}, string, ScrollViewProps, ScrollViewProps, {}>;
-export { ScrollView, ScrollViewVue2 };