From 685161c6e9f6f29dd06607c51db34b60f129e64b Mon Sep 17 00:00:00 2001 From: Ken Ho Date: Sat, 27 Feb 2021 11:32:54 +0800 Subject: [PATCH 01/26] fix(types): export createUI as Plugin --- types/index.d.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/types/index.d.ts b/types/index.d.ts index 7e3c5db0..1f0443d5 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,3 +1,4 @@ +import { Plugin } from 'vue' export { AtActionSheet, AtActionSheetItem } from './action-sheet' export { default as AtActivityIndicator } from './activity-indicator' @@ -48,4 +49,6 @@ export { default as AtIndexes } from './indexes' export { default as AtRange } from './range' export { default as AtFloatButton } from './float-button' export { default as AtVirtualScroll } from './virtual-scroll' -export { default as AtSkeleton } from './skeleton' \ No newline at end of file +export { default as AtSkeleton } from './skeleton' + +export function createUI(components?: Record): Plugin \ No newline at end of file From 3b4cb8869a7baad290ca564e3a6d9a62cc499b3f Mon Sep 17 00:00:00 2001 From: Ken Ho Date: Sat, 27 Feb 2021 16:46:38 +0800 Subject: [PATCH 02/26] refactor(demo): use sfc instead of rendering function --- src/pages/form/form/index.ts | 137 ------------------- src/pages/form/form/index.vue | 126 ++++++++++++++++++ src/pages/form/image-picker/index.ts | 131 ------------------ src/pages/form/image-picker/index.vue | 128 ++++++++++++++++++ src/pages/form/picker-view/index.ts | 125 ----------------- src/pages/form/picker-view/index.vue | 117 ++++++++++++++++ src/pages/form/picker/index.ts | 185 -------------------------- src/pages/form/picker/index.vue | 149 +++++++++++++++++++++ 8 files changed, 520 insertions(+), 578 deletions(-) delete mode 100644 src/pages/form/form/index.ts create mode 100644 src/pages/form/form/index.vue delete mode 100644 src/pages/form/image-picker/index.ts create mode 100644 src/pages/form/image-picker/index.vue delete mode 100644 src/pages/form/picker-view/index.ts create mode 100644 src/pages/form/picker-view/index.vue delete mode 100644 src/pages/form/picker/index.ts create mode 100644 src/pages/form/picker/index.vue diff --git a/src/pages/form/form/index.ts b/src/pages/form/form/index.ts deleted file mode 100644 index 006dfe02..00000000 --- a/src/pages/form/form/index.ts +++ /dev/null @@ -1,137 +0,0 @@ -import { h, defineComponent, reactive } from 'vue' -import { CheckboxOption } from 'types/checkbox' -import { View } from '@tarojs/components' -import './index.scss' - -interface PageFormState { - value1: string - value2: string - value3: CheckboxOption[] - text: string - isOpened: boolean - [key: string]: string | boolean | CheckboxOption[] -} - -export default defineComponent({ - setup() { - - const state = reactive({ - value1: '', - value2: '', - value3: [], - text: '', - isOpened: false - }) - - function handleChange(stateName: string, value: any): void { - state[stateName] = value - } - - function handleSubmit(): void { - const { value1, value2, value3 } = state - if (!value1 || !value2) { - state.isOpened = true - state.text = `表单必填项未填写完整` - } else { - state.isOpened = true - state.text = - value3 && value3.length > 0 - ? `${value1} / ${value2} / ${value3.join(',')}` - : `${value1} / ${value2}` - } - closeToast() - } - - function closeToast(): void { - setTimeout(() => { - state.isOpened = false - }, 2000) - } - - function handleReset(): void { - state.isOpened = true - state.text = `表单已被重置` - state.value1 = '' - state.value2 = '' - state.value3 = [] - closeToast() - } - - return () => ( - h(Page, { headerTitle: 'Form 表单' }, { - default: () => [ - /* 表单提交与重置*/ - h(Panel, { title: '表单提交与重置', noPadding: true }, { - default: () => [ - h(View, { class: 'component-item' }, { - default: () => [ - h(AtForm, { - onSubmit: handleSubmit.bind(this), - onReset: handleReset.bind(this), - }, { - default: () => [ - h(AtInput, { - required: true, - name: 'value1', - title: '文本', - type: 'text', - placeholder: '单行文本', - value: state.value1, - onChange: handleChange.bind(this, 'value1'), - }), - - h(AtInput, { - required: true, - name: 'value2', - title: '密码', - type: 'password', - placeholder: '请输入密码', - value: state.value2, - onChange: handleChange.bind(this, 'value2'), - }), - - h(AtCheckbox, { - options: - [ - { label: 'iPhone X', value: 'iPhone X' }, - { label: 'HUAWEI P20', value: 'HUAWEI P20' } - ], - selectedList: state.value3, - onChange: handleChange.bind(this, 'value3'), - }), - - h(View, { class: 'component-item__btn-group' }, { - default: () => [ - h(View, { class: 'component-item__btn-group__btn-item' }, { - default: () => [ - h(AtButton, { - type: 'primary', - formType: 'submit' - }, { default: () => '提交' }) - ] - }), - - h(View, { class: 'component-item__btn-group__btn-item' }, { - default: () => [ - h(AtButton, { formType: 'reset' }, { default: () => '重置' }) - ] - }), - ] - }), - ] - }) - ] - }), - ] - }), - ], - extra: () => [ - h(AtToast, { - text: state.text, - isOpened: state.isOpened, - }) - ] - }) - ) - } -}) diff --git a/src/pages/form/form/index.vue b/src/pages/form/form/index.vue new file mode 100644 index 00000000..272bea8a --- /dev/null +++ b/src/pages/form/form/index.vue @@ -0,0 +1,126 @@ + + + diff --git a/src/pages/form/image-picker/index.ts b/src/pages/form/image-picker/index.ts deleted file mode 100644 index bdadc3ef..00000000 --- a/src/pages/form/image-picker/index.ts +++ /dev/null @@ -1,131 +0,0 @@ -import { h, defineComponent, reactive } from 'vue' -import Taro from '@tarojs/taro' -import './index.scss' - -type DogaImage = { - url: string -} - -const dogaImages: DogaImage[] = [ - { - url: 'https://storage.360buyimg.com/mtd/home/111543234387022.jpg' - }, - { - url: 'https://storage.360buyimg.com/mtd/home/221543234387016.jpg' - }, - { - url: 'https://storage.360buyimg.com/mtd/home/331543234387025.jpg' - } -] - -interface IndexState { - [key: string]: DogaImage[] -} - -export default defineComponent({ - - setup() { - - const state = reactive({ - files1: Array.from(dogaImages), - files2: Array.from(dogaImages), - files3: Array.from(dogaImages), - files4: dogaImages.concat([ - { - url: - 'https://storage.360buyimg.com/mtd/home/36549825_887087111478302_5745542532574478336_n1543234831971.jpg' - } - ]) - }) - - function onChange(stateName: string, files: DogaImage[]): void { - state[stateName] = files - } - - function onFail(mes: string): void { - Taro.showToast({ - title: `onFail: ${JSON.stringify(mes)}`, - icon: 'none' - }) - } - - function onImageClick(index: number, file: DogaImage): void { - Taro.showToast({ - title: `onImageClick: ${index}${JSON.stringify(file)}`, - icon: 'none' - }) - } - - return () => { - return ( - h(Page, { headerTitle: 'ImagePicker 图片选择器' }, { - default: () => [ - - /* 基础用法*/ - h(Panel, { title: '基础用法', noPadding: true }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(AtImagePicker, { - files: state.files1, - onChange: onChange.bind(this, 'files1'), - }) - ] - }), - ] - }), - - /* 多选图片*/ - h(Panel, { title: '多选图片', noPadding: true }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(AtImagePicker, { - multiple: true, - files: state.files2, - onChange: onChange.bind(this, 'files2'), - onFail: onFail.bind(this), - onImageClick: onImageClick.bind(this), - }) - ] - }), - ] - }), - - /* 自定义每行数量*/ - h(Panel, { title: '自定义每行数量', noPadding: true }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(AtImagePicker, { - multiple: true, - length: 3, - files: state.files3, - onChange: onChange.bind(this, 'files3'), - }) - ] - }), - ] - }), - - /* 更改图片的缩放模式*/ - h(Panel, { title: '更改图片的缩放模式', noPadding: true }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(AtImagePicker, { - mode: 'aspectFit', - multiple: true, - files: state.files4, - onChange: onChange.bind(this, 'files4'), - }) - ] - }), - ] - }), - ] - }) - ) - } - } -}) diff --git a/src/pages/form/image-picker/index.vue b/src/pages/form/image-picker/index.vue new file mode 100644 index 00000000..59a6be20 --- /dev/null +++ b/src/pages/form/image-picker/index.vue @@ -0,0 +1,128 @@ + + + \ No newline at end of file diff --git a/src/pages/form/picker-view/index.ts b/src/pages/form/picker-view/index.ts deleted file mode 100644 index 28c6b82c..00000000 --- a/src/pages/form/picker-view/index.ts +++ /dev/null @@ -1,125 +0,0 @@ -import { h, defineComponent, reactive, onMounted } from 'vue' -import { PickerView, PickerViewColumn, View } from '@tarojs/components' -import { CommonEvent } from '@tarojs/components/types/common' -import Taro from '@tarojs/taro' -import './index.scss' - -interface IndexState { - years: number[] - year: number - months: number[] - month: number - days: number[] - day: number - value: number[] - isWeapp: boolean - isAlipay: boolean -} - -export default defineComponent({ - - setup() { - - const date = new Date() - const years: number[] = [] - const months: number[] = [] - const days: number[] = [] - - for (let i = 1990; i <= date.getFullYear(); i++) { - years.push(i) - } - for (let i = 1; i <= 12; i++) { - months.push(i) - } - for (let i = 1; i <= 31; i++) { - days.push(i) - } - - const state = reactive({ - years, - year: date.getFullYear(), - months, - month: date.getMonth() + 1, - days, - day: date.getDate(), - value: [30, date.getMonth(), date.getDate() - 1], - isWeapp: false, - isAlipay: false - }) - - onMounted(() => { - const env = Taro.getEnv() - state.isWeapp = env === Taro.ENV_TYPE.WEAPP - state.isAlipay = env === Taro.ENV_TYPE.ALIPAY - }) - - const handleChange = (e: CommonEvent): void => { - const val = e.detail.value - state.value = val - state.year = state.years[val[0]] - state.month = state.months[val[1]] - state.day = state.days[val[2]] - } - - return () => ( - h(Page, { headerTitle: 'Picker View 滚动选择器' }, { - default: () => [ - h(Panel, { title: '基础用法', }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(View, { class: 'example-item__desc' }, { default: () => '嵌入页面的滑动选择器' }), - - state.isWeapp || state.isAlipay - ? ( - h(View, null, { - default: () => [ - h(View, { - class: 'title-date' - }, { default: () => `${state.year} 年 ${state.month} 月 ${state.day} 日` }), - - h(PickerView, { - class: 'picker', - indicatorStyle: 'height: 50px;', - style: 'width: 100%; height: 300px; text-align: center;', - value: state.value, - onChange: handleChange, - }, { - default: () => [ - h(PickerViewColumn, null, state.years.map((item, idx) => ( - h(View, { - key: `years-${idx}`, - style: 'line-height: 50px; ' - }, { default: () => `${item} 年` }) - ))), - - h(PickerViewColumn, null, state.months.map((item, idx) => ( - h(View, { - key: `months-${idx}`, - style: 'line-height: 50px;' - }, { default: () => `${item} 月` }) - ))), - - h(PickerViewColumn, null, state.days.map((item, idx) => ( - h(View, { - key: `days-${idx}`, - style: 'line-height: 50px;' - }, { default: () => `${item} 日` }) - ))), - ] - }) - ] - }) - ) - : ( - h(View, { class: 'title-date' }, { default: () => '暂时仅支持微信小程序' }) - ) - ] - }) - ] - }), - ] - }) - ) - } -}) diff --git a/src/pages/form/picker-view/index.vue b/src/pages/form/picker-view/index.vue new file mode 100644 index 00000000..9832a719 --- /dev/null +++ b/src/pages/form/picker-view/index.vue @@ -0,0 +1,117 @@ + + + \ No newline at end of file diff --git a/src/pages/form/picker/index.ts b/src/pages/form/picker/index.ts deleted file mode 100644 index f84cad34..00000000 --- a/src/pages/form/picker/index.ts +++ /dev/null @@ -1,185 +0,0 @@ -import { h, defineComponent, reactive, onMounted } from 'vue' -import { Picker, View } from '@tarojs/components' -import { CommonEvent } from '@tarojs/components/types/common' -import Taro from '@tarojs/taro' -import './index.scss' - -interface IndexState { - selector: string[] - multiSelector: string[][] - selectorValue: number - mulitSelectorValues: number[] - timeSel: string - dateSel: string - isAlipay: boolean -} - -export default defineComponent({ - - setup() { - - const state = reactive({ - selector: ['中国', '美国', '巴西', '日本'], - multiSelector: [ - ['饭', '粥', '粉'], - ['猪肉', '牛肉'] - ], - selectorValue: 0, - mulitSelectorValues: [0, 1], - timeSel: '06:18', - dateSel: '2018-06-18', - isAlipay: false - }) - - onMounted(() => { - const env = Taro.getEnv() - state.isAlipay = env === Taro.ENV_TYPE.ALIPAY - }) - - const handleChange = (e: CommonEvent): void => { - state.selectorValue = e.detail.value - } - - const handleMulitChange = (e: CommonEvent): void => { - state.mulitSelectorValues = e.detail.value - } - - const handleTimeChange = (e: CommonEvent): void => { - state.timeSel = e.detail.value - } - - const handleDateChange = (e: CommonEvent): void => { - state.dateSel = e.detail.value - } - - return () => { - const { - selector, - selectorValue, - multiSelector, - mulitSelectorValues, - timeSel, - dateSel, - isAlipay - } = state - - return ( - h(Page, { - class: 'picker__page', - headerTitle: 'Picker 选择器' - }, { - default: () => [ - /* 普通选择器*/ - h(Panel, { title: '普通选择器', }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(Picker, { - mode: 'selector', - range: selector, - value: selectorValue, - onChange: handleChange, - }, { - default: () => [ - h(View, { class: 'demo-list-item' }, { - default: () => [ - h(View, { class: 'demo-list-item__label' }, { default: () => '国家地区' }), - h(View, { class: 'demo-list-item__value' }, { - default: () => - selector[selectorValue] - }), - ] - }), - ] - }), - ] - }), - ] - }), - - /* 多列选择器*/ - !isAlipay && ( - h(Panel, { title: '多列选择器', }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(Picker, { - mode: 'multiSelector', - range: multiSelector, - value: mulitSelectorValues, - onChange: handleMulitChange, - }, { - default: () => [ - h(View, { class: 'demo-list-item' }, { - default: () => [ - h(View, { class: 'demo-list-item__label' }, { default: () => '请选择早餐' }), - h(View, { class: 'demo-list-item__value' }, { - default: () => [ - `${multiSelector[0][mulitSelectorValues[0]] - } & ${multiSelector[1][mulitSelectorValues[1]]}` - ] - }), - ] - }), - ] - }), - ] - }) - ] - }) - ), - - /* 时间选择器*/ - h(Panel, { title: '时间选择器', }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(Picker, { - mode: 'time', - value: timeSel, - onChange: handleTimeChange, - }, { - default: () => [ - h(View, { class: 'demo-list-item' }, { - default: () => [ - h(View, { class: 'demo-list-item__label' }, { default: () => '请选择时间' }), - h(View, { class: 'demo-list-item__value' }, { default: () => timeSel }), - ] - }), - - ] - }), - ] - }), - ] - }), - - /* 日期选择器*/ - h(Panel, { title: '日期选择器', }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(Picker, { - mode: 'date', - value: dateSel, - onChange: handleDateChange, - }, { - default: () => [ - h(View, { class: 'demo-list-item' }, { - default: () => [ - h(View, { class: 'demo-list-item__label' }, { default: () => '请选择日期' }), - h(View, { class: 'demo-list-item__value' }, { default: () => dateSel }), - ] - }) - ] - }) - ] - }), - ] - }) - ] - }) - ) - } - } -}) diff --git a/src/pages/form/picker/index.vue b/src/pages/form/picker/index.vue new file mode 100644 index 00000000..fdcc1d6f --- /dev/null +++ b/src/pages/form/picker/index.vue @@ -0,0 +1,149 @@ + + + From 77322881e7a065f1a03425e78528e8f601ec3cbf Mon Sep 17 00:00:00 2001 From: Ken Ho Date: Sat, 27 Feb 2021 16:47:28 +0800 Subject: [PATCH 03/26] fix(demo): a few fixes for form and view demos --- src/pages/form/range/index.vue | 2 +- src/pages/form/slider/index.vue | 8 +++---- src/pages/view/article/index.vue | 1 + src/pages/view/avatar/index.vue | 1 + src/pages/view/badge/index.vue | 1 + src/pages/view/countdown/index.vue | 37 +++++++++++++++--------------- src/pages/view/curtain/index.vue | 20 ++++++++-------- src/pages/view/divider/index.vue | 1 + src/pages/view/load-more/index.vue | 2 +- src/pages/view/noticebar/index.vue | 3 ++- src/pages/view/steps/index.vue | 20 ++++++++-------- src/pages/view/swiper/index.vue | 2 +- src/pages/view/timeline/index.vue | 6 ++--- 13 files changed, 55 insertions(+), 49 deletions(-) diff --git a/src/pages/form/range/index.vue b/src/pages/form/range/index.vue index e448cdb1..a0321596 100644 --- a/src/pages/form/range/index.vue +++ b/src/pages/form/range/index.vue @@ -41,7 +41,7 @@ interface IndexState { } export default defineComponent({ - name: "SliderDemo", + name: "RangeDemo", setup() { diff --git a/src/pages/form/slider/index.vue b/src/pages/form/slider/index.vue index 6727ee84..b5be5e00 100644 --- a/src/pages/form/slider/index.vue +++ b/src/pages/form/slider/index.vue @@ -1,13 +1,13 @@