kdutify 2.6.1 → 2.7.3

package/src/components/KMenu/KMenu.ts

@@ -11,7 +11,6 @@ import Dependent from '../../mixins/dependent'
 import Menuable from '../../mixins/menuable'
 import Returnable from '../../mixins/returnable'
 import Roundable from '../../mixins/roundable'
-import Toggleable from '../../mixins/toggleable'
 import Themeable from '../../mixins/themeable'
 
 // Directives
@@ -28,16 +27,15 @@ import {
 import goTo from '../../services/goto'
 
 // Types
-import { KNode, KNodeDirective, KNodeData } from 'kdu'
+import { KNode, KNodeDirective, KNodeData, PropType } from 'kdu'
 
 const baseMixins = mixins(
   Dependent,
   Delayable,
-  Menuable,
   Returnable,
   Roundable,
-  Toggleable,
-  Themeable
+  Themeable,
+  Menuable,
 )
 
 /* @kdujs/component */
@@ -75,10 +73,6 @@ export default baseMixins.extend({
     },
     offsetX: Boolean,
     offsetY: Boolean,
-    openOnClick: {
-      type: Boolean,
-      default: true,
-    },
     openOnHover: Boolean,
     origin: {
       type: String,
@@ -88,6 +82,10 @@ export default baseMixins.extend({
       type: [Boolean, String],
       default: 'k-menu-transition',
     },
+    contentProps: {
+      type: Object as PropType<Record<string, any>>,
+      default: () => ({}),
+    },
   },
 
   data () {
@@ -346,6 +344,7 @@ export default baseMixins.extend({
       const options = {
         attrs: {
           ...this.getScopeIdAttrs(),
+          ...this.contentProps,
           role: 'role' in this.$attrs ? this.$attrs.role : 'menu',
         },
         staticClass: 'k-menu__content',
@@ -403,7 +402,7 @@ export default baseMixins.extend({
     mouseLeaveHandler (e: MouseEvent) {
       // Prevent accidental re-activation
       this.runDelay('close', () => {
-        if (this.$refs.content.contains(e.relatedTarget as HTMLElement)) return
+        if (this.$refs.content?.contains(e.relatedTarget as HTMLElement)) return
 
         requestAnimationFrame(() => {
           this.isActive = false
@@ -460,6 +459,8 @@ export default baseMixins.extend({
       if (tile.tabIndex === -1) this.nextTile()
     },
     onKeyDown (e: KeyboardEvent) {
+      if (this.disableKeys) return
+
       if (e.keyCode === keyCodes.esc) {
         // Wait for dependent elements to close first
         setTimeout(() => { this.isActive = false })

package/src/components/KNavigationDrawer/KNavigationDrawer.ts

@@ -351,6 +351,8 @@ export default baseMixins.extend({
     },
     genListeners () {
       const on: Record<string, (e: Event) => void> = {
+        mouseenter: () => (this.isMouseover = true),
+        mouseleave: () => (this.isMouseover = false),
         transitionend: (e: Event) => {
           if (e.target !== e.currentTarget) return
           this.$emit('transitionend', e)
@@ -366,11 +368,6 @@ export default baseMixins.extend({
         on.click = () => this.$emit('update:mini-variant', false)
       }
 
-      if (this.expandOnHover) {
-        on.mouseenter = () => (this.isMouseover = true)
-        on.mouseleave = () => (this.isMouseover = false)
-      }
-
       return on
     },
     genPosition (name: 'prepend' | 'append') {
@@ -388,7 +385,7 @@ export default baseMixins.extend({
     genContent () {
       return this.$createElement('div', {
         staticClass: 'k-navigation-drawer__content',
-      }, this.$slots.default)
+      }, getSlot(this))
     },
     genBorder () {
       return this.$createElement('div', {
@@ -442,12 +439,12 @@ export default baseMixins.extend({
         !this.$el
       ) return 0
 
-      const width = Number(this.computedWidth)
+      const width = Number(this.miniVariant ? this.miniVariantWidth : this.width)
 
       return isNaN(width) ? this.$el.clientWidth : width
     },
     updateMiniVariant (val: boolean) {
-      if (this.miniVariant !== val) this.$emit('update:mini-variant', val)
+      if (this.expandOnHover && this.miniVariant !== val) this.$emit('update:mini-variant', val)
     },
   },
 

package/src/components/KOtpInput/KOtpInput.ts

@@ -49,7 +49,6 @@ export default baseMixins.extend<options>().extend({
   },
 
   data: () => ({
-    badInput: false,
     initialValue: null,
     isBooted: false,
     otp: [] as string[],
@@ -66,15 +65,13 @@ export default baseMixins.extend<options>().extend({
         'k-otp-input--plain': this.plain,
       }
     },
-    isDirty (): boolean {
-      return KInput.options.computed.isDirty.call(this) || this.badInput
-    },
   },
 
   watch: {
     isFocused: 'updateValue',
     value (val) {
       this.lazyValue = val
+      this.otp = val?.split('') || []
     },
   },
 
@@ -158,18 +155,17 @@ export default baseMixins.extend<options>().extend({
         },
         attrs: {
           ...this.attrs$,
+          autocomplete: 'one-time-code',
           disabled: this.isDisabled,
           readonly: this.isReadonly,
           type: this.type,
           id: `${this.computedId}--${otpIdx}`,
           class: `otp-field-box--${otpIdx}`,
-          maxlength: 1,
         },
         on: Object.assign(listeners, {
           blur: this.onBlur,
           input: (e: Event) => this.onInput(e, otpIdx),
           focus: (e: Event) => this.onFocus(e, otpIdx),
-          paste: (e: ClipboardEvent) => this.onPaste(e, otpIdx),
           keydown: this.onKeyDown,
           keyup: (e: KeyboardEvent) => this.onKeyUp(e, otpIdx),
         }),
@@ -211,22 +207,31 @@ export default baseMixins.extend<options>().extend({
         e && this.$emit('focus', e)
       }
     },
-    onInput (e: Event, otpIdx: number) {
+    onInput (e: Event, index: number) {
+      const maxCursor = +this.length - 1
+
       const target = e.target as HTMLInputElement
       const value = target.value
-      this.applyValue(otpIdx, target.value, () => {
-        this.internalValue = this.otp.join('')
-      })
-      this.badInput = target.validity && target.validity.badInput
+      const inputDataArray = value?.split('') || []
+
+      const newOtp: string[] = [...this.otp]
+      for (let i = 0; i < inputDataArray.length; i++) {
+        const appIdx = index + i
+        if (appIdx > maxCursor) break
+        newOtp[appIdx] = inputDataArray[i].toString()
+      }
+      if (!inputDataArray.length) {
+        newOtp.splice(index, 1)
+      }
+
+      this.otp = newOtp
+      this.internalValue = this.otp.join('')
 
-      const nextIndex = otpIdx + 1
-      if (value) {
-        if (nextIndex < +this.length) {
-          this.changeFocus(nextIndex)
-        } else {
-          this.clearFocus(otpIdx)
-          this.onCompleted()
-        }
+      if (index + inputDataArray.length >= +this.length) {
+        this.onCompleted()
+        this.clearFocus(index)
+      } else if (inputDataArray.length) {
+        this.changeFocus(index + inputDataArray.length)
       }
     },
     clearFocus (index: number) {
@@ -254,29 +259,6 @@ export default baseMixins.extend<options>().extend({
 
       KInput.options.methods.onMouseUp.call(this, e)
     },
-    onPaste (event: ClipboardEvent, index: number) {
-      const maxCursor = +this.length - 1
-      const inputVal = event?.clipboardData?.getData('Text')
-      const inputDataArray = inputVal?.split('') || []
-      event.preventDefault()
-      const newOtp: string[] = [...this.otp]
-      for (let i = 0; i < inputDataArray.length; i++) {
-        const appIdx = index + i
-        if (appIdx > maxCursor) break
-        newOtp[appIdx] = inputDataArray[i].toString()
-      }
-      this.otp = newOtp
-      const targetFocus = Math.min(index + inputDataArray.length, maxCursor)
-      this.changeFocus(targetFocus)
-
-      if (newOtp.length === +this.length) { this.onCompleted(); this.clearFocus(targetFocus) }
-    },
-    applyValue (index: number, inputVal: string, next: Function) {
-      const newOtp: string[] = [...this.otp]
-      newOtp[index] = inputVal
-      this.otp = newOtp
-      next()
-    },
     changeFocus (index: number) {
       this.onFocus(undefined, index || 0)
     },

package/src/components/KOverflowBtn/KOverflowBtn.ts

@@ -40,6 +40,9 @@ export default KAutocomplete.extend({
     computedItems (): object[] {
       return this.segmented ? this.allItems : this.filteredItems
     },
+    labelValue (): boolean {
+      return (this.isFocused && !this.persistentPlaceholder) || this.isLabelActive
+    },
   },
 
   methods: {

package/src/components/KOverlay/KOverlay.ts

@@ -8,6 +8,7 @@ import Toggleable from './../../mixins/toggleable'
 
 // Utilities
 import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { KNode } from 'kdu'
@@ -75,7 +76,7 @@ export default mixins(
     genContent () {
       return this.$createElement('div', {
         staticClass: 'k-overlay__content',
-      }, this.$slots.default)
+      }, getSlot(this))
     },
   },
 

package/src/components/KPagination/KPagination.ts

@@ -29,6 +29,8 @@ export default mixins(
   props: {
     circle: Boolean,
     disabled: Boolean,
+    navigationColor: String,
+    navigationTextColor: String,
     length: {
       type: Number,
       default: 0,
@@ -89,7 +91,7 @@ export default mixins(
     items (): (string | number)[] {
       const totalVisible = parseInt(this.totalVisible, 10)
 
-      if (totalVisible === 0) {
+      if (totalVisible === 0 || isNaN(this.length) || this.length > Number.MAX_SAFE_INTEGER) {
         return []
       }
 
@@ -138,7 +140,7 @@ export default mixins(
     },
   },
 
-  mounted () {
+  beforeMount () {
     this.init()
   },
 
@@ -146,6 +148,7 @@ export default mixins(
     init () {
       this.selected = null
 
+      this.onResize()
       this.$nextTick(this.onResize)
       // TODO: Change this (f75dee3a, cbdf7caa)
       setTimeout(() => (this.selected = this.value), 100)
@@ -180,18 +183,21 @@ export default mixins(
     },
     genIcon (h: CreateElement, icon: string, disabled: boolean, fn: EventListener, label: String): KNode {
       return h('li', [
-        h('button', {
-          staticClass: 'k-pagination__navigation',
-          class: {
-            'k-pagination__navigation--disabled': disabled,
-          },
-          attrs: {
-            disabled,
-            type: 'button',
-            'aria-label': label,
-          },
-          on: disabled ? {} : { click: fn },
-        }, [h(KIcon, [icon])]),
+        h('button',
+          this.setBackgroundColor(this.navigationColor, {
+            staticClass: 'k-pagination__navigation',
+            class: {
+              'k-pagination__navigation--disabled': disabled,
+            },
+            attrs: {
+              disabled,
+              type: 'button',
+              'aria-label': label,
+            },
+            on: disabled ? {} : { click: fn },
+          }),
+          [h(KIcon, { props: { color: this.navigationTextColor } }, [icon])]
+        ),
       ])
     },
     genItem (h: CreateElement, i: string | number): KNode {

package/src/components/KParallax/KParallax.ts

@@ -3,10 +3,11 @@ import './KParallax.sass'
 
 // Mixins
 import Translatable from '../../mixins/translatable'
+import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { KNode, KNodeData } from 'kdu/types/knode'
-import mixins from '../../util/mixins'
 
 const baseMixins = mixins(
   Translatable
@@ -95,7 +96,7 @@ export default baseMixins.extend<options>().extend({
 
     const content = h('div', {
       staticClass: 'k-parallax__content',
-    }, this.$slots.default)
+    }, getSlot(this))
 
     return h('div', {
       staticClass: 'k-parallax',

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))