feat: update configuration for aliasing

Author: tangjinzhou

apps/playground/src/main.ts

@@ -3,10 +3,11 @@ import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
 import routes from './routes'
+import antd from 'ant-design-vue'
 
 const router = createRouter({
   history: createWebHistory(),
   routes,
 })
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(router).use(antd).mount('#app')

apps/playground/src/pages/button/basic.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-col gap-2">
-    <button class="btn btn-primary">Primary Button</button>
-    <button class="btn btn-secondary">Default Button</button>
-    <button class="btn btn-error">Dashed Button</button>
-    <button class="btn btn-link">Text Button</button>
-    <button class="btn btn-link">Link Button</button>
+    <a-button class="btn btn-primary">Primary Button</a-button>
+    <a-button class="btn btn-secondary">Default Button</a-button>
+    <a-button class="btn btn-error">Dashed Button</a-button>
+    <a-button class="btn btn-link">Text Button</a-button>
+    <a-button class="btn btn-link">Link Button</a-button>
   </div>
 </template>

packages/ui/typings/global.d.ts renamed to apps/playground/src/typings/global.d.ts

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/consistent-type-imports */
 declare module 'vue' {
-  export interface GlobalComponents {}
+  export interface GlobalComponents {
+    AButton: typeof import('ant-design-vue').Button
+  }
 }
 export {}

apps/playground/tsconfig.json

@@ -5,7 +5,8 @@
   "compilerOptions": {
     "paths": {
       "@/*": ["./src/*"],
-      "~/*": ["./assets/*"]
+      "~/*": ["./assets/*"],
+      "ant-design-vue": ["./../../packages/ui/src/index.ts"]
     }
   }
 }

apps/playground/vite.config.ts

@@ -15,6 +15,7 @@ export default defineConfig({
     alias: {
       '@': resolve(__dirname, './src'),
       '~': resolve(__dirname, './assets'),
+      'ant-design-vue': resolve(__dirname, '../../packages/ui/src/index.ts'),
     },
   },
 })

packages/ui/src/components/button/Button.vue

@@ -0,0 +1,26 @@
+<template>
+  <button :class="classes" @click="$emit('click', $event)">
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { buttonProps, buttonEmits, ButtonSlots } from './meta'
+
+const props = defineProps(buttonProps)
+
+defineEmits(buttonEmits)
+defineSlots<ButtonSlots>()
+
+const classes = computed(() => {
+  return [
+    'rounded-md px-4 py-2 cursor-pointer',
+    props.type,
+    {
+      'bg-primary text-primary-content': props.type === 'primary',
+      'bg-secondary text-secondary-content': props.type === 'secondary',
+    },
+  ]
+})
+</script>

packages/ui/src/components/button/index.ts

@@ -0,0 +1,10 @@
+import { App, Plugin } from 'vue'
+import Button from './Button.vue'
+
+/* istanbul ignore next */
+Button.install = function (app: App) {
+  app.component('AButton', Button)
+  return app
+}
+
+export default Button as typeof Button & Plugin

packages/ui/src/components/button/meta.ts

@@ -0,0 +1,36 @@
+import { PropType, ExtractPublicPropTypes } from 'vue'
+
+// Button Props
+export const buttonProps = {
+  /**
+   * Specifies the visual style variant of the button
+   * @default 'primary'
+   */
+  type: {
+    type: String as PropType<'primary' | 'secondary'>,
+    default: 'primary',
+  },
+} as const
+
+export type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>
+
+// Button Emits
+export const buttonEmits = {
+  /**
+   * Triggered when the button is clicked by the user
+   * @param e - The native MouseEvent object
+   */
+  click: (e: MouseEvent) => e instanceof MouseEvent,
+} as const
+
+export type ButtonEmits = typeof buttonEmits
+
+// Button Slots
+export const buttonSlots = {
+  /**
+   * Main content slot for the button text or custom content
+   */
+  default: (_: any) => null as any,
+} as const
+
+export type ButtonSlots = typeof buttonSlots

packages/ui/src/components/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './button'

packages/ui/src/index.ts

@@ -1,21 +1,22 @@
 import { App } from 'vue'
 
-const components = {} as any
+import * as components from './components'
+export * from './components'
 export const install = function (app: App) {
   Object.keys(components).forEach(key => {
     const component = components[key]
     if (component.install) {
       app.use(component)
     }
   })
-  app.config.globalProperties.$message = components.message
-  app.config.globalProperties.$notification = components.notification
-  app.config.globalProperties.$info = components.Modal.info
-  app.config.globalProperties.$success = components.Modal.success
-  app.config.globalProperties.$error = components.Modal.error
-  app.config.globalProperties.$warning = components.Modal.warning
-  app.config.globalProperties.$confirm = components.Modal.confirm
-  app.config.globalProperties.$destroyAll = components.Modal.destroyAll
+  // app.config.globalProperties.$message = components.message
+  // app.config.globalProperties.$notification = components.notification
+  // app.config.globalProperties.$info = components.Modal.info
+  // app.config.globalProperties.$success = components.Modal.success
+  // app.config.globalProperties.$error = components.Modal.error
+  // app.config.globalProperties.$warning = components.Modal.warning
+  // app.config.globalProperties.$confirm = components.Modal.confirm
+  // app.config.globalProperties.$destroyAll = components.Modal.destroyAll
   return app
 }