@opensig/opendesign
Version:
275 lines (274 loc) • 10.1 kB
JavaScript
import { defineComponent, mergeModels, useModel, computed, ref, watch, createBlock, openBlock, unref, mergeProps, createSlots, withCtx, createVNode, createElementVNode, normalizeClass, createCommentVNode, renderSlot, withModifiers, createElementBlock } from "vue";
import _sfc_main$1 from "../_components/in-box/InBox.vue.mjs";
import _sfc_main$2 from "../_components/in-input/InInput.vue.mjs";
import { isEmptySlot } from "../_utils/vue-utils.mjs";
import { IconCalendar, IconClose } from "../_utils/icons.mjs";
import { useI18n } from "../locale/index.mjs";
import "../_utils/is.mjs";
import "../hooks/use-theme.mjs";
import { useScreen } from "../hooks/use-screen.mjs";
import "@vueuse/core";
import { monthRangePickerProps } from "./types.mjs";
import { useRangePickerBase } from "./composables/use-range-picker-base.mjs";
import { parseValue } from "./utils.mjs";
import _sfc_main$3 from "./components/DateRangePanel.vue.mjs";
import { useClickOutside } from "./composables/use-click-outside.mjs";
const _hoisted_1 = {
key: 0,
class: "o_input-suffix-icon"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "OMonthRangePicker",
props: /* @__PURE__ */ mergeModels(monthRangePickerProps, {
"start": { default: void 0 },
"startModifiers": {},
"end": { default: void 0 },
"endModifiers": {}
}),
emits: /* @__PURE__ */ mergeModels(["change", "blur", "focus", "clear"], ["update:start", "update:end"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const start = useModel(__props, "start");
const end = useModel(__props, "end");
const {
startTimestamp,
endTimestamp,
effectiveColor,
onFocus: baseOnFocus,
notifyChange
} = useRangePickerBase({ props, mode: "month", start, end, emit: emits });
const { t } = useI18n();
const { isPhonePad } = useScreen();
const isResponding = computed(() => !props.noResponsive && isPhonePad.value);
const format = computed(() => props.format ?? "YYYY-MM");
const toDisplayStr = (ts) => {
var _a;
if (ts === void 0) return "";
return ((_a = parseValue(ts)) == null ? void 0 : _a.format(format.value)) ?? "";
};
const tempStart = computed(() => toDisplayStr(startTimestamp.value));
const tempEnd = computed(() => toDisplayStr(endTimestamp.value));
const startFocused = ref(false);
const endFocused = ref(false);
const anyFocused = computed(() => startFocused.value || endFocused.value);
watch(anyFocused, (newVal, oldVal) => {
if (!newVal && oldVal) {
emits("blur");
}
});
const inBoxRef = ref();
const startInputRef = ref();
const endInputRef = ref();
const panelRef = ref();
const isClearable = 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({
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 openBlock(), createBlock(unref(_sfc_main$1), mergeProps({
ref_key: "inBoxRef",
ref: inBoxRef
}, {
size: props.size,
variant: props.variant,
color: unref(effectiveColor),
disabled: props.disabled,
readonly: props.readonly,
round: props.round,
focused: !!anyFocused.value
}, {
class: ["o-date-picker", "o-month-range-picker", "o-time-picker", "o-time-range-picker", { "o_input-clearable": isClearable.value }, "o-input"]
}), createSlots({
default: withCtx(() => [
createVNode(unref(_sfc_main$2), {
ref_key: "startInputRef",
ref: startInputRef,
"model-value": tempStart.value,
class: normalizeClass(["o-input-wrap", { "o-input-wrap-focused": startFocused.value }]),
disabled: _ctx.disabled,
readonly: _ctx.readonly,
placeholder: props.placeholderStart ?? unref(t)("dateRangePicker.placeholderStart"),
"max-length": format.value.length,
"input-on-outlimit": false,
"show-length": "never",
"no-keyboard": "",
onFocus: onStartFocus
}, {
extra: withCtx(() => {
var _a;
return [
!_ctx.disabled && !_ctx.readonly ? (openBlock(), createBlock(_sfc_main$3, {
key: 0,
ref_key: "panelRef",
ref: panelRef,
target: (_a = inBoxRef.value) == null ? void 0 : _a.$el,
"option-title": props.optionTitle,
onChange: handlePanelChange
}, {
shortcut: withCtx(({ setValue, emitChange }) => [
renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange
})
]),
_: 3
/* FORWARDED */
}, 8, ["target", "option-title"])) : createCommentVNode("v-if", true)
];
}),
_: 3
/* FORWARDED */
}, 8, ["model-value", "class", "disabled", "readonly", "placeholder", "max-length"]),
_cache[2] || (_cache[2] = createElementVNode(
"div",
{ class: "o-date-range-picker-divider" },
"-",
-1
/* CACHED */
)),
createVNode(unref(_sfc_main$2), {
ref_key: "endInputRef",
ref: endInputRef,
"model-value": tempEnd.value,
class: normalizeClass(["o-input-wrap", { "o-input-wrap-focused": endFocused.value }]),
disabled: _ctx.disabled,
readonly: _ctx.readonly,
placeholder: props.placeholderEnd ?? 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"]),
createElementVNode(
"div",
{
class: "o_input-suffix",
onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
}, ["prevent"]))
},
[
!isResponding.value || !isClearable.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
createVNode(unref(IconCalendar))
])) : createCommentVNode("v-if", true),
isClearable.value ? (openBlock(), createElementBlock(
"div",
{
key: 1,
class: "o_input-clear",
onClick: onClear,
onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
}, ["prevent"]))
},
[
createVNode(unref(IconClose), { class: "o_input-clear-icon" })
],
32
/* NEED_HYDRATION */
)) : createCommentVNode("v-if", true)
],
32
/* NEED_HYDRATION */
)
]),
_: 2
/* DYNAMIC */
}, [
!unref(isEmptySlot)(_ctx.$slots.prepend) ? {
name: "prepend",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "prepend")
]),
key: "0"
} : void 0,
!unref(isEmptySlot)(_ctx.$slots.append) ? {
name: "append",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "append")
]),
key: "1"
} : void 0
]), 1040, ["class"]);
};
}
});
export {
_sfc_main as default
};