From c98258cadf112bc1ed9db9c341f12028df28a623 Mon Sep 17 00:00:00 2001 From: yutent Date: Mon, 29 May 2023 14:36:34 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4UI=E5=B0=BA=E5=AF=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/dropdown/index.js | 118 ++++++++++++++++++++++++++++++++++++++++++ src/form/button.js | 5 -- src/form/checkbox.js | 5 -- src/form/dropdown.js | 30 ----------- src/form/input.js | 5 -- src/form/number.js | 10 ---- src/form/passwd.js | 5 -- src/form/radio.js | 5 -- src/form/switch.js | 5 -- src/icon/index.js | 3 +- src/option/index.js | 68 ++++++++++++++++++++++++ 开发规范.md | 1 - 12 files changed, 187 insertions(+), 73 deletions(-) create mode 100644 src/dropdown/index.js delete mode 100644 src/form/dropdown.js create mode 100644 src/option/index.js diff --git a/src/dropdown/index.js b/src/dropdown/index.js new file mode 100644 index 0000000..c6cef81 --- /dev/null +++ b/src/dropdown/index.js @@ -0,0 +1,118 @@ +/** + * {} + * @author yutent + * @date 2023/05/29 11:48:01 + */ + +import { nextTick, css, html, Component, bind } from 'wkit' +import '../icon/index.js' +import '../option/index.js' + +class Dropdown extends Component { + static props = {} + static styles = [ + css` + :host { + display: inline-flex; + min-width: 108px; + height: 32px; + font-size: 14px; + user-select: none; + -moz-user-select: none; + color: var(--color-dark-1); + } + + .dropdown { + position: relative; + display: flex; + width: 100%; + height: 100%; + } + + .default { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + padding: 0 8px; + + .arrow { + --size: 12px; + margin-left: 6px; + transform: rotate(-90deg); + } + } + `, + // 尺寸 + css` + @use 'sass:map'; + $sizes: ( + s: ( + w: 52px, + h: 20px, + f: 12px + ), + m: ( + w: 72px, + h: 24px, + f: 12px + ), + l: ( + w: 108px, + h: 32px, + f: 14px + ), + xl: ( + w: 132px, + h: 36px, + f: 14px + ), + xxl: ( + w: 160px, + h: 44px, + f: 14px + ) + ); + + @loop $s, $v in $sizes { + :host([size='#{$s}']) { + min-width: map.get($v, 'w'); + height: map.get($v, 'h'); + font-size: map.get($v, 'f'); + } + } + `, + + css` + .dropdown-list { + overflow: hidden; + position: absolute; + top: 32px; + padding: 8px 0; + border-radius: 3px; + background: #fff; + box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); + } + ` + ] + + mounted() {} + + render() { + return html` +
+
+ + +
+ +
+ +
+
+ ` + } +} + +Dropdown.reg('dropdown') diff --git a/src/form/button.js b/src/form/button.js index fdc2170..a519357 100644 --- a/src/form/button.js +++ b/src/form/button.js @@ -111,11 +111,6 @@ class Button extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px ) ); diff --git a/src/form/checkbox.js b/src/form/checkbox.js index 574fd51..5d25e62 100644 --- a/src/form/checkbox.js +++ b/src/form/checkbox.js @@ -153,11 +153,6 @@ class CheckboxItem extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px ) ); diff --git a/src/form/dropdown.js b/src/form/dropdown.js deleted file mode 100644 index 4c1c27e..0000000 --- a/src/form/dropdown.js +++ /dev/null @@ -1,30 +0,0 @@ -import { nextTick, css, html, Component, bind } from 'wkit' - -class Dropdown extends Component { - bar = 'balbal' - mounted() { - console.log('Dropdown: ', this.$refs) - - bind(this.$refs.balbal, 'mousedown', ev => { - console.log('aa : mousedown') - }) - } - - foo() { - console.log('foo: click') - } - - render() { - return html` -
-
- -
- dsdsd -
-
${this.bar}
- ` - } -} - -Dropdown.reg('dropdown') diff --git a/src/form/input.js b/src/form/input.js index 7aae612..13dc14f 100644 --- a/src/form/input.js +++ b/src/form/input.js @@ -298,11 +298,6 @@ class Input extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px ) ); diff --git a/src/form/number.js b/src/form/number.js index e67963b..0d6c034 100644 --- a/src/form/number.js +++ b/src/form/number.js @@ -131,16 +131,6 @@ class WcNumber extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px - ), - xxxxl: ( - w: 212px, - h: 64px, - f: 18px ) ); diff --git a/src/form/passwd.js b/src/form/passwd.js index 166042f..79ceef5 100644 --- a/src/form/passwd.js +++ b/src/form/passwd.js @@ -108,11 +108,6 @@ class Passwd extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px ) ); diff --git a/src/form/radio.js b/src/form/radio.js index e619d8b..bd2a8cb 100644 --- a/src/form/radio.js +++ b/src/form/radio.js @@ -153,11 +153,6 @@ class RadioItem extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px ) ); diff --git a/src/form/switch.js b/src/form/switch.js index 3a229dc..939f9d6 100644 --- a/src/form/switch.js +++ b/src/form/switch.js @@ -110,11 +110,6 @@ class Switch extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px ) ); diff --git a/src/icon/index.js b/src/icon/index.js index 54d257a..a44e704 100644 --- a/src/icon/index.js +++ b/src/icon/index.js @@ -56,8 +56,7 @@ class Icon extends Component { 'm': 24px, 'l': 32px, 'xl': 36px, - 'xxl': 44px, - 'xxxl': 52px + 'xxl': 44px ); @loop $k, $v in $gaps { diff --git a/src/option/index.js b/src/option/index.js new file mode 100644 index 0000000..eacb482 --- /dev/null +++ b/src/option/index.js @@ -0,0 +1,68 @@ +/** + * {} + * @author yutent + * @date 2023/05/29 11:59:27 + */ + +import { nextTick, css, html, Component, bind } from 'wkit' + +class OptionGroup extends Component { + // + static props = { + label: '' + } + + static styles = [ + css` + :host { + display: block; + width: 100%; + line-height: 1.5; + } + + label { + padding: 0 8px; + line-height: 1; + font-size: 12px; + color: var(--color-grey-2); + } + ` + ] + + render() { + return html` + + + ` + } +} + +class Option extends Component { + // + static props = { + action: '', + disabled: false + } + + static styles = [ + css` + .item { + display: flex; + padding: 0 16px; + line-height: 2; + color: var(--color-dark-1); + + &:hover { + background: var(--color-plain-1); + } + } + ` + ] + + render() { + return html`
` + } +} + +OptionGroup.reg('option-group') +Option.reg('option') diff --git a/开发规范.md b/开发规范.md index 6f543ca..3a13171 100644 --- a/开发规范.md +++ b/开发规范.md @@ -20,7 +20,6 @@ - `size=l` 大号, 32px (默认值) - `size=xl` 加大号, 36px - `size=xxl` 加加大号, 44px - - `size=xxxl` 加加加大号, 52px 4. 自带点击事件的组件, 统一增加"节流/防抖"逻辑 > 统一为增加 `lazy="1000"` 属性实现 \ No newline at end of file