vuetify-nuxt-module 0.2.4 → 0.3.0

package/README.md

@@ -175,7 +175,7 @@ vuetify: {
 
 ### fa-svg
 
-You only need to add `@fortawesome/fontawesome-svg-core`, `@fortawesome/vue-fontawesome`, and `@fortawesome/free-solid-svg-icons` dependencies to your project and configure the default set:
+You only need to add `@fortawesome/fontawesome-svg-core`, `@fortawesome/vue-fontawesome` and `@fortawesome/free-solid-svg-icons` dependencies to your project and configure the default set:
 ```ts
 vuetify: {
   vuetifyOptions: {
@@ -194,7 +194,7 @@ vuetify: {
       defaultSet: 'fa-svg',
       svg: {
         fa: {
-          libraries: [/* default export? */ false, /* export name */ 'fas', /* import */ '@fortawesome/free-solid-svg-icons']
+          libraries: [/* default export? */ false, /* export name */ 'fas', /* library */ '@fortawesome/free-solid-svg-icons']
         }
       }
     }
@@ -210,7 +210,7 @@ vuetify: {
   vuetifyOptions: {
     icons: {
       defaultSet: 'mdi'
-      sets: [{ name: 'mdi' }, { name: 'fa' }]
+      sets: ['mdi', 'fa']
     }
   }
 }
@@ -248,7 +248,7 @@ If you want to use a custom date adapter, you can configure it using `vuetifyOpt
   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.
+Check out [vuetify-date](https://github.com/userquin/vuetify-nuxt-module/blob/main/src/runtime/plugins/vuetify-date.mts) plugin for an example of a custom date adapter and how to access to the configuration.
 
 ## ⚙️ Auto-Import Vuetify Composables
 
@@ -278,10 +278,10 @@ If you are using another composables that collide with the Vuetify ones, enable
 
 ## 👀 Full config
 
-Check out the type declaration [src/types.ts](./src/types.ts).
+Check out the type declaration [src/types.ts](https://github.com/userquin/vuetify-nuxt-module/blob/main/src/types.ts).
 
-The virtual modules can be found in [configuration.d.ts](./configuration.d.ts) file.
+The virtual modules can be found in [configuration.d.ts](https://github.com/userquin/vuetify-nuxt-module/blob/main/configuration.d.ts) file.
 
 ## 📄 License
 
-[MIT](./LICENSE) License © 2023-PRESENT [Joaquín Sánchez](https://github.com/userquin)
+[MIT](https://github.com/userquin/vuetify-nuxt-module/blob/main/LICENSE) License © 2023-PRESENT [Joaquín Sánchez](https://github.com/userquin)

package/dist/module.d.ts

@@ -1,8 +1,9 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import * as vuetify from 'vuetify';
 import { VuetifyOptions } from 'vuetify';
+import * as vuetify_directives from 'vuetify/directives';
+import * as vuetify_labs_components from 'vuetify/labs/components';
 
-type BooleanOrArrayString = boolean | string[];
 type DateAdapter = 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom';
 /**
  * Date configuration.
@@ -30,16 +31,14 @@ interface DateOptions {
      *
      * When `@nuxtjs/i18n` Nuxt module is present, this option will be ignored, locales will be extracted from the available locales.
      */
-    locale: Record<string, any>;
+    locale?: Record<string, any>;
 }
 type IconSetName = 'mdi' | 'fa' | 'fa4' | 'md' | 'mdi-svg' | 'fa-svg' | 'custom';
-interface IconSet {
-    name: IconSetName;
-}
-interface JSSVGIconSet extends IconSet {
+type IconFontName = 'mdi' | 'fa' | 'fa4' | 'md';
+interface JSSVGIconSet {
     aliases?: Record<string, string>;
 }
-interface FontAwesomeSvgIconSet extends IconSet {
+interface FontAwesomeSvgIconSet {
     /**
      * The libraries to import and register with the corresponding name.
      *
@@ -53,7 +52,8 @@ interface FontAwesomeSvgIconSet extends IconSet {
      */
     libraries?: [defaultExport: boolean, name: string, library: string][];
 }
-interface FontIconSet extends IconSet {
+interface FontIconSet {
+    name: IconFontName;
     /**
      * Use CDN?
      *
@@ -68,12 +68,16 @@ interface FontIconSet extends IconSet {
 }
 interface IconsOptions {
     defaultSet: IconSetName;
-    sets?: FontIconSet[];
+    sets?: IconFontName | IconFontName[] | FontIconSet[];
     svg?: {
         mdi?: JSSVGIconSet;
         fa?: FontAwesomeSvgIconSet;
     };
 }
+type LabComponentName = keyof typeof vuetify_labs_components;
+type LabComponents = boolean | LabComponentName | LabComponentName[];
+type DirectiveName = keyof typeof vuetify_directives;
+type Directives = boolean | DirectiveName | DirectiveName[];
 interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | 'locale' | 'date' | 'icons'>> {
     /**
      * Include the lab components?
@@ -86,7 +90,7 @@ interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | '
      *
      * @default false
      */
-    labComponents?: BooleanOrArrayString;
+    labComponents?: LabComponents;
     /**
      * Include the directives?
      *
@@ -96,7 +100,7 @@ interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | '
      *
      * @default false
      */
-    directives?: BooleanOrArrayString;
+    directives?: Directives;
     /**
      * Date configuration.
      *
@@ -163,4 +167,4 @@ declare module '#app' {
 
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
-export { BooleanOrArrayString, DateAdapter, DateOptions, FontAwesomeSvgIconSet, FontIconSet, IconSet, IconSetName, IconsOptions, JSSVGIconSet, MOptions, ModuleOptions, VOptions, _default as default };
+export { DateAdapter, DateOptions, DirectiveName, Directives, FontAwesomeSvgIconSet, FontIconSet, IconFontName, IconSetName, IconsOptions, JSSVGIconSet, LabComponentName, LabComponents, MOptions, ModuleOptions, VOptions, _default as default };

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.4"
+  "version": "0.3.0"
 }

package/dist/module.mjs

@@ -6,7 +6,7 @@ import { resolveVuetifyBase, normalizePath, writeStyles, cacheDir } from '@vueti
 import { isAbsolute, join, relative } from 'pathe';
 import { normalizePath as normalizePath$1 } from 'vite';
 
-const version = "0.2.4";
+const version = "0.3.0";
 
 function isSubdir(root, test) {
   const relative$1 = relative(root, test);
@@ -225,9 +225,10 @@ export function vuetifyConfiguration() {
         expression: "options.directives = directives"
       };
     } else {
+      const useDirectives = Array.isArray(directives) ? directives : [directives];
       return {
-        imports: `${directives.map((d) => `import { ${d} } from 'vuetify/directives/${d}'`).join("\n")}`,
-        expression: `options.directives = {${directives.join(",")}}`
+        imports: `${useDirectives.map((d) => `import { ${d} } from 'vuetify/directives/${d}'`).join("\n")}`,
+        expression: `options.directives = {${useDirectives.join(",")}}`
       };
     }
   }
@@ -241,7 +242,8 @@ export function vuetifyConfiguration() {
         expression: "options.components = labsComponents"
       };
     } else {
-      const components = [...new Set(dateOptions ? ["VDatePicker", ...labComponents] : labComponents)];
+      const useComponents = Array.isArray(labComponents) ? labComponents : [labComponents];
+      const components = [...new Set(dateOptions ? ["VDatePicker", ...useComponents] : useComponents)];
       return {
         imports: `${components.map((d) => `import { ${d} } from 'vuetify/labs/${d}'`).join("\n")}`,
         expression: `options.components = {${components.join(",")}}`
@@ -297,15 +299,25 @@ const iconsCDN = {
   fa: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css",
   fa4: "https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css"
 };
+const disabledResolvedIcons = Object.freeze({
+  enabled: false,
+  imports: [],
+  aliases: [],
+  sets: [],
+  cdn: [],
+  local: [],
+  svg: {}
+});
 function prepareIcons(logger, vuetifyOptions) {
   if (vuetifyOptions.icons === false)
-    return { enabled: false };
-  vuetifyOptions.icons = vuetifyOptions.icons ?? {};
-  let { defaultSet = "mdi", sets } = vuetifyOptions.icons;
+    return disabledResolvedIcons;
+  const icons = vuetifyOptions.icons || {};
+  let { defaultSet = "mdi", sets } = icons;
   if (!defaultSet)
-    defaultSet = vuetifyOptions.icons.defaultSet = "mdi";
-  if (!sets)
+    defaultSet = icons.defaultSet = "mdi";
+  if (!sets && defaultSet !== "mdi-svg" && defaultSet !== "fa-svg" && defaultSet !== "custom")
     sets = [{ name: defaultSet || "mdi" }];
+  sets = sets ? convertFontSetsToObjectNotation(sets) : void 0;
   const resolvedIcons = {
     enabled: true,
     defaultSet,
@@ -318,30 +330,33 @@ function prepareIcons(logger, vuetifyOptions) {
       mdi: false
     }
   };
-  sets.filter((s) => cssFonts.includes(s.name)).map((s) => s.name).forEach((name) => {
-    resolvedIcons.imports.push(`import {${name === defaultSet ? "aliases," : ""}${name}} from 'vuetify/iconsets/${name}'`);
-    resolvedIcons.sets.push(name);
-    if (isPackageExists(iconsPackageNames[name].name))
-      resolvedIcons.local.push(iconsPackageNames[name].css);
-    else
-      resolvedIcons.cdn.push(iconsCDN[name]);
-  });
-  let faSvg = vuetifyOptions.icons.svg?.fa;
+  if (sets) {
+    sets.filter((s) => cssFonts.includes(s.name)).map((s) => s.name).forEach((name) => {
+      resolvedIcons.imports.push(`import {${name === defaultSet ? "aliases," : ""}${name}} from 'vuetify/iconsets/${name}'`);
+      resolvedIcons.sets.push(name);
+      if (isPackageExists(iconsPackageNames[name].name))
+        resolvedIcons.local.push(iconsPackageNames[name].css);
+      else
+        resolvedIcons.cdn.push(iconsCDN[name]);
+    });
+  }
+  let faSvg = icons.svg?.fa;
   if (defaultSet === "fa-svg" || faSvg) {
+    if (!faSvg)
+      faSvg = {};
     let faSvgExists = isPackageExists("@fortawesome/fontawesome-svg-core");
     if (!faSvgExists)
       logger.warn("Missing @fortawesome/fontawesome-svg-core dependency, install it!");
     faSvgExists = isPackageExists("@fortawesome/vue-fontawesome");
     if (faSvgExists) {
-      if (!faSvg?.libraries?.length) {
-        faSvg = faSvg || {};
+      if (!faSvg.libraries?.length)
         faSvg.libraries = [[false, "fas", "@fortawesome/free-solid-svg-icons"]];
-      }
       for (const p in faSvg.libraries) {
         const [_defaultExport, _name, library] = faSvg.libraries[p];
-        faSvgExists = isPackageExists(library);
-        if (!faSvgExists)
+        if (!isPackageExists(library)) {
+          faSvgExists = false;
           logger.warn(`Missing library ${library} dependency, install it!`);
+        }
       }
     } else {
       logger.warn("Missing @fortawesome/vue-fontawesome dependency, install it!");
@@ -361,8 +376,10 @@ function prepareIcons(logger, vuetifyOptions) {
         resolvedIcons.defaultSet = "fa";
     }
   }
-  const mdiSvg = vuetifyOptions.icons.svg?.mdi;
+  let mdiSvg = icons.svg?.mdi;
   if (defaultSet === "mdi-svg" || mdiSvg) {
+    if (!mdiSvg)
+      mdiSvg = {};
     const mdiSvgExists = isPackageExists("@mdi/js");
     if (mdiSvgExists) {
       resolvedIcons.svg.mdi = true;
@@ -383,10 +400,24 @@ function prepareIcons(logger, vuetifyOptions) {
   }
   if (!resolvedIcons.local?.length && !resolvedIcons.cdn?.length && !resolvedIcons.svg?.mdi && !resolvedIcons.svg?.fa?.length) {
     logger.warn("No icons found, icons disabled!");
-    return { enabled: false };
+    return disabledResolvedIcons;
   }
   return resolvedIcons;
 }
+function convertFontSetsToObjectNotation(sets) {
+  const result = [];
+  if (typeof sets === "string") {
+    result.push({ name: sets });
+  } else {
+    for (const set of sets) {
+      if (typeof set === "string")
+        result.push({ name: set });
+      else
+        result.push(set);
+    }
+  }
+  return result;
+}
 
 function vuetifyIconsPlugin(isDev, resolvedIcons) {
   const iconsOptionsPromise = prepareIcons();
@@ -518,7 +549,7 @@ const module = defineNuxtModule({
         if (adapter === "vuetify" || adapter === "custom") {
           dateAdapter = adapter;
         } else {
-          if (date.find((d) => d[0] === adapter) === void 0)
+          if (date.find((d) => d === adapter) === void 0)
             logger.warn(`Ignoring Vuetify Date configuration, date adapter "@date-io/${adapter}" not installed!`);
           else
             dateAdapter = adapter;
@@ -559,8 +590,8 @@ const module = defineNuxtModule({
     nuxt.hook("prepare:types", ({ references }) => {
       references.push({ types: "vuetify-nuxt-module/configuration" });
     });
-    const vuetifyBase = resolveVuetifyBase();
     nuxt.hook("components:extend", async (c) => {
+      const vuetifyBase = resolveVuetifyBase();
       const { components } = JSON.parse(await readFile(resolver.resolve(vuetifyBase, "dist/json/importMap.json"), "utf-8"));
       Object.keys(components).forEach((component) => {
         const from = components[component].from;
@@ -568,7 +599,6 @@ const module = defineNuxtModule({
           pascalName: component,
           kebabName: toKebabCase(component),
           export: component,
-          // pointing to the mjs file, links will not work: there is d.mts file for each component
           filePath: `${resolver.resolve(vuetifyBase, `lib/${from}`)}`,
           shortPath: `components/${from}`,
           chunkName: toKebabCase(component),

package/dist/types.d.ts

@@ -12,4 +12,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export { BooleanOrArrayString, DateAdapter, DateOptions, FontAwesomeSvgIconSet, FontIconSet, IconSet, IconSetName, IconsOptions, JSSVGIconSet, MOptions, ModuleOptions, VOptions, default } from './module'
+export { DateAdapter, DateOptions, DirectiveName, Directives, FontAwesomeSvgIconSet, FontIconSet, IconFontName, IconSetName, IconsOptions, JSSVGIconSet, LabComponentName, LabComponents, MOptions, ModuleOptions, VOptions, default } from './module'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "packageManager": "pnpm@8.6.6",
   "description": "Zero-Config Nuxt Module for Vuetify ",
   "author": "userquin <userquin@gmail.com>",