vmodel,test,docs

Author: ruojianll

docs/_sidebar.md

@@ -5,11 +5,13 @@
     - [Property](class-component/property/property.md)
     - [Method](class-component/method/method.md)
     - [Lifecycle hooks](class-component/lifecycle-hook/lifecycle-hook.md)
+    - [Component property](class-component/component-property/component-property.md)
     - [Getter](class-component/getter/getter.md)
     - [Event](class-component/event/event.md)
     - [Reference](class-component/reference/reference.md)
     - [Watcher](class-component/watcher/watcher.md)
     - [Injection](class-component/injection/injection.md)
+    - [VModel](class-component/v-model/v-model.md)
 - Inheritance
     - [ECMAScript class](inheritance/es-class/es-class.md)
     - [Component](inheritance/component/component.md)

docs/class-component/component-property/code-option-default.ts

@@ -0,0 +1,22 @@
+
+import { Prop, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        p:{
+            default: 'foo'
+        }
+    }
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @Prop({
+        default: 'foo'
+    })
+    p!: string
+}

docs/class-component/component-property/code-option-required.ts

@@ -0,0 +1,22 @@
+
+import { Prop, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        p:{
+            required:true
+        }
+    }
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @Prop({
+        required: true
+    })
+    p!: string
+}

docs/class-component/component-property/code-option-type.ts

@@ -0,0 +1,22 @@
+
+import { Prop, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        p:{
+            type: String
+        }
+    }
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @Prop({
+        type: String
+    })
+    p!: string
+}

docs/class-component/component-property/code-option-validator.ts

@@ -0,0 +1,26 @@
+
+import { Prop, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        p:{
+             validator(val:any){
+                return true
+            }
+        }
+    }
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @Prop({
+        validator(val:any){
+            return true
+        }
+    })
+    p!: string
+}

docs/class-component/component-property/code-usage.ts

@@ -0,0 +1,20 @@
+
+import { Prop, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        p:{
+            
+        }
+    }
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @Prop
+    p!: string
+}

docs/class-component/component-property/component-property.md

@@ -0,0 +1,31 @@
+## Usage
+
+Use `Prop` decorator to define a watcher in vue's `props`.
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## Options
+
+### default
+
+This is the `default` in vue `props`.
+
+[](./code-option-default.ts ':include :type=code typescript')
+
+### required
+
+This is the `required` in vue `props`.
+
+[](./code-option-required.ts ':include :type=code typescript')
+
+### type
+
+This is the `type` in vue `props`.
+
+[](./code-option-type.ts ':include :type=code typescript')
+
+### validator
+
+This is the `validator` in vue `props`.
+
+[](./code-option-validator.ts ':include :type=code typescript')

docs/class-component/v-model/code-option-name.ts

@@ -0,0 +1,34 @@
+import { VModel, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        value:{}
+    },
+    computed:{
+        valueAgent:{
+            get(){
+                return this['value']
+            },
+            set(value){
+                this.$emit('update:value',value)
+            }
+        }
+    }
+}
+*/
+
+/*
+In other components:
+<MyComponent v-model:value="foo"></MyComponent>
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @VModel({
+        name: 'value'
+    })
+    valueAgent!: string
+}

docs/class-component/v-model/code-option-others.ts

@@ -0,0 +1,44 @@
+import { VModel, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        modelValue:{
+            type:String,
+            default:'bar',
+            //...
+        }
+    },
+    computed:{
+        valueAgent:{
+            get(){
+                return this['modelValue']
+            },
+            set(value){
+                this.$emit('update:modelValue',value)
+            }
+        }
+    }
+}
+
+*/
+
+/*
+
+In other components:
+
+<MyComponent v-model="foo"></MyComponent>
+
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @VModel({
+        type: String,
+        default: 'bar',
+        //...
+    })
+    valueAgent!: string
+}

docs/class-component/v-model/code-usage.ts

@@ -0,0 +1,36 @@
+import { VModel, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        modelValue:{}
+    },
+    computed:{
+        valueAgent:{
+            get(){
+                return this['modelValue']
+            },
+            set(value){
+                this.$emit('update:modelValue',value)
+            }
+        }
+    }
+}
+
+*/
+
+/*
+
+In other components:
+
+<MyComponent v-model="foo"></MyComponent>
+
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @VModel
+    valueAgent!: string
+}

docs/class-component/v-model/v-model.md

@@ -0,0 +1,20 @@
+## Usage
+
+Use `VModel` decorator to define a model for vue `v-model` or `v-model:foo`. 
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## Options
+
+### name
+
+The name of `v-model` property, default is `modelValue`.
+
+[](./code-option-name.ts ':include :type=code typescript')
+
+### Same options in `Prop` decorator.
+
+The other options are same as in `Prop` decorator.
+
+[](./code-option-others.ts ':include :type=code typescript')
+

src/component.ts

@@ -8,6 +8,7 @@ import { build as optionWatch, WatchConfig } from './option/watch'
 import { build as optionProps, PropsConfig } from './option/props'
 import { build as optionInject, InjectConfig } from './option/inject'
 import { build as optionEmit } from './option/emit'
+import { build as optionVModel, VModelConfig } from './option/vmodel'
 export interface OptionBuilder {
     name?: string
     data?: Record<string, any>
@@ -17,11 +18,13 @@ export interface OptionBuilder {
     watch?: Record<string, WatchConfig>
     props?: Record<string, PropsConfig>
     inject?: Record<string, InjectConfig>
+    beforeCreateCallbacks?:Function[]
 
 }
 export interface Cons { new(): any, prototype: any }
 function ComponentOption(cons: Cons, extend?: any) {
     const optionBuilder: OptionBuilder = {}
+    optionVModel(cons,optionBuilder)
     optionComputed(cons, optionBuilder)
     optionWatch(cons, optionBuilder)
     optionProps(cons, optionBuilder)

src/index.ts

@@ -5,7 +5,7 @@ export { decorator as Watch } from './option/watch'
 export { decorator as Prop } from './option/props'
 export { decorator as Inject } from './option/inject'
 export { decorator as Emit } from './option/emit'
-
+export { decorator as VModel } from './option/vmodel'
 import type {
     ComponentPublicInstance,
     ComponentOptions

src/option/methodsAndLifecycle.ts

@@ -50,6 +50,16 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
     })
 
     Object.assign(optionBuilder.methods, MethodFunctions)
+    const bccbs = optionBuilder.beforeCreateCallbacks
+    if (bccbs && bccbs.length > 0) {
+        const oldBc = LifecycleFunctions['beforeCreate']
+        LifecycleFunctions['beforeCreate']=function(){
+            bccbs.forEach(bccb=>bccb.apply(this,arguments))
+            if(oldBc){
+                oldBc.apply(this,arguments)
+            }
+        }
+    }
     Object.assign(optionBuilder.lifecycle, LifecycleFunctions)
 
 }

src/option/ref.ts

@@ -19,6 +19,4 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
             }
         })
     }
-
-
 }

src/option/vmodel.ts

@@ -0,0 +1,39 @@
+import { Cons, OptionBuilder } from '../component'
+import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
+import { decorator as PropsDecorator, PropsConfig } from './props'
+export type VModelConfig = PropsConfig & {
+    name?: string
+}
+export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string, option?: VModelConfig) {
+    option ??= {}
+    const slot = obtainSlot(proto)
+    let vmodelName = 'modelValue'
+    const propsConfig = { ...option }
+    if (propsConfig) {
+        vmodelName = propsConfig.name ?? vmodelName
+        delete propsConfig.name
+    }
+    PropsDecorator(propsConfig)(proto, vmodelName)
+    let map = slot.obtainMap<Map<string, VModelConfig>>('v-model')
+    map.set(name, option)
+})
+
+
+export function build(cons: Cons, optionBuilder: OptionBuilder) {
+    optionBuilder.computed ??= {}
+    const slot = obtainSlot(cons.prototype)
+    const names = slot.obtainMap<Map<string, VModelConfig>>('v-model')!
+    if (names && names.size > 0) {
+        names.forEach((value, name) => {
+            let vmodelName = (value && value.name) ?? 'modelValue'
+            optionBuilder.computed![name] = {
+                get: function (this: any) {
+                    return this[vmodelName]
+                },
+                set: function (val: any) {
+                    this.$emit(`update:${vmodelName}`, val)
+                }
+            }
+        })
+    }
+}