@tak-ps/vue-tabler 2.4.0 → 2.6.0

package/CHANGELOG.md

@@ -10,6 +10,15 @@
 
 ## Version History
 
+### v2.6.0
+
+- :tada: Add Epoch Component
+- :tada: Add EpochRange Component
+
+### v2.5.0
+
+- :tada: Add BreadCrumb Component
+
 ### v2.4.0
 
 - :bug: Numeric input should output numerics in TablerInput

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/Epoch.vue

@@ -0,0 +1,31 @@
+<template>
+<span v-text='display'/>
+</template>
+
+<script>
+export default {
+    name: 'Epoch',
+    props: {
+        date: {
+            type: Number,
+            required: true
+        },
+        format: {
+            type: String,
+            default: 'ISO'
+        }
+    },
+    computed: {
+        display: function() {
+            const date = new Date(this.date)
+            if (this.format === 'ISO') {
+                return date.toISOString()
+                    .replace('T', ' ')
+                    .replace(/:[0-9]+\.[0-9]+[A-Z]/, '');
+            } else {
+                return date.toString();
+            }
+        }
+    }
+}
+</script>

package/components/EpochRange.vue

@@ -0,0 +1,33 @@
+<template>
+    <span v-text='display'/>
+</template>
+
+<script>
+export default {
+    name: 'EpochRange',
+    props: {
+        start: {
+            type: Number,
+            required: true
+        },
+        end: {
+            type: Number,
+            required: true
+        },
+    },
+    computed: {
+        display: function() {
+            const start = new Date(this.start)
+            const end = new Date(this.end)
+
+            const start_dt = start.toISOString().replace(/[A-Z].*/, '');
+            const end_dt = end.toISOString().replace(/[A-Z].*/, '');
+            if (start_dt === end_dt) {
+                return `${start.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')} - ${end.toISOString().replace(/^.*?[A-Z]/, '').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')}`;
+            } else {
+                return `${start.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')} - ${end.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')}`;
+            }
+        }
+    }
+}
+</script>

package/lib.js

@@ -6,8 +6,14 @@ 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';
+import TablerEpoch from './components/Epoch.vue';
+import TablerEpochRange from './components/EpochRange.vue';
 
 export {
+    TablerEpoch,
+    TablerEpochRange,
+    TablerBreadCrumb,
     TablerError,
     TablerSelect,
     TablerLoading,

package/package.json

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