unplugin-vue-components 0.19.5 → 0.19.6

package/README.md

@@ -176,7 +176,7 @@ Components({
 
 Once the setup is done, a `components.d.ts` will be generated and updates automatically with the type definitions. Feel free to commit it into git or not as you want.
 
-**Make sure you also add `components.d.ts` to your `tsconfig.json` under `includes`.**
+> **Make sure you also add `components.d.ts` to your `tsconfig.json` under `includes`.**
 
 ## Importing from UI Libraries
 
@@ -256,7 +256,7 @@ Components({
 
 So the `RouterLink` and `RouterView` will be presented in `components.d.ts`.
 
-By default, `unplugin-vue-components` detects supported libraries automatically (e.g. `vue-router`) when their are installed in the workspace. If you want to disable it completely, you can pass an empty array to it:
+By default, `unplugin-vue-components` detects supported libraries automatically (e.g. `vue-router`) when they are installed in the workspace. If you want to disable it completely, you can pass an empty array to it:
 
 ```ts
 Components({
@@ -342,6 +342,12 @@ Components({
   // To install Babel, run: `npm install -D @babel/parser @babel/traverse`
   directives: true,
 
+  // Transform path before resolving
+  importPathTransform: v => v,
+
+  // Allow for components to override other components with the same name
+  allowOverrides: false,
+
   // filters for transforming targets
   include: [/\.vue$/, /\.vue\?vue/],
   exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
@@ -350,7 +356,7 @@ Components({
 
 ## Example
 
-See the [Vitesse](https://github.com/antfu/vitesse) starter template.
+[Vitesse](https://github.com/antfu/vitesse) starter template.
 
 ## Thanks
 

package/dist/resolvers.d.ts

@@ -131,6 +131,12 @@ interface IduxResolverOptions {
      * import style along with components
      */
     importStyle?: 'css' | 'less';
+    /**
+     * theme for import style
+     *
+     * @default 'default'
+     */
+    importStyleTheme?: string;
 }
 /**
  * Resolver for `@idux/cdk`, `@idux/components` and ``@idux/pro``
@@ -291,7 +297,7 @@ interface VeuiResolverOptions {
  *
  * @link https://github.com/ecomfe/veui
  */
-declare function VeuiResolver(options: VeuiResolverOptions): ComponentResolver;
+declare function VeuiResolver(options?: VeuiResolverOptions): ComponentResolver;
 
 /**
  * Resolver for View UI

package/dist/resolvers.js

@@ -389,7 +389,7 @@ function ElementPlusResolver(options = {}) {
       return optionsResolved;
     optionsResolved = _chunkTMX2H7L5js.__spreadValues.call(void 0, {
       ssr: false,
-      version: await _chunkTMX2H7L5js.getPkgVersion.call(void 0, "element-plus", "1.1.0-beta.21"),
+      version: await _chunkTMX2H7L5js.getPkgVersion.call(void 0, "element-plus", "2.2.2"),
       importStyle: "css",
       directives: true,
       exclude: void 0
@@ -523,18 +523,20 @@ var specialComponents = {
   IxAutoComplete: "auto-complete",
   IxBackTop: "back-top",
   IxDatePicker: "date-picker",
+  IxDateRangePicker: "date-picker",
   IxCol: "grid",
   IxRow: "grid",
   IxInputNumber: "input-number",
   IxTab: "tabs",
   IxTreeSelect: "tree-select",
-  IxTimePicker: "time-picker"
+  IxTimePicker: "time-picker",
+  IxTimeRangePicker: "time-picker"
 };
 function IduxResolver(options = {}) {
   return {
     type: "component",
     resolve: (name) => {
-      const { importStyle, exclude = [] } = options;
+      const { importStyle, importStyleTheme = "default", exclude = [] } = options;
       if (exclude.includes(name))
         return;
       const packageName = getPackageName(name);
@@ -548,7 +550,7 @@ function IduxResolver(options = {}) {
       const path = `@idux/${packageName}/${dirname}`;
       let sideEffects;
       if (packageName !== "cdk" && importStyle)
-        sideEffects = `${path}/style/themes/${importStyle === "css" ? "default_css" : "default"}`;
+        sideEffects = `${path}/style/themes/${importStyle === "css" ? `${importStyleTheme}_css` : importStyleTheme}`;
       return { name, from: path, sideEffects };
     }
   };
@@ -786,7 +788,7 @@ function VarletUIResolver(options = {}) {
 var _path = require('path');
 var VEUI_PACKAGE_NAME = "veui";
 var components3;
-function VeuiResolver(options) {
+function VeuiResolver(options = {}) {
   const { alias = VEUI_PACKAGE_NAME } = options;
   if (!components3) {
     try {
@@ -1298,13 +1300,16 @@ var layuiRE = /^Lay[A-Z]/;
 var layerRE = /^(layer|LayLayer)$/;
 var iconsRE = /^([A-Z][\w]+Icon|LayIcon)$/;
 var libName = "@layui/layui-vue";
+function lowerCamelCase(str) {
+  return str.charAt(0).toLowerCase() + str.slice(1);
+}
 function getSideEffects9(importName, options) {
   const { importStyle = "css" } = options;
   if (!importStyle)
     return void 0;
   if (libName !== "@layui/layui-vue")
     return `${libName}/lib/index.css`;
-  let styleDir = _chunkTMX2H7L5js.camelCase.call(void 0, importName.slice(3));
+  let styleDir = lowerCamelCase(importName.slice(3));
   for (const item of matchComponents4) {
     if (item.pattern.test(importName)) {
       styleDir = item.styleDir;
@@ -1325,7 +1330,7 @@ function resolveComponent2(importName, options) {
   } else if (importName.match(layerRE)) {
     name = importName;
     libName = "@layui/layer-vue";
-  } else if (importName.match(layuiRE)) {
+  } else if (importName.match(layuiRE) && !importName.match(iconsRE)) {
     name = importName;
     libName = "@layui/layui-vue";
   }

package/dist/resolvers.mjs

@@ -389,7 +389,7 @@ function ElementPlusResolver(options = {}) {
       return optionsResolved;
     optionsResolved = __spreadValues({
       ssr: false,
-      version: await getPkgVersion("element-plus", "1.1.0-beta.21"),
+      version: await getPkgVersion("element-plus", "2.2.2"),
       importStyle: "css",
       directives: true,
       exclude: void 0
@@ -523,18 +523,20 @@ var specialComponents = {
   IxAutoComplete: "auto-complete",
   IxBackTop: "back-top",
   IxDatePicker: "date-picker",
+  IxDateRangePicker: "date-picker",
   IxCol: "grid",
   IxRow: "grid",
   IxInputNumber: "input-number",
   IxTab: "tabs",
   IxTreeSelect: "tree-select",
-  IxTimePicker: "time-picker"
+  IxTimePicker: "time-picker",
+  IxTimeRangePicker: "time-picker"
 };
 function IduxResolver(options = {}) {
   return {
     type: "component",
     resolve: (name) => {
-      const { importStyle, exclude = [] } = options;
+      const { importStyle, importStyleTheme = "default", exclude = [] } = options;
       if (exclude.includes(name))
         return;
       const packageName = getPackageName(name);
@@ -548,7 +550,7 @@ function IduxResolver(options = {}) {
       const path = `@idux/${packageName}/${dirname}`;
       let sideEffects;
       if (packageName !== "cdk" && importStyle)
-        sideEffects = `${path}/style/themes/${importStyle === "css" ? "default_css" : "default"}`;
+        sideEffects = `${path}/style/themes/${importStyle === "css" ? `${importStyleTheme}_css` : importStyleTheme}`;
       return { name, from: path, sideEffects };
     }
   };
@@ -786,7 +788,7 @@ function VarletUIResolver(options = {}) {
 import { join, normalize } from "path";
 var VEUI_PACKAGE_NAME = "veui";
 var components3;
-function VeuiResolver(options) {
+function VeuiResolver(options = {}) {
   const { alias = VEUI_PACKAGE_NAME } = options;
   if (!components3) {
     try {
@@ -1298,13 +1300,16 @@ var layuiRE = /^Lay[A-Z]/;
 var layerRE = /^(layer|LayLayer)$/;
 var iconsRE = /^([A-Z][\w]+Icon|LayIcon)$/;
 var libName = "@layui/layui-vue";
+function lowerCamelCase(str) {
+  return str.charAt(0).toLowerCase() + str.slice(1);
+}
 function getSideEffects9(importName, options) {
   const { importStyle = "css" } = options;
   if (!importStyle)
     return void 0;
   if (libName !== "@layui/layui-vue")
     return `${libName}/lib/index.css`;
-  let styleDir = camelCase(importName.slice(3));
+  let styleDir = lowerCamelCase(importName.slice(3));
   for (const item of matchComponents4) {
     if (item.pattern.test(importName)) {
       styleDir = item.styleDir;
@@ -1325,7 +1330,7 @@ function resolveComponent2(importName, options) {
   } else if (importName.match(layerRE)) {
     name = importName;
     libName = "@layui/layer-vue";
-  } else if (importName.match(layuiRE)) {
+  } else if (importName.match(layuiRE) && !importName.match(iconsRE)) {
     name = importName;
     libName = "@layui/layui-vue";
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unplugin-vue-components",
-  "version": "0.19.5",
-  "packageManager": "pnpm@6.32.3",
+  "version": "0.19.6",
+  "packageManager": "pnpm@7.1.5",
   "description": "Components auto importing for Vue",
   "homepage": "https://github.com/antfu/unplugin-vue-components",
   "bugs": "https://github.com/antfu/unplugin-vue-components/issues",
@@ -61,6 +61,17 @@
       ]
     }
   },
+  "scripts": {
+    "build": "tsup && esno scripts/postbuild.ts",
+    "dev": "tsup --watch src",
+    "example:build": "npm -C examples/vite-vue3 run build",
+    "example:dev": "npm -C examples/vite-vue3 run dev",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint .",
+    "release": "bumpp --commit --tag --push",
+    "test": "vitest",
+    "test:update": "vitest --u"
+  },
   "peerDependencies": {
     "@babel/parser": "^7.15.8",
     "@babel/traverse": "^7.15.4",
@@ -111,16 +122,5 @@
   },
   "engines": {
     "node": ">=14"
-  },
-  "scripts": {
-    "build": "tsup && esno scripts/postbuild.ts",
-    "dev": "tsup --watch src",
-    "example:build": "npm -C examples/vite-vue3 run build",
-    "example:dev": "npm -C examples/vite-vue3 run dev",
-    "lint": "eslint .",
-    "release": "bumpp --commit --tag --push",
-    "test": "vitest",
-    "test:update": "vitest --u"
-  },
-  "readme": "# unplugin-vue-components\n\n[![NPM version](https://img.shields.io/npm/v/unplugin-vue-components?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-vue-components)\n\nOn-demand components auto importing for Vue.\n\n###### Features\n\n- 💚 Supports both Vue 2 and Vue 3 out-of-the-box.\n- ✨ Supports both components and directives.\n- ⚡️ Supports Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by <a href=\"https://github.com/unjs/unplugin\">unplugin</a>.\n- 🏝 Tree-shakable, only registers the components you use.\n- 🪐 Folder names as namespaces.\n- 🦾 Full TypeScript support.\n- 🌈 [Built-in resolvers](#importing-from-ui-libraries) for popular UI libraries.\n- 😃 Works perfectly with [unplugin-icons](https://github.com/antfu/unplugin-icons).\n\n<br>\n\n<p align=\"center\">\n  <a href=\"https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg\">\n    <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/>\n  </a>\n</p>\n\n<br>\n\n## Installation\n\n```bash\nnpm i unplugin-vue-components -D\n```\n\n> **`vite-plugin-components` has been renamed to `unplugin-vue-components`**, see the [migration guide](#migrate-from-vite-plugin-components).\n\n<details>\n<summary>Vite</summary><br>\n\n```ts\n// vite.config.ts\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineConfig({\n  plugins: [\n    Components({ /* options */ }),\n  ],\n})\n```\n\n<br></details>\n\n<details>\n<summary>Rollup</summary><br>\n\n```ts\n// rollup.config.js\nimport Components from 'unplugin-vue-components/rollup'\n\nexport default {\n  plugins: [\n    Components({ /* options */ }),\n  ],\n}\n```\n\n<br></details>\n\n\n<details>\n<summary>Webpack</summary><br>\n\n```ts\n// webpack.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    require('unplugin-vue-components/webpack')({ /* options */ }),\n  ],\n}\n```\n\n<br></details>\n\n<details>\n<summary>Nuxt</summary><br>\n\nYou might not need this plugin for Nuxt. Use [`@nuxt/components`](https://github.com/nuxt/components) instead.\n\n<br></details>\n\n<details>\n<summary>Vue CLI</summary><br>\n\n```ts\n// vue.config.js\nmodule.exports = {\n  configureWebpack: {\n    plugins: [\n      require('unplugin-vue-components/webpack')({ /* options */ }),\n    ],\n  },\n}\n```\n\n<br></details>\n\n<details>\n<summary>esbuild</summary><br>\n\n```ts\n// esbuild.config.js\nimport { build } from 'esbuild'\n\nbuild({\n  /* ... */\n  plugins: [\n    require('unplugin-vue-components/esbuild')({\n      /* options */\n    }),\n  ],\n})\n```\n\n<br></details>\n\n## Usage\n\nUse components in templates as you would usually do, it will import components on demand, and there is no `import` and `component registration` required anymore! If you register the parent component asynchronously (or lazy route), the auto-imported components will be code-split along with their parent.\n\nIt will automatically turn this\n\n```html\n<template>\n  <div>\n    <HelloWorld msg=\"Hello Vue 3.0 + Vite\" />\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App'\n}\n</script>\n```\n\ninto this\n\n```html\n<template>\n  <div>\n    <HelloWorld msg=\"Hello Vue 3.0 + Vite\" />\n  </div>\n</template>\n\n<script>\nimport HelloWorld from './src/components/HelloWorld.vue'\n\nexport default {\n  name: 'App',\n  components: {\n    HelloWorld\n  }\n}\n</script>\n```\n\n## TypeScript\n\nTo get TypeScript support for auto-imported components, there is [a PR](https://github.com/vuejs/vue-next/pull/3399) to Vue 3 extending the interface of global components. Currently, [Volar](https://github.com/johnsoncodehk/volar) has supported this usage already. If you are using Volar, you can change the config as following to get the support.\n\n```ts\nComponents({\n  dts: true, // enabled by default if `typescript` is installed\n})\n```\n\nOnce the setup is done, a `components.d.ts` will be generated and updates automatically with the type definitions. Feel free to commit it into git or not as you want.\n\n**Make sure you also add `components.d.ts` to your `tsconfig.json` under `includes`.**\n\n## Importing from UI Libraries\n\nWe have several built-in resolvers for popular UI libraries like **Vuetify**, **Ant Design Vue**, and **Element Plus**, where you can enable them by:\n\nSupported Resolvers:\n\n- [Ant Design Vue](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/antdv.ts)\n- [Arco Design Vue](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/arco.ts)\n- [Element Plus](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/element-plus.ts)\n- [Element UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/element-ui.ts)\n- [Headless UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/headless-ui.ts)\n- [IDux](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/idux.ts)\n- [Inkline](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/inkline.ts)\n- [Naive UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/naive-ui.ts)\n- [Prime Vue](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/prime-vue.ts)\n- [Vant](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/vant.ts)\n- [VEUI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/veui.ts)\n- [Varlet UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/varlet-ui.ts)\n- [View UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/view-ui.ts)\n- [Vuetify](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/vuetify.ts)\n- [VueUse Components](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/vueuse.ts)\n- [Quasar](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/quasar.ts)\n- [TDesign](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/tdesign.ts)\n\n```ts\n// vite.config.js\nimport Components from 'unplugin-vue-components/vite'\nimport {\n  AntDesignVueResolver,\n  ElementPlusResolver,\n  VantResolver,\n} from 'unplugin-vue-components/resolvers'\n\n// your plugin installation\nComponents({\n  resolvers: [\n    AntDesignVueResolver(),\n    ElementPlusResolver(),\n    VantResolver(),\n  ],\n})\n```\n\nYou can also write your own resolver quickly:\n\n```ts\nComponents({\n  resolvers: [\n    // example of importing Vant\n    (componentName) => {\n      // where `componentName` is always CapitalCase\n      if (componentName.startsWith('Van'))\n        return { name: componentName.slice(3), from: 'vant' }\n    },\n  ],\n})\n```\n\nIf you successfully configured other UI libraries, please feel free to contribute and help others using them out-of-box. Thanks!\n\n## Types for global registered components\n\nSome libraries might register some global components for you to use anywhere (e.g. Vue Router provides `<RouterLink>` and `<RouterView>`). Since they are global available, there is no need for this plugin to import them. However, those are commonly not TypeScript friendly, and you might need to register their types manually.\n\nThus `unplugin-vue-components` provided a way to only register types for global components.\n\n```ts\nComponents({\n  dts: true,\n  types: [{\n    from: 'vue-router',\n    names: ['RouterLink', 'RouterView'],\n  }],\n})\n```\n\nSo the `RouterLink` and `RouterView` will be presented in `components.d.ts`.\n\nBy default, `unplugin-vue-components` detects supported libraries automatically (e.g. `vue-router`) when their are installed in the workspace. If you want to disable it completely, you can pass an empty array to it:\n\n```ts\nComponents({\n  // Disable type only registration\n  types: [],\n})\n```\n\n## Migrate from `vite-plugin-components`\n\n`package.json`\n\n```diff\n{\n  \"devDependencies\": {\n-   \"vite-plugin-components\": \"*\",\n+   \"unplugin-vue-components\": \"^0.14.0\",\n  }\n}\n```\n\n`vite.config.json`\n\n```diff\n- import Components, { ElementPlusResolver } from 'vite-plugin-components'\n+ import Components from 'unplugin-vue-components/vite'\n+ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'\n\nexport default {\n  plugins: [\n    /* ... */\n    Components({\n      /* ... */\n\n      // `customComponentsResolvers` has renamed to `resolver`\n-     customComponentsResolvers: [\n+     resolvers: [\n        ElementPlusResolver(),\n      ],\n\n      // `globalComponentsDeclaration` has renamed to `dts`\n-     globalComponentsDeclaration: true,\n+     dts: true,\n\n      // `customLoaderMatcher` is depreacted, use `include` instead\n-     customLoaderMatcher: id => id.endsWith('.md'),\n+     include: [/\\.vue$/, /\\.vue\\?vue/, /\\.md$/],\n    }),\n  ],\n}\n```\n\n## Configuration\n\nThe following show the default values of the configuration\n\n```ts\nComponents({\n  // relative paths to the directory to search for components.\n  dirs: ['src/components'],\n\n  // valid file extensions for components.\n  extensions: ['vue'],\n  // search for subdirectories\n  deep: true,\n  // resolvers for custom components\n  resolvers: [],\n\n  // generate `components.d.ts` global declarations,\n  // also accepts a path for custom filename\n  // default: `true` if package typescript is installed\n  dts: false,\n\n  // Allow subdirectories as namespace prefix for components.\n  directoryAsNamespace: false,\n  // Subdirectory paths for ignoring namespace prefixes\n  // works when `directoryAsNamespace: true`\n  globalNamespaces: [],\n\n  // auto import for directives\n  // default: `true` for Vue 3, `false` for Vue 2\n  // Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.\n  // To install Babel, run: `npm install -D @babel/parser @babel/traverse`\n  directives: true,\n\n  // filters for transforming targets\n  include: [/\\.vue$/, /\\.vue\\?vue/],\n  exclude: [/[\\\\/]node_modules[\\\\/]/, /[\\\\/]\\.git[\\\\/]/, /[\\\\/]\\.nuxt[\\\\/]/],\n})\n```\n\n## Example\n\nSee the [Vitesse](https://github.com/antfu/vitesse) starter template.\n\n## Thanks\n\nThanks to [@brattonross](https://github.com/brattonross), this project is heavily inspired by [vite-plugin-voie](https://github.com/vamplate/vite-plugin-voie).\n\n## License\n\nMIT License © 2020-PRESENT [Anthony Fu](https://github.com/antfu)\n"
-}
+  }
+}