[新增] checkbox 组件 待完成 menu 组件

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

@@ -0,0 +1,20 @@
+::: demo
+
+<template>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    return {
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
+:::

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

@@ -23,6 +23,7 @@ export default {
         width:100%;
         height: 300px;
         background: #79C48C;
+        border-radius: 4px;
     }
 </style>
 

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

@@ -111,4 +111,60 @@ export default {
 }
 </script>
 
+:::
+
+::: demo
+
+<template>
+  <lay-form>
+    <lay-checkbox v-model="checked" label="1">写作</lay-checkbox>
+    <lay-checkbox v-model="checked" label="2">画画</lay-checkbox>
+    <lay-checkbox v-model="checked" label="3">运动</lay-checkbox>
+  </lay-form>
+  {{checked}}
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const checked = ref(['1','2']);
+
+    return {
+        checked
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-form>
+    <lay-checkbox skin="primary" v-model="checked" label="1">写作</lay-checkbox>
+    <lay-checkbox skin="primary" v-model="checked" label="2">画画</lay-checkbox>
+    <lay-checkbox skin="primary" v-model="checked" label="3">运动</lay-checkbox>
+  </lay-form>
+  {{checked}}
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const checked = ref(['1','2']);
+
+    return {
+        checked
+    }
+  }
+}
+</script>
+
 :::

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

@@ -4,7 +4,12 @@
   <lay-menu>
     <lay-menu-item title="首页"></lay-menu-item>
     <lay-menu-item title="用户"></lay-menu-item>
-    <lay-menu-item title="角色"></lay-menu-item>    
+    <lay-menu-item title="角色"></lay-menu-item> 
+    <lay-menu-item title="目录" class="layui-nav-itemed">
+        <lay-menu-child-item title="菜单一"></lay-menu-child-item> 
+        <lay-menu-child-item title="菜单二"></lay-menu-child-item>
+        <lay-menu-child-item title="菜单三"></lay-menu-child-item>
+    </lay-menu-item> 
   </lay-menu>
 </template>
 

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

@@ -1,5 +1,18 @@
 ##### 安装
 
+npm 下载
 ```
 npm install @layui/layui-vue --save
 ```
+
+在 main.ts 中
+```js
+import App from './App.vue'
+import { createApp } from 'vue'
+import Layui from '@layui/layui-vue'
+import '@layui/layui-vue/lib/layui.css'
+
+createApp(App)
+.use(Layui)
+.mount('#app')
+```

docs/src/layouts/Layout.vue

@@ -5,36 +5,111 @@
         <lay-logo>
           <img src="../assets/logo.png" />
         </lay-logo>
-        <ul class="layui-nav layui-layout-right" style="margin-top:0px;margin-bottom:0px;">
+        <ul
+          class="layui-nav layui-layout-right"
+          style="margin-top: 0px; margin-bottom: 0px"
+        >
+          <li class="layui-nav-item">
+            <a href="https://gitee.com/Jmysy/layui-vue-sample"> 案例 </a>
+          </li>
           <li class="layui-nav-item">
             <a href="https://gitee.com/Jmysy/layui-vue"> 仓库 </a>
           </li>
           <li class="layui-nav-item">
-            <a href="https://gitee.com/Jmysy/layui-vue/issues?assignee_id=&author_id=&branch=&collaborator_ids=&issue_search=&label_ids=&label_text=&milestone_id=&priority=&private_issue=&program_id=&project_id=Jmysy%2Flayui-vue&project_type=&scope=&sort=&state=all&target_project="> 反馈 </a>
+            <a
+              href="https://gitee.com/Jmysy/layui-vue/issues?assignee_id=&author_id=&branch=&collaborator_ids=&issue_search=&label_ids=&label_text=&milestone_id=&priority=&private_issue=&program_id=&project_id=Jmysy%2Flayui-vue&project_type=&scope=&sort=&state=all&target_project="
+            >
+              反馈
+            </a>
           </li>
         </ul>
       </lay-header>
       <lay-side>
         <ul class="layui-menu layui-menu-lg">
-          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/guide">介绍</router-link></div></li>
-          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/guide/install">安装</router-link></div></li>
-          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/layout">布局</router-link></div></li>
-          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/container">容器</router-link></div></li>
-          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/button">按钮</router-link></div></li>
-          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/icon">图标</router-link></div></li>
-          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/panel">面板</router-link></div></li>
-          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/card">卡片</router-link></div></li>
-          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/grid">栅格</router-link></div></li>
-          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/form">表单</router-link></div></li>
-          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/badge">徽章</router-link></div></li>
-          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/block">区块</router-link></div></li>
-          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/line">分割</router-link></div></li>
-          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/menu">菜单</router-link></div></li>
           <li>
-            <div class="layui-menu-body-title"><router-link to="/zh-CN/components/progress">进度</router-link></div>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/guide">介绍</router-link>
+            </div>
           </li>
           <li>
-            <div class="layui-menu-body-title"><router-link to="/zh-CN/components/timeline">时间</router-link></div>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/guide/install">安装</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/layout">布局</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/container">容器</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/button">按钮</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/icon">图标</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/panel">面板</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/card">卡片</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/animation">动画</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/grid">栅格</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/form">表单</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/badge">徽章</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/block">区块</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/line">分割</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/menu">菜单</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/progress">进度</router-link>
+            </div>
+          </li>
+          <li>
+            <div class="layui-menu-body-title">
+              <router-link to="/zh-CN/components/timeline">时间</router-link>
+            </div>
           </li>
         </ul>
       </lay-side>

docs/src/router/zh-CN.ts

@@ -46,6 +46,10 @@ const zhCN = [
         path: '/zh-CN/components/panel',
         component: () => import('../../docs/zh-CN/components/panel.md'),
         meta: { title: '面板' },
+      },{
+        path: '/zh-CN/components/animation',
+        component: () => import('../../docs/zh-CN/components/animation.md'),
+        meta: { title: '动画' },
       }, {
         path: '/zh-CN/components/card',
         component: () => import('../../docs/zh-CN/components/cards.md'),

src/css/all.css

@@ -4,6 +4,7 @@
 .grid-demo {
     padding: 10px;
     line-height: 50px;
+    border-radius: 4px;
     text-align: center;
     background-color: #79C48C;
     color: #fff;

src/index.ts

@@ -32,6 +32,8 @@ import LayContainer from "./module/container/index"
 import LayMenu from './module/menu/index'
 import LayMenuItem from './module/menuItem/index'
 import LayMenuChildItem from './module/menuChildItem/index'
+import LayCheckbox from './module/checkbox/index'
+import LayForm from './module/form/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -62,7 +64,9 @@ const components: Record<string, IDefineComponent> = {
   LayContainer,
   LayMenu,
   LayMenuItem,
-  LayMenuChildItem
+  LayMenuChildItem,
+  LayCheckbox,
+  LayForm
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -105,6 +109,8 @@ export {
   LayMenu,
   LayMenuItem,
   LayMenuChildItem,
+  LayCheckbox,
+  LayForm,
   install,
 }
 

src/module/checkbox/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 || 'LayCheckbox', Component)
+}
+
+export default Component as IDefineComponent

src/module/checkbox/index.vue

@@ -0,0 +1,63 @@
+<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',
+        hasValue ? 'layui-form-checked' : '',
+      ]"
+      :lay-skin="skin"
+    >
+      <span><slot></slot></span>
+      <i v-if="skin == 'primary'" class="layui-icon layui-icon-ok"></i>
+      <i v-if="!skin" class="layui-icon layui-icon-ok"></i>
+    </div>
+  </span>
+</template>
+
+<script setup name="LayCheckbox" lang="ts">
+import { defineProps, ref } from 'vue'
+
+const props =
+  defineProps<{
+    modelValue: Array<unknown>
+    label: string
+    disabled: boolean
+    name: string
+    skin: string
+  }>()
+
+const hasValue = ref(false)
+
+if (props.modelValue.includes(props.label)) {
+  hasValue.value = true
+} else {
+  hasValue.value = 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)
+    }
+    props.modelValue.includes(props.label)
+      ? (hasValue.value = true)
+      : (hasValue.value = false)
+    if (props.modelValue.includes(props.label)) {
+      hasValue.value = true
+    } else {
+      hasValue.value = false
+    }
+    emit('update:modelValue', props.modelValue)
+  }
+}
+</script>

src/module/form/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 || 'LayForm', Component)
+}
+
+export default Component as IDefineComponent

src/module/form/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <form class="layui-form">
+      <slot></slot>
+  </form>
+</template>
+
+<script setup name="LayForm" lang="ts">
+
+</script>

src/module/menuChildItem/index.vue

@@ -1,7 +1,14 @@
 <template>
-    <dd><a href="">选项</a></dd>
+  <dd>
+    <a href="">{{ title }}</a>
+  </dd>
 </template>
 
 <script setup name="LayMenuChildItem" lang="ts">
+import { defineProps } from 'vue'
 
+const props =
+  defineProps<{
+    title: string
+  }>()
 </script>

src/module/menuItem/index.vue

@@ -1,11 +1,17 @@
 <template>
     <li class="layui-nav-item">
-         <a href="">{{title}}</a>
+        <a href="">{{title}}
+            <i class="layui-icon layui-icon-down layui-nav-more" v-if="slots.default"></i>
+        </a>
+        <dl class="layui-nav-child" v-if="slots.default">
+            <slot></slot>
+        </dl>
     </li>
 </template>
 
 <script setup name="LayMenuItem" lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, useSlots } from 'vue'
+const slots = useSlots();
 
 const props =
   defineProps<{