{"version":3,"sources":["webpack:///./src/layouts/cards/layout.vue?1c2b","webpack:///./node_modules/@directus/extension-toolkit/mixins/layout.js","webpack:///./src/layouts/cards/layout.vue?e231","webpack:///src/layouts/cards/layout.vue","webpack:///./src/layouts/cards/layout.vue?4928","webpack:///./src/layouts/cards/layout.vue"],"names":["module","exports","props","primaryKeyField","type","String","required","fields","Object","items","Array","default","viewOptions","viewQuery","loading","Boolean","lazyLoading","selection","link","sortField","collection","render","_vm","this","_h","$createElement","_c","_self","staticClass","on","onScroll","class","_l","item","index","key","id","attrs","emptySrc","icon","src","includes","length","$event","select","slot","title","interface","options","relation","subtitle","_e","$t","staticRenderFns","component"],"mappings":"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","file":"js/chunk-cd86426c.489ac692.js","sourcesContent":["import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./layout.vue?vue&type=style&index=0&id=4a82ca02&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./layout.vue?vue&type=style&index=0&id=4a82ca02&lang=scss&scoped=true&\"","module.exports = {\n  props: {\n    primaryKeyField: {\n      type: String,\n      required: true\n    },\n    fields: {\n      type: Object,\n      required: true\n    },\n    items: {\n      type: Array,\n      default: () => ([])\n    },\n    viewOptions: {\n      type: Object,\n      default: () => ({})\n    },\n    viewQuery: {\n      type: Object,\n      default: () => ({})\n    },\n    loading: {\n      type: Boolean,\n      default: false\n    },\n    lazyLoading: {\n      type: Boolean,\n      default: false\n    },\n    selection: {\n      type: Array,\n      default: () => []\n    },\n    link: {\n      type: String,\n      default: null\n    },\n    sortField: {\n      type: String,\n      default: null\n    },\n    collection: {\n      type: String,\n      default: null\n    }\n  }\n};\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"layout-cards\",on:{\"scroll\":_vm.onScroll}},[_c('div',{staticClass:\"cards\",class:{ loading: _vm.loading }},[_vm._l((_vm.items),function(item,index){return _c('v-card',{key:item.id,attrs:{\"to\":item[_vm.link],\"icon\":_vm.emptySrc(item) ? _vm.viewOptions.icon || 'photo' : null,\"opacity\":_vm.emptySrc(item) ? 'half' : null,\"src\":_vm.src(item),\"selected\":_vm.selection.includes(item.id),\"selection-mode\":_vm.selection.length > 0},on:{\"select\":function($event){return _vm.select(item.id)}}},[_c('template',{slot:\"title\"},[_c('v-ext-display',{key:(\"card-title-\" + (_vm.fields[_vm.title].interface) + \"-\" + index),attrs:{\"interface-type\":_vm.fields[_vm.title].interface,\"name\":_vm.title,\"collection\":_vm.collection,\"type\":_vm.fields[_vm.title].type,\"options\":_vm.fields[_vm.title].options,\"value\":item[_vm.title],\"values\":item,\"relation\":_vm.fields[_vm.title].relation}})],1),(_vm.subtitle)?_c('template',{slot:\"subtitle\"},[_c('v-ext-display',{key:(\"card-subtitle-\" + (_vm.fields[_vm.subtitle].interface) + \"-\" + index),attrs:{\"interface-type\":_vm.fields[_vm.subtitle].interface,\"name\":_vm.subtitle,\"collection\":_vm.collection,\"type\":_vm.fields[_vm.subtitle].type,\"options\":_vm.fields[_vm.subtitle].options,\"value\":item[_vm.subtitle],\"values\":item,\"relation\":_vm.fields[_vm.subtitle].relation}})],1):_vm._e()],2)}),(_vm.lazyLoading)?_c('v-card',{attrs:{\"icon\":\"hourglass_empty\",\"opacity\":\"half\",\"title\":_vm.$t('loading_more'),\"subtitle\":_vm.$t('one_moment')}}):_vm._e()],2),(_vm.loading)?_c('div',{staticClass:\"layout-loading\"},[_c('v-spinner')],1):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n\t<div class=\"layout-cards\" @scroll=\"onScroll\">\n\t\t<div class=\"cards\" :class=\"{ loading: loading }\">\n\t\t\t<v-card\n\t\t\t\tv-for=\"(item, index) in items\"\n\t\t\t\t:key=\"item.id\"\n\t\t\t\t:to=\"item[link]\"\n\t\t\t\t:icon=\"emptySrc(item) ? viewOptions.icon || 'photo' : null\"\n\t\t\t\t:opacity=\"emptySrc(item) ? 'half' : null\"\n\t\t\t\t:src=\"src(item)\"\n\t\t\t\t:selected=\"selection.includes(item.id)\"\n\t\t\t\t:selection-mode=\"selection.length > 0\"\n\t\t\t\t@select=\"select(item.id)\"\n\t\t\t>\n\t\t\t\t<template slot=\"title\">\n\t\t\t\t\t<v-ext-display\n\t\t\t\t\t\t:key=\"`card-title-${fields[title].interface}-${index}`\"\n\t\t\t\t\t\t:interface-type=\"fields[title].interface\"\n\t\t\t\t\t\t:name=\"title\"\n\t\t\t\t\t\t:collection=\"collection\"\n\t\t\t\t\t\t:type=\"fields[title].type\"\n\t\t\t\t\t\t:options=\"fields[title].options\"\n\t\t\t\t\t\t:value=\"item[title]\"\n\t\t\t\t\t\t:values=\"item\"\n\t\t\t\t\t\t:relation=\"fields[title].relation\"\n\t\t\t\t\t/>\n\t\t\t\t</template>\n\t\t\t\t<template v-if=\"subtitle\" slot=\"subtitle\">\n\t\t\t\t\t<v-ext-display\n\t\t\t\t\t\t:key=\"`card-subtitle-${fields[subtitle].interface}-${index}`\"\n\t\t\t\t\t\t:interface-type=\"fields[subtitle].interface\"\n\t\t\t\t\t\t:name=\"subtitle\"\n\t\t\t\t\t\t:collection=\"collection\"\n\t\t\t\t\t\t:type=\"fields[subtitle].type\"\n\t\t\t\t\t\t:options=\"fields[subtitle].options\"\n\t\t\t\t\t\t:value=\"item[subtitle]\"\n\t\t\t\t\t\t:values=\"item\"\n\t\t\t\t\t\t:relation=\"fields[subtitle].relation\"\n\t\t\t\t\t/>\n\t\t\t\t</template>\n\t\t\t</v-card>\n\t\t\t<v-card\n\t\t\t\tv-if=\"lazyLoading\"\n\t\t\t\ticon=\"hourglass_empty\"\n\t\t\t\topacity=\"half\"\n\t\t\t\t:title=\"$t('loading_more')\"\n\t\t\t\t:subtitle=\"$t('one_moment')\"\n\t\t\t></v-card>\n\t\t</div>\n\n\t\t<div v-if=\"loading\" class=\"layout-loading\">\n\t\t\t<v-spinner />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport mixin from '@directus/extension-toolkit/mixins/layout';\nimport { mapState } from 'vuex';\n\nexport default {\n\tname: 'LayoutCards',\n\tmixins: [mixin],\n\tcomputed: {\n\t\t...mapState(['currentProjectKey']),\n\t\ttitle() {\n\t\t\treturn this.viewOptions.title || this.primaryKeyField;\n\t\t},\n\t\tsubtitle() {\n\t\t\treturn this.viewOptions.subtitle;\n\t\t},\n\t\tcontent() {\n\t\t\treturn this.viewOptions.content;\n\t\t}\n\t},\n\tmethods: {\n\t\tsrc(item) {\n\t\t\tconst srcField = this.viewOptions.src || null;\n\n\t\t\tif (srcField) {\n\t\t\t\tlet file = item[srcField];\n\n\t\t\t\tif (srcField === 'data' && this.collection === 'directus_files') {\n\t\t\t\t\tfile = item;\n\t\t\t\t}\n\n\t\t\t\tif (!file) return null;\n\n\t\t\t\tif (file.type.startsWith('image') === false) return null;\n\n\t\t\t\tif (file.type.includes('svg')) return file.data.asset_url;\n\n\t\t\t\tconst fit = this.viewOptions.fit || 'crop';\n\n\t\t\t\treturn file.data.thumbnails.find(thumb => thumb.key === `directus-medium-${fit}`)\n\t\t\t\t\t?.url;\n\t\t\t}\n\n\t\t\treturn null;\n\t\t},\n\t\temptySrc(item) {\n\t\t\treturn this.viewOptions.src != null && this.src(item) === null;\n\t\t},\n\t\tonScroll(event) {\n\t\t\tconst { scrollHeight, clientHeight, scrollTop } = event.srcElement;\n\t\t\tconst totalScroll = scrollHeight - clientHeight;\n\t\t\tconst delta = totalScroll - scrollTop;\n\t\t\tif (delta <= 500) this.$emit('next-page');\n\t\t\tthis.scrolled = scrollTop > 0;\n\t\t},\n\t\tselect(id) {\n\t\t\tlet newSelection;\n\n\t\t\tif (this.selection.includes(id)) {\n\t\t\t\tnewSelection = this.selection.filter(selectedID => selectedID !== id);\n\t\t\t} else {\n\t\t\t\tnewSelection = [...this.selection, id];\n\t\t\t}\n\n\t\t\tthis.$emit('select', newSelection);\n\t\t}\n\t}\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.layout-cards {\n\toverflow: auto;\n\theight: 100%;\n\tmax-height: calc(100vh - var(--header-height-expanded));\n}\n\n.toolbar {\n\tbackground-color: var(--page-background-color);\n\twidth: 100%;\n\tposition: sticky;\n\ttop: 0;\n\tz-index: +1;\n\theight: var(--header-height);\n\tpadding: 28px var(--page-padding);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\tborder-bottom: 2px solid var(--sidebar-background-color);\n}\n\n.sort-select {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\n\tmargin: 0 10px;\n\n\t&:last-of-type {\n\t\tmargin-right: 0;\n\t}\n\n\tselect {\n\t\t-webkit-appearance: none;\n\t\t-moz-appearance: none;\n\t\tappearance: none;\n\t\tvertical-align: middle;\n\t\tbackground-color: var(--input-background-color-alt);\n\t\tborder-radius: var(--border-radius);\n\t\tborder: 0;\n\t\toverflow: hidden;\n\t\tpadding: 5px;\n\t\tpadding-right: 15px;\n\t\tcursor: pointer;\n\t\toutline: 0;\n\t}\n\n\t.icon {\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t}\n}\n\n.cards {\n\tpadding: var(--page-padding-top) var(--page-padding) var(--page-padding-bottom);\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, var(--card-size));\n\tgrid-gap: var(--card-vertical-gap) var(--card-horizontal-gap);\n\tjustify-content: space-between;\n\twidth: 100%;\n\n\t&.loading {\n\t\topacity: 0.5;\n\t}\n}\n\n.layout-loading {\n\tpadding: 24px 0;\n\ttext-align: center;\n\n\t.v-spinner {\n\t\tdisplay: inline-block;\n\t}\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./layout.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./layout.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./layout.vue?vue&type=template&id=4a82ca02&scoped=true&\"\nimport script from \"./layout.vue?vue&type=script&lang=js&\"\nexport * from \"./layout.vue?vue&type=script&lang=js&\"\nimport style0 from \"./layout.vue?vue&type=style&index=0&id=4a82ca02&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"4a82ca02\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}