Merge branch 'develop'

example/docs/zh-CN/components/drawer.md

@@ -0,0 +1,175 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
+::: demo
+
+<template>
+  <lay-button @click="changeVisible" type="primary">打开</lay-button>
+  <lay-layer type="drawer" v-model="visible" title="标题">内容</lay-layer>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const visible = ref(false)
+
+    const changeVisible = function() {
+        visible.value = !visible.value;
+    }
+
+    return {
+        visible,
+        changeVisible
+    }
+  }
+}
+</script>
+
+:::
+
+
+::: title 抽屉嵌套
+:::
+
+::: demo
+
+<template>
+  <lay-button @click="changeVisible1" type="primary">打开</lay-button>
+  <lay-layer type="drawer" v-model="visible1" title="标题">
+      <lay-button @click="changeVisible2" type="primary" style="margin:10px;">打开</lay-button>
+      <lay-layer type="drawer" area="200px" v-model="visible2" title="标题">
+      内容
+      </lay-layer>
+  </lay-layer>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const visible1 = ref(false)
+
+    const changeVisible1 = function() {
+        visible1.value = !visible1.value;
+    }
+
+    const visible2 = ref(false)
+
+    const changeVisible2 = function() {
+        visible2.value = !visible2.value;
+    }
+
+    return {
+        visible1,
+        visible2,
+        changeVisible1,
+        changeVisible2
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 函数调用
+:::
+
+::: demo
+
+<template>
+  <lay-button @click="openDrawer" type="primary">调用</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { layer } from "../../../../src/index.ts"
+
+export default {
+  setup() {
+
+    const openDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容"
+        })
+    }
+
+    return {
+        openDrawer
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 不同方向
+:::
+
+::: demo
+
+<template>
+    <lay-button @click="openTopDrawer" type="primary">上</lay-button>
+    <lay-button @click="openBottomDrawer" type="primary">下</lay-button>
+    <lay-button @click="openLeftDrawer" type="primary">左</lay-button>
+    <lay-button @click="openRightDrawer" type="primary">右</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { layer } from "../../../../src/index.ts"
+
+export default {
+  setup() {
+
+    const openTopDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "t"
+        })
+    }
+
+    const openBottomDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "b"
+        })
+    }
+
+    const openLeftDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "l"
+        })
+    }
+
+    const openRightDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "r"
+        })
+    }
+
+    return {
+        openTopDrawer,
+        openBottomDrawer,
+        openLeftDrawer,
+        openRightDrawer,
+    }
+  }
+}
+</script>
+
+:::

example/docs/zh-CN/components/splitPanel.md

@@ -0,0 +1,138 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-split-panel style="height: 300px">
+        <lay-split-panel-item>A</lay-split-panel-item>
+        <lay-split-panel-item>B</lay-split-panel-item>
+        <lay-split-panel-item>C</lay-split-panel-item>
+    </lay-split-panel>
+</div>
+</template>
+
+<script>
+
+export default {
+  setup() {
+  }
+}
+</script>
+
+:::
+
+::: title 自定义比例
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-split-panel style="height: 300px">
+        <lay-split-panel-item :space="30">1</lay-split-panel-item>
+        <lay-split-panel-item :space="20">2</lay-split-panel-item>
+        <lay-split-panel-item :space="50">3</lay-split-panel-item>
+    </lay-split-panel>
+</div>
+</template>
+
+<script>
+
+export default {
+  setup() {
+  }
+}
+</script>
+
+:::
+
+::: title 垂直布局
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-split-panel :vertical="true" style="height: 600px; width: 100%">
+        <lay-split-panel-item>1</lay-split-panel-item>
+        <lay-split-panel-item>2</lay-split-panel-item>
+        <lay-split-panel-item>3</lay-split-panel-item>
+    </lay-split-panel>
+</div>
+</template>
+
+<script>
+
+export default {
+  setup() {
+  }
+}
+</script>
+
+:::
+
+::: title 组合用法
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-split-panel style="height: 600px;">
+        <lay-split-panel-item :space="60">
+            <lay-split-panel :vertical="true" style="height: 600px; width: 100%">
+                <lay-split-panel-item :space="40">1</lay-split-panel-item>
+                <lay-split-panel-item :space="40">2</lay-split-panel-item>
+            </lay-split-panel>
+        </lay-split-panel-item>
+        <lay-split-panel-item :space="40">2</lay-split-panel-item>
+    </lay-split-panel>
+</div>
+</template>
+
+<script>
+
+export default {
+  setup() {
+  }
+}
+</script>
+
+:::
+
+::: title splitPanel属性
+:::
+
+::: table
+
+| 属性  | 描述 | 类型 |可选值 | 默认值|
+| ----- | ---- | ------ | ---| ---|
+| vertical | 是否垂直布局 | Boolean |`true` `false`| false |
+| minSize | 块拉动最小范围(按像素 `px`) | number | - | 50  |
+:::
+
+::: title splitPanelItem属性
+:::
+
+::: table
+
+| 属性  | 描述 | 类型 |可选值 | 默认值|
+| ----- | ---- | ------ | ---| ---|
+| space | 默认每个站多大比例（`%`）, 设置一个，<br/> 其他的都需要设置，合计为（`100` ） | number | - | 按照个数平分 |
+:::
+
+
+::: comment
+:::
+
+::: previousNext splitPanel
+:::

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

@@ -11,6 +11,20 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="0.3.x">
+    <ul> 
+      <a name="0-3-5"> </a> 
+      <li> 
+        <h3>0.3.5 <span class="layui-badge-rim">2022-01-24</span></h3> 
+        <ul> 
+          <li>[新增] split-panel 分割面板, 高度灵活的布局组件。</li>
+          <li>[新增] layer 弹层 type 属性 drawer 可选值, 提供抽屉模式。</li>
+          <li>[修复] tab-item 组件 closable 属性警告, 兼容 string 类型。</li>
+          <li>[修复] dropdown 下拉菜单 content 显示位置问题。</li>
+          <li>[升级] icons-vue 1.0.3 版本。</li>
+          <li>[升级] layer-vue 1.3.1 版本。</li>
+        </ul> 
+      </li>
+    </ul>
     <ul> 
       <a name="0-3-4"> </a> 
       <li> 

example/docs/zh-CN/guide/member.md

@@ -129,7 +129,7 @@
             莫名点
         </lay-col>
         <lay-col md="8">
-            焦点：skeleton step
+            焦点：skeleton step splitPanel
         </lay-col>
         <lay-col md="4">
             地点：中国 上海

example/src/layouts/Layout.vue

@@ -43,7 +43,7 @@
           </a>
         </li>
         <li class="layui-nav-item">
-          <a href="javascript:void(0)"> 0.3.4 </a>
+          <a href="javascript:void(0)"> 0.3.5 </a>
         </li>
       </ul>
     </lay-header>
@@ -53,12 +53,21 @@
 <script>
 import { ref, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import menu from '../view/utils/menus'
 export default {
   setup() {
     const route = useRoute()
     const router = useRouter()
     const currentPath = ref('/zh-CN/guide')
 
+    const menus = []
+
+    menu.forEach(m => {
+      m.children.forEach(c => {
+        menus.push(c);
+      })
+    })
+
     watch(
       () => route.path,
       (val) => {
@@ -70,277 +79,6 @@ export default {
       }
     )
 
-    const menus = [
-      {
-        id: 1,
-        title: '介绍',
-        subTitle: 'introduce',
-        path: '/zh-CN/guide/introduce',
-      },
-      {
-        id: 2,
-        title: '安装',
-        subTitle: 'get started',
-        path: '/zh-CN/guide/getStarted',
-      },
-      {
-        id: 3,
-        title: '更新',
-        subTitle: 'change log',
-        path: '/zh-CN/guide/changelog',
-      },
-      {
-        id: 4,
-        title: '布局',
-        subTitle: 'layout',
-        path: '/zh-CN/components/layout',
-      },
-      {
-        id: 5,
-        title: '容器',
-        subTitle: 'container',
-        path: '/zh-CN/components/container',
-      },
-      {
-        id: 6,
-        title: '按钮',
-        subTitle: 'button',
-        path: '/zh-CN/components/button',
-      },
-      {
-        id: 7,
-        title: '图标',
-        subTitle: 'iconfont',
-        path: '/zh-CN/components/icon',
-      },
-      {
-        id: 8,
-        title: '面板',
-        subTitle: 'panel',
-        path: '/zh-CN/components/panel',
-      },
-      {
-        id: 9,
-        title: '卡片',
-        subTitle: 'card',
-        path: '/zh-CN/components/card',
-      },
-      {
-        id: 10,
-        title: '动画',
-        subTitle: 'animation',
-        path: '/zh-CN/components/animation',
-      },
-      {
-        id: 11,
-        title: '栅格',
-        subTitle: 'grid',
-        path: '/zh-CN/components/grid',
-      },
-      {
-        id: 12,
-        title: '表单',
-        subTitle: 'form',
-        path: '/zh-CN/components/form',
-      },
-      {
-        id: 13,
-        title: '徽章',
-        subTitle: 'badge',
-        path: '/zh-CN/components/badge',
-      },
-      {
-        id: 14,
-        title: '区块',
-        subTitle: 'block',
-        path: '/zh-CN/components/block',
-      },
-      {
-        id: 15,
-        title: '分割',
-        subTitle: 'line',
-        path: '/zh-CN/components/line',
-      },
-      {
-        id: 16,
-        title: '菜单',
-        subTitle: 'nav',
-        path: '/zh-CN/components/menu',
-      },
-      {
-        id: 17,
-        title: '面包屑',
-        subTitle: 'breadcrumb',
-        path: '/zh-CN/components/breadcrumb',
-      },
-      {
-        id: 18,
-        title: '进度',
-        subTitle: 'progress',
-        path: '/zh-CN/components/progress',
-      },
-      {
-        id: 19,
-        title: '时间线',
-        subTitle: 'timeline',
-        path: '/zh-CN/components/timeline',
-      },
-      {
-        id: 20,
-        title: '颜色',
-        subTitle: 'color',
-        path: '/zh-CN/components/color',
-      },
-      {
-        id: 21,
-        title: '折叠面板',
-        subTitle: 'collapse',
-        path: '/zh-CN/components/collapse',
-      },
-      {
-        id: 22,
-        title: '表格',
-        subTitle: 'table',
-        path: '/zh-CN/components/table',
-      },
-      {
-        id: 23,
-        title: '头像',
-        subTitle: 'avatar',
-        path: '/zh-CN/components/avatar',
-      },
-      {
-        id: 24,
-        title: '字段',
-        subTitle: 'field',
-        path: '/zh-CN/components/field',
-      },
-      {
-        id: 25,
-        title: '空',
-        subTitle: 'empty',
-        path: '/zh-CN/components/empty',
-      },
-      {
-        id: 26,
-        title: '评分',
-        subTitle: 'rate',
-        path: '/zh-CN/components/rate',
-      },
-      {
-        id: 27,
-        title: '下拉菜单',
-        subTitle: 'dropdown',
-        path: '/zh-CN/components/dropdown',
-      },
-      {
-        id: 28,
-        title: '选项卡',
-        subTitle: 'tab',
-        path: '/zh-CN/components/tab',
-      },
-      {
-        id: 29,
-        title: '图标选择',
-        subTitle: 'iconPicker',
-        path: '/zh-CN/components/iconPicker',
-      },
-      {
-        id: 29,
-        title: '分页',
-        subTitle: 'page',
-        path: '/zh-CN/components/page',
-      },
-      {
-        id: 30,
-        title: '树形组件',
-        subTitle: 'tree',
-        path: '/zh-CN/components/tree',
-      },
-      {
-        id: 31,
-        title: '穿梭框',
-        subTitle: 'transfer',
-        path: '/zh-CN/components/transfer',
-      },
-      {
-        id: 32,
-        title: '复选框',
-        subTitle: 'checkbox',
-        path: '/zh-CN/components/checkbox',
-      },
-      {
-        id: 33,
-        title: '单选框',
-        subTitle: 'radio',
-        path: '/zh-CN/components/radio',
-      },
-      {
-        id: 34,
-        title: '输入框',
-        subTitle: 'input',
-        path: '/zh-CN/components/input',
-      }, 
-      {
-        id: 341,
-        title: '数字输入框',
-        subTitle: 'inputNumber',
-        path: '/zh-CN/components/inputNumber',
-      },
-      {
-        id: 35,
-        title: '文本域',
-        subTitle: 'textarea',
-        path: '/zh-CN/components/textarea',
-      },
-      {
-        id: 36,
-        title: '开关',
-        subTitle: 'switch',
-        path: '/zh-CN/components/switch',
-      },
-      {
-        id: 37,
-        title: '滑块',
-        subTitle: 'slider',
-        path: '/zh-CN/components/slider',
-      },
-      {
-        id: 38,
-        title: '轮播',
-        subTitle: 'carousel',
-        path: '/zh-CN/components/carousel',
-      },
-      {
-        id: 39,
-        title: '下拉选择',
-        subTitle: 'select',
-        path: '/zh-CN/components/select',
-      },
-      {
-        id: 40,
-        title: '颜色选择器',
-        subTitle: 'colorPicker',
-        path: '/zh-CN/components/colorPicker',
-      }, {
-        id: 41,
-        title: '文字提示',
-        subTitle: 'tooltip',
-        path: '/zh-CN/components/tooltip',
-      }, {
-        id: 42,
-        title: '返回顶部',
-        subTitle: 'backtop',
-        path: '/zh-CN/components/backtop',
-      },
-      {
-        id: 43,
-        title: '数字滚动',
-        subTitle: 'countup',
-        path: '/zh-CN/components/countup',
-      },
-    ]
-
     const handleClick = function (menu) {
       router.push(menu.path)
     }

example/src/router/zh-CN.ts

@@ -76,6 +76,12 @@ const zhCN = [
         component: Component,
         meta: { title: "组件" },
         children: [
+          {
+            path: "/zh-CN/components/splitPanel",
+            component: () =>
+              import("../../docs/zh-CN/components/splitPanel.md"),
+            meta: { title: "分割面板" },
+          },
           {
             path: "/zh-CN/components/skeleton",
             component: () => import("../../docs/zh-CN/components/skeleton.md"),
@@ -315,6 +321,11 @@ const zhCN = [
             component: () => import("../../docs/zh-CN/components/msg.md"),
             meta: { title: "信息" },
           },
+          {
+            path: "/zh-CN/components/drawer",
+            component: () => import("../../docs/zh-CN/components/drawer.md"),
+            meta: { title: "抽屉" },
+          },
           {
             path: "/zh-CN/components/backtop",
             component: () => import("../../docs/zh-CN/components/backtop.md"),

example/src/view/index.vue

@@ -26,7 +26,7 @@
           >
         </div>
         <div class="site-version">
-          <span>当前版本：v<cite class="site-showv">0.3.4</cite></span>
+          <span>当前版本：v<cite class="site-showv">0.3.5</cite></span>
           <span
             ><router-link
               class="layui-inline site-down"
@@ -34,7 +34,7 @@
               >更新日志</router-link
             ></span
           >
-          <span>下载量：<em class="site-showdowns">3124</em></span>
+          <span>下载量：<em class="site-showdowns">4680</em></span>
         </div>
       </div>
       <div class="site-banner-other">
@@ -44,7 +44,7 @@
           rel="nofollow"
           class="site-star"
         >
-          <i class="layui-icon"></i> Star <cite id="getStars">544</cite>
+          <i class="layui-icon"></i> Star <cite id="getStars">612</cite>
         </a>
         <a
           href="https://gitee.com/layui-vue"

example/src/view/utils/menus.ts

@@ -333,6 +333,12 @@ const menus = [
         subTitle: "msg",
         path: "/zh-CN/components/msg",
       },
+      {
+        id: 94,
+        title: "抽屉",
+        subTitle: "drawer",
+        path: "/zh-CN/components/drawer",
+      },
     ],
   },
 ];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "author": "sleeprite",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@layui/hooks-vue": "^0.1.6",
-    "@layui/icons-vue": "^1.0.2",
-    "@layui/layer-vue": "^1.2.5",
+    "@layui/icons-vue": "^1.0.3",
+    "@layui/layer-vue": "^1.3.1",
     "async-validator": "^4.0.7",
     "countup.js": "^2.0.8",
     "evtd": "^0.2.3",