perf(field): 根据 slot 内容决定 块状 线条 状态

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

@@ -1,7 +1,6 @@
 ::: demo
 
 <template>
-{{openKeys}}
   <lay-collapse :openKeys="openKeys">
     <lay-collapse-item title="标题" id="1"> 内容 </lay-collapse-item>
     <lay-collapse-item title="标题" id="2"> 内容 </lay-collapse-item>
@@ -25,3 +24,7 @@ export default {
 </script>
 
 :::
+
+|       |        |                |
+| ----- | ------ | -------------- |
+| openKeys | 打开的目录 | `array` |

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

@@ -1,3 +1,5 @@
+#### 普通容器
+
 ::: demo
 
 <template>
@@ -29,6 +31,8 @@ export default {
 
 :::
 
+#### 流式容器
+
 ::: demo
 
 <template>

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

@@ -38,6 +38,26 @@ export default {
 
 :::
 
+::: demo
+
+<template>
+  <lay-field title="标题"></lay-field>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 |       |      |     |
 | ----- | ---- | --- |
 | title | 标题 | --  |

docs/src/styles/markdown.css

@@ -5,7 +5,7 @@ html {
 }
 
 h4 {
-  font-weight: 700 !important;
+  font-weight: 600 !important;
   font-size: 16.8px !important;
   margin-top: 20px !important;
   margin-bottom: 20px !important;
@@ -22,20 +22,10 @@ h4,
 h5,
 h6 {
   margin: 0;
-  color: #303133;
+  color: #333;
   line-height: 1.25;
 }
 
-h1,
-h3,
-h4,
-h5,
-h6,
-strong,
-b {
-  font-weight: 600;
-}
-
 h1:hover .header-anchor,
 h1:focus .header-anchor,
 h2:hover .header-anchor,

src/index.ts

@@ -53,6 +53,7 @@ import LayTree from './module/tree/index'
 import LayTable from './module/table/index'
 import LayPage from './module/page/index'
 import LayTransfer from './module/transfer/index'
+import LayCheckboxGroup from './module/checkboxGroup/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -106,6 +107,7 @@ const components: Record<string, IDefineComponent> = {
   LayTable,
   LayPage,
   LayTransfer,
+  LayCheckboxGroup
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -172,6 +174,7 @@ export {
   LayTable,
   LayPage,
   LayTransfer,
+  LayCheckboxGroup,
   install,
 }
 

src/module/checkboxGroup/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+  app.component(Component.name || 'LayCheckboxGroup', Component)
+}
+
+export default Component as IDefineComponent

src/module/checkboxGroup/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <span @click="handleClick">
+    <input type="checkbox" :name="name" title="写作" :value="label" />
+    <div
+      class="layui-unselect"
+      :class="[
+        {
+          'layui-checkbox-disbaled layui-disabled': disabled,
+        },
+        'layui-form-checkbox',
+        props.modelValue.includes(props.label) ? 'layui-form-checked' : '',
+      ]"
+      :lay-skin="skin"
+    >
+      <span><slot /></span>
+      <i v-if="skin == 'primary'" class="layui-icon layui-icon-ok" />
+      <i v-if="!skin" class="layui-icon layui-icon-ok" />
+    </div>
+  </span>
+</template>
+
+<script setup name="LayCheckbox" lang="ts">
+import { defineProps, ref, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue: string[]
+  label: string
+  disabled?: boolean
+  name?: string
+  skin?: string
+}>()
+
+const hasValue = ref(false)
+
+const emit = defineEmits(['update:modelValue'])
+
+const handleClick = function () {
+  if (!props.disabled) {
+    if (!props.modelValue.includes(props.label)) {
+      props.modelValue.push(props.label)
+    } else {
+      let index = props.modelValue.indexOf(props.label)
+      props.modelValue.splice(index, 1)
+    }
+    emit('update:modelValue', props.modelValue)
+  }
+}
+</script>

src/module/field/index.vue

@@ -1,14 +1,25 @@
 <template>
-  <fieldset class="layui-elem-field">
+
+  <fieldset v-if="slot.default" class="layui-elem-field">
     <legend>{{ title }}</legend>
     <div class="layui-field-box">
       <slot />
     </div>
   </fieldset>
+
+  <fieldset v-else class="layui-elem-field layui-field-title">
+    <legend><a name="docend">结语</a></legend>
+  </fieldset>
+
 </template>
 
 <script setup name="LayField" lang="ts">
-const props = defineProps<{
+import { defineProps, useSlots } from 'vue'
+
+const slot = useSlots()
+
+const props =
+  defineProps<{
     title?: string
-}>()
+  }>()
 </script>

src/module/header/index.vue

@@ -3,5 +3,5 @@
     <slot />
   </div>
 </template>
-
-<script setup name="LayHeader" lang="ts"></script>
+<script setup name="LayHeader"></script>
+<script setup lang="ts"></script>