init

.svn/pristine/03/032750d61dca79acf3e0800a71ebd43af5546b18.svn-base

@@ -0,0 +1,417 @@
+<template>
+  <div
+    :class="['layui-date-picker', { 'layui-date-range-picker': range }]"
+    :size="size"
+  >
+    <lay-dropdown
+      ref="dropdownRef"
+      :disabled="disabled"
+      :autoFitMinWidth="false"
+      :contentClass="contentClass"
+      :contentStyle="contentStyle"
+      updateAtScroll
+    >
+      <lay-input
+        :name="name"
+        :readonly="readonly"
+        :placeholder="startPlaceholder"
+        :prefix-icon="prefixIcon"
+        :suffix-icon="suffixIcon"
+        :disabled="disabled"
+        v-model="dateValue"
+        v-if="!range"
+        @change="onChange"
+        @blur="$emit('blur')"
+        @focus="$emit('focus')"
+        :allow-clear="!disabled && allowClear"
+        :size="size"
+        @clear="
+          dateValue = '';
+          onChange();
+        "
+      >
+      </lay-input>
+      <div class="laydate-range-inputs" v-else>
+        <lay-input
+          :readonly="readonly"
+          :name="name"
+          v-model="dateValue[0]"
+          :placeholder="startPlaceholder"
+          :disabled="disabled"
+          @change="onChange"
+          @blur="$emit('blur')"
+          @focus="$emit('focus')"
+          class="start-input"
+          :size="size"
+        >
+        </lay-input>
+        <span class="range-separator">{{ rangeSeparator }}</span>
+        <lay-input
+          :readonly="readonly"
+          :name="name"
+          :allow-clear="disabled && allowClear"
+          :placeholder="endPlaceholder"
+          v-model="dateValue[1]"
+          :disabled="disabled"
+          @change="onChange"
+          @blur="$emit('blur')"
+          @focus="$emit('focus')"
+          class="end-input"
+          :size="size"
+          @clear="
+            dateValue = [];
+            onChange();
+          "
+        >
+        </lay-input>
+      </div>
+
+      <template #content>
+        <!-- 日期选择 -->
+        <DatePanel
+          v-if="!range && (showPanel === 'date' || showPanel === 'datetime')"
+          v-model="currentDay"
+        ></DatePanel>
+        <!-- 时间选择 -->
+        <TimePanel
+          v-if="!range && showPanel === 'time'"
+          v-model="hms"
+        ></TimePanel>
+        <!-- 年份选择器 -->
+        <YearPanel
+          v-if="!range && (showPanel === 'year' || showPanel === 'yearmonth')"
+          v-model="currentYear"
+        >
+        </YearPanel>
+        <!-- 月份选择器 -->
+        <MonthPanel
+          v-if="!range && showPanel === 'month'"
+          v-model="currentMonth"
+        ></MonthPanel>
+        <!-- 范围选择 -->
+        <DateRange
+          v-if="range && (showPanel === 'date' || showPanel === 'datetime')"
+          v-model:startTime="rangeValue.first"
+          v-model:endTime="rangeValue.last"
+        ></DateRange>
+
+        <MonthRange
+          v-if="range && showPanel === 'yearmonth'"
+          v-model:startTime="rangeValue.first"
+          v-model:endTime="rangeValue.last"
+        >
+        </MonthRange>
+      </template>
+    </lay-dropdown>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "LayDatePicker",
+};
+</script>
+
+<script lang="ts" setup>
+import "./index.less";
+import dayjs from "dayjs";
+import { LayIcon } from "@layui/icons-vue";
+import LayInput from "../input/index.vue";
+import LayDropdown from "../dropdown/index.vue";
+import { getMonth, getYear, getDay } from "./day";
+import {
+  ref,
+  watch,
+  defineProps,
+  defineEmits,
+  reactive,
+  provide,
+  StyleValue,
+} from "vue";
+import DatePanel from "./components/DatePanel.vue";
+import TimePanel from "./components/TimePanel.vue";
+import YearPanel from "./components/YearPanel.vue";
+import MonthPanel from "./components/MonthPanel.vue";
+import DateRange from "./components/DateRange.vue";
+import MonthRange from "./components/MonthRange.vue";
+import { computed } from "@vue/reactivity";
+
+export interface DatePickerProps {
+  type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
+  placeholder?: string | string[];
+  modelValue?: string | number | string[];
+  disabled?: boolean;
+  simple?: boolean;
+  name?: string;
+  max?: string;
+  min?: string;
+  range?: boolean;
+  rangeSeparator?: string;
+  readonly?: boolean;
+  allowClear?: boolean;
+  size?: "lg" | "md" | "sm" | "xs";
+  prefixIcon?: string;
+  suffixIcon?: string;
+  timestamp?: boolean;
+  contentClass?: string | Array<string | object> | object;
+  contentStyle?: StyleValue;
+}
+
+const props = withDefaults(defineProps<DatePickerProps>(), {
+  modelValue: "",
+  type: "date",
+  disabled: false,
+  simple: false,
+  range: false,
+  rangeSeparator: "至",
+  readonly: false,
+  allowClear: false,
+  size: "md",
+  prefixIcon: "layui-icon-date",
+  suffixIcon: "",
+  timestamp: false,
+});
+
+const startPlaceholder = computed(() => {
+  if (Array.isArray(props.placeholder)) {
+    return props.placeholder[0];
+  }
+  return props.placeholder;
+});
+
+const endPlaceholder = computed(() => {
+  if (Array.isArray(props.placeholder)) {
+    return props.placeholder[1];
+  }
+  return props.placeholder;
+});
+
+const dropdownRef = ref(null);
+const $emits = defineEmits(["update:modelValue", "change", "blur", "focus"]);
+const hms = ref({
+  hh: 0,
+  mm: 0,
+  ss: 0,
+});
+const currentYear = ref<number>(0);
+const currentMonth = ref<number>(0);
+const currentDay = ref<number>(0);
+const showPanel = ref<string>("date");
+const rangeValue = reactive({ first: "", last: "" });
+
+let unWatch = false;
+// 计算结果日期
+const dateValue = props.range ? ref(["", ""]) : ref("");
+const getDateValue = () => {
+  unWatch = true;
+  let dayjsVal;
+  switch (props.type) {
+    case "date":
+      dayjsVal =
+        currentDay.value !== -1
+          ? dayjs(currentDay.value).format("YYYY-MM-DD")
+          : "";
+      break;
+    case "datetime":
+      dayjsVal =
+        currentDay.value !== -1
+          ? dayjs(currentDay.value)
+              .hour(hms.value.hh)
+              .minute(hms.value.mm)
+              .second(hms.value.ss)
+              .format("YYYY-MM-DD HH:mm:ss")
+          : "";
+      break;
+    case "year":
+      dayjsVal =
+        currentYear.value !== -1
+          ? dayjs().year(currentYear.value).format("YYYY")
+          : "";
+      break;
+    case "month":
+      dayjsVal =
+        currentMonth.value !== -1 ? (currentMonth.value + 1).toString() : "";
+      break;
+    case "time":
+      dayjsVal = dayjs()
+        .hour(hms.value.hh)
+        .minute(hms.value.mm)
+        .second(hms.value.ss)
+        .format("HH:mm:ss");
+      break;
+    case "yearmonth":
+      dayjsVal =
+        currentYear.value !== -1 && currentMonth.value !== -1
+          ? dayjs()
+              .year(currentYear.value)
+              .month(currentMonth.value)
+              .format("YYYY-MM")
+          : "";
+      break;
+    default:
+      dayjsVal =
+        currentDay.value !== -1
+          ? dayjs(currentDay.value)
+              .hour(hms.value.hh)
+              .minute(hms.value.mm)
+              .second(hms.value.ss)
+              .format()
+          : "";
+      break;
+  }
+  dateValue.value = dayjsVal !== "Invalid Date" ? dayjsVal : "";
+  if (dayjsVal === "Invalid Date") {
+    unWatch = false;
+    $emits("update:modelValue", "");
+    return;
+  }
+  if (props.timestamp) {
+    $emits("update:modelValue", dayjs(dayjsVal).unix() * 1000);
+    $emits("change", dayjs(dayjsVal).unix() * 1000);
+  } else {
+    $emits("update:modelValue", dayjsVal);
+    $emits("change", dayjsVal);
+  }
+  setTimeout(() => {
+    unWatch = false;
+  }, 0);
+};
+const getDateValueByRange = () => {
+  unWatch = true;
+  if (rangeValue.first === "" || rangeValue.last === "") {
+    dateValue.value = ["", ""];
+    $emits("update:modelValue", dateValue.value);
+    $emits("change", dateValue.value);
+    return;
+  }
+  let format = "YYYY-MM-DD";
+  switch (props.type) {
+    case "date":
+      format = "YYYY-MM-DD";
+      break;
+    case "datetime":
+      format = "YYYY-MM-DD HH:mm:ss";
+      break;
+    case "yearmonth":
+      format = "YYYY-MM";
+      break;
+  }
+  dateValue.value = [
+    dayjs(rangeValue.first).format(format),
+    dayjs(rangeValue.last).format(format),
+  ];
+  $emits("update:modelValue", dateValue.value);
+  $emits("change", dateValue.value);
+  setTimeout(() => {
+    unWatch = false;
+  }, 0);
+};
+
+// 确认事件
+const ok = () => {
+  if (!props.range) {
+    getDateValue();
+  } else {
+    getDateValueByRange();
+  }
+  if (dropdownRef.value)
+    // @ts-ignore
+    dropdownRef.value.hide();
+  showPanel.value = props.type;
+};
+
+//面板类型判断
+watch(
+  () => props.type,
+  () => {
+    showPanel.value = props.type;
+    if (props.type === "yearmonth" && !props.range) {
+      showPanel.value = "year";
+    }
+  },
+  { immediate: true }
+);
+
+//监听modelValue改变
+watch(
+  () => props.modelValue,
+  () => {
+    if (unWatch) {
+      return;
+    }
+    let initModelValue: string =
+      props.range && props.modelValue
+        ? (props.modelValue as string[])[0] || ""
+        : (props.modelValue as string);
+    if (props.type === "month" || props.type === "year") {
+      initModelValue += "";
+    }
+
+    hms.value.hh = isNaN(dayjs(initModelValue).hour())
+      ? 0
+      : dayjs(initModelValue).hour();
+    hms.value.mm = isNaN(dayjs(initModelValue).minute())
+      ? 0
+      : dayjs(initModelValue).minute();
+    hms.value.ss = isNaN(dayjs(initModelValue).second())
+      ? 0
+      : dayjs(initModelValue).second();
+
+    if (initModelValue.length === 8 && props.type === "time") {
+      let modelValue = initModelValue;
+      modelValue = "1970-01-01 " + modelValue;
+      hms.value.hh = dayjs(modelValue).hour();
+      hms.value.mm = dayjs(modelValue).minute();
+      hms.value.ss = dayjs(modelValue).second();
+    }
+
+    currentYear.value = initModelValue ? getYear(initModelValue) : -1;
+    currentMonth.value = initModelValue ? getMonth(initModelValue) : -1;
+    currentDay.value = initModelValue ? getDay(initModelValue) : -1;
+    if (props.type === "date" || props.type === "datetime") {
+      if (currentYear.value === -1) currentYear.value = dayjs().year();
+      if (currentMonth.value === -1) currentMonth.value = dayjs().month();
+      if (props.timestamp) {
+        currentDay.value = initModelValue
+          ? dayjs(parseInt(initModelValue)).startOf("date").unix() * 1000
+          : -1;
+      }
+    }
+    rangeValue.first = initModelValue;
+    rangeValue.last =
+      props.range && props.modelValue
+        ? (props.modelValue as string[])[1] || ""
+        : "";
+    if (!props.range) {
+      getDateValue();
+    } else {
+      getDateValueByRange();
+    }
+  },
+  { immediate: true }
+);
+
+const onChange = () => {
+  if (dropdownRef.value)
+    // @ts-ignore
+    dropdownRef.value.hide();
+  $emits("update:modelValue", dateValue.value);
+};
+
+provide("datePicker", {
+  currentYear: currentYear,
+  currentMonth: currentMonth,
+  currentDay: currentDay,
+  dateValue: dateValue,
+  type: props.type,
+  showPanel: showPanel,
+  hms: hms,
+  ok: () => ok(),
+  getDateValue: () => getDateValue,
+  range: props.range,
+  rangeValue: rangeValue,
+  rangeSeparator: props.rangeSeparator,
+  simple: props.simple,
+  timestamp: props.timestamp,
+});
+</script>

.svn/pristine/03/032d5d9e031a26ddfac3e9d1709e2fe7fdb94151.svn-base

@@ -0,0 +1 @@
+x
m<>=<0E>0<0C>a<EFBFBD><61>Š`IQ<06><><EFBFBD><EFBFBD>SD<53>qi <20><>&<26><>P<EFBFBD>N<EFBFBD>t`<60><><EFBFBD>5<EFBFBD><0C><>q㻞<71>OP<4F><13><>X<EFBFBD>i<1F><>4u<>8<EFBFBD>m<EFBFBD><6D>nh<6E>}t8~KLV_:<3A><><EFBFBD>s{<7B>)<29><10><>hw<68><EFBFBD>=F,#<23><>
K%#b<>pZ<0F><>={Y<><59><EFBFBD><EFBFBD>ݗ<EFBFBD>=<3D><0C><>^C<>H<EFBFBD>

.svn/pristine/03/037256afc712259c17d0917549bc23b1550f346c.svn-base

@@ -0,0 +1,16 @@
+<script lang="ts">
+export default {
+  name: "EmailIcon",
+};
+</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-email" />
+</template>

.svn/pristine/03/03890be37cc77430ac5a28a1197ff56b36098573.svn-base

@@ -0,0 +1,136 @@
+@import "../popper/index.less";
+
+.layui-slider-v {
+  width: 100%;
+  height: 18px;
+  margin-bottom: 8px;
+}
+
+.layui-slider-track-v {
+  width: 100%;
+  height: 16px;
+  position: relative;
+  cursor: pointer;
+  z-index: 30;
+}
+
+.layui-slider-btn-v {
+  width: 12px;
+  height: 12px;
+  background-color: white;
+  position: absolute;
+  border: 2px solid var(--global-primary-color);
+  border-radius: 50%;
+  cursor: pointer;
+  left: 0%;
+  z-index: 2;
+}
+
+.layui-slider-rate-v {
+  width: 0%;
+  height: 4px;
+  position: absolute;
+  top: 6px;
+  left: 0;
+  background-color: var(--global-primary-color);
+  z-index: 1;
+}
+
+.layui-slider-line-v {
+  width: 100%;
+  height: 4px;
+  background-color: #cccccc;
+  position: absolute;
+  top: 6px;
+}
+.layui-slider-disabled {
+  cursor: not-allowed !important;
+}
+.layui-slider-disabled .disable-line {
+  background-color: #c2c2c2 !important;
+}
+
+.layui-slider-disabled .disable-btn {
+  border: 2px solid #333333;
+}
+
+.layui-slider-disabled-rate {
+  background-color: var(--global-primary-color) !important;
+}
+
+// 纵向样式
+.layui-slider-vertical {
+  width: 18px;
+  height: 200px;
+}
+
+.layui-slider-vertical-track {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.layui-slider-vertical-btn {
+  width: 12px;
+  height: 12px;
+  background-color: white;
+  position: absolute;
+  border: 2px solid var(--global-primary-color);
+  border-radius: 50%;
+  cursor: pointer;
+  bottom: 0%;
+  left: 1px;
+  z-index: 2;
+}
+
+.layui-slider-vertical-rate {
+  width: 4px;
+  height: 30%;
+  position: absolute;
+  bottom: 0;
+  left: 7px;
+  background-color: var(--global-primary-color);
+  z-index: 1;
+}
+
+.layui-slider-vertical-line {
+  width: 4px;
+  height: 100%;
+  position: absolute;
+  left: 7px;
+  background-color: #eee;
+}
+
+.layui-slider-srange {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+}
+
+.layui-slider-vrange {
+  width: 100%;
+  height: 100%;
+  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;
+}

.svn/pristine/03/03ba9903e0b18ac500102dc011f829cebd1b11a7.svn-base

@@ -0,0 +1,6 @@
+x
<01>S<EFBFBD>j<EFBFBD> <14><>=E`Z<>-I<>B<EFBFBD>S<>s<>ՠ<EFBFBD><D5A0>6<EFBFBD><36><EFBFBD>4<EFBFBD>)lT<7F><54>sϹ<73>ȵ<EFBFBD><C8B5>f<EFBFBD><66><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ch<43>UNz<4E><7A>Z<EFBFBD>
<01>!Nj<16> i#Q5<51><35><EFBFBD><EFBFBD>r<EFBFBD>*<2A><><EFBFBD>
+;OVy*1<>S<EFBFBD>v<EFBFBD>a<>u<EFBFBD><75><EFBFBD>@E|<7C><><EFBFBD>.<2E>x<EFBFBD>-X<><58><0F><>3wɸ<><C9B8><0B>jY<07><>`<60>x<1E>
+M<EFBFBD><EFBFBD><EFBFBD><04>w<EFBFBD><77><EFBFBD><EFBFBD>
+<EFBFBD><14>iTQH<51><48>O<>H<EFBFBD><48><EFBFBD><EFBFBD>9<EFBFBD><39>Ͱ<06>u<EFBFBD>\{
+G<EFBFBD>w`ښjB<6A><42><EFBFBD>D<EFBFBD>MjQ<6A><51><EFBFBD>bW<><57>H<EFBFBD>)L<><4C><EFBFBD><EFBFBD><EFBFBD>F<EFBFBD>Қ<EFBFBD>7<EFBFBD><11><><EFBFBD><04><>-I<><49>.<0E><>e9<65><39>O<08><><EFBFBD>!<21>AЖUE<><45>H<EFBFBD><0F>u]<5D><>c<EFBFBD>@<40>ZF<5A>M`Q؍<51>#<23>
+}<1B>G<EFBFBD><47>Ĺ<EFBFBD>b<EFBFBD><14><><EFBFBD><EFBFBD>(~<7E>@<40>m<><6D>6<>.-2!<21><>K<EFBFBD><4B><EFBFBD>ں=<3D>_<EFBFBD>C<EFBFBD><19><>"<1D><><EFBFBD>/a<>8<