[duoyun-ui] Support arrow navigation

Closed #120
mantou132 · Jan 27, 2024 · 9bf80ae · 9bf80ae
1 parent 34d4585
commit 9bf80ae
Show file tree

Hide file tree

Showing 12 changed files with 237 additions and 122 deletions.
diff --git a/packages/duoyun-ui/docs/en/02-elements/form.md b/packages/duoyun-ui/docs/en/02-elements/form.md
@@ -6,7 +6,7 @@
   name="dy-form"
   props='{"style": "width: 100%;", "@change": "(evt) => {Object.keys(evt.detail).forEach(key => evt.target.querySelector(`[name=${key}]`).value = evt.detail[key])}"}'
   html='<dy-form-item name="name" label="Name" multiple></dy-form-item>
-<dy-form-item name="password" label="password" type="password"></dy-form-item>
+<dy-form-item name="password" label="Password" type="password"></dy-form-item>
 <dy-form-item name="email" label="Email" autofocus></dy-form-item>
 <dy-form-item name="phone" label="Phone"></dy-form-item>
 <dy-form-item name="date" label="Date" type="date-time"></dy-form-item>

diff --git a/packages/duoyun-ui/docs/zh/02-elements/form.md b/packages/duoyun-ui/docs/zh/02-elements/form.md
@@ -6,7 +6,7 @@
   name="dy-form"
   props='{"style": "width: 100%;", "@change": "(evt) => {Object.keys(evt.detail).forEach(key => evt.target.querySelector(`[name=${key}]`).value = evt.detail[key])}"}'
   html='<dy-form-item name="name" label="Name" multiple></dy-form-item>
-<dy-form-item name="password" label="password" type="password"></dy-form-item>
+<dy-form-item name="password" label="Password" type="password"></dy-form-item>
 <dy-form-item name="email" label="Email" autofocus></dy-form-item>
 <dy-form-item name="phone" label="Phone"></dy-form-item>
 <dy-form-item name="date" label="Date" type="date-time"></dy-form-item>

diff --git a/packages/duoyun-ui/package.json b/packages/duoyun-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "duoyun-ui",
-  "version": "1.1.17",
+  "version": "1.1.18",
   "description": "A lightweight desktop UI component library, implemented using Gem",
   "keywords": [
     "frontend",

diff --git a/packages/duoyun-ui/src/elements/contextmenu.ts b/packages/duoyun-ui/src/elements/contextmenu.ts
@@ -227,9 +227,7 @@ export class DuoyunContextmenuElement extends GemElement {
         ],
       });
     } else {
-      update({
-        menuStack: menuStack.slice(0, menuStackIndex + 1),
-      });
+      update({ menuStack: menuStack.slice(0, menuStackIndex + 1) });
     }
   };
 
@@ -242,16 +240,11 @@ export class DuoyunContextmenuElement extends GemElement {
 
   #onKeydown = (evt: KeyboardEvent, menuStackIndex: number) => {
     evt.stopPropagation();
-    const focusPrevMenu = () => {
-      update({
-        menuStack: contextmenuStore.menuStack.slice(0, menuStackIndex),
-      });
-      this.#menuElements[menuStackIndex - 1]?.focus();
-    };
     hotkeys({
-      esc: menuStackIndex === 0 ? ContextMenu.close : focusPrevMenu,
-      left: focusPrevMenu,
-      right: () => this.#menuElements[menuStackIndex + 1]?.focus(),
+      esc:
+        menuStackIndex === 0
+          ? ContextMenu.close
+          : () => update({ menuStack: contextmenuStore.menuStack.slice(0, menuStackIndex) }),
     })(evt);
   };
 
@@ -289,7 +282,10 @@ export class DuoyunContextmenuElement extends GemElement {
   };
 
   mounted = () => {
-    this.#menuElements.shift()?.focus();
+    this.effect(
+      () => this.#menuElements.at(-1)?.focus(),
+      () => [contextmenuStore.menuStack.length],
+    );
     const restoreInert = setBodyInert(this);
     ContextMenu.instance = this;
     this.addEventListener('contextmenu', this.#preventDefault);

diff --git a/packages/duoyun-ui/src/elements/date-panel.ts b/packages/duoyun-ui/src/elements/date-panel.ts
@@ -258,6 +258,9 @@ export class DuoyunDatePanelElement extends GemElement<State> {
         ${Array.from({ length: 12 }).map(
           (_, index) => html`
             <span
+              tabindex="0"
+              role="button"
+              @keydown=${commonHandle}
               class=${classMap({
                 item: true,
                 highlight: isCurrentYear && index === this.state.month,
@@ -284,6 +287,9 @@ export class DuoyunDatePanelElement extends GemElement<State> {
         ${Array.from({ length: 12 }, (_, index) => this.state.year - 7 + index).map(
           (year) => html`
             <span
+              tabindex="0"
+              role="button"
+              @keydown=${commonHandle}
               class=${classMap({
                 item: true,
                 highlight: currentYear === year,

diff --git a/packages/duoyun-ui/src/elements/form.ts b/packages/duoyun-ui/src/elements/form.ts
@@ -38,6 +38,9 @@ const formStyle = createCSSSheet(css`
   :where(dy-form:not([hidden])) {
     display: block;
   }
+  dy-form:not([inline]) dy-form-item {
+    margin-block-end: 1.8em;
+  }
   :where(dy-form[inline]:not([hidden])) {
     display: flex;
     flex-wrap: wrap;
@@ -67,19 +70,18 @@ const formStyle = createCSSSheet(css`
     top: 100%;
     left: 0;
   }
-  dy-form-item {
-    flex-grow: 1;
-    margin-block-end: 1.8em;
-  }
-  dy-form-item[type='checkbox'] {
-    flex-grow: 0;
-  }
   dy-form-item:where([data-invalid], :state(invalid)) * {
     border-color: ${theme.negativeColor};
   }
-  dy-form-item-inline-group {
-    display: flex;
-    gap: 1em;
+  @media not ${mediaQuery.PHONE} {
+    dy-form-item-inline-group {
+      display: flex;
+      gap: 1em;
+    }
+    dy-form:not([inline]) dy-form-item-inline-group > dy-form-item {
+      width: 0;
+      flex-grow: 1;
+    }
   }
   @media ${mediaQuery.PHONE} {
     dy-form-item-inline-group {
@@ -161,6 +163,10 @@ const formItemStyle = createCSSSheet(css`
     display: flex;
     flex-direction: column;
   }
+  :host([type='checkbox']) {
+    flex-direction: row;
+    align-items: center;
+  }
   :host([required]) .label::after {
     content: '＊';
   }
@@ -178,16 +184,10 @@ const formItemStyle = createCSSSheet(css`
   }
   .input {
     width: 100%;
-    flex-grow: 1;
-    flex-shrink: 1;
   }
   .input + .input,
   .footer {
-    margin-top: 10px;
-  }
-  :host([type='checkbox']) {
-    flex-direction: row;
-    align-items: center;
+    margin-top: 0.7em;
   }
 `);