Closed #86

packages/duoyun-ui/docs/en/01-guide/02-form.md

@@ -106,7 +106,7 @@ export class MyEleElement extends GemElement {
 
 ## Custom form field
 
-`<dy-form-item>` default support `text`, `number`, `checkbox`, `pick`, `radio`, `select`, `textarea`,
+`<dy-form-item>` default support `text`, `number`, `checkbox`, `picker`, `radio`, `select`, `textarea`,
 if them can't meet your needs, you can use your own elements,
 just implement the `value` attributes and bubble `change` event, then you can use [`<dy-form-item>`](../02-elements/form.md#dy-form-item-api) `slot` type:
 

packages/duoyun-ui/docs/en/01-guide/README.md

@@ -11,7 +11,7 @@ DuoyunUI aims to provide a UI library for lightweight, high performance, full fe
 ## Elements Overview
 
 - Form
-  > [`<dy-cascader-pick>`](../02-elements/cascader-pick.md), [`<dy-cascader>`](../02-elements/cascader.md), [`<dy-checkbox>`](../02-elements/checkbox.md), [`<dy-color-panel>`](../02-elements/color-panel.md), [`<dy-color-pick>`](../02-elements/color-pick.md), [`<dy-date-panel>`](../02-elements/date-panel.md), [`<dy-date-pick>`](../02-elements/date-pick.md), [`<dy-date-range-panel>`](../02-elements/date-range-panel.md), [`<dy-date-range-pick>`](../02-elements/date-range-pick.md), [`<dy-drop-area>`](../02-elements/drop-area.md), [`<dy-file-pick>`](../02-elements/file-pick.md), [`<dy-form>`](../02-elements/form.md), [`<dy-input>`](../02-elements/input.md), [`<dy-pick>`](../02-elements/pick.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-pick>`](../02-elements/time-pick.md)
+  > [`<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)
 - Feedback
@@ -40,9 +40,9 @@ Use DuoyunUI element:
 ```ts
 import { render } from '@mantou/gem';
 
-import 'duoyun-ui/elements/color-pick';
+import 'duoyun-ui/elements/color-picker';
 
-render(html`<dy-color-pick></dy-color-pick>`, document.body);
+render(html`<dy-color-picker></dy-color-picker>`, document.body);
 ```
 
 Use element API:

packages/duoyun-ui/docs/en/02-elements/cascader-pick.md → packages/duoyun-ui/docs/en/02-elements/cascader-picker.md

@@ -1,12 +1,12 @@
-# `<dy-cascader-pick>`
+# `<dy-cascader-picker>`
 
 ## Example
 
 <gbp-example
-  name="dy-cascader-pick"
+  name="dy-cascader-picker"
   props='{"placeholder": "Please choose", "multiple": true, "value": [["Option 2"]], "options": [{"label": "Option 1", "children": [{"label": "Option 1.1"}]}, {"label": "Option 2"}, {"label": "Option 3"}], "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://jspm.dev/duoyun-ui/elements/cascader-pick"></gbp-example>
+  src="https://jspm.dev/duoyun-ui/elements/cascader-picker"></gbp-example>
 
 ## API
 
-<gbp-api src="/src/elements/cascader-pick.ts"></gbp-api>
+<gbp-api src="/src/elements/cascader-picker.ts"></gbp-api>

packages/duoyun-ui/docs/en/02-elements/color-picker.md

@@ -0,0 +1,12 @@
+# `<dy-color-picker>`
+
+## Example
+
+<gbp-example
+  name="dy-color-picker"
+  props='{"alpha": true, "value": "#e5e", "@change": "(evt) => evt.target.value = evt.detail"}'
+  src="https://jspm.dev/duoyun-ui/elements/color-picker"></gbp-example>
+
+## API
+
+<gbp-api src="/src/elements/color-picker.ts"></gbp-api>

packages/duoyun-ui/docs/en/02-elements/time-pick.md → packages/duoyun-ui/docs/en/02-elements/date-picker.md

@@ -1,12 +1,12 @@
-# `<dy-time-pick>`
+# `<dy-date-picker>`
 
 ## Example
 
 <gbp-example
-  name="dy-time-pick"
+  name="dy-date-picker"
   props='{"value": 1644475003294, "clearable": true, "@clear": "(evt) => evt.target.value = null", "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://jspm.dev/duoyun-ui/elements/time-pick"></gbp-example>
+  src="https://jspm.dev/duoyun-ui/elements/date-picker"></gbp-example>
 
 ## API
 
-<gbp-api src="/src/elements/time-pick.ts"></gbp-api>
+<gbp-api src="/src/elements/date-picker.ts"></gbp-api>

packages/duoyun-ui/docs/zh/02-elements/date-range-pick.md → packages/duoyun-ui/docs/en/02-elements/date-range-picker.md

@@ -1,12 +1,12 @@
-# `<dy-date-range-pick>`
+# `<dy-date-range-picker>`
 
 ## Example
 
 <gbp-example
-  name="dy-date-range-pick"
+  name="dy-date-range-picker"
     props='{"value": [1644475003294, 1644575003294], "clearable": true, "@clear": "(evt) => evt.target.value = null", "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://jspm.dev/duoyun-ui/elements/date-range-pick"></gbp-example>
+  src="https://jspm.dev/duoyun-ui/elements/date-range-picker"></gbp-example>
 
 ## API
 
-<gbp-api src="/src/elements/date-range-pick.ts"></gbp-api>
+<gbp-api src="/src/elements/date-range-picker.ts"></gbp-api>

packages/duoyun-ui/docs/en/02-elements/file-pick.md → packages/duoyun-ui/docs/en/02-elements/file-picker.md

@@ -1,12 +1,12 @@
-# `<dy-file-pick>`
+# `<dy-file-picker>`
 
 ## Example
 
 <gbp-example
-  name="dy-file-pick"
+  name="dy-file-picker"
   props='{"style": "width: 100%; align-self: flex-start;", "multiple": true, "type": "image", "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://jspm.dev/duoyun-ui/elements/file-pick"></gbp-example>
+  src="https://jspm.dev/duoyun-ui/elements/file-picker"></gbp-example>
 
 ## API
 
-<gbp-api src="/src/elements/file-pick.ts"></gbp-api>
+<gbp-api src="/src/elements/file-picker.ts"></gbp-api>

packages/duoyun-ui/docs/en/02-elements/image-preview.md

@@ -2,7 +2,7 @@
 
 ## Example
 
-See [`<dy-file-pick>`](./file-pick.md).
+See [`<dy-file-picker>`](./file-picker.md).
 
 ## API
 

packages/duoyun-ui/docs/zh/02-elements/pick.md → packages/duoyun-ui/docs/en/02-elements/picker.md

@@ -1,12 +1,12 @@
-# `<dy-pick>`
+# `<dy-picker>`
 
 ## Example
 
 <gbp-example
-  name="dy-pick"
+  name="dy-picker"
   props='{"value": "Option 1", "options": [{"label": "Option 1", "children": [{"label": "Option 3"}]}, {"label": "Option 2"}], "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://jspm.dev/duoyun-ui/elements/pick"></gbp-example>
+  src="https://jspm.dev/duoyun-ui/elements/picker"></gbp-example>
 
 ## API
 
-<gbp-api src="/src/elements/pick.ts"></gbp-api>
+<gbp-api src="/src/elements/picker.ts"></gbp-api>

packages/duoyun-ui/docs/zh/02-elements/date-pick.md → packages/duoyun-ui/docs/en/02-elements/time-picker.md

@@ -1,12 +1,12 @@
-# `<dy-date-pick>`
+# `<dy-time-picker>`
 
 ## Example
 
 <gbp-example
-  name="dy-date-pick"
+  name="dy-time-picker"
   props='{"value": 1644475003294, "clearable": true, "@clear": "(evt) => evt.target.value = null", "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://jspm.dev/duoyun-ui/elements/date-pick"></gbp-example>
+  src="https://jspm.dev/duoyun-ui/elements/time-picker"></gbp-example>
 
 ## API
 
-<gbp-api src="/src/elements/date-pick.ts"></gbp-api>
+<gbp-api src="/src/elements/time-picker.ts"></gbp-api>

packages/duoyun-ui/docs/zh/01-guide/02-form.md

@@ -105,7 +105,7 @@ export class MyEleElement extends GemElement {
 
 ## 自定义表单字段
 
-`<dy-form-item>` 默认支持 `text`, `number`, `checkbox`, `pick`, `radio`, `select`, `textarea`，如果这些不能满足你的需求，你可以使用自己的元素，
+`<dy-form-item>` 默认支持 `text`, `number`, `checkbox`, `picker`, `radio`, `select`, `textarea`，如果这些不能满足你的需求，你可以使用自己的元素，
 只需要实现 `value` 属性 和可冒泡 `change` 事件即可，然后你可以使用 [`<dy-form-item>`](../02-elements/form.md#dy-form-item-api) 的 `slot` 类型：
 
 ```ts 14-16

packages/duoyun-ui/docs/zh/01-guide/README.md

@@ -10,7 +10,7 @@ DuoyunUI 是使用 [Gem](https://gemjs.org/) 开发的桌面端中后台 Web UI
 ## 元素分类
 
 - 表单元素
-  > [`<dy-cascader-pick>`](../02-elements/cascader-pick.md), [`<dy-cascader>`](../02-elements/cascader.md), [`<dy-checkbox>`](../02-elements/checkbox.md), [`<dy-color-panel>`](../02-elements/color-panel.md), [`<dy-color-pick>`](../02-elements/color-pick.md), [`<dy-date-panel>`](../02-elements/date-panel.md), [`<dy-date-pick>`](../02-elements/date-pick.md), [`<dy-date-range-panel>`](../02-elements/date-range-panel.md), [`<dy-date-range-pick>`](../02-elements/date-range-pick.md), [`<dy-drop-area>`](../02-elements/drop-area.md), [`<dy-file-pick>`](../02-elements/file-pick.md), [`<dy-form>`](../02-elements/form.md), [`<dy-input>`](../02-elements/input.md), [`<dy-pick>`](../02-elements/pick.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-pick>`](../02-elements/time-pick.md)
+  > [`<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)
 - 反馈元素
@@ -39,9 +39,9 @@ npm install duoyun-ui
 ```ts
 import { render } from '@mantou/gem';
 
-import 'duoyun-ui/elements/color-pick';
+import 'duoyun-ui/elements/color-picker';
 
-render(html`<dy-color-pick></dy-color-pick>`, document.body);
+render(html`<dy-color-picker></dy-color-picker>`, document.body);
 ```
 
 使用元素 API：

packages/duoyun-ui/docs/zh/02-elements/cascader-pick.md → packages/duoyun-ui/docs/zh/02-elements/cascader-picker.md

@@ -1,12 +1,12 @@
-# `<dy-cascader-pick>`
+# `<dy-cascader-picker>`
 
 ## Example
 
 <gbp-example
-  name="dy-cascader-pick"
+  name="dy-cascader-picker"
   props='{"placeholder": "Please choose", "multiple": true, "value": [["Option 2"]], "options": [{"label": "Option 1", "children": [{"label": "Option 1.1"}]}, {"label": "Option 2"}, {"label": "Option 3"}], "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://jspm.dev/duoyun-ui/elements/cascader-pick"></gbp-example>
+  src="https://jspm.dev/duoyun-ui/elements/cascader-picker"></gbp-example>
 
 ## API
 
-<gbp-api src="/src/elements/cascader-pick.ts"></gbp-api>
+<gbp-api src="/src/elements/cascader-picker.ts"></gbp-api>

packages/duoyun-ui/docs/zh/02-elements/color-picker.md

@@ -0,0 +1,12 @@
+# `<dy-color-picker>`
+
+## Example
+
+<gbp-example
+  name="dy-color-picker"
+  props='{"alpha": true, "value": "#e5e", "@change": "(evt) => evt.target.value = evt.detail"}'
+  src="https://jspm.dev/duoyun-ui/elements/color-picker"></gbp-example>
+
+## API
+
+<gbp-api src="/src/elements/color-picker.ts"></gbp-api>

packages/duoyun-ui/docs/en/02-elements/date-pick.md → packages/duoyun-ui/docs/zh/02-elements/date-picker.md

@@ -1,12 +1,12 @@
-# `<dy-date-pick>`
+# `<dy-date-picker>`
 
 ## Example
 
 <gbp-example
-  name="dy-date-pick"
+  name="dy-date-picker"
   props='{"value": 1644475003294, "clearable": true, "@clear": "(evt) => evt.target.value = null", "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://jspm.dev/duoyun-ui/elements/date-pick"></gbp-example>
+  src="https://jspm.dev/duoyun-ui/elements/date-picker"></gbp-example>
 
 ## API
 
-<gbp-api src="/src/elements/date-pick.ts"></gbp-api>
+<gbp-api src="/src/elements/date-picker.ts"></gbp-api>

packages/duoyun-ui/docs/en/02-elements/date-range-pick.md → packages/duoyun-ui/docs/zh/02-elements/date-range-picker.md

@@ -1,12 +1,12 @@
-# `<dy-date-range-pick>`
+# `<dy-date-range-picker>`
 
 ## Example
 
 <gbp-example
-  name="dy-date-range-pick"
+  name="dy-date-range-picker"
     props='{"value": [1644475003294, 1644575003294], "clearable": true, "@clear": "(evt) => evt.target.value = null", "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://jspm.dev/duoyun-ui/elements/date-range-pick"></gbp-example>
+  src="https://jspm.dev/duoyun-ui/elements/date-range-picker"></gbp-example>
 
 ## API
 
-<gbp-api src="/src/elements/date-range-pick.ts"></gbp-api>
+<gbp-api src="/src/elements/date-range-picker.ts"></gbp-api>

packages/duoyun-ui/docs/zh/02-elements/file-pick.md → packages/duoyun-ui/docs/zh/02-elements/file-picker.md

@@ -1,12 +1,12 @@
-# `<dy-file-pick>`
+# `<dy-file-picker>`
 
 ## Example
 
 <gbp-example
-  name="dy-file-pick"
+  name="dy-file-picker"
   props='{"style": "width: 100%; align-self: flex-start;", "multiple": true, "type": "image", "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://jspm.dev/duoyun-ui/elements/file-pick"></gbp-example>
+  src="https://jspm.dev/duoyun-ui/elements/file-picker"></gbp-example>
 
 ## API
 
-<gbp-api src="/src/elements/file-pick.ts"></gbp-api>
+<gbp-api src="/src/elements/file-picker.ts"></gbp-api>

packages/duoyun-ui/docs/zh/02-elements/image-preview.md

@@ -2,7 +2,7 @@
 
 ## Example
 
-See [`<dy-file-pick>`](./file-pick.md).
+See [`<dy-file-picker>`](./file-picker.md).
 
 ## API
 

packages/duoyun-ui/docs/en/02-elements/pick.md → packages/duoyun-ui/docs/zh/02-elements/picker.md

@@ -1,12 +1,12 @@
-# `<dy-pick>`
+# `<dy-picker>`
 
 ## Example
 
 <gbp-example
-  name="dy-pick"
+  name="dy-picker"
   props='{"value": "Option 1", "options": [{"label": "Option 1", "children": [{"label": "Option 3"}]}, {"label": "Option 2"}], "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://jspm.dev/duoyun-ui/elements/pick"></gbp-example>
+  src="https://jspm.dev/duoyun-ui/elements/picker"></gbp-example>
 
 ## API
 
-<gbp-api src="/src/elements/pick.ts"></gbp-api>
+<gbp-api src="/src/elements/picker.ts"></gbp-api>

packages/duoyun-ui/docs/zh/02-elements/time-pick.md → packages/duoyun-ui/docs/zh/02-elements/time-picker.md

@@ -1,12 +1,12 @@
-# `<dy-time-pick>`
+# `<dy-time-picker>`
 
 ## Example
 
 <gbp-example
-  name="dy-time-pick"
+  name="dy-time-picker"
   props='{"value": 1644475003294, "clearable": true, "@clear": "(evt) => evt.target.value = null", "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://jspm.dev/duoyun-ui/elements/time-pick"></gbp-example>
+  src="https://jspm.dev/duoyun-ui/elements/time-picker"></gbp-example>
 
 ## API
 
-<gbp-api src="/src/elements/time-pick.ts"></gbp-api>
+<gbp-api src="/src/elements/time-picker.ts"></gbp-api>

packages/duoyun-ui/src/elements/cascader-pick.ts → packages/duoyun-ui/src/elements/cascader-picker.ts

@@ -18,7 +18,7 @@ import { commonHandle } from '../lib/hotkeys';
 import { focusStyle } from '../lib/styles';
 
 import { ContextMenu } from './menu';
-import { BasePickerElement, pickerStyle } from './pick';
+import { BasePickerElement, pickerStyle } from './picker';
 import type { Option, DuoyunCascaderElement } from './cascader';
 
 import './use';
@@ -43,9 +43,9 @@ const style = createCSSSheet(css`
 `);
 
 /**
- * @customElement dy-cascader-pick
+ * @customElement dy-cascader-picker
  */
-@customElement('dy-cascader-pick')
+@customElement('dy-cascader-picker')
 @adoptedStyle(style)
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)

packages/duoyun-ui/src/elements/color-pick.ts → packages/duoyun-ui/src/elements/color-picker.ts

@@ -17,7 +17,7 @@ import { theme } from '../lib/theme';
 import { commonHandle } from '../lib/hotkeys';
 import { focusStyle } from '../lib/styles';
 
-import type { BasePickerElement } from './pick';
+import type { BasePickerElement } from './picker';
 import type { DuoyunPopoverElement } from './popover';
 
 import './popover';
@@ -48,9 +48,9 @@ const style = createCSSSheet(css`
 `);
 
 /**
- * @customElement dy-color-pick
+ * @customElement dy-color-picker
  */
-@customElement('dy-color-pick')
+@customElement('dy-color-picker')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 export class DuoyunColorPickElement extends GemElement implements BasePickerElement {