Merge branch 'master' of ssh://github.com/bd-js/wcui

package.json

@@ -1,6 +1,7 @@
 {
   "name": "@bd/ui",
-  "version": "0.1.12",
+  "version": "0.1.13",
+  "type": "module",
   "description": "",
   "files": [
     "dist/*"

src/option/index.js

@@ -5,11 +5,40 @@
  */
 
 import { nextTick, css, html, Component, bind } from 'wkit'
+import '../icon/index.js'
+
+const MACOS_KEYS = {
+  Cmd: '⌘',
+  Option: '⌥',
+  Shift: '⇧',
+  Ctrl: '⌃'
+}
+const WIN_KEYS = {
+  Win: 'Win'
+}
+const LINUX_KEYS = {
+  Super: 'Super'
+}
+const UA = navigator.userAgent.toLowerCase()
+const IS_MACOS = UA.includes('mac os x') || UA.includes('iphone')
+const IS_WIN = UA.includes('windows nt')
+
+MACOS_KEYS['Super'] = MACOS_KEYS.Cmd
+MACOS_KEYS['Command'] = MACOS_KEYS.Cmd
+MACOS_KEYS['Alt'] = MACOS_KEYS.Option
+MACOS_KEYS['Control'] = MACOS_KEYS.Ctrl
+WIN_KEYS['Super'] = WIN_KEYS.Win
+WIN_KEYS['Cmd'] = WIN_KEYS.Win
+WIN_KEYS['Command'] = WIN_KEYS.Win
+LINUX_KEYS['Win'] = LINUX_KEYS.Super
+LINUX_KEYS['Cmd'] = LINUX_KEYS.Super
+LINUX_KEYS['Command'] = LINUX_KEYS.Super
 
 class OptionGroup extends Component {
   //
   static props = {
-    label: ''
+    label: '',
+    fold: false
   }
 
   static styles = [
@@ -17,22 +46,53 @@ class OptionGroup extends Component {
       :host {
         display: block;
         width: 100%;
+      }
+      .option-group {
+        position: relative;
+        width: 100%;
+        height: 100%;
         line-height: 1.5;
       }
 
       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>
+      <div class="option-group">
+        <label
+          >${this.label}
+          ${this.fold
+            ? html`<wc-icon class="ico" name="right"></wc-icon>`
+            : ''}</label
+        >
+        <div class="sub-list">
+          <slot></slot>
+        </div>
+      </div>
     `
   }
 }
@@ -41,6 +101,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 +126,60 @@ 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: 10px;
+          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 (action) {
+      action = action
+        .split('+')
+        .map(
+          s =>
+            (IS_MACOS ? MACOS_KEYS : IS_WIN ? WIN_KEYS : LINUX_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>
+        <kbd class="action">${action}</kbd>
+      </section>
+    `
   }
 }