@oruga-ui/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
423 lines (422 loc) • 18.1 kB
JavaScript
;
/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const Datepicker_vue_vue_type_script_setup_true_lang = require("./Datepicker.vue_vue_type_script_setup_true_lang-GJ6-rh2m.cjs");
const Timepicker_vue_vue_type_script_setup_true_lang = require("./Timepicker.vue_vue_type_script_setup_true_lang-DpDaBelc.cjs");
const Input_vue_vue_type_script_setup_true_lang = require("./Input.vue_vue_type_script_setup_true_lang-YK7-bzmD.cjs");
const config = require("./config-eYBvpFOZ.cjs");
const helpers = require("./helpers.cjs");
const defineClasses = require("./defineClasses-Cqhbv-UT.cjs");
const useInputHandler = require("./useInputHandler-DDJU6Lju.cjs");
const utils = require("./utils-B_lFH_3d.cjs");
const AM = "AM";
const PM = "PM";
const HOUR_FORMAT_24 = "24";
function useDateimepickerMixins(props) {
const localeOptions = vue.computed(
() => {
var _a;
return new Intl.DateTimeFormat(props.locale, {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: ((_a = props.timepicker) == null ? void 0 : _a.enableSeconds) ? "numeric" : void 0
}).resolvedOptions();
}
);
const isHourFormat24 = vue.computed(
() => {
var _a, _b;
return ((_a = props.timepicker) == null ? void 0 : _a.hourFormat) && props.timepicker.hourFormat === HOUR_FORMAT_24 || !((_b = props.timepicker) == null ? void 0 : _b.hourFormat) && !localeOptions.value.hour12;
}
);
const dtf = vue.computed(
() => {
var _a;
return new Intl.DateTimeFormat(props.locale, {
year: localeOptions.value.year || "numeric",
month: localeOptions.value.month || "numeric",
day: localeOptions.value.day || "numeric",
hour: localeOptions.value.hour || "numeric",
minute: localeOptions.value.minute || "numeric",
second: ((_a = props.timepicker) == null ? void 0 : _a.enableSeconds) ? localeOptions.value.second || "numeric" : void 0,
hourCycle: !isHourFormat24.value ? "h12" : "h23"
});
}
);
const amString = vue.computed(() => {
if (dtf.value.formatToParts && typeof dtf.value.formatToParts === "function") {
const d = datetimeCreator();
d.setHours(10);
const dayPeriod = dtf.value.formatToParts(d).find((part) => part.type === "dayPeriod");
if (dayPeriod) return dayPeriod.value;
}
return AM;
});
const pmString = vue.computed(() => {
if (dtf.value.formatToParts && typeof dtf.value.formatToParts === "function") {
const d = datetimeCreator();
d.setHours(20);
const dayPeriod = dtf.value.formatToParts(d).find((part) => part.type === "dayPeriod");
if (dayPeriod) return dayPeriod.value;
}
return PM;
});
function datetimeCreator() {
return typeof props.creator === "function" ? props.creator() : /* @__PURE__ */ new Date();
}
function datetimeFormatter(date) {
if (typeof props.formatter === "function") return props.formatter(date);
if (!date) return "";
return dtf.value.format(date);
}
function datetimeParser(date) {
if (typeof props.parser === "function") return props.parser(date);
if (!date) return void 0;
if (dtf.value.formatToParts && typeof dtf.value.formatToParts === "function") {
const dayPeriods = [
AM,
PM,
AM.toLowerCase(),
PM.toLowerCase(),
amString.value,
pmString.value
];
const parts = dtf.value.formatToParts(/* @__PURE__ */ new Date());
const formatRegex = parts.map((part, idx) => {
if (part.type === "literal") {
if (idx + 1 < parts.length && parts[idx + 1].type === "hour") {
return `[^\\d]+`;
}
return part.value.replace(/ /g, "\\s?");
} else if (part.type === "dayPeriod") {
return `((?!=<${part.type}>)(${dayPeriods.join(
"|"
)})?)`;
}
return `((?!=<${part.type}>)\\d+)`;
}).join("");
const datetimeGroups = utils.matchWithGroups(formatRegex, date);
if (datetimeGroups.year && datetimeGroups.year.length === 4 && datetimeGroups.month && datetimeGroups.month <= 12 && datetimeGroups.day && datetimeGroups.day <= 31 && datetimeGroups.hour && datetimeGroups.hour >= 0 && datetimeGroups.hour < 24 && datetimeGroups.minute && datetimeGroups.minute >= 0 && datetimeGroups.minute <= 59) {
return new Date(
datetimeGroups.year,
datetimeGroups.month - 1,
datetimeGroups.day,
datetimeGroups.hour,
datetimeGroups.minute,
datetimeGroups.second || 0
);
}
}
return new Date(Date.parse(date));
}
return {
dtf,
datetimeCreator,
datetimeFormatter,
datetimeParser
};
}
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
isOruga: true,
name: "ODatetimepicker",
configField: "datetimepicker",
inheritAttrs: false
},
__name: "Datetimepicker",
props: /* @__PURE__ */ vue.mergeModels({
override: { type: Boolean, default: void 0 },
modelValue: { default: void 0 },
active: { type: Boolean, default: false },
datepicker: { default: void 0 },
timepicker: { default: void 0 },
minDatetime: { default: void 0 },
maxDatetime: { default: void 0 },
size: { default: () => config.getDefault("datetimepicker.size") },
expanded: { type: Boolean, default: () => config.getDefault("datetimepicker.expanded", false) },
rounded: { type: Boolean, default: false },
placeholder: { default: void 0 },
readonly: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
inline: { type: Boolean, default: false },
openOnFocus: { type: Boolean, default: () => config.getDefault("datetimepicker.openOnFocus", true) },
locale: { default: () => config.getDefault("locale") },
formatter: { type: Function, default: config.getDefault("datetimepicker.dateFormatter") },
parser: { type: Function, default: config.getDefault("datetimepicker.dateParser") },
creator: { type: Function, default: config.getDefault("datetimepicker.datetimeCreator") },
position: { default: void 0 },
iconPack: { default: () => config.getDefault("datetimepicker.iconPack") },
icon: { default: () => config.getDefault("datetimepicker.icon") },
iconRight: { default: () => config.getDefault("datetimepicker.iconRight") },
iconRightClickable: { type: Boolean, default: false },
mobileModal: { type: Boolean, default: () => config.getDefault("datetimepicker.mobileModal", true) },
desktopModal: { type: Boolean, default: () => config.getDefault("datetimepicker.desktopModal", false) },
mobileNative: { type: Boolean, default: () => config.getDefault("datetimepicker.mobileNative", true) },
teleport: { type: [Boolean, String, Object], default: () => config.getDefault("datetimepicker.teleport", false) },
useHtml5Validation: { type: Boolean, default: () => config.getDefault("useHtml5Validation", true) },
customValidity: { type: [String, Function], default: "" },
datepickerWrapperClass: {},
timepickerWrapperClass: {}
}, {
"active": { type: Boolean, ...{ default: false } },
"activeModifiers": {},
"modelValue": { default: void 0 },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["update:model-value", "update:active", "range-start", "range-end", "change-month", "change-year", "focus", "blur", "invalid", "icon-click", "icon-right-click"], ["update:active", "update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const datepickerRef = vue.useTemplateRef("datepickerComponent");
const nativeInputRef = vue.useTemplateRef("nativeInputComponent");
const timepickerProps = vue.ref(props.timepicker);
vue.watch(
() => props.timepicker,
(value) => timepickerProps.value = value,
{ deep: true }
);
const datepickerProps = vue.ref(props.datepicker);
vue.watch(
() => props.datepicker,
(value) => datepickerProps.value = value,
{ deep: true }
);
const isMobileNative = vue.computed(
() => props.mobileNative && helpers.isMobileAgent.any()
);
const elementRef = vue.computed(
() => isMobileNative.value ? nativeInputRef.value : datepickerRef.value
);
const { checkHtml5Validity, setFocus, onBlur, onFocus, onInvalid } = useInputHandler.useInputHandler(
elementRef,
emits,
props
);
const { datetimeFormatter, datetimeParser } = useDateimepickerMixins(props);
const isActive = vue.useModel(__props, "active");
const vmodel = vue.useModel(__props, "modelValue");
function updateVModel(value) {
if (Array.isArray(value)) return updateVModel(value[0]);
if (!value) {
vmodel.value = void 0;
return;
}
let date = new Date(value.getTime());
if (props.modelValue) {
if ((value.getDate() !== props.modelValue.getDate() || value.getMonth() !== props.modelValue.getMonth() || value.getFullYear() !== props.modelValue.getFullYear()) && value.getHours() === 0 && value.getMinutes() === 0 && value.getSeconds() === 0) {
date.setHours(
props.modelValue.getHours(),
props.modelValue.getMinutes(),
props.modelValue.getSeconds(),
0
);
}
}
if (props.minDatetime && date < props.minDatetime) {
date = props.minDatetime;
} else if (props.maxDatetime && date > props.maxDatetime) {
date = props.maxDatetime;
}
vmodel.value = new Date(date.getTime());
}
const minDate = vue.computed(() => {
var _a;
if (!props.minDatetime) return (_a = datepickerProps.value) == null ? void 0 : _a.minDate;
return new Date(
props.minDatetime.getFullYear(),
props.minDatetime.getMonth(),
props.minDatetime.getDate(),
0,
0,
0,
0
);
});
const maxDate = vue.computed(() => {
var _a;
if (!props.maxDatetime) return (_a = datepickerProps.value) == null ? void 0 : _a.maxDate;
return new Date(
props.maxDatetime.getFullYear(),
props.maxDatetime.getMonth(),
props.maxDatetime.getDate(),
0,
0,
0,
0
);
});
const minTime = vue.computed(() => {
var _a;
if (!props.minDatetime || vmodel.value === null || typeof vmodel.value === "undefined" || vmodel.value.getFullYear() != props.minDatetime.getFullYear() || vmodel.value.getMonth() != props.minDatetime.getMonth() || vmodel.value.getDate() != props.minDatetime.getDate()) {
return (_a = timepickerProps.value) == null ? void 0 : _a.minTime;
}
return props.minDatetime;
});
const maxTime = vue.computed(() => {
var _a;
if (!props.maxDatetime || vmodel.value === null || typeof vmodel.value === "undefined" || vmodel.value.getFullYear() != props.maxDatetime.getFullYear() || vmodel.value.getMonth() != props.maxDatetime.getMonth() || vmodel.value.getDate() != props.maxDatetime.getDate()) {
return (_a = timepickerProps.value) == null ? void 0 : _a.maxTime;
}
return props.maxDatetime;
});
const datepickerSize = vue.computed(
() => {
var _a;
return ((_a = datepickerProps.value) == null ? void 0 : _a.size) || props.size;
}
);
const timepickerSize = vue.computed(
() => {
var _a;
return ((_a = timepickerProps.value) == null ? void 0 : _a.size) || props.size;
}
);
const timepickerDisabled = vue.computed(
() => {
var _a;
return ((_a = timepickerProps.value) == null ? void 0 : _a.disabled) || props.disabled;
}
);
function format(value) {
return datetimeFormatter(value);
}
function parse(value) {
const date = datetimeParser(value);
return helpers.isDate(date) ? date : void 0;
}
function formatNative(value) {
const date = value ? new Date(value) : void 0;
if (date && helpers.isDate(date)) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
return year + "-" + helpers.pad(month) + "-" + helpers.pad(day) + "T" + helpers.pad(hours) + ":" + helpers.pad(minutes) + ":" + helpers.pad(seconds);
}
return "";
}
function onChangeNativePicker(event) {
const date = event.target.value;
const s = date ? date.split(/\D/) : [];
if (s.length >= 5) {
const year = parseInt(s[0], 10);
const month = parseInt(s[1], 10) - 1;
const day = parseInt(s[2], 10);
const hours = parseInt(s[3], 10);
const minutes = parseInt(s[4], 10);
updateVModel(new Date(year, month, day, hours, minutes));
} else {
updateVModel(void 0);
}
}
const datepickerWrapperClasses = defineClasses.defineClasses([
"datepickerWrapperClass",
"o-datetimepicker__date"
]);
const timepickerWrapperClasses = defineClasses.defineClasses([
"timepickerWrapperClass",
"o-datetimepicker__time"
]);
__expose({ checkHtml5Validity, focus: setFocus, value: vmodel });
return (_ctx, _cache) => {
return !isMobileNative.value || _ctx.inline ? (vue.openBlock(), vue.createBlock(Datepicker_vue_vue_type_script_setup_true_lang._sfc_main, vue.mergeProps({
key: 0,
ref: "datepickerComponent"
}, { ..._ctx.$attrs, ..._ctx.datepicker }, {
active: isActive.value,
"onUpdate:active": _cache[1] || (_cache[1] = ($event) => isActive.value = $event),
"model-value": vmodel.value,
"data-oruga": "datetimepicker",
class: vue.unref(datepickerWrapperClasses),
rounded: _ctx.rounded,
"open-on-focus": _ctx.openOnFocus,
position: _ctx.position,
inline: _ctx.inline,
readonly: _ctx.readonly,
expanded: _ctx.expanded,
"close-on-click": false,
formatter: format,
parser: parse,
"min-date": minDate.value,
"max-date": maxDate.value,
icon: _ctx.icon,
"icon-right": _ctx.iconRight,
"icon-right-clickable": _ctx.iconRightClickable,
"icon-pack": _ctx.iconPack,
size: datepickerSize.value,
placeholder: _ctx.placeholder,
range: false,
multiple: false,
disabled: _ctx.disabled,
"desktop-modal": _ctx.desktopModal,
"mobile-modal": _ctx.mobileModal,
"mobile-native": isMobileNative.value,
locale: _ctx.locale,
teleport: _ctx.teleport,
"use-html5-validation": false,
"onUpdate:modelValue": updateVModel,
onFocus: vue.unref(onFocus),
onBlur: vue.unref(onBlur),
onInvalid: vue.unref(onInvalid),
onChangeMonth: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("change-month", $event)),
onChangeYear: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("change-year", $event)),
onIconClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("icon-click", $event)),
onIconRightClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("icon-right-click", $event))
}), {
footer: vue.withCtx(() => [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(timepickerWrapperClasses))
}, [
vue.createVNode(Timepicker_vue_vue_type_script_setup_true_lang._sfc_main, vue.mergeProps(_ctx.timepicker, {
modelValue: vmodel.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vmodel.value = $event),
inline: "",
readonly: _ctx.readonly,
"min-time": minTime.value,
"max-time": maxTime.value,
size: timepickerSize.value,
disabled: timepickerDisabled.value,
"mobile-native": isMobileNative.value,
locale: _ctx.locale
}), null, 16, ["modelValue", "readonly", "min-time", "max-time", "size", "disabled", "mobile-native", "locale"])
], 2),
_ctx.$slots.footer ? vue.renderSlot(_ctx.$slots, "footer", { key: 0 }) : vue.createCommentVNode("", true)
]),
_: 3
}, 16, ["active", "model-value", "class", "rounded", "open-on-focus", "position", "inline", "readonly", "expanded", "min-date", "max-date", "icon", "icon-right", "icon-right-clickable", "icon-pack", "size", "placeholder", "disabled", "desktop-modal", "mobile-modal", "mobile-native", "locale", "teleport", "onFocus", "onBlur", "onInvalid"])) : (vue.openBlock(), vue.createBlock(Input_vue_vue_type_script_setup_true_lang._sfc_main, vue.mergeProps({ key: 1 }, _ctx.$attrs, {
ref: "nativeInputComponent",
type: "datetime-local",
autocomplete: "off",
value: formatNative(vmodel.value),
max: formatNative(maxDate.value),
min: formatNative(minDate.value),
placeholder: _ctx.placeholder,
size: datepickerSize.value,
"icon-pack": _ctx.iconPack,
icon: _ctx.icon,
rounded: _ctx.rounded,
disabled: _ctx.disabled,
readonly: false,
"use-html5-validation": false,
onChange: onChangeNativePicker,
onFocus: vue.unref(onFocus),
onBlur: vue.unref(onBlur),
onInvalid: vue.unref(onInvalid)
}), null, 16, ["value", "max", "min", "placeholder", "size", "icon-pack", "icon", "rounded", "disabled", "onFocus", "onBlur", "onInvalid"]));
};
}
});
const index = {
install(app) {
config.registerComponent(app, _sfc_main);
}
};
exports.ODatetimepicker = _sfc_main;
exports.default = index;
//# sourceMappingURL=datetimepicker.cjs.map