Merge branch 'next' into doc-demand

package/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.0.6",
+  "version": "1.0.7-alpha.1",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

package/component/src/component/menu/index.less

@@ -309,3 +309,8 @@
     background-color: transparent;
   }
 }
+
+.layui-nav-child-spacing .layui-nav-item .layui-nav-child {
+  padding-left: 10px;
+  box-sizing: border-box;
+}

package/component/src/component/menu/index.vue

@@ -17,9 +17,15 @@ export interface LayMenuProps {
   level?: boolean | string;
   collapse?: boolean | string;
   collapseTransition?: boolean | string;
+  childSpacing?: boolean;
 }
 
-const emit = defineEmits(["update:selectedKey", "update:openKeys"]);
+const emit = defineEmits([
+  "update:selectedKey",
+  "update:openKeys",
+  "changeSelectedKey",
+  "changeOpenKeys",
+]);
 
 const props = withDefaults(defineProps<LayMenuProps>(), {
   selectedKey: "",
@@ -30,6 +36,7 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
   level: true,
   collapse: false,
   collapseTransition: true,
+  childSpacing: false,
 });
 
 const isTree = computed(() => props.tree);
@@ -43,6 +50,7 @@ const openKeys = computed({
   },
   set(val) {
     emit("update:openKeys", val);
+    emit("changeOpenKeys", val);
   },
 });
 
@@ -52,6 +60,7 @@ const selectedKey = computed({
   },
   set(val) {
     emit("update:selectedKey", val);
+    emit("changeSelectedKey", val);
   },
 });
 
@@ -59,12 +68,10 @@ watch(
   () => props.collapse,
   () => {
     if (props.collapse) {
-      // 删除所有打开
       oldOpenKeys.value = props.openKeys;
-      emit("update:openKeys", []);
+      openKeys.value = [];
     } else {
-      // 赋值所有打开
-      emit("update:openKeys", oldOpenKeys.value);
+      openKeys.value = oldOpenKeys.value;
     }
   },
   { immediate: true }
@@ -86,6 +93,7 @@ provide("isCollapseTransition", isCollapseTransition);
       tree ? 'layui-nav-tree' : '',
       theme === 'dark' ? 'layui-nav-dark' : 'layui-nav-light',
       collapse ? 'layui-nav-collapse' : '',
+      childSpacing ? 'layui-nav-child-spacing' : '',
     ]"
   >
     <slot></slot>

package/component/src/component/side/index.vue

@@ -13,12 +13,13 @@ export interface LaySideProps {
 }
 
 const props = withDefaults(defineProps<LaySideProps>(), {
-  width: "200",
+  width: "200px",
 });
 
 const styles = computed<CSSProperties>(() => {
   return {
-    width: `${props.width}px`,
+    "flex": `0 0 ${props.width}`,
+    "width": `${props.width}`
   };
 });
 </script>

package/component/src/component/slider/Standard.vue

@@ -7,8 +7,9 @@ export default {
 <script setup lang="ts">
 import { Ref, ref } from "vue";
 import { on, off } from "evtd";
-import { throttle, handle_select } from "./utils/index";
+// import { throttle, handle_select } from "./utils/index";
 import LayTooltip from "../tooltip/index.vue";
+import { throttle, handle_select, makeDots } from "./utils/index";
 
 interface Prop {
   val?: number | Array<number>;
@@ -16,6 +17,7 @@ interface Prop {
   step?: number;
   min?: number;
   max?: number;
+  showDots?: boolean;
 }
 
 const props = withDefaults(defineProps<Prop>(), {
@@ -24,6 +26,7 @@ const props = withDefaults(defineProps<Prop>(), {
   step: 0,
   min: 0,
   max: 100,
+  showDots: false,
 });
 
 const moveAction = throttle(standardMove);
@@ -88,6 +91,15 @@ function calcWithStep(
     }
   }
 }
+// 断点
+const dots = makeDots(props);
+const focusDot = (val: number) => {
+  emit("link-val-hook", val);
+};
+// const focusClick = (e: MouseEvent)=>{
+//   console.log(e);
+//   standardMove(e)
+// }
 </script>
 
 <template>
@@ -111,5 +123,13 @@ function calcWithStep(
       :class="[disabled ? 'layui-slider-disabled disable-line' : '']"
     ></div>
     <div class="layui-slider-line-v"></div>
+    <div
+      v-show="showDots"
+      @click="focusDot(item)"
+      class="layui-slider-dots"
+      v-for="(item, index) in dots"
+      :key="index"
+      :style="{ left: item + '%' }"
+    ></div>
   </div>
 </template>

package/component/src/component/slider/StandardRange.vue

@@ -7,15 +7,16 @@ export default {
 <script setup lang="ts">
 import { ref, toRef, Ref } from "vue";
 import { on, off } from "evtd";
-import { throttle } from "./utils/index";
+// import { throttle } from "./utils/index";
 import LayTooltip from "../tooltip/index.vue";
-
+import { throttle, makeDots } from "./utils/index";
 interface Prop {
   rangeValue: Array<number>;
   disabled?: boolean;
   step?: number;
   min?: number;
   max?: number;
+  showDots?: boolean;
 }
 
 const props = withDefaults(defineProps<Prop>(), {
@@ -23,6 +24,7 @@ const props = withDefaults(defineProps<Prop>(), {
   min: 0,
   max: 100,
   disabled: false,
+  showDots: true,
 });
 
 let rv = toRef(props, "rangeValue");
@@ -129,6 +131,15 @@ function cross(val: any) {
     currbtn = currbtn === 0 ? 1 : 0;
   }
 }
+// 断点
+const dots = makeDots(props);
+console.log(dots);
+
+const focusDot = (item: number) => {
+  let currbtn = moveNeighbors(item, rv);
+  rv.value[currbtn] = item;
+  emit("link-val-hook", rv.value);
+};
 </script>
 
 <template>
@@ -162,5 +173,13 @@ function cross(val: any) {
       class="layui-slider-rate-v"
       :class="[props.disabled ? 'layui-slider-disabled disable-line' : '']"
     ></div>
+    <div
+      v-show="showDots"
+      @click="focusDot(item)"
+      class="layui-slider-dots"
+      v-for="(item, index) in dots"
+      :key="index"
+      :style="{ left: item + '%' }"
+    ></div>
   </div>
 </template>

package/component/src/component/slider/Vertical.vue

@@ -16,6 +16,7 @@ interface Prop {
   step?: number;
   min?: number;
   max?: number;
+  showDots: boolean;
 }
 
 const props = withDefaults(defineProps<Prop>(), {
@@ -24,6 +25,7 @@ const props = withDefaults(defineProps<Prop>(), {
   step: 0,
   min: 0,
   max: 100,
+  showDots: false,
 });
 
 const moveAction = throttle(verticalMove);
@@ -91,6 +93,22 @@ function calcWithStep(
     }
   }
 }
+// 断点
+const makeDots = () => {
+  if (props.step === 0) return [];
+  let val = 0;
+  let dots = [];
+  let count = Math.floor(100 / props.step) - 1;
+  for (let i = 0; i < count; i++) {
+    val += props.step;
+    dots.push(val);
+  }
+  return dots;
+};
+const dots = makeDots();
+const focusDot = (val: number) => {
+  emit("link-val-hook", val);
+};
 </script>
 
 <template>
@@ -115,6 +133,14 @@ function calcWithStep(
         class="layui-slider-vertical-rate"
       ></div>
       <div class="layui-slider-vertical-line"></div>
+      <div
+        v-show="showDots"
+        @click="focusDot(item)"
+        class="layui-slider-vertical-dots"
+        v-for="(item, index) in dots"
+        :key="index"
+        :style="{ bottom: item + '%' }"
+      ></div>
     </div>
   </div>
 </template>

package/component/src/component/slider/VerticalRange.vue

@@ -7,15 +7,16 @@ export default {
 <script setup lang="ts">
 import { ref, toRef, Ref } from "vue";
 import { on, off } from "evtd";
-import { throttle } from "./utils/index";
+// import { throttle } from "./utils/index";
 import LayTooltip from "../tooltip/index.vue";
-
+import { throttle, makeDots } from "./utils/index";
 interface Prop {
   rangeValue: Array<number>;
   disabled?: boolean;
   step?: number;
   min?: number;
   max?: number;
+  showDots?: boolean;
 }
 
 const props = withDefaults(defineProps<Prop>(), {
@@ -23,6 +24,7 @@ const props = withDefaults(defineProps<Prop>(), {
   min: 0,
   max: 100,
   disabled: false,
+  showDots: false,
 });
 
 let rv = toRef(props, "rangeValue");
@@ -128,6 +130,15 @@ function cross(val: any) {
     currbtn = currbtn === 0 ? 1 : 0;
   }
 }
+// 断点
+const dots = makeDots(props);
+console.log(dots);
+
+const focusDot = (item: number) => {
+  let currbtn = moveNeighbors(item, rv);
+  rv.value[currbtn] = item;
+  emit("link-val-hook", rv.value);
+};
 </script>
 
 <template>
@@ -163,6 +174,14 @@ function cross(val: any) {
         class="layui-slider-vertical-rate"
         :class="[props.disabled ? 'layui-slider-disabled disable-line' : '']"
       ></div>
+      <div
+        v-show="showDots"
+        @click="focusDot(item)"
+        class="layui-slider-vertical-dots"
+        v-for="(item, index) in dots"
+        :key="index"
+        :style="{ bottom: item + '%' }"
+      ></div>
     </div>
   </div>
 </template>

package/component/src/component/slider/index.less

@@ -17,6 +17,7 @@
 .layui-slider-btn-v {
   width: 12px;
   height: 12px;
+  // background-color: @global-back-color;
   background-color: white;
   position: absolute;
   border: 2px solid var(--global-primary-color);
@@ -39,7 +40,7 @@
 .layui-slider-line-v {
   width: 100%;
   height: 4px;
-  background-color: #eee;
+  background-color: #cccccc;
   position: absolute;
   top: 6px;
 }
@@ -114,3 +115,23 @@
   position: relative;
   cursor: pointer;
 }
+.layui-slider-dots {
+  margin-top: 4px;
+  width: 8px;
+  height: 8px;
+  background-color: #ffffff;
+  border-radius: 5px;
+  position: absolute;
+  top:0;
+  z-index: 1;
+}
+
+.layui-slider-vertical-dots {
+  width: 8px;
+  height: 8px;
+  background-color: #ffffff;
+  border-radius: 5px;
+  position: absolute;
+  z-index: 1;
+  margin-left: 5px;
+}

package/component/src/component/slider/index.vue

@@ -21,6 +21,7 @@ export interface LaySliderProps {
   disabled?: boolean;
   range?: boolean;
   rangeValue?: number[];
+  showDots?: boolean;
 }
 
 const emit = defineEmits(["update:modelValue"]);
@@ -32,6 +33,7 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
   step: 0,
   min: 0,
   max: 100,
+  showDots: false,
 });
 
 let rangeValues: Ref<number[]> | any = toRef(props, "rangeValue");
@@ -53,6 +55,7 @@ function valHook(val: any) {
           :rangeValue="rangeValues"
           :min="min"
           :max="max"
+          :showDots="showDots"
         />
       </div>
       <div v-else>
@@ -64,6 +67,7 @@ function valHook(val: any) {
           :val="modelValue"
           :min="min"
           :max="max"
+          :showDots="showDots"
         />
       </div>
     </div>
@@ -77,6 +81,7 @@ function valHook(val: any) {
           :rangeValue="rangeValues"
           :min="min"
           :max="max"
+          :showDots="showDots"
         />
       </div>
       <div v-else>
@@ -88,6 +93,7 @@ function valHook(val: any) {
           :step="step"
           :min="min"
           :max="max"
+          :showDots="showDots"
         ></StandardVue>
       </div>
     </div>

package/component/src/component/slider/utils/index.ts

@@ -13,3 +13,16 @@ export function throttle(func: Function) {
 export function handle_select(e: Event): void {
   e.preventDefault();
 }
+
+export function makeDots(props: any) {
+  if (props.step === 0) return [];
+  let val = 0;
+  let dots = [0];
+  let count = Math.floor(100 / props.step) - 1;
+  for (let i = 0; i < count; i++) {
+    val += props.step;
+    dots.push(val);
+  }
+  dots.push(100);
+  return dots;
+}

package/component/src/provider/index.vue

@@ -8,10 +8,10 @@ export default {
 import { watch } from "vue";
 import { useI18n } from "vue-i18n";
 import {
-  enable as enableDarkMode,
-  disable as disableDarkMode,
   Theme,
   DynamicThemeFix,
+  enable as enableDarkMode,
+  disable as disableDarkMode,
 } from "darkreader";
 
 const { locale, setLocaleMessage, mergeLocaleMessage } = useI18n();
@@ -60,9 +60,7 @@ const changeTheme = (theme: string) => {
       "div.layui-color-picker *",
     ],
   };
-
   Object.assign(defaultPartial, props.darkPartial);
-
   if (theme === "dark") {
     enableDarkMode(defaultPartial, defaultFixes);
   } else if (theme === "light") {