From 59940f98abb1a31f4c64ede25d2f04665fbd61da Mon Sep 17 00:00:00 2001 From: Shirmy Date: Mon, 27 Dec 2021 22:46:17 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(Switch):=20=E6=96=B0=E5=A2=9E=20Switch?= =?UTF-8?q?=20=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + commitlint.config.js | 3 +- examples/app.json | 1 + examples/images/component/switch.png | Bin 0 -> 712 bytes .../pages/components/form/pages/form/index.js | 16 ++++- .../components/form/pages/form/index.json | 1 + .../components/form/pages/form/index.wxml | 3 + .../components/form/pages/switch/index.js | 15 ++++ .../components/form/pages/switch/index.json | 7 ++ .../components/form/pages/switch/index.wxml | 42 +++++++++++ .../components/form/pages/switch/index.wxss | 1 + .../navigator/content/config/form-navi.js | 6 ++ src/switch/index.js | 67 ++++++++++++++++++ src/switch/index.json | 4 ++ src/switch/index.less | 35 +++++++++ src/switch/index.wxml | 6 ++ 16 files changed, 206 insertions(+), 2 deletions(-) create mode 100644 examples/images/component/switch.png create mode 100644 examples/pages/components/form/pages/switch/index.js create mode 100644 examples/pages/components/form/pages/switch/index.json create mode 100644 examples/pages/components/form/pages/switch/index.wxml create mode 100644 examples/pages/components/form/pages/switch/index.wxss create mode 100644 src/switch/index.js create mode 100644 src/switch/index.json create mode 100644 src/switch/index.less create mode 100644 src/switch/index.wxml diff --git a/.gitignore b/.gitignore index c7600508..87fab203 100644 --- a/.gitignore +++ b/.gitignore @@ -19,5 +19,6 @@ yarn-error.log .vscode package-lock.json examples/project.config.json +examples/project.private.config.json /.run yarn.lock diff --git a/commitlint.config.js b/commitlint.config.js index 5a0a841c..717aeae7 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -75,7 +75,8 @@ module.exports = { 'TabBar', 'DynamicBuild', 'Calendar', - 'Script' + 'Script', + 'Switch' ] ] } diff --git a/examples/app.json b/examples/app.json index 966f9528..373b5d06 100644 --- a/examples/app.json +++ b/examples/app.json @@ -93,6 +93,7 @@ { "root": "pages/components/form", "pages": [ + "pages/switch/index", "pages/input/index", "pages/radio/index", "pages/checkbox/index", diff --git a/examples/images/component/switch.png b/examples/images/component/switch.png new file mode 100644 index 0000000000000000000000000000000000000000..c27771ee254ccbc71431eb21edc447b7f4e55441 GIT binary patch literal 712 zcmV;(0yq7MP)Px%f=NU{RA@u(STShSP#FIH5+rtD)!f6Fd zt0DbpOqokb^27=#IB!o8>!$%eL%`l7gek@>0{j%9THu<~oAGuPV2sZeDCC=9zK~); zaa4;8G{N|y5%SC!24M)mKnq0lj5T^#pB$a6{xuxsZ4e!d-rGxLp5r#Fp?xzL%f zSe(nP9OB_s3aFN5$1j2tuH zt9zx1Hf~*ju>IQr?k6FXiRmn0D_p|z8z3A9=zQRgy=bkj=%?V!9@RMfv=y?RVhP`a zs(GL%Y*gpP*L$?xyM9LakhEj-)zQx_0mAa1fH2-Gabg_P*}xlnnK-^nps;)!gen-5 zfoGO!#Cd;E=U<7|qD*2i9tWOzU5aB3EG&N-gp<04BV^b$hrpFIh~qezc&J`2HPgr= zEdN@xsflolgze7(D5gOi!_f>}GkUM5@)*uck(i>o-;rVaUkNyz3iBo;46fAOQfhnb zg!O7Lq=97y7D(8&Wq=3!DFDou1FtldW{y9Nr+w-R*a1sO`Aw|&YgG9UnewB=ju_@z zE~q?Cw?8mSA86Vlls;0fJE8KSe&f8N?6pd_p-ah&tu&{{esLwfTI^Q=vb>o9*$&F$ uGY4clD2vY=knNx>K65~}gR*$#9rz7F{7eMed=()80000 + + + 提交验证 diff --git a/examples/pages/components/form/pages/switch/index.js b/examples/pages/components/form/pages/switch/index.js new file mode 100644 index 00000000..0612c05b --- /dev/null +++ b/examples/pages/components/form/pages/switch/index.js @@ -0,0 +1,15 @@ +// pages/components/form/pages/switch/index.js +Page({ + /** + * 页面的初始数据 + */ + data: { + customValue: 0 + }, + + onChange(e) { + this.setData({ + customValue: e.detail.checked + }); + } +}); \ No newline at end of file diff --git a/examples/pages/components/form/pages/switch/index.json b/examples/pages/components/form/pages/switch/index.json new file mode 100644 index 00000000..079a3608 --- /dev/null +++ b/examples/pages/components/form/pages/switch/index.json @@ -0,0 +1,7 @@ +{ + "usingComponents": { + "content-title": "/components/content-title/index", + "content-card": "/components/content-card/index", + "l-switch": "/dist/switch/index" + } +} \ No newline at end of file diff --git a/examples/pages/components/form/pages/switch/index.wxml b/examples/pages/components/form/pages/switch/index.wxml new file mode 100644 index 00000000..5e1f8d75 --- /dev/null +++ b/examples/pages/components/form/pages/switch/index.wxml @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + 当前选中的值：{{ customValue }} + + + diff --git a/examples/pages/components/form/pages/switch/index.wxss b/examples/pages/components/form/pages/switch/index.wxss new file mode 100644 index 00000000..d45297db --- /dev/null +++ b/examples/pages/components/form/pages/switch/index.wxss @@ -0,0 +1 @@ +/* pages/components/form/pages/switch/index.wxss */ \ No newline at end of file diff --git a/examples/pages/navigator/content/config/form-navi.js b/examples/pages/navigator/content/config/form-navi.js index 158647b6..abf3545a 100644 --- a/examples/pages/navigator/content/config/form-navi.js +++ b/examples/pages/navigator/content/config/form-navi.js @@ -47,6 +47,12 @@ const formNaviConfigs = [ desc: '日历', componentsPath: '/pages/components/form/pages/calendar/index' }, + { + icon: '/images/component/switch.png', + title: 'Switch', + desc: '开关', + componentsPath: '/pages/components/form/pages/switch/index' + }, { icon: '/images/component/rules.png', title: 'Rules', diff --git a/src/switch/index.js b/src/switch/index.js new file mode 100644 index 00000000..d8729bec --- /dev/null +++ b/src/switch/index.js @@ -0,0 +1,67 @@ +import eventBus from '../core/utils/event-bus'; + +Component({ + externalClasses: ['l-class', 'l-disabled-class'], + properties: { + checked: { + type: null, + optionalTypes: [Boolean, String, Number], + value: false + }, + size: { + type: String, + value: '38rpx' + }, + color: { + type: String, + value: '#fff' + }, + // 选中后的颜色 + selectColor: { + type: String, + value: '#3963BC' + }, + activeValue: { + type: null, + value: true, + }, + inactiveValue: { + type: null, + value: false, + }, + // 不可选状态 + disabled: { + type: Boolean, + value: false + }, + }, + methods: { + onClick() { + const { activeValue, inactiveValue, disabled } = this.data; + + if (disabled) { + return; + } + + const checked = this.data.checked === activeValue; + const value = checked ? inactiveValue : activeValue; + + this.setData({ + checked: value + }); + + this.triggerEvent('linchange', { checked: value }); + eventBus.emit(`lin-form-change-${this.id}`, this.id); + }, + + getValues() { + return this.data.checked; + }, + + reset() { + this.setData({ + checked: this.data.inactiveValue + }); + } + } +}); \ No newline at end of file diff --git a/src/switch/index.json b/src/switch/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/src/switch/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/src/switch/index.less b/src/switch/index.less new file mode 100644 index 00000000..463fda20 --- /dev/null +++ b/src/switch/index.less @@ -0,0 +1,35 @@ +.switch { + position: relative; + display: inline-block; + box-sizing: content-box; + width: 2em; + height: 1em; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 1em; + transition: background-color 0.3s; + + &-node { + position: absolute; + top: 0; + left: 0; + border-radius: 100%; + z-index: 1; + width: 1em; + height: 1em; + background-color: #fff; + box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), + 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05); + transition: 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05); + } + + &-on { + .switch-node { + transform: translateX(calc(1em)); + } + } + + &-disabled { + opacity: 0.5; + } +} \ No newline at end of file diff --git a/src/switch/index.wxml b/src/switch/index.wxml new file mode 100644 index 00000000..f328402e --- /dev/null +++ b/src/switch/index.wxml @@ -0,0 +1,6 @@ + + + \ No newline at end of file From 19dc3743d5203bdfcccc416c5683dd1979760181 Mon Sep 17 00:00:00 2001 From: Juzi Date: Wed, 29 Dec 2021 19:21:47 +0800 Subject: [PATCH 2/3] build: Travis CI automatic compilation --- dist/switch/index.js | 1 + dist/switch/index.json | 1 + dist/switch/index.wxml | 3 ++ dist/switch/index.wxss | 1 + examples/dist/switch/index.js | 67 +++++++++++++++++++++++++++++++++ examples/dist/switch/index.json | 4 ++ examples/dist/switch/index.wxml | 6 +++ examples/dist/switch/index.wxss | 1 + 8 files changed, 84 insertions(+) create mode 100644 dist/switch/index.js create mode 100644 dist/switch/index.json create mode 100644 dist/switch/index.wxml create mode 100644 dist/switch/index.wxss create mode 100644 examples/dist/switch/index.js create mode 100644 examples/dist/switch/index.json create mode 100644 examples/dist/switch/index.wxml create mode 100644 examples/dist/switch/index.wxss diff --git a/dist/switch/index.js b/dist/switch/index.js new file mode 100644 index 00000000..f3ec3247 --- /dev/null +++ b/dist/switch/index.js @@ -0,0 +1 @@ +import eventBus from"../core/utils/event-bus";Component({externalClasses:["l-class","l-disabled-class"],properties:{checked:{type:null,optionalTypes:[Boolean,String,Number],value:!1},size:{type:String,value:"38rpx"},color:{type:String,value:"#fff"},selectColor:{type:String,value:"#3963BC"},activeValue:{type:null,value:!0},inactiveValue:{type:null,value:!1},disabled:{type:Boolean,value:!1}},methods:{onClick(){const{activeValue:e,inactiveValue:t,disabled:a}=this.data;if(a)return;const l=this.data.checked===e?t:e;this.setData({checked:l}),this.triggerEvent("linchange",{checked:l}),eventBus.emit("lin-form-change-"+this.id,this.id)},getValues(){return this.data.checked},reset(){this.setData({checked:this.data.inactiveValue})}}}); \ No newline at end of file diff --git a/dist/switch/index.json b/dist/switch/index.json new file mode 100644 index 00000000..1450e2ec --- /dev/null +++ b/dist/switch/index.json @@ -0,0 +1 @@ +{"component":true,"usingComponents":{}} \ No newline at end of file diff --git a/dist/switch/index.wxml b/dist/switch/index.wxml new file mode 100644 index 00000000..ef61b402 --- /dev/null +++ b/dist/switch/index.wxml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/dist/switch/index.wxss b/dist/switch/index.wxss new file mode 100644 index 00000000..71091d9d --- /dev/null +++ b/dist/switch/index.wxss @@ -0,0 +1 @@ +.switch{position:relative;display:inline-block;box-sizing:content-box;width:2em;height:1em;background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:1em;transition:background-color .3s}.switch-node{position:absolute;top:0;left:0;border-radius:100%;z-index:1;width:1em;height:1em;background-color:#fff;box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);transition:.3s cubic-bezier(.3,1.05,.4,1.05)}.switch-on .switch-node{transform:translateX(calc(1em))}.switch-disabled{opacity:.5} \ No newline at end of file diff --git a/examples/dist/switch/index.js b/examples/dist/switch/index.js new file mode 100644 index 00000000..d8729bec --- /dev/null +++ b/examples/dist/switch/index.js @@ -0,0 +1,67 @@ +import eventBus from '../core/utils/event-bus'; + +Component({ + externalClasses: ['l-class', 'l-disabled-class'], + properties: { + checked: { + type: null, + optionalTypes: [Boolean, String, Number], + value: false + }, + size: { + type: String, + value: '38rpx' + }, + color: { + type: String, + value: '#fff' + }, + // 选中后的颜色 + selectColor: { + type: String, + value: '#3963BC' + }, + activeValue: { + type: null, + value: true, + }, + inactiveValue: { + type: null, + value: false, + }, + // 不可选状态 + disabled: { + type: Boolean, + value: false + }, + }, + methods: { + onClick() { + const { activeValue, inactiveValue, disabled } = this.data; + + if (disabled) { + return; + } + + const checked = this.data.checked === activeValue; + const value = checked ? inactiveValue : activeValue; + + this.setData({ + checked: value + }); + + this.triggerEvent('linchange', { checked: value }); + eventBus.emit(`lin-form-change-${this.id}`, this.id); + }, + + getValues() { + return this.data.checked; + }, + + reset() { + this.setData({ + checked: this.data.inactiveValue + }); + } + } +}); \ No newline at end of file diff --git a/examples/dist/switch/index.json b/examples/dist/switch/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/examples/dist/switch/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/examples/dist/switch/index.wxml b/examples/dist/switch/index.wxml new file mode 100644 index 00000000..f328402e --- /dev/null +++ b/examples/dist/switch/index.wxml @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/examples/dist/switch/index.wxss b/examples/dist/switch/index.wxss new file mode 100644 index 00000000..71091d9d --- /dev/null +++ b/examples/dist/switch/index.wxss @@ -0,0 +1 @@ +.switch{position:relative;display:inline-block;box-sizing:content-box;width:2em;height:1em;background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:1em;transition:background-color .3s}.switch-node{position:absolute;top:0;left:0;border-radius:100%;z-index:1;width:1em;height:1em;background-color:#fff;box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);transition:.3s cubic-bezier(.3,1.05,.4,1.05)}.switch-on .switch-node{transform:translateX(calc(1em))}.switch-disabled{opacity:.5} \ No newline at end of file From 2527db3215d13e1b79ca8e95768a17496b9d09d4 Mon Sep 17 00:00:00 2001 From: qiushiming Date: Wed, 29 Dec 2021 19:27:32 +0800 Subject: [PATCH 3/3] =?UTF-8?q?chore(package.json):=20=E5=8D=87=E7=BA=A7?= =?UTF-8?q?=E7=89=88=E6=9C=AC=200.9.7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8188e62d..e28b88a1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lin-ui", - "version": "0.9.6", + "version": "0.9.7", "description": "A high quality UI components library with MiniProgram", "main": "app.js", "directories": {