@nextcloud/vue 8.5.0 → 9.0.0-alpha.0

package/dist/chunks/NcDateTimePicker-GHt3kJ7B.mjs

@@ -0,0 +1,336 @@
+import "../assets/NcDateTimePicker-SsDztIsS.css";
+import { r as P, F as T, a as n } from "./_l10n-JmazR_zZ.mjs";
+import { G as N } from "./GenRandomId-VodkdWbp.mjs";
+import { N as Y } from "./NcTimezonePicker-wLjOcbbU.mjs";
+import { N as _ } from "./NcPopover-HwP68PjO.mjs";
+import { S as H } from "./ScopeComponent-KbEZrKGJ.mjs";
+import { openBlock as a, createElementBlock as l, mergeProps as u, createElementVNode as i, toDisplayString as h, createCommentVNode as z, resolveComponent as d, createBlock as c, createSlots as $, withCtx as p, withModifiers as V, createVNode as C, renderList as B, renderSlot as I, normalizeProps as U, guardReactiveProps as W } from "vue";
+import { _ as f } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+import { getMonthNames as F, getMonthNamesShort as A, getDayNames as L, getDayNamesShort as O, getDayNamesMin as j, getFirstDay as E } from "@nextcloud/l10n";
+import G from "vue-datepicker-next";
+P(T);
+const R = {
+  name: "CalendarBlankIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, Z = ["aria-hidden", "aria-label"], q = ["fill", "width", "height"], J = { d: "M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1" }, K = { key: 0 };
+function Q(e, o, t, m, g, y) {
+  return a(), l("span", u(e.$attrs, {
+    "aria-hidden": !t.title,
+    "aria-label": t.title,
+    class: "material-design-icon calendar-blank-icon",
+    role: "img",
+    onClick: o[0] || (o[0] = (s) => e.$emit("click", s))
+  }), [
+    (a(), l("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      i("path", J, [
+        t.title ? (a(), l("title", K, h(t.title), 1)) : z("", !0)
+      ])
+    ], 8, q))
+  ], 16, Z);
+}
+const X = /* @__PURE__ */ f(R, [["render", Q]]), x = {
+  name: "WebIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, ee = ["aria-hidden", "aria-label"], te = ["fill", "width", "height"], oe = { d: "M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" }, ae = { key: 0 };
+function re(e, o, t, m, g, y) {
+  return a(), l("span", u(e.$attrs, {
+    "aria-hidden": !t.title,
+    "aria-label": t.title,
+    class: "material-design-icon web-icon",
+    role: "img",
+    onClick: o[0] || (o[0] = (s) => e.$emit("click", s))
+  }), [
+    (a(), l("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      i("path", oe, [
+        t.title ? (a(), l("title", ae, h(t.title), 1)) : z("", !0)
+      ])
+    ], 8, te))
+  ], 16, ee);
+}
+const ne = /* @__PURE__ */ f(x, [["render", re]]), w = {
+  date: "YYYY-MM-DD",
+  datetime: "YYYY-MM-DD H:mm:ss",
+  year: "YYYY",
+  month: "YYYY-MM",
+  time: "H:mm:ss",
+  week: "w"
+}, ie = H({
+  name: "NcDateTimePicker",
+  components: {
+    CalendarBlank: X,
+    DatePicker: G,
+    NcPopover: _,
+    NcTimezonePicker: Y,
+    Web: ne
+  },
+  props: {
+    clearable: {
+      type: Boolean,
+      default: !1
+    },
+    minuteStep: {
+      type: Number,
+      default: 10
+    },
+    type: {
+      type: String,
+      default: "date"
+    },
+    format: {
+      type: String,
+      default: null
+    },
+    formatter: {
+      type: Object,
+      default: null
+    },
+    lang: {
+      type: Object,
+      default: null
+    },
+    /**
+     * The value to initialize, but also two-way bind the selected date. The date is – like the `Date` object in
+     * JavaScript – tied to UTC. The selected time zone does not have an influence of the selected time and date
+     * value. You have to translate the time yourself when you want to factor in time zones.
+     */
+    // eslint-disable-next-line
+    modelValue: {
+      default: () => /* @__PURE__ */ new Date()
+    },
+    /**
+     * The preselected IANA time zone ID for the time zone picker, only relevant in combination with `:show-timezone-select="true"`. Example: `Europe/Berlin`. The prop supports two-way binding through v-model directive.
+     */
+    timezoneId: {
+      type: String,
+      default: "UTC"
+    },
+    showTimezoneSelect: {
+      type: Boolean,
+      default: !1
+    },
+    highlightTimezone: {
+      type: Boolean,
+      default: !1
+    },
+    appendToBody: {
+      type: Boolean,
+      default: !1
+    },
+    showWeekNumber: {
+      type: Boolean,
+      default: !1
+    },
+    placeholder: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "update:timezone-id"
+  ],
+  setup() {
+    return {
+      timezoneDialogHeaderId: `timezone-dialog-header-${N()}`
+    };
+  },
+  data() {
+    return {
+      showTimezonePopover: !1,
+      tzVal: this.timezoneId
+    };
+  },
+  computed: {
+    /**
+     * Datepicker language
+     * https://github.com/mengxiong10/vue2-datepicker/blob/master/locale.md
+     *
+     * @return {object}
+     */
+    defaultLang() {
+      return {
+        formatLocale: {
+          months: F(),
+          monthsShort: A(),
+          weekdays: L(),
+          weekdaysShort: O(),
+          weekdaysMin: j(),
+          // 0 = sunday, 1 = monday
+          firstDayOfWeek: E()
+        },
+        monthFormat: "MMM"
+      };
+    },
+    /**
+     * Translated placeholder
+     *
+     * @return {string}
+     */
+    defaultPlaceholder() {
+      return this.type === "time" ? n("Pick a time") : this.type === "month" ? n("Pick a month") : this.type === "year" ? n("Pick a year") : this.type === "week" ? n("Pick a week") : this.type === "date" ? n("Pick a date") : n("Pick a date and a time");
+    },
+    /**
+     * If format is not provided, try to match the type
+     * or fallback to 'date'
+     *
+     * @return {string}
+     */
+    formatTypeMap() {
+      return w[this.type] ?? w.date;
+    },
+    /**
+     * The formatter used for the vue-datepicker to fix nextcloud-libraries/nextcloud-vue#5044
+     */
+    internalFormatter() {
+      return {
+        getWeek: (o) => {
+          const t = new Date(Date.UTC(o.getFullYear(), o.getMonth(), o.getDate()));
+          t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
+          const m = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));
+          return Math.ceil(((t - m) / 864e5 + 1) / 7);
+        },
+        // allow to override it by users using the `formatter` prop
+        ...this.formatter ?? {}
+      };
+    }
+  },
+  methods: {
+    t: n,
+    handleSelectYear(e) {
+      const o = this.$refs.datepicker.currentValue;
+      if (o)
+        try {
+          const t = new Date(new Date(o).setFullYear(e));
+          this.$refs.datepicker.selectDate(t);
+        } catch {
+          console.error("Invalid value", o, e);
+        }
+    },
+    handleSelectMonth(e) {
+      const o = this.$refs.datepicker.currentValue;
+      if (o)
+        try {
+          const t = new Date(new Date(o).setMonth(e));
+          this.$refs.datepicker.selectDate(t);
+        } catch {
+          console.error("Invalid value", o, e);
+        }
+    },
+    /**
+     * Toggles the visibility of the time zone popover
+     */
+    toggleTimezonePopover() {
+      this.showTimezoneSelect && (this.showTimezonePopover = !this.showTimezonePopover);
+    }
+  }
+}), le = ["aria-labelledby"], se = { class: "timezone-popover-wrapper__label" }, de = ["id"];
+function me(e, o, t, m, g, y) {
+  const s = d("Web"), M = d("NcTimezonePicker"), v = d("NcPopover"), b = d("CalendarBlank"), D = d("DatePicker");
+  return a(), c(D, {
+    ref: "datepicker",
+    "append-to-body": e.appendToBody,
+    clearable: e.clearable,
+    format: e.format ? e.format : e.formatTypeMap,
+    formatter: e.internalFormatter,
+    lang: e.lang ? e.lang : e.defaultLang,
+    "minute-step": e.minuteStep,
+    placeholder: e.placeholder ? e.placeholder : e.defaultPlaceholder,
+    "popup-class": { "show-week-number": e.showWeekNumber },
+    "show-week-number": e.showWeekNumber,
+    type: e.type,
+    value: e.modelValue,
+    onSelectYear: e.handleSelectYear,
+    onSelectMonth: e.handleSelectMonth,
+    "onUpdate:value": o[2] || (o[2] = (r) => e.$emit("update:modelValue", r))
+  }, $({
+    "icon-calendar": p(() => [
+      e.showTimezoneSelect ? (a(), c(v, {
+        key: 0,
+        shown: e.showTimezonePopover,
+        "onUpdate:shown": o[1] || (o[1] = (r) => e.showTimezonePopover = r),
+        "popup-role": "dialog",
+        "popover-base-class": "timezone-select__popper"
+      }, {
+        trigger: p(({ attrs: r }) => [
+          i("button", u({
+            class: ["datetime-picker-inline-icon", { "datetime-picker-inline-icon--highlighted": e.highlightTimezone }]
+          }, r, {
+            onMousedown: V(() => {
+            }, ["stop", "prevent"])
+          }), [
+            C(s, { size: 20 })
+          ], 16)
+        ]),
+        default: p(() => [
+          i("div", {
+            role: "dialog",
+            "aria-labelledby": e.timezoneDialogHeaderId
+          }, [
+            i("div", se, [
+              i("strong", { id: e.timezoneDialogHeaderId }, h(e.t("Please select a time zone:")), 9, de)
+            ]),
+            C(M, {
+              "model-value": e.tzVal,
+              class: "timezone-popover-wrapper__timezone-select",
+              "onUpdate:modelValue": o[0] || (o[0] = (r) => e.$emit("update:timezone-id", r))
+            }, null, 8, ["model-value"])
+          ], 8, le)
+        ]),
+        _: 1
+      }, 8, ["shown"])) : (a(), c(b, {
+        key: 1,
+        size: 20
+      }))
+    ]),
+    _: 2
+  }, [
+    B(e.$slots, (r, k) => ({
+      name: k,
+      fn: p((S) => [
+        I(e.$slots, k, U(W(S)), void 0, !0)
+      ])
+    }))
+  ]), 1032, ["append-to-body", "clearable", "format", "formatter", "lang", "minute-step", "placeholder", "popup-class", "show-week-number", "type", "value", "onSelectYear", "onSelectMonth"]);
+}
+const ze = /* @__PURE__ */ f(ie, [["render", me], ["__scopeId", "data-v-5cf80a29"]]);
+export {
+  ze as N
+};

package/dist/chunks/NcDateTimePicker-GHt3kJ7B.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTimePicker-GHt3kJ7B.mjs","sources":["../../node_modules/vue-material-design-icons/CalendarBlank.vue","../../node_modules/vue-material-design-icons/Web.vue","../../src/components/NcDateTimePicker/NcDateTimePicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"!title\"\n        :aria-label=\"title\"\n        class=\"material-design-icon calendar-blank-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CalendarBlankIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"!title\"\n        :aria-label=\"title\"\n        class=\"material-design-icon web-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"WebIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n> We're wrapping the awesome datepicker library here https://github.com/mengxiong10/vue-datepicker-next\n> Please check there for all the available options.\n\n### Defaults\n- cleareable: false\n- minute-step: 10\n\n### Example\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\ttype=\"datetime\" />\n\t\t{{ time }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: new Date('2022-10-10 10:10:10'),\n\t\t}\n\t},\n}\n</script>\n```\n\n### Example with confirm button\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\ttype=\"datetime\"\n\t\t\tconfirm />\n\t\t{{ time }}\n\t</span>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttime: null,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### Range picker\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\trange\n\t\t\ttype=\"date\" />\n\t\t{{ time }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: null,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Time zone aware date picker\n\nThe datepicker can optionally include a picker for the preferred time zone. The selected time does not factor in the\npicked time zone, but you will have to convert it yourself when necessary.\n\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\ttype=\"datetime\"\n\t\t\t:show-timezone-select=\"true\"\n\t\t\tv-model:timezone-id=\"tz\" /><br>\n\t\t{{ time }} | {{ tz }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: undefined,\n\t\t\ttz: 'Europe/Berlin',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<DatePicker ref=\"datepicker\"\n\t\t:append-to-body=\"appendToBody\"\n\t\t:clearable=\"clearable\"\n\t\t:format=\"format ? format : formatTypeMap\"\n\t\t:formatter=\"internalFormatter\"\n\t\t:lang=\"lang ? lang : defaultLang\"\n\t\t:minute-step=\"minuteStep\"\n\t\t:placeholder=\"placeholder ? placeholder : defaultPlaceholder\"\n\t\t:popup-class=\"{ 'show-week-number': showWeekNumber }\"\n\t\t:show-week-number=\"showWeekNumber\"\n\t\t:type=\"type\"\n\t\t:value=\"modelValue\"\n\t\t@select-year=\"handleSelectYear\"\n\t\t@select-month=\"handleSelectMonth\"\n\t\t@update:value=\"$emit('update:modelValue', $event)\">\n\t\t<template #icon-calendar>\n\t\t\t<NcPopover v-if=\"showTimezoneSelect\"\n\t\t\t\tv-model:shown=\"showTimezonePopover\"\n\t\t\t\tpopup-role=\"dialog\"\n\t\t\t\tpopover-base-class=\"timezone-select__popper\">\n\t\t\t\t<template #trigger=\"{ attrs }\">\n\t\t\t\t\t<button class=\"datetime-picker-inline-icon\"\n\t\t\t\t\t\t:class=\"{'datetime-picker-inline-icon--highlighted': highlightTimezone}\"\n\t\t\t\t\t\tv-bind=\"attrs\"\n\t\t\t\t\t\t@mousedown.stop.prevent=\"() => {}\">\n\t\t\t\t\t\t<Web :size=\"20\" />\n\t\t\t\t\t</button>\n\t\t\t\t</template>\n\n\t\t\t\t<div role=\"dialog\"\n\t\t\t\t\t:aria-labelledby=\"timezoneDialogHeaderId\">\n\t\t\t\t\t<div class=\"timezone-popover-wrapper__label\">\n\t\t\t\t\t\t<strong :id=\"timezoneDialogHeaderId\">\n\t\t\t\t\t\t\t{{ t('Please select a time zone:') }}\n\t\t\t\t\t\t</strong>\n\t\t\t\t\t</div>\n\t\t\t\t\t<NcTimezonePicker :model-value=\"tzVal\"\n\t\t\t\t\t\tclass=\"timezone-popover-wrapper__timezone-select\"\n\t\t\t\t\t\t@update:model-value=\"$emit('update:timezone-id', $event)\" />\n\t\t\t\t</div>\n\t\t\t</NcPopover>\n\t\t\t<CalendarBlank v-else :size=\"20\" />\n\t\t</template>\n\t\t<template v-for=\"(_, slot) of $slots\" #[slot]=\"scope\">\n\t\t\t<slot :name=\"slot\" v-bind=\"scope\" />\n\t\t</template>\n\t</DatePicker>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport NcTimezonePicker from '../NcTimezonePicker/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nimport CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'\nimport Web from 'vue-material-design-icons/Web.vue'\n\nimport {\n\tgetFirstDay,\n\tgetDayNames,\n\tgetDayNamesShort,\n\tgetDayNamesMin,\n\tgetMonthNames,\n\tgetMonthNamesShort,\n} from '@nextcloud/l10n'\n\nimport DatePicker from 'vue-datepicker-next'\nimport './index.scss'\n\nconst formatMap = {\n\tdate: 'YYYY-MM-DD',\n\tdatetime: 'YYYY-MM-DD H:mm:ss',\n\tyear: 'YYYY',\n\tmonth: 'YYYY-MM',\n\ttime: 'H:mm:ss',\n\tweek: 'w',\n}\n\nexport default ScopeComponent({\n\tname: 'NcDateTimePicker',\n\n\tcomponents: {\n\t\tCalendarBlank,\n\t\tDatePicker,\n\t\tNcPopover,\n\t\tNcTimezonePicker,\n\t\tWeb,\n\t},\n\n\tprops: {\n\t\tclearable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tminuteStep: {\n\t\t\ttype: Number,\n\t\t\tdefault: 10,\n\t\t},\n\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t},\n\n\t\tformat: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\tformatter: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\tlang: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value to initialize, but also two-way bind the selected date. The date is – like the `Date` object in\n\t\t * JavaScript – tied to UTC. The selected time zone does not have an influence of the selected time and date\n\t\t * value. You have to translate the time yourself when you want to factor in time zones.\n\t\t */\n\t\t// eslint-disable-next-line\n\t\tmodelValue: {\n\t\t\tdefault: () => new Date(),\n\t\t},\n\n\t\t/**\n\t\t * The preselected IANA time zone ID for the time zone picker, only relevant in combination with `:show-timezone-select=\"true\"`. Example: `Europe/Berlin`. The prop supports two-way binding through v-model directive.\n\t\t */\n\t\ttimezoneId: {\n\t\t\ttype: String,\n\t\t\tdefault: 'UTC',\n\t\t},\n\n\t\tshowTimezoneSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\thighlightTimezone: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tappendToBody: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tshowWeekNumber: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t\t'update:timezone-id',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\ttimezoneDialogHeaderId: `timezone-dialog-header-${GenRandomId()}`,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tshowTimezonePopover: false,\n\t\t\ttzVal: this.timezoneId,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Datepicker language\n\t\t * https://github.com/mengxiong10/vue2-datepicker/blob/master/locale.md\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tdefaultLang() {\n\t\t\treturn {\n\t\t\t\tformatLocale: {\n\t\t\t\t\tmonths: getMonthNames(),\n\t\t\t\t\tmonthsShort: getMonthNamesShort(),\n\t\t\t\t\tweekdays: getDayNames(),\n\t\t\t\t\tweekdaysShort: getDayNamesShort(),\n\t\t\t\t\tweekdaysMin: getDayNamesMin(),\n\t\t\t\t\t// 0 = sunday, 1 = monday\n\t\t\t\t\tfirstDayOfWeek: getFirstDay(),\n\t\t\t\t},\n\t\t\t\tmonthFormat: 'MMM',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Translated placeholder\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\tdefaultPlaceholder() {\n\t\t\tif (this.type === 'time') {\n\t\t\t\treturn t('Pick a time')\n\t\t\t}\n\t\t\tif (this.type === 'month') {\n\t\t\t\treturn t('Pick a month')\n\t\t\t}\n\t\t\tif (this.type === 'year') {\n\t\t\t\treturn t('Pick a year')\n\t\t\t}\n\t\t\tif (this.type === 'week') {\n\t\t\t\treturn t('Pick a week')\n\t\t\t}\n\t\t\tif (this.type === 'date') {\n\t\t\t\treturn t('Pick a date')\n\t\t\t}\n\t\t\treturn t('Pick a date and a time')\n\t\t},\n\n\t\t/**\n\t\t * If format is not provided, try to match the type\n\t\t * or fallback to 'date'\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\tformatTypeMap() {\n\t\t\treturn formatMap[this.type] ?? formatMap.date\n\t\t},\n\n\t\t/**\n\t\t * The formatter used for the vue-datepicker to fix nextcloud-libraries/nextcloud-vue#5044\n\t\t */\n\t\tinternalFormatter() {\n\t\t\t/**\n\t\t\t * Get the ISO week number of the date\n\t\t\t * @param {Date} date The date to format\n\t\t\t */\n\t\t\tconst getWeek = (date) => {\n\t\t\t\t// Adjust to nearest Thursday\n\t\t\t\tconst firstThursday = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))\n\t\t\t\tfirstThursday.setUTCDate(firstThursday.getUTCDate() + 4 - (firstThursday.getUTCDay() || 7))\n\n\t\t\t\tconst yearStart = new Date(Date.UTC(firstThursday.getUTCFullYear(), 0, 1))\n\n\t\t\t\t// Full weeks to nearest Thursday\n\t\t\t\treturn Math.ceil((((firstThursday - yearStart) / 86400000) + 1) / 7)\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tgetWeek,\n\t\t\t\t// allow to override it by users using the `formatter` prop\n\t\t\t\t...(this.formatter ?? {}),\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\thandleSelectYear(year) {\n\t\t\tconst value = this.$refs.datepicker.currentValue\n\t\t\tif (value) {\n\t\t\t\ttry {\n\t\t\t\t\tconst date = new Date(new Date(value).setFullYear(year))\n\t\t\t\t\tthis.$refs.datepicker.selectDate(date)\n\t\t\t\t} catch (error) {\n\t\t\t\t\tconsole.error('Invalid value', value, year)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandleSelectMonth(month) {\n\t\t\tconst value = this.$refs.datepicker.currentValue\n\t\t\tif (value) {\n\t\t\t\ttry {\n\t\t\t\t\tconst date = new Date(new Date(value).setMonth(month))\n\t\t\t\t\tthis.$refs.datepicker.selectDate(date)\n\t\t\t\t} catch (error) {\n\t\t\t\t\tconsole.error('Invalid value', value, month)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Toggles the visibility of the time zone popover\n\t\t */\n\t\ttoggleTimezonePopover() {\n\t\t\tif (!this.showTimezoneSelect) {\n\t\t\t\t// Just a click on the icon, but not for time zones -> ignore\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.showTimezonePopover = !this.showTimezonePopover\n\t\t},\n\t},\n})\n\n</script>\n\n<style lang=\"scss\" scoped>\n.mx-datepicker :deep(.mx-input-wrapper .mx-input) {\n\tbackground-clip: border-box;\n}\n\n.datetime-picker-inline-icon {\n\topacity: .3;\n\tborder: none;\n\tbackground-color: transparent;\n\tborder-radius: 0;\n\tpadding: 0 !important;\n\tmargin: 0;\n\n\t&--highlighted {\n\t\topacity: .7;\n\t}\n\n\t&:focus,\n\t&:hover {\n\t\topacity: 1;\n\t}\n}\n</style>\n\n<style lang=\"scss\">\n// We overwrite the popover base class, so we can style\n// the popover for the timezone select only.\n.v-popper--theme-dropdown.v-popper__popper.timezone-select__popper .v-popper__wrapper {\n\tborder-radius: var(--border-radius-large);\n\n\t.v-popper__inner {\n\t\tpadding: 4px;\n\t\tborder-radius: var(--border-radius-large);\n\n\t\t.timezone-popover-wrapper {\n\t\t\t&__label {\n\t\t\t\tpadding: 4px 0;\n\t\t\t\tpadding-left: 14px; // Left-align with NcSelect text\n\t\t\t}\n\n\t\t\t// We overwrite the border radius of the input to account for the popover border-radius minus the padding\n\t\t\t&__timezone-select.v-select {\n\t\t\t\t.vs__dropdown-toggle {\n\t\t\t\t\tborder-radius: calc(var(--border-radius-large) - 4px);\n\t\t\t\t}\n\n\t\t\t\t&.vs--open {\n\t\t\t\t\t.vs__dropdown-toggle {\n\t\t\t\t\t\tborder-bottom-left-radius: 0;\n\t\t\t\t\t\tborder-bottom-right-radius: 0;\n\t\t\t\t\t}\n\t\t\t\t\t&.select--drop-up .vs__dropdown-toggle {\n\t\t\t\t\t\tborder-radius: 0 0 calc(var(--border-radius-large) - 4px) calc(var(--border-radius-large) - 4px);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n// TODO: This should be scoped or targeted by a specific selector, but the NcSelect component does not allow this yet.\n.vs__dropdown-menu--floating {\n\t// Higher z-index than the popover in which the NcSelect is located.\n\tz-index: 100001;\n}\n</style>\n"],"names":["_sfc_main$2","_hoisted_1$2","_hoisted_2$2","_hoisted_3$2","$props","createElementVNode","createCommentVNode","_sfc_main$1","_hoisted_1$1","_hoisted_2$1","_hoisted_3$1","formatMap","_sfc_main","ScopeComponent","NcPopover","NcTimezonePicker","Web","GenRandomId","getMonthNamesShort","getDayNamesShort","t","date","firstThursday","yearStart","value","year","month","_hoisted_1","_hoisted_2","_hoisted_3","_ctx","createSlots","withCtx","_cache","$event","mergeProps","toDisplayString","renderList","_","slot","renderSlot","normalizeProps","guardReactiveProps","scope"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/chunks/NcDateTimePickerNative-m30hv5MT.cjs

@@ -0,0 +1,176 @@
+var M = require("../assets/NcDateTimePickerNative-QBosiBWA.css");
+const h = require("./ScopeComponent-4ppIHwI4.cjs"), o = require("vue"), f = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), c = ["date", "datetime-local", "month", "time", "week"], y = h.ScopeComponent({
+  name: "NcDateTimePickerNative",
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The date is – like the `Date` object in JavaScript – tied to UTC.
+     * The selected time zone does not have an influence of the selected time and date value.
+     * You have to translate the time yourself when you want to factor in time zones.
+     * Pass null to clear the input field.
+     */
+    modelValue: {
+      type: Date,
+      default: null
+    },
+    /**
+     * id attribute of the input field
+     */
+    id: {
+      type: String,
+      required: !0
+    },
+    /**
+     * type attribute of the input field
+     * default type: String
+     * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`
+     */
+    type: {
+      type: String,
+      default: "date",
+      validate: (e) => c.includes(e)
+    },
+    /**
+     * text inside the label element
+     * default type: String
+     */
+    label: {
+      type: String,
+      default: "Please choose a date"
+    },
+    /**
+     * min attribute of the input field
+     * default type: null
+     */
+    min: {
+      type: [Date, Boolean],
+      default: null
+    },
+    /**
+     * max attribute of the input field
+     * default type: null
+     */
+    max: {
+      type: [Date, Boolean],
+      default: null
+    },
+    /**
+     * Flag to hide the label
+     * default type: String
+     * The hidden input label for accessibility purposes.
+     */
+    hideLabel: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Class to add to the input field.
+     * Necessary to use NcDateTimePickerNative in the NcActionInput component.
+     */
+    inputClass: {
+      type: [Object, String],
+      default: ""
+    }
+  },
+  emits: [
+    "update:modelValue"
+  ],
+  computed: {
+    formattedValue() {
+      return this.formatValue(this.modelValue);
+    },
+    formattedMin() {
+      return this.min ? this.formatValue(this.min) : !1;
+    },
+    formattedMax() {
+      return this.max ? this.formatValue(this.max) : !1;
+    }
+  },
+  methods: {
+    /**
+     * Handle the input event
+     *
+     * @param {InputEvent} $event input event payload
+     * @return {Date|null} new chosen Date() or null
+     */
+    onInput(e) {
+      if (isNaN(e.target.valueAsNumber))
+        return this.$emit("update:modelValue", null);
+      if (this.type === "time") {
+        const a = e.target.value;
+        if (this.modelValue === "") {
+          const { yyyy: l, MM: d, dd: u } = this.getReadableDate(/* @__PURE__ */ new Date());
+          return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${l}-${d}-${u}T${a}`));
+        }
+        const { yyyy: i, MM: n, dd: s } = this.getReadableDate(this.modelValue);
+        return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${i}-${n}-${s}T${a}`));
+      } else if (this.type === "month") {
+        const a = (new Date(e.target.value).getMonth() + 1).toString().padStart(2, "0");
+        if (this.modelValue === "") {
+          const { yyyy: d, dd: u, hh: m, mm: p } = this.getReadableDate(/* @__PURE__ */ new Date());
+          return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${d}-${a}-${u}T${m}:${p}`));
+        }
+        const { yyyy: i, dd: n, hh: s, mm: l } = this.getReadableDate(this.value);
+        return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${i}-${a}-${n}T${s}:${l}`));
+      }
+      const t = new Date(e.target.valueAsNumber).getTimezoneOffset() * 1e3 * 60, r = e.target.valueAsNumber + t;
+      return this.$emit("update:modelValue", new Date(r));
+    },
+    /**
+     * Returns Object with string values of a Date
+     *
+     * @param {Date} value The selected value
+     * @return {object|undefined}
+     */
+    getReadableDate(e) {
+      if (e instanceof Date) {
+        const t = e.getFullYear().toString().padStart(4, "0"), r = (e.getMonth() + 1).toString().padStart(2, "0"), a = e.getDate().toString().padStart(2, "0"), i = e.getHours().toString().padStart(2, "0"), n = e.getMinutes().toString().padStart(2, "0");
+        return { yyyy: t, MM: r, dd: a, hh: i, mm: n };
+      }
+    },
+    /**
+     * Returns preformatted value for the input field
+     *
+     * @param {Date} value The selected value
+     * @return {string|undefined}
+     */
+    formatValue(e) {
+      if (e instanceof Date) {
+        const { yyyy: t, MM: r, dd: a, hh: i, mm: n } = this.getReadableDate(e);
+        if (this.type === "datetime-local")
+          return `${t}-${r}-${a}T${i}:${n}`;
+        if (this.type === "date")
+          return `${t}-${r}-${a}`;
+        if (this.type === "month")
+          return `${t}-${r}`;
+        if (this.type === "time")
+          return `${i}:${n}`;
+        if (this.type === "week") {
+          const s = new Date(t, 0, 1), l = Math.floor((e - s) / (24 * 60 * 60 * 1e3)), d = Math.ceil(l / 7);
+          return `${t}-W${d}`;
+        }
+      } else
+        return "";
+    }
+  }
+}), $ = { class: "native-datetime-picker" }, g = ["for"], D = ["id", "type", "value", "min", "max"];
+function S(e, t, r, a, i, n) {
+  return o.openBlock(), o.createElementBlock("div", $, [
+    o.createElementVNode("label", {
+      class: o.normalizeClass({ "hidden-visually": e.hideLabel }),
+      for: e.id
+    }, o.toDisplayString(e.label), 11, g),
+    o.createElementVNode("input", o.mergeProps({
+      id: e.id,
+      class: ["native-datetime-picker--input", e.inputClass],
+      type: e.type,
+      value: e.formattedValue,
+      min: e.formattedMin,
+      max: e.formattedMax
+    }, e.$attrs, {
+      onInput: t[0] || (t[0] = (...s) => e.onInput && e.onInput(...s))
+    }), null, 16, D)
+  ]);
+}
+const V = /* @__PURE__ */ f._export_sfc(y, [["render", S], ["__scopeId", "data-v-f735263a"]]);
+exports.NcDateTimePickerNative = V;

package/dist/chunks/NcDateTimePickerNative-m30hv5MT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTimePickerNative-m30hv5MT.cjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n  -\n  - @author Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n  - @author Richard Steinmetz <richard@steinmetz.cloud>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n\n### General description\n\nThis components provides a wrapper around the native browser datetime picker. <br>\nThis is an input with some type of date e.g. https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local). <br>\nAll available types are: 'date', 'datetime-local', 'month', 'time' and 'week', please check them here: https://html.spec.whatwg.org/multipage/input.html#  <br>\n\n### Examples\n\n#### Usage: type='datetime-local'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t\tThe date selected is {{ value }}\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='datetime-local' with min date and max date\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:min=\"yesterdayDate\"\n\t\t\t:max=\"someDate\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t\tyesterdayDate: new Date(new Date().setDate(new Date().getDate() - 1)),\n\t\t\t\tsomeDate: new Date(new Date().setDate(new Date().getDate() + 7)),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='week'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"week\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='month'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"month\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"native-datetime-picker\">\n\t\t<label :class=\"{ 'hidden-visually': hideLabel }\" :for=\"id\">{{ label }}</label>\n\t\t<input :id=\"id\"\n\t\t\tclass=\"native-datetime-picker--input\"\n\t\t\t:class=\"inputClass\"\n\t\t\t:type=\"type\"\n\t\t\t:value=\"formattedValue\"\n\t\t\t:min=\"formattedMin\"\n\t\t\t:max=\"formattedMax\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@input=\"onInput\">\n\t</div>\n</template>\n\n<script>\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nconst inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']\n\nexport default ScopeComponent({\n\tname: 'NcDateTimePickerNative',\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The date is – like the `Date` object in JavaScript – tied to UTC.\n\t\t * The selected time zone does not have an influence of the selected time and date value.\n\t\t * You have to translate the time yourself when you want to factor in time zones.\n\t\t * Pass null to clear the input field.\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Date,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the input field\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t * default type: String\n\t\t * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t\tvalidate: (name) => inputDateTypes.includes(name),\n\t\t},\n\t\t/**\n\t\t * text inside the label element\n\t\t * default type: String\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Please choose a date',\n\t\t},\n\t\t/**\n\t\t * min attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmin: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * max attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmax: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Flag to hide the label\n\t\t * default type: String\n\t\t * The hidden input label for accessibility purposes.\n\t\t */\n\t\thideLabel: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcDateTimePickerNative in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tformattedValue() {\n\t\t\treturn this.formatValue(this.modelValue)\n\t\t},\n\t\tformattedMin() {\n\t\t\tif (this.min) {\n\t\t\t\treturn this.formatValue(this.min)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\tformattedMax() {\n\t\t\tif (this.max) {\n\t\t\t\treturn this.formatValue(this.max)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle the input event\n\t\t *\n\t\t * @param {InputEvent} $event input event payload\n\t\t * @return {Date|null} new chosen Date() or null\n\t\t */\n\t\tonInput($event) {\n\t\t\tif (isNaN($event.target.valueAsNumber)) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {null} null value\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', null)\n\t\t\t}\n\t\t\tif (this.type === 'time') {\n\t\t\t\tconst time = $event.target.value\n\t\t\t\tif (this.modelValue === '') {\n\t\t\t\t\t// this case is because of Chrome bug\n\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(this.modelValue)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t} else if (this.type === 'month') {\n\t\t\t\tconst MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tif (this.modelValue === '') {\n\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(this.value)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t}\n\t\t\tconst timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1000 * 60\n\t\t\tconst inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds\n\t\t\t/**\n\t\t\t * Emitted when the input value changes\n\t\t\t *\n\t\t\t * @return {Date} new chosen Date()\n\t\t\t */\n\t\t\treturn this.$emit('update:modelValue', new Date(inputDateWithTimezone))\n\t\t},\n\t\t/**\n\t\t * Returns Object with string values of a Date\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {object|undefined}\n\t\t */\n\t\tgetReadableDate(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst yyyy = value.getFullYear().toString().padStart(4, '0')\n\t\t\t\tconst MM = (value.getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tconst dd = value.getDate().toString().padStart(2, '0')\n\t\t\t\tconst hh = value.getHours().toString().padStart(2, '0')\n\t\t\t\tconst mm = value.getMinutes().toString().padStart(2, '0')\n\n\t\t\t\treturn { yyyy, MM, dd, hh, mm }\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Returns preformatted value for the input field\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {string|undefined}\n\t\t */\n\t\tformatValue(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst { yyyy, MM, dd, hh, mm } = this.getReadableDate(value)\n\t\t\t\tif (this.type === 'datetime-local') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}T${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'date') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}`\n\t\t\t\t} else if (this.type === 'month') {\n\t\t\t\t\treturn `${yyyy}-${MM}`\n\t\t\t\t} else if (this.type === 'time') {\n\t\t\t\t\treturn `${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'week') {\n\t\t\t\t\tconst startDate = new Date(yyyy, 0, 1)\n\t\t\t\t\tconst daysSinceBeginningOfYear = Math.floor((value - startDate)\n\t\t\t\t\t\t/ (24 * 60 * 60 * 1000))\n\t\t\t\t\tconst weekNumber = Math.ceil(daysSinceBeginningOfYear / 7)\n\t\t\t\t\treturn `${yyyy}-W${weekNumber}`\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n\t.native-datetime-picker {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.native-datetime-picker .native-datetime-picker--input {\n\t\twidth: 100%;\n\t\tflex: 0 0 auto;\n\t\tpadding-right: 4px;\n\t}\n\n\t[data-theme-light],\n\t[data-themes*=light] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: light;\n\t\t}\n\t}\n\n\t[data-theme-dark],\n\t[data-themes*=dark] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: dark;\n\t\t}\n\t}\n</style>\n"],"names":["inputDateTypes","_sfc_main","ScopeComponent","$event","yyyy","MM","dd","time","hh","mm","timezoneOffsetSeconds","inputDateWithTimezone","value","startDate","_hoisted_1","_hoisted_2","_hoisted_3","vue","_ctx","_cache","args"],"mappings":"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"}