fix(VCol): fix BreakPoints type

fix vuetifyjs#16604

packages/vuetify/dev/shim.d.ts

@@ -0,0 +1,9 @@
+import { VCol } from 'vuetify/src/components/VGrid/VCol'
+import { VRow } from 'vuetify/src/components/VGrid/VRow'
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VCol: typeof VCol;
+    VRow: typeof VRow;
+  }
+}

packages/vuetify/package.json

@@ -92,6 +92,7 @@
     "watch": "yarn build:lib --watch",
     "dev": "cross-env NODE_ENV=development vite",
     "dev:ssr": "cross-env NODE_ENV=development VITE_SSR=true vite-ssr",
+    "dev:typecheck": "vue-tsc --noEmit --skipLibCheck --project ./tsconfig.dev.json",
     "build": "rimraf lib dist && concurrently \"yarn build:dist\" \"yarn build:lib\" -n \"dist,lib\" --kill-others-on-fail -r && yarn build:types",
     "build:dist": "rollup --config build/rollup.config.js",
     "build:lib": "cross-env NODE_ENV=lib babel src --out-dir lib --source-maps --extensions \".ts\",\".tsx\",\".snap\" --copy-files --no-copy-ignored --out-file-extension .mjs",

packages/vuetify/src/components/VGrid/VCol.ts

@@ -3,15 +3,18 @@ import './VGrid.sass'
 
 // Composables
 import { makeTagProps } from '@/composables/tag'
+import { breakpoints } from '@/composables/breakpoint'
 
 // Utilities
 import { capitalize, computed, h } from 'vue'
 import { genericComponent } from '@/util'
 
 // Types
 import type { Prop, PropType } from 'vue'
+import type { BreakPoint } from '@/composables/breakpoint'
 
-const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const // no xs
+type BreakPointOffset = `offset${Capitalize<BreakPoint>}`
+type BreakPointOrder = `order${Capitalize<BreakPoint>}`
 
 const breakpointProps = (() => {
   return breakpoints.reduce((props, val) => {
@@ -20,27 +23,29 @@ const breakpointProps = (() => {
       default: false,
     }
     return props
-  }, {} as Record<string, Prop<boolean | string | number, false>>)
+  }, {} as Record<BreakPoint, Prop<boolean | string | number, false>>)
 })()
 
 const offsetProps = (() => {
   return breakpoints.reduce((props, val) => {
-    props['offset' + capitalize(val)] = {
+    const offsetKey = ('offset' + capitalize(val)) as BreakPointOffset
+    props[offsetKey] = {
       type: [String, Number],
       default: null,
     }
     return props
-  }, {} as Record<string, Prop<string | number, null>>)
+  }, {} as Record<BreakPointOffset, Prop<string | number, null>>)
 })()
 
 const orderProps = (() => {
   return breakpoints.reduce((props, val) => {
-    props['order' + capitalize(val)] = {
+    const orderKey = ('order' + capitalize(val)) as BreakPointOrder
+    props[orderKey] = {
       type: [String, Number],
       default: null,
     }
     return props
-  }, {} as Record<string, Prop<string | number, null>>)
+  }, {} as Record<BreakPointOrder, Prop<string | number, null>>)
 })()
 
 const propMap = {

packages/vuetify/src/components/VGrid/VRow.ts

@@ -3,47 +3,57 @@ import './VGrid.sass'
 
 // Composables
 import { makeTagProps } from '@/composables/tag'
+import { breakpoints } from '@/composables/breakpoint'
 
 // Utilities
 import { capitalize, computed, h } from 'vue'
 import { genericComponent } from '@/util'
 
 // Types
 import type { Prop, PropType } from 'vue'
-
-const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const // no xs
+import type { BreakPoint } from '@/composables/breakpoint'
 
 const ALIGNMENT = ['start', 'end', 'center'] as const
 
+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 <T> (prefix: string, def: () => Prop<T, null>) {
+function makeRowProps <
+  U extends BreakPointAlign | BreakPointJustify | BreakPointAlignContent, T
+> (prefix: string, def: () => Prop<T, null>) {
   return breakpoints.reduce((props, val) => {
-    props[prefix + capitalize(val)] = def()
+    const prefixKey = prefix + capitalize(val) as U
+    props[prefixKey] = def()
     return props
-  }, {} as Record<string, Prop<T, null>>)
+  }, {} as Record<U, Prop<T, null>>)
 }
 
 const ALIGN_VALUES = [...ALIGNMENT, 'baseline', 'stretch'] as const
+type AlignProp = typeof ALIGN_VALUES[number]
 const alignValidator = (str: any) => ALIGN_VALUES.includes(str)
-const alignProps = makeRowProps('align', () => ({
-  type: String as PropType<typeof ALIGN_VALUES[number]>,
+const alignProps = makeRowProps<BreakPointAlign, AlignProp>('align', () => ({
+  type: String as PropType<AlignProp>,
   default: null,
   validator: alignValidator,
 }))
 
 const JUSTIFY_VALUES = [...ALIGNMENT, ...SPACE] as const
+type JustifyProp = typeof JUSTIFY_VALUES[number]
 const justifyValidator = (str: any) => JUSTIFY_VALUES.includes(str)
-const justifyProps = makeRowProps('justify', () => ({
-  type: String as PropType<typeof JUSTIFY_VALUES[number]>,
+const justifyProps = makeRowProps<BreakPointJustify, JustifyProp>('justify', () => ({
+  type: String as PropType<JustifyProp>,
   default: null,
   validator: justifyValidator,
 }))
 
 const ALIGN_CONTENT_VALUES = [...ALIGNMENT, ...SPACE, 'stretch'] as const
+type AlignContentProp = typeof ALIGN_CONTENT_VALUES[number]
 const alignContentValidator = (str: any) => ALIGN_CONTENT_VALUES.includes(str)
-const alignContentProps = makeRowProps('alignContent', () => ({
-  type: String as PropType<typeof ALIGN_CONTENT_VALUES[number]>,
+const alignContentProps = makeRowProps<BreakPointAlignContent, AlignContentProp>('alignContent', () => ({
+  type: String as PropType<AlignContentProp>,
   default: null,
   validator: alignContentValidator,
 }))

packages/vuetify/src/composables/breakpoint.ts

@@ -0,0 +1,3 @@
+export const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const // no xs
+
+export type BreakPoint = 'sm' | 'md' | 'lg' | 'xl' | 'xxl'

packages/vuetify/tsconfig.dev.json

@@ -4,5 +4,11 @@
     "src",
     "dev",
     "cypress"
-  ]
+  ],
+  "compilerOptions": {
+    "allowJs": true
+  },
+  "vueCompilerOptions": {
+    "strictTemplates": true
+  }
 }