zartui 3.0.1 → 3.0.3

package/lib/calendar/Calendar.js

@@ -0,0 +1,444 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  calendarProps: () => calendarProps,
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_utils = require("../utils");
+var import_utils2 = require("./utils");
+var import_use = require("@zartui/use");
+var import_use_refs = require("../composables/use-refs");
+var import_use_expose = require("../composables/use-expose");
+var import_popup = require("../popup");
+var import_button = require("../button");
+var import_toast = require("../toast");
+var import_CalendarMonth = __toESM(require("./CalendarMonth"));
+var import_CalendarHeader = __toESM(require("./CalendarHeader"));
+const calendarProps = {
+  show: Boolean,
+  type: (0, import_utils.makeStringProp)("single"),
+  title: String,
+  color: String,
+  round: import_utils.truthProp,
+  readonly: Boolean,
+  popup: import_utils.truthProp,
+  maxRange: (0, import_utils.makeNumericProp)(null),
+  position: (0, import_utils.makeStringProp)("bottom"),
+  teleport: [String, Object],
+  showMark: import_utils.truthProp,
+  showTitle: import_utils.truthProp,
+  formatter: Function,
+  rowHeight: import_utils.numericProp,
+  confirmText: String,
+  rangePrompt: String,
+  lazyRender: import_utils.truthProp,
+  showConfirm: import_utils.truthProp,
+  defaultDate: [Date, Array],
+  allowSameDay: import_utils.truthProp,
+  showSubtitle: import_utils.truthProp,
+  closeOnPopstate: import_utils.truthProp,
+  showRangePrompt: import_utils.truthProp,
+  confirmDisabledText: String,
+  closeOnClickOverlay: import_utils.truthProp,
+  safeAreaInsetTop: Boolean,
+  safeAreaInsetBottom: import_utils.truthProp,
+  minDate: {
+    type: Date,
+    validator: import_utils.isDate,
+    default: import_utils2.getToday
+  },
+  maxDate: {
+    type: Date,
+    validator: import_utils.isDate,
+    default: () => {
+      const now = (0, import_utils2.getToday)();
+      return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
+    }
+  },
+  firstDayOfWeek: {
+    type: import_utils.numericProp,
+    default: 0,
+    validator: (val) => val >= 0 && val <= 6
+  }
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name: import_utils2.name,
+  props: calendarProps,
+  emits: ["select", "confirm", "cancel", "unselect", "monthShow", "overRange", "update:show", "clickSubtitle"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const limitDateRange = (date, minDate = props.minDate, maxDate = props.maxDate) => {
+      if ((0, import_utils2.compareDay)(date, minDate) === -1) {
+        return minDate;
+      }
+      if ((0, import_utils2.compareDay)(date, maxDate) === 1) {
+        return maxDate;
+      }
+      return date;
+    };
+    const getInitialDate = (defaultDate = props.defaultDate) => {
+      const {
+        type,
+        minDate,
+        maxDate,
+        allowSameDay
+      } = props;
+      if (defaultDate === null) {
+        return defaultDate;
+      }
+      const now = (0, import_utils2.getToday)();
+      if (type === "range") {
+        if (!Array.isArray(defaultDate)) {
+          defaultDate = [];
+        }
+        const start = limitDateRange(defaultDate[0] || now, minDate, allowSameDay ? maxDate : (0, import_utils2.getPrevDay)(maxDate));
+        const end = limitDateRange(defaultDate[1] || now, allowSameDay ? minDate : (0, import_utils2.getNextDay)(minDate));
+        return [start, end];
+      }
+      if (type === "multiple") {
+        if (Array.isArray(defaultDate)) {
+          return defaultDate.map((date) => limitDateRange(date));
+        }
+        return [limitDateRange(now)];
+      }
+      if (!defaultDate || Array.isArray(defaultDate)) {
+        defaultDate = now;
+      }
+      return limitDateRange(defaultDate);
+    };
+    let bodyHeight;
+    const bodyRef = (0, import_vue2.ref)();
+    const subtitle = (0, import_vue2.ref)("");
+    const currentDate = (0, import_vue2.ref)(getInitialDate());
+    const [monthRefs, setMonthRefs] = (0, import_use_refs.useRefs)();
+    const dayOffset = (0, import_vue2.computed)(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
+    const months = (0, import_vue2.computed)(() => {
+      const months2 = [];
+      const cursor = new Date(props.minDate);
+      cursor.setDate(1);
+      do {
+        months2.push(new Date(cursor));
+        cursor.setMonth(cursor.getMonth() + 1);
+      } while ((0, import_utils2.compareMonth)(cursor, props.maxDate) !== 1);
+      return months2;
+    });
+    const buttonDisabled = (0, import_vue2.computed)(() => {
+      if (currentDate.value) {
+        if (props.type === "range") {
+          return !currentDate.value[0] || !currentDate.value[1];
+        }
+        if (props.type === "multiple") {
+          return !currentDate.value.length;
+        }
+      }
+      return !currentDate.value;
+    });
+    const getSelectedDate = () => currentDate.value;
+    const onScroll = () => {
+      const top = (0, import_utils.getScrollTop)(bodyRef.value);
+      const bottom = top + bodyHeight;
+      const heights = months.value.map((item, index) => monthRefs.value[index].getHeight());
+      const heightSum = heights.reduce((a, b) => a + b, 0);
+      if (bottom > heightSum && top > 0) {
+        return;
+      }
+      let height = 0;
+      let currentMonth;
+      const visibleRange = [-1, -1];
+      for (let i = 0; i < months.value.length; i++) {
+        const month = monthRefs.value[i];
+        const visible = height <= bottom && height + heights[i] >= top;
+        if (visible) {
+          visibleRange[1] = i;
+          if (!currentMonth) {
+            currentMonth = month;
+            visibleRange[0] = i;
+          }
+          if (!monthRefs.value[i].showed) {
+            monthRefs.value[i].showed = true;
+            emit("monthShow", {
+              date: month.date,
+              title: month.getTitle()
+            });
+          }
+        }
+        height += heights[i];
+      }
+      months.value.forEach((month, index) => {
+        const visible = index >= visibleRange[0] - 1 && index <= visibleRange[1] + 1;
+        monthRefs.value[index].setVisible(visible);
+      });
+      if (currentMonth) {
+        subtitle.value = currentMonth.getTitle();
+      }
+    };
+    const scrollToDate = (targetDate) => {
+      (0, import_use.raf)(() => {
+        months.value.some((month, index) => {
+          if ((0, import_utils2.compareMonth)(month, targetDate) === 0) {
+            if (bodyRef.value) {
+              monthRefs.value[index].scrollToDate(bodyRef.value, targetDate);
+            }
+            return true;
+          }
+          return false;
+        });
+        onScroll();
+      });
+    };
+    const scrollToCurrentDate = () => {
+      if (props.popup && !props.show) {
+        return;
+      }
+      if (currentDate.value) {
+        const targetDate = props.type === "single" ? currentDate.value : currentDate.value[0];
+        if ((0, import_utils.isDate)(targetDate)) {
+          scrollToDate(targetDate);
+        }
+      } else {
+        (0, import_use.raf)(onScroll);
+      }
+    };
+    const init = () => {
+      if (props.popup && !props.show) {
+        return;
+      }
+      (0, import_use.raf)(() => {
+        bodyHeight = Math.floor((0, import_use.useRect)(bodyRef).height);
+      });
+      scrollToCurrentDate();
+    };
+    const reset = (date = getInitialDate()) => {
+      currentDate.value = date;
+      scrollToCurrentDate();
+    };
+    const checkRange = (date) => {
+      const {
+        maxRange,
+        rangePrompt,
+        showRangePrompt
+      } = props;
+      if (maxRange && (0, import_utils2.calcDateNum)(date) > maxRange) {
+        if (showRangePrompt) {
+          (0, import_toast.showToast)(rangePrompt || `\u6700\u591A\u9009\u62E9 ${maxRange} \u5929`);
+        }
+        emit("overRange");
+        return false;
+      }
+      return true;
+    };
+    const onConfirm = () => {
+      var _a;
+      return emit("confirm", (_a = currentDate.value) != null ? _a : (0, import_utils2.cloneDates)(currentDate.value));
+    };
+    const onCancel = () => {
+      emit("update:show", false);
+      emit("cancel");
+    };
+    const select = (date, complete) => {
+      const setCurrentDate = (date2) => {
+        currentDate.value = date2;
+        emit("select", (0, import_utils2.cloneDates)(date2));
+      };
+      if (complete && props.type === "range") {
+        const valid = checkRange(date);
+        if (!valid) {
+          setCurrentDate([date[0], (0, import_utils2.getDayByOffset)(date[0], +props.maxRange - 1)]);
+          return;
+        }
+      }
+      setCurrentDate(date);
+      if (complete && !props.showConfirm) {
+        onConfirm();
+      }
+    };
+    const getDisabledDate = (disabledDays2, startDay, date) => {
+      var _a;
+      return (_a = disabledDays2.find((day) => (0, import_utils2.compareDay)(startDay, day.date) === -1 && (0, import_utils2.compareDay)(day.date, date) === -1)) == null ? void 0 : _a.date;
+    };
+    const disabledDays = (0, import_vue2.computed)(() => monthRefs.value.reduce((arr, ref2) => {
+      var _a, _b;
+      arr.push(...(_b = (_a = ref2.disabledDays) == null ? void 0 : _a.value) != null ? _b : []);
+      return arr;
+    }, []));
+    const onClickDay = (item) => {
+      if (props.readonly || !item.date) {
+        return;
+      }
+      const {
+        date
+      } = item;
+      const {
+        type
+      } = props;
+      if (type === "range") {
+        if (!currentDate.value) {
+          select([date]);
+          return;
+        }
+        const [startDay, endDay] = currentDate.value;
+        if (startDay && !endDay) {
+          const compareToStart = (0, import_utils2.compareDay)(date, startDay);
+          if (compareToStart === 1) {
+            const disabledDay = getDisabledDate(disabledDays.value, startDay, date);
+            if (disabledDay) {
+              const endDay2 = (0, import_utils2.getPrevDay)(disabledDay);
+              if ((0, import_utils2.compareDay)(startDay, endDay2) === -1) {
+                select([startDay, endDay2]);
+              } else {
+                select([date]);
+              }
+            } else {
+              select([startDay, date], true);
+            }
+          } else if (compareToStart === -1) {
+            select([date]);
+          } else if (props.allowSameDay) {
+            select([date, date], true);
+          }
+        } else {
+          select([date]);
+        }
+      } else if (type === "multiple") {
+        if (!currentDate.value) {
+          select([date]);
+          return;
+        }
+        const dates = currentDate.value;
+        const selectedIndex = dates.findIndex((dateItem) => (0, import_utils2.compareDay)(dateItem, date) === 0);
+        if (selectedIndex !== -1) {
+          const [unselectedDate] = dates.splice(selectedIndex, 1);
+          emit("unselect", (0, import_utils2.cloneDate)(unselectedDate));
+        } else if (props.maxRange && dates.length >= props.maxRange) {
+          (0, import_toast.showToast)(props.rangePrompt || `\u6700\u591A\u9009\u62E9 ${props.maxRange} \u5929`);
+        } else {
+          select([...dates, date]);
+        }
+      } else {
+        select(date, true);
+      }
+    };
+    const updateShow = (value) => emit("update:show", value);
+    const renderMonth = (date, index) => {
+      const showMonthTitle = index !== 0 || !props.showSubtitle;
+      return (0, import_vue.createVNode)(import_CalendarMonth.default, (0, import_vue.mergeProps)({
+        "ref": setMonthRefs(index),
+        "date": date,
+        "currentDate": currentDate.value,
+        "showMonthTitle": showMonthTitle,
+        "firstDayOfWeek": dayOffset.value
+      }, (0, import_utils.pick)(props, ["type", "color", "minDate", "maxDate", "showMark", "formatter", "rowHeight", "lazyRender", "showSubtitle", "allowSameDay"]), {
+        "onClick": onClickDay
+      }), (0, import_utils.pick)(slots, ["top-info", "bottom-info"]));
+    };
+    const renderFooterButton = () => {
+      if (slots.footer) {
+        return slots.footer();
+      }
+      if (props.showConfirm) {
+        const disabled = buttonDisabled.value;
+        const text = disabled ? props.confirmDisabledText : props.confirmText;
+        return [(0, import_vue.createVNode)(import_button.Button, {
+          "block": true,
+          "disabled": disabled,
+          "nativeType": "button",
+          "onClick": onCancel,
+          "style": {
+            marginRight: "4px",
+            backgroundColor: "white"
+          }
+        }, {
+          default: () => [text || "\u53D6\u6D88"]
+        }), (0, import_vue.createVNode)(import_button.Button, {
+          "block": true,
+          "type": "primary",
+          "background-color": props.color,
+          "disabled": disabled,
+          "nativeType": "button",
+          "onClick": onConfirm,
+          "style": {
+            marginLeft: "4px"
+          }
+        }, {
+          default: () => [text || (0, import_utils2.t)("confirm")]
+        })];
+      }
+    };
+    const renderFooter = () => (0, import_vue.createVNode)("div", {
+      "class": [(0, import_utils2.bem)("footer"), {
+        "van-safe-area-bottom": props.safeAreaInsetBottom
+      }]
+    }, [renderFooterButton()]);
+    const renderCalendar = () => (0, import_vue.createVNode)("div", {
+      "class": (0, import_utils2.bem)()
+    }, [(0, import_vue.createVNode)(import_CalendarHeader.default, {
+      "title": props.title,
+      "subtitle": subtitle.value,
+      "showTitle": props.showTitle,
+      "showSubtitle": props.showSubtitle,
+      "firstDayOfWeek": dayOffset.value,
+      "onClickSubtitle": (event) => emit("clickSubtitle", event)
+    }, (0, import_utils.pick)(slots, ["title", "subtitle"])), (0, import_vue.createVNode)("div", {
+      "ref": bodyRef,
+      "class": (0, import_utils2.bem)("body"),
+      "onScroll": onScroll
+    }, [months.value.map(renderMonth)]), props.popup ? renderFooter() : ""]);
+    (0, import_vue2.watch)(() => props.show, init);
+    (0, import_vue2.watch)(() => [props.type, props.minDate, props.maxDate], () => reset(getInitialDate(currentDate.value)));
+    (0, import_vue2.watch)(() => props.defaultDate, (value = null) => {
+      currentDate.value = value;
+      scrollToCurrentDate();
+    });
+    (0, import_use_expose.useExpose)({
+      reset,
+      scrollToDate,
+      getSelectedDate
+    });
+    (0, import_use.onMountedOrActivated)(init);
+    return () => {
+      if (props.popup) {
+        return (0, import_vue.createVNode)(import_popup.Popup, {
+          "show": props.show,
+          "class": (0, import_utils2.bem)("popup"),
+          "round": props.round,
+          "position": props.position,
+          "teleport": props.teleport,
+          "closeOnPopstate": props.closeOnPopstate,
+          "safeAreaInsetTop": props.safeAreaInsetTop,
+          "closeOnClickOverlay": props.closeOnClickOverlay,
+          "onUpdate:show": updateShow
+        }, {
+          default: renderCalendar
+        });
+      }
+      return renderCalendar();
+    };
+  }
+});

package/lib/calendar/CalendarDay.d.ts

@@ -0,0 +1,32 @@
+import type { PropType } from 'vue';
+import type { CalendarDayItem } from './types';
+declare const _default: import("vue").DefineComponent<{
+    item: {
+        type: PropType<CalendarDayItem>;
+        required: true;
+    };
+    color: StringConstructor;
+    index: NumberConstructor;
+    offset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    rowHeight: StringConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    item: {
+        type: PropType<CalendarDayItem>;
+        required: true;
+    };
+    color: StringConstructor;
+    index: NumberConstructor;
+    offset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    rowHeight: StringConstructor;
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    offset: number;
+}>;
+export default _default;

package/lib/calendar/CalendarDay.js

@@ -0,0 +1,127 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_utils = require("../utils");
+var import_utils2 = require("./utils");
+const [name] = (0, import_utils.createNamespace)("calendar-day");
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: {
+    item: (0, import_utils.makeRequiredProp)(Object),
+    color: String,
+    index: Number,
+    offset: (0, import_utils.makeNumberProp)(0),
+    rowHeight: String
+  },
+  emits: ["click"],
+  setup(props, {
+    emit
+  }) {
+    const style = (0, import_vue2.computed)(() => {
+      var _a;
+      const {
+        item,
+        index,
+        color,
+        offset,
+        rowHeight
+      } = props;
+      const style2 = {
+        height: rowHeight
+      };
+      if (item.type === "placeholder") {
+        style2.width = "100%";
+        return style2;
+      }
+      if (index === 0) {
+        style2.marginLeft = `${100 * offset / 7}%`;
+      }
+      if (color) {
+        switch (item.type) {
+          case "end":
+          case "start":
+          case "start-end":
+          case "multiple-middle":
+          case "multiple-selected":
+            style2.background = color;
+            break;
+          case "middle":
+            style2.color = color;
+            break;
+        }
+      }
+      if (offset + (((_a = item.date) == null ? void 0 : _a.getDate()) || 1) > 28) {
+        style2.marginBottom = 0;
+      }
+      return style2;
+    });
+    const onClick = () => {
+      if (props.item.type !== "disabled") {
+        emit("click", props.item);
+      }
+    };
+    const renderContent = () => {
+      const {
+        item,
+        color,
+        rowHeight
+      } = props;
+      const {
+        type,
+        text
+      } = item;
+      const Nodes = [text];
+      if (type === "selected") {
+        return (0, import_vue.createVNode)("div", {
+          "class": (0, import_utils2.bem)("selected-day"),
+          "style": {
+            width: rowHeight,
+            height: rowHeight,
+            background: color
+          }
+        }, [Nodes]);
+      }
+      return Nodes;
+    };
+    return () => {
+      const {
+        type,
+        className
+      } = props.item;
+      if (type === "placeholder") {
+        return (0, import_vue.createVNode)("div", {
+          "class": (0, import_utils2.bem)("day"),
+          "style": style.value
+        }, null);
+      }
+      return (0, import_vue.createVNode)("div", {
+        "role": "gridcell",
+        "style": style.value,
+        "class": [(0, import_utils2.bem)("day", type), className],
+        "tabindex": type === "disabled" ? void 0 : -1,
+        "onClick": onClick
+      }, [renderContent()]);
+    };
+  }
+});

package/lib/calendar/CalendarHeader.d.ts

@@ -0,0 +1,26 @@
+declare const _default: import("vue").DefineComponent<{
+    title: StringConstructor;
+    subtitle: StringConstructor;
+    showTitle: BooleanConstructor;
+    showSubtitle: BooleanConstructor;
+    firstDayOfWeek: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "clickSubtitle"[], "clickSubtitle", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    subtitle: StringConstructor;
+    showTitle: BooleanConstructor;
+    showSubtitle: BooleanConstructor;
+    firstDayOfWeek: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    onClickSubtitle?: ((...args: any[]) => any) | undefined;
+}, {
+    showTitle: boolean;
+    showSubtitle: boolean;
+    firstDayOfWeek: number;
+}>;
+export default _default;