文档: 更新文档

Author: agileago

docs/.vitepress/config.js

@@ -0,0 +1,23 @@
+import type { UserConfig } from 'vitepress'
+
+const config: UserConfig = {
+  base: '/vue3-oop/',
+  title: 'VUE3-OOP',
+  description: 'vue3 oop是vue3开发进入面向对象阶段',
+  themeConfig: {
+    nav: [
+      { text: '指南', link: '/guide/', activeMatch: '^/guide/' },
+      {
+        text: 'API参考',
+        link: '/api/',
+        activeMatch: '^/api/',
+      },
+      {
+        text: 'Github',
+        link: 'https://github.com/agileago/vue3-oop',
+      },
+    ],
+  },
+}
+
+export default config

docs/.vitepress/config.ts

@@ -1 +1,94 @@
-# vue3 oop
+---
+home: true
+heroText: VUE3面向对象编程
+tagline: 极致优秀的编码体验
+actionText: 开始使用
+actionLink: /guide/
+features:
+- title: 类组件
+  details: 功能与类型融为一体，无需多次声明类型，独立的属性类型声明，各种HOC组合轻而易举
+- title: 自动的依赖注入
+  details: 基于动态解析的 injection-js 依赖注入，让使用服务丝般自然
+- title: vue3无ref编程
+  details: 无需关注ref及其value，正常声明变量，编程体验更自然
+---
+
+#### 以下代码展示常用API
+
+```typescript jsx
+import { VueComponent, Ref, Autobind, VueService } from "vue3-oop"
+import { Injectable } from "injection-js"
+import { createApp, VNodeChild } from "vue"
+
+// 服务，即可复用的逻辑 类似 useXXX
+@Injectable()
+class CountService extends VueService {
+  @Ref() count = 0
+
+  @Autobind()
+  add() {
+    this.count++
+  }
+
+  @Autobind()
+  remove() {
+    this.count--
+  }
+}
+// 组件
+@Component({
+  providers: [CountService]
+})
+class Home extends VueComponent {
+  // 构造函数注入服务，无需new
+  constructor(private countService: CountService) {
+    super()
+  }
+
+  render() {
+    return <div>
+      <span onClick={this.countService.add}>+</span>
+      {this.countService.count}
+      <span onClick={this.countService.remove}>-</span>
+    </div>
+  }
+}
+
+// 子组件属性
+interface HomeChild_Props<DataItem = any> {
+  list: DataItem[]
+  title: string | ((list: DataItem[]) => VNodeChild)
+  ['v-slots']?: {
+    default(): VNodeChild
+    item(item: DataItem): VNodeChild
+  }
+}
+
+// 子组件
+class HomeChild<T> extends VueComponent<HomeChild_Props<T>> {
+  static defaultProps: ComponentProps<HomeChild_Props> = {
+    list: {
+      type: Array,
+      required: true
+    },
+    title: {
+      type: [String, Function],
+      required: true
+    },
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          
+        }
+      </div>
+    );
+  }
+  
+}
+
+const app = createApp(Home)
+app.mount('#app')
+```

docs/index.md

@@ -6,6 +6,7 @@ import { CatchLoading } from '../../common/decorators/catch.decorator'
 import { Autobind } from '@/helper'
 import { CountService } from '../../count.service'
 import { SkipSelf } from 'injection-js'
+import { VNodeChild } from 'vue'
 
 @Component({
   providers: [CountService],
@@ -35,6 +36,12 @@ export default class LoginView extends VueComponent {
   }
 
   render() {
+    const hslots: HomeChild<any>['props']['v-slots'] = {
+      $stable: true,
+      item(): VNodeChild {
+        return <div>111</div>
+      },
+    }
     return (
       <Row type={'flex'} justify={'center'} align={'middle'} style={{ height: '80%' }}>
         <Col span={12}>
@@ -65,8 +72,24 @@ export default class LoginView extends VueComponent {
               </Button>
             </Form.Item>
           </Form>
+          <HomeChild v-slots={hslots}></HomeChild>
         </Col>
       </Row>
     )
   }
 }
+interface HomeChild_Props<DataItem = any> {
+  list?: DataItem[]
+  title?: string | ((list: DataItem[]) => VNodeChild)
+  /**
+   * 插槽
+   */
+  slots?: {
+    item(): VNodeChild
+  }
+}
+class HomeChild<T> extends VueComponent<HomeChild_Props<T>> {
+  render() {
+    return <div></div>
+  }
+}

example/module/auth/login.view.tsx

@@ -8,6 +8,11 @@ import { LinkHandler } from '@/decorators/link'
 
 export const GlobalStoreKey = 'GlobalStoreKey'
 
+// 处理tsx slots 类型问题
+type WithVSlots<T extends Record<string, any>> = 'slots' extends keyof T
+  ? { 'v-slots'?: T['slots'] & { $stable?: boolean } }
+  : Record<string, never>
+
 export abstract class VueComponent<T = Record<string, any>> {
   /** 装饰器处理 */
   static handler: Hanlder[] = [RefHandler, ComputedHandler, LinkHandler, HookHandler]
@@ -47,12 +52,12 @@ export abstract class VueComponent<T = Record<string, any>> {
     return this.props
   }
   /** 组件属性 */
-  public props: T & VNodeProps & Record<string, any>
+  public props: Omit<T, 'slots'> & WithVSlots<T> & VNodeProps & Record<string, any>
   /** 组件上下文 */
   public context: SetupContext
 
   constructor() {
-    this.props = useProps<T & VNodeProps>()
+    this.props = useProps<Omit<T, 'slots'> & VNodeProps & WithVSlots<T>>()
     this.context = useCtx()
     this.context.expose(this)
     const ThisConstructor = this.constructor as VueComponentStaticContructor
@@ -81,5 +86,5 @@ export abstract class VueComponent<T = Record<string, any>> {
 }
 
 export type ComponentProps<T extends Record<string, any>> = {
-  [U in keyof T]-?: Prop<any>
+  [U in keyof Omit<T, 'slots'>]-?: Prop<any>
 }