kdutify 2.6.1 → 2.7.3

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, {

package/src/components/KStepper/KStepperStep.ts

@@ -10,6 +10,7 @@ import ripple from '../../directives/ripple'
 
 // Utilities
 import mixins from '../../util/mixins'
+import { getSlot, keyCodes } from '../../util/helpers'
 
 // Types
 import { KNode } from 'kdu'
@@ -90,7 +91,7 @@ export default baseMixins.extend<options>().extend({
   },
 
   methods: {
-    click (e: MouseEvent) {
+    click (e: MouseEvent | KeyboardEvent) {
       e.stopPropagation()
 
       this.$emit('click', e)
@@ -105,7 +106,7 @@ export default baseMixins.extend<options>().extend({
     genLabel () {
       return this.$createElement('div', {
         staticClass: 'k-stepper__label',
-      }, this.$slots.default)
+      }, getSlot(this))
     },
     genStep () {
       const color = (!this.hasError && (this.complete || this.isActive)) ? this.color : false
@@ -131,6 +132,11 @@ export default baseMixins.extend<options>().extend({
 
       return children
     },
+    keyboardClick (e: KeyboardEvent) {
+      if (e.keyCode === keyCodes.space) {
+        this.click(e)
+      }
+    },
     toggle (step: number | string) {
       this.isActive = step.toString() === this.step.toString()
       this.isInactive = Number(step) < Number(this.step)
@@ -139,13 +145,19 @@ export default baseMixins.extend<options>().extend({
 
   render (h): KNode {
     return h('div', {
+      attrs: {
+        tabindex: this.editable ? 0 : -1,
+      },
       staticClass: 'k-stepper__step',
       class: this.classes,
       directives: [{
         name: 'ripple',
         value: this.editable,
       }],
-      on: { click: this.click },
+      on: {
+        click: this.click,
+        keydown: this.keyboardClick,
+      },
     }, [
       this.genStep(),
       this.genLabel(),

package/src/components/KSubheader/KSubheader.ts

@@ -4,6 +4,7 @@ import './KSubheader.sass'
 // Mixins
 import Themeable from '../../mixins/themeable'
 import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { KNode } from 'kdu'
@@ -27,6 +28,6 @@ export default mixins(
       },
       attrs: this.$attrs,
       on: this.$listeners,
-    }, this.$slots.default)
+    }, getSlot(this))
   },
 })

package/src/components/KSwitch/KSwitch.sass

@@ -45,6 +45,7 @@
 
   .k-input--selection-controls__input
     width: $switch-width
+    transition: opacity $primary-transition
 
   .k-input--selection-controls__ripple
     top: $switch-ripple-top
@@ -68,8 +69,8 @@
     .k-input--selection-controls__ripple
       top: $switch-ripple-dense-top
 
-  &.k-input--is-dirty
-    &.k-input--is-disabled
+  &.k-input--is-dirty.k-input--is-disabled
+    .k-input--selection-controls__input
       opacity: $switch-disabled-opacity
 
   +ltr()

package/src/components/KSwitch/KSwitch.ts

@@ -14,7 +14,7 @@ import { KFabTransition } from '../transitions'
 import KProgressCircular from '../KProgressCircular/KProgressCircular'
 
 // Helpers
-import { keyCodes } from '../../util/helpers'
+import { getSlot, keyCodes } from '../../util/helpers'
 
 // Types
 import { KNode, KNodeData } from 'kdu'
@@ -109,7 +109,7 @@ export default Selectable.extend({
       return this.$createElement(KFabTransition, {}, [
         this.loading === false
           ? null
-          : this.$slots.progress || this.$createElement(KProgressCircular, {
+          : getSlot(this, 'progress') || this.$createElement(KProgressCircular, {
             props: {
               color: (this.loading === true || this.loading === '')
                 ? (this.color || 'primary')

package/src/components/KSystemBar/KSystemBar.sass

@@ -22,6 +22,10 @@
     font-size: $system-bar-icon-font-size
     margin-right: $system-bar-icon-margin-right
 
+  .k-btn
+    .k-icon
+      margin-right: 0
+
   &--fixed, &--absolute
     left: 0
     top: 0

package/src/components/KTabs/KTab.ts

@@ -4,13 +4,16 @@ import Routable from '../../mixins/routable'
 import Themeable from '../../mixins/themeable'
 
 // Utilities
-import { keyCodes } from './../../util/helpers'
+import { getSlot, keyCodes } from './../../util/helpers'
 import mixins from '../../util/mixins'
 import { ExtractKdu } from './../../util/mixins'
 
 // Types
 import { KNode } from 'kdu/types'
 
+// Components
+import KTabsBar from '../KTabs/KTabsBar'
+
 const baseMixins = mixins(
   Routable,
   // Must be after routable
@@ -19,8 +22,11 @@ const baseMixins = mixins(
   Themeable
 )
 
+type KTabBarInstance = InstanceType<typeof KTabsBar>
+
 interface options extends ExtractKdu<typeof baseMixins> {
   $el: HTMLElement
+  tabsBar: KTabBarInstance
 }
 
 export default baseMixins.extend<options>().extend(
@@ -33,6 +39,9 @@ export default baseMixins.extend<options>().extend(
       type: [Boolean, Object],
       default: true,
     },
+    tabValue: {
+      required: false,
+    },
   },
 
   data: () => ({
@@ -49,7 +58,11 @@ export default baseMixins.extend<options>().extend(
       }
     },
     value (): any {
-      let to = this.to || this.href || ''
+      if (this.tabValue != null) return this.tabValue
+
+      let to = this.to || this.href
+
+      if (to == null) return to
 
       if (this.$router &&
         this.to === Object(this.to)
@@ -92,7 +105,7 @@ export default baseMixins.extend<options>().extend(
     },
     toggle () {
       // KItemGroup treats a change event as a click
-      if (!this.isActive) {
+      if (!this.isActive || (!this.tabsBar.mandatory && !this.to)) {
         this.$emit('change')
       }
     },
@@ -105,7 +118,7 @@ export default baseMixins.extend<options>().extend(
       ...data.attrs,
       'aria-selected': String(this.isActive),
       role: 'tab',
-      tabindex: 0,
+      tabindex: this.disabled ? -1 : 0,
     }
     data.on = {
       ...data.on,
@@ -116,6 +129,6 @@ export default baseMixins.extend<options>().extend(
       },
     }
 
-    return h(tag, data, this.$slots.default)
+    return h(tag, data, getSlot(this))
   },
 })

package/src/components/KTabs/KTabs.sass

@@ -81,7 +81,7 @@
   position: relative
   text-align: center
   text-decoration: none
-  text-transform: uppercase
+  text-transform: $tab-text-transform
   transition: none
   user-select: none
 

package/src/components/KTabs/KTabs.ts

@@ -15,7 +15,7 @@ import Themeable from '../../mixins/themeable'
 import Resize from '../../directives/resize'
 
 // Utilities
-import { convertToUnit } from '../../util/helpers'
+import { convertToUnit, getSlot } from '../../util/helpers'
 import { ExtractKdu } from './../../util/mixins'
 import mixins from '../../util/mixins'
 
@@ -141,6 +141,16 @@ export default baseMixins.extend<options>().extend({
   },
 
   mounted () {
+    if (typeof ResizeObserver !== 'undefined') {
+      const obs = new ResizeObserver(() => {
+        this.onResize()
+      })
+      obs.observe(this.$el)
+      this.$on('hook:destroyed', () => {
+        obs.disconnect()
+      })
+    }
+
     this.$nextTick(() => {
       window.setTimeout(this.callSlider, 30)
     })
@@ -258,7 +268,7 @@ export default baseMixins.extend<options>().extend({
       let slider = null
       const item = []
       const tab = []
-      const slot = this.$slots.default || []
+      const slot = getSlot(this) || []
       const length = slot.length
 
       for (let i = 0; i < length; i++) {

package/src/components/KTabs/_variables.scss

@@ -3,6 +3,7 @@
 $tab-disabled-opacity: .5 !default;
 $tab-font-size: map-deep-get($headings, 'subtitle-2', 'size') !default;
 $tab-font-weight: map-deep-get($headings, 'subtitle-2', 'weight') !default;
+$tab-text-transform: uppercase !default;
 $tab-line-height: normal !default;
 $tabs-bar-background-color: 'cards' !default;
 $tabs-bar-height: 48px !default;

package/src/components/KTextField/KTextField.sass

@@ -353,7 +353,7 @@
       margin-bottom: $text-field-details-margin-bottom
 
   &--reverse
-    input
+    input, textarea
       +ltr()
         text-align: right
 
@@ -504,6 +504,15 @@
   &.k-input--has-state > .k-input__control > .k-input__slot:before
     border-color: currentColor
 
+  .k-input__icon--clear
+    opacity: 0
+    transition: opacity $primary-transition
+
+  &.k-input--is-focused,
+  &.k-input--is-dirty:hover
+    .k-input__icon--clear
+      opacity: 1
+
   // TODO: where are the corresponding rules for LTR?
   //
   // +rtl()

package/src/components/KTextField/KTextField.ts

@@ -19,7 +19,7 @@ import ripple from '../../directives/ripple'
 
 // Utilities
 import { attachedRoot } from '../../util/dom'
-import { convertToUnit, keyCodes } from '../../util/helpers'
+import { convertToUnit, getSlot, keyCodes } from '../../util/helpers'
 import { breaking, consoleWarn } from '../../util/console'
 
 // Types
@@ -371,7 +371,7 @@ export default baseMixins.extend<options>().extend({
         },
       }
 
-      return this.$createElement(KLabel, data, this.$slots.label || this.label)
+      return this.$createElement(KLabel, data, getSlot(this, 'label') || this.label)
     },
     genLegend () {
       const width = !this.singleLine && (this.labelValue || this.isDirty) ? this.labelWidth : 0