kdutify 2.6.1 → 2.7.3

package/lib/components/KSkeletonLoader/KSkeletonLoader.js

@@ -1,19 +1,22 @@
 // Styles
-import "..\\..\\..\\src\\components\\KSkeletonLoader\\KSkeletonLoader.sass"; // Mixins
-
+import "../../../src/components/KSkeletonLoader/KSkeletonLoader.sass";
+// Mixins
 import Elevatable from '../../mixins/elevatable';
 import Measurable from '../../mixins/measurable';
-import Themeable from '../../mixins/themeable'; // Utilities
-
+import Themeable from '../../mixins/themeable';
+// Utilities
 import mixins from '../../util/mixins';
 import { getSlot } from '../../util/helpers';
 /* @kdujs/component */
-
 export default mixins(Elevatable, Measurable, Themeable).extend({
   name: 'KSkeletonLoader',
   props: {
     boilerplate: Boolean,
     loading: Boolean,
+    loadingText: {
+      type: String,
+      default: '$kdutify.loading'
+    },
     tile: Boolean,
     transition: String,
     type: String,
@@ -25,14 +28,14 @@ export default mixins(Elevatable, Measurable, Themeable).extend({
   computed: {
     attrs() {
       if (!this.isLoading) return this.$attrs;
-      return !this.boilerplate ? {
-        'aria-busy': true,
-        'aria-live': 'polite',
-        role: 'alert',
+      return {
+        'aria-busy': !this.boilerplate ? true : undefined,
+        'aria-live': !this.boilerplate ? 'polite' : undefined,
+        'aria-label': !this.boilerplate ? this.$kdutify.lang.t(this.loadingText) : undefined,
+        role: !this.boilerplate ? 'alert' : undefined,
         ...this.$attrs
-      } : {};
+      };
     },
-
     classes() {
       return {
         'k-skeleton-loader--boilerplate': this.boilerplate,
@@ -42,11 +45,9 @@ export default mixins(Elevatable, Measurable, Themeable).extend({
         ...this.elevationClasses
       };
     },
-
     isLoading() {
       return !('default' in this.$scopedSlots) || this.loading;
     },
-
     rootTypes() {
       return {
         actions: 'button@2',
@@ -82,7 +83,6 @@ export default mixins(Elevatable, Measurable, Themeable).extend({
         ...this.types
       };
     }
-
   },
   methods: {
     genBone(text, children) {
@@ -90,47 +90,43 @@ export default mixins(Elevatable, Measurable, Themeable).extend({
         staticClass: `k-skeleton-loader__${text} k-skeleton-loader__bone`
       }, children);
     },
-
     genBones(bone) {
       // e.g. 'text@3'
       const [type, length] = bone.split('@');
-
-      const generator = () => this.genStructure(type); // Generate a length array based upon
+      const generator = () => this.genStructure(type);
+      // Generate a length array based upon
       // value after @ in the bone string
-
-
       return Array.from({
         length
       }).map(generator);
     },
-
     // Fix type when this is merged
     // https://github.com/microsoft/TypeScript/pull/33050
     genStructure(type) {
       let children = [];
       type = type || this.type || '';
-      const bone = this.rootTypes[type] || ''; // End of recursion, do nothing
-
+      const bone = this.rootTypes[type] || '';
+      // End of recursion, do nothing
       /* eslint-disable-next-line no-empty, brace-style */
-
-      if (type === bone) {} // Array of values - e.g. 'heading, paragraph, text@2'
-      else if (type.indexOf(',') > -1) return this.mapBones(type); // Array of values - e.g. 'paragraph@4'
-        else if (type.indexOf('@') > -1) return this.genBones(type); // Array of values - e.g. 'card@2'
-          else if (bone.indexOf(',') > -1) children = this.mapBones(bone); // Array of values - e.g. 'list-item@2'
-            else if (bone.indexOf('@') > -1) children = this.genBones(bone); // Single value - e.g. 'card-heading'
-              else if (bone) children.push(this.genStructure(bone));
-
+      if (type === bone) {}
+      // Array of values - e.g. 'heading, paragraph, text@2'
+      else if (type.indexOf(',') > -1) return this.mapBones(type);
+      // Array of values - e.g. 'paragraph@4'
+      else if (type.indexOf('@') > -1) return this.genBones(type);
+      // Array of values - e.g. 'card@2'
+      else if (bone.indexOf(',') > -1) children = this.mapBones(bone);
+      // Array of values - e.g. 'list-item@2'
+      else if (bone.indexOf('@') > -1) children = this.genBones(bone);
+      // Single value - e.g. 'card-heading'
+      else if (bone) children.push(this.genStructure(bone));
       return [this.genBone(type, children)];
     },
-
     genSkeleton() {
       const children = [];
       if (!this.isLoading) children.push(getSlot(this));else children.push(this.genStructure());
       /* istanbul ignore else */
-
       if (!this.transition) return children;
       /* istanbul ignore next */
-
       return this.$createElement('transition', {
         props: {
           name: this.transition
@@ -145,12 +141,10 @@ export default mixins(Elevatable, Measurable, Themeable).extend({
         }
       }, children);
     },
-
     mapBones(bones) {
       // Remove spaces and return array of structures
       return bones.replace(/\s/g, '').split(',').map(this.genStructure);
     },
-
     onBeforeEnter(el) {
       this.resetStyles(el);
       if (!this.isLoading) return;
@@ -160,20 +154,16 @@ export default mixins(Elevatable, Measurable, Themeable).extend({
       };
       el.style.setProperty('transition', 'none', 'important');
     },
-
     onBeforeLeave(el) {
       el.style.setProperty('display', 'none', 'important');
     },
-
     resetStyles(el) {
       if (!el._initialStyle) return;
       el.style.display = el._initialStyle.display || '';
       el.style.transition = el._initialStyle.transition;
       delete el._initialStyle;
     }
-
   },
-
   render(h) {
     return h('div', {
       staticClass: 'k-skeleton-loader',
@@ -183,6 +173,5 @@ export default mixins(Elevatable, Measurable, Themeable).extend({
       style: this.isLoading ? this.measurableStyles : undefined
     }, [this.genSkeleton()]);
   }
-
 });
 //# sourceMappingURL=KSkeletonLoader.js.map

package/lib/components/KSkeletonLoader/KSkeletonLoader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/KSkeletonLoader/KSkeletonLoader.ts"],"names":[],"mappings":"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","sourcesContent":["// Styles\nimport './KSkeletonLoader.sass'\n\n// Mixins\nimport Elevatable from '../../mixins/elevatable'\nimport Measurable from '../../mixins/measurable'\nimport Themeable from '../../mixins/themeable'\n\n// Utilities\nimport mixins from '../../util/mixins'\n\n// Types\nimport { KNode } from 'kdu'\nimport { getSlot } from '../../util/helpers'\nimport { PropValidator } from 'kdu/types/options'\n\nexport interface HTMLSkeletonLoaderElement extends HTMLElement {\n  _initialStyle?: {\n    display: string | null\n    transition: string\n  }\n}\n\n/* @kdujs/component */\nexport default mixins(\n  Elevatable,\n  Measurable,\n  Themeable,\n).extend({\n  name: 'KSkeletonLoader',\n\n  props: {\n    boilerplate: Boolean,\n    loading: Boolean,\n    tile: Boolean,\n    transition: String,\n    type: String,\n    types: {\n      type: Object,\n      default: () => ({}),\n    } as PropValidator<Record<string, string>>,\n  },\n\n  computed: {\n    attrs (): object {\n      if (!this.isLoading) return this.$attrs\n\n      return !this.boilerplate ? {\n        'aria-busy': true,\n        'aria-live': 'polite',\n        role: 'alert',\n        ...this.$attrs,\n      } : {}\n    },\n    classes (): object {\n      return {\n        'k-skeleton-loader--boilerplate': this.boilerplate,\n        'k-skeleton-loader--is-loading': this.isLoading,\n        'k-skeleton-loader--tile': this.tile,\n        ...this.themeClasses,\n        ...this.elevationClasses,\n      }\n    },\n    isLoading (): boolean {\n      return !('default' in this.$scopedSlots) || this.loading\n    },\n    rootTypes (): Record<string, string> {\n      return {\n        actions: 'button@2',\n        article: 'heading, paragraph',\n        avatar: 'avatar',\n        button: 'button',\n        card: 'image, card-heading',\n        'card-avatar': 'image, list-item-avatar',\n        'card-heading': 'heading',\n        chip: 'chip',\n        'date-picker': 'list-item, card-heading, divider, date-picker-options, date-picker-days, actions',\n        'date-picker-options': 'text, avatar@2',\n        'date-picker-days': 'avatar@28',\n        heading: 'heading',\n        image: 'image',\n        'list-item': 'text',\n        'list-item-avatar': 'avatar, text',\n        'list-item-two-line': 'sentences',\n        'list-item-avatar-two-line': 'avatar, sentences',\n        'list-item-three-line': 'paragraph',\n        'list-item-avatar-three-line': 'avatar, paragraph',\n        paragraph: 'text@3',\n        sentences: 'text@2',\n        table: 'table-heading, table-thead, table-tbody, table-tfoot',\n        'table-heading': 'heading, text',\n        'table-thead': 'heading@6',\n        'table-tbody': 'table-row-divider@6',\n        'table-row-divider': 'table-row, divider',\n        'table-row': 'table-cell@6',\n        'table-cell': 'text',\n        'table-tfoot': 'text@2, avatar@2',\n        text: 'text',\n        ...this.types,\n      }\n    },\n  },\n\n  methods: {\n    genBone (text: string, children: KNode[]) {\n      return this.$createElement('div', {\n        staticClass: `k-skeleton-loader__${text} k-skeleton-loader__bone`,\n      }, children)\n    },\n    genBones (bone: string): KNode[] {\n      // e.g. 'text@3'\n      const [type, length] = bone.split('@') as [string, number]\n      const generator = () => this.genStructure(type)\n\n      // Generate a length array based upon\n      // value after @ in the bone string\n      return Array.from({ length }).map(generator)\n    },\n    // Fix type when this is merged\n    // https://github.com/microsoft/TypeScript/pull/33050\n    genStructure (type?: string): any {\n      let children = []\n      type = type || this.type || ''\n      const bone = this.rootTypes[type] || ''\n\n      // End of recursion, do nothing\n      /* eslint-disable-next-line no-empty, brace-style */\n      if (type === bone) {}\n      // Array of values - e.g. 'heading, paragraph, text@2'\n      else if (type.indexOf(',') > -1) return this.mapBones(type)\n      // Array of values - e.g. 'paragraph@4'\n      else if (type.indexOf('@') > -1) return this.genBones(type)\n      // Array of values - e.g. 'card@2'\n      else if (bone.indexOf(',') > -1) children = this.mapBones(bone)\n      // Array of values - e.g. 'list-item@2'\n      else if (bone.indexOf('@') > -1) children = this.genBones(bone)\n      // Single value - e.g. 'card-heading'\n      else if (bone) children.push(this.genStructure(bone))\n\n      return [this.genBone(type, children)]\n    },\n    genSkeleton () {\n      const children = []\n\n      if (!this.isLoading) children.push(getSlot(this))\n      else children.push(this.genStructure())\n\n      /* istanbul ignore else */\n      if (!this.transition) return children\n\n      /* istanbul ignore next */\n      return this.$createElement('transition', {\n        props: {\n          name: this.transition,\n        },\n        // Only show transition when\n        // content has been loaded\n        on: {\n          afterEnter: this.resetStyles,\n          beforeEnter: this.onBeforeEnter,\n          beforeLeave: this.onBeforeLeave,\n          leaveCancelled: this.resetStyles,\n        },\n      }, children)\n    },\n    mapBones (bones: string) {\n      // Remove spaces and return array of structures\n      return bones.replace(/\\s/g, '').split(',').map(this.genStructure)\n    },\n    onBeforeEnter (el: HTMLSkeletonLoaderElement) {\n      this.resetStyles(el)\n\n      if (!this.isLoading) return\n\n      el._initialStyle = {\n        display: el.style.display,\n        transition: el.style.transition,\n      }\n\n      el.style.setProperty('transition', 'none', 'important')\n    },\n    onBeforeLeave (el: HTMLSkeletonLoaderElement) {\n      el.style.setProperty('display', 'none', 'important')\n    },\n    resetStyles (el: HTMLSkeletonLoaderElement) {\n      if (!el._initialStyle) return\n\n      el.style.display = el._initialStyle.display || ''\n      el.style.transition = el._initialStyle.transition\n\n      delete el._initialStyle\n    },\n  },\n\n  render (h): KNode {\n    return h('div', {\n      staticClass: 'k-skeleton-loader',\n      attrs: this.attrs,\n      on: this.$listeners,\n      class: this.classes,\n      style: this.isLoading ? this.measurableStyles : undefined,\n    }, [this.genSkeleton()])\n  },\n})\n"],"sourceRoot":"","file":"KSkeletonLoader.js"}
+{"version":3,"sources":["../../../src/components/KSkeletonLoader/KSkeletonLoader.ts"],"names":[],"mappings":"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","sourcesContent":["// Styles\nimport './KSkeletonLoader.sass'\n\n// Mixins\nimport Elevatable from '../../mixins/elevatable'\nimport Measurable from '../../mixins/measurable'\nimport Themeable from '../../mixins/themeable'\n\n// Utilities\nimport mixins from '../../util/mixins'\n\n// Types\nimport { KNode } from 'kdu'\nimport { getSlot } from '../../util/helpers'\nimport { PropValidator } from 'kdu/types/options'\n\nexport interface HTMLSkeletonLoaderElement extends HTMLElement {\n  _initialStyle?: {\n    display: string | null\n    transition: string\n  }\n}\n\n/* @kdujs/component */\nexport default mixins(\n  Elevatable,\n  Measurable,\n  Themeable,\n).extend({\n  name: 'KSkeletonLoader',\n\n  props: {\n    boilerplate: Boolean,\n    loading: Boolean,\n    loadingText: {\n      type: String,\n      default: '$kdutify.loading',\n    },\n    tile: Boolean,\n    transition: String,\n    type: String,\n    types: {\n      type: Object,\n      default: () => ({}),\n    } as PropValidator<Record<string, string>>,\n  },\n\n  computed: {\n    attrs (): object {\n      if (!this.isLoading) return this.$attrs\n\n      return {\n        'aria-busy': !this.boilerplate ? true : undefined,\n        'aria-live': !this.boilerplate ? 'polite' : undefined,\n        'aria-label': !this.boilerplate ? this.$kdutify.lang.t(this.loadingText) : undefined,\n        role: !this.boilerplate ? 'alert' : undefined,\n        ...this.$attrs,\n      }\n    },\n    classes (): object {\n      return {\n        'k-skeleton-loader--boilerplate': this.boilerplate,\n        'k-skeleton-loader--is-loading': this.isLoading,\n        'k-skeleton-loader--tile': this.tile,\n        ...this.themeClasses,\n        ...this.elevationClasses,\n      }\n    },\n    isLoading (): boolean {\n      return !('default' in this.$scopedSlots) || this.loading\n    },\n    rootTypes (): Record<string, string> {\n      return {\n        actions: 'button@2',\n        article: 'heading, paragraph',\n        avatar: 'avatar',\n        button: 'button',\n        card: 'image, card-heading',\n        'card-avatar': 'image, list-item-avatar',\n        'card-heading': 'heading',\n        chip: 'chip',\n        'date-picker': 'list-item, card-heading, divider, date-picker-options, date-picker-days, actions',\n        'date-picker-options': 'text, avatar@2',\n        'date-picker-days': 'avatar@28',\n        heading: 'heading',\n        image: 'image',\n        'list-item': 'text',\n        'list-item-avatar': 'avatar, text',\n        'list-item-two-line': 'sentences',\n        'list-item-avatar-two-line': 'avatar, sentences',\n        'list-item-three-line': 'paragraph',\n        'list-item-avatar-three-line': 'avatar, paragraph',\n        paragraph: 'text@3',\n        sentences: 'text@2',\n        table: 'table-heading, table-thead, table-tbody, table-tfoot',\n        'table-heading': 'heading, text',\n        'table-thead': 'heading@6',\n        'table-tbody': 'table-row-divider@6',\n        'table-row-divider': 'table-row, divider',\n        'table-row': 'table-cell@6',\n        'table-cell': 'text',\n        'table-tfoot': 'text@2, avatar@2',\n        text: 'text',\n        ...this.types,\n      }\n    },\n  },\n\n  methods: {\n    genBone (text: string, children: KNode[]) {\n      return this.$createElement('div', {\n        staticClass: `k-skeleton-loader__${text} k-skeleton-loader__bone`,\n      }, children)\n    },\n    genBones (bone: string): KNode[] {\n      // e.g. 'text@3'\n      const [type, length] = bone.split('@') as [string, number]\n      const generator = () => this.genStructure(type)\n\n      // Generate a length array based upon\n      // value after @ in the bone string\n      return Array.from({ length }).map(generator)\n    },\n    // Fix type when this is merged\n    // https://github.com/microsoft/TypeScript/pull/33050\n    genStructure (type?: string): any {\n      let children = []\n      type = type || this.type || ''\n      const bone = this.rootTypes[type] || ''\n\n      // End of recursion, do nothing\n      /* eslint-disable-next-line no-empty, brace-style */\n      if (type === bone) {}\n      // Array of values - e.g. 'heading, paragraph, text@2'\n      else if (type.indexOf(',') > -1) return this.mapBones(type)\n      // Array of values - e.g. 'paragraph@4'\n      else if (type.indexOf('@') > -1) return this.genBones(type)\n      // Array of values - e.g. 'card@2'\n      else if (bone.indexOf(',') > -1) children = this.mapBones(bone)\n      // Array of values - e.g. 'list-item@2'\n      else if (bone.indexOf('@') > -1) children = this.genBones(bone)\n      // Single value - e.g. 'card-heading'\n      else if (bone) children.push(this.genStructure(bone))\n\n      return [this.genBone(type, children)]\n    },\n    genSkeleton () {\n      const children = []\n\n      if (!this.isLoading) children.push(getSlot(this))\n      else children.push(this.genStructure())\n\n      /* istanbul ignore else */\n      if (!this.transition) return children\n\n      /* istanbul ignore next */\n      return this.$createElement('transition', {\n        props: {\n          name: this.transition,\n        },\n        // Only show transition when\n        // content has been loaded\n        on: {\n          afterEnter: this.resetStyles,\n          beforeEnter: this.onBeforeEnter,\n          beforeLeave: this.onBeforeLeave,\n          leaveCancelled: this.resetStyles,\n        },\n      }, children)\n    },\n    mapBones (bones: string) {\n      // Remove spaces and return array of structures\n      return bones.replace(/\\s/g, '').split(',').map(this.genStructure)\n    },\n    onBeforeEnter (el: HTMLSkeletonLoaderElement) {\n      this.resetStyles(el)\n\n      if (!this.isLoading) return\n\n      el._initialStyle = {\n        display: el.style.display,\n        transition: el.style.transition,\n      }\n\n      el.style.setProperty('transition', 'none', 'important')\n    },\n    onBeforeLeave (el: HTMLSkeletonLoaderElement) {\n      el.style.setProperty('display', 'none', 'important')\n    },\n    resetStyles (el: HTMLSkeletonLoaderElement) {\n      if (!el._initialStyle) return\n\n      el.style.display = el._initialStyle.display || ''\n      el.style.transition = el._initialStyle.transition\n\n      delete el._initialStyle\n    },\n  },\n\n  render (h): KNode {\n    return h('div', {\n      staticClass: 'k-skeleton-loader',\n      attrs: this.attrs,\n      on: this.$listeners,\n      class: this.classes,\n      style: this.isLoading ? this.measurableStyles : undefined,\n    }, [this.genSkeleton()])\n  },\n})\n"],"sourceRoot":"","file":"KSkeletonLoader.js"}

package/lib/components/KSkeletonLoader/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/KSkeletonLoader/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAP,MAA4B,mBAA5B;AAEA,SAAS,eAAT;AACA,eAAe,eAAf","sourcesContent":["import KSkeletonLoader from './KSkeletonLoader'\n\nexport { KSkeletonLoader }\nexport default KSkeletonLoader\n"],"sourceRoot":"","file":"index.js"}
+{"version":3,"sources":["../../../src/components/KSkeletonLoader/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,mBAAmB;AAE/C,SAAS,eAAe;AACxB,eAAe,eAAe","sourcesContent":["import KSkeletonLoader from './KSkeletonLoader'\n\nexport { KSkeletonLoader }\nexport default KSkeletonLoader\n"],"sourceRoot":"","file":"index.js"}

package/lib/components/KSlideGroup/KSlideGroup.js

@@ -1,43 +1,37 @@
 // Styles
-import "..\\..\\..\\src\\components\\KSlideGroup\\KSlideGroup.sass"; // Components
-
+import "../../../src/components/KSlideGroup/KSlideGroup.sass";
+// Components
 import KIcon from '../KIcon';
-import { KFadeTransition } from '../transitions'; // Extensions
-
-import { BaseItemGroup } from '../KItemGroup/KItemGroup'; // Mixins
-
-import Mobile from '../../mixins/mobile'; // Directives
-
+import { KFadeTransition } from '../transitions';
+// Extensions
+import { BaseItemGroup } from '../KItemGroup/KItemGroup';
+// Mixins
+import Mobile from '../../mixins/mobile';
+// Directives
 import Resize from '../../directives/resize';
-import Touch from '../../directives/touch'; // Utilities
-
+import Touch from '../../directives/touch';
+// Utilities
 import mixins from '../../util/mixins';
-import { composedPath } from '../../util/helpers';
-
+import { composedPath, getSlot } from '../../util/helpers';
 function bias(val) {
   const c = 0.501;
   const x = Math.abs(val);
   return Math.sign(val) * (x / ((1 / c - 2) * (1 - x) + 1));
 }
-
 export function calculateUpdatedOffset(selectedElement, widths, rtl, currentScrollOffset) {
   const clientWidth = selectedElement.clientWidth;
   const offsetLeft = rtl ? widths.content - selectedElement.offsetLeft - clientWidth : selectedElement.offsetLeft;
-
   if (rtl) {
     currentScrollOffset = -currentScrollOffset;
   }
-
   const totalWidth = widths.wrapper + currentScrollOffset;
   const itemOffset = clientWidth + offsetLeft;
   const additionalOffset = clientWidth * 0.4;
-
   if (offsetLeft <= currentScrollOffset) {
     currentScrollOffset = Math.max(offsetLeft - additionalOffset, 0);
   } else if (totalWidth <= itemOffset) {
     currentScrollOffset = Math.min(currentScrollOffset - (totalWidth - itemOffset - additionalOffset), widths.content - widths.wrapper);
   }
-
   return rtl ? -currentScrollOffset : currentScrollOffset;
 }
 export function calculateCenteredOffset(selectedElement, widths, rtl) {
@@ -45,7 +39,6 @@ export function calculateCenteredOffset(selectedElement, widths, rtl) {
     offsetLeft,
     clientWidth
   } = selectedElement;
-
   if (rtl) {
     const offsetCentered = widths.content - offsetLeft - clientWidth / 2 - widths.wrapper / 2;
     return -Math.min(widths.content - widths.wrapper, Math.max(0, offsetCentered));
@@ -76,11 +69,10 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
     },
     showArrows: {
       type: [Boolean, String],
-      validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
+      validator: v => typeof v === 'boolean' || ['always', 'never', 'desktop', 'mobile'].includes(v)
     }
   },
   data: () => ({
-    internalItemsLength: 0,
     isOverflowing: false,
     resizeTimeout: 0,
     startX: 0,
@@ -96,64 +88,57 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
     canTouch() {
       return typeof window !== 'undefined';
     },
-
     __cachedNext() {
       return this.genTransition('next');
     },
-
     __cachedPrev() {
       return this.genTransition('prev');
     },
-
     classes() {
-      return { ...BaseItemGroup.options.computed.classes.call(this),
+      return {
+        ...BaseItemGroup.options.computed.classes.call(this),
         'k-slide-group': true,
         'k-slide-group--has-affixes': this.hasAffixes,
         'k-slide-group--is-overflowing': this.isOverflowing
       };
     },
-
     hasAffixes() {
       switch (this.showArrows) {
         // Always show arrows on desktop & mobile
         case 'always':
           return true;
         // Always show arrows on desktop
-
         case 'desktop':
           return !this.isMobile;
         // Show arrows on mobile when overflowing.
         // This matches the default 2.2 behavior
-
         case true:
           return this.isOverflowing || Math.abs(this.scrollOffset) > 0;
         // Always show on mobile
-
         case 'mobile':
           return this.isMobile || this.isOverflowing || Math.abs(this.scrollOffset) > 0;
+        // Always hide arrows
+        case 'never':
+          return false;
         // https://material.io/components/tabs#scrollable-tabs
         // Always show arrows when
         // overflowed on desktop
-
         default:
           return !this.isMobile && (this.isOverflowing || Math.abs(this.scrollOffset) > 0);
       }
     },
-
     hasNext() {
       if (!this.hasAffixes) return false;
       const {
         content,
         wrapper
-      } = this.widths; // Check one scroll ahead to know the width of right-most item
-
+      } = this.widths;
+      // Check one scroll ahead to know the width of right-most item
       return content > Math.abs(this.scrollOffset) + wrapper;
     },
-
     hasPrev() {
       return this.hasAffixes && this.scrollOffset !== 0;
     }
-
   },
   watch: {
     internalValue: 'setWidths',
@@ -161,32 +146,44 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
     // the widths of the content and wrapper
     // and need to be recalculated
     isOverflowing: 'setWidths',
-
     scrollOffset(val) {
-      const scroll = val <= 0 ? bias(-val) : val > this.widths.content - this.widths.wrapper ? -(this.widths.content - this.widths.wrapper) + bias(this.widths.content - this.widths.wrapper - val) : -val;
+      if (this.$kdutify.rtl) val = -val;
+      let scroll = val <= 0 ? bias(-val) : val > this.widths.content - this.widths.wrapper ? -(this.widths.content - this.widths.wrapper) + bias(this.widths.content - this.widths.wrapper - val) : -val;
+      if (this.$kdutify.rtl) scroll = -scroll;
       this.$refs.content.style.transform = `translateX(${scroll}px)`;
     }
-
-  },
-
-  beforeUpdate() {
-    this.internalItemsLength = (this.$children || []).length;
   },
-
-  updated() {
-    if (this.internalItemsLength === (this.$children || []).length) return;
-    this.setWidths();
+  mounted() {
+    if (typeof ResizeObserver !== 'undefined') {
+      const obs = new ResizeObserver(() => {
+        this.onResize();
+      });
+      obs.observe(this.$el);
+      obs.observe(this.$refs.content);
+      this.$on('hook:destroyed', () => {
+        obs.disconnect();
+      });
+    } else {
+      let itemsLength = 0;
+      this.$on('hook:beforeUpdate', () => {
+        var _a;
+        itemsLength = (((_a = this.$refs.content) === null || _a === void 0 ? void 0 : _a.children) || []).length;
+      });
+      this.$on('hook:updated', () => {
+        var _a;
+        if (itemsLength === (((_a = this.$refs.content) === null || _a === void 0 ? void 0 : _a.children) || []).length) return;
+        this.setWidths();
+      });
+    }
   },
-
   methods: {
     onScroll() {
       this.$refs.wrapper.scrollLeft = 0;
     },
-
     onFocusin(e) {
-      if (!this.isOverflowing) return; // Focused element is likely to be the root of an item, so a
+      if (!this.isOverflowing) return;
+      // Focused element is likely to be the root of an item, so a
       // breadth-first search will probably find it in the first iteration
-
       for (const el of composedPath(e)) {
         for (const vm of this.items) {
           if (vm.$el === el) {
@@ -196,10 +193,9 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
         }
       }
     },
-
     // Always generate next for scrollable hint
     genNext() {
-      const slot = this.$scopedSlots.next ? this.$scopedSlots.next({}) : this.$slots.next || this.__cachedNext;
+      const slot = this.$scopedSlots.next ? this.$scopedSlots.next({}) : getSlot(this, 'next') || this.__cachedNext;
       return this.$createElement('div', {
         staticClass: 'k-slide-group__next',
         class: {
@@ -211,7 +207,6 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
         key: 'next'
       }, [slot]);
     },
-
     genContent() {
       return this.$createElement('div', {
         staticClass: 'k-slide-group__content',
@@ -219,9 +214,8 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
         on: {
           focusin: this.onFocusin
         }
-      }, this.$slots.default);
+      }, getSlot(this));
     },
-
     genData() {
       return {
         class: this.classes,
@@ -231,16 +225,13 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
         }]
       };
     },
-
     genIcon(location) {
       let icon = location;
-
       if (this.$kdutify.rtl && location === 'prev') {
         icon = 'next';
       } else if (this.$kdutify.rtl && location === 'next') {
         icon = 'prev';
       }
-
       const upperLocation = `${location[0].toUpperCase()}${location.slice(1)}`;
       const hasAffix = this[`has${upperLocation}`];
       if (!this.showArrows && !hasAffix) return null;
@@ -250,10 +241,9 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
         }
       }, this[`${icon}Icon`]);
     },
-
     // Always generate prev for scrollable hint
     genPrev() {
-      const slot = this.$scopedSlots.prev ? this.$scopedSlots.prev({}) : this.$slots.prev || this.__cachedPrev;
+      const slot = this.$scopedSlots.prev ? this.$scopedSlots.prev({}) : getSlot(this, 'prev') || this.__cachedPrev;
       return this.$createElement('div', {
         staticClass: 'k-slide-group__prev',
         class: {
@@ -265,11 +255,9 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
         key: 'prev'
       }, [slot]);
     },
-
     genTransition(location) {
       return this.$createElement(KFadeTransition, [this.genIcon(location)]);
     },
-
     genWrapper() {
       return this.$createElement('div', {
         staticClass: 'k-slide-group__wrapper',
@@ -287,24 +275,20 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
         }
       }, [this.genContent()]);
     },
-
     calculateNewOffset(direction, widths, rtl, currentScrollOffset) {
       const sign = rtl ? -1 : 1;
       const newAbosluteOffset = sign * currentScrollOffset + (direction === 'prev' ? -1 : 1) * widths.wrapper;
       return sign * Math.max(Math.min(newAbosluteOffset, widths.content - widths.wrapper), 0);
     },
-
     onAffixClick(location) {
       this.$emit(`click:${location}`);
       this.scrollTo(location);
     },
-
     onResize() {
       /* istanbul ignore next */
       if (this._isDestroyed) return;
       this.setWidths();
     },
-
     onTouchStart(e) {
       const {
         content
@@ -313,10 +297,8 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
       content.style.setProperty('transition', 'none');
       content.style.setProperty('willChange', 'transform');
     },
-
     onTouchMove(e) {
       if (!this.canTouch) return;
-
       if (!this.isSwiping) {
         // only calculate disableSwipeHorizontal during the first onTouchMove invoke
         // in order to ensure disableSwipeHorizontal value is consistent between onTouchStart and onTouchEnd
@@ -325,15 +307,13 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
         this.isSwipingHorizontal = Math.abs(diffX) > Math.abs(diffY);
         this.isSwiping = true;
       }
-
       if (this.isSwipingHorizontal) {
         // sliding horizontally
-        this.scrollOffset = this.startX - e.touchmoveX; // temporarily disable window vertical scrolling
-
+        this.scrollOffset = this.startX - e.touchmoveX;
+        // temporarily disable window vertical scrolling
         document.documentElement.style.overflowY = 'hidden';
       }
     },
-
     onTouchEnd() {
       if (!this.canTouch) return;
       const {
@@ -343,7 +323,6 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
       const maxScrollOffset = content.clientWidth - wrapper.clientWidth;
       content.style.setProperty('transition', null);
       content.style.setProperty('willChange', null);
-
       if (this.$kdutify.rtl) {
         /* istanbul ignore else */
         if (this.scrollOffset > 0 || !this.isOverflowing) {
@@ -359,33 +338,25 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
           this.scrollOffset = maxScrollOffset;
         }
       }
-
-      this.isSwiping = false; // rollback whole page scrolling to default
-
+      this.isSwiping = false;
+      // rollback whole page scrolling to default
       document.documentElement.style.removeProperty('overflow-y');
     },
-
     overflowCheck(e, fn) {
       e.stopPropagation();
       this.isOverflowing && fn(e);
     },
-
-    scrollIntoView
-    /* istanbul ignore next */
-    () {
+    scrollIntoView /* istanbul ignore next */() {
       if (!this.selectedItem && this.items.length) {
         const lastItemPosition = this.items[this.items.length - 1].$el.getBoundingClientRect();
         const wrapperPosition = this.$refs.wrapper.getBoundingClientRect();
-
         if (this.$kdutify.rtl && wrapperPosition.right < lastItemPosition.right || !this.$kdutify.rtl && wrapperPosition.left > lastItemPosition.left) {
           this.scrollTo('prev');
         }
       }
-
       if (!this.selectedItem) {
         return;
       }
-
       if (this.selectedIndex === 0 || !this.centerActive && !this.isOverflowing) {
         this.scrollOffset = 0;
       } else if (this.centerActive) {
@@ -394,21 +365,16 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
         this.scrollOffset = calculateUpdatedOffset(this.selectedItem.$el, this.widths, this.$kdutify.rtl, this.scrollOffset);
       }
     },
-
-    scrollTo
-    /* istanbul ignore next */
-    (location) {
+    scrollTo /* istanbul ignore next */(location) {
       this.scrollOffset = this.calculateNewOffset(location, {
         // Force reflow
         content: this.$refs.content ? this.$refs.content.clientWidth : 0,
         wrapper: this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0
       }, this.$kdutify.rtl, this.scrollOffset);
     },
-
-    setWidths
-    /* istanbul ignore next */
-    () {
+    setWidths() {
       window.requestAnimationFrame(() => {
+        if (this._isDestroyed) return;
         const {
           content,
           wrapper
@@ -416,29 +382,24 @@ export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
         this.widths = {
           content: content ? content.clientWidth : 0,
           wrapper: wrapper ? wrapper.clientWidth : 0
-        }; // We add +1 to the wrappers width to prevent an issue where the `clientWidth`
+        };
+        // We add +1 to the wrappers width to prevent an issue where the `clientWidth`
         // gets calculated wrongly by the browser if using a different zoom-level.
-
         this.isOverflowing = this.widths.wrapper + 1 < this.widths.content;
         this.scrollIntoView();
       });
     }
-
   },
-
   render(h) {
     return h('div', this.genData(), [this.genPrev(), this.genWrapper(), this.genNext()]);
   }
-
 });
 export default BaseSlideGroup.extend({
   name: 'k-slide-group',
-
   provide() {
     return {
       slideGroup: this
     };
   }
-
 });
 //# sourceMappingURL=KSlideGroup.js.map