feat(slider): 初步集成 slider 滑块组件

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

@@ -1,3 +1,6 @@
+::: field 后台布局
+:::
+
 <br>
 
 <img src="../../../src/assets/layout.png"/>
@@ -5,7 +8,7 @@
 <br>
 <br>
 
-layui 之所以赢得如此多人的青睐，更多是在于它「前后界面兼备」的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。layui 致力于让每一位开发者都能轻松搭建自己的管理界面。下面是演示代码 :
+<p>layui 之所以赢得如此多人的青睐，更多是在于它「前后界面兼备」的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。layui 致力于让每一位开发者都能轻松搭建自己的管理界面。下面是演示代码 :</p>
 
 <br>
 

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

@@ -0,0 +1,42 @@
+::: demo
+
+<template>
+  <lay-slider></lay-slider>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-slider :vertical="vertical"></lay-slider>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const vertical = ref(true)
+
+    return {
+        vertical
+    }
+  }
+}
+</script>
+
+:::

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

@@ -1,7 +1,13 @@
-::: demo
+::: field 更新记录
+:::
 
+::: demo
 <template>
     <lay-timeline>
+        <lay-timeline-item title="0.1.4">
+          [新增] menu 菜单 title 插槽，允许自定义菜单项。<br>
+          [新增] menu 菜单 title 插槽，允许自定义菜单项。<br>
+        </lay-timeline-item>
         <lay-timeline-item title="0.1.1">
           [新增] menu 菜单 title 插槽，允许自定义菜单项。<br>
           [新增] table 表格 toolbar 插槽, 用于自定义工具栏。<br>

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

@@ -1,3 +1,6 @@
+::: field 快速上手
+:::
+
 <br>
 
 使用 npm 下载

docs/src/layouts/Layout.vue

@@ -31,7 +31,7 @@
             </a>
           </li>
           <li class="layui-nav-item">
-            <a href="javascript:void(0)"> 0.1.3 </a>
+            <a href="javascript:void(0)"> 0.1.4 </a>
           </li>
         </ul>
       </lay-header>
@@ -74,12 +74,15 @@ export default {
   setup() {
     const route = useRoute()
     const router = useRouter()
-    const currentPath = ref('hahaha')
+    const currentPath = ref('/zh-CN/guide')
 
     watch(
       () => route.path,
-      (newValue, oldValue) => {
+      (val) => {
-        currentPath.value = route.path
+        currentPath.value = val
+      },{
+        immediate: true,
+        deep: true
       }
     )
 
@@ -87,19 +90,19 @@ export default {
       {
         id: 1,
         title: '介绍',
-        subTitle: 'Getting Started',
+        subTitle: 'introduce',
-        path: '/zh-CN/guide',
+        path: '/zh-CN/guide/introduce',
       },
       {
         id: 2,
         title: '安装',
-        subTitle: 'install',
+        subTitle: 'get started',
-        path: '/zh-CN/guide/install',
+        path: '/zh-CN/guide/getStarted',
       },
       {
         id: 3,
         title: '更新',
-        subTitle: 'changelog',
+        subTitle: 'change log',
         path: '/zh-CN/guide/changelog',
       },
       {
@@ -301,6 +304,11 @@ export default {
         title: '开关',
         subTitle: 'switch',
         path: '/zh-CN/components/switch',
+      },{
+        id: 37,
+        title: '滑块',
+        subTitle: 'slider',
+        path: '/zh-CN/components/slider',
       }
     ]
 

docs/src/plugin/create-container.ts

@@ -23,7 +23,7 @@ export default function createContainer(
         if (token.nesting === 1) {
           return `<lay-field title="${
             info || defaultTitle
-          }" style="margin-top:40px">`
+          }" style="margin-top:10px;margin-bottom: 10px;">`
         } else {
           return '</lay-field>\n'
         }

docs/src/router/zh-CN.ts

@@ -3,18 +3,18 @@ import BaseLayout from '../layouts/Layout.vue'
 const zhCN = [
   {
     path: '/',
-    redirect: '/zh-CN/guide/',
+    redirect: '/zh-CN/guide/introduce',
     component: BaseLayout,
     meta: { title: '指南', icon: 'el-icon-position' },
     children: [
       {
-        path: '/zh-CN/guide/',
+        path: '/zh-CN/guide/introduce',
-        component: () => import('../../docs/zh-CN/guide/home.md'),
+        component: () => import('../../docs/zh-CN/guide/introduce.md'),
         meta: { title: '介绍' },
       },
       {
-        path: '/zh-CN/guide/install',
+        path: '/zh-CN/guide/getStarted',
-        component: () => import('../../docs/zh-CN/guide/install.md'),
+        component: () => import('../../docs/zh-CN/guide/getStarted.md'),
         meta: { title: '安装' },
       },
       {
@@ -194,6 +194,10 @@ const zhCN = [
         path: '/zh-CN/components/switch',
         component: () => import('../../docs/zh-CN/components/switch.md'),
         meta: { title: '开关' },
+      },{
+        path: '/zh-CN/components/slider',
+        component: () => import('../../docs/zh-CN/components/slider.md'),
+        meta: { title: '滑块' },
       },
     ],
   },

docs/src/styles/vars.css

@@ -1,32 +1,9 @@
 :root {
   --c-white: #ffffff;
   --c-black: #000000;
-
-  --c-divider-light: rgba(60, 60, 67, 0.12);
-  --c-divider-dark: rgba(84, 84, 88, 0.48);
-
-  --c-text-light-1: #2c3e50;
-  --c-text-light-2: #476582;
-  --c-text-light-3: #90a4b7;
-
-  --c-brand-light: #4abf8a;
-
-  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
-  --shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
-  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
-  --shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
-  --shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
 }
 
 :root {
-  --c-divider: var(--c-divider-light);
-
-  --c-text: var(--c-text-light-1);
-  --c-text-light: var(--c-text-light-2);
-  --c-text-lighter: var(--c-text-light-3);
-
-  --c-bg: var(--c-white);
-
   --code-line-height: 24px;
   --code-font-family: var(--font-family-mono);
   --code-font-size: 14px;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "a component library for Vue 3 base on layui-vue",
   "main": "lib/layui-vue.umd.js",
   "module": "lib/layui-vue.es.js",

src/index.ts

@@ -54,6 +54,7 @@ import LayTable from './module/table/index'
 import LayPage from './module/page/index'
 import LayTransfer from './module/transfer/index'
 import LayCheckboxGroup from './module/checkboxGroup/index'
+import LaySlider from './module/slider/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -107,7 +108,8 @@ const components: Record<string, IDefineComponent> = {
   LayTable,
   LayPage,
   LayTransfer,
-  LayCheckboxGroup
+  LayCheckboxGroup,
+  LaySlider
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -175,6 +177,7 @@ export {
   LayPage,
   LayTransfer,
   LayCheckboxGroup,
+  LaySlider,
   install,
 }
 

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

src/module/slider/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="layui-slider layui-slider-vertical" style="height: 200px" v-if="vertical">
+    <div class="layui-slider-tips"></div>
+    <div
+      class="layui-slider-bar"
+      style="background: #009688; height: 0%; bottom: 0"
+    ></div>
+    <div class="layui-slider-wrap" style="bottom: 0%">
+      <div
+        class="layui-slider-wrap-btn"
+        style="border: 2px solid #009688"
+      ></div>
+    </div>
+  </div>
+
+  <div class="layui-slider" v-else>
+    <div class="layui-slider-tips"></div>
+    <div
+      class="layui-slider-bar"
+      style="background: #009688; width: 0%; left: 0"
+    ></div>
+    <div class="layui-slider-wrap" style="left: 0%">
+      <div
+        class="layui-slider-wrap-btn"
+        style="border: 2px solid #009688"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup name="LaySlider" lang="ts">
+import { defineProps } from 'vue'
+
+const props =
+  defineProps<{
+    vertical?: boolean
+  }>()
+</script>