@kokoccc/vuetify 1.0.1

package/src/components/VGrid/VCol.ts

@@ -0,0 +1,139 @@
+import './VGrid.sass'
+
+import { defineComponent, VNode, PropOptions, getCurrentInstance } from 'vue'
+import mergeData from '../../util/mergeData'
+import { upperFirst } from '../../util/helpers'
+import {h} from 'vue'
+// no xs
+const breakpoints = ['sm', 'md', 'lg', 'xl']
+
+const breakpointProps = (() => {
+  return breakpoints.reduce((props, val) => {
+    props[val] = {
+      type: [Boolean, String, Number],
+      default: false,
+    }
+    return props
+  }, {} as Dictionary<PropOptions>)
+})()
+
+const offsetProps = (() => {
+  return breakpoints.reduce((props, val) => {
+    props['offset' + upperFirst(val)] = {
+      type: [String, Number],
+      default: null,
+    }
+    return props
+  }, {} as Dictionary<PropOptions>)
+})()
+
+const orderProps = (() => {
+  return breakpoints.reduce((props, val) => {
+    props['order' + upperFirst(val)] = {
+      type: [String, Number],
+      default: null,
+    }
+    return props
+  }, {} as Dictionary<PropOptions>)
+})()
+
+const propMap = {
+  col: Object.keys(breakpointProps),
+  offset: Object.keys(offsetProps),
+  order: Object.keys(orderProps),
+}
+
+function breakpointClass (type: keyof typeof propMap, prop: string, val: boolean | string | number) {
+  let className = type
+  if (val == null || val === false) {
+    return undefined
+  }
+  if (prop) {
+    const breakpoint = prop.replace(type, '')
+    className += `-${breakpoint}`
+  }
+  // Handling the boolean style prop when accepting [Boolean, String, Number]
+  // means Vue will not convert <v-col sm></v-col> to sm: true for us.
+  // Since the default is false, an empty string indicates the prop's presence.
+  if (type === 'col' && (val === '' || val === true)) {
+    // .col-md
+    return className.toLowerCase()
+  }
+  // .order-md-6
+  className += `-${val}`
+  return className.toLowerCase()
+}
+
+const cache = new Map<string, any[]>()
+
+export default defineComponent({
+  name: 'v-col',
+  inheritAttrs: false,
+  props: {
+    cols: {
+      type: [Boolean, String, Number],
+      default: false,
+    },
+    ...breakpointProps,
+    offset: {
+      type: [String, Number],
+      default: null,
+    },
+    ...offsetProps,
+    order: {
+      type: [String, Number],
+      default: null,
+    },
+    ...orderProps,
+    alignSelf: {
+      type: String,
+      default: null,
+      validator: (str: any) => ['auto', 'start', 'end', 'center', 'baseline', 'stretch'].includes(str),
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+  render (): VNode {
+    const props = this.$props
+    const data = this.$attrs
+    const children = this.$slots.default?.() || []
+    // const {parent} = getCurrentInstance()
+
+    // Super-fast memoization based on props, 5x faster than JSON.stringify
+    let cacheKey = ''
+    for (const prop in props) {
+      cacheKey += String((props as any)[prop])
+    }
+    let classList = cache.get(cacheKey)
+
+    if (!classList) {
+      classList = []
+      // Loop through `col`, `offset`, `order` breakpoint props
+      let type: keyof typeof propMap
+      for (type in propMap) {
+        propMap[type].forEach(prop => {
+          const value: string | number | boolean = (props as any)[prop]
+          const className = breakpointClass(type, prop, value)
+          if (className) classList!.push(className)
+        })
+      }
+
+      const hasColClasses = classList.some(className => className.startsWith('col-'))
+
+      classList.push({
+        // Default to .col if no other col-{bp}-* classes generated nor `cols` specified.
+        col: !hasColClasses || !props.cols,
+        [`col-${props.cols}`]: props.cols,
+        [`offset-${props.offset}`]: props.offset,
+        [`order-${props.order}`]: props.order,
+        [`align-self-${props.alignSelf}`]: props.alignSelf,
+      })
+
+      cache.set(cacheKey, classList)
+    }
+
+    return h(props.tag, mergeData({ class: classList }, data), children)
+  },
+})

package/src/components/VGrid/VContainer.ts

@@ -0,0 +1,68 @@
+import './_grid.sass'
+import './VGrid.sass'
+
+import Grid from './grid'
+
+import mergeData from '../../util/mergeData'
+import { defineComponent, h } from 'vue'
+
+/* @vue/component */
+export default defineComponent({
+  name: 'v-container',
+  extends: Grid('container'),
+  props: {
+    id: String,
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    fluid: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  render () {
+    let classes
+    // const { attrs } = data
+
+    const attrs = this.$attrs
+
+    if (attrs) {
+      // reset attrs to extract utility clases like pa-3
+      classes = Object.keys(attrs).filter(key => {
+        // TODO: Remove once resolved
+        // https://github.com/vuejs/vue/issues/7841
+        if (key === 'slot') return false
+
+        const value = attrs[key]
+
+        // add back data attributes like data-test="foo" but do not
+        // add them as classes
+        if (key.startsWith('data-')) {
+          // data.attrs![key] = value
+          return false
+        }
+
+        return value || typeof value === 'string'
+      })
+    }
+
+    const data = mergeData(this.$attrs, {
+      class: [
+        'container',
+        { 'container--fluid': this.fluid },
+        ...(classes || []),
+      ],
+    })
+
+    if (this.id) {
+      data.id = this.id
+    }
+
+    return h(
+      this.tag,
+      data,
+      this.$slots.default?.()
+    )
+  },
+})

package/src/components/VGrid/VFlex.ts

@@ -0,0 +1,5 @@
+import './_grid.sass'
+
+import Grid from './grid'
+
+export default Grid('flex')

package/src/components/VGrid/VGrid.sass

@@ -0,0 +1,41 @@
+@import '../../styles/styles.sass'
+@import './_mixins'
+
+.container
+  +make-container
+  +make-container-max-widths
+
+  &--fluid
+    max-width: 100%
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+.row
+  +make-row
+
+  & + .row
+    margin-top: $grid-gutter / 2
+
+    &--dense
+      margin-top: $form-grid-gutter / 2
+
+  &--dense
+    margin: -$form-grid-gutter / 2
+
+    > .col,
+    > [class*="col-"]
+      padding: $form-grid-gutter / 2
+
+  // Remove the negative margin from default .row, then the horizontal padding
+  // from all immediate children columns (to prevent runaway style inheritance).
+  &.no-gutters
+    margin: 0
+    > .col,
+    > [class*="col-"]
+      padding: 0
+
+// Columns
+//
+// Common styles for small and large grid columns
++make-grid-columns

package/src/components/VGrid/VLayout.ts

@@ -0,0 +1,5 @@
+import './_grid.sass'
+
+import Grid from './grid'
+
+export default Grid('layout')

package/src/components/VGrid/VRow.ts

@@ -0,0 +1,138 @@
+import './VGrid.sass'
+
+import { defineComponent, PropOptions } from 'vue'
+import mergeData from '../../util/mergeData'
+import { upperFirst } from '../../util/helpers'
+import {h} from 'vue'
+// no xs
+const breakpoints = ['sm', 'md', 'lg', 'xl']
+
+const ALIGNMENT = ['start', 'end', 'center']
+
+function makeProps (prefix: string, def: () => PropOptions) {
+  return breakpoints.reduce((props, val) => {
+    props[prefix + upperFirst(val)] = def()
+    return props
+  }, {} as Dictionary<PropOptions>)
+}
+
+const alignValidator = (str: any) => [...ALIGNMENT, 'baseline', 'stretch'].includes(str)
+const alignProps = makeProps('align', () => ({
+  type: String,
+  default: null,
+  validator: alignValidator,
+}))
+
+const justifyValidator = (str: any) => [...ALIGNMENT, 'space-between', 'space-around'].includes(str)
+const justifyProps = makeProps('justify', () => ({
+  type: String,
+  default: null,
+  validator: justifyValidator,
+}))
+
+const alignContentValidator = (str: any) => [...ALIGNMENT, 'space-between', 'space-around', 'stretch'].includes(str)
+const alignContentProps = makeProps('alignContent', () => ({
+  type: String,
+  default: null,
+  validator: alignContentValidator,
+}))
+
+const propMap = {
+  align: Object.keys(alignProps),
+  justify: Object.keys(justifyProps),
+  alignContent: Object.keys(alignContentProps),
+}
+
+const classMap = {
+  align: 'align',
+  justify: 'justify',
+  alignContent: 'align-content',
+}
+
+function breakpointClass (type: keyof typeof propMap, prop: string, val: string) {
+  let className = classMap[type]
+  if (val == null) {
+    return undefined
+  }
+  if (prop) {
+    // alignSm -> Sm
+    const breakpoint = prop.replace(type, '')
+    className += `-${breakpoint}`
+  }
+  // .align-items-sm-center
+  className += `-${val}`
+  return className.toLowerCase()
+}
+
+const cache = new Map<string, any[]>()
+
+export default defineComponent({
+  name: 'v-row',
+  functional: true,
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    dense: Boolean,
+    noGutters: Boolean,
+    align: {
+      type: String,
+      default: null,
+      validator: alignValidator,
+    },
+    ...alignProps,
+    justify: {
+      type: String,
+      default: null,
+      validator: justifyValidator,
+    },
+    ...justifyProps,
+    alignContent: {
+      type: String,
+      default: null,
+      validator: alignContentValidator,
+    },
+    ...alignContentProps,
+  },
+  render () {
+    // Super-fast memoization based on props, 5x faster than JSON.stringify
+    let cacheKey = ''
+    const props = this.$props
+    for (const prop in props) {
+      cacheKey += String((props as any)[prop])
+    }
+    let classList = cache.get(cacheKey)
+
+    if (!classList) {
+      classList = []
+      // Loop through `align`, `justify`, `alignContent` breakpoint props
+      let type: keyof typeof propMap
+      for (type in propMap) {
+        propMap[type].forEach(prop => {
+          const value: string = (props as any)[prop]
+          const className = breakpointClass(type, prop, value)
+          if (className) classList!.push(className)
+        })
+      }
+
+      classList.push({
+        'no-gutters': props.noGutters,
+        'row--dense': props.dense,
+        [`align-${props.align}`]: props.align,
+        [`justify-${props.justify}`]: props.justify,
+        [`align-content-${props.alignContent}`]: props.alignContent,
+      })
+
+      cache.set(cacheKey, classList)
+    }
+
+    return h(
+      props.tag,
+      mergeData(this.$attrs, {
+        class: classList.concat('row'),
+      }),
+      this.$slots.default()
+    )
+  },
+})

package/src/components/VGrid/VSpacer.ts

@@ -0,0 +1,4 @@
+import './_grid.sass'
+import { createSimpleFunctional } from '../../util/helpers'
+
+export default createSimpleFunctional('spacer', 'div', 'v-spacer')

package/src/components/VGrid/__tests__/VCol.spec.ts

@@ -0,0 +1,151 @@
+import { mount, enableAutoUnmount } from '@vue/test-utils'
+import VCol from '../VCol'
+
+describe('layout > col', () => {
+  enableAutoUnmount(afterEach)
+
+  it('should have default expected structure', async () => {
+    const wrapper = mount(VCol)
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('col')
+    expect(wrapper.classes()).toHaveLength(1)
+    expect(wrapper.findAll('.col > *')).toHaveLength(0)
+    expect(wrapper.text()).toEqual('')
+  })
+
+  it('renders custom root element when tag prop set', async () => {
+    const wrapper = mount(VCol, {
+      props: {
+        tag: 'span',
+      },
+    })
+
+    expect(wrapper.element.tagName).toBe('SPAN')
+    expect(wrapper.classes()).toContain('col')
+    expect(wrapper.classes()).toHaveLength(1)
+    expect(wrapper.findAll('.col > *')).toHaveLength(0)
+    expect(wrapper.text()).toEqual('')
+  })
+
+  it('should apply breakpoint specific col-{bp}-{#} classes', async () => {
+    const wrapper = mount(VCol, {
+      props: {
+        cols: 6,
+        sm: 5,
+        md: 4,
+        lg: 3,
+        xl: 2,
+      },
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('col-6')
+    expect(wrapper.classes()).toContain('col-sm-5')
+    expect(wrapper.classes()).toContain('col-md-4')
+    expect(wrapper.classes()).toContain('col-lg-3')
+    expect(wrapper.classes()).toContain('col-xl-2')
+    expect(wrapper.classes()).toHaveLength(5)
+  })
+
+  it('should apply ".offset-*" classes with "offset-{bp}-{#}" props', async () => {
+    const wrapper = mount(VCol, {
+      props: {
+        offset: 6,
+        offsetSm: 5,
+        offsetMd: 4,
+        offsetLg: 3,
+        offsetXl: 2,
+      },
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('col')
+    expect(wrapper.classes()).toContain('offset-6')
+    expect(wrapper.classes()).toContain('offset-sm-5')
+    expect(wrapper.classes()).toContain('offset-md-4')
+    expect(wrapper.classes()).toContain('offset-lg-3')
+    expect(wrapper.classes()).toContain('offset-xl-2')
+    expect(wrapper.classes()).toHaveLength(6)
+  })
+
+  it('should apply ".order-*" classes with "order-{bp}-{#}" props', async () => {
+    const wrapper = mount(VCol, {
+      props: {
+        order: 6,
+        orderSm: 5,
+        orderMd: 4,
+        orderLg: 3,
+        orderXl: 2,
+      },
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('col')
+    expect(wrapper.classes()).toContain('order-6')
+    expect(wrapper.classes()).toContain('order-sm-5')
+    expect(wrapper.classes()).toContain('order-md-4')
+    expect(wrapper.classes()).toContain('order-lg-3')
+    expect(wrapper.classes()).toContain('order-xl-2')
+    expect(wrapper.classes()).toHaveLength(6)
+  })
+
+  it(`should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop`, async () => {
+    const wrapper = mount(VCol, {
+      props: {
+        sm: true,
+        md: true,
+        lg: true,
+        xl: true,
+      },
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('col')
+    expect(wrapper.classes()).toContain('col-sm')
+    expect(wrapper.classes()).toContain('col-md')
+    expect(wrapper.classes()).toContain('col-lg')
+    expect(wrapper.classes()).toContain('col-xl')
+    expect(wrapper.classes()).toHaveLength(5)
+  })
+
+  it(`should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop set to empty string`, async () => {
+    const wrapper = mount(VCol, {
+      props: {
+        sm: '',
+        md: '',
+        lg: '',
+        xl: '',
+      },
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('col')
+    expect(wrapper.classes()).toContain('col-sm')
+    expect(wrapper.classes()).toContain('col-md')
+    expect(wrapper.classes()).toContain('col-lg')
+    expect(wrapper.classes()).toContain('col-xl')
+    expect(wrapper.classes()).toHaveLength(5)
+  })
+
+  it('should apply ".align-self-*" class with "align-self" prop', async () => {
+    const wrapper = mount(VCol, {
+      props: {
+        alignSelf: 'center',
+      },
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('col')
+    expect(wrapper.classes()).toContain('align-self-center')
+    expect(wrapper.classes()).toHaveLength(2)
+  })
+
+  it('should cache classes', () => {
+    const wrapper = mount(VCol)
+    const wrapper2 = mount(VCol)
+
+    expect(wrapper.classes()).toEqual(wrapper2.classes())
+    expect(wrapper.classes()).toContain('col')
+  })
+})

package/src/components/VGrid/__tests__/VContainer.spec.ts

@@ -0,0 +1,83 @@
+// Components
+import VContainer from '../VContainer'
+
+// Utilities
+import {
+  mount,
+  MountingOptions,
+  VueWrapper,
+} from '@vue/test-utils'
+
+describe('VContainer.ts', () => {
+  type Instance = InstanceType<typeof VContainer>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VContainer, {
+        ...options,
+      })
+    }
+  })
+
+  it('should work', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with fluid prop', () => {
+    const wrapper = mountFunction({
+      props: {
+        fluid: true,
+      },
+    })
+
+    expect(wrapper.classes()).toContain('container--fluid')
+    expect(wrapper.classes()).toContain('container')
+  })
+
+  it('should render with custom tag', () => {
+    const wrapper = mountFunction({
+      props: {
+        tag: 'section',
+      },
+    })
+
+    expect(wrapper.element.tagName).toBe('SECTION')
+  })
+
+  it('should render with id prop', () => {
+    const wrapper = mountFunction({
+      props: {
+        id: 'test-id',
+      },
+    })
+
+    expect(wrapper.attributes('id')).toBe('test-id')
+  })
+
+  it('should process utility classes from attrs', () => {
+    const wrapper = mountFunction({
+      attrs: {
+        'pa-3': true,
+        'ma-2': '',
+        'data-test': 'test-value',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('pa-3')
+    expect(wrapper.classes()).toContain('ma-2')
+    expect(wrapper.attributes('data-test')).toBe('test-value')
+  })
+
+  it('should render default slot content', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: '<div>Test content</div>',
+      },
+    })
+
+    expect(wrapper.html()).toContain('<div>Test content</div>')
+  })
+})

package/src/components/VGrid/__tests__/VFlex.spec.ts

@@ -0,0 +1,28 @@
+// Components
+import VFlex from '../VFlex'
+
+// Utilities
+import {
+  mount,
+  MountingOptions,
+  VueWrapper,
+} from '@vue/test-utils'
+
+describe('VFlex.ts', () => {
+  type Instance = InstanceType<typeof VFlex>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VFlex, {
+        ...options,
+      })
+    }
+  })
+
+  it('should work', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})