From 7d93f4dbddbc29c02387a0df913a612b1f56bda4 Mon Sep 17 00:00:00 2001 From: userquin Date: Fri, 10 Nov 2023 18:36:44 +0100 Subject: [PATCH 1/2] feat: add support for Vuetify 3.4 --- src/module.ts | 6 +++++ src/utils/config.ts | 1 + src/vite/vuetify-configuration-plugin.ts | 24 +++++++++++++++---- src/vite/vuetify-date-configuration-plugin.ts | 6 +++-- 4 files changed, 30 insertions(+), 7 deletions(-) diff --git a/src/module.ts b/src/module.ts index ffec7cd..d2efcf9 100644 --- a/src/module.ts +++ b/src/module.ts @@ -6,6 +6,7 @@ import { isNuxt3, useLogger, } from '@nuxt/kit' +import { getPackageInfo } from 'local-pkg' import { version } from '../package.json' import type { ModuleOptions } from './types' import type { VuetifyNuxtContext } from './utils/config' @@ -40,6 +41,10 @@ export default defineNuxtModule({ if (!isNuxt3(nuxt)) logger.error(`Cannot support nuxt version: ${getNuxtVersion(nuxt)}`) + const vuetifyPkg = await getPackageInfo('vuetify') + const versions = vuetifyPkg?.version?.split('.').map(v => Number.parseInt(v)) + const vuetify3_4 = versions && versions.length > 1 && versions[0] >= 3 && versions[1] >= 4 + const ctx: VuetifyNuxtContext = { logger, resolver: createResolver(import.meta.url), @@ -55,6 +60,7 @@ export default defineNuxtModule({ ssrClientHints: undefined!, componentsPromise: undefined!, labComponentsPromise: undefined!, + vuetify3_4, } await load(options, nuxt, ctx) diff --git a/src/utils/config.ts b/src/utils/config.ts index dc04ff8..9a59837 100644 --- a/src/utils/config.ts +++ b/src/utils/config.ts @@ -25,6 +25,7 @@ export interface VuetifyNuxtContext { ssrClientHints: ResolvedClientHints componentsPromise: Promise labComponentsPromise: Promise + vuetify3_4?: boolean } export async function loadVuetifyConfiguration( diff --git a/src/vite/vuetify-configuration-plugin.ts b/src/vite/vuetify-configuration-plugin.ts index a72fb67..8e72125 100644 --- a/src/vite/vuetify-configuration-plugin.ts +++ b/src/vite/vuetify-configuration-plugin.ts @@ -182,7 +182,8 @@ async function buildConfiguration(ctx: VuetifyNuxtContext) { if (typeof labComponents === 'boolean') { config.imports.push('import * as labsComponents from \'vuetify/labs/components\'') config.labComponents.add('*') - addDatePicker = false + if (ctx.vuetify3_4 === false) + addDatePicker = false } else if (typeof labComponents === 'string') { useLabComponents.push(labComponents) @@ -217,25 +218,38 @@ async function buildConfiguration(ctx: VuetifyNuxtContext) { config.labComponents.add(component) }) - if (dateOptions && !config.labComponents.has('VDatePicker')) { + if (ctx.vuetify3_4 === false && dateOptions && !addDatePicker) { const entry = componentsToImport.get('VDatePicker') if (entry) { entry.push('VDatePicker') config.labComponents.add('VDatePicker') + addDatePicker = false } } componentsToImport.forEach((componentsArray, from) => { config.imports.push(`import {${componentsArray.join(',')}} from 'vuetify/labs/${from}'`) }) - addDatePicker = !config.labComponents.has('VDatePicker') } } // include date picker only when needed if (dateOptions && addDatePicker) { - config.imports.push('import {VDatePicker} from \'vuetify/labs/VDatePicker\'') - config.labComponents.add('VDatePicker') + let warn = true + if (typeof ctx.vuetify3_4 === 'boolean') { + warn = false + if (ctx.vuetify3_4) { + // @ts-expect-error VDatePicker is on labs when version < 3.4 + config.components.add('VDatePicker') + config.imports.push('import {VDatePicker} from \'vuetify/components/VDatePicker\'') + } + else { + config.labComponents.add('VDatePicker') + config.imports.push('import {VDatePicker} from \'vuetify/labs/VDatePicker\'') + } + } + + warn && logger.warn('Unable to load Vuetify version from package.json, add VDatePicker to components or labComponents') } // components entry diff --git a/src/vite/vuetify-date-configuration-plugin.ts b/src/vite/vuetify-date-configuration-plugin.ts index a3c44ab..847683c 100644 --- a/src/vite/vuetify-date-configuration-plugin.ts +++ b/src/vite/vuetify-date-configuration-plugin.ts @@ -27,7 +27,9 @@ export function dateConfiguration() { const { adapter: _adapter, ...newDateOptions } = ctx.vuetifyOptions.date ?? {} const imports = ctx.dateAdapter === 'vuetify' - ? 'import { VuetifyDateAdapter } from \'vuetify/labs/date/adapters/vuetify\'' + ? ctx.vuetify3_4 === true + ? '' + : 'import { VuetifyDateAdapter } from \'vuetify/labs/date/adapters/vuetify\'' : ctx.dateAdapter === 'custom' ? '' : `import Adapter from '@date-io/${ctx.dateAdapter}'` @@ -52,7 +54,7 @@ export function dateConfiguration() { return '' if (ctx.dateAdapter === 'vuetify') - return 'options.adapter = VuetifyDateAdapter' + return ctx.vuetify3_4 === true ? '' : 'options.adapter = VuetifyDateAdapter' return 'options.adapter = Adapter' } From b757a2a088bdbb554ff53272308ffd5611d9e76a Mon Sep 17 00:00:00 2001 From: userquin Date: Fri, 10 Nov 2023 18:42:33 +0100 Subject: [PATCH 2/2] chore: cleanup --- src/vite/vuetify-date-configuration-plugin.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vite/vuetify-date-configuration-plugin.ts b/src/vite/vuetify-date-configuration-plugin.ts index 847683c..87131b9 100644 --- a/src/vite/vuetify-date-configuration-plugin.ts +++ b/src/vite/vuetify-date-configuration-plugin.ts @@ -50,11 +50,11 @@ export function dateConfiguration() { } function buildAdapter() { - if (ctx.dateAdapter === 'custom') + if (ctx.dateAdapter === 'custom' || (ctx.dateAdapter === 'vuetify' && ctx.vuetify3_4 === true)) return '' if (ctx.dateAdapter === 'vuetify') - return ctx.vuetify3_4 === true ? '' : 'options.adapter = VuetifyDateAdapter' + return 'options.adapter = VuetifyDateAdapter' return 'options.adapter = Adapter' }