fix(vuetify): separate composable auto-imports from component resolution

packages/vue/vite.ts

@@ -1,5 +1,22 @@
-// made for https://github.com/unplugin/unplugin-auto-import
-
+/**
+ * Preset for {@link https://github.com/unplugin/unplugin-auto-import unplugin-auto-import}.
+ *
+ * Auto-imports Vue, vue-router, vue-i18n built-ins and all data-fair composables
+ * so they can be used in `<script setup>` without explicit import statements.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { autoImports } from '@data-fair/lib-vue/vite.js'
+ * import AutoImport from 'unplugin-auto-import/vite'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     AutoImport({ imports: [...autoImports] })
+ *   ]
+ * })
+ * ```
+ */
 export const autoImports = [
   'vue',
   'vue-i18n',

packages/vuetify/vite.ts

@@ -1,24 +1,54 @@
-// made for https://github.com/unplugin/unplugin-auto-import
-import { autoImports as vueAutoImports } from '@data-fair/lib-vue/vite.js'
+/**
+ * Re-export of {@link autoImports} from `@data-fair/lib-vue/vite.js`.
+ *
+ * Composables-only preset for {@link https://github.com/unplugin/unplugin-auto-import unplugin-auto-import}.
+ * Does not include components — use {@link componentsResolver} with
+ * {@link https://github.com/unplugin/unplugin-vue-components unplugin-vue-components} for that.
+ */
+export { autoImports } from '@data-fair/lib-vue/vite.js'
 
-export const autoImports = [
-  ...vueAutoImports,
-  {
-    '@data-fair/lib-vuetify/date-match-filter.vue': [['default', 'dfDateMatchFilter']],
-    '@data-fair/lib-vuetify/date-range-picker.vue': [['default', 'dfDateRangePicker']],
-    '@data-fair/lib-vuetify/lang-switcher.vue': [['default', 'dfLangSwitcher']],
-    '@data-fair/lib-vuetify/navigation-right.vue': [['default', 'dfNavigationRight']],
-    '@data-fair/lib-vuetify/owner-avatar.vue': [['default', 'dfOwnerAvatar']],
-    '@data-fair/lib-vuetify/owner-pick.vue': [['default', 'dfOwnerPick']],
-    '@data-fair/lib-vuetify/personal-menu.vue': [['default', 'dfPersonalMenu']],
-    // I don't understand why but search-address.vue breaks some typescript checks
-    // '@data-fair/lib-vuetify/search-address.vue': [['default', 'dfSearchAddress']],
-    '@data-fair/lib-vuetify/theme-switcher.vue': [['default', 'dfThemeSwitcher']],
-    '@data-fair/lib-vuetify/tutorial-alert.vue': [['default', 'dfTutorialAlert']],
-    '@data-fair/lib-vuetify/ui-notif-alert.vue': [['default', 'dfUiNotifAlert']],
-    '@data-fair/lib-vuetify/ui-notif.vue': [['default', 'dfUiNotif']],
-    '@data-fair/lib-vuetify/ui-user-avatar.vue': [['default', 'dfUserAvatar']]
-  }
-]
+/**
+ * Map of PascalCase component names to their module paths.
+ * Used internally by {@link componentsResolver}.
+ */
+const components: Record<string, string> = {
+  DfDateMatchFilter: '@data-fair/lib-vuetify/date-match-filter.vue',
+  DfDateRangePicker: '@data-fair/lib-vuetify/date-range-picker.vue',
+  DfLangSwitcher: '@data-fair/lib-vuetify/lang-switcher.vue',
+  DfNavigationRight: '@data-fair/lib-vuetify/navigation-right.vue',
+  DfOwnerAvatar: '@data-fair/lib-vuetify/owner-avatar.vue',
+  DfOwnerPick: '@data-fair/lib-vuetify/owner-pick.vue',
+  DfPersonalMenu: '@data-fair/lib-vuetify/personal-menu.vue',
+  DfSearchAddress: '@data-fair/lib-vuetify/search-address.vue',
+  DfSearchField: '@data-fair/lib-vuetify/search-field.vue',
+  DfThemeSwitcher: '@data-fair/lib-vuetify/theme-switcher.vue',
+  DfTutorialAlert: '@data-fair/lib-vuetify/tutorial-alert.vue',
+  DfUiNotifAlert: '@data-fair/lib-vuetify/ui-notif-alert.vue',
+  DfUiNotif: '@data-fair/lib-vuetify/ui-notif.vue',
+  DfUserAvatar: '@data-fair/lib-vuetify/user-avatar.vue'
+}
+
+/**
+ * Resolver for {@link https://github.com/unplugin/unplugin-vue-components unplugin-vue-components}.
+ *
+ * Resolves `Df`-prefixed component names (e.g. `<DfPersonalMenu>` or `<df-personal-menu>`)
+ * to their corresponding `@data-fair/lib-vuetify/*.vue` module.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { componentsResolver } from '@data-fair/lib-vuetify/vite.js'
+ * import Components from 'unplugin-vue-components/vite'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     Components({ resolvers: [componentsResolver] })
+ *   ]
+ * })
+ * ```
+ */
+export const componentsResolver = (name: string) => {
+  if (components[name]) return components[name]
+}
 
 export const settingsPath = new URL(import.meta.resolve('@data-fair/lib-vuetify/style/settings.scss')).pathname