@oruga-ui/oruga-next/dist/esm/datetimepicker.mjs

UI components for Vue.js and CSS framework agnostic

/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
import { computed, defineComponent, mergeModels, useTemplateRef, ref, watch, useModel, createBlock, openBlock, mergeProps, unref, withCtx, createElementVNode, renderSlot, createCommentVNode, normalizeClass, createVNode } from "vue";
import { _ as _sfc_main$1 } from "./Datepicker.vue_vue_type_script_setup_true_lang-CMGmxFGO.mjs";
import { _ as _sfc_main$2 } from "./Timepicker.vue_vue_type_script_setup_true_lang-CS-NlC-D.mjs";
import { _ as _sfc_main$3 } from "./Input.vue_vue_type_script_setup_true_lang-BmEqNFiY.mjs";
import { g as getDefault, b as registerComponent } from "./config-Dl7tu_Ly.mjs";
import { isMobileAgent, isDate, pad } from "./helpers.mjs";
import { d as defineClasses } from "./defineClasses-CWB9NuS-.mjs";
import { u as useInputHandler } from "./useInputHandler-Cv7NmM5J.mjs";
import { m as matchWithGroups } from "./utils-9gIvy7A3.mjs";
const AM = "AM";
const PM = "PM";
const HOUR_FORMAT_24 = "24";
function useDateimepickerMixins(props) {
  const localeOptions = 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 = 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 = 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 = 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 = 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 = 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__ */ defineComponent({
  ...{
    isOruga: true,
    name: "ODatetimepicker",
    configField: "datetimepicker",
    inheritAttrs: false
  },
  __name: "Datetimepicker",
  props: /* @__PURE__ */ 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: () => getDefault("datetimepicker.size") },
    expanded: { type: Boolean, default: () => 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: () => getDefault("datetimepicker.openOnFocus", true) },
    locale: { default: () => getDefault("locale") },
    formatter: { type: Function, default: getDefault("datetimepicker.dateFormatter") },
    parser: { type: Function, default: getDefault("datetimepicker.dateParser") },
    creator: { type: Function, default: getDefault("datetimepicker.datetimeCreator") },
    position: { default: void 0 },
    iconPack: { default: () => getDefault("datetimepicker.iconPack") },
    icon: { default: () => getDefault("datetimepicker.icon") },
    iconRight: { default: () => getDefault("datetimepicker.iconRight") },
    iconRightClickable: { type: Boolean, default: false },
    mobileModal: { type: Boolean, default: () => getDefault("datetimepicker.mobileModal", true) },
    desktopModal: { type: Boolean, default: () => getDefault("datetimepicker.desktopModal", false) },
    mobileNative: { type: Boolean, default: () => getDefault("datetimepicker.mobileNative", true) },
    teleport: { type: [Boolean, String, Object], default: () => getDefault("datetimepicker.teleport", false) },
    useHtml5Validation: { type: Boolean, default: () => getDefault("useHtml5Validation", true) },
    customValidity: { type: [String, Function], default: "" },
    datepickerWrapperClass: {},
    timepickerWrapperClass: {}
  }, {
    "active": { type: Boolean, ...{ default: false } },
    "activeModifiers": {},
    "modelValue": { default: void 0 },
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ 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 = useTemplateRef("datepickerComponent");
    const nativeInputRef = useTemplateRef("nativeInputComponent");
    const timepickerProps = ref(props.timepicker);
    watch(
      () => props.timepicker,
      (value) => timepickerProps.value = value,
      { deep: true }
    );
    const datepickerProps = ref(props.datepicker);
    watch(
      () => props.datepicker,
      (value) => datepickerProps.value = value,
      { deep: true }
    );
    const isMobileNative = computed(
      () => props.mobileNative && isMobileAgent.any()
    );
    const elementRef = computed(
      () => isMobileNative.value ? nativeInputRef.value : datepickerRef.value
    );
    const { checkHtml5Validity, setFocus, onBlur, onFocus, onInvalid } = useInputHandler(
      elementRef,
      emits,
      props
    );
    const { datetimeFormatter, datetimeParser } = useDateimepickerMixins(props);
    const isActive = useModel(__props, "active");
    const vmodel = 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 = 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 = 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 = 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 = 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 = computed(
      () => {
        var _a;
        return ((_a = datepickerProps.value) == null ? void 0 : _a.size) || props.size;
      }
    );
    const timepickerSize = computed(
      () => {
        var _a;
        return ((_a = timepickerProps.value) == null ? void 0 : _a.size) || props.size;
      }
    );
    const timepickerDisabled = 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 isDate(date) ? date : void 0;
    }
    function formatNative(value) {
      const date = value ? new Date(value) : void 0;
      if (date && 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 + "-" + pad(month) + "-" + pad(day) + "T" + pad(hours) + ":" + pad(minutes) + ":" + 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([
      "datepickerWrapperClass",
      "o-datetimepicker__date"
    ]);
    const timepickerWrapperClasses = defineClasses([
      "timepickerWrapperClass",
      "o-datetimepicker__time"
    ]);
    __expose({ checkHtml5Validity, focus: setFocus, value: vmodel });
    return (_ctx, _cache) => {
      return !isMobileNative.value || _ctx.inline ? (openBlock(), createBlock(_sfc_main$1, 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: 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: unref(onFocus),
        onBlur: unref(onBlur),
        onInvalid: 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: withCtx(() => [
          createElementVNode("div", {
            class: normalizeClass(unref(timepickerWrapperClasses))
          }, [
            createVNode(_sfc_main$2, 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 ? renderSlot(_ctx.$slots, "footer", { key: 0 }) : 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"])) : (openBlock(), createBlock(_sfc_main$3, 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: unref(onFocus),
        onBlur: unref(onBlur),
        onInvalid: unref(onInvalid)
      }), null, 16, ["value", "max", "min", "placeholder", "size", "icon-pack", "icon", "rounded", "disabled", "onFocus", "onBlur", "onInvalid"]));
    };
  }
});
const index = {
  install(app) {
    registerComponent(app, _sfc_main);
  }
};
export {
  _sfc_main as ODatetimepicker,
  index as default
};
//# sourceMappingURL=datetimepicker.mjs.map