commit
						dbfba278c1
					
				@ -1,4 +1,5 @@
 | 
			
		||||
#!/bin/sh
 | 
			
		||||
. "$(dirname "$0")/_/husky.sh"
 | 
			
		||||
 | 
			
		||||
npx --no-install commitlint --edit $1
 | 
			
		||||
npm run lint:prettier
 | 
			
		||||
npx --no -- commitlint --edit $1
 | 
			
		||||
 | 
			
		||||
@ -29,7 +29,7 @@
 | 
			
		||||
    "build:types": "rimraf types && tsc -d",
 | 
			
		||||
    "build:example": "vite build example",
 | 
			
		||||
    "lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
 | 
			
		||||
    "lint:prettier": "prettier --write \"src/**/*\"",
 | 
			
		||||
    "lint:prettier": "prettier --write \"src/**/*.{vue,ts}\"",
 | 
			
		||||
    "prepare": "husky install",
 | 
			
		||||
    "postinstall": "npm run prepare",
 | 
			
		||||
    "commit": "git-cz",
 | 
			
		||||
 | 
			
		||||
@ -13,9 +13,7 @@ export interface LayAvatarProps {
 | 
			
		||||
  radius?: boolean;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<LayAvatarProps>(), {
 | 
			
		||||
  
 | 
			
		||||
});
 | 
			
		||||
const props = withDefaults(defineProps<LayAvatarProps>(), {});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
 | 
			
		||||
@ -4,8 +4,7 @@ export default {
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
</script>
 | 
			
		||||
<script setup lang="ts"></script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="layui-avatar-list">
 | 
			
		||||
 | 
			
		||||
@ -5,13 +5,7 @@ export default {
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script lang="ts" setup>
 | 
			
		||||
import {
 | 
			
		||||
  ref,
 | 
			
		||||
  shallowRef,
 | 
			
		||||
  withDefaults,
 | 
			
		||||
  computed,
 | 
			
		||||
  onMounted,
 | 
			
		||||
} from "vue";
 | 
			
		||||
import { ref, shallowRef, withDefaults, computed, onMounted } from "vue";
 | 
			
		||||
import LayIcon from "../icon/index";
 | 
			
		||||
import "./index.less";
 | 
			
		||||
 | 
			
		||||
@ -50,15 +44,15 @@ let visible = ref(props.showHeight === 0);
 | 
			
		||||
 | 
			
		||||
const classBacktop = computed(() => {
 | 
			
		||||
  return {
 | 
			
		||||
    'layui-backtop-medium': props.size === "medium",
 | 
			
		||||
    'layui-backtop-small': props.size === "small"
 | 
			
		||||
  }
 | 
			
		||||
    "layui-backtop-medium": props.size === "medium",
 | 
			
		||||
    "layui-backtop-small": props.size === "small",
 | 
			
		||||
  };
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const borderRadius = computed(() => {
 | 
			
		||||
  if (props.circle) {
 | 
			
		||||
    return "50%"
 | 
			
		||||
  };
 | 
			
		||||
    return "50%";
 | 
			
		||||
  }
 | 
			
		||||
  return typeof props.borderRadius === "number"
 | 
			
		||||
    ? `${props.borderRadius}px`
 | 
			
		||||
    : props.borderRadius;
 | 
			
		||||
@ -138,7 +132,9 @@ const getScrollTarget = () => {
 | 
			
		||||
    // 特定容器内部显示
 | 
			
		||||
    if (props.position === "absolute") {
 | 
			
		||||
      if (!targetElement.parentElement) {
 | 
			
		||||
        throw new Error( `target parent element is not existed: ${props.target}`);
 | 
			
		||||
        throw new Error(
 | 
			
		||||
          `target parent element is not existed: ${props.target}`
 | 
			
		||||
        );
 | 
			
		||||
      }
 | 
			
		||||
      targetElement.parentElement.style.position = "relative";
 | 
			
		||||
      // backtopRef.value!.style.position = props.position;
 | 
			
		||||
@ -163,7 +159,9 @@ const getScrollParent = (
 | 
			
		||||
    if (excludeStaticParent && style.position === "static") {
 | 
			
		||||
      continue;
 | 
			
		||||
    }
 | 
			
		||||
    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)){
 | 
			
		||||
    if (
 | 
			
		||||
      overflowRegex.test(style.overflow + style.overflowY + style.overflowX)
 | 
			
		||||
    ) {
 | 
			
		||||
      return parent;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
@ -11,11 +11,9 @@ export interface LayBreadcrumbProps {
 | 
			
		||||
  separator?: string;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<LayBreadcrumbProps>(),
 | 
			
		||||
  {
 | 
			
		||||
const props = withDefaults(defineProps<LayBreadcrumbProps>(), {
 | 
			
		||||
  separator: "/",
 | 
			
		||||
  }
 | 
			
		||||
);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
provide("separator", props.separator);
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
@ -12,8 +12,8 @@
 | 
			
		||||
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayBreadcrumbItem"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayBreadcrumbItem",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
 | 
			
		||||
@ -35,7 +35,7 @@ const onClick = (event : any) => {
 | 
			
		||||
  if (!props.disabled) {
 | 
			
		||||
    emit("click", event);
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const classes = computed(() => {
 | 
			
		||||
  return [
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayCard"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayCard",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
 | 
			
		||||
@ -1,17 +1,11 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayCarousel"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayCarousel",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import {
 | 
			
		||||
  withDefaults,
 | 
			
		||||
  provide,
 | 
			
		||||
  useSlots,
 | 
			
		||||
  ref,
 | 
			
		||||
  computed,
 | 
			
		||||
} from "vue";
 | 
			
		||||
import { withDefaults, provide, useSlots, ref, computed } from "vue";
 | 
			
		||||
 | 
			
		||||
const slot = useSlots() as any;
 | 
			
		||||
const slots = slot.default && (slot.default() as any[]);
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayCarouselItem"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayCarouselItem",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
 | 
			
		||||
@ -1,28 +1,21 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name:"LayCollapse"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayCollapse",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import {
 | 
			
		||||
  withDefaults,
 | 
			
		||||
  provide,
 | 
			
		||||
  ref,
 | 
			
		||||
  watch,
 | 
			
		||||
} from "vue";
 | 
			
		||||
import { withDefaults, provide, ref, watch } from "vue";
 | 
			
		||||
 | 
			
		||||
export interface LayCollapseProps {
 | 
			
		||||
  modelValue?: number | string | [];
 | 
			
		||||
  accordion?: boolean;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<LayCollapseProps>(),
 | 
			
		||||
  {
 | 
			
		||||
const props = withDefaults(defineProps<LayCollapseProps>(), {
 | 
			
		||||
  modelValue: () => [],
 | 
			
		||||
  accordion: false,
 | 
			
		||||
  }
 | 
			
		||||
);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// 监听传入的值
 | 
			
		||||
watch(
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name:"LayCollapseItem"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayCollapseItem",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
@ -13,11 +13,9 @@ export interface LayCollapseItemProps {
 | 
			
		||||
  disabled?: boolean;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<LayCollapseItemProps>(),
 | 
			
		||||
  {
 | 
			
		||||
const props = withDefaults(defineProps<LayCollapseItemProps>(), {
 | 
			
		||||
  disabled: false,
 | 
			
		||||
  }
 | 
			
		||||
);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const { accordion, activeValues, emit } = inject("layCollapse") as any;
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -75,7 +75,8 @@
 | 
			
		||||
  position: relative;
 | 
			
		||||
  height: 10px;
 | 
			
		||||
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 | 
			
		||||
  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
 | 
			
		||||
  background: #fff
 | 
			
		||||
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
 | 
			
		||||
  background-size: 10px 10px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -110,13 +110,7 @@ export interface LayColorPicker {
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<LayColorPicker>(), {
 | 
			
		||||
  modelValue: { r: 217, g: 128, b: 95, a: 1 },
 | 
			
		||||
  preset: [
 | 
			
		||||
    "#009688",
 | 
			
		||||
    "#1e9fff",
 | 
			
		||||
    "#ffb800",
 | 
			
		||||
    "#ff5722",
 | 
			
		||||
    "#5fb878",
 | 
			
		||||
  ]
 | 
			
		||||
  preset: ["#009688", "#1e9fff", "#ffb800", "#ff5722", "#5fb878"],
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const saturationValue = ref<null | HTMLElement>(null);
 | 
			
		||||
 | 
			
		||||
@ -1 +0,0 @@
 | 
			
		||||
 | 
			
		||||
@ -1,6 +1,6 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <slot name="prefix"></slot>
 | 
			
		||||
  <span ref="counterRef" style="font-family:sans-serif;" />
 | 
			
		||||
  <span ref="counterRef" style="font-family: sans-serif" />
 | 
			
		||||
  <slot name="suffix"></slot>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
@ -11,9 +11,9 @@ export default {
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import { onMounted, ref, watch } from 'vue'
 | 
			
		||||
import { CountUp } from 'countup.js'
 | 
			
		||||
import type { CountUpOptions } from 'countup.js'
 | 
			
		||||
import { onMounted, ref, watch } from "vue";
 | 
			
		||||
import { CountUp } from "countup.js";
 | 
			
		||||
import type { CountUpOptions } from "countup.js";
 | 
			
		||||
 | 
			
		||||
export interface LayCountupProps {
 | 
			
		||||
  endVal?: number; //显示的值
 | 
			
		||||
@ -30,13 +30,21 @@ export interface LayCountupProps {
 | 
			
		||||
const props = withDefaults(defineProps<LayCountupProps>(), {
 | 
			
		||||
  endVal: 0,
 | 
			
		||||
  option: () => {
 | 
			
		||||
    return {}
 | 
			
		||||
  }
 | 
			
		||||
    return {};
 | 
			
		||||
  },
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const counterRef = ref<HTMLDivElement | null>(null);
 | 
			
		||||
const instance = ref<CountUp | null>(null);
 | 
			
		||||
const {decimalPlaces,useGrouping,separator,useEasing,duration,prefix,suffix} = props;
 | 
			
		||||
const {
 | 
			
		||||
  decimalPlaces,
 | 
			
		||||
  useGrouping,
 | 
			
		||||
  separator,
 | 
			
		||||
  useEasing,
 | 
			
		||||
  duration,
 | 
			
		||||
  prefix,
 | 
			
		||||
  suffix,
 | 
			
		||||
} = props;
 | 
			
		||||
const defaultOptions: CountUpOptions = {
 | 
			
		||||
  startVal: 0, // 开始数字
 | 
			
		||||
  decimalPlaces: decimalPlaces ? decimalPlaces : 0, // 小数位数
 | 
			
		||||
@ -47,34 +55,33 @@ const defaultOptions: CountUpOptions = {
 | 
			
		||||
  decimal: ".", // 小数点分隔符
 | 
			
		||||
  prefix: prefix ? prefix : "", // 前缀
 | 
			
		||||
  suffix: suffix ? suffix : "", // 后缀
 | 
			
		||||
}
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
watch(
 | 
			
		||||
  () => props.endVal,
 | 
			
		||||
  () => {
 | 
			
		||||
    update(props.endVal)
 | 
			
		||||
    update(props.endVal);
 | 
			
		||||
  }
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
  createCounter()
 | 
			
		||||
})
 | 
			
		||||
  createCounter();
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const createCounter = () => {
 | 
			
		||||
  if (!counterRef.value) return
 | 
			
		||||
  const opts: CountUpOptions = Object.assign(defaultOptions, props.option)
 | 
			
		||||
  if (!counterRef.value) return;
 | 
			
		||||
  const opts: CountUpOptions = Object.assign(defaultOptions, props.option);
 | 
			
		||||
  instance.value = new CountUp(counterRef?.value, props.endVal, opts);
 | 
			
		||||
  start();
 | 
			
		||||
}
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const start = () => {
 | 
			
		||||
  if (!instance.value) return
 | 
			
		||||
  if (!instance.value) return;
 | 
			
		||||
  instance?.value.start();
 | 
			
		||||
}
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const update = (newEndVal: number) => {
 | 
			
		||||
  if (!instance.value) return
 | 
			
		||||
  if (!instance.value) return;
 | 
			
		||||
  instance?.value.update(newEndVal);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayDropdownItem"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayDropdownItem",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
 | 
			
		||||
@ -32,7 +32,7 @@
 | 
			
		||||
      }
 | 
			
		||||
      .layui-exception-details-describe {
 | 
			
		||||
        font-size: 18px;
 | 
			
		||||
                color: rgba(0, 0, 0, .45);
 | 
			
		||||
        color: rgba(0, 0, 0, 0.45);
 | 
			
		||||
        margin-bottom: 26px;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
    name: "LayException"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayException",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import { useSlots } from "vue";
 | 
			
		||||
@ -17,7 +17,7 @@ const slots = useSlots();
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<LayDropdownProps>(), {
 | 
			
		||||
  title: "Exception",
 | 
			
		||||
  describe: "describe"
 | 
			
		||||
  describe: "describe",
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
<template>
 | 
			
		||||
 | 
			
		||||
@ -1 +0,0 @@
 | 
			
		||||
 | 
			
		||||
@ -1,4 +1,3 @@
 | 
			
		||||
 | 
			
		||||
@import "../../theme/variable.less";
 | 
			
		||||
 | 
			
		||||
@field-border-color: var(--field-border-color);
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayField"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayField",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
 | 
			
		||||
@ -7,11 +7,7 @@ export default {
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import { toRefs, provide, reactive, onMounted } from "vue";
 | 
			
		||||
import { Rule, ValidateError, ValidateMessages } from "async-validator";
 | 
			
		||||
import {
 | 
			
		||||
  LayFormItemContext,
 | 
			
		||||
  FormCallback,
 | 
			
		||||
  modelType,
 | 
			
		||||
} from "../../types/form";
 | 
			
		||||
import { LayFormItemContext, FormCallback, modelType } from "../../types/form";
 | 
			
		||||
 | 
			
		||||
export interface LayFormProps {
 | 
			
		||||
  model?: modelType;
 | 
			
		||||
@ -24,16 +20,14 @@ export interface LayFormProps {
 | 
			
		||||
  useCN?: boolean;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<LayFormProps>(),
 | 
			
		||||
  {
 | 
			
		||||
const props = withDefaults(defineProps<LayFormProps>(), {
 | 
			
		||||
  model: function () {
 | 
			
		||||
    return {};
 | 
			
		||||
  },
 | 
			
		||||
  useCN: true,
 | 
			
		||||
  requiredIcons: "",
 | 
			
		||||
  initValidate: false,
 | 
			
		||||
  }
 | 
			
		||||
);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const formItems: LayFormItemContext[] = [];
 | 
			
		||||
const formItemMap: { [key: string]: LayFormItemContext } = {};
 | 
			
		||||
@ -144,7 +138,7 @@ const addField = function (item: LayFormItemContext) {
 | 
			
		||||
defineExpose({ validate, clearValidate, reset });
 | 
			
		||||
 | 
			
		||||
provide(
 | 
			
		||||
  'LayForm',
 | 
			
		||||
  "LayForm",
 | 
			
		||||
  reactive({
 | 
			
		||||
    formItems,
 | 
			
		||||
    addField,
 | 
			
		||||
 | 
			
		||||
@ -10,7 +10,8 @@
 | 
			
		||||
  .layui-input-block,
 | 
			
		||||
  .layui-input-inline {
 | 
			
		||||
    .layui-form-danger {
 | 
			
		||||
      &, .layui-input {
 | 
			
		||||
      &,
 | 
			
		||||
      .layui-input {
 | 
			
		||||
        border-color: #ff5722 !important;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'LayFormItem'
 | 
			
		||||
}
 | 
			
		||||
  name: "LayFormItem",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
@ -40,13 +40,11 @@ export interface LayFormItemProps {
 | 
			
		||||
  required?: boolean;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<LayFormItemProps>(),
 | 
			
		||||
  {
 | 
			
		||||
const props = withDefaults(defineProps<LayFormItemProps>(), {
 | 
			
		||||
  mode: "block",
 | 
			
		||||
  }
 | 
			
		||||
);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const layForm = inject('LayForm', {} as LayFormContext);
 | 
			
		||||
const layForm = inject("LayForm", {} as LayFormContext);
 | 
			
		||||
const formItemRef = ref<HTMLDivElement>();
 | 
			
		||||
const slotParent = ref<HTMLDivElement>();
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -80,8 +80,8 @@
 | 
			
		||||
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayIconPicker"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayIconPicker",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
 | 
			
		||||
@ -1,12 +1,12 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayInput"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayInput",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import "./index.less"
 | 
			
		||||
import { useI18n } from 'vue-i18n'
 | 
			
		||||
import "./index.less";
 | 
			
		||||
import { useI18n } from "vue-i18n";
 | 
			
		||||
 | 
			
		||||
const { t } = useI18n();
 | 
			
		||||
 | 
			
		||||
@ -18,8 +18,7 @@ export interface LayInputProps {
 | 
			
		||||
  placeholder?: string;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<LayInputProps>(), {
 | 
			
		||||
});
 | 
			
		||||
const props = withDefaults(defineProps<LayInputProps>(), {});
 | 
			
		||||
 | 
			
		||||
const emit = defineEmits(["update:modelValue", "input", "focus", "blur"]);
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -9,12 +9,7 @@ import layButton from "../button/index";
 | 
			
		||||
import layIcon from "../icon/index";
 | 
			
		||||
import layInput from "../input/index";
 | 
			
		||||
import "./index.less";
 | 
			
		||||
import {
 | 
			
		||||
  ref,
 | 
			
		||||
  watch,
 | 
			
		||||
  withDefaults,
 | 
			
		||||
  computed,
 | 
			
		||||
} from "vue";
 | 
			
		||||
import { ref, watch, withDefaults, computed } from "vue";
 | 
			
		||||
 | 
			
		||||
export interface LayInputNumberProps {
 | 
			
		||||
  modelValue?: number;
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayLine"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayLine",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
 | 
			
		||||
@ -6,9 +6,8 @@
 | 
			
		||||
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayLogo"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayLogo",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
</script>
 | 
			
		||||
<script setup lang="ts"></script>
 | 
			
		||||
 | 
			
		||||
@ -5,8 +5,8 @@
 | 
			
		||||
  left: calc(100% + 5px);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.layui-nav .layui-show.layui-anim-upbit .left-nav.layui-show.layui-anim-upbit
 | 
			
		||||
, .layui-nav .layui-show.layui-anim-upbit .left-nav .layui-show.layui-anim-upbit {
 | 
			
		||||
.layui-nav .layui-show.layui-anim-upbit .left-nav.layui-show.layui-anim-upbit,
 | 
			
		||||
.layui-nav .layui-show.layui-anim-upbit .left-nav .layui-show.layui-anim-upbit {
 | 
			
		||||
  top: 0px;
 | 
			
		||||
  left: calc(-100% - 20px);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayMenu"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayMenu",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
@ -23,9 +23,9 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
 | 
			
		||||
  selectedKey: "",
 | 
			
		||||
  openKeys: () => [],
 | 
			
		||||
  tree: false,
 | 
			
		||||
  theme: 'dark',
 | 
			
		||||
  theme: "dark",
 | 
			
		||||
  inverted: false,
 | 
			
		||||
  level: false
 | 
			
		||||
  level: false,
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const isTree = computed(() => props.tree);
 | 
			
		||||
@ -54,7 +54,15 @@ provide("openKeys", openKeys);
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <ul class="layui-nav" :class="[level? 'level':'',inverted ? 'inverted':'',tree ? 'layui-nav-tree' : '', theme === 'dark' ? 'layui-nav-dark':'layui-nav-light' ]">
 | 
			
		||||
  <ul
 | 
			
		||||
    class="layui-nav"
 | 
			
		||||
    :class="[
 | 
			
		||||
      level ? 'level' : '',
 | 
			
		||||
      inverted ? 'inverted' : '',
 | 
			
		||||
      tree ? 'layui-nav-tree' : '',
 | 
			
		||||
      theme === 'dark' ? 'layui-nav-dark' : 'layui-nav-light',
 | 
			
		||||
    ]"
 | 
			
		||||
  >
 | 
			
		||||
    <slot></slot>
 | 
			
		||||
  </ul>
 | 
			
		||||
</template>
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayMenuItem"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayMenuItem",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,7 @@ export default {
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import { Ref, ref, watch, useSlots, computed } from "vue";
 | 
			
		||||
import { useI18n } from 'vue-i18n';
 | 
			
		||||
import { useI18n } from "vue-i18n";
 | 
			
		||||
 | 
			
		||||
export interface LayPageProps {
 | 
			
		||||
  total: number;
 | 
			
		||||
@ -116,7 +116,7 @@ watch(currentPage, function () {
 | 
			
		||||
      @click="prev()"
 | 
			
		||||
    >
 | 
			
		||||
      <slot v-if="slots.prev" name="prev"></slot>
 | 
			
		||||
      <template v-else>{{ t('page.prev') }}</template>
 | 
			
		||||
      <template v-else>{{ t("page.prev") }}</template>
 | 
			
		||||
    </a>
 | 
			
		||||
    <template v-if="showPage">
 | 
			
		||||
      <template v-for="index of totalPage" :key="index">
 | 
			
		||||
@ -138,7 +138,7 @@ watch(currentPage, function () {
 | 
			
		||||
      @click="next()"
 | 
			
		||||
    >
 | 
			
		||||
      <slot v-if="slots.next" name="next"></slot>
 | 
			
		||||
      <template v-else>{{ t('page.next') }}</template>
 | 
			
		||||
      <template v-else>{{ t("page.next") }}</template>
 | 
			
		||||
    </a>
 | 
			
		||||
    <span v-if="showLimit" class="layui-laypage-limits">
 | 
			
		||||
      <select v-model="inlimit">
 | 
			
		||||
 | 
			
		||||
@ -1 +0,0 @@
 | 
			
		||||
 | 
			
		||||
@ -1,6 +1,5 @@
 | 
			
		||||
@import "../../theme/variable.less";
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@panel-border-color: var(--panel-border-color);
 | 
			
		||||
@panel-border-radius: var(--panel-border-radius);
 | 
			
		||||
@panel-fore-color: var(--panel-fore-color);
 | 
			
		||||
 | 
			
		||||
@ -37,17 +37,14 @@ export interface LayPopperProps {
 | 
			
		||||
  isCanHide?: boolean;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<LayPopperProps>(),
 | 
			
		||||
  {
 | 
			
		||||
    position: 'top',
 | 
			
		||||
const props = withDefaults(defineProps<LayPopperProps>(), {
 | 
			
		||||
  position: "top",
 | 
			
		||||
  isDark: true,
 | 
			
		||||
  disabled: false,
 | 
			
		||||
  enterable: true,
 | 
			
		||||
  isCanHide: true,
 | 
			
		||||
  trigger: "hover",
 | 
			
		||||
  }
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const EVENT_MAP: any = {
 | 
			
		||||
  hover: ["mouseenter", null, "mouseleave", false],
 | 
			
		||||
@ -66,18 +63,21 @@ const innnerPosition = ref(props.position);
 | 
			
		||||
const innerVisible = ref(!props.isCanHide);
 | 
			
		||||
const isExist = ref(!props.isCanHide);
 | 
			
		||||
 | 
			
		||||
watch(() => props.isCanHide, (val) => {
 | 
			
		||||
watch(
 | 
			
		||||
  () => props.isCanHide,
 | 
			
		||||
  (val) => {
 | 
			
		||||
    innerVisible.value = !val;
 | 
			
		||||
});
 | 
			
		||||
  }
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
watch(innerVisible, (val) => {
 | 
			
		||||
  invokeShowPosistion();
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
watch(popper, (val) => {
 | 
			
		||||
  if (props.trigger === 'hover' && props.enterable) {
 | 
			
		||||
    on(popper.value, EVENT_MAP['hover'][0], doShow);
 | 
			
		||||
    on(popper.value, EVENT_MAP['hover'][2], doHidden);
 | 
			
		||||
  if (props.trigger === "hover" && props.enterable) {
 | 
			
		||||
    on(popper.value, EVENT_MAP["hover"][0], doShow);
 | 
			
		||||
    on(popper.value, EVENT_MAP["hover"][2], doHidden);
 | 
			
		||||
  }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
@ -92,7 +92,7 @@ const doShow = function () {
 | 
			
		||||
  if (!props.disabled) {
 | 
			
		||||
    if (!isExist.value) {
 | 
			
		||||
      isExist.value = true;
 | 
			
		||||
        setTimeout(()=>innerVisible.value = true, 0);
 | 
			
		||||
      setTimeout(() => (innerVisible.value = true), 0);
 | 
			
		||||
    } else {
 | 
			
		||||
      innerVisible.value = true;
 | 
			
		||||
    }
 | 
			
		||||
@ -110,7 +110,7 @@ const doHidden = function (e: MouseEvent) {
 | 
			
		||||
  }
 | 
			
		||||
  innerVisible.value = false;
 | 
			
		||||
  innnerPosition.value = props.position;
 | 
			
		||||
  style.value = { top: -window.innerHeight + "px", left: 0 }
 | 
			
		||||
  style.value = { top: -window.innerHeight + "px", left: 0 };
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
// 计算位置显示
 | 
			
		||||
 | 
			
		||||
@ -12,11 +12,13 @@ export interface LayQuoteProps {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = defineProps<LayQuoteProps>();
 | 
			
		||||
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <blockquote class="layui-quote" :class="[type ? `layui-quote-${props.type}` : '']">
 | 
			
		||||
  <blockquote
 | 
			
		||||
    class="layui-quote"
 | 
			
		||||
    :class="[type ? `layui-quote-${props.type}` : '']"
 | 
			
		||||
  >
 | 
			
		||||
    <slot></slot>
 | 
			
		||||
  </blockquote>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayRadio"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayRadio",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
 | 
			
		||||
@ -1,28 +1,24 @@
 | 
			
		||||
.result {
 | 
			
		||||
  text-align: center;
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
.result .success svg {
 | 
			
		||||
	color: #32C682;
 | 
			
		||||
  color: #32c682;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  margin-top: 40px;
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
.result .failure svg {
 | 
			
		||||
  color: #f56c6c;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  margin-top: 40px;
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
.result .title {
 | 
			
		||||
  margin-top: 25px;
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
.result .desc {
 | 
			
		||||
  margin-top: 25px;
 | 
			
		||||
  width: 60%;
 | 
			
		||||
  margin-left: 20%;
 | 
			
		||||
	color: rgba(0, 0, 0, .45);
 | 
			
		||||
  color: rgba(0, 0, 0, 0.45);
 | 
			
		||||
}
 | 
			
		||||
.result .content {
 | 
			
		||||
  margin-top: 20px;
 | 
			
		||||
 | 
			
		||||
@ -122,7 +122,6 @@
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media screen and (min-width: 768px) {
 | 
			
		||||
 | 
			
		||||
  .layui-hide-sm {
 | 
			
		||||
    display: none !important;
 | 
			
		||||
  }
 | 
			
		||||
@ -143,7 +142,6 @@
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media screen and (min-width: 992px) {
 | 
			
		||||
 | 
			
		||||
  .layui-hide-md {
 | 
			
		||||
    display: none !important;
 | 
			
		||||
  }
 | 
			
		||||
@ -164,7 +162,6 @@
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media screen and (min-width: 1200px) {
 | 
			
		||||
 | 
			
		||||
  .layui-hide-lg {
 | 
			
		||||
    display: none !important;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
@ -1,11 +1,10 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayScroll"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayScroll",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
</script>
 | 
			
		||||
<script setup lang="ts"></script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="layui-side-scroll">
 | 
			
		||||
 | 
			
		||||
@ -40,7 +40,6 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
.layui-select {
 | 
			
		||||
  height: 38px;
 | 
			
		||||
  line-height: 1.3;
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
	name: "LaySelect"
 | 
			
		||||
}
 | 
			
		||||
  name: "LaySelect",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
@ -39,16 +39,13 @@ watch(isClickOutside, () => {
 | 
			
		||||
  }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(
 | 
			
		||||
	defineProps<LaySelectProps>(),
 | 
			
		||||
	{
 | 
			
		||||
const props = withDefaults(defineProps<LaySelectProps>(), {
 | 
			
		||||
  modelValue: null,
 | 
			
		||||
  placeholder: "请选择",
 | 
			
		||||
  disabled: false,
 | 
			
		||||
  showEmpty: true,
 | 
			
		||||
  multiple: false,
 | 
			
		||||
	}
 | 
			
		||||
);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const openState = ref(false);
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -15,11 +15,9 @@ export interface LaySelectOptionProps {
 | 
			
		||||
  disabled?: boolean;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<LaySelectOptionProps>(),
 | 
			
		||||
	{
 | 
			
		||||
const props = withDefaults(defineProps<LaySelectOptionProps>(), {
 | 
			
		||||
  disabled: false,
 | 
			
		||||
	}
 | 
			
		||||
);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const selectItemHandle = inject("selectItemHandle") as SelectItemHandle;
 | 
			
		||||
const selectItem = inject("selectItem") as Ref<SelectItem>;
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,4 @@
 | 
			
		||||
.lay-skeleton {
 | 
			
		||||
  
 | 
			
		||||
  .lay-skeleton-item {
 | 
			
		||||
    height: 16px;
 | 
			
		||||
    border-radius: 5px;
 | 
			
		||||
 | 
			
		||||
@ -1,8 +1,8 @@
 | 
			
		||||
import type { App } from 'vue'
 | 
			
		||||
import Component from './index.vue'
 | 
			
		||||
import type { App } from "vue";
 | 
			
		||||
import Component from "./index.vue";
 | 
			
		||||
 | 
			
		||||
Component.install = (app: App) => {
 | 
			
		||||
    app.component(Component.name, Component)
 | 
			
		||||
}
 | 
			
		||||
  app.component(Component.name, Component);
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default Component;
 | 
			
		||||
 | 
			
		||||
@ -1,12 +1,12 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LaySkeleton"
 | 
			
		||||
}
 | 
			
		||||
  name: "LaySkeleton",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import LaySkeletonItem from '../skeletonItem/index.vue'
 | 
			
		||||
import './index.less'
 | 
			
		||||
import LaySkeletonItem from "../skeletonItem/index.vue";
 | 
			
		||||
import "./index.less";
 | 
			
		||||
import { withDefaults } from "vue";
 | 
			
		||||
 | 
			
		||||
export interface LaySkeletonProps {
 | 
			
		||||
@ -23,7 +23,10 @@ const props = withDefaults(defineProps<LaySkeletonProps>(), {
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <div :class="['lay-skeleton', animated ? 'lay-skeleton-animated': '',]" v-bind="$attrs">
 | 
			
		||||
  <div
 | 
			
		||||
    :class="['lay-skeleton', animated ? 'lay-skeleton-animated' : '']"
 | 
			
		||||
    v-bind="$attrs"
 | 
			
		||||
  >
 | 
			
		||||
    <template v-if="loading">
 | 
			
		||||
      <slot name="skeleton">
 | 
			
		||||
        <lay-skeleton-item
 | 
			
		||||
@ -31,7 +34,8 @@ const props = withDefaults(defineProps<LaySkeletonProps>(), {
 | 
			
		||||
          :key="item"
 | 
			
		||||
          :class="[
 | 
			
		||||
            item === 1 ? 'lay-skeleton-first' : '',
 | 
			
		||||
              item === rows? 'lay-skeleton-last': '']"
 | 
			
		||||
            item === rows ? 'lay-skeleton-last' : '',
 | 
			
		||||
          ]"
 | 
			
		||||
          type="p"
 | 
			
		||||
        ></lay-skeleton-item>
 | 
			
		||||
      </slot>
 | 
			
		||||
 | 
			
		||||
@ -1,8 +1,8 @@
 | 
			
		||||
import type { App } from 'vue'
 | 
			
		||||
import Component from './index.vue'
 | 
			
		||||
import type { App } from "vue";
 | 
			
		||||
import Component from "./index.vue";
 | 
			
		||||
 | 
			
		||||
Component.install = (app: App) => {
 | 
			
		||||
    app.component(Component.name, Component)
 | 
			
		||||
}
 | 
			
		||||
  app.component(Component.name, Component);
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default Component;
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LaySkeletonItem"
 | 
			
		||||
}
 | 
			
		||||
  name: "LaySkeletonItem",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
@ -12,12 +12,15 @@ export interface LaySkeletonProps {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<LaySkeletonProps>(), {
 | 
			
		||||
  type: 'p',
 | 
			
		||||
  type: "p",
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <div :class="['lay-skeleton-item',`lay-skeleton-type--${type}`]" v-bind="$attrs">
 | 
			
		||||
  <div
 | 
			
		||||
    :class="['lay-skeleton-item', `lay-skeleton-type--${type}`]"
 | 
			
		||||
    v-bind="$attrs"
 | 
			
		||||
  >
 | 
			
		||||
    <div v-if="type === 'image'">
 | 
			
		||||
      <lay-icon type="layui-icon-picture"></lay-icon>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
@ -6,13 +6,19 @@
 | 
			
		||||
      class="layui-slider-vrange"
 | 
			
		||||
      v-if="range"
 | 
			
		||||
    >
 | 
			
		||||
        <lay-tooltip :content="'' + verticalRangeValue[1]" :is-can-hide="tooptipHide">
 | 
			
		||||
      <lay-tooltip
 | 
			
		||||
        :content="'' + verticalRangeValue[1]"
 | 
			
		||||
        :is-can-hide="tooptipHide"
 | 
			
		||||
      >
 | 
			
		||||
        <div
 | 
			
		||||
          :style="{ bottom: verticalRangeValue[1] + '%' }"
 | 
			
		||||
          class="layui-slider-vertical-btn"
 | 
			
		||||
        ></div>
 | 
			
		||||
      </lay-tooltip>
 | 
			
		||||
        <lay-tooltip :content="'' + verticalRangeValue[0]" :is-can-hide="tooptipHide">
 | 
			
		||||
      <lay-tooltip
 | 
			
		||||
        :content="'' + verticalRangeValue[0]"
 | 
			
		||||
        :is-can-hide="tooptipHide"
 | 
			
		||||
      >
 | 
			
		||||
        <div
 | 
			
		||||
          :style="{ bottom: verticalRangeValue[0] + '%' }"
 | 
			
		||||
          class="layui-slider-vertical-btn"
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "laySplitPanel"
 | 
			
		||||
}
 | 
			
		||||
  name: "laySplitPanel",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LaySplitPanelItem"
 | 
			
		||||
}
 | 
			
		||||
  name: "LaySplitPanelItem",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
 | 
			
		||||
@ -1,9 +1,9 @@
 | 
			
		||||
@width-height-pace: 24px;
 | 
			
		||||
@step-color: @step-success-color;
 | 
			
		||||
@step-fail-color: #FF5722;
 | 
			
		||||
@step-primary-color: #1E9FFF;
 | 
			
		||||
@step-warning-color: #FFB800;
 | 
			
		||||
@step-success-color: #5FB878;
 | 
			
		||||
@step-fail-color: #ff5722;
 | 
			
		||||
@step-primary-color: #1e9fff;
 | 
			
		||||
@step-warning-color: #ffb800;
 | 
			
		||||
@step-success-color: #5fb878;
 | 
			
		||||
 | 
			
		||||
.lay-step {
 | 
			
		||||
  display: flex;
 | 
			
		||||
@ -24,11 +24,11 @@
 | 
			
		||||
    cursor: pointer;
 | 
			
		||||
    width: @width-height-pace;
 | 
			
		||||
    height: @width-height-pace;
 | 
			
		||||
    border: 1px #8D8D8D solid;
 | 
			
		||||
    border: 1px #8d8d8d solid;
 | 
			
		||||
    border-radius: 50%;
 | 
			
		||||
    text-align: center;
 | 
			
		||||
    line-height: @width-height-pace;
 | 
			
		||||
    background: #FFFFFF;
 | 
			
		||||
    background: #ffffff;
 | 
			
		||||
  }
 | 
			
		||||
  .is-center {
 | 
			
		||||
    margin: 0 auto;
 | 
			
		||||
@ -45,52 +45,52 @@
 | 
			
		||||
 | 
			
		||||
  .lay-step-item--success {
 | 
			
		||||
    border: 1px @step-color solid;
 | 
			
		||||
    color: #FFFFFF;
 | 
			
		||||
    color: #ffffff;
 | 
			
		||||
    background: @step-color;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .lay-step-item--fail {
 | 
			
		||||
    border: 1px @step-fail-color solid;
 | 
			
		||||
    color: #FFFFFF;
 | 
			
		||||
    color: #ffffff;
 | 
			
		||||
    background: @step-fail-color;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .lay-step-item--warning {
 | 
			
		||||
    border: 1px @step-warning-color solid;
 | 
			
		||||
    color: #FFFFFF;
 | 
			
		||||
    color: #ffffff;
 | 
			
		||||
    background: @step-warning-color;
 | 
			
		||||
  }
 | 
			
		||||
  .lay-step-item--primary {
 | 
			
		||||
    border: 1px @step-primary-color solid;
 | 
			
		||||
    color: #FFFFFF;
 | 
			
		||||
    color: #ffffff;
 | 
			
		||||
    background: @step-primary-color;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .lay-step-item-success {
 | 
			
		||||
    border: 1px @step-color solid;
 | 
			
		||||
    color: #FFFFFF;
 | 
			
		||||
    color: #ffffff;
 | 
			
		||||
    background: @step-color;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .lay-step-item-fail {
 | 
			
		||||
    border: 1px @step-fail-color solid;
 | 
			
		||||
    color: #FFFFFF;
 | 
			
		||||
    color: #ffffff;
 | 
			
		||||
    background: @step-fail-color;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .lay-step-item-warning {
 | 
			
		||||
    border: 1px @step-warning-color solid;
 | 
			
		||||
    color: #FFFFFF;
 | 
			
		||||
    color: #ffffff;
 | 
			
		||||
    background: @step-warning-color;
 | 
			
		||||
  }
 | 
			
		||||
  .lay-step-item-primary {
 | 
			
		||||
    border: 1px @step-primary-color solid;
 | 
			
		||||
    color: #FFFFFF;
 | 
			
		||||
    color: #ffffff;
 | 
			
		||||
    background: @step-primary-color;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .lay-step-item-content {
 | 
			
		||||
    color: #8D8D8D;
 | 
			
		||||
    color: #8d8d8d;
 | 
			
		||||
    cursor: pointer;
 | 
			
		||||
    .lay-step-item-content-title {
 | 
			
		||||
      font-weight: bold;
 | 
			
		||||
@ -99,7 +99,7 @@
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .lay-step-item-content-row {
 | 
			
		||||
    color: #8D8D8D;
 | 
			
		||||
    color: #8d8d8d;
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    top: 5px;
 | 
			
		||||
    left: 24px;
 | 
			
		||||
@ -149,7 +149,6 @@
 | 
			
		||||
    color: @step-primary-color;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  .lay-step-item-line {
 | 
			
		||||
    position: relative;
 | 
			
		||||
  }
 | 
			
		||||
@ -163,7 +162,7 @@
 | 
			
		||||
    display: block;
 | 
			
		||||
    height: 1px;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    background: #C9C5C5;
 | 
			
		||||
    background: #c9c5c5;
 | 
			
		||||
  }
 | 
			
		||||
  .is-line-center:before {
 | 
			
		||||
    left: 50%;
 | 
			
		||||
@ -254,18 +253,20 @@
 | 
			
		||||
    border-color: transparent transparent transparent #9fd4ae !important;
 | 
			
		||||
  }
 | 
			
		||||
  .lay-step-item-simple-success-border:after {
 | 
			
		||||
    border-color: transparent transparent transparent @step-success-color!important;
 | 
			
		||||
    border-color: transparent transparent transparent
 | 
			
		||||
      @step-success-color!important;
 | 
			
		||||
  }
 | 
			
		||||
  .lay-step-item-simple-fail-border:after {
 | 
			
		||||
    border-color: transparent transparent transparent @step-fail-color!important;
 | 
			
		||||
  }
 | 
			
		||||
  .lay-step-item-simple-warning-border:after {
 | 
			
		||||
    border-color: transparent transparent transparent @step-warning-color!important;
 | 
			
		||||
    border-color: transparent transparent transparent
 | 
			
		||||
      @step-warning-color!important;
 | 
			
		||||
  }
 | 
			
		||||
  .lay-step-item-simple-primary-border:after {
 | 
			
		||||
    border-color: transparent transparent transparent @step-primary-color!important;
 | 
			
		||||
    border-color: transparent transparent transparent
 | 
			
		||||
      @step-primary-color!important;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
.lay-step-column {
 | 
			
		||||
  height: 100%;
 | 
			
		||||
@ -285,7 +286,7 @@
 | 
			
		||||
    display: block;
 | 
			
		||||
    width: 1px;
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    background: #C9C5C5;
 | 
			
		||||
    background: #c9c5c5;
 | 
			
		||||
  }
 | 
			
		||||
  .lay-step-item-content {
 | 
			
		||||
    margin-left: 8px;
 | 
			
		||||
 | 
			
		||||
@ -1,16 +1,11 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayStep"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayStep",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import {
 | 
			
		||||
  ref,
 | 
			
		||||
  watch,
 | 
			
		||||
  provide,
 | 
			
		||||
  withDefaults,
 | 
			
		||||
} from "vue";
 | 
			
		||||
import { ref, watch, provide, withDefaults } from "vue";
 | 
			
		||||
import "./index.less";
 | 
			
		||||
 | 
			
		||||
export interface LayStepProps {
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayStepItem"
 | 
			
		||||
}
 | 
			
		||||
  name: "LayStepItem",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
 | 
			
		||||
@ -5,7 +5,15 @@ export default {
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import { computed, inject, onBeforeUnmount, ref, Ref, useSlots, watch } from "vue";
 | 
			
		||||
import {
 | 
			
		||||
  computed,
 | 
			
		||||
  inject,
 | 
			
		||||
  onBeforeUnmount,
 | 
			
		||||
  ref,
 | 
			
		||||
  Ref,
 | 
			
		||||
  useSlots,
 | 
			
		||||
  watch,
 | 
			
		||||
} from "vue";
 | 
			
		||||
 | 
			
		||||
export interface LaySubMenuProps {
 | 
			
		||||
  id: string;
 | 
			
		||||
@ -36,7 +44,7 @@ const isOpen = computed(() => {
 | 
			
		||||
const layuiNavChild = ref<HTMLElement>();
 | 
			
		||||
const position = ref<String>();
 | 
			
		||||
watch(isOpen, () => {
 | 
			
		||||
  if (isOpen.value && position.value !== 'left-nav') {
 | 
			
		||||
  if (isOpen.value && position.value !== "left-nav") {
 | 
			
		||||
    setTimeout(setPosition, 0);
 | 
			
		||||
  }
 | 
			
		||||
});
 | 
			
		||||
@ -45,14 +53,17 @@ const setPosition = function() {
 | 
			
		||||
    return;
 | 
			
		||||
  }
 | 
			
		||||
  const offsetWidth = layuiNavChild.value.offsetWidth;
 | 
			
		||||
  if (window.innerWidth < layuiNavChild.value.getBoundingClientRect().left + offsetWidth + 10) {
 | 
			
		||||
    position.value = 'left-nav';
 | 
			
		||||
  if (
 | 
			
		||||
    window.innerWidth <
 | 
			
		||||
    layuiNavChild.value.getBoundingClientRect().left + offsetWidth + 10
 | 
			
		||||
  ) {
 | 
			
		||||
    position.value = "left-nav";
 | 
			
		||||
  } else {
 | 
			
		||||
    position.value = '';
 | 
			
		||||
    position.value = "";
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
window.addEventListener('resize', setPosition);
 | 
			
		||||
onBeforeUnmount(()=>window.removeEventListener('resize', setPosition));
 | 
			
		||||
};
 | 
			
		||||
window.addEventListener("resize", setPosition);
 | 
			
		||||
onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
 | 
			
		||||
@ -1 +0,0 @@
 | 
			
		||||
 | 
			
		||||
@ -1 +0,0 @@
 | 
			
		||||
 | 
			
		||||
@ -13,12 +13,9 @@ export interface LayTabItemProps {
 | 
			
		||||
  closable?: boolean | string;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(
 | 
			
		||||
  defineProps<LayTabItemProps>(),
 | 
			
		||||
  {
 | 
			
		||||
const props = withDefaults(defineProps<LayTabItemProps>(), {
 | 
			
		||||
  closable: true,
 | 
			
		||||
  }
 | 
			
		||||
);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const active = inject("active");
 | 
			
		||||
const slotsChange: Ref<boolean> = inject("slotsChange") as Ref<boolean>;
 | 
			
		||||
 | 
			
		||||
@ -5,13 +5,7 @@ export default {
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import {
 | 
			
		||||
  ref,
 | 
			
		||||
  watch,
 | 
			
		||||
  useSlots,
 | 
			
		||||
  withDefaults,
 | 
			
		||||
  onMounted,
 | 
			
		||||
} from "vue";
 | 
			
		||||
import { ref, watch, useSlots, withDefaults, onMounted } from "vue";
 | 
			
		||||
import { Recordable } from "../../types";
 | 
			
		||||
import { guid } from "../../utils/guidUtil";
 | 
			
		||||
import LayCheckbox from "../checkbox";
 | 
			
		||||
@ -34,14 +28,12 @@ export interface LayTableProps {
 | 
			
		||||
  selectedKeys?: Recordable[];
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<LayTableProps>(),
 | 
			
		||||
  {
 | 
			
		||||
const props = withDefaults(defineProps<LayTableProps>(), {
 | 
			
		||||
  id: "id",
 | 
			
		||||
  size: "md",
 | 
			
		||||
  dataSource: () => [],
 | 
			
		||||
  selectedKeys: () => [],
 | 
			
		||||
  }
 | 
			
		||||
);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const emit = defineEmits([
 | 
			
		||||
  "change",
 | 
			
		||||
@ -114,11 +106,10 @@ let tableHeader = ref<HTMLElement | null>(null);
 | 
			
		||||
let tableBody = ref<HTMLElement | null>(null);
 | 
			
		||||
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
  tableBody.value?.addEventListener('scroll', () => {
 | 
			
		||||
  tableBody.value?.addEventListener("scroll", () => {
 | 
			
		||||
    tableHeader.value!.scrollLeft = tableBody.value?.scrollLeft || 0;
 | 
			
		||||
  })
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
  });
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
 | 
			
		||||
@ -9,7 +9,7 @@ import { defineComponent, ref } from "vue";
 | 
			
		||||
export default defineComponent({
 | 
			
		||||
  name: "LayTooltip",
 | 
			
		||||
  components: {
 | 
			
		||||
    LayPopper
 | 
			
		||||
    LayPopper,
 | 
			
		||||
  },
 | 
			
		||||
  props: {
 | 
			
		||||
    content: {
 | 
			
		||||
@ -36,16 +36,16 @@ export default defineComponent({
 | 
			
		||||
  setup() {
 | 
			
		||||
    const isMounted = ref(false);
 | 
			
		||||
    return {
 | 
			
		||||
      isMounted
 | 
			
		||||
    }
 | 
			
		||||
      isMounted,
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
  computed: {
 | 
			
		||||
    innerProps() {
 | 
			
		||||
      return { el: this.$el.nextElementSibling, ...this.$props };
 | 
			
		||||
    }
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.$nextTick(() => this.isMounted = true);
 | 
			
		||||
  }
 | 
			
		||||
    this.$nextTick(() => (this.isMounted = true));
 | 
			
		||||
  },
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
@ -1,2 +1 @@
 | 
			
		||||
import { Recordable } from "../../types";
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -1,4 +1,3 @@
 | 
			
		||||
 | 
			
		||||
.layui-tree {
 | 
			
		||||
  line-height: 22px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										10
									
								
								src/index.ts
									
									
									
									
									
								
							
							
						
						
									
										10
									
								
								src/index.ts
									
									
									
									
									
								
							@ -74,9 +74,9 @@ import LayStepItem from "./component/stepItem/index";
 | 
			
		||||
import LaySubMenu from "./component/subMenu/index";
 | 
			
		||||
import LaySplitPanel from "./component/splitPanel/index";
 | 
			
		||||
import LaySplitPanelItem from "./component/splitPanelItem/index";
 | 
			
		||||
import LayException from "./component/exception/index"
 | 
			
		||||
import LayResult from "./component/result/index"
 | 
			
		||||
import LayConfigProvider from "./provider"
 | 
			
		||||
import LayException from "./component/exception/index";
 | 
			
		||||
import LayResult from "./component/result/index";
 | 
			
		||||
import LayConfigProvider from "./provider";
 | 
			
		||||
 | 
			
		||||
const components: Record<string, Component> = {
 | 
			
		||||
  LaySplitPanel,
 | 
			
		||||
@ -149,7 +149,7 @@ const components: Record<string, Component> = {
 | 
			
		||||
  LaySubMenu,
 | 
			
		||||
  LayException,
 | 
			
		||||
  LayResult,
 | 
			
		||||
  LayConfigProvider
 | 
			
		||||
  LayConfigProvider,
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const install = (app: App): void => {
 | 
			
		||||
@ -231,7 +231,7 @@ export {
 | 
			
		||||
  LaySubMenu,
 | 
			
		||||
  LayException,
 | 
			
		||||
  LayResult,
 | 
			
		||||
  LayConfigProvider
 | 
			
		||||
  LayConfigProvider,
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export { layer, useLayer };
 | 
			
		||||
 | 
			
		||||
@ -1,13 +1,13 @@
 | 
			
		||||
import { createI18n } from 'vue-i18n'
 | 
			
		||||
import { createI18n } from "vue-i18n";
 | 
			
		||||
import zh_CN from "./zh_CN";
 | 
			
		||||
import en_US from './en_US';
 | 
			
		||||
import en_US from "./en_US";
 | 
			
		||||
 | 
			
		||||
const i18n = createI18n({
 | 
			
		||||
  locale: 'en_US',
 | 
			
		||||
  locale: "en_US",
 | 
			
		||||
  messages: {
 | 
			
		||||
    zh_CN: zh_CN,
 | 
			
		||||
    en_US: en_US,
 | 
			
		||||
  },
 | 
			
		||||
})
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
export default i18n;
 | 
			
		||||
@ -63,7 +63,8 @@ watch(
 | 
			
		||||
    locals?.forEach((item: any) => {
 | 
			
		||||
      changeLocales(item.name, item.locale, item.merge);
 | 
			
		||||
    });
 | 
			
		||||
  }, { immediate: true, deep: true}
 | 
			
		||||
  },
 | 
			
		||||
  { immediate: true, deep: true }
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
watch(
 | 
			
		||||
 | 
			
		||||
@ -17,7 +17,6 @@
 | 
			
		||||
@global-back-color: var(--global-back-color);
 | 
			
		||||
 | 
			
		||||
:root {
 | 
			
		||||
 | 
			
		||||
  --global-primary-color: #009688;
 | 
			
		||||
 | 
			
		||||
  --global-normal-color: #1e9fff;
 | 
			
		||||
@ -35,15 +34,12 @@
 | 
			
		||||
  --global-fore-color: #333;
 | 
			
		||||
 | 
			
		||||
  --global-back-color: #ffffff;
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
body[lay-theme='dark'] {
 | 
			
		||||
 | 
			
		||||
body[lay-theme="dark"] {
 | 
			
		||||
  --global-border-color: #d2d2d2;
 | 
			
		||||
 | 
			
		||||
  --global-fore-color: #ffffff;
 | 
			
		||||
 | 
			
		||||
  --global-back-color: #393d49;
 | 
			
		||||
  
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -12,5 +12,5 @@ export interface SelectItemHandle {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export interface SelectItemPush {
 | 
			
		||||
  (selectItem: SelectItem): void
 | 
			
		||||
  (selectItem: SelectItem): void;
 | 
			
		||||
}
 | 
			
		||||
@ -13,5 +13,18 @@ export function S4() {
 | 
			
		||||
 * @param null 无参
 | 
			
		||||
 * */
 | 
			
		||||
export function guid() {
 | 
			
		||||
  return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
 | 
			
		||||
  return (
 | 
			
		||||
    S4() +
 | 
			
		||||
    S4() +
 | 
			
		||||
    "-" +
 | 
			
		||||
    S4() +
 | 
			
		||||
    "-" +
 | 
			
		||||
    S4() +
 | 
			
		||||
    "-" +
 | 
			
		||||
    S4() +
 | 
			
		||||
    "-" +
 | 
			
		||||
    S4() +
 | 
			
		||||
    S4() +
 | 
			
		||||
    S4()
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user