From b01af0f886a9f1124a382a73e93a6f8784ffd988 Mon Sep 17 00:00:00 2001 From: Yao Date: Fri, 23 Mar 2018 17:35:14 +0800 Subject: [PATCH 01/26] =?UTF-8?q?[Imporvement]=20Icon:=20=E5=8D=87?= =?UTF-8?q?=E7=BA=A7=E4=B8=BA=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=20(#158)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * upgrade icon to custom component * add empty line --- example/pages/icon/index.json | 4 +++- example/pages/icon/index.wxml | 4 +++- example/pages/icon/index.wxss | 11 +++++++---- packages/icon/README.md | 15 +++++++++------ packages/icon/index.js | 9 +++++++++ packages/icon/index.json | 3 +++ packages/icon/index.wxml | 1 + 7 files changed, 35 insertions(+), 12 deletions(-) create mode 100644 packages/icon/index.js create mode 100644 packages/icon/index.json create mode 100644 packages/icon/index.wxml diff --git a/example/pages/icon/index.json b/example/pages/icon/index.json index 0d34d293..6a80c719 100644 --- a/example/pages/icon/index.json +++ b/example/pages/icon/index.json @@ -1,3 +1,5 @@ { - "navigationBarTitleText": "Icon 图标" + "usingComponents": { + "zan-icon": "../../dist/icon/index" + } } diff --git a/example/pages/icon/index.wxml b/example/pages/icon/index.wxml index 6e1191ba..4b71a57d 100644 --- a/example/pages/icon/index.wxml +++ b/example/pages/icon/index.wxml @@ -4,7 +4,9 @@ - + + + zan-icon-{{ icon }} diff --git a/example/pages/icon/index.wxss b/example/pages/icon/index.wxss index 9369da59..66308e8c 100644 --- a/example/pages/icon/index.wxss +++ b/example/pages/icon/index.wxss @@ -4,11 +4,14 @@ float: left; text-align: center; } + +.example-icon { + font-size: 24px; + padding: 10px; + color: rgba(69, 90, 100, .8); +} + .icon-classname { color: #999; font-size: 10px; } -.zan-icon { - font-size: 24px; - margin: 20px; -} diff --git a/packages/icon/README.md b/packages/icon/README.md index e6d02e0c..3d746567 100644 --- a/packages/icon/README.md +++ b/packages/icon/README.md @@ -1,15 +1,18 @@ ## Icon 图标 ### 使用指南 -在 app.wxss 中引入组件库所有样式 -```css -@import "path/to/zanui-weapp/dist/index.wxss"; -``` +在 index.json 中引入组件 +```json +{ + "usingComponents": { + "zan-icon": "path/to/zanui-weapp/dist/icon/index" + } +} ### 代码演示 -可以在任意元素上增加 zan-icon 类即可 +可以在任意位置上使用 zan-icon 标签。通过 type 可以控制 icon 显示的图标 ```html - + ``` 支持的 icon 和 名称 见下图 diff --git a/packages/icon/index.js b/packages/icon/index.js new file mode 100644 index 00000000..0292fdc6 --- /dev/null +++ b/packages/icon/index.js @@ -0,0 +1,9 @@ +Component({ + externalClasses: ['class'], + properties: { + type: { + type: String, + value: '' + } + } +}); diff --git a/packages/icon/index.json b/packages/icon/index.json new file mode 100644 index 00000000..467ce294 --- /dev/null +++ b/packages/icon/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/packages/icon/index.wxml b/packages/icon/index.wxml new file mode 100644 index 00000000..ed428f08 --- /dev/null +++ b/packages/icon/index.wxml @@ -0,0 +1 @@ + From eba84e6f027602d5760adc0155bba71977c74bf7 Mon Sep 17 00:00:00 2001 From: wny Date: Sat, 24 Mar 2018 21:24:51 +0800 Subject: [PATCH 02/26] =?UTF-8?q?[refactor]=20=E9=87=8D=E6=9E=84badge?= =?UTF-8?q?=E4=B8=BA=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6=20(#160)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/pages/badge/index.json | 5 +++- example/pages/badge/index.wxml | 20 ++++++------- example/pages/badge/index.wxss | 3 +- packages/badge/README.md | 36 +++++++++++++++++++---- packages/badge/index.js | 25 ++++++++++++++++ packages/badge/index.json | 3 ++ packages/badge/index.pcss | 6 ++-- packages/badge/index.wxml | 8 +++++ yarn.lock | 54 ++++++++++++++++++++++++++++++---- 9 files changed, 135 insertions(+), 25 deletions(-) create mode 100644 packages/badge/index.js create mode 100644 packages/badge/index.json create mode 100644 packages/badge/index.wxml diff --git a/example/pages/badge/index.json b/example/pages/badge/index.json index 9aa95ebd..701c0b96 100644 --- a/example/pages/badge/index.json +++ b/example/pages/badge/index.json @@ -1,3 +1,6 @@ { - "navigationBarTitleText": "Badge 徽章" + "navigationBarTitleText": "Badge 徽章", + "usingComponents": { + "zan-badge": "../../dist/badge/index" + } } diff --git a/example/pages/badge/index.wxml b/example/pages/badge/index.wxml index cae30010..2257aa74 100644 --- a/example/pages/badge/index.wxml +++ b/example/pages/badge/index.wxml @@ -4,22 +4,22 @@ - + + 9 - - 9 + + 19 - - 19 - - - - - 99+ + + 99+ diff --git a/example/pages/badge/index.wxss b/example/pages/badge/index.wxss index afbb2e63..9e5458b5 100644 --- a/example/pages/badge/index.wxss +++ b/example/pages/badge/index.wxss @@ -1,6 +1,7 @@ .demo { - padding: 40px 0; + padding: 40px 10px; display: flex; + flex-wrap: wrap; } .demo__item { flex: 1; diff --git a/packages/badge/README.md b/packages/badge/README.md index c67972f6..90cf2a4d 100644 --- a/packages/badge/README.md +++ b/packages/badge/README.md @@ -1,15 +1,33 @@ ## Badge 徽章 ### 使用指南 -在 app.wxss 中引入组件库所有样式 -```css -@import "path/to/zanui-weapp/dist/index.wxss"; +在 index.json 中引入组件 +```json +{ + "usingComponents": { + "zan-badge": "path/to/zanui-weapp/dist/badge/index" + } +} ``` ### 代码演示 + +#### 基础用法 ```html - - 10 + + 10 + +``` + +#### 自定义参数 +```html + + 10 ``` @@ -19,3 +37,11 @@ height: 100px; } ``` + +### API +| 参数 | 说明 | 类型 | 默认值 | +|-----|-----|-----|-----| +| color | 字体颜色 | String | `#fff` +| background-color | 背景颜色 | String | `#f44` +| font-size | 字体大小 | Number | 10 +| box-shadow | 为了更好的控制宽度，使用了box-shadow来实现badge的边框，可以根据box-shadow的语法自行修改颜色和宽度 | String | `0 0 0 2px #fff` diff --git a/packages/badge/index.js b/packages/badge/index.js new file mode 100644 index 00000000..c4c7f361 --- /dev/null +++ b/packages/badge/index.js @@ -0,0 +1,25 @@ +const DEFAULT_COLOR = '#fff'; +const DEFAULT_BACKGROUND_COLOR = '#f44'; +const DEFAULT_FONT_SIZE = 10; +const DEFAULT_BOX_SHADOW = '0 0 0 2px #fff'; + +Component({ + properties: { + color: { + type: String, + value: DEFAULT_COLOR + }, + backgroundColor: { + type: String, + value: DEFAULT_BACKGROUND_COLOR + }, + fontSize: { + type: Number, + value: DEFAULT_FONT_SIZE + }, + boxShadow: { + type: String, + value: DEFAULT_BOX_SHADOW + } + } +}); diff --git a/packages/badge/index.json b/packages/badge/index.json new file mode 100644 index 00000000..467ce294 --- /dev/null +++ b/packages/badge/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/packages/badge/index.pcss b/packages/badge/index.pcss index 7bce89e1..8ede3dc7 100644 --- a/packages/badge/index.pcss +++ b/packages/badge/index.pcss @@ -1,9 +1,9 @@ .zan-badge { position: relative; } -.zan-badge__count { +.zan-badge__text { position: absolute; - top: -16px; + top: -0.8em; right: 0px; height: 1.6em; min-width: 1.6em; @@ -11,7 +11,7 @@ padding: 0 .4em; font-size: 20px; border-radius: .8em; - background: #FF4444; + background: #f44; color: #fff; text-align: center; white-space: nowrap; diff --git a/packages/badge/index.wxml b/packages/badge/index.wxml new file mode 100644 index 00000000..193791e7 --- /dev/null +++ b/packages/badge/index.wxml @@ -0,0 +1,8 @@ + + + + + diff --git a/yarn.lock b/yarn.lock index 80bb3c5f..a9cb27ec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1180,6 +1180,10 @@ binary-extensions@^1.0.0: version "1.11.0" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205" +binaryextensions@~1.0.0: + version "1.0.1" + resolved "https://registry.npmjs.org/binaryextensions/-/binaryextensions-1.0.1.tgz#1e637488b35b58bda5f4774bf96a5212a8c90755" + block-stream@*: version "0.0.9" resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a" @@ -1982,6 +1986,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" +cross-env@^5.1.4: + version "5.1.4" + resolved "https://registry.npmjs.org/cross-env/-/cross-env-5.1.4.tgz#f61c14291f7cc653bb86457002ea80a04699d022" + dependencies: + cross-spawn "^5.1.0" + is-windows "^1.0.0" + cross-spawn@^5.0.1, cross-spawn@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449" @@ -2655,7 +2666,7 @@ escape-html@~1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" -escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5: +escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" @@ -3656,10 +3667,24 @@ gulp-postcss@^7.0.0: postcss-load-config "^1.2.0" vinyl-sourcemaps-apply "^0.2.1" +gulp-remove-logging@^1.2.0: + version "1.2.0" + resolved "https://registry.npmjs.org/gulp-remove-logging/-/gulp-remove-logging-1.2.0.tgz#fd16c19d368e243430126c619a393363e2cfe5a6" + dependencies: + gulp-replace "0.5.4" + gulp-rename@^1.2.2: version "1.2.2" resolved "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.2.2.tgz#3ad4428763f05e2764dec1c67d868db275687817" +gulp-replace@0.5.4: + version "0.5.4" + resolved "https://registry.npmjs.org/gulp-replace/-/gulp-replace-0.5.4.tgz#69a67914bbd13c562bff14f504a403796aa0daa9" + dependencies: + istextorbinary "1.0.2" + readable-stream "^2.0.1" + replacestream "^4.0.0" + gulp-util@3.0.8, gulp-util@^3.0.0, gulp-util@^3.0.8: version "3.0.8" resolved "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f" @@ -4446,14 +4471,14 @@ is-whitespace@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f" +is-windows@^1.0.0, is-windows@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" + is-windows@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.1.tgz#310db70f742d259a16a369202b51af84233310d9" -is-windows@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" - is-wsl@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d" @@ -4547,6 +4572,13 @@ istanbul-reports@^1.1.4: dependencies: handlebars "^4.0.3" +istextorbinary@1.0.2: + version "1.0.2" + resolved "https://registry.npmjs.org/istextorbinary/-/istextorbinary-1.0.2.tgz#ace19354d1a9a0173efeb1084ce0f87b0ad7decf" + dependencies: + binaryextensions "~1.0.0" + textextensions "~1.0.0" + jest-changed-files@^22.2.0: version "22.2.0" resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-22.2.0.tgz#517610c4a8ca0925bdc88b0ca53bd678aa8d019e" @@ -7362,6 +7394,14 @@ replace-ext@0.0.1: version "0.0.1" resolved "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924" +replacestream@^4.0.0: + version "4.0.3" + resolved "https://registry.npmjs.org/replacestream/-/replacestream-4.0.3.tgz#3ee5798092be364b1cdb1484308492cb3dff2f36" + dependencies: + escape-string-regexp "^1.0.3" + object-assign "^4.0.1" + readable-stream "^2.0.2" + request-promise-core@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6" @@ -8219,6 +8259,10 @@ text-table@^0.2.0, text-table@~0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" +textextensions@~1.0.0: + version "1.0.2" + resolved "https://registry.npmjs.org/textextensions/-/textextensions-1.0.2.tgz#65486393ee1f2bb039a60cbba05b0b68bd9501d2" + throat@^4.0.0: version "4.1.0" resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a" From 541517361ba1755ceb0153c2f0cb15ba453da21d Mon Sep 17 00:00:00 2001 From: kobeCristiano Date: Sun, 25 Mar 2018 11:10:09 +0800 Subject: [PATCH 03/26] =?UTF-8?q?[refactor]=20Tab=EF=BC=9A=E5=8D=87?= =?UTF-8?q?=E7=BA=A7=E5=88=B0=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=20(#161)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [improvement] Tab：升级到自定义组件 * fix: 去除冗余example代码 * [refactor] 重构badge为自定义组件 (#160) * fix: 去除tab组件使用对象入参方式，修改example用例 --- example/pages/tab/index.js | 21 ++++------- example/pages/tab/index.json | 5 ++- example/pages/tab/index.wxml | 26 +++++++++----- example/pages/tab/index.wxss | 3 ++ packages/tab/README.md | 55 +++++++++++++++------------- packages/tab/index.js | 69 ++++++++++++++++++++++++++++-------- packages/tab/index.json | 3 ++ packages/tab/index.wxml | 64 +++++++++++++++++++-------------- 8 files changed, 156 insertions(+), 90 deletions(-) create mode 100644 example/pages/tab/index.wxss create mode 100644 packages/tab/index.json diff --git a/example/pages/tab/index.js b/example/pages/tab/index.js index 72b43370..bac65181 100644 --- a/example/pages/tab/index.js +++ b/example/pages/tab/index.js @@ -1,6 +1,7 @@ -const { Tab, extend } = require('../../dist/index'); +const interval = 50; +let moduleId = 1; -Page(extend({}, Tab, { +Page({ data: { tab1: { list: [{ @@ -43,7 +44,7 @@ Page(extend({}, Tab, { }], selectedId: '1', scroll: true, - height: 45 + height: 80 }, tab3: { list: [{ @@ -66,17 +67,9 @@ Page(extend({}, Tab, { title: '商品6' }], selectedId: '1', + height: 45, scroll: true, - height: 45 + fixed: true } - }, - - handleZanTabChange(e) { - var componentId = e.componentId; - var selectedId = e.selectedId; - - this.setData({ - [`${componentId}.selectedId`]: selectedId - }); } -})); +}); diff --git a/example/pages/tab/index.json b/example/pages/tab/index.json index d80c56be..d9d50cff 100644 --- a/example/pages/tab/index.json +++ b/example/pages/tab/index.json @@ -1,3 +1,6 @@ { - "navigationBarTitleText": "Tab 标签" + "navigationBarTitleText": "Tab 标签", + "usingComponents": { + "zan-tab": "../../dist/tab/index" + } } diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml index be56fa45..6872f9fd 100644 --- a/example/pages/tab/index.wxml +++ b/example/pages/tab/index.wxml @@ -5,18 +5,26 @@ TAB - + - + - + diff --git a/example/pages/tab/index.wxss b/example/pages/tab/index.wxss new file mode 100644 index 00000000..8f1853cb --- /dev/null +++ b/example/pages/tab/index.wxss @@ -0,0 +1,3 @@ +.doc-title { + margin-top: 50px; +} \ No newline at end of file diff --git a/packages/tab/README.md b/packages/tab/README.md index 9131b2e3..005cd509 100644 --- a/packages/tab/README.md +++ b/packages/tab/README.md @@ -1,37 +1,46 @@ ## Tab 标签 ### 使用指南 -在 app.wxss 中引入组件库所有样式 -```css -@import "path/to/zanui-weapp/dist/index.wxss"; -``` - -在需要使用的页面里引入组件库模板和脚本 -```html - -``` -```js -const { extend, Tab } = require('path/to/zanui-weapp/dist/index'); - -// 在 Page 中混入 Tab 里面声明的方法 -Page(extend({}, Tab, { - // ... -})); +在 index.json 中引入组件 +```json +{ + "usingComponents": { + "zan-tab": "path/to/zanui-weapp/dist/icon/index" + } +} +// 在 Page 中声明 Tab 依赖的展示数据 +Page({ + data: { + list: [{ + id: 'xxx', + title: 'xxx' + }], + selectedId: 'xxx', + ... + } +}) ``` ### 代码演示 -在模板中使用 zan-tab 模板，并传入相应数据 +可以在任意位置上使用 zan-tab 标签。传入对应的数据即可。 ```html - + ``` | 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------|-----------|-----------|-------------|-------------| -| tab | tab 配置对象 | Object | - | | | tab.scroll | 是否开启 tab 左右滑动模式 | Boolean | - | | | tab.list | 可选项列表 | Array | - | | | tab.selectedId | 选中id | - | - | | | tab.height | tab高度 | Number | - | | +| tab.fixed | 是否固定位置 | Boolean | - | | | componentId | 用于区分页面多个 tab 组件 | String | - | | @@ -57,12 +66,10 @@ tab 组件中，tab.list 数据格式如下 }] ``` -当 tab 被点击时，可以在页面中注册 handleZanTabChange 方法来监听 +可以监听 bindtabchange 事件回调，在页面注册回调函数 ```js -Page(extend({}, Tab, { - handleZanTabChange({ componentId, selectedId }) { - // componentId 即为在模板中传入的 componentId - // 用于在一个页面上使用多个 tab 时，进行区分 +Page({ + customCallback(selectedId) { // selectId 表示被选中 tab 项的 id } })); diff --git a/packages/tab/index.js b/packages/tab/index.js index ff3c474e..03083149 100644 --- a/packages/tab/index.js +++ b/packages/tab/index.js @@ -1,19 +1,58 @@ -const { extractComponentId } = require('../common/helper'); +Component({ + externalClasses: 'class', -var Tab = { - _handleZanTabChange(e) { - const componentId = extractComponentId(e); - const dataset = e.currentTarget.dataset; - const selectedId = dataset.itemId; - const data = { componentId, selectedId }; + properties: { + scroll: { + type: Boolean, + value: false + }, + fixed: { + type: Boolean, + value: false + }, + height: { + type: Number, + value: 0 + }, + list: { + type: Array, + value: [] + }, + selectedId: { + type: [String, Number], + value: '', + observer(newVal) { + this.setData({ + currentTab: newVal + }); + } + }, + componentId: { + type: String, + default: '' + } + }, - console.info('[zan:tab:change]', data); - if (this.handleZanTabChange) { - this.handleZanTabChange(data); - } else { - console.warn('页面缺少 handleZanTabChange 回调函数'); + data: { + currentTab: '' + }, + + attached() { + this.setData({ + currentTab: this.data.selectedId + }); + }, + + methods: { + _handleZanTabChange(e) { + const selectedId = e.currentTarget.dataset.itemId; + + this.setData({ + currentTab: selectedId + }); + + console.info('[zan:tab:change] selectedId:', selectedId); + this.triggerEvent('tabchange', selectedId); } } -}; - -module.exports = Tab; +}) diff --git a/packages/tab/index.json b/packages/tab/index.json new file mode 100644 index 00000000..32640e0d --- /dev/null +++ b/packages/tab/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/packages/tab/index.wxml b/packages/tab/index.wxml index 6ece0e42..60474ed1 100644 --- a/packages/tab/index.wxml +++ b/packages/tab/index.wxml @@ -1,37 +1,47 @@ - + + + +