@tak-ps/vue-tabler 3.16.0 → 3.17.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v3.17.0
+
+- :tada: `TimeZone` Component
+
+### v3.16.1
+
+- :bug: `Epoch`: Fix assignmnet to constant
+
 ### v3.16.0
 
 - :rocket: `Epoch`: Put time last in Human date format

package/components/Epoch.vue

@@ -51,9 +51,9 @@ export default {
                 let suffix = this.suffix[day.slice(day.length - 1)] || 'th';
                 if (['11', '12', '13'].includes(day)) suffix = 'th';
 
-                const res = `${this.months[date.getUTCMonth()]} ${date.getUTCDate()}${suffix}`;
+                let res = `${this.months[date.getUTCMonth()]} ${date.getUTCDate()}${suffix}`;
                 if (date.getFullYear() !== new Date().getFullYear()) {
-                    return res + ` ${date.getFullYear()}`;
+                    res + ` ${date.getFullYear()}`;
                 }
 
                 res = res + `, ${String(date.getUTCHours()).padStart(2, '0')}:${String(date.getMinutes()).padEnd(2, '0')}`;

package/components/input/TimeZone.vue

@@ -0,0 +1,61 @@
+<template>
+<TablerEnum
+    :label='label'
+    :options='Array.from(timezones)'
+    :default='modelValue'
+    v-on:change='$emit("update:modelValue", $event.target.value)'
+/>
+</template>
+
+<script>
+import {
+    TablerEnum
+} from '@tak-ps/vue-tabler'
+import moment from 'moment-timezone';
+
+export default {
+    name: 'TimeZone',
+    props: {
+        modelValue: {
+            type: String,
+            required: true
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        label: {
+            type: String,
+            default: 'Default Timezone'
+        },
+    },
+    data: function() {
+        const timezones = new Set();
+
+        for (const tz of moment.tz.names()
+            .reduce((memo, tz) => {
+                memo.push({
+                  name: tz,
+                  offset: moment.tz(tz).utcOffset()
+                });
+
+                return memo;
+            }, [])
+          .sort((a, b) => {
+            return a.offset - b.offset
+        })) {
+            const timezone = tz.offset ? moment.tz(tz.name).format('Z') : '';
+
+            timezones.add(`(GMT${timezone}) ${tz.name}`);
+        }
+
+        return {
+            internal: this.modelValue,
+            timezones
+        }
+    },
+    components: {
+        TablerEnum
+    }
+}
+</script>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "3.16.0",
+    "version": "3.17.0",
     "lib": "lib.js",
     "module": "lib.js",
     "description": "Tabler UI components for Vue3",
@@ -20,6 +20,7 @@
     },
     "homepage": "https://github.com/tak-ps/vue-tabler#readme",
     "dependencies": {
+        "moment-timezone": "^0.5.43",
         "showdown": "^2.1.0",
         "vue-tabler-icons": "^2.16.0"
     },