kdutify 2.6.0 → 2.7.2

package/src/components/KBanner/KBanner.ts

@@ -15,10 +15,7 @@ import Toggleable from '../../mixins/toggleable'
 
 // Utilities
 import mixins from '../../util/mixins'
-import {
-  convertToUnit,
-  getSlot,
-} from '../../util/helpers'
+import { convertToUnit, getSlot } from '../../util/helpers'
 
 // Typeslint
 import { KNode } from 'kdu'
@@ -56,7 +53,7 @@ export default mixins(
       }
     },
     hasIcon (): boolean {
-      return Boolean(this.icon || this.$slots.icon)
+      return Boolean(this.icon || this.$slots.icon || this.$scopedSlots.icon)
     },
     isSticky (): boolean {
       return this.sticky || this.app
@@ -99,7 +96,7 @@ export default mixins(
           },
         }, [this.icon])
       } else {
-        content = this.$slots.icon
+        content = getSlot(this, 'icon')
       }
 
       return this.$createElement(KAvatar, {
@@ -116,7 +113,7 @@ export default mixins(
     genText () {
       return this.$createElement('div', {
         staticClass: 'k-banner__text',
-      }, this.$slots.default)
+      }, getSlot(this))
     },
     genActions () {
       const children = getSlot(this, 'actions', {
@@ -148,17 +145,23 @@ export default mixins(
   },
 
   render (h): KNode {
+    const data = {
+      staticClass: 'k-banner',
+      attrs: this.attrs$,
+      class: this.classes,
+      style: this.styles,
+      directives: [{
+        name: 'show',
+        value: this.isActive,
+      }],
+    }
+
     return h(KExpandTransition, [
-      h('div', this.setBackgroundColor(this.color, {
-        staticClass: 'k-banner',
-        attrs: this.attrs$,
-        class: this.classes,
-        style: this.styles,
-        directives: [{
-          name: 'show',
-          value: this.isActive,
-        }],
-      }), [this.genWrapper()]),
+      h(
+        'div',
+        this.outlined ? data : this.setBackgroundColor(this.color, data),
+        [this.genWrapper()],
+      ),
     ])
   },
 })

package/src/components/KBottomNavigation/KBottomNavigation.ts

@@ -14,6 +14,7 @@ import { factory as ToggleableFactory } from '../../mixins/toggleable'
 // Utilities
 import mixins from '../../util/mixins'
 import { breaking } from '../../util/console'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { KNode } from 'kdu'
@@ -91,6 +92,10 @@ export default mixins(
     },
   },
 
+  watch: {
+    canScroll: 'onScroll',
+  },
+
   created () {
     /* istanbul ignore next */
     if (this.$attrs.hasOwnProperty('active')) {
@@ -100,8 +105,16 @@ export default mixins(
 
   methods: {
     thresholdMet () {
-      this.isActive = !this.isScrollingUp
-      this.$emit('update:input-value', this.isActive)
+      if (this.hideOnScroll) {
+        this.isActive = !this.isScrollingUp ||
+          this.currentScroll > this.computedScrollThreshold
+
+        this.$emit('update:input-value', this.isActive)
+      }
+
+      if (this.currentThreshold < this.computedScrollThreshold) return
+
+      this.savedScroll = this.currentScroll
     },
     updateApplication (): number {
       return this.$el
@@ -140,6 +153,6 @@ export default mixins(
       })
     }
 
-    return h(ButtonGroup, this.setTextColor(this.color, data), this.$slots.default)
+    return h(ButtonGroup, this.setTextColor(this.color, data), getSlot(this))
   },
 })

package/src/components/KBottomSheet/KBottomSheet.ts

@@ -9,10 +9,7 @@ export default KDialog.extend({
 
   props: {
     inset: Boolean,
-    maxWidth: {
-      type: [String, Number],
-      default: 'auto',
-    },
+    maxWidth: [String, Number],
     transition: {
       type: String,
       default: 'bottom-sheet-transition',

package/src/components/KBreadcrumbs/KBreadcrumbs.ts

@@ -14,6 +14,7 @@ import Themeable from '../../mixins/themeable'
 
 // Utils
 import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
 
 export default mixins(
   Themeable
@@ -67,7 +68,7 @@ export default mixins(
   },
 
   render (h): KNode {
-    const children = this.$slots.default || this.genItems()
+    const children = getSlot(this) || this.genItems()
 
     return h('ul', {
       staticClass: 'k-breadcrumbs',

package/src/components/KBreadcrumbs/KBreadcrumbsItem.ts

@@ -1,6 +1,7 @@
 import Routable from '../../mixins/routable'
 
 import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
 import { KNode } from 'kdu'
 
 /* @kdujs/component */
@@ -39,7 +40,7 @@ export default mixins(Routable).extend({
           ...data.attrs,
           'aria-current': this.isActive && this.isLink ? 'page' : undefined,
         },
-      }, this.$slots.default),
+      }, getSlot(this)),
     ])
   },
 })

package/src/components/KBtn/KBtn.sass

@@ -161,7 +161,7 @@
   display: flex
   flex: 1 0 auto
   min-width: 100% !important
-  max-width: auto
+  max-width: none
 
 .k-btn--is-elevated
   +elevation(2)

package/src/components/KBtn/KBtn.ts

@@ -18,6 +18,7 @@ import Sizeable from '../../mixins/sizeable'
 // Utilities
 import mixins, { ExtractKdu } from '../../util/mixins'
 import { breaking } from '../../util/console'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { KNode } from 'kdu'
@@ -167,12 +168,12 @@ export default baseMixins.extend<options>().extend({
     genContent (): KNode {
       return this.$createElement('span', {
         staticClass: 'k-btn__content',
-      }, this.$slots.default)
+      }, getSlot(this))
     },
     genLoader (): KNode {
       return this.$createElement('span', {
         class: 'k-btn__loader',
-      }, this.$slots.loader || [this.$createElement(KProgressCircular, {
+      }, getSlot(this, 'loader') || [this.$createElement(KProgressCircular, {
         props: {
           indeterminate: true,
           size: 23,

package/src/components/KCalendar/KCalendar.ts

@@ -361,6 +361,9 @@ export default CalendarWithEvents.extend({
         weekdays,
         categories,
       },
+      attrs: {
+        role: 'grid',
+      },
       directives: [{
         modifiers: { quiet: true },
         name: 'resize',
@@ -368,6 +371,7 @@ export default CalendarWithEvents.extend({
       }],
       on: {
         ...this.$listeners,
+
         'click:date': (day: CalendarTimestamp, e?: MouseEvent) => {
           if (this.$listeners.input) {
             this.$emit('input', day.date)

package/src/components/KCalendar/KCalendarCategory.sass

@@ -6,6 +6,15 @@
   .k-calendar-category__column-header
     border-right: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
 
+  .k-calendar-daily__head
+    background: map-deep-get($material, 'calendar', 'background-color')
+
+  .k-calendar-daily__intervals-head
+    background: map-deep-get($material, 'calendar', 'background-color')
+
+  .k-calendar-daily__intervals-body
+    background: map-deep-get($material, 'calendar', 'background-color')
+
 .k-calendar-category
   overflow: auto
   position: relative
@@ -33,7 +42,6 @@
     min-width: 100%
     position: sticky
     top: 0
-    background: white
     z-index: 2
 
   .k-calendar-daily_head-day
@@ -44,7 +52,6 @@
     position: sticky
     left: 0
     top: 0
-    background: white
     z-index: 2
 
   .k-calendar-daily_head-weekday
@@ -63,7 +70,6 @@
   .k-calendar-daily__intervals-body
     position: sticky
     left: 0
-    background: white
     z-index: 1
 
   .k-calendar-daily__interval

package/src/components/KCalendar/KCalendarDaily.ts

@@ -82,8 +82,8 @@ export default CalendarWithIntervals.extend({
         key: day.date,
         staticClass: 'k-calendar-daily_head-day',
         class: this.getRelativeClasses(day),
-        on: this.getDefaultMouseEventHandlers(':day', _e => {
-          return this.getSlotScope(day)
+        on: this.getDefaultMouseEventHandlers(':day', nativeEvent => {
+          return { nativeEvent, ...this.getSlotScope(day) }
         }),
       }, [
         this.genHeadWeekday(day),
@@ -120,8 +120,8 @@ export default CalendarWithIntervals.extend({
         on: this.getMouseEventHandlers({
           'click:date': { event: 'click', stop: true },
           'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
-        }, _e => {
-          return day
+        }, nativeEvent => {
+          return { nativeEvent, ...day }
         }),
       }, this.dayFormatter(day, false))
     },
@@ -167,8 +167,8 @@ export default CalendarWithIntervals.extend({
         key: day.date,
         staticClass: 'k-calendar-daily__day',
         class: this.getRelativeClasses(day),
-        on: this.getDefaultMouseEventHandlers(':time', e => {
-          return this.getSlotScope(this.getTimestampAtEvent(e, day))
+        on: this.getDefaultMouseEventHandlers(':time', nativeEvent => {
+          return { nativeEvent, ...this.getSlotScope(this.getTimestampAtEvent(nativeEvent, day)) }
         }),
       }, [
         ...this.genDayIntervals(index),
@@ -192,6 +192,7 @@ export default CalendarWithIntervals.extend({
           height,
           ...styler(interval),
         },
+
       }
 
       const children = getSlot(this, 'interval', () => this.getSlotScope(interval))
@@ -205,8 +206,8 @@ export default CalendarWithIntervals.extend({
         style: {
           width,
         },
-        on: this.getDefaultMouseEventHandlers(':interval', e => {
-          return this.getTimestampAtEvent(e, this.parsedStart)
+        on: this.getDefaultMouseEventHandlers(':interval', nativeEvent => {
+          return { nativeEvent, ...this.getTimestampAtEvent(nativeEvent, this.parsedStart) }
         }),
       }
 

package/src/components/KCalendar/KCalendarWeekly.ts

@@ -90,6 +90,9 @@ export default CalendarBase.extend({
     genHead (): KNode {
       return this.$createElement('div', {
         staticClass: 'k-calendar-weekly__head',
+        attrs: {
+          role: 'row',
+        },
       }, this.genHeadDays())
     },
     genHeadDays (): KNode[] {
@@ -111,6 +114,9 @@ export default CalendarBase.extend({
         key: day.date,
         staticClass: 'k-calendar-weekly__head-weekday',
         class: this.getRelativeClasses(day, outside),
+        attrs: {
+          role: 'columnheader',
+        },
       }), this.weekdayFormatter(day, this.shortWeekdays))
     },
     genWeeks (): KNode[] {
@@ -134,6 +140,9 @@ export default CalendarBase.extend({
       return this.$createElement('div', {
         key: week[0].date,
         staticClass: 'k-calendar-weekly__week',
+        attrs: {
+          role: 'row',
+        },
       }, weekNodes)
     },
     getWeekNumber (determineDay: CalendarTimestamp) {
@@ -159,7 +168,12 @@ export default CalendarBase.extend({
         key: day.date,
         staticClass: 'k-calendar-weekly__day',
         class: this.getRelativeClasses(day, outside),
-        on: this.getDefaultMouseEventHandlers(':day', _e => day),
+        attrs: {
+          role: 'cell',
+        },
+        on: this.getDefaultMouseEventHandlers(':day', nativeEvent => {
+          return { nativeEvent, ...day }
+        }),
       }, [
         this.genDayLabel(day),
         ...(getSlot(this, 'day', () => ({ outside, index, week, ...day })) || []),
@@ -184,7 +198,7 @@ export default CalendarBase.extend({
         on: this.getMouseEventHandlers({
           'click:date': { event: 'click', stop: true },
           'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
-        }, _e => day),
+        }, nativeEvent => ({ nativeEvent, ...day })),
       }, hasMonth
         ? this.monthFormatter(day, this.shortMonths) + ' ' + this.dayFormatter(day, false)
         : this.dayFormatter(day, false)

package/src/components/KCalendar/mixins/calendar-base.ts

@@ -3,7 +3,7 @@
 import mixins from '../../../util/mixins'
 import Colorable from '../../../mixins/colorable'
 import Localable from '../../../mixins/localable'
-import Mouse from './mouse'
+import Mouse from '../../../mixins/mouse'
 import Themeable from '../../../mixins/themeable'
 import Times from './times'
 

package/src/components/KCalendar/mixins/calendar-with-events.ts

@@ -10,9 +10,6 @@ import ripple from '../../../directives/ripple'
 // Mixins
 import CalendarBase from './calendar-base'
 
-// Helpers
-import { escapeHTML } from '../../../util/helpers'
-
 // Util
 import props from '../util/props'
 import {
@@ -116,7 +113,7 @@ export default CalendarBase.extend({
     eventNameFunction (): CalendarEventNameFunction {
       return typeof this.eventName === 'function'
         ? this.eventName
-        : (event, timedEvent) => escapeHTML(event.input[this.eventName as string] as string || '')
+        : (event, timedEvent) => event.input[this.eventName as string] as string || ''
     },
     eventModeFunction (): CalendarEventOverlapMode {
       return typeof this.eventOverlapMode === 'function'
@@ -303,20 +300,27 @@ export default CalendarBase.extend({
       const eventSummary = () => {
         const name = this.eventNameFunction(event, timedEvent)
         if (event.start.hasTime) {
-          const eventSummaryClass = 'k-event-summary'
           if (timedEvent) {
             const time = timeSummary()
-            const delimiter = singline ? ', ' : '<br>'
+            const delimiter = singline ? ', ' : this.$createElement('br')
 
-            return `<span class="${eventSummaryClass}"><strong>${name}</strong>${delimiter}${time}</span>`
+            return this.$createElement('span', { staticClass: 'k-event-summary' }, [
+              this.$createElement('strong', [name]),
+              delimiter,
+              time,
+            ])
           } else {
             const time = formatTime(event.start, true)
 
-            return `<span class="${eventSummaryClass}"><strong>${time}</strong> ${name}</span>`
+            return this.$createElement('span', { staticClass: 'k-event-summary' }, [
+              this.$createElement('strong', [time]),
+              ' ',
+              name,
+            ])
           }
         }
 
-        return name
+        return this.$createElement('span', { staticClass: 'k-event-summary' }, [name])
       }
 
       const scope = {
@@ -345,13 +349,10 @@ export default CalendarBase.extend({
           : [this.genName(eventSummary)]
       )
     },
-    genName (eventSummary: () => string): KNode {
+    genName (eventSummary: () => string | KNode): KNode {
       return this.$createElement('div', {
         staticClass: 'pl-1',
-        domProps: {
-          innerHTML: eventSummary(),
-        },
-      })
+      }, [eventSummary()])
     },
     genPlaceholder (day: CalendarTimestamp): KNode {
       const height = this.eventHeight + this.eventMarginBottom
@@ -384,9 +385,10 @@ export default CalendarBase.extend({
           name: 'ripple',
           value: this.eventRipple ?? true,
         }],
-        on: {
-          click: (e: MouseEvent) => this.$emit('click:more', day, e),
-        },
+        on: this.getDefaultMouseEventHandlers(':more', nativeEvent => {
+          return { nativeEvent, ...day }
+        }),
+
         style: {
           display: 'none',
           height: `${eventHeight}px`,

package/src/components/KCard/KCard.ts

@@ -10,6 +10,7 @@ import Routable from '../../mixins/routable'
 
 // Helpers
 import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { KNode } from 'kdu'
@@ -86,7 +87,7 @@ export default mixins(
 
     return h(tag, this.setBackgroundColor(this.color, data), [
       this.genProgress(),
-      this.$slots.default,
+      getSlot(this),
     ])
   },
 })

package/src/components/KCarousel/KCarousel.ts

@@ -149,6 +149,7 @@ export default KWindow.extend({
             small: true,
             value: this.getValue(this.items[i], i),
           },
+          key: i,
         }, [
           this.$createElement(KIcon, {
             props: { size: 18 },

package/src/components/KCheckbox/KSimpleCheckbox.ts

@@ -1,6 +1,6 @@
 import './KSimpleCheckbox.sass'
 
-import ripple from '../../directives/ripple'
+import Ripple from '../../directives/ripple'
 
 import Kdu, { KNode, KNodeDirective } from 'kdu'
 import { KIcon } from '../KIcon'
@@ -19,7 +19,7 @@ export default Kdu.extend({
   functional: true,
 
   directives: {
-    ripple,
+    Ripple,
   },
 
   props: {
@@ -64,6 +64,7 @@ export default Kdu.extend({
       const ripple = h('div', Colorable.options.methods.setTextColor(props.color, {
         staticClass: 'k-input--selection-controls__ripple',
         directives: [{
+          def: Ripple,
           name: 'ripple',
           value: { center: true },
         }] as KNodeDirective[],

package/src/components/KChip/KChip.sass

@@ -150,7 +150,7 @@
 
 .k-chip--pill
   .k-chip__filter
-    margin-right: $chip-pill-filter-margin
+    margin: $chip-pill-filter-margin
 
   .k-avatar
     height: $chip-pill-avatar-size !important

package/src/components/KChip/KChip.ts

@@ -19,6 +19,7 @@ import Sizeable from '../../mixins/sizeable'
 
 // Utilities
 import { breaking } from '../../util/console'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { PropValidator, PropType } from 'kdu/types/options'
@@ -169,7 +170,7 @@ export default mixins(
         staticClass: 'k-chip__content',
       }, [
         this.filter && this.genFilter(),
-        this.$slots.default,
+        getSlot(this),
         this.hasClose && this.genClose(),
       ])
     },

package/src/components/KColorPicker/KColorPickerSwatches.sass

@@ -7,7 +7,7 @@
     display: flex
     flex-wrap: wrap
     justify-content: center
-    padding: $color-picker-swatches-border-radius
+    padding: $color-picker-swatches-padding
 
 .k-color-picker__swatch
   display: flex

package/src/components/KColorPicker/_variables.scss

@@ -7,7 +7,8 @@ $color-picker-swatch-color-height: 18px !default;
 $color-picker-swatch-color-margin: 2px 4px !default;
 $color-picker-swatch-color-border-radius: 2px !default;
 $color-picker-swatch-margin-bottom: 10px !default;
-$color-picker-swatches-border-radius: 8px !default;
+$color-picker-swatches-border-radius: 8px !default; // typo
+$color-picker-swatches-padding: $color-picker-swatches-border-radius !default;
 $color-picker-canvas-dot-size: 15px !default;
 $color-picker-canvas-dot-box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 1), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3) !default;
 $color-picker-canvas-dot-disabled-box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 0.7), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3) !default;

package/src/components/KCombobox/KCombobox.ts

@@ -179,7 +179,7 @@ export default KAutocomplete.extend({
       }
     },
     setValue (value?: any) {
-      KSelect.options.methods.setValue.call(this, value ?? this.internalSearch)
+      KSelect.options.methods.setValue.call(this, value === undefined ? this.internalSearch : value)
     },
     updateEditing () {
       const value = this.internalValue.slice()
@@ -261,6 +261,7 @@ export default KAutocomplete.extend({
       this.internalSearch = null
     },
     onPaste (event: ClipboardEvent) {
+      this.$emit('paste', event)
       if (!this.multiple || this.searchIsDirty) return
 
       const pastedItemText = event.clipboardData?.getData('text/vnd.kdutify.autocomplete.item+plain')

package/src/components/KData/KData.ts

@@ -30,12 +30,10 @@ export default Kdu.extend({
     } as PropValidator<Partial<DataOptions>>,
     sortBy: {
       type: [String, Array],
-      default: () => [],
-    } as PropValidator<string | string[]>,
+    } as PropValidator<string | string[] | undefined>,
     sortDesc: {
       type: [Boolean, Array],
-      default: () => [],
-    } as PropValidator<boolean | boolean[]>,
+    } as PropValidator<boolean | boolean[] | undefined>,
     customSort: {
       type: Function,
       default: sortItems,

package/src/components/KDataIterator/KDataIterator.ts

@@ -161,12 +161,12 @@ export default mixins(
 
   methods: {
     onKeyDown (e: KeyboardEvent): void {
-      if (e.keyCode !== keyCodes.shift) return
-      this.shiftKeyDown = true
+      this.shiftKeyDown = e.keyCode === keyCodes.shift || e.shiftKey
     },
     onKeyUp (e: KeyboardEvent): void {
-      if (e.keyCode !== keyCodes.shift) return
-      this.shiftKeyDown = false
+      if (e.keyCode === keyCodes.shift || !e.shiftKey) {
+        this.shiftKeyDown = false
+      }
     },
     toggleSelectAll (value: boolean): void {
       const selection = Object.assign({}, this.selection)
@@ -256,13 +256,13 @@ export default mixins(
     },
     genEmpty (originalItemsLength: number, filteredItemsLength: number) {
       if (originalItemsLength === 0 && this.loading) {
-        const loading = this.$slots.loading || this.$kdutify.lang.t(this.loadingText)
+        const loading = getSlot(this, 'loading') || this.$kdutify.lang.t(this.loadingText)
         return this.genEmptyWrapper(loading)
       } else if (originalItemsLength === 0) {
-        const noData = this.$slots['no-data'] || this.$kdutify.lang.t(this.noDataText)
+        const noData = getSlot(this, 'noData') || this.$kdutify.lang.t(this.noDataText)
         return this.genEmptyWrapper(noData)
       } else if (filteredItemsLength === 0) {
-        const noResults = this.$slots['no-results'] || this.$kdutify.lang.t(this.noResultsText)
+        const noResults = getSlot(this, 'noResults') || this.$kdutify.lang.t(this.noResultsText)
         return this.genEmptyWrapper(noResults)
       }