@varlet/ui
Version:
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
387 lines (386 loc) • 12.8 kB
JavaScript
var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
import {
computed,
defineComponent,
reactive,
ref,
watch
} from "vue";
import { toNumber } from "@varlet/shared";
import { onSmartMounted } from "@varlet/use";
import dayjs from "dayjs/esm/index.js";
import isSameOrAfter from "dayjs/esm/plugin/isSameOrAfter/index.js";
import isSameOrBefore from "dayjs/esm/plugin/isSameOrBefore/index.js";
import VarButton from "../../button/index.mjs";
import { t } from "../../locale/index.mjs";
import { injectLocaleProvider } from "../../locale-provider/provide.mjs";
import { createNamespace } from "../../utils/components.mjs";
import { WEEK_HEADER } from "../props.mjs";
import PanelHeader from "./panel-header.mjs";
dayjs.extend(isSameOrBefore);
dayjs.extend(isSameOrAfter);
const { n, classes } = createNamespace("day-picker");
const { n: nDate } = createNamespace("date-picker");
import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withCtx as _withCtx, Transition as _Transition } from "vue";
function __render__(_ctx, _cache) {
const _component_panel_header = _resolveComponent("panel-header");
const _component_var_button = _resolveComponent("var-button");
return _openBlock(), _createElementBlock(
"div",
{
class: _normalizeClass(_ctx.n())
},
[
_createElementVNode(
"div",
{
class: _normalizeClass(_ctx.n("content"))
},
[
_createVNode(_component_panel_header, {
ref: "headerEl",
type: "day",
date: _ctx.preview,
disabled: _ctx.panelBtnDisabled,
onCheckPanel: _ctx.clickMonth,
onCheckDate: _ctx.checkDate
}, null, 8, ["date", "disabled", "onCheckPanel", "onCheckDate"]),
_createVNode(_Transition, {
name: `${_ctx.nDate()}${_ctx.reverse ? "-reverse" : ""}-translatex`
}, {
default: _withCtx(() => [
(_openBlock(), _createElementBlock("div", { key: _ctx.panelKey }, [
_createElementVNode(
"ul",
{
class: _normalizeClass(_ctx.n("head"))
},
[
(_openBlock(true), _createElementBlock(
_Fragment,
null,
_renderList(_ctx.sortWeekList, (week) => {
return _openBlock(), _createElementBlock(
"li",
{ key: week },
_toDisplayString(_ctx.getDayAbbr(week)),
1
/* TEXT */
);
}),
128
/* KEYED_FRAGMENT */
))
],
2
/* CLASS */
),
_createElementVNode(
"ul",
{
class: _normalizeClass(_ctx.n("body"))
},
[
(_openBlock(true), _createElementBlock(
_Fragment,
null,
_renderList(_ctx.days, (day, index) => {
return _openBlock(), _createElementBlock("li", { key: index }, [
_createVNode(_component_var_button, _mergeProps({
type: "primary",
"var-day-picker-cover": "",
round: "",
ripple: false,
elevation: _ctx.componentProps.buttonElevation,
ref_for: true
}, __spreadValues({}, _ctx.buttonProps(day)), {
onClick: (event) => _ctx.chooseDay(day, event)
}), {
default: _withCtx(() => [
_createTextVNode(
_toDisplayString(_ctx.filterDay(day)),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1040, ["elevation", "onClick"])
]);
}),
128
/* KEYED_FRAGMENT */
))
],
2
/* CLASS */
)
]))
]),
_: 1
/* STABLE */
}, 8, ["name"])
],
2
/* CLASS */
)
],
2
/* CLASS */
);
}
const __sfc__ = defineComponent({
name: "DayPickerPanel",
components: {
VarButton,
PanelHeader
},
props: {
choose: {
type: Object,
required: true
},
preview: {
type: Object,
required: true
},
current: {
type: String,
required: true
},
clickMonth: {
type: Function,
required: true
},
componentProps: {
type: Object,
required: true
}
},
emits: ["check-preview", "choose-day"],
setup(props, { emit }) {
const [currentYear, currentMonth, currentDay] = props.current.split("-");
const days = ref([]);
const reverse = ref(false);
const panelKey = ref(0);
const headerEl = ref(null);
const panelBtnDisabled = reactive({
left: false,
right: false
});
const { t: pt } = injectLocaleProvider();
const isCurrent = computed(
() => props.preview.previewYear === currentYear && props.preview.previewMonth === currentMonth
);
const isSame = computed(
() => props.choose.chooseYear === props.preview.previewYear && props.choose.chooseMonth === props.preview.previewMonth
);
const sortWeekList = computed(() => {
const index = WEEK_HEADER.findIndex((week) => week === props.componentProps.firstDayOfWeek);
if (index === -1 || index === 0) {
return WEEK_HEADER;
}
return [...WEEK_HEADER.slice(index), ...WEEK_HEADER.slice(0, index)];
});
const getDayAbbr = (key) => {
var _a, _b;
return (_b = (_a = (pt || t)("datePickerWeekDict")) == null ? void 0 : _a[key].abbr) != null ? _b : "";
};
const filterDay = (day) => day > 0 ? day : "";
const initDate = () => {
const {
preview: { previewMonth, previewYear }
} = props;
const monthNum = dayjs(`${previewYear}-${previewMonth}`).daysInMonth();
const firstDayToWeek = dayjs(`${previewYear}-${previewMonth}-01`).day();
const index = sortWeekList.value.findIndex((week) => week === `${firstDayToWeek}`);
days.value = [...Array(index).fill(-1), ...Array.from(Array(monthNum + 1).keys())].filter((value) => value);
};
const initHeader = () => {
const {
preview: { previewYear, previewMonth },
componentProps: { max, min }
} = props;
if (max) {
const date = `${previewYear}-${toNumber(previewMonth) + 1}`;
panelBtnDisabled.right = !dayjs(date).isSameOrBefore(dayjs(max), "month");
}
if (min) {
const date = `${previewYear}-${toNumber(previewMonth) - 1}`;
panelBtnDisabled.left = !dayjs(date).isSameOrAfter(dayjs(min), "month");
}
};
const inRange = (day) => {
const {
preview: { previewYear, previewMonth },
componentProps: { min, max }
} = props;
let isBeforeMax = true;
let isAfterMin = true;
const previewDate = `${previewYear}-${previewMonth}-${day}`;
if (max) {
isBeforeMax = dayjs(previewDate).isSameOrBefore(dayjs(max), "day");
}
if (min) {
isAfterMin = dayjs(previewDate).isSameOrAfter(dayjs(min), "day");
}
return isBeforeMax && isAfterMin;
};
const shouldChoose = (val) => {
const {
choose: { chooseDays, chooseRangeDay },
componentProps: { range }
} = props;
if (range) {
if (!chooseRangeDay.length) {
return false;
}
const isBeforeMax = dayjs(val).isSameOrBefore(dayjs(chooseRangeDay[1]), "day");
const isAfterMin = dayjs(val).isSameOrAfter(dayjs(chooseRangeDay[0]), "day");
return isBeforeMax && isAfterMin;
}
return chooseDays.includes(val);
};
const buttonProps = (day) => {
if (day < 0) {
return {
text: true,
outline: false,
textColor: "",
class: n("button"),
disabled: true
};
}
const {
choose: { chooseDay: chooseDay2 },
preview: { previewYear, previewMonth },
componentProps: { allowedDates, color, multiple, range }
} = props;
const val = `${previewYear}-${previewMonth}-${day}`;
const dayExist = () => {
if (range || multiple) {
return shouldChoose(val);
}
return toNumber(chooseDay2) === day && isSame.value;
};
const computeDisabled = () => {
if (!inRange(day)) {
return true;
}
if (!allowedDates) {
return false;
}
return !allowedDates(val);
};
const disabled = computeDisabled();
const computeText = () => {
if (disabled) {
return true;
}
if (range || multiple) {
return !shouldChoose(val);
}
return !isSame.value || toNumber(chooseDay2) !== day;
};
const computeOutline = () => {
if (!(isCurrent.value && toNumber(currentDay) === day && props.componentProps.showCurrent)) {
return false;
}
if ((range || multiple || isSame.value) && disabled) {
return true;
}
if (range || multiple) {
return !shouldChoose(val);
}
if (isSame.value) {
return chooseDay2 !== currentDay;
}
return true;
};
const textColorOrCover = () => {
if (disabled) {
return "";
}
if (computeOutline()) {
return color != null ? color : "";
}
if (dayExist()) {
return "";
}
return `${nDate()}-color-cover`;
};
const isCover = textColorOrCover().startsWith(nDate());
return {
text: computeText(),
outline: computeOutline(),
textColor: isCover ? "" : textColorOrCover(),
[`${nDate()}-color-cover`]: isCover,
class: classes(n("button"), n("button--usable"), [disabled, n("button--disabled")]),
disabled
};
};
const checkDate = (checkType) => {
reverse.value = checkType === "prev";
panelKey.value += checkType === "prev" ? -1 : 1;
emit("check-preview", "month", checkType);
};
const chooseDay = (day, event) => {
const buttonEl = event.currentTarget;
if (buttonEl.classList.contains(n("button--disabled"))) {
return;
}
emit("choose-day", day);
};
const forwardRef = (checkType) => {
headerEl.value.checkDate(checkType);
};
onSmartMounted(() => {
initDate();
initHeader();
});
watch(
() => props.preview,
() => {
initDate();
initHeader();
}
);
watch(() => [props.componentProps.max, props.componentProps.min], initHeader);
return {
n,
nDate,
days,
reverse,
headerEl,
panelKey,
sortWeekList,
panelBtnDisabled,
forwardRef,
filterDay,
getDayAbbr,
checkDate,
chooseDay,
buttonProps
};
}
});
__sfc__.render = __render__;
var stdin_default = __sfc__;
export {
stdin_default as default
};