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

Nextcloud vue components

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