dm-vue3-ui
Version:
This Components Library will help get you started developing in Vue 3.
225 lines (224 loc) • 9.42 kB
JavaScript
import { Tooltip, CollapsePanel, Collapse, Card, Popover } from "ant-design-vue/es";
import { defineComponent, ref, computed, watch, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, createTextVNode, toDisplayString, createVNode, isRef, Fragment, renderList, createCommentVNode, normalizeClass } from "vue";
import { ConfigProvider } from "ant-design-vue";
import { getTimeType, getLabelText } from "./utils/index.js";
import RealTime from "./panel/real/index.vue";
import PresetTime from "./panel/preset/index.vue";
import RelativeTime from "./panel/relative/index.vue";
import AbsoluteTime from "./panel/absolute/index.vue";
import { $t } from "../i18n/index";
import { DownOutlined } from "@ant-design/icons-vue";
import { useVModel } from "@vueuse/core";
const _hoisted_1 = { class: "dm-date-picker" };
const _hoisted_2 = { key: 0 };
const _hoisted_3 = { key: 1 };
const _hoisted_4 = ["title", "disabled"];
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "dm-date-picker"
},
__name: "index",
props: {
placement: { default: "bottom" },
disabled: { type: Boolean, default: false },
value: { default: () => ["", ""] },
items: { default: () => ["preset", "real", "relative", "absolute"] },
presetValues: { default: () => [] },
relativeStartUnits: { default: () => [] },
relativeEndUnits: { default: () => [] },
disabledRelativeEndUnit: { type: Boolean, default: false },
relativeStartMaxValue: { default: -1 },
onlyShowText: { type: Boolean, default: false },
showTooltip: { type: Boolean, default: false },
dateFormat: { default: "YYYY-MM-DD HH:mm:ss" }
},
emits: ["change", "update:value"],
setup(__props, { emit: __emit }) {
const visible = ref(false);
const timeCard = ref();
const preset = ref();
const real = ref();
const relative = ref();
const absolute = ref();
let activeKey = ref("");
const props = __props;
const emit = __emit;
const timeValue = useVModel(props, "value", emit);
const startTime = computed(() => {
return timeValue.value.length === 2 ? timeValue.value[0].toString() : "";
});
const endTime = computed(() => {
return timeValue.value.length === 2 ? timeValue.value[1].toString() : "";
});
const timeTypeInfo = computed(() => {
return getTimeType(startTime.value, endTime.value, props.presetValues);
});
const labelText = computed(() => {
return getLabelText(
timeTypeInfo.value.type,
startTime.value,
endTime.value,
props.presetValues,
props.dateFormat
);
});
const publicChild = (data) => {
data.setValue(startTime.value, endTime.value);
};
const getChildFun = () => {
switch (timeTypeInfo.value.type) {
case "preset":
publicChild(preset.value[0]);
break;
case "real":
publicChild(real.value[0]);
break;
case "relative":
publicChild(relative.value[0]);
break;
case "absolute":
publicChild(absolute.value[0]);
break;
}
};
watch(
() => visible.value,
() => {
if (props.disabled) {
visible.value = false;
}
if (visible.value) {
activeKey.value = timeTypeInfo.value.type;
setTimeout(() => {
getChildFun();
}, 300);
} else {
activeKey.value = "";
}
}
);
const timeChange = (data) => {
timeValue.value = data.date;
const lableEmit = getLabelText(
data.type,
data.date[0] || "",
data.date[1] || "",
props.presetValues
);
emit("change", { ...data, ...{ label: lableEmit } });
visible.value = false;
};
return (_ctx, _cache) => {
const _component_a_tooltip = Tooltip;
const _component_a_collapse_panel = CollapsePanel;
const _component_a_collapse = Collapse;
const _component_a_card = Card;
const _component_a_popover = Popover;
return openBlock(), createBlock(unref(ConfigProvider), { prefixCls: "dm-ui" }, {
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
_ctx.onlyShowText ? (openBlock(), createElementBlock("div", _hoisted_2, [
_ctx.showTooltip ? (openBlock(), createBlock(_component_a_tooltip, {
key: 0,
title: labelText.value,
placement: "top"
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(labelText.value), 1)
]),
_: 1
}, 8, ["title"])) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(labelText.value), 1))
])) : (openBlock(), createBlock(_component_a_popover, {
key: 1,
visible: visible.value,
"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
trigger: "click",
placement: _ctx.placement,
overlayClassName: "dm-date-picker-popover"
}, {
content: withCtx(() => [
createVNode(_component_a_card, {
ref_key: "timeCard",
ref: timeCard,
class: "dm-date-picker__card",
bordered: false
}, {
default: withCtx(() => [
createVNode(_component_a_collapse, {
activeKey: unref(activeKey),
"onUpdate:activeKey": _cache[0] || (_cache[0] = ($event) => isRef(activeKey) ? activeKey.value = $event : activeKey = $event),
accordion: "",
"expand-icon-position": "right"
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(props.items, (item) => {
return openBlock(), createBlock(_component_a_collapse_panel, {
header: unref($t)(`datePicker.${item}.title`),
key: item
}, {
default: withCtx(() => [
item == "preset" ? (openBlock(), createBlock(PresetTime, {
key: 0,
onChange: timeChange,
"custom-preset-values": _ctx.presetValues,
ref_for: true,
ref_key: "preset",
ref: preset
}, null, 8, ["custom-preset-values"])) : item == "real" ? (openBlock(), createBlock(RealTime, {
key: 1,
ref_for: true,
ref_key: "real",
ref: real,
onChange: timeChange
}, null, 512)) : item == "relative" ? (openBlock(), createBlock(RelativeTime, {
key: 2,
onChange: timeChange,
"custom-relative-start-units": _ctx.relativeStartUnits,
"custom-relative-end-units": _ctx.relativeEndUnits,
"disabled-relative-end-unit": _ctx.disabledRelativeEndUnit,
"relative-start-max-value": _ctx.relativeStartMaxValue,
ref_for: true,
ref_key: "relative",
ref: relative
}, null, 8, ["custom-relative-start-units", "custom-relative-end-units", "disabled-relative-end-unit", "relative-start-max-value"])) : item == "absolute" ? (openBlock(), createBlock(AbsoluteTime, {
key: 3,
dateFormatBack: props.dateFormat,
onChange: timeChange,
ref_for: true,
ref_key: "absolute",
ref: absolute
}, null, 8, ["dateFormatBack"])) : createCommentVNode("", true)
]),
_: 2
}, 1032, ["header"]);
}), 128))
]),
_: 1
}, 8, ["activeKey"])
]),
_: 1
}, 512)
]),
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass({ "time-content": true, "disabled-style": _ctx.disabled }),
title: labelText.value,
disabled: _ctx.disabled
}, [
createTextVNode(toDisplayString(labelText.value) + " ", 1),
createVNode(unref(DownOutlined))
], 10, _hoisted_4)
]),
_: 1
}, 8, ["visible", "placement"]))
])
]),
_: 1
});
};
}
});
const style_less_vue_type_style_index_0_src_true_lang = "";
export {
_sfc_main as default
};