@opentiny/vue-renderless
Version:
An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
308 lines (307 loc) • 8.72 kB
JavaScript
import "../chunk-G2ADBYYC.js";
import {
computedCalendar,
handleEvents,
computedSelectDay,
selectDay,
getEventByTime,
isToday,
dateIsToday,
toToday,
getAllWednesdaysInYear,
getAllWednesdaysInMonth,
getAllDatesOfCurrWeek,
initWeeklyCalendar,
getDatesOfPreviousWeek,
getDatesOfNextWeek,
getPrevWeek,
getNextWeek,
goPrevMonth,
goNextMonth,
currentDateChange,
newSchedule,
handleMouseenter,
handleMouseleave,
isSelectedDate,
isStartOrEndDay,
getDayBgColor,
isShowNewSchedule,
genDayTimes,
isShowMark,
computeCascaderOptions,
handleCascaderChange,
setCascaderVisible,
getEventByMonth,
getEventByDate,
getWeekOfDate,
handleDropBtnClick,
getEventShowTime,
getCurWeekEvent,
touchstart,
touchmove,
touchend
} from "./index";
import { throttle } from "@opentiny/utils";
const api = [
"state",
"renderProxy",
"isToday",
"dateIsToday",
"getEventByTime",
"computedSelectDay",
"selectDay",
"toToday",
"getPrevWeek",
"getNextWeek",
"goPrevMonth",
"goNextMonth",
"currentDateChange",
"newSchedule",
"handleMouseenter",
"handleMouseleave",
"isSelectedDate",
"isStartOrEndDay",
"getDayBgColor",
"isShowNewSchedule",
"isShowMark",
"handleCascaderChange",
"setCascaderVisible",
"handleDropBtnClick",
"getEventShowTime",
"touchstart",
"touchmove",
"touchend"
];
const initState = ({ reactive, props, computed, api: api2, images, modesIcon }) => {
const state = reactive({
dayStartTime: props._constants.DAY_START_TIME,
dayEndTime: props._constants.DAY_END_TIME,
wednesday: props._constants.WEDNESDAY,
modesIcon,
images,
weekDays: [0, 1, 2, 3, 4, 5, 6],
dayTimes: computed(() => api2.genDayTimes()),
mode: props.mode,
events: [],
eventsChangeHash: 0,
weekDates: [],
prevWeekDates: [],
nextWeekDates: [],
monthEvents: [],
nextMonthEvents: [],
prevMonthEvents: [],
selectedDateEvents: [],
monthWednesdays: [],
wholeYearWednesdays: [],
index: 0,
delta: 0,
startPos: {
X: 0,
Y: 0
},
deltaPos: {
X: 0,
Y: 0
},
offsetPos: {
X: 0,
Y: 0
},
curWeekEvents: {},
scrollStartTime: 0,
debounceTime: 100,
touchTime: 0,
direction: "",
monthEventsLength: 0,
activedWeekIndex: -1,
selectedTip: "",
selectedDate: "",
selectedDates: [],
showYear: false,
showMonth: false,
showSelectedDateEvents: false,
multiSelect: computed(() => props.multiSelect),
cascaderVisible: false,
eventTipContent: {},
activeYear: props.year,
displayMode: props.mode,
activeMonth: props.month,
currentDate: props.year + "-" + props.month,
cascaderCurrent: [props.year || (/* @__PURE__ */ new Date()).getFullYear(), props.month || (/* @__PURE__ */ new Date()).getMonth + 1],
cascaderOptions: computed(() => api2.computeCascaderOptions()),
calendar: computed(() => api2.computedCalendar("cur")),
prevCalendar: computed(() => api2.computedCalendar("prev")),
nextCalendar: computed(() => api2.computedCalendar("next"))
});
return state;
};
const initWatch = ({ watch, props, state, emit, api: api2, nextTick }) => {
watch(
() => props.modelValue,
(value) => {
if (value) {
if (props.multiSelect && Array.isArray(value)) {
state.selectedDates = value;
} else {
state.selectedDate = value;
}
}
},
{ immediate: true, deep: true }
);
watch(
() => state.mode,
(val) => {
emit("mode-change", val);
if (val === "schedule") {
api2.getCurWeekEvent();
}
}
);
watch(
() => props.events,
() => {
api2.handleEvents();
},
{ deep: true }
);
watch(
() => state.selectedDate,
() => {
emit("selected-date-change", state.selectedDate);
},
{ deep: true }
);
watch(
() => state.weekDates,
(value, oldValue) => {
state.prevWeekDates = api2.getWeekOfDate("prev", state.weekDates[3].value);
state.nextWeekDates = api2.getWeekOfDate("next", state.weekDates[3].value);
api2.getCurWeekEvent();
emit("week-change", value, oldValue);
},
{ deep: true }
);
watch(
() => state.eventsChangeHash,
() => {
if (state.mode === "schedule" || state.mode === "timeline") {
api2.getCurWeekEvent();
}
}
);
watch(
() => state.activedWeekIndex,
() => {
nextTick(() => {
state.showSelectedDateEvents = true;
});
}
);
addWatch({ watch, props, state, emit, api: api2 });
};
const addWatch = ({ watch, props, state, emit, api: api2 }) => {
watch(
() => props.month,
(val, oldVal) => {
if (val !== oldVal) {
state.activeMonth = val;
}
},
{ immediate: true }
);
watch(
() => props.year,
(val, oldVal) => {
if (val !== oldVal) {
state.activeYear = val;
}
},
{ immediate: true }
);
watch(
() => state.activeYear,
(value, oldValue) => {
if (value !== oldValue) {
state.currentDate = state.activeYear + "-" + state.activeMonth;
state.cascaderCurrent = [Number(state.activeYear), Number(state.activeMonth)];
api2.getAllDatesOfCurrWeek(state.currentDate + "-4");
emit("year-change", value, oldValue);
emit("update:modelValue", value, oldValue);
api2.handleEvents();
}
}
);
watch(
() => state.activeMonth,
(value, oldValue) => {
if (value !== oldValue) {
state.currentDate = state.activeYear + "-" + state.activeMonth;
state.cascaderCurrent = [Number(state.activeYear), Number(state.activeMonth)];
api2.getAllDatesOfCurrWeek(state.currentDate + "-4");
emit("month-change", value, oldValue);
api2.handleEvents();
}
}
);
};
const initApi = ({ vm, api: api2, state, t, props, emit, nextTick }) => {
Object.assign(api2, {
state,
touchstart: touchstart({ state }),
touchmove: touchmove({ state }),
touchend: touchend({ state, api: api2, vm }),
handleEvents: handleEvents({ props, state }),
computedCalendar: computedCalendar({ props, state }),
computeCascaderOptions: computeCascaderOptions(t),
isToday: isToday(state),
dateIsToday: dateIsToday(),
selectDay: selectDay({ props, state, emit, api: api2 }),
computedSelectDay: computedSelectDay({ state }),
getEventByTime: getEventByTime({ props, state }),
toToday: toToday({ state, api: api2, nextTick }),
getAllWednesdaysInYear: getAllWednesdaysInYear({ state }),
getAllWednesdaysInMonth: getAllWednesdaysInMonth({ state }),
getAllDatesOfCurrWeek: throttle(50, true, getAllDatesOfCurrWeek({ props, state })),
initWeeklyCalendar: initWeeklyCalendar({ api: api2, state }),
getDatesOfPreviousWeek: getDatesOfPreviousWeek({ api: api2, state }),
getDatesOfNextWeek: getDatesOfNextWeek({ api: api2, state }),
currentDateChange: currentDateChange({ api: api2, state }),
newSchedule: newSchedule({ emit }),
getPrevWeek: throttle(50, true, getPrevWeek({ api: api2, state, emit })),
getNextWeek: throttle(50, true, getNextWeek({ api: api2, state, emit })),
goPrevMonth: throttle(50, true, goPrevMonth({ state })),
goNextMonth: throttle(50, true, goNextMonth({ state })),
handleMouseenter: handleMouseenter({ vm, state }),
handleMouseleave: handleMouseleave({ vm }),
isSelectedDate: isSelectedDate({ state }),
isStartOrEndDay: isStartOrEndDay({ state }),
getDayBgColor: getDayBgColor({ props }),
isShowNewSchedule: isShowNewSchedule({ props }),
genDayTimes: genDayTimes({ props }),
isShowMark: isShowMark({ props }),
handleCascaderChange: handleCascaderChange({ state }),
setCascaderVisible: setCascaderVisible(state),
getEventByMonth: getEventByMonth({ state }),
getEventByDate: getEventByDate({ state }),
getWeekOfDate: getWeekOfDate(),
getEventShowTime: getEventShowTime({ state }),
getCurWeekEvent: getCurWeekEvent({ state, api: api2 }),
handleDropBtnClick: handleDropBtnClick({ api: api2, state })
});
};
const renderless = (props, { computed, reactive, watch, onMounted }, { vm, t, emit, nextTick }, { images, modesIcon }) => {
const api2 = {};
const state = initState({ reactive, props, computed, api: api2, images, modesIcon });
initWatch({ vm, api: api2, watch, props, state, emit, nextTick });
initApi({ vm, api: api2, state, t, props, emit, nextTick });
onMounted(() => {
api2.initWeeklyCalendar(`${state.activeYear}-${state.activeMonth}-4`);
api2.handleEvents();
});
return api2;
};
export {
api,
renderless
};