kdutify 2.6.0 → 2.7.2

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

package/src/components/KTextField/_mixins.sass

@@ -1,17 +1,17 @@
 @mixin prepend-append-margin-top($margin-top)
-  .K-input__prepend-outer,
-  .K-input__prepend-inner,
-  .K-input__append-inner,
-  .K-input__append-outer
+  .k-input__prepend-outer,
+  .k-input__prepend-inner,
+  .k-input__append-inner,
+  .k-input__append-outer
     margin-top: $margin-top
 
 @mixin outer-margin-top($margin-top)
-  .K-input__prepend-outer,
-  .K-input__append-outer
+  .k-input__prepend-outer,
+  .k-input__append-outer
     margin-top: $margin-top
 
 @mixin label-position($top, $translateY, $scale: .75)
-  .K-label
+  .k-label
     top: $top
 
     &--active

package/src/components/KTextarea/KTextarea.sass

@@ -1,5 +1,14 @@
 @import './_variables.scss'
 
++theme(k-textarea) using ($material)
+  &.k-text-field--solo-inverted
+    &.k-input--is-focused
+      textarea
+        color: map-deep-get($material, 'inputs', 'solo-inverted-focused-text')
+
+      textarea::placeholder
+        color: map-deep-get($material, 'inputs', 'solo-inverted-focused-placeholder')
+
 .k-textarea
   textarea
     align-self: stretch
@@ -49,6 +58,10 @@
   &.k-text-field--solo
     align-items: flex-start
 
+    .k-input__control
+      textarea
+        caret-color: auto
+
     // Essentially revert styles
     // applied by k-text-field
     .k-input__prepend-inner,
@@ -89,3 +102,12 @@
 
         +rtl()
           padding-left: $textarea-enclosed-text-slot-padding
+
+    &.k-text-field--reverse
+      .k-text-field__slot
+        .k-label
+          +ltr()
+            margin-right: -$textarea-enclosed-text-slot-margin
+
+          +rtl()
+            margin-left: -$textarea-enclosed-text-slot-margin

package/src/components/KTimePicker/KTimePicker.ts

@@ -24,6 +24,7 @@ export { SelectingTimes }
 
 type Period = 'am' | 'pm'
 type AllowFunction = (val: number) => boolean
+type ActivePicker = 'HOUR' | 'MINUTE' | 'SECOND'
 
 export default mixins(
   Picker,
@@ -33,6 +34,7 @@ export default mixins(
   name: 'k-time-picker',
 
   props: {
+    activePicker: String as PropType<ActivePicker>,
     allowedHours: [Function, Array] as PropType<AllowFunction | number[]>,
     allowedMinutes: [Function, Array] as PropType<AllowFunction | number[]>,
     allowedSeconds: [Function, Array] as PropType<AllowFunction | number[]>,
@@ -40,7 +42,7 @@ export default mixins(
     format: {
       type: String as PropType<'ampm' | '24hr'>,
       default: 'ampm',
-      validator (val) {
+      validator (val: any) {
         return ['ampm', '24hr'].includes(val)
       },
     },
@@ -177,6 +179,8 @@ export default mixins(
   },
 
   watch: {
+    activePicker: 'setPicker',
+    selecting: 'emitPicker',
     value: 'setInputData',
   },
 
@@ -197,6 +201,20 @@ export default mixins(
       const value = this.genValue()
       if (value !== null) this.$emit('input', value)
     },
+    emitPicker (value: SelectingTimes) {
+      let activePicker = 'HOUR'
+      if (value === SelectingTimes.Minute) {
+        activePicker = 'MINUTE'
+      } else if (value === SelectingTimes.Second) {
+        activePicker = 'SECOND'
+      }
+      this.$emit('update:active-picker', activePicker)
+    },
+    setPicker (picker: ActivePicker) {
+      if (picker === 'HOUR') this.selecting = SelectingTimes.Hour
+      else if (picker === 'MINUTE') this.selecting = SelectingTimes.Minute
+      else if (picker === 'SECOND' && this.useSeconds) this.selecting = SelectingTimes.Second
+    },
     setPeriod (period: Period) {
       this.period = period
       if (this.inputHour != null) {

package/src/components/KTimeline/KTimeline.sass

@@ -2,6 +2,12 @@
 @import './_variables.scss'
 @import './_mixins.sass'
 
+/**
+ * .k-timeline::before - center divider
+ * .k-card::before - arrow shadow (conflicts with active link overlay)
+ * .k-card::after - arrow
+ */
+
 // Theme
 +theme(k-timeline) using ($material)
   &::before
@@ -12,7 +18,7 @@
       background: map-get($material, 'cards')
 
     .k-card
-      &::before
+      &:not(.k-card--link)::before
         border-right-color: $shadow-key-ambient-opacity
 
 // Elements
@@ -20,7 +26,7 @@
   padding-top: $timeline-item-padding
   position: relative
 
-  &:before
+  &::before
     bottom: 0
     content: ''
     height: 100%
@@ -85,7 +91,8 @@
 // Wedge
 .k-timeline-item__body
   > .k-card:not(.k-card--flat)
-    &:before, &:after
+    &:not(.k-card--link)::before,
+    &::after
       content: ''
       position: absolute
       border-top: $timeline-wedge-size solid transparent
@@ -93,10 +100,10 @@
       border-right: $timeline-wedge-size solid black
       top: calc(50% - #{$timeline-wedge-size})
 
-    &:after
+    &::after
       border-right-color: inherit
 
-    &:before
+    &:not(.k-card--link)::before
       top: calc(50% - #{$timeline-wedge-size} + 2px)
 
 // Modifiers
@@ -106,12 +113,12 @@
 
   .k-timeline-item__body
     > .k-card
-      &:before
-        top: calc(0% + #{$timeline-wedge-size} + 2px)
-
-      &:after
+      &::after
         top: calc(0% + #{$timeline-wedge-size})
 
+      &:not(.k-card--link)::before
+        top: calc(0% + #{$timeline-wedge-size} + 2px)
+
 .k-timeline:not(.k-timeline--dense):not(.k-timeline--reverse)
   +timeline-line-align($timeline-divider-center, left, right)
 

package/src/components/KTimeline/KTimeline.ts

@@ -7,6 +7,7 @@ import mixins from '../../util/mixins'
 
 // Mixins
 import Themeable from '../../mixins/themeable'
+import { getSlot } from '../../util/helpers'
 
 export default mixins(
   Themeable
@@ -39,6 +40,6 @@ export default mixins(
     return h('div', {
       staticClass: 'k-timeline',
       class: this.classes,
-    }, this.$slots.default)
+    }, getSlot(this))
   },
 })

package/src/components/KTimeline/KTimelineItem.ts

@@ -9,6 +9,7 @@ import KIcon from '../KIcon'
 // Mixins
 import Themeable from '../../mixins/themeable'
 import Colorable from '../../mixins/colorable'
+import { getSlot } from '../../util/helpers'
 
 const baseMixins = mixins(
   Colorable,
@@ -52,14 +53,10 @@ export default baseMixins.extend<options>().extend({
     genBody () {
       return this.$createElement('div', {
         staticClass: 'k-timeline-item__body',
-      }, this.$slots.default)
+      }, getSlot(this))
     },
     genIcon (): KNode | KNode[] {
-      if (this.$slots.icon) {
-        return this.$slots.icon
-      }
-
-      return this.$createElement(KIcon, {
+      return getSlot(this, 'icon') || this.$createElement(KIcon, {
         props: {
           color: this.iconColor,
           dark: !this.theme.isDark,
@@ -96,7 +93,7 @@ export default baseMixins.extend<options>().extend({
     genOpposite () {
       return this.$createElement('div', {
         staticClass: 'k-timeline-item__opposite',
-      }, this.$slots.opposite)
+      }, getSlot(this, 'opposite'))
     },
   },
 

package/src/components/KTimeline/_mixins.sass

@@ -9,8 +9,9 @@
     width: $inner-dot-size
 
 @mixin timeline-wedge-align($direction)
-  .k-timeline-item__body
-    > .k-card:before, .k-card:after
+  .k-timeline-item__body > .k-card
+    &:not(.k-card--link)::before,
+    &::after
       +ltr()
         transform: rotate(if($direction == right, 180deg, 0))
         #{$direction}: -($timeline-wedge-size)
@@ -32,7 +33,7 @@
       text-align: if($direction == left, left, right)
 
 @mixin timeline-line-align($center, $first, $second)
-  &:before
+  &::before
     +ltr()
       #{$first}: calc(#{$center} - #{$timeline-line-width / 2})
       #{$second}: initial

package/src/components/KTooltip/KTooltip.ts

@@ -6,7 +6,6 @@ import Colorable from '../../mixins/colorable'
 import Delayable from '../../mixins/delayable'
 import Dependent from '../../mixins/dependent'
 import Menuable from '../../mixins/menuable'
-import Toggleable from '../../mixins/toggleable'
 
 // Helpers
 import { convertToUnit, keyCodes, getSlotType } from '../../util/helpers'
@@ -17,7 +16,7 @@ import { KNode } from 'kdu'
 import mixins from '../../util/mixins'
 
 /* @kdujs/component */
-export default mixins(Colorable, Delayable, Dependent, Menuable, Toggleable).extend({
+export default mixins(Colorable, Delayable, Dependent, Menuable).extend({
   name: 'k-tooltip',
 
   props: {
@@ -34,6 +33,10 @@ export default mixins(Colorable, Delayable, Dependent, Menuable, Toggleable).ext
       type: Boolean,
       default: true,
     },
+    openOnFocus: {
+      type: Boolean,
+      default: true,
+    },
     tag: {
       type: String,
       default: 'span',
@@ -157,14 +160,17 @@ export default mixins(Colorable, Delayable, Dependent, Menuable, Toggleable).ext
     genActivatorListeners () {
       const listeners = Activatable.options.methods.genActivatorListeners.call(this)
 
-      listeners.focus = (e: Event) => {
-        this.getActivator(e)
-        this.runDelay('open')
-      }
-      listeners.blur = (e: Event) => {
-        this.getActivator(e)
-        this.runDelay('close')
+      if (this.openOnFocus) {
+        listeners.focus = (e: Event) => {
+          this.getActivator(e)
+          this.runDelay('open')
+        }
+        listeners.blur = (e: Event) => {
+          this.getActivator(e)
+          this.runDelay('close')
+        }
       }
+
       listeners.keydown = (e: KeyboardEvent) => {
         if (e.keyCode === keyCodes.esc) {
           this.getActivator(e)

package/src/components/KTreeview/KTreeview.ts

@@ -217,7 +217,12 @@ export default mixins(
         this.buildTree(children, key)
 
         // This fixed bug with dynamic children resetting selected parent state
-        if (!this.nodes.hasOwnProperty(key) && parent !== null && this.nodes.hasOwnProperty(parent)) {
+        if (
+          this.selectionType !== 'independent' &&
+          parent !== null &&
+          !this.nodes.hasOwnProperty(key) &&
+          this.nodes.hasOwnProperty(parent)
+        ) {
           node.isSelected = this.nodes[parent].isSelected
         } else {
           node.isSelected = oldNode.isSelected

package/src/components/KWindow/KWindow.ts

@@ -13,6 +13,7 @@ import Touch from '../../directives/touch'
 import KBtn from '../KBtn'
 import KIcon from '../KIcon'
 import { BaseItemGroup } from '../KItemGroup/KItemGroup'
+import { getSlot } from '../../util/helpers'
 
 /* @kdujs/component */
 export default BaseItemGroup.extend({
@@ -118,7 +119,7 @@ export default BaseItemGroup.extend({
 
   methods: {
     genDefaultSlot () {
-      return this.$slots.default
+      return getSlot(this)
     },
     genContainer (): KNode {
       const children = [this.genDefaultSlot()]

package/src/components/KWindow/KWindowItem.ts

@@ -9,7 +9,7 @@ import { factory as GroupableFactory } from '../../mixins/groupable'
 import Touch from '../../directives/touch'
 
 // Utilities
-import { convertToUnit } from '../../util/helpers'
+import { convertToUnit, getSlot } from '../../util/helpers'
 import mixins, { ExtractKdu } from '../../util/mixins'
 
 // Types
@@ -75,7 +75,7 @@ export default baseMixins.extend<options>().extend(
 
   methods: {
     genDefaultSlot () {
-      return this.$slots.default
+      return getSlot(this)
     },
     genWindowItem () {
       return this.$createElement('div', {