@tak-ps/vue-tabler 3.4.0 → 3.5.0

package/CHANGELOG.md

@@ -10,6 +10,10 @@
 
 ## Version History
 
+### v3.5.0
+
+- :rocket: Add `TablerNone` component for use when a list or property is empty
+
 ### v3.4.0
 
 - :rocket: Add `TablerSchema` component for creating forms from basic JSON Schemas

package/components/None.vue

@@ -0,0 +1,49 @@
+<template>
+<div class='card-body'>
+    <div class='d-flex justify-content-center' :class='{
+        "mt-4 mb-2": !compact
+    }'>
+        <NotesOffIcon v-if='compact' width='32' height='32' />
+        <NotesOffIcon v-else width='48' height='48' />
+    </div>
+
+    <div class='text-center' :class='{
+        "mb-4 mt-2": !compact
+    }'>
+        <div>No <span v-text='label'/></div>
+    </div>
+
+    <div v-if='create' @click='$emit("create")' class='d-flex justify-content-center my-4' :class='{
+        "my-4": !compact
+    }'>
+        <div class='btn btn-primary'><span>Create <span v-text='label'/></span></div>
+    </div>
+</div>
+</template>
+
+<script>
+import {
+    NotesOffIcon
+} from 'vue-tabler-icons'
+
+export default {
+    name: 'TablerNone',
+    props: {
+        label: {
+            type: String,
+            default: 'Items'
+        },
+        compact: {
+            type: Boolean,
+            default: false
+        },
+        create: {
+            type: Boolean,
+            default: true
+        },
+    },
+    components: {
+        NotesOffIcon
+    }
+}
+</script>

package/lib.js

@@ -1,3 +1,4 @@
+export { default as TablerNone } from './components/None.vue'
 export { default as TablerError } from './components/Err.vue'
 export { default as TablerList } from './components/List.vue'
 export { default as TablerHelp } from './components/Help.vue'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "3.4.0",
+    "version": "3.5.0",
     "lib": "lib.js",
     "module": "lib.js",
     "description": "Tabler UI components for Vue3",