Merge branch 'v1.7.0' of https://gitee.com/layui/layui-vue into v1.7.0

package/component/src/component/backTop/index.vue

@@ -174,7 +174,7 @@ const getScrollParent = (
     }
   }
   // @ts-ignore
-  return document.documentElement || document.body || window;
+  return window;
 };
 
 // 节流
@@ -189,18 +189,15 @@ const throttle = (func: Function, wait: number) => {
     }
   };
 };
-
+const callback = throttle(handleScroll, 300);
 onMounted(() => {
   if (!props.target) return;
   scrollTarget.value = getScrollTarget();
-  scrollTarget.value.addEventListener("scroll", throttle(handleScroll, 300));
+  scrollTarget.value.addEventListener("scroll", callback);
 });
 
 onBeforeUnmount(() => {
-  scrollTarget.value?.removeEventListener(
-    "scroll",
-    throttle(handleScroll, 300)
-  );
+  scrollTarget.value?.removeEventListener("scroll", callback);
 });
 </script>
 

package/component/src/component/checkbox/index.vue

@@ -13,12 +13,12 @@ import { CheckboxSize } from "./interface";
 export interface CheckboxProps {
   name?: string;
   skin?: string;
-  value: string | number | object;
   label?: string;
-  isIndeterminate?: boolean;
+  value: string | number | object;
   modelValue?: boolean | Array<string | number | object>;
-  disabled?: boolean;
+  isIndeterminate?: boolean;
   size?: CheckboxSize;
+  disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<CheckboxProps>(), {
@@ -113,6 +113,8 @@ const isDisabled = computed(() => {
   }
   return false;
 });
+
+defineExpose({ toggle: handleClick });
 </script>
 
 <template>

package/component/src/component/datePicker/components/MonthPanel.vue

@@ -103,7 +103,7 @@ watch(
 
 //关闭回调
 const footOnOk = () => {
-  emits("update:modelValue", Month.value?Month.value:-1);
+  emits("update:modelValue", Month.value ? Month.value : -1);
   if (datePicker.range) {
     //关闭菜单
     emits("ok");

package/component/src/component/datePicker/components/YearPanel.vue

@@ -119,7 +119,7 @@ const scrollTo = () => {
 
 //关闭回调
 const footOnOk = () => {
-  emits("update:modelValue", Year.value?Year.value:-1);
+  emits("update:modelValue", Year.value ? Year.value : -1);
   if (datePicker.range) {
     //关闭菜单
     emits("ok");

package/component/src/component/datePicker/index.vue

@@ -187,7 +187,7 @@ const endPlaceholder = computed(() => {
 });
 
 const dropdownRef = ref(null);
-const $emits = defineEmits(["update:modelValue",'change','blur','focus']);
+const $emits = defineEmits(["update:modelValue", "change", "blur", "focus"]);
 const hms = ref({
   hh: 0,
   mm: 0,
@@ -267,10 +267,10 @@ const getDateValue = () => {
   }
   if (props.timestamp) {
     $emits("update:modelValue", dayjs(dayjsVal).unix() * 1000);
-    $emits("change",dayjs(dayjsVal).unix() * 1000);
+    $emits("change", dayjs(dayjsVal).unix() * 1000);
   } else {
     $emits("update:modelValue", dayjsVal);
-    $emits("change",dayjsVal);
+    $emits("change", dayjsVal);
   }
   setTimeout(() => {
     unWatch = false;
@@ -281,7 +281,7 @@ const getDateValueByRange = () => {
   if (rangeValue.first === "" || rangeValue.last === "") {
     dateValue.value = ["", ""];
     $emits("update:modelValue", dateValue.value);
-    $emits("change",dateValue.value);
+    $emits("change", dateValue.value);
     return;
   }
   let format = "YYYY-MM-DD";
@@ -301,7 +301,7 @@ const getDateValueByRange = () => {
     dayjs(rangeValue.last).format(format),
   ];
   $emits("update:modelValue", dateValue.value);
-  $emits("change",dateValue.value);
+  $emits("change", dateValue.value);
   setTimeout(() => {
     unWatch = false;
   }, 0);

package/component/src/component/dropdown/index.vue

@@ -20,6 +20,7 @@ import {
   cloneVNode,
   useAttrs,
   StyleValue,
+  PropType,
 } from "vue";
 import {
   computed,
@@ -45,7 +46,7 @@ import {
 } from "./interface";
 import TeleportWrapper from "../_components/teleportWrapper.vue";
 import { useFirstElement, isScrollElement, getScrollElements } from "./util";
-import RenderFunction from "../_components/renderFunction";
+import RenderFunction, { RenderFunc } from "../_components/renderFunction";
 import { transformPlacement } from "./util";
 
 export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";

package/component/src/component/input/index.vue

@@ -109,7 +109,7 @@ const onBlur = (event: Event) => {
 
 const onNumberBlur = (event: Event) => {
   let value = (event.target as HTMLInputElement).value;
-  if(value === "") {
+  if (value === "") {
     value = props.min ? String(props.min) : "0";
   } else {
     if (props.max && props.max < Number(value)) value = props.max.toString();

package/component/src/component/inputNumber/index.vue

@@ -11,6 +11,7 @@ import { LayIcon } from "@layui/icons-vue";
 import layButton from "../button/index.vue";
 import { ref, watch, withDefaults, computed, Ref } from "vue";
 import { InputNumberSize } from "./interface";
+import { add, sub } from "./math";
 
 export interface InputNumberProps {
   modelValue?: number;
@@ -84,11 +85,11 @@ const maxControl = computed(() => {
 });
 
 const addition = function () {
-  num.value += Number(props.step);
+  num.value = add(num.value, props.step);
 };
 
 const subtraction = function () {
-  num.value -= Number(props.step);
+  num.value = sub(num.value, props.step);
 };
 
 const longDown = function (fn: Function) {

package/component/src/component/inputNumber/math.ts

@@ -0,0 +1,61 @@
+//加法
+function add(arg1: number, arg2: number) {
+  var r1, r2, m, c;
+  try {
+    r1 = arg1.toString().split(".")[1].length;
+  } catch (e) {
+    r1 = 0;
+  }
+  try {
+    r2 = arg2.toString().split(".")[1].length;
+  } catch (e) {
+    r2 = 0;
+  }
+  c = Math.abs(r1 - r2);
+  m = Math.pow(10, Math.max(r1, r2));
+  if (c > 0) {
+    var cm = Math.pow(10, c);
+    if (r1 > r2) {
+      arg1 = Number(arg1.toString().replace(".", ""));
+      arg2 = Number(arg2.toString().replace(".", "")) * cm;
+    } else {
+      arg1 = Number(arg1.toString().replace(".", "")) * cm;
+      arg2 = Number(arg2.toString().replace(".", ""));
+    }
+  } else {
+    arg1 = Number(arg1.toString().replace(".", ""));
+    arg2 = Number(arg2.toString().replace(".", ""));
+  }
+  return (arg1 + arg2) / m;
+}
+//减法
+function sub(arg1: number, arg2: number) {
+  var r1, r2, m, c;
+  try {
+    r1 = arg1.toString().split(".")[1].length;
+  } catch (e) {
+    r1 = 0;
+  }
+  try {
+    r2 = arg2.toString().split(".")[1].length;
+  } catch (e) {
+    r2 = 0;
+  }
+  c = Math.abs(r1 - r2);
+  m = Math.pow(10, Math.max(r1, r2));
+  if (c > 0) {
+    var cm = Math.pow(10, c);
+    if (r1 > r2) {
+      arg1 = Number(arg1.toString().replace(".", ""));
+      arg2 = Number(arg2.toString().replace(".", "")) * cm;
+    } else {
+      arg1 = Number(arg1.toString().replace(".", "")) * cm;
+      arg2 = Number(arg2.toString().replace(".", ""));
+    }
+  } else {
+    arg1 = Number(arg1.toString().replace(".", ""));
+    arg2 = Number(arg2.toString().replace(".", ""));
+  }
+  return (arg1 - arg2) / m;
+}
+export { add, sub };

package/component/src/component/pageHeader/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="lay-page-header">
     <div class="lay-page-header__left" @click="emits('back')">
-      <i class="layui-icon" :class="[backIcon]"></i>
+      <slot name="backIcon"
+        ><i class="layui-icon" :class="[backIcon]"></i
+      ></slot>
       <div class="lay-page-header__title">{{ backText }}</div>
     </div>
     <div class="lay-page-header__content">

package/component/src/component/popper/calcPosition.ts

@@ -14,6 +14,8 @@ const postionFns: any = {
     ) {
       innnerPosition.value = "bottom";
       top = bottom;
+    } else {
+      innnerPosition.value = "top";
     }
     return {
       top: `${top}px`,
@@ -30,6 +32,8 @@ const postionFns: any = {
     if (window.innerHeight - bottom < popper.offsetHeight + 6) {
       innnerPosition.value = "top";
       bottom = top - popper.offsetHeight - 6;
+    } else {
+      innnerPosition.value = "bottom";
     }
     return {
       top: `${bottom}px`,
@@ -47,6 +51,8 @@ const postionFns: any = {
     if (left < 0) {
       innnerPosition.value = "right";
       left = right;
+    } else {
+      innnerPosition.value = "left";
     }
     return {
       top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,
@@ -63,6 +69,8 @@ const postionFns: any = {
     if (window.innerWidth < right + popper.offsetWidth + 6) {
       innnerPosition.value = "left";
       right = left - popper.offsetWidth - 6;
+    } else {
+      innnerPosition.value = "right";
     }
     return {
       top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,

package/component/src/component/popper/index.vue

@@ -9,7 +9,7 @@
         @mouseenter="handlerPopperMouseEnter"
         @mouseleave="handlerPopperMouseLeave"
       >
-        <slot>{{ content }}</slot>
+        <slot> {{ content }}</slot>
         <div class="layui-popper-arrow"></div>
       </div>
     </transition>

package/component/src/component/select/index.vue

@@ -68,6 +68,7 @@ const multipleValue = ref([]);
 const emits = defineEmits<SelectEmits>();
 const openState: Ref<boolean> = ref(false);
 const options = ref<any>([]);
+const composing = ref(false);
 var timer: any;
 
 const getOption = (nodes: VNode[], newOptions: any[]) => {
@@ -79,7 +80,12 @@ const getOption = (nodes: VNode[], newOptions: any[]) => {
       if (component.name == LaySelectOption.name) {
         if (item.children) {
           // @ts-ignore
-          item.props.label = item.children.default()[0].children;
+          const label = item.children.default()[0].children;
+
+          if (typeof label == "string") {
+            // @ts-ignore
+            item.props.label = label;
+          }
         }
         newOptions.push(item.props);
       }
@@ -104,6 +110,15 @@ const handleRemove = (value: any) => {
   }
 };
 
+const onCompositionstart = () => {
+  composing.value = true;
+};
+
+const onCompositionend = (event: Event) => {
+  composing.value = false;
+  handleSearch((event.target as HTMLInputElement).value);
+};
+
 onMounted(() => {
   intOption();
   timer = setInterval(intOption, 500);
@@ -150,6 +165,7 @@ const multiple = computed(() => {
 });
 
 const handleSearch = (value: string) => {
+  if (composing.value) return;
   emits("search", value);
   searchValue.value = value;
 };
@@ -204,13 +220,15 @@ provide("multiple", multiple);
       </lay-tag-input>
       <lay-input
         v-else
-        v-model="singleValue"
+        :modelValue="singleValue"
         :placeholder="placeholder"
         :allow-clear="allowClear"
         :readonly="!showSearch"
         :disabled="disabled"
         :class="{ 'layui-unselect': !showSearch }"
         :size="size"
+        @compositionstart="onCompositionstart"
+        @compositionend="onCompositionend"
         @Input="handleSearch"
         @clear="handleClear"
       >
@@ -225,9 +243,11 @@ provide("multiple", multiple);
         <dl class="layui-select-content">
           <div class="layui-select-search" v-if="multiple && showSearch">
             <lay-input
-              v-model="searchValue"
+              :modelValue="searchValue"
               :placeholder="searchPlaceholder"
               @Input="handleSearch"
+              @compositionstart="onCompositionstart"
+              @compositionend="onCompositionend"
               prefix-icon="layui-icon-search"
               size="sm"
             ></lay-input>

package/component/src/component/selectOption/index.vue

@@ -12,7 +12,7 @@ import {
   inject,
   WritableComputedRef,
   Ref,
-  onMounted,
+  ref,
 } from "vue";
 
 export interface SelectOptionProps {
@@ -34,13 +34,20 @@ const selectedValue: WritableComputedRef<any> = inject(
   "selectedValue"
 ) as WritableComputedRef<any>;
 const multiple: ComputedRef = inject("multiple") as ComputedRef;
+const checkboxRef = ref<HTMLElement>();
 
 const handleSelect = () => {
-  if (!multiple.value && !props.disabled) {
-    // @ts-ignore
-    selectRef.value.hide();
-    selectedValue.value = props.value;
-    select();
+  if (multiple.value) {
+    if (!props.disabled) {
+      // @ts-ignore
+      checkboxRef.value?.toggle();
+    }
+  } else {
+    if (!props.disabled) {
+      // @ts-ignore
+      selectRef.value.hide();
+      selectedValue.value = props.value;
+    }
   }
 };
 
@@ -52,18 +59,6 @@ const selected = computed(() => {
   }
 });
 
-const select = () => {
-  if (multiple.value) {
-    if (Array.isArray(selectedValue.value)) {
-      if (notChecked.value) selectedValue.value.push(props.value);
-    } else {
-      selectedValue.value = [props.value];
-    }
-  } else {
-    selectedValue.value = props.value;
-  }
-};
-
 const display = computed(() => {
   return (
     props.keyword?.toString().indexOf(searchValue.value) > -1 ||
@@ -71,34 +66,26 @@ const display = computed(() => {
   );
 });
 
-const notChecked = computed(() => {
-  return (
-    selectedValue.value.find((item: any) => {
-      return item === props.value;
-    }) === undefined
-  );
-});
-
-onMounted(() => {
-  selected.value && select();
+const classes = computed(() => {
+  return [
+    "layui-select-option",
+    {
+      "layui-this": selected.value,
+      "layui-disabled": props.disabled,
+    },
+  ];
 });
 </script>
 
 <template>
-  <dd
-    v-show="display"
-    :class="[
-      'layui-select-option',
-      { 'layui-this': selected, 'layui-disabled': disabled },
-    ]"
-    @click="handleSelect"
-  >
+  <dd v-show="display" :class="classes" @click="handleSelect">
     <template v-if="multiple">
       <lay-checkbox
+        skin="primary"
+        ref="checkboxRef"
         v-model="selectedValue"
         :disabled="disabled"
         :value="value"
-        skin="primary"
       ></lay-checkbox>
     </template>
     <slot>{{ label }}</slot>

package/component/src/component/table/index.less

@@ -366,10 +366,6 @@
   box-sizing: border-box;
 }
 
-.layui-table-cell .lay-tooltip-content {
-  display: inline;
-}
-
 .layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
   top: -1px;
   padding: 0;

package/component/src/component/upload/index.vue

@@ -17,6 +17,7 @@ import {
   ref,
   useSlots,
   withDefaults,
+  watch
 } from "vue";
 import { templateRef } from "@vueuse/core";
 import { LayLayer } from "@layui/layer-vue";
@@ -68,6 +69,10 @@ export interface UploadProps {
   disabledPreview?: boolean;
   cut?: boolean;
   cutOptions?: CutOptions;
+  text?: string;
+  dragText?: string;
+  modelValue?: any;
+  auto?: boolean;
 }
 
 const getCutDownResult = () => {
@@ -81,6 +86,11 @@ const getCutDownResult = () => {
       Object.assign({ currentTimeStamp, cutResult: imgData, orginal: orgInfo })
     );
     let newFile = dataURLtoFile(imgData);
+    if (!props.auto) {
+      emit("update:modelValue", [newFile]);
+      clearLightCutEffect();
+      return;
+    }
     commonUploadTransaction([newFile]);
     nextTick(() => clearAllCutEffect());
   } else {
@@ -102,9 +112,20 @@ const clearAllCutEffect = () => {
   _cropper = null;
 };
 
+const clearLightCutEffect = () => {
+  activeUploadFiles.value = [];
+  activeUploadFilesImgs.value = [];
+  innerCutVisible.value = false;
+  _cropper = null;
+};
+
 const { t } = useI18n();
-const text = computed(() => t("upload.text"));
-const dragText = computed(() => t("upload.dragText"));
+const text = computed(() => {
+  return props.text ? props.text : t("upload.text");
+});
+const dragText = computed(() => {
+  return props.dragText ? props.dragText : t("upload.dragText");
+});
 const defaultErrorMsg = computed(() => t("upload.defaultErrorMsg"));
 const urlErrorMsg = computed(() => t("upload.urlErrorMsg"));
 const numberErrorMsg = computed(() => t("upload.numberErrorMsg"));
@@ -142,6 +163,8 @@ const props = withDefaults(defineProps<UploadProps>(), {
   disabledPreview: false,
   cut: false,
   cutOptions: void 0,
+  modelValue: null,
+  auto: true,
 });
 
 const slot = useSlots();
@@ -149,19 +172,30 @@ const slots = slot.default && slot.default();
 const context = getCurrentInstance();
 const emit = defineEmits([
   "choose",
+  "chooseAfter",
   "before",
   "done",
   "error",
   "cutdone",
   "cutcancel",
+  "update:modelValue",
 ]);
 
+watch(
+  () => props.modelValue,
+  () => {
+    if (!props.modelValue) {
+      clearAllCutEffect();
+    }
+  }
+);
+
 const isDragEnter = ref(false);
 const activeUploadFiles = ref<any[]>([]);
 const activeUploadFilesImgs = ref<any[]>([]);
 const orgFileInput = templateRef<HTMLElement>("orgFileInput");
-let _cropper: any = null;
 
+let _cropper: any = null;
 let computedCutLayerOption: ComputedRef<LayerModal>;
 
 if (props.cutOptions && props.cutOptions.layerOption) {
@@ -213,7 +247,7 @@ const localUploadTransaction = (option: localUploadTransaction) => {
 
 const dataURLtoFile = (dataurl: string) => {
   let arr: any[] = dataurl.split(",");
-  let mime: string = "";
+  let mime = "";
   if (arr.length > 0) {
     mime = arr[0].match(/:(.*?);/)[1];
   }
@@ -231,14 +265,13 @@ const errorF = (errorText: string) => {
   let errorMsg = errorText ? errorText : defaultErrorMsg;
   errorMsg = `layui-vue:${errorMsg}`;
   console.warn(errorMsg);
-  layer.msg(errorMsg, { icon: 2, time: 1000 }, function (res: unknown) {});
+  layer.msg(errorMsg, { icon: 2, time: 1000 }, function (res: unknown) { });
   emit("error", Object.assign({ currentTimeStamp, msg: errorMsg }));
 };
 
 const localUpload = (option: localUploadOption, callback: Function) => {
-  let xhr: XMLHttpRequest, url;
-  xhr = new XMLHttpRequest();
-  url = option.url;
+  let xhr: XMLHttpRequest = new XMLHttpRequest();
+  let url = option.url;
   let formData = option.formData;
   const cb = callback;
   xhr.onreadystatechange = function () {
@@ -319,10 +352,12 @@ const uploadChange = (e: any) => {
     props.cut &&
     props.acceptMime.indexOf("image") != -1 &&
     props.multiple == false;
+
   let arm2 =
     props.cut &&
     props.acceptMime.indexOf("image") != -1 &&
     props.multiple == true;
+
   if (arm1) {
     innerCutVisible.value = true;
     setTimeout(() => {
@@ -341,6 +376,10 @@ const uploadChange = (e: any) => {
     if (arm2) {
       console.warn(cannotSupportCutMsg.value);
     }
+    if (!props.auto) {
+      emit("update:modelValue", _files);
+      return;
+    }
     commonUploadTransaction(_files);
   }
 };
@@ -403,22 +442,9 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div
-    class="layui-upload layui-upload-wrap"
-    :class="disabledPreview ? 'layui-upload-file-disabled' : ''"
-  >
-    <input
-      type="file"
-      class="layui-upload-file"
-      ref="orgFileInput"
-      :name="field"
-      :field="field"
-      :multiple="multiple"
-      :accept="acceptMime"
-      :disabled="disabled"
-      @click="clickOrgInput"
-      @change="uploadChange"
-    />
+  <div class="layui-upload layui-upload-wrap" :class="disabledPreview ? 'layui-upload-file-disabled' : ''">
+    <input type="file" class="layui-upload-file" ref="orgFileInput" :name="field" :field="field" :multiple="multiple"
+      :accept="acceptMime" :disabled="disabled" @click="clickOrgInput" @change="uploadChange" />
     <div v-if="!drag">
       <div class="layui-upload-btn-box" @click.stop="chooseFile">
         <template v-if="slot.default">
@@ -426,24 +452,18 @@ onUnmounted(() => {
         </template>
         <template v-else>
           <lay-button type="primary" :disabled="disabled">{{
-            text
+              text
           }}</lay-button>
         </template>
       </div>
     </div>
-    <div
-      v-else
-      ref="dragRef"
-      class="layui-upload-drag"
-      :class="
-        disabled
-          ? 'layui-upload-drag-disable'
-          : isDragEnter
+    <div v-else ref="dragRef" class="layui-upload-drag" :class="
+      disabled
+        ? 'layui-upload-drag-disable'
+        : isDragEnter
           ? 'layui-upload-drag-draging'
           : ''
-      "
-      @click.stop="chooseFile"
-    >
+    " @click.stop="chooseFile">
       <i class="layui-icon"></i>
       <p>{{ dragText }}</p>
       <div class="layui-hide" id="uploadDemoView">
@@ -451,38 +471,17 @@ onUnmounted(() => {
         <img src="" alt="上传成功后渲染" style="max-width: 196px" />
       </div>
     </div>
-    <lay-layer
-      v-model="innerCutVisible"
-      :title="computedCutLayerOption.title"
-      :move="computedCutLayerOption.move"
-      :resize="computedCutLayerOption.resize"
-      :shade="computedCutLayerOption.shade"
-      :shadeClose="computedCutLayerOption.shadeClose"
-      :shadeOpacity="computedCutLayerOption.shadeOpacity"
-      :zIndex="computedCutLayerOption.zIndex"
-      :btnAlign="computedCutLayerOption.btnAlign"
-      :area="computedCutLayerOption.area"
-      :anim="computedCutLayerOption.anim"
-      :isOutAnim="computedCutLayerOption.isOutAnim"
-      :btn="computedCutLayerOption.btn"
-      @close="clearAllCutEffect"
-    >
-      <div
-        class="copper-container"
-        v-for="(base64str, index) in activeUploadFilesImgs"
-        :key="`file${index}`"
-      >
-        <img
-          :src="base64str"
-          :id="`_lay_upload_img${index}`"
-          class="_lay_upload_img"
-        />
+    <lay-layer v-model="innerCutVisible" :title="computedCutLayerOption.title" :move="computedCutLayerOption.move"
+      :resize="computedCutLayerOption.resize" :shade="computedCutLayerOption.shade"
+      :shadeClose="computedCutLayerOption.shadeClose" :shadeOpacity="computedCutLayerOption.shadeOpacity"
+      :zIndex="computedCutLayerOption.zIndex" :btnAlign="computedCutLayerOption.btnAlign"
+      :area="computedCutLayerOption.area" :anim="computedCutLayerOption.anim"
+      :isOutAnim="computedCutLayerOption.isOutAnim" :btn="computedCutLayerOption.btn" @close="clearAllCutEffect">
+      <div class="copper-container" v-for="(base64str, index) in activeUploadFilesImgs" :key="`file${index}`">
+        <img :src="base64str" :id="`_lay_upload_img${index}`" class="_lay_upload_img" />
       </div>
     </lay-layer>
-    <div
-      class="layui-upload-list"
-      :class="disabledPreview ? 'layui-upload-list-disabled' : ''"
-    >
+    <div class="layui-upload-list" :class="disabledPreview ? 'layui-upload-list-disabled' : ''">
       <slot name="preview"></slot>
     </div>
   </div>