@opensig/opendesign
Version:
274 lines (273 loc) • 10.4 kB
JavaScript
;
const vue = require("vue");
const InBox_vue_vue_type_script_setup_true_lang = require("../_components/in-box/InBox.vue.js");
const InInput_vue_vue_type_script_setup_true_lang = require("../_components/in-input/InInput.vue.js");
const vueUtils = require("../_utils/vue-utils.js");
const icons = require("../_utils/icons.js");
const index = require("../locale/index.js");
require("../_utils/is.js");
require("../hooks/use-theme.js");
const useScreen = require("../hooks/use-screen.js");
require("@vueuse/core");
const types = require("./types.js");
const useRangePickerBase = require("./composables/use-range-picker-base.js");
const utils = require("./utils.js");
const DateRangePanel_vue_vue_type_script_setup_true_lang = require("./components/DateRangePanel.vue.js");
const useClickOutside = require("./composables/use-click-outside.js");
const _hoisted_1 = {
key: 0,
class: "o_input-suffix-icon"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "OYearRangePicker",
props: /* @__PURE__ */ vue.mergeModels(types.yearRangePickerProps, {
"start": { default: void 0 },
"startModifiers": {},
"end": { default: void 0 },
"endModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "clear"], ["update:start", "update:end"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const start = vue.useModel(__props, "start");
const end = vue.useModel(__props, "end");
const {
startTimestamp,
endTimestamp,
effectiveColor,
onFocus: baseOnFocus,
notifyChange
} = useRangePickerBase.useRangePickerBase({ props, mode: "year", start, end, emit: emits });
const { t } = index.useI18n();
const { isPhonePad } = useScreen.useScreen();
const isResponding = vue.computed(() => !props.noResponsive && isPhonePad.value);
const format = vue.computed(() => props.format ?? "YYYY");
const toDisplayStr = (ts) => {
var _a;
if (ts === void 0) return "";
return ((_a = utils.parseValue(ts)) == null ? void 0 : _a.format(format.value)) ?? "";
};
const tempStart = vue.computed(() => toDisplayStr(startTimestamp.value));
const tempEnd = vue.computed(() => toDisplayStr(endTimestamp.value));
const startFocused = vue.ref(false);
const endFocused = vue.ref(false);
const anyFocused = vue.computed(() => startFocused.value || endFocused.value);
vue.watch(anyFocused, (newVal, oldVal) => {
if (!newVal && oldVal) {
emits("blur");
}
});
const inBoxRef = vue.ref();
const startInputRef = vue.ref();
const endInputRef = vue.ref();
const panelRef = vue.ref();
const isClearable = vue.computed(() => props.clearable && !props.disabled && !props.readonly && (!!tempStart.value || !!tempEnd.value));
let skipOpenPanel = false;
const openPanel = () => {
var _a;
if (props.disabled || props.readonly) return;
(_a = panelRef.value) == null ? void 0 : _a.open(startTimestamp.value, endTimestamp.value);
};
const closeAndBlur = () => {
var _a, _b, _c;
(_a = panelRef.value) == null ? void 0 : _a.close();
startFocused.value = false;
endFocused.value = false;
(_b = startInputRef.value) == null ? void 0 : _b.blur();
(_c = endInputRef.value) == null ? void 0 : _c.blur();
};
const onStartFocus = (e) => {
if (!anyFocused.value) {
baseOnFocus(e);
}
startFocused.value = true;
if (!skipOpenPanel) openPanel();
skipOpenPanel = false;
};
const onEndFocus = (e) => {
if (!anyFocused.value) {
baseOnFocus(e);
}
endFocused.value = true;
openPanel();
};
useClickOutside.useClickOutside({
targets: [() => {
var _a;
return (_a = inBoxRef.value) == null ? void 0 : _a.$el;
}, () => {
var _a;
return (_a = panelRef.value) == null ? void 0 : _a.getPopupEl();
}],
onOutside: () => closeAndBlur(),
disabled: isResponding
});
const handlePanelChange = (newStart, newEnd) => {
startTimestamp.value = newStart;
endTimestamp.value = newEnd;
if (newStart && newEnd || !newStart && !newEnd) {
emits("change", start.value, end.value);
notifyChange();
if (newStart && newEnd) closeAndBlur();
}
};
const onClear = (e) => {
e == null ? void 0 : e.stopPropagation();
startTimestamp.value = void 0;
endTimestamp.value = void 0;
emits("clear", e);
emits("change", void 0, void 0);
notifyChange();
closeAndBlur();
};
__expose({
/**
* @zh-CN 使输入框获取焦点，open 为 false 时仅聚焦不打开面板
* @en-US Focus the input. Pass false to focus without opening the panel.
*/
focus: (open = true) => {
var _a;
if (!open) skipOpenPanel = true;
(_a = startInputRef.value) == null ? void 0 : _a.focus();
},
/**
* @zh-CN 使输入框失去焦点
* @en-US Blur the input
*/
blur: () => closeAndBlur(),
/**
* @zh-CN 清除输入值
* @en-US Clear the input value
*/
clear: () => onClear()
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(InBox_vue_vue_type_script_setup_true_lang), vue.mergeProps({
ref_key: "inBoxRef",
ref: inBoxRef
}, {
size: props.size,
variant: props.variant,
color: vue.unref(effectiveColor),
disabled: props.disabled,
readonly: props.readonly,
round: props.round,
focused: !!anyFocused.value
}, {
class: ["o-date-picker", "o-year-range-picker", "o-time-picker", "o-time-range-picker", { "o_input-clearable": isClearable.value }, "o-input"]
}), vue.createSlots({
default: vue.withCtx(() => [
vue.createVNode(vue.unref(InInput_vue_vue_type_script_setup_true_lang), {
ref_key: "startInputRef",
ref: startInputRef,
"model-value": tempStart.value,
class: vue.normalizeClass(["o-input-wrap", { "o-input-wrap-focused": startFocused.value }]),
disabled: _ctx.disabled,
readonly: _ctx.readonly,
placeholder: props.placeholderStart ?? vue.unref(t)("dateRangePicker.placeholderStart"),
"max-length": format.value.length,
"input-on-outlimit": false,
"show-length": "never",
"no-keyboard": "",
onFocus: onStartFocus
}, {
extra: vue.withCtx(() => {
var _a;
return [
!_ctx.disabled && !_ctx.readonly ? (vue.openBlock(), vue.createBlock(DateRangePanel_vue_vue_type_script_setup_true_lang, {
key: 0,
ref_key: "panelRef",
ref: panelRef,
target: (_a = inBoxRef.value) == null ? void 0 : _a.$el,
"option-title": props.optionTitle,
onChange: handlePanelChange
}, {
shortcut: vue.withCtx(({ setValue, emitChange }) => [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange
})
]),
_: 3
/* FORWARDED */
}, 8, ["target", "option-title"])) : vue.createCommentVNode("v-if", true)
];
}),
_: 3
/* FORWARDED */
}, 8, ["model-value", "class", "disabled", "readonly", "placeholder", "max-length"]),
_cache[2] || (_cache[2] = vue.createElementVNode(
"div",
{ class: "o-date-range-picker-divider" },
"-",
-1
/* CACHED */
)),
vue.createVNode(vue.unref(InInput_vue_vue_type_script_setup_true_lang), {
ref_key: "endInputRef",
ref: endInputRef,
"model-value": tempEnd.value,
class: vue.normalizeClass(["o-input-wrap", { "o-input-wrap-focused": endFocused.value }]),
disabled: _ctx.disabled,
readonly: _ctx.readonly,
placeholder: props.placeholderEnd ?? vue.unref(t)("dateRangePicker.placeholderEnd"),
"max-length": format.value.length,
"input-on-outlimit": false,
"show-length": "never",
"no-keyboard": "",
onFocus: onEndFocus
}, null, 8, ["model-value", "class", "disabled", "readonly", "placeholder", "max-length"]),
vue.createElementVNode(
"div",
{
class: "o_input-suffix",
onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
!isResponding.value || !isClearable.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
vue.createVNode(vue.unref(icons.IconCalendar))
])) : vue.createCommentVNode("v-if", true),
isClearable.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: "o_input-clear",
onClick: onClear,
onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.createVNode(vue.unref(icons.IconClose), { class: "o_input-clear-icon" })
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true)
],
32
/* NEED_HYDRATION */
)
]),
_: 2
/* DYNAMIC */
}, [
!vue.unref(vueUtils.isEmptySlot)(_ctx.$slots.prepend) ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prepend")
]),
key: "0"
} : void 0,
!vue.unref(vueUtils.isEmptySlot)(_ctx.$slots.append) ? {
name: "append",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "append")
]),
key: "1"
} : void 0
]), 1040, ["class"]);
};
}
});
module.exports = _sfc_main;