@tak-ps/vue-tabler 3.83.3 → 3.85.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v3.85.0
+
+- :rocket: Show time in localtime by default in Epoch Component
+
+### v3.84.0
+
+- :rocket: Add Modal Fade Animation
+
 ### v3.83.3
 
 - :rocket: Additional Exports Options in Package.json

package/components/Epoch.vue

@@ -45,16 +45,16 @@ const display = computed(() => {
             .replace('T', ' ')
             .replace(/:[0-9]+\.[0-9]+[A-Z]/, '')
     } else if (props.format === 'Human') {
-        const day = String(date.getUTCDate())
+        const day = String(date.getDate())
         let suf = suffix[day.slice(day.length - 1)] || 'th'
         if (['11', '12', '13'].includes(day)) suf = 'th'
 
-        let res = `${months[date.getUTCMonth()]} ${date.getUTCDate()}${suf}`
+        let res = `${months[date.getMonth()]} ${date.getDate()}${suf}`
         if (date.getFullYear() !== new Date().getFullYear()) {
             res = res + ` ${date.getFullYear()}`
         }
 
-        res = res + `, ${String(date.getUTCHours()).padStart(2, '0')}:${String(date.getMinutes()).padEnd(2, '0')}`
+        res = res + `, ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
 
         return res
     } else {

package/components/EpochRange.vue

@@ -57,26 +57,26 @@ const display = computed(() => {
         const start = new Date(props.start)
         const end = new Date(props.end)
 
-        const start_day = String(start.getUTCDate());
+        const start_day = String(start.getDate());
         let start_day_suffix = suffix[start_day.slice(start_day.length - 1)] || 'th';
         if (['11', '12', '13'].includes(start_day)) start_day_suffix = 'th';
-        const end_day = String(end.getUTCDate());
+        const end_day = String(end.getDate());
         let end_day_suffix = suffix[end_day.slice(end_day.length - 1)] || 'th';
         if (['11', '12', '13'].includes(end_day)) end_day_suffix = 'th';
 
-        const start_month = `${months[start.getUTCMonth()]} ${start.getUTCDate()}${start_day_suffix}`;
-        const end_month = `${months[end.getUTCMonth()]} ${end.getUTCDate()}${end_day_suffix}`;
-        const start_time = `${String(start.getUTCHours()).padStart(2, '0')}:${String(start.getMinutes()).padEnd(2, '0')}`;
-        const end_time = `${String(end.getUTCHours()).padStart(2, '0')}:${String(end.getMinutes()).padEnd(2, '0')}`;
+        const start_month = `${months[start.getMonth()]} ${start.getDate()}${start_day_suffix}`;
+        const end_month = `${months[end.getMonth()]} ${end.getDate()}${end_day_suffix}`;
+        const start_time = `${String(start.getHours()).padStart(2, '0')}:${String(start.getMinutes()).padStart(2, '0')}`;
+        const end_time = `${String(end.getHours()).padStart(2, '0')}:${String(end.getMinutes()).padStart(2, '0')}`;
 
         if (start.getFullYear() === end.getFullYear() && start.getFullYear() === new Date().getFullYear()) {
-            if (start.getUTCMonth() === end.getUTCMonth() && start.getUTCDate() === end.getUTCDate()) {
+            if (start.getMonth() === end.getMonth() && start.getDate() === end.getDate()) {
                 return `${start_month} ${start_time} - ${end_time}`;
             } else {
                 return `${start_month} ${start_time} - ${end_month} ${end_time}`;
             }
         } else if (start.getFullYear() === end.getFullYear()) {
-            if (start.getUTCMonth() === end.getUTCMonth() && start.getUTCDate() === end.getUTCDate()) {
+            if (start.getMonth() === end.getMonth() && start.getDate() === end.getDate()) {
                 return `${start_month}, ${start.getFullYear()} ${start_time} - ${end_time}`;
             } else {
                 return `${start_month}, ${start.getFullYear()} ${start_time} - ${end_month} ${end_time}`;

package/components/Modal.vue

@@ -1,28 +1,30 @@
 <template>
     <teleport to='body'>
-        <div
-            ref='modal'
-            class='modal modal-blur fade show'
-            tabindex='-1'
-            style='display: block;'
-            aria-modal='true'
-            role='dialog'
-        >
+        <Transition name='modal-fade' appear>
             <div
-                class='modal-dialog modal-dialog-centered'
-                role='document'
-                :class='{
-                    "modal-sm": size === "sm",
-                    "modal-md": size === "md",
-                    "modal-lg": size === "lg",
-                    "modal-xl": size === "xl",
-                }'
+                ref='modal'
+                class='modal modal-blur fade show'
+                tabindex='-1'
+                style='display: block;'
+                aria-modal='true'
+                role='dialog'
             >
-                <div class='modal-content'>
-                    <slot />
+                <div
+                    class='modal-dialog modal-dialog-centered'
+                    role='document'
+                    :class='{
+                        "modal-sm": size === "sm",
+                        "modal-md": size === "md",
+                        "modal-lg": size === "lg",
+                        "modal-xl": size === "xl",
+                    }'
+                >
+                    <div class='modal-content'>
+                        <slot />
+                    </div>
                 </div>
             </div>
-        </div>
+        </Transition>
     </teleport>
 </template>
 
@@ -45,3 +47,15 @@ onMounted(() => {
     })
 })
 </script>
+
+<style scoped>
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+    transition: opacity 100ms ease;
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+    opacity: 0;
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "3.83.3",
+    "version": "3.85.0",
     "lib": "lib.js",
     "main": "lib.js",
     "module": "lib.js",