From 8c503de7c98740b4f36c6a57634ef04136e1d5aa Mon Sep 17 00:00:00 2001 From: yutent Date: Fri, 2 Jun 2023 18:11:02 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E6=9B=B4=E6=96=B0option?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/option/index.js | 107 +++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 100 insertions(+), 7 deletions(-) diff --git a/src/option/index.js b/src/option/index.js index eacb482..8958e53 100644 --- a/src/option/index.js +++ b/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` - - + +
+ +
` } } @@ -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`
` + let action = (this.action || '').trim() + if (IS_MACOS && action) { + action = action + .split('+') + .map(s => MACOS_KEYS[s.trim()] || s.trim()) + .join('+') + } + return html` +
+ + + ${action} +
+ ` } } From 1c30146921ae9f1f9a5e272a68d75b98681a98db Mon Sep 17 00:00:00 2001 From: yutent Date: Mon, 5 Jun 2023 17:31:04 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E6=9B=B4=E6=96=B0option?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/option/index.js | 60 ++++++++++++++++++++++++++++++++------------- 1 file changed, 43 insertions(+), 17 deletions(-) diff --git a/src/option/index.js b/src/option/index.js index 8958e53..73f94cd 100644 --- a/src/option/index.js +++ b/src/option/index.js @@ -8,16 +8,31 @@ import { nextTick, css, html, Component, bind } from 'wkit' import '../icon/index.js' const MACOS_KEYS = { - Command: '⌘', Cmd: '⌘', Option: '⌥', - Alt: '⌥', Shift: '⇧', - Ctrl: '⌃', - Control: '⌃' + 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 { // @@ -31,6 +46,11 @@ class OptionGroup extends Component { :host { display: block; width: 100%; + } + .option-group { + position: relative; + width: 100%; + height: 100%; line-height: 1.5; } @@ -62,14 +82,16 @@ class OptionGroup extends Component { render() { return html` - -
- +
+ +
+ +
` } @@ -119,8 +141,7 @@ class Option extends Component { margin: 0 8px; } .action { - font-size: 12px; - // font-family: Menlo; + font-size: 10px; white-space: nowrap; color: var(--color-grey-2); } @@ -141,17 +162,22 @@ class Option extends Component { render() { let action = (this.action || '').trim() - if (IS_MACOS && action) { + if (action) { action = action .split('+') - .map(s => MACOS_KEYS[s.trim()] || s.trim()) + .map( + s => + (IS_MACOS ? MACOS_KEYS : IS_WIN ? WIN_KEYS : LINUX_KEYS)[ + s.trim() + ] || s.trim() + ) .join('+') } return html`
- ${action} + ${action}
` } From d09d46c48fa99698e85b04fd7acf750fe8a9fa46 Mon Sep 17 00:00:00 2001 From: yutent Date: Thu, 8 Jun 2023 13:43:51 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E6=8E=A8=E9=80=81wkit=E7=89=88?= 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 23d92e1..da5937a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bd/ui", - "version": "0.1.12", + "version": "0.1.13", "description": "", "files": [ "dist/*" From cfe44c5b0554021f74fa9cc68acee0b393f462bd Mon Sep 17 00:00:00 2001 From: yutent Date: Mon, 12 Jun 2023 10:12:30 +0800 Subject: [PATCH 4/4] esm --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index da5937a..55c44bd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "name": "@bd/ui", "version": "0.1.13", + "type": "module", "description": "", "files": [ "dist/*"