fix(auto-import-plugin): support functional components

Author: mengqiuleo

examples/sites/demos/pc/webdoc/import-components.md

@@ -55,7 +55,7 @@ import { TinyVueResolver } from '@opentiny/unplugin-tiny-vue'
 export default {
   plugins: [
     Components({
-      resolvers: [TinyVueResolver]
+      resolvers: [TinyVueResolver()]
     })
   ]
 }
@@ -73,7 +73,55 @@ module.exports = defineConfig({
   configureWebpack: {
     plugins: [
       Components({
-        resolvers: [TinyVueResolver]
+        resolvers: [TinyVueResolver()]
+      })
+    ]
+  }
+})
+```
+
+#### 关于函数式组件
+
+TinyModal，TinyNotify，TinyLoading 可使用函数形式调用，在使用时，需使用 `unplugin-auto-import` 实现自动导入。
+
+Vite
+
+```js
+// vite.config.js
+import Components from 'unplugin-vue-components/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import { TinyVueResolver } from '@opentiny/unplugin-tiny-vue'
+
+module.exports = defineConfig({
+  configureWebpack: {
+    plugins: [
+      Components({
+        resolvers: [TinyVueResolver()]
+      }),
+      AutoImport({
+        resolvers: [TinyVueResolver({ autoImport: true })]
+      })
+    ]
+  }
+})
+```
+
+Webpack
+
+```js
+// webpack.config.js
+const Components = require('unplugin-vue-components/webpack').default
+const AutoImport = require('unplugin-auto-import/webpack').default
+const TinyVueResolver = require('@opentiny/unplugin-tiny-vue').TinyVueResolver
+
+module.exports = defineConfig({
+  configureWebpack: {
+    plugins: [
+      Components({
+        resolvers: [TinyVueResolver()]
+      }),
+      AutoImport({
+        resolvers: [TinyVueResolver({ autoImport: true })]
       })
     ]
   }

internals/unplugin-tiny-vue/example/auto-imports.d.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const TinyLoading: (typeof import('@opentiny/vue'))['TinyLoading']
+  const TinyModal: (typeof import('@opentiny/vue'))['TinyModal']
+  const TinyNotify: (typeof import('@opentiny/vue'))['TinyNotify']
+}

internals/unplugin-tiny-vue/example/components.d.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: (typeof import('vue-router'))['RouterLink']
+    RouterView: (typeof import('vue-router'))['RouterView']
+    TinyButton: (typeof import('@opentiny/vue'))['Button']
+    TinyModal: (typeof import('@opentiny/vue'))['Modal']
+  }
+}

internals/unplugin-tiny-vue/example/package.json

@@ -1,23 +1,22 @@
 {
   "name": "my-vue-app",
+  "version": "0.0.0",
   "description": "",
   "author": "",
-  "version": "0.0.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@opentiny/vue": "~3.12.1",
-    "@opentiny/vue-alert": "~3.13.0",
-    "@opentiny/vue-button-group": "~3.13.0",
+    "@opentiny/vue": "~3.18.0",
     "@opentiny/vue-icon": "^3.12.0",
     "vue": "^3.3.9"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",
-    "vite": "link:../node_modules/vite",
+    "unplugin-auto-import": "^0.18.3",
+    "vite": "^4.3.8",
     "vite-plugin-inspect": "^0.8.3"
   }
 }

internals/unplugin-tiny-vue/example/src/App.vue

@@ -1,22 +1,76 @@
 <template>
   <div>
-    <tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
-    <span>当前选中值：{{ checkedVal }}</span>
-    <tiny-alert description="type 为默认值 success"></tiny-alert>
+    <tiny-button @click="closeLoading">close Loading</tiny-button>
+    <div id="tiny-basic-loading1"></div>
+    <tiny-button @click="handleClick" :reset-time="0">弹出提示框</tiny-button>
+
+    <h2>函数式调用</h2>
+    <div class="content">
+      <span>弹窗模式：</span>
+      <tiny-button @click="baseClick"> 基本提示框 </tiny-button>
+      <tiny-button @click="successClick"> 成功提示框 </tiny-button>
+      <tiny-button @click="confirmClick"> 确认提示框 </tiny-button>
+    </div>
+    <div class="content">
+      <span>消息模式：</span>
+      <tiny-button @click="messageClick"> 消息提示 </tiny-button>
+    </div>
+
+    <h2>标签式调用</h2>
+    <div class="content">
+      <tiny-modal v-model="show1" title="基本提示框" message="窗口内容1" show-footer> </tiny-modal>
+      <tiny-modal v-model="show2" title="基本提示框" message="窗口内容2" status="success" show-footer> </tiny-modal>
+      <tiny-button @click="show1 = true"> 打开弹窗1 </tiny-button>
+      <tiny-button @click="show2 = true"> 打开弹窗2 </tiny-button>
+    </div>
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      checkedVal: 'Button1',
-      groupData: [
-        { text: 'Button1', value: 'Button1' },
-        { text: 'Button2', value: 'Button2' },
-        { text: 'Button3', value: 'Button3' }
-      ]
-    }
-  }
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const loadingInstance = ref(null)
+
+const closeLoading = () => {
+  loadingInstance.value.close()
+}
+
+onMounted(() => {
+  loadingInstance.value = TinyLoading.service({
+    target: document.getElementById('tiny-basic-loading1')
+  })
+})
+
+function handleClick() {
+  TinyNotify({
+    type: 'info',
+    title: '通知消息的标题',
+    message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
+    position: 'top-right',
+    duration: 5000,
+    customClass: 'my-custom-cls'
+  })
+}
+
+const show1 = ref(false)
+const show2 = ref(false)
+
+function baseClick() {
+  const modal = TinyModal.alert('基本提示框', '标题')
+  setTimeout(() => modal.vm.close(), 3000)
+}
+
+function successClick() {
+  TinyModal.alert({ message: '成功提示框', status: 'success' })
+}
+
+function confirmClick() {
+  TinyModal.confirm('您确定要删除吗？').then((res) => {
+    TinyNotify({
+      type: 'info',
+      title: '触发回调事件',
+      message: `点击${res}按钮`
+    })
+  })
 }
 </script>

internals/unplugin-tiny-vue/example/vite.config.js

@@ -1,11 +1,22 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import Inspect from 'vite-plugin-inspect'
-import autoImportPlugin from '../dist/index.js'
+import Components from 'unplugin-vue-components/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import { TinyVueResolver } from '../dist/index.js'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), Inspect(), autoImportPlugin()],
+  plugins: [
+    vue(),
+    Inspect(),
+    Components({
+      resolvers: [TinyVueResolver()]
+    }),
+    AutoImport({
+      resolvers: [TinyVueResolver({ autoImport: true })]
+    })
+  ],
   define: {
     'process.env': { ...process.env, TINY_MODE: 'pc' }
   },

internals/unplugin-tiny-vue/src/index.ts

@@ -4,6 +4,15 @@ import AutoRollup from 'unplugin-vue-components/rollup'
 import AutoEsbuild from 'unplugin-vue-components/esbuild'
 import AutoRspack from 'unplugin-vue-components/rspack'
 
+export interface TinyVueResolverOption {
+  /**
+   * compatible with unplugin-auto-import
+   *
+   * @default false
+   */
+  autoImport?: boolean
+}
+
 const supportMap = {
   'vite': AutoVite,
   'webpack': AutoWebpack,
@@ -12,11 +21,24 @@ const supportMap = {
   'rspack': AutoRspack
 }
 
-export const TinyVueResolver = (componentName) => {
-  if (componentName.startsWith('Tiny') && !componentName.startsWith('TinyIcon')) {
-    return {
-      name: componentName.slice(4),
-      from: '@opentiny/vue'
+const TinyVueFunc = ['TinyModal', 'TinyNotify', 'TinyLoading']
+
+export const TinyVueResolver = (option: TinyVueResolverOption = {}) => {
+  return (componentName: string) => {
+    const { autoImport = false } = option
+
+    if (autoImport && TinyVueFunc.includes(componentName)) {
+      return {
+        name: componentName,
+        from: '@opentiny/vue'
+      }
+    }
+
+    if (componentName.startsWith('Tiny') && !componentName.startsWith('TinyIcon')) {
+      return {
+        name: componentName.slice(4),
+        from: '@opentiny/vue'
+      }
     }
   }
 }
@@ -32,6 +54,6 @@ export default (name) => {
   const autoPlugin = supportMap[name].default || supportMap[name]
 
   return autoPlugin({
-    resolvers: [TinyVueResolver]
+    resolvers: [TinyVueResolver()]
   })
 }