@opensig/opendesign
Version:
173 lines (172 loc) • 6.45 kB
JavaScript
import { defineComponent, mergeModels, useModel, toRefs, provide, computed, ref, createBlock, openBlock, unref, mergeProps, createSlots, withCtx, createVNode, isRef, renderSlot } from "vue";
import _sfc_main$1 from "../_components/in-box/InBox.vue.mjs";
import { isEmptySlot } from "../_utils/vue-utils.mjs";
import { timePickerInjectKey } from "../time-picker/provide.mjs";
import { dateTimePickerProps } from "./types.mjs";
import { usePickerBase } from "./composables/use-picker-base.mjs";
import { parseValue } from "./utils.mjs";
import _sfc_main$2 from "./components/InnerDatePicker.vue.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "ODateTimePicker",
props: /* @__PURE__ */ mergeModels(dateTimePickerProps, {
"modelValue": { default: void 0 },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ mergeModels(["change", "blur", "focus", "clear", "pressEnter"], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const modelValue = useModel(__props, "modelValue");
const { timestampValue, effectiveColor, inputId, isFocus, onFocus, onBlur, onClear, onPressEnter, notifyChange } = usePickerBase({
props,
mode: "datetime",
modelValue,
emit: emits
});
const propsRefs = toRefs(props);
provide(timePickerInjectKey, {
disabled: propsRefs.disabled,
readonly: propsRefs.readonly,
size: propsRefs.size,
round: propsRefs.round,
noResponsive: propsRefs.noResponsive,
popupPosition: propsRefs.popupPosition,
popupWrapper: propsRefs.popupWrapper,
transition: propsRefs.transition,
// 时间格式:从 format 中提取时间部分
format: computed(() => {
const match = props.format.match(/HH:mm(?::ss)?/);
return match ? match[0] : "HH:mm:ss";
}),
// 时间约束:dateTimePickerProps 包含 timeConstraintProps,直接使用
hourStep: propsRefs.hourStep,
minuteStep: propsRefs.minuteStep,
secondStep: propsRefs.secondStep,
disabledHours: propsRefs.disabledHours,
disabledMinutes: propsRefs.disabledMinutes,
disabledSeconds: propsRefs.disabledSeconds,
minTime: computed(() => {
var _a, _b, _c;
return ((_a = propsRefs.minTime) == null ? void 0 : _a.value) ?? (((_b = propsRefs.minDate) == null ? void 0 : _b.value) ? (_c = parseValue(propsRefs.minDate.value)) == null ? void 0 : _c.format("HH:mm:ss") : void 0);
}),
maxTime: computed(() => {
var _a, _b, _c;
return ((_a = propsRefs.maxTime) == null ? void 0 : _a.value) ?? (((_b = propsRefs.maxDate) == null ? void 0 : _b.value) ? (_c = parseValue(propsRefs.maxDate.value)) == null ? void 0 : _c.format("HH:mm:ss") : void 0);
})
});
const onChange = (newVal, oldVal) => {
emits("change", newVal, oldVal);
notifyChange();
};
const inBoxRef = ref();
const innerRef = ref();
__expose({
/**
* @zh-CN 使输入框获取焦点,open 为 false 时仅聚焦不打开面板
* @en-US Focus the input. Pass false to focus without opening the panel.
*/
focus: (open = true) => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.focus(open);
},
/**
* @zh-CN 使输入框失去焦点
* @en-US Blur the input
*/
blur: () => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.blur();
},
/**
* @zh-CN 清除输入值
* @en-US Clear the input value
*/
clear: () => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.clear();
},
/**
* @zh-CN 获取输入框 DOM 元素
* @en-US Get the input DOM element
*/
inputEl: () => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.inputEl();
}
});
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: unref(isFocus)
}, { class: ["o-date-picker", "o-datetime-picker", "o-input"] }),
createSlots({
default: withCtx(() => {
var _a;
return [
createVNode(_sfc_main$2, {
ref_key: "innerRef",
ref: innerRef,
modelValue: unref(timestampValue),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(timestampValue) ? timestampValue.value = $event : null),
"in-box-ref": (_a = inBoxRef.value) == null ? void 0 : _a.$el,
"input-id": unref(inputId),
"has-icon": "",
onFocus: unref(onFocus),
onBlur: unref(onBlur),
onClear: unref(onClear),
onPressEnter: unref(onPressEnter),
onChange
}, createSlots({
_: 2
/* DYNAMIC */
}, [
!unref(isEmptySlot)(_ctx.$slots.shortcut) ? {
name: "shortcut",
fn: withCtx(({ setValue, emitChange }) => [
renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange
})
]),
key: "0"
} : void 0
]), 1032, ["modelValue", "in-box-ref", "input-id", "onFocus", "onBlur", "onClear", "onPressEnter"])
];
}),
_: 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
/* FULL_PROPS, DYNAMIC_SLOTS */
);
};
}
});
export {
_sfc_main as default
};