WIP

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@caneara/varnish",
     "author": "Caneara",
-    "version": "4.4.2",
+    "version": "4.4.3",
     "license": "MIT",
     "description": "A library of UI components built using Vue.js and TailwindCSS.",
     "repository": {

src/components/attribute.vue

@@ -0,0 +1,32 @@
+<template>
+    <div :dusk="`attribute_${label.replaceAll(' ', '_').toLowerCase()}`"
+         class="border-x md:border-x-0 border-b border-gray-200 first-of-type:border-t
+                first-of-type:rounded-t last-of-type:rounded-b
+                grid grid-cols-8 items-start gap-4 md:gap-6
+                pl-3 pr-5 pt-3 md:pt-5 pb-5 md:px-0">
+
+        <!-- Label -->
+        <div class="text-gray-500/90 col-span-8 md:col-span-2 lg:col-span-3">
+            {{ label }}
+        </div>
+
+        <!-- Value -->
+        <div class="text-right md:text-left text-gray-700 col-span-8 md:col-span-6 lg:col-span-5">
+            <slot></slot>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    export default
+    {
+        /**
+         * Define the public properties.
+         *
+         */
+        props : {
+            'label' : { type : String, default : '' },
+        },
+    }
+</script>

src/components/grid.vue

@@ -86,7 +86,7 @@
             'emptyAction'  : { type : Function, default : null },
             'emptyLabel'   : { type : String,   default : 'Create one now' },
             'emptyMessage' : { type : String,   default : '' },
-            'layout'       : { type : String,   default : 'md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-2' },
+            'layout'       : { type : String,   default : 'md:grid-cols-2' },
             'rowKey'       : { type : String,   default : 'id' },
             'source'       : { type : Object,   default : {} },
             'toolbar'      : { type : Boolean,  default : true },

src/components/operations.vue

@@ -0,0 +1,65 @@
+<template>
+    <div :class="border ? 'border-t border-gray-300/50 pt-9 mt-10' : ''"
+         v-show="! blank(items) && ! blank(items.filter(item => typeof item.show === 'boolean' ? item.show : item['show']()))">
+
+        <!-- Items -->
+        <div :key="item.id"
+             v-for="item in items"
+             @click="item['action']()"
+             :dusk="`operation-${item.id}`"
+             :class="item?.type === 'separator' ? '' : 'cursor-pointer group'"
+             v-show="typeof item.show === 'boolean' ? item.show : item['show']()">
+
+            <!-- Separator -->
+            <div v-if="item?.type === 'separator'"
+                 class="border-t border-gray-300/50 my-9">
+            </div>
+
+            <!-- Item -->
+            <div v-if="item?.type !== 'separator'"
+                 class="flex items-center group mb-7">
+
+                <!-- Icon -->
+                <i class="fas fa-fw -ml-6px"
+                   :class="[item.icon, item.color]">
+                </i>
+
+                <!-- Details -->
+                <div class="ml-3">
+
+                    <!-- Title -->
+                    <div class="font-semibold text-gray-800 group-hover:text-sky-600 animated">
+                        {{ item.title }}
+                    </div>
+
+                    <!-- Summary -->
+                    <div v-if="! blank(item.summary)"
+                          class="text-14px text-gray-500/90 mt-6px">
+
+                        <!-- Text -->
+                        {{ item.summary }}
+
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+    export default
+    {
+        /**
+         * Define the public properties.
+         *
+         */
+        props : {
+            'border' : { type : Boolean, default : true },
+            'items'  : { type : Array,   default : [] },
+        },
+    }
+</script>

src/components/statistic.vue

@@ -0,0 +1,33 @@
+<template>
+    <div @click="redirect(url)"
+         class="flex items-center mb-6"
+         :class="url ? 'cursor-pointer group' : ''">
+
+        <!-- Icon -->
+        <i :class="[icon, color]"
+           class="fa-fw text-16px -ml-6px mr-3">
+        </i>
+
+        <!-- Text -->
+        <span class="font-medium text-gray-700 group-hover:text-sky-700 animated">
+            {{ text }}
+        </span>
+
+    </div>
+</template>
+
+<script>
+    export default
+    {
+        /**
+         * Define the public properties.
+         *
+         */
+        props : {
+            'color' : { type : String, default : 'text-gray-400' },
+            'icon'  : { type : String, default : '' },
+            'text'  : { type : String, default : '' },
+            'url'   : { type : String, default : '' },
+        },
+    }
+</script>