From 265f609bf3d17b7b77d423f1b5a50425db96e50a Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 21 Sep 2018 16:04:59 +0800 Subject: [PATCH] [bugfix] missing options (#624) --- dist/area/index.js | 270 ++++++++++----------- dist/card/index.js | 38 ++- dist/cell-group/index.js | 11 +- dist/cell/index.js | 99 ++++---- dist/col/index.js | 59 +++-- dist/common/component.js | 54 ++--- dist/dialog/dialog.js | 86 +++---- dist/dialog/index.js | 168 ++++++------- dist/notice-bar/index.js | 4 +- dist/progress/index.js | 2 +- dist/row/index.js | 2 +- dist/slider/index.js | 2 +- dist/stepper/index.js | 2 +- dist/steps/index.js | 2 +- dist/switch-cell/index.js | 2 +- dist/switch/index.js | 2 +- dist/tabbar/index.js | 2 +- dist/tabs/index.js | 2 +- packages/area/{index.js => index.ts} | 21 +- packages/card/{index.js => index.ts} | 0 packages/cell-group/{index.js => index.ts} | 0 packages/cell/{index.js => index.ts} | 4 +- packages/col/{index.js => index.ts} | 8 +- packages/common/component.ts | 64 ++--- packages/dialog/{dialog.js => dialog.ts} | 31 ++- packages/dialog/{index.js => index.ts} | 0 packages/notice-bar/index.js | 4 +- packages/progress/index.js | 2 +- packages/row/index.js | 2 +- packages/slider/index.js | 2 +- packages/stepper/index.js | 2 +- packages/steps/index.js | 2 +- packages/switch-cell/index.js | 2 +- packages/switch/index.js | 2 +- packages/tabbar/index.js | 2 +- packages/tabs/index.js | 2 +- types/index.d.ts | 10 +- types/instance.ts | 1 + types/weapp.d.ts | 11 +- 39 files changed, 467 insertions(+), 512 deletions(-) rename packages/area/{index.js => index.ts} (92%) rename packages/card/{index.js => index.ts} (100%) rename packages/cell-group/{index.js => index.ts} (100%) rename packages/cell/{index.js => index.ts} (95%) rename packages/col/{index.js => index.ts} (88%) rename packages/dialog/{dialog.js => dialog.ts} (60%) rename packages/dialog/{index.js => index.ts} (100%) diff --git a/dist/area/index.js b/dist/area/index.js index 465e218f..2d3bf723 100644 --- a/dist/area/index.js +++ b/dist/area/index.js @@ -1,154 +1,132 @@ import { VantComponent } from '../common/component'; - VantComponent({ - props: { - value: { - type: String, - observer(value) { - this.code = value; - this.setValues(); - } - }, - title: String, - loading: Boolean, - itemHeight: { - type: Number, - value: 44 - }, - visibleItemCount: { - type: Number, - value: 5 - }, - columnsNum: { - type: [String, Number], - value: 3 - }, - areaList: { - type: Object, - value: {}, - observer() { - this.setValues(); - } - } - }, - - data: { - pickerValue: [0, 0, 0], - columns: [] - }, - - computed: { - displayColumns() { - const { columns = [], columnsNum } = this.data; - return columns.slice(0, +columnsNum); - } - }, - - methods: { - onCancel() { - this.triggerEvent('cancel', { - values: this.getValues(), - indexs: this.getIndexs() - }); - }, - - onConfirm() { - this.triggerEvent('confirm', { - values: this.getValues(), - indexs: this.getIndexs() - }); - }, - - onChange(event) { - const { value } = event.detail; - const { pickerValue, displayColumns } = this.data; - const index = pickerValue.findIndex((item, index) => item !== value[index]); - // 没有变更 或 选中项序号小于0 不处理 - if (index < 0 || value[index] < 0) { - return; - } - - const values = displayColumns[index]; - - this.code = values[value[index]].code; - this.setValues(); - this.triggerEvent('change', { - picker: this, - values: this.getValues(), - index - }); - }, - - getList(type, code) { - let result = []; - if (type !== 'province' && !code) { - return result; - } - - const list = this.data.areaList[`${type}_list`] || {}; - result = Object.keys(list).map(code => ({ - code, - name: list[code] - })); - - if (code) { - result = result.filter(item => item.code.indexOf(code) === 0); - } - - return result; - }, - - getIndex(type, code) { - const compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6; - const list = this.getList(type, code.slice(0, compareNum - 2)); - code = code.slice(0, compareNum); - - for (let i = 0; i < list.length; i++) { - if (list[i].code.slice(0, compareNum) === code) { - return i; + props: { + title: String, + loading: Boolean, + value: { + type: String, + observer(value) { + this.code = value; + this.setValues(); + } + }, + itemHeight: { + type: Number, + value: 44 + }, + visibleItemCount: { + type: Number, + value: 5 + }, + columnsNum: { + type: [String, Number], + value: 3 + }, + areaList: { + type: Object, + value: {}, + observer() { + this.setValues(); + } } - } - - return 0; }, - - setValues() { - let code = this.code || Object.keys(this.data.areaList.county_list)[0] || ''; - const province = this.getList('province'); - const city = this.getList('city', code.slice(0, 2)); - - this.setData({ - 'columns[0]': province, - 'columns[1]': city - }); - - if (city.length && code.slice(2, 4) === '00') { - code = city[0].code; - } - - this.setData({ - 'columns[2]': this.getList('county', code.slice(0, 4)), - pickerValue: [ - this.getIndex('province', code), - this.getIndex('city', code), - this.getIndex('county', code) - ] - }); + data: { + pickerValue: [0, 0, 0], + columns: [] }, - - getValues() { - const { displayColumns = [], pickerValue = [] } = this.data; - return displayColumns.map((option, index) => option[pickerValue[index]]); + computed: { + displayColumns() { + const { columns = [], columnsNum } = this.data; + return columns.slice(0, +columnsNum); + } }, - - getIndexs() { - const { pickerValue, columnsNum } = this.data; - return pickerValue.slice(0, columnsNum); - }, - - reset() { - this.code = ''; - this.setValues(); + methods: { + onCancel() { + this.$emit('cancel', { + values: this.getValues(), + indexs: this.getIndexs() + }); + }, + onConfirm() { + this.$emit('confirm', { + values: this.getValues(), + indexs: this.getIndexs() + }); + }, + onChange(event) { + const { value } = event.detail; + const { pickerValue, displayColumns } = this.data; + const index = pickerValue.findIndex((item, index) => item !== value[index]); + // 没有变更 或 选中项序号小于0 不处理 + if (index < 0 || value[index] < 0) { + return; + } + const values = displayColumns[index]; + this.code = values[value[index]].code; + this.setValues(); + this.$emit('change', { + picker: this, + values: this.getValues(), + index + }); + }, + getList(type, code) { + let result = []; + if (type !== 'province' && !code) { + return result; + } + const list = this.data.areaList[`${type}_list`] || {}; + result = Object.keys(list).map(code => ({ + code, + name: list[code] + })); + if (code) { + result = result.filter(item => item.code.indexOf(code) === 0); + } + return result; + }, + getIndex(type, code) { + const compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6; + const list = this.getList(type, code.slice(0, compareNum - 2)); + code = code.slice(0, compareNum); + for (let i = 0; i < list.length; i++) { + if (list[i].code.slice(0, compareNum) === code) { + return i; + } + } + return 0; + }, + setValues() { + let code = this.code || Object.keys(this.data.areaList.county_list)[0] || ''; + const province = this.getList('province'); + const city = this.getList('city', code.slice(0, 2)); + this.setData({ + 'columns[0]': province, + 'columns[1]': city + }); + if (city.length && code.slice(2, 4) === '00') { + code = city[0].code; + } + this.setData({ + 'columns[2]': this.getList('county', code.slice(0, 4)), + pickerValue: [ + this.getIndex('province', code), + this.getIndex('city', code), + this.getIndex('county', code) + ] + }); + }, + getValues() { + const { displayColumns = [], pickerValue = [] } = this.data; + return displayColumns.map((option, index) => option[pickerValue[index]]); + }, + getIndexs() { + const { pickerValue, columnsNum } = this.data; + return pickerValue.slice(0, columnsNum); + }, + reset() { + this.code = ''; + this.setValues(); + } } - } }); diff --git a/dist/card/index.js b/dist/card/index.js index ad517d83..50dce2d2 100644 --- a/dist/card/index.js +++ b/dist/card/index.js @@ -1,24 +1,22 @@ import { VantComponent } from '../common/component'; - VantComponent({ - classes: [ - 'thumb-class', - 'title-class', - 'price-class', - 'desc-class', - 'num-class' - ], - - props: { - num: String, - desc: String, - thumb: String, - title: String, - price: String, - centered: Boolean, - currency: { - type: String, - value: '¥' + classes: [ + 'thumb-class', + 'title-class', + 'price-class', + 'desc-class', + 'num-class' + ], + props: { + num: String, + desc: String, + thumb: String, + title: String, + price: String, + centered: Boolean, + currency: { + type: String, + value: '¥' + } } - } }); diff --git a/dist/cell-group/index.js b/dist/cell-group/index.js index 9be167a5..8e42c191 100644 --- a/dist/cell-group/index.js +++ b/dist/cell-group/index.js @@ -1,10 +1,9 @@ import { VantComponent } from '../common/component'; - VantComponent({ - props: { - border: { - type: Boolean, - value: true + props: { + border: { + type: Boolean, + value: true + } } - } }); diff --git a/dist/cell/index.js b/dist/cell/index.js index 5ff50c0e..33aa83c2 100644 --- a/dist/cell/index.js +++ b/dist/cell/index.js @@ -1,58 +1,53 @@ import { VantComponent } from '../common/component'; - VantComponent({ - classes: [ - 'title-class', - 'label-class', - 'value-class' - ], - - props: { - title: null, - value: null, - url: String, - icon: String, - label: String, - center: Boolean, - isLink: Boolean, - required: Boolean, - clickable: Boolean, - titleWidth: String, - customStyle: String, - linkType: { - type: String, - value: 'navigateTo' + classes: [ + 'title-class', + 'label-class', + 'value-class' + ], + props: { + title: null, + value: null, + url: String, + icon: String, + label: String, + center: Boolean, + isLink: Boolean, + required: Boolean, + clickable: Boolean, + titleWidth: String, + customStyle: String, + linkType: { + type: String, + value: 'navigateTo' + }, + border: { + type: Boolean, + value: true + } }, - border: { - type: Boolean, - value: true - } - }, - - computed: { - cellClass() { - const { data } = this; - return this.classNames('custom-class', 'van-cell', { - 'van-hairline': data.border, - 'van-cell--center': data.center, - 'van-cell--required': data.required, - 'van-cell--clickable': data.isLink || data.clickable - }); + computed: { + cellClass() { + const { data } = this; + return this.classNames('custom-class', 'van-cell', { + 'van-hairline': data.border, + 'van-cell--center': data.center, + 'van-cell--required': data.required, + 'van-cell--clickable': data.isLink || data.clickable + }); + }, + titleStyle() { + const { titleWidth } = this.data; + return titleWidth ? `max-width: ${titleWidth};min-width: ${titleWidth}` : ''; + } }, - - titleStyle() { - const { titleWidth } = this.data; - return titleWidth ? `max-width: ${titleWidth};min-width: ${titleWidth}` : ''; + methods: { + onClick() { + const { url } = this.data; + if (url) { + wx[this.data.linkType]({ url }); + } + this.$emit('click'); + } } - }, - - methods: { - onClick() { - const { url } = this.data; - if (url) { - wx[this.data.linkType]({ url }); - } - this.$emit('click'); - } - } }); diff --git a/dist/col/index.js b/dist/col/index.js index 54461c2c..2920db4b 100644 --- a/dist/col/index.js +++ b/dist/col/index.js @@ -1,34 +1,33 @@ import { VantComponent } from '../common/component'; - VantComponent({ - relations: { - '../row/index': { - type: 'ancestor' + relations: { + '../row/index': { + type: 'ancestor' + } + }, + props: { + span: Number, + offset: Number + }, + data: { + style: '' + }, + computed: { + classes() { + const { span, offset } = this.data; + return this.classNames('custom-class', 'van-col', { + [`van-col--${span}`]: span, + [`van-col--offset-${offset}`]: offset + }); + } + }, + methods: { + setGutter(gutter) { + const padding = `${gutter / 2}px`; + const style = gutter ? `padding-left: ${padding}; padding-right: ${padding};` : ''; + if (style !== this.data.style) { + this.setData({ style }); + } + } } - }, - - props: { - span: Number, - offset: Number - }, - - computed: { - classes() { - const { span, offset } = this.data; - return this.classNames('custom-class', 'van-col', { - [`van-col--${span}`]: span, - [`van-col--offset-${offset}`]: offset - }); - } - }, - - methods: { - setGutter(gutter) { - const padding = `${gutter / 2}px`; - const style = gutter ? `padding-left: ${padding}; padding-right: ${padding};` : ''; - if (style !== this.data.style) { - this.setData({ style }); - } - } - } }); diff --git a/dist/common/component.js b/dist/common/component.js index 6828a079..501800dd 100644 --- a/dist/common/component.js +++ b/dist/common/component.js @@ -1,47 +1,39 @@ import { basic } from '../mixins/basic'; import { observe } from '../mixins/observer/index'; +function mapKeys(source, target, map) { + Object.keys(map).forEach(key => { + target[map[key]] = source[key]; + }); +} function VantComponent(sfc) { const options = {}; - // map props to properties - if (sfc.props) { - options.properties = sfc.props; - } - // map mixins to behaviors - if (sfc.mixins) { - options.behaviors = sfc.mixins; - } - // copy methods - if (sfc.methods) { - options.methods = sfc.methods; - } - if (sfc.beforeCreate) { - options.created = sfc.beforeCreate; - } - if (sfc.created) { - options.attached = sfc.created; - } - if (sfc.mounted) { - options.ready = sfc.mounted; - } - if (sfc.destroyed) { - options.detached = sfc.destroyed; - } - // map classes to externalClasses - options.externalClasses = sfc.classes || []; + mapKeys(sfc, options, { + data: 'data', + props: 'properties', + mixins: 'behaviors', + methods: 'methods', + beforeCreate: 'created', + created: 'attached', + mounted: 'ready', + destroyed: 'detached', + relations: 'relations', + classes: 'externalClasses' + }); // add default externalClasses + options.externalClasses = options.externalClasses || []; options.externalClasses.push('custom-class'); // add default behaviors - options.behaviors = sfc.mixins || []; + options.behaviors = options.behaviors || []; options.behaviors.push(basic); + // map field to form-field behavior + if (sfc.field) { + options.behaviors.push('wx://form-field'); + } // add default options options.options = { multipleSlots: true, addGlobalClass: true }; - // map field to form-field behavior - if (sfc.field) { - options.behaviors.push('wx://form-field'); - } observe(sfc, options); Component(options); } diff --git a/dist/dialog/dialog.js b/dist/dialog/dialog.js index 7fbd5d56..18289604 100644 --- a/dist/dialog/dialog.js +++ b/dist/dialog/dialog.js @@ -1,68 +1,44 @@ let queue = []; - const Dialog = options => { - return new Promise((resolve, reject) => { - const pages = getCurrentPages(); - const ctx = pages[pages.length - 1]; - - const dialog = ctx.selectComponent(options.selector); - delete options.selector; - - if (dialog) { - dialog.setData({ - onCancel: reject, - onConfirm: resolve, - ...options - }); - queue.push(dialog); - } - }); + return new Promise((resolve, reject) => { + const pages = getCurrentPages(); + const ctx = pages[pages.length - 1]; + const dialog = ctx.selectComponent(options.selector); + delete options.selector; + if (dialog) { + dialog.setData(Object.assign({ onCancel: reject, onConfirm: resolve }, options)); + queue.push(dialog); + } + }); }; - Dialog.defaultOptions = { - show: true, - title: '', - message: '', - zIndex: 100, - overlay: true, - asyncClose: false, - selector: '#van-dialog', - confirmButtonText: '确认', - cancelButtonText: '取消', - showConfirmButton: true, - showCancelButton: false, - closeOnClickOverlay: false, - confirmButtonOpenType: '' + show: true, + title: '', + message: '', + zIndex: 100, + overlay: true, + asyncClose: false, + selector: '#van-dialog', + confirmButtonText: '确认', + cancelButtonText: '取消', + showConfirmButton: true, + showCancelButton: false, + closeOnClickOverlay: false, + confirmButtonOpenType: '' }; - -Dialog.alert = options => - Dialog({ - ...Dialog.currentOptions, - ...options - }); - -Dialog.confirm = options => - Dialog({ - ...Dialog.currentOptions, - showCancelButton: true, - ...options - }); - +Dialog.alert = options => Dialog(Object.assign({}, Dialog.currentOptions, options)); +Dialog.confirm = options => Dialog(Object.assign({}, Dialog.currentOptions, { showCancelButton: true }, options)); Dialog.close = () => { - queue.forEach(dialog => { - dialog.close(); - }); - queue = []; + queue.forEach(dialog => { + dialog.close(); + }); + queue = []; }; - Dialog.setDefaultOptions = options => { - Object.assign(Dialog.currentOptions, options); + Object.assign(Dialog.currentOptions, options); }; - Dialog.resetDefaultOptions = () => { - Dialog.currentOptions = { ...Dialog.defaultOptions }; + Dialog.currentOptions = Object.assign({}, Dialog.defaultOptions); }; - Dialog.resetDefaultOptions(); - export default Dialog; diff --git a/dist/dialog/index.js b/dist/dialog/index.js index e3665f74..3a5f0c27 100644 --- a/dist/dialog/index.js +++ b/dist/dialog/index.js @@ -1,97 +1,87 @@ import { VantComponent } from '../common/component'; - VantComponent({ - props: { - title: String, - message: String, - useSlot: Boolean, - asyncClose: Boolean, - showCancelButton: Boolean, - confirmButtonOpenType: String, - show: { - type: Boolean, - observer(show) { - if (!show) { - this.setData({ - loading: { - confirm: false, - cancel: false + props: { + title: String, + message: String, + useSlot: Boolean, + asyncClose: Boolean, + showCancelButton: Boolean, + confirmButtonOpenType: String, + show: { + type: Boolean, + observer(show) { + if (!show) { + this.setData({ + loading: { + confirm: false, + cancel: false + } + }); + } } - }); + }, + zIndex: { + type: Number, + value: 100 + }, + confirmButtonText: { + type: String, + value: '确认' + }, + cancelButtonText: { + type: String, + value: '取消' + }, + showConfirmButton: { + type: Boolean, + value: true + }, + overlay: { + type: Boolean, + value: true + }, + closeOnClickOverlay: { + type: Boolean, + value: false } - } }, - zIndex: { - type: Number, - value: 100 + data: { + loading: { + confirm: false, + cancel: false + } }, - confirmButtonText: { - type: String, - value: '确认' - }, - cancelButtonText: { - type: String, - value: '取消' - }, - showConfirmButton: { - type: Boolean, - value: true - }, - overlay: { - type: Boolean, - value: true - }, - closeOnClickOverlay: { - type: Boolean, - value: false + methods: { + onConfirm() { + this.handleAction('confirm'); + }, + onCancel() { + this.handleAction('cancel'); + }, + onClickOverlay() { + this.onClose('overlay'); + }, + handleAction(action) { + if (this.data.asyncClose) { + this.setData({ + [`loading.${action}`]: true + }); + } + this.onClose(action); + }, + close() { + this.setData({ show: false }); + }, + onClose(action) { + if (!this.data.asyncClose) { + this.close(); + } + this.$emit('close', action); + this.$emit(action); + const callback = this.data[action === 'confirm' ? 'onConfirm' : 'onCancel']; + if (callback) { + callback(this); + } + } } - }, - - data: { - loading: { - confirm: false, - cancel: false - } - }, - - methods: { - onConfirm() { - this.handleAction('confirm'); - }, - - onCancel() { - this.handleAction('cancel'); - }, - - onClickOverlay() { - this.onClose('overlay'); - }, - - handleAction(action) { - if (this.data.asyncClose) { - this.setData({ - [`loading.${action}`]: true - }); - } - - this.onClose(action); - }, - - close() { - this.setData({ show: false }); - }, - - onClose(action) { - if (!this.data.asyncClose) { - this.close(); - } - this.$emit('close', action); - this.$emit(action); - - const callback = this.data[action === 'confirm' ? 'onConfirm' : 'onCancel']; - if (callback) { - callback(this); - } - } - } }); diff --git a/dist/notice-bar/index.js b/dist/notice-bar/index.js index caebae21..58a9a9f7 100644 --- a/dist/notice-bar/index.js +++ b/dist/notice-bar/index.js @@ -61,7 +61,7 @@ VantComponent({ timer: null }, - attached() { + created() { if (this.data.mode) { this.setData({ hasRightIcon: true @@ -69,7 +69,7 @@ VantComponent({ } }, - detached() { + destroyed() { const { timer } = this.data; timer && clearTimeout(timer); }, diff --git a/dist/progress/index.js b/dist/progress/index.js index 7f621405..0f0acfdc 100644 --- a/dist/progress/index.js +++ b/dist/progress/index.js @@ -52,7 +52,7 @@ VantComponent({ progressWidth: 0 }, - ready() { + mounted() { this.setText(); this.setPivotStyle(); this.getWidth(); diff --git a/dist/row/index.js b/dist/row/index.js index c6e98264..b030fe81 100644 --- a/dist/row/index.js +++ b/dist/row/index.js @@ -20,7 +20,7 @@ VantComponent({ } }, - ready() { + mounted() { if (this.data.gutter) { this.setGutter(); } diff --git a/dist/slider/index.js b/dist/slider/index.js index 821ed1cb..7a68407e 100644 --- a/dist/slider/index.js +++ b/dist/slider/index.js @@ -28,7 +28,7 @@ VantComponent({ } }, - attached() { + created() { this.updateValue(this.data.value); }, diff --git a/dist/stepper/index.js b/dist/stepper/index.js index fadddb6a..f0168d20 100644 --- a/dist/stepper/index.js +++ b/dist/stepper/index.js @@ -31,7 +31,7 @@ VantComponent({ } }, - attached() { + created() { this.setData({ value: this.range(this.data.value) }); diff --git a/dist/steps/index.js b/dist/steps/index.js index 4ecb0f05..3a523764 100644 --- a/dist/steps/index.js +++ b/dist/steps/index.js @@ -21,7 +21,7 @@ VantComponent({ } }, - attached() { + created() { this.formatSteps(); }, diff --git a/dist/switch-cell/index.js b/dist/switch-cell/index.js index b6926e05..a382d42f 100644 --- a/dist/switch-cell/index.js +++ b/dist/switch-cell/index.js @@ -20,7 +20,7 @@ VantComponent({ } }, - attached() { + created() { this.setData({ value: this.data.checked }); }, diff --git a/dist/switch/index.js b/dist/switch/index.js index 9bc5f527..15651d93 100644 --- a/dist/switch/index.js +++ b/dist/switch/index.js @@ -20,7 +20,7 @@ VantComponent({ } }, - attached() { + created() { this.setData({ value: this.data.checked }); }, diff --git a/dist/tabbar/index.js b/dist/tabbar/index.js index 90603dd2..0d1529e3 100644 --- a/dist/tabbar/index.js +++ b/dist/tabbar/index.js @@ -24,7 +24,7 @@ VantComponent({ currentActive: -1 }, - attached() { + created() { this.setData({ currentActive: this.data.active }); }, diff --git a/dist/tabs/index.js b/dist/tabs/index.js index 4d9c32a6..baffc3bf 100644 --- a/dist/tabs/index.js +++ b/dist/tabs/index.js @@ -67,7 +67,7 @@ VantComponent({ scrollLeft: 0 }, - ready() { + mounted() { this.setLine(); this.scrollIntoView(); }, diff --git a/packages/area/index.js b/packages/area/index.ts similarity index 92% rename from packages/area/index.js rename to packages/area/index.ts index 465e218f..84606b0c 100644 --- a/packages/area/index.js +++ b/packages/area/index.ts @@ -1,7 +1,14 @@ import { VantComponent } from '../common/component'; +type AreaItem = { + name: string; + code: string; +}; + VantComponent({ props: { + title: String, + loading: Boolean, value: { type: String, observer(value) { @@ -9,8 +16,6 @@ VantComponent({ this.setValues(); } }, - title: String, - loading: Boolean, itemHeight: { type: Number, value: 44 @@ -46,20 +51,20 @@ VantComponent({ methods: { onCancel() { - this.triggerEvent('cancel', { + this.$emit('cancel', { values: this.getValues(), indexs: this.getIndexs() }); }, onConfirm() { - this.triggerEvent('confirm', { + this.$emit('confirm', { values: this.getValues(), indexs: this.getIndexs() }); }, - onChange(event) { + onChange(event: Weapp.Event) { const { value } = event.detail; const { pickerValue, displayColumns } = this.data; const index = pickerValue.findIndex((item, index) => item !== value[index]); @@ -72,14 +77,14 @@ VantComponent({ this.code = values[value[index]].code; this.setValues(); - this.triggerEvent('change', { + this.$emit('change', { picker: this, values: this.getValues(), index }); }, - getList(type, code) { + getList(type: string, code?: string): AreaItem[] { let result = []; if (type !== 'province' && !code) { return result; @@ -98,7 +103,7 @@ VantComponent({ return result; }, - getIndex(type, code) { + getIndex(type: string, code: string): number { const compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6; const list = this.getList(type, code.slice(0, compareNum - 2)); code = code.slice(0, compareNum); diff --git a/packages/card/index.js b/packages/card/index.ts similarity index 100% rename from packages/card/index.js rename to packages/card/index.ts diff --git a/packages/cell-group/index.js b/packages/cell-group/index.ts similarity index 100% rename from packages/cell-group/index.js rename to packages/cell-group/index.ts diff --git a/packages/cell/index.js b/packages/cell/index.ts similarity index 95% rename from packages/cell/index.js rename to packages/cell/index.ts index 5ff50c0e..028da085 100644 --- a/packages/cell/index.js +++ b/packages/cell/index.ts @@ -30,7 +30,7 @@ VantComponent({ }, computed: { - cellClass() { + cellClass(): string { const { data } = this; return this.classNames('custom-class', 'van-cell', { 'van-hairline': data.border, @@ -40,7 +40,7 @@ VantComponent({ }); }, - titleStyle() { + titleStyle(): string { const { titleWidth } = this.data; return titleWidth ? `max-width: ${titleWidth};min-width: ${titleWidth}` : ''; } diff --git a/packages/col/index.js b/packages/col/index.ts similarity index 88% rename from packages/col/index.js rename to packages/col/index.ts index 54461c2c..8bfcd4fe 100644 --- a/packages/col/index.js +++ b/packages/col/index.ts @@ -12,8 +12,12 @@ VantComponent({ offset: Number }, + data: { + style: '' + }, + computed: { - classes() { + classes(): string { const { span, offset } = this.data; return this.classNames('custom-class', 'van-col', { [`van-col--${span}`]: span, @@ -23,7 +27,7 @@ VantComponent({ }, methods: { - setGutter(gutter) { + setGutter(gutter: number) { const padding = `${gutter / 2}px`; const style = gutter ? `padding-left: ${padding}; padding-right: ${padding};` : ''; if (style !== this.data.style) { diff --git a/packages/common/component.ts b/packages/common/component.ts index d5fa78bc..394cf330 100644 --- a/packages/common/component.ts +++ b/packages/common/component.ts @@ -5,6 +5,12 @@ import { CombinedComponentInstance } from '../../types/index'; +function mapKeys(source: object, target: object, map: object) { + Object.keys(map).forEach(key => { + target[map[key]] = source[key]; + }); +} + function VantComponent( sfc: VantComponentOptions< Data, @@ -16,58 +22,38 @@ function VantComponent( ): void { const options: any = {}; - // map props to properties - if (sfc.props) { - options.properties = sfc.props; - } - - // map mixins to behaviors - if (sfc.mixins) { - options.behaviors = sfc.mixins; - } - - // copy methods - if (sfc.methods) { - options.methods = sfc.methods; - } - - if (sfc.beforeCreate) { - options.created = sfc.beforeCreate; - } - - if (sfc.created) { - options.attached = sfc.created; - } - - if (sfc.mounted) { - options.ready = sfc.mounted; - } - - if (sfc.destroyed) { - options.detached = sfc.destroyed; - } - - // map classes to externalClasses - options.externalClasses = sfc.classes || []; + mapKeys(sfc, options, { + data: 'data', + props: 'properties', + mixins: 'behaviors', + methods: 'methods', + beforeCreate: 'created', + created: 'attached', + mounted: 'ready', + destroyed: 'detached', + relations: 'relations', + classes: 'externalClasses' + }); // add default externalClasses + options.externalClasses = options.externalClasses || []; options.externalClasses.push('custom-class'); // add default behaviors - options.behaviors = sfc.mixins || []; + options.behaviors = options.behaviors || []; options.behaviors.push(basic); + // map field to form-field behavior + if (sfc.field) { + options.behaviors.push('wx://form-field'); + } + // add default options options.options = { multipleSlots: true, addGlobalClass: true }; - // map field to form-field behavior - if (sfc.field) { - options.behaviors.push('wx://form-field'); - } - observe(sfc, options); Component(options); } diff --git a/packages/dialog/dialog.js b/packages/dialog/dialog.ts similarity index 60% rename from packages/dialog/dialog.js rename to packages/dialog/dialog.ts index 7fbd5d56..58b67c13 100644 --- a/packages/dialog/dialog.js +++ b/packages/dialog/dialog.ts @@ -1,6 +1,35 @@ let queue = []; -const Dialog = options => { +type DialogAction = 'confirm' | 'cancel'; +type DialogOptions = { + show?: boolean; + title?: string; + zIndex?: number; + message?: string; + overlay?: boolean; + selector?: string; + asyncClose?: boolean; + confirmButtonText?: string; + cancelButtonText?: string; + showConfirmButton?: boolean; + showCancelButton?: boolean; + closeOnClickOverlay?: boolean; + confirmButtonOpenType?: string; +} + +interface Dialog { + (options: DialogOptions): Promise; + alert?: (options: DialogOptions) => Promise; + confirm?: (options: DialogOptions) => Promise; + close?: () => void; + install?: () => void; + setDefaultOptions?: (options: DialogOptions) => void; + resetDefaultOptions?: () => void; + defaultOptions?: DialogOptions; + currentOptions?: DialogOptions; +} + +const Dialog: Dialog = options => { return new Promise((resolve, reject) => { const pages = getCurrentPages(); const ctx = pages[pages.length - 1]; diff --git a/packages/dialog/index.js b/packages/dialog/index.ts similarity index 100% rename from packages/dialog/index.js rename to packages/dialog/index.ts diff --git a/packages/notice-bar/index.js b/packages/notice-bar/index.js index caebae21..58a9a9f7 100644 --- a/packages/notice-bar/index.js +++ b/packages/notice-bar/index.js @@ -61,7 +61,7 @@ VantComponent({ timer: null }, - attached() { + created() { if (this.data.mode) { this.setData({ hasRightIcon: true @@ -69,7 +69,7 @@ VantComponent({ } }, - detached() { + destroyed() { const { timer } = this.data; timer && clearTimeout(timer); }, diff --git a/packages/progress/index.js b/packages/progress/index.js index 7f621405..0f0acfdc 100644 --- a/packages/progress/index.js +++ b/packages/progress/index.js @@ -52,7 +52,7 @@ VantComponent({ progressWidth: 0 }, - ready() { + mounted() { this.setText(); this.setPivotStyle(); this.getWidth(); diff --git a/packages/row/index.js b/packages/row/index.js index c6e98264..b030fe81 100644 --- a/packages/row/index.js +++ b/packages/row/index.js @@ -20,7 +20,7 @@ VantComponent({ } }, - ready() { + mounted() { if (this.data.gutter) { this.setGutter(); } diff --git a/packages/slider/index.js b/packages/slider/index.js index 821ed1cb..7a68407e 100644 --- a/packages/slider/index.js +++ b/packages/slider/index.js @@ -28,7 +28,7 @@ VantComponent({ } }, - attached() { + created() { this.updateValue(this.data.value); }, diff --git a/packages/stepper/index.js b/packages/stepper/index.js index fadddb6a..f0168d20 100644 --- a/packages/stepper/index.js +++ b/packages/stepper/index.js @@ -31,7 +31,7 @@ VantComponent({ } }, - attached() { + created() { this.setData({ value: this.range(this.data.value) }); diff --git a/packages/steps/index.js b/packages/steps/index.js index 4ecb0f05..3a523764 100644 --- a/packages/steps/index.js +++ b/packages/steps/index.js @@ -21,7 +21,7 @@ VantComponent({ } }, - attached() { + created() { this.formatSteps(); }, diff --git a/packages/switch-cell/index.js b/packages/switch-cell/index.js index b6926e05..a382d42f 100644 --- a/packages/switch-cell/index.js +++ b/packages/switch-cell/index.js @@ -20,7 +20,7 @@ VantComponent({ } }, - attached() { + created() { this.setData({ value: this.data.checked }); }, diff --git a/packages/switch/index.js b/packages/switch/index.js index 9bc5f527..15651d93 100644 --- a/packages/switch/index.js +++ b/packages/switch/index.js @@ -20,7 +20,7 @@ VantComponent({ } }, - attached() { + created() { this.setData({ value: this.data.checked }); }, diff --git a/packages/tabbar/index.js b/packages/tabbar/index.js index 90603dd2..0d1529e3 100644 --- a/packages/tabbar/index.js +++ b/packages/tabbar/index.js @@ -24,7 +24,7 @@ VantComponent({ currentActive: -1 }, - attached() { + created() { this.setData({ currentActive: this.data.active }); }, diff --git a/packages/tabs/index.js b/packages/tabs/index.js index 4d9c32a6..baffc3bf 100644 --- a/packages/tabs/index.js +++ b/packages/tabs/index.js @@ -67,7 +67,7 @@ VantComponent({ scrollLeft: 0 }, - ready() { + mounted() { this.setLine(); this.scrollIntoView(); }, diff --git a/types/index.d.ts b/types/index.d.ts index eb6315e5..85894679 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -14,8 +14,8 @@ type Relations = { }; }; type RecordToAny = { [K in keyof T]: any }; -type Accessors = { - [K in keyof T]: (() => T[K]) +type RecordToReturn = { + [P in keyof T]: T[P] extends (...args: any[]) => any ? ReturnType : T[P] } export type CombinedComponentInstance< @@ -27,15 +27,15 @@ export type CombinedComponentInstance< LooseObject & Weapp.Component & ComponentInstance & { - data: Data & RecordToAny & Computed; + data: Data & RecordToAny & RecordToReturn; }; export type VantComponentOptions = { data?: Data; - props?: Props; + props?: Props & ThisType; field?: boolean; mixins?: Mixins; - computed?: Accessors & ThisType; + computed?: Computed & ThisType; relations?: Relations; classes?: ExternalClasses; methods?: Methods & ThisType; diff --git a/types/instance.ts b/types/instance.ts index 952adf01..1ee85576 100644 --- a/types/instance.ts +++ b/types/instance.ts @@ -1,6 +1,7 @@ import { classNames } from './class-names'; export interface ComponentInstance { + triggerEvent: never; $emit(name: string, detail?: any): void; classNames: classNames; } diff --git a/types/weapp.d.ts b/types/weapp.d.ts index 92c675b8..cb3403ee 100644 --- a/types/weapp.d.ts +++ b/types/weapp.d.ts @@ -1,5 +1,11 @@ declare function Component(options: any): void; +interface wx { + [key: string]: any +} + +declare const wx: wx; + declare namespace Weapp { interface Component { getRelationNodes(selector: string): any[]; @@ -14,6 +20,7 @@ declare namespace Weapp { interface Event { type: string; + detail: any; timeStamp: number; target: Target; currentTarget: Target; @@ -31,8 +38,4 @@ declare namespace Weapp { touches: Array; changedTouches: Array; } - - interface CustomEvent extends Event { - detail: any; - } }