Merge branch 'develop' of https://gitee.com/dingyongya/layui-vue into setup

src/css/layui.css

@@ -2885,12 +2885,10 @@ body .layui-table-tips .layui-layer-content {
   line-height: 60px;
 }
 
-.layui-nav .layui-nav-item a {
+.layui-nav .layui-nav-item >  a {
   display: block;
   padding: 0 30px;
-  color: #fff;
   color: rgba(255, 255, 255, 0.7);
-  -webkit-transition: all 0.3s;
 }
 
 .layui-nav .layui-this:after,
@@ -3010,18 +3008,18 @@ body .layui-table-tips .layui-layer-content {
   line-height: 42px;
 }
 
-.layui-nav-tree .layui-nav-item a {
+.layui-nav-tree .layui-nav-item > a {
   position: relative;
   height: 42px;
   line-height: 42px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  padding: 5px 30px 5px 30px;
 }
 
-.layui-nav-tree .layui-nav-item > a {
-  padding-top: 5px;
-  padding-bottom: 5px;
+.layui-nav-tree .layui-nav-item * {
+  color: rgba(255, 255, 255, 0.7);
 }
 
 .layui-nav-tree .layui-nav-more {

src/index.ts

@@ -70,6 +70,7 @@ import LaySkeleton from "./module/skeleton/index";
 import LaySkeletonItem from "./module/skeletonItem/index";
 import LayStep from "./module/step/index";
 import LayStepItem from "./module/stepItem/index";
+import LaySubMenu from "./module/subMenu/index"
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -136,6 +137,7 @@ const components: Record<string, IDefineComponent> = {
   LayCountUp,
   LayStep,
   LayStepItem,
+  LaySubMenu
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -148,13 +150,9 @@ const install = (app: App, options?: InstallOptions): void => {
 };
 
 export {
-  LayStep,
-  LayStepItem,
-  LaySkeleton,
-  LaySkeletonItem,
   LayRadio,
-  LayIcon,
   LayButton,
+  LayIcon,
   LayBacktop,
   LayLayout,
   LaySide,
@@ -208,7 +206,15 @@ export {
   LayCarousel,
   LayCarouselItem,
   LayColorPicker,
-  LayLayer
+  LayLayer,
+  LayTooltip,
+  LayInputNumber,
+  LaySkeleton,
+  LaySkeletonItem,
+  LayCountUp,
+  LayStep,
+  LayStepItem,
+  LaySubMenu
 };
 
 export { layer };

src/module/menuItem/index.vue

@@ -1,39 +1,12 @@
-<template>
-  <li
-    v-if="slots.default"
-    class="layui-nav-item"
-    :class="[openKeys.includes(id) && isTree ? 'layui-nav-itemed' : '']"
-  >
-    <a href="javascript:void(0)" @click="openHandle">
-      {{ title }}
-      <i class="layui-icon layui-icon-down layui-nav-more"></i>
-    </a>
-    <dl
-      class="layui-nav-child"
-      :class="[
-        openKeys.includes(id) && !isTree ? 'layui-show' : '',
-        !isTree ? 'layui-anim layui-anim-upbit' : '',
-      ]"
-    >
-      <slot></slot>
-    </dl>
-  </li>
+<script lang="ts">
+export default {
+  name: "LayMenuItem"
+}
+</script>
 
-  <li
-    v-else
-    class="layui-nav-item"
-    :class="[selectedKey === id ? 'layui-this' : '']"
-    @click="selectHandle()"
-  >
-    <slot v-if="slots.title" name="title"></slot>
-    <a v-else href="javascript:void(0)">
-      {{ title }}
-    </a>
-  </li>
-</template>
+<script setup lang="ts">
+import { defineProps, inject, Ref, useSlots } from "vue";
 
-<script setup name="LayMenuItem" lang="ts">
-import { defineProps, inject, Ref, ref, useSlots } from "vue";
 const slots = useSlots();
 
 const props = defineProps<{
@@ -41,19 +14,22 @@ const props = defineProps<{
   title: string;
 }>();
 
-const isTree = inject("isTree");
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
-const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
-
-const openHandle = function () {
-  if (openKeys.value.includes(props.id)) {
-    openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
-  } else {
-    openKeys.value.push(props.id);
-  }
-};
 
 const selectHandle = function () {
   selectedKey.value = props.id;
 };
 </script>
+
+<template>
+  <li
+    class="layui-nav-item"
+    :class="[selectedKey === id ? 'layui-this' : '']"
+    @click="selectHandle()"
+  >
+    <a href="javascript:void(0)">
+      <slot v-if="slots.default"></slot>
+      <span v-else>{{ title }}</span>
+    </a>
+  </li>
+</template>

src/module/slider/index.vue

@@ -1,10 +1,27 @@
 <template>
   <div class="layui-slider-vertical" v-if="vertical">
-    <div ref="rangetracker2" class="layui-slider-vrange" v-if="range">
-      <div class="layui-slider-vertical-btn"></div>
-      <div class="layui-slider-vertical-btn"></div>
+    <div
+      ref="rangetracker2"
+      @mousedown.stop="handle_mousedown"
+      class="layui-slider-vrange"
+      v-if="range"
+    >
+      <div
+        :style="{ bottom: verticalRangeValue[1] + '%' }"
+        class="layui-slider-vertical-btn"
+      ></div>
+      <div
+        :style="{ bottom: verticalRangeValue[0] + '%' }"
+        class="layui-slider-vertical-btn"
+      ></div>
       <div class="layui-slider-vertical-line"></div>
-      <div class="layui-slider-vertical-rate"></div>
+      <div
+        :style="{
+          height: verticalRangeValue[1] - verticalRangeValue[0] + '%',
+          bottom: verticalRangeValue[0] + '%',
+        }"
+        class="layui-slider-vertical-rate"
+      ></div>
     </div>
 
     <div
@@ -84,7 +101,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps, reactive, Ref, ref } from "vue";
+import { defineProps, reactive, Ref, ref, toRef } from "vue";
 import { on, off } from "evtd";
 import "./index.less";
 
@@ -98,6 +115,8 @@ interface LaySliderProps {
   step?: number;
   disabled?: boolean;
   range?: boolean;
+  verticalrange?: number[];
+  standardrange?: number[];
 }
 
 const props = withDefaults(defineProps<LaySliderProps>(), {
@@ -106,17 +125,14 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
   disabled: false,
 });
 
-let rangeValue: Ref<number[]> = ref([0, 0]);
-if (Array.isArray(props.modelValue)) {
-  // eslint-disable-next-line vue/no-step-props-destructure
-  rangeValue.value = props.modelValue;
-}
+// let rangeValue: Ref<number[]> = ref([0, 0]);
+let rangeValue: Ref<number[]> | any = toRef(props, "standardrange");
+// if (Array.isArray(props.modelValue)) {
+//   // eslint-disable-next-line vue/no-setup-props-destructure
+//   rangeValue.value = props.modelValue;
+// }
 
-let verticalRangeValue: Ref<number[]> = ref([0, 0]);
-if (Array.isArray(props.modelValue)) {
-  // eslint-disable-next-line vue/no-step-props-destructure
-  verticalRangeValue.value = props.modelValue;
-}
+let verticalRangeValue: Ref<number[]> | any = toRef(props, "verticalrange");
 
 const standardtracker = ref<HTMLElement | null>(null);
 const verticaltracker = ref<HTMLElement | null>(null);
@@ -227,7 +243,7 @@ const starndardRangeMove = (e: MouseEvent) => {
     rangeValue.value[0] = 0;
   } else {
     let rate = (distance / tracker_rect.width) * 100;
-    let idx = moveNeighbor(Math.floor(rate));
+    let idx = moveNeighbors(Math.floor(rate), rangeValue);
     rangeValue.value[idx] = Math.floor(rate);
     if (rangeValue.value[1] > 100) {
       rangeValue.value[1] = 100;
@@ -239,12 +255,33 @@ const starndardRangeMove = (e: MouseEvent) => {
   emit("update:modelValue", rangeValue.value);
 };
 
-const verticalRangeMove = (e: MouseEvent) => {};
-
-function moveNeighbor(rate: number) {
-  let d1 = Math.abs(rate - rangeValue.value[0]);
-  let d2 = Math.abs(rate - rangeValue.value[1]);
+const verticalRangeMove = (e: MouseEvent) => {
+  if (!rangetracker2.value) {
+    return;
+  }
+  let tracker_rect = rangetracker2.value.getBoundingClientRect();
+  let origin_bottom = tracker_rect.bottom;
+  let point_bottom = e.clientY;
+  let distance = (point_bottom - origin_bottom) * -1;
+  if (distance < 0) {
+    rangeValue.value[0] = 0;
+  } else {
+    let rate = (distance / tracker_rect.height) * 100;
+    let idx = moveNeighbors(Math.floor(rate), verticalRangeValue);
+    verticalRangeValue.value[idx] = Math.floor(rate);
+    if (verticalRangeValue.value[1] > 100) {
+      verticalRangeValue.value[1] = 100;
+    }
+    if (verticalRangeValue.value[0] < 0) {
+      verticalRangeValue.value[0] = 0;
+    }
+  }
+  emit("update:modelValue", verticalRangeValue.value);
+};
 
+function moveNeighbors(rate: number, rangeValues: any) {
+  let d1 = Math.abs(rate - rangeValues.value[0]);
+  let d2 = Math.abs(rate - rangeValues.value[1]);
   if (d1 > d2) {
     return 1;
   } else {

src/module/subMenu/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 || "laySubMenu", Component);
+};
+
+export default Component as IDefineComponent;

src/module/subMenu/index.vue

@@ -0,0 +1,57 @@
+<script lang="ts">
+export default {
+  name: "LaySubMenu",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, defineProps, inject, Ref, useSlots } from "vue";
+
+const slots = useSlots();
+
+const props = defineProps<{
+  id: string;
+  title: string;
+}>();
+
+const isTree = inject("isTree");
+const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
+const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
+
+const openHandle = function () {
+  if (openKeys.value.includes(props.id)) {
+    openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
+  } else {
+    openKeys.value.push(props.id);
+  }
+};
+
+const isOpen = computed(() => {
+  return openKeys.value.includes(props.id);
+});
+</script>
+
+<template>
+  <li
+    class="layui-nav-item"
+    :class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
+  >
+    <a href="javascript:void(0)" @click="openHandle()">
+      <slot v-if="slots.title" name="title"></slot>
+      <span v-else>{{ title }}</span>
+      <i
+        :class="[isOpen && !isTree ? 'layui-nav-mored' : '']"
+        class="layui-icon layui-icon-down layui-nav-more"
+      ></i>
+    </a>
+    <dl
+      class="layui-nav-child"
+      :class="[
+        isOpen && !isTree ? 'layui-show' : '',
+        !isTree ? 'layui-anim layui-anim-upbit' : '',
+      ]"
+    >
+      <slot></slot>
+    </dl>
+  </li>
+</template>

src/module/timelineItem/index.vue

@@ -1,6 +1,9 @@
 <template>
   <li class="layui-timeline-item">
-    <i class="layui-icon layui-timeline-axis"></i>
+    <i class="layui-icon layui-timeline-axis" v-if="slot.dot">
+      <slot name="dot"></slot>
+    </i>
+    <i class="layui-icon layui-timeline-axis" v-else></i>
     <div class="layui-timeline-content layui-text">
       <div v-if="simple" class="layui-timeline-title">
         {{ title }}
@@ -20,7 +23,9 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { defineProps } from "vue";
+import { defineProps, useSlots } from "vue";
+
+const slot = useSlots();
 
 export interface LayTimelineItemProps {
   title: string;