@tak-ps/vue-tabler 3.73.0 → 3.75.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v3.75.0
+
+- :tada: Teleport `TablerModal` to body by default
+
+### v3.74.0
+
+- :tada: Introduce TS Linting
+
 ### v3.73.0
 
 - :tada: Add `InlineAlert` component

package/components/Epoch.vue

@@ -53,7 +53,7 @@ export default {
 
                 let res = `${this.months[date.getUTCMonth()]} ${date.getUTCDate()}${suffix}`;
                 if (date.getFullYear() !== new Date().getFullYear()) {
-                    res + ` ${date.getFullYear()}`;
+                    res = res + ` ${date.getFullYear()}`;
                 }
 
                 res = res + `, ${String(date.getUTCHours()).padStart(2, '0')}:${String(date.getMinutes()).padEnd(2, '0')}`;

package/components/IconButton.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup>
-import { useId, defineProps, useTemplateRef } from 'vue'
+import { useId, useTemplateRef } from 'vue'
 
 const iconid = useId();
 

package/components/InlineAlert.vue

@@ -55,8 +55,8 @@
 </template>
 
 <script setup lang='ts'>
-import { withDefaults } from 'vue'
 import {
+    IconCheck,
     IconQuestionMark,
     IconInfoCircle,
     IconExclamationCircle,
@@ -64,10 +64,10 @@ import {
 } from '@tabler/icons-vue';
 
 const props = withDefaults(defineProps<{
-    severity: string // info, danger, warning, success
+    severity?: string // info, danger, warning, success
     title: string
     description?: string
-    dismissable: boolean
+    dismissable?: boolean
 }>(), {
     severity: 'info',
     dismissable: false,

package/components/Modal.vue

@@ -1,27 +1,29 @@
 <template>
-    <div
-        ref='modal'
-        class='modal modal-blur fade show'
-        tabindex='-1'
-        style='display: block;'
-        aria-modal='true'
-        role='dialog'
-    >
+    <teleport to='body'>
         <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>
+    </teleport>
 </template>
 
 <script>

package/components/RefreshButton.vue

@@ -24,7 +24,6 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
 import {
     IconRefresh
 } from '@tabler/icons-vue';

package/eslint.config.js

@@ -1,9 +1,11 @@
 import js from "@eslint/js";
 import globals from "globals"
 import eslintPluginVue from 'eslint-plugin-vue'
+import ts from 'typescript-eslint';
 
 export default [
     js.configs.recommended,
+    ...ts.configs.recommended,
     ...eslintPluginVue.configs['flat/recommended'],
     {   
         languageOptions: {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "3.73.0",
+    "version": "3.75.0",
     "lib": "lib.js",
     "module": "lib.js",
     "description": "Tabler UI components for Vue3",
@@ -22,6 +22,7 @@
     "dependencies": {
         "@tabler/icons-vue": "^3.0.0",
         "showdown": "^2.1.0",
+        "typescript-eslint": "^8.36.0",
         "vue": "^3.5.12"
     },
     "devDependencies": {