@nextcloud/vue/dist/Components/NcDatetime.mjs.map

Nextcloud vue components

{"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;;;;;;"}