chore: Merge remote-tracking branch 'origin/dev' into dev-zwl

Aybrea · Mar 8, 2024 · 120ce2a · 120ce2a
2 parents 611fab2 + fb03f38
commit 120ce2a
Show file tree

Hide file tree

Showing 49 changed files with 243 additions and 107 deletions.
diff --git a/packages/varlet-cli/src/node/commands/icons.ts b/packages/varlet-cli/src/node/commands/icons.ts
@@ -1,7 +1,7 @@
 import fse from 'fs-extra'
 import sharp from 'sharp'
 import slash from 'slash'
-import chokidar, { FSWatcher } from 'chokidar'
+import chokidar from 'chokidar'
 import webfont from 'webfont'
 import logger from '../shared/logger.js'
 import { parse, resolve } from 'path'
@@ -90,9 +90,9 @@ export async function buildIcons(varletConfig: Required<VarletConfig>, io: Icons
   ])
 
   const icons: { name: string; pointCode: string }[] = glyphsData.map((i: any) => ({
-      name: i.metadata.name,
-      pointCode: i.metadata.unicode[0].charCodeAt(0).toString(16),
-    }))
+    name: i.metadata.name,
+    pointCode: i.metadata.unicode[0].charCodeAt(0).toString(16),
+  }))
 
   const iconNames = icons.map((iconName) => `  '${iconName.name}'`)
 

diff --git a/packages/varlet-ui/src/date-picker/date-picker.less b/packages/varlet-ui/src/date-picker/date-picker.less
@@ -16,6 +16,7 @@
   --date-picker-title-date-font-size: 34px;
   --date-picker-title-date-font-weight: 500;
   --date-picker-title-date-range-font-size: 20px;
+  --date-picker-title-date-justify-content: normal;
   --date-picker-body-background-color: #fff;
   --date-picker-body-height: 280px;
   --date-picker-body-padding: 0;
@@ -106,6 +107,7 @@
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       display: flex;
       align-items: center;
+      justify-content: var(--date-picker-title-date-justify-content);
       opacity: 0.6;
       transition: 0.3s var(--cubic-bezier);
 

diff --git a/packages/varlet-ui/src/date-picker/docs/en-US.md b/packages/varlet-ui/src/date-picker/docs/en-US.md
@@ -151,6 +151,7 @@ Here are the CSS variables used by the component. Styles can be customized using
 | `--date-picker-title-date-font-size` | `34px`                 |
 | `--date-picker-title-date-font-weight` | `500`                  |
 | `--date-picker-title-date-range-font-size` | `20px`                 |
+| `--date-picker-title-date-justify-content` | `normal` |
 | `--date-picker-body-padding` | '0' |
 | `--date-picker-body-background-color` | `#fff`                 |
 | `--date-picker-body-height` | `280px`                |

diff --git a/packages/varlet-ui/src/date-picker/docs/zh-CN.md b/packages/varlet-ui/src/date-picker/docs/zh-CN.md
@@ -153,6 +153,7 @@ const allowedDates = val => parseInt(val.split('-')[2], 10) % 2 === 1
 | `--date-picker-title-date-font-size` | `34px`                 |
 | `--date-picker-title-date-font-weight` | `500`                  |
 | `--date-picker-title-date-range-font-size` | `20px`                 |
+| `--date-picker-title-date-justify-content` | `normal` |
 | `--date-picker-header-arrow-filter` | `opacity(0.54)` |
 | `--date-picker-body-background-color` | `#fff`                 |
 | `--date-picker-body-height` | `280px`                |

diff --git a/packages/varlet-ui/src/hover/index.ts b/packages/varlet-ui/src/hover/index.ts
@@ -81,6 +81,10 @@ function clearStyle(element: HoverHTMLElement) {
 }
 
 function restoreStyle(element: HoverHTMLElement) {
+  if (element?._hover == null) {
+    return
+  }
+
   clearStyle(element)
   updateStyle(element, element._hover.rawStyle)
 }

diff --git a/packages/varlet-ui/src/image-preview/docs/en-US.md b/packages/varlet-ui/src/image-preview/docs/en-US.md
@@ -251,6 +251,7 @@ const actions = [
 | `initial-index`   | Index from which the image preview starts | _string \| number_ | `0`     |
 | `zoom`       | Double-click to zoom in | _string \| number_ | `2` |
 | `closeable`  | Whether to show the close button | _boolean_ | `false` |
+| `close-on-key-escape` | Whether to support keyboard ESC to close the image-preview | _boolean_ | `true`  |
 | `loop`       | Whether to open loop playback | _boolean_ | `true` |
 | `indicator`  | Whether to show paging | _boolean_ | `true` |
 | `lock-scroll` | Lock scroll | _boolean_ | `true` |
@@ -267,6 +268,7 @@ const actions = [
 | `close`  | Triggered when Image-Preview is off | `-` |
 | `closed` | Triggered when the animation that closes the image-preview ends | `-` |
 | `long-press` | The callback function when long pressing an image, the callback parameter is the current index | `index: number` Image indexing | 
+| `key-escape` | Triggered when click keyboard ESC  | `-` |
 
 ### Methods
 
@@ -297,6 +299,7 @@ const actions = [
 | `initialIndex`   | Index from which the image preview starts | _string \| number_ | `0`     |
 | `zoom`       | Double-click to zoom in | _string \| number_ | `2` |
 | `closeable`  | Whether to show the close button | _boolean_ | `false` |
+| `closeOnKeyEscape` | Whether to support keyboard ESC to close the image-preview | _boolean_ | `true` |
 | `loop`       | Whether to open loop playback | _boolean_ | `true` |
 | `indicator`  | Whether to show paging | _boolean_ | `true` |
 | `lockScroll` | Lock scroll | _boolean_ | `true` |
@@ -307,6 +310,7 @@ const actions = [
 | `onClose`  | Callback when image-preview is closed |  _() => void_ |  `-` |
 | `onClosed` | Callback at the end of the animation that closes the image-preview |  _() => void_ | `-` |
 | `onLongPress` | The callback function when long pressing an image, the callback parameter is the current index | _(index: number) => void_  |  `-` |
+| `onKeyEscape` | Triggered when click keyboard ESC | _() => void_ | `-` |
 
 ### Style Variables
 Here are the CSS variables used by the component. Styles can be customized using [StyleProvider](#/en-US/style-provider).

diff --git a/packages/varlet-ui/src/image-preview/docs/zh-CN.md b/packages/varlet-ui/src/image-preview/docs/zh-CN.md
@@ -250,6 +250,7 @@ const actions = [
 | `initial-index` | 图片预览起始的索引 | _string \| number_ | `0` |
 | `zoom`       | 双击放大倍数 | _string \| number_ | `2` |
 | `closeable`  | 是否显示关闭按钮 | _boolean_ | `false` |
+| `close-on-key-escape` | 是否支持键盘 ESC 图片预览 | _boolean_ | `true`  |
 | `loop`       | 是否开启循环播放 | _boolean_ | `true` |
 | `indicator`  | 是否显示分页 | _boolean_ | `true` |
 | `lock-scroll` | 锁定滚动 | _boolean_ | `true` |
@@ -266,6 +267,7 @@ const actions = [
 | `close`  | 关闭 image-preview 时触发 | `-` |
 | `closed` | 关闭 image-preview 动画结束时触发 | `-` |
 | `long-press` | 长按图片时的回调函数，回调参数为当前索引 | `index: number` 图片索引 | 
+| `key-escape` | 点击键盘 ESC 时触发 | `-` |
 
 ### 方法
 
@@ -296,6 +298,7 @@ const actions = [
 | `initialIndex` | 图片预览起始的索引 | _string \| number_ | `0` |
 | `zoom`       | 双击放大倍数  | _string \| number_ | `2` |
 | `closeable`  | 是否显示关闭按钮 | _boolean_ | `false` |
+| `closeOnKeyEscape` | 是否支持键盘 ESC 关闭图片预览 | _boolean_ | `true` |
 | `loop`       | 是否开启循环播放 | _boolean_ | `true` |
 | `indicator`  | 是否显示分页 | _boolean_ | `true` |
 | `lockScroll` | 锁定滚动 | _boolean_ | `true` |
@@ -306,6 +309,7 @@ const actions = [
 | `onClose`  | image-preview 时关闭时候的回调 |  _() => void_ |  `-` |
 | `onClosed` | image-preview 关闭动画结束时候的回调 |  _() => void_ | `-` |
 | `onLongPress` | 长按图片时的回调函数，回调参数为当前索引 | _(index: number) => void_  |  `-` |
+| `onKeyEscape` | 点击键盘 ESC 时触发 | _() => void_ | `-` |
 
 ### 样式变量
 以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider) 进行样式定制。

diff --git a/packages/varlet-ui/src/image-preview/index.ts b/packages/varlet-ui/src/image-preview/index.ts
@@ -12,18 +12,17 @@ interface ImagePreviewOptions {
   lockScroll?: boolean
   indicator?: boolean
   closeable?: boolean
+  closeOnKeyEscape?: boolean
   imagePreventDefault?: boolean
   onOpen?: () => void
   onOpened?: () => void
   onClose?: () => void
   onClosed?: () => void
   onChange?: (index: number) => void
   onLongPress?: (index: number) => void
+  onKeyEscape?: () => void
   // internal
   teleport?: TeleportProps['to']
-  // internal for esc
-  closeOnKeyEscape?: boolean
-  onKeyEscape?: () => void
 }
 
 let singletonOptions: ImagePreviewOptions | null

diff --git a/packages/varlet-ui/src/image-preview/props.ts b/packages/varlet-ui/src/image-preview/props.ts
@@ -25,14 +25,13 @@ export const props = {
   ...pickProps(popupProps, [
     'lockScroll',
     'teleport',
+    'closeOnKeyEscape',
     'onOpen',
     'onClose',
     'onOpened',
     'onClosed',
+    'onKeyEscape',
     // internal for function call closes the dialog
     'onRouteChange',
-    // internal for esc
-    'closeOnKeyEscape',
-    'onKeyEscape',
   ]),
 }
diff --git a/packages/varlet-ui/src/menu/docs/en-US.md b/packages/varlet-ui/src/menu/docs/en-US.md
@@ -236,6 +236,7 @@ it is recommended to wrap a `block` element.
 | `default-style` | Whether to enable default styles                                                                                             | _boolean_ | `true`            |
 | `popover-class` | Class of the popover                                                    | _string_             | `-`            |
 | `close-on-click-reference` | Whether to close the menu when clicking the reference element | _boolean_ | `false` |
+| `close-on-key-escape` | Whether to support keyboard ESC to close the menu | _boolean_ | `true`  |
 
 ### Placement
 

diff --git a/packages/varlet-ui/src/menu/docs/zh-CN.md b/packages/varlet-ui/src/menu/docs/zh-CN.md
@@ -232,6 +232,7 @@ Menu 是一个 `inline-block` 元素，通过默认插槽点击时显示菜单
 | `default-style` | 是否启用默认样式                                                    | _boolean_             | `true`            |
 | `popover-class` | 弹出层的 class                                                    | _string_             | `-`            |
 | `close-on-click-reference` | 是否在点击菜单触发元素后关闭菜单 | _boolean_ | `false` |
+| `close-on-key-escape` | 是否支持键盘 ESC 菜单 | _boolean_ | `true`  |
 
 ### Placement
 

diff --git a/packages/varlet-ui/src/menu/props.ts b/packages/varlet-ui/src/menu/props.ts
@@ -44,16 +44,14 @@ export const props = {
   },
   popoverClass: String,
   closeOnClickReference: Boolean,
+  closeOnKeyEscape: {
+    type: Boolean,
+    default: true,
+  },
   onOpen: defineListenerProp<() => void>(),
   onOpened: defineListenerProp<() => void>(),
   onClose: defineListenerProp<() => void>(),
   onClosed: defineListenerProp<() => void>(),
   onClickOutside: defineListenerProp<(event: Event) => void>(),
   'onUpdate:show': defineListenerProp<(show: boolean) => void>(),
-
-  // internal for esc
-  closeOnKeyEscape: {
-    type: Boolean,
-    default: true,
-  },
 }
diff --git a/packages/varlet-ui/src/menu/usePopover.ts b/packages/varlet-ui/src/menu/usePopover.ts
@@ -46,14 +46,12 @@ export interface UsePopoverOptions {
   offsetY: string | number
   reference?: string
   closeOnClickReference?: boolean
+  closeOnKeyEscape?: boolean
   onOpen?: ListenerProp<() => void>
   onClose?: ListenerProp<() => void>
   onClosed?: ListenerProp<() => void>
   onClickOutside?: ListenerProp<(event: Event) => void>
   'onUpdate:show'?: ListenerProp<(show: boolean) => void>
-
-  // internal for esc
-  closeOnKeyEscape: boolean
 }
 
 export function usePopover(options: UsePopoverOptions) {

diff --git a/packages/varlet-ui/src/overlay/docs/en-US.md b/packages/varlet-ui/src/overlay/docs/en-US.md
@@ -78,12 +78,14 @@ const show = ref(false)
 | `v-model:show` | Whether to display the Overlay                                                                                  | _boolean_             | `false` |
 | `lock-scroll`  | Whether to disable scrolling penetration, scrolling the Overlay when disabled will not cause the body to scroll | _boolean_             | `true`  |
 | `teleport`     | The location of the Overlay to mount                                                                            | _TeleportProps['to'] \| false_ | `-`     |
+| `close-on-key-escape` | Whether to support keyboard ESC to close the overlay | _boolean_ | `true`  |
 
 ### Events
 
 | Event   | Description                         | Arguments |
 |---------|-------------------------------------|-----------|
 | `click` | Triggered when clicking on overlay | `-`       |
+| `key-escape` | Triggered when click keyboard ESC  | `-` |
 
 ### Slots
 

diff --git a/packages/varlet-ui/src/overlay/docs/zh-CN.md b/packages/varlet-ui/src/overlay/docs/zh-CN.md
@@ -79,12 +79,14 @@ const show = ref(false)
 | `v-model:show` | 是否显示遮罩层                       | _boolean_             | `false` |
 | `lock-scroll`  | 是否禁止滚动穿透，禁止时滚动遮罩层不会引发 body 的滚动 | _boolean_             | `true`  |
 | `teleport`     | 遮罩层挂载的位置                      | _TeleportProps['to'] \| false_ | `-`     |
+| `close-on-key-escape` | 是否支持键盘 ESC 关闭遮罩层 | _boolean_ | `true`  |
 
 ### 事件
 
 | 事件名     | 说明       | 参数  |
 |---------|----------|-----|
 | `click` | 点击遮罩层时触发 | `-` |
+| `key-escape` | 点击键盘 ESC 时触发 | `-` |
 
 ### 插槽
 

diff --git a/packages/varlet-ui/src/overlay/props.ts b/packages/varlet-ui/src/overlay/props.ts
@@ -8,13 +8,11 @@ export const props = {
     default: true,
   },
   teleport: [String, Object, Boolean] as PropType<TeleportProps['to'] | false>,
-  onClick: defineListenerProp<() => void>(),
-  'onUpdate:show': defineListenerProp<(show: boolean) => void>(),
-
-  // internal for esc
-  onKeyEscape: defineListenerProp<() => void>(),
   closeOnKeyEscape: {
     type: Boolean,
     default: true,
   },
+  onClick: defineListenerProp<() => void>(),
+  onKeyEscape: defineListenerProp<() => void>(),
+  'onUpdate:show': defineListenerProp<(show: boolean) => void>(),
 }
diff --git a/packages/varlet-ui/src/picker/docs/en-US.md b/packages/varlet-ui/src/picker/docs/en-US.md
@@ -451,6 +451,7 @@ function handleChange(values, indexes) {
 | `cancel-button-text` | Cancel button text | _string_ | `Cancel` |
 | `confirm-button-text-color` | Confirm button text color | _string_ | `-` |
 | `cancel-button-text-color` | Cancel button text color | _string_ | `-` |
+| `close-on-key-escape` | Whether to support keyboard ESC to close the picker | _boolean_ | `true`  |
 
 ### Picker Options
 
@@ -469,7 +470,8 @@ function handleChange(values, indexes) {
 | `cancelButtonText`       | Cancel button text | _string_ | `Cancel` |
 | `confirmButtonTextColor` | Confirm button text color | _string_ | `-` |
 | `cancelButtonTextColor`  | Cancel button text color | _string_ | `-` |
-| `closeOnClickOverlay`    | Whether to click the overlay to close the picker       | _boolean_ | `true`       |
+| `closeOnClickOverlay`    | Whether to click the overlay to close the picker  | _boolean_ |  `true`  |
+| `closeOnkeyEscape`       | Whether to support keyboard ESC to close the picker | _boolean_ |`true`  |
 | `safeArea`               | Whether to enable bottom safety zone adaptation      | _boolean_             | `false`  |
 | `onClickOverlay`         | Click overlay callback  | _() => void_   | `-`  |
 | `onOpen`                 | Popup open callback | _() => void_ | `-` |
@@ -479,6 +481,7 @@ function handleChange(values, indexes) {
 | `onChange`               | Pick callbacks when content changes | _(values: (string \| number)[], indexes: number[], options: PickerColumnOption[]) => void_ | `() => void` |
 | `onConfirm`              | Pick callbacks when confirm | _(values: (string \| number)[], indexes: number[], options: PickerColumnOption[]) => void_ | `() => void` |
 | `onCancel`               | Pick callbacks when cancel | _(values: (string \| number)[], indexes: number[], options: PickerColumnOption[]) => void_ | `() => void` |
+| `onKeyEscape`            | Triggered when click keyboard ESC | _() => void_ | `-` |
 
 ### PickerColumnOption
 
@@ -504,6 +507,7 @@ function handleChange(values, indexes) {
 | `change` | Triggered when the pick content changes | `values: (string \| number)[]` Selected Values <br> `indexes: number[]` Selected indexes <br> `options: PickerColumnOption[]` Selected options |
 | `cancel` | Triggered when you click the cancel button | `values: (string \| number)[]` Selected Values <br> `indexes: number[]` Selected indexes <br> `options: PickerColumnOption[]` Selected options |
 | `confirm` | Triggered when you click the confirm button | `values: (string \| number)[]` Selected Values <br> `indexes: number[]` Selected indexes <br> `options: PickerColumnOption[]` Selected options |
+| `key-escape` | Triggered when click keyboard ESC  | `-` |
 
 ### Slots
 

diff --git a/packages/varlet-ui/src/picker/docs/zh-CN.md b/packages/varlet-ui/src/picker/docs/zh-CN.md
@@ -451,6 +451,7 @@ function handleChange(values, indexes) {
 | `cancel-button-text` | 取消按钮文字 | _string_ | `取消` |
 | `confirm-button-text-color` | 确认按钮文字颜色 | _string_ | `-` |
 | `cancel-button-text-color` | 取消按钮文字颜色 | _string_ | `-` |
+| `close-on-key-escape` | 是否支持键盘 ESC 关闭选择器 | _boolean_ | `true` |
 
 ### Picker Options
 
@@ -470,6 +471,7 @@ function handleChange(values, indexes) {
 | `confirmButtonTextColor` | 确认按钮文字颜色 | _string_ | `-` |
 | `cancelButtonTextColor`  | 取消按钮文字颜色 | _string_ | `-` |
 | `closeOnClickOverlay`    | 是否点击遮罩层关闭弹出层 | _boolean_ | `true` |
+| `closeOnKeyEscape`       | 是否支持键盘 ESC 关闭选择器 | _boolean_ | `true` |
 | `safeArea`               | 是否开启底部安全区适配      | _boolean_             | `false`  |
 | `onClickOverlay`         | 遮罩层点击回调 | _() => void_ | `-` |
 | `onOpen`                 | 弹出层开启回调 | _() => void_ | `-` |
@@ -479,6 +481,7 @@ function handleChange(values, indexes) {
 | `onChange`               | 选择内容变化时回调 | _(values: (string \| number)[], indexes: number[], options: PickerColumnOption[]) => void_ | `() => void` |
 | `onConfirm`              | 点击确认按钮时触发 | _(values: (string \| number)[], indexes: number[], options: PickerColumnOption[]) => void_ | `() => void` |
 | `onCancel`               | 点击取消按钮时触发 | _(values: (string \| number)[], indexes: number[], options: PickerColumnOption[]) => void_ | `() => void` |
+| `onKeyEscape`            | 点击键盘 ESC 时触发 | _() => void_ | `-` |
 
 ### PickerColumnOption
 
@@ -504,6 +507,7 @@ function handleChange(values, indexes) {
 | `change` | 选择内容变化时触发 | `values: (string \| number)[]` 选择的值列表 <br> `indexes: number[]` 选择的下标列表 <br> `options: PickerColumnOption[]` 选择的选项对象列表 |
 | `cancel` | 点击取消按钮时触发 | `values: (string \| number)[]` 选择的值列表 <br> `indexes: number[]` 选择的下标列表 <br> `options: PickerColumnOption[]` 选择的选项对象列表 |
 | `confirm` | 点击确认按钮时触发 | `values: (string \| number)[]` 选择的值列表 <br> `indexes: number[]` 选择的下标列表 <br> `options: PickerColumnOption[]` 选择的选项对象列表 |
+| `key-escape` | 点击键盘 ESC 时触发 | `-` |
 
 ### 插槽
 

diff --git a/packages/varlet-ui/src/picker/index.ts b/packages/varlet-ui/src/picker/index.ts
@@ -23,6 +23,7 @@ interface PickerOptions {
   cancelButtonTextColor?: string
   safeArea?: boolean
   closeOnClickOverlay?: boolean
+  closeOnKeyEscape?: boolean
   teleport?: TeleportProps['to']
   dynamic?: boolean
   onClickOverlay?: () => void
@@ -33,10 +34,7 @@ interface PickerOptions {
   onChange?: (values: (string | number)[], indexes: number[], options: PickerColumnOption[]) => void
   onConfirm?: (values: (string | number)[], indexes: number[], options: PickerColumnOption[]) => void
   onCancel?: (values: (string | number)[], indexes: number[], options: PickerColumnOption[]) => void
-
-  // internal for esc
   onKeyEscape?: () => void
-  closeOnKeyEscape?: boolean
 }
 
 type PickerResolvedState = 'confirm' | 'cancel' | 'close'

diff --git a/packages/varlet-ui/src/picker/props.ts b/packages/varlet-ui/src/picker/props.ts
@@ -65,6 +65,7 @@ export const props = {
     'show',
     'onUpdate:show',
     'closeOnClickOverlay',
+    'closeOnKeyEscape',
     'teleport',
     'safeArea',
     'onOpen',
@@ -73,8 +74,6 @@ export const props = {
     'onClosed',
     'onClickOverlay',
     'onRouteChange',
-    // internal for esc
     'onKeyEscape',
-    'closeOnKeyEscape',
   ]),
 }
diff --git a/packages/varlet-ui/src/popup/docs/en-US.md b/packages/varlet-ui/src/popup/docs/en-US.md
@@ -200,6 +200,7 @@ const event = ref(false)
 | `transition` | Transition animation name                                                                                     | _string_ | `-` |
 | `lock-scroll` | Whether to disable scrolling penetration, scrolling the Popup when disabled will not cause the body to scroll | _boolean_ | `true` |
 | `close-on-click-overlay` | Whether to click the overlay to close the Popup                                                               | _boolean_ | `true` |
+| `close-on-key-escape` | Whether to support keyboard ESC to close the popup | _boolean_ | `true`  |
 | `teleport` | The location of the Popup to mount                                                                            | _TeleportProps['to'] \| false_ | `body` |
 | `safe-area`              | Whether to enable bottom safety zone adaptation	                                                              | _boolean_             | `false`  |
 | `safe-area-top`          | Whether to enable top safety zone adaptation	                                                                 | _boolean_             | `false`  |
@@ -213,6 +214,7 @@ const event = ref(false)
 | `close` | Triggered when the Popup is close | `-` |
 | `closed` | Triggered when the Popup close-animation ends | `-` |
 | `click-overlay` | Triggered when you click on overlay | `-` |
+| `key-escape` | Triggered when click keyboard ESC  | `-` |
 
 ### Slots