docs: optimize docs

varletjs · Dec 10, 2022 · 441d3a5 · 441d3a5
1 parent b81a642
commit 441d3a5
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 190 deletions.
diff --git a/packages/varlet-ui/src/loading-bar/docs/en-US.md b/packages/varlet-ui/src/loading-bar/docs/en-US.md
@@ -8,42 +8,37 @@ Display loading progress at the top of the page.
 
 ```html
 <script setup>
-import ref from 'vue'
-import { LoadingBar, Snackbar } from '@varlet/ui'
+import { ref } from 'vue'
+import { LoadingBar } from '@varlet/ui'
 
-const isClear = ref(false)
-
-LoadingBar.mergeConfig({
-  top: '48px'
-})
+const hasCustomStyle = ref(false)
 
 const setStyle = () => {
   LoadingBar.mergeConfig({
-    errorColor: isClear.value ? undefined : '#ff8800',
-    color: isClear.value ? undefined : '#10afef',
-    height: isClear.value ? undefined : '5px',
+    errorColor: hasCustomStyle.value ? undefined : '#ff8800',
+    color: hasCustomStyle.value ? undefined : '#10afef',
+    height: hasCustomStyle.value ? undefined : '5px'
   })
 
-  isClear.value = !isClear.value
-
-  Snackbar.success('success')
+  hasCustomStyle.value = !hasCustomStyle.value
 }
+
+// mobile only
+// LoadingBar.mergeConfig({
+//   top: '48px'
+// })
 </script>
 
 <template>
-  <var-button type="primary" block @click="LoadingBar.start()">Start</var-button>
-  <var-button type="primary" block @click="LoadingBar.finish()">Finish</var-button>
-  <var-button type="primary" block @click="LoadingBar.error()">Error</var-button>
-  <var-button type="primary" block @click="setStyle">
-    {{ isClear ? 'Clear Style' : 'Custom Style' }}
-  </var-button>
+  <var-space direction="column" size="large">
+    <var-button type="primary" block @click="LoadingBar.start()">Start</var-button>
+    <var-button type="primary" block @click="LoadingBar.finish()">Finish</var-button>
+    <var-button type="primary" block @click="LoadingBar.error()">Error</var-button>
+    <var-button type="primary" block @click="setStyle">
+      {{ hasCustomStyle ? 'Clear Style' : 'Custom Style' }}
+    </var-button>
+  </var-space>
 </template>
-
-<style scoped lang="less">
-  .var-button {
-    margin-bottom: 11px;
-  }
-</style>
 ```
 
 ## API
@@ -52,7 +47,7 @@ const setStyle = () => {
 
 | Method | Description | Arguments | Return value |
 |---------------------|----------|--|---------|
-| `LoadingBar.mergeConfig` | Set config of loading bar | _options: Options_ | `-`  |
+| `LoadingBar.mergeConfig` | Merge config of loading bar | _options: Options_ | `-`  |
 | `LoadingBar.start`  | Start loading  | `-` | `-` |
 | `LoadingBar.finish` | Finish loading  | `-` | `-` |
 | `LoadingBar.error`  | Loading error  | `-` | `-` |

diff --git a/packages/varlet-ui/src/loading-bar/docs/zh-CN.md b/packages/varlet-ui/src/loading-bar/docs/zh-CN.md
@@ -8,42 +8,37 @@
 
 ```html
 <script setup>
-import ref from 'vue'
-import { LoadingBar, Snackbar } from '@varlet/ui'
+import { ref } from 'vue'
+import { LoadingBar } from '@varlet/ui'
 
-const isClear = ref(false)
-
-LoadingBar.mergeConfig({
-  top: '48px'
-})
+const hasCustomStyle = ref(false)
 
 const setStyle = () => {
   LoadingBar.mergeConfig({
-    errorColor: isClear.value ? undefined : '#ff8800',
-    color: isClear.value ? undefined : '#10afef',
-    height: isClear.value ? undefined : '5px'
+    errorColor: hasCustomStyle.value ? undefined : '#ff8800',
+    color: hasCustomStyle.value ? undefined : '#10afef',
+    height: hasCustomStyle.value ? undefined : '5px'
   })
 
-  isClear.value = !isClear.value
-
-  Snackbar.success('success')
+  hasCustomStyle.value = !hasCustomStyle.value
 }
+
+// 移动端案例设置了偏移
+// LoadingBar.mergeConfig({
+//   top: '48px'
+// })
 </script>
 
 <template>
-  <var-button type="primary" block @click="LoadingBar.start()">开始</var-button>
-  <var-button type="primary" block @click="LoadingBar.finish()">结束</var-button>
-  <var-button type="primary" block @click="LoadingBar.error()">错误</var-button>
-  <var-button type="primary" block @click="setStyle">
-    {{ isClear ? '清除样式' : '设置样式' }}
-  </var-button>
+  <var-space direction="column" size="large">
+    <var-button type="primary" block @click="LoadingBar.start()">开始</var-button>
+    <var-button type="primary" block @click="LoadingBar.finish()">结束</var-button>
+    <var-button type="primary" block @click="LoadingBar.error()">错误</var-button>
+    <var-button type="primary" block @click="setStyle">
+      {{ hasCustomStyle ? '清除样式' : '设置样式' }}
+    </var-button>
+  </var-space>
 </template>
-
-<style scoped lang="less">
-  .var-button {
-    margin-bottom: 11px;
-  }
-</style>
 ```
 
 ## API
@@ -52,7 +47,7 @@ const setStyle = () => {
 
 | 方法名                 | 说明       | 参数 | 返回值     |
 |---------------------|----------|--|---------|
-| `LoadingBar.mergeConfig` | 设置加载条的样式 | _options: Options_ | `-`  |
+| `LoadingBar.mergeConfig` | 合并覆盖加载条的默认样式 | _options: Options_ | `-`  |
 | `LoadingBar.start`  | 开始加载  | `-` | `-` |
 | `LoadingBar.finish` | 结束加载  | `-` | `-` |
 | `LoadingBar.error`  | 加载失败  | `-` | `-` |

diff --git a/packages/varlet-ui/src/loading-bar/example/index.vue b/packages/varlet-ui/src/loading-bar/example/index.vue
@@ -1,44 +1,38 @@
 <script setup>
-import { ref } from 'vue'
 import LoadingBar from '..'
 import VarButton from '../../button'
-import Snackbar from '../../snackbar'
+import VarSpace from '../../space'
+import dark from '../../themes/dark'
+import { ref } from 'vue'
 import { watchLang, AppType, watchDarkMode } from '@varlet/cli/client'
 import { use, pack } from './locale'
-import dark from '../../themes/dark'
 
-const isClear = ref(false)
-
-LoadingBar.mergeConfig({
-  top: '14.5vw',
-})
+const hasCustomStyle = ref(false)
 
 const setStyle = () => {
   LoadingBar.mergeConfig({
-    errorColor: isClear.value ? undefined : '#ff8800',
-    color: isClear.value ? undefined : '#10afef',
-    height: isClear.value ? undefined : '5px',
+    errorColor: hasCustomStyle.value ? undefined : '#ff8800',
+    color: hasCustomStyle.value ? undefined : '#10afef',
+    height: hasCustomStyle.value ? undefined : '5px',
   })
 
-  isClear.value = !isClear.value
-
-  Snackbar.success('success')
+  hasCustomStyle.value = !hasCustomStyle.value
 }
 
 watchDarkMode(dark)
 watchLang(use)
+
+LoadingBar.mergeConfig({
+  top: '14.5vw',
+})
 </script>
 
 <template>
   <app-type>{{ pack.basicUsage }}</app-type>
-  <var-button type="primary" block @click="LoadingBar.start()">{{ pack.start }}</var-button>
-  <var-button type="primary" block @click="LoadingBar.finish()">{{ pack.finish }}</var-button>
-  <var-button type="primary" block @click="LoadingBar.error()">{{ pack.error }}</var-button>
-  <var-button type="primary" block @click="setStyle">{{ isClear ? pack.clear : pack.custom }}</var-button>
+  <var-space direction="column" :size="['3vw', '4vw']">
+    <var-button type="primary" block @click="LoadingBar.start()">{{ pack.start }}</var-button>
+    <var-button type="primary" block @click="LoadingBar.finish()">{{ pack.finish }}</var-button>
+    <var-button type="primary" block @click="LoadingBar.error()">{{ pack.error }}</var-button>
+    <var-button type="primary" block @click="setStyle">{{ hasCustomStyle ? pack.clear : pack.custom }}</var-button>
+  </var-space>
 </template>
-
-<style scoped lang="less">
-.var-button {
-  margin-bottom: 11px;
-}
-</style>
diff --git a/packages/varlet-ui/src/result/docs/en-US.md b/packages/varlet-ui/src/result/docs/en-US.md
@@ -20,50 +20,6 @@ It is used to show the results to users.
 </template>
 ```
 
-### Custom Image
-
-Customize image through the `image` slot.
-
-```html
-
-<template>
-  <var-result title="Looping" description="《You Are Not Alone》">
-    <template #image>
-      <svg viewBox="0 0 48 48" class="music">
-        <circle cx="24" cy="24" fill="#37474f" r="19"/>
-        <circle cx="24" cy="24" fill="#263238" r="18"/>
-        <g fill="#37474f">
-          <path d="m41.022 29.815-17.022-5.815 5.815 17.022c5.257-1.796 9.41-5.95 11.207-11.207z"/>
-          <path d="m6.978 18.185 17.022 5.815-5.815-17.022c-5.257 1.797-9.41 5.95-11.207 11.207z"/>
-        </g>
-        <path d="m24 17c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7z" fill="#fff"/>
-        <circle cx="24" cy="24" r="1"/>
-      </svg>
-    </template>
-    <template #footer>
-      <var-button color="var(--result-question-color)" text-color="#fff">More</var-button>
-    </template>
-  </var-result>
-</template>
-
-<style>
-.music {
-  width: 40vw;
-  animation: rotate 6s linear infinite;
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>
-```
-
 ### Types
 
 Result type, optional values are `info`，`success`，`warning`，`error`，`question`，`empty`.

diff --git a/packages/varlet-ui/src/result/docs/zh-CN.md b/packages/varlet-ui/src/result/docs/zh-CN.md
@@ -20,49 +20,6 @@
 </template>
 ```
 
-### 自定义图片
-
-通过 `image` 插槽对图片进行自定义
-
-```html
-<template>
-  <var-result title="正在循环播放" description="《疯狂星期四谁请我吃》">
-    <template #image>
-      <svg viewBox="0 0 48 48" class="music">
-        <circle cx="24" cy="24" fill="#37474f" r="19" />
-        <circle cx="24" cy="24" fill="#263238" r="18" />
-        <g fill="#37474f">
-          <path d="m41.022 29.815-17.022-5.815 5.815 17.022c5.257-1.796 9.41-5.95 11.207-11.207z" />
-          <path d="m6.978 18.185 17.022 5.815-5.815-17.022c-5.257 1.797-9.41 5.95-11.207 11.207z" />
-        </g>
-        <path d="m24 17c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7z" fill="#fff"/>
-        <circle cx="24" cy="24" r="1"/>
-      </svg>
-    </template>
-    <template #footer>
-      <var-button color="var(--result-question-color)" text-color="#fff">V我50</var-button>
-    </template>
-  </var-result>
-</template>
-
-<style>
-.music {
-  width: 40vw;
-  animation: rotate 6s linear infinite;
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>
-```
-
 ### 类型
 
 结果类型，可选值为 `info`，`success`，`warning`，`error`，`question`，`empty`。

diff --git a/packages/varlet-ui/src/result/example/index.vue b/packages/varlet-ui/src/result/example/index.vue
@@ -27,25 +27,6 @@ watchDarkMode(dark)
     </template>
   </var-result>
 
-  <app-type>{{ pack.customImage }}</app-type>
-  <var-result :title="pack.looping" :description="pack.kfc">
-    <template #image>
-      <svg viewBox="0 0 48 48" class="music">
-        <circle cx="24" cy="24" fill="#37474f" r="19" />
-        <circle cx="24" cy="24" fill="#263238" r="18" />
-        <g fill="#37474f">
-          <path d="m41.022 29.815-17.022-5.815 5.815 17.022c5.257-1.796 9.41-5.95 11.207-11.207z" />
-          <path d="m6.978 18.185 17.022 5.815-5.815-17.022c-5.257 1.797-9.41 5.95-11.207 11.207z" />
-        </g>
-        <path d="m24 17c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7z" fill="#eee" />
-        <circle cx="24" cy="24" r="1" />
-      </svg>
-    </template>
-    <template #footer>
-      <var-button color="var(--result-question-color)" text-color="#fff">{{ pack.vme }}</var-button>
-    </template>
-  </var-result>
-
   <app-type>{{ pack.type }}</app-type>
   <var-space direction="column" size="large">
     <var-button type="success" block @click="success = true">{{ pack.success }}</var-button>

diff --git a/packages/varlet-ui/src/result/example/locale/en-US.ts b/packages/varlet-ui/src/result/example/locale/en-US.ts
@@ -11,8 +11,4 @@ export default {
   successTitle: 'Success',
   description: "Hi, I'm a result description.",
   changeBackgroundColor: 'Change BackGround Color',
-  customImage: 'Custom Image',
-  looping: 'Looping',
-  kfc: '《You Are Not Alone》',
-  vme: 'More',
 }
diff --git a/packages/varlet-ui/src/result/example/locale/zh-CN.ts b/packages/varlet-ui/src/result/example/locale/zh-CN.ts
@@ -10,8 +10,4 @@ export default {
   button: '知道了',
   description: '嗨~ 我是结果页的一段描述~',
   changeBackgroundColor: '修改背景色',
-  customImage: '自定义图片',
-  looping: '正在循环播放',
-  kfc: '《疯狂星期四谁请我吃》',
-  vme: 'V我50',
 }