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

package/dist/chunks/NcContent-fGj1oSM5.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcContent-fGj1oSM5.cjs","sources":["../../src/components/NcContent/content-selected.svg?raw","../../src/components/NcContent/navigation-selected.svg?raw","../../src/components/NcContent/NcContent.vue"],"sourcesContent":["export default \"<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 \"<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 - @copyright Copyright (c) 2018 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n\n### General description\n\nThis component 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<!-- Todo: Bring back once migrated\n\t\t\t<NcAppSidebar v-if=\"opened\" name=\"cat-picture.jpg\" @close=\"opened=false\"></NcAppSidebar>\n\t\t\t-->\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<Teleport to=\"#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'\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},\n\tprovide() {\n\t\treturn {\n\t\t\t'NcContent:setHasAppNavigation': this.setAppNavigation,\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\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":["contentSvg","navigationSvg","_sfc_main","NcButton","NcIconSvgWrapper","container","eventBus","_hoisted_1","_hoisted_2","_hoisted_3","vue","$props","_cache","$event","$data","$options"],"mappings":";;;AAAA,MAAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCAAC,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCyHAC,IAAA;AAAA,EACC,MAAA;AAAA;IAEC,UAAAC,EAAA;AAAA,IACA,kBAAAC,EAAA;AAAA;EAED,UAAA;AACC,WAAA;AAAA;IAEA;AAAA;EAED,OAAA;AAAA,IACC,SAAA;AAAA;;;;EAKD,QAAA;AAEC,WAAA;AAAA,MACC;IACD;AAAA;EAED,OAAA;AACC,WAAA;AAAA;;;IAGA;AAAA;EAED,UAAA;AAAA,IACC,eAAA;AACC,aAAA,KAAA,iBAAA,eACCH,IAEDD;AAAA;;;;UAOAK,EAAA,YAAA,IAEAA,EAAA,UAAA,IAAA,kBAAA;AAAA;EAGF,SAAA;AAAA;IAEC,oBAAA;AACC,MAAAC,EAAA,KAAA,qBAAA,EAAA,MAAA,GAAA,CAAA,GACA,KAAA,UAAA,MAAA;AACC,eAAA,SAAA,OAAA;;;;;;;AAaJ,GA5GQC,IAAA,EAAA,OAAA,8BAAA,GACCC,IAAA,EAAA,OAAA,6BAAA,GAGAC,IAAA,EAAA,OAAA,4BAAA;;;;IANH,IAAA;AAAA,IAAkB,OAAAC,EAAA,eAAA,CAAA,WAAA,OAAAC,EAAA,QAAA,YAAA,CAAA,EAAA,CAAA;AAAA;;MAErBD,EAAA,mBAAA,OAAAH,GAAA;AAAA;QAICG,EAAA,mBAAA,OAAAD,GAAA;AAAA;YAEE,MAAA;AAAA,YACA,MAAA;AAAA;YAEC,WAAAG,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAC,EAAA,eAAA;AAAA,YACA,aAAAF,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAC,EAAA,eAAA;AAAA;YAvFP,SAAAJ,EAAA,QAAA,MAAA;AAAA,cAAAA,EAAA,gBAAAA,EAAA,gBAAAK,EAAA,EAAA,wBAAA,CAAA,GAAA,CAAA;AAAA;;;;;;YA0Fe,MAAA;AAAA,YACT,MAAA;AAAA,YACC,WAAAH,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAC,EAAA,eAAA;AAAA,YACA,aAAAF,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAC,EAAA,eAAA;AAAA;YA7FP,SAAAJ,EAAA,QAAA,MAAA;AAAA,cAAAA,EAAA,gBAAAA,EAAA,gBAAAK,EAAA,EAAA,sBAAA,CAAA,GAAA,CAAA;AAAA;;;;;UAkGK,OAAA;AAAA,UACC,KAAAA,EAAA;AAAA,UACD,MAAA;AAAA;;;;MApGLL,EAAA,gBAAA,KAAA;AAAA;;;;;;"}

package/dist/chunks/NcCounterBubble-0pCAxQl7.cjs

@@ -1,40 +0,0 @@
-var d = require("../assets/NcCounterBubble-rgkmqN46.css");
-const e = require("vue"), n = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), u = {
-  name: "NcCounterBubble",
-  props: {
-    type: {
-      type: String,
-      default: "",
-      validator(t) {
-        return ["highlighted", "outlined", ""].indexOf(t) !== -1;
-      }
-    },
-    /**
-     * Specifies whether the component is used within a component that is
-     * active and therefore has a primary background. Inverts the color of
-     * this component when that is the case.
-     */
-    active: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  computed: {
-    counterClassObject() {
-      return {
-        "counter-bubble__counter--highlighted": this.type === "highlighted",
-        "counter-bubble__counter--outlined": this.type === "outlined",
-        active: this.active
-      };
-    }
-  }
-};
-function o(t, l, i, s, a, r) {
-  return e.openBlock(), e.createElementBlock("div", {
-    class: e.normalizeClass([r.counterClassObject, "counter-bubble__counter"])
-  }, [
-    e.renderSlot(t.$slots, "default", {}, void 0, !0)
-  ], 2);
-}
-const c = /* @__PURE__ */ n._export_sfc(u, [["render", o], ["__scopeId", "data-v-b318b0e4"]]);
-exports.NcCounterBubble = c;

package/dist/chunks/NcCounterBubble-0pCAxQl7.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcCounterBubble-0pCAxQl7.cjs","sources":["../../src/components/NcCounterBubble/NcCounterBubble.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n <docs>\n\n### Normal Counter\n\n```\n<NcCounterBubble>314+</NcCounterBubble>\n```\n\n### Outlined Counter (e.g team mentions)\n\n```\n<NcCounterBubble type=\"outlined\">314+</NcCounterBubble>\n```\n\n### Highlighted Counter (e.g direct mentions)\n\n```\n<NcCounterBubble type=\"highlighted\">314+</NcCounterBubble>\n```\n\n</docs>\n\n<template>\n\t<div :class=\"counterClassObject\"\n\t\tclass=\"counter-bubble__counter\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n\nexport default {\n\tname: 'NcCounterBubble',\n\n\tprops: {\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the component is used within a component that is\n\t\t * active and therefore has a primary background. Inverts the color of\n\t\t * this component when that is the case.\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcounterClassObject() {\n\t\t\treturn {\n\t\t\t\t'counter-bubble__counter--highlighted': this.type === 'highlighted',\n\t\t\t\t'counter-bubble__counter--outlined': this.type === 'outlined',\n\t\t\t\tactive: this.active,\n\t\t\t}\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.counter-bubble__counter {\n\tfont-size: calc(var(--default-font-size) * .8);\n\toverflow: hidden;\n\twidth: fit-content;\n\tmax-width: $clickable-area;\n\ttext-align: center;\n\ttext-overflow: ellipsis;\n\tline-height: 1em;\n\tpadding: 4px 6px;\n\tborder-radius: var(--border-radius-pill);\n\tbackground-color: var(--color-primary-element-light);\n\tfont-weight: bold;\n\tcolor: var(--color-primary-element-light-text);\n\n\t& .active {\n\t\tcolor: var(--color-main-background);\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t&--highlighted {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: var(--color-primary-element);\n\t}\n\n\t&--highlighted.active {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground-color: var(--color-main-background);\n\t}\n\n\t&--outlined {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground: transparent;\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n\t&--outlined.active {\n\t\tcolor: var(--color-main-background);\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","value","vue","$options"],"mappings":";mFAqDAA,IAAA;AAAA;EAGC,OAAA;AAAA;;;MAIE,UAAAC,GAAA;;;;;;;;;IAUD,QAAA;AAAA;;;;EAMD,UAAA;AAAA,IACC,qBAAA;AACC,aAAA;AAAA,QACC,wCAAA,KAAA,SAAA;AAAA;QAEA,QAAA,KAAA;AAAA,MACD;AAAA;;AAGH;;;IAxCO,OAAAC,EAAA,eAAA,CAAAC,EAAA,oBAAA,yBAAA,CAAA;AAAA;;;;;;"}

package/dist/chunks/NcCounterBubble-w6SmwTWu.mjs

@@ -1,44 +0,0 @@
-import "../assets/NcCounterBubble-rgkmqN46.css";
-import { openBlock as o, createElementBlock as r, normalizeClass as n, renderSlot as c } from "vue";
-import { _ as u } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
-const l = {
-  name: "NcCounterBubble",
-  props: {
-    type: {
-      type: String,
-      default: "",
-      validator(e) {
-        return ["highlighted", "outlined", ""].indexOf(e) !== -1;
-      }
-    },
-    /**
-     * Specifies whether the component is used within a component that is
-     * active and therefore has a primary background. Inverts the color of
-     * this component when that is the case.
-     */
-    active: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  computed: {
-    counterClassObject() {
-      return {
-        "counter-bubble__counter--highlighted": this.type === "highlighted",
-        "counter-bubble__counter--outlined": this.type === "outlined",
-        active: this.active
-      };
-    }
-  }
-};
-function i(e, a, s, d, p, t) {
-  return o(), r("div", {
-    class: n([t.counterClassObject, "counter-bubble__counter"])
-  }, [
-    c(e.$slots, "default", {}, void 0, !0)
-  ], 2);
-}
-const f = /* @__PURE__ */ u(l, [["render", i], ["__scopeId", "data-v-b318b0e4"]]);
-export {
-  f as N
-};

package/dist/chunks/NcCounterBubble-w6SmwTWu.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcCounterBubble-w6SmwTWu.mjs","sources":["../../src/components/NcCounterBubble/NcCounterBubble.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n <docs>\n\n### Normal Counter\n\n```\n<NcCounterBubble>314+</NcCounterBubble>\n```\n\n### Outlined Counter (e.g team mentions)\n\n```\n<NcCounterBubble type=\"outlined\">314+</NcCounterBubble>\n```\n\n### Highlighted Counter (e.g direct mentions)\n\n```\n<NcCounterBubble type=\"highlighted\">314+</NcCounterBubble>\n```\n\n</docs>\n\n<template>\n\t<div :class=\"counterClassObject\"\n\t\tclass=\"counter-bubble__counter\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n\nexport default {\n\tname: 'NcCounterBubble',\n\n\tprops: {\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the component is used within a component that is\n\t\t * active and therefore has a primary background. Inverts the color of\n\t\t * this component when that is the case.\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcounterClassObject() {\n\t\t\treturn {\n\t\t\t\t'counter-bubble__counter--highlighted': this.type === 'highlighted',\n\t\t\t\t'counter-bubble__counter--outlined': this.type === 'outlined',\n\t\t\t\tactive: this.active,\n\t\t\t}\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.counter-bubble__counter {\n\tfont-size: calc(var(--default-font-size) * .8);\n\toverflow: hidden;\n\twidth: fit-content;\n\tmax-width: $clickable-area;\n\ttext-align: center;\n\ttext-overflow: ellipsis;\n\tline-height: 1em;\n\tpadding: 4px 6px;\n\tborder-radius: var(--border-radius-pill);\n\tbackground-color: var(--color-primary-element-light);\n\tfont-weight: bold;\n\tcolor: var(--color-primary-element-light-text);\n\n\t& .active {\n\t\tcolor: var(--color-main-background);\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t&--highlighted {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: var(--color-primary-element);\n\t}\n\n\t&--highlighted.active {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground-color: var(--color-main-background);\n\t}\n\n\t&--outlined {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground: transparent;\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n\t&--outlined.active {\n\t\tcolor: var(--color-main-background);\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","value","normalizeClass","$options"],"mappings":";;;AAqDA,MAAAA,IAAA;AAAA;EAGC,OAAA;AAAA;;;MAIE,UAAAC,GAAA;;;;;;;;;IAUD,QAAA;AAAA;;;;EAMD,UAAA;AAAA,IACC,qBAAA;AACC,aAAA;AAAA,QACC,wCAAA,KAAA,SAAA;AAAA;QAEA,QAAA,KAAA;AAAA,MACD;AAAA;;AAGH;;;IAxCO,OAAAC,EAAA,CAAAC,EAAA,oBAAA,yBAAA,CAAA;AAAA;;;;;"}

package/dist/chunks/NcDashboardWidget-DC4_9Yv_.mjs

@@ -1,169 +0,0 @@
-import "../assets/NcDashboardWidget-7x3QrWFu.css";
-import { N } from "./NcAvatar-paLjF9Tc.mjs";
-import { N as I } from "./NcDashboardWidgetItem-TD0N9xlv.mjs";
-import { N as b } from "./NcEmptyContent-Dvt4jhjb.mjs";
-import { C as M } from "./Check-hentWFPd.mjs";
-import { r as w, k as E, a as k } from "./_l10n-JmazR_zZ.mjs";
-import { resolveComponent as m, openBlock as n, createElementBlock as s, createBlock as p, withCtx as u, renderSlot as i, createVNode as c, createCommentVNode as d, createElementVNode as a, Fragment as y, renderList as f, mergeProps as v, toHandlers as S, toDisplayString as A, pushScopeId as x, popScopeId as D } from "vue";
-import { _ as B } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
-w(E);
-const W = {
-  name: "NcDashboardWidget",
-  components: {
-    NcAvatar: N,
-    NcDashboardWidgetItem: I,
-    NcEmptyContent: b,
-    Check: M
-  },
-  props: {
-    /**
-     * An array containing the items to show (specific structure must be respected,
-     * except if you override item rendering in the default slot).
-     */
-    items: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * If this is set, a "show more" text is displayed on the widget's bottom.
-     * It's a link pointing to this URL.
-     */
-    showMoreUrl: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The text of show more button.
-     *
-     * Expected to be in the form "More {itemName} …"
-     */
-    showMoreLabel: {
-      type: String,
-      default: k("More items …")
-    },
-    /**
-     * A boolean to put the widget in a loading state.
-     */
-    loading: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * An object containing context menu entries that will be displayed for each item.
-     */
-    itemMenu: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * Whether both the items and the empty content message are shown.
-     * Usefull for e.g. showing "No mentions" and a list of elements.
-     */
-    showItemsAndEmptyContent: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The text to show in the empty content area.
-     */
-    emptyContentMessage: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The text to show in the half empty content area.
-     */
-    halfEmptyContentMessage: {
-      type: String,
-      default: ""
-    }
-  },
-  computed: {
-    // forward menu events to my parent
-    handlers() {
-      const e = {};
-      for (const l in this.itemMenu)
-        e[l] = (t) => {
-          this.$emit(l, t);
-        };
-      return e;
-    },
-    displayedItems() {
-      const e = this.showMoreUrl && this.items.length >= this.maxItemNumber ? this.maxItemNumber - 1 : this.maxItemNumber;
-      return this.items.slice(0, e);
-    },
-    showHalfEmptyContentArea() {
-      return this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0;
-    },
-    halfEmptyContentString() {
-      return this.halfEmptyContentMessage || this.emptyContentMessage;
-    },
-    maxItemNumber() {
-      return this.showItemsAndEmptyContent ? 5 : 7;
-    },
-    showMore() {
-      return this.showMoreUrl && this.items.length >= this.maxItemNumber;
-    }
-  }
-}, U = (e) => (x("data-v-b0ac6ae2"), e = e(), D(), e), H = { class: "dashboard-widget" }, L = { key: 1 }, V = /* @__PURE__ */ U(() => /* @__PURE__ */ a("div", { class: "item__details" }, [
-  /* @__PURE__ */ a("h3", null, " "),
-  /* @__PURE__ */ a("p", { class: "message" }, "   ")
-], -1)), j = ["href"];
-function z(e, l, t, F, O, o) {
-  const g = m("Check"), h = m("NcEmptyContent"), _ = m("NcDashboardWidgetItem"), C = m("NcAvatar");
-  return n(), s("div", H, [
-    o.showHalfEmptyContentArea ? (n(), p(h, {
-      key: 0,
-      description: o.halfEmptyContentString,
-      class: "half-screen"
-    }, {
-      icon: u(() => [
-        i(e.$slots, "halfEmptyContentIcon", {}, () => [
-          c(g)
-        ], !0)
-      ]),
-      _: 3
-    }, 8, ["description"])) : d("", !0),
-    a("ul", null, [
-      (n(!0), s(y, null, f(o.displayedItems, (r) => (n(), s("li", {
-        key: r.id
-      }, [
-        i(e.$slots, "default", { item: r }, () => [
-          c(_, v(r, { "item-menu": t.itemMenu }, S(o.handlers)), null, 16, ["item-menu"])
-        ], !0)
-      ]))), 128))
-    ]),
-    t.loading ? (n(), s("div", L, [
-      (n(), s(y, null, f(7, (r) => a("div", {
-        key: r,
-        class: "item-list__entry"
-      }, [
-        c(C, {
-          class: "item-avatar",
-          size: 44
-        }),
-        V
-      ])), 64))
-    ])) : t.items.length === 0 ? i(e.$slots, "empty-content", { key: 2 }, () => [
-      t.emptyContentMessage ? (n(), p(h, {
-        key: 0,
-        description: t.emptyContentMessage
-      }, {
-        icon: u(() => [
-          i(e.$slots, "emptyContentIcon", {}, void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["description"])) : d("", !0)
-    ], !0) : o.showMore ? (n(), s("a", {
-      key: 3,
-      href: t.showMoreUrl,
-      target: "_blank",
-      class: "more",
-      tabindex: "0"
-    }, A(t.showMoreLabel), 9, j)) : d("", !0)
-  ]);
-}
-const X = /* @__PURE__ */ B(W, [["render", z], ["__scopeId", "data-v-b0ac6ae2"]]);
-export {
-  X as N
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcDashboardWidget-DC4_9Yv_.mjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Julien Veyssier <eneiluj@posteo.net>\n -\n - @author Julien Veyssier <eneiluj@posteo.net>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\n\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t},\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t<!-- This element is shown if we have items, but want to show a general message as well.\n\t\tCan be used e.g. to show \"No mentions\" on top of the item list. -->\n\t\t<NcEmptyContent v-if=\"showHalfEmptyContentArea\"\n\t\t\t:description=\"halfEmptyContentString\"\n\t\t\tclass=\"half-screen\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot The icon to show in the half empty content area. -->\n\t\t\t\t<slot name=\"halfEmptyContentIcon\">\n\t\t\t\t\t<Check />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t</NcEmptyContent>\n\t\t<!-- The list of items to show. -->\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t<!-- @slot The default slot can be optionally overridden. It contains the template of one item. -->\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem v-bind=\"item\"\n\t\t\t\t\t\t:item-menu=\"itemMenu\"\n\t\t\t\t\t\tv-on=\"handlers\" />\n\t\t\t\t</slot>\n\t\t\t</li>\n\t\t</ul>\n\t\t<!-- While the widget is loading, we show a list of placeholder items. -->\n\t\t<div v-if=\"loading\">\n\t\t\t<div v-for=\"i in 7\" :key=\"i\" class=\"item-list__entry\">\n\t\t\t\t<NcAvatar class=\"item-avatar\" :size=\"44\" />\n\t\t\t\t<div class=\"item__details\">\n\t\t\t\t\t<h3>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent v-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<!-- @slot The icon to show in the empty content area. -->\n\t\t\t\t\t<slot name=\"emptyContentIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</slot>\n\t\t<!-- A \"show more\" link, e.g. to navigate to the main app belonging to this widget. -->\n\t\t<a v-else-if=\"showMore\"\n\t\t\t:href=\"showMoreUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tclass=\"more\"\n\t\t\ttabindex=\"0\">\n\t\t\t{{ showMoreLabel }}\n\t\t</a>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\n\nimport Check from 'vue-material-design-icons/Check.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcDashboardWidget',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcDashboardWidgetItem,\n\t\tNcEmptyContent,\n\t\tCheck,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * An array containing the items to show (specific structure must be respected,\n\t\t * except if you override item rendering in the default slot).\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => { return [] },\n\t\t},\n\t\t/**\n\t\t * If this is set, a \"show more\" text is displayed on the widget's bottom.\n\t\t * It's a link pointing to this URL.\n\t\t */\n\t\tshowMoreUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text of show more button.\n\t\t *\n\t\t * Expected to be in the form \"More {itemName} …\"\n\t\t */\n\t\tshowMoreLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('More items …'),\n\t\t},\n\t\t/**\n\t\t * A boolean to put the widget in a loading state.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each item.\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\t\t/**\n\t\t * Whether both the items and the empty content message are shown.\n\t\t * Usefull for e.g. showing \"No mentions\" and a list of elements.\n\t\t */\n\t\tshowItemsAndEmptyContent: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The text to show in the empty content area.\n\t\t */\n\t\temptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text to show in the half empty content area.\n\t\t */\n\t\thalfEmptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// forward menu events to my parent\n\t\thandlers() {\n\t\t\tconst h = {}\n\t\t\tfor (const evName in this.itemMenu) {\n\t\t\t\th[evName] = (it) => {\n\t\t\t\t\tthis.$emit(evName, it)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn h\n\t\t},\n\t\tdisplayedItems() {\n\t\t\tconst nbItems = (this.showMoreUrl && this.items.length >= this.maxItemNumber)\n\t\t\t\t? this.maxItemNumber - 1\n\t\t\t\t: this.maxItemNumber\n\t\t\treturn this.items.slice(0, nbItems)\n\t\t},\n\n\t\tshowHalfEmptyContentArea() {\n\t\t\treturn this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0\n\t\t},\n\n\t\thalfEmptyContentString() {\n\t\t\treturn this.halfEmptyContentMessage || this.emptyContentMessage\n\t\t},\n\n\t\tmaxItemNumber() {\n\t\t\treturn this.showItemsAndEmptyContent ? 5 : 7\n\t\t},\n\n\t\tshowMore() {\n\t\t\treturn this.showMoreUrl && this.items.length >= this.maxItemNumber\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.dashboard-widget :deep(.empty-content) {\n\ttext-align: center;\n\tpadding-top: 5vh;\n\t&.half-screen {\n\t\tpadding-top: 0;\n\t\tmargin-bottom: 1vh;\n\t}\n}\n\n.more {\n\tdisplay: block;\n\ttext-align: center;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 60px;\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t\tcolor: var(--color-main-text);\n\t}\n}\n\n/* skeleton */\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tpadding: 8px;\n\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: 44px;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcAvatar","NcDashboardWidgetItem","NcEmptyContent","h","evName","it","nbItems","_hoisted_1","createElementVNode","_hoisted_4","openBlock","createElementBlock","$options","withCtx","renderSlot","_ctx","createCommentVNode","Fragment","renderList","item","_hoisted_2","i","$props","toDisplayString"],"mappings":";;;;;;;;;AAgPA,MAAAA,IAAA;AAAA;;IAGE,UAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,gBAAAC;AAAA;;EAID,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,OAAA;AAAA;;;;;;;;;;;;;;;;IAiBA,eAAA;AAAA;;;;;;IAOA,SAAA;AAAA;;;;;;IAOA,UAAA;AAAA;;;;;;;;;;;;;;IAeA,qBAAA;AAAA;;;;;;;;;;;EAaD,UAAA;AAAA;AAAA;AAGE,YAAAC,IAAA,CAAA;AACA,iBAAAC,KAAA,KAAA;AACC,QAAAD,EAAAC,CAAA,IAAA,CAAAC,MAAA;AACC,eAAA,MAAAD,GAAAC,CAAA;AAAA,QACD;AAED,aAAAF;AAAA;IAED,iBAAA;AACC,YAAAG,IAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACC,KAAA,gBAAA,IACA,KAAA;AACD,aAAA,KAAA,MAAA,MAAA,GAAAA,CAAA;AAAA;;AAIA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA;;;;IAOD,gBAAA;AACC,aAAA,KAAA,2BAAA,IAAA;AAAA;;;;;AAOH,uDA7KMC,IAAA,EAAA,OAAA,mBAAA;EA6BD,gBAAAC,EAAA,MAAA,MAAA,GAAA;AAAA,EACA,gBAAAA,EAAA,KAAA,EAAA,OAAA,UAAA,GAAA,KAAA;SA5MLC,IAAA,CAAA,MAAA;;;AA8KC,SAAAC,EAAA,GAAAC,EAAA,OAAAJ,GAAA;AAAA;;MAIG,aAAAK,EAAA;AAAA,MACD,OAAA;AAAA;MACW,MAAAC,EAAA,MAAA;AAAA,QAEVC,EAAAC,EAAA,QAAA,wBAAA,CAAA,GAAA,MAAA;AAAA;;;;8BAtLJC,EAAA,IAAA,EAAA;AAAA;OA6LGN,EAAA,EAAA,GAAAC,EAAAM,GAAA,MAAAC,EAAAN,EAAA,gBAAA,CAAAO;;;QAECL,EAAAC,EAAA,QAAA,WAAA,EAAA,MAAAI,EAAA,GAAA,MAAA;AAAA;;;;iBAQFT,EAAA,GAAAC,EAAA,OAAAS,GAAA;AAAA,OACCV,EAAA,GAAAC,EAAAM,GAAA,MAAAC,EAAA,GAAA,CAAAG;QAAqB,KAAAA;AAAA,QAAQ,OAAA;AAAA;;UAClB,OAAA;AAAA,UAAqB,MAAA;AAAA;;;UAUhBC,EAAA,MAAA,WAAA;;;QAEd,aAAAA,EAAA;AAAA;QACU,MAAAT,EAAA,MAAA;AAAA;;;gCAtNfG,EAAA,IAAA,EAAA;AAAA;;MA8NI,MAAAM,EAAA;AAAA,MACD,QAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,IACG,GAAAC,EAAAD,EAAA,aAAA,GAAA,GAAAb,CAAA,KAlONO,EAAA,IAAA,EAAA;AAAA;;;"}

package/dist/chunks/NcDashboardWidget-fnhMGIb6.cjs

@@ -1,161 +0,0 @@
-var B = require("../assets/NcDashboardWidget-7x3QrWFu.css");
-const d = require("./NcAvatar-1MXwkOA2.cjs"), h = require("./NcDashboardWidgetItem-0jGJ_5Nx.cjs"), u = require("./NcEmptyContent-M3ClqFZe.cjs"), p = require("./Check-SlTPuUzR.cjs"), a = require("./_l10n-wK0o0jNS.cjs"), e = require("vue"), y = require("./_plugin-vue_export-helper-xG2iG1wl.cjs");
-a.register(a.t28);
-const g = {
-  name: "NcDashboardWidget",
-  components: {
-    NcAvatar: d.NcAvatar,
-    NcDashboardWidgetItem: h.NcDashboardWidgetItem,
-    NcEmptyContent: u.NcEmptyContent,
-    Check: p.Check
-  },
-  props: {
-    /**
-     * An array containing the items to show (specific structure must be respected,
-     * except if you override item rendering in the default slot).
-     */
-    items: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * If this is set, a "show more" text is displayed on the widget's bottom.
-     * It's a link pointing to this URL.
-     */
-    showMoreUrl: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The text of show more button.
-     *
-     * Expected to be in the form "More {itemName} …"
-     */
-    showMoreLabel: {
-      type: String,
-      default: a.t("More items …")
-    },
-    /**
-     * A boolean to put the widget in a loading state.
-     */
-    loading: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * An object containing context menu entries that will be displayed for each item.
-     */
-    itemMenu: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * Whether both the items and the empty content message are shown.
-     * Usefull for e.g. showing "No mentions" and a list of elements.
-     */
-    showItemsAndEmptyContent: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The text to show in the empty content area.
-     */
-    emptyContentMessage: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The text to show in the half empty content area.
-     */
-    halfEmptyContentMessage: {
-      type: String,
-      default: ""
-    }
-  },
-  computed: {
-    // forward menu events to my parent
-    handlers() {
-      const t = {};
-      for (const s in this.itemMenu)
-        t[s] = (n) => {
-          this.$emit(s, n);
-        };
-      return t;
-    },
-    displayedItems() {
-      const t = this.showMoreUrl && this.items.length >= this.maxItemNumber ? this.maxItemNumber - 1 : this.maxItemNumber;
-      return this.items.slice(0, t);
-    },
-    showHalfEmptyContentArea() {
-      return this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0;
-    },
-    halfEmptyContentString() {
-      return this.halfEmptyContentMessage || this.emptyContentMessage;
-    },
-    maxItemNumber() {
-      return this.showItemsAndEmptyContent ? 5 : 7;
-    },
-    showMore() {
-      return this.showMoreUrl && this.items.length >= this.maxItemNumber;
-    }
-  }
-}, C = (t) => (e.pushScopeId("data-v-b0ac6ae2"), t = t(), e.popScopeId(), t), N = { class: "dashboard-widget" }, _ = { key: 1 }, k = /* @__PURE__ */ C(() => /* @__PURE__ */ e.createElementVNode("div", { class: "item__details" }, [
-  /* @__PURE__ */ e.createElementVNode("h3", null, " "),
-  /* @__PURE__ */ e.createElementVNode("p", { class: "message" }, "   ")
-], -1)), f = ["href"];
-function E(t, s, n, I, v, o) {
-  const l = e.resolveComponent("Check"), c = e.resolveComponent("NcEmptyContent"), m = e.resolveComponent("NcDashboardWidgetItem"), i = e.resolveComponent("NcAvatar");
-  return e.openBlock(), e.createElementBlock("div", N, [
-    o.showHalfEmptyContentArea ? (e.openBlock(), e.createBlock(c, {
-      key: 0,
-      description: o.halfEmptyContentString,
-      class: "half-screen"
-    }, {
-      icon: e.withCtx(() => [
-        e.renderSlot(t.$slots, "halfEmptyContentIcon", {}, () => [
-          e.createVNode(l)
-        ], !0)
-      ]),
-      _: 3
-    }, 8, ["description"])) : e.createCommentVNode("", !0),
-    e.createElementVNode("ul", null, [
-      (e.openBlock(!0), e.createElementBlock(e.Fragment, null, e.renderList(o.displayedItems, (r) => (e.openBlock(), e.createElementBlock("li", {
-        key: r.id
-      }, [
-        e.renderSlot(t.$slots, "default", { item: r }, () => [
-          e.createVNode(m, e.mergeProps(r, { "item-menu": n.itemMenu }, e.toHandlers(o.handlers)), null, 16, ["item-menu"])
-        ], !0)
-      ]))), 128))
-    ]),
-    n.loading ? (e.openBlock(), e.createElementBlock("div", _, [
-      (e.openBlock(), e.createElementBlock(e.Fragment, null, e.renderList(7, (r) => e.createElementVNode("div", {
-        key: r,
-        class: "item-list__entry"
-      }, [
-        e.createVNode(i, {
-          class: "item-avatar",
-          size: 44
-        }),
-        k
-      ])), 64))
-    ])) : n.items.length === 0 ? e.renderSlot(t.$slots, "empty-content", { key: 2 }, () => [
-      n.emptyContentMessage ? (e.openBlock(), e.createBlock(c, {
-        key: 0,
-        description: n.emptyContentMessage
-      }, {
-        icon: e.withCtx(() => [
-          e.renderSlot(t.$slots, "emptyContentIcon", {}, void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["description"])) : e.createCommentVNode("", !0)
-    ], !0) : o.showMore ? (e.openBlock(), e.createElementBlock("a", {
-      key: 3,
-      href: n.showMoreUrl,
-      target: "_blank",
-      class: "more",
-      tabindex: "0"
-    }, e.toDisplayString(n.showMoreLabel), 9, f)) : e.createCommentVNode("", !0)
-  ]);
-}
-const b = /* @__PURE__ */ y._export_sfc(g, [["render", E], ["__scopeId", "data-v-b0ac6ae2"]]);
-exports.NcDashboardWidget = b;

package/dist/chunks/NcDashboardWidget-fnhMGIb6.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcDashboardWidget-fnhMGIb6.cjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Julien Veyssier <eneiluj@posteo.net>\n -\n - @author Julien Veyssier <eneiluj@posteo.net>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\n\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t},\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t<!-- This element is shown if we have items, but want to show a general message as well.\n\t\tCan be used e.g. to show \"No mentions\" on top of the item list. -->\n\t\t<NcEmptyContent v-if=\"showHalfEmptyContentArea\"\n\t\t\t:description=\"halfEmptyContentString\"\n\t\t\tclass=\"half-screen\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot The icon to show in the half empty content area. -->\n\t\t\t\t<slot name=\"halfEmptyContentIcon\">\n\t\t\t\t\t<Check />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t</NcEmptyContent>\n\t\t<!-- The list of items to show. -->\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t<!-- @slot The default slot can be optionally overridden. It contains the template of one item. -->\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem v-bind=\"item\"\n\t\t\t\t\t\t:item-menu=\"itemMenu\"\n\t\t\t\t\t\tv-on=\"handlers\" />\n\t\t\t\t</slot>\n\t\t\t</li>\n\t\t</ul>\n\t\t<!-- While the widget is loading, we show a list of placeholder items. -->\n\t\t<div v-if=\"loading\">\n\t\t\t<div v-for=\"i in 7\" :key=\"i\" class=\"item-list__entry\">\n\t\t\t\t<NcAvatar class=\"item-avatar\" :size=\"44\" />\n\t\t\t\t<div class=\"item__details\">\n\t\t\t\t\t<h3>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent v-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<!-- @slot The icon to show in the empty content area. -->\n\t\t\t\t\t<slot name=\"emptyContentIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</slot>\n\t\t<!-- A \"show more\" link, e.g. to navigate to the main app belonging to this widget. -->\n\t\t<a v-else-if=\"showMore\"\n\t\t\t:href=\"showMoreUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tclass=\"more\"\n\t\t\ttabindex=\"0\">\n\t\t\t{{ showMoreLabel }}\n\t\t</a>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\n\nimport Check from 'vue-material-design-icons/Check.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcDashboardWidget',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcDashboardWidgetItem,\n\t\tNcEmptyContent,\n\t\tCheck,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * An array containing the items to show (specific structure must be respected,\n\t\t * except if you override item rendering in the default slot).\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => { return [] },\n\t\t},\n\t\t/**\n\t\t * If this is set, a \"show more\" text is displayed on the widget's bottom.\n\t\t * It's a link pointing to this URL.\n\t\t */\n\t\tshowMoreUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text of show more button.\n\t\t *\n\t\t * Expected to be in the form \"More {itemName} …\"\n\t\t */\n\t\tshowMoreLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('More items …'),\n\t\t},\n\t\t/**\n\t\t * A boolean to put the widget in a loading state.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each item.\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\t\t/**\n\t\t * Whether both the items and the empty content message are shown.\n\t\t * Usefull for e.g. showing \"No mentions\" and a list of elements.\n\t\t */\n\t\tshowItemsAndEmptyContent: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The text to show in the empty content area.\n\t\t */\n\t\temptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text to show in the half empty content area.\n\t\t */\n\t\thalfEmptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// forward menu events to my parent\n\t\thandlers() {\n\t\t\tconst h = {}\n\t\t\tfor (const evName in this.itemMenu) {\n\t\t\t\th[evName] = (it) => {\n\t\t\t\t\tthis.$emit(evName, it)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn h\n\t\t},\n\t\tdisplayedItems() {\n\t\t\tconst nbItems = (this.showMoreUrl && this.items.length >= this.maxItemNumber)\n\t\t\t\t? this.maxItemNumber - 1\n\t\t\t\t: this.maxItemNumber\n\t\t\treturn this.items.slice(0, nbItems)\n\t\t},\n\n\t\tshowHalfEmptyContentArea() {\n\t\t\treturn this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0\n\t\t},\n\n\t\thalfEmptyContentString() {\n\t\t\treturn this.halfEmptyContentMessage || this.emptyContentMessage\n\t\t},\n\n\t\tmaxItemNumber() {\n\t\t\treturn this.showItemsAndEmptyContent ? 5 : 7\n\t\t},\n\n\t\tshowMore() {\n\t\t\treturn this.showMoreUrl && this.items.length >= this.maxItemNumber\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.dashboard-widget :deep(.empty-content) {\n\ttext-align: center;\n\tpadding-top: 5vh;\n\t&.half-screen {\n\t\tpadding-top: 0;\n\t\tmargin-bottom: 1vh;\n\t}\n}\n\n.more {\n\tdisplay: block;\n\ttext-align: center;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 60px;\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t\tcolor: var(--color-main-text);\n\t}\n}\n\n/* skeleton */\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tpadding: 8px;\n\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: 44px;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcAvatar","NcDashboardWidgetItem","NcEmptyContent","h","evName","it","nbItems","_hoisted_1","vue","_hoisted_4","$options","_ctx","item","_hoisted_2","i","$props"],"mappings":";;;AAgPA,MAAAA,IAAA;AAAA;;IAGE,UAAAC,EAAA;AAAA,IACA,uBAAAC,EAAA;AAAA,IACA,gBAAAC,EAAA;AAAA;;EAID,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,OAAA;AAAA;;;;;;;;;;;;;;;;IAiBA,eAAA;AAAA;;;;;;IAOA,SAAA;AAAA;;;;;;IAOA,UAAA;AAAA;;;;;;;;;;;;;;IAeA,qBAAA;AAAA;;;;;;;;;;;EAaD,UAAA;AAAA;AAAA;AAGE,YAAAC,IAAA,CAAA;AACA,iBAAAC,KAAA,KAAA;AACC,QAAAD,EAAAC,CAAA,IAAA,CAAAC,MAAA;AACC,eAAA,MAAAD,GAAAC,CAAA;AAAA,QACD;AAED,aAAAF;AAAA;IAED,iBAAA;AACC,YAAAG,IAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACC,KAAA,gBAAA,IACA,KAAA;AACD,aAAA,KAAA,MAAA,MAAA,GAAAA,CAAA;AAAA;;AAIA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA;;;;IAOD,gBAAA;AACC,aAAA,KAAA,2BAAA,IAAA;AAAA;;;;;AAOH,8EA7KMC,IAAA,EAAA,OAAA,mBAAA;EA6BD,gBAAAC,EAAA,mBAAA,MAAA,MAAA,GAAA;AAAA,EACA,gBAAAA,EAAA,mBAAA,KAAA,EAAA,OAAA,UAAA,GAAA,KAAA;SA5MLC,IAAA,CAAA,MAAA;;;AA8KC,SAAAD,EAAA,UAAA,GAAAA,EAAA,mBAAA,OAAAD,GAAA;AAAA;;MAIG,aAAAG,EAAA;AAAA,MACD,OAAA;AAAA;MACW,MAAAF,EAAA,QAAA,MAAA;AAAA,QAEVA,EAAA,WAAAG,EAAA,QAAA,wBAAA,CAAA,GAAA,MAAA;AAAA;;;;8BAtLJH,EAAA,mBAAA,IAAA,EAAA;AAAA;OA6LGA,EAAA,UAAA,EAAA,GAAAA,EAAA,mBAAAA,EAAA,UAAA,MAAAA,EAAA,WAAAE,EAAA,gBAAA,CAAAE;;;QAECJ,EAAA,WAAAG,EAAA,QAAA,WAAA,EAAA,MAAAC,EAAA,GAAA,MAAA;AAAA;;;;iBAQFJ,EAAA,UAAA,GAAAA,EAAA,mBAAA,OAAAK,GAAA;AAAA,OACCL,EAAA,UAAA,GAAAA,EAAA,mBAAAA,EAAA,UAAA,MAAAA,EAAA,WAAA,GAAA,CAAAM;QAAqB,KAAAA;AAAA,QAAQ,OAAA;AAAA;;UAClB,OAAA;AAAA,UAAqB,MAAA;AAAA;;;UAUhBC,EAAA,MAAA,WAAA;;;QAEd,aAAAA,EAAA;AAAA;QACU,MAAAP,EAAA,QAAA,MAAA;AAAA;;;gCAtNfA,EAAA,mBAAA,IAAA,EAAA;AAAA;;MA8NI,MAAAO,EAAA;AAAA,MACD,QAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,IACG,GAAAP,EAAA,gBAAAO,EAAA,aAAA,GAAA,GAAAN,CAAA,KAlOND,EAAA,mBAAA,IAAA,EAAA;AAAA;;;;"}