6358 lines
232 KiB
JavaScript
6358 lines
232 KiB
JavaScript
import { b as buildAssetsURL } from '../../handlers/renderer.mjs';
|
|
import { defineComponent, useAttrs as useAttrs$1, useSlots, computed, shallowRef, ref, watch, nextTick, toRef, withDirectives, openBlock, createElementBlock, mergeProps, unref, createCommentVNode, Fragment, normalizeClass, renderSlot, createElementVNode, createBlock, withCtx, resolveDynamicComponent, withModifiers, createVNode, toDisplayString, normalizeStyle, vShow, provide, reactive, onUpdated, renderList, createTextVNode, withKeys, createSlots, inject, getCurrentInstance, onUnmounted, Text, useSSRContext, Transition } from 'vue';
|
|
import { isNil, debounce, isEqual, fromPairs, flatten } from 'lodash-unified';
|
|
import { useResizeObserver, useEventListener, onClickOutside, isClient } from '@vueuse/core';
|
|
import { c as withInstall, b as buildProps, V as ValidateComponentsMap, K as view_default, L as hide_default, E as ElIcon, N as circle_close_default, a as addUnit, d as definePropType, O as loading_default, P as withNoopInstall, Q as useSizeProp, p as useLocale, R as clock_default, S as calendar_default, W as d_arrow_left_default, X as d_arrow_right_default, Y as ConfigProvider, Z as useGlobalSize, i as iconPropType, y as mutable, U as UPDATE_MODEL_EVENT, _ as _export_sfc$1, n as isNumber, $ as INPUT_EVENT, a0 as CHANGE_EVENT, q as useDeprecated, x as useGlobalConfig, a1 as isEmpty, A as EVENT_CODE, g as _imports_1, a2 as arrow_left_default, a3 as arrow_right_default, a4 as publishSchoolSearchHttp, a5 as publishProfessionSearchHttp, B as hasClass, G as isElement, a6 as isUndefined, j as getStyle, a7 as arrow_up_default, a8 as arrow_down_default } from './cross-icon-55a429a3.mjs';
|
|
import { NOOP, isArray, isString, isObject, isFunction, isDate } from '@vue/shared';
|
|
import { d as useNamespace, h as debugWarn, t as throwError, u as useRouter } from '../server.mjs';
|
|
import { a as useTooltipContentProps, E as ElTooltip, f as formContextKey, b as formItemContextKey, T as TOOLTIP_INJECTION_KEY } from './el-popper-8fff671d.mjs';
|
|
import dayjs from 'dayjs';
|
|
import customParseFormat from 'dayjs/plugin/customParseFormat.js';
|
|
import advancedFormat from 'dayjs/plugin/advancedFormat.js';
|
|
import localeData from 'dayjs/plugin/localeData.js';
|
|
import weekOfYear from 'dayjs/plugin/weekOfYear.js';
|
|
import weekYear from 'dayjs/plugin/weekYear.js';
|
|
import dayOfYear from 'dayjs/plugin/dayOfYear.js';
|
|
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter.js';
|
|
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore.js';
|
|
import { TinyColor } from '@ctrl/tinycolor';
|
|
import { ssrRenderAttr, ssrRenderComponent } from 'vue/server-renderer';
|
|
import { _ as _export_sfc } from './_plugin-vue_export-helper-cc2b3d55.mjs';
|
|
import 'vue-bundle-renderer/runtime';
|
|
import '../../nitro/node-server.mjs';
|
|
import 'node:http';
|
|
import 'node:https';
|
|
import 'fs';
|
|
import 'path';
|
|
import 'node:fs';
|
|
import 'node:url';
|
|
import 'devalue';
|
|
import '@unhead/ssr';
|
|
import 'unhead';
|
|
import '@unhead/shared';
|
|
import 'axios';
|
|
import 'qs';
|
|
import 'vue-router';
|
|
import '@popperjs/core';
|
|
|
|
const isFirefox = () => isClient && /firefox/i.test(window.navigator.userAgent);
|
|
const datePickTypes = [
|
|
"year",
|
|
"month",
|
|
"date",
|
|
"dates",
|
|
"week",
|
|
"datetime",
|
|
"datetimerange",
|
|
"daterange",
|
|
"monthrange"
|
|
];
|
|
const castArray = (arr) => {
|
|
if (!arr && arr !== 0)
|
|
return [];
|
|
return Array.isArray(arr) ? arr : [arr];
|
|
};
|
|
const isKorean = (text) => /([\uAC00-\uD7AF\u3130-\u318F])+/gi.test(text);
|
|
const generateId = () => Math.floor(Math.random() * 1e4);
|
|
const DEFAULT_EXCLUDE_KEYS = ["class", "style"];
|
|
const LISTENER_PREFIX = /^on[A-Z]/;
|
|
const useAttrs = (params = {}) => {
|
|
const { excludeListeners = false, excludeKeys } = params;
|
|
const allExcludeKeys = computed(() => {
|
|
return ((excludeKeys == null ? void 0 : excludeKeys.value) || []).concat(DEFAULT_EXCLUDE_KEYS);
|
|
});
|
|
const instance = getCurrentInstance();
|
|
if (!instance) {
|
|
return computed(() => ({}));
|
|
}
|
|
return computed(() => {
|
|
var _a;
|
|
return fromPairs(Object.entries((_a = instance.proxy) == null ? void 0 : _a.$attrs).filter(([key]) => !allExcludeKeys.value.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key))));
|
|
});
|
|
};
|
|
const useProp = (name) => {
|
|
const vm = getCurrentInstance();
|
|
return computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = vm == null ? void 0 : vm.proxy) == null ? void 0 : _a.$props) == null ? void 0 : _b[name];
|
|
});
|
|
};
|
|
function useCursor(input) {
|
|
const selectionRef = ref();
|
|
function recordCursor() {
|
|
if (input.value == void 0)
|
|
return;
|
|
const { selectionStart, selectionEnd, value } = input.value;
|
|
if (selectionStart == null || selectionEnd == null)
|
|
return;
|
|
const beforeTxt = value.slice(0, Math.max(0, selectionStart));
|
|
const afterTxt = value.slice(Math.max(0, selectionEnd));
|
|
selectionRef.value = {
|
|
selectionStart,
|
|
selectionEnd,
|
|
value,
|
|
beforeTxt,
|
|
afterTxt
|
|
};
|
|
}
|
|
function setCursor() {
|
|
if (input.value == void 0 || selectionRef.value == void 0)
|
|
return;
|
|
const { value } = input.value;
|
|
const { beforeTxt, afterTxt, selectionStart } = selectionRef.value;
|
|
if (beforeTxt == void 0 || afterTxt == void 0 || selectionStart == void 0)
|
|
return;
|
|
let startPos = value.length;
|
|
if (value.endsWith(afterTxt)) {
|
|
startPos = value.length - afterTxt.length;
|
|
} else if (value.startsWith(beforeTxt)) {
|
|
startPos = beforeTxt.length;
|
|
} else {
|
|
const beforeLastChar = beforeTxt[selectionStart - 1];
|
|
const newIndex = value.indexOf(beforeLastChar, selectionStart - 1);
|
|
if (newIndex !== -1) {
|
|
startPos = newIndex + 1;
|
|
}
|
|
}
|
|
input.value.setSelectionRange(startPos, startPos);
|
|
}
|
|
return [recordCursor, setCursor];
|
|
}
|
|
function useFocusController(target, { afterFocus, beforeBlur, afterBlur } = {}) {
|
|
const instance = getCurrentInstance();
|
|
const { emit } = instance;
|
|
const wrapperRef = shallowRef();
|
|
const isFocused = ref(false);
|
|
const handleFocus = (event) => {
|
|
if (isFocused.value)
|
|
return;
|
|
isFocused.value = true;
|
|
emit("focus", event);
|
|
afterFocus == null ? void 0 : afterFocus();
|
|
};
|
|
const handleBlur = (event) => {
|
|
var _a;
|
|
const cancelBlur = isFunction(beforeBlur) ? beforeBlur(event) : false;
|
|
if (cancelBlur || event.relatedTarget && ((_a = wrapperRef.value) == null ? void 0 : _a.contains(event.relatedTarget)))
|
|
return;
|
|
isFocused.value = false;
|
|
emit("blur", event);
|
|
afterBlur == null ? void 0 : afterBlur();
|
|
};
|
|
const handleClick = () => {
|
|
var _a;
|
|
(_a = target.value) == null ? void 0 : _a.focus();
|
|
};
|
|
watch(wrapperRef, (el) => {
|
|
if (el) {
|
|
el.setAttribute("tabindex", "-1");
|
|
}
|
|
});
|
|
useEventListener(wrapperRef, "click", handleClick);
|
|
return {
|
|
wrapperRef,
|
|
isFocused,
|
|
handleFocus,
|
|
handleBlur
|
|
};
|
|
}
|
|
const ElConfigProvider = withInstall(ConfigProvider);
|
|
const useFormSize = (fallback, ignore = {}) => {
|
|
const emptyRef = ref(void 0);
|
|
const size = ignore.prop ? emptyRef : useProp("size");
|
|
const globalConfig = ignore.global ? emptyRef : useGlobalSize();
|
|
const form = ignore.form ? { size: void 0 } : inject(formContextKey, void 0);
|
|
const formItem = ignore.formItem ? { size: void 0 } : inject(formItemContextKey, void 0);
|
|
return computed(() => size.value || unref(fallback) || (formItem == null ? void 0 : formItem.size) || (form == null ? void 0 : form.size) || globalConfig.value || "");
|
|
};
|
|
const useFormDisabled = (fallback) => {
|
|
const disabled = useProp("disabled");
|
|
const form = inject(formContextKey, void 0);
|
|
return computed(() => disabled.value || unref(fallback) || (form == null ? void 0 : form.disabled) || false);
|
|
};
|
|
const useFormItem = () => {
|
|
const form = inject(formContextKey, void 0);
|
|
const formItem = inject(formItemContextKey, void 0);
|
|
return {
|
|
form,
|
|
formItem
|
|
};
|
|
};
|
|
const useFormItemInputId = (props, {
|
|
formItemContext,
|
|
disableIdGeneration,
|
|
disableIdManagement
|
|
}) => {
|
|
if (!disableIdGeneration) {
|
|
disableIdGeneration = ref(false);
|
|
}
|
|
if (!disableIdManagement) {
|
|
disableIdManagement = ref(false);
|
|
}
|
|
const inputId = ref();
|
|
const isLabeledByFormItem = computed(() => {
|
|
var _a;
|
|
return !!(!props.label && formItemContext && formItemContext.inputIds && ((_a = formItemContext.inputIds) == null ? void 0 : _a.length) <= 1);
|
|
});
|
|
onUnmounted(() => {
|
|
if (formItemContext == null ? void 0 : formItemContext.removeInputId) {
|
|
inputId.value && formItemContext.removeInputId(inputId.value);
|
|
}
|
|
});
|
|
return {
|
|
isLabeledByFormItem,
|
|
inputId
|
|
};
|
|
};
|
|
let hiddenTextarea = void 0;
|
|
const HIDDEN_STYLE = `
|
|
height:0 !important;
|
|
visibility:hidden !important;
|
|
${isFirefox() ? "" : "overflow:hidden !important;"}
|
|
position:absolute !important;
|
|
z-index:-1000 !important;
|
|
top:0 !important;
|
|
right:0 !important;
|
|
`;
|
|
const CONTEXT_STYLE = [
|
|
"letter-spacing",
|
|
"line-height",
|
|
"padding-top",
|
|
"padding-bottom",
|
|
"font-family",
|
|
"font-weight",
|
|
"font-size",
|
|
"text-rendering",
|
|
"text-transform",
|
|
"width",
|
|
"text-indent",
|
|
"padding-left",
|
|
"padding-right",
|
|
"border-width",
|
|
"box-sizing"
|
|
];
|
|
function calculateNodeStyling(targetElement) {
|
|
const style = window.getComputedStyle(targetElement);
|
|
const boxSizing = style.getPropertyValue("box-sizing");
|
|
const paddingSize = Number.parseFloat(style.getPropertyValue("padding-bottom")) + Number.parseFloat(style.getPropertyValue("padding-top"));
|
|
const borderSize = Number.parseFloat(style.getPropertyValue("border-bottom-width")) + Number.parseFloat(style.getPropertyValue("border-top-width"));
|
|
const contextStyle = CONTEXT_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(";");
|
|
return { contextStyle, paddingSize, borderSize, boxSizing };
|
|
}
|
|
function calcTextareaHeight(targetElement, minRows = 1, maxRows) {
|
|
var _a;
|
|
if (!hiddenTextarea) {
|
|
hiddenTextarea = document.createElement("textarea");
|
|
document.body.appendChild(hiddenTextarea);
|
|
}
|
|
const { paddingSize, borderSize, boxSizing, contextStyle } = calculateNodeStyling(targetElement);
|
|
hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
|
|
hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
|
|
let height = hiddenTextarea.scrollHeight;
|
|
const result = {};
|
|
if (boxSizing === "border-box") {
|
|
height = height + borderSize;
|
|
} else if (boxSizing === "content-box") {
|
|
height = height - paddingSize;
|
|
}
|
|
hiddenTextarea.value = "";
|
|
const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
|
|
if (isNumber(minRows)) {
|
|
let minHeight = singleRowHeight * minRows;
|
|
if (boxSizing === "border-box") {
|
|
minHeight = minHeight + paddingSize + borderSize;
|
|
}
|
|
height = Math.max(minHeight, height);
|
|
result.minHeight = `${minHeight}px`;
|
|
}
|
|
if (isNumber(maxRows)) {
|
|
let maxHeight = singleRowHeight * maxRows;
|
|
if (boxSizing === "border-box") {
|
|
maxHeight = maxHeight + paddingSize + borderSize;
|
|
}
|
|
height = Math.min(maxHeight, height);
|
|
}
|
|
result.height = `${height}px`;
|
|
(_a = hiddenTextarea.parentNode) == null ? void 0 : _a.removeChild(hiddenTextarea);
|
|
hiddenTextarea = void 0;
|
|
return result;
|
|
}
|
|
const inputProps = buildProps({
|
|
id: {
|
|
type: String,
|
|
default: void 0
|
|
},
|
|
size: useSizeProp,
|
|
disabled: Boolean,
|
|
modelValue: {
|
|
type: definePropType([
|
|
String,
|
|
Number,
|
|
Object
|
|
]),
|
|
default: ""
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: "text"
|
|
},
|
|
resize: {
|
|
type: String,
|
|
values: ["none", "both", "horizontal", "vertical"]
|
|
},
|
|
autosize: {
|
|
type: definePropType([Boolean, Object]),
|
|
default: false
|
|
},
|
|
autocomplete: {
|
|
type: String,
|
|
default: "off"
|
|
},
|
|
formatter: {
|
|
type: Function
|
|
},
|
|
parser: {
|
|
type: Function
|
|
},
|
|
placeholder: {
|
|
type: String
|
|
},
|
|
form: {
|
|
type: String
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
clearable: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showPassword: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showWordLimit: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
suffixIcon: {
|
|
type: iconPropType
|
|
},
|
|
prefixIcon: {
|
|
type: iconPropType
|
|
},
|
|
containerRole: {
|
|
type: String,
|
|
default: void 0
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: void 0
|
|
},
|
|
tabindex: {
|
|
type: [String, Number],
|
|
default: 0
|
|
},
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
inputStyle: {
|
|
type: definePropType([Object, Array, String]),
|
|
default: () => mutable({})
|
|
},
|
|
autofocus: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
const inputEmits = {
|
|
[UPDATE_MODEL_EVENT]: (value) => isString(value),
|
|
input: (value) => isString(value),
|
|
change: (value) => isString(value),
|
|
focus: (evt) => evt instanceof FocusEvent,
|
|
blur: (evt) => evt instanceof FocusEvent,
|
|
clear: () => true,
|
|
mouseleave: (evt) => evt instanceof MouseEvent,
|
|
mouseenter: (evt) => evt instanceof MouseEvent,
|
|
keydown: (evt) => evt instanceof Event,
|
|
compositionstart: (evt) => evt instanceof CompositionEvent,
|
|
compositionupdate: (evt) => evt instanceof CompositionEvent,
|
|
compositionend: (evt) => evt instanceof CompositionEvent
|
|
};
|
|
const _hoisted_1$9 = ["role"];
|
|
const _hoisted_2$9 = ["id", "type", "disabled", "formatter", "parser", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form", "autofocus"];
|
|
const _hoisted_3$7 = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form", "autofocus"];
|
|
const __default__$6 = defineComponent({
|
|
name: "ElInput",
|
|
inheritAttrs: false
|
|
});
|
|
const _sfc_main$g = /* @__PURE__ */ defineComponent({
|
|
...__default__$6,
|
|
props: inputProps,
|
|
emits: inputEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const rawAttrs = useAttrs$1();
|
|
const slots = useSlots();
|
|
const containerAttrs = computed(() => {
|
|
const comboBoxAttrs = {};
|
|
if (props.containerRole === "combobox") {
|
|
comboBoxAttrs["aria-haspopup"] = rawAttrs["aria-haspopup"];
|
|
comboBoxAttrs["aria-owns"] = rawAttrs["aria-owns"];
|
|
comboBoxAttrs["aria-expanded"] = rawAttrs["aria-expanded"];
|
|
}
|
|
return comboBoxAttrs;
|
|
});
|
|
const containerKls = computed(() => [
|
|
props.type === "textarea" ? nsTextarea.b() : nsInput.b(),
|
|
nsInput.m(inputSize.value),
|
|
nsInput.is("disabled", inputDisabled.value),
|
|
nsInput.is("exceed", inputExceed.value),
|
|
{
|
|
[nsInput.b("group")]: slots.prepend || slots.append,
|
|
[nsInput.bm("group", "append")]: slots.append,
|
|
[nsInput.bm("group", "prepend")]: slots.prepend,
|
|
[nsInput.m("prefix")]: slots.prefix || props.prefixIcon,
|
|
[nsInput.m("suffix")]: slots.suffix || props.suffixIcon || props.clearable || props.showPassword,
|
|
[nsInput.bm("suffix", "password-clear")]: showClear.value && showPwdVisible.value
|
|
},
|
|
rawAttrs.class
|
|
]);
|
|
const wrapperKls = computed(() => [
|
|
nsInput.e("wrapper"),
|
|
nsInput.is("focus", isFocused.value)
|
|
]);
|
|
const attrs = useAttrs({
|
|
excludeKeys: computed(() => {
|
|
return Object.keys(containerAttrs.value);
|
|
})
|
|
});
|
|
const { form, formItem } = useFormItem();
|
|
const { inputId } = useFormItemInputId(props, {
|
|
formItemContext: formItem
|
|
});
|
|
const inputSize = useFormSize();
|
|
const inputDisabled = useFormDisabled();
|
|
const nsInput = useNamespace("input");
|
|
const nsTextarea = useNamespace("textarea");
|
|
const input = shallowRef();
|
|
const textarea = shallowRef();
|
|
const hovering = ref(false);
|
|
const isComposing = ref(false);
|
|
const passwordVisible = ref(false);
|
|
const countStyle = ref();
|
|
const textareaCalcStyle = shallowRef(props.inputStyle);
|
|
const _ref = computed(() => input.value || textarea.value);
|
|
const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(_ref, {
|
|
afterBlur() {
|
|
var _a;
|
|
if (props.validateEvent) {
|
|
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn());
|
|
}
|
|
}
|
|
});
|
|
const needStatusIcon = computed(() => {
|
|
var _a;
|
|
return (_a = form == null ? void 0 : form.statusIcon) != null ? _a : false;
|
|
});
|
|
const validateState = computed(() => (formItem == null ? void 0 : formItem.validateState) || "");
|
|
const validateIcon = computed(() => validateState.value && ValidateComponentsMap[validateState.value]);
|
|
const passwordIcon = computed(() => passwordVisible.value ? view_default : hide_default);
|
|
const containerStyle = computed(() => [
|
|
rawAttrs.style,
|
|
props.inputStyle
|
|
]);
|
|
const textareaStyle = computed(() => [
|
|
props.inputStyle,
|
|
textareaCalcStyle.value,
|
|
{ resize: props.resize }
|
|
]);
|
|
const nativeInputValue = computed(() => isNil(props.modelValue) ? "" : String(props.modelValue));
|
|
const showClear = computed(() => props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (isFocused.value || hovering.value));
|
|
const showPwdVisible = computed(() => props.showPassword && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (!!nativeInputValue.value || isFocused.value));
|
|
const isWordLimitVisible = computed(() => props.showWordLimit && !!attrs.value.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword);
|
|
const textLength = computed(() => nativeInputValue.value.length);
|
|
const inputExceed = computed(() => !!isWordLimitVisible.value && textLength.value > Number(attrs.value.maxlength));
|
|
const suffixVisible = computed(() => !!slots.suffix || !!props.suffixIcon || showClear.value || props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value);
|
|
const [recordCursor, setCursor] = useCursor(input);
|
|
useResizeObserver(textarea, (entries) => {
|
|
onceInitSizeTextarea();
|
|
if (!isWordLimitVisible.value || props.resize !== "both")
|
|
return;
|
|
const entry = entries[0];
|
|
const { width } = entry.contentRect;
|
|
countStyle.value = {
|
|
right: `calc(100% - ${width + 15 + 6}px)`
|
|
};
|
|
});
|
|
const resizeTextarea = () => {
|
|
const { type, autosize } = props;
|
|
if (!isClient || type !== "textarea" || !textarea.value)
|
|
return;
|
|
if (autosize) {
|
|
const minRows = isObject(autosize) ? autosize.minRows : void 0;
|
|
const maxRows = isObject(autosize) ? autosize.maxRows : void 0;
|
|
const textareaStyle2 = calcTextareaHeight(textarea.value, minRows, maxRows);
|
|
textareaCalcStyle.value = {
|
|
overflowY: "hidden",
|
|
...textareaStyle2
|
|
};
|
|
nextTick(() => {
|
|
textarea.value.offsetHeight;
|
|
textareaCalcStyle.value = textareaStyle2;
|
|
});
|
|
} else {
|
|
textareaCalcStyle.value = {
|
|
minHeight: calcTextareaHeight(textarea.value).minHeight
|
|
};
|
|
}
|
|
};
|
|
const createOnceInitResize = (resizeTextarea2) => {
|
|
let isInit = false;
|
|
return () => {
|
|
var _a;
|
|
if (isInit || !props.autosize)
|
|
return;
|
|
const isElHidden = ((_a = textarea.value) == null ? void 0 : _a.offsetParent) === null;
|
|
if (!isElHidden) {
|
|
resizeTextarea2();
|
|
isInit = true;
|
|
}
|
|
};
|
|
};
|
|
const onceInitSizeTextarea = createOnceInitResize(resizeTextarea);
|
|
const setNativeInputValue = () => {
|
|
const input2 = _ref.value;
|
|
const formatterValue = props.formatter ? props.formatter(nativeInputValue.value) : nativeInputValue.value;
|
|
if (!input2 || input2.value === formatterValue)
|
|
return;
|
|
input2.value = formatterValue;
|
|
};
|
|
const handleInput = async (event) => {
|
|
recordCursor();
|
|
let { value } = event.target;
|
|
if (props.formatter) {
|
|
value = props.parser ? props.parser(value) : value;
|
|
}
|
|
if (isComposing.value)
|
|
return;
|
|
if (value === nativeInputValue.value) {
|
|
setNativeInputValue();
|
|
return;
|
|
}
|
|
emit(UPDATE_MODEL_EVENT, value);
|
|
emit("input", value);
|
|
await nextTick();
|
|
setNativeInputValue();
|
|
setCursor();
|
|
};
|
|
const handleChange = (event) => {
|
|
emit("change", event.target.value);
|
|
};
|
|
const handleCompositionStart = (event) => {
|
|
emit("compositionstart", event);
|
|
isComposing.value = true;
|
|
};
|
|
const handleCompositionUpdate = (event) => {
|
|
var _a;
|
|
emit("compositionupdate", event);
|
|
const text = (_a = event.target) == null ? void 0 : _a.value;
|
|
const lastCharacter = text[text.length - 1] || "";
|
|
isComposing.value = !isKorean(lastCharacter);
|
|
};
|
|
const handleCompositionEnd = (event) => {
|
|
emit("compositionend", event);
|
|
if (isComposing.value) {
|
|
isComposing.value = false;
|
|
handleInput(event);
|
|
}
|
|
};
|
|
const handlePasswordVisible = () => {
|
|
passwordVisible.value = !passwordVisible.value;
|
|
focus();
|
|
};
|
|
const focus = async () => {
|
|
var _a;
|
|
await nextTick();
|
|
(_a = _ref.value) == null ? void 0 : _a.focus();
|
|
};
|
|
const blur = () => {
|
|
var _a;
|
|
return (_a = _ref.value) == null ? void 0 : _a.blur();
|
|
};
|
|
const handleMouseLeave = (evt) => {
|
|
hovering.value = false;
|
|
emit("mouseleave", evt);
|
|
};
|
|
const handleMouseEnter = (evt) => {
|
|
hovering.value = true;
|
|
emit("mouseenter", evt);
|
|
};
|
|
const handleKeydown = (evt) => {
|
|
emit("keydown", evt);
|
|
};
|
|
const select = () => {
|
|
var _a;
|
|
(_a = _ref.value) == null ? void 0 : _a.select();
|
|
};
|
|
const clear = () => {
|
|
emit(UPDATE_MODEL_EVENT, "");
|
|
emit("change", "");
|
|
emit("clear");
|
|
emit("input", "");
|
|
};
|
|
watch(() => props.modelValue, () => {
|
|
var _a;
|
|
nextTick(() => resizeTextarea());
|
|
if (props.validateEvent) {
|
|
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn());
|
|
}
|
|
});
|
|
watch(nativeInputValue, () => setNativeInputValue());
|
|
watch(() => props.type, async () => {
|
|
await nextTick();
|
|
setNativeInputValue();
|
|
resizeTextarea();
|
|
});
|
|
expose({
|
|
input,
|
|
textarea,
|
|
ref: _ref,
|
|
textareaStyle,
|
|
autosize: toRef(props, "autosize"),
|
|
focus,
|
|
blur,
|
|
select,
|
|
clear,
|
|
resizeTextarea
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return withDirectives((openBlock(), createElementBlock("div", mergeProps(unref(containerAttrs), {
|
|
class: unref(containerKls),
|
|
style: unref(containerStyle),
|
|
role: _ctx.containerRole,
|
|
onMouseenter: handleMouseEnter,
|
|
onMouseleave: handleMouseLeave
|
|
}), [
|
|
createCommentVNode(" input "),
|
|
_ctx.type !== "textarea" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
createCommentVNode(" prepend slot "),
|
|
_ctx.$slots.prepend ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(nsInput).be("group", "prepend"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prepend")
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
ref_key: "wrapperRef",
|
|
ref: wrapperRef,
|
|
class: normalizeClass(unref(wrapperKls))
|
|
}, [
|
|
createCommentVNode(" prefix slot "),
|
|
_ctx.$slots.prefix || _ctx.prefixIcon ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
class: normalizeClass(unref(nsInput).e("prefix"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(nsInput).e("prefix-inner"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prefix"),
|
|
_ctx.prefixIcon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(nsInput).e("icon"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
], 2)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("input", mergeProps({
|
|
id: unref(inputId),
|
|
ref_key: "input",
|
|
ref: input,
|
|
class: unref(nsInput).e("inner")
|
|
}, unref(attrs), {
|
|
type: _ctx.showPassword ? passwordVisible.value ? "text" : "password" : _ctx.type,
|
|
disabled: unref(inputDisabled),
|
|
formatter: _ctx.formatter,
|
|
parser: _ctx.parser,
|
|
readonly: _ctx.readonly,
|
|
autocomplete: _ctx.autocomplete,
|
|
tabindex: _ctx.tabindex,
|
|
"aria-label": _ctx.label,
|
|
placeholder: _ctx.placeholder,
|
|
style: _ctx.inputStyle,
|
|
form: props.form,
|
|
autofocus: props.autofocus,
|
|
onCompositionstart: handleCompositionStart,
|
|
onCompositionupdate: handleCompositionUpdate,
|
|
onCompositionend: handleCompositionEnd,
|
|
onInput: handleInput,
|
|
onFocus: _cache[0] || (_cache[0] = (...args) => unref(handleFocus) && unref(handleFocus)(...args)),
|
|
onBlur: _cache[1] || (_cache[1] = (...args) => unref(handleBlur) && unref(handleBlur)(...args)),
|
|
onChange: handleChange,
|
|
onKeydown: handleKeydown
|
|
}), null, 16, _hoisted_2$9),
|
|
createCommentVNode(" suffix slot "),
|
|
unref(suffixVisible) ? (openBlock(), createElementBlock("span", {
|
|
key: 1,
|
|
class: normalizeClass(unref(nsInput).e("suffix"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(nsInput).e("suffix-inner"))
|
|
}, [
|
|
!unref(showClear) || !unref(showPwdVisible) || !unref(isWordLimitVisible) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
renderSlot(_ctx.$slots, "suffix"),
|
|
_ctx.suffixIcon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(nsInput).e("icon"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.suffixIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
], 64)) : createCommentVNode("v-if", true),
|
|
unref(showClear) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 1,
|
|
class: normalizeClass([unref(nsInput).e("icon"), unref(nsInput).e("clear")]),
|
|
onMousedown: withModifiers(unref(NOOP), ["prevent"]),
|
|
onClick: clear
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(circle_close_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true),
|
|
unref(showPwdVisible) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 2,
|
|
class: normalizeClass([unref(nsInput).e("icon"), unref(nsInput).e("password")]),
|
|
onClick: handlePasswordVisible
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(passwordIcon))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
|
unref(isWordLimitVisible) ? (openBlock(), createElementBlock("span", {
|
|
key: 3,
|
|
class: normalizeClass(unref(nsInput).e("count"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(nsInput).e("count-inner"))
|
|
}, toDisplayString(unref(textLength)) + " / " + toDisplayString(unref(attrs).maxlength), 3)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
unref(validateState) && unref(validateIcon) && unref(needStatusIcon) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 4,
|
|
class: normalizeClass([
|
|
unref(nsInput).e("icon"),
|
|
unref(nsInput).e("validateIcon"),
|
|
unref(nsInput).is("loading", unref(validateState) === "validating")
|
|
])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(validateIcon))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
], 2)
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2),
|
|
createCommentVNode(" append slot "),
|
|
_ctx.$slots.append ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(unref(nsInput).be("group", "append"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "append")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
createCommentVNode(" textarea "),
|
|
createElementVNode("textarea", mergeProps({
|
|
id: unref(inputId),
|
|
ref_key: "textarea",
|
|
ref: textarea,
|
|
class: unref(nsTextarea).e("inner")
|
|
}, unref(attrs), {
|
|
tabindex: _ctx.tabindex,
|
|
disabled: unref(inputDisabled),
|
|
readonly: _ctx.readonly,
|
|
autocomplete: _ctx.autocomplete,
|
|
style: unref(textareaStyle),
|
|
"aria-label": _ctx.label,
|
|
placeholder: _ctx.placeholder,
|
|
form: props.form,
|
|
autofocus: props.autofocus,
|
|
onCompositionstart: handleCompositionStart,
|
|
onCompositionupdate: handleCompositionUpdate,
|
|
onCompositionend: handleCompositionEnd,
|
|
onInput: handleInput,
|
|
onFocus: _cache[2] || (_cache[2] = (...args) => unref(handleFocus) && unref(handleFocus)(...args)),
|
|
onBlur: _cache[3] || (_cache[3] = (...args) => unref(handleBlur) && unref(handleBlur)(...args)),
|
|
onChange: handleChange,
|
|
onKeydown: handleKeydown
|
|
}), null, 16, _hoisted_3$7),
|
|
unref(isWordLimitVisible) ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
style: normalizeStyle(countStyle.value),
|
|
class: normalizeClass(unref(nsInput).e("count"))
|
|
}, toDisplayString(unref(textLength)) + " / " + toDisplayString(unref(attrs).maxlength), 7)) : createCommentVNode("v-if", true)
|
|
], 64))
|
|
], 16, _hoisted_1$9)), [
|
|
[vShow, _ctx.type !== "hidden"]
|
|
]);
|
|
};
|
|
}
|
|
});
|
|
var Input = /* @__PURE__ */ _export_sfc$1(_sfc_main$g, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/input/src/input.vue"]]);
|
|
const ElInput = withInstall(Input);
|
|
const GAP = 4;
|
|
const BAR_MAP = {
|
|
vertical: {
|
|
offset: "offsetHeight",
|
|
scroll: "scrollTop",
|
|
scrollSize: "scrollHeight",
|
|
size: "height",
|
|
key: "vertical",
|
|
axis: "Y",
|
|
client: "clientY",
|
|
direction: "top"
|
|
},
|
|
horizontal: {
|
|
offset: "offsetWidth",
|
|
scroll: "scrollLeft",
|
|
scrollSize: "scrollWidth",
|
|
size: "width",
|
|
key: "horizontal",
|
|
axis: "X",
|
|
client: "clientX",
|
|
direction: "left"
|
|
}
|
|
};
|
|
const renderThumbStyle = ({
|
|
move,
|
|
size,
|
|
bar
|
|
}) => ({
|
|
[bar.size]: size,
|
|
transform: `translate${bar.axis}(${move}%)`
|
|
});
|
|
const scrollbarContextKey = Symbol("scrollbarContextKey");
|
|
const thumbProps = buildProps({
|
|
vertical: Boolean,
|
|
size: String,
|
|
move: Number,
|
|
ratio: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
always: Boolean
|
|
});
|
|
const COMPONENT_NAME$2 = "Thumb";
|
|
const _sfc_main$f = /* @__PURE__ */ defineComponent({
|
|
__name: "thumb",
|
|
props: thumbProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const scrollbar = inject(scrollbarContextKey);
|
|
const ns = useNamespace("scrollbar");
|
|
if (!scrollbar)
|
|
throwError(COMPONENT_NAME$2, "can not inject scrollbar context");
|
|
const instance = ref();
|
|
const thumb = ref();
|
|
const thumbState = ref({});
|
|
const visible = ref(false);
|
|
let cursorDown = false;
|
|
let cursorLeave = false;
|
|
let originalOnSelectStart = isClient ? document.onselectstart : null;
|
|
const bar = computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
|
|
const thumbStyle = computed(() => renderThumbStyle({
|
|
size: props.size,
|
|
move: props.move,
|
|
bar: bar.value
|
|
}));
|
|
const offsetRatio = computed(() => instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]);
|
|
const clickThumbHandler = (e) => {
|
|
var _a;
|
|
e.stopPropagation();
|
|
if (e.ctrlKey || [1, 2].includes(e.button))
|
|
return;
|
|
(_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
|
|
startDrag(e);
|
|
const el = e.currentTarget;
|
|
if (!el)
|
|
return;
|
|
thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
|
|
};
|
|
const clickTrackHandler = (e) => {
|
|
if (!thumb.value || !instance.value || !scrollbar.wrapElement)
|
|
return;
|
|
const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
|
|
const thumbHalf = thumb.value[bar.value.offset] / 2;
|
|
const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
|
|
scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
|
|
};
|
|
const startDrag = (e) => {
|
|
e.stopImmediatePropagation();
|
|
cursorDown = true;
|
|
document.addEventListener("mousemove", mouseMoveDocumentHandler);
|
|
document.addEventListener("mouseup", mouseUpDocumentHandler);
|
|
originalOnSelectStart = document.onselectstart;
|
|
document.onselectstart = () => false;
|
|
};
|
|
const mouseMoveDocumentHandler = (e) => {
|
|
if (!instance.value || !thumb.value)
|
|
return;
|
|
if (cursorDown === false)
|
|
return;
|
|
const prevPage = thumbState.value[bar.value.axis];
|
|
if (!prevPage)
|
|
return;
|
|
const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
|
|
const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
|
|
const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
|
|
scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
|
|
};
|
|
const mouseUpDocumentHandler = () => {
|
|
cursorDown = false;
|
|
thumbState.value[bar.value.axis] = 0;
|
|
document.removeEventListener("mousemove", mouseMoveDocumentHandler);
|
|
document.removeEventListener("mouseup", mouseUpDocumentHandler);
|
|
restoreOnselectstart();
|
|
if (cursorLeave)
|
|
visible.value = false;
|
|
};
|
|
const mouseMoveScrollbarHandler = () => {
|
|
cursorLeave = false;
|
|
visible.value = !!props.size;
|
|
};
|
|
const mouseLeaveScrollbarHandler = () => {
|
|
cursorLeave = true;
|
|
visible.value = cursorDown;
|
|
};
|
|
const restoreOnselectstart = () => {
|
|
if (document.onselectstart !== originalOnSelectStart)
|
|
document.onselectstart = originalOnSelectStart;
|
|
};
|
|
useEventListener(toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
|
|
useEventListener(toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(Transition, {
|
|
name: unref(ns).b("fade"),
|
|
persisted: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
withDirectives(createElementVNode("div", {
|
|
ref_key: "instance",
|
|
ref: instance,
|
|
class: normalizeClass([unref(ns).e("bar"), unref(ns).is(unref(bar).key)]),
|
|
onMousedown: clickTrackHandler
|
|
}, [
|
|
createElementVNode("div", {
|
|
ref_key: "thumb",
|
|
ref: thumb,
|
|
class: normalizeClass(unref(ns).e("thumb")),
|
|
style: normalizeStyle(unref(thumbStyle)),
|
|
onMousedown: clickThumbHandler
|
|
}, null, 38)
|
|
], 34), [
|
|
[vShow, _ctx.always || visible.value]
|
|
])
|
|
]),
|
|
_: 1
|
|
}, 8, ["name"]);
|
|
};
|
|
}
|
|
});
|
|
var Thumb = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/scrollbar/src/thumb.vue"]]);
|
|
const barProps = buildProps({
|
|
always: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
width: String,
|
|
height: String,
|
|
ratioX: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
ratioY: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
});
|
|
const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|
__name: "bar",
|
|
props: barProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const moveX = ref(0);
|
|
const moveY = ref(0);
|
|
const handleScroll = (wrap) => {
|
|
if (wrap) {
|
|
const offsetHeight = wrap.offsetHeight - GAP;
|
|
const offsetWidth = wrap.offsetWidth - GAP;
|
|
moveY.value = wrap.scrollTop * 100 / offsetHeight * props.ratioY;
|
|
moveX.value = wrap.scrollLeft * 100 / offsetWidth * props.ratioX;
|
|
}
|
|
};
|
|
expose({
|
|
handleScroll
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock(Fragment, null, [
|
|
createVNode(Thumb, {
|
|
move: moveX.value,
|
|
ratio: _ctx.ratioX,
|
|
size: _ctx.width,
|
|
always: _ctx.always
|
|
}, null, 8, ["move", "ratio", "size", "always"]),
|
|
createVNode(Thumb, {
|
|
move: moveY.value,
|
|
ratio: _ctx.ratioY,
|
|
size: _ctx.height,
|
|
vertical: "",
|
|
always: _ctx.always
|
|
}, null, 8, ["move", "ratio", "size", "always"])
|
|
], 64);
|
|
};
|
|
}
|
|
});
|
|
var Bar = /* @__PURE__ */ _export_sfc$1(_sfc_main$e, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/scrollbar/src/bar.vue"]]);
|
|
const scrollbarProps = buildProps({
|
|
height: {
|
|
type: [String, Number],
|
|
default: ""
|
|
},
|
|
maxHeight: {
|
|
type: [String, Number],
|
|
default: ""
|
|
},
|
|
native: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
wrapStyle: {
|
|
type: definePropType([String, Object, Array]),
|
|
default: ""
|
|
},
|
|
wrapClass: {
|
|
type: [String, Array],
|
|
default: ""
|
|
},
|
|
viewClass: {
|
|
type: [String, Array],
|
|
default: ""
|
|
},
|
|
viewStyle: {
|
|
type: [String, Array, Object],
|
|
default: ""
|
|
},
|
|
noresize: Boolean,
|
|
tag: {
|
|
type: String,
|
|
default: "div"
|
|
},
|
|
always: Boolean,
|
|
minSize: {
|
|
type: Number,
|
|
default: 20
|
|
},
|
|
id: String,
|
|
role: String,
|
|
ariaLabel: String,
|
|
ariaOrientation: {
|
|
type: String,
|
|
values: ["horizontal", "vertical"]
|
|
}
|
|
});
|
|
const scrollbarEmits = {
|
|
scroll: ({
|
|
scrollTop,
|
|
scrollLeft
|
|
}) => [scrollTop, scrollLeft].every(isNumber)
|
|
};
|
|
const COMPONENT_NAME$1 = "ElScrollbar";
|
|
const __default__$5 = defineComponent({
|
|
name: COMPONENT_NAME$1
|
|
});
|
|
const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
...__default__$5,
|
|
props: scrollbarProps,
|
|
emits: scrollbarEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("scrollbar");
|
|
let stopResizeObserver = void 0;
|
|
let stopResizeListener = void 0;
|
|
const scrollbarRef = ref();
|
|
const wrapRef = ref();
|
|
const resizeRef = ref();
|
|
const sizeWidth = ref("0");
|
|
const sizeHeight = ref("0");
|
|
const barRef = ref();
|
|
const ratioY = ref(1);
|
|
const ratioX = ref(1);
|
|
const wrapStyle = computed(() => {
|
|
const style = {};
|
|
if (props.height)
|
|
style.height = addUnit(props.height);
|
|
if (props.maxHeight)
|
|
style.maxHeight = addUnit(props.maxHeight);
|
|
return [props.wrapStyle, style];
|
|
});
|
|
const wrapKls = computed(() => {
|
|
return [
|
|
props.wrapClass,
|
|
ns.e("wrap"),
|
|
{ [ns.em("wrap", "hidden-default")]: !props.native }
|
|
];
|
|
});
|
|
const resizeKls = computed(() => {
|
|
return [ns.e("view"), props.viewClass];
|
|
});
|
|
const handleScroll = () => {
|
|
var _a;
|
|
if (wrapRef.value) {
|
|
(_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
|
|
emit("scroll", {
|
|
scrollTop: wrapRef.value.scrollTop,
|
|
scrollLeft: wrapRef.value.scrollLeft
|
|
});
|
|
}
|
|
};
|
|
function scrollTo(arg1, arg2) {
|
|
if (isObject(arg1)) {
|
|
wrapRef.value.scrollTo(arg1);
|
|
} else if (isNumber(arg1) && isNumber(arg2)) {
|
|
wrapRef.value.scrollTo(arg1, arg2);
|
|
}
|
|
}
|
|
const setScrollTop = (value) => {
|
|
if (!isNumber(value)) {
|
|
return;
|
|
}
|
|
wrapRef.value.scrollTop = value;
|
|
};
|
|
const setScrollLeft = (value) => {
|
|
if (!isNumber(value)) {
|
|
return;
|
|
}
|
|
wrapRef.value.scrollLeft = value;
|
|
};
|
|
const update = () => {
|
|
if (!wrapRef.value)
|
|
return;
|
|
const offsetHeight = wrapRef.value.offsetHeight - GAP;
|
|
const offsetWidth = wrapRef.value.offsetWidth - GAP;
|
|
const originalHeight = offsetHeight ** 2 / wrapRef.value.scrollHeight;
|
|
const originalWidth = offsetWidth ** 2 / wrapRef.value.scrollWidth;
|
|
const height = Math.max(originalHeight, props.minSize);
|
|
const width = Math.max(originalWidth, props.minSize);
|
|
ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
|
|
ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
|
|
sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : "";
|
|
sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : "";
|
|
};
|
|
watch(() => props.noresize, (noresize) => {
|
|
if (noresize) {
|
|
stopResizeObserver == null ? void 0 : stopResizeObserver();
|
|
stopResizeListener == null ? void 0 : stopResizeListener();
|
|
} else {
|
|
({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update));
|
|
stopResizeListener = useEventListener("resize", update);
|
|
}
|
|
}, { immediate: true });
|
|
watch(() => [props.maxHeight, props.height], () => {
|
|
if (!props.native)
|
|
nextTick(() => {
|
|
var _a;
|
|
update();
|
|
if (wrapRef.value) {
|
|
(_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
|
|
}
|
|
});
|
|
});
|
|
provide(scrollbarContextKey, reactive({
|
|
scrollbarElement: scrollbarRef,
|
|
wrapElement: wrapRef
|
|
}));
|
|
onUpdated(() => update());
|
|
expose({
|
|
wrapRef,
|
|
update,
|
|
scrollTo,
|
|
setScrollTop,
|
|
setScrollLeft,
|
|
handleScroll
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "scrollbarRef",
|
|
ref: scrollbarRef,
|
|
class: normalizeClass(unref(ns).b())
|
|
}, [
|
|
createElementVNode("div", {
|
|
ref_key: "wrapRef",
|
|
ref: wrapRef,
|
|
class: normalizeClass(unref(wrapKls)),
|
|
style: normalizeStyle(unref(wrapStyle)),
|
|
onScroll: handleScroll
|
|
}, [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
|
|
id: _ctx.id,
|
|
ref_key: "resizeRef",
|
|
ref: resizeRef,
|
|
class: normalizeClass(unref(resizeKls)),
|
|
style: normalizeStyle(_ctx.viewStyle),
|
|
role: _ctx.role,
|
|
"aria-label": _ctx.ariaLabel,
|
|
"aria-orientation": _ctx.ariaOrientation
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 8, ["id", "class", "style", "role", "aria-label", "aria-orientation"]))
|
|
], 38),
|
|
!_ctx.native ? (openBlock(), createBlock(Bar, {
|
|
key: 0,
|
|
ref_key: "barRef",
|
|
ref: barRef,
|
|
height: sizeHeight.value,
|
|
width: sizeWidth.value,
|
|
always: _ctx.always,
|
|
"ratio-x": ratioX.value,
|
|
"ratio-y": ratioY.value
|
|
}, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Scrollbar = /* @__PURE__ */ _export_sfc$1(_sfc_main$d, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/scrollbar/src/scrollbar.vue"]]);
|
|
const ElScrollbar = withInstall(Scrollbar);
|
|
const autocompleteProps = buildProps({
|
|
valueKey: {
|
|
type: String,
|
|
default: "value"
|
|
},
|
|
modelValue: {
|
|
type: [String, Number],
|
|
default: ""
|
|
},
|
|
debounce: {
|
|
type: Number,
|
|
default: 300
|
|
},
|
|
placement: {
|
|
type: definePropType(String),
|
|
values: [
|
|
"top",
|
|
"top-start",
|
|
"top-end",
|
|
"bottom",
|
|
"bottom-start",
|
|
"bottom-end"
|
|
],
|
|
default: "bottom-start"
|
|
},
|
|
fetchSuggestions: {
|
|
type: definePropType([Function, Array]),
|
|
default: NOOP
|
|
},
|
|
popperClass: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
triggerOnFocus: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
selectWhenUnmatched: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hideLoading: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
label: {
|
|
type: String
|
|
},
|
|
teleported: useTooltipContentProps.teleported,
|
|
highlightFirstItem: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
fitInputWidth: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
clearable: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
name: String
|
|
});
|
|
const autocompleteEmits = {
|
|
[UPDATE_MODEL_EVENT]: (value) => isString(value),
|
|
[INPUT_EVENT]: (value) => isString(value),
|
|
[CHANGE_EVENT]: (value) => isString(value),
|
|
focus: (evt) => evt instanceof FocusEvent,
|
|
blur: (evt) => evt instanceof FocusEvent,
|
|
clear: () => true,
|
|
select: (item) => isObject(item)
|
|
};
|
|
const _hoisted_1$8 = ["aria-expanded", "aria-owns"];
|
|
const _hoisted_2$8 = { key: 0 };
|
|
const _hoisted_3$6 = ["id", "aria-selected", "onClick"];
|
|
const COMPONENT_NAME = "ElAutocomplete";
|
|
const __default__$4 = defineComponent({
|
|
name: COMPONENT_NAME,
|
|
inheritAttrs: false
|
|
});
|
|
const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
...__default__$4,
|
|
props: autocompleteProps,
|
|
emits: autocompleteEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const attrs = useAttrs();
|
|
const rawAttrs = useAttrs$1();
|
|
const disabled = useFormDisabled();
|
|
const ns = useNamespace("autocomplete");
|
|
const inputRef = ref();
|
|
const regionRef = ref();
|
|
const popperRef = ref();
|
|
const listboxRef = ref();
|
|
let readonly = false;
|
|
let ignoreFocusEvent = false;
|
|
const suggestions = ref([]);
|
|
const highlightedIndex = ref(-1);
|
|
const dropdownWidth = ref("");
|
|
const activated = ref(false);
|
|
const suggestionDisabled = ref(false);
|
|
const loading = ref(false);
|
|
const listboxId = computed(() => ns.b(String(generateId())));
|
|
const styles = computed(() => rawAttrs.style);
|
|
const suggestionVisible = computed(() => {
|
|
const isValidData = suggestions.value.length > 0;
|
|
return (isValidData || loading.value) && activated.value;
|
|
});
|
|
const suggestionLoading = computed(() => !props.hideLoading && loading.value);
|
|
const refInput = computed(() => {
|
|
if (inputRef.value) {
|
|
return Array.from(inputRef.value.$el.querySelectorAll("input"));
|
|
}
|
|
return [];
|
|
});
|
|
const onSuggestionShow = () => {
|
|
if (suggestionVisible.value) {
|
|
dropdownWidth.value = `${inputRef.value.$el.offsetWidth}px`;
|
|
}
|
|
};
|
|
const onHide = () => {
|
|
highlightedIndex.value = -1;
|
|
};
|
|
const getData = async (queryString) => {
|
|
if (suggestionDisabled.value)
|
|
return;
|
|
const cb = (suggestionList) => {
|
|
loading.value = false;
|
|
if (suggestionDisabled.value)
|
|
return;
|
|
if (isArray(suggestionList)) {
|
|
suggestions.value = suggestionList;
|
|
highlightedIndex.value = props.highlightFirstItem ? 0 : -1;
|
|
} else {
|
|
throwError(COMPONENT_NAME, "autocomplete suggestions must be an array");
|
|
}
|
|
};
|
|
loading.value = true;
|
|
if (isArray(props.fetchSuggestions)) {
|
|
cb(props.fetchSuggestions);
|
|
} else {
|
|
const result = await props.fetchSuggestions(queryString, cb);
|
|
if (isArray(result))
|
|
cb(result);
|
|
}
|
|
};
|
|
const debouncedGetData = debounce(getData, props.debounce);
|
|
const handleInput = (value) => {
|
|
const valuePresented = !!value;
|
|
emit(INPUT_EVENT, value);
|
|
emit(UPDATE_MODEL_EVENT, value);
|
|
suggestionDisabled.value = false;
|
|
activated.value || (activated.value = valuePresented);
|
|
if (!props.triggerOnFocus && !value) {
|
|
suggestionDisabled.value = true;
|
|
suggestions.value = [];
|
|
return;
|
|
}
|
|
debouncedGetData(value);
|
|
};
|
|
const handleMouseDown = (event) => {
|
|
var _a;
|
|
if (disabled.value)
|
|
return;
|
|
if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT" || refInput.value.includes(document.activeElement)) {
|
|
activated.value = true;
|
|
}
|
|
};
|
|
const handleChange = (value) => {
|
|
emit(CHANGE_EVENT, value);
|
|
};
|
|
const handleFocus = (evt) => {
|
|
if (!ignoreFocusEvent) {
|
|
activated.value = true;
|
|
emit("focus", evt);
|
|
if (props.triggerOnFocus && !readonly) {
|
|
debouncedGetData(String(props.modelValue));
|
|
}
|
|
} else {
|
|
ignoreFocusEvent = false;
|
|
}
|
|
};
|
|
const handleBlur = (evt) => {
|
|
setTimeout(() => {
|
|
var _a;
|
|
if ((_a = popperRef.value) == null ? void 0 : _a.isFocusInsideContent()) {
|
|
ignoreFocusEvent = true;
|
|
return;
|
|
}
|
|
activated.value && close();
|
|
emit("blur", evt);
|
|
});
|
|
};
|
|
const handleClear = () => {
|
|
activated.value = false;
|
|
emit(UPDATE_MODEL_EVENT, "");
|
|
emit("clear");
|
|
};
|
|
const handleKeyEnter = async () => {
|
|
if (suggestionVisible.value && highlightedIndex.value >= 0 && highlightedIndex.value < suggestions.value.length) {
|
|
handleSelect(suggestions.value[highlightedIndex.value]);
|
|
} else if (props.selectWhenUnmatched) {
|
|
emit("select", { value: props.modelValue });
|
|
suggestions.value = [];
|
|
highlightedIndex.value = -1;
|
|
}
|
|
};
|
|
const handleKeyEscape = (evt) => {
|
|
if (suggestionVisible.value) {
|
|
evt.preventDefault();
|
|
evt.stopPropagation();
|
|
close();
|
|
}
|
|
};
|
|
const close = () => {
|
|
activated.value = false;
|
|
};
|
|
const focus = () => {
|
|
var _a;
|
|
(_a = inputRef.value) == null ? void 0 : _a.focus();
|
|
};
|
|
const blur = () => {
|
|
var _a;
|
|
(_a = inputRef.value) == null ? void 0 : _a.blur();
|
|
};
|
|
const handleSelect = async (item) => {
|
|
emit(INPUT_EVENT, item[props.valueKey]);
|
|
emit(UPDATE_MODEL_EVENT, item[props.valueKey]);
|
|
emit("select", item);
|
|
suggestions.value = [];
|
|
highlightedIndex.value = -1;
|
|
};
|
|
const highlight = (index2) => {
|
|
if (!suggestionVisible.value || loading.value)
|
|
return;
|
|
if (index2 < 0) {
|
|
highlightedIndex.value = -1;
|
|
return;
|
|
}
|
|
if (index2 >= suggestions.value.length) {
|
|
index2 = suggestions.value.length - 1;
|
|
}
|
|
const suggestion = regionRef.value.querySelector(`.${ns.be("suggestion", "wrap")}`);
|
|
const suggestionList = suggestion.querySelectorAll(`.${ns.be("suggestion", "list")} li`);
|
|
const highlightItem = suggestionList[index2];
|
|
const scrollTop = suggestion.scrollTop;
|
|
const { offsetTop, scrollHeight } = highlightItem;
|
|
if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {
|
|
suggestion.scrollTop += scrollHeight;
|
|
}
|
|
if (offsetTop < scrollTop) {
|
|
suggestion.scrollTop -= scrollHeight;
|
|
}
|
|
highlightedIndex.value = index2;
|
|
inputRef.value.ref.setAttribute("aria-activedescendant", `${listboxId.value}-item-${highlightedIndex.value}`);
|
|
};
|
|
onClickOutside(listboxRef, () => {
|
|
suggestionVisible.value && close();
|
|
});
|
|
expose({
|
|
highlightedIndex,
|
|
activated,
|
|
loading,
|
|
inputRef,
|
|
popperRef,
|
|
suggestions,
|
|
handleSelect,
|
|
handleKeyEnter,
|
|
focus,
|
|
blur,
|
|
close,
|
|
highlight
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(unref(ElTooltip), {
|
|
ref_key: "popperRef",
|
|
ref: popperRef,
|
|
visible: unref(suggestionVisible),
|
|
placement: _ctx.placement,
|
|
"fallback-placements": ["bottom-start", "top-start"],
|
|
"popper-class": [unref(ns).e("popper"), _ctx.popperClass],
|
|
teleported: _ctx.teleported,
|
|
"gpu-acceleration": false,
|
|
pure: "",
|
|
"manual-mode": "",
|
|
effect: "light",
|
|
trigger: "click",
|
|
transition: `${unref(ns).namespace.value}-zoom-in-top`,
|
|
persistent: "",
|
|
role: "listbox",
|
|
onBeforeShow: onSuggestionShow,
|
|
onHide
|
|
}, {
|
|
content: withCtx(() => [
|
|
createElementVNode("div", {
|
|
ref_key: "regionRef",
|
|
ref: regionRef,
|
|
class: normalizeClass([unref(ns).b("suggestion"), unref(ns).is("loading", unref(suggestionLoading))]),
|
|
style: normalizeStyle({
|
|
[_ctx.fitInputWidth ? "width" : "minWidth"]: dropdownWidth.value,
|
|
outline: "none"
|
|
}),
|
|
role: "region"
|
|
}, [
|
|
createVNode(unref(ElScrollbar), {
|
|
id: unref(listboxId),
|
|
tag: "ul",
|
|
"wrap-class": unref(ns).be("suggestion", "wrap"),
|
|
"view-class": unref(ns).be("suggestion", "list"),
|
|
role: "listbox"
|
|
}, {
|
|
default: withCtx(() => [
|
|
unref(suggestionLoading) ? (openBlock(), createElementBlock("li", _hoisted_2$8, [
|
|
createVNode(unref(ElIcon), {
|
|
class: normalizeClass(unref(ns).is("loading"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(loading_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])
|
|
])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(suggestions.value, (item, index2) => {
|
|
return openBlock(), createElementBlock("li", {
|
|
id: `${unref(listboxId)}-item-${index2}`,
|
|
key: index2,
|
|
class: normalizeClass({ highlighted: highlightedIndex.value === index2 }),
|
|
role: "option",
|
|
"aria-selected": highlightedIndex.value === index2,
|
|
onClick: ($event) => handleSelect(item)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", { item }, () => [
|
|
createTextVNode(toDisplayString(item[_ctx.valueKey]), 1)
|
|
])
|
|
], 10, _hoisted_3$6);
|
|
}), 128))
|
|
]),
|
|
_: 3
|
|
}, 8, ["id", "wrap-class", "view-class"])
|
|
], 6)
|
|
]),
|
|
default: withCtx(() => [
|
|
createElementVNode("div", {
|
|
ref_key: "listboxRef",
|
|
ref: listboxRef,
|
|
class: normalizeClass([unref(ns).b(), _ctx.$attrs.class]),
|
|
style: normalizeStyle(unref(styles)),
|
|
role: "combobox",
|
|
"aria-haspopup": "listbox",
|
|
"aria-expanded": unref(suggestionVisible),
|
|
"aria-owns": unref(listboxId)
|
|
}, [
|
|
createVNode(unref(ElInput), mergeProps({
|
|
ref_key: "inputRef",
|
|
ref: inputRef
|
|
}, unref(attrs), {
|
|
clearable: _ctx.clearable,
|
|
disabled: unref(disabled),
|
|
name: _ctx.name,
|
|
"model-value": _ctx.modelValue,
|
|
onInput: handleInput,
|
|
onChange: handleChange,
|
|
onFocus: handleFocus,
|
|
onBlur: handleBlur,
|
|
onClear: handleClear,
|
|
onKeydown: [
|
|
_cache[0] || (_cache[0] = withKeys(withModifiers(($event) => highlight(highlightedIndex.value - 1), ["prevent"]), ["up"])),
|
|
_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => highlight(highlightedIndex.value + 1), ["prevent"]), ["down"])),
|
|
withKeys(handleKeyEnter, ["enter"]),
|
|
withKeys(close, ["tab"]),
|
|
withKeys(handleKeyEscape, ["esc"])
|
|
],
|
|
onMousedown: handleMouseDown
|
|
}), createSlots({ _: 2 }, [
|
|
_ctx.$slots.prepend ? {
|
|
name: "prepend",
|
|
fn: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "prepend")
|
|
])
|
|
} : void 0,
|
|
_ctx.$slots.append ? {
|
|
name: "append",
|
|
fn: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "append")
|
|
])
|
|
} : void 0,
|
|
_ctx.$slots.prefix ? {
|
|
name: "prefix",
|
|
fn: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "prefix")
|
|
])
|
|
} : void 0,
|
|
_ctx.$slots.suffix ? {
|
|
name: "suffix",
|
|
fn: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "suffix")
|
|
])
|
|
} : void 0
|
|
]), 1040, ["clearable", "disabled", "name", "model-value", "onKeydown"])
|
|
], 14, _hoisted_1$8)
|
|
]),
|
|
_: 3
|
|
}, 8, ["visible", "placement", "popper-class", "teleported", "transition"]);
|
|
};
|
|
}
|
|
});
|
|
var Autocomplete = /* @__PURE__ */ _export_sfc$1(_sfc_main$c, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/autocomplete/src/autocomplete.vue"]]);
|
|
const ElAutocomplete = withInstall(Autocomplete);
|
|
const buttonGroupContextKey = Symbol("buttonGroupContextKey");
|
|
const useButton = (props, emit) => {
|
|
useDeprecated({
|
|
from: "type.text",
|
|
replacement: "link",
|
|
version: "3.0.0",
|
|
scope: "props",
|
|
ref: "https://element-plus.org/en-US/component/button.html#button-attributes"
|
|
}, computed(() => props.type === "text"));
|
|
const buttonGroupContext = inject(buttonGroupContextKey, void 0);
|
|
const globalConfig = useGlobalConfig("button");
|
|
const { form } = useFormItem();
|
|
const _size = useFormSize(computed(() => buttonGroupContext == null ? void 0 : buttonGroupContext.size));
|
|
const _disabled = useFormDisabled();
|
|
const _ref = ref();
|
|
const slots = useSlots();
|
|
const _type = computed(() => props.type || (buttonGroupContext == null ? void 0 : buttonGroupContext.type) || "");
|
|
const autoInsertSpace = computed(() => {
|
|
var _a, _b, _c;
|
|
return (_c = (_b = props.autoInsertSpace) != null ? _b : (_a = globalConfig.value) == null ? void 0 : _a.autoInsertSpace) != null ? _c : false;
|
|
});
|
|
const _props = computed(() => {
|
|
if (props.tag === "button") {
|
|
return {
|
|
ariaDisabled: _disabled.value || props.loading,
|
|
disabled: _disabled.value || props.loading,
|
|
autofocus: props.autofocus,
|
|
type: props.nativeType
|
|
};
|
|
}
|
|
return {};
|
|
});
|
|
const shouldAddSpace = computed(() => {
|
|
var _a;
|
|
const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots);
|
|
if (autoInsertSpace.value && (defaultSlot == null ? void 0 : defaultSlot.length) === 1) {
|
|
const slot = defaultSlot[0];
|
|
if ((slot == null ? void 0 : slot.type) === Text) {
|
|
const text = slot.children;
|
|
return /^\p{Unified_Ideograph}{2}$/u.test(text.trim());
|
|
}
|
|
}
|
|
return false;
|
|
});
|
|
const handleClick = (evt) => {
|
|
if (props.nativeType === "reset") {
|
|
form == null ? void 0 : form.resetFields();
|
|
}
|
|
emit("click", evt);
|
|
};
|
|
return {
|
|
_disabled,
|
|
_size,
|
|
_type,
|
|
_ref,
|
|
_props,
|
|
shouldAddSpace,
|
|
handleClick
|
|
};
|
|
};
|
|
const buttonTypes = [
|
|
"default",
|
|
"primary",
|
|
"success",
|
|
"warning",
|
|
"info",
|
|
"danger",
|
|
"text",
|
|
""
|
|
];
|
|
const buttonNativeTypes = ["button", "submit", "reset"];
|
|
const buttonProps = buildProps({
|
|
size: useSizeProp,
|
|
disabled: Boolean,
|
|
type: {
|
|
type: String,
|
|
values: buttonTypes,
|
|
default: ""
|
|
},
|
|
icon: {
|
|
type: iconPropType
|
|
},
|
|
nativeType: {
|
|
type: String,
|
|
values: buttonNativeTypes,
|
|
default: "button"
|
|
},
|
|
loading: Boolean,
|
|
loadingIcon: {
|
|
type: iconPropType,
|
|
default: () => loading_default
|
|
},
|
|
plain: Boolean,
|
|
text: Boolean,
|
|
link: Boolean,
|
|
bg: Boolean,
|
|
autofocus: Boolean,
|
|
round: Boolean,
|
|
circle: Boolean,
|
|
color: String,
|
|
dark: Boolean,
|
|
autoInsertSpace: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
tag: {
|
|
type: definePropType([String, Object]),
|
|
default: "button"
|
|
}
|
|
});
|
|
const buttonEmits = {
|
|
click: (evt) => evt instanceof MouseEvent
|
|
};
|
|
function darken(color, amount = 20) {
|
|
return color.mix("#141414", amount).toString();
|
|
}
|
|
function useButtonCustomStyle(props) {
|
|
const _disabled = useFormDisabled();
|
|
const ns = useNamespace("button");
|
|
return computed(() => {
|
|
let styles = {};
|
|
const buttonColor = props.color;
|
|
if (buttonColor) {
|
|
const color = new TinyColor(buttonColor);
|
|
const activeBgColor = props.dark ? color.tint(20).toString() : darken(color, 20);
|
|
if (props.plain) {
|
|
styles = ns.cssVarBlock({
|
|
"bg-color": props.dark ? darken(color, 90) : color.tint(90).toString(),
|
|
"text-color": buttonColor,
|
|
"border-color": props.dark ? darken(color, 50) : color.tint(50).toString(),
|
|
"hover-text-color": `var(${ns.cssVarName("color-white")})`,
|
|
"hover-bg-color": buttonColor,
|
|
"hover-border-color": buttonColor,
|
|
"active-bg-color": activeBgColor,
|
|
"active-text-color": `var(${ns.cssVarName("color-white")})`,
|
|
"active-border-color": activeBgColor
|
|
});
|
|
if (_disabled.value) {
|
|
styles[ns.cssVarBlockName("disabled-bg-color")] = props.dark ? darken(color, 90) : color.tint(90).toString();
|
|
styles[ns.cssVarBlockName("disabled-text-color")] = props.dark ? darken(color, 50) : color.tint(50).toString();
|
|
styles[ns.cssVarBlockName("disabled-border-color")] = props.dark ? darken(color, 80) : color.tint(80).toString();
|
|
}
|
|
} else {
|
|
const hoverBgColor = props.dark ? darken(color, 30) : color.tint(30).toString();
|
|
const textColor = color.isDark() ? `var(${ns.cssVarName("color-white")})` : `var(${ns.cssVarName("color-black")})`;
|
|
styles = ns.cssVarBlock({
|
|
"bg-color": buttonColor,
|
|
"text-color": textColor,
|
|
"border-color": buttonColor,
|
|
"hover-bg-color": hoverBgColor,
|
|
"hover-text-color": textColor,
|
|
"hover-border-color": hoverBgColor,
|
|
"active-bg-color": activeBgColor,
|
|
"active-border-color": activeBgColor
|
|
});
|
|
if (_disabled.value) {
|
|
const disabledButtonColor = props.dark ? darken(color, 50) : color.tint(50).toString();
|
|
styles[ns.cssVarBlockName("disabled-bg-color")] = disabledButtonColor;
|
|
styles[ns.cssVarBlockName("disabled-text-color")] = props.dark ? "rgba(255, 255, 255, 0.5)" : `var(${ns.cssVarName("color-white")})`;
|
|
styles[ns.cssVarBlockName("disabled-border-color")] = disabledButtonColor;
|
|
}
|
|
}
|
|
}
|
|
return styles;
|
|
});
|
|
}
|
|
const __default__$3 = defineComponent({
|
|
name: "ElButton"
|
|
});
|
|
const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
...__default__$3,
|
|
props: buttonProps,
|
|
emits: buttonEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const buttonStyle = useButtonCustomStyle(props);
|
|
const ns = useNamespace("button");
|
|
const { _ref, _size, _type, _disabled, _props, shouldAddSpace, handleClick } = useButton(props, emit);
|
|
expose({
|
|
ref: _ref,
|
|
size: _size,
|
|
type: _type,
|
|
disabled: _disabled,
|
|
shouldAddSpace
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), mergeProps({
|
|
ref_key: "_ref",
|
|
ref: _ref
|
|
}, unref(_props), {
|
|
class: [
|
|
unref(ns).b(),
|
|
unref(ns).m(unref(_type)),
|
|
unref(ns).m(unref(_size)),
|
|
unref(ns).is("disabled", unref(_disabled)),
|
|
unref(ns).is("loading", _ctx.loading),
|
|
unref(ns).is("plain", _ctx.plain),
|
|
unref(ns).is("round", _ctx.round),
|
|
unref(ns).is("circle", _ctx.circle),
|
|
unref(ns).is("text", _ctx.text),
|
|
unref(ns).is("link", _ctx.link),
|
|
unref(ns).is("has-bg", _ctx.bg)
|
|
],
|
|
style: unref(buttonStyle),
|
|
onClick: unref(handleClick)
|
|
}), {
|
|
default: withCtx(() => [
|
|
_ctx.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
_ctx.$slots.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }) : (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).is("loading"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.loadingIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"]))
|
|
], 64)) : _ctx.icon || _ctx.$slots.icon ? (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
|
|
default: withCtx(() => [
|
|
_ctx.icon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), { key: 0 })) : renderSlot(_ctx.$slots, "icon", { key: 1 })
|
|
]),
|
|
_: 3
|
|
})) : createCommentVNode("v-if", true),
|
|
_ctx.$slots.default ? (openBlock(), createElementBlock("span", {
|
|
key: 2,
|
|
class: normalizeClass({ [unref(ns).em("text", "expand")]: unref(shouldAddSpace) })
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 16, ["class", "style", "onClick"]);
|
|
};
|
|
}
|
|
});
|
|
var Button = /* @__PURE__ */ _export_sfc$1(_sfc_main$b, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/button/src/button.vue"]]);
|
|
const buttonGroupProps = {
|
|
size: buttonProps.size,
|
|
type: buttonProps.type
|
|
};
|
|
const __default__$2 = defineComponent({
|
|
name: "ElButtonGroup"
|
|
});
|
|
const _sfc_main$a = /* @__PURE__ */ defineComponent({
|
|
...__default__$2,
|
|
props: buttonGroupProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
provide(buttonGroupContextKey, reactive({
|
|
size: toRef(props, "size"),
|
|
type: toRef(props, "type")
|
|
}));
|
|
const ns = useNamespace("button");
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(`${unref(ns).b("group")}`)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var ButtonGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$a, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/button/src/button-group.vue"]]);
|
|
const ElButton = withInstall(Button, {
|
|
ButtonGroup
|
|
});
|
|
withNoopInstall(ButtonGroup);
|
|
const timeUnits = ["hours", "minutes", "seconds"];
|
|
const DEFAULT_FORMATS_TIME = "HH:mm:ss";
|
|
const DEFAULT_FORMATS_DATE = "YYYY-MM-DD";
|
|
const DEFAULT_FORMATS_DATEPICKER = {
|
|
date: DEFAULT_FORMATS_DATE,
|
|
dates: DEFAULT_FORMATS_DATE,
|
|
week: "gggg[w]ww",
|
|
year: "YYYY",
|
|
month: "YYYY-MM",
|
|
datetime: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`,
|
|
monthrange: "YYYY-MM",
|
|
daterange: DEFAULT_FORMATS_DATE,
|
|
datetimerange: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`
|
|
};
|
|
const buildTimeList = (value, bound) => {
|
|
return [
|
|
value > 0 ? value - 1 : void 0,
|
|
value,
|
|
value < bound ? value + 1 : void 0
|
|
];
|
|
};
|
|
const rangeArr = (n) => Array.from(Array.from({ length: n }).keys());
|
|
const extractDateFormat = (format) => {
|
|
return format.replace(/\W?m{1,2}|\W?ZZ/g, "").replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi, "").trim();
|
|
};
|
|
const extractTimeFormat = (format) => {
|
|
return format.replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?Y{2,4}/g, "").trim();
|
|
};
|
|
const dateEquals = function(a, b) {
|
|
const aIsDate = isDate(a);
|
|
const bIsDate = isDate(b);
|
|
if (aIsDate && bIsDate) {
|
|
return a.getTime() === b.getTime();
|
|
}
|
|
if (!aIsDate && !bIsDate) {
|
|
return a === b;
|
|
}
|
|
return false;
|
|
};
|
|
const valueEquals = function(a, b) {
|
|
const aIsArray = isArray(a);
|
|
const bIsArray = isArray(b);
|
|
if (aIsArray && bIsArray) {
|
|
if (a.length !== b.length) {
|
|
return false;
|
|
}
|
|
return a.every((item, index2) => dateEquals(item, b[index2]));
|
|
}
|
|
if (!aIsArray && !bIsArray) {
|
|
return dateEquals(a, b);
|
|
}
|
|
return false;
|
|
};
|
|
const parseDate = function(date2, format, lang) {
|
|
const day = isEmpty(format) || format === "x" ? dayjs(date2).locale(lang) : dayjs(date2, format).locale(lang);
|
|
return day.isValid() ? day : void 0;
|
|
};
|
|
const formatter = function(date2, format, lang) {
|
|
if (isEmpty(format))
|
|
return date2;
|
|
if (format === "x")
|
|
return +date2;
|
|
return dayjs(date2).locale(lang).format(format);
|
|
};
|
|
const makeList = (total, method) => {
|
|
var _a;
|
|
const arr = [];
|
|
const disabledArr = method == null ? void 0 : method();
|
|
for (let i = 0; i < total; i++) {
|
|
arr.push((_a = disabledArr == null ? void 0 : disabledArr.includes(i)) != null ? _a : false);
|
|
}
|
|
return arr;
|
|
};
|
|
const disabledTimeListsProps = buildProps({
|
|
disabledHours: {
|
|
type: definePropType(Function)
|
|
},
|
|
disabledMinutes: {
|
|
type: definePropType(Function)
|
|
},
|
|
disabledSeconds: {
|
|
type: definePropType(Function)
|
|
}
|
|
});
|
|
const timePanelSharedProps = buildProps({
|
|
visible: Boolean,
|
|
actualVisible: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
format: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
});
|
|
const timePickerDefaultProps = buildProps({
|
|
id: {
|
|
type: definePropType([Array, String])
|
|
},
|
|
name: {
|
|
type: definePropType([Array, String]),
|
|
default: ""
|
|
},
|
|
popperClass: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
format: String,
|
|
valueFormat: String,
|
|
dateFormat: String,
|
|
timeFormat: String,
|
|
type: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
clearable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
clearIcon: {
|
|
type: definePropType([String, Object]),
|
|
default: circle_close_default
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
prefixIcon: {
|
|
type: definePropType([String, Object]),
|
|
default: ""
|
|
},
|
|
size: useSizeProp,
|
|
readonly: Boolean,
|
|
disabled: Boolean,
|
|
placeholder: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
popperOptions: {
|
|
type: definePropType(Object),
|
|
default: () => ({})
|
|
},
|
|
modelValue: {
|
|
type: definePropType([Date, Array, String, Number]),
|
|
default: ""
|
|
},
|
|
rangeSeparator: {
|
|
type: String,
|
|
default: "-"
|
|
},
|
|
startPlaceholder: String,
|
|
endPlaceholder: String,
|
|
defaultValue: {
|
|
type: definePropType([Date, Array])
|
|
},
|
|
defaultTime: {
|
|
type: definePropType([Date, Array])
|
|
},
|
|
isRange: Boolean,
|
|
...disabledTimeListsProps,
|
|
disabledDate: {
|
|
type: Function
|
|
},
|
|
cellClassName: {
|
|
type: Function
|
|
},
|
|
shortcuts: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
arrowControl: Boolean,
|
|
label: {
|
|
type: String,
|
|
default: void 0
|
|
},
|
|
tabindex: {
|
|
type: definePropType([String, Number]),
|
|
default: 0
|
|
},
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
unlinkPanels: Boolean
|
|
});
|
|
const _hoisted_1$7 = ["id", "name", "placeholder", "value", "disabled", "readonly"];
|
|
const _hoisted_2$7 = ["id", "name", "placeholder", "value", "disabled", "readonly"];
|
|
const __default__$1 = defineComponent({
|
|
name: "Picker"
|
|
});
|
|
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
...__default__$1,
|
|
props: timePickerDefaultProps,
|
|
emits: [
|
|
"update:modelValue",
|
|
"change",
|
|
"focus",
|
|
"blur",
|
|
"calendar-change",
|
|
"panel-change",
|
|
"visible-change",
|
|
"keydown"
|
|
],
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const attrs = useAttrs$1();
|
|
const { lang } = useLocale();
|
|
const nsDate = useNamespace("date");
|
|
const nsInput = useNamespace("input");
|
|
const nsRange = useNamespace("range");
|
|
const { form, formItem } = useFormItem();
|
|
const elPopperOptions = inject("ElPopperOptions", {});
|
|
const refPopper = ref();
|
|
const inputRef = ref();
|
|
const pickerVisible = ref(false);
|
|
const pickerActualVisible = ref(false);
|
|
const valueOnOpen = ref(null);
|
|
let hasJustTabExitedInput = false;
|
|
let ignoreFocusEvent = false;
|
|
const rangeInputKls = computed(() => [
|
|
nsDate.b("editor"),
|
|
nsDate.bm("editor", props.type),
|
|
nsInput.e("wrapper"),
|
|
nsDate.is("disabled", pickerDisabled.value),
|
|
nsDate.is("active", pickerVisible.value),
|
|
nsRange.b("editor"),
|
|
pickerSize ? nsRange.bm("editor", pickerSize.value) : "",
|
|
attrs.class
|
|
]);
|
|
const clearIconKls = computed(() => [
|
|
nsInput.e("icon"),
|
|
nsRange.e("close-icon"),
|
|
!showClose.value ? nsRange.e("close-icon--hidden") : ""
|
|
]);
|
|
watch(pickerVisible, (val) => {
|
|
if (!val) {
|
|
userInput.value = null;
|
|
nextTick(() => {
|
|
emitChange(props.modelValue);
|
|
});
|
|
} else {
|
|
nextTick(() => {
|
|
if (val) {
|
|
valueOnOpen.value = props.modelValue;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
const emitChange = (val, isClear) => {
|
|
if (isClear || !valueEquals(val, valueOnOpen.value)) {
|
|
emit("change", val);
|
|
props.validateEvent && (formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn()));
|
|
}
|
|
};
|
|
const emitInput = (input) => {
|
|
if (!valueEquals(props.modelValue, input)) {
|
|
let formatted;
|
|
if (isArray(input)) {
|
|
formatted = input.map((item) => formatter(item, props.valueFormat, lang.value));
|
|
} else if (input) {
|
|
formatted = formatter(input, props.valueFormat, lang.value);
|
|
}
|
|
emit("update:modelValue", input ? formatted : input, lang.value);
|
|
}
|
|
};
|
|
const emitKeydown = (e) => {
|
|
emit("keydown", e);
|
|
};
|
|
const refInput = computed(() => {
|
|
if (inputRef.value) {
|
|
const _r = isRangeInput.value ? inputRef.value : inputRef.value.$el;
|
|
return Array.from(_r.querySelectorAll("input"));
|
|
}
|
|
return [];
|
|
});
|
|
const setSelectionRange = (start, end, pos) => {
|
|
const _inputs = refInput.value;
|
|
if (!_inputs.length)
|
|
return;
|
|
if (!pos || pos === "min") {
|
|
_inputs[0].setSelectionRange(start, end);
|
|
_inputs[0].focus();
|
|
} else if (pos === "max") {
|
|
_inputs[1].setSelectionRange(start, end);
|
|
_inputs[1].focus();
|
|
}
|
|
};
|
|
const focusOnInputBox = () => {
|
|
focus(true, true);
|
|
nextTick(() => {
|
|
ignoreFocusEvent = false;
|
|
});
|
|
};
|
|
const onPick = (date2 = "", visible = false) => {
|
|
if (!visible) {
|
|
ignoreFocusEvent = true;
|
|
}
|
|
pickerVisible.value = visible;
|
|
let result;
|
|
if (isArray(date2)) {
|
|
result = date2.map((_) => _.toDate());
|
|
} else {
|
|
result = date2 ? date2.toDate() : date2;
|
|
}
|
|
userInput.value = null;
|
|
emitInput(result);
|
|
};
|
|
const onBeforeShow = () => {
|
|
pickerActualVisible.value = true;
|
|
};
|
|
const onShow = () => {
|
|
emit("visible-change", true);
|
|
};
|
|
const onKeydownPopperContent = (event) => {
|
|
if ((event == null ? void 0 : event.key) === EVENT_CODE.esc) {
|
|
focus(true, true);
|
|
}
|
|
};
|
|
const onHide = () => {
|
|
pickerActualVisible.value = false;
|
|
pickerVisible.value = false;
|
|
ignoreFocusEvent = false;
|
|
emit("visible-change", false);
|
|
};
|
|
const handleOpen = () => {
|
|
pickerVisible.value = true;
|
|
};
|
|
const handleClose = () => {
|
|
pickerVisible.value = false;
|
|
};
|
|
const focus = (focusStartInput = true, isIgnoreFocusEvent = false) => {
|
|
ignoreFocusEvent = isIgnoreFocusEvent;
|
|
const [leftInput, rightInput] = unref(refInput);
|
|
let input = leftInput;
|
|
if (!focusStartInput && isRangeInput.value) {
|
|
input = rightInput;
|
|
}
|
|
if (input) {
|
|
input.focus();
|
|
}
|
|
};
|
|
const handleFocusInput = (e) => {
|
|
if (props.readonly || pickerDisabled.value || pickerVisible.value || ignoreFocusEvent) {
|
|
return;
|
|
}
|
|
pickerVisible.value = true;
|
|
emit("focus", e);
|
|
};
|
|
let currentHandleBlurDeferCallback = void 0;
|
|
const handleBlurInput = (e) => {
|
|
const handleBlurDefer = async () => {
|
|
setTimeout(() => {
|
|
var _a;
|
|
if (currentHandleBlurDeferCallback === handleBlurDefer) {
|
|
if (!(((_a = refPopper.value) == null ? void 0 : _a.isFocusInsideContent()) && !hasJustTabExitedInput) && refInput.value.filter((input) => {
|
|
return input.contains(document.activeElement);
|
|
}).length === 0) {
|
|
handleChange();
|
|
pickerVisible.value = false;
|
|
emit("blur", e);
|
|
props.validateEvent && (formItem == null ? void 0 : formItem.validate("blur").catch((err) => debugWarn()));
|
|
}
|
|
hasJustTabExitedInput = false;
|
|
}
|
|
}, 0);
|
|
};
|
|
currentHandleBlurDeferCallback = handleBlurDefer;
|
|
handleBlurDefer();
|
|
};
|
|
const pickerDisabled = computed(() => {
|
|
return props.disabled || (form == null ? void 0 : form.disabled);
|
|
});
|
|
const parsedValue2 = computed(() => {
|
|
let dayOrDays;
|
|
if (valueIsEmpty.value) {
|
|
if (pickerOptions.value.getDefaultValue) {
|
|
dayOrDays = pickerOptions.value.getDefaultValue();
|
|
}
|
|
} else {
|
|
if (isArray(props.modelValue)) {
|
|
dayOrDays = props.modelValue.map((d) => parseDate(d, props.valueFormat, lang.value));
|
|
} else {
|
|
dayOrDays = parseDate(props.modelValue, props.valueFormat, lang.value);
|
|
}
|
|
}
|
|
if (pickerOptions.value.getRangeAvailableTime) {
|
|
const availableResult = pickerOptions.value.getRangeAvailableTime(dayOrDays);
|
|
if (!isEqual(availableResult, dayOrDays)) {
|
|
dayOrDays = availableResult;
|
|
emitInput(isArray(dayOrDays) ? dayOrDays.map((_) => _.toDate()) : dayOrDays.toDate());
|
|
}
|
|
}
|
|
if (isArray(dayOrDays) && dayOrDays.some((day) => !day)) {
|
|
dayOrDays = [];
|
|
}
|
|
return dayOrDays;
|
|
});
|
|
const displayValue = computed(() => {
|
|
if (!pickerOptions.value.panelReady)
|
|
return "";
|
|
const formattedValue = formatDayjsToString(parsedValue2.value);
|
|
if (isArray(userInput.value)) {
|
|
return [
|
|
userInput.value[0] || formattedValue && formattedValue[0] || "",
|
|
userInput.value[1] || formattedValue && formattedValue[1] || ""
|
|
];
|
|
} else if (userInput.value !== null) {
|
|
return userInput.value;
|
|
}
|
|
if (!isTimePicker.value && valueIsEmpty.value)
|
|
return "";
|
|
if (!pickerVisible.value && valueIsEmpty.value)
|
|
return "";
|
|
if (formattedValue) {
|
|
return isDatesPicker.value ? formattedValue.join(", ") : formattedValue;
|
|
}
|
|
return "";
|
|
});
|
|
const isTimeLikePicker = computed(() => props.type.includes("time"));
|
|
const isTimePicker = computed(() => props.type.startsWith("time"));
|
|
const isDatesPicker = computed(() => props.type === "dates");
|
|
const triggerIcon = computed(() => props.prefixIcon || (isTimeLikePicker.value ? clock_default : calendar_default));
|
|
const showClose = ref(false);
|
|
const onClearIconClick = (event) => {
|
|
if (props.readonly || pickerDisabled.value)
|
|
return;
|
|
if (showClose.value) {
|
|
event.stopPropagation();
|
|
focusOnInputBox();
|
|
emitInput(null);
|
|
emitChange(null, true);
|
|
showClose.value = false;
|
|
pickerVisible.value = false;
|
|
pickerOptions.value.handleClear && pickerOptions.value.handleClear();
|
|
}
|
|
};
|
|
const valueIsEmpty = computed(() => {
|
|
const { modelValue } = props;
|
|
return !modelValue || isArray(modelValue) && !modelValue.filter(Boolean).length;
|
|
});
|
|
const onMouseDownInput = async (event) => {
|
|
var _a;
|
|
if (props.readonly || pickerDisabled.value)
|
|
return;
|
|
if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT" || refInput.value.includes(document.activeElement)) {
|
|
pickerVisible.value = true;
|
|
}
|
|
};
|
|
const onMouseEnter = () => {
|
|
if (props.readonly || pickerDisabled.value)
|
|
return;
|
|
if (!valueIsEmpty.value && props.clearable) {
|
|
showClose.value = true;
|
|
}
|
|
};
|
|
const onMouseLeave = () => {
|
|
showClose.value = false;
|
|
};
|
|
const onTouchStartInput = (event) => {
|
|
var _a;
|
|
if (props.readonly || pickerDisabled.value)
|
|
return;
|
|
if (((_a = event.touches[0].target) == null ? void 0 : _a.tagName) !== "INPUT" || refInput.value.includes(document.activeElement)) {
|
|
pickerVisible.value = true;
|
|
}
|
|
};
|
|
const isRangeInput = computed(() => {
|
|
return props.type.includes("range");
|
|
});
|
|
const pickerSize = useFormSize();
|
|
const popperEl = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = unref(refPopper)) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
|
|
});
|
|
const actualInputRef = computed(() => {
|
|
var _a;
|
|
if (unref(isRangeInput)) {
|
|
return unref(inputRef);
|
|
}
|
|
return (_a = unref(inputRef)) == null ? void 0 : _a.$el;
|
|
});
|
|
onClickOutside(actualInputRef, (e) => {
|
|
const unrefedPopperEl = unref(popperEl);
|
|
const inputEl = unref(actualInputRef);
|
|
if (unrefedPopperEl && (e.target === unrefedPopperEl || e.composedPath().includes(unrefedPopperEl)) || e.target === inputEl || e.composedPath().includes(inputEl))
|
|
return;
|
|
pickerVisible.value = false;
|
|
});
|
|
const userInput = ref(null);
|
|
const handleChange = () => {
|
|
if (userInput.value) {
|
|
const value = parseUserInputToDayjs(displayValue.value);
|
|
if (value) {
|
|
if (isValidValue(value)) {
|
|
emitInput(isArray(value) ? value.map((_) => _.toDate()) : value.toDate());
|
|
userInput.value = null;
|
|
}
|
|
}
|
|
}
|
|
if (userInput.value === "") {
|
|
emitInput(null);
|
|
emitChange(null);
|
|
userInput.value = null;
|
|
}
|
|
};
|
|
const parseUserInputToDayjs = (value) => {
|
|
if (!value)
|
|
return null;
|
|
return pickerOptions.value.parseUserInput(value);
|
|
};
|
|
const formatDayjsToString = (value) => {
|
|
if (!value)
|
|
return null;
|
|
return pickerOptions.value.formatToString(value);
|
|
};
|
|
const isValidValue = (value) => {
|
|
return pickerOptions.value.isValidValue(value);
|
|
};
|
|
const handleKeydownInput = async (event) => {
|
|
if (props.readonly || pickerDisabled.value)
|
|
return;
|
|
const { code } = event;
|
|
emitKeydown(event);
|
|
if (code === EVENT_CODE.esc) {
|
|
if (pickerVisible.value === true) {
|
|
pickerVisible.value = false;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
return;
|
|
}
|
|
if (code === EVENT_CODE.down) {
|
|
if (pickerOptions.value.handleFocusPicker) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
if (pickerVisible.value === false) {
|
|
pickerVisible.value = true;
|
|
await nextTick();
|
|
}
|
|
if (pickerOptions.value.handleFocusPicker) {
|
|
pickerOptions.value.handleFocusPicker();
|
|
return;
|
|
}
|
|
}
|
|
if (code === EVENT_CODE.tab) {
|
|
hasJustTabExitedInput = true;
|
|
return;
|
|
}
|
|
if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {
|
|
if (userInput.value === null || userInput.value === "" || isValidValue(parseUserInputToDayjs(displayValue.value))) {
|
|
handleChange();
|
|
pickerVisible.value = false;
|
|
}
|
|
event.stopPropagation();
|
|
return;
|
|
}
|
|
if (userInput.value) {
|
|
event.stopPropagation();
|
|
return;
|
|
}
|
|
if (pickerOptions.value.handleKeydownInput) {
|
|
pickerOptions.value.handleKeydownInput(event);
|
|
}
|
|
};
|
|
const onUserInput = (e) => {
|
|
userInput.value = e;
|
|
if (!pickerVisible.value) {
|
|
pickerVisible.value = true;
|
|
}
|
|
};
|
|
const handleStartInput = (event) => {
|
|
const target = event.target;
|
|
if (userInput.value) {
|
|
userInput.value = [target.value, userInput.value[1]];
|
|
} else {
|
|
userInput.value = [target.value, null];
|
|
}
|
|
};
|
|
const handleEndInput = (event) => {
|
|
const target = event.target;
|
|
if (userInput.value) {
|
|
userInput.value = [userInput.value[0], target.value];
|
|
} else {
|
|
userInput.value = [null, target.value];
|
|
}
|
|
};
|
|
const handleStartChange = () => {
|
|
var _a;
|
|
const values = userInput.value;
|
|
const value = parseUserInputToDayjs(values && values[0]);
|
|
const parsedVal = unref(parsedValue2);
|
|
if (value && value.isValid()) {
|
|
userInput.value = [
|
|
formatDayjsToString(value),
|
|
((_a = displayValue.value) == null ? void 0 : _a[1]) || null
|
|
];
|
|
const newValue = [value, parsedVal && (parsedVal[1] || null)];
|
|
if (isValidValue(newValue)) {
|
|
emitInput(newValue);
|
|
userInput.value = null;
|
|
}
|
|
}
|
|
};
|
|
const handleEndChange = () => {
|
|
var _a;
|
|
const values = unref(userInput);
|
|
const value = parseUserInputToDayjs(values && values[1]);
|
|
const parsedVal = unref(parsedValue2);
|
|
if (value && value.isValid()) {
|
|
userInput.value = [
|
|
((_a = unref(displayValue)) == null ? void 0 : _a[0]) || null,
|
|
formatDayjsToString(value)
|
|
];
|
|
const newValue = [parsedVal && parsedVal[0], value];
|
|
if (isValidValue(newValue)) {
|
|
emitInput(newValue);
|
|
userInput.value = null;
|
|
}
|
|
}
|
|
};
|
|
const pickerOptions = ref({});
|
|
const onSetPickerOption = (e) => {
|
|
pickerOptions.value[e[0]] = e[1];
|
|
pickerOptions.value.panelReady = true;
|
|
};
|
|
const onCalendarChange = (e) => {
|
|
emit("calendar-change", e);
|
|
};
|
|
const onPanelChange = (value, mode, view) => {
|
|
emit("panel-change", value, mode, view);
|
|
};
|
|
provide("EP_PICKER_BASE", {
|
|
props
|
|
});
|
|
expose({
|
|
focus,
|
|
handleFocusInput,
|
|
handleBlurInput,
|
|
handleOpen,
|
|
handleClose,
|
|
onPick
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(unref(ElTooltip), mergeProps({
|
|
ref_key: "refPopper",
|
|
ref: refPopper,
|
|
visible: pickerVisible.value,
|
|
effect: "light",
|
|
pure: "",
|
|
trigger: "click"
|
|
}, _ctx.$attrs, {
|
|
role: "dialog",
|
|
teleported: "",
|
|
transition: `${unref(nsDate).namespace.value}-zoom-in-top`,
|
|
"popper-class": [`${unref(nsDate).namespace.value}-picker__popper`, _ctx.popperClass],
|
|
"popper-options": unref(elPopperOptions),
|
|
"fallback-placements": ["bottom", "top", "right", "left"],
|
|
"gpu-acceleration": false,
|
|
"stop-popper-mouse-event": false,
|
|
"hide-after": 0,
|
|
persistent: "",
|
|
onBeforeShow,
|
|
onShow,
|
|
onHide
|
|
}), {
|
|
default: withCtx(() => [
|
|
!unref(isRangeInput) ? (openBlock(), createBlock(unref(ElInput), {
|
|
key: 0,
|
|
id: _ctx.id,
|
|
ref_key: "inputRef",
|
|
ref: inputRef,
|
|
"container-role": "combobox",
|
|
"model-value": unref(displayValue),
|
|
name: _ctx.name,
|
|
size: unref(pickerSize),
|
|
disabled: unref(pickerDisabled),
|
|
placeholder: _ctx.placeholder,
|
|
class: normalizeClass([unref(nsDate).b("editor"), unref(nsDate).bm("editor", _ctx.type), _ctx.$attrs.class]),
|
|
style: normalizeStyle(_ctx.$attrs.style),
|
|
readonly: !_ctx.editable || _ctx.readonly || unref(isDatesPicker) || _ctx.type === "week",
|
|
label: _ctx.label,
|
|
tabindex: _ctx.tabindex,
|
|
"validate-event": false,
|
|
onInput: onUserInput,
|
|
onFocus: handleFocusInput,
|
|
onBlur: handleBlurInput,
|
|
onKeydown: handleKeydownInput,
|
|
onChange: handleChange,
|
|
onMousedown: onMouseDownInput,
|
|
onMouseenter: onMouseEnter,
|
|
onMouseleave: onMouseLeave,
|
|
onTouchstart: onTouchStartInput,
|
|
onClick: _cache[0] || (_cache[0] = withModifiers(() => {
|
|
}, ["stop"]))
|
|
}, {
|
|
prefix: withCtx(() => [
|
|
unref(triggerIcon) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(nsInput).e("icon")),
|
|
onMousedown: withModifiers(onMouseDownInput, ["prevent"]),
|
|
onTouchstart: onTouchStartInput
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(triggerIcon))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true)
|
|
]),
|
|
suffix: withCtx(() => [
|
|
showClose.value && _ctx.clearIcon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(`${unref(nsInput).e("icon")} clear-icon`),
|
|
onClick: withModifiers(onClearIconClick, ["stop"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onClick"])) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 1
|
|
}, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "label", "tabindex", "onKeydown"])) : (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
ref_key: "inputRef",
|
|
ref: inputRef,
|
|
class: normalizeClass(unref(rangeInputKls)),
|
|
style: normalizeStyle(_ctx.$attrs.style),
|
|
onClick: handleFocusInput,
|
|
onMouseenter: onMouseEnter,
|
|
onMouseleave: onMouseLeave,
|
|
onTouchstart: onTouchStartInput,
|
|
onKeydown: handleKeydownInput
|
|
}, [
|
|
unref(triggerIcon) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass([unref(nsInput).e("icon"), unref(nsRange).e("icon")]),
|
|
onMousedown: withModifiers(onMouseDownInput, ["prevent"]),
|
|
onTouchstart: onTouchStartInput
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(triggerIcon))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true),
|
|
createElementVNode("input", {
|
|
id: _ctx.id && _ctx.id[0],
|
|
autocomplete: "off",
|
|
name: _ctx.name && _ctx.name[0],
|
|
placeholder: _ctx.startPlaceholder,
|
|
value: unref(displayValue) && unref(displayValue)[0],
|
|
disabled: unref(pickerDisabled),
|
|
readonly: !_ctx.editable || _ctx.readonly,
|
|
class: normalizeClass(unref(nsRange).b("input")),
|
|
onMousedown: onMouseDownInput,
|
|
onInput: handleStartInput,
|
|
onChange: handleStartChange,
|
|
onFocus: handleFocusInput,
|
|
onBlur: handleBlurInput
|
|
}, null, 42, _hoisted_1$7),
|
|
renderSlot(_ctx.$slots, "range-separator", {}, () => [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(nsRange).b("separator"))
|
|
}, toDisplayString(_ctx.rangeSeparator), 3)
|
|
]),
|
|
createElementVNode("input", {
|
|
id: _ctx.id && _ctx.id[1],
|
|
autocomplete: "off",
|
|
name: _ctx.name && _ctx.name[1],
|
|
placeholder: _ctx.endPlaceholder,
|
|
value: unref(displayValue) && unref(displayValue)[1],
|
|
disabled: unref(pickerDisabled),
|
|
readonly: !_ctx.editable || _ctx.readonly,
|
|
class: normalizeClass(unref(nsRange).b("input")),
|
|
onMousedown: onMouseDownInput,
|
|
onFocus: handleFocusInput,
|
|
onBlur: handleBlurInput,
|
|
onInput: handleEndInput,
|
|
onChange: handleEndChange
|
|
}, null, 42, _hoisted_2$7),
|
|
_ctx.clearIcon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 1,
|
|
class: normalizeClass(unref(clearIconKls)),
|
|
onClick: onClearIconClick
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
], 38))
|
|
]),
|
|
content: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default", {
|
|
visible: pickerVisible.value,
|
|
actualVisible: pickerActualVisible.value,
|
|
parsedValue: unref(parsedValue2),
|
|
format: _ctx.format,
|
|
dateFormat: _ctx.dateFormat,
|
|
timeFormat: _ctx.timeFormat,
|
|
unlinkPanels: _ctx.unlinkPanels,
|
|
type: _ctx.type,
|
|
defaultValue: _ctx.defaultValue,
|
|
onPick,
|
|
onSelectRange: setSelectionRange,
|
|
onSetPickerOption,
|
|
onCalendarChange,
|
|
onPanelChange,
|
|
onKeydown: onKeydownPopperContent,
|
|
onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
|
|
}, ["stop"]))
|
|
})
|
|
]),
|
|
_: 3
|
|
}, 16, ["visible", "transition", "popper-class", "popper-options"]);
|
|
};
|
|
}
|
|
});
|
|
var CommonPicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/time-picker/src/common/picker.vue"]]);
|
|
const panelTimePickerProps = buildProps({
|
|
...timePanelSharedProps,
|
|
datetimeRole: String,
|
|
parsedValue: {
|
|
type: definePropType(Object)
|
|
}
|
|
});
|
|
const useTimePanel = ({
|
|
getAvailableHours,
|
|
getAvailableMinutes,
|
|
getAvailableSeconds
|
|
}) => {
|
|
const getAvailableTime = (date2, role, first, compareDate) => {
|
|
const availableTimeGetters = {
|
|
hour: getAvailableHours,
|
|
minute: getAvailableMinutes,
|
|
second: getAvailableSeconds
|
|
};
|
|
let result = date2;
|
|
["hour", "minute", "second"].forEach((type) => {
|
|
if (availableTimeGetters[type]) {
|
|
let availableTimeSlots;
|
|
const method = availableTimeGetters[type];
|
|
switch (type) {
|
|
case "minute": {
|
|
availableTimeSlots = method(result.hour(), role, compareDate);
|
|
break;
|
|
}
|
|
case "second": {
|
|
availableTimeSlots = method(result.hour(), result.minute(), role, compareDate);
|
|
break;
|
|
}
|
|
default: {
|
|
availableTimeSlots = method(role, compareDate);
|
|
break;
|
|
}
|
|
}
|
|
if ((availableTimeSlots == null ? void 0 : availableTimeSlots.length) && !availableTimeSlots.includes(result[type]())) {
|
|
const pos = first ? 0 : availableTimeSlots.length - 1;
|
|
result = result[type](availableTimeSlots[pos]);
|
|
}
|
|
}
|
|
});
|
|
return result;
|
|
};
|
|
const timePickerOptions = {};
|
|
const onSetOption = ([key, val]) => {
|
|
timePickerOptions[key] = val;
|
|
};
|
|
return {
|
|
timePickerOptions,
|
|
getAvailableTime,
|
|
onSetOption
|
|
};
|
|
};
|
|
const makeAvailableArr = (disabledList) => {
|
|
const trueOrNumber = (isDisabled, index2) => isDisabled || index2;
|
|
const getNumber = (predicate) => predicate !== true;
|
|
return disabledList.map(trueOrNumber).filter(getNumber);
|
|
};
|
|
const getTimeLists = (disabledHours, disabledMinutes, disabledSeconds) => {
|
|
const getHoursList = (role, compare) => {
|
|
return makeList(24, disabledHours && (() => disabledHours == null ? void 0 : disabledHours(role, compare)));
|
|
};
|
|
const getMinutesList = (hour, role, compare) => {
|
|
return makeList(60, disabledMinutes && (() => disabledMinutes == null ? void 0 : disabledMinutes(hour, role, compare)));
|
|
};
|
|
const getSecondsList = (hour, minute, role, compare) => {
|
|
return makeList(60, disabledSeconds && (() => disabledSeconds == null ? void 0 : disabledSeconds(hour, minute, role, compare)));
|
|
};
|
|
return {
|
|
getHoursList,
|
|
getMinutesList,
|
|
getSecondsList
|
|
};
|
|
};
|
|
const buildAvailableTimeSlotGetter = (disabledHours, disabledMinutes, disabledSeconds) => {
|
|
const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(disabledHours, disabledMinutes, disabledSeconds);
|
|
const getAvailableHours = (role, compare) => {
|
|
return makeAvailableArr(getHoursList(role, compare));
|
|
};
|
|
const getAvailableMinutes = (hour, role, compare) => {
|
|
return makeAvailableArr(getMinutesList(hour, role, compare));
|
|
};
|
|
const getAvailableSeconds = (hour, minute, role, compare) => {
|
|
return makeAvailableArr(getSecondsList(hour, minute, role, compare));
|
|
};
|
|
return {
|
|
getAvailableHours,
|
|
getAvailableMinutes,
|
|
getAvailableSeconds
|
|
};
|
|
};
|
|
const useOldValue = (props) => {
|
|
const oldValue = ref(props.parsedValue);
|
|
watch(() => props.visible, (val) => {
|
|
if (!val) {
|
|
oldValue.value = props.parsedValue;
|
|
}
|
|
});
|
|
return oldValue;
|
|
};
|
|
const nodeList = /* @__PURE__ */ new Map();
|
|
let startClick;
|
|
if (isClient) {
|
|
document.addEventListener("mousedown", (e) => startClick = e);
|
|
document.addEventListener("mouseup", (e) => {
|
|
for (const handlers of nodeList.values()) {
|
|
for (const { documentHandler } of handlers) {
|
|
documentHandler(e, startClick);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
function createDocumentHandler(el, binding) {
|
|
let excludes = [];
|
|
if (Array.isArray(binding.arg)) {
|
|
excludes = binding.arg;
|
|
} else if (isElement(binding.arg)) {
|
|
excludes.push(binding.arg);
|
|
}
|
|
return function(mouseup, mousedown) {
|
|
const popperRef = binding.instance.popperRef;
|
|
const mouseUpTarget = mouseup.target;
|
|
const mouseDownTarget = mousedown == null ? void 0 : mousedown.target;
|
|
const isBound = !binding || !binding.instance;
|
|
const isTargetExists = !mouseUpTarget || !mouseDownTarget;
|
|
const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
|
|
const isSelf = el === mouseUpTarget;
|
|
const isTargetExcluded = excludes.length && excludes.some((item) => item == null ? void 0 : item.contains(mouseUpTarget)) || excludes.length && excludes.includes(mouseDownTarget);
|
|
const isContainedByPopper = popperRef && (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget));
|
|
if (isBound || isTargetExists || isContainedByEl || isSelf || isTargetExcluded || isContainedByPopper) {
|
|
return;
|
|
}
|
|
binding.value(mouseup, mousedown);
|
|
};
|
|
}
|
|
const ClickOutside = {
|
|
beforeMount(el, binding) {
|
|
if (!nodeList.has(el)) {
|
|
nodeList.set(el, []);
|
|
}
|
|
nodeList.get(el).push({
|
|
documentHandler: createDocumentHandler(el, binding),
|
|
bindingFn: binding.value
|
|
});
|
|
},
|
|
updated(el, binding) {
|
|
if (!nodeList.has(el)) {
|
|
nodeList.set(el, []);
|
|
}
|
|
const handlers = nodeList.get(el);
|
|
const oldHandlerIndex = handlers.findIndex((item) => item.bindingFn === binding.oldValue);
|
|
const newHandler = {
|
|
documentHandler: createDocumentHandler(el, binding),
|
|
bindingFn: binding.value
|
|
};
|
|
if (oldHandlerIndex >= 0) {
|
|
handlers.splice(oldHandlerIndex, 1, newHandler);
|
|
} else {
|
|
handlers.push(newHandler);
|
|
}
|
|
},
|
|
unmounted(el) {
|
|
nodeList.delete(el);
|
|
}
|
|
};
|
|
const REPEAT_INTERVAL = 100;
|
|
const REPEAT_DELAY = 600;
|
|
const vRepeatClick = {
|
|
beforeMount(el, binding) {
|
|
const value = binding.value;
|
|
const { interval = REPEAT_INTERVAL, delay = REPEAT_DELAY } = isFunction(value) ? {} : value;
|
|
let intervalId;
|
|
let delayId;
|
|
const handler = () => isFunction(value) ? value() : value.handler();
|
|
const clear = () => {
|
|
if (delayId) {
|
|
clearTimeout(delayId);
|
|
delayId = void 0;
|
|
}
|
|
if (intervalId) {
|
|
clearInterval(intervalId);
|
|
intervalId = void 0;
|
|
}
|
|
};
|
|
el.addEventListener("mousedown", (evt) => {
|
|
if (evt.button !== 0)
|
|
return;
|
|
clear();
|
|
handler();
|
|
document.addEventListener("mouseup", () => clear(), {
|
|
once: true
|
|
});
|
|
delayId = setTimeout(() => {
|
|
intervalId = setInterval(() => {
|
|
handler();
|
|
}, interval);
|
|
}, delay);
|
|
});
|
|
}
|
|
};
|
|
const basicTimeSpinnerProps = buildProps({
|
|
role: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
spinnerDate: {
|
|
type: definePropType(Object),
|
|
required: true
|
|
},
|
|
showSeconds: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
arrowControl: Boolean,
|
|
amPmMode: {
|
|
type: definePropType(String),
|
|
default: ""
|
|
},
|
|
...disabledTimeListsProps
|
|
});
|
|
const _hoisted_1$6 = ["onClick"];
|
|
const _hoisted_2$6 = ["onMouseenter"];
|
|
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
__name: "basic-time-spinner",
|
|
props: basicTimeSpinnerProps,
|
|
emits: ["change", "select-range", "set-option"],
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("time");
|
|
const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(props.disabledHours, props.disabledMinutes, props.disabledSeconds);
|
|
let isScrolling = false;
|
|
const currentScrollbar = ref();
|
|
const listHoursRef = ref();
|
|
const listMinutesRef = ref();
|
|
const listSecondsRef = ref();
|
|
const listRefsMap = {
|
|
hours: listHoursRef,
|
|
minutes: listMinutesRef,
|
|
seconds: listSecondsRef
|
|
};
|
|
const spinnerItems = computed(() => {
|
|
return props.showSeconds ? timeUnits : timeUnits.slice(0, 2);
|
|
});
|
|
const timePartials = computed(() => {
|
|
const { spinnerDate } = props;
|
|
const hours = spinnerDate.hour();
|
|
const minutes = spinnerDate.minute();
|
|
const seconds = spinnerDate.second();
|
|
return { hours, minutes, seconds };
|
|
});
|
|
const timeList = computed(() => {
|
|
const { hours, minutes } = unref(timePartials);
|
|
return {
|
|
hours: getHoursList(props.role),
|
|
minutes: getMinutesList(hours, props.role),
|
|
seconds: getSecondsList(hours, minutes, props.role)
|
|
};
|
|
});
|
|
const arrowControlTimeList = computed(() => {
|
|
const { hours, minutes, seconds } = unref(timePartials);
|
|
return {
|
|
hours: buildTimeList(hours, 23),
|
|
minutes: buildTimeList(minutes, 59),
|
|
seconds: buildTimeList(seconds, 59)
|
|
};
|
|
});
|
|
debounce((type) => {
|
|
isScrolling = false;
|
|
adjustCurrentSpinner(type);
|
|
}, 200);
|
|
const getAmPmFlag = (hour) => {
|
|
const shouldShowAmPm = !!props.amPmMode;
|
|
if (!shouldShowAmPm)
|
|
return "";
|
|
const isCapital = props.amPmMode === "A";
|
|
let content = hour < 12 ? " am" : " pm";
|
|
if (isCapital)
|
|
content = content.toUpperCase();
|
|
return content;
|
|
};
|
|
const emitSelectRange = (type) => {
|
|
let range;
|
|
switch (type) {
|
|
case "hours":
|
|
range = [0, 2];
|
|
break;
|
|
case "minutes":
|
|
range = [3, 5];
|
|
break;
|
|
case "seconds":
|
|
range = [6, 8];
|
|
break;
|
|
}
|
|
const [left, right] = range;
|
|
emit("select-range", left, right);
|
|
currentScrollbar.value = type;
|
|
};
|
|
const adjustCurrentSpinner = (type) => {
|
|
adjustSpinner(type, unref(timePartials)[type]);
|
|
};
|
|
const adjustSpinners = () => {
|
|
adjustCurrentSpinner("hours");
|
|
adjustCurrentSpinner("minutes");
|
|
adjustCurrentSpinner("seconds");
|
|
};
|
|
const getScrollbarElement = (el) => el.querySelector(`.${ns.namespace.value}-scrollbar__wrap`);
|
|
const adjustSpinner = (type, value) => {
|
|
if (props.arrowControl)
|
|
return;
|
|
const scrollbar = unref(listRefsMap[type]);
|
|
if (scrollbar && scrollbar.$el) {
|
|
getScrollbarElement(scrollbar.$el).scrollTop = Math.max(0, value * typeItemHeight(type));
|
|
}
|
|
};
|
|
const typeItemHeight = (type) => {
|
|
const scrollbar = unref(listRefsMap[type]);
|
|
const listItem = scrollbar == null ? void 0 : scrollbar.$el.querySelector("li");
|
|
if (listItem) {
|
|
return Number.parseFloat(getStyle(listItem, "height")) || 0;
|
|
}
|
|
return 0;
|
|
};
|
|
const onIncrement = () => {
|
|
scrollDown(1);
|
|
};
|
|
const onDecrement = () => {
|
|
scrollDown(-1);
|
|
};
|
|
const scrollDown = (step) => {
|
|
if (!currentScrollbar.value) {
|
|
emitSelectRange("hours");
|
|
}
|
|
const label = currentScrollbar.value;
|
|
const now = unref(timePartials)[label];
|
|
const total = currentScrollbar.value === "hours" ? 24 : 60;
|
|
const next = findNextUnDisabled(label, now, step, total);
|
|
modifyDateField(label, next);
|
|
adjustSpinner(label, next);
|
|
nextTick(() => emitSelectRange(label));
|
|
};
|
|
const findNextUnDisabled = (type, now, step, total) => {
|
|
let next = (now + step + total) % total;
|
|
const list = unref(timeList)[type];
|
|
while (list[next] && next !== now) {
|
|
next = (next + step + total) % total;
|
|
}
|
|
return next;
|
|
};
|
|
const modifyDateField = (type, value) => {
|
|
const list = unref(timeList)[type];
|
|
const isDisabled = list[value];
|
|
if (isDisabled)
|
|
return;
|
|
const { hours, minutes, seconds } = unref(timePartials);
|
|
let changeTo;
|
|
switch (type) {
|
|
case "hours":
|
|
changeTo = props.spinnerDate.hour(value).minute(minutes).second(seconds);
|
|
break;
|
|
case "minutes":
|
|
changeTo = props.spinnerDate.hour(hours).minute(value).second(seconds);
|
|
break;
|
|
case "seconds":
|
|
changeTo = props.spinnerDate.hour(hours).minute(minutes).second(value);
|
|
break;
|
|
}
|
|
emit("change", changeTo);
|
|
};
|
|
const handleClick = (type, { value, disabled }) => {
|
|
if (!disabled) {
|
|
modifyDateField(type, value);
|
|
emitSelectRange(type);
|
|
adjustSpinner(type, value);
|
|
}
|
|
};
|
|
const setRef = (scrollbar, type) => {
|
|
listRefsMap[type].value = scrollbar;
|
|
};
|
|
emit("set-option", [`${props.role}_scrollDown`, scrollDown]);
|
|
emit("set-option", [`${props.role}_emitSelectRange`, emitSelectRange]);
|
|
watch(() => props.spinnerDate, () => {
|
|
if (isScrolling)
|
|
return;
|
|
adjustSpinners();
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([unref(ns).b("spinner"), { "has-seconds": _ctx.showSeconds }])
|
|
}, [
|
|
!_ctx.arrowControl ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(spinnerItems), (item) => {
|
|
return openBlock(), createBlock(unref(ElScrollbar), {
|
|
key: item,
|
|
ref_for: true,
|
|
ref: (scrollbar) => setRef(scrollbar, item),
|
|
class: normalizeClass(unref(ns).be("spinner", "wrapper")),
|
|
"wrap-style": "max-height: inherit;",
|
|
"view-class": unref(ns).be("spinner", "list"),
|
|
noresize: "",
|
|
tag: "ul",
|
|
onMouseenter: ($event) => emitSelectRange(item),
|
|
onMousemove: ($event) => adjustCurrentSpinner(item)
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(timeList)[item], (disabled, key) => {
|
|
return openBlock(), createElementBlock("li", {
|
|
key,
|
|
class: normalizeClass([
|
|
unref(ns).be("spinner", "item"),
|
|
unref(ns).is("active", key === unref(timePartials)[item]),
|
|
unref(ns).is("disabled", disabled)
|
|
]),
|
|
onClick: ($event) => handleClick(item, { value: key, disabled })
|
|
}, [
|
|
item === "hours" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
createTextVNode(toDisplayString(("0" + (_ctx.amPmMode ? key % 12 || 12 : key)).slice(-2)) + toDisplayString(getAmPmFlag(key)), 1)
|
|
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
createTextVNode(toDisplayString(("0" + key).slice(-2)), 1)
|
|
], 64))
|
|
], 10, _hoisted_1$6);
|
|
}), 128))
|
|
]),
|
|
_: 2
|
|
}, 1032, ["class", "view-class", "onMouseenter", "onMousemove"]);
|
|
}), 128)) : createCommentVNode("v-if", true),
|
|
_ctx.arrowControl ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(spinnerItems), (item) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
key: item,
|
|
class: normalizeClass([unref(ns).be("spinner", "wrapper"), unref(ns).is("arrow")]),
|
|
onMouseenter: ($event) => emitSelectRange(item)
|
|
}, [
|
|
withDirectives((openBlock(), createBlock(unref(ElIcon), {
|
|
class: normalizeClass(["arrow-up", unref(ns).be("spinner", "arrow")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_up_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])), [
|
|
[unref(vRepeatClick), onDecrement]
|
|
]),
|
|
withDirectives((openBlock(), createBlock(unref(ElIcon), {
|
|
class: normalizeClass(["arrow-down", unref(ns).be("spinner", "arrow")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_down_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])), [
|
|
[unref(vRepeatClick), onIncrement]
|
|
]),
|
|
createElementVNode("ul", {
|
|
class: normalizeClass(unref(ns).be("spinner", "list"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(arrowControlTimeList)[item], (time, key) => {
|
|
return openBlock(), createElementBlock("li", {
|
|
key,
|
|
class: normalizeClass([
|
|
unref(ns).be("spinner", "item"),
|
|
unref(ns).is("active", time === unref(timePartials)[item]),
|
|
unref(ns).is("disabled", unref(timeList)[item][time])
|
|
])
|
|
}, [
|
|
typeof time === "number" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
item === "hours" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
createTextVNode(toDisplayString(("0" + (_ctx.amPmMode ? time % 12 || 12 : time)).slice(-2)) + toDisplayString(getAmPmFlag(time)), 1)
|
|
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
createTextVNode(toDisplayString(("0" + time).slice(-2)), 1)
|
|
], 64))
|
|
], 64)) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
}), 128))
|
|
], 2)
|
|
], 42, _hoisted_2$6);
|
|
}), 128)) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var TimeSpinner = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue"]]);
|
|
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
__name: "panel-time-pick",
|
|
props: panelTimePickerProps,
|
|
emits: ["pick", "select-range", "set-picker-option"],
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const pickerBase = inject("EP_PICKER_BASE");
|
|
const {
|
|
arrowControl,
|
|
disabledHours,
|
|
disabledMinutes,
|
|
disabledSeconds,
|
|
defaultValue
|
|
} = pickerBase.props;
|
|
const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds);
|
|
const ns = useNamespace("time");
|
|
const { t, lang } = useLocale();
|
|
const selectionRange = ref([0, 2]);
|
|
const oldValue = useOldValue(props);
|
|
const transitionName = computed(() => {
|
|
return isUndefined(props.actualVisible) ? `${ns.namespace.value}-zoom-in-top` : "";
|
|
});
|
|
const showSeconds = computed(() => {
|
|
return props.format.includes("ss");
|
|
});
|
|
const amPmMode = computed(() => {
|
|
if (props.format.includes("A"))
|
|
return "A";
|
|
if (props.format.includes("a"))
|
|
return "a";
|
|
return "";
|
|
});
|
|
const isValidValue = (_date) => {
|
|
const parsedDate = dayjs(_date).locale(lang.value);
|
|
const result = getRangeAvailableTime(parsedDate);
|
|
return parsedDate.isSame(result);
|
|
};
|
|
const handleCancel = () => {
|
|
emit("pick", oldValue.value, false);
|
|
};
|
|
const handleConfirm = (visible = false, first = false) => {
|
|
if (first)
|
|
return;
|
|
emit("pick", props.parsedValue, visible);
|
|
};
|
|
const handleChange = (_date) => {
|
|
if (!props.visible) {
|
|
return;
|
|
}
|
|
const result = getRangeAvailableTime(_date).millisecond(0);
|
|
emit("pick", result, true);
|
|
};
|
|
const setSelectionRange = (start, end) => {
|
|
emit("select-range", start, end);
|
|
selectionRange.value = [start, end];
|
|
};
|
|
const changeSelectionRange = (step) => {
|
|
const list = [0, 3].concat(showSeconds.value ? [6] : []);
|
|
const mapping = ["hours", "minutes"].concat(showSeconds.value ? ["seconds"] : []);
|
|
const index2 = list.indexOf(selectionRange.value[0]);
|
|
const next = (index2 + step + list.length) % list.length;
|
|
timePickerOptions["start_emitSelectRange"](mapping[next]);
|
|
};
|
|
const handleKeydown = (event) => {
|
|
const code = event.code;
|
|
const { left, right, up, down } = EVENT_CODE;
|
|
if ([left, right].includes(code)) {
|
|
const step = code === left ? -1 : 1;
|
|
changeSelectionRange(step);
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
if ([up, down].includes(code)) {
|
|
const step = code === up ? -1 : 1;
|
|
timePickerOptions["start_scrollDown"](step);
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
};
|
|
const { timePickerOptions, onSetOption, getAvailableTime } = useTimePanel({
|
|
getAvailableHours,
|
|
getAvailableMinutes,
|
|
getAvailableSeconds
|
|
});
|
|
const getRangeAvailableTime = (date2) => {
|
|
return getAvailableTime(date2, props.datetimeRole || "", true);
|
|
};
|
|
const parseUserInput = (value) => {
|
|
if (!value)
|
|
return null;
|
|
return dayjs(value, props.format).locale(lang.value);
|
|
};
|
|
const formatToString = (value) => {
|
|
if (!value)
|
|
return null;
|
|
return value.format(props.format);
|
|
};
|
|
const getDefaultValue2 = () => {
|
|
return dayjs(defaultValue).locale(lang.value);
|
|
};
|
|
emit("set-picker-option", ["isValidValue", isValidValue]);
|
|
emit("set-picker-option", ["formatToString", formatToString]);
|
|
emit("set-picker-option", ["parseUserInput", parseUserInput]);
|
|
emit("set-picker-option", ["handleKeydownInput", handleKeydown]);
|
|
emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]);
|
|
emit("set-picker-option", ["getDefaultValue", getDefaultValue2]);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(Transition, { name: unref(transitionName) }, {
|
|
default: withCtx(() => [
|
|
_ctx.actualVisible || _ctx.visible ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).b("panel"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass([unref(ns).be("panel", "content"), { "has-seconds": unref(showSeconds) }])
|
|
}, [
|
|
createVNode(TimeSpinner, {
|
|
ref: "spinner",
|
|
role: _ctx.datetimeRole || "start",
|
|
"arrow-control": unref(arrowControl),
|
|
"show-seconds": unref(showSeconds),
|
|
"am-pm-mode": unref(amPmMode),
|
|
"spinner-date": _ctx.parsedValue,
|
|
"disabled-hours": unref(disabledHours),
|
|
"disabled-minutes": unref(disabledMinutes),
|
|
"disabled-seconds": unref(disabledSeconds),
|
|
onChange: handleChange,
|
|
onSetOption: unref(onSetOption),
|
|
onSelectRange: setSelectionRange
|
|
}, null, 8, ["role", "arrow-control", "show-seconds", "am-pm-mode", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onSetOption"])
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).be("panel", "footer"))
|
|
}, [
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ns).be("panel", "btn"), "cancel"]),
|
|
onClick: handleCancel
|
|
}, toDisplayString(unref(t)("el.datepicker.cancel")), 3),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ns).be("panel", "btn"), "confirm"]),
|
|
onClick: _cache[0] || (_cache[0] = ($event) => handleConfirm())
|
|
}, toDisplayString(unref(t)("el.datepicker.confirm")), 3)
|
|
], 2)
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 1
|
|
}, 8, ["name"]);
|
|
};
|
|
}
|
|
});
|
|
var TimePickPanel = /* @__PURE__ */ _export_sfc$1(_sfc_main$7, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/time-picker/src/time-picker-com/panel-time-pick.vue"]]);
|
|
const ROOT_PICKER_INJECTION_KEY = Symbol();
|
|
const datePickerProps = buildProps({
|
|
...timePickerDefaultProps,
|
|
type: {
|
|
type: definePropType(String),
|
|
default: "date"
|
|
}
|
|
});
|
|
const selectionModes = ["date", "dates", "year", "month", "week", "range"];
|
|
const datePickerSharedProps = buildProps({
|
|
disabledDate: {
|
|
type: definePropType(Function)
|
|
},
|
|
date: {
|
|
type: definePropType(Object),
|
|
required: true
|
|
},
|
|
minDate: {
|
|
type: definePropType(Object)
|
|
},
|
|
maxDate: {
|
|
type: definePropType(Object)
|
|
},
|
|
parsedValue: {
|
|
type: definePropType([Object, Array])
|
|
},
|
|
rangeState: {
|
|
type: definePropType(Object),
|
|
default: () => ({
|
|
endDate: null,
|
|
selecting: false
|
|
})
|
|
}
|
|
});
|
|
const panelSharedProps = buildProps({
|
|
type: {
|
|
type: definePropType(String),
|
|
required: true,
|
|
values: datePickTypes
|
|
},
|
|
dateFormat: String,
|
|
timeFormat: String
|
|
});
|
|
const panelRangeSharedProps = buildProps({
|
|
unlinkPanels: Boolean,
|
|
parsedValue: {
|
|
type: definePropType(Array)
|
|
}
|
|
});
|
|
const selectionModeWithDefault = (mode) => {
|
|
return {
|
|
type: String,
|
|
values: selectionModes,
|
|
default: mode
|
|
};
|
|
};
|
|
const panelDatePickProps = buildProps({
|
|
...panelSharedProps,
|
|
parsedValue: {
|
|
type: definePropType([Object, Array])
|
|
},
|
|
visible: {
|
|
type: Boolean
|
|
},
|
|
format: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
});
|
|
const basicDateTableProps = buildProps({
|
|
...datePickerSharedProps,
|
|
cellClassName: {
|
|
type: definePropType(Function)
|
|
},
|
|
showWeekNumber: Boolean,
|
|
selectionMode: selectionModeWithDefault("date")
|
|
});
|
|
const basicDateTableEmits = ["changerange", "pick", "select"];
|
|
const isValidRange = (range) => {
|
|
if (!isArray(range))
|
|
return false;
|
|
const [left, right] = range;
|
|
return dayjs.isDayjs(left) && dayjs.isDayjs(right) && left.isSameOrBefore(right);
|
|
};
|
|
const getDefaultValue = (defaultValue, { lang, unit: unit2, unlinkPanels }) => {
|
|
let start;
|
|
if (isArray(defaultValue)) {
|
|
let [left, right] = defaultValue.map((d) => dayjs(d).locale(lang));
|
|
if (!unlinkPanels) {
|
|
right = left.add(1, unit2);
|
|
}
|
|
return [left, right];
|
|
} else if (defaultValue) {
|
|
start = dayjs(defaultValue);
|
|
} else {
|
|
start = dayjs();
|
|
}
|
|
start = start.locale(lang);
|
|
return [start, start.add(1, unit2)];
|
|
};
|
|
const buildPickerTable = (dimension, rows, {
|
|
columnIndexOffset,
|
|
startDate,
|
|
nextEndDate,
|
|
now,
|
|
unit: unit2,
|
|
relativeDateGetter,
|
|
setCellMetadata,
|
|
setRowMetadata
|
|
}) => {
|
|
for (let rowIndex = 0; rowIndex < dimension.row; rowIndex++) {
|
|
const row = rows[rowIndex];
|
|
for (let columnIndex = 0; columnIndex < dimension.column; columnIndex++) {
|
|
let cell = row[columnIndex + columnIndexOffset];
|
|
if (!cell) {
|
|
cell = {
|
|
row: rowIndex,
|
|
column: columnIndex,
|
|
type: "normal",
|
|
inRange: false,
|
|
start: false,
|
|
end: false
|
|
};
|
|
}
|
|
const index2 = rowIndex * dimension.column + columnIndex;
|
|
const nextStartDate = relativeDateGetter(index2);
|
|
cell.dayjs = nextStartDate;
|
|
cell.date = nextStartDate.toDate();
|
|
cell.timestamp = nextStartDate.valueOf();
|
|
cell.type = "normal";
|
|
cell.inRange = !!(startDate && nextStartDate.isSameOrAfter(startDate, unit2) && nextEndDate && nextStartDate.isSameOrBefore(nextEndDate, unit2)) || !!(startDate && nextStartDate.isSameOrBefore(startDate, unit2) && nextEndDate && nextStartDate.isSameOrAfter(nextEndDate, unit2));
|
|
if (startDate == null ? void 0 : startDate.isSameOrAfter(nextEndDate)) {
|
|
cell.start = !!nextEndDate && nextStartDate.isSame(nextEndDate, unit2);
|
|
cell.end = startDate && nextStartDate.isSame(startDate, unit2);
|
|
} else {
|
|
cell.start = !!startDate && nextStartDate.isSame(startDate, unit2);
|
|
cell.end = !!nextEndDate && nextStartDate.isSame(nextEndDate, unit2);
|
|
}
|
|
const isToday = nextStartDate.isSame(now, unit2);
|
|
if (isToday) {
|
|
cell.type = "today";
|
|
}
|
|
setCellMetadata == null ? void 0 : setCellMetadata(cell, { rowIndex, columnIndex });
|
|
row[columnIndex + columnIndexOffset] = cell;
|
|
}
|
|
setRowMetadata == null ? void 0 : setRowMetadata(row);
|
|
}
|
|
};
|
|
const isNormalDay = (type = "") => {
|
|
return ["normal", "today"].includes(type);
|
|
};
|
|
const useBasicDateTable = (props, emit) => {
|
|
const { lang } = useLocale();
|
|
const tbodyRef = ref();
|
|
const currentCellRef = ref();
|
|
const lastRow = ref();
|
|
const lastColumn = ref();
|
|
const tableRows = ref([[], [], [], [], [], []]);
|
|
let focusWithClick = false;
|
|
const firstDayOfWeek = props.date.$locale().weekStart || 7;
|
|
const WEEKS_CONSTANT = props.date.locale("en").localeData().weekdaysShort().map((_) => _.toLowerCase());
|
|
const offsetDay = computed(() => {
|
|
return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek;
|
|
});
|
|
const startDate = computed(() => {
|
|
const startDayOfMonth = props.date.startOf("month");
|
|
return startDayOfMonth.subtract(startDayOfMonth.day() || 7, "day");
|
|
});
|
|
const WEEKS = computed(() => {
|
|
return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(firstDayOfWeek, firstDayOfWeek + 7);
|
|
});
|
|
const hasCurrent = computed(() => {
|
|
return flatten(unref(rows)).some((row) => {
|
|
return row.isCurrent;
|
|
});
|
|
});
|
|
const days = computed(() => {
|
|
const startOfMonth = props.date.startOf("month");
|
|
const startOfMonthDay = startOfMonth.day() || 7;
|
|
const dateCountOfMonth = startOfMonth.daysInMonth();
|
|
const dateCountOfLastMonth = startOfMonth.subtract(1, "month").daysInMonth();
|
|
return {
|
|
startOfMonthDay,
|
|
dateCountOfMonth,
|
|
dateCountOfLastMonth
|
|
};
|
|
});
|
|
const selectedDate = computed(() => {
|
|
return props.selectionMode === "dates" ? castArray(props.parsedValue) : [];
|
|
});
|
|
const setDateText = (cell, { count, rowIndex, columnIndex }) => {
|
|
const { startOfMonthDay, dateCountOfMonth, dateCountOfLastMonth } = unref(days);
|
|
const offset = unref(offsetDay);
|
|
if (rowIndex >= 0 && rowIndex <= 1) {
|
|
const numberOfDaysFromPreviousMonth = startOfMonthDay + offset < 0 ? 7 + startOfMonthDay + offset : startOfMonthDay + offset;
|
|
if (columnIndex + rowIndex * 7 >= numberOfDaysFromPreviousMonth) {
|
|
cell.text = count;
|
|
return true;
|
|
} else {
|
|
cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - columnIndex % 7) + 1 + rowIndex * 7;
|
|
cell.type = "prev-month";
|
|
}
|
|
} else {
|
|
if (count <= dateCountOfMonth) {
|
|
cell.text = count;
|
|
} else {
|
|
cell.text = count - dateCountOfMonth;
|
|
cell.type = "next-month";
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
const setCellMetadata = (cell, { columnIndex, rowIndex }, count) => {
|
|
const { disabledDate: disabledDate2, cellClassName } = props;
|
|
const _selectedDate = unref(selectedDate);
|
|
const shouldIncrement = setDateText(cell, { count, rowIndex, columnIndex });
|
|
const cellDate = cell.dayjs.toDate();
|
|
cell.selected = _selectedDate.find((d) => d.valueOf() === cell.dayjs.valueOf());
|
|
cell.isSelected = !!cell.selected;
|
|
cell.isCurrent = isCurrent(cell);
|
|
cell.disabled = disabledDate2 == null ? void 0 : disabledDate2(cellDate);
|
|
cell.customClass = cellClassName == null ? void 0 : cellClassName(cellDate);
|
|
return shouldIncrement;
|
|
};
|
|
const setRowMetadata = (row) => {
|
|
if (props.selectionMode === "week") {
|
|
const [start, end] = props.showWeekNumber ? [1, 7] : [0, 6];
|
|
const isActive = isWeekActive(row[start + 1]);
|
|
row[start].inRange = isActive;
|
|
row[start].start = isActive;
|
|
row[end].inRange = isActive;
|
|
row[end].end = isActive;
|
|
}
|
|
};
|
|
const rows = computed(() => {
|
|
const { minDate, maxDate, rangeState, showWeekNumber } = props;
|
|
const offset = unref(offsetDay);
|
|
const rows_ = unref(tableRows);
|
|
const dateUnit = "day";
|
|
let count = 1;
|
|
if (showWeekNumber) {
|
|
for (let rowIndex = 0; rowIndex < 6; rowIndex++) {
|
|
if (!rows_[rowIndex][0]) {
|
|
rows_[rowIndex][0] = {
|
|
type: "week",
|
|
text: unref(startDate).add(rowIndex * 7 + 1, dateUnit).week()
|
|
};
|
|
}
|
|
}
|
|
}
|
|
buildPickerTable({ row: 6, column: 7 }, rows_, {
|
|
startDate: minDate,
|
|
columnIndexOffset: showWeekNumber ? 1 : 0,
|
|
nextEndDate: rangeState.endDate || maxDate || rangeState.selecting && minDate || null,
|
|
now: dayjs().locale(unref(lang)).startOf(dateUnit),
|
|
unit: dateUnit,
|
|
relativeDateGetter: (idx) => unref(startDate).add(idx - offset, dateUnit),
|
|
setCellMetadata: (...args) => {
|
|
if (setCellMetadata(...args, count)) {
|
|
count += 1;
|
|
}
|
|
},
|
|
setRowMetadata
|
|
});
|
|
return rows_;
|
|
});
|
|
watch(() => props.date, async () => {
|
|
var _a;
|
|
if ((_a = unref(tbodyRef)) == null ? void 0 : _a.contains(document.activeElement)) {
|
|
await nextTick();
|
|
await focus();
|
|
}
|
|
});
|
|
const focus = async () => {
|
|
var _a;
|
|
return (_a = unref(currentCellRef)) == null ? void 0 : _a.focus();
|
|
};
|
|
const isCurrent = (cell) => {
|
|
return props.selectionMode === "date" && isNormalDay(cell.type) && cellMatchesDate(cell, props.parsedValue);
|
|
};
|
|
const cellMatchesDate = (cell, date2) => {
|
|
if (!date2)
|
|
return false;
|
|
return dayjs(date2).locale(unref(lang)).isSame(props.date.date(Number(cell.text)), "day");
|
|
};
|
|
const getDateOfCell = (row, column) => {
|
|
const offsetFromStart = row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - unref(offsetDay);
|
|
return unref(startDate).add(offsetFromStart, "day");
|
|
};
|
|
const handleMouseMove = (event) => {
|
|
var _a;
|
|
if (!props.rangeState.selecting)
|
|
return;
|
|
let target = event.target;
|
|
if (target.tagName === "SPAN") {
|
|
target = (_a = target.parentNode) == null ? void 0 : _a.parentNode;
|
|
}
|
|
if (target.tagName === "DIV") {
|
|
target = target.parentNode;
|
|
}
|
|
if (target.tagName !== "TD")
|
|
return;
|
|
const row = target.parentNode.rowIndex - 1;
|
|
const column = target.cellIndex;
|
|
if (unref(rows)[row][column].disabled)
|
|
return;
|
|
if (row !== unref(lastRow) || column !== unref(lastColumn)) {
|
|
lastRow.value = row;
|
|
lastColumn.value = column;
|
|
emit("changerange", {
|
|
selecting: true,
|
|
endDate: getDateOfCell(row, column)
|
|
});
|
|
}
|
|
};
|
|
const isSelectedCell = (cell) => {
|
|
return !unref(hasCurrent) && (cell == null ? void 0 : cell.text) === 1 && cell.type === "normal" || cell.isCurrent;
|
|
};
|
|
const handleFocus = (event) => {
|
|
if (focusWithClick || unref(hasCurrent) || props.selectionMode !== "date")
|
|
return;
|
|
handlePickDate(event, true);
|
|
};
|
|
const handleMouseDown = (event) => {
|
|
const target = event.target.closest("td");
|
|
if (!target)
|
|
return;
|
|
focusWithClick = true;
|
|
};
|
|
const handleMouseUp = (event) => {
|
|
const target = event.target.closest("td");
|
|
if (!target)
|
|
return;
|
|
focusWithClick = false;
|
|
};
|
|
const handleRangePick = (newDate) => {
|
|
if (!props.rangeState.selecting || !props.minDate) {
|
|
emit("pick", { minDate: newDate, maxDate: null });
|
|
emit("select", true);
|
|
} else {
|
|
if (newDate >= props.minDate) {
|
|
emit("pick", { minDate: props.minDate, maxDate: newDate });
|
|
} else {
|
|
emit("pick", { minDate: newDate, maxDate: props.minDate });
|
|
}
|
|
emit("select", false);
|
|
}
|
|
};
|
|
const handleWeekPick = (newDate) => {
|
|
const weekNumber = newDate.week();
|
|
const value = `${newDate.year()}w${weekNumber}`;
|
|
emit("pick", {
|
|
year: newDate.year(),
|
|
week: weekNumber,
|
|
value,
|
|
date: newDate.startOf("week")
|
|
});
|
|
};
|
|
const handleDatesPick = (newDate, selected) => {
|
|
const newValue = selected ? castArray(props.parsedValue).filter((d) => (d == null ? void 0 : d.valueOf()) !== newDate.valueOf()) : castArray(props.parsedValue).concat([newDate]);
|
|
emit("pick", newValue);
|
|
};
|
|
const handlePickDate = (event, isKeyboardMovement = false) => {
|
|
const target = event.target.closest("td");
|
|
if (!target)
|
|
return;
|
|
const row = target.parentNode.rowIndex - 1;
|
|
const column = target.cellIndex;
|
|
const cell = unref(rows)[row][column];
|
|
if (cell.disabled || cell.type === "week")
|
|
return;
|
|
const newDate = getDateOfCell(row, column);
|
|
switch (props.selectionMode) {
|
|
case "range": {
|
|
handleRangePick(newDate);
|
|
break;
|
|
}
|
|
case "date": {
|
|
emit("pick", newDate, isKeyboardMovement);
|
|
break;
|
|
}
|
|
case "week": {
|
|
handleWeekPick(newDate);
|
|
break;
|
|
}
|
|
case "dates": {
|
|
handleDatesPick(newDate, !!cell.selected);
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
const isWeekActive = (cell) => {
|
|
if (props.selectionMode !== "week")
|
|
return false;
|
|
let newDate = props.date.startOf("day");
|
|
if (cell.type === "prev-month") {
|
|
newDate = newDate.subtract(1, "month");
|
|
}
|
|
if (cell.type === "next-month") {
|
|
newDate = newDate.add(1, "month");
|
|
}
|
|
newDate = newDate.date(Number.parseInt(cell.text, 10));
|
|
if (props.parsedValue && !Array.isArray(props.parsedValue)) {
|
|
const dayOffset = (props.parsedValue.day() - firstDayOfWeek + 7) % 7 - 1;
|
|
const weekDate = props.parsedValue.subtract(dayOffset, "day");
|
|
return weekDate.isSame(newDate, "day");
|
|
}
|
|
return false;
|
|
};
|
|
return {
|
|
WEEKS,
|
|
rows,
|
|
tbodyRef,
|
|
currentCellRef,
|
|
focus,
|
|
isCurrent,
|
|
isWeekActive,
|
|
isSelectedCell,
|
|
handlePickDate,
|
|
handleMouseUp,
|
|
handleMouseDown,
|
|
handleMouseMove,
|
|
handleFocus
|
|
};
|
|
};
|
|
const useBasicDateTableDOM = (props, {
|
|
isCurrent,
|
|
isWeekActive
|
|
}) => {
|
|
const ns = useNamespace("date-table");
|
|
const { t } = useLocale();
|
|
const tableKls = computed(() => [
|
|
ns.b(),
|
|
{ "is-week-mode": props.selectionMode === "week" }
|
|
]);
|
|
const tableLabel = computed(() => t("el.datepicker.dateTablePrompt"));
|
|
const weekLabel = computed(() => t("el.datepicker.week"));
|
|
const getCellClasses = (cell) => {
|
|
const classes = [];
|
|
if (isNormalDay(cell.type) && !cell.disabled) {
|
|
classes.push("available");
|
|
if (cell.type === "today") {
|
|
classes.push("today");
|
|
}
|
|
} else {
|
|
classes.push(cell.type);
|
|
}
|
|
if (isCurrent(cell)) {
|
|
classes.push("current");
|
|
}
|
|
if (cell.inRange && (isNormalDay(cell.type) || props.selectionMode === "week")) {
|
|
classes.push("in-range");
|
|
if (cell.start) {
|
|
classes.push("start-date");
|
|
}
|
|
if (cell.end) {
|
|
classes.push("end-date");
|
|
}
|
|
}
|
|
if (cell.disabled) {
|
|
classes.push("disabled");
|
|
}
|
|
if (cell.selected) {
|
|
classes.push("selected");
|
|
}
|
|
if (cell.customClass) {
|
|
classes.push(cell.customClass);
|
|
}
|
|
return classes.join(" ");
|
|
};
|
|
const getRowKls = (cell) => [
|
|
ns.e("row"),
|
|
{ current: isWeekActive(cell) }
|
|
];
|
|
return {
|
|
tableKls,
|
|
tableLabel,
|
|
weekLabel,
|
|
getCellClasses,
|
|
getRowKls,
|
|
t
|
|
};
|
|
};
|
|
const basicCellProps = buildProps({
|
|
cell: {
|
|
type: definePropType(Object)
|
|
}
|
|
});
|
|
var ElDatePickerCell = defineComponent({
|
|
name: "ElDatePickerCell",
|
|
props: basicCellProps,
|
|
setup(props) {
|
|
const ns = useNamespace("date-table-cell");
|
|
const {
|
|
slots
|
|
} = inject(ROOT_PICKER_INJECTION_KEY);
|
|
return () => {
|
|
const {
|
|
cell
|
|
} = props;
|
|
if (slots.default) {
|
|
const list = slots.default(cell).filter((item) => {
|
|
return item.patchFlag !== -2 && item.type.toString() !== "Symbol(Comment)" && item.type.toString() !== "Symbol(v-cmt)";
|
|
});
|
|
if (list.length) {
|
|
return list;
|
|
}
|
|
}
|
|
return createVNode("div", {
|
|
"class": ns.b()
|
|
}, [createVNode("span", {
|
|
"class": ns.e("text")
|
|
}, [cell == null ? void 0 : cell.text])]);
|
|
};
|
|
}
|
|
});
|
|
const _hoisted_1$5 = ["aria-label"];
|
|
const _hoisted_2$5 = {
|
|
key: 0,
|
|
scope: "col"
|
|
};
|
|
const _hoisted_3$5 = ["aria-label"];
|
|
const _hoisted_4$3 = ["aria-current", "aria-selected", "tabindex"];
|
|
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
__name: "basic-date-table",
|
|
props: basicDateTableProps,
|
|
emits: basicDateTableEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const {
|
|
WEEKS,
|
|
rows,
|
|
tbodyRef,
|
|
currentCellRef,
|
|
focus,
|
|
isCurrent,
|
|
isWeekActive,
|
|
isSelectedCell,
|
|
handlePickDate,
|
|
handleMouseUp,
|
|
handleMouseDown,
|
|
handleMouseMove,
|
|
handleFocus
|
|
} = useBasicDateTable(props, emit);
|
|
const { tableLabel, tableKls, weekLabel, getCellClasses, getRowKls, t } = useBasicDateTableDOM(props, {
|
|
isCurrent,
|
|
isWeekActive
|
|
});
|
|
expose({
|
|
focus
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("table", {
|
|
"aria-label": unref(tableLabel),
|
|
class: normalizeClass(unref(tableKls)),
|
|
cellspacing: "0",
|
|
cellpadding: "0",
|
|
role: "grid",
|
|
onClick: _cache[1] || (_cache[1] = (...args) => unref(handlePickDate) && unref(handlePickDate)(...args)),
|
|
onMousemove: _cache[2] || (_cache[2] = (...args) => unref(handleMouseMove) && unref(handleMouseMove)(...args)),
|
|
onMousedown: _cache[3] || (_cache[3] = withModifiers((...args) => unref(handleMouseDown) && unref(handleMouseDown)(...args), ["prevent"])),
|
|
onMouseup: _cache[4] || (_cache[4] = (...args) => unref(handleMouseUp) && unref(handleMouseUp)(...args))
|
|
}, [
|
|
createElementVNode("tbody", {
|
|
ref_key: "tbodyRef",
|
|
ref: tbodyRef
|
|
}, [
|
|
createElementVNode("tr", null, [
|
|
_ctx.showWeekNumber ? (openBlock(), createElementBlock("th", _hoisted_2$5, toDisplayString(unref(weekLabel)), 1)) : createCommentVNode("v-if", true),
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(WEEKS), (week, key) => {
|
|
return openBlock(), createElementBlock("th", {
|
|
key,
|
|
"aria-label": unref(t)("el.datepicker.weeksFull." + week),
|
|
scope: "col"
|
|
}, toDisplayString(unref(t)("el.datepicker.weeks." + week)), 9, _hoisted_3$5);
|
|
}), 128))
|
|
]),
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, rowKey) => {
|
|
return openBlock(), createElementBlock("tr", {
|
|
key: rowKey,
|
|
class: normalizeClass(unref(getRowKls)(row[1]))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, columnKey) => {
|
|
return openBlock(), createElementBlock("td", {
|
|
key: `${rowKey}.${columnKey}`,
|
|
ref_for: true,
|
|
ref: (el) => unref(isSelectedCell)(cell) && (currentCellRef.value = el),
|
|
class: normalizeClass(unref(getCellClasses)(cell)),
|
|
"aria-current": cell.isCurrent ? "date" : void 0,
|
|
"aria-selected": cell.isCurrent,
|
|
tabindex: unref(isSelectedCell)(cell) ? 0 : -1,
|
|
onFocus: _cache[0] || (_cache[0] = (...args) => unref(handleFocus) && unref(handleFocus)(...args))
|
|
}, [
|
|
createVNode(unref(ElDatePickerCell), { cell }, null, 8, ["cell"])
|
|
], 42, _hoisted_4$3);
|
|
}), 128))
|
|
], 2);
|
|
}), 128))
|
|
], 512)
|
|
], 42, _hoisted_1$5);
|
|
};
|
|
}
|
|
});
|
|
var DateTable = /* @__PURE__ */ _export_sfc$1(_sfc_main$6, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker/src/date-picker-com/basic-date-table.vue"]]);
|
|
const basicMonthTableProps = buildProps({
|
|
...datePickerSharedProps,
|
|
selectionMode: selectionModeWithDefault("month")
|
|
});
|
|
const _hoisted_1$4 = ["aria-label"];
|
|
const _hoisted_2$4 = ["aria-selected", "aria-label", "tabindex", "onKeydown"];
|
|
const _hoisted_3$4 = { class: "cell" };
|
|
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
__name: "basic-month-table",
|
|
props: basicMonthTableProps,
|
|
emits: ["changerange", "pick", "select"],
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const datesInMonth = (year, month, lang2) => {
|
|
const firstDay = dayjs().locale(lang2).startOf("month").month(month).year(year);
|
|
const numOfDays = firstDay.daysInMonth();
|
|
return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
|
|
};
|
|
const ns = useNamespace("month-table");
|
|
const { t, lang } = useLocale();
|
|
const tbodyRef = ref();
|
|
const currentCellRef = ref();
|
|
const months = ref(props.date.locale("en").localeData().monthsShort().map((_) => _.toLowerCase()));
|
|
const tableRows = ref([
|
|
[],
|
|
[],
|
|
[]
|
|
]);
|
|
const lastRow = ref();
|
|
const lastColumn = ref();
|
|
const rows = computed(() => {
|
|
var _a, _b;
|
|
const rows2 = tableRows.value;
|
|
const now = dayjs().locale(lang.value).startOf("month");
|
|
for (let i = 0; i < 3; i++) {
|
|
const row = rows2[i];
|
|
for (let j = 0; j < 4; j++) {
|
|
const cell = row[j] || (row[j] = {
|
|
row: i,
|
|
column: j,
|
|
type: "normal",
|
|
inRange: false,
|
|
start: false,
|
|
end: false,
|
|
text: -1,
|
|
disabled: false
|
|
});
|
|
cell.type = "normal";
|
|
const index2 = i * 4 + j;
|
|
const calTime = props.date.startOf("year").month(index2);
|
|
const calEndDate = props.rangeState.endDate || props.maxDate || props.rangeState.selecting && props.minDate || null;
|
|
cell.inRange = !!(props.minDate && calTime.isSameOrAfter(props.minDate, "month") && calEndDate && calTime.isSameOrBefore(calEndDate, "month")) || !!(props.minDate && calTime.isSameOrBefore(props.minDate, "month") && calEndDate && calTime.isSameOrAfter(calEndDate, "month"));
|
|
if ((_a = props.minDate) == null ? void 0 : _a.isSameOrAfter(calEndDate)) {
|
|
cell.start = !!(calEndDate && calTime.isSame(calEndDate, "month"));
|
|
cell.end = props.minDate && calTime.isSame(props.minDate, "month");
|
|
} else {
|
|
cell.start = !!(props.minDate && calTime.isSame(props.minDate, "month"));
|
|
cell.end = !!(calEndDate && calTime.isSame(calEndDate, "month"));
|
|
}
|
|
const isToday = now.isSame(calTime);
|
|
if (isToday) {
|
|
cell.type = "today";
|
|
}
|
|
cell.text = index2;
|
|
cell.disabled = ((_b = props.disabledDate) == null ? void 0 : _b.call(props, calTime.toDate())) || false;
|
|
}
|
|
}
|
|
return rows2;
|
|
});
|
|
const focus = () => {
|
|
var _a;
|
|
(_a = currentCellRef.value) == null ? void 0 : _a.focus();
|
|
};
|
|
const getCellStyle = (cell) => {
|
|
const style = {};
|
|
const year = props.date.year();
|
|
const today = /* @__PURE__ */ new Date();
|
|
const month = cell.text;
|
|
style.disabled = props.disabledDate ? datesInMonth(year, month, lang.value).every(props.disabledDate) : false;
|
|
style.current = castArray(props.parsedValue).findIndex((date2) => dayjs.isDayjs(date2) && date2.year() === year && date2.month() === month) >= 0;
|
|
style.today = today.getFullYear() === year && today.getMonth() === month;
|
|
if (cell.inRange) {
|
|
style["in-range"] = true;
|
|
if (cell.start) {
|
|
style["start-date"] = true;
|
|
}
|
|
if (cell.end) {
|
|
style["end-date"] = true;
|
|
}
|
|
}
|
|
return style;
|
|
};
|
|
const isSelectedCell = (cell) => {
|
|
const year = props.date.year();
|
|
const month = cell.text;
|
|
return castArray(props.date).findIndex((date2) => date2.year() === year && date2.month() === month) >= 0;
|
|
};
|
|
const handleMouseMove = (event) => {
|
|
var _a;
|
|
if (!props.rangeState.selecting)
|
|
return;
|
|
let target = event.target;
|
|
if (target.tagName === "A") {
|
|
target = (_a = target.parentNode) == null ? void 0 : _a.parentNode;
|
|
}
|
|
if (target.tagName === "DIV") {
|
|
target = target.parentNode;
|
|
}
|
|
if (target.tagName !== "TD")
|
|
return;
|
|
const row = target.parentNode.rowIndex;
|
|
const column = target.cellIndex;
|
|
if (rows.value[row][column].disabled)
|
|
return;
|
|
if (row !== lastRow.value || column !== lastColumn.value) {
|
|
lastRow.value = row;
|
|
lastColumn.value = column;
|
|
emit("changerange", {
|
|
selecting: true,
|
|
endDate: props.date.startOf("year").month(row * 4 + column)
|
|
});
|
|
}
|
|
};
|
|
const handleMonthTableClick = (event) => {
|
|
var _a;
|
|
const target = (_a = event.target) == null ? void 0 : _a.closest("td");
|
|
if ((target == null ? void 0 : target.tagName) !== "TD")
|
|
return;
|
|
if (hasClass(target, "disabled"))
|
|
return;
|
|
const column = target.cellIndex;
|
|
const row = target.parentNode.rowIndex;
|
|
const month = row * 4 + column;
|
|
const newDate = props.date.startOf("year").month(month);
|
|
if (props.selectionMode === "range") {
|
|
if (!props.rangeState.selecting) {
|
|
emit("pick", { minDate: newDate, maxDate: null });
|
|
emit("select", true);
|
|
} else {
|
|
if (props.minDate && newDate >= props.minDate) {
|
|
emit("pick", { minDate: props.minDate, maxDate: newDate });
|
|
} else {
|
|
emit("pick", { minDate: newDate, maxDate: props.minDate });
|
|
}
|
|
emit("select", false);
|
|
}
|
|
} else {
|
|
emit("pick", month);
|
|
}
|
|
};
|
|
watch(() => props.date, async () => {
|
|
var _a, _b;
|
|
if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
|
|
await nextTick();
|
|
(_b = currentCellRef.value) == null ? void 0 : _b.focus();
|
|
}
|
|
});
|
|
expose({
|
|
focus
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("table", {
|
|
role: "grid",
|
|
"aria-label": unref(t)("el.datepicker.monthTablePrompt"),
|
|
class: normalizeClass(unref(ns).b()),
|
|
onClick: handleMonthTableClick,
|
|
onMousemove: handleMouseMove
|
|
}, [
|
|
createElementVNode("tbody", {
|
|
ref_key: "tbodyRef",
|
|
ref: tbodyRef
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, key) => {
|
|
return openBlock(), createElementBlock("tr", { key }, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, key_) => {
|
|
return openBlock(), createElementBlock("td", {
|
|
key: key_,
|
|
ref_for: true,
|
|
ref: (el) => isSelectedCell(cell) && (currentCellRef.value = el),
|
|
class: normalizeClass(getCellStyle(cell)),
|
|
"aria-selected": `${isSelectedCell(cell)}`,
|
|
"aria-label": unref(t)(`el.datepicker.month${+cell.text + 1}`),
|
|
tabindex: isSelectedCell(cell) ? 0 : -1,
|
|
onKeydown: [
|
|
withKeys(withModifiers(handleMonthTableClick, ["prevent", "stop"]), ["space"]),
|
|
withKeys(withModifiers(handleMonthTableClick, ["prevent", "stop"]), ["enter"])
|
|
]
|
|
}, [
|
|
createElementVNode("div", null, [
|
|
createElementVNode("span", _hoisted_3$4, toDisplayString(unref(t)("el.datepicker.months." + months.value[cell.text])), 1)
|
|
])
|
|
], 42, _hoisted_2$4);
|
|
}), 128))
|
|
]);
|
|
}), 128))
|
|
], 512)
|
|
], 42, _hoisted_1$4);
|
|
};
|
|
}
|
|
});
|
|
var MonthTable = /* @__PURE__ */ _export_sfc$1(_sfc_main$5, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker/src/date-picker-com/basic-month-table.vue"]]);
|
|
const { date, disabledDate, parsedValue } = datePickerSharedProps;
|
|
const basicYearTableProps = buildProps({
|
|
date,
|
|
disabledDate,
|
|
parsedValue
|
|
});
|
|
const _hoisted_1$3 = ["aria-label"];
|
|
const _hoisted_2$3 = ["aria-selected", "tabindex", "onKeydown"];
|
|
const _hoisted_3$3 = { class: "cell" };
|
|
const _hoisted_4$2 = { key: 1 };
|
|
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
__name: "basic-year-table",
|
|
props: basicYearTableProps,
|
|
emits: ["pick"],
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const datesInYear = (year, lang2) => {
|
|
const firstDay = dayjs(String(year)).locale(lang2).startOf("year");
|
|
const lastDay = firstDay.endOf("year");
|
|
const numOfDays = lastDay.dayOfYear();
|
|
return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
|
|
};
|
|
const ns = useNamespace("year-table");
|
|
const { t, lang } = useLocale();
|
|
const tbodyRef = ref();
|
|
const currentCellRef = ref();
|
|
const startYear = computed(() => {
|
|
return Math.floor(props.date.year() / 10) * 10;
|
|
});
|
|
const focus = () => {
|
|
var _a;
|
|
(_a = currentCellRef.value) == null ? void 0 : _a.focus();
|
|
};
|
|
const getCellKls = (year) => {
|
|
const kls = {};
|
|
const today = dayjs().locale(lang.value);
|
|
kls.disabled = props.disabledDate ? datesInYear(year, lang.value).every(props.disabledDate) : false;
|
|
kls.current = castArray(props.parsedValue).findIndex((d) => d.year() === year) >= 0;
|
|
kls.today = today.year() === year;
|
|
return kls;
|
|
};
|
|
const isSelectedCell = (year) => {
|
|
return year === startYear.value && props.date.year() < startYear.value && props.date.year() > startYear.value + 9 || castArray(props.date).findIndex((date2) => date2.year() === year) >= 0;
|
|
};
|
|
const handleYearTableClick = (event) => {
|
|
const clickTarget = event.target;
|
|
const target = clickTarget.closest("td");
|
|
if (target && target.textContent) {
|
|
if (hasClass(target, "disabled"))
|
|
return;
|
|
const year = target.textContent || target.innerText;
|
|
emit("pick", Number(year));
|
|
}
|
|
};
|
|
watch(() => props.date, async () => {
|
|
var _a, _b;
|
|
if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
|
|
await nextTick();
|
|
(_b = currentCellRef.value) == null ? void 0 : _b.focus();
|
|
}
|
|
});
|
|
expose({
|
|
focus
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("table", {
|
|
role: "grid",
|
|
"aria-label": unref(t)("el.datepicker.yearTablePrompt"),
|
|
class: normalizeClass(unref(ns).b()),
|
|
onClick: handleYearTableClick
|
|
}, [
|
|
createElementVNode("tbody", {
|
|
ref_key: "tbodyRef",
|
|
ref: tbodyRef
|
|
}, [
|
|
(openBlock(), createElementBlock(Fragment, null, renderList(3, (_, i) => {
|
|
return createElementVNode("tr", { key: i }, [
|
|
(openBlock(), createElementBlock(Fragment, null, renderList(4, (__, j) => {
|
|
return openBlock(), createElementBlock(Fragment, {
|
|
key: i + "_" + j
|
|
}, [
|
|
i * 4 + j < 10 ? (openBlock(), createElementBlock("td", {
|
|
key: 0,
|
|
ref_for: true,
|
|
ref: (el) => isSelectedCell(unref(startYear) + i * 4 + j) && (currentCellRef.value = el),
|
|
class: normalizeClass(["available", getCellKls(unref(startYear) + i * 4 + j)]),
|
|
"aria-selected": `${isSelectedCell(unref(startYear) + i * 4 + j)}`,
|
|
tabindex: isSelectedCell(unref(startYear) + i * 4 + j) ? 0 : -1,
|
|
onKeydown: [
|
|
withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["space"]),
|
|
withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["enter"])
|
|
]
|
|
}, [
|
|
createElementVNode("span", _hoisted_3$3, toDisplayString(unref(startYear) + i * 4 + j), 1)
|
|
], 42, _hoisted_2$3)) : (openBlock(), createElementBlock("td", _hoisted_4$2))
|
|
], 64);
|
|
}), 64))
|
|
]);
|
|
}), 64))
|
|
], 512)
|
|
], 10, _hoisted_1$3);
|
|
};
|
|
}
|
|
});
|
|
var YearTable = /* @__PURE__ */ _export_sfc$1(_sfc_main$4, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker/src/date-picker-com/basic-year-table.vue"]]);
|
|
const _hoisted_1$2 = ["onClick"];
|
|
const _hoisted_2$2 = ["aria-label"];
|
|
const _hoisted_3$2 = ["aria-label"];
|
|
const _hoisted_4$1 = ["aria-label"];
|
|
const _hoisted_5$1 = ["aria-label"];
|
|
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
__name: "panel-date-pick",
|
|
props: panelDatePickProps,
|
|
emits: ["pick", "set-picker-option", "panel-change"],
|
|
setup(__props, { emit: contextEmit }) {
|
|
const props = __props;
|
|
const timeWithinRange = (_, __, ___) => true;
|
|
const ppNs = useNamespace("picker-panel");
|
|
const dpNs = useNamespace("date-picker");
|
|
const attrs = useAttrs$1();
|
|
const slots = useSlots();
|
|
const { t, lang } = useLocale();
|
|
const pickerBase = inject("EP_PICKER_BASE");
|
|
const popper = inject(TOOLTIP_INJECTION_KEY);
|
|
const { shortcuts, disabledDate: disabledDate2, cellClassName, defaultTime } = pickerBase.props;
|
|
const defaultValue = toRef(pickerBase.props, "defaultValue");
|
|
const currentViewRef = ref();
|
|
const innerDate = ref(dayjs().locale(lang.value));
|
|
const isChangeToNow = ref(false);
|
|
let isShortcut = false;
|
|
const defaultTimeD = computed(() => {
|
|
return dayjs(defaultTime).locale(lang.value);
|
|
});
|
|
const month = computed(() => {
|
|
return innerDate.value.month();
|
|
});
|
|
const year = computed(() => {
|
|
return innerDate.value.year();
|
|
});
|
|
const selectableRange = ref([]);
|
|
const userInputDate = ref(null);
|
|
const userInputTime = ref(null);
|
|
const checkDateWithinRange = (date2) => {
|
|
return selectableRange.value.length > 0 ? timeWithinRange(date2, selectableRange.value, props.format || "HH:mm:ss") : true;
|
|
};
|
|
const formatEmit = (emitDayjs) => {
|
|
if (defaultTime && !visibleTime.value && !isChangeToNow.value && !isShortcut) {
|
|
return defaultTimeD.value.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date());
|
|
}
|
|
if (showTime.value)
|
|
return emitDayjs.millisecond(0);
|
|
return emitDayjs.startOf("day");
|
|
};
|
|
const emit = (value, ...args) => {
|
|
if (!value) {
|
|
contextEmit("pick", value, ...args);
|
|
} else if (isArray(value)) {
|
|
const dates = value.map(formatEmit);
|
|
contextEmit("pick", dates, ...args);
|
|
} else {
|
|
contextEmit("pick", formatEmit(value), ...args);
|
|
}
|
|
userInputDate.value = null;
|
|
userInputTime.value = null;
|
|
isChangeToNow.value = false;
|
|
isShortcut = false;
|
|
};
|
|
const handleDatePick = (value, keepOpen) => {
|
|
if (selectionMode.value === "date") {
|
|
value = value;
|
|
let newDate = props.parsedValue ? props.parsedValue.year(value.year()).month(value.month()).date(value.date()) : value;
|
|
if (!checkDateWithinRange(newDate)) {
|
|
newDate = selectableRange.value[0][0].year(value.year()).month(value.month()).date(value.date());
|
|
}
|
|
innerDate.value = newDate;
|
|
emit(newDate, showTime.value || keepOpen);
|
|
} else if (selectionMode.value === "week") {
|
|
emit(value.date);
|
|
} else if (selectionMode.value === "dates") {
|
|
emit(value, true);
|
|
}
|
|
};
|
|
const moveByMonth = (forward) => {
|
|
const action = forward ? "add" : "subtract";
|
|
innerDate.value = innerDate.value[action](1, "month");
|
|
handlePanelChange("month");
|
|
};
|
|
const moveByYear = (forward) => {
|
|
const currentDate = innerDate.value;
|
|
const action = forward ? "add" : "subtract";
|
|
innerDate.value = currentView.value === "year" ? currentDate[action](10, "year") : currentDate[action](1, "year");
|
|
handlePanelChange("year");
|
|
};
|
|
const currentView = ref("date");
|
|
const yearLabel = computed(() => {
|
|
const yearTranslation = t("el.datepicker.year");
|
|
if (currentView.value === "year") {
|
|
const startYear = Math.floor(year.value / 10) * 10;
|
|
if (yearTranslation) {
|
|
return `${startYear} ${yearTranslation} - ${startYear + 9} ${yearTranslation}`;
|
|
}
|
|
return `${startYear} - ${startYear + 9}`;
|
|
}
|
|
return `${year.value} ${yearTranslation}`;
|
|
});
|
|
const handleShortcutClick = (shortcut) => {
|
|
const shortcutValue = isFunction(shortcut.value) ? shortcut.value() : shortcut.value;
|
|
if (shortcutValue) {
|
|
isShortcut = true;
|
|
emit(dayjs(shortcutValue).locale(lang.value));
|
|
return;
|
|
}
|
|
if (shortcut.onClick) {
|
|
shortcut.onClick({
|
|
attrs,
|
|
slots,
|
|
emit: contextEmit
|
|
});
|
|
}
|
|
};
|
|
const selectionMode = computed(() => {
|
|
const { type } = props;
|
|
if (["week", "month", "year", "dates"].includes(type))
|
|
return type;
|
|
return "date";
|
|
});
|
|
const keyboardMode = computed(() => {
|
|
return selectionMode.value === "date" ? currentView.value : selectionMode.value;
|
|
});
|
|
const hasShortcuts = computed(() => !!shortcuts.length);
|
|
const handleMonthPick = async (month2) => {
|
|
innerDate.value = innerDate.value.startOf("month").month(month2);
|
|
if (selectionMode.value === "month") {
|
|
emit(innerDate.value, false);
|
|
} else {
|
|
currentView.value = "date";
|
|
if (["month", "year", "date", "week"].includes(selectionMode.value)) {
|
|
emit(innerDate.value, true);
|
|
await nextTick();
|
|
handleFocusPicker();
|
|
}
|
|
}
|
|
handlePanelChange("month");
|
|
};
|
|
const handleYearPick = async (year2) => {
|
|
if (selectionMode.value === "year") {
|
|
innerDate.value = innerDate.value.startOf("year").year(year2);
|
|
emit(innerDate.value, false);
|
|
} else {
|
|
innerDate.value = innerDate.value.year(year2);
|
|
currentView.value = "month";
|
|
if (["month", "year", "date", "week"].includes(selectionMode.value)) {
|
|
emit(innerDate.value, true);
|
|
await nextTick();
|
|
handleFocusPicker();
|
|
}
|
|
}
|
|
handlePanelChange("year");
|
|
};
|
|
const showPicker = async (view) => {
|
|
currentView.value = view;
|
|
await nextTick();
|
|
handleFocusPicker();
|
|
};
|
|
const showTime = computed(() => props.type === "datetime" || props.type === "datetimerange");
|
|
const footerVisible = computed(() => {
|
|
return showTime.value || selectionMode.value === "dates";
|
|
});
|
|
const disabledConfirm = computed(() => {
|
|
if (!disabledDate2)
|
|
return false;
|
|
if (!props.parsedValue)
|
|
return true;
|
|
if (isArray(props.parsedValue)) {
|
|
return disabledDate2(props.parsedValue[0].toDate());
|
|
}
|
|
return disabledDate2(props.parsedValue.toDate());
|
|
});
|
|
const onConfirm = () => {
|
|
if (selectionMode.value === "dates") {
|
|
emit(props.parsedValue);
|
|
} else {
|
|
let result = props.parsedValue;
|
|
if (!result) {
|
|
const defaultTimeD2 = dayjs(defaultTime).locale(lang.value);
|
|
const defaultValueD = getDefaultValue2();
|
|
result = defaultTimeD2.year(defaultValueD.year()).month(defaultValueD.month()).date(defaultValueD.date());
|
|
}
|
|
innerDate.value = result;
|
|
emit(result);
|
|
}
|
|
};
|
|
const disabledNow = computed(() => {
|
|
if (!disabledDate2)
|
|
return false;
|
|
return disabledDate2(dayjs().locale(lang.value).toDate());
|
|
});
|
|
const changeToNow = () => {
|
|
const now = dayjs().locale(lang.value);
|
|
const nowDate = now.toDate();
|
|
isChangeToNow.value = true;
|
|
if ((!disabledDate2 || !disabledDate2(nowDate)) && checkDateWithinRange(nowDate)) {
|
|
innerDate.value = dayjs().locale(lang.value);
|
|
emit(innerDate.value);
|
|
}
|
|
};
|
|
const timeFormat = computed(() => {
|
|
return props.timeFormat || extractTimeFormat(props.format);
|
|
});
|
|
const dateFormat = computed(() => {
|
|
return props.dateFormat || extractDateFormat(props.format);
|
|
});
|
|
const visibleTime = computed(() => {
|
|
if (userInputTime.value)
|
|
return userInputTime.value;
|
|
if (!props.parsedValue && !defaultValue.value)
|
|
return;
|
|
return (props.parsedValue || innerDate.value).format(timeFormat.value);
|
|
});
|
|
const visibleDate = computed(() => {
|
|
if (userInputDate.value)
|
|
return userInputDate.value;
|
|
if (!props.parsedValue && !defaultValue.value)
|
|
return;
|
|
return (props.parsedValue || innerDate.value).format(dateFormat.value);
|
|
});
|
|
const timePickerVisible = ref(false);
|
|
const onTimePickerInputFocus = () => {
|
|
timePickerVisible.value = true;
|
|
};
|
|
const handleTimePickClose = () => {
|
|
timePickerVisible.value = false;
|
|
};
|
|
const getUnits = (date2) => {
|
|
return {
|
|
hour: date2.hour(),
|
|
minute: date2.minute(),
|
|
second: date2.second(),
|
|
year: date2.year(),
|
|
month: date2.month(),
|
|
date: date2.date()
|
|
};
|
|
};
|
|
const handleTimePick = (value, visible, first) => {
|
|
const { hour, minute, second } = getUnits(value);
|
|
const newDate = props.parsedValue ? props.parsedValue.hour(hour).minute(minute).second(second) : value;
|
|
innerDate.value = newDate;
|
|
emit(innerDate.value, true);
|
|
if (!first) {
|
|
timePickerVisible.value = visible;
|
|
}
|
|
};
|
|
const handleVisibleTimeChange = (value) => {
|
|
const newDate = dayjs(value, timeFormat.value).locale(lang.value);
|
|
if (newDate.isValid() && checkDateWithinRange(newDate)) {
|
|
const { year: year2, month: month2, date: date2 } = getUnits(innerDate.value);
|
|
innerDate.value = newDate.year(year2).month(month2).date(date2);
|
|
userInputTime.value = null;
|
|
timePickerVisible.value = false;
|
|
emit(innerDate.value, true);
|
|
}
|
|
};
|
|
const handleVisibleDateChange = (value) => {
|
|
const newDate = dayjs(value, dateFormat.value).locale(lang.value);
|
|
if (newDate.isValid()) {
|
|
if (disabledDate2 && disabledDate2(newDate.toDate())) {
|
|
return;
|
|
}
|
|
const { hour, minute, second } = getUnits(innerDate.value);
|
|
innerDate.value = newDate.hour(hour).minute(minute).second(second);
|
|
userInputDate.value = null;
|
|
emit(innerDate.value, true);
|
|
}
|
|
};
|
|
const isValidValue = (date2) => {
|
|
return dayjs.isDayjs(date2) && date2.isValid() && (disabledDate2 ? !disabledDate2(date2.toDate()) : true);
|
|
};
|
|
const formatToString = (value) => {
|
|
if (selectionMode.value === "dates") {
|
|
return value.map((_) => _.format(props.format));
|
|
}
|
|
return value.format(props.format);
|
|
};
|
|
const parseUserInput = (value) => {
|
|
return dayjs(value, props.format).locale(lang.value);
|
|
};
|
|
const getDefaultValue2 = () => {
|
|
const parseDate2 = dayjs(defaultValue.value).locale(lang.value);
|
|
if (!defaultValue.value) {
|
|
const defaultTimeDValue = defaultTimeD.value;
|
|
return dayjs().hour(defaultTimeDValue.hour()).minute(defaultTimeDValue.minute()).second(defaultTimeDValue.second()).locale(lang.value);
|
|
}
|
|
return parseDate2;
|
|
};
|
|
const handleFocusPicker = async () => {
|
|
var _a;
|
|
if (["week", "month", "year", "date"].includes(selectionMode.value)) {
|
|
(_a = currentViewRef.value) == null ? void 0 : _a.focus();
|
|
if (selectionMode.value === "week") {
|
|
handleKeyControl(EVENT_CODE.down);
|
|
}
|
|
}
|
|
};
|
|
const handleKeydownTable = (event) => {
|
|
const { code } = event;
|
|
const validCode = [
|
|
EVENT_CODE.up,
|
|
EVENT_CODE.down,
|
|
EVENT_CODE.left,
|
|
EVENT_CODE.right,
|
|
EVENT_CODE.home,
|
|
EVENT_CODE.end,
|
|
EVENT_CODE.pageUp,
|
|
EVENT_CODE.pageDown
|
|
];
|
|
if (validCode.includes(code)) {
|
|
handleKeyControl(code);
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
}
|
|
if ([EVENT_CODE.enter, EVENT_CODE.space, EVENT_CODE.numpadEnter].includes(code) && userInputDate.value === null && userInputTime.value === null) {
|
|
event.preventDefault();
|
|
emit(innerDate.value, false);
|
|
}
|
|
};
|
|
const handleKeyControl = (code) => {
|
|
var _a;
|
|
const { up, down, left, right, home, end, pageUp, pageDown } = EVENT_CODE;
|
|
const mapping = {
|
|
year: {
|
|
[up]: -4,
|
|
[down]: 4,
|
|
[left]: -1,
|
|
[right]: 1,
|
|
offset: (date2, step) => date2.setFullYear(date2.getFullYear() + step)
|
|
},
|
|
month: {
|
|
[up]: -4,
|
|
[down]: 4,
|
|
[left]: -1,
|
|
[right]: 1,
|
|
offset: (date2, step) => date2.setMonth(date2.getMonth() + step)
|
|
},
|
|
week: {
|
|
[up]: -1,
|
|
[down]: 1,
|
|
[left]: -1,
|
|
[right]: 1,
|
|
offset: (date2, step) => date2.setDate(date2.getDate() + step * 7)
|
|
},
|
|
date: {
|
|
[up]: -7,
|
|
[down]: 7,
|
|
[left]: -1,
|
|
[right]: 1,
|
|
[home]: (date2) => -date2.getDay(),
|
|
[end]: (date2) => -date2.getDay() + 6,
|
|
[pageUp]: (date2) => -new Date(date2.getFullYear(), date2.getMonth(), 0).getDate(),
|
|
[pageDown]: (date2) => new Date(date2.getFullYear(), date2.getMonth() + 1, 0).getDate(),
|
|
offset: (date2, step) => date2.setDate(date2.getDate() + step)
|
|
}
|
|
};
|
|
const newDate = innerDate.value.toDate();
|
|
while (Math.abs(innerDate.value.diff(newDate, "year", true)) < 1) {
|
|
const map = mapping[keyboardMode.value];
|
|
if (!map)
|
|
return;
|
|
map.offset(newDate, isFunction(map[code]) ? map[code](newDate) : (_a = map[code]) != null ? _a : 0);
|
|
if (disabledDate2 && disabledDate2(newDate)) {
|
|
break;
|
|
}
|
|
const result = dayjs(newDate).locale(lang.value);
|
|
innerDate.value = result;
|
|
contextEmit("pick", result, true);
|
|
break;
|
|
}
|
|
};
|
|
const handlePanelChange = (mode) => {
|
|
contextEmit("panel-change", innerDate.value.toDate(), mode, currentView.value);
|
|
};
|
|
watch(() => selectionMode.value, (val) => {
|
|
if (["month", "year"].includes(val)) {
|
|
currentView.value = val;
|
|
return;
|
|
}
|
|
currentView.value = "date";
|
|
}, { immediate: true });
|
|
watch(() => currentView.value, () => {
|
|
popper == null ? void 0 : popper.updatePopper();
|
|
});
|
|
watch(() => defaultValue.value, (val) => {
|
|
if (val) {
|
|
innerDate.value = getDefaultValue2();
|
|
}
|
|
}, { immediate: true });
|
|
watch(() => props.parsedValue, (val) => {
|
|
if (val) {
|
|
if (selectionMode.value === "dates")
|
|
return;
|
|
if (Array.isArray(val))
|
|
return;
|
|
innerDate.value = val;
|
|
} else {
|
|
innerDate.value = getDefaultValue2();
|
|
}
|
|
}, { immediate: true });
|
|
contextEmit("set-picker-option", ["isValidValue", isValidValue]);
|
|
contextEmit("set-picker-option", ["formatToString", formatToString]);
|
|
contextEmit("set-picker-option", ["parseUserInput", parseUserInput]);
|
|
contextEmit("set-picker-option", ["handleFocusPicker", handleFocusPicker]);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([
|
|
unref(ppNs).b(),
|
|
unref(dpNs).b(),
|
|
{
|
|
"has-sidebar": _ctx.$slots.sidebar || unref(hasShortcuts),
|
|
"has-time": unref(showTime)
|
|
}
|
|
])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("body-wrapper"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "sidebar", {
|
|
class: normalizeClass(unref(ppNs).e("sidebar"))
|
|
}),
|
|
unref(hasShortcuts) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ppNs).e("sidebar"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
|
|
return openBlock(), createElementBlock("button", {
|
|
key,
|
|
type: "button",
|
|
class: normalizeClass(unref(ppNs).e("shortcut")),
|
|
onClick: ($event) => handleShortcutClick(shortcut)
|
|
}, toDisplayString(shortcut.text), 11, _hoisted_1$2);
|
|
}), 128))
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("body"))
|
|
}, [
|
|
unref(showTime) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(dpNs).e("time-header"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(dpNs).e("editor-wrap"))
|
|
}, [
|
|
createVNode(unref(ElInput), {
|
|
placeholder: unref(t)("el.datepicker.selectDate"),
|
|
"model-value": unref(visibleDate),
|
|
size: "small",
|
|
"validate-event": false,
|
|
onInput: _cache[0] || (_cache[0] = (val) => userInputDate.value = val),
|
|
onChange: handleVisibleDateChange
|
|
}, null, 8, ["placeholder", "model-value"])
|
|
], 2),
|
|
withDirectives((openBlock(), createElementBlock("span", {
|
|
class: normalizeClass(unref(dpNs).e("editor-wrap"))
|
|
}, [
|
|
createVNode(unref(ElInput), {
|
|
placeholder: unref(t)("el.datepicker.selectTime"),
|
|
"model-value": unref(visibleTime),
|
|
size: "small",
|
|
"validate-event": false,
|
|
onFocus: onTimePickerInputFocus,
|
|
onInput: _cache[1] || (_cache[1] = (val) => userInputTime.value = val),
|
|
onChange: handleVisibleTimeChange
|
|
}, null, 8, ["placeholder", "model-value"]),
|
|
createVNode(unref(TimePickPanel), {
|
|
visible: timePickerVisible.value,
|
|
format: unref(timeFormat),
|
|
"parsed-value": innerDate.value,
|
|
onPick: handleTimePick
|
|
}, null, 8, ["visible", "format", "parsed-value"])
|
|
], 2)), [
|
|
[unref(ClickOutside), handleTimePickClose]
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
withDirectives(createElementVNode("div", {
|
|
class: normalizeClass([
|
|
unref(dpNs).e("header"),
|
|
(currentView.value === "year" || currentView.value === "month") && unref(dpNs).e("header--bordered")
|
|
])
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(dpNs).e("prev-btn"))
|
|
}, [
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
"aria-label": unref(t)(`el.datepicker.prevYear`),
|
|
class: normalizeClass(["d-arrow-left", unref(ppNs).e("icon-btn")]),
|
|
onClick: _cache[2] || (_cache[2] = ($event) => moveByYear(false))
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 10, _hoisted_2$2),
|
|
withDirectives(createElementVNode("button", {
|
|
type: "button",
|
|
"aria-label": unref(t)(`el.datepicker.prevMonth`),
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-left"]),
|
|
onClick: _cache[3] || (_cache[3] = ($event) => moveByMonth(false))
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 10, _hoisted_3$2), [
|
|
[vShow, currentView.value === "date"]
|
|
])
|
|
], 2),
|
|
createElementVNode("span", {
|
|
role: "button",
|
|
class: normalizeClass(unref(dpNs).e("header-label")),
|
|
"aria-live": "polite",
|
|
tabindex: "0",
|
|
onKeydown: _cache[4] || (_cache[4] = withKeys(($event) => showPicker("year"), ["enter"])),
|
|
onClick: _cache[5] || (_cache[5] = ($event) => showPicker("year"))
|
|
}, toDisplayString(unref(yearLabel)), 35),
|
|
withDirectives(createElementVNode("span", {
|
|
role: "button",
|
|
"aria-live": "polite",
|
|
tabindex: "0",
|
|
class: normalizeClass([
|
|
unref(dpNs).e("header-label"),
|
|
{ active: currentView.value === "month" }
|
|
]),
|
|
onKeydown: _cache[6] || (_cache[6] = withKeys(($event) => showPicker("month"), ["enter"])),
|
|
onClick: _cache[7] || (_cache[7] = ($event) => showPicker("month"))
|
|
}, toDisplayString(unref(t)(`el.datepicker.month${unref(month) + 1}`)), 35), [
|
|
[vShow, currentView.value === "date"]
|
|
]),
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(dpNs).e("next-btn"))
|
|
}, [
|
|
withDirectives(createElementVNode("button", {
|
|
type: "button",
|
|
"aria-label": unref(t)(`el.datepicker.nextMonth`),
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-right"]),
|
|
onClick: _cache[8] || (_cache[8] = ($event) => moveByMonth(true))
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 10, _hoisted_4$1), [
|
|
[vShow, currentView.value === "date"]
|
|
]),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
"aria-label": unref(t)(`el.datepicker.nextYear`),
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
|
|
onClick: _cache[9] || (_cache[9] = ($event) => moveByYear(true))
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 10, _hoisted_5$1)
|
|
], 2)
|
|
], 2), [
|
|
[vShow, currentView.value !== "time"]
|
|
]),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("content")),
|
|
onKeydown: handleKeydownTable
|
|
}, [
|
|
currentView.value === "date" ? (openBlock(), createBlock(DateTable, {
|
|
key: 0,
|
|
ref_key: "currentViewRef",
|
|
ref: currentViewRef,
|
|
"selection-mode": unref(selectionMode),
|
|
date: innerDate.value,
|
|
"parsed-value": _ctx.parsedValue,
|
|
"disabled-date": unref(disabledDate2),
|
|
"cell-class-name": unref(cellClassName),
|
|
onPick: handleDatePick
|
|
}, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date", "cell-class-name"])) : createCommentVNode("v-if", true),
|
|
currentView.value === "year" ? (openBlock(), createBlock(YearTable, {
|
|
key: 1,
|
|
ref_key: "currentViewRef",
|
|
ref: currentViewRef,
|
|
date: innerDate.value,
|
|
"disabled-date": unref(disabledDate2),
|
|
"parsed-value": _ctx.parsedValue,
|
|
onPick: handleYearPick
|
|
}, null, 8, ["date", "disabled-date", "parsed-value"])) : createCommentVNode("v-if", true),
|
|
currentView.value === "month" ? (openBlock(), createBlock(MonthTable, {
|
|
key: 2,
|
|
ref_key: "currentViewRef",
|
|
ref: currentViewRef,
|
|
date: innerDate.value,
|
|
"parsed-value": _ctx.parsedValue,
|
|
"disabled-date": unref(disabledDate2),
|
|
onPick: handleMonthPick
|
|
}, null, 8, ["date", "parsed-value", "disabled-date"])) : createCommentVNode("v-if", true)
|
|
], 34)
|
|
], 2)
|
|
], 2),
|
|
withDirectives(createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("footer"))
|
|
}, [
|
|
withDirectives(createVNode(unref(ElButton), {
|
|
text: "",
|
|
size: "small",
|
|
class: normalizeClass(unref(ppNs).e("link-btn")),
|
|
disabled: unref(disabledNow),
|
|
onClick: changeToNow
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(t)("el.datepicker.now")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "disabled"]), [
|
|
[vShow, unref(selectionMode) !== "dates"]
|
|
]),
|
|
createVNode(unref(ElButton), {
|
|
plain: "",
|
|
size: "small",
|
|
class: normalizeClass(unref(ppNs).e("link-btn")),
|
|
disabled: unref(disabledConfirm),
|
|
onClick: onConfirm
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(t)("el.datepicker.confirm")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "disabled"])
|
|
], 2), [
|
|
[vShow, unref(footerVisible) && currentView.value === "date"]
|
|
])
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var DatePickPanel = /* @__PURE__ */ _export_sfc$1(_sfc_main$3, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker/src/date-picker-com/panel-date-pick.vue"]]);
|
|
const panelDateRangeProps = buildProps({
|
|
...panelSharedProps,
|
|
...panelRangeSharedProps
|
|
});
|
|
const useShortcut = (lang) => {
|
|
const { emit } = getCurrentInstance();
|
|
const attrs = useAttrs$1();
|
|
const slots = useSlots();
|
|
const handleShortcutClick = (shortcut) => {
|
|
const shortcutValues = isFunction(shortcut.value) ? shortcut.value() : shortcut.value;
|
|
if (shortcutValues) {
|
|
emit("pick", [
|
|
dayjs(shortcutValues[0]).locale(lang.value),
|
|
dayjs(shortcutValues[1]).locale(lang.value)
|
|
]);
|
|
return;
|
|
}
|
|
if (shortcut.onClick) {
|
|
shortcut.onClick({
|
|
attrs,
|
|
slots,
|
|
emit
|
|
});
|
|
}
|
|
};
|
|
return handleShortcutClick;
|
|
};
|
|
const useRangePicker = (props, {
|
|
defaultValue,
|
|
leftDate,
|
|
rightDate,
|
|
unit: unit2,
|
|
onParsedValueChanged
|
|
}) => {
|
|
const { emit } = getCurrentInstance();
|
|
const { pickerNs } = inject(ROOT_PICKER_INJECTION_KEY);
|
|
const drpNs = useNamespace("date-range-picker");
|
|
const { t, lang } = useLocale();
|
|
const handleShortcutClick = useShortcut(lang);
|
|
const minDate = ref();
|
|
const maxDate = ref();
|
|
const rangeState = ref({
|
|
endDate: null,
|
|
selecting: false
|
|
});
|
|
const handleChangeRange = (val) => {
|
|
rangeState.value = val;
|
|
};
|
|
const handleRangeConfirm = (visible = false) => {
|
|
const _minDate = unref(minDate);
|
|
const _maxDate = unref(maxDate);
|
|
if (isValidRange([_minDate, _maxDate])) {
|
|
emit("pick", [_minDate, _maxDate], visible);
|
|
}
|
|
};
|
|
const onSelect = (selecting) => {
|
|
rangeState.value.selecting = selecting;
|
|
if (!selecting) {
|
|
rangeState.value.endDate = null;
|
|
}
|
|
};
|
|
const restoreDefault = () => {
|
|
const [start, end] = getDefaultValue(unref(defaultValue), {
|
|
lang: unref(lang),
|
|
unit: unit2,
|
|
unlinkPanels: props.unlinkPanels
|
|
});
|
|
minDate.value = void 0;
|
|
maxDate.value = void 0;
|
|
leftDate.value = start;
|
|
rightDate.value = end;
|
|
};
|
|
watch(defaultValue, (val) => {
|
|
if (val) {
|
|
restoreDefault();
|
|
}
|
|
}, { immediate: true });
|
|
watch(() => props.parsedValue, (parsedValue2) => {
|
|
if (isArray(parsedValue2) && parsedValue2.length === 2) {
|
|
const [start, end] = parsedValue2;
|
|
minDate.value = start;
|
|
leftDate.value = start;
|
|
maxDate.value = end;
|
|
onParsedValueChanged(unref(minDate), unref(maxDate));
|
|
} else {
|
|
restoreDefault();
|
|
}
|
|
}, { immediate: true });
|
|
return {
|
|
minDate,
|
|
maxDate,
|
|
rangeState,
|
|
lang,
|
|
ppNs: pickerNs,
|
|
drpNs,
|
|
handleChangeRange,
|
|
handleRangeConfirm,
|
|
handleShortcutClick,
|
|
onSelect,
|
|
t
|
|
};
|
|
};
|
|
const _hoisted_1$1 = ["onClick"];
|
|
const _hoisted_2$1 = ["aria-label"];
|
|
const _hoisted_3$1 = ["aria-label"];
|
|
const _hoisted_4 = ["disabled", "aria-label"];
|
|
const _hoisted_5 = ["disabled", "aria-label"];
|
|
const _hoisted_6 = ["disabled", "aria-label"];
|
|
const _hoisted_7 = ["disabled", "aria-label"];
|
|
const _hoisted_8 = ["aria-label"];
|
|
const _hoisted_9 = ["aria-label"];
|
|
const unit$1 = "month";
|
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
__name: "panel-date-range",
|
|
props: panelDateRangeProps,
|
|
emits: [
|
|
"pick",
|
|
"set-picker-option",
|
|
"calendar-change",
|
|
"panel-change"
|
|
],
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const pickerBase = inject("EP_PICKER_BASE");
|
|
const { disabledDate: disabledDate2, cellClassName, format, defaultTime, clearable } = pickerBase.props;
|
|
const shortcuts = toRef(pickerBase.props, "shortcuts");
|
|
const defaultValue = toRef(pickerBase.props, "defaultValue");
|
|
const { lang } = useLocale();
|
|
const leftDate = ref(dayjs().locale(lang.value));
|
|
const rightDate = ref(dayjs().locale(lang.value).add(1, unit$1));
|
|
const {
|
|
minDate,
|
|
maxDate,
|
|
rangeState,
|
|
ppNs,
|
|
drpNs,
|
|
handleChangeRange,
|
|
handleRangeConfirm,
|
|
handleShortcutClick,
|
|
onSelect,
|
|
t
|
|
} = useRangePicker(props, {
|
|
defaultValue,
|
|
leftDate,
|
|
rightDate,
|
|
unit: unit$1,
|
|
onParsedValueChanged
|
|
});
|
|
const dateUserInput = ref({
|
|
min: null,
|
|
max: null
|
|
});
|
|
const timeUserInput = ref({
|
|
min: null,
|
|
max: null
|
|
});
|
|
const leftLabel = computed(() => {
|
|
return `${leftDate.value.year()} ${t("el.datepicker.year")} ${t(`el.datepicker.month${leftDate.value.month() + 1}`)}`;
|
|
});
|
|
const rightLabel = computed(() => {
|
|
return `${rightDate.value.year()} ${t("el.datepicker.year")} ${t(`el.datepicker.month${rightDate.value.month() + 1}`)}`;
|
|
});
|
|
const leftYear = computed(() => {
|
|
return leftDate.value.year();
|
|
});
|
|
const leftMonth = computed(() => {
|
|
return leftDate.value.month();
|
|
});
|
|
const rightYear = computed(() => {
|
|
return rightDate.value.year();
|
|
});
|
|
const rightMonth = computed(() => {
|
|
return rightDate.value.month();
|
|
});
|
|
const hasShortcuts = computed(() => !!shortcuts.value.length);
|
|
const minVisibleDate = computed(() => {
|
|
if (dateUserInput.value.min !== null)
|
|
return dateUserInput.value.min;
|
|
if (minDate.value)
|
|
return minDate.value.format(dateFormat.value);
|
|
return "";
|
|
});
|
|
const maxVisibleDate = computed(() => {
|
|
if (dateUserInput.value.max !== null)
|
|
return dateUserInput.value.max;
|
|
if (maxDate.value || minDate.value)
|
|
return (maxDate.value || minDate.value).format(dateFormat.value);
|
|
return "";
|
|
});
|
|
const minVisibleTime = computed(() => {
|
|
if (timeUserInput.value.min !== null)
|
|
return timeUserInput.value.min;
|
|
if (minDate.value)
|
|
return minDate.value.format(timeFormat.value);
|
|
return "";
|
|
});
|
|
const maxVisibleTime = computed(() => {
|
|
if (timeUserInput.value.max !== null)
|
|
return timeUserInput.value.max;
|
|
if (maxDate.value || minDate.value)
|
|
return (maxDate.value || minDate.value).format(timeFormat.value);
|
|
return "";
|
|
});
|
|
const timeFormat = computed(() => {
|
|
return props.timeFormat || extractTimeFormat(format);
|
|
});
|
|
const dateFormat = computed(() => {
|
|
return props.dateFormat || extractDateFormat(format);
|
|
});
|
|
const isValidValue = (date2) => {
|
|
return isValidRange(date2) && (disabledDate2 ? !disabledDate2(date2[0].toDate()) && !disabledDate2(date2[1].toDate()) : true);
|
|
};
|
|
const leftPrevYear = () => {
|
|
leftDate.value = leftDate.value.subtract(1, "year");
|
|
if (!props.unlinkPanels) {
|
|
rightDate.value = leftDate.value.add(1, "month");
|
|
}
|
|
handlePanelChange("year");
|
|
};
|
|
const leftPrevMonth = () => {
|
|
leftDate.value = leftDate.value.subtract(1, "month");
|
|
if (!props.unlinkPanels) {
|
|
rightDate.value = leftDate.value.add(1, "month");
|
|
}
|
|
handlePanelChange("month");
|
|
};
|
|
const rightNextYear = () => {
|
|
if (!props.unlinkPanels) {
|
|
leftDate.value = leftDate.value.add(1, "year");
|
|
rightDate.value = leftDate.value.add(1, "month");
|
|
} else {
|
|
rightDate.value = rightDate.value.add(1, "year");
|
|
}
|
|
handlePanelChange("year");
|
|
};
|
|
const rightNextMonth = () => {
|
|
if (!props.unlinkPanels) {
|
|
leftDate.value = leftDate.value.add(1, "month");
|
|
rightDate.value = leftDate.value.add(1, "month");
|
|
} else {
|
|
rightDate.value = rightDate.value.add(1, "month");
|
|
}
|
|
handlePanelChange("month");
|
|
};
|
|
const leftNextYear = () => {
|
|
leftDate.value = leftDate.value.add(1, "year");
|
|
handlePanelChange("year");
|
|
};
|
|
const leftNextMonth = () => {
|
|
leftDate.value = leftDate.value.add(1, "month");
|
|
handlePanelChange("month");
|
|
};
|
|
const rightPrevYear = () => {
|
|
rightDate.value = rightDate.value.subtract(1, "year");
|
|
handlePanelChange("year");
|
|
};
|
|
const rightPrevMonth = () => {
|
|
rightDate.value = rightDate.value.subtract(1, "month");
|
|
handlePanelChange("month");
|
|
};
|
|
const handlePanelChange = (mode) => {
|
|
emit("panel-change", [leftDate.value.toDate(), rightDate.value.toDate()], mode);
|
|
};
|
|
const enableMonthArrow = computed(() => {
|
|
const nextMonth = (leftMonth.value + 1) % 12;
|
|
const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0;
|
|
return props.unlinkPanels && new Date(leftYear.value + yearOffset, nextMonth) < new Date(rightYear.value, rightMonth.value);
|
|
});
|
|
const enableYearArrow = computed(() => {
|
|
return props.unlinkPanels && rightYear.value * 12 + rightMonth.value - (leftYear.value * 12 + leftMonth.value + 1) >= 12;
|
|
});
|
|
const btnDisabled = computed(() => {
|
|
return !(minDate.value && maxDate.value && !rangeState.value.selecting && isValidRange([minDate.value, maxDate.value]));
|
|
});
|
|
const showTime = computed(() => props.type === "datetime" || props.type === "datetimerange");
|
|
const formatEmit = (emitDayjs, index2) => {
|
|
if (!emitDayjs)
|
|
return;
|
|
if (defaultTime) {
|
|
const defaultTimeD = dayjs(defaultTime[index2] || defaultTime).locale(lang.value);
|
|
return defaultTimeD.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date());
|
|
}
|
|
return emitDayjs;
|
|
};
|
|
const handleRangePick = (val, close = true) => {
|
|
const min_ = val.minDate;
|
|
const max_ = val.maxDate;
|
|
const minDate_ = formatEmit(min_, 0);
|
|
const maxDate_ = formatEmit(max_, 1);
|
|
if (maxDate.value === maxDate_ && minDate.value === minDate_) {
|
|
return;
|
|
}
|
|
emit("calendar-change", [min_.toDate(), max_ && max_.toDate()]);
|
|
maxDate.value = maxDate_;
|
|
minDate.value = minDate_;
|
|
if (!close || showTime.value)
|
|
return;
|
|
handleRangeConfirm();
|
|
};
|
|
const minTimePickerVisible = ref(false);
|
|
const maxTimePickerVisible = ref(false);
|
|
const handleMinTimeClose = () => {
|
|
minTimePickerVisible.value = false;
|
|
};
|
|
const handleMaxTimeClose = () => {
|
|
maxTimePickerVisible.value = false;
|
|
};
|
|
const handleDateInput = (value, type) => {
|
|
dateUserInput.value[type] = value;
|
|
const parsedValueD = dayjs(value, dateFormat.value).locale(lang.value);
|
|
if (parsedValueD.isValid()) {
|
|
if (disabledDate2 && disabledDate2(parsedValueD.toDate())) {
|
|
return;
|
|
}
|
|
if (type === "min") {
|
|
leftDate.value = parsedValueD;
|
|
minDate.value = (minDate.value || leftDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date());
|
|
if (!props.unlinkPanels && (!maxDate.value || maxDate.value.isBefore(minDate.value))) {
|
|
rightDate.value = parsedValueD.add(1, "month");
|
|
maxDate.value = minDate.value.add(1, "month");
|
|
}
|
|
} else {
|
|
rightDate.value = parsedValueD;
|
|
maxDate.value = (maxDate.value || rightDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date());
|
|
if (!props.unlinkPanels && (!minDate.value || minDate.value.isAfter(maxDate.value))) {
|
|
leftDate.value = parsedValueD.subtract(1, "month");
|
|
minDate.value = maxDate.value.subtract(1, "month");
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const handleDateChange = (_, type) => {
|
|
dateUserInput.value[type] = null;
|
|
};
|
|
const handleTimeInput = (value, type) => {
|
|
timeUserInput.value[type] = value;
|
|
const parsedValueD = dayjs(value, timeFormat.value).locale(lang.value);
|
|
if (parsedValueD.isValid()) {
|
|
if (type === "min") {
|
|
minTimePickerVisible.value = true;
|
|
minDate.value = (minDate.value || leftDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second());
|
|
if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {
|
|
maxDate.value = minDate.value;
|
|
}
|
|
} else {
|
|
maxTimePickerVisible.value = true;
|
|
maxDate.value = (maxDate.value || rightDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second());
|
|
rightDate.value = maxDate.value;
|
|
if (maxDate.value && maxDate.value.isBefore(minDate.value)) {
|
|
minDate.value = maxDate.value;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const handleTimeChange = (value, type) => {
|
|
timeUserInput.value[type] = null;
|
|
if (type === "min") {
|
|
leftDate.value = minDate.value;
|
|
minTimePickerVisible.value = false;
|
|
} else {
|
|
rightDate.value = maxDate.value;
|
|
maxTimePickerVisible.value = false;
|
|
}
|
|
};
|
|
const handleMinTimePick = (value, visible, first) => {
|
|
if (timeUserInput.value.min)
|
|
return;
|
|
if (value) {
|
|
leftDate.value = value;
|
|
minDate.value = (minDate.value || leftDate.value).hour(value.hour()).minute(value.minute()).second(value.second());
|
|
}
|
|
if (!first) {
|
|
minTimePickerVisible.value = visible;
|
|
}
|
|
if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {
|
|
maxDate.value = minDate.value;
|
|
rightDate.value = value;
|
|
}
|
|
};
|
|
const handleMaxTimePick = (value, visible, first) => {
|
|
if (timeUserInput.value.max)
|
|
return;
|
|
if (value) {
|
|
rightDate.value = value;
|
|
maxDate.value = (maxDate.value || rightDate.value).hour(value.hour()).minute(value.minute()).second(value.second());
|
|
}
|
|
if (!first) {
|
|
maxTimePickerVisible.value = visible;
|
|
}
|
|
if (maxDate.value && maxDate.value.isBefore(minDate.value)) {
|
|
minDate.value = maxDate.value;
|
|
}
|
|
};
|
|
const handleClear = () => {
|
|
leftDate.value = getDefaultValue(unref(defaultValue), {
|
|
lang: unref(lang),
|
|
unit: "month",
|
|
unlinkPanels: props.unlinkPanels
|
|
})[0];
|
|
rightDate.value = leftDate.value.add(1, "month");
|
|
emit("pick", null);
|
|
};
|
|
const formatToString = (value) => {
|
|
return isArray(value) ? value.map((_) => _.format(format)) : value.format(format);
|
|
};
|
|
const parseUserInput = (value) => {
|
|
return isArray(value) ? value.map((_) => dayjs(_, format).locale(lang.value)) : dayjs(value, format).locale(lang.value);
|
|
};
|
|
function onParsedValueChanged(minDate2, maxDate2) {
|
|
if (props.unlinkPanels && maxDate2) {
|
|
const minDateYear = (minDate2 == null ? void 0 : minDate2.year()) || 0;
|
|
const minDateMonth = (minDate2 == null ? void 0 : minDate2.month()) || 0;
|
|
const maxDateYear = maxDate2.year();
|
|
const maxDateMonth = maxDate2.month();
|
|
rightDate.value = minDateYear === maxDateYear && minDateMonth === maxDateMonth ? maxDate2.add(1, unit$1) : maxDate2;
|
|
} else {
|
|
rightDate.value = leftDate.value.add(1, unit$1);
|
|
if (maxDate2) {
|
|
rightDate.value = rightDate.value.hour(maxDate2.hour()).minute(maxDate2.minute()).second(maxDate2.second());
|
|
}
|
|
}
|
|
}
|
|
emit("set-picker-option", ["isValidValue", isValidValue]);
|
|
emit("set-picker-option", ["parseUserInput", parseUserInput]);
|
|
emit("set-picker-option", ["formatToString", formatToString]);
|
|
emit("set-picker-option", ["handleClear", handleClear]);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([
|
|
unref(ppNs).b(),
|
|
unref(drpNs).b(),
|
|
{
|
|
"has-sidebar": _ctx.$slots.sidebar || unref(hasShortcuts),
|
|
"has-time": unref(showTime)
|
|
}
|
|
])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("body-wrapper"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "sidebar", {
|
|
class: normalizeClass(unref(ppNs).e("sidebar"))
|
|
}),
|
|
unref(hasShortcuts) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ppNs).e("sidebar"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
|
|
return openBlock(), createElementBlock("button", {
|
|
key,
|
|
type: "button",
|
|
class: normalizeClass(unref(ppNs).e("shortcut")),
|
|
onClick: ($event) => unref(handleShortcutClick)(shortcut)
|
|
}, toDisplayString(shortcut.text), 11, _hoisted_1$1);
|
|
}), 128))
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("body"))
|
|
}, [
|
|
unref(showTime) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(drpNs).e("time-header"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(drpNs).e("editors-wrap"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
|
|
}, [
|
|
createVNode(unref(ElInput), {
|
|
size: "small",
|
|
disabled: unref(rangeState).selecting,
|
|
placeholder: unref(t)("el.datepicker.startDate"),
|
|
class: normalizeClass(unref(drpNs).e("editor")),
|
|
"model-value": unref(minVisibleDate),
|
|
"validate-event": false,
|
|
onInput: _cache[0] || (_cache[0] = (val) => handleDateInput(val, "min")),
|
|
onChange: _cache[1] || (_cache[1] = (val) => handleDateChange(val, "min"))
|
|
}, null, 8, ["disabled", "placeholder", "class", "model-value"])
|
|
], 2),
|
|
withDirectives((openBlock(), createElementBlock("span", {
|
|
class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
|
|
}, [
|
|
createVNode(unref(ElInput), {
|
|
size: "small",
|
|
class: normalizeClass(unref(drpNs).e("editor")),
|
|
disabled: unref(rangeState).selecting,
|
|
placeholder: unref(t)("el.datepicker.startTime"),
|
|
"model-value": unref(minVisibleTime),
|
|
"validate-event": false,
|
|
onFocus: _cache[2] || (_cache[2] = ($event) => minTimePickerVisible.value = true),
|
|
onInput: _cache[3] || (_cache[3] = (val) => handleTimeInput(val, "min")),
|
|
onChange: _cache[4] || (_cache[4] = (val) => handleTimeChange(val, "min"))
|
|
}, null, 8, ["class", "disabled", "placeholder", "model-value"]),
|
|
createVNode(unref(TimePickPanel), {
|
|
visible: minTimePickerVisible.value,
|
|
format: unref(timeFormat),
|
|
"datetime-role": "start",
|
|
"parsed-value": leftDate.value,
|
|
onPick: handleMinTimePick
|
|
}, null, 8, ["visible", "format", "parsed-value"])
|
|
], 2)), [
|
|
[unref(ClickOutside), handleMinTimeClose]
|
|
])
|
|
], 2),
|
|
createElementVNode("span", null, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
createElementVNode("span", {
|
|
class: normalizeClass([unref(drpNs).e("editors-wrap"), "is-right"])
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
|
|
}, [
|
|
createVNode(unref(ElInput), {
|
|
size: "small",
|
|
class: normalizeClass(unref(drpNs).e("editor")),
|
|
disabled: unref(rangeState).selecting,
|
|
placeholder: unref(t)("el.datepicker.endDate"),
|
|
"model-value": unref(maxVisibleDate),
|
|
readonly: !unref(minDate),
|
|
"validate-event": false,
|
|
onInput: _cache[5] || (_cache[5] = (val) => handleDateInput(val, "max")),
|
|
onChange: _cache[6] || (_cache[6] = (val) => handleDateChange(val, "max"))
|
|
}, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"])
|
|
], 2),
|
|
withDirectives((openBlock(), createElementBlock("span", {
|
|
class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
|
|
}, [
|
|
createVNode(unref(ElInput), {
|
|
size: "small",
|
|
class: normalizeClass(unref(drpNs).e("editor")),
|
|
disabled: unref(rangeState).selecting,
|
|
placeholder: unref(t)("el.datepicker.endTime"),
|
|
"model-value": unref(maxVisibleTime),
|
|
readonly: !unref(minDate),
|
|
"validate-event": false,
|
|
onFocus: _cache[7] || (_cache[7] = ($event) => unref(minDate) && (maxTimePickerVisible.value = true)),
|
|
onInput: _cache[8] || (_cache[8] = (val) => handleTimeInput(val, "max")),
|
|
onChange: _cache[9] || (_cache[9] = (val) => handleTimeChange(val, "max"))
|
|
}, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"]),
|
|
createVNode(unref(TimePickPanel), {
|
|
"datetime-role": "end",
|
|
visible: maxTimePickerVisible.value,
|
|
format: unref(timeFormat),
|
|
"parsed-value": rightDate.value,
|
|
onPick: handleMaxTimePick
|
|
}, null, 8, ["visible", "format", "parsed-value"])
|
|
], 2)), [
|
|
[unref(ClickOutside), handleMaxTimeClose]
|
|
])
|
|
], 2)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-left"])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(drpNs).e("header"))
|
|
}, [
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-left"]),
|
|
"aria-label": unref(t)(`el.datepicker.prevYear`),
|
|
onClick: leftPrevYear
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 10, _hoisted_2$1),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-left"]),
|
|
"aria-label": unref(t)(`el.datepicker.prevMonth`),
|
|
onClick: leftPrevMonth
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 10, _hoisted_3$1),
|
|
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
|
key: 0,
|
|
type: "button",
|
|
disabled: !unref(enableYearArrow),
|
|
class: normalizeClass([[unref(ppNs).e("icon-btn"), { "is-disabled": !unref(enableYearArrow) }], "d-arrow-right"]),
|
|
"aria-label": unref(t)(`el.datepicker.nextYear`),
|
|
onClick: leftNextYear
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 10, _hoisted_4)) : createCommentVNode("v-if", true),
|
|
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
|
key: 1,
|
|
type: "button",
|
|
disabled: !unref(enableMonthArrow),
|
|
class: normalizeClass([[
|
|
unref(ppNs).e("icon-btn"),
|
|
{ "is-disabled": !unref(enableMonthArrow) }
|
|
], "arrow-right"]),
|
|
"aria-label": unref(t)(`el.datepicker.nextMonth`),
|
|
onClick: leftNextMonth
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 10, _hoisted_5)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", null, toDisplayString(unref(leftLabel)), 1)
|
|
], 2),
|
|
createVNode(DateTable, {
|
|
"selection-mode": "range",
|
|
date: leftDate.value,
|
|
"min-date": unref(minDate),
|
|
"max-date": unref(maxDate),
|
|
"range-state": unref(rangeState),
|
|
"disabled-date": unref(disabledDate2),
|
|
"cell-class-name": unref(cellClassName),
|
|
onChangerange: unref(handleChangeRange),
|
|
onPick: handleRangePick,
|
|
onSelect: unref(onSelect)
|
|
}, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-right"])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(drpNs).e("header"))
|
|
}, [
|
|
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
|
key: 0,
|
|
type: "button",
|
|
disabled: !unref(enableYearArrow),
|
|
class: normalizeClass([[unref(ppNs).e("icon-btn"), { "is-disabled": !unref(enableYearArrow) }], "d-arrow-left"]),
|
|
"aria-label": unref(t)(`el.datepicker.prevYear`),
|
|
onClick: rightPrevYear
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 10, _hoisted_6)) : createCommentVNode("v-if", true),
|
|
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
|
key: 1,
|
|
type: "button",
|
|
disabled: !unref(enableMonthArrow),
|
|
class: normalizeClass([[
|
|
unref(ppNs).e("icon-btn"),
|
|
{ "is-disabled": !unref(enableMonthArrow) }
|
|
], "arrow-left"]),
|
|
"aria-label": unref(t)(`el.datepicker.prevMonth`),
|
|
onClick: rightPrevMonth
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 10, _hoisted_7)) : createCommentVNode("v-if", true),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
"aria-label": unref(t)(`el.datepicker.nextYear`),
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
|
|
onClick: rightNextYear
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 10, _hoisted_8),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-right"]),
|
|
"aria-label": unref(t)(`el.datepicker.nextMonth`),
|
|
onClick: rightNextMonth
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 10, _hoisted_9),
|
|
createElementVNode("div", null, toDisplayString(unref(rightLabel)), 1)
|
|
], 2),
|
|
createVNode(DateTable, {
|
|
"selection-mode": "range",
|
|
date: rightDate.value,
|
|
"min-date": unref(minDate),
|
|
"max-date": unref(maxDate),
|
|
"range-state": unref(rangeState),
|
|
"disabled-date": unref(disabledDate2),
|
|
"cell-class-name": unref(cellClassName),
|
|
onChangerange: unref(handleChangeRange),
|
|
onPick: handleRangePick,
|
|
onSelect: unref(onSelect)
|
|
}, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])
|
|
], 2)
|
|
], 2)
|
|
], 2),
|
|
unref(showTime) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ppNs).e("footer"))
|
|
}, [
|
|
unref(clearable) ? (openBlock(), createBlock(unref(ElButton), {
|
|
key: 0,
|
|
text: "",
|
|
size: "small",
|
|
class: normalizeClass(unref(ppNs).e("link-btn")),
|
|
onClick: handleClear
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(t)("el.datepicker.clear")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
|
createVNode(unref(ElButton), {
|
|
plain: "",
|
|
size: "small",
|
|
class: normalizeClass(unref(ppNs).e("link-btn")),
|
|
disabled: unref(btnDisabled),
|
|
onClick: _cache[10] || (_cache[10] = ($event) => unref(handleRangeConfirm)(false))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(t)("el.datepicker.confirm")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "disabled"])
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var DateRangePickPanel = /* @__PURE__ */ _export_sfc$1(_sfc_main$2, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker/src/date-picker-com/panel-date-range.vue"]]);
|
|
const panelMonthRangeProps = buildProps({
|
|
...panelRangeSharedProps
|
|
});
|
|
const panelMonthRangeEmits = [
|
|
"pick",
|
|
"set-picker-option",
|
|
"calendar-change"
|
|
];
|
|
const useMonthRangeHeader = ({
|
|
unlinkPanels,
|
|
leftDate,
|
|
rightDate
|
|
}) => {
|
|
const { t } = useLocale();
|
|
const leftPrevYear = () => {
|
|
leftDate.value = leftDate.value.subtract(1, "year");
|
|
if (!unlinkPanels.value) {
|
|
rightDate.value = rightDate.value.subtract(1, "year");
|
|
}
|
|
};
|
|
const rightNextYear = () => {
|
|
if (!unlinkPanels.value) {
|
|
leftDate.value = leftDate.value.add(1, "year");
|
|
}
|
|
rightDate.value = rightDate.value.add(1, "year");
|
|
};
|
|
const leftNextYear = () => {
|
|
leftDate.value = leftDate.value.add(1, "year");
|
|
};
|
|
const rightPrevYear = () => {
|
|
rightDate.value = rightDate.value.subtract(1, "year");
|
|
};
|
|
const leftLabel = computed(() => {
|
|
return `${leftDate.value.year()} ${t("el.datepicker.year")}`;
|
|
});
|
|
const rightLabel = computed(() => {
|
|
return `${rightDate.value.year()} ${t("el.datepicker.year")}`;
|
|
});
|
|
const leftYear = computed(() => {
|
|
return leftDate.value.year();
|
|
});
|
|
const rightYear = computed(() => {
|
|
return rightDate.value.year() === leftDate.value.year() ? leftDate.value.year() + 1 : rightDate.value.year();
|
|
});
|
|
return {
|
|
leftPrevYear,
|
|
rightNextYear,
|
|
leftNextYear,
|
|
rightPrevYear,
|
|
leftLabel,
|
|
rightLabel,
|
|
leftYear,
|
|
rightYear
|
|
};
|
|
};
|
|
const _hoisted_1 = ["onClick"];
|
|
const _hoisted_2 = ["disabled"];
|
|
const _hoisted_3 = ["disabled"];
|
|
const unit = "year";
|
|
const __default__ = defineComponent({
|
|
name: "DatePickerMonthRange"
|
|
});
|
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
...__default__,
|
|
props: panelMonthRangeProps,
|
|
emits: panelMonthRangeEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const { lang } = useLocale();
|
|
const pickerBase = inject("EP_PICKER_BASE");
|
|
const { shortcuts, disabledDate: disabledDate2, format } = pickerBase.props;
|
|
const defaultValue = toRef(pickerBase.props, "defaultValue");
|
|
const leftDate = ref(dayjs().locale(lang.value));
|
|
const rightDate = ref(dayjs().locale(lang.value).add(1, unit));
|
|
const {
|
|
minDate,
|
|
maxDate,
|
|
rangeState,
|
|
ppNs,
|
|
drpNs,
|
|
handleChangeRange,
|
|
handleRangeConfirm,
|
|
handleShortcutClick,
|
|
onSelect
|
|
} = useRangePicker(props, {
|
|
defaultValue,
|
|
leftDate,
|
|
rightDate,
|
|
unit,
|
|
onParsedValueChanged
|
|
});
|
|
const hasShortcuts = computed(() => !!shortcuts.length);
|
|
const {
|
|
leftPrevYear,
|
|
rightNextYear,
|
|
leftNextYear,
|
|
rightPrevYear,
|
|
leftLabel,
|
|
rightLabel,
|
|
leftYear,
|
|
rightYear
|
|
} = useMonthRangeHeader({
|
|
unlinkPanels: toRef(props, "unlinkPanels"),
|
|
leftDate,
|
|
rightDate
|
|
});
|
|
const enableYearArrow = computed(() => {
|
|
return props.unlinkPanels && rightYear.value > leftYear.value + 1;
|
|
});
|
|
const handleRangePick = (val, close = true) => {
|
|
const minDate_ = val.minDate;
|
|
const maxDate_ = val.maxDate;
|
|
if (maxDate.value === maxDate_ && minDate.value === minDate_) {
|
|
return;
|
|
}
|
|
emit("calendar-change", [minDate_.toDate(), maxDate_ && maxDate_.toDate()]);
|
|
maxDate.value = maxDate_;
|
|
minDate.value = minDate_;
|
|
if (!close)
|
|
return;
|
|
handleRangeConfirm();
|
|
};
|
|
const formatToString = (days) => {
|
|
return days.map((day) => day.format(format));
|
|
};
|
|
function onParsedValueChanged(minDate2, maxDate2) {
|
|
if (props.unlinkPanels && maxDate2) {
|
|
const minDateYear = (minDate2 == null ? void 0 : minDate2.year()) || 0;
|
|
const maxDateYear = maxDate2.year();
|
|
rightDate.value = minDateYear === maxDateYear ? maxDate2.add(1, unit) : maxDate2;
|
|
} else {
|
|
rightDate.value = leftDate.value.add(1, unit);
|
|
}
|
|
}
|
|
emit("set-picker-option", ["formatToString", formatToString]);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([
|
|
unref(ppNs).b(),
|
|
unref(drpNs).b(),
|
|
{
|
|
"has-sidebar": Boolean(_ctx.$slots.sidebar) || unref(hasShortcuts)
|
|
}
|
|
])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("body-wrapper"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "sidebar", {
|
|
class: normalizeClass(unref(ppNs).e("sidebar"))
|
|
}),
|
|
unref(hasShortcuts) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ppNs).e("sidebar"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
|
|
return openBlock(), createElementBlock("button", {
|
|
key,
|
|
type: "button",
|
|
class: normalizeClass(unref(ppNs).e("shortcut")),
|
|
onClick: ($event) => unref(handleShortcutClick)(shortcut)
|
|
}, toDisplayString(shortcut.text), 11, _hoisted_1);
|
|
}), 128))
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("body"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-left"])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(drpNs).e("header"))
|
|
}, [
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-left"]),
|
|
onClick: _cache[0] || (_cache[0] = (...args) => unref(leftPrevYear) && unref(leftPrevYear)(...args))
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 2),
|
|
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
|
key: 0,
|
|
type: "button",
|
|
disabled: !unref(enableYearArrow),
|
|
class: normalizeClass([[
|
|
unref(ppNs).e("icon-btn"),
|
|
{ [unref(ppNs).is("disabled")]: !unref(enableYearArrow) }
|
|
], "d-arrow-right"]),
|
|
onClick: _cache[1] || (_cache[1] = (...args) => unref(leftNextYear) && unref(leftNextYear)(...args))
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 10, _hoisted_2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", null, toDisplayString(unref(leftLabel)), 1)
|
|
], 2),
|
|
createVNode(MonthTable, {
|
|
"selection-mode": "range",
|
|
date: leftDate.value,
|
|
"min-date": unref(minDate),
|
|
"max-date": unref(maxDate),
|
|
"range-state": unref(rangeState),
|
|
"disabled-date": unref(disabledDate2),
|
|
onChangerange: unref(handleChangeRange),
|
|
onPick: handleRangePick,
|
|
onSelect: unref(onSelect)
|
|
}, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onSelect"])
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-right"])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(drpNs).e("header"))
|
|
}, [
|
|
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
|
key: 0,
|
|
type: "button",
|
|
disabled: !unref(enableYearArrow),
|
|
class: normalizeClass([[unref(ppNs).e("icon-btn"), { "is-disabled": !unref(enableYearArrow) }], "d-arrow-left"]),
|
|
onClick: _cache[2] || (_cache[2] = (...args) => unref(rightPrevYear) && unref(rightPrevYear)(...args))
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 10, _hoisted_3)) : createCommentVNode("v-if", true),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
|
|
onClick: _cache[3] || (_cache[3] = (...args) => unref(rightNextYear) && unref(rightNextYear)(...args))
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 2),
|
|
createElementVNode("div", null, toDisplayString(unref(rightLabel)), 1)
|
|
], 2),
|
|
createVNode(MonthTable, {
|
|
"selection-mode": "range",
|
|
date: rightDate.value,
|
|
"min-date": unref(minDate),
|
|
"max-date": unref(maxDate),
|
|
"range-state": unref(rangeState),
|
|
"disabled-date": unref(disabledDate2),
|
|
onChangerange: unref(handleChangeRange),
|
|
onPick: handleRangePick,
|
|
onSelect: unref(onSelect)
|
|
}, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onSelect"])
|
|
], 2)
|
|
], 2)
|
|
], 2)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var MonthRangePickPanel = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker/src/date-picker-com/panel-month-range.vue"]]);
|
|
const getPanel = function(type) {
|
|
switch (type) {
|
|
case "daterange":
|
|
case "datetimerange": {
|
|
return DateRangePickPanel;
|
|
}
|
|
case "monthrange": {
|
|
return MonthRangePickPanel;
|
|
}
|
|
default: {
|
|
return DatePickPanel;
|
|
}
|
|
}
|
|
};
|
|
dayjs.extend(localeData);
|
|
dayjs.extend(advancedFormat);
|
|
dayjs.extend(customParseFormat);
|
|
dayjs.extend(weekOfYear);
|
|
dayjs.extend(weekYear);
|
|
dayjs.extend(dayOfYear);
|
|
dayjs.extend(isSameOrAfter);
|
|
dayjs.extend(isSameOrBefore);
|
|
var DatePicker = defineComponent({
|
|
name: "ElDatePicker",
|
|
install: null,
|
|
props: datePickerProps,
|
|
emits: ["update:modelValue"],
|
|
setup(props, {
|
|
expose,
|
|
emit,
|
|
slots
|
|
}) {
|
|
const ns = useNamespace("picker-panel");
|
|
provide("ElPopperOptions", reactive(toRef(props, "popperOptions")));
|
|
provide(ROOT_PICKER_INJECTION_KEY, {
|
|
slots,
|
|
pickerNs: ns
|
|
});
|
|
const commonPicker = ref();
|
|
const refProps = {
|
|
focus: (focusStartInput = true) => {
|
|
var _a;
|
|
(_a = commonPicker.value) == null ? void 0 : _a.focus(focusStartInput);
|
|
},
|
|
handleOpen: () => {
|
|
var _a;
|
|
(_a = commonPicker.value) == null ? void 0 : _a.handleOpen();
|
|
},
|
|
handleClose: () => {
|
|
var _a;
|
|
(_a = commonPicker.value) == null ? void 0 : _a.handleClose();
|
|
}
|
|
};
|
|
expose(refProps);
|
|
const onModelValueUpdated = (val) => {
|
|
emit("update:modelValue", val);
|
|
};
|
|
return () => {
|
|
var _a;
|
|
const format = (_a = props.format) != null ? _a : DEFAULT_FORMATS_DATEPICKER[props.type] || DEFAULT_FORMATS_DATE;
|
|
const Component = getPanel(props.type);
|
|
return createVNode(CommonPicker, mergeProps(props, {
|
|
"format": format,
|
|
"type": props.type,
|
|
"ref": commonPicker,
|
|
"onUpdate:modelValue": onModelValueUpdated
|
|
}), {
|
|
default: (scopedProps) => createVNode(Component, scopedProps, null),
|
|
"range-separator": slots["range-separator"]
|
|
});
|
|
};
|
|
}
|
|
});
|
|
const _DatePicker = DatePicker;
|
|
_DatePicker.install = (app) => {
|
|
app.component(_DatePicker.name, _DatePicker);
|
|
};
|
|
const ElDatePicker = _DatePicker;
|
|
const _imports_0 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAyKADAAQAAAABAAAAyAAAAACbWz2VAAAKXElEQVR4Ae2dTWhUVxSAO84ws6mGWCmFFkWoaRepraUu3HRZGtraVeif3YsQGGqxxkgCkYRQSAmEanDRlRRLdm6yctFScGFx09BFpIhCIQU1hOBiJjOZnleVTCaTO+/de99k5p5PGJx595777vnO+WYy5o2TqdVq2Rf4AwEINCWwp+lRDkIAAv8TQBAaAQIGAghigMMQBBCEHoCAgQCCGOAwBAEEoQcgYCCAIAY4DEEAQegBCBgIIIgBDkMQQBB6AAIGAghigMMQBBCEHoCAgQCCGOAwBAEEoQcgYCCAIAY4DEEAQegBCBgIIIgBDkMQQBB6AAIGAghigMMQBBCEHoCAgQCCGOAwBAEEoQcgYCCAIAY4DEEAQegBCBgIIIgBDkMQQBB6AAIGAghigMMQBBCEHoCAgQCCGOAwBAEEoQcgYCCAIAY4DEEAQegBCBgIIIgBDkMQQBB6AAIGAghigMMQBBCEHoCAgQCCGOAwBAEEoQcgYCCAIAY4DEEAQegBCBgI5AxjDAVEYGFhIbe4uHiwVCodjtIqFAr3+vv7HwwMDFQCStN7KplarZb1vioLdgyB2dnZ/SsrK2elzmfktrd+Y5lMZk1ul3t7e6eHhoYe149x/ykBBAm4EyYnJ98vl8s/S4qvtEhzOZ/Pf3nhwoXfWsxTN4wggZZ8YmLixPr6+k1JLx8zxfKePXs+Hx0dvRFzvoppvEkPsMwzMzN7K5XKNUktrhwRhfzGxsb18fHxkwEisU4JQazRdW7g6upq9J7jkMUOkaQBGoI0AOn2h/Pz83mR47RDHkhSBw9B6mCEcHdpaem45HHAMRckeQYQQRw7qdPCq9XqEU97QhIBiSCeuinQZdRLgiCBdXY2m73rOSXVkiCI527a7eX6+vpuyx4eet6HWkkQxHMn7fZyg4ODZbl8ZC6FfaiUBEFS6KTdXrKnp2daJLmfwj7USYIgKXTRbi9ZLBbXcrncKdlHOYW9qJIEQVLooE5YcmRk5FZ0bRWSuFUDQdz4dXR0dOEhkriVCEHc+HV8NJK4lQhB3Ph1RTSS2JcJQezZdVUkktiVC0HsuHVlFJIkLxuCJGfW1RFIkqx8CJKMVxCzkSR+GREkPqugZiJJvHIiSDxOQc5CktZlRZDWjIKegSTm8iKImY+KUSTZucwIsjMbVSNI0rzcCNKci8qjSLK97AiynYnqI0iytfwIspUHj4QAkmy2AYJssuBeHQEkeQoDQeqagrtbCSAJ/y/W1o7g0TYC2iXhFWRbS3CgkYBmSRCksRt43JSAVkkQpGk7cLAZAY2SIEizTuDYjgS0SYIgO7YCAzsR0CQJguzUBRw3EtAiCYIY24BBEwENkiCIqQMYa0kgdEkQpGULMKEVgZAlQZBW1Wc8FoFQJUGQWOVnUhwCIUqCIHEqz5zYBEKTBEFil56JcQmEJAmCxK068xIRCEUSBElUdiYnIRCCJAiSpOLMTUyg2yXJ1Gq1bOKsYwRcvXr1xeXl5Xdl6n655WKEMCVgAtJn78mtmFIvlKNv0opk9I3QuyBTU1NHS6XSVwLjU9ns6743zHoQaEZAvtW3KrfvRJKZZuO2x7wKMj4+fmpjY+Nb2Uy/7YaIg4AtAXlSrskryezY2Ng3tms0xnkT5Jkc38sJXm48CY8h0C4C8ipSk9ukvJKM+TinF0EuXbr0TrVa/Uk2dNTHplgDAo4EyoVC4YPh4eHfHdd5wcu/Yskr2xeyEeRwrQbxvgjk5X3wlI/FnAWZm5t7Sd53fORjM6wBAV8E5En7+PT09Guu6zkL8ujRoz7ZxJuuGyEeAj4JyPuQ7JMnTz52XdNZEHnv8arrJoiHQBoE5FXkLdd1nQURUzOumyAeAp1KwFmQXC73T6cmx750E5Dn7j9dCTgLks1m/5ZN/OW6EeIh4JlAZd++fQuuazoLcu7cuX/FVOeNuCZCPAQaCPxRLBbvNxxL/NBZkOiM8kuZX0SSO4nPTgAE0iFQlh/9R3ws7UWQ8+fP34mugRFJeD/ioyqsYU1AejC6Hmv64sWLv1ovUhfo5VKT5+vJJSdfyy8Ni/LPa28/P8bfEGgXAem7SI4f5WLF6LJ6L3+8ChLtaGJi4lilUvlM7n4i+33Dyy5ZBAItCMgrR3S5+7BcpPhDi6mJhr0L8vzsV65c2Se/ZT8mryi9cowPTD0Ho/RvebLkA1NKa0/aLQjIRyFOyhPldZmWbzHVZji1TxNGm/HyJt0mK2J0EOhmOaIKIYiOPt2VLLtdDgTZlbbRcdIQ5EAQHb3a9ixDkQNB2t464Z8wJDkQJPx+bWuGocmBIG1tn7BPFqIcCBJ2z7Ytu1DlQJC2tVC4JwpZDgQJt2/bklnociBIW9oozJNokANBwuzd1LPSIgeCpN5K4Z1AkxwIEl7/ppqRNjkQJNV2CmtxjXIgSFg9nFo2WuVAkNRaKpyFNcuBIOH0cSqZaJcDQVJpqzAWRY6ndeQThWH0s9cskGMTJ4JssuCeEECOrW2AIFt5qH6EHNvLjyDbmag8ghzNy44gzbmoOoocO5cbQXZmo2IEOcxlRhAzn6BHkaN1eRGkNaMgZyBHvLIiSDxOQc1CjvjlRJD4rIKYiRzJyoggyXh19WzkSF4+BEnOrCsjkMOubAhix62ropDDvlwIYs+uKyKRw61MCOLGr6OjkcO9PKl9R6H71ljBhYB8meqJ9fX1m7JG133tmUvevmN5BfFNtAPWm5mZ2SvfNHxNtoIcjvVAEEeAnRi+urp6Vr5V9lAKe0v1CzNT2K/zkgjijLCzFpifn8+LHKdT2JU6OSKGCJJCJ+3mkktLS8fl/Ac870GlHBFDBPHcSbu9XLVaPeJ5D2rliDgiiOduCmw51XIgSGDdHKWTzWbvekpLvRwRR15BPHVTpyzT19d3W/by0HE/yPEMIII4dlKnhQ8ODpYzmcycw76Qow4egtTBCOVuT0/PtEhy3yIf5GiAhiANQEJ4WCwW13K53CnJpZwgH+RoAgtBmkAJ4dDIyMitfD7/oeSyHCOf5Wju6OjojRhzVU3hYsXAyz07O7t/ZWUluvTkjNz21qcrP4atye1yb2/v9NDQ0OP6Me4/JYAgSjphYWEht7i4eLBUKh2OUi4UCvf6+/sfDAwMVJQgsEoTQaywEaSFAO9BtFSaPK0IIIgVNoK0EEAQLZUmTysCCGKFjSAtBBBES6XJ04oAglhhI0gLAQTRUmnytCKAIFbYCNJCAEG0VJo8rQggiBU2grQQQBAtlSZPKwIIYoWNIC0EEERLpcnTigCCWGEjSAsBBNFSafK0IoAgVtgI0kIAQbRUmjytCCCIFTaCtBBAEC2VJk8rAghihY0gLQQQREulydOKAIJYYSNICwEE0VJp8rQigCBW2AjSQgBBtFSaPK0IIIgVNoK0EEAQLZUmTysCCGKFjSAtBBBES6XJ04oAglhhI0gLAQTRUmnytCKAIFbYCNJCAEG0VJo8rQggiBU2grQQQBAtlSZPKwIIYoWNIC0EEERLpcnTigCCWGEjSAsBBNFSafK0IoAgVtgI0kLgP02yRT2ww5JTAAAAAElFTkSuQmCC";
|
|
const _imports_2 = "" + buildAssetsURL("arrow-black.9629aa90.svg");
|
|
const _imports_3 = "" + buildAssetsURL("calendar-icon.dc8f3cea.svg");
|
|
const _imports_4 = "" + buildAssetsURL("frame-no.28983b22.svg");
|
|
const _imports_5 = "" + buildAssetsURL("frame-pitch.02620f32.svg");
|
|
/*! Element Plus v2.4.3 */
|
|
var zhCn = {
|
|
name: "zh-cn",
|
|
el: {
|
|
colorpicker: {
|
|
confirm: "\u786E\u5B9A",
|
|
clear: "\u6E05\u7A7A"
|
|
},
|
|
datepicker: {
|
|
now: "\u6B64\u523B",
|
|
today: "\u4ECA\u5929",
|
|
cancel: "\u53D6\u6D88",
|
|
clear: "\u6E05\u7A7A",
|
|
confirm: "\u786E\u5B9A",
|
|
selectDate: "\u9009\u62E9\u65E5\u671F",
|
|
selectTime: "\u9009\u62E9\u65F6\u95F4",
|
|
startDate: "\u5F00\u59CB\u65E5\u671F",
|
|
startTime: "\u5F00\u59CB\u65F6\u95F4",
|
|
endDate: "\u7ED3\u675F\u65E5\u671F",
|
|
endTime: "\u7ED3\u675F\u65F6\u95F4",
|
|
prevYear: "\u524D\u4E00\u5E74",
|
|
nextYear: "\u540E\u4E00\u5E74",
|
|
prevMonth: "\u4E0A\u4E2A\u6708",
|
|
nextMonth: "\u4E0B\u4E2A\u6708",
|
|
year: "\u5E74",
|
|
month1: "1 \u6708",
|
|
month2: "2 \u6708",
|
|
month3: "3 \u6708",
|
|
month4: "4 \u6708",
|
|
month5: "5 \u6708",
|
|
month6: "6 \u6708",
|
|
month7: "7 \u6708",
|
|
month8: "8 \u6708",
|
|
month9: "9 \u6708",
|
|
month10: "10 \u6708",
|
|
month11: "11 \u6708",
|
|
month12: "12 \u6708",
|
|
weeks: {
|
|
sun: "\u65E5",
|
|
mon: "\u4E00",
|
|
tue: "\u4E8C",
|
|
wed: "\u4E09",
|
|
thu: "\u56DB",
|
|
fri: "\u4E94",
|
|
sat: "\u516D"
|
|
},
|
|
months: {
|
|
jan: "\u4E00\u6708",
|
|
feb: "\u4E8C\u6708",
|
|
mar: "\u4E09\u6708",
|
|
apr: "\u56DB\u6708",
|
|
may: "\u4E94\u6708",
|
|
jun: "\u516D\u6708",
|
|
jul: "\u4E03\u6708",
|
|
aug: "\u516B\u6708",
|
|
sep: "\u4E5D\u6708",
|
|
oct: "\u5341\u6708",
|
|
nov: "\u5341\u4E00\u6708",
|
|
dec: "\u5341\u4E8C\u6708"
|
|
}
|
|
},
|
|
select: {
|
|
loading: "\u52A0\u8F7D\u4E2D",
|
|
noMatch: "\u65E0\u5339\u914D\u6570\u636E",
|
|
noData: "\u65E0\u6570\u636E",
|
|
placeholder: "\u8BF7\u9009\u62E9"
|
|
},
|
|
cascader: {
|
|
noMatch: "\u65E0\u5339\u914D\u6570\u636E",
|
|
loading: "\u52A0\u8F7D\u4E2D",
|
|
placeholder: "\u8BF7\u9009\u62E9",
|
|
noData: "\u6682\u65E0\u6570\u636E"
|
|
},
|
|
pagination: {
|
|
goto: "\u524D\u5F80",
|
|
pagesize: "\u6761/\u9875",
|
|
total: "\u5171 {total} \u6761",
|
|
pageClassifier: "\u9875",
|
|
page: "\u9875",
|
|
prev: "\u4E0A\u4E00\u9875",
|
|
next: "\u4E0B\u4E00\u9875",
|
|
currentPage: "\u7B2C {pager} \u9875",
|
|
prevPages: "\u5411\u524D {pager} \u9875",
|
|
nextPages: "\u5411\u540E {pager} \u9875",
|
|
deprecationWarning: "\u4F60\u4F7F\u7528\u4E86\u4E00\u4E9B\u5DF2\u88AB\u5E9F\u5F03\u7684\u7528\u6CD5\uFF0C\u8BF7\u53C2\u8003 el-pagination \u7684\u5B98\u65B9\u6587\u6863"
|
|
},
|
|
messagebox: {
|
|
title: "\u63D0\u793A",
|
|
confirm: "\u786E\u5B9A",
|
|
cancel: "\u53D6\u6D88",
|
|
error: "\u8F93\u5165\u7684\u6570\u636E\u4E0D\u5408\u6CD5!"
|
|
},
|
|
upload: {
|
|
deleteTip: "\u6309 delete \u952E\u53EF\u5220\u9664",
|
|
delete: "\u5220\u9664",
|
|
preview: "\u67E5\u770B\u56FE\u7247",
|
|
continue: "\u7EE7\u7EED\u4E0A\u4F20"
|
|
},
|
|
table: {
|
|
emptyText: "\u6682\u65E0\u6570\u636E",
|
|
confirmFilter: "\u7B5B\u9009",
|
|
resetFilter: "\u91CD\u7F6E",
|
|
clearFilter: "\u5168\u90E8",
|
|
sumText: "\u5408\u8BA1"
|
|
},
|
|
tree: {
|
|
emptyText: "\u6682\u65E0\u6570\u636E"
|
|
},
|
|
transfer: {
|
|
noMatch: "\u65E0\u5339\u914D\u6570\u636E",
|
|
noData: "\u65E0\u6570\u636E",
|
|
titles: ["\u5217\u8868 1", "\u5217\u8868 2"],
|
|
filterPlaceholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9",
|
|
noCheckedFormat: "\u5171 {total} \u9879",
|
|
hasCheckedFormat: "\u5DF2\u9009 {checked}/{total} \u9879"
|
|
},
|
|
image: {
|
|
error: "\u52A0\u8F7D\u5931\u8D25"
|
|
},
|
|
pageHeader: {
|
|
title: "\u8FD4\u56DE"
|
|
},
|
|
popconfirm: {
|
|
confirmButtonText: "\u786E\u5B9A",
|
|
cancelButtonText: "\u53D6\u6D88"
|
|
}
|
|
}
|
|
};
|
|
const _sfc_main = {
|
|
__name: "index",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
useRouter();
|
|
const setDisabled = (time) => {
|
|
return time.getTime() > Date.now();
|
|
};
|
|
let info = ref({
|
|
school: "",
|
|
// 学校
|
|
profession: "",
|
|
// 专业
|
|
project: "",
|
|
// 项目时间
|
|
interviewtime: "",
|
|
// 面试时间
|
|
subject: "",
|
|
//标题
|
|
isvisiblereply: 0,
|
|
// 回复点赞可见
|
|
message: "",
|
|
// 过程
|
|
anonymous: 0
|
|
// 匿名状态
|
|
});
|
|
const querySchoolSearch = (queryString, cb) => {
|
|
publishSchoolSearchHttp({ keyword: queryString }).then((res) => {
|
|
if (res.code != 200)
|
|
return;
|
|
let data = res.data || [];
|
|
let isRepetition = false;
|
|
data.forEach((element) => {
|
|
element["value"] = element["name"];
|
|
if (element["name"] == queryString)
|
|
isRepetition = true;
|
|
});
|
|
if (!isRepetition) {
|
|
data.unshift({
|
|
value: queryString
|
|
});
|
|
}
|
|
cb(data);
|
|
});
|
|
};
|
|
const handleSchoolSelect = (item) => info.value["schoolid"] = item["id"] || 0;
|
|
const queryMajorSearch = (queryString, cb) => {
|
|
publishProfessionSearchHttp({ keyword: queryString }).then((res) => {
|
|
if (res.code != 200)
|
|
return;
|
|
let data = res.data || [];
|
|
let isRepetition = false;
|
|
data.forEach((element) => {
|
|
element["value"] = element["name"];
|
|
if (element["name"] == queryString)
|
|
isRepetition = true;
|
|
});
|
|
if (!isRepetition) {
|
|
data.unshift({
|
|
value: queryString
|
|
});
|
|
}
|
|
cb(data);
|
|
});
|
|
};
|
|
const handleMajorSelect = (item) => info.value["profession_id"] = item["id"] || 0;
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_el_autocomplete = ElAutocomplete;
|
|
const _component_el_input = ElInput;
|
|
const _component_el_config_provider = ElConfigProvider;
|
|
const _component_el_date_picker = ElDatePicker;
|
|
_push(`<!--[--><div class="content" data-v-17b05f5b><div class="flexacenter save-box save-left" data-v-17b05f5b><img class="save-icon"${ssrRenderAttr("src", _imports_0)} data-v-17b05f5b> \u4FDD\u5B58\u5E76\u9000\u51FA </div><div class="flexacenter save-box save-right" data-v-17b05f5b> \u653E\u5F03\u4FDD\u5B58 <img class="save-icon"${ssrRenderAttr("src", _imports_1)} data-v-17b05f5b></div><div class="header flexacenter" data-v-17b05f5b>\u53D1\u5E03\u9762\u7ECF</div><div class="box flex1 flexflex" data-v-17b05f5b><div class="box-left" data-v-17b05f5b><div class="area-box" data-v-17b05f5b><div class="item" data-v-17b05f5b><div class="title flexacenter" data-v-17b05f5b> \u7533\u8BF7\u4FE1\u606F <div class="asterisk" data-v-17b05f5b>*</div></div><div class="info-box" data-v-17b05f5b><div class="info-item flexacenter" data-v-17b05f5b><div class="info-name" data-v-17b05f5b>\u9662\u6821</div><div class="flex1" data-v-17b05f5b>`);
|
|
_push(ssrRenderComponent(_component_el_autocomplete, {
|
|
debounce: "",
|
|
modelValue: unref(info).school,
|
|
"onUpdate:modelValue": ($event) => unref(info).school = $event,
|
|
"fetch-suggestions": querySchoolSearch,
|
|
clearable: "",
|
|
class: "inline-input w-50",
|
|
placeholder: "\u8F93\u5165\u5173\u952E\u8BCD\uFF0C\u9009\u62E9\u9662\u6821",
|
|
onSelect: handleSchoolSelect,
|
|
"trigger-on-focus": false
|
|
}, {
|
|
suffix: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<img class=""${ssrRenderAttr("src", _imports_2)} data-v-17b05f5b${_scopeId}>`);
|
|
} else {
|
|
return [
|
|
createVNode("img", {
|
|
class: "",
|
|
src: _imports_2
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`</div></div><div class="info-item flexacenter" data-v-17b05f5b><div class="info-name" data-v-17b05f5b>\u4E13\u4E1A</div><div class="flex1" data-v-17b05f5b>`);
|
|
_push(ssrRenderComponent(_component_el_autocomplete, {
|
|
modelValue: unref(info).profession,
|
|
"onUpdate:modelValue": ($event) => unref(info).profession = $event,
|
|
"fetch-suggestions": queryMajorSearch,
|
|
clearable: "",
|
|
class: "inline-input w-50",
|
|
placeholder: "\u8F93\u5165\u5173\u952E\u8BCD\uFF0C\u9009\u62E9\u4E13\u4E1A",
|
|
onSelect: handleMajorSelect,
|
|
"trigger-on-focus": false
|
|
}, {
|
|
suffix: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<img class=""${ssrRenderAttr("src", _imports_2)} data-v-17b05f5b${_scopeId}>`);
|
|
} else {
|
|
return [
|
|
createVNode("img", {
|
|
class: "",
|
|
src: _imports_2
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`</div></div><div class="info-item flexacenter" data-v-17b05f5b><div class="info-name" data-v-17b05f5b>\u9879\u76EE</div>`);
|
|
_push(ssrRenderComponent(_component_el_input, {
|
|
class: "flex1 input",
|
|
placeholder: "\u8BF7\u8F93\u5165",
|
|
modelValue: unref(info).project,
|
|
"onUpdate:modelValue": ($event) => unref(info).project = $event
|
|
}, null, _parent));
|
|
_push(`</div></div></div><div class="item" data-v-17b05f5b><div class="title flexacenter" data-v-17b05f5b> \u9762\u8BD5\u65F6\u95F4 <div class="asterisk" data-v-17b05f5b>*</div></div><div class="time-box item-input-box flexacenter" data-v-17b05f5b>`);
|
|
_push(ssrRenderComponent(_component_el_config_provider, { locale: unref(zhCn) }, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(ssrRenderComponent(_component_el_date_picker, {
|
|
modelValue: unref(info).interviewtime,
|
|
"onUpdate:modelValue": ($event) => unref(info).interviewtime = $event,
|
|
type: "date",
|
|
placeholder: "\u8BF7\u9009\u62E9",
|
|
size: "large",
|
|
class: "flex1 flexacenter",
|
|
"clear-icon": {},
|
|
"value-format": "YYYY-MM-DD",
|
|
"disabled-date": setDisabled
|
|
}, null, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode(_component_el_date_picker, {
|
|
modelValue: unref(info).interviewtime,
|
|
"onUpdate:modelValue": ($event) => unref(info).interviewtime = $event,
|
|
type: "date",
|
|
placeholder: "\u8BF7\u9009\u62E9",
|
|
size: "large",
|
|
class: "flex1 flexacenter",
|
|
"clear-icon": {},
|
|
"value-format": "YYYY-MM-DD",
|
|
"disabled-date": setDisabled
|
|
}, null, 8, ["modelValue", "onUpdate:modelValue"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`<img class="calendar-icon"${ssrRenderAttr("src", _imports_3)} data-v-17b05f5b></div></div><div class="item" data-v-17b05f5b><div class="title flexacenter" data-v-17b05f5b> \u9762\u7ECF\u5E16\u6807\u9898 <div class="asterisk" data-v-17b05f5b>*</div></div><div class="title-box item-input-box flexacenter" data-v-17b05f5b>`);
|
|
_push(ssrRenderComponent(_component_el_input, {
|
|
modelValue: unref(info).subject,
|
|
"onUpdate:modelValue": ($event) => unref(info).subject = $event,
|
|
placeholder: "\u7ED9\u4F60\u7684\u9762\u7ECF\u5E16\u8D77\u4E00\u4E2A\u5438\u5F15\u7684\u6807\u9898\u5427"
|
|
}, null, _parent));
|
|
_push(`</div></div></div><div class="visible-box flexacenter" data-v-17b05f5b>`);
|
|
if (unref(info).isvisiblereply == 0) {
|
|
_push(`<img class="visible-icon"${ssrRenderAttr("src", _imports_4)} data-v-17b05f5b>`);
|
|
} else {
|
|
_push(`<img class="visible-icon"${ssrRenderAttr("src", _imports_5)} data-v-17b05f5b>`);
|
|
}
|
|
_push(` \u56DE\u590D/\u70B9\u8D5E\u53EF\u89C1 </div></div><div class="box-right" data-v-17b05f5b><div class="area-box" data-v-17b05f5b><div class="item" data-v-17b05f5b><div class="title flexacenter" data-v-17b05f5b> \u9762\u8BD5\u6784\u6210\u53CA\u8FC7\u7A0B <div class="asterisk" data-v-17b05f5b>*</div></div><div class="course-box" data-v-17b05f5b>`);
|
|
_push(ssrRenderComponent(_component_el_input, {
|
|
modelValue: unref(info).message,
|
|
"onUpdate:modelValue": ($event) => unref(info).message = $event,
|
|
type: "textarea",
|
|
autosize: "",
|
|
placeholder: "\u4F8B\u5982\uFF1A\u9879\u76EE\u4ECB\u7ECD\u3001\u9762\u8BD5\u65F6\u957F\u3001\u9762\u8BD5\u5B98\u3001\u95EE\u9898QA\u3001\u9700\u8981\u6CE8\u610F\u7684\u5730\u65B9"
|
|
}, null, _parent));
|
|
_push(`</div></div></div></div></div><div class="hint-box flexcenter" data-v-17b05f5b>\u6CE8\uFF1A\u8BF7\u786E\u4FDD\u4EE5\u4E0A\u5185\u5BB9\u5DF2\u6B63\u786E\u586B\u5199\uFF0C\u53D1\u5E03\u540E\u5C06\u4E0D\u80FD\u4FEE\u6539</div></div><div class="floor-box" data-v-17b05f5b><div class="box flexacenter" data-v-17b05f5b><div class="anonymous-box flexacenter" data-v-17b05f5b>`);
|
|
if (unref(info).anonymous == 0) {
|
|
_push(`<img class="anonymous-icon"${ssrRenderAttr("src", _imports_4)} data-v-17b05f5b>`);
|
|
} else {
|
|
_push(`<img class="anonymous-icon"${ssrRenderAttr("src", _imports_5)} data-v-17b05f5b>`);
|
|
}
|
|
_push(` \u533F\u540D\u53D1\u8868 <div class="text" data-v-17b05f5b>\uFF08\u53D1\u5E03\u540E\u53EF\u4FEE\u6539\uFF09</div></div><div class="issue-btn flexcenter" data-v-17b05f5b>\u53D1\u5E03</div></div></div><!--]-->`);
|
|
};
|
|
}
|
|
};
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/publish/index.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-17b05f5b"]]);
|
|
|
|
export { index as default };
|
|
//# sourceMappingURL=index-418fc314.mjs.map
|