kdutify 2.6.1 → 2.7.2

package/src/components/KInput/KInput.ts

@@ -164,7 +164,7 @@ export default baseMixins.extend<options>().extend({
     genDefaultSlot () {
       return [
         this.genLabel(),
-        this.$slots.default,
+        getSlot(this),
       ]
     },
     genIcon (
@@ -176,13 +176,25 @@ export default baseMixins.extend<options>().extend({
       const eventName = `click:${kebabCase(type)}`
       const hasListener = !!(this.listeners$[eventName] || cb)
 
+      const localeKey = {
+        prepend: 'prependAction',
+        prependInner: 'prependAction',
+        append: 'appendAction',
+        appendOuter: 'appendAction',
+        clear: 'clear',
+      }[type]
+      const label = hasListener && localeKey
+        ? this.$kdutify.lang.t(`$kdutify.input.${localeKey}`, this.label ?? '')
+        : undefined
+
       const data = mergeData({
         attrs: {
-          'aria-label': hasListener ? kebabCase(type).split('-')[0] + ' icon' : undefined,
+          'aria-label': label,
           color: this.validationState,
           dark: this.dark,
           disabled: this.isDisabled,
           light: this.light,
+          tabindex: type === 'clear' ? -1 : undefined,
         },
         on: !hasListener
           ? undefined
@@ -238,7 +250,7 @@ export default baseMixins.extend<options>().extend({
           for: this.computedId,
           light: this.light,
         },
-      }, this.$slots.label || this.label)
+      }, getSlot(this, 'label') || this.label)
     },
     genMessages () {
       if (!this.showDetails) return null

package/src/components/KItemGroup/KItem.sass

@@ -0,0 +1,4 @@
+.k-item--disabled
+  &,
+  & *
+    pointer-events: none

package/src/components/KItemGroup/KItem.ts

@@ -1,3 +1,6 @@
+// Styles
+import './KItem.sass'
+
 // Mixins
 import { factory as GroupableFactory } from '../../mixins/groupable'
 
@@ -16,6 +19,7 @@ export const BaseItem = Kdu.extend({
     value: {
       required: false,
     },
+    disabled: Boolean,
   },
 
   data: () => ({
@@ -56,9 +60,16 @@ export const BaseItem = Kdu.extend({
     }
 
     element.data = this._b(element.data || {}, element.tag!, {
-      class: { [this.activeClass]: this.isActive },
+      class: {
+        [this.activeClass]: this.isActive,
+        'k-item--disabled': this.disabled,
+      },
     })
 
+    if (this.disabled) {
+      element.data.attrs = { ...element.data.attrs, tabindex: -1 }
+    }
+
     return element
   },
 })

package/src/components/KItemGroup/KItemGroup.ts

@@ -2,6 +2,7 @@
 import './KItemGroup.sass'
 
 // Mixins
+import Comparable from '../../mixins/comparable'
 import Groupable from '../../mixins/groupable'
 import Proxyable from '../../mixins/proxyable'
 import Themeable from '../../mixins/themeable'
@@ -9,6 +10,7 @@ import Themeable from '../../mixins/themeable'
 // Utilities
 import mixins from '../../util/mixins'
 import { consoleWarn } from '../../util/console'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { KNode } from 'kdu/types'
@@ -20,6 +22,7 @@ export type GroupableInstance = InstanceType<typeof Groupable> & {
  }
 
 export const BaseItemGroup = mixins(
+  Comparable,
   Proxyable,
   Themeable
 ).extend({
@@ -83,12 +86,12 @@ export const BaseItemGroup = mixins(
     },
     toggleMethod (): (v: any) => boolean {
       if (!this.multiple) {
-        return (v: any) => this.internalValue === v
+        return (v: any) => this.valueComparator(this.internalValue, v)
       }
 
       const internalValue = this.internalValue
       if (Array.isArray(internalValue)) {
-        return (v: any) => internalValue.includes(v)
+        return (v: any) => internalValue.some(intern => this.valueComparator(intern, v))
       }
 
       return () => false
@@ -114,7 +117,7 @@ export const BaseItemGroup = mixins(
       }
     },
     getValue (item: GroupableInstance, i: number): unknown {
-      return item.value == null || item.value === ''
+      return item.value === undefined
         ? i
         : item.value
     },
@@ -216,7 +219,7 @@ export const BaseItemGroup = mixins(
         ? this.internalValue
         : []
       const internalValue = defaultValue.slice()
-      const index = internalValue.findIndex(val => val === value)
+      const index = internalValue.findIndex(val => this.valueComparator(val, value))
 
       if (
         this.mandatory &&
@@ -242,7 +245,7 @@ export const BaseItemGroup = mixins(
       this.internalValue = internalValue
     },
     updateSingle (value: any) {
-      const isSame = value === this.internalValue
+      const isSame = this.valueComparator(this.internalValue, value)
 
       if (this.mandatory && isSame) return
 
@@ -251,7 +254,7 @@ export const BaseItemGroup = mixins(
   },
 
   render (h): KNode {
-    return h(this.tag, this.genData(), this.$slots.default)
+    return h(this.tag, this.genData(), getSlot(this))
   },
 })
 

package/src/components/KLabel/KLabel.ts

@@ -11,6 +11,7 @@ import mixins from '../../util/mixins'
 
 // Helpers
 import { convertToUnit } from '../../util/helpers'
+import mergeData from '../../util/mergeData'
 
 /* @kdujs/component */
 export default mixins(Themeable).extend({
@@ -39,8 +40,8 @@ export default mixins(Themeable).extend({
   },
 
   render (h, ctx): KNode {
-    const { children, listeners, props } = ctx
-    const data = {
+    const { children, listeners, props, data } = ctx
+    const newData = mergeData({
       staticClass: 'k-label',
       class: {
         'k-label--active': props.value,
@@ -58,8 +59,8 @@ export default mixins(Themeable).extend({
         position: props.absolute ? 'absolute' : 'relative',
       },
       ref: 'label',
-    }
+    }, data)
 
-    return h('label', Colorable.options.methods.setTextColor(props.focused && props.color, data), children)
+    return h('label', Colorable.options.methods.setTextColor(props.focused && props.color, newData), children)
   },
 })

package/src/components/KList/KList.ts

@@ -4,6 +4,7 @@ import KListGroup from './KListGroup'
 
 // Components
 import KSheet from '../KSheet/KSheet'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { KNode } from 'kdu'
@@ -94,8 +95,9 @@ export default KSheet.extend<options>().extend({
         role: this.isInNav || this.isInMenu ? undefined : 'list',
         ...this.attrs$,
       },
+      on: this.listeners$,
     }
 
-    return h(this.tag, this.setBackgroundColor(this.color, data), [this.$slots.default])
+    return h(this.tag, this.setBackgroundColor(this.color, data), getSlot(this))
   },
 })

package/src/components/KList/KListGroup.ts

@@ -125,13 +125,14 @@ export default baseMixins.extend<options>().extend({
     },
     genAppendIcon (): KNode | null {
       const icon = !this.subGroup ? this.appendIcon : false
+      const slot = getSlot(this, 'appendIcon')
 
-      if (!icon && !this.$slots.appendIcon) return null
+      if (!icon && !slot) return null
 
       return this.$createElement(KListItemIcon, {
         staticClass: 'k-list-group__header__append-icon',
       }, [
-        this.$slots.appendIcon || this.genIcon(icon),
+        slot || this.genIcon(icon),
       ])
     },
     genHeader (): KNode {
@@ -157,7 +158,7 @@ export default baseMixins.extend<options>().extend({
         },
       }, [
         this.genPrependIcon(),
-        this.$slots.activator,
+        getSlot(this, 'activator'),
         this.genAppendIcon(),
       ])
     },
@@ -176,13 +177,14 @@ export default baseMixins.extend<options>().extend({
       const icon = this.subGroup && this.prependIcon == null
         ? '$subgroup'
         : this.prependIcon
+      const slot = getSlot(this, 'prependIcon')
 
-      if (!icon && !this.$slots.prependIcon) return null
+      if (!icon && !slot) return null
 
       return this.$createElement(KListItemIcon, {
         staticClass: 'k-list-group__header__prepend-icon',
       }, [
-        this.$slots.prependIcon || this.genIcon(icon),
+        slot || this.genIcon(icon),
       ])
     },
     onRouteChange (to: Route) {

package/src/components/KList/KListItem.ts

@@ -12,7 +12,7 @@ import { factory as ToggleableFactory } from '../../mixins/toggleable'
 import Ripple from '../../directives/ripple'
 
 // Utilities
-import { keyCodes } from './../../util/helpers'
+import { getSlot, keyCodes } from './../../util/helpers'
 import { ExtractKdu } from './../../util/mixins'
 import { removed } from '../../util/console'
 
@@ -168,10 +168,12 @@ export default baseMixins.extend<options>().extend({
     data[this.to ? 'nativeOn' : 'on'] = {
       ...data[this.to ? 'nativeOn' : 'on'],
       keydown: (e: KeyboardEvent) => {
-        /* istanbul ignore else */
-        if (e.keyCode === keyCodes.enter) this.click(e)
+        if (!this.disabled) {
+          /* istanbul ignore else */
+          if (e.keyCode === keyCodes.enter) this.click(e)
 
-        this.$emit('keydown', e)
+          this.$emit('keydown', e)
+        }
       },
     }
 
@@ -181,12 +183,10 @@ export default baseMixins.extend<options>().extend({
       delete data.nativeOn
     }
 
-    const children = this.$scopedSlots.default
-      ? this.$scopedSlots.default({
-        active: this.isActive,
-        toggle: this.toggle,
-      })
-      : this.$slots.default
+    const children = getSlot(this, 'default', {
+      active: this.isActive,
+      toggle: this.toggle,
+    })
 
     return h(tag, this.isActive ? this.setTextColor(this.color, data) : data, children)
   },

package/src/components/KMain/KMain.ts

@@ -3,6 +3,7 @@ import './KMain.sass'
 
 // Mixins
 import SSRBootable from '../../mixins/ssr-bootable'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { KNode } from 'kdu'
@@ -44,7 +45,7 @@ export default SSRBootable.extend({
       h(
         'div',
         { staticClass: 'k-main__wrap' },
-        this.$slots.default
+        getSlot(this),
       ),
     ])
   },

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