@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/dev/mp-weixin/components/PrismDateTimePicker/PrismDateTimePicker.js

@@ -0,0 +1,468 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const store_app = require("../../store/app.js");
+const utils_system = require("../../utils/system.js");
+const utils_lunar = require("../../utils/lunar.js");
+const visibleItemCount = 5;
+const _sfc_main = {
+  __name: "PrismDateTimePicker",
+  props: {
+    modelValue: {
+      type: [String, Number, Date],
+      default: ""
+    },
+    // 选择模式：picker（滚轮）或 calendar（日历）
+    mode: {
+      type: String,
+      default: "picker",
+      validator: (val) => ["picker", "calendar"].includes(val)
+    },
+    // 是否显示时间选择
+    showTime: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示秒
+    showSeconds: {
+      type: Boolean,
+      default: false
+    },
+    // 日期格式
+    format: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: "请选择日期"
+    },
+    title: {
+      type: String,
+      default: "选择日期"
+    },
+    // 最小年份
+    minYear: {
+      type: Number,
+      default: () => (/* @__PURE__ */ new Date()).getFullYear() - 50
+    },
+    // 最大年份
+    maxYear: {
+      type: Number,
+      default: () => (/* @__PURE__ */ new Date()).getFullYear() + 50
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否为范围选择模式
+    range: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示农历
+    showLunar: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "change", "confirm", "cancel"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const appStore = store_app.useAppStore();
+    const showPicker = common_vendor.ref(false);
+    const pickerIndex = common_vendor.ref([0, 0, 0, 0, 0, 0]);
+    const itemHeight = utils_system.rpx2px(96);
+    const pickerHeight = `${itemHeight * visibleItemCount}px`;
+    const indicatorStyle = `height: ${itemHeight}px`;
+    const calendarYear = common_vendor.ref((/* @__PURE__ */ new Date()).getFullYear());
+    const calendarMonth = common_vendor.ref((/* @__PURE__ */ new Date()).getMonth() + 1);
+    const selectedDate = common_vendor.ref("");
+    const weekdays = ["日", "一", "二", "三", "四", "五", "六"];
+    const rangeStart = common_vendor.ref("");
+    const rangeEnd = common_vendor.ref("");
+    function isInRange(dateStr) {
+      if (!props.range || !rangeStart.value || !rangeEnd.value) return false;
+      return dateStr > rangeStart.value && dateStr < rangeEnd.value;
+    }
+    const calendarDays = common_vendor.computed(() => {
+      const days = [];
+      const firstDay = new Date(calendarYear.value, calendarMonth.value - 1, 1);
+      const lastDay = new Date(calendarYear.value, calendarMonth.value, 0);
+      const startWeekday = firstDay.getDay();
+      const totalDays = lastDay.getDate();
+      const today = /* @__PURE__ */ new Date();
+      const todayStr = `${today.getFullYear()}-${padZero(today.getMonth() + 1)}-${padZero(today.getDate())}`;
+      const prevMonthDate = new Date(calendarYear.value, calendarMonth.value - 1, 0);
+      const prevMonthYear = calendarMonth.value === 1 ? calendarYear.value - 1 : calendarYear.value;
+      const prevMonthNum = calendarMonth.value === 1 ? 12 : calendarMonth.value - 1;
+      for (let i = startWeekday - 1; i >= 0; i--) {
+        const d = prevMonthDate.getDate() - i;
+        const dateStr = `${prevMonthYear}-${padZero(prevMonthNum)}-${padZero(d)}`;
+        days.push({
+          day: d,
+          dateStr,
+          otherMonth: true,
+          lunar: props.showLunar ? utils_lunar.getLunarDayStr(prevMonthYear, prevMonthNum, d) : ""
+        });
+      }
+      for (let i = 1; i <= totalDays; i++) {
+        const dateStr = `${calendarYear.value}-${padZero(calendarMonth.value)}-${padZero(i)}`;
+        const isRangeStart = props.range && dateStr === rangeStart.value;
+        const isRangeEnd = props.range && dateStr === rangeEnd.value;
+        days.push({
+          day: i,
+          dateStr,
+          isToday: dateStr === todayStr,
+          isSelected: props.range ? isRangeStart || isRangeEnd : dateStr === selectedDate.value,
+          isRangeStart,
+          isRangeEnd,
+          isInRange: isInRange(dateStr),
+          lunar: props.showLunar ? utils_lunar.getLunarDayStr(calendarYear.value, calendarMonth.value, i) : ""
+        });
+      }
+      const nextMonthYear = calendarMonth.value === 12 ? calendarYear.value + 1 : calendarYear.value;
+      const nextMonthNum = calendarMonth.value === 12 ? 1 : calendarMonth.value + 1;
+      const remaining = 42 - days.length;
+      for (let i = 1; i <= remaining; i++) {
+        const dateStr = `${nextMonthYear}-${padZero(nextMonthNum)}-${padZero(i)}`;
+        days.push({
+          day: i,
+          dateStr,
+          otherMonth: true,
+          lunar: props.showLunar ? utils_lunar.getLunarDayStr(nextMonthYear, nextMonthNum, i) : ""
+        });
+      }
+      return days;
+    });
+    const yearList = common_vendor.computed(() => {
+      const list = [];
+      for (let i = props.minYear; i <= props.maxYear; i++) {
+        list.push(i);
+      }
+      return list;
+    });
+    const monthList = common_vendor.computed(() => {
+      const list = [];
+      for (let i = 1; i <= 12; i++) {
+        list.push(i);
+      }
+      return list;
+    });
+    const dayList = common_vendor.computed(() => {
+      const year = yearList.value[pickerIndex.value[0]];
+      const month = monthList.value[pickerIndex.value[1]];
+      const days = getDaysInMonth(year, month);
+      const list = [];
+      for (let i = 1; i <= days; i++) {
+        list.push(i);
+      }
+      return list;
+    });
+    const hourList = common_vendor.computed(() => {
+      const list = [];
+      for (let i = 0; i <= 23; i++) {
+        list.push(i);
+      }
+      return list;
+    });
+    const minuteList = common_vendor.computed(() => {
+      const list = [];
+      for (let i = 0; i <= 59; i++) {
+        list.push(i);
+      }
+      return list;
+    });
+    const secondList = common_vendor.computed(() => {
+      const list = [];
+      for (let i = 0; i <= 59; i++) {
+        list.push(i);
+      }
+      return list;
+    });
+    function getDaysInMonth(year, month) {
+      return new Date(year, month, 0).getDate();
+    }
+    function padZero(num) {
+      return num < 10 ? "0" + num : String(num);
+    }
+    const defaultFormat = common_vendor.computed(() => {
+      if (props.format) return props.format;
+      if (props.showTime) {
+        return props.showSeconds ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD HH:mm";
+      }
+      return "YYYY-MM-DD";
+    });
+    const displayValue = common_vendor.computed(() => {
+      if (!props.modelValue) return "";
+      return formatDate(parseDate(props.modelValue), defaultFormat.value);
+    });
+    function parseDate(value) {
+      if (!value) return /* @__PURE__ */ new Date();
+      if (value instanceof Date) return value;
+      if (typeof value === "number") return new Date(value);
+      if (typeof value === "string") {
+        const d = new Date(value.replace(/-/g, "/"));
+        return isNaN(d.getTime()) ? /* @__PURE__ */ new Date() : d;
+      }
+      return /* @__PURE__ */ new Date();
+    }
+    function formatDate(date, format) {
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+      const hour = date.getHours();
+      const minute = date.getMinutes();
+      const second = date.getSeconds();
+      return format.replace("YYYY", year).replace("MM", padZero(month)).replace("DD", padZero(day)).replace("HH", padZero(hour)).replace("mm", padZero(minute)).replace("ss", padZero(second));
+    }
+    function openPicker() {
+      if (props.disabled) return;
+      if (props.mode === "calendar") {
+        initCalendar();
+      } else {
+        initPickerIndex();
+      }
+      showPicker.value = true;
+    }
+    function initCalendar() {
+      const date = props.modelValue ? parseDate(props.modelValue) : /* @__PURE__ */ new Date();
+      calendarYear.value = date.getFullYear();
+      calendarMonth.value = date.getMonth() + 1;
+      selectedDate.value = props.modelValue ? `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}` : "";
+    }
+    function initPickerIndex() {
+      const date = props.modelValue ? parseDate(props.modelValue) : /* @__PURE__ */ new Date();
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+      const hour = date.getHours();
+      const minute = date.getMinutes();
+      const second = date.getSeconds();
+      const yearIdx = yearList.value.indexOf(year);
+      pickerIndex.value = [
+        yearIdx >= 0 ? yearIdx : 0,
+        month - 1,
+        day - 1,
+        hour,
+        minute,
+        second
+      ];
+    }
+    function closePicker() {
+      showPicker.value = false;
+      emit("cancel");
+    }
+    function prevYear() {
+      calendarYear.value--;
+    }
+    function nextYear() {
+      calendarYear.value++;
+    }
+    function prevMonth() {
+      if (calendarMonth.value === 1) {
+        calendarMonth.value = 12;
+        calendarYear.value--;
+      } else {
+        calendarMonth.value--;
+      }
+    }
+    function nextMonth() {
+      if (calendarMonth.value === 12) {
+        calendarMonth.value = 1;
+        calendarYear.value++;
+      } else {
+        calendarMonth.value++;
+      }
+    }
+    function selectCalendarDay(day) {
+      if (day.otherMonth) return;
+      if (props.range) {
+        if (!rangeStart.value || rangeStart.value && rangeEnd.value) {
+          rangeStart.value = day.dateStr;
+          rangeEnd.value = "";
+        } else {
+          if (day.dateStr < rangeStart.value) {
+            rangeEnd.value = rangeStart.value;
+            rangeStart.value = day.dateStr;
+          } else {
+            rangeEnd.value = day.dateStr;
+          }
+        }
+      } else {
+        selectedDate.value = day.dateStr;
+      }
+    }
+    function onPickerChange(e) {
+      const values = e.detail.value;
+      const year = yearList.value[values[0]];
+      const month = monthList.value[values[1]];
+      const maxDay = getDaysInMonth(year, month);
+      if (values[2] >= maxDay) {
+        values[2] = maxDay - 1;
+      }
+      pickerIndex.value = values;
+    }
+    function confirmSelect() {
+      let result;
+      if (props.mode === "calendar") {
+        if (props.range) {
+          if (!rangeStart.value || !rangeEnd.value) {
+            common_vendor.index.showToast({ title: "请选择完整的日期范围", icon: "none" });
+            return;
+          }
+          result = [rangeStart.value, rangeEnd.value];
+        } else {
+          if (!selectedDate.value) {
+            common_vendor.index.showToast({ title: "请选择日期", icon: "none" });
+            return;
+          }
+          result = selectedDate.value;
+        }
+      } else {
+        const year = yearList.value[pickerIndex.value[0]];
+        const month = monthList.value[pickerIndex.value[1]];
+        const day = dayList.value[pickerIndex.value[2]];
+        const hour = props.showTime ? hourList.value[pickerIndex.value[3]] : 0;
+        const minute = props.showTime ? minuteList.value[pickerIndex.value[4]] : 0;
+        const second = props.showTime && props.showSeconds ? secondList.value[pickerIndex.value[5]] : 0;
+        const date = new Date(year, month - 1, day, hour, minute, second);
+        result = formatDate(date, defaultFormat.value);
+      }
+      emit("update:modelValue", result);
+      emit("change", result);
+      emit("confirm", result);
+      showPicker.value = false;
+    }
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: common_vendor.t(displayValue.value || __props.placeholder),
+        b: !displayValue.value ? 1 : "",
+        c: displayValue.value ? 1 : "",
+        d: common_vendor.o(openPicker),
+        e: showPicker.value
+      }, showPicker.value ? common_vendor.e({
+        f: common_vendor.o(closePicker),
+        g: common_vendor.t(__props.title),
+        h: common_vendor.o(confirmSelect),
+        i: __props.mode === "picker"
+      }, __props.mode === "picker" ? common_vendor.e({
+        j: common_vendor.f(yearList.value, (item, idx, i0) => {
+          return {
+            a: common_vendor.t(item),
+            b: item,
+            c: idx === pickerIndex.value[0] ? "var(--prism-primary-color, #3478F6)" : "var(--prism-text-secondary, #86909C)",
+            d: idx === pickerIndex.value[0] ? "600" : "400"
+          };
+        }),
+        k: common_vendor.unref(itemHeight) + "px",
+        l: common_vendor.unref(itemHeight) + "px",
+        m: common_vendor.f(monthList.value, (item, idx, i0) => {
+          return {
+            a: common_vendor.t(padZero(item)),
+            b: item,
+            c: idx === pickerIndex.value[1] ? "var(--prism-primary-color, #3478F6)" : "var(--prism-text-secondary, #86909C)",
+            d: idx === pickerIndex.value[1] ? "600" : "400"
+          };
+        }),
+        n: common_vendor.unref(itemHeight) + "px",
+        o: common_vendor.unref(itemHeight) + "px",
+        p: common_vendor.f(dayList.value, (item, idx, i0) => {
+          return {
+            a: common_vendor.t(padZero(item)),
+            b: item,
+            c: idx === pickerIndex.value[2] ? "var(--prism-primary-color, #3478F6)" : "var(--prism-text-secondary, #86909C)",
+            d: idx === pickerIndex.value[2] ? "600" : "400"
+          };
+        }),
+        q: common_vendor.unref(itemHeight) + "px",
+        r: common_vendor.unref(itemHeight) + "px",
+        s: __props.showTime
+      }, __props.showTime ? {
+        t: common_vendor.f(hourList.value, (item, idx, i0) => {
+          return {
+            a: common_vendor.t(padZero(item)),
+            b: item,
+            c: idx === pickerIndex.value[3] ? "var(--prism-primary-color, #3478F6)" : "var(--prism-text-secondary, #86909C)",
+            d: idx === pickerIndex.value[3] ? "600" : "400"
+          };
+        }),
+        v: common_vendor.unref(itemHeight) + "px",
+        w: common_vendor.unref(itemHeight) + "px"
+      } : {}, {
+        x: __props.showTime
+      }, __props.showTime ? {
+        y: common_vendor.f(minuteList.value, (item, idx, i0) => {
+          return {
+            a: common_vendor.t(padZero(item)),
+            b: item,
+            c: idx === pickerIndex.value[4] ? "var(--prism-primary-color, #3478F6)" : "var(--prism-text-secondary, #86909C)",
+            d: idx === pickerIndex.value[4] ? "600" : "400"
+          };
+        }),
+        z: common_vendor.unref(itemHeight) + "px",
+        A: common_vendor.unref(itemHeight) + "px"
+      } : {}, {
+        B: __props.showTime && __props.showSeconds
+      }, __props.showTime && __props.showSeconds ? {
+        C: common_vendor.f(secondList.value, (item, idx, i0) => {
+          return {
+            a: common_vendor.t(padZero(item)),
+            b: item,
+            c: idx === pickerIndex.value[5] ? "var(--prism-primary-color, #3478F6)" : "var(--prism-text-secondary, #86909C)",
+            d: idx === pickerIndex.value[5] ? "600" : "400"
+          };
+        }),
+        D: common_vendor.unref(itemHeight) + "px",
+        E: common_vendor.unref(itemHeight) + "px"
+      } : {}, {
+        F: pickerIndex.value,
+        G: common_vendor.o(onPickerChange),
+        H: indicatorStyle,
+        I: pickerHeight
+      }) : __props.mode === "calendar" ? {
+        K: common_vendor.t(calendarMonth.value),
+        L: common_vendor.o(prevYear),
+        M: common_vendor.o(prevMonth),
+        N: common_vendor.t(calendarYear.value),
+        O: common_vendor.t(calendarMonth.value),
+        P: common_vendor.o(nextMonth),
+        Q: common_vendor.o(nextYear),
+        R: common_vendor.f(weekdays, (day, k0, i0) => {
+          return {
+            a: common_vendor.t(day),
+            b: day
+          };
+        }),
+        S: common_vendor.f(calendarDays.value, (day, index, i0) => {
+          return common_vendor.e({
+            a: common_vendor.t(day.day),
+            b: props.showLunar && day.lunar
+          }, props.showLunar && day.lunar ? {
+            c: common_vendor.t(day.lunar)
+          } : {}, {
+            d: day.isToday && !props.showLunar
+          }, day.isToday && !props.showLunar ? {} : {}, {
+            e: index,
+            f: day.otherMonth ? 1 : "",
+            g: day.isToday ? 1 : "",
+            h: day.isSelected ? 1 : "",
+            i: day.isRangeStart ? 1 : "",
+            j: day.isRangeEnd ? 1 : "",
+            k: day.isInRange ? 1 : "",
+            l: common_vendor.o(($event) => selectCalendarDay(day), index)
+          });
+        })
+      } : {}, {
+        J: __props.mode === "calendar",
+        T: common_vendor.o(() => {
+        }),
+        U: common_vendor.o(closePicker)
+      }) : {}, {
+        V: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      });
+    };
+  }
+};
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/PrismDateTimePicker/PrismDateTimePicker.js.map

package/dist/dev/mp-weixin/components/PrismDateTimePicker/PrismDateTimePicker.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/dist/dev/mp-weixin/components/PrismDateTimePicker/PrismDateTimePicker.wxml

@@ -0,0 +1 @@
+<view class="{{['prism-datetime-picker', V && 'dark-mode']}}"><view class="picker-trigger" bindtap="{{d}}"><block wx:if="{{$slots.d}}"><slot></slot></block><block wx:else><view class="prism-select-box"><text class="{{[b && 'placeholder', c && 'select-text']}}">{{a}}</text><text class="select-arrow fa fa-calendar-alt"></text></view></block></view><view wx:if="{{e}}" class="picker-popup" bindtap="{{U}}"><view class="picker-content" catchtap="{{T}}"><view class="picker-header"><view class="picker-cancel" bindtap="{{f}}">取消</view><view class="picker-title">{{g}}</view><view class="picker-confirm" bindtap="{{h}}">确定</view></view><view wx:if="{{i}}" class="picker-body"><block wx:if="{{r0}}"><picker-view class="picker-view" value="{{F}}" bindchange="{{G}}" indicator-class="picker-indicator" indicator-style="{{H}}" style="{{'height:' + I}}"><picker-view-column><view wx:for="{{j}}" wx:for-item="item" wx:key="b" class="picker-item" style="{{'height:' + k + ';' + ('line-height:' + l) + ';' + ('color:' + item.c) + ';' + ('font-weight:' + item.d)}}">{{item.a}}年 </view></picker-view-column><picker-view-column><view wx:for="{{m}}" wx:for-item="item" wx:key="b" class="picker-item" style="{{'height:' + n + ';' + ('line-height:' + o) + ';' + ('color:' + item.c) + ';' + ('font-weight:' + item.d)}}">{{item.a}}月 </view></picker-view-column><picker-view-column><view wx:for="{{p}}" wx:for-item="item" wx:key="b" class="picker-item" style="{{'height:' + q + ';' + ('line-height:' + r) + ';' + ('color:' + item.c) + ';' + ('font-weight:' + item.d)}}">{{item.a}}日 </view></picker-view-column><picker-view-column wx:if="{{s}}"><view wx:for="{{t}}" wx:for-item="item" wx:key="b" class="picker-item" style="{{'height:' + v + ';' + ('line-height:' + w) + ';' + ('color:' + item.c) + ';' + ('font-weight:' + item.d)}}">{{item.a}}时 </view></picker-view-column><picker-view-column wx:if="{{x}}"><view wx:for="{{y}}" wx:for-item="item" wx:key="b" class="picker-item" style="{{'height:' + z + ';' + ('line-height:' + A) + ';' + ('color:' + item.c) + ';' + ('font-weight:' + item.d)}}">{{item.a}}分 </view></picker-view-column><picker-view-column wx:if="{{B}}"><view wx:for="{{C}}" wx:for-item="item" wx:key="b" class="picker-item" style="{{'height:' + D + ';' + ('line-height:' + E) + ';' + ('color:' + item.c) + ';' + ('font-weight:' + item.d)}}">{{item.a}}秒 </view></picker-view-column></picker-view></block></view><view wx:elif="{{J}}" class="calendar-body"><view class="calendar-watermark">{{K}}</view><view class="calendar-nav"><view class="nav-btn" bindtap="{{L}}"><text class="fa fa-angles-left"></text></view><view class="nav-btn" bindtap="{{M}}"><text class="fa fa-chevron-left"></text></view><view class="nav-title">{{N}}年{{O}}月</view><view class="nav-btn" bindtap="{{P}}"><text class="fa fa-chevron-right"></text></view><view class="nav-btn" bindtap="{{Q}}"><text class="fa fa-angles-right"></text></view></view><view class="calendar-weekdays"><view wx:for="{{R}}" wx:for-item="day" wx:key="b" class="weekday">{{day.a}}</view></view><view class="calendar-days"><view wx:for="{{S}}" wx:for-item="day" wx:key="e" class="{{['calendar-day', day.f && 'other-month', day.g && 'today', day.h && 'selected', day.i && 'range-start', day.j && 'range-end', day.k && 'in-range']}}" bindtap="{{day.l}}"><text class="day-text">{{day.a}}</text><text wx:if="{{day.b}}" class="lunar-text">{{day.c}}</text><text wx:if="{{day.d}}" class="today-label">今</text></view></view></view></view></view></view>