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'
         }

src/module/dropdown/index.vue

@@ -5,7 +5,7 @@
     class="layui-dropdown"
     :class="[openState ? 'layui-dropdown-up' : '']"
   >
-    <div @click="open">
+    <div @click="toggle">
       <slot />
     </div>
     <dl class="layui-anim layui-anim-upbit">
@@ -18,10 +18,12 @@
     v-if="trigger === 'hover'"
     class="layui-dropdown"
     :class="[openState ? 'layui-dropdown-up' : '']"
-    @mouseenter="open"
-    @mouseleave="open"
+    @mouseenter="open" 
+    @mouseleave="hide"
   >
-    <slot />
+    <div>
+      <slot />
+    </div>
     <dl class="layui-anim layui-anim-upbit">
       <ul class="layui-menu layui-dropdown-menu">
         <slot name="content" />
@@ -31,7 +33,7 @@
 </template>
 
 <script setup name="LaySelect" lang="ts">
-import { defineProps, ref, watch } from 'vue'
+import { defineProps, provide, ref, watch } from 'vue'
 import useClickOutside from '../../hooks/useClickOutside'
 
 const dropdownRef = ref<null | HTMLElement>(null)
@@ -49,6 +51,14 @@ const props = withDefaults(
 const openState = ref(false)
 
 const open = function () {
+  openState.value = true
+}
+
+const hide = function () {
+  openState.value = false
+}
+
+const toggle = function () {
   openState.value = !openState.value
 }
 
@@ -57,4 +67,6 @@ watch(isClickOutside, () => {
     openState.value = false
   }
 })
+
+provide('openState', openState)
 </script>

src/module/dropdownItem/index.vue

@@ -1,9 +1,17 @@
 <template>
   <li>
-    <div class="layui-menu-body-title">
+    <div class="layui-menu-body-title" @click="click">
       <slot />
     </div>
   </li>
 </template>
 
-<script setup name="LayDropdownItem" lang="ts"></script>
+<script setup name="LayDropdownItem" lang="ts">
+import { inject, Ref } from "vue";
+
+const openState:Ref<boolean> = inject('openState') as Ref<boolean>
+
+const click = function () {
+  openState.value = false
+}
+</script>

src/module/rate/index.vue

@@ -6,46 +6,57 @@
       class="layui-inline"
       @mouseenter="mouseenter(index)"
     >
-      <i class="layui-icon" :class="[rate]" />
+      <i
+        v-if="rate"
+        class="layui-icon layui-icon-rate-solid"
+        :style="{ color: theme }"
+      />
+      <i v-else class="layui-icon layui-icon-rate" :style="{ color: theme }" />
     </li>
   </ul>
 </template>
 <script setup lang="ts">
-import { defineProps, Ref, ref, withDefaults } from 'vue'
+import { defineProps, Ref, ref, watch, withDefaults } from 'vue'
 
-const rates: Ref<Array<string>> = ref([])
+const rates: Ref<Array<boolean>> = ref([])
 
 const props = withDefaults(
   defineProps<{
     length?: number
     modelValue?: number
     character?: string
+    readonly?: boolean
+    theme?: string
   }>(),
   {
     length: 5,
     modelValue: 0,
+    readonly: false,
   }
 )
 
-for (let index = 0; index < props.length; index++) {
-  rates.value.push('layui-icon-rate')
-}
-
-for (let index = props.modelValue - 1; index >= 0; index--) {
-  rates.value[index] = 'layui-icon-rate-solid'
-}
+watch(props, function () {
+  rates.value = []
+  for (let index = 0; index < props.length; index++) {
+    rates.value.push(false)
+  }
+  for (let index = props.modelValue - 1; index >= 0; index--) {
+    rates.value[index] = true
+  }
+},{deep: true, immediate: true})
 
 const emit = defineEmits(['update:modelValue'])
 
 const mouseenter = function (index: number) {
+  if (props.readonly) {
+    return false
+  }
   for (let i = index; i >= 0; i--) {
-    rates.value[i] = 'layui-icon-rate-solid'
+    rates.value[i] = true
   }
-  for (let j = index + 1; j < props.length; j++) {
-    rates.value[j] = 'layui-icon-rate'
+  for (let i = index + 1; i < props.length; i++) {
+    rates.value[i] = false
   }
-
-  // select update 时, 通知 change 事件
   emit('update:modelValue', index + 1)
 }
 </script>