@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/dist/chunks/NcDashboardWidgetItem-fl92G4Pt.cjs

@@ -0,0 +1,177 @@
+var x = require("../assets/NcDashboardWidgetItem-S7fELANA.css");
+const d = require("./NcAvatar-uPVG9WWg.cjs"), m = require("./NcActions-YpbmJ7hS.cjs"), v = require("./NcActionButton-sJpgOVU9.cjs"), e = require("vue"), f = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), g = {
+  name: "NcDashboardWidgetItem",
+  components: {
+    NcAvatar: d.NcAvatar,
+    NcActions: m.NcActions,
+    NcActionButton: v.NcActionButton
+  },
+  props: {
+    /**
+     * The item id (optional)
+     */
+    id: {
+      type: [String, Number],
+      default: void 0
+    },
+    /**
+     * The item element is a link to this URL (optional)
+     */
+    targetUrl: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Where to get the avatar image. (optional) Used if avatarUsername is not defined.
+     */
+    avatarUrl: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.
+     */
+    avatarUsername: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Is the avatarUsername not a user's name? (optional, false by default)
+     */
+    avatarIsNoUser: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Small icon to display on the bottom-right corner of the avatar (optional)
+     */
+    overlayIconUrl: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Item main text (mandatory)
+     */
+    mainText: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Item subline text (optional)
+     */
+    subText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * An object containing context menu entries that will be displayed for each items (optional)
+     */
+    itemMenu: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Specify whether the 3 dot menu is forced when only one action is present
+     */
+    forceMenu: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  data() {
+    return {
+      hovered: !1
+    };
+  },
+  computed: {
+    item() {
+      return {
+        id: this.id,
+        targetUrl: this.targetUrl,
+        avatarUrl: this.avatarUrl,
+        avatarUsername: this.avatarUsername,
+        overlayIconUrl: this.overlayIconUrl,
+        mainText: this.mainText,
+        subText: this.subText
+      };
+    },
+    gotMenu() {
+      return Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions;
+    },
+    gotOverlayIcon() {
+      return this.overlayIconUrl && this.overlayIconUrl !== "";
+    }
+  },
+  methods: {
+    onLinkClick(n) {
+      n.target.closest(".action-item") && n.preventDefault();
+    }
+  }
+}, h = ["src"], y = { class: "item__details" }, _ = ["title"], N = ["title"];
+function U(n, a, t, B, i, r) {
+  const c = e.resolveComponent("NcAvatar"), s = e.resolveComponent("NcActionButton"), u = e.resolveComponent("NcActions");
+  return e.openBlock(), e.createElementBlock("div", {
+    onMouseover: a[0] || (a[0] = (o) => i.hovered = !0),
+    onMouseleave: a[1] || (a[1] = (o) => i.hovered = !1)
+  }, [
+    (e.openBlock(), e.createBlock(e.resolveDynamicComponent(t.targetUrl ? "a" : "div"), {
+      href: t.targetUrl || void 0,
+      target: t.targetUrl ? "_blank" : void 0,
+      class: e.normalizeClass({ "item-list__entry": !0, "item-list__entry--has-actions-menu": r.gotMenu }),
+      onClick: r.onLinkClick
+    }, {
+      default: e.withCtx(() => [
+        e.renderSlot(n.$slots, "avatar", {
+          avatarUrl: t.avatarUrl,
+          avatarUsername: t.avatarUsername
+        }, () => [
+          e.createVNode(c, {
+            class: "item-avatar",
+            size: 44,
+            url: t.avatarUrl,
+            user: t.avatarUsername,
+            "is-no-user": t.avatarIsNoUser,
+            "show-user-status": !r.gotOverlayIcon
+          }, null, 8, ["url", "user", "is-no-user", "show-user-status"])
+        ], !0),
+        t.overlayIconUrl ? (e.openBlock(), e.createElementBlock("img", {
+          key: 0,
+          class: "item-icon",
+          alt: "",
+          src: t.overlayIconUrl
+        }, null, 8, h)) : e.createCommentVNode("", !0),
+        e.createElementVNode("div", y, [
+          e.createElementVNode("h3", { title: t.mainText }, e.toDisplayString(t.mainText), 9, _),
+          e.createElementVNode("span", {
+            class: "message",
+            title: t.subText
+          }, e.toDisplayString(t.subText), 9, N)
+        ]),
+        r.gotMenu ? (e.openBlock(), e.createBlock(u, {
+          key: 1,
+          "force-menu": t.forceMenu
+        }, {
+          default: e.withCtx(() => [
+            e.renderSlot(n.$slots, "actions", {}, () => [
+              (e.openBlock(!0), e.createElementBlock(e.Fragment, null, e.renderList(t.itemMenu, (o, l) => (e.openBlock(), e.createBlock(s, {
+                key: l,
+                icon: o.icon,
+                "close-after-click": !0,
+                onClick: e.withModifiers((C) => n.$emit(l, r.item), ["prevent", "stop"])
+              }, {
+                default: e.withCtx(() => [
+                  e.createTextVNode(e.toDisplayString(o.text), 1)
+                ]),
+                _: 2
+              }, 1032, ["icon", "onClick"]))), 128))
+            ], !0)
+          ]),
+          _: 3
+        }, 8, ["force-menu"])) : e.createCommentVNode("", !0)
+      ]),
+      _: 3
+    }, 8, ["href", "target", "class", "onClick"]))
+  ], 32);
+}
+const k = /* @__PURE__ */ f._export_sfc(g, [["render", U], ["__scopeId", "data-v-00e861ef"]]);
+exports.NcDashboardWidgetItem = k;

package/dist/chunks/NcDashboardWidgetItem-fl92G4Pt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDashboardWidgetItem-fl92G4Pt.cjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Julien Veyssier <eneiluj@posteo.net>\n -\n - @author Julien Veyssier <eneiluj@posteo.net>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl || undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The item id (optional)\n\t\t */\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * The item element is a link to this URL (optional)\n\t\t */\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t */\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t */\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the avatarUsername not a user's name? (optional, false by default)\n\t\t */\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t */\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Item main text (mandatory)\n\t\t */\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Item subline text (optional)\n\t\t */\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each items (optional)\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\n\t\t/**\n\t\t * Specify whether the 3 dot menu is forced when only one action is present\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tposition: relative;\n\tpadding: 8px;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: 44px;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin: 27px -3px 0px -7px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/*\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":["_sfc_main","NcAvatar","NcActions","NcActionButton","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_cache","$event","$data","$options","vue","$props","_ctx","m","menuItemId"],"mappings":";kNA+EAA,IAAA;AAAA;;IAGE,UAAAC,EAAA;AAAA,IACA,WAAAC,EAAA;AAAA,IACA,gBAAAC,EAAA;AAAA;EAGD,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,IAAA;AAAA,MACC,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA;;;;;;MAOA,SAAA;AAAA;;;;;;MAOA,SAAA;AAAA;;;;IAKD,gBAAA;AAAA;MAEC,SAAA;AAAA;;;;IAKD,gBAAA;AAAA;;;;;;IAOA,gBAAA;AAAA;MAEC,SAAA;AAAA;;;;IAKD,UAAA;AAAA;;;;;;IAOA,SAAA;AAAA;;;;;;IAOA,UAAA;AAAA;;;;;;;;;;;EAcD,OAAA;AACC,WAAA;AAAA;IAEA;AAAA;EAGD,UAAA;AAAA,IACC,OAAA;AACC,aAAA;AAAA;;;QAIC,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA;QAEA,SAAA,KAAA;AAAA,MACD;AAAA;IAED,UAAA;AACC,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA;IAED,iBAAA;;;;EAKD,SAAA;AAAA,IACC,YAAAC,GAAA;AACC,MAAAA,EAAA,OAAA,QAAA,cAAA,KACCA,EAAA,eAAA;AAAA;;AAIJ,GAlMAC,IAAA,CAAA,KAAA,GAkDQC,IAAA,EAAA,OAAA,gBAAA,GAlDRC,IAAA,CAAA,OAAA,GAAAC,IAAA,CAAA,OAAA;;;;IA+BO,aAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAC,EAAA,UAAA;AAAA,IAA4B,cAAAF,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAC,EAAA,UAAA;AAAA;;;;;MAK/B,SAAAC,EAAA;AAAA;MApCJ,SAAAC,EAAA,QAAA,MAAA;AAAA;UAsCwB,WAAAC,EAAA;AAAA,UAAwB,gBAAAA,EAAA;AAAA;;YAClC,OAAA;AAAA,YACR,MAAA;AAAA,YACA,KAAAA,EAAA;AAAA,YACA,MAAAA,EAAA;AAAA,YACA,cAAAA,EAAA;AAAA,YACA,oBAAA,CAAAF,EAAA;AAAA;;;;UAGF,OAAA;AAAA,UACA,KAAA;AAAA,UACC,KAAAE,EAAA;AAAA,QAjDL,GAAA,MAAA,GAAAT,CAAA,KAAAQ,EAAA,mBAAA,IAAA,EAAA;AAAA,QAkDGA,EAAA,mBAAA,OAAAP,GAAA;AAAA,UACCO,EAAA,mBAAA,MAAA,EAAA,OAAAC,EAAA,SAAA,GAAAD,EAAA,gBAAAC,EAAA,QAAA,GAAA,GAAAP,CAAA;AAAA;YAGM,OAAA;AAAA,YAAiB,OAAAO,EAAA;AAAA,UACnB,GAAAD,EAAA,gBAAAC,EAAA,OAAA,GAAA,GAAAN,CAAA;AAAA;;;UAGsB,cAAAM,EAAA;AAAA;UA1D9B,SAAAD,EAAA,QAAA,MAAA;AAAA,YA4DIA,EAAA,WAAAE,EAAA,QAAA,WAAA,CAAA,GAAA,MAAA;AAAA,eACCF,EAAA,UAAA,EAAA,GAAAA,EAAA,mBAAAA,EAAA,UAAA,MAAAA,EAAA,WAAAC,EAAA,UAAA,CAAAE,GAAAC;gBACE,KAAAA;AAAA;gBAEA,qBAAA;AAAA,gBACA,SAAAJ,EAAA,cAAA,CAAAH,MAAAK,EAAA,MAAAE,GAAAL,EAAA,IAAA,GAAA,CAAA,WAAA,MAAA,CAAA;AAAA;gBAjEP,SAAAC,EAAA,QAAA,MAAA;AAAA;;;;;;;iCAAAA,EAAA,mBAAA,IAAA,EAAA;AAAA;;;;;;;"}

package/dist/chunks/NcDashboardWidgetItem-oQGp29KO.mjs

@@ -0,0 +1,184 @@
+import "../assets/NcDashboardWidgetItem-S7fELANA.css";
+import { N as U } from "./NcAvatar-JsMCceHU.mjs";
+import { N } from "./NcActions-76CtOBCq.mjs";
+import { N as k } from "./NcActionButton-VnbqrtOY.mjs";
+import { resolveComponent as i, openBlock as r, createElementBlock as s, createBlock as l, resolveDynamicComponent as x, normalizeClass as I, withCtx as c, renderSlot as f, createVNode as b, createCommentVNode as g, createElementVNode as u, toDisplayString as d, Fragment as C, renderList as M, withModifiers as T, createTextVNode as A } from "vue";
+import { _ as S } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+const B = {
+  name: "NcDashboardWidgetItem",
+  components: {
+    NcAvatar: U,
+    NcActions: N,
+    NcActionButton: k
+  },
+  props: {
+    /**
+     * The item id (optional)
+     */
+    id: {
+      type: [String, Number],
+      default: void 0
+    },
+    /**
+     * The item element is a link to this URL (optional)
+     */
+    targetUrl: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Where to get the avatar image. (optional) Used if avatarUsername is not defined.
+     */
+    avatarUrl: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.
+     */
+    avatarUsername: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Is the avatarUsername not a user's name? (optional, false by default)
+     */
+    avatarIsNoUser: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Small icon to display on the bottom-right corner of the avatar (optional)
+     */
+    overlayIconUrl: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Item main text (mandatory)
+     */
+    mainText: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Item subline text (optional)
+     */
+    subText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * An object containing context menu entries that will be displayed for each items (optional)
+     */
+    itemMenu: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Specify whether the 3 dot menu is forced when only one action is present
+     */
+    forceMenu: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  data() {
+    return {
+      hovered: !1
+    };
+  },
+  computed: {
+    item() {
+      return {
+        id: this.id,
+        targetUrl: this.targetUrl,
+        avatarUrl: this.avatarUrl,
+        avatarUsername: this.avatarUsername,
+        overlayIconUrl: this.overlayIconUrl,
+        mainText: this.mainText,
+        subText: this.subText
+      };
+    },
+    gotMenu() {
+      return Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions;
+    },
+    gotOverlayIcon() {
+      return this.overlayIconUrl && this.overlayIconUrl !== "";
+    }
+  },
+  methods: {
+    onLinkClick(t) {
+      t.target.closest(".action-item") && t.preventDefault();
+    }
+  }
+}, D = ["src"], w = { class: "item__details" }, O = ["title"], V = ["title"];
+function L(t, n, e, j, m, a) {
+  const _ = i("NcAvatar"), h = i("NcActionButton"), y = i("NcActions");
+  return r(), s("div", {
+    onMouseover: n[0] || (n[0] = (o) => m.hovered = !0),
+    onMouseleave: n[1] || (n[1] = (o) => m.hovered = !1)
+  }, [
+    (r(), l(x(e.targetUrl ? "a" : "div"), {
+      href: e.targetUrl || void 0,
+      target: e.targetUrl ? "_blank" : void 0,
+      class: I({ "item-list__entry": !0, "item-list__entry--has-actions-menu": a.gotMenu }),
+      onClick: a.onLinkClick
+    }, {
+      default: c(() => [
+        f(t.$slots, "avatar", {
+          avatarUrl: e.avatarUrl,
+          avatarUsername: e.avatarUsername
+        }, () => [
+          b(_, {
+            class: "item-avatar",
+            size: 44,
+            url: e.avatarUrl,
+            user: e.avatarUsername,
+            "is-no-user": e.avatarIsNoUser,
+            "show-user-status": !a.gotOverlayIcon
+          }, null, 8, ["url", "user", "is-no-user", "show-user-status"])
+        ], !0),
+        e.overlayIconUrl ? (r(), s("img", {
+          key: 0,
+          class: "item-icon",
+          alt: "",
+          src: e.overlayIconUrl
+        }, null, 8, D)) : g("", !0),
+        u("div", w, [
+          u("h3", { title: e.mainText }, d(e.mainText), 9, O),
+          u("span", {
+            class: "message",
+            title: e.subText
+          }, d(e.subText), 9, V)
+        ]),
+        a.gotMenu ? (r(), l(y, {
+          key: 1,
+          "force-menu": e.forceMenu
+        }, {
+          default: c(() => [
+            f(t.$slots, "actions", {}, () => [
+              (r(!0), s(C, null, M(e.itemMenu, (o, v) => (r(), l(h, {
+                key: v,
+                icon: o.icon,
+                "close-after-click": !0,
+                onClick: T((z) => t.$emit(v, a.item), ["prevent", "stop"])
+              }, {
+                default: c(() => [
+                  A(d(o.text), 1)
+                ]),
+                _: 2
+              }, 1032, ["icon", "onClick"]))), 128))
+            ], !0)
+          ]),
+          _: 3
+        }, 8, ["force-menu"])) : g("", !0)
+      ]),
+      _: 3
+    }, 8, ["href", "target", "class", "onClick"]))
+  ], 32);
+}
+const H = /* @__PURE__ */ S(B, [["render", L], ["__scopeId", "data-v-00e861ef"]]);
+export {
+  H as N
+};

package/dist/chunks/NcDashboardWidgetItem-oQGp29KO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDashboardWidgetItem-oQGp29KO.mjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Julien Veyssier <eneiluj@posteo.net>\n -\n - @author Julien Veyssier <eneiluj@posteo.net>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl || undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The item id (optional)\n\t\t */\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * The item element is a link to this URL (optional)\n\t\t */\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t */\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t */\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the avatarUsername not a user's name? (optional, false by default)\n\t\t */\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t */\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Item main text (mandatory)\n\t\t */\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Item subline text (optional)\n\t\t */\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each items (optional)\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\n\t\t/**\n\t\t * Specify whether the 3 dot menu is forced when only one action is present\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tposition: relative;\n\tpadding: 8px;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: 44px;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin: 27px -3px 0px -7px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/*\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":["_sfc_main","NcAvatar","NcActions","NcActionButton","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_cache","$event","$data","$options","withCtx","$props","createCommentVNode","createElementVNode","toDisplayString","renderSlot","_ctx","openBlock","createElementBlock","Fragment","renderList","m","menuItemId","withModifiers"],"mappings":";;;;;;AA+EA,MAAAA,IAAA;AAAA;;IAGE,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA;EAGD,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,IAAA;AAAA,MACC,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA;;;;;;MAOA,SAAA;AAAA;;;;;;MAOA,SAAA;AAAA;;;;IAKD,gBAAA;AAAA;MAEC,SAAA;AAAA;;;;IAKD,gBAAA;AAAA;;;;;;IAOA,gBAAA;AAAA;MAEC,SAAA;AAAA;;;;IAKD,UAAA;AAAA;;;;;;IAOA,SAAA;AAAA;;;;;;IAOA,UAAA;AAAA;;;;;;;;;;;EAcD,OAAA;AACC,WAAA;AAAA;IAEA;AAAA;EAGD,UAAA;AAAA,IACC,OAAA;AACC,aAAA;AAAA;;;QAIC,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA;QAEA,SAAA,KAAA;AAAA,MACD;AAAA;IAED,UAAA;AACC,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA;IAED,iBAAA;;;;EAKD,SAAA;AAAA,IACC,YAAAC,GAAA;AACC,MAAAA,EAAA,OAAA,QAAA,cAAA,KACCA,EAAA,eAAA;AAAA;;AAIJ,GAlMAC,IAAA,CAAA,KAAA,GAkDQC,IAAA,EAAA,OAAA,gBAAA,GAlDRC,IAAA,CAAA,OAAA,GAAAC,IAAA,CAAA,OAAA;;;;IA+BO,aAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAC,EAAA,UAAA;AAAA,IAA4B,cAAAF,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAC,EAAA,UAAA;AAAA;;;;;MAK/B,SAAAC,EAAA;AAAA;MApCJ,SAAAC,EAAA,MAAA;AAAA;UAsCwB,WAAAC,EAAA;AAAA,UAAwB,gBAAAA,EAAA;AAAA;;YAClC,OAAA;AAAA,YACR,MAAA;AAAA,YACA,KAAAA,EAAA;AAAA,YACA,MAAAA,EAAA;AAAA,YACA,cAAAA,EAAA;AAAA,YACA,oBAAA,CAAAF,EAAA;AAAA;;;;UAGF,OAAA;AAAA,UACA,KAAA;AAAA,UACC,KAAAE,EAAA;AAAA,QAjDL,GAAA,MAAA,GAAAT,CAAA,KAAAU,EAAA,IAAA,EAAA;AAAA,QAkDGC,EAAA,OAAAV,GAAA;AAAA,UACCU,EAAA,MAAA,EAAA,OAAAF,EAAA,SAAA,GAAAG,EAAAH,EAAA,QAAA,GAAA,GAAAP,CAAA;AAAA;YAGM,OAAA;AAAA,YAAiB,OAAAO,EAAA;AAAA,UACnB,GAAAG,EAAAH,EAAA,OAAA,GAAA,GAAAN,CAAA;AAAA;;;UAGsB,cAAAM,EAAA;AAAA;UA1D9B,SAAAD,EAAA,MAAA;AAAA,YA4DIK,EAAAC,EAAA,QAAA,WAAA,CAAA,GAAA,MAAA;AAAA,eACCC,EAAA,EAAA,GAAAC,EAAAC,GAAA,MAAAC,EAAAT,EAAA,UAAA,CAAAU,GAAAC;gBACE,KAAAA;AAAA;gBAEA,qBAAA;AAAA,gBACA,SAAAC,EAAA,CAAAhB,MAAAS,EAAA,MAAAM,GAAAb,EAAA,IAAA,GAAA,CAAA,WAAA,MAAA,CAAA;AAAA;gBAjEP,SAAAC,EAAA,MAAA;AAAA;;;;;;;iCAAAE,EAAA,IAAA,EAAA;AAAA;;;;;;"}

package/dist/chunks/NcDateTime-JYO8uPbb.mjs

@@ -0,0 +1,140 @@
+import { ref as T, unref as f, computed as s, watch as y, onMounted as _, onUnmounted as D, openBlock as S, createElementBlock as b, toDisplayString as F } from "vue";
+import { getCanonicalLocale as g } from "@nextcloud/l10n";
+import { r as I, j as N, a as d } from "./_l10n-uuAvfQgY.mjs";
+import { _ as k } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+I(N);
+/**
+ * @copyright Copyright (c) 2024 Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @author Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @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/>.
+ *
+ */
+const B = {
+  long: d("a few seconds ago"),
+  short: d("seconds ago"),
+  // FOR TRANSLATORS: Shorter version of 'a few seconds ago'
+  narrow: d("sec. ago")
+  // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
+};
+function O(a = Date.now(), n = {}) {
+  const r = T(Date.now());
+  let e = null;
+  const m = T({
+    timeStyle: "medium",
+    dateStyle: "short",
+    relativeTime: "long",
+    ignoreSeconds: !1,
+    ...f(n)
+  }), o = s(() => ({ ...f(n), ...m.value })), v = s(() => new Date(f(a))), h = s(() => new Intl.DateTimeFormat(g(), o.value.format).format(v.value)), M = s(() => {
+    if (o.value.relativeTime !== !1) {
+      const t = new Intl.RelativeTimeFormat(g(), { numeric: "auto", style: o.value.relativeTime }), l = (v.value - r.value) / 1e3;
+      if (Math.abs(l) <= 90)
+        return o.value.ignoreSeconds ? B[o.value.relativeTime] : t.format(Math.round(l), "second");
+      const u = l / 60;
+      if (Math.abs(u) <= 90)
+        return t.format(Math.round(u), "minute");
+      const c = u / 60;
+      if (Math.abs(c) <= 24)
+        return t.format(Math.round(c), "hour");
+      const i = c / 24;
+      if (Math.abs(i) <= 6)
+        return t.format(Math.round(i), "day");
+      const p = i / 7;
+      if (Math.abs(p) <= 4)
+        return t.format(Math.round(p), "week");
+      const w = i / 30;
+      return Math.abs(w) <= 12 ? t.format(Math.round(w), "month") : t.format(Math.round(i / 365), "year");
+    }
+    return h;
+  });
+  return y([o], (t) => {
+    window.clearInterval(e), e = void 0, t.relativeTime && (e = window.setInterval(() => {
+      r.value = /* @__PURE__ */ new Date();
+    }, 1e3));
+  }), _(() => {
+    o.value.relativeTime !== !1 && (e = window.setInterval(() => {
+      r.value = /* @__PURE__ */ new Date();
+    }, 1e3));
+  }), D(() => {
+    window.clearInterval(e);
+  }), {
+    formattedTime: M,
+    formattedFullTime: h,
+    options: m
+  };
+}
+const x = {
+  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: (a) => a === !1 || ["long", "short", "narrow"].includes(a)
+    },
+    /**
+     * Ignore seconds when displaying the relative time and just show `a few seconds ago`
+     */
+    ignoreSeconds: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(a) {
+    const n = s(() => a.timestamp), { formattedTime: r, formattedFullTime: e } = O(n, a);
+    return {
+      formattedTime: r,
+      formattedFullTime: e
+    };
+  }
+}, E = ["data-timestamp", "title"];
+function j(a, n, r, e, m, o) {
+  return S(), b("span", {
+    class: "nc-datetime",
+    "data-timestamp": r.timestamp,
+    title: e.formattedFullTime
+  }, F(e.formattedTime), 9, E);
+}
+const R = /* @__PURE__ */ k(x, [["render", j]]);
+export {
+  R as N,
+  O as u
+};

package/dist/chunks/NcDateTime-JYO8uPbb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTime-JYO8uPbb.mjs","sources":["../../src/composables/useFormatDateTime.js","../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["/**\n * @copyright Copyright (c) 2024 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\nimport { getCanonicalLocale } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, onMounted, watch, unref } from 'vue'\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\n/**\n * Composable for formatting time stamps using current users locale\n *\n * @param {Date | number | import('vue').Ref<Date> | import('vue').Ref<number>} timestamp Current timestamp\n * @param {object} opts Optional options\n * @param {Intl.DateTimeFormatOptions} opts.format The format used for displaying, or if relative time is used the format used for the title (optional)\n * @param {boolean} opts.ignoreSeconds Ignore seconds when displaying the relative time and just show `a few seconds ago`\n * @param {false | 'long' | 'short' | 'narrow'} opts.relativeTime Wether to display the timestamp as time from now (optional)\n */\nexport function useFormatDateTime(timestamp = Date.now(), opts = {}) {\n\t// Current time as Date.now is not reactive\n\tconst currentTime = ref(Date.now())\n\t// The interval ID for the window\n\tlet intervalId = null\n\n\tconst options = ref({\n\t\ttimeStyle: 'medium',\n\t\tdateStyle: 'short',\n\t\trelativeTime: 'long',\n\t\tignoreSeconds: false,\n\t\t...unref(opts),\n\t})\n\tconst wrappedOptions = computed(() => ({ ...unref(opts), ...options.value }))\n\n\t/** ECMA Date object of the timestamp */\n\tconst date = computed(() => new Date(unref(timestamp)))\n\n\tconst formattedFullTime = computed(() => {\n\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format)\n\t\treturn formatter.format(date.value)\n\t})\n\n\t/** Time string formatted for main text */\n\tconst formattedTime = computed(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tconst formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })\n\n\t\t\tconst diff = date.value - currentTime.value\n\t\t\tconst seconds = diff / 1000\n\t\t\tif (Math.abs(seconds) <= 90) {\n\t\t\t\tif (wrappedOptions.value.ignoreSeconds) {\n\t\t\t\t\treturn FEW_SECONDS_AGO[wrappedOptions.value.relativeTime]\n\t\t\t\t} else {\n\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst minutes = seconds / 60\n\t\t\tif (Math.abs(minutes) <= 90) {\n\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t}\n\t\t\tconst hours = minutes / 60\n\t\t\tif (Math.abs(hours) <= 24) {\n\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t}\n\t\t\tconst days = hours / 24\n\t\t\tif (Math.abs(days) <= 6) {\n\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t}\n\t\t\tconst weeks = days / 7\n\t\t\tif (Math.abs(weeks) <= 4) {\n\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t}\n\t\t\tconst months = days / 30\n\t\t\tif (Math.abs(months) <= 12) {\n\t\t\t\treturn formatter.format(Math.round(months), 'month')\n\t\t\t}\n\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t}\n\t\treturn formattedFullTime\n\t})\n\n\t// Set or clear interval if relative time is dis/enabled\n\twatch([wrappedOptions], (opts) => {\n\t\twindow.clearInterval(intervalId)\n\t\tintervalId = undefined\n\t\tif (opts.relativeTime) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = new Date() }, 1000)\n\t\t}\n\t})\n\n\t// Start the interval for setting the current time if relative time is enabled\n\tonMounted(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = new Date() }, 1000)\n\t\t}\n\t})\n\n\t// ensure interval is cleared\n\tonUnmounted(() => {\n\t\twindow.clearInterval(intervalId)\n\t})\n\n\treturn {\n\t\tformattedTime,\n\t\tformattedFullTime,\n\t\toptions,\n\t}\n}\n","<!--\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 { computed } from 'vue'\nimport { useFormatDateTime } from '../../composables/useFormatDateTime.js'\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\tsetup(props) {\n\t\tconst timestamp = computed(() => props.timestamp)\n\t\tconst { formattedTime, formattedFullTime } = useFormatDateTime(timestamp, props)\n\t\treturn {\n\t\t\tformattedTime,\n\t\t\tformattedFullTime,\n\t\t}\n\t},\n}\n</script>\n"],"names":["FEW_SECONDS_AGO","t","useFormatDateTime","timestamp","opts","currentTime","ref","intervalId","options","unref","wrappedOptions","computed","date","formattedFullTime","getCanonicalLocale","formattedTime","formatter","seconds","minutes","hours","days","weeks","months","watch","onMounted","onUnmounted","_sfc_main","v","props","_hoisted_1","_createElementBlock","$props","$setup","_toDisplayString"],"mappings":"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"}