Add the cards layout (#430)

* Fix reactivity of currentLayout in drawer detail

* Start on cards layout

* Use dense list items in v-select

* Add cards + size option

* Render cards + files based on options

* Allow modules to set view defaults

* Start on render-template component

* Add get fields from template util

* Use render template component in cards layout

* Render as small icon

* Accept options in display handler function

* Fix type warnings in format title display

* Remove empty styling in render template component

* Account for null values in render template

* Add loading state to cards layout

* Remove type validation in skeleton loader

* Only fetch rendered fields

* Fix resolving of default values for cards module

* Add selection state to cards

* Add selection state to cards

* Make render template reactive

* Implement setup options

* Add disabled support to v-select

* Add fallback icon option + disable fit input when no source

* Add sort header to cards layout

* Remove console log

* Add selection state to cards header

* Fix z-indexing of header menu

* Add pagination to cards layout

* Fix types in field

* Fix type checks in field-setup

* Add role presentation to img

* Remove code smell

* Handle file library gracefully

* Add native lazy loading to images in cards layout

* Render SVGs inline in card

src/components/register.ts

@@ -98,3 +98,7 @@ Vue.component('drawer-detail', DrawerDetail);
 import TransitionExpand from './transition/expand';
 
 Vue.component('transition-expand', TransitionExpand);
+
+import RenderTemplate from '@/views/private/components/render-template';
+
+Vue.component('render-template', RenderTemplate);

src/components/v-select/readme.md

@@ -32,6 +32,7 @@ Renders a dropdown input.
 | `placeholder` | What placeholder to show when no items are selected |         |
 | `full-width`  | Render the select at full width                     |         |
 | `monospace`   | Render the value and options monospaced             |         |
+| `disabled`    | Disable the select                                  |         |
 
 
 ## Events

src/components/v-select/v-select.vue

@@ -1,5 +1,10 @@
 <template>
-	<v-menu class="v-select" attached :close-on-content-click="multiple === false">
+	<v-menu
+		:disabled="disabled"
+		class="v-select"
+		attached
+		:close-on-content-click="multiple === false"
+	>
 		<template #activator="{ toggle }">
 			<v-input
 				:full-width="fullWidth"
@@ -8,12 +13,13 @@
 				:value="displayValue"
 				@click="toggle"
 				:placeholder="placeholder"
+				:disabled="disabled"
 			>
 				<template #append><v-icon name="expand_more" /></template>
 			</v-input>
 		</template>
 
-		<v-list>
+		<v-list dense>
 			<v-list-item
 				v-for="item in _items"
 				:key="item.value"
@@ -23,9 +29,7 @@
 				@click="multiple ? null : $emit('input', item.value)"
 			>
 				<v-list-item-content>
-					<v-list-item-title v-if="multiple === false">
-						<span :class="{ monospace }">{{ item.text }}</span>
-					</v-list-item-title>
+					<span v-if="multiple === false" :class="{ monospace }">{{ item.text }}</span>
 					<v-checkbox
 						v-else
 						:inputValue="value || []"
@@ -41,6 +45,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed } from '@vue/composition-api';
+import i18n from '@/lang';
 
 type Item = {
 	text: string;
@@ -85,10 +90,18 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		allowNull: {
+			type: Boolean,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
-		const _items = computed(() =>
-			props.items.map((item) => {
+		const _items = computed(() => {
+			const items = props.items.map((item) => {
 				if (typeof item === 'string') {
 					return {
 						text: item,
@@ -100,8 +113,17 @@ export default defineComponent({
 					text: item[props.itemText],
 					value: item[props.itemValue],
 				};
-			})
-		);
+			});
+
+			if (props.allowNull) {
+				items.unshift({
+					text: i18n.t('none'),
+					value: null,
+				});
+			}
+
+			return items;
+		});
 
 		const displayValue = computed(() => {
 			if (Array.isArray(props.value)) {

src/components/v-skeleton-loader/v-skeleton-loader.vue

@@ -17,7 +17,6 @@ export default defineComponent({
 		type: {
 			type: String,
 			default: 'input',
-			validator: (type: string) => ['input', 'input-tall', 'list-item-icon'].includes(type),
 		},
 	},
 });
@@ -78,6 +77,14 @@ export default defineComponent({
 	height: var(--input-height-tall);
 }
 
+.text {
+	flex-grow: 1;
+	height: 12px;
+	border-radius: 6px;
+
+	@include loader;
+}
+
 .list-item-icon {
 	display: flex;
 	align-items: center;