kdutify 2.6.0 → 2.7.2

package/src/components/KPicker/KPicker.ts

@@ -7,7 +7,7 @@ import Elevatable from '../../mixins/elevatable'
 import Themeable from '../../mixins/themeable'
 
 // Helpers
-import { convertToUnit } from '../../util/helpers'
+import { convertToUnit, getSlot } from '../../util/helpers'
 
 // Types
 import { KNode } from 'kdu/types'
@@ -50,14 +50,14 @@ export default mixins(
         class: {
           'k-picker__title--landscape': this.landscape,
         },
-      }), this.$slots.title)
+      }), getSlot(this, 'title'))
     },
     genBodyTransition () {
       return this.$createElement('transition', {
         props: {
           name: this.transition,
         },
-      }, this.$slots.default)
+      }, getSlot(this))
     },
     genBody () {
       return this.$createElement('div', {
@@ -79,7 +79,7 @@ export default mixins(
         class: {
           'k-picker__actions--no-title': this.noTitle,
         },
-      }, this.$slots.actions)
+      }, getSlot(this, 'actions'))
     },
   },
 

package/src/components/KProgressCircular/KProgressCircular.ts

@@ -8,7 +8,7 @@ import intersect from '../../directives/intersect'
 import Colorable from '../../mixins/colorable'
 
 // Utils
-import { convertToUnit } from '../../util/helpers'
+import { convertToUnit, getSlot } from '../../util/helpers'
 
 // Types
 import { KNode, KNodeChildren } from 'kdu'
@@ -136,7 +136,7 @@ export default Colorable.extend({
     genInfo (): KNode {
       return this.$createElement('div', {
         staticClass: 'k-progress-circular__info',
-      }, this.$slots.default)
+      }, getSlot(this))
     },
     onObserve (entries: IntersectionObserverEntry[], observer: IntersectionObserver, isIntersecting: boolean) {
       this.isVisible = isIntersecting

package/src/components/KRadioGroup/KRadio.sass

@@ -6,10 +6,6 @@
     label
       color: map-deep-get($material, 'text', 'disabled')
 
-    .k-icon
-      // needed for helper override
-      color: map-deep-get($material, 'selection-controls', 'disabled') !important
-
 .k-radio
   align-items: center
   display: flex

package/src/components/KRadioGroup/KRadio.ts

@@ -42,7 +42,10 @@ export default baseMixins.extend<options>().extend({
   inheritAttrs: false,
 
   props: {
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null,
+    },
     id: String,
     label: String,
     name: String,
@@ -54,7 +57,10 @@ export default baseMixins.extend<options>().extend({
       type: String,
       default: '$radioOn',
     },
-    readonly: Boolean,
+    readonly: {
+      type: Boolean,
+      default: null,
+    },
     value: {
       default: null,
     },
@@ -74,6 +80,7 @@ export default baseMixins.extend<options>().extend({
       }
     },
     computedColor (): string | undefined {
+      if (this.isDisabled) return undefined
       return Selectable.options.computed.computedColor.call(this)
     },
     computedIcon (): string {
@@ -89,13 +96,13 @@ export default baseMixins.extend<options>().extend({
       return (this.radioGroup || {}).hasState
     },
     isDisabled (): boolean {
-      return this.disabled || (
+      return this.disabled ?? (
         !!this.radioGroup &&
         this.radioGroup.isDisabled
       )
     },
     isReadonly (): boolean {
-      return this.readonly || (
+      return this.readonly ?? (
         !!this.radioGroup &&
         this.radioGroup.isReadonly
       )

package/src/components/KRadioGroup/KRadioGroup.ts

@@ -6,15 +6,11 @@ import './KRadioGroup.sass'
 import KInput from '../KInput'
 import { BaseItemGroup } from '../KItemGroup/KItemGroup'
 
-// Mixins
-import Comparable from '../../mixins/comparable'
-
 // Types
 import mixins from '../../util/mixins'
 import { PropType } from 'kdu'
 
 const baseMixins = mixins(
-  Comparable,
   BaseItemGroup,
   KInput
 )

package/src/components/KResponsive/KResponsive.ts

@@ -8,6 +8,7 @@ import { KNode } from 'kdu'
 
 // Utils
 import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
 
 /* @kdujs/component */
 export default mixins(Measurable).extend({
@@ -42,7 +43,7 @@ export default mixins(Measurable).extend({
       return this.$createElement('div', {
         staticClass: 'k-responsive__content',
         class: this.contentClass,
-      }, this.$slots.default)
+      }, getSlot(this))
     },
   },
 

package/src/components/KSelect/KSelect.sass

@@ -3,7 +3,6 @@
 +theme(k-select) using ($material)
   .k-select__selections
     color: map-deep-get($material, 'text', 'primary')
-    min-height: $select-selections-min-height
 
   &.k-input--is-disabled
     .k-select__selections
@@ -64,7 +63,6 @@
     input
       flex: 1 1 // Doesn't resize on IE11 with 3rd param
       min-width: 0
-      pointer-events: none
       position: relative
 
     &:not(.k-text-field--single-line) input
@@ -119,6 +117,9 @@
     .k-select__selections
       flex-direction: row-reverse
 
+  &.k-input--is-disabled:not(.k-input--is-readonly):not(.k-autocomplete)
+    pointer-events: none
+
   &__selections
     align-items: center
     display: flex
@@ -133,6 +134,7 @@
 
     &--comma
       margin: $select-selections-margin
+      min-height: $select-selections-min-height
       overflow: hidden
       text-overflow: ellipsis
       white-space: nowrap

package/src/components/KSelect/KSelect.ts

@@ -157,7 +157,7 @@ export default baseMixins.extend<options>().extend({
     computedCounterValue (): number {
       const value = this.multiple
         ? this.selectedItems
-        : (this.getText(this.selectedItems[0]) || '').toString()
+        : (this.getText(this.selectedItems[0]) ?? '').toString()
 
       if (typeof this.counterValue === 'function') {
         return this.counterValue(value)
@@ -257,6 +257,17 @@ export default baseMixins.extend<options>().extend({
     internalValue (val) {
       this.initialValue = val
       this.setSelectedItems()
+
+      if (this.multiple) {
+        this.$nextTick(() => {
+          this.$refs.menu?.updateDimensions()
+        })
+      }
+      if (this.hideSelected) {
+        this.$nextTick(() => {
+          this.onScroll()
+        })
+      }
     },
     isMenuActive (val) {
       window.setTimeout(() => this.onMenuActiveChange(val))
@@ -325,6 +336,10 @@ export default baseMixins.extend<options>().extend({
       for (let index = 0; index < arr.length; ++index) {
         const item = arr[index]
 
+        // Do not return null values if existant (#14421)
+        if (item == null) {
+          continue
+        }
         // Do not deduplicate headers or dividers (#12517)
         if (item.header || item.divider) {
           uniqueValues.set(item, item)
@@ -509,14 +524,15 @@ export default baseMixins.extend<options>().extend({
       const props = this.$_menuProps as any
       props.activator = this.$refs['input-slot']
 
-      // Attach to root el so that
-      // menu covers prepend/append icons
-      if (
+      if ('attach' in props) void 0
+      else if (
         // TODO: make this a computed property or helper or something
         this.attach === '' || // If used as a boolean prop (<k-menu attach>)
         this.attach === true || // If bound to a boolean (<k-menu :attach="true">)
         this.attach === 'attach' // If bound as boolean prop in pug (k-menu(attach))
       ) {
+        // Attach to root el so that
+        // menu covers prepend/append icons
         props.attach = this.$el
       } else {
         props.attach = this.attach
@@ -628,7 +644,9 @@ export default baseMixins.extend<options>().extend({
       if (
         this.multiple ||
         !this.isInteractive ||
-        this.disableLookup
+        this.disableLookup ||
+        e.key.length > 1 ||
+        e.ctrlKey || e.metaKey || e.altKey
       ) return
 
       const KEYBOARD_LOOKUP_THRESHOLD = 1000 // milliseconds
@@ -640,7 +658,7 @@ export default baseMixins.extend<options>().extend({
       this.keyboardLookupLastTime = now
 
       const index = this.allItems.findIndex(item => {
-        const text = (this.getText(item) || '').toString()
+        const text = (this.getText(item) ?? '').toString()
 
         return text.toLowerCase().startsWith(this.keyboardLookupPrefix)
       })
@@ -736,7 +754,10 @@ export default baseMixins.extend<options>().extend({
     },
     onScroll () {
       if (!this.isMenuActive) {
-        requestAnimationFrame(() => (this.getContent().scrollTop = 0))
+        requestAnimationFrame(() => {
+          const content = this.getContent()
+          if (content) content.scrollTop = 0
+        })
       } else {
         if (this.lastItem > this.computedItems.length) return
 
@@ -832,20 +853,12 @@ export default baseMixins.extend<options>().extend({
           return this.returnObject ? i : this.getValue(i)
         }))
 
-        // When selecting multiple
-        // adjust menu after each
-        // selection
-        this.$nextTick(() => {
-          this.$refs.menu &&
-            (this.$refs.menu as { [key: string]: any }).updateDimensions()
-        })
-
         // There is no item to re-highlight
         // when selections are hidden
         if (this.hideSelected) {
           this.setMenuIndex(-1)
         } else {
-          const index = this.allItems.indexOf(item)
+          const index = this.computedItems.indexOf(item)
           if (~index) {
             this.$nextTick(() => this.$refs.menu.getTiles())
             setTimeout(() => this.setMenuIndex(index))

package/src/components/KSelect/KSelectList.ts

@@ -18,10 +18,7 @@ import Colorable from '../../mixins/colorable'
 import Themeable from '../../mixins/themeable'
 
 // Helpers
-import {
-  escapeHTML,
-  getPropertyFromItem,
-} from '../../util/helpers'
+import { getPropertyFromItem } from '../../util/helpers'
 
 // Types
 import mixins from '../../util/mixins'
@@ -112,17 +109,17 @@ export default mixins(Colorable, Themeable).extend({
     genFilteredText (text: string) {
       text = text || ''
 
-      if (!this.searchInput || this.noFilter) return escapeHTML(text)
+      if (!this.searchInput || this.noFilter) return text
 
       const { start, middle, end } = this.getMaskedCharacters(text)
 
-      return `${escapeHTML(start)}${this.genHighlight(middle)}${escapeHTML(end)}`
+      return [start, this.genHighlight(middle), end]
     },
     genHeader (props: { [key: string]: any }): KNode {
       return this.$createElement(KSubheader, { props }, props.header)
     },
-    genHighlight (text: string): string {
-      return `<span class="k-list-item__mask">${escapeHTML(text)}</span>`
+    genHighlight (text: string) {
+      return this.$createElement('span', { staticClass: 'k-list-item__mask' }, text)
     },
     getMaskedCharacters (text: string): {
       start: string
@@ -201,13 +198,11 @@ export default mixins(Colorable, Themeable).extend({
         : scopedSlot
     },
     genTileContent (item: any, index = 0): KNode {
-      const innerHTML = this.genFilteredText(this.getText(item))
-
-      return this.$createElement(KListItemContent,
-        [this.$createElement(KListItemTitle, {
-          domProps: { innerHTML },
-        })]
-      )
+      return this.$createElement(KListItemContent, [
+        this.$createElement(KListItemTitle, [
+          this.genFilteredText(this.getText(item)),
+        ]),
+      ])
     },
     hasItem (item: object) {
       return this.parsedItems.indexOf(this.getValue(item)) > -1
@@ -257,6 +252,11 @@ export default mixins(Colorable, Themeable).extend({
         role: 'listbox',
         tabindex: -1,
       },
+      on: {
+        mousedown: (e: Event) => {
+          e.preventDefault()
+        },
+      },
       props: { dense: this.dense },
     }, children)
   },

package/src/components/KSkeletonLoader/KSkeletonLoader.sass

@@ -209,7 +209,7 @@
     ~ .k-skeleton-loader__card-heading
       border-radius: 0
 
-    &::first-child, &::last-child
+    &:first-child, &:last-child
       border-radius: inherit
 
   &__list-item

package/src/components/KSkeletonLoader/KSkeletonLoader.ts

@@ -32,6 +32,10 @@ export default mixins(
   props: {
     boilerplate: Boolean,
     loading: Boolean,
+    loadingText: {
+      type: String,
+      default: '$kdutify.loading',
+    },
     tile: Boolean,
     transition: String,
     type: String,
@@ -45,12 +49,13 @@ export default mixins(
     attrs (): object {
       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 (): object {
       return {

package/src/components/KSlideGroup/KSlideGroup.ts

@@ -20,7 +20,7 @@ import mixins, { ExtractKdu } from '../../util/mixins'
 
 // Types
 import Kdu, { KNode } from 'kdu'
-import { composedPath } from '../../util/helpers'
+import { composedPath, getSlot } from '../../util/helpers'
 
 interface TouchEvent {
   touchstartX: number
@@ -127,9 +127,10 @@ export const BaseSlideGroup = mixins<options &
     },
     showArrows: {
       type: [Boolean, String],
-      validator: v => (
+      validator: (v: any) => (
         typeof v === 'boolean' || [
           'always',
+          'never',
           'desktop',
           'mobile',
         ].includes(v)
@@ -138,7 +139,6 @@ export const BaseSlideGroup = mixins<options &
   },
 
   data: () => ({
-    internalItemsLength: 0,
     isOverflowing: false,
     resizeTimeout: 0,
     startX: 0,
@@ -187,6 +187,9 @@ export const BaseSlideGroup = mixins<options &
           (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
@@ -216,24 +219,41 @@ export const BaseSlideGroup = mixins<options &
     // and need to be recalculated
     isOverflowing: 'setWidths',
     scrollOffset (val) {
-      const scroll =
+      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', () => {
+        itemsLength = (this.$refs.content?.children || []).length
+      })
+      this.$on('hook:updated', () => {
+        if (itemsLength === (this.$refs.content?.children || []).length) return
+        this.setWidths()
+      })
+    }
   },
 
   methods: {
@@ -263,7 +283,7 @@ export const BaseSlideGroup = mixins<options &
     genNext (): KNode | null {
       const slot = this.$scopedSlots.next
         ? this.$scopedSlots.next({})
-        : this.$slots.next || this.__cachedNext
+        : getSlot(this, 'next') || this.__cachedNext
 
       return this.$createElement('div', {
         staticClass: 'k-slide-group__next',
@@ -283,7 +303,7 @@ export const BaseSlideGroup = mixins<options &
         on: {
           focusin: this.onFocusin,
         },
-      }, this.$slots.default)
+      }, getSlot(this))
     },
     genData (): object {
       return {
@@ -321,7 +341,7 @@ export const BaseSlideGroup = mixins<options &
     genPrev (): KNode | null {
       const slot = this.$scopedSlots.prev
         ? this.$scopedSlots.prev({})
-        : this.$slots.prev || this.__cachedPrev
+        : getSlot(this, 'prev') || this.__cachedPrev
 
       return this.$createElement('div', {
         staticClass: 'k-slide-group__prev',
@@ -475,8 +495,10 @@ export const BaseSlideGroup = mixins<options &
         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 } = this.$refs
 
         this.widths = {

package/src/components/KSlider/KSlider.ts

@@ -221,16 +221,10 @@ export default mixins<options &
       handler (v: number) {
         this.internalValue = v
       },
+      immediate: true,
     },
   },
 
-  // If done in as immediate in
-  // value watcher, causes issues
-  // with kdu-test-utils
-  beforeMount () {
-    this.internalValue = this.value
-  },
-
   mounted () {
     // Without a k-app, iOS does not work with body selectors
     this.app = document.querySelector('[data-app]') ||

package/src/components/KSpeedDial/KSpeedDial.ts

@@ -13,6 +13,7 @@ import ClickOutside from '../../directives/click-outside'
 import mixins from '../../util/mixins'
 import { KNode, KNodeData } from 'kdu'
 import { Prop } from 'kdu/types/options'
+import { getSlot } from '../../util/helpers'
 
 /* @kdujs/component */
 export default mixins(Positionable, Toggleable, Transitionable).extend({
@@ -71,7 +72,7 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({
 
     if (this.isActive) {
       let btnCount = 0
-      children = (this.$slots.default || []).map((b, i) => {
+      children = (getSlot(this) || []).map((b, i) => {
         if (b.tag && typeof b.componentOptions !== 'undefined' && (b.componentOptions.Ctor.options.name === 'k-btn' || b.componentOptions.Ctor.options.name === 'k-tooltip')) {
           btnCount++
           return h('div', {
@@ -97,6 +98,6 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({
       },
     }, children)
 
-    return h('div', data, [this.$slots.activator, list])
+    return h('div', data, [getSlot(this, 'activator'), list])
   },
 })

package/src/components/KStepper/KStepper.sass

@@ -128,7 +128,7 @@
           font-size: $stepper-step-error-icon-font-size
           color: inherit
 
-      .k-stepper__label
+      .k-stepper & .k-stepper__label
         color: inherit
         text-shadow: none
         font-weight: 500
@@ -137,9 +137,8 @@
           color: inherit
 
   &__label
-    align-items: flex-start
-    display: flex
-    flex-direction: column
+    display: block
+    flex-grow: 1
     line-height: $stepper-label-line-height
 
     +ltr()
@@ -149,6 +148,7 @@
       text-align: right
 
     small
+      display: block
       font-size: $stepper-label-small-font-size
       font-weight: $stepper-label-small-font-weight
       text-shadow: none
@@ -212,14 +212,14 @@
         margin: $stepper-alt-labels-header-divider
         align-self: flex-start
 
-    kk-stepper__step
+    .k-stepper__step
       flex-direction: column
       justify-content: flex-start
       align-items: center
       flex-basis: $stepper-alt-labels-flex-basis
 
       small
-        align-self: center
+        text-align: center
 
     .k-stepper__step__step
       margin-bottom: $stepper-alt-labels-step-step-margin-bottom

package/src/components/KStepper/KStepper.ts

@@ -15,6 +15,7 @@ import Proxyable from '../../mixins/proxyable'
 // Utilities
 import mixins from '../../util/mixins'
 import { breaking } from '../../util/console'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { KNode } from 'kdu'
@@ -135,6 +136,6 @@ export default baseMixins.extend({
       staticClass: 'k-stepper',
       class: this.classes,
       style: this.styles,
-    }, this.$slots.default)
+    }, getSlot(this))
   },
 })

package/src/components/KStepper/KStepperContent.ts

@@ -8,7 +8,7 @@ import {
 import { inject as RegistrableInject } from '../../mixins/registrable'
 
 // Helpers
-import { convertToUnit } from '../../util/helpers'
+import { convertToUnit, getSlot } from '../../util/helpers'
 
 // Utilities
 import mixins from '../../util/mixins'
@@ -155,7 +155,7 @@ export default baseMixins.extend<options>().extend({
       }]
     }
 
-    const wrapper = h('div', wrapperData, [this.$slots.default])
+    const wrapper = h('div', wrapperData, getSlot(this))
     const content = h('div', contentData, [wrapper])
 
     return h(this.computedTransition, {