调整UI尺寸

src/dropdown/index.js

@@ -0,0 +1,118 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @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`
+      <div class="dropdown">
+        <div class="default">
+          <slot></slot>
+          <wc-icon class="arrow" name="left"></wc-icon>
+        </div>
+
+        <div class="dropdown-list">
+          <slot name="option"></slot>
+        </div>
+      </div>
+    `
+  }
+}
+
+Dropdown.reg('dropdown')

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
         )
       );
 

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
         )
       );
 

src/form/dropdown.js

@@ -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`
-      <div class="aa" ref=${this.bar} @click=${this.foo}>
-        <div class="bb" ref="bb">
-          <slot ref="dd"></slot>
-        </div>
-        <foo>dsdsd</foo>
-      </div>
-      <div class="cc" ref="cc">${this.bar}</div>
-    `
-  }
-}
-
-Dropdown.reg('dropdown')

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
         )
       );
 

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
         )
       );
 

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
         )
       );
 

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
         )
       );
 

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
         )
       );
 

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 {

src/option/index.js

@@ -0,0 +1,68 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @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`
+      <label>${this.label}</label>
+      <slot></slot>
+    `
+  }
+}
+
+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` <section class="item"><slot></slot></section> `
+  }
+}
+
+OptionGroup.reg('option-group')
+Option.reg('option')

开发规范.md

@@ -20,7 +20,6 @@
   - `size=l`  大号,  32px (默认值)
   - `size=xl`  加大号, 36px
   - `size=xxl`  加加大号, 44px
-  - `size=xxxl`  加加加大号, 52px
 
 4. 自带点击事件的组件, 统一增加"节流/防抖"逻辑
   > 统一为增加 `lazy="1000"` 属性实现