import {
handleNumber,
toFloatValueFixed
} from "./chunk-CYW3UC3Z.js";
import {
getAbsolutePos,
getEventTargetNode,
hasClass,
hasControlKey
} from "./chunk-PBZHTG65.js";
import {
eqEmptyValue,
getFuncText,
getLastZIndex,
nextZIndex
} from "./chunk-REHJGRQO.js";
import {
getSlotVNs
} from "./chunk-LXH6LNL6.js";
import {
defineVxeComponent,
warnLog
} from "./chunk-ML6NAHIO.js";
import {
GLOBAL_EVENT_KEYS,
createEvent,
getConfig,
getI18n,
getIcon,
globalEvents,
renderEmptyElement,
require_xe_utils,
useSize
} from "./chunk-YJNUXQVJ.js";
import {
Teleport,
computed,
createCommentVNode,
h,
inject,
nextTick,
onBeforeUnmount,
onMounted,
reactive,
ref,
watch
} from "./chunk-AAHVYXXY.js";
import {
__toESM
} from "./chunk-V4OQ3NZ2.js";
// ../node_modules/.pnpm/vxe-pc-ui@4.10.22_vue@3.5.24_typescript@5.9.3_/node_modules/vxe-pc-ui/es/input/src/input.js
var import_xe_utils2 = __toESM(require_xe_utils());
// ../node_modules/.pnpm/vxe-pc-ui@4.10.22_vue@3.5.24_typescript@5.9.3_/node_modules/vxe-pc-ui/es/date-panel/src/util.js
var import_xe_utils = __toESM(require_xe_utils());
function toStringTimeDate(str) {
const rest = new Date(2e3, 0, 1);
if (str) {
let h2 = 0;
let m = 0;
let s = 0;
if (import_xe_utils.default.isNumber(str) || /^[0-9]{11,15}$/.test(`${str}`)) {
str = new Date(Number(str));
}
if (import_xe_utils.default.isDate(str)) {
h2 = str.getHours();
m = str.getMinutes();
s = str.getSeconds();
} else {
str = import_xe_utils.default.toValueString(str);
const parses = str.match(/^(\d{1,2})(:(\d{1,2}))?(:(\d{1,2}))?/);
if (parses) {
h2 = import_xe_utils.default.toNumber(parses[1]);
m = import_xe_utils.default.toNumber(parses[3]);
s = import_xe_utils.default.toNumber(parses[5]);
}
}
rest.setHours(h2);
rest.setMinutes(m);
rest.setSeconds(s);
return rest;
}
return rest;
}
function getDateQuarter(date) {
const month = date.getMonth();
if (month < 3) {
return 1;
} else if (month < 6) {
return 2;
} else if (month < 9) {
return 3;
}
return 4;
}
// ../node_modules/.pnpm/vxe-pc-ui@4.10.22_vue@3.5.24_typescript@5.9.3_/node_modules/vxe-pc-ui/es/input/src/input.js
var input_default = defineVxeComponent({
name: "VxeInput",
props: {
modelValue: [String, Number, Date],
immediate: {
type: Boolean,
default: true
},
name: String,
title: String,
type: {
type: String,
default: "text"
},
clearable: {
type: Boolean,
default: () => getConfig().input.clearable
},
readonly: {
type: Boolean,
default: null
},
disabled: {
type: Boolean,
default: null
},
placeholder: {
type: String,
default: null
},
maxLength: {
type: [String, Number],
default: () => getConfig().input.maxLength
},
autoComplete: {
type: String,
default: "off"
},
autoFocus: {
type: Boolean,
default: null
},
align: String,
form: String,
className: String,
size: {
type: String,
default: () => getConfig().input.size || getConfig().size
},
multiple: Boolean,
// text
showWordCount: Boolean,
countMethod: Function,
// number、integer、float
min: {
type: [String, Number],
default: null
},
max: {
type: [String, Number],
default: null
},
step: [String, Number],
trim: {
type: Boolean,
default: () => getConfig().input.trim
},
exponential: {
type: Boolean,
default: () => getConfig().input.exponential
},
// number、integer、float、password
controls: {
type: Boolean,
default: () => getConfig().input.controls
},
// float
digits: {
type: [String, Number],
default: () => getConfig().input.digits
},
// date、week、month、quarter、year
startDate: {
type: [String, Number, Date],
default: () => getConfig().input.startDate
},
endDate: {
type: [String, Number, Date],
default: () => getConfig().input.endDate
},
minDate: [String, Number, Date],
maxDate: [String, Number, Date],
// 已废弃 startWeek，被 startDay 替换
startWeek: Number,
startDay: {
type: [String, Number],
default: () => getConfig().input.startDay
},
labelFormat: String,
valueFormat: String,
editable: {
type: Boolean,
default: true
},
festivalMethod: {
type: Function,
default: () => getConfig().input.festivalMethod
},
disabledMethod: {
type: Function,
default: () => getConfig().input.disabledMethod
},
// week
selectDay: {
type: [String, Number],
default: () => getConfig().input.selectDay
},
prefixIcon: String,
suffixIcon: String,
placement: String,
transfer: {
type: Boolean,
default: null
},
// 已废弃
maxlength: [String, Number],
// 已废弃
autocomplete: String
},
emits: [
"update:modelValue",
"input",
"change",
"keydown",
"keyup",
"wheel",
"click",
"focus",
"blur",
"clear",
"lazy-change",
"search-click",
"toggle-visible",
"prev-number",
"next-number",
"prefix-click",
"suffix-click",
"date-prev",
"date-today",
"date-next"
],
setup(props, context) {
const { slots, emit } = context;
const $xeSelect = inject("$xeSelect", null);
const $xeTreeSelect = inject("$xeTreeSelect", null);
const $xeModal = inject("$xeModal", null);
const $xeDrawer = inject("$xeDrawer", null);
const $xeTable = inject("$xeTable", null);
const $xeForm = inject("$xeForm", null);
const formItemInfo = inject("xeFormItemInfo", null);
const xID = import_xe_utils2.default.uniqueId();
const { computeSize } = useSize(props);
const reactData = reactive({
initialized: false,
panelIndex: 0,
showPwd: false,
visiblePanel: false,
isAniVisible: false,
panelStyle: {},
panelPlacement: "",
isActivated: false,
inputValue: props.modelValue,
datetimePanelValue: null,
datePanelValue: null,
datePanelLabel: "",
datePanelType: "day",
selectMonth: null,
currentDate: null
});
const internalData = {
yearSize: 12,
monthSize: 20,
quarterSize: 8,
hpTimeout: void 0,
dnTimeout: void 0
};
const refElem = ref();
const refInputTarget = ref();
const refInputPanel = ref();
const refPanelWrapper = ref();
const refInputTimeBody = ref();
const refMaps = {
refElem,
refInput: refInputTarget
};
const $xeInput = {
xID,
props,
context,
reactData,
internalData,
getRefMaps: () => refMaps
};
let inputMethods = {};
const parseDate = (value, format) => {
const { type } = props;
if (type === "time") {
return toStringTimeDate(value);
}
return import_xe_utils2.default.toStringDate(value, format);
};
const computeBtnTransfer = computed(() => {
const { transfer } = props;
if (transfer === null) {
const globalTransfer = getConfig().input.transfer;
if (import_xe_utils2.default.isBoolean(globalTransfer)) {
return globalTransfer;
}
if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
return true;
}
}
return transfer;
});
const computeFormReadonly = computed(() => {
if ($xeForm) {
return $xeForm.props.readonly;
}
return false;
});
const computeIsReadonly = computed(() => {
const { readonly } = props;
return readonly;
});
const computeIsDisabled = computed(() => {
const { disabled } = props;
if (disabled === null) {
if ($xeForm) {
return $xeForm.props.disabled;
}
return false;
}
return disabled;
});
const computeInpMaxLength = computed(() => {
const { maxLength, maxlength } = props;
const maxLen = maxLength || maxlength;
const isNumType = computeIsNumType.value;
if (isNumType) {
if (!import_xe_utils2.default.toNumber(maxLen)) {
return 16;
}
}
return maxLen;
});
const computeIsDateTimeType = computed(() => {
const { type } = props;
return type === "time" || type === "datetime";
});
const computeIsNumType = computed(() => {
return ["number", "integer", "float"].indexOf(props.type) > -1;
});
const computeInputCount = computed(() => {
return import_xe_utils2.default.getSize(reactData.inputValue);
});
const computeIsCountError = computed(() => {
const inputCount = computeInputCount.value;
const inpMaxLength = computeInpMaxLength.value;
return inpMaxLength && inputCount > import_xe_utils2.default.toNumber(inpMaxLength);
});
const computeIsDatePickerType = computed(() => {
const isDateTimeType = computeIsDateTimeType.value;
return isDateTimeType || ["date", "week", "month", "quarter", "year"].indexOf(props.type) > -1;
});
const computeIsPawdType = computed(() => {
return props.type === "password";
});
const computeIsSearchType = computed(() => {
return props.type === "search";
});
const computeDigitsValue = computed(() => {
return import_xe_utils2.default.toInteger(props.digits) || 1;
});
const computeStepValue = computed(() => {
const { type } = props;
const digitsValue = computeDigitsValue.value;
const step = props.step;
if (type === "integer") {
return import_xe_utils2.default.toInteger(step) || 1;
} else if (type === "float") {
return import_xe_utils2.default.toNumber(step) || 1 / Math.pow(10, digitsValue);
}
return import_xe_utils2.default.toNumber(step) || 1;
});
const computeIsClearable = computed(() => {
const { type } = props;
const isNumType = computeIsNumType.value;
const isDatePickerType = computeIsDatePickerType.value;
const isPawdType = computeIsPawdType.value;
return props.clearable && (isPawdType || isNumType || isDatePickerType || type === "text" || type === "search");
});
const computeDateStartTime = computed(() => {
return props.startDate ? import_xe_utils2.default.toStringDate(props.startDate) : null;
});
const computeDateEndTime = computed(() => {
return props.endDate ? import_xe_utils2.default.toStringDate(props.endDate) : null;
});
const computeSupportMultiples = computed(() => {
return ["date", "week", "month", "quarter", "year"].indexOf(props.type) > -1;
});
const computeDateListValue = computed(() => {
const { modelValue, multiple } = props;
const isDatePickerType = computeIsDatePickerType.value;
const dateValueFormat = computeDateValueFormat.value;
if (multiple && modelValue && isDatePickerType) {
return import_xe_utils2.default.toValueString(modelValue).split(",").map((item) => {
const date = parseDate(item, dateValueFormat);
if (import_xe_utils2.default.isValidDate(date)) {
return date;
}
return null;
});
}
return [];
});
const computeDateMultipleValue = computed(() => {
const dateListValue = computeDateListValue.value;
const dateValueFormat = computeDateValueFormat.value;
return dateListValue.map((date) => import_xe_utils2.default.toDateString(date, dateValueFormat));
});
const computeDateMultipleLabel = computed(() => {
const dateListValue = computeDateListValue.value;
const dateLabelFormat = computeDateLabelFormat.value;
return dateListValue.map((date) => import_xe_utils2.default.toDateString(date, dateLabelFormat)).join(", ");
});
const computeDateValueFormat = computed(() => {
const { type, valueFormat } = props;
if (valueFormat) {
return valueFormat;
}
if (type === "time") {
return "HH:mm:ss";
}
if (type === "datetime") {
return "yyyy-MM-dd HH:mm:ss";
}
return "yyyy-MM-dd";
});
const computeDateValue = computed(() => {
const { modelValue } = props;
const isDatePickerType = computeIsDatePickerType.value;
const dateValueFormat = computeDateValueFormat.value;
let val = null;
if (modelValue && isDatePickerType) {
const date = parseDate(modelValue, dateValueFormat);
if (import_xe_utils2.default.isValidDate(date)) {
val = date;
}
}
return val;
});
const computeIsDisabledPrevDateBtn = computed(() => {
const dateStartTime = computeDateStartTime.value;
const { selectMonth } = reactData;
if (selectMonth && dateStartTime) {
return selectMonth <= dateStartTime;
}
return false;
});
const computeIsDisabledNextDateBtn = computed(() => {
const dateEndTime = computeDateEndTime.value;
const { selectMonth } = reactData;
if (selectMonth && dateEndTime) {
return selectMonth >= dateEndTime;
}
return false;
});
const computeDateTimeLabel = computed(() => {
const { datetimePanelValue } = reactData;
const hasTimeSecond = computeHasTimeSecond.value;
if (datetimePanelValue) {
return import_xe_utils2.default.toDateString(datetimePanelValue, hasTimeSecond ? "HH:mm:ss" : "HH:mm");
}
return "";
});
const computeDateHMSTime = computed(() => {
const dateValue = computeDateValue.value;
const isDateTimeType = computeIsDateTimeType.value;
return dateValue && isDateTimeType ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1e3 : 0;
});
const computeDateLabelFormat = computed(() => {
const { labelFormat } = props;
const isDatePickerType = computeIsDatePickerType.value;
if (isDatePickerType) {
return labelFormat || getI18n(`vxe.input.date.labelFormat.${props.type}`);
}
return "";
});
const computeYearList = computed(() => {
const { selectMonth, currentDate } = reactData;
const { yearSize } = internalData;
const years = [];
if (selectMonth && currentDate) {
const currFullYear = currentDate.getFullYear();
const selectFullYear = selectMonth.getFullYear();
const startYearDate = new Date(selectFullYear - selectFullYear % yearSize, 0, 1);
for (let index = -4; index < yearSize + 4; index++) {
const date = import_xe_utils2.default.getWhatYear(startYearDate, index, "first");
const itemFullYear = date.getFullYear();
years.push({
date,
isCurrent: true,
isPrev: index < 0,
isNow: currFullYear === itemFullYear,
isNext: index >= yearSize,
year: itemFullYear
});
}
}
return years;
});
const computeSelectDatePanelObj = computed(() => {
const isDatePickerType = computeIsDatePickerType.value;
let y = "";
let m = "";
if (isDatePickerType) {
const { datePanelType, selectMonth } = reactData;
const yearList = computeYearList.value;
let year = "";
let month;
if (selectMonth) {
year = selectMonth.getFullYear();
month = selectMonth.getMonth() + 1;
}
if (datePanelType === "quarter" || datePanelType === "month") {
y = getI18n("vxe.datePicker.yearTitle", [year]);
} else if (datePanelType === "year") {
y = yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : "";
} else {
y = getI18n("vxe.datePicker.yearTitle", [year]);
m = month ? getI18n(`vxe.input.date.m${month}`) : "-";
}
}
return {
y,
m
};
});
const computeFirstDayOfWeek = computed(() => {
const { startDay, startWeek } = props;
return import_xe_utils2.default.toNumber(import_xe_utils2.default.isNumber(startDay) || import_xe_utils2.default.isString(startDay) ? startDay : startWeek);
});
const computeWeekDatas = computed(() => {
const weeks = [];
const isDatePickerType = computeIsDatePickerType.value;
if (isDatePickerType) {
let sWeek = computeFirstDayOfWeek.value;
weeks.push(sWeek);
for (let index = 0; index < 6; index++) {
if (sWeek >= 6) {
sWeek = 0;
} else {
sWeek++;
}
weeks.push(sWeek);
}
}
return weeks;
});
const computeDateHeaders = computed(() => {
const isDatePickerType = computeIsDatePickerType.value;
if (isDatePickerType) {
const weekDatas = computeWeekDatas.value;
return weekDatas.map((day) => {
return {
value: day,
label: getI18n(`vxe.input.date.weeks.w${day}`)
};
});
}
return [];
});
const computeWeekHeaders = computed(() => {
const isDatePickerType = computeIsDatePickerType.value;
if (isDatePickerType) {
const dateHeaders = computeDateHeaders.value;
return [{ label: getI18n("vxe.input.date.weeks.w") }].concat(dateHeaders);
}
return [];
});
const computeYearDatas = computed(() => {
const yearList = computeYearList.value;
return import_xe_utils2.default.chunk(yearList, 4);
});
const computeQuarterList = computed(() => {
const { selectMonth, currentDate } = reactData;
const { quarterSize } = internalData;
const quarters = [];
if (selectMonth && currentDate) {
const currFullYear = currentDate.getFullYear();
const currQuarter = getDateQuarter(currentDate);
const firstYear = import_xe_utils2.default.getWhatYear(selectMonth, 0, "first");
const selFullYear = firstYear.getFullYear();
for (let index = -2; index < quarterSize - 2; index++) {
const date = import_xe_utils2.default.getWhatQuarter(firstYear, index);
const itemFullYear = date.getFullYear();
const itemQuarter = getDateQuarter(date);
const isPrev = itemFullYear < selFullYear;
quarters.push({
date,
isPrev,
isCurrent: itemFullYear === selFullYear,
isNow: itemFullYear === currFullYear && itemQuarter === currQuarter,
isNext: !isPrev && itemFullYear > selFullYear,
quarter: itemQuarter
});
}
}
return quarters;
});
const computeQuarterDatas = computed(() => {
const quarterList = computeQuarterList.value;
return import_xe_utils2.default.chunk(quarterList, 2);
});
const computeMonthList = computed(() => {
const { selectMonth, currentDate } = reactData;
const { monthSize } = internalData;
const months = [];
if (selectMonth && currentDate) {
const currFullYear = currentDate.getFullYear();
const currMonth = currentDate.getMonth();
const selFullYear = import_xe_utils2.default.getWhatYear(selectMonth, 0, "first").getFullYear();
for (let index = -4; index < monthSize - 4; index++) {
const date = import_xe_utils2.default.getWhatYear(selectMonth, 0, index);
const itemFullYear = date.getFullYear();
const itemMonth = date.getMonth();
const isPrev = itemFullYear < selFullYear;
months.push({
date,
isPrev,
isCurrent: itemFullYear === selFullYear,
isNow: itemFullYear === currFullYear && itemMonth === currMonth,
isNext: !isPrev && itemFullYear > selFullYear,
month: itemMonth
});
}
}
return months;
});
const computeMonthDatas = computed(() => {
const monthList = computeMonthList.value;
return import_xe_utils2.default.chunk(monthList, 4);
});
const computeDayList = computed(() => {
const { selectMonth, currentDate } = reactData;
const days = [];
if (selectMonth && currentDate) {
const dateHMSTime = computeDateHMSTime.value;
const weekDatas = computeWeekDatas.value;
const currFullYear = currentDate.getFullYear();
const currMonth = currentDate.getMonth();
const currDate = currentDate.getDate();
const selFullYear = selectMonth.getFullYear();
const selMonth = selectMonth.getMonth();
const selDay = selectMonth.getDay();
const prevOffsetDate = -weekDatas.indexOf(selDay);
const startDayDate = new Date(import_xe_utils2.default.getWhatDay(selectMonth, prevOffsetDate).getTime() + dateHMSTime);
for (let index = 0; index < 42; index++) {
const date = import_xe_utils2.default.getWhatDay(startDayDate, index);
const itemFullYear = date.getFullYear();
const itemMonth = date.getMonth();
const itemDate = date.getDate();
const isPrev = date < selectMonth;
days.push({
date,
isPrev,
isCurrent: itemFullYear === selFullYear && itemMonth === selMonth,
isNow: itemFullYear === currFullYear && itemMonth === currMonth && itemDate === currDate,
isNext: !isPrev && selMonth !== itemMonth,
label: itemDate
});
}
}
return days;
});
const computeDayDatas = computed(() => {
const dayList = computeDayList.value;
return import_xe_utils2.default.chunk(dayList, 7);
});
const computeWeekDates = computed(() => {
const dayDatas = computeDayDatas.value;
const firstDayOfWeek = computeFirstDayOfWeek.value;
return dayDatas.map((list) => {
const firstItem = list[0];
const item = {
date: firstItem.date,
isWeekNumber: true,
isPrev: false,
isCurrent: false,
isNow: false,
isNext: false,
label: import_xe_utils2.default.getYearWeek(firstItem.date, firstDayOfWeek)
};
return [item].concat(list);
});
});
const computeHourList = computed(() => {
const list = [];
const isDateTimeType = computeIsDateTimeType.value;
if (isDateTimeType) {
for (let index = 0; index < 24; index++) {
list.push({
value: index,
label: ("" + index).padStart(2, "0")
});
}
}
return list;
});
const computeMinuteList = computed(() => {
const list = [];
const isDateTimeType = computeIsDateTimeType.value;
if (isDateTimeType) {
for (let index = 0; index < 60; index++) {
list.push({
value: index,
label: ("" + index).padStart(2, "0")
});
}
}
return list;
});
const computeHasTimeMinute = computed(() => {
const dateValueFormat = computeDateValueFormat.value;
return !/HH/.test(dateValueFormat) || /mm/.test(dateValueFormat);
});
const computeHasTimeSecond = computed(() => {
const dateValueFormat = computeDateValueFormat.value;
return !/HH/.test(dateValueFormat) || /ss/.test(dateValueFormat);
});
const computeSecondList = computed(() => {
const minuteList = computeMinuteList.value;
return minuteList;
});
const computeInputReadonly = computed(() => {
const { type, editable, multiple } = props;
const isReadonly = computeIsReadonly.value;
return isReadonly || multiple || !editable || type === "week" || type === "quarter";
});
const computeInputType = computed(() => {
const { type } = props;
const { showPwd } = reactData;
const isNumType = computeIsNumType.value;
const isDatePickerType = computeIsDatePickerType.value;
const isPawdType = computeIsPawdType.value;
if (isDatePickerType || isNumType || isPawdType && showPwd || type === "number") {
return "text";
}
return type;
});
const computeInpPlaceholder = computed(() => {
const { placeholder } = props;
if (placeholder) {
return getFuncText(placeholder);
}
if (import_xe_utils2.default.eqNull(placeholder)) {
const globalPlaceholder = getConfig().input.placeholder;
if (globalPlaceholder) {
return getFuncText(globalPlaceholder);
}
return getI18n("vxe.base.pleaseInput");
}
return placeholder;
});
const computeInpImmediate = computed(() => {
const { type, immediate } = props;
return immediate || !(type === "text" || type === "number" || type === "integer" || type === "float");
});
const computeNumValue = computed(() => {
const { type } = props;
const { inputValue } = reactData;
const isNumType = computeIsNumType.value;
if (isNumType) {
return type === "integer" ? import_xe_utils2.default.toInteger(handleNumber(inputValue)) : import_xe_utils2.default.toNumber(handleNumber(inputValue));
}
return 0;
});
const computeIsDisabledSubtractNumber = computed(() => {
const { min } = props;
const { inputValue } = reactData;
const isNumType = computeIsNumType.value;
const numValue = computeNumValue.value;
if ((inputValue || inputValue === 0) && isNumType && min !== null) {
return numValue <= import_xe_utils2.default.toNumber(min);
}
return false;
});
const computeIsDisabledAddNumber = computed(() => {
const { max } = props;
const { inputValue } = reactData;
const isNumType = computeIsNumType.value;
const numValue = computeNumValue.value;
if ((inputValue || inputValue === 0) && isNumType && max !== null) {
return numValue >= import_xe_utils2.default.toNumber(max);
}
return false;
});
const getNumberValue = (val) => {
const { type, exponential } = props;
const inpMaxLength = computeInpMaxLength.value;
const digitsValue = computeDigitsValue.value;
const restVal = type === "float" ? toFloatValueFixed(val, digitsValue) : import_xe_utils2.default.toValueString(val);
if (exponential && (val === restVal || import_xe_utils2.default.toValueString(val).toLowerCase() === import_xe_utils2.default.toNumber(restVal).toExponential())) {
return val;
}
return restVal.slice(0, inpMaxLength);
};
const emitModel = (value) => {
emit("update:modelValue", value);
};
const triggerEvent = (evnt) => {
const { inputValue } = reactData;
inputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
};
const handleChange = (value, evnt) => {
if (props.trim) {
value = `${value || ""}`.trim();
}
reactData.inputValue = value;
emitModel(value);
inputMethods.dispatchEvent("input", { value }, evnt);
if (import_xe_utils2.default.toValueString(props.modelValue) !== value) {
inputMethods.dispatchEvent("change", { value }, evnt);
if (!$xeSelect && !$xeTreeSelect) {
if ($xeForm && formItemInfo) {
$xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
}
}
}
};
const emitInputEvent = (value, evnt) => {
const isDatePickerType = computeIsDatePickerType.value;
const inpImmediate = computeInpImmediate.value;
reactData.inputValue = value;
if (!isDatePickerType) {
if (inpImmediate) {
handleChange(value, evnt);
} else {
inputMethods.dispatchEvent("input", { value }, evnt);
}
}
};
const inputEvent = (evnt) => {
const inputElem = evnt.target;
const value = inputElem.value;
emitInputEvent(value, evnt);
};
const changeEvent = (evnt) => {
const inpImmediate = computeInpImmediate.value;
if (!inpImmediate) {
triggerEvent(evnt);
}
$xeInput.dispatchEvent("lazy-change", { value: reactData.inputValue }, evnt);
};
const blurEvent = (evnt) => {
const { inputValue } = reactData;
const inpImmediate = computeInpImmediate.value;
const value = inputValue;
if (!inpImmediate) {
handleChange(value, evnt);
}
afterCheckValue();
if (!reactData.visiblePanel) {
reactData.isActivated = false;
}
inputMethods.dispatchEvent("blur", { value }, evnt);
if (!$xeSelect && !$xeTreeSelect) {
if ($xeForm && formItemInfo) {
$xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
}
}
};
const focusEvent = (evnt) => {
const { inputValue } = reactData;
const isNumType = computeIsNumType.value;
const isDatePickerType = computeIsDatePickerType.value;
reactData.isActivated = true;
if (isNumType) {
reactData.inputValue = eqEmptyValue(inputValue) ? "" : `${import_xe_utils2.default.toNumber(inputValue)}`;
} else if (isDatePickerType) {
datePickerOpenEvent(evnt);
}
triggerEvent(evnt);
};
const clickPrefixEvent = (evnt) => {
const isDisabled = computeIsDisabled.value;
if (!isDisabled) {
const { inputValue } = reactData;
$xeInput.dispatchEvent("prefix-click", { value: inputValue }, evnt);
}
};
const hidePanel = () => {
return new Promise((resolve) => {
reactData.visiblePanel = false;
internalData.hpTimeout = setTimeout(() => {
reactData.isAniVisible = false;
resolve();
}, 350);
});
};
const clearValueEvent = (evnt, value) => {
const { type, autoFocus } = props;
const isNumType = computeIsNumType.value;
const isDatePickerType = computeIsDatePickerType.value;
if (isDatePickerType) {
hidePanel();
}
if (autoFocus || autoFocus === null) {
if (isNumType || ["text", "search", "password"].indexOf(type) > -1) {
focus();
}
}
handleChange("", evnt);
$xeInput.dispatchEvent("clear", { value }, evnt);
$xeInput.dispatchEvent("lazy-change", { value }, evnt);
};
const clickSuffixEvent = (evnt) => {
const isDisabled = computeIsDisabled.value;
if (!isDisabled) {
const { inputValue } = reactData;
$xeInput.dispatchEvent("suffix-click", { value: inputValue }, evnt);
}
};
const dateParseValue = (value) => {
const { type } = props;
const dateLabelFormat = computeDateLabelFormat.value;
const dateValueFormat = computeDateValueFormat.value;
const firstDayOfWeek = computeFirstDayOfWeek.value;
let dValue = null;
let dLabel = "";
if (value) {
dValue = parseDate(value, dateValueFormat);
}
if (import_xe_utils2.default.isValidDate(dValue)) {
dLabel = import_xe_utils2.default.toDateString(dValue, dateLabelFormat, { firstDay: firstDayOfWeek });
if (dateLabelFormat && type === "week") {
const weekNum = import_xe_utils2.default.getYearWeek(dValue, firstDayOfWeek);
const weekDate = import_xe_utils2.default.getWhatWeek(dValue, 0, weekNum === 1 ? (6 + firstDayOfWeek) % 7 : firstDayOfWeek, firstDayOfWeek);
const weekFullYear = weekDate.getFullYear();
if (weekFullYear !== dValue.getFullYear()) {
const yyIndex = dateLabelFormat.indexOf("yyyy");
if (yyIndex > -1) {
const yyNum = Number(dLabel.substring(yyIndex, yyIndex + 4));
if (yyNum && !isNaN(yyNum)) {
dLabel = dLabel.replace(`${yyNum}`, `${weekFullYear}`);
}
}
}
}
} else {
dValue = null;
}
reactData.datePanelValue = dValue;
reactData.datePanelLabel = dLabel;
};
const changeValue = () => {
const isDatePickerType = computeIsDatePickerType.value;
const { inputValue } = reactData;
if (isDatePickerType) {
dateParseValue(inputValue);
reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
}
};
const initValue = () => {
const { type } = props;
const { inputValue } = reactData;
const isDatePickerType = computeIsDatePickerType.value;
const digitsValue = computeDigitsValue.value;
if (isDatePickerType) {
changeValue();
} else if (type === "float") {
if (inputValue) {
const validValue = toFloatValueFixed(inputValue, digitsValue);
if (inputValue !== validValue) {
handleChange(validValue, { type: "init" });
}
}
}
};
const validMaxNum = (num) => {
return props.max === null || props.max === "" || import_xe_utils2.default.toNumber(num) <= import_xe_utils2.default.toNumber(props.max);
};
const validMinNum = (num) => {
return props.min === null || props.min === "" || import_xe_utils2.default.toNumber(num) >= import_xe_utils2.default.toNumber(props.min);
};
const dateRevert = () => {
reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
};
const dateCheckMonth = (date) => {
const firstDayOfWeek = computeFirstDayOfWeek.value;
const weekNum = import_xe_utils2.default.getYearWeek(date, firstDayOfWeek);
const weekStartDate = import_xe_utils2.default.getWhatWeek(date, 0, firstDayOfWeek, firstDayOfWeek);
const month = import_xe_utils2.default.getWhatMonth(weekNum === 1 ? import_xe_utils2.default.getWhatDay(weekStartDate, 6) : date, 0, "first");
if (!import_xe_utils2.default.isEqual(month, reactData.selectMonth)) {
reactData.selectMonth = month;
}
};
const dateChange = (date) => {
const { modelValue, multiple } = props;
const { datetimePanelValue } = reactData;
const isDateTimeType = computeIsDateTimeType.value;
const dateValueFormat = computeDateValueFormat.value;
const firstDayOfWeek = computeFirstDayOfWeek.value;
if (props.type === "week") {
const sWeek = import_xe_utils2.default.toNumber(props.selectDay);
date = import_xe_utils2.default.getWhatWeek(date, 0, sWeek, firstDayOfWeek);
} else if (isDateTimeType) {
date.setHours(datetimePanelValue.getHours());
date.setMinutes(datetimePanelValue.getMinutes());
date.setSeconds(datetimePanelValue.getSeconds());
}
const inpVal = import_xe_utils2.default.toDateString(date, dateValueFormat, { firstDay: firstDayOfWeek });
dateCheckMonth(date);
if (multiple) {
const dateMultipleValue = computeDateMultipleValue.value;
if (isDateTimeType) {
const dateListValue = [...computeDateListValue.value];
const datetimeRest = [];
const eqIndex = import_xe_utils2.default.findIndexOf(dateListValue, (val) => import_xe_utils2.default.isDateSame(date, val, "yyyyMMdd"));
if (eqIndex === -1) {
dateListValue.push(date);
} else {
dateListValue.splice(eqIndex, 1);
}
dateListValue.forEach((item) => {
if (item) {
item.setHours(datetimePanelValue.getHours());
item.setMinutes(datetimePanelValue.getMinutes());
item.setSeconds(datetimePanelValue.getSeconds());
datetimeRest.push(item);
}
});
handleChange(datetimeRest.map((date2) => import_xe_utils2.default.toDateString(date2, dateValueFormat)).join(","), { type: "update" });
} else {
if (dateMultipleValue.some((val) => import_xe_utils2.default.isEqual(val, inpVal))) {
handleChange(dateMultipleValue.filter((val) => !import_xe_utils2.default.isEqual(val, inpVal)).join(","), { type: "update" });
} else {
handleChange(dateMultipleValue.concat([inpVal]).join(","), { type: "update" });
}
}
} else {
if (!import_xe_utils2.default.isEqual(modelValue, inpVal)) {
handleChange(inpVal, { type: "update" });
}
}
};
const afterCheckValue = () => {
const { type, min, max, exponential } = props;
const { inputValue, datetimePanelValue } = reactData;
const isNumType = computeIsNumType.value;
const isDatePickerType = computeIsDatePickerType.value;
const dateLabelFormat = computeDateLabelFormat.value;
const inputReadonly = computeInputReadonly.value;
if (!inputReadonly) {
if (isNumType) {
if (inputValue) {
const inpVal = `${handleNumber(inputValue)}`;
if (inpVal) {
let inpNumVal = type === "integer" ? import_xe_utils2.default.toInteger(inpVal) : import_xe_utils2.default.toNumber(inpVal);
if (!validMinNum(inpNumVal)) {
inpNumVal = min;
} else if (!validMaxNum(inpNumVal)) {
inpNumVal = max;
}
if (exponential) {
const inpStringVal = import_xe_utils2.default.toValueString(inputValue).toLowerCase();
if (inpStringVal === import_xe_utils2.default.toNumber(inpNumVal).toExponential()) {
inpNumVal = inpStringVal;
}
}
handleChange(getNumberValue(inpNumVal), { type: "check" });
} else {
let inpValue = "";
if (min || min === 0) {
inpValue = `${min}`;
}
handleChange(inpValue, { type: "check" });
}
}
} else if (isDatePickerType) {
if (inputValue) {
let inpDateVal = parseDate(inputValue, dateLabelFormat);
if (import_xe_utils2.default.isValidDate(inpDateVal)) {
if (type === "time") {
inpDateVal = import_xe_utils2.default.toDateString(inpDateVal, dateLabelFormat);
if (inputValue !== inpDateVal) {
handleChange(inpDateVal, { type: "check" });
}
reactData.inputValue = inpDateVal;
} else {
let isChange = false;
const firstDayOfWeek = computeFirstDayOfWeek.value;
if (type === "datetime") {
const dateValue = computeDateValue.value;
if (inputValue !== import_xe_utils2.default.toDateString(dateValue, dateLabelFormat) || inputValue !== import_xe_utils2.default.toDateString(inpDateVal, dateLabelFormat)) {
isChange = true;
datetimePanelValue.setHours(inpDateVal.getHours());
datetimePanelValue.setMinutes(inpDateVal.getMinutes());
datetimePanelValue.setSeconds(inpDateVal.getSeconds());
}
} else {
isChange = true;
}
reactData.inputValue = import_xe_utils2.default.toDateString(inpDateVal, dateLabelFormat, { firstDay: firstDayOfWeek });
if (isChange) {
dateChange(inpDateVal);
}
}
} else {
dateRevert();
}
} else {
handleChange("", { type: "check" });
}
}
}
};
const passwordToggleEvent = (evnt) => {
const { showPwd } = reactData;
const isDisabled = computeIsDisabled.value;
const isReadonly = computeIsReadonly.value;
if (!isDisabled && !isReadonly) {
reactData.showPwd = !showPwd;
}
inputMethods.dispatchEvent("toggle-visible", { visible: reactData.showPwd }, evnt);
};
const searchEvent = (evnt) => {
inputMethods.dispatchEvent("search-click", {}, evnt);
};
const numberChange = (isPlus, evnt) => {
const { min, max, type } = props;
const { inputValue } = reactData;
const stepValue = computeStepValue.value;
const numValue = type === "integer" ? import_xe_utils2.default.toInteger(handleNumber(inputValue)) : import_xe_utils2.default.toNumber(handleNumber(inputValue));
const newValue = isPlus ? import_xe_utils2.default.add(numValue, stepValue) : import_xe_utils2.default.subtract(numValue, stepValue);
let restNum;
if (!validMinNum(newValue)) {
restNum = min;
} else if (!validMaxNum(newValue)) {
restNum = max;
} else {
restNum = newValue;
}
emitInputEvent(getNumberValue(restNum), evnt);
};
const numberNextEvent = (evnt) => {
const isDisabled = computeIsDisabled.value;
const isReadonly = computeIsReadonly.value;
const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value;
numberStopDown();
if (!isDisabled && !isReadonly && !isDisabledSubtractNumber) {
numberChange(false, evnt);
}
inputMethods.dispatchEvent("next-number", { value: reactData.inputValue }, evnt);
};
const numberDownNextEvent = (evnt) => {
internalData.dnTimeout = setTimeout(() => {
numberNextEvent(evnt);
numberDownNextEvent(evnt);
}, 60);
};
const numberPrevEvent = (evnt) => {
const isDisabled = computeIsDisabled.value;
const isReadonly = computeIsReadonly.value;
const isDisabledAddNumber = computeIsDisabledAddNumber.value;
numberStopDown();
if (!isDisabled && !isReadonly && !isDisabledAddNumber) {
numberChange(true, evnt);
}
inputMethods.dispatchEvent("prev-number", { value: reactData.inputValue }, evnt);
};
const numberKeydownEvent = (evnt) => {
const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
if (isUpArrow || isDwArrow) {
evnt.preventDefault();
if (isUpArrow) {
numberPrevEvent(evnt);
} else {
numberNextEvent(evnt);
}
}
};
const keydownEvent = (evnt) => {
const { type, exponential, controls } = props;
const isNumType = computeIsNumType.value;
if (isNumType) {
const isControlKey = hasControlKey(evnt);
const isShiftKey = evnt.shiftKey;
const isAltKey = evnt.altKey;
const keyCode = evnt.keyCode;
const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
if (!isControlKey && !isShiftKey && !isAltKey) {
if (globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR) || type === "integer" && keyCode === 110 || (!exponential || keyCode !== 69) && (keyCode >= 65 && keyCode <= 90) || keyCode >= 186 && keyCode <= 188 || keyCode >= 191) {
evnt.preventDefault();
}
}
if (isEsc) {
afterCheckValue();
} else if (isUpArrow || isDwArrow) {
if (controls) {
numberKeydownEvent(evnt);
}
}
}
triggerEvent(evnt);
};
const keyupEvent = (evnt) => {
triggerEvent(evnt);
};
const numberStopDown = () => {
const { dnTimeout } = internalData;
if (dnTimeout) {
clearTimeout(dnTimeout);
internalData.dnTimeout = void 0;
}
};
const numberDownPrevEvent = (evnt) => {
internalData.dnTimeout = setTimeout(() => {
numberPrevEvent(evnt);
numberDownPrevEvent(evnt);
}, 60);
};
const numberMousedownEvent = (evnt) => {
numberStopDown();
if (evnt.button === 0) {
const isPrevNumber = hasClass(evnt.currentTarget, "is--prev");
if (isPrevNumber) {
numberPrevEvent(evnt);
} else {
numberNextEvent(evnt);
}
internalData.dnTimeout = setTimeout(() => {
if (isPrevNumber) {
numberDownPrevEvent(evnt);
} else {
numberDownNextEvent(evnt);
}
}, 500);
}
};
const wheelEvent = (evnt) => {
const isNumType = computeIsNumType.value;
if (isNumType && props.controls) {
if (reactData.isActivated) {
const delta = evnt.deltaY;
if (delta > 0) {
numberNextEvent(evnt);
} else if (delta < 0) {
numberPrevEvent(evnt);
}
evnt.preventDefault();
}
}
triggerEvent(evnt);
};
const dateMonthHandle = (date, offsetMonth) => {
const firstDayOfWeek = computeFirstDayOfWeek.value;
const weekNum = import_xe_utils2.default.getYearWeek(date, firstDayOfWeek);
const weekStartDate = import_xe_utils2.default.getWhatWeek(date, 0, firstDayOfWeek, firstDayOfWeek);
const month = import_xe_utils2.default.getWhatMonth(weekNum === 1 ? import_xe_utils2.default.getWhatDay(weekStartDate, 6) : date, offsetMonth, "first");
reactData.selectMonth = month;
};
const dateNowHandle = () => {
const currentDate = import_xe_utils2.default.getWhatDay(Date.now(), 0, "first");
reactData.currentDate = currentDate;
dateMonthHandle(currentDate, 0);
};
const dateToggleYearTypeEvent = () => {
reactData.datePanelType = "year";
};
const dateToggleMonthTypeEvent = () => {
let { datePanelType } = reactData;
if (datePanelType === "month" || datePanelType === "quarter") {
datePanelType = "year";
} else {
datePanelType = "month";
}
reactData.datePanelType = datePanelType;
};
const datePrevEvent = (evnt) => {
const { type } = props;
const { datePanelType, selectMonth, inputValue } = reactData;
const { yearSize } = internalData;
const value = inputValue;
const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value;
if (!isDisabledPrevDateBtn) {
let viewDate;
if (type === "year") {
viewDate = import_xe_utils2.default.getWhatYear(selectMonth, -yearSize, "first");
} else if (type === "month" || type === "quarter") {
if (datePanelType === "year") {
viewDate = import_xe_utils2.default.getWhatYear(selectMonth, -yearSize, "first");
} else {
viewDate = import_xe_utils2.default.getWhatYear(selectMonth, -1, "first");
}
} else {
if (datePanelType === "year") {
viewDate = import_xe_utils2.default.getWhatYear(selectMonth, -yearSize, "first");
} else if (datePanelType === "month") {
viewDate = import_xe_utils2.default.getWhatYear(selectMonth, -1, "first");
} else {
viewDate = import_xe_utils2.default.getWhatMonth(selectMonth, -1, "first");
}
}
reactData.selectMonth = viewDate;
inputMethods.dispatchEvent("date-prev", { viewType: datePanelType, viewDate, value, type }, evnt);
}
};
const dateTodayMonthEvent = (evnt) => {
dateNowHandle();
if (!props.multiple) {
dateChange(reactData.currentDate);
hidePanel();
}
inputMethods.dispatchEvent("date-today", { type: props.type }, evnt);
};
const dateNextEvent = (evnt) => {
const { type } = props;
const { datePanelType, selectMonth, inputValue } = reactData;
const { yearSize } = internalData;
const value = inputValue;
const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
if (!isDisabledNextDateBtn) {
let viewDate;
if (type === "year") {
viewDate = import_xe_utils2.default.getWhatYear(selectMonth, yearSize, "first");
} else if (type === "month" || type === "quarter") {
if (datePanelType === "year") {
viewDate = import_xe_utils2.default.getWhatYear(selectMonth, yearSize, "first");
} else {
viewDate = import_xe_utils2.default.getWhatYear(selectMonth, 1, "first");
}
} else {
if (datePanelType === "year") {
viewDate = import_xe_utils2.default.getWhatYear(selectMonth, yearSize, "first");
} else if (datePanelType === "month") {
viewDate = import_xe_utils2.default.getWhatYear(selectMonth, 1, "first");
} else {
viewDate = import_xe_utils2.default.getWhatMonth(selectMonth, 1, "first");
}
}
reactData.selectMonth = viewDate;
inputMethods.dispatchEvent("date-next", { viewType: datePanelType, viewDate, value, type }, evnt);
}
};
const isDateDisabled = (item) => {
const { disabledMethod } = props;
const { datePanelType } = reactData;
const dateStartTime = computeDateStartTime.value;
const dateEndTime = computeDateEndTime.value;
const { date } = item;
if (dateStartTime && dateStartTime.getTime() > date.getTime()) {
return true;
}
if (dateEndTime && dateEndTime.getTime() < date.getTime()) {
return true;
}
if (disabledMethod) {
return disabledMethod({ type: datePanelType, viewType: datePanelType, date, $input: $xeInput });
}
return false;
};
const dateSelectItem = (date) => {
const { type, multiple } = props;
const { datePanelType } = reactData;
if (type === "month") {
if (datePanelType === "year") {
reactData.datePanelType = "month";
dateCheckMonth(date);
} else {
dateChange(date);
if (!multiple) {
hidePanel();
}
}
} else if (type === "year") {
dateChange(date);
if (!multiple) {
hidePanel();
}
} else if (type === "quarter") {
if (datePanelType === "year") {
reactData.datePanelType = "quarter";
dateCheckMonth(date);
} else {
dateChange(date);
if (!multiple) {
hidePanel();
}
}
} else {
if (datePanelType === "month") {
reactData.datePanelType = type === "week" ? type : "day";
dateCheckMonth(date);
} else if (datePanelType === "year") {
reactData.datePanelType = "month";
dateCheckMonth(date);
} else {
dateChange(date);
if (type === "datetime") {
} else {
if (!multiple) {
hidePanel();
}
}
}
}
};
const dateSelectEvent = (item) => {
if (!isDateDisabled(item)) {
dateSelectItem(item.date);
}
};
const dateMoveDay = (offsetDay) => {
if (!isDateDisabled({ date: offsetDay })) {
const dayList = computeDayList.value;
if (!dayList.some((item) => import_xe_utils2.default.isDateSame(item.date, offsetDay, "yyyyMMdd"))) {
dateCheckMonth(offsetDay);
}
dateParseValue(offsetDay);
}
};
const dateMoveYear = (offsetYear) => {
if (!isDateDisabled({ date: offsetYear })) {
const yearList = computeYearList.value;
if (!yearList.some((item) => import_xe_utils2.default.isDateSame(item.date, offsetYear, "yyyy"))) {
dateCheckMonth(offsetYear);
}
dateParseValue(offsetYear);
}
};
const dateMoveQuarter = (offsetQuarter) => {
if (!isDateDisabled({ date: offsetQuarter })) {
const quarterList = computeQuarterList.value;
if (!quarterList.some((item) => import_xe_utils2.default.isDateSame(item.date, offsetQuarter, "yyyyq"))) {
dateCheckMonth(offsetQuarter);
}
dateParseValue(offsetQuarter);
}
};
const dateMoveMonth = (offsetMonth) => {
if (!isDateDisabled({ date: offsetMonth })) {
const monthList = computeMonthList.value;
if (!monthList.some((item) => import_xe_utils2.default.isDateSame(item.date, offsetMonth, "yyyyMM"))) {
dateCheckMonth(offsetMonth);
}
dateParseValue(offsetMonth);
}
};
const dateMouseenterEvent = (item) => {
if (!isDateDisabled(item)) {
const { datePanelType } = reactData;
if (datePanelType === "month") {
dateMoveMonth(item.date);
} else if (datePanelType === "quarter") {
dateMoveQuarter(item.date);
} else if (datePanelType === "year") {
dateMoveYear(item.date);
} else {
dateMoveDay(item.date);
}
}
};
const updateTimePos = (liElem) => {
if (liElem) {
const height = liElem.offsetHeight;
const ulElem = liElem.parentNode;
ulElem.scrollTop = liElem.offsetTop - height * 4;
}
};
const dateTimeChangeEvent = (evnt) => {
reactData.datetimePanelValue = new Date(reactData.datetimePanelValue.getTime());
updateTimePos(evnt.currentTarget);
};
const dateHourEvent = (evnt, item) => {
reactData.datetimePanelValue.setHours(item.value);
dateTimeChangeEvent(evnt);
};
const dateConfirmEvent = () => {
const { multiple } = props;
const { datetimePanelValue } = reactData;
const dateValue = computeDateValue.value;
const isDateTimeType = computeIsDateTimeType.value;
if (isDateTimeType) {
const dateValueFormat = computeDateValueFormat.value;
if (multiple) {
const dateMultipleValue = computeDateMultipleValue.value;
if (isDateTimeType) {
const dateListValue = [...computeDateListValue.value];
const datetimeRest = [];
dateListValue.forEach((item) => {
if (item) {
item.setHours(datetimePanelValue.getHours());
item.setMinutes(datetimePanelValue.getMinutes());
item.setSeconds(datetimePanelValue.getSeconds());
datetimeRest.push(item);
}
});
handleChange(datetimeRest.map((date) => import_xe_utils2.default.toDateString(date, dateValueFormat)).join(","), { type: "update" });
} else {
handleChange(dateMultipleValue.join(","), { type: "update" });
}
} else {
dateChange(dateValue || reactData.currentDate);
}
}
hidePanel();
};
const dateMinuteEvent = (evnt, item) => {
reactData.datetimePanelValue.setMinutes(item.value);
dateTimeChangeEvent(evnt);
};
const dateSecondEvent = (evnt, item) => {
reactData.datetimePanelValue.setSeconds(item.value);
dateTimeChangeEvent(evnt);
};
const dateOffsetEvent = (evnt) => {
const { isActivated, datePanelValue, datePanelType } = reactData;
if (isActivated) {
evnt.preventDefault();
const isLeftArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT);
const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
const isRightArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT);
const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
if (datePanelType === "year") {
let offsetYear = import_xe_utils2.default.getWhatYear(datePanelValue || Date.now(), 0, "first");
if (isLeftArrow) {
offsetYear = import_xe_utils2.default.getWhatYear(offsetYear, -1);
} else if (isUpArrow) {
offsetYear = import_xe_utils2.default.getWhatYear(offsetYear, -4);
} else if (isRightArrow) {
offsetYear = import_xe_utils2.default.getWhatYear(offsetYear, 1);
} else if (isDwArrow) {
offsetYear = import_xe_utils2.default.getWhatYear(offsetYear, 4);
}
dateMoveYear(offsetYear);
} else if (datePanelType === "quarter") {
let offsetQuarter = import_xe_utils2.default.getWhatQuarter(datePanelValue || Date.now(), 0, "first");
if (isLeftArrow) {
offsetQuarter = import_xe_utils2.default.getWhatQuarter(offsetQuarter, -1);
} else if (isUpArrow) {
offsetQuarter = import_xe_utils2.default.getWhatQuarter(offsetQuarter, -2);
} else if (isRightArrow) {
offsetQuarter = import_xe_utils2.default.getWhatQuarter(offsetQuarter, 1);
} else if (isDwArrow) {
offsetQuarter = import_xe_utils2.default.getWhatQuarter(offsetQuarter, 2);
}
dateMoveQuarter(offsetQuarter);
} else if (datePanelType === "month") {
let offsetMonth = import_xe_utils2.default.getWhatMonth(datePanelValue || Date.now(), 0, "first");
if (isLeftArrow) {
offsetMonth = import_xe_utils2.default.getWhatMonth(offsetMonth, -1);
} else if (isUpArrow) {
offsetMonth = import_xe_utils2.default.getWhatMonth(offsetMonth, -4);
} else if (isRightArrow) {
offsetMonth = import_xe_utils2.default.getWhatMonth(offsetMonth, 1);
} else if (isDwArrow) {
offsetMonth = import_xe_utils2.default.getWhatMonth(offsetMonth, 4);
}
dateMoveMonth(offsetMonth);
} else {
let offsetDay = datePanelValue || import_xe_utils2.default.getWhatDay(Date.now(), 0, "first");
const firstDayOfWeek = computeFirstDayOfWeek.value;
if (isLeftArrow) {
offsetDay = import_xe_utils2.default.getWhatDay(offsetDay, -1);
} else if (isUpArrow) {
offsetDay = import_xe_utils2.default.getWhatWeek(offsetDay, -1, firstDayOfWeek);
} else if (isRightArrow) {
offsetDay = import_xe_utils2.default.getWhatDay(offsetDay, 1);
} else if (isDwArrow) {
offsetDay = import_xe_utils2.default.getWhatWeek(offsetDay, 1, firstDayOfWeek);
}
dateMoveDay(offsetDay);
}
}
};
const datePgOffsetEvent = (evnt) => {
const { isActivated } = reactData;
if (isActivated) {
const isPgUp = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.PAGE_UP);
evnt.preventDefault();
if (isPgUp) {
datePrevEvent(evnt);
} else {
dateNextEvent(evnt);
}
}
};
const dateOpenPanel = () => {
const { type } = props;
const isDateTimeType = computeIsDateTimeType.value;
const dateValue = computeDateValue.value;
if (["year", "quarter", "month", "week"].indexOf(type) > -1) {
reactData.datePanelType = type;
} else {
reactData.datePanelType = "day";
}
reactData.currentDate = import_xe_utils2.default.getWhatDay(Date.now(), 0, "first");
if (dateValue) {
dateMonthHandle(dateValue, 0);
dateParseValue(dateValue);
} else {
dateNowHandle();
}
if (isDateTimeType) {
reactData.datetimePanelValue = reactData.datePanelValue || import_xe_utils2.default.getWhatDay(Date.now(), 0, "first");
nextTick(() => {
const timeBodyElem = refInputTimeBody.value;
import_xe_utils2.default.arrayEach(timeBodyElem.querySelectorAll("li.is--selected"), (elem) => {
updateTimePos(elem);
});
});
}
};
const updateZindex = () => {
if (reactData.panelIndex < getLastZIndex()) {
reactData.panelIndex = nextZIndex();
}
};
const updatePlacement = () => {
return nextTick().then(() => {
const { placement } = props;
const { panelIndex } = reactData;
const targetElem = refInputTarget.value;
const panelElem = refInputPanel.value;
const btnTransfer = computeBtnTransfer.value;
if (targetElem && panelElem) {
const targetHeight = targetElem.offsetHeight;
const targetWidth = targetElem.offsetWidth;
const panelHeight = panelElem.offsetHeight;
const panelWidth = panelElem.offsetWidth;
const marginSize = 5;
const panelStyle = {
zIndex: panelIndex
};
const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(targetElem);
let panelPlacement = "bottom";
if (btnTransfer) {
let left = boundingLeft;
let top = boundingTop + targetHeight;
if (placement === "top") {
panelPlacement = "top";
top = boundingTop - panelHeight;
} else if (!placement) {
if (top + panelHeight + marginSize > visibleHeight) {
panelPlacement = "top";
top = boundingTop - panelHeight;
}
if (top < marginSize) {
panelPlacement = "bottom";
top = boundingTop + targetHeight;
}
}
if (left + panelWidth + marginSize > visibleWidth) {
left -= left + panelWidth + marginSize - visibleWidth;
}
if (left < marginSize) {
left = marginSize;
}
Object.assign(panelStyle, {
left: `${left}px`,
top: `${top}px`,
minWidth: `${targetWidth}px`
});
} else {
if (placement === "top") {
panelPlacement = "top";
panelStyle.bottom = `${targetHeight}px`;
} else if (!placement) {
panelStyle.top = `${targetHeight}px`;
if (boundingTop + targetHeight + panelHeight > visibleHeight) {
if (boundingTop - targetHeight - panelHeight > marginSize) {
panelPlacement = "top";
panelStyle.top = "";
panelStyle.bottom = `${targetHeight}px`;
}
}
}
}
reactData.panelStyle = panelStyle;
reactData.panelPlacement = panelPlacement;
return nextTick();
}
});
};
const showPanel = () => {
const { visiblePanel } = reactData;
const { hpTimeout } = internalData;
const isDisabled = computeIsDisabled.value;
const isDatePickerType = computeIsDatePickerType.value;
if (!isDisabled && !visiblePanel) {
if (!reactData.initialized) {
reactData.initialized = true;
}
if (hpTimeout) {
clearTimeout(hpTimeout);
internalData.hpTimeout = void 0;
}
reactData.isActivated = true;
reactData.isAniVisible = true;
if (isDatePickerType) {
dateOpenPanel();
}
setTimeout(() => {
reactData.visiblePanel = true;
}, 10);
updateZindex();
return updatePlacement();
}
return nextTick();
};
const datePickerOpenEvent = (evnt) => {
const isReadonly = computeIsReadonly.value;
if (!isReadonly) {
evnt.preventDefault();
showPanel();
}
};
const clickEvent = (evnt) => {
triggerEvent(evnt);
};
const handleGlobalMousedownEvent = (evnt) => {
const { visiblePanel, isActivated } = reactData;
const isDatePickerType = computeIsDatePickerType.value;
const el = refElem.value;
const panelWrapperElem = refPanelWrapper.value;
const isDisabled = computeIsDisabled.value;
if (!isDisabled && isActivated) {
reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelWrapperElem).flag;
if (!reactData.isActivated) {
if (isDatePickerType) {
if (visiblePanel) {
hidePanel();
afterCheckValue();
}
} else {
afterCheckValue();
}
}
}
};
const handleGlobalKeydownEvent = (evnt) => {
const { clearable } = props;
const { visiblePanel } = reactData;
const isDisabled = computeIsDisabled.value;
const isDatePickerType = computeIsDatePickerType.value;
if (!isDisabled) {
const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
const isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
const isLeftArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT);
const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
const isRightArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT);
const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
const isPgUp = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.PAGE_UP);
const isPgDn = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.PAGE_DOWN);
const operArrow = isLeftArrow || isUpArrow || isRightArrow || isDwArrow;
let isActivated = reactData.isActivated;
if (isTab) {
if (isActivated) {
afterCheckValue();
}
isActivated = false;
reactData.isActivated = isActivated;
} else if (operArrow) {
if (isDatePickerType) {
if (isActivated) {
if (visiblePanel) {
dateOffsetEvent(evnt);
} else if (isUpArrow || isDwArrow) {
datePickerOpenEvent(evnt);
}
}
}
} else if (isEnter) {
if (isDatePickerType) {
if (visiblePanel) {
if (reactData.datePanelValue) {
dateSelectItem(reactData.datePanelValue);
} else {
hidePanel();
}
} else if (isActivated) {
datePickerOpenEvent(evnt);
}
}
} else if (isPgUp || isPgDn) {
if (isDatePickerType) {
if (isActivated) {
datePgOffsetEvent(evnt);
}
}
}
if (isTab || isEsc) {
if (visiblePanel) {
hidePanel();
}
} else if (isDel && clearable) {
if (isActivated) {
clearValueEvent(evnt, null);
}
}
}
};
const handleGlobalMousewheelEvent = (evnt) => {
const { visiblePanel } = reactData;
const isDisabled = computeIsDisabled.value;
if (!isDisabled) {
if (visiblePanel) {
const panelWrapperElem = refPanelWrapper.value;
if (getEventTargetNode(evnt, panelWrapperElem).flag) {
updatePlacement();
} else {
hidePanel();
afterCheckValue();
}
}
}
};
const handleGlobalBlurEvent = () => {
const { isActivated, visiblePanel } = reactData;
if (visiblePanel) {
hidePanel();
}
if (isActivated) {
reactData.isActivated = false;
}
if (visiblePanel || isActivated) {
const inputElem = refInputTarget.value;
afterCheckValue();
if (inputElem) {
inputElem.blur();
}
}
};
const renderDateLabel = (item, label) => {
const { festivalMethod } = props;
if (festivalMethod) {
const { datePanelType } = reactData;
const festivalRest = festivalMethod({ type: datePanelType, viewType: datePanelType, date: item.date, $input: $xeInput });
const festivalItem = festivalRest ? import_xe_utils2.default.isString(festivalRest) ? { label: festivalRest } : festivalRest : {};
const extraItem = festivalItem.extra ? import_xe_utils2.default.isString(festivalItem.extra) ? { label: festivalItem.extra } : festivalItem.extra : null;
const labels = [
h("span", {
class: ["vxe-input--date-label", {
"is-notice": festivalItem.notice
}]
}, extraItem && extraItem.label ? [
h("span", `${label || ""}`),
h("span", {
class: ["vxe-input--date-label--extra", extraItem.important ? "is-important" : "", extraItem.className],
style: extraItem.style
}, import_xe_utils2.default.toValueString(extraItem.label))
] : [`${label || ""}`])
];
const festivalLabel = festivalItem.label;
if (festivalLabel) {
const festivalLabels = import_xe_utils2.default.toValueString(festivalLabel).split(",");
labels.push(h("span", {
class: ["vxe-input--date-festival", festivalItem.important ? "is-important" : "", festivalItem.className],
style: festivalItem.style
}, [
festivalLabels.length > 1 ? h("span", {
class: ["vxe-input--date-festival--overlap", `overlap--${festivalLabels.length}`]
}, festivalLabels.map((label2) => h("span", label2.substring(0, 3)))) : h("span", {
class: "vxe-input--date-festival--label"
}, festivalLabels[0].substring(0, 3))
]));
}
return labels;
}
return [`${label || ""}`];
};
const renderDateDayTable = () => {
const { multiple } = props;
const { datePanelType, datePanelValue } = reactData;
const dateValue = computeDateValue.value;
const dateHeaders = computeDateHeaders.value;
const dayDatas = computeDayDatas.value;
const dateListValue = computeDateListValue.value;
const matchFormat = "yyyyMMdd";
return [
h("table", {
class: `vxe-input--date-${datePanelType}-view`,
cellspacing: 0,
cellpadding: 0,
border: 0
}, [
h("thead", [
h("tr", dateHeaders.map((item) => {
return h("th", item.label);
}))
]),
h("tbody", dayDatas.map((rows) => {
return h("tr", rows.map((item) => {
return h("td", {
class: {
"is--prev": item.isPrev,
"is--current": item.isCurrent,
"is--now": item.isNow,
"is--next": item.isNext,
"is--disabled": isDateDisabled(item),
"is--selected": multiple ? dateListValue.some((val) => import_xe_utils2.default.isDateSame(val, item.date, matchFormat)) : import_xe_utils2.default.isDateSame(dateValue, item.date, matchFormat),
"is--hover": import_xe_utils2.default.isDateSame(datePanelValue, item.date, matchFormat)
},
onClick: () => dateSelectEvent(item),
onMouseenter: () => dateMouseenterEvent(item)
}, renderDateLabel(item, item.label));
}));
}))
])
];
};
const renderDateWeekTable = () => {
const { multiple } = props;
const { datePanelType, datePanelValue } = reactData;
const dateValue = computeDateValue.value;
const weekHeaders = computeWeekHeaders.value;
const weekDates = computeWeekDates.value;
const dateListValue = computeDateListValue.value;
const matchFormat = "yyyyMMdd";
return [
h("table", {
class: `vxe-input--date-${datePanelType}-view`,
cellspacing: 0,
cellpadding: 0,
border: 0
}, [
h("thead", [
h("tr", weekHeaders.map((item) => {
return h("th", item.label);
}))
]),
h("tbody", weekDates.map((rows) => {
const isSelected = multiple ? rows.some((item) => dateListValue.some((val) => import_xe_utils2.default.isDateSame(val, item.date, matchFormat))) : rows.some((item) => import_xe_utils2.default.isDateSame(dateValue, item.date, matchFormat));
const isHover = rows.some((item) => import_xe_utils2.default.isDateSame(datePanelValue, item.date, matchFormat));
return h("tr", rows.map((item) => {
return h("td", {
class: {
"is--prev": item.isPrev,
"is--current": item.isCurrent,
"is--now": item.isNow,
"is--next": item.isNext,
"is--disabled": isDateDisabled(item),
"is--selected": isSelected,
"is--hover": isHover
},
// event
onClick: () => dateSelectEvent(item),
onMouseenter: () => dateMouseenterEvent(item)
}, renderDateLabel(item, item.label));
}));
}))
])
];
};
const renderDateMonthTable = () => {
const { multiple } = props;
const { datePanelType, datePanelValue } = reactData;
const dateValue = computeDateValue.value;
const monthDatas = computeMonthDatas.value;
const dateListValue = computeDateListValue.value;
const matchFormat = "yyyyMM";
return [
h("table", {
class: `vxe-input--date-${datePanelType}-view`,
cellspacing: 0,
cellpadding: 0,
border: 0
}, [
h("tbody", monthDatas.map((rows) => {
return h("tr", rows.map((item) => {
return h("td", {
class: {
"is--prev": item.isPrev,
"is--current": item.isCurrent,
"is--now": item.isNow,
"is--next": item.isNext,
"is--disabled": isDateDisabled(item),
"is--selected": multiple ? dateListValue.some((val) => import_xe_utils2.default.isDateSame(val, item.date, matchFormat)) : import_xe_utils2.default.isDateSame(dateValue, item.date, matchFormat),
"is--hover": import_xe_utils2.default.isDateSame(datePanelValue, item.date, matchFormat)
},
onClick: () => dateSelectEvent(item),
onMouseenter: () => dateMouseenterEvent(item)
}, renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`)));
}));
}))
])
];
};
const renderDateQuarterTable = () => {
const { multiple } = props;
const { datePanelType, datePanelValue } = reactData;
const dateValue = computeDateValue.value;
const quarterDatas = computeQuarterDatas.value;
const dateListValue = computeDateListValue.value;
const matchFormat = "yyyyq";
return [
h("table", {
class: `vxe-input--date-${datePanelType}-view`,
cellspacing: 0,
cellpadding: 0,
border: 0
}, [
h("tbody", quarterDatas.map((rows) => {
return h("tr", rows.map((item) => {
return h("td", {
class: {
"is--prev": item.isPrev,
"is--current": item.isCurrent,
"is--now": item.isNow,
"is--next": item.isNext,
"is--disabled": isDateDisabled(item),
"is--selected": multiple ? dateListValue.some((val) => import_xe_utils2.default.isDateSame(val, item.date, matchFormat)) : import_xe_utils2.default.isDateSame(dateValue, item.date, matchFormat),
"is--hover": import_xe_utils2.default.isDateSame(datePanelValue, item.date, matchFormat)
},
onClick: () => dateSelectEvent(item),
onMouseenter: () => dateMouseenterEvent(item)
}, renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`)));
}));
}))
])
];
};
const renderDateYearTable = () => {
const { multiple } = props;
const { datePanelType, datePanelValue } = reactData;
const dateValue = computeDateValue.value;
const yearDatas = computeYearDatas.value;
const dateListValue = computeDateListValue.value;
const matchFormat = "yyyy";
return [
h("table", {
class: `vxe-input--date-${datePanelType}-view`,
cellspacing: 0,
cellpadding: 0,
border: 0
}, [
h("tbody", yearDatas.map((rows) => {
return h("tr", rows.map((item) => {
return h("td", {
class: {
"is--prev": item.isPrev,
"is--current": item.isCurrent,
"is--now": item.isNow,
"is--next": item.isNext,
"is--disabled": isDateDisabled(item),
"is--selected": multiple ? dateListValue.some((val) => import_xe_utils2.default.isDateSame(val, item.date, matchFormat)) : import_xe_utils2.default.isDateSame(dateValue, item.date, matchFormat),
"is--hover": import_xe_utils2.default.isDateSame(datePanelValue, item.date, matchFormat)
},
onClick: () => dateSelectEvent(item),
onMouseenter: () => dateMouseenterEvent(item)
}, renderDateLabel(item, item.year));
}));
}))
])
];
};
const renderDateTable = () => {
const { datePanelType } = reactData;
switch (datePanelType) {
case "week":
return renderDateWeekTable();
case "month":
return renderDateMonthTable();
case "quarter":
return renderDateQuarterTable();
case "year":
return renderDateYearTable();
}
return renderDateDayTable();
};
const renderDatePanel = () => {
const { multiple } = props;
const { datePanelType } = reactData;
const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value;
const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
const selectDatePanelObj = computeSelectDatePanelObj.value;
return [
h("div", {
class: "vxe-input--date-picker-header"
}, [
h("div", {
class: "vxe-input--date-picker-type-wrapper"
}, [
datePanelType === "year" ? h("span", {
class: "vxe-input--date-picker-label"
}, selectDatePanelObj.y) : h("span", {
class: "vxe-input--date-picker-btns"
}, [
h("span", {
class: "vxe-input--date-picker-btn",
onClick: dateToggleYearTypeEvent
}, selectDatePanelObj.y),
selectDatePanelObj.m ? h("span", {
class: "vxe-input--date-picker-btn",
onClick: dateToggleMonthTypeEvent
}, selectDatePanelObj.m) : renderEmptyElement($xeInput)
])
]),
h("div", {
class: "vxe-input--date-picker-btn-wrapper"
}, [
h("span", {
class: ["vxe-input--date-picker-btn vxe-input--date-picker-prev-btn", {
"is--disabled": isDisabledPrevDateBtn
}],
onClick: datePrevEvent
}, [
h("i", {
class: "vxe-icon-caret-left"
})
]),
h("span", {
class: "vxe-input--date-picker-btn vxe-input--date-picker-current-btn",
onClick: dateTodayMonthEvent
}, [
h("i", {
class: "vxe-icon-dot"
})
]),
h("span", {
class: ["vxe-input--date-picker-btn vxe-input--date-picker-next-btn", {
"is--disabled": isDisabledNextDateBtn
}],
onClick: dateNextEvent
}, [
h("i", {
class: "vxe-icon-caret-right"
})
]),
multiple && computeSupportMultiples.value ? h("span", {
class: "vxe-input--date-picker-btn vxe-input--date-picker-confirm-btn"
}, [
h("button", {
class: "vxe-input--date-picker-confirm",
type: "button",
onClick: dateConfirmEvent
}, getI18n("vxe.button.confirm"))
]) : null
])
]),
h("div", {
class: "vxe-input--date-picker-body"
}, renderDateTable())
];
};
const renderTimePanel = () => {
const { datetimePanelValue } = reactData;
const dateTimeLabel = computeDateTimeLabel.value;
const hourList = computeHourList.value;
const hasTimeMinute = computeHasTimeMinute.value;
const minuteList = computeMinuteList.value;
const hasTimeSecond = computeHasTimeSecond.value;
const secondList = computeSecondList.value;
return [
h("div", {
class: "vxe-input--time-picker-header"
}, [
hasTimeMinute ? h("span", {
class: "vxe-input--time-picker-title"
}, dateTimeLabel) : createCommentVNode(),
h("div", {
class: "vxe-input--time-picker-btn"
}, [
h("button", {
class: "vxe-input--time-picker-confirm",
type: "button",
onClick: dateConfirmEvent
}, getI18n("vxe.button.confirm"))
])
]),
h("div", {
ref: refInputTimeBody,
class: "vxe-input--time-picker-body"
}, [
h("ul", {
class: "vxe-input--time-picker-hour-list"
}, hourList.map((item, index) => {
return h("li", {
key: index,
class: {
"is--selected": datetimePanelValue && datetimePanelValue.getHours() === item.value
},
onClick: (evnt) => dateHourEvent(evnt, item)
}, item.label);
})),
hasTimeMinute ? h("ul", {
class: "vxe-input--time-picker-minute-list"
}, minuteList.map((item, index) => {
return h("li", {
key: index,
class: {
"is--selected": datetimePanelValue && datetimePanelValue.getMinutes() === item.value
},
onClick: (evnt) => dateMinuteEvent(evnt, item)
}, item.label);
})) : createCommentVNode(),
hasTimeMinute && hasTimeSecond ? h("ul", {
class: "vxe-input--time-picker-second-list"
}, secondList.map((item, index) => {
return h("li", {
key: index,
class: {
"is--selected": datetimePanelValue && datetimePanelValue.getSeconds() === item.value
},
onClick: (evnt) => dateSecondEvent(evnt, item)
}, item.label);
})) : createCommentVNode()
])
];
};
const renderPanel = () => {
const { type } = props;
const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle } = reactData;
const vSize = computeSize.value;
const btnTransfer = computeBtnTransfer.value;
const isDatePickerType = computeIsDatePickerType.value;
const renders = [];
if (isDatePickerType) {
if (type === "datetime") {
renders.push(h("div", {
key: type,
ref: refPanelWrapper,
class: "vxe-input--panel-layout-wrapper"
}, [
h("div", {
class: "vxe-input--panel-left-wrapper"
}, renderDatePanel()),
h("div", {
class: "vxe-input--panel-right-wrapper"
}, renderTimePanel())
]));
} else if (type === "time") {
renders.push(h("div", {
key: type,
ref: refPanelWrapper,
class: "vxe-input--panel-wrapper"
}, renderTimePanel()));
} else {
renders.push(h("div", {
key: type || "default",
ref: refPanelWrapper,
class: "vxe-input--panel-wrapper"
}, renderDatePanel()));
}
return h(Teleport, {
to: "body",
disabled: btnTransfer ? !initialized : true
}, [
h("div", {
ref: refInputPanel,
class: ["vxe-table--ignore-clear vxe-input--panel", `type--${type}`, {
[`size--${vSize}`]: vSize,
"is--transfer": btnTransfer,
"ani--leave": isAniVisible,
"ani--enter": visiblePanel
}],
placement: panelPlacement,
style: panelStyle
}, visiblePanel || isAniVisible ? renders : [])
]);
}
return createCommentVNode();
};
const renderNumberIcon = () => {
const isDisabledAddNumber = computeIsDisabledAddNumber.value;
const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value;
return h("div", {
class: "vxe-input--control-icon"
}, [
h("div", {
class: "vxe-input--number-icon"
}, [
h("div", {
class: ["vxe-input--number-btn is--prev", {
"is--disabled": isDisabledAddNumber
}],
onMousedown: numberMousedownEvent,
onMouseup: numberStopDown,
onMouseleave: numberStopDown
}, [
h("i", {
class: getIcon().INPUT_PLUS_NUM
})
]),
h("div", {
class: ["vxe-input--number-btn is--next", {
"is--disabled": isDisabledSubtractNumber
}],
onMousedown: numberMousedownEvent,
onMouseup: numberStopDown,
onMouseleave: numberStopDown
}, [
h("i", {
class: getIcon().INPUT_MINUS_NUM
})
])
])
]);
};
const renderDatePickerIcon = () => {
return h("div", {
class: "vxe-input--control-icon",
onClick: datePickerOpenEvent
}, [
h("i", {
class: ["vxe-input--date-picker-icon", getIcon().DATE_PICKER_DATE]
})
]);
};
const renderSearchIcon = () => {
return h("div", {
class: "vxe-input--control-icon",
onClick: searchEvent
}, [
h("i", {
class: ["vxe-input--search-icon", getIcon().INPUT_SEARCH]
})
]);
};
const renderPasswordIcon = () => {
const { showPwd } = reactData;
return h("div", {
class: "vxe-input--control-icon",
onClick: passwordToggleEvent
}, [
h("i", {
class: ["vxe-input--password-icon", showPwd ? getIcon().PASSWORD_INPUT_SHOW_PWD : getIcon().PASSWORD_INPUT_HIDE_PWD]
})
]);
};
const renderPrefixIcon = () => {
const { prefixIcon } = props;
const prefixSlot = slots.prefix;
return prefixSlot || prefixIcon ? h("div", {
class: "vxe-input--prefix",
onClick: clickPrefixEvent
}, [
h("div", {
class: "vxe-input--prefix-icon"
}, prefixSlot ? getSlotVNs(prefixSlot({})) : [
h("i", {
class: prefixIcon
})
])
]) : null;
};
const renderSuffixIcon = () => {
const { suffixIcon } = props;
const { inputValue } = reactData;
const suffixSlot = slots.suffix;
const isDisabled = computeIsDisabled.value;
const isNumType = computeIsNumType.value;
const isDatePickerType = computeIsDatePickerType.value;
const isPawdType = computeIsPawdType.value;
const isSearchType = computeIsSearchType.value;
const isClearable = computeIsClearable.value;
const isExtraBtn = isPawdType || isNumType || isDatePickerType || isSearchType;
return isClearable || suffixSlot || suffixIcon || isExtraBtn ? h("div", {
class: ["vxe-input--suffix", {
"is--clear": isClearable && !isDisabled && !(inputValue === "" || import_xe_utils2.default.eqNull(inputValue))
}]
}, [
isClearable ? h("div", {
class: "vxe-input--clear-icon",
onClick: clearValueEvent
}, [
h("i", {
class: getIcon().INPUT_CLEAR
})
]) : createCommentVNode(),
isExtraBtn ? renderExtraSuffixIcon() : createCommentVNode(),
suffixSlot || suffixIcon ? h("div", {
class: "vxe-input--suffix-icon",
onClick: clickSuffixEvent
}, suffixSlot ? getSlotVNs(suffixSlot({})) : [
h("i", {
class: suffixIcon
})
]) : createCommentVNode()
]) : null;
};
const renderExtraSuffixIcon = () => {
const { controls } = props;
const isNumType = computeIsNumType.value;
const isDatePickerType = computeIsDatePickerType.value;
const isPawdType = computeIsPawdType.value;
const isSearchType = computeIsSearchType.value;
if (isPawdType) {
return renderPasswordIcon();
}
if (isNumType) {
if (controls) {
return renderNumberIcon();
}
}
if (isDatePickerType) {
return renderDatePickerIcon();
}
if (isSearchType) {
return renderSearchIcon();
}
return createCommentVNode();
};
const dispatchEvent = (type, params, evnt) => {
emit(type, createEvent(evnt, { $input: $xeInput }, params));
};
inputMethods = {
dispatchEvent,
focus() {
const inputElem = refInputTarget.value;
reactData.isActivated = true;
inputElem.focus();
return nextTick();
},
blur() {
const inputElem = refInputTarget.value;
inputElem.blur();
reactData.isActivated = false;
return nextTick();
},
select() {
const inputElem = refInputTarget.value;
inputElem.select();
reactData.isActivated = false;
return nextTick();
},
showPanel,
hidePanel,
updatePlacement
};
Object.assign($xeInput, inputMethods);
const renderVN = () => {
const { className, controls, type, title, align, showWordCount, countMethod, name, autoComplete, autocomplete } = props;
const { inputValue, visiblePanel, isActivated } = reactData;
const vSize = computeSize.value;
const isDisabled = computeIsDisabled.value;
const formReadonly = computeFormReadonly.value;
if (formReadonly) {
return h("div", {
ref: refElem,
class: ["vxe-input--readonly", `type--${type}`, className]
}, inputValue);
}
const isCountError = computeIsCountError.value;
const inputCount = computeInputCount.value;
const inputReadonly = computeInputReadonly.value;
const inpMaxLength = computeInpMaxLength.value;
const inputType = computeInputType.value;
const inpPlaceholder = computeInpPlaceholder.value;
const isClearable = computeIsClearable.value;
const isWordCount = showWordCount && ["text", "search"].includes(type);
const prefix = renderPrefixIcon();
const suffix = renderSuffixIcon();
return h("div", {
ref: refElem,
class: ["vxe-input", `type--${type}`, className, {
[`size--${vSize}`]: vSize,
[`is--${align}`]: align,
"is--controls": controls,
"is--prefix": !!prefix,
"is--suffix": !!suffix,
"is--visible": visiblePanel,
"is--count": isWordCount,
"is--disabled": isDisabled,
"is--active": isActivated,
"show--clear": isClearable && !isDisabled && !(inputValue === "" || import_xe_utils2.default.eqNull(inputValue))
}],
spellcheck: false
}, [
prefix || createCommentVNode(),
h("div", {
class: "vxe-input--wrapper",
title: title || null
}, [
h("input", {
ref: refInputTarget,
class: "vxe-input--inner",
value: inputValue,
name,
type: inputType,
placeholder: inpPlaceholder,
maxlength: inpMaxLength,
readonly: inputReadonly,
disabled: isDisabled,
autocomplete: autoComplete || autocomplete,
onKeydown: keydownEvent,
onKeyup: keyupEvent,
onClick: clickEvent,
onInput: inputEvent,
onChange: changeEvent,
onFocus: focusEvent,
onBlur: blurEvent
})
]),
suffix || createCommentVNode(),
// 下拉面板
renderPanel(),
// 字数统计
isWordCount ? h("span", {
class: ["vxe-input--count", {
"is--error": isCountError
}]
}, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxLength ? `/${inpMaxLength}` : ""}`) : createCommentVNode()
]);
};
watch(() => props.modelValue, (val) => {
reactData.inputValue = val;
changeValue();
});
watch(() => props.type, () => {
Object.assign(reactData, {
inputValue: props.modelValue,
datetimePanelValue: null,
datePanelValue: null,
datePanelLabel: "",
datePanelType: "day",
selectMonth: null,
currentDate: null
});
initValue();
});
watch(computeDateLabelFormat, () => {
const isDatePickerType = computeIsDatePickerType.value;
if (isDatePickerType) {
dateParseValue(reactData.datePanelValue);
reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
}
});
onMounted(() => {
const { type } = props;
if (["date", "time", "datetime", "week", "month", "quarter", "year"].includes(type)) {
warnLog("vxe.error.useNew", [``, ``]);
} else if (["number", "integer", "float"].includes(type)) {
warnLog("vxe.error.useNew", [``, ``]);
} else if (["password"].includes(type)) {
warnLog("vxe.error.useNew", [``, ""]);
}
const inputElem = refInputTarget.value;
if (inputElem) {
inputElem.addEventListener("wheel", wheelEvent, { passive: false });
}
globalEvents.on($xeInput, "mousewheel", handleGlobalMousewheelEvent);
globalEvents.on($xeInput, "mousedown", handleGlobalMousedownEvent);
globalEvents.on($xeInput, "keydown", handleGlobalKeydownEvent);
globalEvents.on($xeInput, "blur", handleGlobalBlurEvent);
});
onBeforeUnmount(() => {
numberStopDown();
afterCheckValue();
const inputElem = refInputTarget.value;
if (inputElem) {
inputElem.removeEventListener("wheel", wheelEvent);
}
globalEvents.off($xeInput, "mousewheel");
globalEvents.off($xeInput, "mousedown");
globalEvents.off($xeInput, "keydown");
globalEvents.off($xeInput, "blur");
});
initValue();
$xeInput.renderVN = renderVN;
return $xeInput;
},
render() {
return this.renderVN();
}
});
export {
input_default
};
//# sourceMappingURL=chunk-XNHHQTAE.js.map