feat(tree): add tree component and wip workspace

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

@@ -55,3 +55,8 @@ export default {
 </script>
 
 :::
+
+
+|  |  |  |
+|--|--|--|
+| selectedKey | 默认选择 | -- |

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

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

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

@@ -75,3 +75,8 @@ export default {
 </script>
 
 :::
+
+|  |  |  |
+|--|--|--|
+| v-model | 当前激活 | -- |
+| type | 主题样式 | `card` `brief` |

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

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

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

@@ -2,6 +2,8 @@
 
 <template>
     <lay-timeline>
+        <lay-timeline-item title="0.0.14">
+        </lay-timeline-item>
         <lay-timeline-item title="0.0.13">
         </lay-timeline-item>
         <lay-timeline-item title="0.0.12">

docs/src/layouts/Layout.vue

@@ -254,6 +254,11 @@ export default {
         title: '图标选择',
         subTitle: 'iconPicker',
         path: '/zh-CN/components/iconPicker',
+      },{
+        id: 29,
+        title: '分页',
+        subTitle: 'page',
+        path: '/zh-CN/components/page',
       },
       {
         id: 30,

docs/src/router/zh-CN.ts

@@ -153,6 +153,11 @@ const zhCN = [
         component: () => import('../../docs/zh-CN/components/tree.md'),
         meta: { title: '树形组件' }
       },
+      {
+        path: '/zh-CN/components/page',
+        component: () => import('../../docs/zh-CN/components/page.md'),
+        meta: { title: '分页' },
+      }
     ],
   },
 ]

src/index.ts

@@ -50,6 +50,8 @@ import LayDropdownItem from './module/dropdownItem/index'
 import LayTab from './module/tab/index'
 import LayTabItem from './module/tabItem/index'
 import LayTree from './module/tree/index'
+import LayTable from './module/table/index'
+import LayPage from './module/page/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -99,7 +101,9 @@ const components: Record<string, IDefineComponent> = {
   LayTab,
   LayTabItem,
   LayIconPicker,
-  LayTree
+  LayTree,
+  LayTable,
+  LayPage
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -163,6 +167,8 @@ export {
   LayTabItem,
   LayIconPicker,
   LayTree,
+  LayTable,
+  LayPage,
   install,
 }
 

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

src/module/page/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="layui-box layui-laypage layui-laypage-default"
+    id="layui-laypage-10"
+  >
+    <span class="layui-laypage-count">共 {{ total }} 条</span
+    ><a
+      href="javascript:;"
+      class="layui-laypage-prev layui-disabled"
+      @click="prev"
+      >上一页</a
+    ><span class="layui-laypage-curr"
+      ><em class="layui-laypage-em"></em><em>1</em></span
+    >
+    <a href="javascript:;" data-page="5">5</a>
+    <span class="layui-laypage-spr">…</span
+    ><a
+      href="javascript:;"
+      class="layui-laypage-last"
+      title="尾页"
+      data-page="10"
+      >10</a
+    ><a href="javascript:;" class="layui-laypage-next" @click="next()">下一页</a
+    ><span class="layui-laypage-limits"
+      ><select lay-ignore="">
+        <option value="10" selected="">{{ limit }} 条/页</option>
+        <option value="20">20 条/页</option>
+        <option value="30">30 条/页</option>
+        <option value="40">40 条/页</option>
+        <option value="50">50 条/页</option>
+      </select></span
+    ><a href="javascript:;" data-page="1" class="layui-laypage-refresh"
+      ><i class="layui-icon layui-icon-refresh"></i></a
+    ><span class="layui-laypage-skip"
+      >到第<input type="text" min="1" value="1" class="layui-input" />页<button
+        type="button"
+        class="layui-laypage-btn"
+      >
+        确定
+      </button></span
+    >
+  </div>
+</template>
+
+<script setup name="LayPage" lang="ts">
+import { defineProps, ref } from 'vue'
+
+const props =
+  defineProps<{
+    total: number
+    limit: number
+  }>()
+
+const current = ref(1)
+
+const prev = function () {
+  current.value--
+}
+
+const next = function () {
+  current.value--
+}
+</script>

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

src/module/table/index.vue

@@ -0,0 +1,321 @@
+<template>
+  <div id="LAY_preview">
+    <table class="layui-hide" id="test" lay-filter="test"></table>
+    <div
+      class="layui-form layui-border-box layui-table-view layui-table-view-1"
+      lay-filter="LAY-TABLE-FORM-DF-1"
+      lay-id="test"
+    >
+      <div class="layui-table-tool">
+        <div class="layui-table-tool-self">
+          <div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS">
+            <i class="layui-icon layui-icon-cols"></i>
+          </div>
+          <div class="layui-inline" title="导出" lay-event="LAYTABLE_EXPORT">
+            <i class="layui-icon layui-icon-export"></i>
+          </div>
+          <div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT">
+            <i class="layui-icon layui-icon-print"></i>
+          </div>
+        </div>
+      </div>
+      <div class="layui-table-box">
+        <div class="layui-table-header">
+          <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
+            <thead>
+              <tr>
+                <th
+                  data-field="0"
+                  data-key="1-0-0"
+                  data-unresize="true"
+                  class="layui-table-col-special"
+                >
+                  <div
+                    class="
+                      layui-table-cell
+                      laytable-cell-1-0-0 laytable-cell-checkbox
+                    "
+                  >
+                    <input
+                      type="checkbox"
+                      name="layTableCheckbox"
+                      lay-skin="primary"
+                      lay-filter="layTableAllChoose"
+                    />
+                    <div
+                      class="layui-unselect layui-form-checkbox"
+                      lay-skin="primary"
+                    >
+                      <i class="layui-icon layui-icon-ok"></i>
+                    </div>
+                  </div>
+                </th>
+                <th
+                  data-field="id"
+                  data-key="1-0-1"
+                  data-unresize="true"
+                  class="layui-unselect"
+                >
+                  <div class="layui-table-cell laytable-cell-1-0-1">
+                    <span>ID</span
+                    ><span class="layui-table-sort layui-inline"
+                      ><i
+                        class="layui-edge layui-table-sort-asc"
+                        title="升序"
+                      ></i
+                      ><i
+                        class="layui-edge layui-table-sort-desc"
+                        title="降序"
+                      ></i
+                    ></span>
+                  </div>
+                </th>
+                <th data-field="username" data-key="1-0-2" class="">
+                  <div class="layui-table-cell laytable-cell-1-0-2">
+                    <span>用户名</span>
+                  </div>
+                </th>
+                <th data-field="email" data-key="1-0-3" class="">
+                  <div class="layui-table-cell laytable-cell-1-0-3">
+                    <span>邮箱</span>
+                  </div>
+                </th>
+                <th
+                  data-field="experience"
+                  data-key="1-0-4"
+                  class="layui-unselect"
+                >
+                  <div class="layui-table-cell laytable-cell-1-0-4">
+                    <span>积分</span
+                    ><span class="layui-table-sort layui-inline"
+                      ><i
+                        class="layui-edge layui-table-sort-asc"
+                        title="升序"
+                      ></i
+                      ><i
+                        class="layui-edge layui-table-sort-desc"
+                        title="降序"
+                      ></i
+                    ></span>
+                  </div>
+                </th>
+                <th data-field="sex" data-key="1-0-5" class="layui-unselect">
+                  <div class="layui-table-cell laytable-cell-1-0-5">
+                    <span>性别</span
+                    ><span class="layui-table-sort layui-inline"
+                      ><i
+                        class="layui-edge layui-table-sort-asc"
+                        title="升序"
+                      ></i
+                      ><i
+                        class="layui-edge layui-table-sort-desc"
+                        title="降序"
+                      ></i
+                    ></span>
+                  </div>
+                </th>
+                <th data-field="logins" data-key="1-0-6" class="layui-unselect">
+                  <div class="layui-table-cell laytable-cell-1-0-6">
+                    <span>登入次数</span
+                    ><span class="layui-table-sort layui-inline"
+                      ><i
+                        class="layui-edge layui-table-sort-asc"
+                        title="升序"
+                      ></i
+                      ><i
+                        class="layui-edge layui-table-sort-desc"
+                        title="降序"
+                      ></i
+                    ></span>
+                  </div>
+                </th>
+                <th data-field="sign" data-key="1-0-7" class="">
+                  <div class="layui-table-cell laytable-cell-1-0-7">
+                    <span>签名</span>
+                  </div>
+                </th>
+                <th data-field="city" data-key="1-0-8" class="">
+                  <div class="layui-table-cell laytable-cell-1-0-8">
+                    <span>城市</span>
+                  </div>
+                </th>
+                <th data-field="ip" data-key="1-0-9" class="">
+                  <div class="layui-table-cell laytable-cell-1-0-9">
+                    <span>IP</span>
+                  </div>
+                </th>
+                <th data-field="joinTime" data-key="1-0-10" class="">
+                  <div class="layui-table-cell laytable-cell-1-0-10">
+                    <span>加入时间</span>
+                  </div>
+                </th>
+                <th
+                  data-field="11"
+                  data-key="1-0-11"
+                  class="layui-table-col-special"
+                >
+                  <div class="layui-table-cell laytable-cell-1-0-11">
+                    <span>操作</span>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+          </table>
+        </div>
+        <div class="layui-table-body layui-table-main">
+          <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
+            <tbody>
+              <tr data-index="0" class="">
+                <td
+                  data-field="0"
+                  data-key="1-0-0"
+                  class="layui-table-col-special"
+                >
+                  <div
+                    class="
+                      layui-table-cell
+                      laytable-cell-1-0-0 laytable-cell-checkbox
+                    "
+                  >
+                    <input
+                      type="checkbox"
+                      name="layTableCheckbox"
+                      lay-skin="primary"
+                    />
+                    <div
+                      class="layui-unselect layui-form-checkbox"
+                      lay-skin="primary"
+                    >
+                      <i class="layui-icon layui-icon-ok"></i>
+                    </div>
+                  </div>
+                </td>
+                <td data-field="id" data-key="1-0-1" class="">
+                  <div class="layui-table-cell laytable-cell-1-0-1">10001</div>
+                </td>
+                <td
+                  data-field="username"
+                  data-key="1-0-2"
+                  data-edit="text"
+                  class=""
+                >
+                  <div class="layui-table-cell laytable-cell-1-0-2">杜甫</div>
+                </td>
+                <td
+                  data-field="email"
+                  data-key="1-0-3"
+                  data-edit="text"
+                  data-content="test@email.com"
+                  class=""
+                >
+                  <div class="layui-table-cell laytable-cell-1-0-3">
+                    <em>test@email.com</em>
+                  </div>
+                </td>
+                <td data-field="experience" data-key="1-0-4" class="">
+                  <div class="layui-table-cell laytable-cell-1-0-4">116</div>
+                </td>
+                <td data-field="sex" data-key="1-0-5" data-edit="text" class="">
+                  <div class="layui-table-cell laytable-cell-1-0-5">男</div>
+                </td>
+                <td data-field="logins" data-key="1-0-6" class="">
+                  <div class="layui-table-cell laytable-cell-1-0-6">108</div>
+                </td>
+                <td data-field="sign" data-key="1-0-7" class="">
+                  <div class="layui-table-cell laytable-cell-1-0-7">
+                    点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。
+                  </div>
+                </td>
+                <td data-field="city" data-key="1-0-8" class="">
+                  <div class="layui-table-cell laytable-cell-1-0-8">
+                    浙江杭州
+                  </div>
+                </td>
+                <td data-field="ip" data-key="1-0-9" class="">
+                  <div class="layui-table-cell laytable-cell-1-0-9">
+                    192.168.0.8
+                  </div>
+                </td>
+                <td data-field="joinTime" data-key="1-0-10" class="">
+                  <div class="layui-table-cell laytable-cell-1-0-10">
+                    2016-10-14
+                  </div>
+                </td>
+                <td
+                  data-field="11"
+                  data-key="1-0-11"
+                  data-off="true"
+                  class="layui-table-col-special"
+                >
+                  <div class="layui-table-cell laytable-cell-1-0-11">
+                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
+                    <a
+                      class="layui-btn layui-btn-danger layui-btn-xs"
+                      lay-event="del"
+                      >删除</a
+                    >
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <div class="layui-table-page">
+      <div id="layui-table-page1">
+        <div
+          class="layui-box layui-laypage layui-laypage-default"
+          id="layui-laypage-1"
+        >
+          <a
+            href="javascript:;"
+            class="layui-laypage-prev layui-disabled"
+            data-page="0"
+            ><i class="layui-icon"></i></a
+          ><span class="layui-laypage-curr"
+            ><em class="layui-laypage-em"></em><em>1</em></span
+          ><a href="javascript:;" data-page="2">2</a
+          ><a href="javascript:;" data-page="3">3</a
+          ><span class="layui-laypage-spr">…</span
+          ><a
+            href="javascript:;"
+            class="layui-laypage-last"
+            title="尾页"
+            data-page="300000"
+            >300000</a
+          ><a href="javascript:;" class="layui-laypage-next" data-page="2"
+            ><i class="layui-icon"></i></a
+          ><span class="layui-laypage-skip"
+            >到第<input
+              type="text"
+              min="1"
+              value="1"
+              class="layui-input"
+            />页<button type="button" class="layui-laypage-btn">
+              确定
+            </button></span
+          ><span class="layui-laypage-count">共 3000000 条</span
+          ><span class="layui-laypage-limits"
+            ><select lay-ignore="">
+              <option value="10" selected="">10 条/页</option>
+              <option value="20">20 条/页</option>
+              <option value="30">30 条/页</option>
+              <option value="40">40 条/页</option>
+              <option value="50">50 条/页</option>
+              <option value="60">60 条/页</option>
+              <option value="70">70 条/页</option>
+              <option value="80">80 条/页</option>
+              <option value="90">90 条/页</option>
+            </select></span
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup name="LayTable" lang="ts">
+</script>
+<style>
+.laytable-cell-1-0-0{ width: 48px; }.laytable-cell-1-0-1{ width: 80px; }.laytable-cell-1-0-2{ width: 120px; }.laytable-cell-1-0-3{ width: 150px; }.laytable-cell-1-0-4{ width: 80px; }.laytable-cell-1-0-5{ width: 80px; }.laytable-cell-1-0-6{ width: 100px; }.laytable-cell-1-0-7{  }.laytable-cell-1-0-8{ width: 100px; }.laytable-cell-1-0-9{ width: 120px; }.laytable-cell-1-0-10{ width: 120px; }.laytable-cell-1-0-11{ width: 150px; }
+</style>