tass-ui
Version:
A high quality UI Toolkit built on Vue.js3+.
258 lines (257 loc) • 10 kB
JavaScript
import { defineComponent, ref, computed, reactive, onMounted, resolveComponent, withDirectives, openBlock, createElementBlock, createVNode, unref, isRef, Transition, withCtx, createElementVNode, toDisplayString, Fragment, renderList, normalizeClass, createCommentVNode } from "vue";
import { formatTime } from "../utils.mjs";
import "../../../theme-chalk/src/date-picker.scss.mjs";
const _hoisted_1 = { class: "tas-datepicker" };
const _hoisted_2 = {
key: 0,
class: "tas-picker"
};
const _hoisted_3 = { class: "tas-picker__header" };
const _hoisted_4 = /* @__PURE__ */ createElementVNode("i", { class: "tas-icon" }, [
/* @__PURE__ */ createElementVNode("svg", {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg"
}, [
/* @__PURE__ */ createElementVNode("path", {
fill: "currentColor",
d: "M529.408 149.376a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L197.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224zm256 0a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L453.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224z"
})
])
], -1);
const _hoisted_5 = [
_hoisted_4
];
const _hoisted_6 = /* @__PURE__ */ createElementVNode("i", { class: "tas-icon" }, [
/* @__PURE__ */ createElementVNode("svg", {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg"
}, [
/* @__PURE__ */ createElementVNode("path", {
fill: "currentColor",
d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
})
])
], -1);
const _hoisted_7 = [
_hoisted_6
];
const _hoisted_8 = /* @__PURE__ */ createElementVNode("i", { class: "tas-icon" }, [
/* @__PURE__ */ createElementVNode("svg", {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg"
}, [
/* @__PURE__ */ createElementVNode("path", {
fill: "currentColor",
d: "M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
})
])
], -1);
const _hoisted_9 = [
_hoisted_8
];
const _hoisted_10 = /* @__PURE__ */ createElementVNode("i", { class: "tas-icon" }, [
/* @__PURE__ */ createElementVNode("svg", {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg"
}, [
/* @__PURE__ */ createElementVNode("path", {
fill: "currentColor",
d: "M452.864 149.312a29.12 29.12 0 0 1 41.728.064L826.24 489.664a32 32 0 0 1 0 44.672L494.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L764.736 512 452.864 192a30.592 30.592 0 0 1 0-42.688zm-256 0a29.12 29.12 0 0 1 41.728.064L570.24 489.664a32 32 0 0 1 0 44.672L238.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L508.736 512 196.864 192a30.592 30.592 0 0 1 0-42.688z"
})
])
], -1);
const _hoisted_11 = [
_hoisted_10
];
const _hoisted_12 = { class: "tas-picker__weeks" };
const _hoisted_13 = ["onClick"];
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "date-picker",
props: {
modelValue: {
type: Date,
required: true
},
prefixIcon: {
type: String,
default: "calendarfull"
}
},
emits: ["update:modelValue"],
setup(__props, { emit: emits }) {
const props = __props;
const selectDate = ref(new Date());
const time = computed({
get() {
formatDate(props.modelValue);
return props.modelValue;
},
set(val) {
formatDate(val);
emits("update:modelValue", val);
}
});
const isVisible = ref(false);
const weeks = reactive(["日", "一", "二", "三", "四", "五", "六"]);
const onFocus = () => {
isVisible.value = true;
};
const onBlur = () => {
isVisible.value = false;
};
let tYear = ref(0);
let tMonth = ref(0);
let nowTime = ref();
const today = ref(0);
const formatDate = (t) => {
let { year, month, day } = formatTime(t);
let m = padZero(month + 1);
let d = padZero(day);
tYear.value = year;
today.value = +d;
if (typeof m === "string") {
tMonth.value = parseFloat(m);
} else {
tMonth.value = m;
}
return `${year}-${m}-${d}`;
};
const padZero = (s) => {
return String(s).padStart(2, "0");
};
const isNotCurrentMonth = (date) => {
let { year, month } = formatTime(date);
let { year: y, month: m } = formatTime(time.value);
return year === y && month === m;
};
const isToday = (date) => {
let { year, month, day } = formatTime(date);
let { year: y, month: m, day: d } = formatTime(selectDate.value);
return year === y && month === m && day === d;
};
const vClickOutside = {
beforeMount(el, binding) {
el.handler = (e) => {
if (el.contains(e.target)) {
onFocus();
} else {
onBlur();
}
};
window.addEventListener("click", el.handler);
},
unmounted(el) {
window.removeEventListener("click", el.handler);
}
};
const getVisibleDays = computed(() => {
let { year, month } = formatTime(time.value);
let firstDay = new Date(year, month, 1);
let weeks2 = firstDay.getDay();
if (weeks2 === 0) {
weeks2 = 7;
}
let firstDate = firstDay - weeks2 * 24 * 60 * 60 * 1e3;
let arr = [];
for (let i = 0; i < 42; i++) {
arr.push(new Date(firstDate + i * 24 * 60 * 60 * 1e3));
}
return arr;
});
const handlerChange = (num, type) => {
if (type === "year" && num === -1) {
tYear.value--;
} else if (type === "year" && num === 1) {
tYear.value++;
} else if (type === "month" && num === -1) {
if (tMonth.value <= 1) {
tYear.value--;
tMonth.value = 12;
} else {
tMonth.value--;
}
} else if (type === "month" && num === 1) {
if (tMonth.value >= 12) {
tYear.value++;
tMonth.value = 1;
} else {
tMonth.value++;
}
}
time.value = new Date(tYear.value, tMonth.value - 1);
};
const handlerToday = (day) => {
const d = new Date(tYear.value, tMonth.value - 1, day);
time.value = d;
selectDate.value = d;
nowTime.value = formatDate(d);
};
onMounted(() => {
if (props.modelValue) {
selectDate.value = props.modelValue;
nowTime.value = formatDate(props.modelValue);
}
});
return (_ctx, _cache) => {
const _component_tass_input = resolveComponent("tass-input");
return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(_component_tass_input, {
"prefix-icon": __props.prefixIcon,
placeholder: "Pick a day",
modelValue: unref(nowTime),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(nowTime) ? nowTime.value = $event : nowTime = $event)
}, null, 8, ["prefix-icon", "modelValue"]),
createVNode(Transition, { name: "tas-datepicker-transition" }, {
default: withCtx(() => [
isVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createElementVNode("button", {
onClick: _cache[1] || (_cache[1] = ($event) => handlerChange(-1, "year"))
}, _hoisted_5),
createElementVNode("button", {
onClick: _cache[2] || (_cache[2] = ($event) => handlerChange(-1, "month"))
}, _hoisted_7),
createElementVNode("span", null, toDisplayString(unref(tYear)) + " 年 ", 1),
createElementVNode("span", null, toDisplayString(unref(tMonth)) + " 月 ", 1),
createElementVNode("button", {
onClick: _cache[3] || (_cache[3] = ($event) => handlerChange(1, "month"))
}, _hoisted_9),
createElementVNode("button", {
onClick: _cache[4] || (_cache[4] = ($event) => handlerChange(1, "year"))
}, _hoisted_11)
]),
createElementVNode("div", _hoisted_12, [
(openBlock(true), createElementBlock(Fragment, null, renderList(weeks, (w, index) => {
return openBlock(), createElementBlock("span", { key: w }, toDisplayString(w), 1);
}), 128))
]),
(openBlock(), createElementBlock(Fragment, null, renderList(6, (m, index) => {
return createElementVNode("div", {
key: m,
class: "tas-picker__content"
}, [
(openBlock(), createElementBlock(Fragment, null, renderList(7, (n, index2) => {
return createElementVNode("span", {
key: n,
class: normalizeClass([{
isNotCurrentMonth: !isNotCurrentMonth(unref(getVisibleDays)[(m - 1) * 7 + (n - 1)]),
isToday: isToday(unref(getVisibleDays)[(m - 1) * 7 + (n - 1)])
}, "tas-picker__items"]),
onClick: ($event) => handlerToday(unref(getVisibleDays)[(m - 1) * 7 + (n - 1)].getDate())
}, toDisplayString(unref(getVisibleDays)[(m - 1) * 7 + (n - 1)].getDate()), 11, _hoisted_13);
}), 64))
]);
}), 64))
])) : createCommentVNode("", true)
]),
_: 1
})
])), [
[vClickOutside]
]);
};
}
});
export {
_sfc_main as default
};