@nextcloud/vue 8.14.0 → 8.15.0

package/dist/chunks/{NcContent-CQn8oXxp.mjs.map → NcContent-D2roywh0.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcContent-CQn8oXxp.mjs","sources":["../../src/components/NcContent/content-selected.svg?raw","../../src/components/NcContent/navigation-selected.svg?raw","../../src/components/NcContent/NcContent.vue"],"sourcesContent":["export default \"<!--\\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\\n  - SPDX-License-Identifier: AGPL-3.0-or-later\\n-->\\n<svg width=\\\"395\\\" height=\\\"314\\\" viewBox=\\\"0 0 395 314\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n<rect width=\\\"395\\\" height=\\\"314\\\" rx=\\\"11\\\" fill=\\\"#439DCD\\\"/>\\n<rect x=\\\"13\\\" y=\\\"51\\\" width=\\\"366\\\" height=\\\"248\\\" rx=\\\"8\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"22\\\" y=\\\"111\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"127\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"63\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"191\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"143\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"79\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"159\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"95\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"175\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M288 145C277.56 147.8 265.32 149 254 149C242.68 149 230.44 147.8 220 145L218 153C225.44 155 234 156.32 242 157V209H250V185H258V209H266V157C274 156.32 282.56 155 290 153L288 145ZM254 145C258.4 145 262 141.4 262 137C262 132.6 258.4 129 254 129C249.6 129 246 132.6 246 137C246 141.4 249.6 145 254 145Z\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M43.5358 13C38.6641 13 34.535 16.2415 33.2552 20.6333C32.143 18.3038 29.7327 16.6718 26.9564 16.6718C23.1385 16.6718 20 19.7521 20 23.4993C20 27.2465 23.1385 30.3282 26.9564 30.3282C29.7327 30.3282 32.1429 28.6952 33.2552 26.3653C34.535 30.7575 38.6641 34 43.5358 34C48.3715 34 52.4796 30.8064 53.7921 26.4637C54.9249 28.7407 57.3053 30.3282 60.0421 30.3282C63.8601 30.3282 67 27.2465 67 23.4993C67 19.7521 63.8601 16.6718 60.0421 16.6718C57.3053 16.6718 54.9249 18.2583 53.7921 20.5349C52.4796 16.1926 48.3715 13 43.5358 13ZM43.5358 17.0079C47.2134 17.0079 50.1512 19.8899 50.1512 23.4993C50.1512 27.1087 47.2134 29.9921 43.5358 29.9921C39.8583 29.9921 36.9218 27.1087 36.9218 23.4993C36.9218 19.8899 39.8583 17.0079 43.5358 17.0079ZM26.9564 20.6797C28.5677 20.6797 29.8307 21.9179 29.8307 23.4993C29.8307 25.0807 28.5677 26.3203 26.9564 26.3203C25.3452 26.3203 24.0836 25.0807 24.0836 23.4993C24.0836 21.9179 25.3452 20.6797 26.9564 20.6797ZM60.0421 20.6797C61.6534 20.6797 62.9164 21.9179 62.9164 23.4993C62.9164 25.0807 61.6534 26.3203 60.0421 26.3203C58.4309 26.3203 57.1693 25.0807 57.1693 23.4993C57.1693 21.9179 58.4309 20.6797 60.0421 20.6797Z\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"79\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"99\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"119\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"139\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"159\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"179\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M12 0C5.37258 0 0 5.37259 0 12V302C0 308.627 5.37259 314 12 314H383C389.627 314 395 308.627 395 302V12C395 5.37258 389.627 0 383 0H12ZM140 44C132.268 44 126 50.268 126 58V292C126 299.732 132.268 306 140 306H372C379.732 306 386 299.732 386 292V58C386 50.268 379.732 44 372 44H140Z\\\" fill=\\\"black\\\" fill-opacity=\\\"0.35\\\"/>\\n</svg>\\n\"","export default \"<!--\\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\\n  - SPDX-License-Identifier: AGPL-3.0-or-later\\n-->\\n<svg width=\\\"395\\\" height=\\\"314\\\" viewBox=\\\"0 0 395 314\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n<rect width=\\\"395\\\" height=\\\"314\\\" rx=\\\"11\\\" fill=\\\"#439DCD\\\"/>\\n<rect x=\\\"13\\\" y=\\\"51\\\" width=\\\"366\\\" height=\\\"248\\\" rx=\\\"8\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"22\\\" y=\\\"111\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"127\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"63\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"191\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"143\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"79\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"159\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"95\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"175\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M288 145C277.56 147.8 265.32 149 254 149C242.68 149 230.44 147.8 220 145L218 153C225.44 155 234 156.32 242 157V209H250V185H258V209H266V157C274 156.32 282.56 155 290 153L288 145ZM254 145C258.4 145 262 141.4 262 137C262 132.6 258.4 129 254 129C249.6 129 246 132.6 246 137C246 141.4 249.6 145 254 145Z\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M43.5358 13C38.6641 13 34.535 16.2415 33.2552 20.6333C32.143 18.3038 29.7327 16.6718 26.9564 16.6718C23.1385 16.6718 20 19.7521 20 23.4993C20 27.2465 23.1385 30.3282 26.9564 30.3282C29.7327 30.3282 32.1429 28.6952 33.2552 26.3653C34.535 30.7575 38.6641 34 43.5358 34C48.3715 34 52.4796 30.8064 53.7921 26.4637C54.9249 28.7407 57.3053 30.3282 60.0421 30.3282C63.8601 30.3282 67 27.2465 67 23.4993C67 19.7521 63.8601 16.6718 60.0421 16.6718C57.3053 16.6718 54.9249 18.2583 53.7921 20.5349C52.4796 16.1926 48.3715 13 43.5358 13ZM43.5358 17.0079C47.2134 17.0079 50.1512 19.8899 50.1512 23.4993C50.1512 27.1087 47.2134 29.9921 43.5358 29.9921C39.8583 29.9921 36.9218 27.1087 36.9218 23.4993C36.9218 19.8899 39.8583 17.0079 43.5358 17.0079ZM26.9564 20.6797C28.5677 20.6797 29.8307 21.9179 29.8307 23.4993C29.8307 25.0807 28.5677 26.3203 26.9564 26.3203C25.3452 26.3203 24.0836 25.0807 24.0836 23.4993C24.0836 21.9179 25.3452 20.6797 26.9564 20.6797ZM60.0421 20.6797C61.6534 20.6797 62.9164 21.9179 62.9164 23.4993C62.9164 25.0807 61.6534 26.3203 60.0421 26.3203C58.4309 26.3203 57.1693 25.0807 57.1693 23.4993C57.1693 21.9179 58.4309 20.6797 60.0421 20.6797Z\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"79\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"99\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"119\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"139\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"159\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"179\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M12 0C5.37258 0 0 5.37259 0 12V302C0 308.627 5.37259 314 12 314H383C389.627 314 395 308.627 395 302V12C395 5.37258 389.627 0 383 0H12ZM112 44C119.732 44 126 50.268 126 58V292C126 299.732 119.732 306 112 306H20C12.268 306 6 299.732 6 292V58C6 50.268 12.268 44 20 44H112Z\\\" fill=\\\"black\\\" fill-opacity=\\\"0.35\\\"/>\\n</svg>\\n\"","<!--\n  - SPDX-FileCopyrightText: 2018 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 provides the default container of all apps.\nIt _MUST_ be used as the main wrapper of your app.\nIt includes the Navigation, the App content and the Sidebar.\n\nIt also will set the skip content buttons needed for accessibility.\n\n### Standard usage\n\n```vue\n\t<template>\n\t\t<NcContent app-name=\"forms\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationNew text=\"Create article\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"My navigation\" title=\"My title\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t\t<NcAppContent>\n\t\t\t\t<h2>Your main app content here</h2>\n\t\t\t\t<NcButton @click=\"opened = !opened\">Toggle sidebar</NcButton>\n\t\t\t</NcAppContent>\n\t\t\t<NcAppSidebar v-if=\"opened\" name=\"cat-picture.jpg\" @close=\"opened=false\"></NcAppSidebar>\n\t\t</NcContent>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topened: false,\n\t\t\t}\n\t\t}\n\t}\n\t</script>\n```\n\n</docs>\n\n<template>\n\t<div id=\"content-vue\" :class=\"['content', `app-${appName.toLowerCase()}`]\">\n\t\t<!-- TODO: with vue3 the `selector` attribute needs to be changed to `to=\"#skip-actions\"` -->\n\t\t<Teleport selector=\"#skip-actions\">\n\t\t\t<div class=\"vue-skip-actions__container\">\n\t\t\t\t<div class=\"vue-skip-actions__headline\">\n\t\t\t\t\t{{ t('Keyboard navigation help') }}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"vue-skip-actions__buttons\">\n\t\t\t\t\t<NcButton v-show=\"hasAppNavigation\"\n\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\thref=\"#app-navigation-vue\"\n\t\t\t\t\t\t@click.prevent=\"openAppNavigation\"\n\t\t\t\t\t\t@focusin=\"currentFocus = 'navigation'\"\n\t\t\t\t\t\t@mouseover=\"currentFocus = 'navigation'\">\n\t\t\t\t\t\t{{ t('Skip to app navigation') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton type=\"tertiary\"\n\t\t\t\t\t\thref=\"#app-content-vue\"\n\t\t\t\t\t\t@focusin=\"currentFocus = 'content'\"\n\t\t\t\t\t\t@mouseover=\"currentFocus = 'content'\">\n\t\t\t\t\t\t{{ t('Skip to main content') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t\t<NcIconSvgWrapper v-show=\"!isMobile\"\n\t\t\t\t\tclass=\"vue-skip-actions__image\"\n\t\t\t\t\t:svg=\"currentImage\"\n\t\t\t\t\tsize=\"auto\" />\n\t\t\t</div>\n\t\t\t&nbsp;<!-- TODO: Remove with vue3! This is a bug of vue-simple-portal that does not allow a single child, ref LinusBorg/vue-simple-portal#20 -->\n\t\t</Teleport>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nimport { emit } from '@nextcloud/event-bus'\n// TODO: This is built-in for vue3 just drop the import\nimport { Portal as Teleport } from '@linusborg/vue-simple-portal'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\n/* eslint-disable import/no-unresolved */\nimport contentSvg from './content-selected.svg?raw'\nimport navigationSvg from './navigation-selected.svg?raw'\n/* eslint-enable import/no-unresolved */\n\nexport default {\n\tname: 'NcContent',\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tTeleport,\n\t},\n\tprovide() {\n\t\treturn {\n\t\t\t'NcContent:setHasAppNavigation': this.setAppNavigation,\n\t\t\t'NcContent:selector': '#content-vue',\n\t\t}\n\t},\n\tprops: {\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n\tsetup() {\n\t\tconst isMobile = useIsMobile()\n\t\treturn {\n\t\t\tisMobile,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\thasAppNavigation: false,\n\t\t\tcurrentFocus: '', // unknown\n\t\t}\n\t},\n\tcomputed: {\n\t\tcurrentImage() {\n\t\t\tif (this.currentFocus === 'navigation') {\n\t\t\t\treturn navigationSvg\n\t\t\t}\n\t\t\treturn contentSvg\n\t\t},\n\t},\n\tbeforeMount() {\n\t\tconst container = document.getElementById('skip-actions')\n\t\tif (container) {\n\t\t\t// clear default buttons\n\t\t\tcontainer.innerHTML = ''\n\t\t\t// add class for scoping styles\n\t\t\tcontainer.classList.add('vue-skip-actions')\n\t\t}\n\t},\n\tmethods: {\n\t\tt,\n\t\topenAppNavigation() {\n\t\t\temit('toggle-navigation', { open: true })\n\t\t\tthis.$nextTick(() => {\n\t\t\t\twindow.location.hash = 'app-navigation-vue'\n\t\t\t\t// we need to manually focus if the window location is already set to the app-navigation then it will not focus again\n\t\t\t\tdocument.getElementById('app-navigation-vue').focus()\n\t\t\t})\n\t\t},\n\t\tsetAppNavigation(value) {\n\t\t\tthis.hasAppNavigation = value\n\t\t\t// If app navigation is available and no focus was set yet, set it to navigation as it is the first button\n\t\t\tif (this.currentFocus === '') {\n\t\t\t\tthis.currentFocus = 'navigation'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n// Remove server stylings and add a backdrop\n#skip-actions.vue-skip-actions:focus-within {\n\ttop: 0!important;\n\tleft: 0!important;\n\twidth: 100vw;\n\theight: 100vh;\n\tpadding: var(--body-container-margin)!important;\n\tbackdrop-filter: brightness(50%);\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.vue-skip-actions {\n\t&__container {\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-radius: var(--border-radius-large);\n\t\tpadding: 22px;\n\t}\n\n\t&__headline {\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t\tmargin-bottom: 12px;\n\t}\n\n\t&__buttons {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 12px;\n\n\t\t> * {\n\t\t\t// Ensure buttons are same width on smaller screens (container wrapped)\n\t\t\tflex: 1 0 fit-content;\n\t\t}\n\t}\n\n\t&__image {\n\t\tmargin-top: 12px;\n\t}\n}\n\n.content {\n\tbox-sizing: border-box;\n\tmargin: var(--body-container-margin);\n\tmargin-top: 50px;\n\tdisplay: flex;\n\twidth: calc(100% - var(--body-container-margin) * 2);\n\tborder-radius: var(--body-container-radius);\n\theight: var(--body-height);\n\toverflow: hidden;\n\tpadding: 0;\n\n\t&:not(.with-sidebar--full) {\n\t\tposition: fixed;\n\t}\n\n\t:deep(*) {\n\t\tbox-sizing: border-box;\n\t}\n}\n</style>\n"],"names":["Teleport"],"mappings":";;;;;;;;AAAA,MAAe,aAAA;ACAf,MAAe,gBAAA;ACyGf,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAAA;AAAAA,EACA;AAAA,EACA,UAAA;AACA,WAAA;AAAA,MACA,iCAAA,KAAA;AAAA,MACA,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,QAAA;AACA,UAAA,WAAA,YAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,MACA,cAAA;AAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA,IACA,eAAA;AACA,UAAA,KAAA,iBAAA,cAAA;AACA,eAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,cAAA;AACA,UAAA,YAAA,SAAA,eAAA,cAAA;AACA,QAAA,WAAA;AAEA,gBAAA,YAAA;AAEA,gBAAA,UAAA,IAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,SAAA;AAAA,IACA;AAAA,IACA,oBAAA;AACA,WAAA,qBAAA,EAAA,MAAA,KAAA,CAAA;AACA,WAAA,UAAA,MAAA;AACA,eAAA,SAAA,OAAA;AAEA,iBAAA,eAAA,oBAAA,EAAA,MAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IACA,iBAAA,OAAA;AACA,WAAA,mBAAA;AAEA,UAAA,KAAA,iBAAA,IAAA;AACA,aAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcContent-D2roywh0.mjs","sources":["../../src/components/NcContent/content-selected.svg?raw","../../src/components/NcContent/navigation-selected.svg?raw","../../src/components/NcContent/NcContent.vue"],"sourcesContent":["export default \"<!--\\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\\n  - SPDX-License-Identifier: AGPL-3.0-or-later\\n-->\\n<svg width=\\\"395\\\" height=\\\"314\\\" viewBox=\\\"0 0 395 314\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n<rect width=\\\"395\\\" height=\\\"314\\\" rx=\\\"11\\\" fill=\\\"#439DCD\\\"/>\\n<rect x=\\\"13\\\" y=\\\"51\\\" width=\\\"366\\\" height=\\\"248\\\" rx=\\\"8\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"22\\\" y=\\\"111\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"127\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"63\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"191\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"143\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"79\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"159\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"95\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"175\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M288 145C277.56 147.8 265.32 149 254 149C242.68 149 230.44 147.8 220 145L218 153C225.44 155 234 156.32 242 157V209H250V185H258V209H266V157C274 156.32 282.56 155 290 153L288 145ZM254 145C258.4 145 262 141.4 262 137C262 132.6 258.4 129 254 129C249.6 129 246 132.6 246 137C246 141.4 249.6 145 254 145Z\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M43.5358 13C38.6641 13 34.535 16.2415 33.2552 20.6333C32.143 18.3038 29.7327 16.6718 26.9564 16.6718C23.1385 16.6718 20 19.7521 20 23.4993C20 27.2465 23.1385 30.3282 26.9564 30.3282C29.7327 30.3282 32.1429 28.6952 33.2552 26.3653C34.535 30.7575 38.6641 34 43.5358 34C48.3715 34 52.4796 30.8064 53.7921 26.4637C54.9249 28.7407 57.3053 30.3282 60.0421 30.3282C63.8601 30.3282 67 27.2465 67 23.4993C67 19.7521 63.8601 16.6718 60.0421 16.6718C57.3053 16.6718 54.9249 18.2583 53.7921 20.5349C52.4796 16.1926 48.3715 13 43.5358 13ZM43.5358 17.0079C47.2134 17.0079 50.1512 19.8899 50.1512 23.4993C50.1512 27.1087 47.2134 29.9921 43.5358 29.9921C39.8583 29.9921 36.9218 27.1087 36.9218 23.4993C36.9218 19.8899 39.8583 17.0079 43.5358 17.0079ZM26.9564 20.6797C28.5677 20.6797 29.8307 21.9179 29.8307 23.4993C29.8307 25.0807 28.5677 26.3203 26.9564 26.3203C25.3452 26.3203 24.0836 25.0807 24.0836 23.4993C24.0836 21.9179 25.3452 20.6797 26.9564 20.6797ZM60.0421 20.6797C61.6534 20.6797 62.9164 21.9179 62.9164 23.4993C62.9164 25.0807 61.6534 26.3203 60.0421 26.3203C58.4309 26.3203 57.1693 25.0807 57.1693 23.4993C57.1693 21.9179 58.4309 20.6797 60.0421 20.6797Z\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"79\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"99\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"119\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"139\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"159\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"179\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M12 0C5.37258 0 0 5.37259 0 12V302C0 308.627 5.37259 314 12 314H383C389.627 314 395 308.627 395 302V12C395 5.37258 389.627 0 383 0H12ZM140 44C132.268 44 126 50.268 126 58V292C126 299.732 132.268 306 140 306H372C379.732 306 386 299.732 386 292V58C386 50.268 379.732 44 372 44H140Z\\\" fill=\\\"black\\\" fill-opacity=\\\"0.35\\\"/>\\n</svg>\\n\"","export default \"<!--\\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\\n  - SPDX-License-Identifier: AGPL-3.0-or-later\\n-->\\n<svg width=\\\"395\\\" height=\\\"314\\\" viewBox=\\\"0 0 395 314\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n<rect width=\\\"395\\\" height=\\\"314\\\" rx=\\\"11\\\" fill=\\\"#439DCD\\\"/>\\n<rect x=\\\"13\\\" y=\\\"51\\\" width=\\\"366\\\" height=\\\"248\\\" rx=\\\"8\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"22\\\" y=\\\"111\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"127\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"63\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"191\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"143\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"79\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"159\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"95\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"175\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M288 145C277.56 147.8 265.32 149 254 149C242.68 149 230.44 147.8 220 145L218 153C225.44 155 234 156.32 242 157V209H250V185H258V209H266V157C274 156.32 282.56 155 290 153L288 145ZM254 145C258.4 145 262 141.4 262 137C262 132.6 258.4 129 254 129C249.6 129 246 132.6 246 137C246 141.4 249.6 145 254 145Z\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M43.5358 13C38.6641 13 34.535 16.2415 33.2552 20.6333C32.143 18.3038 29.7327 16.6718 26.9564 16.6718C23.1385 16.6718 20 19.7521 20 23.4993C20 27.2465 23.1385 30.3282 26.9564 30.3282C29.7327 30.3282 32.1429 28.6952 33.2552 26.3653C34.535 30.7575 38.6641 34 43.5358 34C48.3715 34 52.4796 30.8064 53.7921 26.4637C54.9249 28.7407 57.3053 30.3282 60.0421 30.3282C63.8601 30.3282 67 27.2465 67 23.4993C67 19.7521 63.8601 16.6718 60.0421 16.6718C57.3053 16.6718 54.9249 18.2583 53.7921 20.5349C52.4796 16.1926 48.3715 13 43.5358 13ZM43.5358 17.0079C47.2134 17.0079 50.1512 19.8899 50.1512 23.4993C50.1512 27.1087 47.2134 29.9921 43.5358 29.9921C39.8583 29.9921 36.9218 27.1087 36.9218 23.4993C36.9218 19.8899 39.8583 17.0079 43.5358 17.0079ZM26.9564 20.6797C28.5677 20.6797 29.8307 21.9179 29.8307 23.4993C29.8307 25.0807 28.5677 26.3203 26.9564 26.3203C25.3452 26.3203 24.0836 25.0807 24.0836 23.4993C24.0836 21.9179 25.3452 20.6797 26.9564 20.6797ZM60.0421 20.6797C61.6534 20.6797 62.9164 21.9179 62.9164 23.4993C62.9164 25.0807 61.6534 26.3203 60.0421 26.3203C58.4309 26.3203 57.1693 25.0807 57.1693 23.4993C57.1693 21.9179 58.4309 20.6797 60.0421 20.6797Z\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"79\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"99\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"119\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"139\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"159\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"179\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M12 0C5.37258 0 0 5.37259 0 12V302C0 308.627 5.37259 314 12 314H383C389.627 314 395 308.627 395 302V12C395 5.37258 389.627 0 383 0H12ZM112 44C119.732 44 126 50.268 126 58V292C126 299.732 119.732 306 112 306H20C12.268 306 6 299.732 6 292V58C6 50.268 12.268 44 20 44H112Z\\\" fill=\\\"black\\\" fill-opacity=\\\"0.35\\\"/>\\n</svg>\\n\"","<!--\n  - SPDX-FileCopyrightText: 2018 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 provides the default container of all apps.\nIt _MUST_ be used as the main wrapper of your app.\nIt includes the Navigation, the App content and the Sidebar.\n\nIt also will set the skip content buttons needed for accessibility.\n\n### Standard usage\n\n```vue\n\t<template>\n\t\t<NcContent app-name=\"forms\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationNew text=\"Create article\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"My navigation\" title=\"My title\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t\t<NcAppContent>\n\t\t\t\t<h2>Your main app content here</h2>\n\t\t\t\t<NcButton @click=\"opened = !opened\">Toggle sidebar</NcButton>\n\t\t\t</NcAppContent>\n\t\t\t<NcAppSidebar v-if=\"opened\" name=\"cat-picture.jpg\" @close=\"opened=false\"></NcAppSidebar>\n\t\t</NcContent>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topened: false,\n\t\t\t}\n\t\t}\n\t}\n\t</script>\n```\n\n</docs>\n\n<template>\n\t<div id=\"content-vue\" :class=\"['content', `app-${appName.toLowerCase()}`]\">\n\t\t<!-- TODO: with vue3 the `selector` attribute needs to be changed to `to=\"#skip-actions\"` -->\n\t\t<Teleport selector=\"#skip-actions\">\n\t\t\t<div class=\"vue-skip-actions__container\">\n\t\t\t\t<div class=\"vue-skip-actions__headline\">\n\t\t\t\t\t{{ t('Keyboard navigation help') }}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"vue-skip-actions__buttons\">\n\t\t\t\t\t<NcButton v-show=\"hasAppNavigation\"\n\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\thref=\"#app-navigation-vue\"\n\t\t\t\t\t\t@click.prevent=\"openAppNavigation\"\n\t\t\t\t\t\t@focusin=\"currentFocus = 'navigation'\"\n\t\t\t\t\t\t@mouseover=\"currentFocus = 'navigation'\">\n\t\t\t\t\t\t{{ t('Skip to app navigation') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton type=\"tertiary\"\n\t\t\t\t\t\thref=\"#app-content-vue\"\n\t\t\t\t\t\t@focusin=\"currentFocus = 'content'\"\n\t\t\t\t\t\t@mouseover=\"currentFocus = 'content'\">\n\t\t\t\t\t\t{{ t('Skip to main content') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t\t<NcIconSvgWrapper v-show=\"!isMobile\"\n\t\t\t\t\tclass=\"vue-skip-actions__image\"\n\t\t\t\t\t:svg=\"currentImage\"\n\t\t\t\t\tsize=\"auto\" />\n\t\t\t</div>\n\t\t\t&nbsp;<!-- TODO: Remove with vue3! This is a bug of vue-simple-portal that does not allow a single child, ref LinusBorg/vue-simple-portal#20 -->\n\t\t</Teleport>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nimport { emit } from '@nextcloud/event-bus'\n// TODO: This is built-in for vue3 just drop the import\nimport { Portal as Teleport } from '@linusborg/vue-simple-portal'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\n/* eslint-disable import/no-unresolved */\nimport contentSvg from './content-selected.svg?raw'\nimport navigationSvg from './navigation-selected.svg?raw'\n/* eslint-enable import/no-unresolved */\n\nexport default {\n\tname: 'NcContent',\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tTeleport,\n\t},\n\tprovide() {\n\t\treturn {\n\t\t\t'NcContent:setHasAppNavigation': this.setAppNavigation,\n\t\t\t'NcContent:selector': '#content-vue',\n\t\t}\n\t},\n\tprops: {\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n\tsetup() {\n\t\tconst isMobile = useIsMobile()\n\t\treturn {\n\t\t\tisMobile,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\thasAppNavigation: false,\n\t\t\tcurrentFocus: '', // unknown\n\t\t}\n\t},\n\tcomputed: {\n\t\tcurrentImage() {\n\t\t\tif (this.currentFocus === 'navigation') {\n\t\t\t\treturn navigationSvg\n\t\t\t}\n\t\t\treturn contentSvg\n\t\t},\n\t},\n\tbeforeMount() {\n\t\tconst container = document.getElementById('skip-actions')\n\t\tif (container) {\n\t\t\t// clear default buttons\n\t\t\tcontainer.innerHTML = ''\n\t\t\t// add class for scoping styles\n\t\t\tcontainer.classList.add('vue-skip-actions')\n\t\t}\n\t},\n\tmethods: {\n\t\tt,\n\t\topenAppNavigation() {\n\t\t\temit('toggle-navigation', { open: true })\n\t\t\tthis.$nextTick(() => {\n\t\t\t\twindow.location.hash = 'app-navigation-vue'\n\t\t\t\t// we need to manually focus if the window location is already set to the app-navigation then it will not focus again\n\t\t\t\tdocument.getElementById('app-navigation-vue').focus()\n\t\t\t})\n\t\t},\n\t\tsetAppNavigation(value) {\n\t\t\tthis.hasAppNavigation = value\n\t\t\t// If app navigation is available and no focus was set yet, set it to navigation as it is the first button\n\t\t\tif (this.currentFocus === '') {\n\t\t\t\tthis.currentFocus = 'navigation'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n// Remove server stylings and add a backdrop\n#skip-actions.vue-skip-actions:focus-within {\n\ttop: 0!important;\n\tleft: 0!important;\n\twidth: 100vw;\n\theight: 100vh;\n\tpadding: var(--body-container-margin)!important;\n\tbackdrop-filter: brightness(50%);\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.vue-skip-actions {\n\t&__container {\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-radius: var(--border-radius-large);\n\t\tpadding: 22px;\n\t}\n\n\t&__headline {\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t\tmargin-bottom: 12px;\n\t}\n\n\t&__buttons {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 12px;\n\n\t\t> * {\n\t\t\t// Ensure buttons are same width on smaller screens (container wrapped)\n\t\t\tflex: 1 0 fit-content;\n\t\t}\n\t}\n\n\t&__image {\n\t\tmargin-top: 12px;\n\t}\n}\n\n.content {\n\tbox-sizing: border-box;\n\tmargin: var(--body-container-margin);\n\tmargin-top: 50px;\n\tdisplay: flex;\n\twidth: calc(100% - var(--body-container-margin) * 2);\n\tborder-radius: var(--body-container-radius);\n\theight: var(--body-height);\n\toverflow: hidden;\n\tpadding: 0;\n\n\t&:not(.with-sidebar--full) {\n\t\tposition: fixed;\n\t}\n\n\t:deep(*) {\n\t\tbox-sizing: border-box;\n\t}\n}\n</style>\n"],"names":["Teleport"],"mappings":";;;;;;;;AAAA,MAAe,aAAA;ACAf,MAAe,gBAAA;ACyGf,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAAA;AAAAA,EACA;AAAA,EACA,UAAA;AACA,WAAA;AAAA,MACA,iCAAA,KAAA;AAAA,MACA,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,QAAA;AACA,UAAA,WAAA,YAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,MACA,cAAA;AAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA,IACA,eAAA;AACA,UAAA,KAAA,iBAAA,cAAA;AACA,eAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,cAAA;AACA,UAAA,YAAA,SAAA,eAAA,cAAA;AACA,QAAA,WAAA;AAEA,gBAAA,YAAA;AAEA,gBAAA,UAAA,IAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,SAAA;AAAA,IACA;AAAA,IACA,oBAAA;AACA,WAAA,qBAAA,EAAA,MAAA,KAAA,CAAA;AACA,WAAA,UAAA,MAAA;AACA,eAAA,SAAA,OAAA;AAEA,iBAAA,eAAA,oBAAA,EAAA,MAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IACA,iBAAA,OAAA;AACA,WAAA,mBAAA;AAEA,UAAA,KAAA,iBAAA,IAAA;AACA,aAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcDashboardWidget-DnDLhRmV.cjs → NcDashboardWidget-CiQ9nKkn.cjs}

@@ -1,12 +1,12 @@
 require('../assets/NcDashboardWidget-CpstyXok.css');
 "use strict";
-const NcAvatar = require("./NcAvatar-BX8J9gZF.cjs");
-const NcDashboardWidgetItem = require("./NcDashboardWidgetItem-BorZC7ZL.cjs");
+const NcAvatar = require("./NcAvatar-CjtwClIu.cjs");
+const NcDashboardWidgetItem = require("./NcDashboardWidgetItem-BlmOcEja.cjs");
 const Components_NcEmptyContent = require("../Components/NcEmptyContent.cjs");
 const Check = require("./Check-DZc7keoa.cjs");
-const _l10n = require("./_l10n-CWsOa8mM.cjs");
+const _l10n = require("./_l10n-DdIq5MvQ.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-DbFIE4_M.cjs");
-_l10n.register(_l10n.t31);
+_l10n.register(_l10n.t32);
 const _sfc_main = {
   name: "NcDashboardWidget",
   components: {

package/dist/chunks/{NcDashboardWidget-DnDLhRmV.cjs.map → NcDashboardWidget-CiQ9nKkn.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidget-DnDLhRmV.cjs","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: var(--default-clickable-area);\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":["NcAvatar","NcDashboardWidgetItem","NcEmptyContent","Check","t"],"mappings":";;;;;;;;AA+NA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAA;AAAA,IACA,uBAAAC,sBAAA;AAAA,IACA,gBAAAC;AAAAA,IACA,OAAAC,MAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,MAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,WAAA;AACA,YAAA,IAAA,CAAA;AACA,iBAAA,UAAA,KAAA,UAAA;AACA,UAAA,MAAA,IAAA,CAAA,OAAA;AACA,eAAA,MAAA,QAAA,EAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,YAAA,UAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACA,KAAA,gBAAA,IACA,KAAA;AACA,aAAA,KAAA,MAAA,MAAA,GAAA,OAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA,KAAA,2BAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,2BAAA,IAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDashboardWidget-CiQ9nKkn.cjs","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: var(--default-clickable-area);\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":["NcAvatar","NcDashboardWidgetItem","NcEmptyContent","Check","t"],"mappings":";;;;;;;;AA+NA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAA;AAAA,IACA,uBAAAC,sBAAA;AAAA,IACA,gBAAAC;AAAAA,IACA,OAAAC,MAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,MAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,WAAA;AACA,YAAA,IAAA,CAAA;AACA,iBAAA,UAAA,KAAA,UAAA;AACA,UAAA,MAAA,IAAA,CAAA,OAAA;AACA,eAAA,MAAA,QAAA,EAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,YAAA,UAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACA,KAAA,gBAAA,IACA,KAAA;AACA,aAAA,KAAA,MAAA,MAAA,GAAA,OAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA,KAAA,2BAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,2BAAA,IAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcDashboardWidget-hTBgsnwG.mjs → NcDashboardWidget-eYMkaNge.mjs}

@@ -1,11 +1,11 @@
 import '../assets/NcDashboardWidget-CpstyXok.css';
-import { N as NcAvatar } from "./NcAvatar-BC884DnC.mjs";
-import { N as NcDashboardWidgetItem } from "./NcDashboardWidgetItem-CorJJt6-.mjs";
+import { N as NcAvatar } from "./NcAvatar-CLQ7_AQw.mjs";
+import { N as NcDashboardWidgetItem } from "./NcDashboardWidgetItem-BtIXF3nP.mjs";
 import NcEmptyContent from "../Components/NcEmptyContent.mjs";
 import { C as Check } from "./Check-PawIlCwa.mjs";
-import { r as register, k as t31, a as t } from "./_l10n-DDx8P-X1.mjs";
+import { r as register, k as t32, a as t } from "./_l10n-CG5VZvYT.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-D637Qkok.mjs";
-register(t31);
+register(t32);
 const _sfc_main = {
   name: "NcDashboardWidget",
   components: {

package/dist/chunks/{NcDashboardWidget-hTBgsnwG.mjs.map → NcDashboardWidget-eYMkaNge.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidget-hTBgsnwG.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: var(--default-clickable-area);\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":[],"mappings":";;;;;;;AA+NA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,WAAA;AACA,YAAA,IAAA,CAAA;AACA,iBAAA,UAAA,KAAA,UAAA;AACA,UAAA,MAAA,IAAA,CAAA,OAAA;AACA,eAAA,MAAA,QAAA,EAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,YAAA,UAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACA,KAAA,gBAAA,IACA,KAAA;AACA,aAAA,KAAA,MAAA,MAAA,GAAA,OAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA,KAAA,2BAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,2BAAA,IAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDashboardWidget-eYMkaNge.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: var(--default-clickable-area);\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":[],"mappings":";;;;;;;AA+NA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,WAAA;AACA,YAAA,IAAA,CAAA;AACA,iBAAA,UAAA,KAAA,UAAA;AACA,UAAA,MAAA,IAAA,CAAA,OAAA;AACA,eAAA,MAAA,QAAA,EAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,YAAA,UAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACA,KAAA,gBAAA,IACA,KAAA;AACA,aAAA,KAAA,MAAA,MAAA,GAAA,OAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA,KAAA,2BAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,2BAAA,IAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcDashboardWidgetItem-BorZC7ZL.cjs → NcDashboardWidgetItem-BlmOcEja.cjs}

@@ -1,7 +1,7 @@
 require('../assets/NcDashboardWidgetItem-Qe5SSOhA.css');
 "use strict";
-const NcAvatar = require("./NcAvatar-BX8J9gZF.cjs");
-const NcActions = require("./NcActions-DRSoPS6a.cjs");
+const NcAvatar = require("./NcAvatar-CjtwClIu.cjs");
+const NcActions = require("./NcActions-BanQsba7.cjs");
 const Components_NcActionButton = require("../Components/NcActionButton.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-DbFIE4_M.cjs");
 const _sfc_main = {

package/dist/chunks/{NcDashboardWidgetItem-BorZC7ZL.cjs.map → NcDashboardWidgetItem-BlmOcEja.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidgetItem-BorZC7ZL.cjs","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: var(--default-clickable-area);\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: var(--default-clickable-area);\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":["NcAvatar","NcActions","NcActionButton"],"mappings":";;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAA;AAAA,IACA,WAAAC,UAAA;AAAA,IACA,gBAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA;AAAA,QACA,IAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,UAAA;AACA,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,kBAAA,KAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,OAAA;AACA,UAAA,MAAA,OAAA,QAAA,cAAA,GAAA;AACA,cAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDashboardWidgetItem-BlmOcEja.cjs","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: var(--default-clickable-area);\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: var(--default-clickable-area);\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":["NcAvatar","NcActions","NcActionButton"],"mappings":";;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAA;AAAA,IACA,WAAAC,UAAA;AAAA,IACA,gBAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA;AAAA,QACA,IAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,UAAA;AACA,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,kBAAA,KAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,OAAA;AACA,UAAA,MAAA,OAAA,QAAA,cAAA,GAAA;AACA,cAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcDashboardWidgetItem-CorJJt6-.mjs → NcDashboardWidgetItem-BtIXF3nP.mjs}

@@ -1,6 +1,6 @@
 import '../assets/NcDashboardWidgetItem-Qe5SSOhA.css';
-import { N as NcAvatar } from "./NcAvatar-BC884DnC.mjs";
-import { N as NcActions } from "./NcActions-CL3YRRgz.mjs";
+import { N as NcAvatar } from "./NcAvatar-CLQ7_AQw.mjs";
+import { N as NcActions } from "./NcActions-jYBYK6WE.mjs";
 import NcActionButton from "../Components/NcActionButton.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-D637Qkok.mjs";
 const _sfc_main = {

package/dist/chunks/{NcDashboardWidgetItem-CorJJt6-.mjs.map → NcDashboardWidgetItem-BtIXF3nP.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidgetItem-CorJJt6-.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: var(--default-clickable-area);\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: var(--default-clickable-area);\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":[],"mappings":";;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA;AAAA,QACA,IAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,UAAA;AACA,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,kBAAA,KAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,OAAA;AACA,UAAA,MAAA,OAAA,QAAA,cAAA,GAAA;AACA,cAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDashboardWidgetItem-BtIXF3nP.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: var(--default-clickable-area);\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: var(--default-clickable-area);\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":[],"mappings":";;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA;AAAA,QACA,IAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,UAAA;AACA,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,kBAAA,KAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,OAAA;AACA,UAAA,MAAA,OAAA,QAAA,cAAA,GAAA;AACA,cAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcDateTime-K3Rie9qv.cjs → NcDateTime-C06to8gC.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 const Vue = require("vue");
 const l10n = require("@nextcloud/l10n");
-const _l10n = require("./_l10n-CWsOa8mM.cjs");
+const _l10n = require("./_l10n-DdIq5MvQ.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-DbFIE4_M.cjs");
 _l10n.register(_l10n.t2);
 const FEW_SECONDS_AGO = {

package/dist/chunks/{NcDateTime-K3Rie9qv.cjs.map → NcDateTime-C06to8gC.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDateTime-K3Rie9qv.cjs","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 { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } 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\ntype MaybeRef<T> = T | Ref<T>\n\n/**\n * Composable for formatting time stamps using current users locale and language\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(\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...unref(opts),\n\t})\n\tconst wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...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<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\twatch([wrappedOptions], () => {\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// 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 = 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":["t","ref","unref","computed","getCanonicalLocale","getLanguage","watch","onMounted","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"NcDateTime-C06to8gC.cjs","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 { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } 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\ntype MaybeRef<T> = T | Ref<T>\n\n/**\n * Composable for formatting time stamps using current users locale and language\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(\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...unref(opts),\n\t})\n\tconst wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...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<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\twatch([wrappedOptions], () => {\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// 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 = 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":["t","ref","unref","computed","getCanonicalLocale","getLanguage","watch","onMounted","onUnmounted"],"mappings":"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"}

package/dist/chunks/{NcDateTime-Eat0YWPN.mjs → NcDateTime-D63dAM9i.mjs}

@@ -1,6 +1,6 @@
 import { ref, unref, computed, watch, onMounted, onUnmounted } from "vue";
 import { getCanonicalLocale, getLanguage } from "@nextcloud/l10n";
-import { r as register, j as t2, a as t } from "./_l10n-DDx8P-X1.mjs";
+import { r as register, j as t2, a as t } from "./_l10n-CG5VZvYT.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-D637Qkok.mjs";
 register(t2);
 const FEW_SECONDS_AGO = {

package/dist/chunks/{NcDateTime-Eat0YWPN.mjs.map → NcDateTime-D63dAM9i.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDateTime-Eat0YWPN.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 { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } 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\ntype MaybeRef<T> = T | Ref<T>\n\n/**\n * Composable for formatting time stamps using current users locale and language\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(\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...unref(opts),\n\t})\n\tconst wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...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<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\twatch([wrappedOptions], () => {\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// 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 = 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":[],"mappings":"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"}
+{"version":3,"file":"NcDateTime-D63dAM9i.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 { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } 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\ntype MaybeRef<T> = T | Ref<T>\n\n/**\n * Composable for formatting time stamps using current users locale and language\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(\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...unref(opts),\n\t})\n\tconst wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...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<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\twatch([wrappedOptions], () => {\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// 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 = 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":[],"mappings":"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"}

package/dist/chunks/{NcEmojiPicker-ziqKge9K.mjs → NcEmojiPicker-C5QwBqju.mjs}

@@ -1,15 +1,15 @@
 import '../assets/NcEmojiPicker-ielwHIhs.css';
 import { Emoji, Picker, EmojiIndex } from "emoji-mart-vue-fast";
-import { r as register, x as t38, y as t33, z as t6, a as t } from "./_l10n-DDx8P-X1.mjs";
+import { r as register, z as t39, A as t34, n as t15, B as t6, a as t } from "./_l10n-CG5VZvYT.mjs";
 import { g as getCurrentSkinTone, s as setCurrentSkinTone } from "./emoji-V6ytyzoR.mjs";
-import { C as Color } from "./GenColors-DtEnxSd9.mjs";
+import { C as Color } from "./GenColors-BV6-FB5-.mjs";
 import data from "emoji-mart-vue-fast/data/all.json";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-D637Qkok.mjs";
 import NcButton from "../Components/NcButton.mjs";
-import { N as NcColorPicker } from "./NcColorPicker-D7awy8o_.mjs";
+import { N as NcColorPicker } from "./NcColorPicker-19JdVR99.mjs";
 import { N as NcPopover } from "./NcPopover-VxUr4c6P.mjs";
-import { N as NcTextField } from "./NcTextField-CjEhJrIE.mjs";
-register(t6, t33, t38);
+import { N as NcTextField } from "./NcTextField-DCDVcnqT.mjs";
+register(t6, t15, t34, t39);
 const _sfc_main$1 = {
   name: "CircleIcon",
   emits: ["click"],