Makes ViewModeCards a component instead of a template.

src/admin/components/navigation/tainacan-title.vue

@@ -1,7 +1,7 @@
 <template>
     <div 
             class="tainacan-page-title">
-        <h1>{{ pageTitle }} <span class="is-italic">{{ isRepositoryLevel ? '' : entityName }}</span></h1>
+        <h1>{{ pageTitle }} <span class="is-italic has-text-weight-semibold">{{ isRepositoryLevel ? '' : entityName }}</span></h1>
         <a 
                 @click="$router.go(-1)"
                 class="back-link is-secondary">

src/admin/js/theme-main.js

@@ -29,7 +29,8 @@ import FilterCategorySelectbox from '../../classes/filter-types/category/Selectb
 import TaincanFormItem from '../../classes/metadata-types/tainacan-form-item.vue';
 import TaincanFiltersList from '../../classes/filter-types/tainacan-filter-item.vue';
 import ItemsPage from '../pages/lists/items-page.vue';
-import TableViewMode from '../../theme-helper/table-view-mode.vue';
+import ViewModeTable from '../../theme-helper/view-mode-table.vue';
+import ViewModeCards from '../../theme-helper/view-mode-cards.vue';
 
 // Remaining imports
 import HelpButton from '../components/other/help-button.vue';
@@ -77,7 +78,9 @@ Vue.component('help-button', HelpButton);
 Vue.component('draggable', draggable);
 Vue.component('items-page', ItemsPage);
 
-Vue.component('table-view-mode', TableViewMode);
+// Oficial view modes
+Vue.component('view-mode-table', ViewModeTable);
+Vue.component('view-mode-cards', ViewModeCards);
 
 Vue.use(eventBusSearch, { store: store, router: routerTheme});
 

src/admin/pages/lists/items-page.vue

@@ -326,8 +326,6 @@
                     </div>
                 </div>
 
-                <!-- Admin Table -->
-
                 <!-- When advanced search -->
                 <items-list
                         v-if="!isOnTheme &&
@@ -343,7 +341,7 @@
                         :is-on-trash="status == 'trash'"
                         :view-mode="adminViewMode"/>
 
-                <!-- Regular -->
+                <!-- Admin View Modes-->
                 <items-list
                         v-else-if="!isOnTheme &&
                               !isLoadingItems && 
@@ -370,10 +368,10 @@
                               registeredViewModes[viewMode] != undefined &&
                               registeredViewModes[viewMode].type == 'component'"
                         :collection-id="collectionId"
-                        :table-metadata="tableMetadata"
+                        :displayed-metadata="tableMetadata"
                         :items="items"
                         :is-loading="isLoadingItems"
-                        :is="'table-view-mode'"/>     
+                        :is="registeredViewModes[viewMode].component"/>     
 
                 <!-- Empty Placeholder (only used in Admin) -->
                 <section

src/theme-helper/class-tainacan-theme-helper.php

@@ -55,7 +55,13 @@ class Theme_Helper {
 			'icon' => '<span class="icon"><i class="mdi mdi-table mdi-24px"></i></span>',
 			'type' => 'component',
 		]);
-		
+		$this->register_view_mode('cards', [
+			'label' => __('Cards view', 'tainacan'),
+			'dynamic_metadata' => true,
+			'description' => 'A cards view, flexible for metadata',
+			'icon' => '<span class="icon"><i class="mdi mdi-view-list mdi-24px"></i></span>',
+			'type' => 'component'
+		]);
 	}
 	
 	public function enqueue_scripts($force = false) {
@@ -298,7 +304,7 @@ class Theme_Helper {
 	 * 												Default: theme-path/tainacan/view-mode-{$slug}.php
 	 * 		@type string		$component			Component tag name. The web component js must be included and must accept two props:
 	 * 													* items - the list of items to be rendered
-	 * 													* displayed_metadata - list of metadata to be displayed
+	 * 													* displayed-metadata - list of metadata to be displayed
 	 * 												Default view-mode-{$slug}
 	 * 		@type string		$thumbnail			Full URL to an thumbnail that represents the view mode. Displayed in admin.
 	 * 		@type string		$icon 				HTML that outputs an icon that represents the view mode. Displayed in front end.

src/theme-helper/view-mode-cards.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="table-container">
+        <div class="table-wrapper">
+            <!-- CARDS VIEW MODE -->
+            <div class="tainacan-cards-container">
+                <div 
+                        :key="index"
+                        v-for="(item, index) of items"
+                        class="tainacan-card">
+                    
+                    <!-- Title -->
+                    <p 
+                            v-for="(column, index) in displayedMetadata"
+                            :key="index"
+                            v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
+                            class="metadata-title"
+                            @click="goToItemPage(item)"
+                            v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />                             
+                    
+                    <!-- Remaining metadata -->  
+                    <div    
+                            class="media"
+                            @click="goToItemPage(item)">
+                        <a 
+                                v-if="item.thumbnail != undefined"
+                                @click="goToItemPage(item)">
+                            <img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
+                        </a>
+
+                        <div class="list-metadata media-body">
+                            <span 
+                                    v-for="(column, index) in displayedMetadata"
+                                    :key="index"
+                                    v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
+                                <h3 class="metadata-label">{{ column.name }}</h3>
+                                <p 
+                                        v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
+                                        class="metadata-value"/>
+                            </span>
+                        </div>
+                    </div>
+               
+                </div>
+            </div>
+        </div> 
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'ViewModeCards',
+    props: {
+        collectionId: Number,
+        displayedMetadata: Array,
+        items: Array,
+        isLoading: false
+    },
+    methods: {
+        goToItemPage(item) {
+            window.location.href = item.url;   
+        },
+        renderMetadata(itemMetadata, column) {
+
+            let metadata = itemMetadata[column.slug] != undefined ? itemMetadata[column.slug] : false;
+
+            if (!metadata) {
+                return '';
+            } else if (metadata.date_i18n) {
+                return metadata.date_i18n;
+            } else {
+                return metadata.value_as_html;
+            }
+        }
+    }
+}
+</script>
+
+<style  lang="scss" scoped>
+    $primary-lighter: #e6f6f8;
+    $primary-lighter-hover: #d1e6e6;
+    $tainacan-input-color: #1d1d1d;
+    $tainacan-input-background: #e5e5e5;
+    $tainacan-placeholder-color: #898d8f;
+    $gray-hover: #dcdcdc;
+    $gray-light: #898d8f; 
+
+    @import "../../src/admin/scss/_view-mode-cards.scss";
+
+    .tainacan-cards-container .tainacan-card .metadata-title {
+        padding: 0.75rem;
+        margin-bottom: 0px;
+    }
+</style>
+
+

src/theme-helper/view-mode-table.vue

@@ -6,7 +6,7 @@
                     <tr>
                         <!-- Displayed Metadata -->
                         <th 
-                                v-for="(column, index) in tableMetadata"
+                                v-for="(column, index) in displayedMetadata"
                                 :key="index"
                                 v-if="column.display"
                                 class="column-default-width"
@@ -33,7 +33,7 @@
                         <!-- Item Displayed Metadata -->
                         <td 
                                 :key="index"    
-                                v-for="(column, index) in tableMetadata"
+                                v-for="(column, index) in displayedMetadata"
                                 v-if="column.display"
                                 :label="column.name" 
                                 :aria-label="(column.metadatum != 'row_thumbnail' && column.metadatum != 'row_creation' && column.metadatum != 'row_author')
@@ -100,10 +100,10 @@
 <script>
 
 export default {
-    name: 'TableViewMode',
+    name: 'ViewModeTable',
     props: {
         collectionId: Number,
-        tableMetadata: Array,
+        displayedMetadata: Array,
         items: Array,
         isLoading: false
     },