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

package/dist/Components/NcDateTime.cjs

@@ -0,0 +1,125 @@
+"use strict";
+const l = require("@nextcloud/l10n"), s = require("../chunks/l10n-903083c4.cjs"), m = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), d = {
+  long: s.t("a few seconds ago"),
+  short: s.t("seconds ago"),
+  // FOR TRANSLATORS: Shorter version of 'a few seconds ago'
+  narrow: s.t("sec. ago")
+  // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
+}, u = {
+  name: "NcDateTime",
+  props: {
+    /**
+     * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object
+     */
+    timestamp: {
+      type: [Date, Number],
+      required: !0
+    },
+    /**
+     * The format used for displaying, or if relative time is used the format used for the title (optional)
+     *
+     * @type {Intl.DateTimeFormatOptions}
+     */
+    format: {
+      type: Object,
+      default: () => ({ timeStyle: "medium", dateStyle: "short" })
+    },
+    /**
+     * Wether to display the timestamp as time from now (optional)
+     *
+     * - `false`: Disable relative time
+     * - `'long'`: Long text, like *2 seconds ago* (default)
+     * - `'short'`: Short text, like *2 sec. ago*
+     * - `'narrow'`: Even shorter text (same as `'short'` on some languages)
+     */
+    relativeTime: {
+      type: [Boolean, String],
+      default: "long",
+      validator: (t) => t === !1 || ["long", "short", "narrow"].includes(t)
+    },
+    /**
+     * Ignore seconds when displaying the relative time and just show `a few seconds ago`
+     */
+    ignoreSeconds: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data() {
+    return {
+      /** Current time in ms */
+      currentTime: Date.now(),
+      /** ID of the current time interval */
+      intervalId: void 0
+    };
+  },
+  computed: {
+    /** ECMA Date object of the timestamp */
+    dateObject() {
+      return new Date(this.timestamp);
+    },
+    /** Time string formatted for main text */
+    formattedTime() {
+      if (this.relativeTime !== !1) {
+        const t = new Intl.RelativeTimeFormat(l.getCanonicalLocale(), { numeric: "auto", style: this.relativeTime }), r = (this.dateObject - new Date(this.currentTime)) / 1e3;
+        if (Math.abs(r) <= 90)
+          return this.ignoreSeconds ? d[this.relativeTime] : t.format(Math.round(r), "second");
+        const n = r / 60;
+        if (Math.abs(n) <= 90)
+          return t.format(Math.round(n), "minute");
+        const i = n / 60;
+        if (Math.abs(i) <= 72)
+          return t.format(Math.round(i), "hour");
+        const a = i / 24;
+        if (Math.abs(a) <= 6)
+          return t.format(Math.round(a), "day");
+        const o = a / 7;
+        return Math.abs(o) <= 52 ? t.format(Math.round(o), "week") : t.format(Math.round(a / 365), "year");
+      }
+      return this.formattedFullTime;
+    },
+    formattedFullTime() {
+      return new Intl.DateTimeFormat(l.getCanonicalLocale(), this.format).format(this.dateObject);
+    }
+  },
+  watch: {
+    /**
+     * Set or clear interval if relative time is dis/enabled
+     *
+     * @param {boolean} newValue The new value of the relativeTime property
+     * @param {boolean} _oldValue The old value of the relativeTime property
+     */
+    relativeTime(t, e) {
+      window.clearInterval(this.intervalId), this.intervalId = void 0, t && (this.intervalId = window.setInterval(this.setCurrentTime, 1e3));
+    }
+  },
+  mounted() {
+    this.relativeTime !== !1 && (this.intervalId = window.setInterval(this.setCurrentTime, 1e3));
+  },
+  destroyed() {
+    window.clearInterval(this.intervalId);
+  },
+  methods: {
+    /**
+     * Set `currentTime` to the current timestamp, required as Date.now() is not reactive.
+     */
+    setCurrentTime() {
+      this.currentTime = Date.now();
+    }
+  }
+};
+var c = function() {
+  var e = this, r = e._self._c;
+  return r("span", { staticClass: "nc-datetime", attrs: { "data-timestamp": e.timestamp, title: e.formattedFullTime } }, [e._v(e._s(e.formattedTime))]);
+}, f = [], h = /* @__PURE__ */ m.normalizeComponent(
+  u,
+  c,
+  f,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const v = h.exports;
+module.exports = v;

package/dist/Components/{NcDatetime.mjs.map → NcDateTime.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDatetime.mjs","sources":["../../src/components/NcDatetime/NcDatetime.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\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\n<docs>\n\n### General description\n\nThis components purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples *6 seconds ago*.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDatetime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDatetime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDatetime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDatetime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDatetime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/** For allowed formats see the Intl.DateTimeFormat options */\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\">{{ formattedTime }}</span>\n</template>\n\n<script>\nimport { getCanonicalLocale } from '@nextcloud/l10n'\nimport { t } from '../../l10n.js'\n\nconst FEW_SECONDS_AGO = {\n\tlong: t('a few seconds ago'),\n\tshort: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'\n\tnarrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'\n}\n\nexport default {\n\tname: 'NcDatetime',\n\n\tprops: {\n\t\t/**\n\t\t * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t\t */\n\t\ttimestamp: {\n\t\t\ttype: [Date, Number],\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * The format used for displaying, or if relative time is used the format used for the title (optional)\n\t\t *\n\t\t * @type {Intl.DateTimeFormatOptions}\n\t\t */\n\t\tformat: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\t\t},\n\t\t/**\n\t\t * Wether to display the timestamp as time from now (optional)\n\t\t *\n\t\t * - `false`: Disable relative time\n\t\t * - `'long'`: Long text, like *2 seconds ago* (default)\n\t\t * - `'short'`: Short text, like *2 sec. ago*\n\t\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t\t */\n\t\trelativeTime: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'long',\n\t\t\tvalidator: (v) => v === false || ['long', 'short', 'narrow'].includes(v),\n\t\t},\n\t\t/**\n\t\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t\t */\n\t\tignoreSeconds: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\t/** Current time in ms */\n\t\t\tcurrentTime: Date.now(),\n\t\t\t/** ID of the current time interval */\n\t\t\tintervalId: undefined,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** ECMA Date object of the timestamp */\n\t\tdateObject() {\n\t\t\treturn new Date(this.timestamp)\n\t\t},\n\t\t/** Time string formatted for main text */\n\t\tformattedTime() {\n\t\t\tif (this.relativeTime !== false) {\n\t\t\t\tconst formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: this.relativeTime })\n\n\t\t\t\tconst diff = this.dateObject - new Date(this.currentTime)\n\t\t\t\tconst seconds = diff / 1000\n\t\t\t\tif (Math.abs(seconds) <= 90) {\n\t\t\t\t\tif (this.ignoreSeconds) {\n\t\t\t\t\t\treturn FEW_SECONDS_AGO[this.relativeTime]\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tconst minutes = seconds / 60\n\t\t\t\tif (Math.abs(minutes) <= 90) {\n\t\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t\t}\n\t\t\t\tconst hours = minutes / 60\n\t\t\t\tif (Math.abs(hours) <= 72) {\n\t\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t\t}\n\t\t\t\tconst days = hours / 24\n\t\t\t\tif (Math.abs(days) <= 6) {\n\t\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t\t}\n\t\t\t\tconst weeks = days / 7\n\t\t\t\tif (Math.abs(weeks) <= 52) {\n\t\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t\t}\n\t\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t\t}\n\t\t\treturn this.formattedFullTime\n\t\t},\n\t\tformattedFullTime() {\n\t\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), this.format)\n\t\t\treturn formatter.format(this.dateObject)\n\t\t},\n\t},\n\n\twatch: {\n\t\t/**\n\t\t * Set or clear interval if relative time is dis/enabled\n\t\t *\n\t\t * @param {boolean} newValue The new value of the relativeTime property\n\t\t * @param {boolean} _oldValue The old value of the relativeTime property\n\t\t */\n\t\trelativeTime(newValue, _oldValue) {\n\t\t\twindow.clearInterval(this.intervalId)\n\t\t\tthis.intervalId = undefined\n\t\t\tif (newValue) {\n\t\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Start the interval for setting the current time if relative time is enabled\n\t\tif (this.relativeTime !== false) {\n\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t}\n\t},\n\n\tdestroyed() {\n\t\t// ensure interval is cleared\n\t\twindow.clearInterval(this.intervalId)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Set `currentTime` to the current timestamp, required as Date.now() is not reactive.\n\t\t */\n\t\tsetCurrentTime() {\n\t\t\tthis.currentTime = Date.now()\n\t\t},\n\t},\n}\n</script>\n"],"names":["FEW_SECONDS_AGO","t","_sfc_main","v","formatter","getCanonicalLocale","seconds","minutes","hours","days","weeks","newValue","_oldValue"],"mappings":";;;AAsHA,MAAAA,IAAA,EACA,MAAAC,EAAA,mBAAA,GACA,OAAAA,EAAA,aAAA,GACA,QAAAA,EAAA,UAAA,EACA,GAEAC,IAAA,EACA,MAAA,cAEA,OAAA,EAIA,WAAA,EACA,MAAA,CAAA,MAAA,MAAA,GACA,UAAA,GACA,GAMA,QAAA,EACA,MAAA,QACA,SAAA,OAAA,EAAA,WAAA,UAAA,WAAA,QAAA,GACA,GASA,cAAA,EACA,MAAA,CAAA,SAAA,MAAA,GACA,SAAA,QACA,WAAAC,OAAAA,MAAA,MAAA,CAAA,QAAA,SAAA,QAAA,EAAA,SAAAA,CAAA,EACA,GAIA,eAAA,EACA,MAAA,SACA,SAAA,GACA,EACA,GAEA,OAAA;AACA,SAAA,EAEA,aAAA,KAAA,IAAA,GAEA,YAAA,OACA;AACA,GAEA,UAAA,EAEA,aAAA;AACA,SAAA,IAAA,KAAA,KAAA,SAAA;AACA,GAEA,gBAAA;AACA,MAAA,KAAA,iBAAA,IAAA;AACA,UAAAC,IAAA,IAAA,KAAA,mBAAAC,EAAA,GAAA,EAAA,SAAA,QAAA,OAAA,KAAA,aAAA,CAAA,GAGAC,KADA,KAAA,aAAA,IAAA,KAAA,KAAA,WAAA,KACA;AACA,QAAA,KAAA,IAAAA,CAAA,KAAA;AACA,aAAA,KAAA,gBACAN,EAAA,KAAA,YAAA,IAEAI,EAAA,OAAA,KAAA,MAAAE,CAAA,GAAA,QAAA;AAGA,UAAAC,IAAAD,IAAA;AACA,QAAA,KAAA,IAAAC,CAAA,KAAA;AACA,aAAAH,EAAA,OAAA,KAAA,MAAAG,CAAA,GAAA,QAAA;AAEA,UAAAC,IAAAD,IAAA;AACA,QAAA,KAAA,IAAAC,CAAA,KAAA;AACA,aAAAJ,EAAA,OAAA,KAAA,MAAAI,CAAA,GAAA,MAAA;AAEA,UAAAC,IAAAD,IAAA;AACA,QAAA,KAAA,IAAAC,CAAA,KAAA;AACA,aAAAL,EAAA,OAAA,KAAA,MAAAK,CAAA,GAAA,KAAA;AAEA,UAAAC,IAAAD,IAAA;AACA,WAAA,KAAA,IAAAC,CAAA,KAAA,KACAN,EAAA,OAAA,KAAA,MAAAM,CAAA,GAAA,MAAA,IAEAN,EAAA,OAAA,KAAA,MAAAK,IAAA,GAAA,GAAA,MAAA;AAAA,EAAA;AAEA,SAAA,KAAA;AACA,GACA,oBAAA;AAEA,SADA,IAAA,KAAA,eAAAJ,EAAA,GAAA,KAAA,MAAA,EACA,OAAA,KAAA,UAAA;AACA,EACA,GAEA,OAAA,EAOA,aAAAM,GAAAC,GAAA;AACA,SAAA,cAAA,KAAA,UAAA,GACA,KAAA,aAAA,QACAD,MACA,KAAA,aAAA,OAAA,YAAA,KAAA,gBAAA,GAAA;AAEA,EACA,GAEA,UAAA;AAEA,OAAA,iBAAA,OACA,KAAA,aAAA,OAAA,YAAA,KAAA,gBAAA,GAAA;AAEA,GAEA,YAAA;AAEA,SAAA,cAAA,KAAA,UAAA;AACA,GAEA,SAAA,EAIA,iBAAA;AACA,OAAA,cAAA,KAAA,IAAA;AACA,EACA,EACA;;;;;;"}
+{"version":3,"file":"NcDateTime.cjs","sources":["../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\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\n<docs>\n\n### General description\n\nThis components purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples *6 seconds ago*.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/** For allowed formats see the Intl.DateTimeFormat options */\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\">{{ formattedTime }}</span>\n</template>\n\n<script>\nimport { getCanonicalLocale } from '@nextcloud/l10n'\nimport { t } from '../../l10n.js'\n\nconst FEW_SECONDS_AGO = {\n\tlong: t('a few seconds ago'),\n\tshort: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'\n\tnarrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'\n}\n\nexport default {\n\tname: 'NcDateTime',\n\n\tprops: {\n\t\t/**\n\t\t * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t\t */\n\t\ttimestamp: {\n\t\t\ttype: [Date, Number],\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * The format used for displaying, or if relative time is used the format used for the title (optional)\n\t\t *\n\t\t * @type {Intl.DateTimeFormatOptions}\n\t\t */\n\t\tformat: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\t\t},\n\t\t/**\n\t\t * Wether to display the timestamp as time from now (optional)\n\t\t *\n\t\t * - `false`: Disable relative time\n\t\t * - `'long'`: Long text, like *2 seconds ago* (default)\n\t\t * - `'short'`: Short text, like *2 sec. ago*\n\t\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t\t */\n\t\trelativeTime: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'long',\n\t\t\tvalidator: (v) => v === false || ['long', 'short', 'narrow'].includes(v),\n\t\t},\n\t\t/**\n\t\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t\t */\n\t\tignoreSeconds: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\t/** Current time in ms */\n\t\t\tcurrentTime: Date.now(),\n\t\t\t/** ID of the current time interval */\n\t\t\tintervalId: undefined,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** ECMA Date object of the timestamp */\n\t\tdateObject() {\n\t\t\treturn new Date(this.timestamp)\n\t\t},\n\t\t/** Time string formatted for main text */\n\t\tformattedTime() {\n\t\t\tif (this.relativeTime !== false) {\n\t\t\t\tconst formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: this.relativeTime })\n\n\t\t\t\tconst diff = this.dateObject - new Date(this.currentTime)\n\t\t\t\tconst seconds = diff / 1000\n\t\t\t\tif (Math.abs(seconds) <= 90) {\n\t\t\t\t\tif (this.ignoreSeconds) {\n\t\t\t\t\t\treturn FEW_SECONDS_AGO[this.relativeTime]\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tconst minutes = seconds / 60\n\t\t\t\tif (Math.abs(minutes) <= 90) {\n\t\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t\t}\n\t\t\t\tconst hours = minutes / 60\n\t\t\t\tif (Math.abs(hours) <= 72) {\n\t\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t\t}\n\t\t\t\tconst days = hours / 24\n\t\t\t\tif (Math.abs(days) <= 6) {\n\t\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t\t}\n\t\t\t\tconst weeks = days / 7\n\t\t\t\tif (Math.abs(weeks) <= 52) {\n\t\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t\t}\n\t\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t\t}\n\t\t\treturn this.formattedFullTime\n\t\t},\n\t\tformattedFullTime() {\n\t\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), this.format)\n\t\t\treturn formatter.format(this.dateObject)\n\t\t},\n\t},\n\n\twatch: {\n\t\t/**\n\t\t * Set or clear interval if relative time is dis/enabled\n\t\t *\n\t\t * @param {boolean} newValue The new value of the relativeTime property\n\t\t * @param {boolean} _oldValue The old value of the relativeTime property\n\t\t */\n\t\trelativeTime(newValue, _oldValue) {\n\t\t\twindow.clearInterval(this.intervalId)\n\t\t\tthis.intervalId = undefined\n\t\t\tif (newValue) {\n\t\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Start the interval for setting the current time if relative time is enabled\n\t\tif (this.relativeTime !== false) {\n\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t}\n\t},\n\n\tdestroyed() {\n\t\t// ensure interval is cleared\n\t\twindow.clearInterval(this.intervalId)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Set `currentTime` to the current timestamp, required as Date.now() is not reactive.\n\t\t */\n\t\tsetCurrentTime() {\n\t\t\tthis.currentTime = Date.now()\n\t\t},\n\t},\n}\n</script>\n"],"names":["FEW_SECONDS_AGO","t","_sfc_main","v","formatter","getCanonicalLocale","seconds","minutes","hours","days","weeks","newValue","_oldValue"],"mappings":"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"}

package/dist/Components/NcDateTime.mjs

@@ -0,0 +1,129 @@
+import { getCanonicalLocale as m } from "@nextcloud/l10n";
+import { t as o } from "../chunks/l10n-27a75c40.mjs";
+import { n as l } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const d = {
+  long: o("a few seconds ago"),
+  short: o("seconds ago"),
+  // FOR TRANSLATORS: Shorter version of 'a few seconds ago'
+  narrow: o("sec. ago")
+  // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
+}, u = {
+  name: "NcDateTime",
+  props: {
+    /**
+     * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object
+     */
+    timestamp: {
+      type: [Date, Number],
+      required: !0
+    },
+    /**
+     * The format used for displaying, or if relative time is used the format used for the title (optional)
+     *
+     * @type {Intl.DateTimeFormatOptions}
+     */
+    format: {
+      type: Object,
+      default: () => ({ timeStyle: "medium", dateStyle: "short" })
+    },
+    /**
+     * Wether to display the timestamp as time from now (optional)
+     *
+     * - `false`: Disable relative time
+     * - `'long'`: Long text, like *2 seconds ago* (default)
+     * - `'short'`: Short text, like *2 sec. ago*
+     * - `'narrow'`: Even shorter text (same as `'short'` on some languages)
+     */
+    relativeTime: {
+      type: [Boolean, String],
+      default: "long",
+      validator: (t) => t === !1 || ["long", "short", "narrow"].includes(t)
+    },
+    /**
+     * Ignore seconds when displaying the relative time and just show `a few seconds ago`
+     */
+    ignoreSeconds: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data() {
+    return {
+      /** Current time in ms */
+      currentTime: Date.now(),
+      /** ID of the current time interval */
+      intervalId: void 0
+    };
+  },
+  computed: {
+    /** ECMA Date object of the timestamp */
+    dateObject() {
+      return new Date(this.timestamp);
+    },
+    /** Time string formatted for main text */
+    formattedTime() {
+      if (this.relativeTime !== !1) {
+        const t = new Intl.RelativeTimeFormat(m(), { numeric: "auto", style: this.relativeTime }), r = (this.dateObject - new Date(this.currentTime)) / 1e3;
+        if (Math.abs(r) <= 90)
+          return this.ignoreSeconds ? d[this.relativeTime] : t.format(Math.round(r), "second");
+        const n = r / 60;
+        if (Math.abs(n) <= 90)
+          return t.format(Math.round(n), "minute");
+        const i = n / 60;
+        if (Math.abs(i) <= 72)
+          return t.format(Math.round(i), "hour");
+        const a = i / 24;
+        if (Math.abs(a) <= 6)
+          return t.format(Math.round(a), "day");
+        const s = a / 7;
+        return Math.abs(s) <= 52 ? t.format(Math.round(s), "week") : t.format(Math.round(a / 365), "year");
+      }
+      return this.formattedFullTime;
+    },
+    formattedFullTime() {
+      return new Intl.DateTimeFormat(m(), this.format).format(this.dateObject);
+    }
+  },
+  watch: {
+    /**
+     * Set or clear interval if relative time is dis/enabled
+     *
+     * @param {boolean} newValue The new value of the relativeTime property
+     * @param {boolean} _oldValue The old value of the relativeTime property
+     */
+    relativeTime(t, e) {
+      window.clearInterval(this.intervalId), this.intervalId = void 0, t && (this.intervalId = window.setInterval(this.setCurrentTime, 1e3));
+    }
+  },
+  mounted() {
+    this.relativeTime !== !1 && (this.intervalId = window.setInterval(this.setCurrentTime, 1e3));
+  },
+  destroyed() {
+    window.clearInterval(this.intervalId);
+  },
+  methods: {
+    /**
+     * Set `currentTime` to the current timestamp, required as Date.now() is not reactive.
+     */
+    setCurrentTime() {
+      this.currentTime = Date.now();
+    }
+  }
+};
+var f = function() {
+  var e = this, r = e._self._c;
+  return r("span", { staticClass: "nc-datetime", attrs: { "data-timestamp": e.timestamp, title: e.formattedFullTime } }, [e._v(e._s(e.formattedTime))]);
+}, c = [], h = /* @__PURE__ */ l(
+  u,
+  f,
+  c,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const p = h.exports;
+export {
+  p as default
+};

package/dist/Components/{NcDatetime.cjs.map → NcDateTime.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDatetime.cjs","sources":["../../src/components/NcDatetime/NcDatetime.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\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\n<docs>\n\n### General description\n\nThis components purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples *6 seconds ago*.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDatetime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDatetime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDatetime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDatetime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDatetime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/** For allowed formats see the Intl.DateTimeFormat options */\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\">{{ formattedTime }}</span>\n</template>\n\n<script>\nimport { getCanonicalLocale } from '@nextcloud/l10n'\nimport { t } from '../../l10n.js'\n\nconst FEW_SECONDS_AGO = {\n\tlong: t('a few seconds ago'),\n\tshort: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'\n\tnarrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'\n}\n\nexport default {\n\tname: 'NcDatetime',\n\n\tprops: {\n\t\t/**\n\t\t * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t\t */\n\t\ttimestamp: {\n\t\t\ttype: [Date, Number],\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * The format used for displaying, or if relative time is used the format used for the title (optional)\n\t\t *\n\t\t * @type {Intl.DateTimeFormatOptions}\n\t\t */\n\t\tformat: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\t\t},\n\t\t/**\n\t\t * Wether to display the timestamp as time from now (optional)\n\t\t *\n\t\t * - `false`: Disable relative time\n\t\t * - `'long'`: Long text, like *2 seconds ago* (default)\n\t\t * - `'short'`: Short text, like *2 sec. ago*\n\t\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t\t */\n\t\trelativeTime: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'long',\n\t\t\tvalidator: (v) => v === false || ['long', 'short', 'narrow'].includes(v),\n\t\t},\n\t\t/**\n\t\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t\t */\n\t\tignoreSeconds: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\t/** Current time in ms */\n\t\t\tcurrentTime: Date.now(),\n\t\t\t/** ID of the current time interval */\n\t\t\tintervalId: undefined,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** ECMA Date object of the timestamp */\n\t\tdateObject() {\n\t\t\treturn new Date(this.timestamp)\n\t\t},\n\t\t/** Time string formatted for main text */\n\t\tformattedTime() {\n\t\t\tif (this.relativeTime !== false) {\n\t\t\t\tconst formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: this.relativeTime })\n\n\t\t\t\tconst diff = this.dateObject - new Date(this.currentTime)\n\t\t\t\tconst seconds = diff / 1000\n\t\t\t\tif (Math.abs(seconds) <= 90) {\n\t\t\t\t\tif (this.ignoreSeconds) {\n\t\t\t\t\t\treturn FEW_SECONDS_AGO[this.relativeTime]\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tconst minutes = seconds / 60\n\t\t\t\tif (Math.abs(minutes) <= 90) {\n\t\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t\t}\n\t\t\t\tconst hours = minutes / 60\n\t\t\t\tif (Math.abs(hours) <= 72) {\n\t\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t\t}\n\t\t\t\tconst days = hours / 24\n\t\t\t\tif (Math.abs(days) <= 6) {\n\t\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t\t}\n\t\t\t\tconst weeks = days / 7\n\t\t\t\tif (Math.abs(weeks) <= 52) {\n\t\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t\t}\n\t\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t\t}\n\t\t\treturn this.formattedFullTime\n\t\t},\n\t\tformattedFullTime() {\n\t\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), this.format)\n\t\t\treturn formatter.format(this.dateObject)\n\t\t},\n\t},\n\n\twatch: {\n\t\t/**\n\t\t * Set or clear interval if relative time is dis/enabled\n\t\t *\n\t\t * @param {boolean} newValue The new value of the relativeTime property\n\t\t * @param {boolean} _oldValue The old value of the relativeTime property\n\t\t */\n\t\trelativeTime(newValue, _oldValue) {\n\t\t\twindow.clearInterval(this.intervalId)\n\t\t\tthis.intervalId = undefined\n\t\t\tif (newValue) {\n\t\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Start the interval for setting the current time if relative time is enabled\n\t\tif (this.relativeTime !== false) {\n\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t}\n\t},\n\n\tdestroyed() {\n\t\t// ensure interval is cleared\n\t\twindow.clearInterval(this.intervalId)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Set `currentTime` to the current timestamp, required as Date.now() is not reactive.\n\t\t */\n\t\tsetCurrentTime() {\n\t\t\tthis.currentTime = Date.now()\n\t\t},\n\t},\n}\n</script>\n"],"names":["FEW_SECONDS_AGO","t","_sfc_main","v","formatter","getCanonicalLocale","seconds","minutes","hours","days","weeks","newValue","_oldValue"],"mappings":"qJAsHAA,EAAA,CACA,KAAAC,EAAA,EAAA,mBAAA,EACA,MAAAA,EAAA,EAAA,aAAA,EACA,OAAAA,EAAA,EAAA,UAAA,CACA,EAEAC,EAAA,CACA,KAAA,aAEA,MAAA,CAIA,UAAA,CACA,KAAA,CAAA,KAAA,MAAA,EACA,SAAA,EACA,EAMA,OAAA,CACA,KAAA,OACA,QAAA,KAAA,CAAA,UAAA,SAAA,UAAA,OAAA,EACA,EASA,aAAA,CACA,KAAA,CAAA,QAAA,MAAA,EACA,QAAA,OACA,UAAAC,GAAAA,IAAA,IAAA,CAAA,OAAA,QAAA,QAAA,EAAA,SAAAA,CAAA,CACA,EAIA,cAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CACA,MAAA,CAEA,YAAA,KAAA,IAAA,EAEA,WAAA,MACA,CACA,EAEA,SAAA,CAEA,YAAA,CACA,OAAA,IAAA,KAAA,KAAA,SAAA,CACA,EAEA,eAAA,CACA,GAAA,KAAA,eAAA,GAAA,CACA,MAAAC,EAAA,IAAA,KAAA,mBAAAC,EAAAA,mBAAA,EAAA,CAAA,QAAA,OAAA,MAAA,KAAA,YAAA,CAAA,EAGAC,GADA,KAAA,WAAA,IAAA,KAAA,KAAA,WAAA,GACA,IACA,GAAA,KAAA,IAAAA,CAAA,GAAA,GACA,OAAA,KAAA,cACAN,EAAA,KAAA,YAAA,EAEAI,EAAA,OAAA,KAAA,MAAAE,CAAA,EAAA,QAAA,EAGA,MAAAC,EAAAD,EAAA,GACA,GAAA,KAAA,IAAAC,CAAA,GAAA,GACA,OAAAH,EAAA,OAAA,KAAA,MAAAG,CAAA,EAAA,QAAA,EAEA,MAAAC,EAAAD,EAAA,GACA,GAAA,KAAA,IAAAC,CAAA,GAAA,GACA,OAAAJ,EAAA,OAAA,KAAA,MAAAI,CAAA,EAAA,MAAA,EAEA,MAAAC,EAAAD,EAAA,GACA,GAAA,KAAA,IAAAC,CAAA,GAAA,EACA,OAAAL,EAAA,OAAA,KAAA,MAAAK,CAAA,EAAA,KAAA,EAEA,MAAAC,EAAAD,EAAA,EACA,OAAA,KAAA,IAAAC,CAAA,GAAA,GACAN,EAAA,OAAA,KAAA,MAAAM,CAAA,EAAA,MAAA,EAEAN,EAAA,OAAA,KAAA,MAAAK,EAAA,GAAA,EAAA,MAAA,CAAA,CAEA,OAAA,KAAA,iBACA,EACA,mBAAA,CAEA,OADA,IAAA,KAAA,eAAAJ,EAAAA,mBAAA,EAAA,KAAA,MAAA,EACA,OAAA,KAAA,UAAA,CACA,CACA,EAEA,MAAA,CAOA,aAAAM,EAAAC,EAAA,CACA,OAAA,cAAA,KAAA,UAAA,EACA,KAAA,WAAA,OACAD,IACA,KAAA,WAAA,OAAA,YAAA,KAAA,eAAA,GAAA,EAEA,CACA,EAEA,SAAA,CAEA,KAAA,eAAA,KACA,KAAA,WAAA,OAAA,YAAA,KAAA,eAAA,GAAA,EAEA,EAEA,WAAA,CAEA,OAAA,cAAA,KAAA,UAAA,CACA,EAEA,QAAA,CAIA,gBAAA,CACA,KAAA,YAAA,KAAA,IAAA,CACA,CACA,CACA"}
+{"version":3,"file":"NcDateTime.mjs","sources":["../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\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\n<docs>\n\n### General description\n\nThis components purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples *6 seconds ago*.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/** For allowed formats see the Intl.DateTimeFormat options */\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\">{{ formattedTime }}</span>\n</template>\n\n<script>\nimport { getCanonicalLocale } from '@nextcloud/l10n'\nimport { t } from '../../l10n.js'\n\nconst FEW_SECONDS_AGO = {\n\tlong: t('a few seconds ago'),\n\tshort: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'\n\tnarrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'\n}\n\nexport default {\n\tname: 'NcDateTime',\n\n\tprops: {\n\t\t/**\n\t\t * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t\t */\n\t\ttimestamp: {\n\t\t\ttype: [Date, Number],\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * The format used for displaying, or if relative time is used the format used for the title (optional)\n\t\t *\n\t\t * @type {Intl.DateTimeFormatOptions}\n\t\t */\n\t\tformat: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\t\t},\n\t\t/**\n\t\t * Wether to display the timestamp as time from now (optional)\n\t\t *\n\t\t * - `false`: Disable relative time\n\t\t * - `'long'`: Long text, like *2 seconds ago* (default)\n\t\t * - `'short'`: Short text, like *2 sec. ago*\n\t\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t\t */\n\t\trelativeTime: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'long',\n\t\t\tvalidator: (v) => v === false || ['long', 'short', 'narrow'].includes(v),\n\t\t},\n\t\t/**\n\t\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t\t */\n\t\tignoreSeconds: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\t/** Current time in ms */\n\t\t\tcurrentTime: Date.now(),\n\t\t\t/** ID of the current time interval */\n\t\t\tintervalId: undefined,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** ECMA Date object of the timestamp */\n\t\tdateObject() {\n\t\t\treturn new Date(this.timestamp)\n\t\t},\n\t\t/** Time string formatted for main text */\n\t\tformattedTime() {\n\t\t\tif (this.relativeTime !== false) {\n\t\t\t\tconst formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: this.relativeTime })\n\n\t\t\t\tconst diff = this.dateObject - new Date(this.currentTime)\n\t\t\t\tconst seconds = diff / 1000\n\t\t\t\tif (Math.abs(seconds) <= 90) {\n\t\t\t\t\tif (this.ignoreSeconds) {\n\t\t\t\t\t\treturn FEW_SECONDS_AGO[this.relativeTime]\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tconst minutes = seconds / 60\n\t\t\t\tif (Math.abs(minutes) <= 90) {\n\t\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t\t}\n\t\t\t\tconst hours = minutes / 60\n\t\t\t\tif (Math.abs(hours) <= 72) {\n\t\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t\t}\n\t\t\t\tconst days = hours / 24\n\t\t\t\tif (Math.abs(days) <= 6) {\n\t\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t\t}\n\t\t\t\tconst weeks = days / 7\n\t\t\t\tif (Math.abs(weeks) <= 52) {\n\t\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t\t}\n\t\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t\t}\n\t\t\treturn this.formattedFullTime\n\t\t},\n\t\tformattedFullTime() {\n\t\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), this.format)\n\t\t\treturn formatter.format(this.dateObject)\n\t\t},\n\t},\n\n\twatch: {\n\t\t/**\n\t\t * Set or clear interval if relative time is dis/enabled\n\t\t *\n\t\t * @param {boolean} newValue The new value of the relativeTime property\n\t\t * @param {boolean} _oldValue The old value of the relativeTime property\n\t\t */\n\t\trelativeTime(newValue, _oldValue) {\n\t\t\twindow.clearInterval(this.intervalId)\n\t\t\tthis.intervalId = undefined\n\t\t\tif (newValue) {\n\t\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Start the interval for setting the current time if relative time is enabled\n\t\tif (this.relativeTime !== false) {\n\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t}\n\t},\n\n\tdestroyed() {\n\t\t// ensure interval is cleared\n\t\twindow.clearInterval(this.intervalId)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Set `currentTime` to the current timestamp, required as Date.now() is not reactive.\n\t\t */\n\t\tsetCurrentTime() {\n\t\t\tthis.currentTime = Date.now()\n\t\t},\n\t},\n}\n</script>\n"],"names":["FEW_SECONDS_AGO","t","_sfc_main","v","formatter","getCanonicalLocale","seconds","minutes","hours","days","weeks","newValue","_oldValue"],"mappings":"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"}

package/dist/Components/NcDateTimePicker.cjs

@@ -0,0 +1,217 @@
+var T = require("../assets/index-294382c8.css");
+const o = require("../chunks/l10n-903083c4.cjs"), p = require("./NcTimezonePicker.cjs"), d = require("./NcPopover.cjs"), m = require("../chunks/l10n-4326316a.cjs"), f = require("vue-material-design-icons/CalendarBlank.vue"), h = require("vue-material-design-icons/Web.vue"), r = require("@nextcloud/l10n"), _ = require("vue2-datepicker"), y = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), k = require("../chunks/ScopeComponent-1c75ec38.cjs"), l = (t) => t && t.__esModule ? t : { default: t }, v = /* @__PURE__ */ l(f), g = /* @__PURE__ */ l(h), w = /* @__PURE__ */ l(_);
+const s = {
+  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: v.default,
+    DatePicker: w.default,
+    NcPopover: d,
+    NcTimezonePicker: p,
+    Web: g.default
+  },
+  mixins: [m.l10n],
+  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: r.getMonthNames(),
+          monthsShort: r.getMonthNamesShort(),
+          weekdays: r.getDayNames(),
+          weekdaysShort: r.getDayNamesShort(),
+          weekdaysMin: r.getDayNamesMin(),
+          // 0 = sunday, 1 = monday
+          firstDayOfWeek: r.getFirstDay()
+        },
+        monthFormat: "MMM"
+      };
+    },
+    /**
+     * Translated placeholder
+     *
+     * @return {string}
+     */
+    defaultPlaceholder() {
+      return this.type === "time" ? o.t("Pick a time") : this.type === "month" ? o.t("Pick a month") : this.type === "year" ? o.t("Pick a year") : this.type === "week" ? o.t("Pick a week") : this.type === "date" ? o.t("Pick a date") : o.t("Pick a date and a time");
+    },
+    /**
+     * If format is not provided, try to match the type
+     * or fallback to 'date'
+     *
+     * @return {string}
+     */
+    formatTypeMap() {
+      var t;
+      return (t = s[this.type]) != null ? t : s.date;
+    }
+  },
+  methods: {
+    handleSelectYear(t) {
+      const e = this.$refs.datepicker.currentValue;
+      if (e)
+        try {
+          const a = new Date(new Date(e).setFullYear(t));
+          this.$refs.datepicker.selectDate(a);
+        } catch {
+          console.error("Invalid value", e, t);
+        }
+    },
+    handleSelectMonth(t) {
+      const e = this.$refs.datepicker.currentValue;
+      if (e)
+        try {
+          const a = new Date(new Date(e).setMonth(t));
+          this.$refs.datepicker.selectDate(a);
+        } catch {
+          console.error("Invalid value", e, t);
+        }
+    },
+    /**
+     * Toggles the visibility of the time zone popover
+     */
+    toggleTimezonePopover() {
+      this.showTimezoneSelect && (this.showTimezonePopover = !this.showTimezonePopover);
+    }
+  }
+};
+var P = function() {
+  var e = this, a = e._self._c;
+  return a("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(n) {
+    return e.$emit("update:value", e.value);
+  } }, scopedSlots: e._u([{ key: "icon-calendar", fn: function() {
+    return [e.showTimezoneSelect ? a("NcPopover", { attrs: { shown: e.showTimezonePopover, "popover-base-class": "timezone-select__popper" }, on: { "update:shown": function(n) {
+      e.showTimezonePopover = n;
+    } }, scopedSlots: e._u([{ key: "trigger", fn: function() {
+      return [a("button", { staticClass: "datetime-picker-inline-icon", class: { "datetime-picker-inline-icon--highlighted": e.highlightTimezone }, on: { mousedown: function(n) {
+        return n.stopPropagation(), n.preventDefault(), (() => {
+        }).apply(null, arguments);
+      } } }, [a("Web", { attrs: { size: 20 } })], 1)];
+    }, proxy: !0 }], null, !1, 3375037618) }, [a("div", { staticClass: "timezone-popover-wrapper__label" }, [a("strong", [e._v(" " + e._s(e.t("Please select a time zone:")) + " ")])]), a("NcTimezonePicker", { staticClass: "timezone-popover-wrapper__timezone-select", on: { input: function(n) {
+      return e.$emit("update:timezone-id", arguments[0]);
+    } }, model: { value: e.tzVal, callback: function(n) {
+      e.tzVal = n;
+    }, expression: "tzVal" } })], 1) : a("CalendarBlank", { attrs: { size: 20 } })];
+  }, proxy: !0 }, e._l(e.$scopedSlots, function(n, i) {
+    return { key: i, fn: function(u) {
+      return [e._t(i, null, null, u)];
+    } };
+  })], null, !0) }, "DatePicker", e.$attrs, !1), e.$listeners));
+}, D = [], b = /* @__PURE__ */ y.normalizeComponent(
+  z,
+  P,
+  D,
+  !1,
+  null,
+  "26676d3b",
+  null,
+  null
+);
+const c = b.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/>.
+ *
+ */
+k.ScopeComponent(c);
+module.exports = c;

package/dist/Components/NcDateTimePicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTimePicker.cjs","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__default","DatePicker__default","Components_NcPopover","Components_NcTimezonePicker","Web__default","l10n","l10n$1","l10n$2","_a","year","value","date","month","ScopeComponent"],"mappings":"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"}