├── .DS_Store
├── .github
    └── workflows
    │   └── publish.yml
├── .gitignore
├── CHANGELOG.md
├── README.md
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── src
    ├── actions.vue
    ├── components
    │   ├── CardItem.vue
    │   ├── card.vue
    │   └── header.vue
    ├── index.ts
    ├── layout.vue
    ├── options.vue
    ├── shims.d.ts
    ├── style.css
    └── types.ts
└── tsconfig.json


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codihaus/directus-extension-grid-layout/9884b49c4fb7064d9a1ef6bc7e2564eeaa4a0096/.DS_Store


--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
 1 | name: Publish Release Packages
 2 | on:
 3 |     release:
 4 |         types: [ created ]
 5 | jobs:
 6 |     publish:
 7 |         runs-on: ubuntu-latest
 8 |         steps:
 9 |             -   uses: actions/checkout@v2
10 |             -   name: Use Node.js ${{ matrix.node-version }}
11 |                 uses: actions/setup-node@v2
12 |                 with:
13 |                     node-version: 20
14 |                     registry-url: https://registry.npmjs.org/
15 |             -   name: Install dependencies
16 |                 run: pnpm ci
17 |             -   name: Build App
18 |                 run: npm run build
19 |             -   name: Publish to NPM
20 |                 run: npm publish
21 |                 env:
22 |                     NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | dist
4 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | 
 4 | ## v1.0.8
 5 | 
 6 | [compare changes](https://github.com/codihaus/directus-extension-grid-layout/compare/v1.0.7...v1.0.8)
 7 | 
 8 | ## v1.0.7
 9 | 
10 | [compare changes](https://github.com/codihaus/directus-extension-grid-layout/compare/v1.0.6...v1.0.7)
11 | 
12 | ## v1.0.6
13 | 
14 | [compare changes](https://github.com/codihaus/directus-extension-grid-layout/compare/v1.0.5...v1.0.6)
15 | 
16 | ## v1.0.5
17 | 
18 | [compare changes](https://github.com/codihaus/directus-extension-grid-layout/compare/v1.0.3...v1.0.5)
19 | 
20 | ### 🩹 Fixes
21 | 
22 | - #12 change component v-collection-field-template, to fix layout options ([#12](https://github.com/codihaus/directus-extension-grid-layout/issues/12))
23 | 
24 | ### 🏡 Chore
25 | 
26 | - **release:** V1.0.3 ([5ecdd78](https://github.com/codihaus/directus-extension-grid-layout/commit/5ecdd78))
27 | - **release:** V1.0.4 ([13a441b](https://github.com/codihaus/directus-extension-grid-layout/commit/13a441b))
28 | 
29 | ### ❤️ Contributors
30 | 
31 | - TranQuangMinh <contact@codihaus.com>
32 | - Thanhduong <duonglybaothanh0210@gmail.com>
33 | 
34 | ## v1.0.4
35 | 
36 | [compare changes](https://github.com/codihaus/directus-extension-grid-layout/compare/v1.0.3...v1.0.4)
37 | 
38 | ## v1.0.3
39 | 
40 | [compare changes](https://github.com/codihaus/directus-extension-grid-layout/compare/v1.0.21...v1.0.3)
41 | 
42 | ### 🩹 Fixes
43 | 
44 | - If no photo source is selected, show icon default  #8 ([#8](https://github.com/codihaus/directus-extension-grid-layout/issues/8))
45 | - Issue #10 ([#10](https://github.com/codihaus/directus-extension-grid-layout/issues/10))
46 | - Issue #7 ([#7](https://github.com/codihaus/directus-extension-grid-layout/issues/7))
47 | - Issue #6 ([#6](https://github.com/codihaus/directus-extension-grid-layout/issues/6))
48 | 
49 | ### ❤️ Contributors
50 | 
51 | - Thanhduong <duonglybaothanh0210@gmail.com>
52 | - Van Tu <levantu.iuh@gmail.com>
53 | 
54 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # directus-extension-grid-layout
 2 | 
 3 | Directus Grid Layout Extension is a custom display type that enhances the way data is displayed in Directus. It allows users to present data in a grid layout that is both intuitive and visually appealing. 
 4 | 
 5 | Extension by #CodiHaus - https://codihaus.com
 6 | 
 7 | <img width="1081" alt="image" src="https://user-images.githubusercontent.com/68498487/227259474-29bd14cd-e600-4054-b2a7-4c70b35035fa.png">
 8 | 
 9 | 
10 | # Installation via npm
11 | 
12 | Run the command above at your Directu's root project level
13 | 
14 | - npm i directus-extension-grid-layout
15 | 
16 | # Installation by compiling
17 | 
18 | - Clone the repo
19 | - Go to the repo folder
20 | - npm run build
21 | - Copy the index.js file on dist/index.js folder to /directus/extension/directus-extension-grid-layout folder
22 | - Restart your Directus instance & enjoy
23 | 
24 | # How to use
25 | 
26 | On your right sidebar, you would be able to select the Layout to display, select "Grid"
27 | By selecting grid, it will show you the additional configurations to select data to show on each item.
28 | 
29 | <img width="1145" alt="image" src="https://user-images.githubusercontent.com/68498487/227258661-10799f6d-b29c-4e4c-b6be-fb41bb9dc1d1.png">
30 | 
31 | # Licensing
32 | 
33 | GNUv3
34 | 
35 | 
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "directus-extension-grid-layout",
 3 |   "description": "",
 4 |   "icon": "extension",
 5 |   "version": "1.0.8",
 6 |   "main": "./dist/index.js",
 7 |   "author": {
 8 |     "email": "contact@codihaus.com",
 9 |     "name": "Codihaus"
10 |   },
11 |   "keywords": [
12 |     "directus",
13 |     "directus-extension",
14 |     "directus-grid-layout",
15 |     "directus-blog-layout",
16 |     "directus-admin-layout"
17 |   ],
18 |   "directus:extension": {
19 |     "type": "layout",
20 |     "path": "./dist/index.js",
21 |     "source": "src/index.ts",
22 |     "host": "^9.23.1",
23 |     "hidden": false
24 |   },
25 |   "files": [
26 |     "dist"
27 |   ],
28 |   "scripts": {
29 |     "build": "directus-extension build",
30 |     "dev": "directus-extension build -w --no-minify",
31 |     "link": "directus-extension link",
32 |     "release": "pnpm run build && changelogen --release && npm publish && git push --follow-tags"
33 |   },
34 |   "repository": {
35 |     "type": "git",
36 |     "url": "https://github.com/codihaus/directus-extension-grid-layout/"
37 |   },
38 |   "devDependencies": {
39 |     "@directus/extensions-sdk": "9.23.1",
40 |     "sass": "^1.59.3",
41 |     "sass-loader": "^13.2.1",
42 |     "typescript": "^4.9.4",
43 |     "vue": "^3.4.38",
44 |     "vue-i18n": "^9.2.2"
45 |   },
46 |   "dependencies": {
47 |     "@directus/composables": "^10.1.6",
48 |     "@directus/constants": "^11.0.1",
49 |     "@directus/types": "^11.0.2",
50 |     "@directus/utils": "^11.0.2",
51 |     "changelogen": "^0.5.5"
52 |   }
53 | }


--------------------------------------------------------------------------------
/src/actions.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<transition name="fade">
 3 | 		<span v-if="itemCount" class="item-count">
 4 | 			{{ showingCount }}
 5 | 		</span>
 6 | 	</transition>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import { defineComponent } from 'vue';
11 | 
12 | export default defineComponent({
13 | 	inheritAttrs: false,
14 | 	props: {
15 | 		itemCount: {
16 | 			type: Number,
17 | 			default: null,
18 | 		},
19 | 		showingCount: {
20 | 			type: String,
21 | 			required: true,
22 | 		},
23 | 	},
24 | });
25 | </script>
26 | 
27 | <style lang="scss" scoped>
28 | .item-count {
29 | 	position: relative;
30 | 	display: none;
31 | 	margin: 0 8px;
32 | 	color: var(--foreground-subdued);
33 | 	white-space: nowrap;
34 | 
35 | 	@media (min-width: 600px) {
36 | 		display: inline;
37 | 	}
38 | }
39 | 
40 | .fade-enter-active,
41 | .fade-leave-active {
42 | 	transition: opacity var(--medium) var(--transition);
43 | }
44 | 
45 | .fade-enter-from,
46 | .fade-leave-to {
47 | 	opacity: 0;
48 | }
49 | </style>


--------------------------------------------------------------------------------
/src/components/CardItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="d-flex-custom gap-6-6 ">
  3 | 		<div class="card-img relative"  >
  4 | 			<slot name="select-icon" />
  5 | 			<div  class="selection-fade"></div>
  6 | 			<img 
  7 | 				v-if="image"
  8 | 				:src="imageUrl()" 
  9 | 				:alt="title"  
 10 | 				class="card-img-img" 
 11 | 				:class="[selectMode === 'check_circle' ? 'scale' : '',classImgFit]" 
 12 | 				@error="onErr($event)"
 13 | 			>
 14 | 			<div v-else class="icon-fall bg-not-thumbnail">
 15 | 				<v-icon x-large name="image"></v-icon>
 16 | 			</div>
 17 | 			<div 
 18 | 				class="card-abs" 
 19 | 				:class="selectMode === 'check_circle' ? 'outline' : ''"></div>
 20 | 		</div>
 21 | 		<div class="card-content flex-1 gap-6">
 22 | 			<render-template 
 23 | 				v-if="title" class="title" 
 24 | 				:collection="collection" 
 25 | 				:item="item" 
 26 | 				:template="title" 
 27 | 			/>
 28 | 			<render-template 
 29 | 				v-if="subtitle" 
 30 | 				class="subtitle" 
 31 | 				:collection="collection" 
 32 | 				:item="item" 
 33 | 				:template="subtitle" 
 34 | 			/>
 35 | 			<render-template 
 36 | 				v-if="tag" 
 37 | 				class="tags" 
 38 | 				:collection="collection" 
 39 | 				:item="item" 
 40 | 				:template="tag" 
 41 | 			/>
 42 | 			<p class="d-flex w-full items-center gap-2">
 43 | 
 44 | 				<v-chip 
 45 | 					v-if="idShow"
 46 | 					outlined 
 47 | 					x-small 
 48 | 					class="chip-id"  
 49 | 					:class='statusClass' >{{ id }}</v-chip>
 50 | 				<div v-if="idShow" class="dot-sub"></div>
 51 | 				<v-icon small name="access_time"></v-icon>
 52 | 				<render-template 
 53 | 					class="time" 
 54 | 					:collection="collection" 
 55 | 					:item="item" 
 56 | 					:template="`{{date_created}}`" 
 57 | 				/>
 58 | 			</p>
 59 | 			<div class="card-item-action">
 60 | 				<v-button
 61 | 					:to="to"
 62 | 					dashed
 63 | 					:style="{
 64 | 						'--v-button-height': '30px',
 65 | 						'--v-button-min-width': '0',
 66 | 						'--v-button-padding': '8px',
 67 | 					}"
 68 | 				>
 69 | 					<v-icon name="edit_square" :style="{
 70 | 						'--v-icon-size': '18px',
 71 | 						'margin-right': '4px'
 72 | 					}"/>
 73 | 					Edit
 74 | 				</v-button>
 75 | 			</div>
 76 | 		</div>
 77 | 	</div>
 78 | </template>
 79 | 
 80 | <script lang="ts">
 81 | import { useI18n } from 'vue-i18n';
 82 | import { defineComponent,computed,watch,toRefs } from 'vue';
 83 | import { useSync } from '@directus/extensions-sdk';
 84 | export default defineComponent({
 85 | 	props: {
 86 | 		layoutOptions: {
 87 |             type: Object as PropType<LayoutOptions>,
 88 |             required: false,
 89 |         },
 90 | 		collection: {
 91 | 			default: null,
 92 | 		},
 93 | 		image: {
 94 | 			type: String,
 95 | 			default: null,
 96 | 		},
 97 | 		title: {
 98 | 			type: String,
 99 | 			default: "Title",
100 | 		},
101 | 		subtitle: {
102 | 			type: String,
103 | 			default: "Sub title",
104 | 		},
105 | 		tag:{
106 | 			type: String,
107 | 			default: null,
108 | 		},
109 | 		status:{
110 | 			type: String,
111 | 			default: null,
112 | 		},
113 | 		id:{
114 | 			default: null,
115 | 		},
116 | 		selectMode: {
117 | 			type: String,
118 | 			default: false,
119 | 		},
120 | 		classImgFit: {
121 | 			type: String,
122 | 			default: 'object-cover',
123 | 		},
124 | 		statusClass: {
125 | 			type: String,
126 | 			default: 'color_primary',
127 | 		},
128 | 		item: {
129 | 			type: Object,
130 | 			default: null,
131 | 		},
132 | 		idShow:{
133 | 			type: Boolean
134 | 		},
135 | 		to: {
136 | 			type: String,
137 | 			default: "",
138 | 		},
139 | 	
140 | 	},
141 | 	emits: [''],
142 | 	setup(props: any,{emit}) {
143 | 		const { t } = useI18n();
144 | 		const {  layoutOptions } = toRefs(props);
145 | 		
146 | 		function getPublicURL(): string {
147 | 			return extract(window.location.href);
148 | 		}
149 | 
150 | 		function extract(path: string) {
151 | 			const parts = path.split('/');
152 | 			const adminIndex = parts.indexOf('admin');
153 | 			const rootPath = parts.slice(0, adminIndex).join('/') + '/';
154 | 			return rootPath;
155 | 		}
156 | 
157 | 		function imageUrl():string {
158 | 			
159 | 			const assetUrl = props.image ? new URL(`assets/${props.image}`, getPublicURL()) : null;
160 | 			
161 | 			return assetUrl?.href ? `${assetUrl.href}?width=500&height=350` : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
162 | 		}
163 | 		
164 | 		function onErr(e:any){
165 | 			e.target.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
166 | 		}
167 | 		return { t, onErr,imageUrl };
168 | 	},
169 | });
170 | </script>
171 | 
172 | <style lang="scss" scoped>
173 | .card .title{
174 | 	display: block;
175 |     font-size: 1.3rem;
176 |     font-weight: bold;
177 |     margin-bottom: 8px;
178 |     transition: all;
179 | 	display: -webkit-box;
180 |     -webkit-line-clamp: 2;
181 |     -webkit-box-orient: vertical;
182 |     overflow: hidden;
183 |     text-overflow: ellipsis;
184 | }
185 | 
186 | .card .subtitle{
187 | 	display: block;
188 |     font-size: 1.1rem;
189 |     color: var(--text-normal);
190 | 	display: -webkit-box;
191 |     -webkit-line-clamp: 2;
192 |     -webkit-box-orient: vertical;
193 |     overflow: hidden;
194 |     text-overflow: ellipsis;
195 | 	margin-bottom: 6px;
196 | 
197 | }
198 | .card .time{
199 |     font-size: 0.9rem !important;
200 |     color: var(--text-normal) !important;
201 | 	
202 | 
203 | }
204 | .card .datetime{
205 | 	overflow: hidden;
206 |     line-height: 1.15;
207 |     white-space: initial !important;
208 |     text-overflow: ellipsis;
209 | }
210 | .card .card-item-action {
211 | 	margin-top: 8px;
212 | }
213 | 
214 | 
215 | .color_primary{
216 | 	--v-chip-color: var(--primary);
217 | 	border: 2px solid var(--v-chip-color);
218 | }	
219 | .color_disible{
220 | 	--v-chip-color: var(--border-normal);
221 | 	border: 2px solid var(--v-chip-color);
222 | }	
223 | .color_archire{
224 | 	--v-chip-color: rgb(255, 164, 57);
225 | 	border: 2px solid  rgb(255, 164, 57);
226 | 	background: var(--v-chip-color);
227 | }
228 | 
229 | .card .tags{
230 | 	margin-bottom: 8px;
231 |     font-size: 12px;
232 | 	border-radius: 4px;
233 | 	background-color: var(--border-normal);
234 | 	display: inline-block;
235 | }
236 | 
237 | .dot-sub {
238 |     width: 2px;
239 |     height: 16px;
240 |     border-radius: 1px;
241 |     display: inline-block;
242 |     background-color: var(--border-normal);
243 | }
244 | .icon-fall{
245 | 	position: absolute;
246 | 	width: 100%;
247 | 	inset: 0;
248 | 	display: flex;
249 | 	place-items: center;
250 | 	justify-content: center;
251 | 	z-index: 10;
252 | }
253 | .bg-not-thumbnail{
254 | 	position: absolute;
255 | 	width: 100%;
256 | 	inset: 0;
257 | 	z-index: 1;
258 | 	background-color: var(--background-highlight);
259 | }
260 | .icon-fall v-icon{
261 | 	font-size: 2rem;
262 | 	width: 50px;
263 | 	color: var(--text-normal);
264 | }
265 | .card-img .selection-fade{
266 | 	position: absolute;
267 |     top: 0;
268 |     left: 0;
269 |     z-index: 10;
270 |     width: 100%;
271 |     height: 48px;
272 |     opacity: 0;
273 | 	border-radius: 6px;
274 |     transition: opacity var(--fast) var(--transition);
275 | }
276 | .card-img .selection-fade::before{
277 | 	position: absolute;
278 |     top: 0;
279 |     left: 0;
280 |     width: 100%;
281 |     height: 100%;
282 |     background-image: linear-gradient(-180deg, rgba(38, 50, 56, 0.1) 10%, rgba(38, 50, 56, 0));
283 |     content: "";
284 | }
285 | .card-img:hover .selection-fade{
286 | 	opacity: 1;
287 | 	transition: opacity var(--fast) var(--transition)
288 | }
289 | 
290 | .card.card-style-2 {
291 | 	.card-img {
292 | 		@media (min-width: 1024px) {
293 | 			height: 250px;
294 | 			width: 50%;
295 | 		}
296 | 		:deep() .selector {
297 | 			right: 0;
298 | 			left: auto;
299 | 		}
300 | 		img, .bg-not-thumbnail {
301 | 			border-radius: 6px;
302 | 		}
303 | 	}
304 | 	.card-content {
305 | 		@media (min-width: 1024px) {
306 | 			order: -1;
307 | 		}
308 | 	}
309 | 	.title {
310 | 		@media (min-width: 1024px) {
311 | 			font-size: 2rem;
312 | 			margin-bottom: 24px;
313 | 			line-height: 1.2;
314 | 		}
315 | 	}
316 | 	.subtitle {
317 | 		margin-bottom: 10px;
318 | 	}
319 | }
320 | 
321 | </style>


--------------------------------------------------------------------------------
/src/components/card.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div
  3 | 		class="card"
  4 | 		:class="[{
  5 | 			loading,
  6 | 			readonly,
  7 | 			selected:
  8 | 				item &&
  9 | 				modelValue.includes(
 10 | 					item[itemKey]
 11 | 				),
 12 | 			'select-mode': selectMode,
 13 | 		}, `card-style-${cardstyle}`]"
 14 | 		@click="handleClick"
 15 | 	>
 16 | 		
 17 | 		<div :class="`card-${size}`">
 18 | 			<card-item
 19 | 				:id="item.id"
 20 | 				:item="item"
 21 | 				:collection="collection"
 22 | 				:image="
 23 | 					(imageSource &&
 24 | 						imageSource?.id) ||
 25 | 					null
 26 | 				"
 27 | 				:selectMode="
 28 | 					selectionIcon
 29 | 				"
 30 | 				:title="title"
 31 | 				:subtitle="subtitle"
 32 | 				:content="content"
 33 | 				:tag="tag"
 34 | 				:idShow="idShow"
 35 | 				:statusClass="
 36 | 					statusClass(
 37 | 						item.status
 38 | 					)
 39 | 				"
 40 | 				:classImgFit="imgFit()"
 41 | 				:to="to"
 42 | 			>
 43 | 				<template #select-icon>
 44 | 					<v-icon
 45 | 						class="selector"
 46 | 						:name="selectionIcon"
 47 | 						@click.stop="
 48 | 							toggleSelection
 49 | 						"
 50 | 					/>
 51 | 				</template>
 52 | 			</card-item>
 53 | 		</div>
 54 | 	</div>
 55 | 	<v-drawer
 56 | 		v-model="previewDrawer"
 57 | 		@cancel="previewDrawer=false"
 58 | 	>
 59 | 		<template #title>
 60 | 			<render-template 
 61 | 				v-if="title" class="title" 
 62 | 				:collection="collection" 
 63 | 				:item="item" 
 64 | 				:template="title" 
 65 | 			/>
 66 | 		</template>
 67 | 		<template #headline>
 68 | 			<render-template 
 69 | 				v-if="subtitle" class="subtitle" 
 70 | 				:collection="collection" 
 71 | 				:item="item" 
 72 | 				:template="subtitle" 
 73 | 			/>
 74 | 		</template>
 75 | 		<div class="preview-content">
 76 | 			<div class="post-content" v-html="previewContent"></div>
 77 | 		</div>
 78 | 	</v-drawer>
 79 | </template>
 80 | 
 81 | <script lang="ts">
 82 | import {
 83 | 	computed,
 84 | 	defineComponent,
 85 | 	PropType,
 86 | 	ref,
 87 | } from "vue";
 88 | import { useI18n } from "vue-i18n";
 89 | import { useRouter } from "vue-router";
 90 | import CardItem from "./CardItem.vue";
 91 | import { getFieldsFromTemplate } from '@directus/utils';
 92 | 
 93 | type File = {
 94 | 	[key: string]: any;
 95 | 	id: string;
 96 | 	type: string;
 97 | 	modified_on: Date;
 98 | };
 99 | export default defineComponent({
100 | 	components: { CardItem },
101 | 	props: {
102 | 		collection: {
103 | 			type: String,
104 | 		},
105 | 		icon: {
106 | 			type: String,
107 | 			default: "box",
108 | 		},
109 | 		file: {
110 | 			type: Object as PropType<File>,
111 | 			default: null,
112 | 		},
113 | 		crop: {
114 | 			type: Boolean,
115 | 			default: false,
116 | 		},
117 | 		loading: {
118 | 			type: Boolean,
119 | 			default: false,
120 | 		},
121 | 		item: {
122 | 			type: Object as PropType<
123 | 				Record<string, any>
124 | 			>,
125 | 			default: null,
126 | 		},
127 | 		modelValue: {
128 | 			type: Array as PropType<
129 | 				(string | number)[]
130 | 			>,
131 | 			default: () => [],
132 | 		},
133 | 		selectMode: {
134 | 			type: Boolean,
135 | 			default: false,
136 | 		},
137 | 		to: {
138 | 			type: String,
139 | 			default: "",
140 | 		},
141 | 		readonly: {
142 | 			type: Boolean,
143 | 			default: false,
144 | 		},
145 | 		itemKey: {
146 | 			type: String,
147 | 			required: true,
148 | 		},
149 | 		imageSource: {
150 | 			type: String,
151 | 		},
152 | 		title: {
153 | 			type: String,
154 | 			default: "title",
155 | 		},
156 | 		subtitle: {
157 | 			type: String,
158 | 			default: "subtitle",
159 | 		},
160 | 		content: {
161 | 			type: String,
162 | 			default: "content",
163 | 		},
164 | 		imageFit: {
165 | 			type: String,
166 | 		},
167 | 		tag: {
168 | 			type: String,
169 | 			default: false,
170 | 		},
171 | 		cardstyle: {
172 | 			type: String,
173 | 			default: '1',
174 | 		},
175 | 		size: {
176 | 			type: Number,
177 | 			default: 1,
178 | 		},
179 | 		idShow: {
180 | 			type: Boolean,
181 | 		},
182 | 	},
183 | 	emits: ["update:modelValue"],
184 | 	setup(props, { emit }) {
185 | 		const router = useRouter();
186 | 		const imgError = ref(false);
187 | 		const { t } = useI18n();
188 | 		const previewDrawer = ref(false)
189 | 
190 | 		const previewContent = computed(() => {
191 | 			const fields = getFieldsFromTemplate(props.content)
192 | 			let output = fields?.map((field) => props.item?.[field])
193 | 			return output.join('')
194 | 		})
195 | 
196 | 		const selectionIcon = computed(
197 | 			() => {
198 | 				if (!props.item)
199 | 					return "radio_button_unchecked";
200 | 
201 | 				return props.modelValue.includes(
202 | 					props.item[
203 | 						props.itemKey
204 | 					]
205 | 				)
206 | 					? "check_circle"
207 | 					: "radio_button_unchecked";
208 | 			}
209 | 		);
210 | 
211 | 		function toggleSelection():
212 | 			| void
213 | 			| any {
214 | 			if (!props.item)
215 | 				return null;
216 | 
217 | 			if (
218 | 				props.modelValue.includes(
219 | 					props.item[
220 | 						props.itemKey
221 | 					]
222 | 				)
223 | 			) {
224 | 				emit(
225 | 					"update:modelValue",
226 | 					props.modelValue.filter(
227 | 						(key) =>
228 | 							key !==
229 | 							props.item[
230 | 								props
231 | 									.itemKey
232 | 							]
233 | 					)
234 | 				);
235 | 			} else {
236 | 				emit(
237 | 					"update:modelValue",
238 | 					[
239 | 						...props.modelValue,
240 | 						props.item[
241 | 							props
242 | 								.itemKey
243 | 						],
244 | 					]
245 | 				);
246 | 			}
247 | 		}
248 | 
249 | 		function handleClick(): void {
250 | 			console.log(props.selectMode)
251 | 			if (
252 | 				props.selectMode ===
253 | 				true
254 | 			) {
255 | 				toggleSelection();
256 | 			} else {
257 | 				previewDrawer.value = true
258 | 				// router.push(props.to);
259 | 			}
260 | 		}
261 | 
262 | 		function imgFit(): string {
263 | 			return props.imageFit ==
264 | 				"crop"
265 | 				? "object-cover"
266 | 				: "object-contain";
267 | 		}
268 | 
269 | 		function statusClass(
270 | 			status: string
271 | 		): string {
272 | 			return status ===
273 | 				"published"
274 | 				? "color_primary"
275 | 				: status === "archived"
276 | 				? "color_archire"
277 | 				: "color_sub";
278 | 		}
279 | 
280 | 		return {
281 | 			t,
282 | 			selectionIcon,
283 | 			previewDrawer,
284 | 			previewContent,
285 | 			toggleSelection,
286 | 			handleClick,
287 | 			imgError,
288 | 			imgFit,
289 | 			statusClass,
290 | 		};
291 | 	},
292 | });
293 | </script>
294 | 
295 | <style lang="scss" scoped>
296 | .loading {
297 | 	.header {
298 | 		margin-bottom: 8px;
299 | 	}
300 | }
301 | .card_img {
302 | 	wdith: 150px;
303 | 	object-fit: cover;
304 | 	height: 150px;
305 | }
306 | .card {
307 | 	position: relative;
308 | 	cursor: pointer;
309 | 
310 | 	.header {
311 | 		position: relative;
312 | 		z-index: 1;
313 | 		display: flex;
314 | 		align-items: center;
315 | 		justify-content: center;
316 | 		width: 100%;
317 | 		overflow: hidden;
318 | 		background-color: var(
319 | 			--background-normal
320 | 		);
321 | 		border-color: var(--primary-50);
322 | 		border-style: solid;
323 | 		border-width: 0px;
324 | 		border-radius: var(
325 | 			--border-radius
326 | 		);
327 | 		transition: border-width
328 | 			var(--fast)
329 | 			var(--transition);
330 | 
331 | 		&::after {
332 | 			display: block;
333 | 			padding-bottom: 100%;
334 | 			content: "";
335 | 		}
336 | 
337 | 		.image {
338 | 			position: absolute;
339 | 			top: 0;
340 | 			left: 0;
341 | 			width: 100%;
342 | 			height: 100%;
343 | 			object-fit: contain;
344 | 		}
345 | 
346 | 		.svg {
347 | 			position: absolute;
348 | 			width: 75%;
349 | 			height: 75%;
350 | 			object-fit: contain;
351 | 		}
352 | 
353 | 		.type {
354 | 			color: var(
355 | 				--foreground-subdued
356 | 			);
357 | 			text-transform: uppercase;
358 | 		}
359 | 
360 | 		.v-icon {
361 | 			--v-icon-color: var(
362 | 				--foreground-subdued
363 | 			);
364 | 		}
365 | 
366 | 		.v-skeleton-loader {
367 | 			position: absolute;
368 | 			top: 0;
369 | 			left: 0;
370 | 			width: 100%;
371 | 			height: 100%;
372 | 		}
373 | 
374 | 		.selection-fade {
375 | 			position: absolute;
376 | 			top: 0;
377 | 			left: 0;
378 | 			z-index: 1;
379 | 			width: 100%;
380 | 			height: 48px;
381 | 			opacity: 0;
382 | 			transition: opacity
383 | 				var(--fast)
384 | 				var(--transition);
385 | 
386 | 			&::before {
387 | 				position: absolute;
388 | 				top: 0;
389 | 				left: 0;
390 | 				width: 100%;
391 | 				height: 100%;
392 | 				background-image: linear-gradient(
393 | 					-180deg,
394 | 					rgb(38 50 56 / 0.1)
395 | 						10%,
396 | 					rgb(38 50 56 / 0)
397 | 				);
398 | 				content: "";
399 | 			}
400 | 		}
401 | 	}
402 | 
403 | 	&::before {
404 | 		position: absolute;
405 | 		top: 7px;
406 | 		left: 7px;
407 | 		z-index: 2;
408 | 		width: 18px;
409 | 		height: 18px;
410 | 		background-color: var(
411 | 			--background-page
412 | 		);
413 | 		border-radius: 24px;
414 | 		opacity: 0;
415 | 		transition: opacity var(--fast)
416 | 			var(--transition);
417 | 		content: "";
418 | 	}
419 | 
420 | 	.selector {
421 | 		color: var(--v-icon-color);
422 | 		position: absolute;
423 | 		top: 0px;
424 | 		left: 0px;
425 | 		z-index: 11;
426 | 		margin: 4px;
427 | 		opacity: 0;
428 | 		transition: opacity var(--fast)
429 | 				var(--transition),
430 | 			color var(--fast)
431 | 				var(--transition);
432 | 		&:hover {
433 | 			opacity: 1 !important;
434 | 		}
435 | 	}
436 | 
437 | 	&.select-mode {
438 | 		.selector {
439 | 			opacity: 0.5;
440 | 		}
441 | 
442 | 		.header {
443 | 			.selection-fade {
444 | 				opacity: 1;
445 | 			}
446 | 		}
447 | 	}
448 | 
449 | 	&.selected {
450 | 		&::before {
451 | 			opacity: 1;
452 | 		}
453 | 
454 | 		.selector {
455 | 			--v-icon-color: var(
456 | 				--primary
457 | 			);
458 | 			--v-icon-color-hover: var(
459 | 				--primary
460 | 			);
461 | 
462 | 			opacity: 1;
463 | 		}
464 | 
465 | 		.header {
466 | 			border-width: 12px;
467 | 
468 | 			.selection-fade {
469 | 				opacity: 1;
470 | 			}
471 | 		}
472 | 	}
473 | 
474 | 	&:hover {
475 | 		.selector {
476 | 			opacity: 2;
477 | 		}
478 | 
479 | 		.header {
480 | 			.selection-fade {
481 | 				opacity: 1;
482 | 			}
483 | 		}
484 | 	}
485 | }
486 | 
487 | .readonly {
488 | 	pointer-events: none;
489 | }
490 | 
491 | .title,
492 | .subtitle {
493 | 	position: relative;
494 | 	display: flex;
495 | 	align-items: center;
496 | 	width: 100%;
497 | 	height: 20px;
498 | 	margin-top: 2px;
499 | 	overflow: hidden;
500 | 	line-height: 1.3em;
501 | 	white-space: nowrap;
502 | 	text-overflow: ellipsis;
503 | 
504 | 	:deep(.render-template) {
505 | 		height: 100%;
506 | 	}
507 | }
508 | 
509 | .subtitle {
510 | 	margin-top: 0px;
511 | 	color: var(--foreground-subdued);
512 | }
513 | 
514 | .preview-content {
515 | 	padding: 0 24px;
516 | }
517 | </style>
518 | 


--------------------------------------------------------------------------------
/src/components/header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="cards-header">
  3 | 		<div class="start">
  4 | 			<div
  5 | 				v-if="
  6 | 					selectionSync.length >
  7 | 					0
  8 | 				"
  9 | 				class="selected"
 10 | 				@click="
 11 | 					selectionSync = []
 12 | 				"
 13 | 			>
 14 | 				<v-icon
 15 | 					name="cancel"
 16 | 					outline
 17 | 				/>
 18 | 				<span class="label">{{
 19 | 					t(
 20 | 						"n_items_selected",
 21 | 						selectionSync.length
 22 | 					)
 23 | 				}}</span>
 24 | 			</div>
 25 | 			<button
 26 | 				v-else
 27 | 				class="select-all"
 28 | 				@click="
 29 | 					showSelect ===
 30 | 					'multiple'
 31 | 						? $emit(
 32 | 								'select-all'
 33 | 						  )
 34 | 						: undefined
 35 | 				"
 36 | 			>
 37 | 				<v-icon
 38 | 					name="check_circle"
 39 | 					outline
 40 | 				/>
 41 | 				<span class="label">{{
 42 | 					t(
 43 | 						showSelect ===
 44 | 							"multiple"
 45 | 							? "select_all"
 46 | 							: "select_an_item"
 47 | 					)
 48 | 				}}</span>
 49 | 			</button>
 50 | 		</div>
 51 | 		<div class="end">
 52 | 			<v-select
 53 | 				:items="styleItems"
 54 | 				v-model="styleSync"
 55 | 				class="select-card-style"
 56 | 			/>
 57 | 			<v-icon
 58 | 				v-tooltip.top="
 59 | 					t('card_size')
 60 | 				"
 61 | 				class="size-selector"
 62 | 				:name="`${
 63 | 					size === 1
 64 | 						? 'reorder'
 65 | 						: 'grid_' + size
 66 | 				}`"
 67 | 				clickable
 68 | 				@click="toggleSize"
 69 | 			/>
 70 | 
 71 | 			<v-menu
 72 | 				show-arrow
 73 | 				placement="bottom"
 74 | 			>
 75 | 				<template
 76 | 					#activator="{
 77 | 						toggle,
 78 | 					}"
 79 | 				>
 80 | 					<div
 81 | 						v-tooltip.top="
 82 | 							t(
 83 | 								'sort_field'
 84 | 							)
 85 | 						"
 86 | 						class="sort-selector"
 87 | 						@click="toggle"
 88 | 					>
 89 | 						{{
 90 | 							sortField &&
 91 | 							sortField.name
 92 | 						}}
 93 | 					</div>
 94 | 				</template>
 95 | 
 96 | 				<v-list>
 97 | 					<v-list-item
 98 | 						v-for="field in fieldsWithoutFake"
 99 | 						:key="
100 | 							field.field
101 | 						"
102 | 						:disabled="
103 | 							field.disabled
104 | 						"
105 | 						:active="
106 | 							field.field ===
107 | 							sortKey
108 | 						"
109 | 						clickable
110 | 						@click="
111 | 							sortSync = [
112 | 								field.field,
113 | 							]
114 | 						"
115 | 					>
116 | 						<v-list-item-content
117 | 							>{{
118 | 								field.name
119 | 							}}</v-list-item-content
120 | 						>
121 | 					</v-list-item>
122 | 				</v-list>
123 | 			</v-menu>
124 | 			<v-icon
125 | 				v-tooltip.top="
126 | 					t('sort_direction')
127 | 				"
128 | 				class="sort-direction"
129 | 				:class="{ descending }"
130 | 				name="sort"
131 | 				clickable
132 | 				@click="
133 | 					toggleDescending
134 | 				"
135 | 			/>
136 | 		</div>
137 | 	</div>
138 | </template>
139 | 
140 | <script lang="ts">
141 | import { useI18n } from "vue-i18n";
142 | import {
143 | 	defineComponent,
144 | 	PropType,
145 | 	computed,
146 | 	ref,
147 | } from "vue";
148 | import {
149 | 	Field,
150 | 	ShowSelect,
151 | } from "@directus/types";
152 | import { useSync } from "@directus/composables";
153 | 
154 | export default defineComponent({
155 | 	props: {
156 | 		fields: {
157 | 			type: Array as PropType<
158 | 				Field[]
159 | 			>,
160 | 			required: true,
161 | 		},
162 | 		cardstyle: {
163 | 			type: String,
164 | 		},
165 | 		size: {
166 | 			type: Number,
167 | 			required: true,
168 | 		},
169 | 		sort: {
170 | 			type: Array as PropType<
171 | 				string[]
172 | 			>,
173 | 			required: true,
174 | 		},
175 | 		showSelect: {
176 | 			type: String as PropType<ShowSelect>,
177 | 			default: "multiple",
178 | 		},
179 | 		selection: {
180 | 			type: Array as PropType<
181 | 				Record<string, any>
182 | 			>,
183 | 			default: () => [],
184 | 		},
185 | 	},
186 | 	emits: [
187 | 		"select-all",
188 | 		"update:cardstyle",
189 | 		"update:size",
190 | 		"update:sort",
191 | 		"update:selection",
192 | 	],
193 | 	setup(props, { emit }) {
194 | 		const { t } = useI18n();
195 | 
196 | 		const styleItems = ref([
197 | 			{
198 | 				text: 'Style 1',
199 | 				value: '1'
200 | 			},
201 | 			{
202 | 				text: 'Style 2',
203 | 				value: '2'
204 | 			},
205 | 		])
206 | 
207 | 		const styleSync = useSync(
208 | 			props,
209 | 			"cardstyle",
210 | 			emit
211 | 		);
212 | 
213 | 		const sizeSync = useSync(
214 | 			props,
215 | 			"size",
216 | 			emit
217 | 		);
218 | 		const sortSync = useSync(
219 | 			props,
220 | 			"sort",
221 | 			emit
222 | 		);
223 | 		const selectionSync = useSync(
224 | 			props,
225 | 			"selection",
226 | 			emit
227 | 		);
228 | 
229 | 		const descending = computed(
230 | 			() =>
231 | 				props.sort[0].startsWith(
232 | 					"-"
233 | 				)
234 | 		);
235 | 
236 | 		const sortKey = computed(() =>
237 | 			props.sort[0].startsWith(
238 | 				"-"
239 | 			)
240 | 				? props.sort[0].substring(
241 | 						1
242 | 				  )
243 | 				: props.sort[0]
244 | 		);
245 | 
246 | 		const sortField = computed(
247 | 			() => {
248 | 				return props.fields.find(
249 | 					(field) =>
250 | 						field.field ===
251 | 						sortKey.value
252 | 				);
253 | 			}
254 | 		);
255 | 
256 | 		const fieldsWithoutFake =
257 | 			computed(() => {
258 | 				return props.fields
259 | 					.filter(
260 | 						(field) =>
261 | 							field.field.startsWith(
262 | 								"$"
263 | 							) === false
264 | 					)
265 | 					.map((field) => ({
266 | 						field: field.field,
267 | 						name: field.name,
268 | 						disabled: [
269 | 							"json",
270 | 							"o2m",
271 | 							"m2o",
272 | 							"m2a",
273 | 							"file",
274 | 							"files",
275 | 							"alias",
276 | 							"presentation",
277 | 						].includes(
278 | 							field.type
279 | 						),
280 | 					}));
281 | 			});
282 | 
283 | 		return {
284 | 			t,
285 | 			toggleSize,
286 | 			descending,
287 | 			toggleDescending,
288 | 			sortField,
289 | 			styleSync,
290 | 			styleItems,
291 | 			sizeSync,
292 | 			sortSync,
293 | 			selectionSync,
294 | 			sortKey,
295 | 			fieldsWithoutFake,
296 | 		};
297 | 
298 | 		function toggleSize() {
299 | 			if (props.size <= 2) {
300 | 				sizeSync.value++;
301 | 			} else {
302 | 				sizeSync.value = 1;
303 | 			}
304 | 		}
305 | 
306 | 		function toggleDescending() {
307 | 			if (
308 | 				descending.value ===
309 | 				true
310 | 			) {
311 | 				sortSync.value = [
312 | 					sortSync.value[0].substring(
313 | 						1
314 | 					),
315 | 				];
316 | 			} else {
317 | 				sortSync.value = [
318 | 					"-" +
319 | 						sortSync.value,
320 | 				];
321 | 			}
322 | 		}
323 | 	},
324 | });
325 | </script>
326 | 
327 | <style lang="scss" scoped>
328 | .cards-header {
329 | 	position: sticky;
330 | 	top: var(--layout-offset-top);
331 | 	z-index: 4;
332 | 	display: flex;
333 | 	align-items: center;
334 | 	justify-content: space-between;
335 | 	width: 100%;
336 | 	height: 52px;
337 | 	margin-bottom: 36px;
338 | 	padding: 0 8px;
339 | 	background-color: var(
340 | 		--background-page
341 | 	);
342 | 	border-top: var(--border-width)
343 | 		solid var(--border-subdued);
344 | 	border-bottom: var(--border-width)
345 | 		solid var(--border-subdued);
346 | 	box-shadow: 0 0 0 2px
347 | 		var(--background-page);
348 | }
349 | 
350 | .start {
351 | 	.label {
352 | 		display: inline-block;
353 | 		margin-left: 4px;
354 | 		transform: translateY(1px);
355 | 	}
356 | 
357 | 	.select-all {
358 | 		color: var(
359 | 			--foreground-subdued
360 | 		);
361 | 		transition: color var(--fast)
362 | 			var(--transition);
363 | 
364 | 		&:hover {
365 | 			color: var(
366 | 				--foreground-normal
367 | 			);
368 | 		}
369 | 	}
370 | 
371 | 	.selected {
372 | 		cursor: pointer;
373 | 	}
374 | }
375 | 
376 | .end {
377 | 	display: flex;
378 | 	align-items: center;
379 | 	color: var(--foreground-subdued);
380 | 
381 | 	.size-selector {
382 | 		margin-right: 16px;
383 | 		transition: color var(--fast)
384 | 			var(--transition);
385 | 		--v-icon-size: 24px;
386 | 		font-size: 24px;
387 | 
388 | 		&:hover {
389 | 			color: var(
390 | 				--foreground-normal
391 | 			);
392 | 		}
393 | 	}
394 | 
395 | 	.sort-selector {
396 | 		margin-right: 8px;
397 | 		transition: color var(--fast)
398 | 			var(--transition);
399 | 
400 | 		&:hover {
401 | 			color: var(
402 | 				--foreground-normal
403 | 			);
404 | 			cursor: pointer;
405 | 		}
406 | 	}
407 | 
408 | 	.sort-direction {
409 | 		transition: color var(--fast)
410 | 			var(--transition);
411 | 
412 | 		&.descending {
413 | 			transform: scaleY(-1);
414 | 		}
415 | 
416 | 		&:hover {
417 | 			color: var(
418 | 				--foreground-normal
419 | 			);
420 | 			cursor: pointer;
421 | 		}
422 | 	}
423 | }
424 | .select-card-style {
425 | 	margin-right: 16px;
426 | 	display: block;
427 | }
428 | .select-card-style :deep() {
429 | 	.v-menu-activator {
430 | 		display: block;
431 | 		min-width: 120px;
432 | 	}
433 | }
434 | </style>
435 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
  1 | import { useI18n } from "vue-i18n";
  2 | import {
  3 | 	useCollection,
  4 | 	useItems,
  5 | 	useSync,
  6 | 	defineLayout,
  7 | } from "@directus/extensions-sdk";
  8 | import { getFieldsFromTemplate } from "@directus/utils";
  9 | import {
 10 | 	computed,
 11 | 	ref,
 12 | 	toRefs,
 13 | 	Ref,
 14 | 	unref,
 15 | 	watch,
 16 | } from "vue";
 17 | import CardsActions from "./actions.vue";
 18 | import CardsLayout from "./layout.vue";
 19 | import CardsOptions from "./options.vue";
 20 | import {
 21 | 	LayoutOptions,
 22 | 	LayoutQuery,
 23 | } from "./types";
 24 | import "./style.css";
 25 | 
 26 | export default defineLayout<
 27 | 	LayoutOptions,
 28 | 	LayoutQuery
 29 | >({
 30 | 	id: "item_blog",
 31 | 	name: "Grid View",
 32 | 	icon: "grid_4",
 33 | 	component: CardsLayout,
 34 | 	slots: {
 35 | 		options: CardsOptions,
 36 | 		sidebar: () => undefined,
 37 | 		actions: CardsActions,
 38 | 	},
 39 | 	setup(props, { emit }) {
 40 | 		const selection = useSync(
 41 | 			props,
 42 | 			"selection",
 43 | 			emit
 44 | 		);
 45 | 		const layoutOptions = useSync(
 46 | 			props,
 47 | 			"layoutOptions",
 48 | 			emit
 49 | 		);
 50 | 
 51 | 		const layoutQuery = useSync(
 52 | 			props,
 53 | 			"layoutQuery",
 54 | 			emit
 55 | 		);
 56 | 
 57 | 		const {
 58 | 			collection,
 59 | 			filter,
 60 | 			search,
 61 | 			filterUser,
 62 | 		} = toRefs(props);
 63 | 
 64 | 		const {
 65 | 			info,
 66 | 			primaryKeyField,
 67 | 			fields: fieldsInCollection,
 68 | 		} = useCollection(collection);
 69 | 
 70 | 		const {
 71 | 			cardstyle,
 72 | 			size,
 73 | 			icon,
 74 | 			imageSource,
 75 | 			title,
 76 | 			subtitle,
 77 | 			content,
 78 | 			imageFit,
 79 | 			tag,
 80 | 			idShow,
 81 | 		} = useLayoutOptions();
 82 | 
 83 | 		const {
 84 | 			sort,
 85 | 			limit,
 86 | 			page,
 87 | 			fields,
 88 | 		} = useLayoutQuery();
 89 | 
 90 | 		const fileFields = computed(
 91 | 			() => {
 92 | 				return fieldsInCollection.value;
 93 | 			}
 94 | 		);
 95 | 
 96 | 		const {
 97 | 			items,
 98 | 			loading,
 99 | 			error,
100 | 			totalPages,
101 | 			itemCount,
102 | 			totalCount,
103 | 			getItems,
104 | 			getTotalCount,
105 | 			getItemCount,
106 | 		} = useItems(collection, {
107 | 			sort,
108 | 			limit,
109 | 			page,
110 | 			fields,
111 | 			filter,
112 | 			search,
113 | 		});
114 | 
115 | 		function formatCollectionItemsCount(
116 | 			totalItems: number,
117 | 			currentPage: number,
118 | 			perPage: number,
119 | 			isFiltered = false
120 | 		) {
121 | 			const { t, n } = useI18n();
122 | 
123 | 			const opts = {
124 | 				start: n(
125 | 					(+currentPage - 1) *
126 | 						perPage +
127 | 						1
128 | 				),
129 | 				end: n(
130 | 					Math.min(
131 | 						currentPage *
132 | 							perPage,
133 | 						totalItems || 0
134 | 					)
135 | 				),
136 | 				count: n(
137 | 					totalItems || 0
138 | 				),
139 | 			};
140 | 
141 | 			if (isFiltered) {
142 | 				if (totalItems === 1) {
143 | 					return t(
144 | 						"one_filtered_item"
145 | 					);
146 | 				}
147 | 
148 | 				return t(
149 | 					"start_end_of_count_filtered_items",
150 | 					opts
151 | 				);
152 | 			}
153 | 
154 | 			if (totalItems > perPage) {
155 | 				return t(
156 | 					"start_end_of_count_items",
157 | 					opts
158 | 				);
159 | 			}
160 | 
161 | 			return t("item_count", {
162 | 				count: totalItems,
163 | 			});
164 | 		}
165 | 
166 | 		const showingCount = computed(
167 | 			() => {
168 | 				const filtering =
169 | 					Boolean(
170 | 						(itemCount.value ||
171 | 							0) <
172 | 							(totalCount.value ||
173 | 								0) &&
174 | 							filterUser.value
175 | 					);
176 | 				return formatCollectionItemsCount(
177 | 					itemCount.value ||
178 | 						0,
179 | 					page.value,
180 | 					limit.value,
181 | 					filtering
182 | 				);
183 | 			}
184 | 		);
185 | 
186 | 		function syncRefProperty<
187 | 			R,
188 | 			T extends keyof R
189 | 		>(
190 | 			ref: Ref<R>,
191 | 			key: T,
192 | 			defaultValue:
193 | 				| R[T]
194 | 				| Ref<R[T]>
195 | 		) {
196 | 			return computed<R[T]>({
197 | 				get() {
198 | 					return (
199 | 						ref.value?.[
200 | 							key
201 | 						] ??
202 | 						unref(
203 | 							defaultValue
204 | 						)
205 | 					);
206 | 				},
207 | 				set(value: R[T]) {
208 | 					ref.value =
209 | 						Object.assign(
210 | 							{},
211 | 							ref.value,
212 | 							{
213 | 								[key]: value,
214 | 							}
215 | 						) as R;
216 | 				},
217 | 			});
218 | 		}
219 | 
220 | 		const width = ref(0);
221 | 
222 | 		const isSingleRow = computed(
223 | 			() => {
224 | 				const cardsWidth =
225 | 					items.value.length *
226 | 						(size.value *
227 | 							40) +
228 | 					(items.value
229 | 						.length -
230 | 						1) *
231 | 						24;
232 | 				return (
233 | 					cardsWidth <=
234 | 					width.value
235 | 				);
236 | 			}
237 | 		);
238 | 
239 | 		function clone(
240 | 			value: any
241 | 		): any {
242 | 			if (
243 | 				typeof value ===
244 | 					"object" &&
245 | 				value !== null
246 | 			) {
247 | 				if (
248 | 					Array.isArray(value)
249 | 				) {
250 | 					return value.map(
251 | 						(item) =>
252 | 							clone(item)
253 | 					) as unknown as any;
254 | 				} else {
255 | 					const newObj =
256 | 						{} as any;
257 | 					for (let prop in value) {
258 | 						newObj[prop] =
259 | 							clone(
260 | 								value[
261 | 									prop
262 | 								]
263 | 							);
264 | 					}
265 | 					return newObj;
266 | 				}
267 | 			}
268 | 			return value;
269 | 		}
270 | 
271 | 		async function resetPresetAndRefresh(): Promise<void> {
272 | 			await props?.resetPreset?.();
273 | 			refresh();
274 | 		}
275 | 
276 | 		function refresh(): void {
277 | 			getItems();
278 | 			getTotalCount();
279 | 			getItemCount();
280 | 		}
281 | 
282 | 		function toPage(
283 | 			newPage: number
284 | 		) {
285 | 			page.value = newPage;
286 | 		}
287 | 
288 | 		function useLayoutOptions() {
289 | 			const cardstyle =
290 | 				createViewOption<number>(
291 | 					"cardstyle",
292 | 					'1'
293 | 				);
294 | 			const size =
295 | 				createViewOption<number>(
296 | 					"size",
297 | 					1
298 | 				);
299 | 			const icon =
300 | 				createViewOption<string>(
301 | 					"icon",
302 | 					"box"
303 | 				);
304 | 			const title =
305 | 				createViewOption<
306 | 					string | null
307 | 				>("title", null);
308 | 			const subtitle =
309 | 				createViewOption<
310 | 					string | null
311 | 				>("subtitle", null);
312 | 			const content =
313 | 				createViewOption<
314 | 					string | null
315 | 				>("content", null);
316 | 			const imageSource =
317 | 				createViewOption<
318 | 					string | null
319 | 				>("imageSource", null);
320 | 			const imageFit =
321 | 				createViewOption<string>(
322 | 					"imageFit",
323 | 					"cover"
324 | 				);
325 | 			const tag =
326 | 				createViewOption<string>(
327 | 					"tag",
328 | 					null
329 | 				);
330 | 			const idShow =
331 | 				createViewOption<boolean>(
332 | 					"idShow",
333 | 					true
334 | 				);
335 | 			return {
336 | 				cardstyle,
337 | 				size,
338 | 				icon,
339 | 				imageSource,
340 | 				title,
341 | 				subtitle,
342 | 				content,
343 | 				imageFit,
344 | 				tag,
345 | 				idShow,
346 | 			};
347 | 			function createViewOption<
348 | 				T
349 | 			>(
350 | 				key: keyof LayoutOptions,
351 | 				defaultValue: any
352 | 			) {
353 | 				return computed<T>({
354 | 					get() {
355 | 						return layoutOptions
356 | 							.value?.[
357 | 							key
358 | 						] !== undefined
359 | 							? layoutOptions
360 | 									.value?.[
361 | 									key
362 | 							  ]
363 | 							: defaultValue;
364 | 					},
365 | 					set(newValue: T) {
366 | 						layoutOptions.value =
367 | 							{
368 | 								...layoutOptions.value,
369 | 								[key]: newValue,
370 | 							};
371 | 					},
372 | 				});
373 | 			}
374 | 		}
375 | 
376 | 		function useLayoutQuery() {
377 | 			const page =
378 | 				syncRefProperty(
379 | 					layoutQuery,
380 | 					"page",
381 | 					1
382 | 				);
383 | 			const limit =
384 | 				syncRefProperty(
385 | 					layoutQuery,
386 | 					"limit",
387 | 					25
388 | 				);
389 | 			const defaultSort =
390 | 				computed(() =>
391 | 					primaryKeyField.value
392 | 						? [
393 | 								primaryKeyField
394 | 									.value
395 | 									?.field,
396 | 						  ]
397 | 						: []
398 | 				);
399 | 			const sort =
400 | 				syncRefProperty(
401 | 					layoutQuery,
402 | 					"sort",
403 | 					defaultSort
404 | 				);
405 | 
406 | 			const fields = computed<
407 | 				string[]
408 | 			>(() => {
409 | 				if (
410 | 					!primaryKeyField.value ||
411 | 					!props.collection
412 | 				)
413 | 					return [];
414 | 				const fields = [
415 | 					primaryKeyField
416 | 						.value.field,
417 | 				];
418 | 
419 | 				if (imageSource.value) {
420 | 					fields.push(
421 | 						`${imageSource.value}.modified_on`
422 | 					);
423 | 					fields.push(
424 | 						`${imageSource.value}.type`
425 | 					);
426 | 					fields.push(
427 | 						`${imageSource.value}.filename_disk`
428 | 					);
429 | 					fields.push(
430 | 						`${imageSource.value}.storage`
431 | 					);
432 | 					fields.push(
433 | 						`${imageSource.value}.id`
434 | 					);
435 | 				}
436 | 
437 | 				if (
438 | 					props.collection ===
439 | 						"directus_files" &&
440 | 					imageSource.value ===
441 | 						"$thumbnail"
442 | 				) {
443 | 					fields.push(
444 | 						"modified_on"
445 | 					);
446 | 					fields.push("type");
447 | 				}
448 | 
449 | 				const titleSubtitleFields: string[] =
450 | 					[];
451 | 
452 | 				if (title.value) {
453 | 					titleSubtitleFields.push(
454 | 						...getFieldsFromTemplate(
455 | 							title.value
456 | 						)
457 | 					);
458 | 				}
459 | 
460 | 				if (subtitle.value) {
461 | 					titleSubtitleFields.push(
462 | 						...getFieldsFromTemplate(
463 | 							subtitle.value
464 | 						)
465 | 					);
466 | 				}
467 | 				if (content.value) {
468 | 					titleSubtitleFields.push(
469 | 						...getFieldsFromTemplate(
470 | 							content.value
471 | 						)
472 | 					);
473 | 				}
474 | 				if (tag.value) {
475 | 					titleSubtitleFields.push(
476 | 						...getFieldsFromTemplate(
477 | 							tag.value
478 | 						)
479 | 					);
480 | 				}
481 | 
482 | 				titleSubtitleFields.push(
483 | 					"status"
484 | 				);
485 | 				titleSubtitleFields.push(
486 | 					"date_created"
487 | 				);
488 | 
489 | 				return [
490 | 					...fields,
491 | 					...titleSubtitleFields,
492 | 				];
493 | 			});
494 | 
495 | 			return {
496 | 				sort,
497 | 				limit,
498 | 				page,
499 | 				fields,
500 | 			};
501 | 		}
502 | 
503 | 		function getLinkForItem(
504 | 			item: Record<string, any>
505 | 		): string | undefined {
506 | 			if (!primaryKeyField.value)
507 | 				return;
508 | 			return `/content/${
509 | 				props.collection
510 | 			}/${encodeURIComponent(
511 | 				item[
512 | 					primaryKeyField
513 | 						.value.field
514 | 				]
515 | 			)}`;
516 | 		}
517 | 
518 | 		function selectAll(): void {
519 | 			if (!primaryKeyField.value)
520 | 				return;
521 | 			const pk =
522 | 				primaryKeyField.value;
523 | 			selection.value = clone(
524 | 				items.value
525 | 			)?.map(
526 | 				(item: any) =>
527 | 					item[pk.field]
528 | 			);
529 | 		}
530 | 
531 | 		return {
532 | 			fileFields,
533 | 			items,
534 | 			loading,
535 | 			error,
536 | 			totalPages,
537 | 			page,
538 | 			toPage,
539 | 			itemCount,
540 | 			totalCount,
541 | 			fieldsInCollection,
542 | 			limit,
543 | 			cardstyle,
544 | 			size,
545 | 			primaryKeyField,
546 | 			icon,
547 | 			imageSource,
548 | 			tag,
549 | 			idShow,
550 | 			title,
551 | 			subtitle,
552 | 			content,
553 | 			getLinkForItem,
554 | 			imageFit,
555 | 			sort,
556 | 			info,
557 | 			showingCount,
558 | 			isSingleRow,
559 | 			width,
560 | 			refresh,
561 | 			selectAll,
562 | 			resetPresetAndRefresh,
563 | 			filter,
564 | 			search,
565 | 		};
566 | 	},
567 | });
568 | 


--------------------------------------------------------------------------------
/src/layout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div
  3 | 		ref="layoutElement"
  4 | 		class="layout-cards"
  5 | 		:style="{
  6 | 			'--size':
  7 | 				width >= 600 ? size : 1,
  8 | 		}"
  9 | 	>
 10 | 		<template
 11 | 			v-if="
 12 | 				loading || itemCount > 0
 13 | 			"
 14 | 		>
 15 | 			<cards-header
 16 | 				v-model:cardstyle="
 17 | 					cardstyleWritable
 18 | 				"
 19 | 				v-model:size="
 20 | 					sizeWritable
 21 | 				"
 22 | 				v-model:selection="
 23 | 					selectionWritable
 24 | 				"
 25 | 				v-model:sort="
 26 | 					sortWritable
 27 | 				"
 28 | 				:fields="
 29 | 					fieldsInCollection
 30 | 				"
 31 | 				:show-select="
 32 | 					showSelect
 33 | 				"
 34 | 				@select-all="selectAll"
 35 | 			/>
 36 | 			<div
 37 | 				class="grid"
 38 | 				:class="{
 39 | 					'single-row':
 40 | 						isSingleRow,
 41 | 				}"
 42 | 			>
 43 | 				<card
 44 | 					v-for="item in items"
 45 | 					:key="
 46 | 						item[
 47 | 							primaryKeyField
 48 | 								.field
 49 | 						]
 50 | 					"
 51 | 					v-model="
 52 | 						selectionWritable
 53 | 					"
 54 | 					:item-key="
 55 | 						primaryKeyField.field
 56 | 					"
 57 | 					:collection="
 58 | 						collection
 59 | 					"
 60 | 					:item="item"
 61 | 					:imageFit="imageFit"
 62 | 					:icon="icon"
 63 | 					:tag="tag"
 64 | 					:idShow="idShow"
 65 | 					:title="title"
 66 | 					:subtitle="subtitle"
 67 | 					:content="content"
 68 | 					:imageSource="
 69 | 						imageSource
 70 | 							? item[
 71 | 									imageSource
 72 | 							  ]
 73 | 							: null
 74 | 					"
 75 | 					:select-mode="
 76 | 						selectMode ||
 77 | 						(selection &&
 78 | 							selection.length >
 79 | 								0)
 80 | 					"
 81 | 					:to="
 82 | 						getLinkForItem(
 83 | 							item
 84 | 						)
 85 | 					"
 86 | 					:readonly="readonly"
 87 | 					:size="size"
 88 | 					:cardstyle="cardstyle"
 89 | 				/>
 90 | 			</div>
 91 | 			<div class="footer">
 92 | 				<div class="pagination">
 93 | 					<v-pagination
 94 | 						v-if="
 95 | 							totalPages >
 96 | 							1
 97 | 						"
 98 | 						:length="
 99 | 							totalPages
100 | 						"
101 | 						:total-visible="
102 | 							7
103 | 						"
104 | 						show-first-last
105 | 						:model-value="
106 | 							page
107 | 						"
108 | 						@update:model-value="
109 | 							toPage
110 | 						"
111 | 					/>
112 | 				</div>
113 | 
114 | 				<div
115 | 					v-if="
116 | 						loading ===
117 | 							false &&
118 | 						items.length >=
119 | 							25
120 | 					"
121 | 					class="per-page"
122 | 				>
123 | 					<span>{{
124 | 						t("per_page")
125 | 					}}</span>
126 | 					<v-select
127 | 						:model-value="`${limit}`"
128 | 						:items="[
129 | 							'25',
130 | 							'50',
131 | 							'100',
132 | 							'250',
133 | 							'500',
134 | 							'1000',
135 | 						]"
136 | 						inline
137 | 						@update:model-value="
138 | 							limitWritable =
139 | 								+$event
140 | 						"
141 | 					/>
142 | 				</div>
143 | 			</div>
144 | 		</template>
145 | 
146 | 		<v-info
147 | 			v-else-if="error"
148 | 			type="danger"
149 | 			:title="
150 | 				t('unexpected_error')
151 | 			"
152 | 			icon="error"
153 | 			center
154 | 		>
155 | 			{{
156 | 				t(
157 | 					"unexpected_error_copy"
158 | 				)
159 | 			}}
160 | 			<template #append>
161 | 				<v-error
162 | 					:error="error"
163 | 				/>
164 | 				<v-button
165 | 					small
166 | 					class="reset-preset"
167 | 					@click="
168 | 						resetPresetAndRefresh
169 | 					"
170 | 				>
171 | 					{{
172 | 						t(
173 | 							"reset_page_preferences"
174 | 						)
175 | 					}}
176 | 				</v-button>
177 | 			</template>
178 | 		</v-info>
179 | 		<slot
180 | 			v-else-if="
181 | 				itemCount === 0 &&
182 | 				(filter || search)
183 | 			"
184 | 			name="no-results"
185 | 		/>
186 | 		<slot
187 | 			v-else-if="itemCount === 0"
188 | 			name="no-items"
189 | 		/>
190 | 	</div>
191 | </template>
192 | 
193 | <script lang="ts">
194 | import { useI18n } from "vue-i18n";
195 | import {
196 | 	defineComponent,
197 | 	watch,
198 | 	PropType,
199 | 	ref,
200 | 	inject,
201 | 	Ref,
202 | 	toRefs,
203 | } from "vue";
204 | 
205 | import Card from "./components/Card.vue";
206 | import CardsHeader from "./components/Header.vue";
207 | import {
208 | 	Field,
209 | 	Item,
210 | } from "@directus/types";
211 | import {
212 | 	useSync,
213 | 	useElementSize,
214 | } from "@directus/composables";
215 | import {
216 | 	Filter,
217 | 	ShowSelect,
218 | } from "@directus/types";
219 | 
220 | export default defineComponent({
221 | 	components: { Card, CardsHeader },
222 | 	inheritAttrs: false,
223 | 	props: {
224 | 		collection: {
225 | 			type: String,
226 | 			required: true,
227 | 		},
228 | 		selection: {
229 | 			type: Array as PropType<
230 | 				Item[]
231 | 			>,
232 | 			required: true,
233 | 		},
234 | 		showSelect: {
235 | 			type: String as PropType<ShowSelect>,
236 | 			default: "multiple",
237 | 		},
238 | 		selectMode: {
239 | 			type: Boolean,
240 | 			required: true,
241 | 		},
242 | 		readonly: {
243 | 			type: Boolean,
244 | 			required: true,
245 | 		},
246 | 		items: {
247 | 			type: Array as PropType<
248 | 				Item[]
249 | 			>,
250 | 			required: true,
251 | 		},
252 | 		loading: {
253 | 			type: Boolean,
254 | 			required: true,
255 | 		},
256 | 		error: {
257 | 			type: Object as PropType<any>,
258 | 			default: null,
259 | 		},
260 | 		totalPages: {
261 | 			type: Number,
262 | 			required: true,
263 | 		},
264 | 		page: {
265 | 			type: Number,
266 | 			required: true,
267 | 		},
268 | 		toPage: {
269 | 			type: Function as PropType<
270 | 				(
271 | 					newPage: number
272 | 				) => void
273 | 			>,
274 | 			required: true,
275 | 		},
276 | 		itemCount: {
277 | 			type: Number,
278 | 			default: null,
279 | 		},
280 | 		fieldsInCollection: {
281 | 			type: Array as PropType<
282 | 				Item[]
283 | 			>,
284 | 			required: true,
285 | 		},
286 | 		limit: {
287 | 			type: Number,
288 | 			required: true,
289 | 		},
290 | 		cardstyle: {
291 | 			type: String,
292 | 		},
293 | 		size: {
294 | 			type: Number,
295 | 		},
296 | 		primaryKeyField: {
297 | 			type: Object as PropType<Field>,
298 | 			default: null,
299 | 		},
300 | 		icon: {
301 | 			type: String,
302 | 			required: true,
303 | 		},
304 | 		imageSource: {
305 | 			type: String,
306 | 			default: null,
307 | 		},
308 | 		title: {
309 | 			type: String,
310 | 			default: null,
311 | 		},
312 | 		subtitle: {
313 | 			type: String,
314 | 			default: null,
315 | 		},
316 | 		content: {
317 | 			type: String,
318 | 			default: null,
319 | 		},
320 | 		getLinkForItem: {
321 | 			type: Function as PropType<
322 | 				(
323 | 					item: Record<
324 | 						string,
325 | 						any
326 | 					>
327 | 				) => string | undefined
328 | 			>,
329 | 			required: true,
330 | 		},
331 | 		imageFit: {
332 | 			type: String,
333 | 		},
334 | 		sort: {
335 | 			type: Array as PropType<
336 | 				string[]
337 | 			>,
338 | 			required: true,
339 | 		},
340 | 		info: {
341 | 			type: Object,
342 | 			default: null,
343 | 		},
344 | 		isSingleRow: {
345 | 			type: Boolean,
346 | 			required: true,
347 | 		},
348 | 		width: {
349 | 			type: Number,
350 | 			required: true,
351 | 		},
352 | 		selectAll: {
353 | 			type: Function as PropType<
354 | 				() => void
355 | 			>,
356 | 			required: true,
357 | 		},
358 | 		resetPresetAndRefresh: {
359 | 			type: Function as PropType<
360 | 				() => Promise<void>
361 | 			>,
362 | 			required: true,
363 | 		},
364 | 		filter: {
365 | 			type: Object as PropType<Filter>,
366 | 			default: null,
367 | 		},
368 | 		search: {
369 | 			type: String,
370 | 			default: null,
371 | 		},
372 | 		tag: {
373 | 			type: String,
374 | 			default: null,
375 | 		},
376 | 		idShow: {
377 | 			type: Boolean,
378 | 		},
379 | 	},
380 | 	emits: [
381 | 		"update:selection",
382 | 		"update:limit",
383 | 		"update:cardstyle",
384 | 		"update:size",
385 | 		"update:sort",
386 | 		"update:width",
387 | 	],
388 | 	setup(props, { emit }) {
389 | 		const { t } = useI18n();
390 | 
391 | 		const selectionWritable =
392 | 			useSync(
393 | 				props,
394 | 				"selection",
395 | 				emit
396 | 			);
397 | 		const limitWritable = useSync(
398 | 			props,
399 | 			"limit",
400 | 			emit
401 | 		);
402 | 		const cardstyleWritable = useSync(
403 | 			props,
404 | 			"cardstyle",
405 | 			emit
406 | 		);
407 | 		const sizeWritable = useSync(
408 | 			props,
409 | 			"size",
410 | 			emit
411 | 		);
412 | 		const sortWritable = useSync(
413 | 			props,
414 | 			"sort",
415 | 			emit
416 | 		);
417 | 
418 | 		const mainElement = inject<
419 | 			Ref<Element | undefined>
420 | 		>("main-element");
421 | 
422 | 		const layoutElement =
423 | 			ref<HTMLElement>();
424 | 
425 | 		const { width } =
426 | 			useElementSize(
427 | 				layoutElement
428 | 			);
429 | 
430 | 		watch(
431 | 			() => props.page,
432 | 			() =>
433 | 				mainElement.value?.scrollTo(
434 | 					{
435 | 						top: 0,
436 | 						behavior:
437 | 							"smooth",
438 | 					}
439 | 				)
440 | 		);
441 | 
442 | 		watch(width, () => {
443 | 			emit(
444 | 				"update:width",
445 | 				width.value
446 | 			);
447 | 		});
448 | 
449 | 		return {
450 | 			t,
451 | 			selectionWritable,
452 | 			limitWritable,
453 | 			cardstyleWritable,
454 | 			sizeWritable,
455 | 			sortWritable,
456 | 			layoutElement,
457 | 			width,
458 | 		};
459 | 	},
460 | });
461 | </script>
462 | 
463 | <style lang="scss" scoped>
464 | .layout-cards {
465 | 	padding: var(--content-padding);
466 | 	padding-top: 0;
467 | }
468 | 
469 | .grid {
470 | 	display: grid;
471 | 	grid-template-columns: repeat(
472 | 		var(--size),
473 | 		minmax(0, 1fr)
474 | 	);
475 | 	gap: 32px 24px;
476 | }
477 | 
478 | .footer {
479 | 	display: flex;
480 | 	align-items: center;
481 | 	justify-content: space-between;
482 | 	padding-top: 40px;
483 | 
484 | 	.pagination {
485 | 		display: inline-block;
486 | 	}
487 | 
488 | 	.per-page {
489 | 		display: flex;
490 | 		align-items: center;
491 | 		justify-content: flex-end;
492 | 		width: 240px;
493 | 		color: var(
494 | 			--foreground-subdued
495 | 		);
496 | 
497 | 		span {
498 | 			width: auto;
499 | 			margin-right: 4px;
500 | 		}
501 | 
502 | 		.v-select {
503 | 			color: var(
504 | 				--foreground-normal
505 | 			);
506 | 		}
507 | 	}
508 | }
509 | 
510 | .reset-preset {
511 | 	margin-top: 24px;
512 | }
513 | </style>
514 | 


--------------------------------------------------------------------------------
/src/options.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="grid-w-full">
  3 | 		<div class="field">
  4 | 			<div class="type-label">
  5 | 				{{
  6 | 					t(
  7 | 						"layouts.cards.image_source"
  8 | 					)
  9 | 				}}
 10 | 			</div>
 11 | 			<v-select
 12 | 				v-model="
 13 | 					imageSourceWritable
 14 | 				"
 15 | 				show-deselect
 16 | 				item-value="field"
 17 | 				item-text="name"
 18 | 				:items="fileFields"
 19 | 			/>
 20 | 		</div>
 21 | 
 22 | 		<div class="field">
 23 | 			<div class="type-label">
 24 | 				{{
 25 | 					t(
 26 | 						"layouts.cards.title"
 27 | 					)
 28 | 				}}
 29 | 			</div>
 30 | 
 31 | 			<v-collection-field-template
 32 | 				v-model="titleWritable"
 33 | 				:collection="collection"
 34 | 			/>
 35 | 		</div>
 36 | 
 37 | 		<div class="field">
 38 | 			<div class="type-label">
 39 | 				{{
 40 | 					t(
 41 | 						"layouts.cards.subtitle"
 42 | 					)
 43 | 				}}
 44 | 			</div>
 45 | 			<v-collection-field-template
 46 | 				v-model="
 47 | 					subtitleWritable
 48 | 				"
 49 | 				:collection="collection"
 50 | 			/>
 51 | 		</div>
 52 | 		<div class="field">
 53 | 			<div class="type-label">
 54 | 				Content
 55 | 			</div>
 56 | 			<v-collection-field-template
 57 | 				v-model="
 58 | 					contentWritable
 59 | 				"
 60 | 				:collection="collection"
 61 | 			/>
 62 | 		</div>
 63 | 
 64 | 		<div class="field">
 65 | 			<div class="type-label">
 66 | 				{{
 67 | 					t(
 68 | 						"layouts.kanban.tags"
 69 | 					)
 70 | 				}}
 71 | 			</div>
 72 | 			<v-collection-field-template
 73 | 				v-model="tagWritable"
 74 | 				:collection="collection"
 75 | 			/>
 76 | 		</div>
 77 | 
 78 | 		<v-detail class="field">
 79 | 			<template #title>{{
 80 | 				t("advanced")
 81 | 			}}</template>
 82 | 			<div class="field">
 83 | 				<v-checkbox
 84 | 					v-model="
 85 | 						checkIdShow
 86 | 					"
 87 | 					block
 88 | 					:label="'Show Id'"
 89 | 				></v-checkbox>
 90 | 			</div>
 91 | 			<div class="nested-options">
 92 | 				<div class="field">
 93 | 					<div
 94 | 						class="type-label"
 95 | 					>
 96 | 						{{
 97 | 							t(
 98 | 								"layouts.cards.image_fit"
 99 | 							)
100 | 						}}
101 | 					</div>
102 | 					<v-select
103 | 						v-model="
104 | 							imageFitWritable
105 | 						"
106 | 						:items="[
107 | 							{
108 | 								text: t(
109 | 									'layouts.cards.crop'
110 | 								),
111 | 								value: 'crop',
112 | 							},
113 | 							{
114 | 								text: t(
115 | 									'layouts.cards.contain'
116 | 								),
117 | 								value: 'contain',
118 | 							},
119 | 						]"
120 | 					/>
121 | 				</div>
122 | 			</div>
123 | 		</v-detail>
124 | 	</div>
125 | </template>
126 | 
127 | <script lang="ts">
128 | import { useI18n } from "vue-i18n";
129 | import {
130 | 	defineComponent,
131 | 	ref,
132 | } from "vue";
133 | import { useSync } from "@directus/composables";
134 | 
135 | export default defineComponent({
136 | 	inheritAttrs: false,
137 | 	props: {
138 | 		collection: {
139 | 			type: String,
140 | 			required: true,
141 | 		},
142 | 		icon: {
143 | 			type: String,
144 | 			required: true,
145 | 		},
146 | 		fileFields: {
147 | 			type: Array,
148 | 			required: true,
149 | 		},
150 | 		imageSource: {
151 | 			type: String,
152 | 			default: null,
153 | 		},
154 | 		title: {
155 | 			type: String,
156 | 			default: null,
157 | 		},
158 | 		subtitle: {
159 | 			type: String,
160 | 			default: null,
161 | 		},
162 | 		content: {
163 | 			type: String,
164 | 			default: null,
165 | 		},
166 | 		imageFit: {
167 | 			type: String,
168 | 			required: true,
169 | 		},
170 | 		tag: {
171 | 			type: String,
172 | 			default: null,
173 | 		},
174 | 		idShow: {
175 | 			type: Boolean,
176 | 			default: true,
177 | 		},
178 | 	},
179 | 
180 | 	setup(props, { emit }) {
181 | 		const { t } = useI18n();
182 | 		const layoutOptions = useSync(
183 | 			props,
184 | 			"layoutOptions",
185 | 			emit
186 | 		);
187 | 
188 | 		const iconWritable = useSync(
189 | 			props,
190 | 			"icon",
191 | 			emit
192 | 		);
193 | 		const imageSourceWritable =
194 | 			useSync(
195 | 				props,
196 | 				"imageSource",
197 | 				emit
198 | 			);
199 | 		const titleWritable = useSync(
200 | 			props,
201 | 			"title",
202 | 			emit
203 | 		);
204 | 		const subtitleWritable =
205 | 			useSync(
206 | 				props,
207 | 				"subtitle",
208 | 				emit
209 | 			);
210 | 		const contentWritable =
211 | 			useSync(
212 | 				props,
213 | 				"content",
214 | 				emit
215 | 			);
216 | 		const imageFitWritable =
217 | 			useSync(
218 | 				props,
219 | 				"imageFit",
220 | 				emit
221 | 			);
222 | 		const tagWritable = useSync(
223 | 			props,
224 | 			"tag",
225 | 			emit
226 | 		);
227 | 		const checkIdShow = useSync(
228 | 			props,
229 | 			"idShow",
230 | 			emit
231 | 		);
232 | 		return {
233 | 			t,
234 | 			iconWritable,
235 | 			checkIdShow,
236 | 			imageSourceWritable,
237 | 			titleWritable,
238 | 			subtitleWritable,
239 | 			contentWritable,
240 | 			imageFitWritable,
241 | 			tagWritable,
242 | 		};
243 | 	},
244 | });
245 | </script>
246 | 
247 | <style lang="scss" scoped>
248 | .grid-w-full {
249 | 	width: 100%;
250 | 	-ms-grid-column-span: 1 / -1;
251 | 	grid-column: 1 / -1;
252 | }
253 | 
254 | .field {
255 | 	margin-top: 8px;
256 | }
257 | </style>
258 | 


--------------------------------------------------------------------------------
/src/shims.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 | 	import { DefineComponent } from 'vue';
3 | 	const component: DefineComponent<{}, {}, any>;
4 | 	export default component;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
  1 | .card .render-template {
  2 | 	all: unset;
  3 | }
  4 | 
  5 | .card
  6 | 	.render-template
  7 | 	.vertical-aligner {
  8 | 	all: unset;
  9 | }
 10 | 
 11 | .card-img-img {
 12 | 	animation: scale2 0.05s ease-in-out
 13 | 		forwards;
 14 | }
 15 | 
 16 | .scale {
 17 | 	animation: scale 0.15s ease-in-out
 18 | 		forwards;
 19 | }
 20 | 
 21 | .card .datetime {
 22 | 	overflow: hidden;
 23 | 	line-height: 1.15;
 24 | 	white-space: initial !important;
 25 | 	text-overflow: ellipsis;
 26 | 	display: -webkit-box;
 27 | 	-webkit-line-clamp: 1;
 28 | 	-webkit-box-orient: vertical;
 29 | 	text-overflow: ellipsis;
 30 | }
 31 | 
 32 | .card .tags {
 33 | 	overflow: hidden;
 34 | 	line-height: 1.15;
 35 | 	white-space: initial !important;
 36 | 	text-overflow: ellipsis;
 37 | 	display: -webkit-box;
 38 | 	-webkit-line-clamp: 1;
 39 | 	-webkit-box-orient: vertical;
 40 | 	text-overflow: ellipsis;
 41 | }
 42 | 
 43 | @keyframes scale {
 44 | 	0% {
 45 | 		transform: scale(1);
 46 | 	}
 47 | 
 48 | 	100% {
 49 | 		transform: scale(0.98);
 50 | 	}
 51 | }
 52 | 
 53 | @keyframes scale2 {
 54 | 	0% {
 55 | 		transform: scale(0.98);
 56 | 	}
 57 | 
 58 | 	100% {
 59 | 		transform: scale(1);
 60 | 	}
 61 | }
 62 | 
 63 | .w-full {
 64 | 	width: 100%;
 65 | }
 66 | 
 67 | .h-full {
 68 | 	height: 100%;
 69 | }
 70 | 
 71 | .items-center {
 72 | 	align-items: center;
 73 | }
 74 | 
 75 | .card .flex-1 {
 76 | 	-webkit-box-flex: 1;
 77 | 	-ms-flex: 1 1 0%;
 78 | 	-webkit-flex: 1 1 0%;
 79 | 	flex: 1 1 0%;
 80 | }
 81 | 
 82 | .card .d-flex {
 83 | 	display: flex;
 84 | }
 85 | 
 86 | .mr-1 {
 87 | 	margin-right: 4px;
 88 | }
 89 | 
 90 | .mb-2 {
 91 | 	margin-bottom: 8px;
 92 | }
 93 | 
 94 | .mb-1 {
 95 | 	margin-bottom: 4px;
 96 | }
 97 | 
 98 | .mr-2 {
 99 | 	margin-right: 8px;
100 | }
101 | 
102 | .gap-2 {
103 | 	gap: 8px;
104 | }
105 | 
106 | .gap-6-6 {
107 | 	gap: 24px;
108 | }
109 | 
110 | .gap-6 {
111 | 	gap: 24px;
112 | }
113 | 
114 | @media (max-width: 768px) {
115 | 	.gap-6-6 {
116 | 		gap: 16px;
117 | 	}
118 | }
119 | 
120 | .outline {
121 | 	position: absolute;
122 | 	inset: 0;
123 | 	border-radius: var(--border-radius);
124 | 	overflow: hidden;
125 | 	box-shadow: inset 0 0 0 10px
126 | 		var(--primary-50);
127 | 	transition: box-shadow 0.15s
128 | 		ease-in-out;
129 | }
130 | 
131 | .object-cover {
132 | 	object-fit: cover;
133 | }
134 | 
135 | .object-contain {
136 | 	object-fit: contain;
137 | }
138 | 
139 | .max-h-12 {
140 | 	max-height: 48px;
141 | 	overflow: hidden;
142 | }
143 | 
144 | .relative {
145 | 	position: relative;
146 | }
147 | 
148 | .chip-id {
149 | 	background-color: var(
150 | 		--border-normal
151 | 	);
152 | 	color: var(--text-normal);
153 | }
154 | 
155 | .card:hover .title {
156 | 	color: var(--primary);
157 | }
158 | 
159 | .outline {
160 | 	position: absolute;
161 | 	inset: 0;
162 | 	border-radius: var(--border-radius);
163 | 	overflow: hidden;
164 | 	box-shadow: inset 0 0 0 10px
165 | 		var(--primary-50);
166 | 	transition: box-shadow 0.15s
167 | 		ease-in-out;
168 | }
169 | 
170 | .color_primary {
171 | 	background-color: var(--primary);
172 | }
173 | 
174 | .color_sub {
175 | 	background-color: var(
176 | 		--border-normal
177 | 	);
178 | }
179 | 
180 | .card-1 .d-flex-custom {
181 | 	display: flex;
182 | }
183 | 
184 | .card-1 .card-img {
185 | 	width: 290px;
186 | 	height: 160px;
187 | 	object-fit: contain;
188 | 	border-radius: 6px;
189 | 	overflow: hidden;
190 | }
191 | 
192 | .card-1 .card-img-img {
193 | 	width: 100%;
194 | 	height: 100%;
195 | 	background-color: var(
196 | 		--border-normal
197 | 	);
198 | }
199 | 
200 | @media (max-width: 768px) {
201 | 	.card-1 .card-img {
202 | 		width: 150px;
203 | 		height: 110px;
204 | 	}
205 | 
206 | 	.card .card-1 .title {
207 | 		font-size: 1rem;
208 | 		line-height: 1.3;
209 | 	}
210 | 
211 | 	.card .card-1 .subtitle {
212 | 		font-size: 1rem;
213 | 		line-height: 1.2;
214 | 	}
215 | 
216 | 	.card .card-1 .tags {
217 | 		display: none;
218 | 	}
219 | }
220 | 
221 | .card-2 .card-img {
222 | 	width: 180px;
223 | 	height: 160px;
224 | 	border-radius: var(--border-radius);
225 | 	overflow: hidden;
226 | }
227 | 
228 | .card-2 .card-img-img {
229 | 	width: 100%;
230 | 	height: 100%;
231 | 	background-color: var(
232 | 		--border-normal
233 | 	);
234 | }
235 | 
236 | .card-2 .d-flex-custom {
237 | 	display: flex;
238 | }
239 | 
240 | @media (max-width: 1024px) {
241 | 	.card-2 .d-flex-custom {
242 | 		flex-direction: column;
243 | 	}
244 | 
245 | 	.card-2 .card-img {
246 | 		width: 100%;
247 | 		height: 180px;
248 | 	}
249 | 
250 | 	.card .card-2 .title {
251 | 		font-size: 1.1rem;
252 | 	}
253 | 
254 | 	.card .card-2 .subtitle {
255 | 		font-size: 1rem;
256 | 	}
257 | }
258 | 
259 | .card-3 .card-img-img {
260 | 	width: 100%;
261 | 	height: 100%;
262 | 	background-color: var(
263 | 		--border-normal
264 | 	);
265 | }
266 | 
267 | .card-3 .d-flex-custom {
268 | 	display: flex;
269 | 	flex-direction: column !important;
270 | }
271 | 
272 | .card-3 .card-img {
273 | 	width: 100%;
274 | 	height: 190px;
275 | 	object-fit: cover;
276 | 	border-radius: var(--border-radius);
277 | 	overflow: hidden;
278 | }
279 | .card .render-template span.label {
280 | 	vertical-align: bottom !important;
281 | }
282 | .card .render-template .toggle {
283 | 	margin: 0 10px;
284 | }
285 | 
286 | 
287 | 
288 | .post-content table {
289 |     width: 100% !important;
290 | }
291 | 
292 | .post-content * {
293 |     word-wrap: break-word;
294 | }
295 | 
296 | .post-content h4 {
297 |     font-size: 1.4rem;
298 |     margin-bottom: 1rem;
299 | }
300 | 
301 | .post-content h5 {
302 |     font-size: 1.2rem;
303 |     margin-bottom: 1rem;
304 | }
305 | 
306 | .post-content h6 {
307 |     font-size: 1rem;
308 |     letter-spacing: 0.03125em;
309 |     text-transform: uppercase;
310 |     margin-bottom: 1rem;
311 | }
312 | 
313 | .post-content * img {
314 |     border-radius: 2px;
315 |     max-width: 100%;
316 |     margin: 16px 0;
317 | }
318 | 
319 | .post-content p {
320 |     margin-bottom: 1.2rem;
321 |     text-align: justify;
322 | }
323 | 
324 | .post-content h2 {
325 | 	font-size: 24px;
326 | 	font-weight: 600;
327 | 	margin-bottom: 24px;
328 | }
329 | 
330 | .post-content p:first-child {
331 |     margin-top: 0;
332 | }
333 | 
334 | .post-content h3:nth-child(1) {
335 |     margin-top: 0;
336 | }
337 | 
338 | .post-content h3 {
339 | 	font-size: 20px;
340 | 	font-weight: 600;
341 | 	margin-bottom: 24px;
342 | }
343 | 
344 | .post-content h4 {
345 | 	font-size: 18px;
346 | 	font-weight: 600;
347 | 	margin-bottom: 24px;
348 | }
349 | 
350 | .post-content h5 {
351 | 	font-size: 16px;
352 | 	font-weight: 600;
353 | 	margin-bottom: 24px;
354 | }
355 | 
356 | .post-content ul {
357 | 	margin-bottom: 24px;
358 | }
359 | 
360 | .post-content ul li + li {
361 | 	margin-top: 12px;
362 | }
363 | 
364 | .post-content li {
365 | 	position: relative;
366 | 	padding-left: 16px;
367 | }
368 | 
369 | .post-content li::after {
370 |     content: '';
371 | 	width: 6px;
372 | 	height: 6px;
373 | 	border-radius: 100%;
374 | 	position: absolute;
375 | 	top: 10px;
376 | 	left: 0;
377 | }
378 | 
379 | .post-content td {
380 | 	padding-left: 8px;
381 | }
382 | 
383 | .post-content iframe {
384 |     width: 100%;
385 |     height: 100%;
386 |     aspect-ratio: 16/9;
387 | }


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | export type LayoutOptions = {
 2 | 	size?: number;
 3 | 	icon?: string;
 4 | 	imageSource?: string;
 5 | 	title?: string;
 6 | 	subtitle?: string;
 7 | 	imageFit?: 'crop' | 'contain';,
 8 | 	tag?: string;
 9 | 	idShow?: boolean;
10 | };
11 | 
12 | export type LayoutQuery = {
13 | 	fields: string[];
14 | 	sort: string[];
15 | 	limit: number;
16 | 	page: number;
17 | };


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"target": "ES2019",
 4 | 		"lib": ["ES2019", "DOM"],
 5 | 		"moduleResolution": "node",
 6 | 		"strict": true,
 7 | 		"noFallthroughCasesInSwitch": true,
 8 | 		"esModuleInterop": true,
 9 | 		"noImplicitAny": true,
10 | 		"noImplicitThis": true,
11 | 		"noImplicitReturns": true,
12 | 		"noUnusedLocals": true,
13 | 		"noUncheckedIndexedAccess": true,
14 | 		"noUnusedParameters": true,
15 | 		"alwaysStrict": true,
16 | 		"strictNullChecks": true,
17 | 		"strictFunctionTypes": true,
18 | 		"strictBindCallApply": true,
19 | 		"strictPropertyInitialization": true,
20 | 		"resolveJsonModule": false,
21 | 		"skipLibCheck": true,
22 | 		"forceConsistentCasingInFileNames": true,
23 | 		"allowSyntheticDefaultImports": true,
24 | 		"isolatedModules": true,
25 | 		"rootDir": "./src"
26 | 	},
27 | 	"include": ["./src/**/*.ts"]
28 | }
29 | 


--------------------------------------------------------------------------------