kdutify 2.6.1 → 2.7.2

package/src/components/KDataTable/KDataTable.ts

@@ -13,7 +13,9 @@ import {
   DataItemsPerPageOption,
   ItemGroup,
   RowClassFunction,
+  RowStyleFunction,
   DataTableItemProps,
+  DataTableFilterMode,
 } from 'kdutify/types'
 
 // Components
@@ -31,6 +33,7 @@ import MobileRow from './MobileRow'
 
 // Mixins
 import Loadable from '../../mixins/loadable'
+import Mouse from '../../mixins/mouse'
 
 // Directives
 import ripple from '../../directives/ripple'
@@ -39,7 +42,7 @@ import ripple from '../../directives/ripple'
 import mixins from '../../util/mixins'
 import { deepEqual, getObjectValueByPath, getPrefixedScopedSlots, getSlot, defaultFilter, camelizeObjectKeys, getPropertyFromItem } from '../../util/helpers'
 import { breaking } from '../../util/console'
-import { mergeClasses } from '../../util/mergeData'
+import { mergeClasses, mergeStyles } from '../../util/mergeData'
 
 function filterFn (item: any, search: string | null, filter: DataTableFilterFunction) {
   return (header: DataTableHeader) => {
@@ -53,27 +56,46 @@ function searchTableItems (
   search: string | null,
   headersWithCustomFilters: DataTableHeader[],
   headersWithoutCustomFilters: DataTableHeader[],
-  customFilter: DataTableFilterFunction
+  customFilter: DataTableFilterFunction,
+  filterMode: DataTableFilterMode,
 ) {
   search = typeof search === 'string' ? search.trim() : null
 
-  return items.filter(item => {
-    // Headers with custom filters are evaluated whether or not a search term has been provided.
-    // We need to match every filter to be included in the results.
-    const matchesColumnFilters = headersWithCustomFilters.every(filterFn(item, search, defaultFilter))
+  if (filterMode === 'union') {
+    // If the `search` property is empty and there are no custom filters in use, there is nothing to do.
+    if (!(search && headersWithoutCustomFilters.length) && !headersWithCustomFilters.length) return items
 
-    // Headers without custom filters are only filtered by the `search` property if it is defined.
-    // We only need a single column to match the search term to be included in the results.
-    const matchesSearchTerm = !search || headersWithoutCustomFilters.some(filterFn(item, search, customFilter))
+    return items.filter(item => {
+      // Headers with custom filters are evaluated whether or not a search term has been provided.
+      if (headersWithCustomFilters.length && headersWithCustomFilters.every(filterFn(item, search, defaultFilter))) {
+        return true
+      }
+
+      // Otherwise, the `search` property is used to filter columns without a custom filter.
+      return (search && headersWithoutCustomFilters.some(filterFn(item, search, customFilter)))
+    })
+  } else if (filterMode === 'intersection') {
+    return items.filter(item => {
+      // Headers with custom filters are evaluated whether or not a search term has been provided.
+      // We need to match every filter to be included in the results.
+      const matchesColumnFilters = headersWithCustomFilters.every(filterFn(item, search, defaultFilter))
 
-    return matchesColumnFilters && matchesSearchTerm
-  })
+      // Headers without custom filters are only filtered by the `search` property if it is defined.
+      // We only need a single column to match the search term to be included in the results.
+      const matchesSearchTerm = !search || headersWithoutCustomFilters.some(filterFn(item, search, customFilter))
+
+      return matchesColumnFilters && matchesSearchTerm
+    })
+  } else {
+    return items
+  }
 }
 
 /* @kdujs/component */
 export default mixins(
   KDataIterator,
   Loadable,
+  Mouse,
 ).extend({
   name: 'k-data-table',
 
@@ -108,10 +130,18 @@ export default mixins(
       type: Function,
       default: defaultFilter,
     } as PropValidator<typeof defaultFilter>,
+    filterMode: {
+      type: String,
+      default: 'intersection',
+    } as PropValidator<DataTableFilterMode>,
     itemClass: {
       type: [String, Function],
       default: () => '',
     } as PropValidator<RowClassFunction | string>,
+    itemStyle: {
+      type: [String, Function],
+      default: () => '',
+    } as PropValidator<RowStyleFunction | string>,
     loaderHeight: {
       type: [Number, String],
       default: 4,
@@ -180,6 +210,9 @@ export default mixins(
 
       return itemsPerPage
     },
+    groupByText (): string {
+      return this.headers?.find(header => header.value === this.internalGroupBy?.[0])?.text ?? ''
+    },
   },
 
   created () {
@@ -218,15 +251,38 @@ export default mixins(
       this.widths = Array.from(this.$el.querySelectorAll('th')).map(e => e.clientWidth)
     },
     customFilterWithColumns (items: any[], search: string) {
-      return searchTableItems(items, search, this.headersWithCustomFilters, this.headersWithoutCustomFilters, this.customFilter)
+      return searchTableItems(
+        items,
+        search,
+        this.headersWithCustomFilters,
+        this.headersWithoutCustomFilters,
+        this.customFilter,
+        this.filterMode
+      )
     },
     customSortWithHeaders (items: any[], sortBy: string[], sortDesc: boolean[], locale: string) {
       return this.customSort(items, sortBy, sortDesc, locale, this.columnSorters)
     },
     createItemProps (item: any, index: number): DataTableItemProps {
-      const props = KDataIterator.options.methods.createItemProps.call(this, item, index)
+      const data = {
+        ...KDataIterator.options.methods.createItemProps.call(this, item, index),
+        headers: this.computedHeaders,
+      }
 
-      return Object.assign(props, { headers: this.computedHeaders })
+      return {
+        ...data,
+        attrs: {
+          class: {
+            'k-data-table__selected': data.isSelected,
+          },
+        },
+        on: {
+          ...this.getDefaultMouseEventHandlers(':row', () => data, true),
+          // TODO: the first argument should be the event, and the second argument should be data,
+          // but this is a breaking change so it's for v3
+          click: (event: MouseEvent) => this.$emit('click:row', item, data, event),
+        },
+      }
     },
     genCaption (props: DataScopeProps) {
       if (this.caption) return [this.$createElement('caption', [this.caption])]
@@ -374,7 +430,7 @@ export default mixins(
         const column = this.$createElement('td', {
           staticClass: 'text-start',
           attrs: this.colspanAttrs,
-        }, [toggle, `${props.options.groupBy[0]}: ${group}`, remove])
+        }, [toggle, `${this.groupByText}: ${group}`, remove])
 
         children.unshift(this.$createElement('template', { slot: 'column.header' }, [column]))
       }
@@ -498,6 +554,7 @@ export default mixins(
           { ...classes, 'k-data-table__selected': data.isSelected },
           getPropertyFromItem(item, this.itemClass)
         ),
+        style: mergeStyles({}, getPropertyFromItem(item, this.itemStyle)),
         props: {
           headers: this.computedHeaders,
           hideDefaultHeader: this.hideDefaultHeader,
@@ -506,13 +563,7 @@ export default mixins(
           rtl: this.$kdutify.rtl,
         },
         scopedSlots,
-        on: {
-          // TODO: for click, the first argument should be the event, and the second argument should be data,
-          // but this is a breaking change so it's for v3
-          click: () => this.$emit('click:row', item, data),
-          contextmenu: (event: MouseEvent) => this.$emit('contextmenu:row', event, data),
-          dblclick: (event: MouseEvent) => this.$emit('dblclick:row', event, data),
-        },
+        on: data.on,
       })
     },
     genBody (props: DataScopeProps): KNode | string | KNodeChildren {
@@ -596,6 +647,7 @@ export default mixins(
         props: simpleProps,
         class: {
           'k-data-table--mobile': this.isMobile,
+          'k-data-table--selectable': this.showSelect,
         },
       }, [
         this.proxySlot('top', getSlot(this, 'top', {

package/src/components/KDataTable/KDataTableHeaderDesktop.ts

@@ -73,7 +73,7 @@ export default mixins(header).extend({
       }
 
       children.push(
-        this.$scopedSlots[header.value]
+        this.$scopedSlots.hasOwnProperty(header.value)
           ? this.$scopedSlots[header.value]!({ header })
           : this.$createElement('span', [header.text])
       )

package/src/components/KDataTable/KEditDialog.ts

@@ -6,7 +6,7 @@ import Returnable from '../../mixins/returnable'
 import Themeable from '../../mixins/themeable'
 
 // Utils
-import { keyCodes } from '../../util/helpers'
+import { getSlot, keyCodes } from '../../util/helpers'
 
 // Component
 import KBtn from '../KBtn'
@@ -96,7 +96,7 @@ export default mixins(Returnable, Themeable).extend({
           },
         },
         ref: 'content',
-      }, [this.$slots.input])
+      }, getSlot(this, 'input'))
     },
   },
 
@@ -127,7 +127,7 @@ export default mixins(Returnable, Themeable).extend({
           }, [
             h('span', {
               staticClass: 'k-small-dialog__activator__content',
-            }, this.$slots.default),
+            }, getSlot(this)),
           ])
         },
       },

package/src/components/KDataTable/KSimpleTable.ts

@@ -1,6 +1,6 @@
 import './KSimpleTable.sass'
 
-import { convertToUnit } from '../../util/helpers'
+import { convertToUnit, getSlot } from '../../util/helpers'
 import Themeable from '../../mixins/themeable'
 import mixins from '../../util/mixins'
 import { KNode } from 'kdu'
@@ -35,7 +35,7 @@ export default mixins(Themeable).extend({
           height: convertToUnit(this.height),
         },
       }, [
-        this.$createElement('table', this.$slots.default),
+        this.$createElement('table', getSlot(this)),
       ])
     },
   },
@@ -45,9 +45,9 @@ export default mixins(Themeable).extend({
       staticClass: 'k-data-table',
       class: this.classes,
     }, [
-      this.$slots.top,
+      getSlot(this, 'top'),
       this.genWrapper(),
-      this.$slots.bottom,
+      getSlot(this, 'bottom'),
     ])
   },
 })

package/src/components/KDataTable/KVirtualTable.ts

@@ -9,7 +9,7 @@ import { PropValidator } from 'kdu/types/options'
 import mixins from '../../util/mixins'
 
 // Utiltiies
-import { convertToUnit, debounce } from '../../util/helpers'
+import { convertToUnit, debounce, getSlot } from '../../util/helpers'
 
 // Types
 const baseMixins = mixins(KSimpleTable)
@@ -155,9 +155,9 @@ export default baseMixins.extend<options>().extend({
       staticClass: 'k-data-table k-virtual-table',
       class: this.classes,
     }, [
-      this.$slots.top,
+      getSlot(this, 'top'),
       this.genWrapper(),
-      this.$slots.bottom,
+      getSlot(this, 'bottom'),
     ])
   },
 })

package/src/components/KDataTable/MobileRow.ts

@@ -27,8 +27,8 @@ export default Kdu.extend({
       const value = getObjectValueByPath(props.item, header.value)
 
       const slotName = header.value
-      const scopedSlot = data.scopedSlots && data.scopedSlots[slotName]
-      const regularSlot = computedSlots[slotName]
+      const scopedSlot = data.scopedSlots && data.scopedSlots.hasOwnProperty(slotName) && data.scopedSlots[slotName]
+      const regularSlot = computedSlots.hasOwnProperty(slotName) && computedSlots[slotName]
 
       if (scopedSlot) {
         children.push(scopedSlot({

package/src/components/KDataTable/Row.ts

@@ -30,8 +30,8 @@ export default Kdu.extend({
       const value = getObjectValueByPath(props.item, header.value)
 
       const slotName = header.value
-      const scopedSlot = data.scopedSlots && data.scopedSlots[slotName]
-      const regularSlot = computedSlots[slotName]
+      const scopedSlot = data.scopedSlots && data.scopedSlots.hasOwnProperty(slotName) && data.scopedSlots[slotName]
+      const regularSlot = computedSlots.hasOwnProperty(slotName) && computedSlots[slotName]
 
       if (scopedSlot) {
         children.push(...wrapInArray(scopedSlot({

package/src/components/KDatePicker/KDatePicker.ts

@@ -231,7 +231,7 @@ export default mixins(
         year: { year: 'numeric', timeZone: 'UTC' },
         month: { month: 'long', timeZone: 'UTC' },
         date: { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' },
-      }
+      } as const
 
       const titleDateFormatter = createNativeLocaleFormatter(this.currentLocale, titleFormats[this.type], {
         start: 0,
@@ -352,8 +352,11 @@ export default mixins(
       }
     },
     monthClick (value: string) {
-      this.inputYear = parseInt(value.split('-')[0], 10)
-      this.inputMonth = parseInt(value.split('-')[1], 10) - 1
+      const [year, month] = value.split('-')
+
+      this.inputYear = parseInt(year, 10)
+      this.inputMonth = parseInt(month, 10) - 1
+
       if (this.type === 'date') {
         if (this.inputDay) {
           this.inputDay = Math.min(this.inputDay, daysInMonth(this.inputYear, this.inputMonth + 1))
@@ -369,9 +372,12 @@ export default mixins(
       }
     },
     dateClick (value: string) {
-      this.inputYear = parseInt(value.split('-')[0], 10)
-      this.inputMonth = parseInt(value.split('-')[1], 10) - 1
-      this.inputDay = parseInt(value.split('-')[2], 10)
+      const [year, month, day] = value.split('-')
+
+      this.inputYear = parseInt(year, 10)
+      this.inputMonth = parseInt(month, 10) - 1
+      this.inputDay = parseInt(day, 10)
+
       this.emitInput(this.inputDate)
     },
     genPickerTitle (): KNode {

package/src/components/KDatePicker/KDatePickerHeader.ts

@@ -12,6 +12,7 @@ import Themeable from '../../mixins/themeable'
 // Utils
 import { createNativeLocaleFormatter, monthChange } from './util'
 import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { KNode, PropType } from 'kdu'
@@ -117,7 +118,7 @@ export default mixins(
         on: {
           click: () => this.$emit('toggle'),
         },
-      }, [this.$slots.default || this.formatter(String(this.value))])])
+      }, getSlot(this) || [this.formatter(String(this.value))])])
 
       const transition = this.$createElement('transition', {
         props: {

package/src/components/KDialog/KDialog.sass

@@ -7,7 +7,9 @@
   overflow-y: auto
   pointer-events: auto
   transition: .3s map-get($transition, 'fast-in-fast-out')
+  width: 100%
   z-index: inherit
+  outline: none
   +elevation($dialog-elevation)
 
   &:not(.k-dialog--fullscreen)
@@ -45,7 +47,6 @@
   transition: .2s map-get($transition, 'fast-in-fast-out'), z-index 1ms
   width: 100%
   z-index: 6
-  outline: none
 
 .k-dialog__container
   display: none
@@ -62,7 +63,6 @@
 .k-dialog--fullscreen
   border-radius: 0
   margin: 0
-  width: 100%
   height: 100%
   position: fixed
   overflow-y: auto

package/src/components/KDialog/KDialog.ts

@@ -11,7 +11,6 @@ import Detachable from '../../mixins/detachable'
 import Overlayable from '../../mixins/overlayable'
 import Returnable from '../../mixins/returnable'
 import Stackable from '../../mixins/stackable'
-import Toggleable from '../../mixins/toggleable'
 
 // Directives
 import ClickOutside from '../../directives/click-outside'
@@ -28,13 +27,12 @@ import {
 import { KNode, KNodeData } from 'kdu'
 
 const baseMixins = mixins(
-  Activatable,
   Dependent,
   Detachable,
   Overlayable,
   Returnable,
   Stackable,
-  Toggleable
+  Activatable,
 )
 
 /* @kdujs/component */
@@ -48,10 +46,7 @@ export default baseMixins.extend({
     disabled: Boolean,
     fullscreen: Boolean,
     light: Boolean,
-    maxWidth: {
-      type: [String, Number],
-      default: 'none',
-    },
+    maxWidth: [String, Number],
     noClickAnimation: Boolean,
     origin: {
       type: String,
@@ -67,10 +62,7 @@ export default baseMixins.extend({
       type: [String, Boolean],
       default: 'dialog-transition',
     },
-    width: {
-      type: [String, Number],
-      default: 'auto',
-    },
+    width: [String, Number],
   },
 
   data () {
@@ -78,7 +70,6 @@ export default baseMixins.extend({
       activatedBy: null as EventTarget | null,
       animate: false,
       animateTimeout: -1,
-      isActive: !!this.value,
       stackMinZIndex: 200,
       previousActiveElement: null as HTMLElement | null,
     }
@@ -187,9 +178,9 @@ export default baseMixins.extend({
       // Double nextTick to wait for lazy content to be generated
       this.$nextTick(() => {
         this.$nextTick(() => {
-          if (!this.$refs.content.contains(document.activeElement)) {
+          if (!this.$refs.dialog?.contains(document.activeElement)) {
             this.previousActiveElement = document.activeElement as HTMLElement
-            this.$refs.content.focus()
+            this.$refs.dialog?.focus()
           }
           this.bind()
         })
@@ -230,10 +221,11 @@ export default baseMixins.extend({
 
       if (
         !!target &&
+        this.$refs.dialog &&
         // It isn't the document or the dialog body
-        ![document, this.$refs.content].includes(target) &&
+        ![document, this.$refs.dialog].includes(target) &&
         // It isn't inside the dialog body
-        !this.$refs.content.contains(target) &&
+        !this.$refs.dialog.contains(target) &&
         // We're the topmost dialog
         this.activeZIndex >= this.getMaxZIndex() &&
         // It isn't inside a dependent element (like a menu)
@@ -241,8 +233,8 @@ export default baseMixins.extend({
         // So we must have focused something outside the dialog and its children
       ) {
         // Find and focus the first available element inside the dialog
-        const focusable = this.$refs.content.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
-        const el = [...focusable].find(el => !el.hasAttribute('disabled')) as HTMLElement | undefined
+        const focusable = this.$refs.dialog.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])')
+        const el = [...focusable].find(el => !el.hasAttribute('disabled') && !el.matches('[tabindex="-1"]')) as HTMLElement | undefined
         el && el.focus()
       }
     },
@@ -258,8 +250,8 @@ export default baseMixins.extend({
           this.$createElement('div', {
             class: this.contentClasses,
             attrs: {
-              role: 'document',
-              tabindex: this.isActive ? 0 : undefined,
+              role: 'dialog',
+              'aria-modal': this.hideOverlay ? undefined : 'true',
               ...this.getScopeIdAttrs(),
             },
             on: { keydown: this.onKeydown },
@@ -285,6 +277,9 @@ export default baseMixins.extend({
     genInnerContent () {
       const data: KNodeData = {
         class: this.classes,
+        attrs: {
+          tabindex: this.isActive ? 0 : undefined,
+        },
         ref: 'dialog',
         directives: [
           {
@@ -305,8 +300,8 @@ export default baseMixins.extend({
       if (!this.fullscreen) {
         data.style = {
           ...data.style as object,
-          maxWidth: this.maxWidth === 'none' ? undefined : convertToUnit(this.maxWidth),
-          width: this.width === 'auto' ? undefined : convertToUnit(this.width),
+          maxWidth: convertToUnit(this.maxWidth),
+          width: convertToUnit(this.width),
         }
       }
 
@@ -323,7 +318,6 @@ export default baseMixins.extend({
           this.attach === true ||
           this.attach === 'attach',
       },
-      attrs: { role: 'dialog' },
     }, [
       this.genActivator(),
       this.genContent(),

package/src/components/KExpansionPanel/KExpansionPanel.sass

@@ -24,8 +24,8 @@
   &.k-expansion-panels--hover
     > .k-expansion-panel
       > .k-expansion-panel-header
-        &:hover
-          +states($material)
+        &:hover::before
+          opacity: map-deep-get($material, 'states', 'hover')
 
 // Block
 .k-expansion-panels

package/src/components/KExpansionPanel/KExpansionPanelContent.ts

@@ -67,7 +67,7 @@ export default baseMixins.extend<options>().extend({
           value: this.isActive,
         }],
       }), [
-        h('div', { class: 'k-expansion-panel-content__wrap' }, getSlot(this)),
+        h('div', { class: 'k-expansion-panel-content__wrap' }, getSlot(this, 'default', { open: this.isActive })),
       ]),
     ]))
   },

package/src/components/KExpansionPanel/KExpansionPanelHeader.ts

@@ -80,7 +80,7 @@ export default baseMixins.extend<options>().extend({
       this.$emit('click', e)
     },
     genIcon () {
-      const icon = getSlot(this, 'actions') ||
+      const icon = getSlot(this, 'actions', { open: this.isActive }) ||
         [this.$createElement(KIcon, this.expandIcon)]
 
       return this.$createElement(KFadeTransition, [

package/src/components/KFileInput/KFileInput.ts

@@ -204,7 +204,7 @@ export default KTextField.extend({
 
       // This solves an issue in Safari where
       // nothing happens when adding a file
-      // do to the input event not firing
+      // due to the input event not firing
       delete input.data!.on!.input
       input.data!.on!.change = this.onInput
 
@@ -258,7 +258,12 @@ export default KTextField.extend({
 
       node.data!.on = {
         ...(node.data!.on || {}),
-        click: () => this.$refs.input.click(),
+        click: (e: MouseEvent) => {
+          // Clicking the label already delegates to input element, so we shouldn't click it twice
+          if (e.target && (e.target as HTMLElement).nodeName === 'LABEL') return
+
+          this.$refs.input.click()
+        },
       }
 
       return node

package/src/components/KFooter/KFooter.ts

@@ -10,7 +10,7 @@ import SSRBootable from '../../mixins/ssr-bootable'
 
 // Utilities
 import mixins from '../../util/mixins'
-import { convertToUnit } from '../../util/helpers'
+import { convertToUnit, getSlot } from '../../util/helpers'
 
 // Types
 import { KNode } from 'kdu/types/knode'
@@ -110,6 +110,6 @@ export default mixins(
       style: this.styles,
     })
 
-    return h(this.tag, data, this.$slots.default)
+    return h(this.tag, data, getSlot(this))
   },
 })

package/src/components/KForm/KForm.ts

@@ -8,6 +8,7 @@ import { provide as RegistrableProvide } from '../../mixins/registrable'
 
 // Helpers
 import { KNode } from 'kdu'
+import { getSlot } from '../../util/helpers'
 
 type ErrorBag = Record<number, boolean>
 type KInputInstance = InstanceType<typeof KInput>
@@ -139,6 +140,6 @@ export default mixins(
       on: {
         submit: (e: Event) => this.$emit('submit', e),
       },
-    }, this.$slots.default)
+    }, getSlot(this))
   },
 })

package/src/components/KImg/KImg.ts

@@ -18,6 +18,7 @@ import Themeable from '../../mixins/themeable'
 import mixins from '../../util/mixins'
 import mergeData from '../../util/mergeData'
 import { consoleWarn } from '../../util/console'
+import { getSlot } from '../../util/helpers'
 
 // not intended for public use, this is passed in by kdutify-loader
 export interface srcObject {
@@ -250,11 +251,12 @@ export default mixins(
       return content
     },
     __genPlaceholder (): KNode | void {
-      if (this.$slots.placeholder) {
+      const slot = getSlot(this, 'placeholder')
+      if (slot) {
         const placeholder = this.isLoading
           ? [this.$createElement('div', {
             staticClass: 'k-image__placeholder',
-          }, this.$slots.placeholder)]
+          }, slot)]
           : []
 
         if (!this.transition) return placeholder[0]

package/src/components/KInput/KInput.sass

@@ -100,20 +100,17 @@
 
   &__slot
     align-items: center
-    color: inherit
     display: flex
     margin-bottom: $input-slot-margin-bottom
     min-height: inherit
     position: relative
     transition: $primary-transition
+    transition-property: height, min-height
     width: 100%
 
   &--dense > .k-input__control > .k-input__slot
     margin-bottom: $input-dense-slot-margin-bottom
 
-  &--is-disabled:not(.k-input--is-readonly)
-    pointer-events: none
-
   &--is-loading > .k-input__control > .k-input__slot
     &:before,
     &:after