@tak-ps/vue-tabler 2.5.0 → 2.7.0

package/CHANGELOG.md

@@ -10,6 +10,15 @@
 
 ## Version History
 
+### v2.7.0
+
+- :tada: Add Bytes Component
+
+### v2.6.0
+
+- :tada: Add Epoch Component
+- :tada: Add EpochRange Component
+
 ### v2.5.0
 
 - :tada: Add BreadCrumb Component

package/components/Bytes.vue

@@ -0,0 +1,21 @@
+<template>
+<span v-text='display'/>
+</template>
+
+<script>
+export default {
+    name: 'Bytes',
+    props: {
+        bytes: {
+            type: Number,
+            required: true
+        }
+    },
+    computed: {
+        display: function() {
+             const i = this.bytes == 0 ? 0 : Math.floor(Math.log(this.bytes) / Math.log(1024));
+             return (this.bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+         }
+    }
+}
+</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

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

package/package.json

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