Skip to content

Commit

Permalink
refactor: naming
Browse files Browse the repository at this point in the history
  • Loading branch information
KaelWD authored and yuwu9145 committed Mar 5, 2023
1 parent d9631c6 commit 56a9b9c
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 28 deletions.
18 changes: 9 additions & 9 deletions packages/vuetify/src/components/VGrid/VCol.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@ import './VGrid.sass'

// Composables
import { makeTagProps } from '@/composables/tag'
import { breakpoints } from '@/composables/breakpoint'
import { breakpoints } from './breakpoints'

// Utilities
import { capitalize, computed, h } from 'vue'
import { genericComponent } from '@/util'

// Types
import type { Prop, PropType } from 'vue'
import type { BreakPoint } from '@/composables/breakpoint'
import type { Breakpoint } from './breakpoints'

type BreakPointOffset = `offset${Capitalize<BreakPoint>}`
type BreakPointOrder = `order${Capitalize<BreakPoint>}`
type BreakpointOffset = `offset${Capitalize<Breakpoint>}`
type BreakpointOrder = `order${Capitalize<Breakpoint>}`

const breakpointProps = (() => {
return breakpoints.reduce((props, val) => {
Expand All @@ -23,29 +23,29 @@ const breakpointProps = (() => {
default: false,
}
return props
}, {} as Record<BreakPoint, Prop<boolean | string | number, false>>)
}, {} as Record<Breakpoint, Prop<boolean | string | number, false>>)
})()

const offsetProps = (() => {
return breakpoints.reduce((props, val) => {
const offsetKey = ('offset' + capitalize(val)) as BreakPointOffset
const offsetKey = ('offset' + capitalize(val)) as BreakpointOffset
props[offsetKey] = {
type: [String, Number],
default: null,
}
return props
}, {} as Record<BreakPointOffset, Prop<string | number, null>>)
}, {} as Record<BreakpointOffset, Prop<string | number, null>>)
})()

const orderProps = (() => {
return breakpoints.reduce((props, val) => {
const orderKey = ('order' + capitalize(val)) as BreakPointOrder
const orderKey = ('order' + capitalize(val)) as BreakpointOrder
props[orderKey] = {
type: [String, Number],
default: null,
}
return props
}, {} as Record<BreakPointOrder, Prop<string | number, null>>)
}, {} as Record<BreakpointOrder, Prop<string | number, null>>)
})()

const propMap = {
Expand Down
37 changes: 19 additions & 18 deletions packages/vuetify/src/components/VGrid/VRow.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,57 +3,58 @@ import './VGrid.sass'

// Composables
import { makeTagProps } from '@/composables/tag'
import { breakpoints } from '@/composables/breakpoint'
import { breakpoints } from './breakpoints'

// Utilities
import { capitalize, computed, h } from 'vue'
import { genericComponent } from '@/util'

// Types
import type { Prop, PropType } from 'vue'
import type { BreakPoint } from '@/composables/breakpoint'
import type { Breakpoint } from './breakpoints'

const ALIGNMENT = ['start', 'end', 'center'] as const

type BreakPointAlign = `align${Capitalize<BreakPoint>}`
type BreakPointJustify = `justify${Capitalize<BreakPoint>}`
type BreakPointAlignContent = `alignContent${Capitalize<BreakPoint>}`
type BreakpointAlign = `align${Capitalize<Breakpoint>}`
type BreakpointJustify = `justify${Capitalize<Breakpoint>}`
type BreakpointAlignContent = `alignContent${Capitalize<Breakpoint>}`

const SPACE = ['space-between', 'space-around', 'space-evenly'] as const

function makeRowProps <
U extends BreakPointAlign | BreakPointJustify | BreakPointAlignContent, T
> (prefix: string, def: () => Prop<T, null>) {
Name extends BreakpointAlign | BreakpointJustify | BreakpointAlignContent,
Type,
> (prefix: string, def: () => Prop<Type, null>) {
return breakpoints.reduce((props, val) => {
const prefixKey = prefix + capitalize(val) as U
const prefixKey = prefix + capitalize(val) as Name
props[prefixKey] = def()
return props
}, {} as Record<U, Prop<T, null>>)
}, {} as Record<Name, Prop<Type, null>>)
}

const ALIGN_VALUES = [...ALIGNMENT, 'baseline', 'stretch'] as const
type AlignProp = typeof ALIGN_VALUES[number]
type AlignValue = typeof ALIGN_VALUES[number]
const alignValidator = (str: any) => ALIGN_VALUES.includes(str)
const alignProps = makeRowProps<BreakPointAlign, AlignProp>('align', () => ({
type: String as PropType<AlignProp>,
const alignProps = makeRowProps<BreakpointAlign, AlignValue>('align', () => ({
type: String as PropType<AlignValue>,
default: null,
validator: alignValidator,
}))

const JUSTIFY_VALUES = [...ALIGNMENT, ...SPACE] as const
type JustifyProp = typeof JUSTIFY_VALUES[number]
type JustifyValue = typeof JUSTIFY_VALUES[number]
const justifyValidator = (str: any) => JUSTIFY_VALUES.includes(str)
const justifyProps = makeRowProps<BreakPointJustify, JustifyProp>('justify', () => ({
type: String as PropType<JustifyProp>,
const justifyProps = makeRowProps<BreakpointJustify, JustifyValue>('justify', () => ({
type: String as PropType<JustifyValue>,
default: null,
validator: justifyValidator,
}))

const ALIGN_CONTENT_VALUES = [...ALIGNMENT, ...SPACE, 'stretch'] as const
type AlignContentProp = typeof ALIGN_CONTENT_VALUES[number]
type AlignContentValue = typeof ALIGN_CONTENT_VALUES[number]
const alignContentValidator = (str: any) => ALIGN_CONTENT_VALUES.includes(str)
const alignContentProps = makeRowProps<BreakPointAlignContent, AlignContentProp>('alignContent', () => ({
type: String as PropType<AlignContentProp>,
const alignContentProps = makeRowProps<BreakpointAlignContent, AlignContentValue>('alignContent', () => ({
type: String as PropType<AlignContentValue>,
default: null,
validator: alignContentValidator,
}))
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const // no xs

export type BreakPoint = 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
export type Breakpoint = typeof breakpoints[number]

0 comments on commit 56a9b9c

Please sign in to comment.