init

.svn/pristine/64/640a85f15baa55753abe49f2d1c4e5e9ad39cc45.svn-base

@@ -0,0 +1 @@
+export { default as LayLayer } from "./index.vue";

.svn/pristine/64/6430c75cd47bb3e32c7d2ccad2d139045521776b.svn-base

@@ -0,0 +1,20 @@
+<script lang="ts">
+export default {
+  name: "SpreadLeftIcon",
+};
+</script>
+<script setup lang="ts">
+import LayIcon from "../component/icon/index";
+
+const props = defineProps<{
+  color?: string;
+  size?: string;
+}>();
+</script>
+<template>
+  <lay-icon
+    :color="props.color"
+    :size="props.size"
+    type="layui-icon-spread-left"
+  />
+</template>

.svn/pristine/64/645b5129c19bc2114602bb43315a194752b49ad2.svn-base

@@ -0,0 +1,125 @@
+::: anchor
+:::
+
+::: title 基本介绍
+:::
+
+::: describe 作为一个拖拽式的交互性组件，滑块往往能给产品带来更好的操作体验。
+:::
+
+::: title 横向
+:::
+
+::: demo 使用 `lay-slider` 标签, 创建滑块
+
+<template>
+  <lay-slider :showDots="true" :step="10" :max="100" v-model="value1" :disabled="false"></lay-slider>
+  <lay-input-number v-model="value1"></lay-input-number>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const value1 = ref(50)
+    return {
+      value1
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 纵向
+:::
+::: demo
+
+<template>
+  <lay-slider :showDots="false" :step="10" v-model="value2" :vertical="true" :disabled="false"></lay-slider>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const value2 = ref(10)
+
+    return {
+        value2
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 区间
+:::
+
+::: demo
+
+<template>
+  <lay-slider :disabled="false" :min="0" :max="100" v-model:rangeValue="value3" :range="true"></lay-slider>
+</template>
+
+<script>
+import { ref } from 'vue'
+export default {
+  setup() {
+    const value3 = ref([20,50])
+    return {
+      value3
+    }
+  }
+}
+</script>
+:::
+
+::: title 纵向区间
+:::
+
+::: demo
+
+<template>
+  <lay-slider v-model:rangeValue="value4" :range="true" :vertical="true" :disabled="false"></lay-slider>
+</template>
+
+<script>
+import { ref } from 'vue'
+export default {
+  setup() {
+    const value4 = ref([23,56])
+    return {
+      value4
+    }
+  }
+}
+</script>
+:::
+
+::: title Slider 属性
+:::
+
+::: table
+
+| 属性          |         描述          |             类型          |     可选值      |   默认值 |
+| ------------ | --------------------- | ------------------------- | -------------- | -------- |
+| v-model      | 选中值                | `Number`  |        -       |    -    |
+| vertical  |  是否垂直     | `Boolean`                   |        -       |    -    |
+| range  |  是否区间     | `Boolean`                   |        -       |    -    |
+| rangeValue  |  区间值     | `Array`                   |        -       |    -    |
+| step  |  步长     | `Number`                   |        -       |    -    |
+| min  |  最小值     | `Number`                   |        -       |    -    |
+| max  |  最大值     | `Number`                   |        -       |    -    |
+| showDots  |  是否显示断点     | `Boolean`                   |        -       |    false    |
+:::
+
+::: contributor slider
+::: 
+
+::: previousNext slider
+:::

.svn/pristine/64/646817356dda6cd16082cc29551189709de625a5.svn-base

@@ -0,0 +1,3 @@
+import Component from "./index.vue";
+
+export default Component;

.svn/pristine/64/64d6dc7b8f5e5a776dd97b6861dbf388ef3cf855.svn-base

@@ -0,0 +1,114 @@
+<script lang="ts">
+export default {
+  name: "LayTooltip",
+  inheritAttrs: false,
+};
+</script>
+<script lang="ts" setup>
+import "./index.less";
+import LayPopper from "../popper/index.vue";
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  PropType,
+  ref,
+  shallowRef,
+  StyleValue,
+} from "vue";
+import { useEventListener } from "@vueuse/core";
+
+export type PopperTrigger = "click" | "hover" | "focus" | "contextMenu";
+
+const props = defineProps({
+  content: {
+    type: [Number, String],
+    required: false,
+  },
+  position: {
+    type: String,
+    default: "top",
+  },
+  isDark: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  isCanHide: {
+    type: Boolean,
+    default: true,
+  },
+  isAutoShow: {
+    type: Boolean,
+    default: false,
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  trigger: {
+    type: String as PropType<PopperTrigger | PopperTrigger[]>,
+    default: "hover",
+  },
+  enterable: {
+    type: Boolean,
+    default: true,
+  },
+  popperClass: {
+    type: [String, Array, Object],
+  },
+  popperStyle: {
+    type: [String, Object] as PropType<StyleValue>,
+  },
+});
+const vm = getCurrentInstance()!;
+const isMounted = ref(false);
+const tooltipRefEl = shallowRef<HTMLElement | undefined>(undefined);
+
+const innerProps = computed(() => {
+  return { el: vm.proxy!.$el.nextElementSibling, ...vm.proxy!.$props };
+});
+
+const setEllipsis = function () {
+  if (tooltipRefEl.value) {
+    let tooltipHtml = tooltipRefEl.value;
+
+    if (
+      tooltipHtml.offsetWidth >=
+      (tooltipHtml.firstChild as HTMLElement)?.offsetWidth
+    ) {
+      isMounted.value = false;
+    } else {
+      isMounted.value = true;
+    }
+  } else {
+    isMounted.value = true;
+  }
+};
+
+onMounted(() => {
+  if (props.isAutoShow) {
+    useEventListener("resize", () => {
+      setEllipsis();
+    });
+  }
+  nextTick(() => {
+    setEllipsis();
+  });
+});
+</script>
+<template>
+  <div ref="tooltipRefEl" v-if="isAutoShow" class="lay-tooltip-content">
+    <span>
+      <slot></slot>
+    </span>
+  </div>
+  <slot v-else></slot>
+  <lay-popper v-if="isMounted" v-bind="innerProps">
+    <slot name="content"></slot>
+  </lay-popper>
+</template>