kdutify 2.6.1 → 2.7.3

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

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 {