vuetify-nuxt-module 0.0.3 → 0.1.0

package/README.md

@@ -1,5 +1,5 @@
 <p align='center'>
-<img src='./hero.svg' alt="vuetify-nuxt-module - Zero-config Nuxt module for Vuetify"><br>
+<img src='https://github.com/userquin/vuetify-nuxt-module/raw/main/hero.svg' alt="vuetify-nuxt-module - Zero-config Nuxt module for Vuetify"><br>
 Zero-config Nuxt module for Vuetify
 </p>
 
@@ -28,11 +28,12 @@ Zero-config Nuxt module for Vuetify
 - 📖 [**Documentation & guides**](README.md#-features) (WIP)
 - 👌 **Zero-Config**: sensible built-in default [Vuetify](https://vuetifyjs.com/) configuration for common use cases
 - 🔩 **Extensible**: expose the ability to customize the Vuetify configuration via [Nuxt Plugin Hooks](https://nuxt.com/docs/guide/going-further/hooks#usage-with-plugins)
-- ⚡ **Fully tree shakable**: by default, only the needed Vuetify components are imported
+- ⚡ **Fully Tree Shakable**: by default, only the needed Vuetify components are imported
 - 🛠️ **Versatile**: custom Vuetify [directives](https://vuetifyjs.com/en/getting-started/installation/#manual-steps) and [labs components](https://vuetifyjs.com/en/labs/introduction/) registration
-- ✨ **Configurable styles**: configure your variables using [Vuetify SASS Variables](https://vuetifyjs.com/en/features/sass-variables/) 
+- ✨ **Configurable Styles**: configure your variables using [Vuetify SASS Variables](https://vuetifyjs.com/en/features/sass-variables/) 
 - 💥 **SSR**: automatic SSR detection and configuration
-- 🌍 **I18n ready**: install [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module, and you're ready to use Vuetify [internationalization](https://vuetifyjs.com/en/features/internationalization/) features
+- 🌍 **I18n Ready**: install [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module, and you're ready to use Vuetify [internationalization](https://vuetifyjs.com/en/features/internationalization/) features
+- 📆 **Date Components**: use Vuetify components [that require date functionality](https://vuetifyjs.com/en/features/dates/) installing and configuring one of the [@date-io](https://github.com/dmtrKovalenko/date-io#projects) adapters
 - 🦾 **Type Strong**: written in [TypeScript](https://www.typescriptlang.org/)
 
 ## 📦 Install
@@ -74,22 +75,49 @@ export default defineNuxtConfig({
 })
 ```
 
+<!--
+Read the [📖 documentation](https://vite-pwa-org.netlify.app/frameworks/nuxt) for a complete guide on how to configure and use
+this plugin.
+-->
+
+
 ## 🌍 I18n support
 
 > Requires latest [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module: `8.0.0.beta.12`.
 
 There is a [bug](https://github.com/nuxt-modules/i18n/pull/2193) in the current version that prevents `@nuxtjs/i18n` module to work properly when using `lazy` i18n files.
 
-If you're using `lazy` i18n files per locale, apply [this patch](./patches/@nuxtjs__i18n@8.0.0-beta.12.patch) to your project: check how to apply it when using `pnpm` in the root `package.json` file in this repo: [./package.json#L25-L26](./package.json#L97-L101).
+If you're using `lazy` i18n files per locale, apply [this patch](./patches/@nuxtjs__i18n@8.0.0-beta.12.patch) to your project: check how to apply it when using `pnpm` in the root `package.json` file in this repo: [package.json](./package.json#L97-L101).
 
 You can check the playground folder, you can run it using single or multiple json files per locale:
 - for single file per locale: run from root folder `pnpm install && nr dev:prepare && nr dev`
 - for multiple files per locale: run from root folder `pnpm install && nr dev:prepare:multiple-json && nr dev:multiple-json`
 
-<!--
-Read the [📖 documentation](https://vite-pwa-org.netlify.app/frameworks/nuxt) for a complete guide on how to configure and use
-this plugin.
--->
+## 📆 Date components support
+
+Right now you can only use Vuetify adapter, there is a bug and will not work, I'm working on it: https://github.com/userquin/vuetify-nuxt-module/pull/9#issuecomment-1620023814.
+
+To use Vuetify components [that require date functionality](https://vuetifyjs.com/en/features/dates/):
+- (optional): install one of the [@date-io](https://github.com/dmtrKovalenko/date-io#projects) adapters
+- configure the date entry in your Vuetify configuration:
+  ```ts
+  vuetifyOptions: {
+    date: {
+      adapter: 'vuetify' // 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom'
+    }  
+  }
+  ```
+
+If you also have `@nuxtjs/i18n` module installed, `vuetifyOptions.date.locale` will be automatically configured, beware, the configured `locale` entry will be ignored.
+
+If you want to use a custom date adapter, you can configure it using `vuetifyOptions.date.adapter = 'custom'`, and then:
+- add a Nuxt Plugin and add the `vuetify:configuration` hook to configure your Vuetify options
+- you can import the `virtual:vuetify-date-configuration` module, you will have access to the configuration:
+  ```ts
+  import { adapter, dateConfiguration, i18n } from 'virtual:vuetify-date-configuration'
+  ```
+
+Check out [vuetify-date](./src/runtime/plugins/vuetify-date.mts) plugin for an example of a custom date adapter and how to access to the configuration.
 
 ## 👀 Full config
 

package/configuration.d.ts

@@ -2,5 +2,14 @@ declare module 'virtual:vuetify-configuration' {
   import type { VuetifyOptions } from 'vuetify';
 
   export const isDev: boolean
-  export const vuetifyConfiguration: () => VuetifyOptions
+  export function vuetifyConfiguration(): VuetifyOptions
+}
+
+declare module 'virtual:vuetify-date-configuration' {
+  import type { DateOptions } from 'vuetify';
+
+  export const isDev: boolean
+  export const i18n: boolean
+  export const adapter: 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom'
+  export function dateConfiguration(): DateOptions
 }

package/dist/module.d.ts

@@ -2,6 +2,35 @@ import * as _nuxt_schema from '@nuxt/schema';
 import { VuetifyOptions } from 'vuetify';
 
 type BooleanOrArrayString = boolean | string[];
+type DateAdapter = 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom';
+/**
+ * Date configuration.
+ */
+interface DateOptions {
+    /**
+     * The date adapter.
+     *
+     * The adapter will be picked from the dependencies.
+     * When multiple `@date-io/xxxx` libraries installed in your project,
+     * you should specify the adapter otherwise an error will be thrown.
+     *
+     * If you want to use a custom adapter, configure `adapter: 'custom'`,
+     * and then add a Nuxt plugin to configure the adapter using `vuetify:configuration` hook.
+     *
+     * @default 'vuetify'
+     */
+    adapter?: DateAdapter;
+    /**
+     * Formats.
+     */
+    formats?: Record<string, string>;
+    /**
+     * Locales.
+     *
+     * When `@nuxtjs/i18n` Nuxt module is present, this option will be ignored, locales will be extracted from the available locales.
+     */
+    locale: Record<string, any>;
+}
 interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | 'locale' | 'date'>> {
     /**
      * Include the lab components?
@@ -25,21 +54,41 @@ interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | '
      * @default false
      */
     directives?: BooleanOrArrayString;
+    /**
+     * Date configuration.
+     *
+     * When this option is configured, the `v-date-picker` lab component will be included.
+     *
+     * @see https://vuetifyjs.com/features/dates/
+     * @see https://vuetifyjs.com/components/date-pickers/
+     */
+    date?: DateOptions;
 }
 interface ModuleOptions {
     moduleOptions?: {
+        /**
+         * Vuetify styles.
+         *
+         * @see https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
+         */
         styles?: true | 'none' | 'expose' | 'sass' | {
             configFile: string;
         };
     };
+    /**
+     * Vuetify options.
+     */
     vuetifyOptions?: VOptions;
 }
 declare module '#app' {
     interface RuntimeNuxtHooks {
-        'vuetify:configuration': (isDev: boolean, vuetifyOptions: VuetifyOptions) => Promise<void> | void;
+        'vuetify:configuration': (options: {
+            isDev: boolean;
+            vuetifyOptions: VuetifyOptions;
+        }) => Promise<void> | void;
     }
 }
 
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
-export { BooleanOrArrayString, ModuleOptions, VOptions, _default as default };
+export { BooleanOrArrayString, DateAdapter, DateOptions, ModuleOptions, VOptions, _default as default };

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.0.3"
+  "version": "0.1.0"
 }

package/dist/module.mjs

@@ -1,12 +1,13 @@
-import { useLogger, defineNuxtModule, createResolver, extendWebpackConfig, addPlugin, hasNuxtModule } from '@nuxt/kit';
+import { useLogger, defineNuxtModule, createResolver, hasNuxtModule, extendWebpackConfig, addPlugin } from '@nuxt/kit';
 import defu from 'defu';
 import vuetify from 'vite-plugin-vuetify';
+import 'local-pkg';
 import { utimes } from 'node:fs/promises';
 import { resolveVuetifyBase, normalizePath, writeStyles, cacheDir } from '@vuetify/loader-shared';
 import { isAbsolute, join, relative } from 'pathe';
 import { normalizePath as normalizePath$1 } from 'vite';
 
-const version = "0.0.3";
+const version = "0.1.0";
 
 function isSubdir(root, test) {
   const relative$1 = relative(root, test);
@@ -177,9 +178,18 @@ function stylesPlugin(options, logger) {
   };
 }
 
+const VIRTUAL_VUETIFY_CONFIGURATION = "virtual:vuetify-configuration";
+const RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION = `/@nuxt-vuetify-configuration/${VIRTUAL_VUETIFY_CONFIGURATION.slice("virtual:".length)}`;
+const VIRTUAL_VUETIFY_DATE_CONFIGURATION = "virtual:vuetify-date-configuration";
+const RESOLVED_VIRTUAL_VUETIFY_DATE_CONFIGURATION = `/@nuxt-vuetify-configuration/${VIRTUAL_VUETIFY_DATE_CONFIGURATION.slice("virtual:".length)}`;
+
 function vuetifyConfigurationPlugin(isDev, directives, labComponents, vuetifyAppOptions) {
-  const VIRTUAL_VUETIFY_CONFIGURATION = "virtual:vuetify-configuration";
-  const RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION = `/@nuxt-vuetify-configuration/${VIRTUAL_VUETIFY_CONFIGURATION.slice("virtual:".length)}`;
+  const {
+    directives: _directives,
+    date: _date,
+    locale: _locale,
+    ...newVuetifyOptions
+  } = vuetifyAppOptions;
   return {
     name: "vuetify:configuration:nuxt",
     enforce: "pre",
@@ -196,7 +206,7 @@ ${labComponentsResult.imports}
 
 export const isDev = ${isDev}
 export function vuetifyConfiguration() {
-  const options = ${JSON.stringify(vuetifyAppOptions)}
+  const options = ${JSON.stringify(newVuetifyOptions)}
   ${directivesResult.expression}
   ${labComponentsResult.expression}
   return options
@@ -221,7 +231,8 @@ export function vuetifyConfiguration() {
     }
   }
   function buildLabComponents() {
-    if (!labComponents)
+    const dateOptions = vuetifyAppOptions.date;
+    if (!labComponents && !dateOptions)
       return { imports: "", expression: "" };
     if (typeof labComponents === "boolean") {
       return {
@@ -229,14 +240,49 @@ export function vuetifyConfiguration() {
         expression: "options.components = labsComponents"
       };
     } else {
+      const components = [...new Set(dateOptions ? ["VDatePicker", ...labComponents] : labComponents)];
       return {
-        imports: `${labComponents.map((d) => `import { ${d} } from 'vuetify/labs/${d}'`).join("\n")}`,
-        expression: `options.components = {${labComponents.join(",")}}`
+        imports: `${components.map((d) => `import { ${d} } from 'vuetify/labs/${d}'`).join("\n")}`,
+        expression: `options.components = {${components.join(",")}}`
       };
     }
   }
 }
 
+function vuetifyDateConfigurationPlugin(isDev, i18n, dateAdapter, dateOptions) {
+  const { adapter: _adapter, ...newDateOptions } = dateOptions;
+  return {
+    name: "vuetify:date-configuration:nuxt",
+    enforce: "pre",
+    resolveId(id) {
+      if (id === VIRTUAL_VUETIFY_DATE_CONFIGURATION)
+        return RESOLVED_VIRTUAL_VUETIFY_DATE_CONFIGURATION;
+    },
+    async load(id) {
+      if (id === RESOLVED_VIRTUAL_VUETIFY_DATE_CONFIGURATION) {
+        const imports = dateAdapter === "vuetify" ? "import { VuetifyDateAdapter } from 'vuetify/labs/date/adapters/vuetify'" : dateAdapter === "custom" ? "" : `import Adapter from '@date-io/${dateAdapter}'`;
+        return `${imports}
+export const isDev = ${isDev}
+export const i18n = ${i18n}
+export const adapter = '${dateAdapter}'
+export function dateConfiguration() {
+  const options = ${JSON.stringify(newDateOptions)}
+  ${buildAdapter(dateAdapter)}
+  return options
+}
+`;
+      }
+    }
+  };
+}
+function buildAdapter(dateAdapter) {
+  if (dateAdapter === "custom")
+    return "";
+  if (dateAdapter === "vuetify")
+    return "options.adapter = VuetifyDateAdapter";
+  return "options.adapter = Adapter";
+}
+
 const CONFIG_KEY = "vuetify";
 const logger = useLogger(`nuxt:${CONFIG_KEY}`);
 const module = defineNuxtModule({
@@ -269,11 +315,33 @@ const module = defineNuxtModule({
     const vuetifyAppOptions = defu(vOptions, {
       ssr: isSSR
     });
+    const { styles = true } = moduleOptions ?? {};
+    const i18n = hasNuxtModule("@nuxtjs/i18n", nuxt);
+    let dateAdapter;
+    const dateOptions = vuetifyOptions?.date;
+    if (dateOptions) {
+      const adapter = dateOptions.adapter;
+      const date = detectDate();
+      if (!adapter && date.length > 1)
+        throw new Error(`Multiple date adapters found: ${date.map((d) => `@date-io/${d[0]}`).join(", ")}, please specify the adapter to use in the "vuetifyOptions.date.adapter" option.`);
+      if (adapter) {
+        if (adapter === "vuetify" || adapter === "custom") {
+          dateAdapter = adapter;
+        } else {
+          if (date.find((d) => d[0] === adapter) === void 0)
+            logger.warn(`Ignoring Vuetify Date configuration, date adapter "@date-io/${adapter}" not installed!`);
+          else
+            dateAdapter = adapter;
+        }
+      } else if (date.length === 0) {
+        dateAdapter = "vuetify";
+      } else {
+        dateAdapter = date[0];
+      }
+    }
     const runtimeDir = resolver.resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
     nuxt.options.build.transpile.push(CONFIG_KEY);
-    const { styles = true } = moduleOptions ?? {};
-    nuxt.options.build.transpile.push(CONFIG_KEY);
     (_a = nuxt.options).css ?? (_a.css = []);
     if (typeof styles === "string" && ["sass", "expose"].includes(styles))
       nuxt.options.css.unshift("vuetify/styles/main.sass");
@@ -282,7 +350,7 @@ const module = defineNuxtModule({
     else if (typeof styles === "object" && styles?.configFile && typeof styles.configFile === "string")
       nuxt.options.css.unshift(styles.configFile);
     extendWebpackConfig(() => {
-      throw new Error("Webpack is not supported yet: vuetify-nuxt-module module can only be used with Vite!");
+      throw new Error("Webpack is not supported: vuetify-nuxt-module module can only be used with Vite!");
     });
     nuxt.hook("vite:extend", ({ config }) => checkVuetifyPlugins(config));
     nuxt.hook("prepare:types", ({ references }) => {
@@ -307,15 +375,28 @@ const module = defineNuxtModule({
         labComponents,
         vuetifyAppOptions
       ));
+      if (dateAdapter) {
+        viteInlineConfig.plugins.push(vuetifyDateConfigurationPlugin(
+          nuxt.options.dev,
+          i18n,
+          dateAdapter,
+          dateOptions
+        ));
+      }
     });
     addPlugin({
       src: resolver.resolve(runtimeDir, "plugins/vuetify.mts")
     });
-    if (hasNuxtModule("@nuxtjs/i18n", nuxt)) {
+    if (i18n) {
       addPlugin({
         src: resolver.resolve(runtimeDir, "plugins/vuetify-i18n.mts")
       });
     }
+    if (dateAdapter) {
+      addPlugin({
+        src: resolver.resolve(runtimeDir, "plugins/vuetify-date.mts")
+      });
+    }
   }
 });
 function checkVuetifyPlugins(config) {
@@ -326,5 +407,9 @@ function checkVuetifyPlugins(config) {
   if (plugin)
     throw new Error("Remove vite-plugin-vuetify plugin from Vite Plugins entry in Nuxt config file!");
 }
+function detectDate() {
+  const result = [];
+  return result;
+}
 
 export { module as default };

package/dist/runtime/plugins/date.d.ts

@@ -0,0 +1,3 @@
+import type { DateOptions } from '../../types';
+import type { NuxtApp } from '#app';
+export declare function configureLocales(nuxtApp: NuxtApp, options: DateOptions): DateOptions;

package/dist/runtime/plugins/date.mjs

@@ -0,0 +1,11 @@
+import { camelize } from "../../utils";
+export function configureLocales(nuxtApp, options) {
+  const locales = nuxtApp.$i18n?.locales.value;
+  if (locales) {
+    options.locale = locales.reduce((acc, locale) => {
+      acc[camelize(locale.code)] = locale.code;
+      return acc;
+    }, {});
+  }
+  return options;
+}

package/dist/runtime/plugins/i18n.mjs

@@ -7,6 +7,7 @@ import {
   toRaw,
   watch
 } from "vue";
+import { toKebabCase } from "../../utils";
 import { useI18n } from "#imports";
 export function createAdapter(nuxtApp) {
   const i18n = nuxtApp.$i18n;
@@ -31,14 +32,6 @@ function getCurrentInstance(name, message) {
     throw new Error(`[Vuetify] ${name} ${message || "must be called from inside a setup function"}`);
   return vm;
 }
-function toKebabCase(str = "") {
-  if (toKebabCase.cache.has(str))
-    return toKebabCase.cache.get(str);
-  const kebab = str.replace(/[^a-z]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
-  toKebabCase.cache.set(str, kebab);
-  return kebab;
-}
-toKebabCase.cache = /* @__PURE__ */ new Map();
 function useToggleScope(source, fn) {
   let scope;
   function start() {

package/dist/runtime/plugins/vuetify-date.mts

@@ -0,0 +1,16 @@
+import { adapter, dateConfiguration, i18n } from 'virtual:vuetify-date-configuration'
+import { configureLocales } from './date'
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('vuetify:configuration', async ({ vuetifyOptions }) => {
+    if (adapter === 'custom')
+      return
+
+    const options = dateConfiguration()
+    if (i18n)
+      configureLocales(nuxtApp, options)
+
+    vuetifyOptions.date = options
+  })
+})

package/dist/runtime/plugins/vuetify-i18n.mts

@@ -2,7 +2,7 @@ import { createAdapter } from './i18n'
 import { defineNuxtPlugin } from '#app'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.hook('vuetify:configuration', (_isDev, vuetifyOptions) => {
+  nuxtApp.hook('vuetify:configuration', ({ vuetifyOptions }) => {
     vuetifyOptions.locale = vuetifyOptions.locale ?? {}
     vuetifyOptions.locale.adapter = createAdapter(nuxtApp)
   })

package/dist/runtime/plugins/vuetify.mts

@@ -8,11 +8,11 @@ export default defineNuxtPlugin({
   parallel: false,
   async setup() {
     const nuxtApp = useNuxtApp()
-    const options = vuetifyConfiguration()
+    const vuetifyOptions = vuetifyConfiguration()
 
-    await nuxtApp.hooks.callHook('vuetify:configuration', isDev, options)
+    await nuxtApp.hooks.callHook('vuetify:configuration', { isDev, vuetifyOptions })
 
-    const vuetify = createVuetify(options)
+    const vuetify = createVuetify(vuetifyOptions)
 
     nuxtApp.vueApp.use(vuetify)
 

package/dist/types.d.ts

@@ -12,4 +12,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export { BooleanOrArrayString, ModuleOptions, VOptions, default } from './module'
+export { BooleanOrArrayString, DateAdapter, DateOptions, ModuleOptions, VOptions, default } from './module'

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "0.0.3",
-  "packageManager": "pnpm@8.6.5",
+  "version": "0.1.0",
+  "packageManager": "pnpm@8.6.6",
   "description": "Zero-Config Nuxt Module for Vuetify ",
   "author": "userquin <userquin@gmail.com>",
   "license": "MIT",
@@ -64,6 +64,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.39.6",
     "@antfu/ni": "^0.21.4",
+    "@date-io/luxon": "^2.16.1",
     "@nuxt/devtools": "^0.6.6",
     "@nuxt/module-builder": "^0.4.0",
     "@nuxt/schema": "^3.6.1",
@@ -73,6 +74,7 @@
     "@types/node": "^18",
     "bumpp": "^9.1.1",
     "eslint": "^8.43.0",
+    "luxon": "^3.3.0",
     "nuxt": "^3.6.1",
     "sass": "^1.63.6",
     "typescript": "^5.1.6",
@@ -86,6 +88,7 @@
       "node:fs",
       "consola",
       "esbuild",
+      "local-pkg",
       "pathe",
       "rollup",
       "upath",