Closed #93, #105

mantou132 · Dec 12, 2023 · fdea972 · fdea972
1 parent 52b6b92
commit fdea972
Show file tree

Hide file tree

Showing 29 changed files with 221 additions and 146 deletions.
diff --git a/packages/duoyun-ui/docs/en/01-guide/README.md b/packages/duoyun-ui/docs/en/01-guide/README.md
@@ -13,7 +13,7 @@ DuoyunUI aims to provide a UI library for lightweight, high performance, full fe
 - Form
   > [`<dy-cascader-picker>`](../02-elements/cascader-picker.md), [`<dy-cascader>`](../02-elements/cascader.md), [`<dy-checkbox>`](../02-elements/checkbox.md), [`<dy-color-panel>`](../02-elements/color-panel.md), [`<dy-color-picker>`](../02-elements/color-picker.md), [`<dy-date-panel>`](../02-elements/date-panel.md), [`<dy-date-picker>`](../02-elements/date-picker.md), [`<dy-date-range-panel>`](../02-elements/date-range-panel.md), [`<dy-date-range-picker>`](../02-elements/date-range-picker.md), [`<dy-drop-area>`](../02-elements/drop-area.md), [`<dy-file-picker>`](../02-elements/file-picker.md), [`<dy-form>`](../02-elements/form.md), [`<dy-input>`](../02-elements/input.md), [`<dy-picker>`](../02-elements/picker.md), [`<dy-radio>`](../02-elements/radio.md), [`<dy-rating>`](../02-elements/rating.md), [`<dy-select>`](../02-elements/select.md), [`<dy-shortcut-record>`](../02-elements/shortcut-record.md), [`<dy-slider>`](../02-elements/slider.md), [`<dy-switch>`](../02-elements/switch.md), [`<dy-time-panel>`](../02-elements/time-panel.md), [`<dy-time-picker>`](../02-elements/time-picker.md)
 - Action
-  > [`<dy-action-text>`](../02-elements/action-text.md), [`<dy-button>`](../02-elements/button.md), [`<dy-copy>`](../02-elements/copy.md), [`<dy-link>`](../02-elements/link.md), [`<dy-menu>`](../02-elements/menu.md), [`<dy-options>`](../02-elements/options.md)
+  > [`<dy-action-text>`](../02-elements/action-text.md), [`<dy-button>`](../02-elements/button.md), [`<dy-copy>`](../02-elements/copy.md), [`<dy-link>`](../02-elements/link.md), [`<dy-contextmenu>`](../02-elements/contextmenu.md), [`<dy-options>`](../02-elements/options.md)
 - Feedback
   > [`<dy-coach-mark>`](../02-elements/coach-mark.md), [`<dy-drawer>`](../02-elements/drawer.md), [`<dy-help-text>`](../02-elements/help-text.md), [`<dy-input-capture>`](../02-elements/input-capture.md), [`<dy-keyboard-access>`](../02-elements/keyboard-access.md), [`<dy-loading>`](../02-elements/loading.md), [`<dy-meter>`](../02-elements/meter.md), [`<dy-modal>`](../02-elements/modal.md), [`<dy-page-loadbar>`](../02-elements/page-loadbar.md), [`<dy-placeholder>`](../02-elements/placeholder.md), [`<dy-popover>`](../02-elements/popover.md), [`<dy-progress>`](../02-elements/progress.md), [`<dy-status-light>`](../02-elements/status-light.md), [`<dy-toast>`](../02-elements/toast.md), [`<dy-tooltip>`](../02-elements/tooltip.md), [`<dy-wait>`](../02-elements/wait.md)
 - Navigator

diff --git a/packages/duoyun-ui/docs/en/02-elements/contextmenu.md b/packages/duoyun-ui/docs/en/02-elements/contextmenu.md
@@ -0,0 +1,41 @@
+# `<dy-contextmenu>`
+
+## Example
+
+<gbp-sandpack dependencies="@mantou/gem, duoyun-ui">
+
+```ts
+import { render, html } from '@mantou/gem';
+import { ContextMenu } from 'duoyun-ui/elements/contextmenu';
+
+import 'duoyun-ui/elements/button';
+
+const onClick = (e: MouseEvent) => {
+  ContextMenu.open(
+    [
+      {
+        text: 'Add',
+      },
+      {
+        text: 'Edit',
+      },
+      {
+        text: '---',
+      },
+      {
+        text: 'Delete',
+        danger: true,
+      },
+    ],
+    { activeElement: e.target },
+  );
+};
+
+render(html`<dy-button @click=${onClick}>Open ContextMenu</dy-button>`, document.getElementById('root'));
+```
+
+</gbp-sandpack>
+
+## API
+
+<gbp-api src="/src/elements/contextmenu.ts"></gbp-api>
diff --git a/packages/duoyun-ui/docs/en/02-elements/menu.md b/packages/duoyun-ui/docs/en/02-elements/menu.md
@@ -1,41 +1,3 @@
-# `<dy-menu>`
-
-## Example
-
-<gbp-sandpack dependencies="@mantou/gem, duoyun-ui">
-
-```ts
-import { render, html } from '@mantou/gem';
-import { ContextMenu } from 'duoyun-ui/elements/menu';
-
-import 'duoyun-ui/elements/button';
-
-const onClick = (e: MouseEvent) => {
-  ContextMenu.open(
-    [
-      {
-        text: 'Add',
-      },
-      {
-        text: 'Edit',
-      },
-      {
-        text: '---',
-      },
-      {
-        text: 'Delete',
-        danger: true,
-      },
-    ],
-    { activeElement: e.target },
-  );
-};
-
-render(html`<dy-button @click=${onClick}>Open Menu</dy-button>`, document.getElementById('root'));
-```
-
-</gbp-sandpack>
-
-## API
-
-<gbp-api src="/src/elements/menu.ts"></gbp-api>
+---
+redirect: ./contextmenu.md
+---
diff --git a/packages/duoyun-ui/docs/zh/01-guide/README.md b/packages/duoyun-ui/docs/zh/01-guide/README.md
@@ -12,7 +12,7 @@ DuoyunUI 是使用 [Gem](https://gemjs.org/) 开发的桌面端中后台 Web UI
 - 表单元素
   > [`<dy-cascader-picker>`](../02-elements/cascader-picker.md), [`<dy-cascader>`](../02-elements/cascader.md), [`<dy-checkbox>`](../02-elements/checkbox.md), [`<dy-color-panel>`](../02-elements/color-panel.md), [`<dy-color-picker>`](../02-elements/color-picker.md), [`<dy-date-panel>`](../02-elements/date-panel.md), [`<dy-date-picker>`](../02-elements/date-picker.md), [`<dy-date-range-panel>`](../02-elements/date-range-panel.md), [`<dy-date-range-picker>`](../02-elements/date-range-picker.md), [`<dy-drop-area>`](../02-elements/drop-area.md), [`<dy-file-picker>`](../02-elements/file-picker.md), [`<dy-form>`](../02-elements/form.md), [`<dy-input>`](../02-elements/input.md), [`<dy-picker>`](../02-elements/picker.md), [`<dy-radio>`](../02-elements/radio.md), [`<dy-rating>`](../02-elements/rating.md), [`<dy-select>`](../02-elements/select.md), [`<dy-shortcut-record>`](../02-elements/shortcut-record.md), [`<dy-slider>`](../02-elements/slider.md), [`<dy-switch>`](../02-elements/switch.md), [`<dy-time-panel>`](../02-elements/time-panel.md), [`<dy-time-picker>`](../02-elements/time-picker.md)
 - 动作元素
-  > [`<dy-action-text>`](../02-elements/action-text.md), [`<dy-button>`](../02-elements/button.md), [`<dy-copy>`](../02-elements/copy.md), [`<dy-link>`](../02-elements/link.md), [`<dy-menu>`](../02-elements/menu.md), [`<dy-options>`](../02-elements/options.md)
+  > [`<dy-action-text>`](../02-elements/action-text.md), [`<dy-button>`](../02-elements/button.md), [`<dy-copy>`](../02-elements/copy.md), [`<dy-link>`](../02-elements/link.md), [`<dy-contextmenu>`](../02-elements/contextmenu.md), [`<dy-options>`](../02-elements/options.md)
 - 反馈元素
   > [`<dy-coach-mark>`](../02-elements/coach-mark.md), [`<dy-drawer>`](../02-elements/drawer.md), [`<dy-help-text>`](../02-elements/help-text.md), [`<dy-input-capture>`](../02-elements/input-capture.md), [`<dy-keyboard-access>`](../02-elements/keyboard-access.md), [`<dy-loading>`](../02-elements/loading.md), [`<dy-meter>`](../02-elements/meter.md), [`<dy-modal>`](../02-elements/modal.md), [`<dy-page-loadbar>`](../02-elements/page-loadbar.md), [`<dy-placeholder>`](../02-elements/placeholder.md), [`<dy-popover>`](../02-elements/popover.md), [`<dy-progress>`](../02-elements/progress.md), [`<dy-status-light>`](../02-elements/status-light.md), [`<dy-toast>`](../02-elements/toast.md), [`<dy-tooltip>`](../02-elements/tooltip.md), [`<dy-wait>`](../02-elements/wait.md)
 - 导航元素

diff --git a/packages/duoyun-ui/docs/zh/02-elements/contextmenu.md b/packages/duoyun-ui/docs/zh/02-elements/contextmenu.md
@@ -0,0 +1,41 @@
+# `<dy-contextmenu>`
+
+## Example
+
+<gbp-sandpack dependencies="@mantou/gem, duoyun-ui">
+
+```ts
+import { render, html } from '@mantou/gem';
+import { ContextMenu } from 'duoyun-ui/elements/contextmenu';
+
+import 'duoyun-ui/elements/button';
+
+const onClick = (e: MouseEvent) => {
+  ContextMenu.open(
+    [
+      {
+        text: '新增',
+      },
+      {
+        text: '编辑',
+      },
+      {
+        text: '---',
+      },
+      {
+        text: '删除',
+        danger: true,
+      },
+    ],
+    { activeElement: e.target },
+  );
+};
+
+render(html`<dy-button @click=${onClick}>打开上下文菜单</dy-button>`, document.getElementById('root'));
+```
+
+</gbp-sandpack>
+
+## API
+
+<gbp-api src="/src/elements/contextmenu.ts"></gbp-api>
diff --git a/packages/duoyun-ui/docs/zh/02-elements/menu.md b/packages/duoyun-ui/docs/zh/02-elements/menu.md
@@ -1,41 +1,3 @@
-# `<dy-menu>`
-
-## Example
-
-<gbp-sandpack dependencies="@mantou/gem, duoyun-ui">
-
-```ts
-import { render, html } from '@mantou/gem';
-import { ContextMenu } from 'duoyun-ui/elements/menu';
-
-import 'duoyun-ui/elements/button';
-
-const onClick = (e: MouseEvent) => {
-  ContextMenu.open(
-    [
-      {
-        text: '新增',
-      },
-      {
-        text: '编辑',
-      },
-      {
-        text: '---',
-      },
-      {
-        text: '删除',
-        danger: true,
-      },
-    ],
-    { activeElement: e.target },
-  );
-};
-
-render(html`<dy-button @click=${onClick}>打开菜单</dy-button>`, document.getElementById('root'));
-```
-
-</gbp-sandpack>
-
-## API
-
-<gbp-api src="/src/elements/menu.ts"></gbp-api>
+---
+redirect: ./contextmenu.md
+---
diff --git a/packages/duoyun-ui/package.json b/packages/duoyun-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "duoyun-ui",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "WebComponts UI",
   "exports": {
     "./elements/*": "./elements/*.js",

diff --git a/packages/duoyun-ui/src/elements/button.ts b/packages/duoyun-ui/src/elements/button.ts
@@ -22,7 +22,7 @@ import { focusStyle } from '../lib/styles';
 
 import { DuoyunUseElement } from './use';
 import { createHistoryParams, RouteItem } from './route';
-import { MenuItem, ContextMenu } from './menu';
+import { ContextMenuItem, ContextMenu } from './contextmenu';
 
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
@@ -126,7 +126,7 @@ export class DuoyunButtonElement extends GemElement {
   @boolattribute small: boolean;
   @boolattribute disabled: boolean;
 
-  @property dropdown?: MenuItem[] | null;
+  @property dropdown?: ContextMenuItem[] | null;
   @property route?: RouteItem;
   @property params?: Record<string, string>;
   @property query?: Record<string, string>;

diff --git a/packages/duoyun-ui/src/elements/card.ts b/packages/duoyun-ui/src/elements/card.ts
@@ -9,7 +9,7 @@ import { commonHandle } from '../lib/hotkeys';
 import { focusStyle } from '../lib/styles';
 
 import { DuoyunLoadableBaseElement } from './base/loadable';
-import { MenuItem, ContextMenu } from './menu';
+import { ContextMenuItem, ContextMenu } from './contextmenu';
 
 import './use';
 
@@ -86,7 +86,7 @@ const style = createCSSSheet(css`
   }
 `);
 
-export type ActionItem = Omit<MenuItem, 'handle'> & { handle: (rest: HTMLElement) => void | Promise<void> };
+export type ActionItem = Omit<ContextMenuItem, 'handle'> & { handle: (rest: HTMLElement) => void | Promise<void> };
 
 /**
  * @customElement dy-card

diff --git a/packages/duoyun-ui/src/elements/cascader-picker.ts b/packages/duoyun-ui/src/elements/cascader-picker.ts
@@ -18,7 +18,7 @@ import { getCascaderDeep } from '../lib/utils';
 import { commonHandle } from '../lib/hotkeys';
 import { focusStyle } from '../lib/styles';
 
-import { ContextMenu } from './menu';
+import { ContextMenu } from './contextmenu';
 import { BasePickerElement, pickerStyle } from './picker';
 import type { Option, DuoyunCascaderElement, OptionValue } from './cascader';
 

diff --git a/packages/duoyun-ui/src/elements/coach-mark.ts b/packages/duoyun-ui/src/elements/coach-mark.ts
@@ -8,7 +8,7 @@ import { splice } from '@mantou/gem/helper/i18n';
 import { theme, getSemanticColor } from '../lib/theme';
 import { locale } from '../lib/locale';
 
-import { ContextMenu } from './menu';
+import { ContextMenu } from './contextmenu';
 import { DuoyunVisibleBaseElement } from './base/visible';
 import { DuoyunWaitElement } from './wait';