更新option

src/option/index.js

@@ -5,11 +5,25 @@
  */
 
 import { nextTick, css, html, Component, bind } from 'wkit'
+import '../icon/index.js'
+
+const MACOS_KEYS = {
+  Command: '⌘',
+  Cmd: '⌘',
+  Option: '⌥',
+  Alt: '⌥',
+  Shift: '⇧',
+  Ctrl: '⌃',
+  Control: '⌃'
+}
+const UA = navigator.userAgent.toLowerCase()
+const IS_MACOS = UA.includes('mac os x') || UA.includes('iphone')
 
 class OptionGroup extends Component {
   //
   static props = {
-    label: ''
+    label: '',
+    fold: false
   }
 
   static styles = [
@@ -21,18 +35,42 @@ class OptionGroup extends Component {
       }
 
       label {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 24px;
         padding: 0 8px;
-        line-height: 1;
         font-size: 12px;
         color: var(--color-grey-2);
+
+        .ico {
+          --size: 12px;
+        }
+      }
+
+      :host([fold]) {
+        label {
+          height: 32px;
+
+          &:hover {
+            background: var(--color-plain-1);
+          }
+        }
       }
     `
   ]
 
   render() {
     return html`
-      <label>${this.label}</label>
-      <slot></slot>
+      <label
+        >${this.label}
+        ${this.fold
+          ? html`<wc-icon class="ico" name="right"></wc-icon>`
+          : ''}</label
+      >
+      <div class="sub-list">
+        <slot></slot>
+      </div>
     `
   }
 }
@@ -41,6 +79,24 @@ class Option extends Component {
   //
   static props = {
     action: '',
+    icon: {
+      type: String,
+      default: null,
+      observer(val) {
+        if (val === '') {
+          this.icon = null
+        }
+      }
+    },
+    action: {
+      type: String,
+      default: null,
+      observer(val) {
+        if (val === '') {
+          this.action = null
+        }
+      }
+    },
     disabled: false
   }
 
@@ -48,19 +104,56 @@ class Option extends Component {
     css`
       .item {
         display: flex;
-        padding: 0 16px;
-        line-height: 2;
+        align-items: center;
+        min-width: 128px;
+        height: 32px;
+        padding: 0 6px;
         color: var(--color-dark-1);
 
+        .ico {
+          --size: 12px;
+          color: var(--color-grey-2);
+        }
+        .name {
+          flex: 1;
+          margin: 0 8px;
+        }
+        .action {
+          font-size: 12px;
+          // font-family: Menlo;
+          white-space: nowrap;
+          color: var(--color-grey-2);
+        }
+
         &:hover {
           background: var(--color-plain-1);
         }
       }
+
+      :host([icon]) {
+        .item {
+          min-width: 144px;
+          padding: 0 12px;
+        }
+      }
     `
   ]
 
   render() {
-    return html` <section class="item"><slot></slot></section> `
+    let action = (this.action || '').trim()
+    if (IS_MACOS && action) {
+      action = action
+        .split('+')
+        .map(s => MACOS_KEYS[s.trim()] || s.trim())
+        .join('+')
+    }
+    return html`
+      <section class="item">
+        <wc-icon class="ico" name=${this.icon}></wc-icon>
+        <span class="name"><slot></slot></span>
+        <span class="action">${action}</span>
+      </section>
+    `
   }
 }