@tak-ps/vue-tabler 2.3.1 → 2.5.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v2.5.0
+
+- :tada: Add BreadCrumb Component
+
+### v2.4.0
+
+- :bug: Numeric input should output numerics in TablerInput
+
 ### v2.3.1
 
 - :rocket: Remove Debug Code

package/components/BreadCrumb.vue

@@ -0,0 +1,31 @@
+<template>
+<ol class="breadcrumb" aria-label="breadcrumbs">
+    <li class="breadcrumb-item"><a @click='$router.push("/")' class='cursor-pointer'>Home</a></li>
+    <li
+        :key='crumb_it'
+        v-for='(crumb, crumb_it) in crumbs'
+        class="breadcrumb-item"
+        :class='{
+            "active": crumb_it === crumbs.length - 1
+        }'
+    >
+        <a v-if='crumb_it === crumbs.length - 1' v-text='crumb'></a>
+        <a v-else @click='$router.push("/" + crumbs.splice(0, crumb_it + 1).join("/").toLowerCase())' class='cursor-pointer' v-text='crumb'></a>
+    </li>
+</ol>
+</template>
+
+<script>
+export default {
+    name: 'BreadCrumb',
+    data: function() {
+        return {
+            crumbs: this.$route.path.split('/').filter((crumb) => {
+                return crumb.length;
+            }).map((crumb) => {
+                return `${crumb[0].toUpperCase()}${crumb.slice(1, crumb.length)}`;
+            })
+        }
+    },
+}
+</script>

package/components/Input.vue

@@ -21,7 +21,7 @@ export default {
     name: 'TablerInput',
     props: {
         modelValue: {
-            type: String,
+            type: [String, Number],
             required: true
         },
         disabled: {
@@ -47,8 +47,20 @@ export default {
     },
     watch: {
         current: function() {
-            if (this.current === this.modelValue) return;
-            this.$emit('update:modelValue', this.current);
+            if (typeof this.modelValue === 'number') {
+                const current = Number(this.current);
+
+                if (isNaN(current)) {
+                    this.error = 'Must be a number!';
+                } else if (current === this.modelValue) {
+                    return;
+                } else {
+                    this.$emit('update:modelValue', current);
+                }
+            } else {
+                if (this.current === this.modelValue) return;
+                this.$emit('update:modelValue', this.current);
+            }
         }
     }
 }

package/lib.js

@@ -6,8 +6,10 @@ import TablerProgress from './components/Progress.vue'
 import TablerLoading from './components/Loading.vue'
 import TablerToggle from './components/Toggle.vue'
 import TablerInput from './components/Input.vue'
+import TablerBreadCrumb from './components/BreadCrumb.vue';
 
 export {
+    TablerBreadCrumb,
     TablerError,
     TablerSelect,
     TablerLoading,

package/package.json

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