@nextcloud/vue/dist/chunks/NcEmptyContent-B8-90BSI.mjs.map

Nextcloud vue components

{"version":3,"file":"NcEmptyContent-B8-90BSI.mjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.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### Basic use\n\nUse this component to display a message about an empty content.\nProviding an icon, name, and a description is strongly advised.\n\n```\n<template>\n\t<NcEmptyContent name=\"No comments\"\n\t\tdescription=\"Start writing comments and they will appear here.\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n#### With custom svg\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No files in here\">\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :svg=\"folderSvg\" />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport folderSvg from '@mdi/svg/svg/folder.svg?raw'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfolderSvg,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also customize the name using the `#name` slot\nand add actions. But to keep the style consistent across Nextcloud\nconsider only using header elements as the root elements for the name slot.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tdescription=\"No comments in here\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #name>\n\t\t\t<h1 class=\"empty-content__name\">\n\t\t\t\tNo comments\n\t\t\t</h1>\n\t\t</template>\n\t\t<template #action>\n\t\t\t<NcButton variant=\"primary\">\n\t\t\t\tAdd a comment!\n\t\t\t</NcButton>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n\nSimilar to the `#name` slot, you could also use the `#description` slot.\nThe content will be rendered within a paragraph so you can use any inline element,\nlike a link.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No comments\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #description>\n\t\t\t<a href=\"https://en.wikipedia.org/wiki/Comment\">What is even a comment?</a>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { createElementId } from '../../utils/createElementId.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Desription of the empty content\n\t *\n\t * @example 'No comments yet, start the conversation!'\n\t */\n\tdescription?: string\n\n\t/**\n\t * A header message about an empty content shown.\n\t *\n\t * @example 'No comments'\n\t */\n\tname?: string\n}>(), {\n\tdescription: '',\n\tname: '',\n})\n\ndefineSlots<{\n\t/**\n\t * Optional slot for a button or the like\n\t */\n\taction?: Slot\n\n\t/**\n\t * Optional slot for adding an icon\n\t */\n\ticon?: Slot\n\n\t/**\n\t * Allow to add custom formatted name as an alternative to the name property.\n\t * The content passed shall be enclosed by a header element.\n\t */\n\tname?: Slot\n\n\t/**\n\t * Optional formatted description rendered inside a paragraph as an alternative to the description property.\n\t */\n\tdescription?: Slot\n}>()\n\nconst nameId = createElementId()\n</script>\n\n<template>\n\t<div :aria-labelledby=\"nameId\" class=\"empty-content\" role=\"note\">\n\t\t<div v-if=\"$slots.icon\" class=\"empty-content__icon\" aria-hidden=\"true\">\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\t\t<div v-if=\"name !== '' || $slots.name\" :id=\"nameId\" class=\"empty-content__name\">\n\t\t\t<slot name=\"name\">\n\t\t\t\t{{ name }}\n\t\t\t</slot>\n\t\t</div>\n\t\t<p v-if=\"description !== '' || $slots.description\" class=\"empty-content__description\">\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</p>\n\t\t<div v-if=\"$slots.action\" class=\"empty-content__action\">\n\t\t\t<slot name=\"action\" />\n\t\t</div>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n.empty-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tjustify-content: center;\n\t/* In case of using in a flex container - flex in advance */\n\tflex-grow: 1;\n\tpadding: var(--default-grid-baseline);\n\n\t.modal-wrapper & {\n\t\tmargin-top: 5vh;\n\t\tmargin-bottom: 5vh;\n\t}\n\n\t&__icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tmargin: 0 auto 15px;\n\t\topacity: .4;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: 64px;\n\n\t\t:deep(svg) {\n\t\t\twidth: 64px !important;\n\t\t\theight: 64px !important;\n\t\t\tmax-width: 64px !important;\n\t\t\tmax-height: 64px !important;\n\t\t}\n\t}\n\n\t&__name {\n\t\tmargin-bottom: 10px;\n\t\ttext-align: center;\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t}\n\n\t&__description {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\ttext-align: center;\n\t\ttext-wrap-style: balance;\n\t}\n\n\t&__action {\n\t\tmargin-top: 8px;\n\n\t\t.modal-wrapper & {\n\t\t\tmargin-top: 20px;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_unref","$slots","_openBlock","_renderSlot","name","description"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0KA,UAAM,SAAS,gBAAA;;0BAIdA,mBAiBM,OAAA;AAAA,QAjBA,mBAAiBC,MAAA,MAAA;AAAA,QAAQ,OAAM;AAAA,QAAgB,MAAK;AAAA,MAAA;QAC9CC,KAAAA,OAAO,QAAlBC,aAAAH,mBAEM,OAFN,YAEM;AAAA,UADLI,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,QAAA;QAEVC,KAAAA,SAAI,MAAWH,KAAAA,OAAO,qBAAjCF,mBAIM,OAAA;AAAA;UAJkC,IAAIC,MAAA,MAAA;AAAA,UAAQ,OAAM;AAAA,QAAA;UACzDG,WAEO,yBAFP,MAEO;AAAA,4CADHC,KAAAA,IAAI,GAAA,CAAA;AAAA,UAAA;;QAGAC,KAAAA,gBAAW,MAAWJ,KAAAA,OAAO,eAAtCC,aAAAH,mBAII,KAJJ,YAII;AAAA,UAHHI,WAEO,gCAFP,MAEO;AAAA,4CADHE,KAAAA,WAAW,GAAA,CAAA;AAAA,UAAA;;QAGLJ,KAAAA,OAAO,UAAlBC,aAAAH,mBAEM,OAFN,YAEM;AAAA,UADLI,WAAsB,KAAA,QAAA,UAAA,CAAA,GAAA,QAAA,IAAA;AAAA,QAAA;;;;;;"}