@opensig/opendesign
Version:
231 lines (230 loc) • 8.22 kB
JavaScript
;
const vue = require("vue");
const core = require("@vueuse/core");
const index$1 = require("../../dialog/index.js");
const index$3 = require("../../popup/index.js");
const clientOnly = require("../../_components/client-only.js");
const index$2 = require("../../button/index.js");
const index$4 = require("../../divider/index.js");
const index = require("../../locale/index.js");
require("../../_utils/is.js");
require("../../hooks/use-theme.js");
const useScreen = require("../../hooks/use-screen.js");
const TimeColumns_vue_vue_type_script_setup_true_lang = require("./TimeColumns.vue.js");
const provide = require("../provide.js");
const _hoisted_1 = { class: "o-select-options-head" };
const _hoisted_2 = { class: "o-time-panel-content" };
const _hoisted_3 = { class: "o-time-panel-content" };
const _hoisted_4 = { class: "o-time-panel-footer" };
const _hoisted_5 = { class: "o-time-panel-shortcut" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "TimePanel",
props: {
target: {},
optionTitle: {}
},
emits: ["cancel", "change", "confirm"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const visible = vue.ref(false);
const setVisible = (newVal) => {
visible.value = newVal;
if (!newVal) {
emits("cancel");
}
};
const timePickerCtx = vue.inject(provide.timePickerInjectKey);
const { size, transition, popupPosition, popupWrapper, noResponsive, isRange } = timePickerCtx;
const { t } = index.useI18n();
const { isPhonePad } = useScreen.useScreen();
const isResponding = vue.computed(() => {
return !noResponsive.value && isPhonePad.value;
});
const popupRef = vue.ref();
const timeColumnsRef = vue.ref();
const getValue = () => {
var _a;
return (_a = timeColumnsRef.value) == null ? void 0 : _a.getValue();
};
const setValue = (value, smooth = false) => {
var _a, _b;
(_a = timeColumnsRef.value) == null ? void 0 : _a.setValue(value);
(_b = timeColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(smooth);
};
const open = async (newVal) => {
visible.value = true;
await core.until(timeColumnsRef).toBeTruthy();
await vue.nextTick();
setValue(newVal);
};
const close = () => {
visible.value = false;
};
const handleCancel = () => {
emits("cancel");
close();
};
const handleConfirm = () => {
var _a;
emits("confirm", (_a = timeColumnsRef.value) == null ? void 0 : _a.getValue());
close();
};
const handleChange = () => {
var _a;
emits("change", (_a = timeColumnsRef.value) == null ? void 0 : _a.getValue());
};
__expose({
getPopupEl: () => popupRef.value,
getValue,
setValue,
open,
close
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(clientOnly), null, {
default: vue.withCtx(() => [
isResponding.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ODialog), {
key: 0,
visible: visible.value,
class: "o-select-dlg",
"main-class": ["o-time-panel", `o-time-panel-${vue.unref(size)}`, { "o-time-panel-touch": isResponding.value }],
"hide-close": "",
size: "small",
"onUpdate:visible": setVisible
}, {
header: vue.withCtx(() => [
vue.createElementVNode(
"div",
_hoisted_1,
vue.toDisplayString(props.optionTitle ?? vue.unref(t)("timePicker.selectTime")),
1
/* TEXT */
)
]),
actions: vue.withCtx(() => [
vue.createVNode(vue.unref(index$2.OButton), {
class: "o-dlg-btn",
variant: "text",
size: "large",
onClick: handleCancel
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.cancel")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}),
vue.createVNode(vue.unref(index$2.OButton), {
class: "o-dlg-btn",
variant: "text",
size: "large",
onClick: handleConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.confirm")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
})
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_2, [
vue.createVNode(
TimeColumns_vue_vue_type_script_setup_true_lang,
{
ref_key: "timeColumnsRef",
ref: timeColumnsRef,
onChange: handleChange
},
null,
512
/* NEED_PATCH */
)
])
]),
_: 1
/* STABLE */
}, 8, ["visible", "main-class"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$3.OPopup), {
key: 1,
visible: visible.value,
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
class: vue.normalizeClass(["o-time-panel", `o-time-panel-${vue.unref(size)}`]),
"hide-close": "",
target: props.target,
transition: vue.unref(transition),
position: vue.unref(popupPosition),
wrapper: vue.unref(popupWrapper),
trigger: "none",
offset: vue.unref(isRange) ? 8 : 4,
"adjust-min-width": false,
"adjust-width": false
}, {
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
ref_key: "popupRef",
ref: popupRef
},
[
vue.createElementVNode("div", _hoisted_3, [
vue.createVNode(
TimeColumns_vue_vue_type_script_setup_true_lang,
{
ref_key: "timeColumnsRef",
ref: timeColumnsRef,
onChange: handleChange
},
null,
512
/* NEED_PATCH */
)
]),
vue.createVNode(vue.unref(index$4.ODivider), { class: "o-time-panel-divider" }),
vue.createElementVNode("div", _hoisted_4, [
vue.createElementVNode("span", _hoisted_5, [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange: handleChange
})
]),
vue.createVNode(vue.unref(index$2.OButton), {
round: "pill",
onClick: handleConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.confirm")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
})
])
],
512
/* NEED_PATCH */
)
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "class", "target", "transition", "position", "wrapper", "offset"]))
]),
_: 3
/* FORWARDED */
});
};
}
});
module.exports = _sfc_main;