docs: 更新文档

docs/docs/zh-CN/components/dropdown.md

@@ -5,7 +5,7 @@
 
 <template>
   <lay-dropdown>
-    <lay-button>下拉菜单</lay-button>
+    <lay-button type="primary">下拉菜单</lay-button>
     <template #content>
         <lay-dropdown-item>选项一</lay-dropdown-item>
         <lay-dropdown-item>选项二</lay-dropdown-item>

docs/docs/zh-CN/components/progress.md

@@ -29,11 +29,11 @@ export default {
 ::: demo
 
 <template>
-  <lay-progress percent="80" size="big"></lay-progress>
+  <lay-progress percent="40" size="big"></lay-progress>
   <br>
-  <lay-progress percent="60" size="big" theme="orange"></lay-progress>
+  <lay-progress percent="60" size="big" theme="green"></lay-progress>
   <br>
-  <lay-progress percent="60" size="big" theme="blue"></lay-progress>
+  <lay-progress percent="80" size="big" theme="cyan"></lay-progress>
 </template>
 
 <script>
@@ -50,6 +50,37 @@ export default {
 
 :::
 
+::: title 指定主题
+:::
+
+::: demo
+
+<template>
+  <lay-progress percent="60" theme="red"></lay-progress>
+  <br>
+  <lay-progress percent="60" theme="orange"></lay-progress>
+  <br>
+  <lay-progress percent="60" theme="green"></lay-progress>
+  <br>
+  <lay-progress percent="60" theme="blue"></lay-progress>
+  <br>
+  <lay-progress percent="60" theme="cyan"></lay-progress>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 显示文字
 :::
 

docs/docs/zh-CN/components/rate.md

@@ -53,7 +53,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-rate v-model="all2" :length="length"></lay-rate> {{all2}}
+  <lay-rate v-model="all2" :length="length"></lay-rate>
 </template>
 
 <script>
@@ -75,6 +75,63 @@ export default {
 
 :::
 
+::: title 只读模式
+:::
+
+::: demo
+
+<template>
+  <lay-rate v-model="all3" readonly="true"></lay-rate>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+    const all3 = ref(4)
+
+    return {
+      all3
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 定义主题
+:::
+
+::: demo
+
+<template>
+  <lay-rate v-model="all4" theme="#FF8000"></lay-rate><br>
+  <lay-rate v-model="all4" theme="#009688"></lay-rate><br>
+  <lay-rate v-model="all4" theme="#1E9FFF"></lay-rate><br>
+  <lay-rate v-model="all4" theme="#2F4056"></lay-rate><br>
+  <lay-rate v-model="all4" theme="#FE0000"></lay-rate><br>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+    const all4 = ref(4)
+
+    return {
+      all4
+    }
+  }
+}
+</script>
+
+:::
+
+
 ::: title 评分属性
 :::
 
@@ -82,3 +139,4 @@ export default {
 | ------- | -------- | --- |
 | v-model | 评分值   | --  |
 | length  | 评分长度 | --  |
+| readonly  | 只读模式 | --  |

docs/docs/zh-CN/guide/changelog.md

@@ -11,7 +11,13 @@
 <template>
 <lay-timeline>
 <lay-timeline-item title="0.2.1">
+[新增] hooks 文档
 [新增] useClickOutside 外部 click 事件 hooks。<br>
+[新增] rate 评分 readonly 属性, 支持只读模式。<br>
+[新增] rate 评分 theme 属性, 支持自定义主题。<br>
+[新增] progress 文档, 区分 theme 与 size 使用案例。<br>
+[新增] dropdown 下拉组件 dropdown-item 点击监听, 隐藏 content 内容。<br>
+[修复] rate 评分 modelValue 属性, 双绑逻辑。<br>
 </lay-timeline-item>
 <lay-timeline-item title="0.2.0">
 [新增] carousel 轮播 anim 属性, 支持 default updown 不同方向轮播。<br>

docs/docs/zh-CN/guide/getStarted.md

@@ -3,7 +3,19 @@
 
 <br>
 
-- 使用 npm 下载
+::: describe 这里是 Layui 的 Vue 实现，开发和服务于企业级后台产品。
+:::
+
+<img src="https://portrait.gitee.com/uploads/avatars/namespace/2849/8547475_layui-vue_1633242524.png" style="margin-left:24px;border-radius: 10px;" width="140px" />
+<span style="font-size: 30px;color: #aaa;margin: 0 20px;">+</span>
+<img src="https://qn.antdv.com/vue.png" width="160px" />
+
+<br>
+<br>
+<br>
+
+::: describe 1.使用 npm 下载
+:::
 
 ```
 npm install @layui/layui-vue --save
@@ -11,7 +23,8 @@ npm install @layui/layui-vue --save
 
 <br>
 
-- 在 main.ts 中
+::: describe 2.在 main.ts 中依赖
+:::
 
 ```js
 import App from './App.vue'
@@ -24,7 +37,8 @@ createApp(App).use(Layui).mount('#app')
 
 <br>
 
-- 在 index.vue 使用：
+::: describe 3.在 index.vue 使用
+:::
 
 ```html
 <lay-layout>

docs/docs/zh-CN/guide/introduce.md

@@ -1,6 +1,8 @@
 ::: title 基本介绍
 :::
 
+<img src="http://layui-doc.pearadmin.com/static/images/layui/logo-2.png" />
+
 <br>
 
 ::: block

docs/docs/zh-CN/hooks/useClickOutside.md

@@ -1,15 +1,31 @@
-::: title useClickOutside
+::: title 基础使用
 :::
 
-```html
-<div ref="dropdownRef"></div>
-```
+::: demo 使用 useClickOutside 监听元素外的监听事件
 
-```javascript
-const dropdownRef = (ref < null) | (HTMLElement > null)
-const isClickOutside = useClickOutside(dropdownRef)
+<template>
+  <lay-button ref='buttonRef' type='primary'>当前元素</lay-button>
+</template>
 
-watch(isClickOutside, () => {
-  // do something
-})
-```
+<script>
+import { ref, watch } from 'vue'
+import useClickOutside from '/@src/hooks/useClickOutside'
+
+export default {
+  setup() {
+
+    const buttonRef = (ref < null) | (HTMLElement > null)
+    const isClickOutside = useClickOutside(buttonRef)
+
+    watch(isClickOutside, () => {
+      console.log("元素外 click 事件")
+    })
+
+    return {
+      buttonRef
+    }
+  }
+}
+</script>
+
+:::

docs/src/plugin/create-describe.ts

@@ -21,7 +21,7 @@ export default function createContainer(
         const token = tokens[idx]
         const info = token.info.trim().slice(klass.length).trim()
         if (token.nesting === 1) {
-          return `<p>${info}`
+          return `<p style="margin-left: 24px;margin-bottom:20px;">${info}`
         } else {
           return '</p>\n'
         }