@nextcloud/vue/dist/chunks/NcDateTimePickerNative.mjs

Nextcloud vue components

import '../assets/NcDateTimePickerNative.css';
import { defineComponent, useModel, computed, openBlock, createBlock, mergeProps, mergeModels } from "vue";
import { N as NcInputField } from "./NcInputField.mjs";
import { r as register, y as t42, a as t } from "./_l10n.mjs";
import { c as createElementId } from "./createElementId.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
register(t42);
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ inheritAttrs: false },
  __name: "NcDateTimePickerNative",
  props: /* @__PURE__ */ mergeModels({
    class: { default: void 0 },
    id: { default: () => createElementId() },
    inputClass: { default: "" },
    type: { default: "date" },
    label: { default: () => t("Please choose a date") },
    min: { default: null },
    max: { default: null },
    hideLabel: { type: Boolean }
  }, {
    "modelValue": { default: null },
    "modelModifiers": {}
  }),
  emits: ["update:modelValue"],
  setup(__props) {
    const modelValue = useModel(__props, "modelValue");
    const props = __props;
    const formattedValue = computed(() => modelValue.value ? formatValue(modelValue.value) : "");
    const formattedMax = computed(() => props.max ? formatValue(props.max) : void 0);
    const formattedMin = computed(() => props.min ? formatValue(props.min) : void 0);
    const ncInputFieldPropNames = new Set(Object.keys(NcInputField.props));
    const propsToForward = computed(() => Object.fromEntries(Object.entries(props).filter(([key]) => ncInputFieldPropNames.has(key))));
    function getReadableDate(value) {
      const yyyy = value.getFullYear().toString().padStart(4, "0");
      const MM = (value.getMonth() + 1).toString().padStart(2, "0");
      const dd = value.getDate().toString().padStart(2, "0");
      const hh = value.getHours().toString().padStart(2, "0");
      const mm = value.getMinutes().toString().padStart(2, "0");
      return { yyyy, MM, dd, hh, mm };
    }
    function formatValue(value) {
      const { yyyy, MM, dd, hh, mm } = getReadableDate(value);
      if (props.type === "datetime-local") {
        return `${yyyy}-${MM}-${dd}T${hh}:${mm}`;
      } else if (props.type === "date") {
        return `${yyyy}-${MM}-${dd}`;
      } else if (props.type === "month") {
        return `${yyyy}-${MM}`;
      } else if (props.type === "time") {
        return `${hh}:${mm}`;
      } else if (props.type === "week") {
        const startDate = new Date(Number.parseInt(yyyy), 0, 1);
        const daysSinceBeginningOfYear = Math.floor((value.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1e3));
        const weekNumber = Math.ceil(daysSinceBeginningOfYear / 7);
        return `${yyyy}-W${weekNumber}`;
      }
      return "";
    }
    function onInput(event) {
      const input = event.target;
      if (!input || isNaN(input.valueAsNumber)) {
        modelValue.value = null;
      } else if (props.type === "time") {
        const time = input.value;
        const { yyyy, MM, dd } = getReadableDate(modelValue.value || /* @__PURE__ */ new Date());
        modelValue.value = /* @__PURE__ */ new Date(`${yyyy}-${MM}-${dd}T${time}`);
      } else if (props.type === "month") {
        const MM = (new Date(input.value).getMonth() + 1).toString().padStart(2, "0");
        const { yyyy, dd, hh, mm } = getReadableDate(modelValue.value || /* @__PURE__ */ new Date());
        modelValue.value = /* @__PURE__ */ new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`);
      } else {
        const timezoneOffsetSeconds = new Date(input.valueAsNumber).getTimezoneOffset() * 1e3 * 60;
        const inputDateWithTimezone = input.valueAsNumber + timezoneOffsetSeconds;
        modelValue.value = new Date(inputDateWithTimezone);
      }
    }
    return (_ctx, _cache) => {
      return openBlock(), createBlock(NcInputField, mergeProps({ ..._ctx.$attrs, ...propsToForward.value }, {
        class: "native-datetime-picker",
        label: __props.hideLabel ? void 0 : __props.label,
        labelOutside: __props.hideLabel,
        "aria-label": __props.hideLabel ? __props.label : void 0,
        modelValue: formattedValue.value,
        min: formattedMin.value,
        max: formattedMax.value,
        onInput
      }), null, 16, ["label", "labelOutside", "aria-label", "modelValue", "min", "max"]);
    };
  }
});
const NcDateTimePickerNative = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7639cce1"]]);
export {
  NcDateTimePickerNative as N
};
//# sourceMappingURL=NcDateTimePickerNative.mjs.map