@opensig/opendesign
Version:
284 lines (283 loc) • 11.1 kB
JavaScript
;
const vue = require("vue");
const core = require("@vueuse/core");
const dayjs = require("dayjs");
const InInput_vue_vue_type_script_setup_true_lang = require("../../_components/in-input/InInput.vue.js");
require("../../_utils/is.js");
require("../../hooks/use-theme.js");
const useScreen = require("../../hooks/use-screen.js");
const vueUtils = require("../../_utils/vue-utils.js");
const index = require("../../locale/index.js");
const icons = require("../../_utils/icons.js");
const provide = require("../provide.js");
const utils = require("../utils.js");
const DatePanel_vue_vue_type_script_setup_true_lang = require("./DatePanel.vue.js");
const useClickOutside = require("../composables/use-click-outside.js");
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "InnerDatePicker",
props: /* @__PURE__ */ vue.mergeModels({
placeholder: { default: void 0 },
optionTitle: { default: void 0 },
inBoxRef: { default: void 0 },
inputId: { default: void 0 },
hasIcon: { type: Boolean, default: false }
}, {
"modelValue": { default: void 0, required: true },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "clear", "pressEnter"], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const modelValue = vue.useModel(__props, "modelValue");
const datePickerCtx = vue.inject(provide.datePickerInjectKey);
const { clearable, disabled, readonly, noResponsive, mode: effectiveMode, minDate, maxDate } = datePickerCtx;
const effectiveFormat = vue.computed(() => {
var _a;
return (_a = datePickerCtx.format) == null ? void 0 : _a.value;
});
const parsedMinDate = vue.computed(() => {
return (minDate == null ? void 0 : minDate.value) ? utils.parseValue(minDate.value) : null;
});
const parsedMaxDate = vue.computed(() => {
return (maxDate == null ? void 0 : maxDate.value) ? utils.parseValue(maxDate.value) : null;
});
const { t } = index.useI18n();
const { isPhonePad } = useScreen.useScreen();
const isResponding = vue.computed(() => !(noResponsive == null ? void 0 : noResponsive.value) && isPhonePad.value);
const inInputRef = vue.ref();
const panelRef = vue.ref();
const effectivePlaceholder = vue.computed(() => {
if (props.placeholder !== void 0) return props.placeholder;
if (effectiveMode.value === "year") return t("datePicker.yearPlaceholder");
if (effectiveMode.value === "month") return t("datePicker.monthPlaceholder");
return t("datePicker.placeholder");
});
const tempInputValue = vue.ref();
const isTempInputValueValid = vue.computed(() => {
var _a, _b;
if (!tempInputValue.value) return true;
const d = dayjs(tempInputValue.value);
if (!d.isValid()) return false;
if (parsedMinDate.value && d.isBefore(parsedMinDate.value)) return false;
if (parsedMaxDate.value && d.isAfter(parsedMaxDate.value)) return false;
if ((_b = (_a = datePickerCtx.disabledDate) == null ? void 0 : _a.value) == null ? void 0 : _b.call(_a, { date: d.toDate(), year: d.year(), month: d.month(), day: d.date() })) return false;
return true;
});
vue.watch(
modelValue,
(newValue) => {
if (!newValue && newValue !== 0) {
tempInputValue.value = "";
return;
}
tempInputValue.value = dayjs(newValue).format(effectiveFormat.value);
},
{
immediate: true
}
);
const isFocus = vue.ref(false);
vue.watch(isFocus, (newVal, oldVal) => {
var _a;
if (!newVal && oldVal) {
tempInputValue.value = modelValue.value ? dayjs(modelValue.value).format(effectiveFormat.value) : "";
if (!isResponding.value) {
(_a = panelRef.value) == null ? void 0 : _a.close();
}
emits("blur");
}
});
useClickOutside.useClickOutside({
targets: [() => props.inBoxRef, () => {
var _a;
return (_a = panelRef.value) == null ? void 0 : _a.getPopupEl();
}],
onOutside: () => {
isFocus.value = false;
},
disabled: isResponding
});
let skipOpenPanel = false;
const onFocus = (e) => {
var _a;
if (readonly == null ? void 0 : readonly.value) {
return;
}
if (!skipOpenPanel) {
let valueToOpen = tempInputValue.value;
if (!valueToOpen) {
const today = dayjs().format(effectiveFormat.value);
tempInputValue.value = today;
valueToOpen = today;
}
(_a = panelRef.value) == null ? void 0 : _a.open(dayjs(valueToOpen, effectiveFormat.value).valueOf());
}
skipOpenPanel = false;
if (isFocus.value) {
return;
}
isFocus.value = true;
emits("focus", e);
};
let prevValue = modelValue.value;
const handleChange = () => {
var _a, _b;
const useTempInput = effectiveMode.value !== "datetime" && isTempInputValueValid.value;
const newFormatted = useTempInput ? (_a = utils.parseValue(tempInputValue.value)) == null ? void 0 : _a.valueOf() : (_b = panelRef.value) == null ? void 0 : _b.getValue();
modelValue.value = newFormatted;
emits("change", newFormatted, prevValue);
prevValue = newFormatted;
};
const handleInput = core.useDebounceFn(async () => {
var _a, _b;
if (isTempInputValueValid.value) {
(_b = panelRef.value) == null ? void 0 : _b.setValue((_a = utils.parseValue(tempInputValue.value)) == null ? void 0 : _a.valueOf());
}
});
const handlePanelChange = (newVal) => {
var _a, _b;
tempInputValue.value = newVal ? dayjs(newVal).format(effectiveFormat.value) : "";
handleChange();
(_a = panelRef.value) == null ? void 0 : _a.close();
isFocus.value = false;
(_b = inInputRef.value) == null ? void 0 : _b.blur();
};
const handlePanelPreview = (newVal) => {
tempInputValue.value = newVal ? dayjs(newVal).format(effectiveFormat.value) : "";
};
const onPressEnter = () => {
var _a, _b;
if (!isTempInputValueValid.value) {
return;
}
handleChange();
(_a = panelRef.value) == null ? void 0 : _a.close();
isFocus.value = false;
(_b = inInputRef.value) == null ? void 0 : _b.blur();
emits("pressEnter");
};
const handleConfirm = () => {
var _a, _b, _c;
const panelVal = (_a = panelRef.value) == null ? void 0 : _a.getValue();
if (panelVal) {
tempInputValue.value = dayjs(panelVal).format(effectiveFormat.value);
}
handleChange();
(_b = panelRef.value) == null ? void 0 : _b.close();
isFocus.value = false;
(_c = inInputRef.value) == null ? void 0 : _c.blur();
emits("pressEnter");
};
const handleCancel = () => {
var _a, _b;
isFocus.value = false;
(_a = inInputRef.value) == null ? void 0 : _a.blur();
(_b = panelRef.value) == null ? void 0 : _b.close();
};
const onClear = (e) => {
var _a, _b;
e == null ? void 0 : e.stopPropagation();
const oldVal = prevValue;
modelValue.value = void 0;
tempInputValue.value = "";
prevValue = void 0;
emits("clear", e);
emits("change", void 0, oldVal);
(_a = panelRef.value) == null ? void 0 : _a.close();
isFocus.value = false;
(_b = inInputRef.value) == null ? void 0 : _b.blur();
};
const inputId = props.inputId;
__expose({
focus: (open = true) => {
var _a;
if (!open) skipOpenPanel = true;
(_a = inInputRef.value) == null ? void 0 : _a.focus();
},
blur: () => {
var _a, _b;
(_a = inInputRef.value) == null ? void 0 : _a.blur();
(_b = panelRef.value) == null ? void 0 : _b.close();
isFocus.value = false;
},
clear: () => {
var _a;
return (_a = inInputRef.value) == null ? void 0 : _a.clear();
},
inputEl: () => {
var _a;
return (_a = inInputRef.value) == null ? void 0 : _a.inputEl;
},
getTempValue: () => {
var _a;
return isTempInputValueValid.value ? tempInputValue.value : (_a = panelRef.value) == null ? void 0 : _a.getValue();
}
});
return (_ctx, _cache) => {
var _a;
return vue.openBlock(), vue.createBlock(vue.unref(InInput_vue_vue_type_script_setup_true_lang), {
ref_key: "inInputRef",
ref: inInputRef,
modelValue: tempInputValue.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tempInputValue.value = $event),
class: vue.normalizeClass(["o-input-wrap", { "o-input-wrap-focused": isFocus.value, "o-input-wrap-touch": isResponding.value }]),
disabled: vue.unref(disabled),
clearable: vue.unref(clearable) && !!tempInputValue.value,
placeholder: effectivePlaceholder.value,
"input-id": vue.unref(inputId),
"max-length": (_a = effectiveFormat.value) == null ? void 0 : _a.length,
"input-on-outlimit": false,
"show-length": "never",
readonly: vue.unref(readonly),
"no-keyboard": "",
onKeydown: vue.withKeys(handleCancel, ["esc"]),
onInput: vue.unref(handleInput),
onFocus,
onClear,
onPressEnter
}, vue.createSlots({
extra: vue.withCtx(() => [
!vue.unref(disabled) && !vue.unref(readonly) ? (vue.openBlock(), vue.createBlock(DatePanel_vue_vue_type_script_setup_true_lang, {
key: 0,
ref_key: "panelRef",
ref: panelRef,
target: props.inBoxRef,
"option-title": props.optionTitle,
onChange: handlePanelChange,
onPreview: handlePanelPreview,
onCancel: handleCancel,
onConfirm: handleConfirm
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
!vue.unref(vueUtils.isEmptySlot)(_ctx.$slots.shortcut) ? {
name: "shortcut",
fn: vue.withCtx(({ setValue, emitChange }) => [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange
})
]),
key: "0"
} : void 0
]), 1032, ["target", "option-title"])) : vue.createCommentVNode("v-if", true)
]),
_: 2
/* DYNAMIC */
}, [
props.hasIcon && (!isResponding.value || !tempInputValue.value) ? {
name: "suffix",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "suffix", {}, () => [
vue.createVNode(vue.unref(icons.IconCalendar))
])
]),
key: "0"
} : void 0
]), 1032, ["modelValue", "class", "disabled", "clearable", "placeholder", "input-id", "max-length", "readonly", "onInput"]);
};
}
});
module.exports = _sfc_main;