@kokoccc/vuetify 1.0.1

package/src/components/VDataTable/VDataTableHeader.sass

@@ -0,0 +1,80 @@
+// Imports
+@import './_variables.scss'
+
+// Theme
++theme(v-data-table) using ($material)
+  .v-data-table-header
+    th.sortable
+      .v-data-table-header__icon
+        color: map-deep-get($material, 'text', 'disabled')
+
+      &:hover,
+      &.active
+        color: map-deep-get($material, 'text', 'primary')
+
+      &.active
+        .v-data-table-header__icon
+          color: map-deep-get($material, 'text', 'primary')
+
+    &__sort-badge
+      background-color: map-get($material, 'dividers')
+      color: map-deep-get($material, 'text', 'primary')
+
+// Block
+.v-data-table-header
+  th
+    &.sortable
+      pointer-events: auto
+      cursor: pointer
+      outline: 0
+      .v-data-table-header__icon
+        line-height: .9
+
+    &.active, &:hover
+      .v-data-table-header__icon
+        transform: none
+        opacity: 1
+
+    &.desc
+      .v-data-table-header__icon
+        transform: rotate(-180deg)
+
+.v-data-table-header__icon
+  display: inline-block
+  opacity: 0
+  transition: .3s map-get($transition, 'swing')
+
+.v-data-table-header__sort-badge
+  display: inline-flex
+  justify-content: center
+  align-items: center
+  border: 0px
+  border-radius: 50%
+  min-width: $data-table-header-sort-badge-min-height
+  min-height: $data-table-header-sort-badge-min-width
+  height: $data-table-header-sort-badge-height
+  width: $data-table-header-sort-badge-width
+
+// Mobile
+.v-data-table-header-mobile
+  th
+    height: initial
+
+.v-data-table-header-mobile__wrapper
+  display: flex
+
+  .v-select
+    margin-bottom: $data-table-header-mobile-select-margin-bottom
+
+    .v-chip
+      height: $data-table-header-mobile-select-chip-height
+
+    .v-chip__close.desc
+      .v-icon
+        transform: rotate(-180deg)
+
+.v-data-table-header-mobile__select
+  min-width: $data-table-header-mobile-select-max-width
+  display: flex
+  align-items: center
+  justify-content: center

package/src/components/VDataTable/VDataTableHeader.ts

@@ -0,0 +1,42 @@
+// Styles
+import './VDataTableHeader.sass'
+
+// Components
+import VDataTableHeaderMobile from './VDataTableHeaderMobile'
+import VDataTableHeaderDesktop from './VDataTableHeaderDesktop'
+
+// Mixins
+import header from './mixins/header'
+
+// Utilities
+import dedupeModelListeners from '../../util/dedupeModelListeners'
+import mergeData from '../../util/mergeData'
+import rebuildSlots from '../../util/rebuildFunctionalSlots'
+
+// Types
+import { defineComponent, h } from 'vue'
+
+/* @vue/component */
+export default defineComponent({
+  name: 'v-data-table-header',
+
+  props: {
+    ...header.props,
+    mobile: Boolean,
+  },
+
+  render () {
+    const props = this.$props
+    const data = {
+      ...this.$attrs,
+      ...props,
+    }
+
+    // dedupeModelListeners(data)
+    if (props.mobile) {
+      return h(VDataTableHeaderMobile, data, this.$slots)
+    } else {
+      return h(VDataTableHeaderDesktop, data, this.$slots)
+    }
+  },
+})

package/src/components/VDataTable/VDataTableHeaderDesktop.ts

@@ -0,0 +1,125 @@
+// Helpers
+import { VNode, VNodeData, h } from 'vue'
+import mixins from '../../util/mixins'
+import header from './mixins/header'
+import { wrapInArray, convertToUnit } from '../../util/helpers'
+import { DataTableHeader } from 'vuetify/types'
+
+export default mixins(header).extend({
+  name: 'v-data-table-header-desktop',
+
+  props: {
+    mobile: Boolean,
+  },
+
+  emits: [
+    'group',
+    'sort',
+  ],
+
+  methods: {
+    genGroupByToggle (header: DataTableHeader) {
+      return h('span', {
+        onClick: (e: MouseEvent) => {
+          e.stopPropagation()
+          this.$emit('group', header.value)
+        },
+      }, ['group'])
+    },
+    getAria (beingSorted: boolean, isDesc: boolean) {
+      const $t = (key: string) => this.$vuetify.lang.t(`$vuetify.dataTable.ariaLabel.${key}`)
+
+      let ariaSort = 'none'
+      let ariaLabel = [
+        $t('sortNone'),
+        $t('activateAscending'),
+      ]
+
+      if (!beingSorted) {
+        return { ariaSort, ariaLabel: ariaLabel.join(' ') }
+      }
+
+      if (isDesc) {
+        ariaSort = 'descending'
+        ariaLabel = [
+          $t('sortDescending'),
+          $t(this.options.mustSort ? 'activateAscending' : 'activateNone'),
+        ]
+      } else {
+        ariaSort = 'ascending'
+        ariaLabel = [
+          $t('sortAscending'),
+          $t('activateDescending'),
+        ]
+      }
+
+      return { ariaSort, ariaLabel: ariaLabel.join(' ') }
+    },
+    genHeader (header: DataTableHeader) {
+      const data: Required<Pick<VNodeData, 'attrs' | 'on' | 'class' | 'style'>> = {
+        role: 'columnheader',
+        scope: 'col',
+        'aria-label': header.text || '',
+        style: {
+          width: convertToUnit(header.width),
+          minWidth: convertToUnit(header.width),
+        },
+        class: [
+          `text-${header.align || 'start'}`,
+          ...wrapInArray(header.class),
+          header.divider && 'v-data-table__divider',
+        ],
+      }
+      const children = []
+
+      if (header.value === 'data-table-select' && !this.singleSelect) {
+        return h('th', data, [this.genSelectAll()])
+      }
+
+      children.push(
+        this.$slots.hasOwnProperty(header.value)
+          ? this.$slots[header.value]!({ header })
+          : h('span', [header.text])
+      )
+
+      if (!this.disableSort && (header.sortable || !header.hasOwnProperty('sortable'))) {
+        data.onClick = () => this.$emit('sort', header.value)
+
+        const sortIndex = this.options.sortBy.findIndex(k => k === header.value)
+        const beingSorted = sortIndex >= 0
+        const isDesc = this.options.sortDesc[sortIndex]
+
+        data.class.push('sortable')
+
+        const { ariaLabel, ariaSort } = this.getAria(beingSorted, isDesc)
+
+        data['aria-label'] += `${header.text ? ': ' : ''}${ariaLabel}`
+        data['aria-sort'] = ariaSort
+
+        if (beingSorted) {
+          data.class.push('active')
+          data.class.push(isDesc ? 'desc' : 'asc')
+        }
+
+        if (header.align === 'end') children.unshift(this.genSortIcon())
+        else children.push(this.genSortIcon())
+
+        if (this.options.multiSort && beingSorted) {
+          children.push(h('span', { class: 'v-data-table-header__sort-badge' }, [String(sortIndex + 1)]))
+        }
+      }
+
+      if (this.showGroupBy && header.groupable !== false) children.push(this.genGroupByToggle(header))
+
+      return h('th', data, children)
+    },
+  },
+
+  render (): VNode {
+    return h('thead', {
+      class: 'v-data-table-header',
+    }, [
+      h('tr', this.headers?.map(header => this.genHeader(header)) || []),
+    ])
+  },
+})

package/src/components/VDataTable/VDataTableHeaderMobile.ts

@@ -0,0 +1,97 @@
+import { h, VNode, VNodeChildrenArrayContents } from 'vue'
+import mixins from '../../util/mixins'
+import VSelect from '../VSelect/VSelect'
+import VChip from '../VChip'
+import header from './mixins/header'
+import { wrapInArray } from '../../util/helpers'
+
+export default mixins(header).extend({
+  name: 'v-data-table-header-mobile',
+
+  props: {
+    sortByText: {
+      type: String,
+      default: '$vuetify.dataTable.sortBy',
+    },
+    mobile: Boolean,
+  },
+
+  emits: ['sort'],
+
+  methods: {
+    genSortChip (props: any) {
+      const children: VNodeChildrenArrayContents = [props.item.text]
+
+      const sortIndex = this.options.sortBy.findIndex(k => k === props.item.value)
+      const beingSorted = sortIndex >= 0
+      const isDesc = this.options.sortDesc[sortIndex]
+
+      children.push(h('div', {
+        class: {
+          'v-chip__close': true,
+          sortable: true,
+          active: beingSorted,
+          asc: beingSorted && !isDesc,
+          desc: beingSorted && isDesc,
+        },
+      }, [this.genSortIcon()]))
+
+      return h(VChip, {
+        class: 'sortable',
+        onClick: (e: MouseEvent) => {
+          e.stopPropagation()
+          this.$emit('sort', props.item.value)
+        },
+      }, children)
+    },
+    genSortSelect (items: any[]) {
+      return h(VSelect, {
+        label: this.$vuetify.lang.t(this.sortByText),
+        items,
+        hideDetails: true,
+        multiple: this.options.multiSort,
+        modelValue: this.options.multiSort ? this.options.sortBy : this.options.sortBy[0],
+        menuProps: { closeOnContentClick: true },
+        'onUpdate:modelValue': (v: string | string[]) => this.$emit('sort', v),
+      }, {
+        selection: (props: any) => this.genSortChip(props),
+      })
+    },
+  },
+
+  render (): VNode {
+    const children: VNodeChildrenArrayContents = []
+
+    const header = this.headers.find(h => h.value === 'data-table-select')
+    if (header && !this.singleSelect) {
+      children.push(h('div', {
+        class: [
+          'v-data-table-header-mobile__select',
+          ...wrapInArray(header.class),
+        ],
+        width: header.width,
+      }, [this.genSelectAll()]))
+    }
+
+    const sortHeaders = this.headers
+      .filter(h => h.sortable !== false && h.value !== 'data-table-select')
+      .map(h => ({
+        text: h.text,
+        value: h.value,
+      }))
+
+    if (!this.disableSort && sortHeaders.length) {
+      children.push(this.genSortSelect(sortHeaders))
+    }
+
+    const th = children.length
+      ? h('th', [h('div', { class: 'v-data-table-header-mobile__wrapper' }, children)])
+      : undefined
+
+    const tr = h('tr', [th])
+
+    return h('thead', {
+      class: 'v-data-table-header v-data-table-header-mobile',
+    }, [tr])
+  },
+})

package/src/components/VDataTable/VEditDialog.sass

@@ -0,0 +1,22 @@
+@import './_variables.scss'
+
++theme(v-small-dialog) using ($material)
+  &__menu-content,
+  &__actions
+    background: map-get($material, 'cards')
+
+.v-small-dialog
+  display: block
+
+  &__activator
+    cursor: pointer
+    &__content
+      display: inline-block
+
+  &__content
+    padding: $edit-dialog-content-padding
+
+  &__actions
+    padding: $edit-dialog-actions-padding
+    text-align: right
+    white-space: pre

package/src/components/VDataTable/VEditDialog.ts

@@ -0,0 +1,133 @@
+import { h } from 'vue'
+// Styles
+import './VEditDialog.sass'
+
+// Mixins
+import Returnable from '../../mixins/returnable'
+import Themeable from '../../mixins/themeable'
+
+// Utils
+import { getSlot, keyCodes } from '../../util/helpers'
+
+// Component
+import VBtn from '../VBtn'
+import VMenu from '../VMenu'
+
+// Types
+import { VNode, VNodeChildren } from 'vue'
+import mixins from '../../util/mixins'
+
+/* @vue/component */
+export default mixins(Returnable, Themeable).extend({
+  name: 'v-edit-dialog',
+
+  props: {
+    cancelText: {
+      default: 'Cancel',
+    },
+    large: Boolean,
+    eager: Boolean,
+    persistent: Boolean,
+    saveText: {
+      default: 'Save',
+    },
+    transition: {
+      type: String,
+      default: 'slide-x-reverse-transition',
+    },
+  },
+
+  emits: ['update:return-value', 'open', 'close', 'cancel', 'save'],
+
+  data () {
+    return {
+      // isActive is provided by Returnable mixin
+    }
+  },
+
+  watch: {
+    isActive (val) {
+      if (val) {
+        this.$emit('open')
+        setTimeout(this.focus, 50) // Give DOM time to paint
+      } else {
+        this.$emit('close')
+      }
+    },
+  },
+
+  methods: {
+    cancel () {
+      this.isActive = false
+      this.$emit('cancel')
+    },
+    focus () {
+      const input = (this.$refs.content as Element).querySelector('input')
+      input && input.focus()
+    },
+    genButton (fn: Function, text: VNodeChildren): VNode {
+      return h(VBtn, {
+        text: true,
+        color: 'primary',
+        light: true,
+        onClick: fn,
+      }, () => text)
+    },
+    genActions (): VNode {
+      return h('div', {
+        class: 'v-small-dialog__actions',
+      }, [
+        this.genButton(this.cancel, this.cancelText),
+        this.genButton(() => {
+          this.save(this.returnValue)
+          this.$emit('save')
+        }, this.saveText),
+      ])
+    },
+    genContent (): VNode {
+      return h('div', {
+        class: 'v-small-dialog__content',
+        onKeydown: (e: KeyboardEvent) => {
+          e.keyCode === keyCodes.esc && this.cancel()
+          if (e.keyCode === keyCodes.enter) {
+            this.save(this.returnValue)
+            this.$emit('save')
+          }
+        },
+        ref: 'content',
+      }, getSlot(this, 'input'))
+    },
+  },
+
+  render (): VNode {
+    return h(VMenu, {
+      class: ['v-small-dialog', this.themeClasses],
+      contentClass: 'v-small-dialog__menu-content',
+      transition: this.transition,
+      origin: 'top right',
+      right: true,
+      modelValue: this.isActive,
+      closeOnClick: !this.persistent,
+      closeOnContentClick: false,
+      eager: this.eager,
+      light: this.light,
+      dark: this.dark,
+      'onUpdate:modelValue': (val: boolean) => (this.isActive = val),
+    }, {
+      activator: ({ on }: { on: any }) => {
+        return h('div', {
+          class: 'v-small-dialog__activator',
+          ...on,
+        }, [
+          h('span', {
+            class: 'v-small-dialog__activator__content',
+          }, getSlot(this)),
+        ])
+      },
+      default: () => [
+        this.genContent(),
+        this.large ? this.genActions() : null,
+      ],
+    })
+  },
+})

package/src/components/VDataTable/VSimpleTable.sass

@@ -0,0 +1,179 @@
+// Imports
+@import './_variables.scss'
+
+// Theme
++theme(v-data-table) using ($material)
+  background-color: map-get($material, 'cards')
+  color: map-deep-get($material, 'text', 'primary')
+
+  .v-data-table__divider
+    border-right: thin solid map-get($material, 'dividers')
+
+  &.v-data-table--fixed-header
+    thead th
+      background: map-get($material, 'cards')
+      box-shadow: inset 0 -1px 0 map-get($material, 'dividers')
+
+  > .v-data-table__wrapper
+    > table
+      > thead
+        > tr
+          > th
+            color: map-deep-get($material, 'text', 'secondary')
+
+          &:last-child
+            > th
+              border-bottom: thin solid map-get($material, 'dividers')
+
+  > .v-data-table__wrapper
+    > table
+      > tbody
+        > tr
+          &:not(:last-child)
+            > td,
+            > th
+              &:not(.v-data-table__mobile-row)
+                border-bottom: thin solid map-get($material, 'dividers')
+
+              &:last-child
+                border-bottom: thin solid map-get($material, 'dividers')
+
+          &.active
+            background: map-deep-get($material, 'table', 'active')
+
+          &:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper)
+            background: map-deep-get($material, 'table', 'hover')
+
+      > tfoot
+        > tr
+          > td,
+          > th
+            &:not(.v-data-table__mobile-row)
+              border-top: thin solid map-get($material, 'dividers')
+
+// Block
+.v-data-table
+  // Do not inherit line-height
+  line-height: 1.5
+  max-width: 100%
+
+  > .v-data-table__wrapper
+    > table
+      width: 100%
+      border-spacing: 0
+
+      > tbody,
+      > thead,
+      > tfoot
+        > tr
+          > td,
+          > th
+            padding: 0 16px
+            transition: height $secondary-transition
+
+          > th
+            user-select: none
+            font-size: $data-table-regular-header-font-size
+            height: $data-table-regular-header-height
+
+            +ltr()
+              text-align: left
+
+            +rtl()
+              text-align: right
+
+          > td
+            font-size: $data-table-regular-row-font-size
+            height: $data-table-regular-row-height
+
+// Elements
+.v-data-table__wrapper
+  overflow-x: auto
+  overflow-y: hidden
+
+.v-data-table__progress
+  height: auto !important
+
+  th
+    height: auto !important
+    border: none !important
+    padding: 0
+    position: relative
+
+// Modifiers
+.v-data-table--dense
+  > .v-data-table__wrapper
+    > table
+      > tbody,
+      > thead,
+      > tfoot
+        > tr
+          > td
+            height: $data-table-dense-row-height
+          > th
+            height: $data-table-dense-header-height
+
+.v-data-table--has-top
+  > .v-data-table__wrapper
+    > table
+      > tbody
+        > tr
+          &:first-child
+            &:hover
+              > td
+                &:first-child
+                  border-top-left-radius: 0
+
+                &:last-child
+                  border-top-right-radius: 0
+
+.v-data-table--has-bottom
+  > .v-data-table__wrapper
+    > table
+      > tbody
+        > tr
+          &:last-child
+            &:hover
+              > td
+                &:first-child
+                  border-bottom-left-radius: 0
+
+                &:last-child
+                  border-bottom-right-radius: 0
+
+.v-data-table--fixed-height
+  .v-data-table__wrapper
+    overflow-y: auto
+
+.v-data-table--fixed-header
+  > .v-data-table__wrapper
+    overflow-y: auto
+
+    > table
+      > thead
+        > tr
+          > th
+            border-bottom: 0px !important
+            position: sticky
+            top: 0
+            z-index: 2
+
+        > tr:nth-child(2)
+          > th
+            top: $data-table-regular-header-height
+
+  // Account for scroll bar
+  .v-data-footer
+    +ltr()
+      margin-right: $data-table-scroll-bar-width
+
+    +rtl()
+      margin-left: $data-table-scroll-bar-width
+
+.v-data-table--fixed-header.v-data-table--dense
+  > .v-data-table__wrapper
+    > table
+      > thead
+        > tr:nth-child(2)
+          > th
+            top: $data-table-dense-header-height