@nextcloud/vue 8.0.0-beta.6 → 8.0.0-beta.8

package/dist/Components/NcDateTimePicker.mjs

@@ -0,0 +1,228 @@
+import "../assets/index-294382c8.css";
+import { t as r } from "../chunks/l10n-27a75c40.mjs";
+import s from "./NcTimezonePicker.mjs";
+import p from "./NcPopover.mjs";
+import { l as c } from "../chunks/l10n-c5f5f001.mjs";
+import m from "vue-material-design-icons/CalendarBlank.vue";
+import u from "vue-material-design-icons/Web.vue";
+import { getMonthNames as d, getMonthNamesShort as f, getDayNames as h, getDayNamesShort as y, getDayNamesMin as _, getFirstDay as k } from "@nextcloud/l10n";
+import v from "vue2-datepicker";
+import { n as g } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+import { S as w } from "../chunks/ScopeComponent-97a014a1.mjs";
+const l = {
+  date: "YYYY-MM-DD",
+  datetime: "YYYY-MM-DD H:mm:ss",
+  year: "YYYY",
+  month: "YYYY-MM",
+  time: "H:mm:ss",
+  week: "w"
+}, z = {
+  name: "NcDateTimePicker",
+  components: {
+    CalendarBlank: m,
+    DatePicker: v,
+    NcPopover: p,
+    NcTimezonePicker: s,
+    Web: u
+  },
+  mixins: [c],
+  inheritAttrs: !1,
+  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
+    value: {
+      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 the .sync modifier.
+     */
+    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:value",
+    "update:timezone-id"
+  ],
+  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: d(),
+          monthsShort: f(),
+          weekdays: h(),
+          weekdaysShort: y(),
+          weekdaysMin: _(),
+          // 0 = sunday, 1 = monday
+          firstDayOfWeek: k()
+        },
+        monthFormat: "MMM"
+      };
+    },
+    /**
+     * Translated placeholder
+     *
+     * @return {string}
+     */
+    defaultPlaceholder() {
+      return this.type === "time" ? r("Pick a time") : this.type === "month" ? r("Pick a month") : this.type === "year" ? r("Pick a year") : this.type === "week" ? r("Pick a week") : this.type === "date" ? r("Pick a date") : r("Pick a date and a time");
+    },
+    /**
+     * If format is not provided, try to match the type
+     * or fallback to 'date'
+     *
+     * @return {string}
+     */
+    formatTypeMap() {
+      var a;
+      return (a = l[this.type]) != null ? a : l.date;
+    }
+  },
+  methods: {
+    handleSelectYear(a) {
+      const e = this.$refs.datepicker.currentValue;
+      if (e)
+        try {
+          const t = new Date(new Date(e).setFullYear(a));
+          this.$refs.datepicker.selectDate(t);
+        } catch {
+          console.error("Invalid value", e, a);
+        }
+    },
+    handleSelectMonth(a) {
+      const e = this.$refs.datepicker.currentValue;
+      if (e)
+        try {
+          const t = new Date(new Date(e).setMonth(a));
+          this.$refs.datepicker.selectDate(t);
+        } catch {
+          console.error("Invalid value", e, a);
+        }
+    },
+    /**
+     * Toggles the visibility of the time zone popover
+     */
+    toggleTimezonePopover() {
+      this.showTimezoneSelect && (this.showTimezonePopover = !this.showTimezonePopover);
+    }
+  }
+};
+var P = function() {
+  var e = this, t = e._self._c;
+  return t("DatePicker", e._g(e._b({ ref: "datepicker", attrs: { "append-to-body": e.appendToBody, clearable: e.clearable, format: e.format ? e.format : e.formatTypeMap, formatter: e.formatter, 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.value }, on: { "select-year": e.handleSelectYear, "select-month": e.handleSelectMonth, "update:value": function(o) {
+    return e.$emit("update:value", e.value);
+  } }, scopedSlots: e._u([{ key: "icon-calendar", fn: function() {
+    return [e.showTimezoneSelect ? t("NcPopover", { attrs: { shown: e.showTimezonePopover, "popover-base-class": "timezone-select__popper" }, on: { "update:shown": function(o) {
+      e.showTimezonePopover = o;
+    } }, scopedSlots: e._u([{ key: "trigger", fn: function() {
+      return [t("button", { staticClass: "datetime-picker-inline-icon", class: { "datetime-picker-inline-icon--highlighted": e.highlightTimezone }, on: { mousedown: function(o) {
+        return o.stopPropagation(), o.preventDefault(), (() => {
+        }).apply(null, arguments);
+      } } }, [t("Web", { attrs: { size: 20 } })], 1)];
+    }, proxy: !0 }], null, !1, 3375037618) }, [t("div", { staticClass: "timezone-popover-wrapper__label" }, [t("strong", [e._v(" " + e._s(e.t("Please select a time zone:")) + " ")])]), t("NcTimezonePicker", { staticClass: "timezone-popover-wrapper__timezone-select", on: { input: function(o) {
+      return e.$emit("update:timezone-id", arguments[0]);
+    } }, model: { value: e.tzVal, callback: function(o) {
+      e.tzVal = o;
+    }, expression: "tzVal" } })], 1) : t("CalendarBlank", { attrs: { size: 20 } })];
+  }, proxy: !0 }, e._l(e.$scopedSlots, function(o, n) {
+    return { key: n, fn: function(i) {
+      return [e._t(n, null, null, i)];
+    } };
+  })], null, !0) }, "DatePicker", e.$attrs, !1), e.$listeners));
+}, D = [], S = /* @__PURE__ */ g(
+  z,
+  P,
+  D,
+  !1,
+  null,
+  "26676d3b",
+  null,
+  null
+);
+const T = S.exports;
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+w(T);
+export {
+  T as default
+};

package/dist/Components/NcDateTimePicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTimePicker.mjs","sources":["../../src/components/NcDateTimePicker/NcDateTimePicker.vue","../../src/components/NcDateTimePicker/index.js"],"sourcesContent":["<!--\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/vue2-datepicker\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\t:timezone-id.sync=\"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=\"formatter\"\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=\"value\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@select-year=\"handleSelectYear\"\n\t\t@select-month=\"handleSelectMonth\"\n\t\t@update:value=\"$emit('update:value', value)\">\n\t\t<template #icon-calendar>\n\t\t\t<NcPopover v-if=\"showTimezoneSelect\"\n\t\t\t\t:shown.sync=\"showTimezonePopover\"\n\t\t\t\tpopover-base-class=\"timezone-select__popper\">\n\t\t\t\t<template #trigger>\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\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 class=\"timezone-popover-wrapper__label\">\n\t\t\t\t\t<strong>\n\t\t\t\t\t\t{{ t('Please select a time zone:') }}\n\t\t\t\t\t</strong>\n\t\t\t\t</div>\n\t\t\t\t<NcTimezonePicker v-model=\"tzVal\"\n\t\t\t\t\tclass=\"timezone-popover-wrapper__timezone-select\"\n\t\t\t\t\t@input=\"$emit('update:timezone-id', arguments[0])\" />\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 $scopedSlots\" #[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'\n\nimport NcTimezonePicker from '../NcTimezonePicker/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport l10n from '../../mixins/l10n.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 'vue2-datepicker'\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 {\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\tmixins: [l10n],\n\tinheritAttrs: false,\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\tvalue: {\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 the .sync modifier.\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:value',\n\t\t'update:timezone-id',\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\t},\n\n\tmethods: {\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</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","/**\n * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @author John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @license AGPL-3.0-or-later\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 */\nimport './index.scss'\nimport NcDateTimePicker from './NcDateTimePicker.vue'\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nScopeComponent(NcDateTimePicker)\n\nexport default NcDateTimePicker\n"],"names":["formatMap","_sfc_main","CalendarBlank","DatePicker","NcPopover","NcTimezonePicker","Web","l10n","getMonthNames","getMonthNamesShort","getDayNames","getDayNamesShort","getDayNamesMin","getFirstDay","t","_a","year","value","date","month","ScopeComponent","NcDateTimePicker"],"mappings":"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"}

package/dist/Components/NcDateTimePickerNative.cjs

@@ -1 +1,199 @@
-var v=require("../assets/index2.css");const p=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs"),y=require("../chunks/ScopeComponent-f6122f5a.cjs");const $=["date","datetime-local","month","time","week"],f={name:"NcDateTimePickerNative",inheritAttrs:!1,props:{value:{type:Date,required:!0},id:{type:String,required:!0},type:{type:String,default:"date",validate:t=>$.includes(t)},label:{type:String,default:"Please choose a date"},min:{type:[Date,Boolean],default:null},max:{type:[Date,Boolean],default:null},hideLabel:{type:Boolean,default:!1},inputClass:{type:[Object,String],default:""}},emits:["input"],computed:{formattedValue(){return this.formatValue(this.value)},formattedMin(){return this.min?this.formatValue(this.min):!1},formattedMax(){return this.max?this.formatValue(this.max):!1},listeners(){return{...this.$listeners,input:t=>{if(isNaN(t.target.valueAsNumber))return this.$emit("input","");if(this.type==="time"){const a=t.target.value;if(this.value===""){const{yyyy:l,MM:u,dd:o}=this.getReadableDate(new Date);return this.$emit("input",new Date(`${l}-${u}-${o}T${a}`))}const{yyyy:i,MM:n,dd:s}=this.getReadableDate(this.value);return this.$emit("input",new Date(`${i}-${n}-${s}T${a}`))}else if(this.type==="month"){const a=(new Date(t.target.value).getMonth()+1).toString().padStart(2,"0");if(this.value===""){const{yyyy:u,dd:o,hh:m,mm:h}=this.getReadableDate(new Date);return this.$emit("input",new Date(`${u}-${a}-${o}T${m}:${h}`))}const{yyyy:i,dd:n,hh:s,mm:l}=this.getReadableDate(this.value);return this.$emit("input",new Date(`${i}-${a}-${n}T${s}:${l}`))}const e=new Date(t.target.valueAsNumber).getTimezoneOffset()*1e3*60,r=t.target.valueAsNumber+e;return this.$emit("input",new Date(r))}}}},methods:{getReadableDate(t){if(t instanceof Date){const e=t.getFullYear().toString().padStart(4,"0"),r=(t.getMonth()+1).toString().padStart(2,"0"),a=t.getDate().toString().padStart(2,"0"),i=t.getHours().toString().padStart(2,"0"),n=t.getMinutes().toString().padStart(2,"0");return{yyyy:e,MM:r,dd:a,hh:i,mm:n}}},formatValue(t){if(t instanceof Date){const{yyyy:e,MM:r,dd:a,hh:i,mm:n}=this.getReadableDate(t);if(this.type==="datetime-local")return`${e}-${r}-${a}T${i}:${n}`;if(this.type==="date")return`${e}-${r}-${a}`;if(this.type==="month")return`${e}-${r}`;if(this.type==="time")return`${i}:${n}`;if(this.type==="week"){const s=new Date(e,0,1),l=Math.floor((t-s)/(24*60*60*1e3)),u=Math.ceil(l/7);return`${e}-W${u}`}}else return""}}};var c=function(){var t=this,e=t._self._c;return e("div",{staticClass:"native-datetime-picker"},[e("label",{class:{"hidden-visually":t.hideLabel},attrs:{for:t.id}},[t._v(t._s(t.label))]),e("input",t._g(t._b({staticClass:"native-datetime-picker--input",class:t.inputClass,attrs:{id:t.id,type:t.type,min:t.formattedMin,max:t.formattedMax},domProps:{value:t.formattedValue}},"input",t.$attrs,!1),t.listeners))])},g=[],D=p.normalizeComponent(f,c,g,!1,null,"a99b9317",null,null);const d=D.exports;y.ScopeComponent(d),module.exports=d;
+var D = require("../assets/index-2d4de2fc.css");
+const p = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), h = require("../chunks/ScopeComponent-1c75ec38.cjs");
+const f = ["date", "datetime-local", "month", "time", "week"], y = {
+  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.
+     */
+    value: {
+      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) => f.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: [
+    "input"
+  ],
+  computed: {
+    formattedValue() {
+      return this.formatValue(this.value);
+    },
+    formattedMin() {
+      return this.min ? this.formatValue(this.min) : !1;
+    },
+    formattedMax() {
+      return this.max ? this.formatValue(this.max) : !1;
+    },
+    listeners() {
+      return {
+        ...this.$listeners,
+        /**
+         * Handle the input event
+         *
+         * @param {InputEvent} $event input event payload
+         * @return {Date|string} new chosen Date() or an empty string
+         */
+        input: (e) => {
+          if (isNaN(e.target.valueAsNumber))
+            return this.$emit("input", null);
+          if (this.type === "time") {
+            const i = e.target.value;
+            if (this.value === "") {
+              const { yyyy: l, MM: o, dd: u } = this.getReadableDate(/* @__PURE__ */ new Date());
+              return this.$emit("input", /* @__PURE__ */ new Date(`${l}-${o}-${u}T${i}`));
+            }
+            const { yyyy: n, MM: s, dd: r } = this.getReadableDate(this.value);
+            return this.$emit("input", /* @__PURE__ */ new Date(`${n}-${s}-${r}T${i}`));
+          } else if (this.type === "month") {
+            const i = (new Date(e.target.value).getMonth() + 1).toString().padStart(2, "0");
+            if (this.value === "") {
+              const { yyyy: o, dd: u, hh: m, mm: c } = this.getReadableDate(/* @__PURE__ */ new Date());
+              return this.$emit("input", /* @__PURE__ */ new Date(`${o}-${i}-${u}T${m}:${c}`));
+            }
+            const { yyyy: n, dd: s, hh: r, mm: l } = this.getReadableDate(this.value);
+            return this.$emit("input", /* @__PURE__ */ new Date(`${n}-${i}-${s}T${r}:${l}`));
+          }
+          const t = new Date(e.target.valueAsNumber).getTimezoneOffset() * 1e3 * 60, a = e.target.valueAsNumber + t;
+          return this.$emit("input", new Date(a));
+        }
+      };
+    }
+  },
+  methods: {
+    /**
+     * 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"), a = (e.getMonth() + 1).toString().padStart(2, "0"), i = e.getDate().toString().padStart(2, "0"), n = e.getHours().toString().padStart(2, "0"), s = e.getMinutes().toString().padStart(2, "0");
+        return { yyyy: t, MM: a, dd: i, hh: n, mm: s };
+      }
+    },
+    /**
+     * 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: a, dd: i, hh: n, mm: s } = this.getReadableDate(e);
+        if (this.type === "datetime-local")
+          return `${t}-${a}-${i}T${n}:${s}`;
+        if (this.type === "date")
+          return `${t}-${a}-${i}`;
+        if (this.type === "month")
+          return `${t}-${a}`;
+        if (this.type === "time")
+          return `${n}:${s}`;
+        if (this.type === "week") {
+          const r = new Date(t, 0, 1), l = Math.floor((e - r) / (24 * 60 * 60 * 1e3)), o = Math.ceil(l / 7);
+          return `${t}-W${o}`;
+        }
+      } else
+        return "";
+    }
+  }
+};
+var $ = function() {
+  var t = this, a = t._self._c;
+  return a("div", { staticClass: "native-datetime-picker" }, [a("label", { class: { "hidden-visually": t.hideLabel }, attrs: { for: t.id } }, [t._v(t._s(t.label))]), a("input", t._g(t._b({ staticClass: "native-datetime-picker--input", class: t.inputClass, attrs: { id: t.id, type: t.type, min: t.formattedMin, max: t.formattedMax }, domProps: { value: t.formattedValue } }, "input", t.$attrs, !1), t.listeners))]);
+}, g = [], _ = /* @__PURE__ */ p.normalizeComponent(
+  y,
+  $,
+  g,
+  !1,
+  null,
+  "22982259",
+  null,
+  null
+);
+const d = _.exports;
+/**
+ * @copyright Copyright (c) 2022 Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>
+ *
+ * @author Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+h.ScopeComponent(d);
+module.exports = d;

package/dist/Components/NcDateTimePickerNative.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDateTimePickerNative.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcDateTimePickerNative.cjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue","../../src/components/NcDateTimePickerNative/index.js"],"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</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\tv-on=\"listeners\">\n\t</div>\n</template>\n\n<script>\n\nconst inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']\n\nexport default {\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\tvalue: {\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'input',\n\t],\n\n\tcomputed: {\n\t\tformattedValue() {\n\t\t\treturn this.formatValue(this.value)\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\tlisteners() {\n\t\t\treturn {\n\t\t\t\t...this.$listeners,\n\t\t\t\t/**\n\t\t\t\t * Handle the input event\n\t\t\t\t *\n\t\t\t\t * @param {InputEvent} $event input event payload\n\t\t\t\t * @return {Date|string} new chosen Date() or an empty string\n\t\t\t\t */\n\t\t\t\tinput: ($event) => {\n\t\t\t\t\tif (isNaN($event.target.valueAsNumber)) {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * @return {string} empty string\n\t\t\t\t\t\t */\n\t\t\t\t\t\treturn this.$emit('input', null)\n\t\t\t\t\t}\n\t\t\t\t\tif (this.type === 'time') {\n\t\t\t\t\t\tconst time = $event.target.value\n\t\t\t\t\t\tif (this.value === '') {\n\t\t\t\t\t\t\t// this case is because of Chrome bug\n\t\t\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(new Date())\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t\t *\n\t\t\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\treturn this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(this.value)\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t\t */\n\t\t\t\t\t\treturn this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t\t} else if (this.type === 'month') {\n\t\t\t\t\t\tconst MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\t\t\tif (this.value === '') {\n\t\t\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(new Date())\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t\t *\n\t\t\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\treturn this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(this.value)\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t\t */\n\t\t\t\t\t\treturn this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t\t}\n\t\t\t\t\tconst timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1000 * 60\n\t\t\t\t\tconst inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds\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('input', new Date(inputDateWithTimezone))\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\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</style>\n","/**\n * @copyright Copyright (c) 2022 Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n *\n * @author Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n *\n * @license AGPL-3.0-or-later\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\nimport NcDateTimePickerNative from './NcDateTimePickerNative.vue'\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nScopeComponent(NcDateTimePickerNative)\n\nexport default NcDateTimePickerNative\n"],"names":["inputDateTypes","_sfc_main","name","$event","time","yyyy","MM","dd","hh","mm","timezoneOffsetSeconds","inputDateWithTimezone","value","startDate","daysSinceBeginningOfYear","weekNumber","ScopeComponent"],"mappings":"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"}