@varlet/ui
Version:
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
302 lines (301 loc) • 10 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 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 { MONTH_LIST } from "../props.mjs";
import PanelHeader from "./panel-header.mjs";
dayjs.extend(isSameOrBefore);
dayjs.extend(isSameOrAfter);
const { n, classes } = createNamespace("month-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, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withCtx as _withCtx, Transition as _Transition, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } 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: "month",
date: _ctx.preview,
disabled: _ctx.panelBtnDisabled,
onCheckPanel: _ctx.clickYear,
onCheckDate: _ctx.checkDate
}, null, 8, ["date", "disabled", "onCheckPanel", "onCheckDate"]),
_createVNode(_Transition, {
name: `${_ctx.nDate()}${_ctx.reverse ? "-reverse" : ""}-translatex`
}, {
default: _withCtx(() => [
(_openBlock(), _createElementBlock("ul", { key: _ctx.panelKey }, [
(_openBlock(true), _createElementBlock(
_Fragment,
null,
_renderList(_ctx.MONTH_LIST, (month) => {
return _openBlock(), _createElementBlock("li", { key: month }, [
_createVNode(_component_var_button, _mergeProps({
type: "primary",
"var-month-picker-cover": "",
ripple: false,
elevation: _ctx.componentProps.buttonElevation,
ref_for: true
}, __spreadValues({}, _ctx.buttonProps(month)), {
onClick: (event) => _ctx.chooseMonth(month, event)
}), {
default: _withCtx(() => [
_createTextVNode(
_toDisplayString(_ctx.getMonthAbbr(month)),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1040, ["elevation", "onClick"])
]);
}),
128
/* KEYED_FRAGMENT */
))
]))
]),
_: 1
/* STABLE */
}, 8, ["name"])
],
2
/* CLASS */
)
],
2
/* CLASS */
);
}
const __sfc__ = defineComponent({
name: "MonthPickerPanel",
components: {
VarButton,
PanelHeader
},
props: {
choose: {
type: Object,
required: true
},
preview: {
type: Object,
required: true
},
current: {
type: String,
required: true
},
clickYear: {
type: Function,
required: true
},
componentProps: {
type: Object,
required: true
}
},
emits: ["check-preview", "choose-month"],
setup(props, { emit }) {
const [currentYear, currentMonth] = props.current.split("-");
const reverse = ref(false);
const panelKey = ref(0);
const headerEl = ref(null);
const panelBtnDisabled = reactive({
left: false,
right: false
});
const { t: pt } = injectLocaleProvider();
const isSameYear = computed(() => props.choose.chooseYear === props.preview.previewYear);
const isCurrentYear = computed(() => props.preview.previewYear === currentYear);
const getMonthAbbr = (key) => {
var _a, _b;
return (_b = (_a = (pt || t)("datePickerMonthDict")) == null ? void 0 : _a[key].abbr) != null ? _b : "";
};
const inRange = (key) => {
const {
preview: { previewYear },
componentProps: { min, max }
} = props;
let isBeforeMax = true;
let isAfterMin = true;
const previewDate = `${previewYear}-${key}`;
if (max) {
isBeforeMax = dayjs(previewDate).isSameOrBefore(dayjs(max), "month");
}
if (min) {
isAfterMin = dayjs(previewDate).isSameOrAfter(dayjs(min), "month");
}
return isBeforeMax && isAfterMin;
};
const shouldChoose = (val) => {
const {
choose: { chooseMonths, chooseDays, chooseRangeMonth },
componentProps: { type, range }
} = props;
if (range) {
if (!chooseRangeMonth.length) {
return false;
}
const isBeforeMax = dayjs(val).isSameOrBefore(dayjs(chooseRangeMonth[1]), "month");
const isAfterMin = dayjs(val).isSameOrAfter(dayjs(chooseRangeMonth[0]), "month");
return isBeforeMax && isAfterMin;
}
if (type === "month") {
return chooseMonths.includes(val);
}
return chooseDays.some((value) => value.includes(val));
};
const buttonProps = (key) => {
const {
choose: { chooseMonth: chooseMonth2 },
preview: { previewYear },
componentProps: { allowedDates, color, multiple, range }
} = props;
const val = `${previewYear}-${key}`;
const monthExist = () => {
if (range || multiple) {
return shouldChoose(val);
}
return chooseMonth2 === key && isSameYear.value;
};
const computeDisabled = () => {
if (!inRange(key)) {
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 !isSameYear.value || chooseMonth2 !== key;
};
const computeOutline = () => {
if (!(isCurrentYear.value && currentMonth === key && props.componentProps.showCurrent)) {
return false;
}
if ((range || multiple || isSameYear.value) && disabled) {
return true;
}
if (range || multiple) {
return !shouldChoose(val);
}
if (isSameYear.value) {
return chooseMonth2 !== currentMonth;
}
return true;
};
const textColorOrCover = () => {
if (disabled) {
return "";
}
if (computeOutline()) {
return color != null ? color : "";
}
if (monthExist()) {
return "";
}
return `${nDate()}-color-cover`;
};
const isCover = textColorOrCover().startsWith(nDate());
return {
outline: computeOutline(),
text: computeText(),
color: !computeText() ? color : "",
textColor: isCover ? "" : textColorOrCover(),
[`${nDate()}-color-cover`]: isCover,
class: classes(n("button"), [disabled, n("button--disabled")]),
disabled
};
};
const chooseMonth = (month, event) => {
const buttonEl = event.currentTarget;
if (buttonEl.classList.contains(n("button--disabled"))) {
return;
}
emit("choose-month", month);
};
const checkDate = (checkType) => {
reverse.value = checkType === "prev";
panelKey.value += checkType === "prev" ? -1 : 1;
emit("check-preview", "year", checkType);
};
const forwardRef = (checkType) => {
headerEl.value.checkDate(checkType);
};
watch(
() => [props.preview.previewYear, props.componentProps.max, props.componentProps.min],
([year, max, min]) => {
if (max) {
panelBtnDisabled.right = !dayjs(`${toNumber(year) + 1}`).isSameOrBefore(dayjs(max), "year");
}
if (min) {
panelBtnDisabled.left = !dayjs(`${toNumber(year) - 1}`).isSameOrAfter(dayjs(min), "year");
}
},
{ immediate: true }
);
return {
n,
nDate,
t,
MONTH_LIST,
headerEl,
reverse,
panelKey,
panelBtnDisabled,
forwardRef,
buttonProps,
getMonthAbbr,
chooseMonth,
checkDate
};
}
});
__sfc__.render = __render__;
var stdin_default = __sfc__;
export {
stdin_default as default
};