← Back
Editing: CollectionsList-B7H5GieH.chunk.mjs.map
{"version":3,"file":"CollectionsList-B7H5GieH.chunk.mjs","sources":["../src/components/Collection/CollectionCover.vue","../src/components/Collection/CollectionsList.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<template>\n\t<RouterLink class=\"collection-cover\" :to=\"link\">\n\t\t<img\n\t\t\tv-if=\"coverUrl !== '' && coverLoadingError === false\"\n\t\t\tclass=\"collection-cover__image\"\n\t\t\t:src=\"coverUrl\"\n\t\t\t:alt=\"altImg\"\n\t\t\t@error=\"coverLoadingError = true\">\n\n\t\t<div v-else class=\"collection-cover__image collection-cover__image--placeholder\">\n\t\t\t<ImageMultipleOutline :size=\"128\" />\n\t\t</div>\n\t\t<div class=\"collection-cover__details\">\n\t\t\t<div class=\"collection-cover__details__title\">\n\t\t\t\t<slot name=\"default\" />\n\t\t\t</div>\n\t\t\t<div class=\"collection-cover__details__subtitle\">\n\t\t\t\t<slot name=\"subtitle\" />\n\t\t\t</div>\n\t\t</div>\n\t</RouterLink>\n</template>\n\n<script lang='ts' setup>\nimport { computed, ref } from 'vue'\nimport { RouterLink } from 'vue-router'\nimport ImageMultipleOutline from 'vue-material-design-icons/ImageMultipleOutline.vue'\n\nconst props = defineProps<{\n\tcoverUrl: string\n\taltImg: string\n\tparentRoute: string\n\tcollectionName: string\n}>()\n\nconst coverLoadingError = ref(false)\nconst link = computed(() => `${props.parentRoute}/${encodeURIComponent(props.collectionName)}`)\n</script>\n\n<style lang=\"scss\" scoped>\n.collection-cover {\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 16px;\n\tborder-radius: var(--border-radius-large);\n\n\t&:hover, &:focus {\n\t\tbackground: var(--color-background-dark);\n\t}\n\n\t&__image {\n\t\twidth: 350px;\n\t\theight: 350px;\n\t\tobject-fit: cover;\n\t\tborder-radius: var(--border-radius-large);\n\n\t\t@media only screen and (max-width: 1200px) {\n\t\t\twidth: 250px;\n\t\t\theight: 250px;\n\t\t}\n\n\t\t&--placeholder {\n\t\t\tbackground: var(--color-primary-element-light);\n\n\t\t\t:deep(.material-design-icon) {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\n\t\t\t\t.material-design-icon__svg {\n\t\t\t\t\tfill: var(--color-primary-element);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&__details {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmargin-top: 16px;\n\t\twidth: 350px;\n\n\t\t@media only screen and (max-width: 1200px) {\n\t\t\twidth: 250px;\n\t\t}\n\n\t\t&__title {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: space-between;\n\t\t}\n\n\t\t&__subtitle {\n\t\t\tdisplay: flex;\n\t\t\tcolor: var(--color-text-lighter);\n\t\t}\n\t}\n\n}\n</style>\n","<!--\n - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<template>\n\t<!-- Errors handlers-->\n\t<NcEmptyContent v-if=\"error\" :name=\"t('photos', 'An error occurred') \">\n\t\t<AlertCircleOutline slot=\"icon\" />\n\t</NcEmptyContent>\n\n\t<div v-else class=\"collections\">\n\t\t<!-- Collection header -->\n\t\t<slot name=\"header\" />\n\n\t\t<!-- No collections -->\n\t\t<slot v-if=\"noCollection && !loading\" name=\"empty-collections-list\" class=\"collections__empty\" />\n\n\t\t<!-- List -->\n\t\t<ul v-else-if=\"!noCollection\" class=\"collections__list\">\n\t\t\t<li v-for=\"collection in collections\" :key=\"collection.basename\" :data-cy-collections-list-collection=\"collection.basename\">\n\t\t\t\t<slot :collection=\"collection\" />\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n\n<script lang='ts'>\nimport type { PropType } from 'vue'\nimport type { Collection } from '../../services/collectionFetcher.ts'\n\nimport { translate } from '@nextcloud/l10n'\nimport NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'\nimport AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'\n\nexport default {\n\tname: 'CollectionsList',\n\n\tcomponents: {\n\t\tAlertCircleOutline,\n\t\tNcEmptyContent,\n\t},\n\n\tprops: {\n\t\tcollections: {\n\t\t\ttype: Object as PropType<Record<string, Collection>>,\n\t\t\trequired: true,\n\t\t},\n\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\terror: {\n\t\t\ttype: Error,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tnoCollection(): boolean {\n\t\t\treturn Object.keys(this.collections).length === 0\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt: translate,\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.collections {\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\n\t&__list {\n\t\tpadding: 32px 48px;\n\t\tflex-grow: 1;\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 16px;\n\t\talign-items: flex-start;\n\t\theight: calc(100% - 60px);\n\t\toverflow-x: scroll;\n\n\t\t@media only screen and (max-width: 1200px) {\n\t\t\tpadding: 32px 12px;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n}\n</style>\n"],"names":["coverLoadingError","ref","link","computed","props","_sfc_main","AlertCircleOutline","NcEmptyContent","translate"],"mappings":"+WAuCMA,EAAoBC,EAAI,EAAK,EAC7BC,EAAOC,EAAS,IAAM,GAAGC,EAAM,WAAW,IAAI,mBAAmBA,EAAM,cAAc,CAAC,EAAE,wyBCN9FC,EAAA,CACA,KAAA,kBAEA,WAAA,CACA,mBAAAC,EACA,eAAAC,CAAA,EAGA,MAAA,CACA,YAAA,CACA,KAAA,OACA,SAAA,EAAA,EAGA,QAAA,CACA,KAAA,QACA,QAAA,EAAA,EAGA,MAAA,CACA,KAAA,MACA,QAAA,IAAA,CACA,EAGA,SAAA,CACA,cAAA,CACA,OAAA,OAAA,KAAA,KAAA,WAAA,EAAA,SAAA,CACA,CAAA,EAGA,QAAA,CACA,EAAAC,CAAA,CAEA"}
Save File
Cancel