@nextcloud/vue 9.0.0-alpha.2 → 9.0.0-alpha.4

package/dist/chunks/NcDashboardWidget-xBpqAct1.mjs

@@ -0,0 +1,186 @@
+import '../assets/NcDashboardWidget-CvGZT_xf.css';
+import { N as NcAvatar } from "./NcAvatar-OjWzLdGK.mjs";
+import { N as NcDashboardWidgetItem } from "./NcDashboardWidgetItem-BwemNzvL.mjs";
+import { N as NcEmptyContent } from "./NcEmptyContent-BoGB3vFC.mjs";
+import { C as Check } from "./Check-_j2mQvkT.mjs";
+import { r as register, k as t29, a as t } from "./_l10n-C3nxU4O-.mjs";
+import { resolveComponent, openBlock, createElementBlock, createBlock, withCtx, renderSlot, createVNode, createCommentVNode, createElementVNode, Fragment, renderList, mergeProps, toHandlers, toDisplayString, pushScopeId, popScopeId } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register(t29);
+const _sfc_main = {
+  name: "NcDashboardWidget",
+  components: {
+    NcAvatar,
+    NcDashboardWidgetItem,
+    NcEmptyContent,
+    Check
+  },
+  props: {
+    /**
+     * An array containing the items to show (specific structure must be respected,
+     * except if you override item rendering in the default slot).
+     */
+    items: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    /**
+     * If this is set, a "show more" text is displayed on the widget's bottom.
+     * It's a link pointing to this URL.
+     */
+    showMoreUrl: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The text of show more button.
+     *
+     * Expected to be in the form "More {itemName} …"
+     */
+    showMoreLabel: {
+      type: String,
+      default: t("More items …")
+    },
+    /**
+     * A boolean to put the widget in a loading state.
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * An object containing context menu entries that will be displayed for each item.
+     */
+    itemMenu: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    /**
+     * Whether both the items and the empty content message are shown.
+     * Usefull for e.g. showing "No mentions" and a list of elements.
+     */
+    showItemsAndEmptyContent: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The text to show in the empty content area.
+     */
+    emptyContentMessage: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The text to show in the half empty content area.
+     */
+    halfEmptyContentMessage: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    // forward menu events to my parent
+    handlers() {
+      const h = {};
+      for (const evName in this.itemMenu) {
+        h[evName] = (it) => {
+          this.$emit(evName, it);
+        };
+      }
+      return h;
+    },
+    displayedItems() {
+      const nbItems = this.showMoreUrl && this.items.length >= this.maxItemNumber ? this.maxItemNumber - 1 : this.maxItemNumber;
+      return this.items.slice(0, nbItems);
+    },
+    showHalfEmptyContentArea() {
+      return this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0;
+    },
+    halfEmptyContentString() {
+      return this.halfEmptyContentMessage || this.emptyContentMessage;
+    },
+    maxItemNumber() {
+      return this.showItemsAndEmptyContent ? 5 : 7;
+    },
+    showMore() {
+      return this.showMoreUrl && this.items.length >= this.maxItemNumber;
+    }
+  }
+};
+const _withScopeId = (n) => (pushScopeId("data-v-ac2fc36c"), n = n(), popScopeId(), n);
+const _hoisted_1 = { class: "dashboard-widget" };
+const _hoisted_2 = { key: 1 };
+const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "item__details" }, [
+  /* @__PURE__ */ createElementVNode("h3", null, " "),
+  /* @__PURE__ */ createElementVNode("p", { class: "message" }, "   ")
+], -1));
+const _hoisted_4 = ["href"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Check = resolveComponent("Check");
+  const _component_NcEmptyContent = resolveComponent("NcEmptyContent");
+  const _component_NcDashboardWidgetItem = resolveComponent("NcDashboardWidgetItem");
+  const _component_NcAvatar = resolveComponent("NcAvatar");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    $options.showHalfEmptyContentArea ? (openBlock(), createBlock(_component_NcEmptyContent, {
+      key: 0,
+      description: $options.halfEmptyContentString,
+      class: "half-screen"
+    }, {
+      icon: withCtx(() => [
+        renderSlot(_ctx.$slots, "halfEmptyContentIcon", {}, () => [
+          createVNode(_component_Check)
+        ], true)
+      ]),
+      _: 3
+    }, 8, ["description"])) : createCommentVNode("", true),
+    createElementVNode("ul", null, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList($options.displayedItems, (item) => {
+        return openBlock(), createElementBlock("li", {
+          key: item.id
+        }, [
+          renderSlot(_ctx.$slots, "default", { item }, () => [
+            createVNode(_component_NcDashboardWidgetItem, mergeProps({ ref_for: true }, item, { "item-menu": $props.itemMenu }, toHandlers($options.handlers)), null, 16, ["item-menu"])
+          ], true)
+        ]);
+      }), 128))
+    ]),
+    $props.loading ? (openBlock(), createElementBlock("div", _hoisted_2, [
+      (openBlock(), createElementBlock(Fragment, null, renderList(7, (i) => {
+        return createElementVNode("div", {
+          key: i,
+          class: "item-list__entry"
+        }, [
+          createVNode(_component_NcAvatar, {
+            class: "item-avatar",
+            size: 44
+          }),
+          _hoisted_3
+        ]);
+      }), 64))
+    ])) : $props.items.length === 0 ? renderSlot(_ctx.$slots, "empty-content", { key: 2 }, () => [
+      $props.emptyContentMessage ? (openBlock(), createBlock(_component_NcEmptyContent, {
+        key: 0,
+        description: $props.emptyContentMessage
+      }, {
+        icon: withCtx(() => [
+          renderSlot(_ctx.$slots, "emptyContentIcon", {}, void 0, true)
+        ]),
+        _: 3
+      }, 8, ["description"])) : createCommentVNode("", true)
+    ], true) : $options.showMore ? (openBlock(), createElementBlock("a", {
+      key: 3,
+      href: $props.showMoreUrl,
+      target: "_blank",
+      class: "more",
+      tabindex: "0"
+    }, toDisplayString($props.showMoreLabel), 9, _hoisted_4)) : createCommentVNode("", true)
+  ]);
+}
+const NcDashboardWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ac2fc36c"]]);
+export {
+  NcDashboardWidget as N
+};

package/dist/chunks/NcDashboardWidget-xBpqAct1.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDashboardWidget-xBpqAct1.mjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t},\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t<!-- This element is shown if we have items, but want to show a general message as well.\n\t\tCan be used e.g. to show \"No mentions\" on top of the item list. -->\n\t\t<NcEmptyContent v-if=\"showHalfEmptyContentArea\"\n\t\t\t:description=\"halfEmptyContentString\"\n\t\t\tclass=\"half-screen\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot The icon to show in the half empty content area. -->\n\t\t\t\t<slot name=\"halfEmptyContentIcon\">\n\t\t\t\t\t<Check />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t</NcEmptyContent>\n\t\t<!-- The list of items to show. -->\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t<!-- @slot The default slot can be optionally overridden. It contains the template of one item. -->\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem v-bind=\"item\"\n\t\t\t\t\t\t:item-menu=\"itemMenu\"\n\t\t\t\t\t\tv-on=\"handlers\" />\n\t\t\t\t</slot>\n\t\t\t</li>\n\t\t</ul>\n\t\t<!-- While the widget is loading, we show a list of placeholder items. -->\n\t\t<div v-if=\"loading\">\n\t\t\t<div v-for=\"i in 7\" :key=\"i\" class=\"item-list__entry\">\n\t\t\t\t<NcAvatar class=\"item-avatar\" :size=\"44\" />\n\t\t\t\t<div class=\"item__details\">\n\t\t\t\t\t<h3>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent v-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<!-- @slot The icon to show in the empty content area. -->\n\t\t\t\t\t<slot name=\"emptyContentIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</slot>\n\t\t<!-- A \"show more\" link, e.g. to navigate to the main app belonging to this widget. -->\n\t\t<a v-else-if=\"showMore\"\n\t\t\t:href=\"showMoreUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tclass=\"more\"\n\t\t\ttabindex=\"0\">\n\t\t\t{{ showMoreLabel }}\n\t\t</a>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\n\nimport Check from 'vue-material-design-icons/Check.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcDashboardWidget',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcDashboardWidgetItem,\n\t\tNcEmptyContent,\n\t\tCheck,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * An array containing the items to show (specific structure must be respected,\n\t\t * except if you override item rendering in the default slot).\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => { return [] },\n\t\t},\n\t\t/**\n\t\t * If this is set, a \"show more\" text is displayed on the widget's bottom.\n\t\t * It's a link pointing to this URL.\n\t\t */\n\t\tshowMoreUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text of show more button.\n\t\t *\n\t\t * Expected to be in the form \"More {itemName} …\"\n\t\t */\n\t\tshowMoreLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('More items …'),\n\t\t},\n\t\t/**\n\t\t * A boolean to put the widget in a loading state.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each item.\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\t\t/**\n\t\t * Whether both the items and the empty content message are shown.\n\t\t * Usefull for e.g. showing \"No mentions\" and a list of elements.\n\t\t */\n\t\tshowItemsAndEmptyContent: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The text to show in the empty content area.\n\t\t */\n\t\temptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text to show in the half empty content area.\n\t\t */\n\t\thalfEmptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// forward menu events to my parent\n\t\thandlers() {\n\t\t\tconst h = {}\n\t\t\tfor (const evName in this.itemMenu) {\n\t\t\t\th[evName] = (it) => {\n\t\t\t\t\tthis.$emit(evName, it)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn h\n\t\t},\n\t\tdisplayedItems() {\n\t\t\tconst nbItems = (this.showMoreUrl && this.items.length >= this.maxItemNumber)\n\t\t\t\t? this.maxItemNumber - 1\n\t\t\t\t: this.maxItemNumber\n\t\t\treturn this.items.slice(0, nbItems)\n\t\t},\n\n\t\tshowHalfEmptyContentArea() {\n\t\t\treturn this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0\n\t\t},\n\n\t\thalfEmptyContentString() {\n\t\t\treturn this.halfEmptyContentMessage || this.emptyContentMessage\n\t\t},\n\n\t\tmaxItemNumber() {\n\t\t\treturn this.showItemsAndEmptyContent ? 5 : 7\n\t\t},\n\n\t\tshowMore() {\n\t\t\treturn this.showMoreUrl && this.items.length >= this.maxItemNumber\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.dashboard-widget :deep(.empty-content) {\n\ttext-align: center;\n\tpadding-top: 5vh;\n\t&.half-screen {\n\t\tpadding-top: 0;\n\t\tmargin-bottom: 1vh;\n\t}\n}\n\n.more {\n\tdisplay: block;\n\ttext-align: center;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 60px;\n\tcursor: pointer;\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\tcolor: var(--color-main-text);\n\t}\n}\n\n/* skeleton */\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tpadding: 8px;\n\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\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\tbackground-color: var(--color-background-dark);\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: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_createElementVNode","_openBlock","_createElementBlock","_createBlock","_renderSlot","_createVNode","_createCommentVNode","_Fragment","_renderList","_mergeProps","_toHandlers","_toDisplayString"],"mappings":"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"}

package/dist/chunks/NcDashboardWidgetItem-BwemNzvL.mjs

@@ -0,0 +1,197 @@
+import '../assets/NcDashboardWidgetItem-JCtQhwhS.css';
+import { N as NcAvatar } from "./NcAvatar-OjWzLdGK.mjs";
+import { N as NcActions } from "./NcActions-COaRMDe5.mjs";
+import { N as NcActionButton } from "./NcActionButton-Bqkgltcz.mjs";
+import { resolveComponent, openBlock, createElementBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot, createVNode, createCommentVNode, createElementVNode, toDisplayString, Fragment, renderList, withModifiers, createTextVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcDashboardWidgetItem",
+  components: {
+    NcAvatar,
+    NcActions,
+    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: false
+    },
+    /**
+     * 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: true
+    },
+    /**
+     * 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: () => {
+        return {};
+      }
+    },
+    /**
+     * Specify whether the 3 dot menu is forced when only one action is present
+     */
+    forceMenu: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      hovered: false
+    };
+  },
+  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(event) {
+      if (event.target.closest(".action-item")) {
+        event.preventDefault();
+      }
+    }
+  }
+};
+const _hoisted_1 = ["src"];
+const _hoisted_2 = { class: "item__details" };
+const _hoisted_3 = ["title"];
+const _hoisted_4 = ["title"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcAvatar = resolveComponent("NcAvatar");
+  const _component_NcActionButton = resolveComponent("NcActionButton");
+  const _component_NcActions = resolveComponent("NcActions");
+  return openBlock(), createElementBlock("div", {
+    onMouseover: _cache[0] || (_cache[0] = ($event) => $data.hovered = true),
+    onMouseleave: _cache[1] || (_cache[1] = ($event) => $data.hovered = false)
+  }, [
+    (openBlock(), createBlock(resolveDynamicComponent($props.targetUrl ? "a" : "div"), {
+      href: $props.targetUrl || void 0,
+      target: $props.targetUrl ? "_blank" : void 0,
+      class: normalizeClass({ "item-list__entry": true, "item-list__entry--has-actions-menu": $options.gotMenu }),
+      onClick: $options.onLinkClick
+    }, {
+      default: withCtx(() => [
+        renderSlot(_ctx.$slots, "avatar", {
+          avatarUrl: $props.avatarUrl,
+          avatarUsername: $props.avatarUsername
+        }, () => [
+          createVNode(_component_NcAvatar, {
+            class: "item-avatar",
+            size: 44,
+            url: $props.avatarUrl,
+            user: $props.avatarUsername,
+            "is-no-user": $props.avatarIsNoUser,
+            "show-user-status": !$options.gotOverlayIcon
+          }, null, 8, ["url", "user", "is-no-user", "show-user-status"])
+        ], true),
+        $props.overlayIconUrl ? (openBlock(), createElementBlock("img", {
+          key: 0,
+          class: "item-icon",
+          alt: "",
+          src: $props.overlayIconUrl
+        }, null, 8, _hoisted_1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("h3", { title: $props.mainText }, toDisplayString($props.mainText), 9, _hoisted_3),
+          $props.subText !== "" ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: "message",
+            title: $props.subText
+          }, toDisplayString($props.subText), 9, _hoisted_4)) : createCommentVNode("", true)
+        ]),
+        $options.gotMenu ? (openBlock(), createBlock(_component_NcActions, {
+          key: 1,
+          "force-menu": $props.forceMenu
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "actions", {}, () => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList($props.itemMenu, (m, menuItemId) => {
+                return openBlock(), createBlock(_component_NcActionButton, {
+                  key: menuItemId,
+                  icon: m.icon,
+                  "close-after-click": true,
+                  onClick: withModifiers(($event) => _ctx.$emit(menuItemId, $options.item), ["prevent", "stop"])
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(m.text), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["icon", "onClick"]);
+              }), 128))
+            ], true)
+          ]),
+          _: 3
+        }, 8, ["force-menu"])) : createCommentVNode("", true)
+      ]),
+      _: 3
+    }, 8, ["href", "target", "class", "onClick"]))
+  ], 32);
+}
+const NcDashboardWidgetItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c1cd11d9"]]);
+export {
+  NcDashboardWidgetItem as N
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcDashboardWidgetItem-BwemNzvL.mjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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 v-if=\"subText !== ''\" 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\t\tjustify-content: center;\n\t\tmin-height: 44px;\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":["_createElementBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot","_createVNode","_createCommentVNode","_createElementVNode","_toDisplayString","_openBlock","_Fragment","_renderList","_withModifiers","_createTextVNode"],"mappings":"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"}

package/dist/chunks/NcDateTime-BVQqC6rO.mjs

@@ -0,0 +1,147 @@
+import { ref, toValue, computed, watchEffect, onUnmounted, openBlock, createElementBlock, toDisplayString } from "vue";
+import { getCanonicalLocale, getLanguage } from "@nextcloud/l10n";
+import { r as register, j as t2, a as t } from "./_l10n-C3nxU4O-.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register(t2);
+const FEW_SECONDS_AGO = {
+  long: t("a few seconds ago"),
+  short: t("seconds ago"),
+  // FOR TRANSLATORS: Shorter version of 'a few seconds ago'
+  narrow: t("sec. ago")
+  // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
+};
+function useFormatDateTime(timestamp = Date.now(), opts = {}) {
+  const currentTime = ref(Date.now());
+  let intervalId;
+  const options = ref({
+    format: {
+      timeStyle: "medium",
+      dateStyle: "short"
+    },
+    relativeTime: "long",
+    ignoreSeconds: false,
+    ...toValue(opts)
+  });
+  const wrappedOptions = computed(() => ({ ...toValue(opts), ...options.value }));
+  const date = computed(() => new Date(toValue(timestamp)));
+  const formattedFullTime = computed(() => {
+    const formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format);
+    return formatter.format(date.value);
+  });
+  const formattedTime = computed(() => {
+    if (wrappedOptions.value.relativeTime !== false) {
+      const formatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: "auto", style: wrappedOptions.value.relativeTime });
+      const diff = date.value.getTime() - currentTime.value;
+      const seconds = diff / 1e3;
+      if (Math.abs(seconds) <= 90) {
+        if (wrappedOptions.value.ignoreSeconds) {
+          return FEW_SECONDS_AGO[wrappedOptions.value.relativeTime];
+        } else {
+          return formatter.format(Math.round(seconds), "second");
+        }
+      }
+      const minutes = seconds / 60;
+      if (Math.abs(minutes) <= 90) {
+        return formatter.format(Math.round(minutes), "minute");
+      }
+      const hours = minutes / 60;
+      if (Math.abs(hours) <= 24) {
+        return formatter.format(Math.round(hours), "hour");
+      }
+      const days = hours / 24;
+      if (Math.abs(days) <= 6) {
+        return formatter.format(Math.round(days), "day");
+      }
+      const weeks = days / 7;
+      if (Math.abs(weeks) <= 4) {
+        return formatter.format(Math.round(weeks), "week");
+      }
+      const months = days / 30;
+      if (Math.abs(months) <= 12) {
+        return formatter.format(Math.round(months), "month");
+      }
+      return formatter.format(Math.round(days / 365), "year");
+    }
+    return formattedFullTime.value;
+  });
+  watchEffect(() => {
+    window.clearInterval(intervalId);
+    intervalId = void 0;
+    if (wrappedOptions.value.relativeTime) {
+      intervalId = window.setInterval(() => {
+        currentTime.value = Date.now();
+      }, 1e3);
+    }
+  });
+  onUnmounted(() => {
+    window.clearInterval(intervalId);
+  });
+  return {
+    formattedTime,
+    formattedFullTime,
+    options
+  };
+}
+const _sfc_main = {
+  name: "NcDateTime",
+  props: {
+    /**
+     * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object
+     */
+    timestamp: {
+      type: [Date, Number],
+      required: true
+    },
+    /**
+     * 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: (v) => v === false || ["long", "short", "narrow"].includes(v)
+    },
+    /**
+     * Ignore seconds when displaying the relative time and just show `a few seconds ago`
+     */
+    ignoreSeconds: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const timestamp = computed(() => props.timestamp);
+    const { formattedTime, formattedFullTime } = useFormatDateTime(timestamp, props);
+    return {
+      formattedTime,
+      formattedFullTime
+    };
+  }
+};
+const _hoisted_1 = ["data-timestamp", "title", "textContent"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", {
+    class: "nc-datetime",
+    "data-timestamp": $props.timestamp,
+    title: $setup.formattedFullTime,
+    textContent: toDisplayString($setup.formattedTime)
+  }, null, 8, _hoisted_1);
+}
+const NcDateTime = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  NcDateTime as N,
+  useFormatDateTime as u
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTime-BVQqC6rO.mjs","sources":["../../src/composables/useFormatDateTime.ts","../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { MaybeRef } from 'vue'\nimport { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, toValue, watchEffect } 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\ninterface FormatDateOptions {\n\t/**\n\t * The format used for displaying, or if relative time is used the format used for the title\n\t */\n\tformat?: Intl.DateTimeFormatOptions\n\t/**\n\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t */\n\tignoreSeconds?: boolean\n\t/**\n\t * Wether to display the timestamp as time from now\n\t */\n\trelativeTime?: false | 'long' | 'short' | 'narrow'\n}\n\n/**\n * Composable for formatting time stamps using current users locale and language\n *\n * @param {import('vue').MaybeRef<Date | 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(\n\ttimestamp: MaybeRef<Date|number> = Date.now(),\n\topts: MaybeRef<FormatDateOptions> = {},\n) {\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: number|undefined\n\n\tconst options = ref({\n\t\tformat: {\n\t\t\ttimeStyle: 'medium',\n\t\t\tdateStyle: 'short',\n\t\t} as Intl.DateTimeFormatOptions,\n\t\trelativeTime: 'long' as const,\n\t\tignoreSeconds: false,\n\t\t...toValue(opts),\n\t})\n\tconst wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...toValue(opts), ...options.value }))\n\n\t/** ECMA Date object of the timestamp */\n\tconst date = computed(() => new Date(toValue(timestamp)))\n\n\tconst formattedFullTime = computed<string>(() => {\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<string>(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tconst formatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })\n\n\t\t\tconst diff = date.value.getTime() - 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.value\n\t})\n\n\t// Set or clear interval if relative time is dis/enabled\n\twatchEffect(() => {\n\t\twindow.clearInterval(intervalId)\n\t\tintervalId = undefined\n\t\tif (wrappedOptions.value.relativeTime) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 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  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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\"\n\t\tv-text=\"formattedTime\" />\n</template>\n\n<script>\nimport { computed } from 'vue'\nimport { useFormatDateTime } from '../../composables/useFormatDateTime.ts'\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":["_createElementBlock","_toDisplayString"],"mappings":"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"}