@kokoccc/vuetify 1.0.1

package/src/components/VData/index.ts

@@ -0,0 +1,5 @@
+import VData from './VData'
+
+export { VData }
+
+export default VData

package/src/components/VDataIterator/VDataFooter.sass

@@ -0,0 +1,71 @@
+@import './_variables.scss'
+
+// Block
+.v-data-footer
+  display: flex
+  flex-wrap: wrap
+  align-items: center
+  font-size: $data-footer-font-size
+  padding: $data-footer-padding
+
+  .v-btn
+    color: inherit
+
+// Elements
+.v-data-footer__icons-before
+  .v-btn:last-child
+    +ltr()
+      margin-right: $data-footer-icons-before-btn-margin-end
+
+    +rtl()
+      margin-left: $data-footer-icons-before-btn-margin-end
+
+.v-data-footer__icons-after
+  .v-btn:first-child
+    +ltr()
+      margin-left: $data-footer-icons-after-btn-margin-start
+
+    +rtl()
+      margin-right: $data-footer-icons-after-btn-margin-start
+
+.v-data-footer__pagination
+  display: block
+  text-align: center
+
+  +ltr()
+    margin: 0 $data-footer-pagination-margin-end 0 $data-footer-pagination-margin-start
+
+  +rtl()
+    margin: 0 $data-footer-pagination-margin-start 0 $data-footer-pagination-margin-end
+
+.v-data-footer__select
+  display: flex
+  align-items: center
+  flex: 0 0 0
+  justify-content: flex-end
+  white-space: nowrap
+
+  +ltr()
+    margin-left: auto
+    margin-right: $data-footer-select-margin-end
+
+  +rtl()
+    margin-left: $data-footer-select-margin-end
+    margin-right: auto
+
+  .v-select
+    flex: 0 1 0
+    padding: 0
+    position: initial
+
+    +ltr()
+      margin: $data-footer-select-select-margin-y 0 $data-footer-select-select-margin-y $data-footer-select-select-margin-start
+
+    +rtl()
+      margin: $data-footer-select-select-margin-y $data-footer-select-select-margin-start $data-footer-select-select-margin-y 0
+
+  .v-select__selections
+    flex-wrap: nowrap
+
+    .v-select__selection--comma
+      font-size: $data-footer-select-selections-comma-font-size

package/src/components/VDataIterator/VDataFooter.ts

@@ -0,0 +1,224 @@
+import './VDataFooter.sass'
+
+// Components
+import VSelect from '../VSelect/VSelect'
+import VIcon from '../VIcon'
+import VBtn from '../VBtn'
+
+// Types
+import { defineComponent, VNode, VNodeChildrenArrayContents, PropType, h } from 'vue'
+import { DataPagination, DataOptions, DataItemsPerPageOption } from 'vuetify/types'
+import { getSlot, normalizeAttrs } from '../../util/helpers'
+
+export default defineComponent({
+  name: 'v-data-footer',
+
+  props: {
+    options: {
+      type: Object as PropType<DataOptions>,
+      required: true,
+    },
+    pagination: {
+      type: Object as PropType<DataPagination>,
+      required: true,
+    },
+    itemsPerPageOptions: {
+      type: Array as PropType<DataItemsPerPageOption[]>,
+      default: () => ([5, 10, 15, -1]),
+    },
+    prevIcon: {
+      type: String,
+      default: '$prev',
+    },
+    nextIcon: {
+      type: String,
+      default: '$next',
+    },
+    firstIcon: {
+      type: String,
+      default: '$first',
+    },
+    lastIcon: {
+      type: String,
+      default: '$last',
+    },
+    itemsPerPageText: {
+      type: String,
+      default: '$vuetify.dataFooter.itemsPerPageText',
+    },
+    itemsPerPageAllText: {
+      type: String,
+      default: '$vuetify.dataFooter.itemsPerPageAll',
+    },
+    showFirstLastPage: Boolean,
+    showCurrentPage: Boolean,
+    disablePagination: Boolean,
+    disableItemsPerPage: Boolean,
+    pageText: {
+      type: String,
+      default: '$vuetify.dataFooter.pageText',
+    },
+  },
+
+  emits: {
+    'update:options': (options: DataOptions) => true,
+  },
+
+  computed: {
+    disableNextPageIcon (): boolean {
+      return this.options.itemsPerPage <= 0 ||
+        this.options.page * this.options.itemsPerPage >= this.pagination.itemsLength ||
+        this.pagination.pageStop < 0
+    },
+    computedDataItemsPerPageOptions (): any[] {
+      return this.itemsPerPageOptions.map(option => {
+        if (typeof option === 'object') return option
+        else return this.genDataItemsPerPageOption(option)
+      })
+    },
+  },
+
+  methods: {
+    updateOptions (obj: object) {
+      this.$emit('update:options', Object.assign({}, this.options, obj))
+    },
+    onFirstPage () {
+      this.updateOptions({ page: 1 })
+    },
+    onPreviousPage () {
+      this.updateOptions({ page: this.options.page - 1 })
+    },
+    onNextPage () {
+      this.updateOptions({ page: this.options.page + 1 })
+    },
+    onLastPage () {
+      this.updateOptions({ page: this.pagination.pageCount })
+    },
+    onChangeItemsPerPage (itemsPerPage: number) {
+      this.updateOptions({ itemsPerPage, page: 1 })
+    },
+    genDataItemsPerPageOption (option: number) {
+      return {
+        text: option === -1 ? this.$vuetify.lang.t(this.itemsPerPageAllText) : String(option),
+        value: option,
+      }
+    },
+    genItemsPerPageSelect () {
+      let value = this.options.itemsPerPage
+      const computedIPPO = this.computedDataItemsPerPageOptions
+
+      if (computedIPPO.length <= 1) return null
+
+      if (!computedIPPO.find(ippo => ippo.value === value)) value = computedIPPO[0]
+
+      return h('div', {
+        class: 'v-data-footer__select',
+      }, [
+        this.$vuetify.lang.t(this.itemsPerPageText),
+        h(VSelect, normalizeAttrs({
+          'aria-label': this.$vuetify.lang.t(this.itemsPerPageText),
+          disabled: this.disableItemsPerPage,
+          items: computedIPPO,
+          modelValue: value,
+          hideDetails: true,
+          auto: true,
+          minWidth: '75px',
+          'onUpdate:modelValue': this.onChangeItemsPerPage,
+        })),
+      ])
+    },
+    genPaginationInfo () {
+      let children: VNodeChildrenArrayContents = ['–']
+      const itemsLength: number = this.pagination.itemsLength
+      let pageStart: number = this.pagination.pageStart
+      let pageStop: number = this.pagination.pageStop
+
+      if (this.pagination.itemsLength && this.pagination.itemsPerPage) {
+        pageStart = this.pagination.pageStart + 1
+        pageStop = itemsLength < this.pagination.pageStop || this.pagination.pageStop < 0
+          ? itemsLength
+          : this.pagination.pageStop
+
+        const pageTextSlot = getSlot(this, 'page-text', { pageStart, pageStop, itemsLength })
+        children = pageTextSlot
+          ? [pageTextSlot]
+          : [this.$vuetify.lang.t(this.pageText, pageStart, pageStop, itemsLength)]
+      } else {
+        const pageTextSlot = getSlot(this, 'page-text', { pageStart, pageStop, itemsLength })
+        if (pageTextSlot) {
+          children = [pageTextSlot]
+        }
+      }
+
+      return h('div', {
+        class: 'v-data-footer__pagination',
+      }, children)
+    },
+    genIcon (click: Function, disabled: boolean, label: string, icon: string): VNode {
+      return h(VBtn, {
+        disabled: disabled || this.disablePagination,
+        icon: true,
+        text: true,
+        // dark: this.dark, // TODO: add mixin
+        // light: this.light // TODO: add mixin
+        onClick: click,
+        'aria-label': label, // TODO: Localization
+      }, () => [h(VIcon, {}, () => icon)])
+    },
+    genIcons () {
+      const before: VNodeChildrenArrayContents = []
+      const after: VNodeChildrenArrayContents = []
+
+      before.push(this.genIcon(
+        this.onPreviousPage,
+        this.options.page === 1,
+        this.$vuetify.lang.t('$vuetify.dataFooter.prevPage'),
+        this.$vuetify.rtl ? this.nextIcon : this.prevIcon
+      ))
+
+      after.push(this.genIcon(
+        this.onNextPage,
+        this.disableNextPageIcon,
+        this.$vuetify.lang.t('$vuetify.dataFooter.nextPage'),
+        this.$vuetify.rtl ? this.prevIcon : this.nextIcon
+      ))
+
+      if (this.showFirstLastPage) {
+        before.unshift(this.genIcon(
+          this.onFirstPage,
+          this.options.page === 1,
+          this.$vuetify.lang.t('$vuetify.dataFooter.firstPage'),
+          this.$vuetify.rtl ? this.lastIcon : this.firstIcon
+        ))
+
+        after.push(this.genIcon(
+          this.onLastPage,
+          this.options.page >= this.pagination.pageCount || this.options.itemsPerPage === -1,
+          this.$vuetify.lang.t('$vuetify.dataFooter.lastPage'),
+          this.$vuetify.rtl ? this.firstIcon : this.lastIcon
+        ))
+      }
+
+      return [
+        h('div', {
+          class: 'v-data-footer__icons-before',
+        }, before),
+        this.showCurrentPage && h('span', [this.options.page.toString()]),
+        h('div', {
+          class: 'v-data-footer__icons-after',
+        }, after),
+      ]
+    },
+  },
+
+  render (): VNode {
+    return h('div', {
+      class: 'v-data-footer',
+    }, [
+      getSlot(this, 'prepend'),
+      this.genItemsPerPageSelect(),
+      this.genPaginationInfo(),
+      this.genIcons(),
+    ])
+  },
+})

package/src/components/VDataIterator/VDataIterator.ts

@@ -0,0 +1,370 @@
+// Components
+import { VData } from '../VData'
+import VDataFooter from './VDataFooter'
+
+// Mixins
+import Mobile from '../../mixins/mobile'
+import Themeable from '../../mixins/themeable'
+
+// Helpers
+import mixins from '../../util/mixins'
+import { deepEqual, getObjectValueByPath, getPrefixedScopedSlots, getSlot, camelizeObjectKeys, keyCodes } from '../../util/helpers'
+import { breaking, removed } from '../../util/console'
+
+// Types
+import { h, VNode, VNodeChildren, PropType, defineComponent } from 'vue'
+import { DataItemProps, DataScopeProps } from 'vuetify/types'
+
+/* @vue/component */
+export default defineComponent({
+  name: 'v-data-iterator',
+
+  mixins: [Mobile, Themeable],
+
+  props: {
+    ...VData.props, // TODO: filter out props not used
+    itemKey: {
+      type: String,
+      default: 'id',
+    },
+    modelValue: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+    singleSelect: Boolean,
+    expanded: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+    mobileBreakpoint: {
+      ...Mobile.props.mobileBreakpoint,
+      default: 600,
+    },
+    singleExpand: Boolean,
+    loading: [Boolean, String],
+    noResultsText: {
+      type: String,
+      default: '$vuetify.dataIterator.noResultsText',
+    },
+    noDataText: {
+      type: String,
+      default: '$vuetify.noDataText',
+    },
+    loadingText: {
+      type: String,
+      default: '$vuetify.dataIterator.loadingText',
+    },
+    hideDefaultFooter: Boolean,
+    footerProps: Object,
+    selectableKey: {
+      type: String,
+      default: 'isSelectable',
+    },
+  },
+
+  emits: [
+    'update:modelValue',
+    'update:expanded',
+    'toggle-select-all',
+    'item-selected',
+    'item-expanded',
+    'update:options',
+    'update:page',
+    'update:items-per-page',
+    'update:sort-by',
+    'update:sort-desc',
+    'update:group-by',
+    'update:group-desc',
+    'pagination',
+    'current-items',
+    'page-count',
+  ],
+
+  data: () => ({
+    selection: {} as Record<string, any>,
+    expansion: {} as Record<string, boolean>,
+    internalCurrentItems: [] as any[],
+    shiftKeyDown: false,
+    lastEntry: -1,
+  }),
+
+  computed: {
+    everyItem (): boolean {
+      return !!this.selectableItems.length && this.selectableItems.every((i: any) => this.isSelected(i))
+    },
+    someItems (): boolean {
+      return this.selectableItems.some((i: any) => this.isSelected(i))
+    },
+    sanitizedFooterProps (): Record<string, any> {
+      return camelizeObjectKeys(this.footerProps)
+    },
+    selectableItems (): any[] {
+      return this.internalCurrentItems.filter(item => this.isSelectable(item))
+    },
+  },
+
+  watch: {
+    modelValue: {
+      handler (value: any[]) {
+        if (!value) return
+
+        this.selection = value.reduce((selection, item) => {
+          selection[getObjectValueByPath(item, this.itemKey)] = item
+          return selection
+        }, {})
+      },
+      immediate: true,
+    },
+    selection (value: Record<string, boolean>, old: Record<string, boolean>) {
+      if (deepEqual(Object.keys(value), Object.keys(old))) return
+
+      this.$emit('update:modelValue', Object.values(value))
+    },
+    expanded: {
+      handler (value: any[]) {
+        this.expansion = value.reduce((expansion, item) => {
+          expansion[getObjectValueByPath(item, this.itemKey)] = true
+          return expansion
+        }, {})
+      },
+      immediate: true,
+    },
+    expansion (value: Record<string, boolean>, old: Record<string, boolean>) {
+      if (deepEqual(value, old)) return
+      const keys = Object.keys(value).filter(k => value[k])
+      const expanded = !keys.length ? [] : this.items.filter(i => keys.includes(String(getObjectValueByPath(i, this.itemKey))))
+      this.$emit('update:expanded', expanded)
+    },
+  },
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+      ['disable-initial-sort', 'sort-by'],
+      ['filter', 'custom-filter'],
+      ['pagination', 'options'],
+      ['total-items', 'server-items-length'],
+      ['hide-actions', 'hide-default-footer'],
+      ['rows-per-page-items', 'footer-props.items-per-page-options'],
+      ['rows-per-page-text', 'footer-props.items-per-page-text'],
+      ['prev-icon', 'footer-props.prev-icon'],
+      ['next-icon', 'footer-props.next-icon'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+
+    const removedProps = [
+      'expand',
+      'content-class',
+      'content-props',
+      'content-tag',
+    ]
+
+    /* istanbul ignore next */
+    removedProps.forEach(prop => {
+      if (this.$attrs.hasOwnProperty(prop)) removed(prop)
+    })
+  },
+
+  mounted () {
+    window.addEventListener('keydown', this.onKeyDown)
+    window.addEventListener('keyup', this.onKeyUp)
+  },
+  beforeUnmount () {
+    window.removeEventListener('keydown', this.onKeyDown)
+    window.removeEventListener('keyup', this.onKeyUp)
+  },
+
+  methods: {
+    onKeyDown (e: KeyboardEvent): void {
+      this.shiftKeyDown = e.keyCode === keyCodes.shift || e.shiftKey
+    },
+    onKeyUp (e: KeyboardEvent): void {
+      if (e.keyCode === keyCodes.shift || !e.shiftKey) {
+        this.shiftKeyDown = false
+      }
+    },
+    toggleSelectAll (value: boolean): void {
+      const selection = Object.assign({}, this.selection)
+
+      for (let i = 0; i < this.selectableItems.length; i++) {
+        const item = this.selectableItems[i]
+
+        if (!this.isSelectable(item)) continue
+
+        const key = getObjectValueByPath(item, this.itemKey)
+        if (value) selection[key] = item
+        else delete selection[key]
+      }
+
+      this.selection = selection
+      this.$emit('toggle-select-all', { items: this.internalCurrentItems, value })
+    },
+    isSelectable (item: any): boolean {
+      return getObjectValueByPath(item, this.selectableKey) !== false
+    },
+    isSelected (item: any): boolean {
+      return !!this.selection[getObjectValueByPath(item, this.itemKey)] || false
+    },
+    select (item: any, value = true, emit = true): void {
+      if (!this.isSelectable(item)) return
+
+      const selection = this.singleSelect ? {} : Object.assign({}, this.selection)
+      const key = getObjectValueByPath(item, this.itemKey)
+
+      if (value) selection[key] = item
+      else delete selection[key]
+
+      const index = this.selectableItems.findIndex(x => getObjectValueByPath(x, this.itemKey) === key)
+      if (this.lastEntry === -1) this.lastEntry = index
+      else if (this.shiftKeyDown && !this.singleSelect && emit) {
+        const lastEntryKey = getObjectValueByPath(this.selectableItems[this.lastEntry], this.itemKey)
+        const lastEntryKeySelected = Object.keys(this.selection).includes(String(lastEntryKey))
+        this.multipleSelect(lastEntryKeySelected, emit, selection, index)
+      }
+      this.lastEntry = index
+
+      if (this.singleSelect && emit) {
+        const keys = Object.keys(this.selection)
+        const old = keys.length && getObjectValueByPath(this.selection[keys[0]], this.itemKey)
+        old && old !== key && this.$emit('item-selected', { item: this.selection[old], value: false })
+      }
+      this.selection = selection
+      emit && this.$emit('item-selected', { item, value })
+    },
+    multipleSelect (value = true, emit = true, selection: any, index: number): void {
+      const start = index < this.lastEntry ? index : this.lastEntry
+      const end = index < this.lastEntry ? this.lastEntry : index
+      for (let i = start; i <= end; i++) {
+        const currentItem = this.selectableItems[i]
+        const key = getObjectValueByPath(currentItem, this.itemKey)
+        if (value) selection[key] = currentItem
+        else delete selection[key]
+        emit && this.$emit('item-selected', { currentItem, value })
+      }
+    },
+    isExpanded (item: any): boolean {
+      return this.expansion[getObjectValueByPath(item, this.itemKey)] || false
+    },
+    expand (item: any, value = true): void {
+      const expansion = this.singleExpand ? {} : Object.assign({}, this.expansion)
+      const key = getObjectValueByPath(item, this.itemKey)
+
+      if (value) expansion[key] = true
+      else delete expansion[key]
+
+      this.expansion = expansion
+      this.$emit('item-expanded', { item, value })
+    },
+    createItemProps (item: any, index: number): DataItemProps {
+      return {
+        item,
+        index,
+        select: (v: boolean) => this.select(item, v),
+        isSelected: this.isSelected(item),
+        expand: (v: boolean) => this.expand(item, v),
+        isExpanded: this.isExpanded(item),
+        isMobile: this.isMobile,
+      }
+    },
+    genEmptyWrapper (content: VNodeChildren) {
+      return h('div', content)
+    },
+    genEmpty (originalItemsLength: number, filteredItemsLength: number) {
+      if (originalItemsLength === 0 && this.loading) {
+        const loading = getSlot(this, 'loading') || this.$vuetify.lang.t(this.loadingText)
+        return this.genEmptyWrapper(loading)
+      } else if (originalItemsLength === 0) {
+        const noData = getSlot(this, 'noData') || this.$vuetify.lang.t(this.noDataText)
+        return this.genEmptyWrapper(noData)
+      } else if (filteredItemsLength === 0) {
+        const noResults = getSlot(this, 'noResults') || this.$vuetify.lang.t(this.noResultsText)
+        return this.genEmptyWrapper(noResults)
+      }
+
+      return null
+    },
+    genItems (props: DataScopeProps) {
+      const empty = this.genEmpty(props.originalItemsLength, props.pagination.itemsLength)
+      if (empty) return [empty]
+
+      if (this.$slots.default) {
+        return this.$slots.default({
+          ...props,
+          isSelected: this.isSelected,
+          select: this.select,
+          isExpanded: this.isExpanded,
+          isMobile: this.isMobile,
+          expand: this.expand,
+        })
+      }
+
+      if (this.$slots.item) {
+        return props.items.map((item: any, index) => this.$slots.item!(this.createItemProps(
+          item,
+          index
+        )))
+      }
+
+      return []
+    },
+    genFooter (props: DataScopeProps) {
+      if (this.hideDefaultFooter) return null
+
+      const data = {
+        ...this.sanitizedFooterProps,
+        options: props.options,
+        pagination: props.pagination,
+        onUpdateOptions: (value: any) => props.updateOptions(value),
+      }
+
+      const scopedSlots = getPrefixedScopedSlots('footer.', this.$slots)
+
+      return h(VDataFooter, {
+        ...data,
+      }, scopedSlots)
+    },
+    genDefaultScopedSlot (props: any) {
+      const outerProps = {
+        ...props,
+        someItems: this.someItems,
+        everyItem: this.everyItem,
+        toggleSelectAll: this.toggleSelectAll,
+      }
+
+      return h('div', {
+        class: 'v-data-iterator',
+      }, [
+        getSlot(this, 'header', outerProps, true),
+        this.genItems(props),
+        this.genFooter(props),
+        getSlot(this, 'footer', outerProps, true),
+      ])
+    },
+  },
+
+  render (): VNode {
+    return h(VData, {
+      ...this.$props,
+      onUpdateOptions: (v: any, old: any) => !deepEqual(v, old) && this.$emit('update:options', v),
+      onUpdatePage: (v: any) => this.$emit('update:page', v),
+      onUpdateItemsPerPage: (v: any) => this.$emit('update:items-per-page', v),
+      onUpdateSortBy: (v: any) => this.$emit('update:sort-by', v),
+      onUpdateSortDesc: (v: any) => this.$emit('update:sort-desc', v),
+      onUpdateGroupBy: (v: any) => this.$emit('update:group-by', v),
+      onUpdateGroupDesc: (v: any) => this.$emit('update:group-desc', v),
+      onPagination: (v: any, old: any) => !deepEqual(v, old) && this.$emit('pagination', v),
+      onCurrentItems: (v: any[]) => {
+        this.internalCurrentItems = v
+        this.$emit('current-items', v)
+      },
+      onPageCount: (v: number) => this.$emit('page-count', v),
+    }, {
+      default: this.genDefaultScopedSlot,
+    })
+  },
+})