From ac28f9ff6094ee198bca3b2f1d46bc9548de378e Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Fri, 12 Mar 2021 11:32:47 +0800
Subject: [PATCH] =?UTF-8?q?fix(cli):=20=E4=BF=AE=E6=94=B9=E4=BA=86?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E7=AB=99=E7=82=B9=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

affects: @varlet/cli, @varlet/ui
---
 packages/varlet-cli/site/pc/App.vue           |   7 +-
 packages/varlet-cli/site/site.config.json     |  14 +-
 packages/varlet-ui/src/app-bar/appBar.less    |   2 +-
 packages/varlet-ui/src/dialog/docs/en-US.md   | 280 ++++++++++++++++++
 .../varlet-ui/src/dialog/example/index.vue    |  53 ++--
 .../src/dialog/example/locale/en-US.ts        |  13 +
 .../src/dialog/example/locale/index.ts        |  23 ++
 .../src/dialog/example/locale/zh-CN.ts        |  13 +
 packages/varlet-ui/src/locale/en-US.ts        |   6 +-
 packages/varlet-ui/src/menu/Menu.vue          |   8 +-
 packages/varlet-ui/varlet.config.js           |  14 +-
 11 files changed, 384 insertions(+), 49 deletions(-)
 create mode 100644 packages/varlet-ui/src/dialog/example/locale/en-US.ts
 create mode 100644 packages/varlet-ui/src/dialog/example/locale/index.ts
 create mode 100644 packages/varlet-ui/src/dialog/example/locale/zh-CN.ts

diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
index c1ce235cd42..983bd2e37be 100644
--- a/packages/varlet-cli/site/pc/App.vue
+++ b/packages/varlet-cli/site/pc/App.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="varlet-site">
-    <div class="varlet-site-header">
+    <div class="varlet-site-header var-elevation--2">
       <span class="varlet-site-header__logo">
         <img :src="header.logo" alt="" />
         <span>{{ title }}</span>
       </span>
       <span class="varlet-site-header__nav">
-        <var-menu :offset-y="36" v-model:show="offsetY">
+        <var-menu :offset-y="38" :offset-x="-20" v-model:show="offsetY">
           <var-icon name="translate" size="26px" color="#ffffff" @click="offsetY = true"></var-icon>
           <template #menu>
             <div class="language-list">
@@ -173,6 +173,7 @@ export default defineComponent({
 
 <style lang="less">
 @import '~@varlet/ui/es/styles/var';
+@import '~@varlet/ui/es/styles/elevation';
 
 body {
   min-width: 1200px;
@@ -239,7 +240,6 @@ iframe {
       justify-content: space-between;
       user-select: none;
       position: relative;
-      box-shadow: 0 6px 8px #ddd;
       z-index: 2;
 
       &__logo {
@@ -360,6 +360,7 @@ iframe {
     }
 
     &-doc {
+      flex: 1 0 0;
       min-width: 500px;
       padding: 0 30px;
       overflow-y: auto;
diff --git a/packages/varlet-cli/site/site.config.json b/packages/varlet-cli/site/site.config.json
index e6c053fbc16..6d7a44ef041 100644
--- a/packages/varlet-cli/site/site.config.json
+++ b/packages/varlet-cli/site/site.config.json
@@ -59,13 +59,6 @@
         },
         "doc": "skeleton"
       },
-      {
-        "text": {
-          "zh-CN": "AppBar 导航栏",
-          "en-US": "AppBar"
-        },
-        "doc": "app-bar"
-      },
       {
         "text": {
           "zh-CN": "Button 按钮",
@@ -310,6 +303,13 @@
           "en-US": "Form"
         },
         "doc": "form"
+      },
+      {
+        "text": {
+          "zh-CN": "AppBar 导航栏",
+          "en-US": "AppBar"
+        },
+        "doc": "app-bar"
       }
     ]
   },
diff --git a/packages/varlet-ui/src/app-bar/appBar.less b/packages/varlet-ui/src/app-bar/appBar.less
index 301e726b586..d2412d7f5bf 100644
--- a/packages/varlet-ui/src/app-bar/appBar.less
+++ b/packages/varlet-ui/src/app-bar/appBar.less
@@ -1,7 +1,7 @@
 .var-app-bar {
   height: 50px;
   display: flex;
-  justify-content: start;
+  justify-content: flex-start;
   align-items: center;
 
   &__title {
diff --git a/packages/varlet-ui/src/dialog/docs/en-US.md b/packages/varlet-ui/src/dialog/docs/en-US.md
index e69de29bb2d..e7cb1b3d064 100644
--- a/packages/varlet-ui/src/dialog/docs/en-US.md
+++ b/packages/varlet-ui/src/dialog/docs/en-US.md
@@ -0,0 +1,280 @@
+# Dialog
+
+### Intro
+```html
+A dialog pops up to display the content and handle the user interaction
+Dialog have provided functional and component usage, and there is no essential difference between the two usage effects and parameters
+```
+
+### Install
+
+```js
+import { createApp } from 'vue';
+import { Dialog } from '@varlet/ui';
+
+createApp().use(Dialog)
+```
+
+### Functional
+#### Basic Use
+
+```js
+Dialog('Don\'t Wanna See No Blood, Don\'t Be A Macho Man')
+```
+
+#### Modify Title
+
+```js
+Dialog({
+  title: 'Beat It',
+  message: 'Don\'t Wanna See No Blood, Don\'t Be A Macho Man',
+})
+```
+
+#### Hide Button
+
+```js
+Dialog({
+  message: 'Don\'t Wanna See No Blood, Don\'t Be A Macho Man',
+  confirmButton: false,
+  cancelButton: false,
+})
+```
+
+#### Handling user behavior
+
+```html
+You can get user behavior from the method's return value, which is a Promise.
+Includes confirm, cancel, and close(click the overlay to trigger closure).
+```
+
+```js
+import { Snackbar } from '@varlet/ui'
+
+const actions = {
+  confirm: () => Snackbar.success('confirm'),
+  cancel: () => Snackbar.error('cancel'),
+  close: () => Snackbar.info('close'),
+}
+
+actions[await Dialog('Don\'t Wanna See No Blood, Don\'t Be A Macho Man')]()
+```
+
+### Asynchronous closing
+
+```html
+You can use onBeforeClose to intercept before closing, and you can get the user behavior from the parameters and the callback function that triggers the shutdown
+```
+
+```js
+import { Snackbar } from '@varlet/ui'
+
+const actions = {
+  confirm: () => Snackbar.success('confirm'),
+  cancel: () => Snackbar.error('cancel'),
+  close: () => Snackbar.info('close'),
+}
+
+const onBeforeClose = (action, done) => {
+  Snackbar.loading('Asynchronous shutdown in progress')
+  
+  setTimeout(() => {
+    actions[action]()
+    done()
+  }, 1000)
+}
+
+Dialog({
+  message: 'Don\'t Wanna See No Blood, Don\'t Be A Macho Man',
+  onBeforeClose
+})
+```
+
+### Component Call
+
+#### Basic Use
+
+```html
+<var-button block @click="show = true">Basic Use</var-button>
+<var-dialog
+  title="Beat It"
+  message="Don't Wanna See No Blood, Don't Be A Macho Man"
+  v-model:show="show"
+  @confirm="() => Snackbar.success('confirm')"
+  @cancel="() => Snackbar.error('cancel')"
+  @closed="() => Snackbar.info('closed')"
+/>
+```
+
+```js
+import { Snackbar } from '@varlet/ui'
+
+export default {
+  setup() {
+    const show = ref(false)
+
+    return {
+      show,
+      Snackbar,
+    }
+  }
+}
+```
+
+#### Asynchronous closing
+
+```html
+<var-button block @click="show = true">Asynchronous closing</var-button>
+<var-dialog
+  title="Beat It"
+  message="Don't Wanna See No Blood, Don't Be A Macho Man"
+  v-model:show="show"
+  @before-close="onBeforeClose"
+/>
+```
+
+```js
+import { Snackbar } from '@varlet/ui'
+
+const actions = {
+  confirm: () => Snackbar.success('confirm'),
+  cancel: () => Snackbar.error('cancel'),
+  close: () => Snackbar.info('close'),
+}
+
+export default {
+  setup() {
+    const show = ref(false)
+
+    const onBeforeClose = (action, done) => {
+      Snackbar.loading('Asynchronous shutdown in progress')
+
+      setTimeout(() => {
+        actions[action]()
+        done()
+      }, 1000)
+    }
+
+    return {
+      show,
+      Snackbar,
+      onBeforeClose,
+    }
+  }
+}
+```
+
+#### Custom Slots
+
+```html
+<var-button block @click="show = true">Custom Slots</var-button>
+<var-dialog v-model:show="show">
+  <template #title>
+    <var-icon name="information" color="#2979ff" />
+  </template>
+
+  <var-cell>Don't Wanna See No Blood, Don't Be A Macho Man</var-cell>
+  <var-cell>Don't Wanna See No Blood, Don't Be A Macho Man</var-cell>
+  <var-cell>Don't Wanna See No Blood, Don't Be A Macho Man</var-cell>
+</var-dialog>
+```
+
+```js
+export default {
+  setup() {
+    const show = ref(false)
+
+    return { show }
+  }
+}
+```
+
+## API
+
+### Props
+
+| Prop | Description | Type | Default | 
+| --- | --- | --- | --- | 
+| `v-model:show` | Whether to display a Dialog | _boolean_ | `false` |
+| `title` | Dialog title | _string_ | `Hint` |
+| `message` | Dialog message content | _string_ | `-` |
+| `message-align` | Dialog message content text alignment, optional values `center`, `left`, `right` | _string_ | `left` |
+| `confirm-button` | Whether to display the confirm button | _boolean_ | `true` |
+| `cancel-button` | Whether to display the cancel button | _boolean_ | `true` |
+| `confirm-button-text` | Confirm button text | _string_ | `Confirm` |
+| `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_ | `-` |
+| `confirm-button-color` | Confirm button background color | _string_ | `-` |
+| `cancel-button-color` | Cancel button background color | _string_ | `-` |
+| `overlay` | Whether to display the overlay | _boolean_ | `true` |  
+| `overlay-class` | Custom overlay class | _string_ | `-` |
+| `overlay-style` | Custom overlay style | _string_ | `-` |
+| `lock-scroll` | Whether to disable scrolling penetration, scrolling the Dialog when disabled will not cause the body to scroll | _boolean_ | `true` |
+| `close-on-click-overlay` | Whether to click the overlay to close the Dialog | _boolean_ | `true` | 
+| `teleport` | The location of the Dialog to mount | _string_ | `body` |
+
+### Events
+
+| Event | Description | Arguments |
+| --- | --- | --- |
+| `open` | Triggered when the Dialog is open | `-` |
+| `opened` | Triggered when the Dialog open-animation ends | `-` |
+| `before-close` | Triggering before the Dialog closes prevents closure | `action: confirm \| cancel \| close, done: Function` |
+| `close` | Triggered when the Dialog is close | `-` |
+| `closed` | Triggered when the Dialog close-animation ends | `-` |
+| `confirm` | Trigger on confirm | `-` |
+| `cancel` | Trigger on cancel | `-` |
+| `click-overlay` | Triggered when you click on overlay | `-` |
+
+### Dialog Options
+#### Options passed in for a functional call
+
+| Prop | Description | Type | Default | 
+| --- | --- | --- | --- | 
+| `title` | Dialog title | _string_ | `Hint` |
+| `message` | Dialog message content | _string_ | `-` |
+| `messageAlign` | Dialog message content text alignment, optional values `center`, `left`, `right` | _string_ | `left` |
+| `confirmButton` | Whether to display the confirm button | _boolean_ | `true` |
+| `cancelButton` | Whether to display the cancel button | _boolean_ | `true` |
+| `confirmButtonText` | Confirm button text | _string_ | `确认` |
+| `cancelButtonText` | Cancel button text | _string_ | `取消` |
+| `confirmButtonTextColor` | Confirm button text color | _string_ | `-` |
+| `cancelButtonTextColor` | Cancel button text color | _string_ | `-` |
+| `confirmButtonColor` | Confirm button background color | _string_ | `-` |
+| `cancelButtonColor` | Cancel button background color | _string_ | `-` |
+| `overlay` | Whether to display the overlay | _boolean_ | `true` |  
+| `overlayClass` | Custom overlay class | _string_ | `-` |
+| `overlayStyle` | Custom overlay style | _string_ | `-` |
+| `lockScroll` | Whether to disable scrolling penetration, scrolling the Dialog when disabled will not cause the body to scroll | _boolean_ | `true` |
+| `closeOnClickOverlay` | Whether to click the overlay to close the Dialog | _boolean_ | `true` |
+| `onOpen` | Dialog open callback | _() => void_ | `-` |
+| `onOpened` | Dialog open-animation ends callback  | _() => void_ | `-` |
+| `onBeforeClose` | Callbacks prevent closure before the Dialog closes | _(action: confirm \| cancel \| close, done: Function) => void_ | `-` |
+| `onClose` | Dialog close callback | _() => void_ | `-` |
+| `onClosed` | Dialog close-animation ends callback | _() => void_ | `-` |
+| `onConfirm` | Confirm callback | _() => void_ | `-` |
+| `onCancel` | Cancel callback | _() => void_ | `-` |
+| `onClickOverlay` | Click overlay callback | _() => void_ | `-` |
+
+### Slots
+
+| Slot | Description | Arguments |
+| --- | --- | --- |
+| `default` | Dialog content message | `-` |
+| `title` | Dialog title | `-` |
+
+### Theme Variables
+#### The following LESS variables can be overridden at build time to modify the theme style
+
+| Variable | Default |
+| --- | --- |
+| `@dialog-width` | `280px` |
+| `@dialog-padding` | `20px` |
+| `@dialog-border-radius` | `2px` |
+| `@dialog-message-color` | `#888` |
+| `@dialog-message-padding` | `12px 0` |
+| `@dialog-message-line-height` | `24px` |
+| `@dialog-button-margin-left` | `6px` |
+| `@dialog-confirm-button-color` | `@color-primary` |
+| `@dialog-cancel-button-color` | `@color-primary` |
\ No newline at end of file
diff --git a/packages/varlet-ui/src/dialog/example/index.vue b/packages/varlet-ui/src/dialog/example/index.vue
index 9f15d945e56..76fd0b4f5e9 100644
--- a/packages/varlet-ui/src/dialog/example/index.vue
+++ b/packages/varlet-ui/src/dialog/example/index.vue
@@ -1,34 +1,34 @@
 <template>
-  <app-type>函数调用</app-type>
-  <var-button block @click="createBasic">基本使用</var-button>
-  <var-button block @click="modifyTitle">修改标题</var-button>
-  <var-button block @click="hideButton">隐藏按钮</var-button>
-  <var-button block @click="createAction">处理用户行为</var-button>
-  <var-button block @click="asyncClose">异步关闭</var-button>
-
-  <app-type>组件调用</app-type>
-  <var-button block @click="show = true">基本使用</var-button>
+  <app-type>{{ pack.functionCall }}</app-type>
+  <var-button block @click="createBasic">{{ pack.basicUse }}</var-button>
+  <var-button block @click="modifyTitle">{{ pack.modifyTitle }}</var-button>
+  <var-button block @click="hideButton">{{ pack.hideButton }}</var-button>
+  <var-button block @click="createAction">{{ pack.handleUserBehavior }}</var-button>
+  <var-button block @click="asyncClose">{{ pack.asyncClose }}</var-button>
+
+  <app-type>{{ pack.componentCall }}</app-type>
+  <var-button block @click="show = true">{{ pack.basicUse }}</var-button>
   <var-dialog
     v-model:show="show"
-    title="兰亭序"
-    message="兰亭临帖 行书如行云流水"
+    :title="pack.title"
+    :message="pack.message"
     @confirm="() => Snackbar.success('confirm')"
     @cancel="() => Snackbar.error('cancel')"
     @closed="() => Snackbar.info('closed')"
   />
 
-  <var-button block @click="show1 = true">异步关闭</var-button>
-  <var-dialog v-model:show="show1" title="兰亭序" message="兰亭临帖 行书如行云流水" @before-close="onBeforeClose" />
+  <var-button block @click="show1 = true">{{ pack.asyncClose }}</var-button>
+  <var-dialog v-model:show="show1" :title="pack.title" :message="pack.message" @before-close="onBeforeClose" />
 
-  <var-button block @click="show2 = true">自定义插槽</var-button>
+  <var-button block @click="show2 = true">{{ pack.customSlots }}</var-button>
   <var-dialog v-model:show="show2">
     <template #title>
       <var-icon name="information" color="#2979ff" />
     </template>
 
-    <var-cell>兰亭临帖 行书如行云流水</var-cell>
-    <var-cell>兰亭临帖 行书如行云流水</var-cell>
-    <var-cell>兰亭临帖 行书如行云流水</var-cell>
+    <var-cell>{{ pack.message }}</var-cell>
+    <var-cell>{{ pack.message }}</var-cell>
+    <var-cell>{{ pack.message }}</var-cell>
   </var-dialog>
 </template>
 
@@ -40,6 +40,8 @@ import Snackbar from '../../snackbar'
 import Cell from '../../cell'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import { ref } from 'vue'
+import { pack, use } from './locale'
+import { watchLang } from '../../utils/components'
 
 export default {
   name: 'DialogExample',
@@ -62,27 +64,27 @@ export default {
       close: () => Snackbar.info('close'),
     }
 
-    const createBasic = () => Dialog('兰亭临帖 行书如行云流水')
+    const createBasic = () => Dialog(pack.value.message)
 
-    const createAction = async () => actions[await Dialog('兰亭临帖 行书如行云流水')]()
+    const createAction = async () => actions[await Dialog(pack.value.message)]()
 
     const modifyTitle = () => {
       Dialog({
-        title: '兰亭序',
-        message: '兰亭临帖 行书如行云流水',
+        title: pack.value.title,
+        message: pack.value.message,
       })
     }
 
     const hideButton = () => {
       Dialog({
-        message: '兰亭临帖 行书如行云流水',
+        message: pack.value.message,
         confirmButton: false,
         cancelButton: false,
       })
     }
 
     const onBeforeClose = (action, done) => {
-      Snackbar.loading('正在异步关闭')
+      Snackbar.loading(pack.value.asyncCloseProgress)
 
       setTimeout(() => {
         actions[action]()
@@ -92,12 +94,15 @@ export default {
 
     const asyncClose = () => {
       Dialog({
-        message: '兰亭临帖 行书如行云流水',
+        message: pack.value.message,
         onBeforeClose,
       })
     }
 
+    watchLang(use)
+
     return {
+      pack,
       show,
       show1,
       show2,
diff --git a/packages/varlet-ui/src/dialog/example/locale/en-US.ts b/packages/varlet-ui/src/dialog/example/locale/en-US.ts
new file mode 100644
index 00000000000..cac4b570aad
--- /dev/null
+++ b/packages/varlet-ui/src/dialog/example/locale/en-US.ts
@@ -0,0 +1,13 @@
+export default {
+  functionCall: 'Function Call',
+  basicUse: 'Basic Use',
+  modifyTitle: 'Modify Title',
+  hideButton: 'Hide Button',
+  handleUserBehavior: 'Handle User Behavior',
+  asyncClose: 'Asynchronous closing',
+  componentCall: 'Component Call',
+  title: 'Beat It',
+  message: "Don't Wanna See No Blood, Don't Be A Macho Man",
+  customSlots: 'Custom Slots',
+  asyncCloseProgress: 'Asynchronous shutdown in progress',
+}
diff --git a/packages/varlet-ui/src/dialog/example/locale/index.ts b/packages/varlet-ui/src/dialog/example/locale/index.ts
new file mode 100644
index 00000000000..f8c3b2643a5
--- /dev/null
+++ b/packages/varlet-ui/src/dialog/example/locale/index.ts
@@ -0,0 +1,23 @@
+// lib
+import _zhCN from '../../../locale/zh-CN'
+import _enCN from '../../../locale/en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+import enUS from './en-US'
+import { useLocale, add as _add, use as _use } from '../../../locale'
+
+const { add, use: exampleUse, pack, packs, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, pack, packs, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN)
+add('en-US', enUS)
diff --git a/packages/varlet-ui/src/dialog/example/locale/zh-CN.ts b/packages/varlet-ui/src/dialog/example/locale/zh-CN.ts
new file mode 100644
index 00000000000..46369d5cc45
--- /dev/null
+++ b/packages/varlet-ui/src/dialog/example/locale/zh-CN.ts
@@ -0,0 +1,13 @@
+export default {
+  functionCall: '函数调用',
+  basicUse: '基本使用',
+  modifyTitle: '修改标题',
+  hideButton: '隐藏按钮',
+  handleUserBehavior: '处理用户行为',
+  asyncClose: '异步关闭',
+  componentCall: '组件调用',
+  title: '兰亭序',
+  message: '兰亭临帖 行书如行云流水',
+  customSlots: '自定义插槽',
+  asyncCloseProgress: '正在异步关闭',
+}
diff --git a/packages/varlet-ui/src/locale/en-US.ts b/packages/varlet-ui/src/locale/en-US.ts
index b1c6ea436a5..1f9409056ce 100644
--- a/packages/varlet-ui/src/locale/en-US.ts
+++ b/packages/varlet-ui/src/locale/en-US.ts
@@ -1 +1,5 @@
-export default {}
+export default {
+  dialogTitle: 'Hint',
+  dialogConfirmButton: 'Confirm',
+  dialogCancelButton: 'Cancel',
+}
diff --git a/packages/varlet-ui/src/menu/Menu.vue b/packages/varlet-ui/src/menu/Menu.vue
index 5ff45d40339..3bccdf38cbe 100644
--- a/packages/varlet-ui/src/menu/Menu.vue
+++ b/packages/varlet-ui/src/menu/Menu.vue
@@ -3,11 +3,7 @@
     <slot />
 
     <teleport to="body">
-      <transition
-        name="var-menu"
-        @after-enter="onOpened"
-        @after-leave="onClosed"
-      >
+      <transition name="var-menu" @after-enter="onOpened" @after-leave="onClosed">
         <div
           class="var-menu__menu var-elevation--3"
           ref="menu"
@@ -81,7 +77,7 @@ export default defineComponent({
         const { onOpen, onClose } = props
 
         await nextTick()
-        resize()
+        newValue && resize()
 
         newValue ? onOpen?.() : onClose?.()
       }
diff --git a/packages/varlet-ui/varlet.config.js b/packages/varlet-ui/varlet.config.js
index 4e3c21cb30b..e0424213c72 100644
--- a/packages/varlet-ui/varlet.config.js
+++ b/packages/varlet-ui/varlet.config.js
@@ -55,13 +55,6 @@ module.exports = {
         },
         doc: 'skeleton',
       },
-      {
-        text: {
-          'zh-CN': 'AppBar 导航栏',
-          'en-US': 'AppBar',
-        },
-        doc: 'app-bar',
-      },
       {
         text: {
           'zh-CN': 'Button 按钮',
@@ -307,6 +300,13 @@ module.exports = {
         },
         doc: 'form',
       },
+      {
+        text: {
+          'zh-CN': 'AppBar 导航栏',
+          'en-US': 'AppBar',
+        },
+        doc: 'app-bar',
+      },
     ],
   },
   mobile: {