plus-pro-components
Version:
Page level components developed based on Element Plus.
146 lines (143 loc) • 5.11 kB
JavaScript
import { defineComponent, useAttrs, computed, ref, reactive, watch, withDirectives, openBlock, createElementBlock, normalizeClass, unref, createVNode, mergeProps, createElementVNode, toDisplayString } from 'vue';
import { useFormDisabled, ElDatePicker, ClickOutside } from 'element-plus';
import '../../utils/index.mjs';
import '../../../hooks/index.mjs';
import { useLocale } from '../../../hooks/useLocale.mjs';
import { isFunction } from '../../utils/is.mjs';
const _hoisted_1 = { class: "plus-date-picker__middle" };
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "PlusDatePicker"
},
__name: "index",
props: {
modelValue: { default: () => [] },
rangeSeparator: { default: "/" },
valueFormat: { default: "YYYY-MM-DD HH:mm:ss" },
type: { default: "datetime" },
startProps: { default: () => ({}) },
endProps: { default: () => ({}) },
disabled: { type: Boolean, default: false },
startDisabledDate: { type: Function, default: (startTime, endValue) => {
if (!endValue) return false;
return startTime.getTime() > new Date(endValue).getTime();
} },
endDisabledDate: { type: Function, default: (endTime, startValue) => {
if (!startValue) return false;
return endTime.getTime() < new Date(startValue).getTime();
} }
},
emits: ["change", "focus", "update:modelValue"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const { t } = useLocale();
const attrs = useAttrs();
const computedStartProps = computed(() => ({ ...attrs, ...props.startProps }));
const computedEndProps = computed(() => ({ ...attrs, ...props.endProps }));
const startPickerInstance = ref();
const endPickerInstance = ref();
const state = reactive({
start: "",
end: ""
});
const formDisabled = useFormDisabled();
const isFocus = ref(false);
const handleFocus = (event) => {
isFocus.value = true;
emit("focus", event);
};
const onClickOutside = () => {
isFocus.value = false;
};
const subStartDisabledDate = (time) => {
if (props.startDisabledDate && isFunction(props.startDisabledDate)) {
return props.startDisabledDate(time, state.end);
}
return false;
};
const subEndDisabledDate = (time) => {
if (props.endDisabledDate && isFunction(props.endDisabledDate)) {
return props.endDisabledDate(time, state.start);
}
return false;
};
watch(
() => props.modelValue,
(val) => {
const [start, end] = val;
state.start = start;
state.end = end;
},
{
immediate: true
}
);
const handleChange = () => {
const res = [state.start, state.end];
emit("update:modelValue", res);
emit("change", res);
};
__expose({
startPickerInstance,
endPickerInstance
});
return (_ctx, _cache) => {
return withDirectives((openBlock(), createElementBlock(
"div",
{
class: normalizeClass(["plus-date-picker", {
"is-focus": isFocus.value,
"is-disabled": unref(formDisabled)
}])
},
[
createVNode(unref(ElDatePicker), mergeProps({
ref_key: "startPickerInstance",
ref: startPickerInstance,
modelValue: state.start,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.start = $event),
type: _ctx.type,
"value-format": _ctx.valueFormat,
placeholder: unref(t)("plus.datepicker.startPlaceholder"),
"disabled-date": subStartDisabledDate,
class: "plus-date-picker__start",
clearable: "",
disabled: unref(formDisabled)
}, computedStartProps.value, {
onChange: handleChange,
onFocus: handleFocus
}), null, 16, ["modelValue", "type", "value-format", "placeholder", "disabled"]),
createElementVNode(
"span",
_hoisted_1,
toDisplayString(_ctx.rangeSeparator),
1
/* TEXT */
),
createVNode(unref(ElDatePicker), mergeProps({
ref_key: "endPickerInstance",
ref: endPickerInstance,
modelValue: state.end,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.end = $event),
"value-format": _ctx.valueFormat,
type: _ctx.type,
placeholder: unref(t)("plus.datepicker.endPlaceholder"),
"disabled-date": subEndDisabledDate,
class: "plus-date-picker__end",
clearable: "",
disabled: unref(formDisabled)
}, computedEndProps.value, {
onChange: handleChange,
onFocus: handleFocus
}), null, 16, ["modelValue", "value-format", "type", "placeholder", "disabled"])
],
2
/* CLASS */
)), [
[unref(ClickOutside), onClickOutside]
]);
};
}
});
export { _sfc_main as default };