@nextcloud/vue 8.0.0-beta.7 → 8.0.0-beta.9

package/dist/Components/NcDateTime.cjs

@@ -1 +1,125 @@
-"use strict";const s=require("@nextcloud/l10n"),n=require("../chunks/l10n-46d0c1c0.cjs"),m=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs"),l={long:n.t("a few seconds ago"),short:n.t("seconds ago"),narrow:n.t("sec. ago")},d={name:"NcDateTime",props:{timestamp:{type:[Date,Number],required:!0},format:{type:Object,default:()=>({timeStyle:"medium",dateStyle:"short"})},relativeTime:{type:[Boolean,String],default:"long",validator:t=>t===!1||["long","short","narrow"].includes(t)},ignoreSeconds:{type:Boolean,default:!1}},data(){return{currentTime:Date.now(),intervalId:void 0}},computed:{dateObject(){return new Date(this.timestamp)},formattedTime(){if(this.relativeTime!==!1){const t=new Intl.RelativeTimeFormat(s.getCanonicalLocale(),{numeric:"auto",style:this.relativeTime}),e=(this.dateObject-new Date(this.currentTime))/1e3;if(Math.abs(e)<=90)return this.ignoreSeconds?l[this.relativeTime]:t.format(Math.round(e),"second");const a=e/60;if(Math.abs(a)<=90)return t.format(Math.round(a),"minute");const i=a/60;if(Math.abs(i)<=72)return t.format(Math.round(i),"hour");const r=i/24;if(Math.abs(r)<=6)return t.format(Math.round(r),"day");const o=r/7;return Math.abs(o)<=52?t.format(Math.round(o),"week"):t.format(Math.round(r/365),"year")}return this.formattedFullTime},formattedFullTime(){return new Intl.DateTimeFormat(s.getCanonicalLocale(),this.format).format(this.dateObject)}},watch:{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:{setCurrentTime(){this.currentTime=Date.now()}}};var u=function(){var t=this,e=t._self._c;return e("span",{staticClass:"nc-datetime",attrs:{"data-timestamp":t.timestamp,title:t.formattedFullTime}},[t._v(t._s(t.formattedTime))])},h=[],c=m.normalizeComponent(d,u,h,!1,null,null,null,null);const f=c.exports;module.exports=f;
+"use strict";
+const l = require("@nextcloud/l10n"), s = require("../chunks/l10n-b1d264c7.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.cjs.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.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

@@ -1,44 +1,129 @@
-import { getCanonicalLocale as s } from "@nextcloud/l10n";
-import { t as n } from "../chunks/l10n-9a5a6afc.mjs";
-import { n as m } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const l = { long: n("a few seconds ago"), short: n("seconds ago"), narrow: n("sec. ago") }, d = { name: "NcDateTime", props: { timestamp: { type: [Date, Number], required: !0 }, format: { type: Object, default: () => ({ timeStyle: "medium", dateStyle: "short" }) }, relativeTime: { type: [Boolean, String], default: "long", validator: (t) => t === !1 || ["long", "short", "narrow"].includes(t) }, ignoreSeconds: { type: Boolean, default: !1 } }, data() {
-  return { currentTime: Date.now(), intervalId: void 0 };
-}, computed: { dateObject() {
-  return new Date(this.timestamp);
-}, formattedTime() {
-  if (this.relativeTime !== !1) {
-    const t = new Intl.RelativeTimeFormat(s(), { numeric: "auto", style: this.relativeTime }), e = (this.dateObject - new Date(this.currentTime)) / 1e3;
-    if (Math.abs(e) <= 90)
-      return this.ignoreSeconds ? l[this.relativeTime] : t.format(Math.round(e), "second");
-    const r = e / 60;
-    if (Math.abs(r) <= 90)
-      return t.format(Math.round(r), "minute");
-    const i = r / 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");
+import { getCanonicalLocale as m } from "@nextcloud/l10n";
+import { t as o } from "../chunks/l10n-05a09c66.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();
+    }
   }
-  return this.formattedFullTime;
-}, formattedFullTime() {
-  return new Intl.DateTimeFormat(s(), this.format).format(this.dateObject);
-} }, watch: { 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: { setCurrentTime() {
-  this.currentTime = Date.now();
-} } };
-var u = function() {
-  var t = this, e = t._self._c;
-  return e("span", { staticClass: "nc-datetime", attrs: { "data-timestamp": t.timestamp, title: t.formattedFullTime } }, [t._v(t._s(t.formattedTime))]);
-}, h = [], c = m(d, u, h, !1, null, null, null, null);
-const w = c.exports;
+};
+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 {
-  w as default
+  p as default
 };

package/dist/Components/NcDateTime.mjs.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.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

@@ -1 +1,217 @@
-var v=require("../assets/index-82b5969a.css");const o=require("../chunks/l10n-46d0c1c0.cjs"),u=require("./NcTimezonePicker.cjs"),p=require("./NcPopover.cjs"),c=require("../chunks/l10n-dacb6440.cjs"),m=require("vue-material-design-icons/CalendarBlank.vue"),d=require("vue-material-design-icons/Web.vue"),n=require("@nextcloud/l10n"),h=require("vue2-datepicker"),f=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs"),y=require("../chunks/ScopeComponent-4b8bd1ee.cjs");const l={date:"YYYY-MM-DD",datetime:"YYYY-MM-DD H:mm:ss",year:"YYYY",month:"YYYY-MM",time:"H:mm:ss",week:"w"},k={name:"NcDateTimePicker",components:{CalendarBlank:m,DatePicker:h,NcPopover:p,NcTimezonePicker:u,Web:d},mixins:[c.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},value:{default:()=>new Date},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:{defaultLang(){return{formatLocale:{months:n.getMonthNames(),monthsShort:n.getMonthNamesShort(),weekdays:n.getDayNames(),weekdaysShort:n.getDayNamesShort(),weekdaysMin:n.getDayNamesMin(),firstDayOfWeek:n.getFirstDay()},monthFormat:"MMM"}},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")},formatTypeMap(){var e;return(e=l[this.type])!=null?e:l.date}},methods:{handleSelectYear(e){const t=this.$refs.datepicker.currentValue;if(t)try{const a=new Date(new Date(t).setFullYear(e));this.$refs.datepicker.selectDate(a)}catch{console.error("Invalid value",t,e)}},handleSelectMonth(e){const t=this.$refs.datepicker.currentValue;if(t)try{const a=new Date(new Date(t).setMonth(e));this.$refs.datepicker.selectDate(a)}catch{console.error("Invalid value",t,e)}},toggleTimezonePopover(){this.showTimezoneSelect&&(this.showTimezonePopover=!this.showTimezonePopover)}}};var w=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(a){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(a){e.showTimezonePopover=a}},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(a){return a.stopPropagation(),a.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(a){return e.$emit("update:timezone-id",arguments[0])}},model:{value:e.tzVal,callback:function(a){e.tzVal=a},expression:"tzVal"}})],1):t("CalendarBlank",{attrs:{size:20}})]},proxy:!0},e._l(e.$scopedSlots,function(a,r){return{key:r,fn:function(s){return[e._t(r,null,null,s)]}}})],null,!0)},"DatePicker",e.$attrs,!1),e.$listeners))},g=[],z=f.normalizeComponent(k,w,g,!1,null,"26676d3b",null,null);const i=z.exports;y.ScopeComponent(i),module.exports=i;
+var T = require("../assets/index-574438d6.css");
+const o = require("../chunks/l10n-b1d264c7.cjs"), p = require("./NcTimezonePicker.cjs"), d = require("./NcPopover.cjs"), m = require("../chunks/l10n-c7bd0ea6.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-e060526a.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;