103 lines
3.4 KiB
JavaScript
103 lines
3.4 KiB
JavaScript
import { selectControllerEmits, selectControllerProps } from './select-controller.mjs';
|
|
import { defineComponent, computed, createElementBlock, openBlock, Fragment, createVNode, unref, normalizeClass, withCtx, createTextVNode, toDisplayString } from 'vue';
|
|
import dayjs from 'dayjs';
|
|
import { ElSelect } from '../../select/index.mjs';
|
|
import { ElButton } from '../../button/index.mjs';
|
|
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
|
|
import { useLocale } from '../../../hooks/use-locale/index.mjs';
|
|
import { isFunction } from '@vue/shared';
|
|
|
|
var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
...{
|
|
name: "SelectController"
|
|
},
|
|
__name: "select-controller",
|
|
props: selectControllerProps,
|
|
emits: selectControllerEmits,
|
|
setup(__props, { emit: __emit }) {
|
|
const props = __props;
|
|
const emit = __emit;
|
|
const nsSelect = useNamespace("calendar-select");
|
|
const { t, lang } = useLocale();
|
|
const monthOptions = Array.from({ length: 12 }, (_, index) => {
|
|
const actualMonth = index + 1;
|
|
const label = isFunction(props.formatter) ? props.formatter(actualMonth, "month") : actualMonth;
|
|
return {
|
|
value: actualMonth,
|
|
label
|
|
};
|
|
});
|
|
const yearValue = computed(() => props.date.year());
|
|
const monthValue = computed(() => props.date.month() + 1);
|
|
const yearOptions = computed(() => {
|
|
const years = [];
|
|
for (let i = -10; i < 10; i++) {
|
|
const year = yearValue.value + i;
|
|
if (year > 0) {
|
|
const label = isFunction(props.formatter) ? props.formatter(year, "year") : year;
|
|
years.push({ value: year, label });
|
|
}
|
|
}
|
|
return years;
|
|
});
|
|
const handleYearChange = (year) => {
|
|
emit(
|
|
"date-change",
|
|
dayjs(new Date(year, monthValue.value - 1, 1)).locale(lang.value)
|
|
);
|
|
};
|
|
const handleMonthChange = (month) => {
|
|
emit(
|
|
"date-change",
|
|
dayjs(new Date(yearValue.value, month - 1, 1)).locale(lang.value)
|
|
);
|
|
};
|
|
const selectToday = () => {
|
|
emit("date-change", "today");
|
|
};
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock(
|
|
Fragment,
|
|
null,
|
|
[
|
|
createVNode(unref(ElSelect), {
|
|
"model-value": yearValue.value,
|
|
size: "small",
|
|
class: normalizeClass(unref(nsSelect).e("year")),
|
|
"validate-event": false,
|
|
options: yearOptions.value,
|
|
onChange: handleYearChange
|
|
}, null, 8, ["model-value", "class", "options"]),
|
|
createVNode(unref(ElSelect), {
|
|
"model-value": monthValue.value,
|
|
size: "small",
|
|
class: normalizeClass(unref(nsSelect).e("month")),
|
|
"validate-event": false,
|
|
options: unref(monthOptions),
|
|
onChange: handleMonthChange
|
|
}, null, 8, ["model-value", "class", "options"]),
|
|
createVNode(unref(ElButton), {
|
|
size: "small",
|
|
onClick: selectToday
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(
|
|
toDisplayString(unref(t)("el.datepicker.today")),
|
|
1
|
|
/* TEXT */
|
|
)
|
|
]),
|
|
_: 1
|
|
/* STABLE */
|
|
})
|
|
],
|
|
64
|
|
/* STABLE_FRAGMENT */
|
|
);
|
|
};
|
|
}
|
|
});
|
|
|
|
export { _sfc_main as default };
|
|
//# sourceMappingURL=select-controller.vue2.mjs.map
|