better typings

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuelize",
   "private": false,
-  "version": "0.0.93-beta.12",
+  "version": "0.0.93-beta.13",
   "repository": {
     "type": "git",
     "url": "https://github.com/DanielTerletzkiy/vuelize"
@@ -22,11 +22,11 @@
     "src"
   ],
   "dependencies": {
-    "pinia": "^2.0.12",
+    "pinia": "^2.0.14",
     "rollup-plugin-typescript": "^1.0.1",
     "v-wave": "^1.3.3",
     "v3-transitions": "^0.2.0",
-    "vue": "^3.2.25",
+    "vue": "^3.2.33",
     "vue-material-design-ripple": "^1.0.0",
     "vue-unicons": "^3.3.1"
   },

src/VuelizePlugin.ts

@@ -2,8 +2,6 @@ import {App, Plugin} from 'vue';
 import {createPinia} from "pinia";
 import {ThemeStore} from './store/ThemeStore'
 import {NotificationStore} from './store/NotificationStore'
-import {ThemeTypes} from "./types/ThemeTypes";
-import {Notification, NotificationTypes} from "./types/NotificationTypes";
 import importAll from "./ComponentImport";
 
 // @ts-ignore no ripple types available
@@ -15,53 +13,48 @@ import Unicon from 'vue-unicons'
 import * as uc from 'vue-unicons/dist/icons.js'
 
 import 'v3-transitions/dist/style.css'
+import Vuelize, {Notifications, State, Theme} from "./types/Vuelize";
 
-class Vuelize {
-    app: App;
-    theme: ThemeTypes;
-    notification: NotificationTypes;
+class VuelizePlugin implements Vuelize {
+    app;
+    theme;
+    notification;
 
     constructor(app: App) {
         this.app = app;
         this.theme = ThemeStore();
         this.notification = NotificationStore();
     }
 
-    store(): object {
-        return {
-            theme: this.theme,
-            notification: this.notification
-        }
-    }
-
-    notify({title, content, type, options}: Notification) {
-        this.notification.notifications.push(<Notification>{title, content, type, options, active: true})
+    notify(title: string, content: string, type: State, options?: object | undefined) {
+        this.notification.notifications.push(<Notifications.Notification>{title, content, type, options, active: true})
     }
 
-    getColor(color: string, tint?: any): string {
+    getColor(color: string, tint?: number | string | undefined): string {
         let colorOut: string;
         if (this.theme.dark) {
-            // @ts-ignore TODO
-            colorOut = this.theme.themes.dark[color];
+            colorOut = this.theme.themes.dark[color as keyof Theme.Dark];
         } else {
-            // @ts-ignore TODO
-            colorOut = this.theme.themes.light[color];
+            colorOut = this.theme.themes.light[color as keyof Theme.Light];
         }
         if (!colorOut) {
             colorOut = color;
         }
 
         if (tint && ['currentColor', 'transparent'].indexOf(colorOut) === -1) {
             try {
-                colorOut = this.#tintColor(colorOut, parseInt(tint));
+                if (typeof tint === "string") {
+                    tint = parseInt(tint)
+                }
+                colorOut = this.#tintColor(colorOut, tint);
             } catch (e) {
                 console.warn(e)
             }
         }
         return colorOut;
     }
 
-    getColorContrast(color: string, tint: any): string {
+    getColorContrast(color: string, tint?: number | string | undefined): string {
         let hexColor = this.getColor(color, tint);
         if (hexColor.slice(0, 1) === '#') {
             hexColor = hexColor.slice(1);
@@ -98,7 +91,7 @@ function addUnicons(app: App) {
     app.use(Unicon)
 }
 
-export const VuelizePlugin: Plugin = {
+export const Vuelize: Plugin = {
     install(app: App) {
         app.use(createPinia());
         app.use(VWave, {
@@ -108,7 +101,7 @@ export const VuelizePlugin: Plugin = {
         });
         addUnicons(app);
 
-        app.config.globalProperties.$vuelize = new Vuelize(app);
+        app.config.globalProperties.$vuelize = new VuelizePlugin(app);
         app.provide('vuelize', app.config.globalProperties.$vuelize);
 
         importAll(app);

src/components/HelloWorld.vue

@@ -145,8 +145,9 @@ import DDivider from "./divider/DDivider.vue";
 import DTextfield from "./textfield/DTextfield.vue";
 import DAccordion from "./accordion/DAccordion.vue";
 import DTooltip from "./tooltip/DTooltip.vue";
+import Vuelize, {State} from "../types/Vuelize.d.ts";
 
-const vuelize: any = inject('vuelize');
+const vuelize: Vuelize = inject('vuelize') as Vuelize;
 
 const textfield = ref('');
 const fill = ref(false);
@@ -376,7 +377,7 @@ function changeTheme(): void {
 }
 
 onMounted(() => {
-  vuelize.notify({title: 'test', content: 'test body', type: 'success'})
+  vuelize.notify('test','test body', State.Success);
 })
 
 </script>

src/components/notification/DNotificationWrapper.vue

@@ -2,10 +2,10 @@
   <DWrapper :classes="['d-notification-wrapper', {permanent}]" v-bind="{...$props, ...$attrs}"
                       @click="$emit('click')">
     <div class="d-notification-wrapper__content">
-      <fade-transition group :delay="0">
+      <FadeTransition group :delay="0">
         <DNotification v-for="notification in notifications" :notification="notification" color="primary"
                         :key="notification.created"/>
-      </fade-transition>
+      </FadeTransition>
     </div>
   </DWrapper>
 </template>
@@ -20,6 +20,7 @@ export default {
 import {computed, inject} from "vue";
 import DWrapper from "../DWrapper.vue";
 import DNotification from "./DNotification.vue";
+import {FadeTransition} from "v3-transitions";
 
 const vuelize: any = inject('vuelize');
 

src/components/table/DTable.vue

@@ -36,7 +36,7 @@
         </td>
       </tr>
     </table>
-    <DDivider block width="100%"/>
+    <DDivider v-if="paginationAvailable" block width="100%"/>
     <DRow v-if="paginationAvailable" class="pa-2" block>
       <DSpacer/>
       <DPagination v-model="currentPage" color="primary" :size="24" rounded="md" :total="pages"/>

src/components/tooltip/DTooltip.vue

@@ -4,7 +4,7 @@
       <slot name="default" v-bind="{...$props, ...$attrs}">
       </slot>
     </div>
-    <FadeTransition>
+    <FadeTransition :duration="200">
       <div class="d-tooltip__wrapper" v-show="hoverState">
         <DLabel class="d-tooltip__wrapper__content" v-bind="{...$props, ...$attrs}" :filled="filled" :glow="!filled"
                 glowing :style="stylesObject" ref="tooltip">
@@ -25,7 +25,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import {computed, getCurrentInstance, inject, nextTick, onMounted, reactive, ref, watch} from "vue";
+import {computed, getCurrentInstance, inject, reactive, ref, watch} from "vue";
 import defaultProps from "../../mixins/DefaultProps";
 import DWrapper from "../DWrapper.vue";
 import DLabel from "../label/DLabel.vue";

src/index.ts

@@ -1,4 +1,4 @@
-import {VuelizePlugin as Vuelize} from "./VuelizePlugin";
+import {Vuelize} from "./VuelizePlugin";
 //import {getImports} from "./ComponentImport";
 
 export default Vuelize;

src/store/NotificationStore.ts

@@ -1,9 +1,9 @@
 import {defineStore} from 'pinia'
-import {NotificationTypes} from "../types/NotificationTypes";
+import {Notifications} from "../types/Vuelize";
 
 export const NotificationStore = defineStore('notification', {
     state: () =>
         ({
             notifications: []
-        } as NotificationTypes)
+        } as Notifications.NotificationStore)
 })

src/store/ThemeStore.ts

@@ -1,5 +1,5 @@
 import {defineStore} from 'pinia'
-import {ThemeTypes} from "../types/ThemeTypes";
+import {Theme} from "../types/Vuelize";
 
 export const ThemeStore = defineStore('theme', {
     state: () =>
@@ -24,5 +24,5 @@ export const ThemeStore = defineStore('theme', {
                     info: '#00b2ff'
                 },
             },
-        } as ThemeTypes)
+        } as Theme.ThemeStore)
 })

src/types/Vuelize.d.ts

@@ -0,0 +1,66 @@
+import {App} from "vue";
+
+export default interface Vuelize {
+    app: App;
+    theme: Theme.ThemeStore;
+    notification: Notifications.NotificationStore;
+
+    notify(title: string, content: string, type: State, options?: object | undefined);
+
+    getColor(color: string, tint?: number | string | undefined): string;
+
+    getColorContrast(color: string, tint?: number | string | undefined): string;
+}
+
+export enum State {
+    Success = "success",
+    Error = "error",
+    Warning = "warning",
+    Info = "info"
+}
+
+export namespace Notifications {
+    export interface NotificationStore {
+        notifications: Notification[],
+    }
+
+    export interface Notification {
+        title: string,
+        content: string,
+        type: string,
+        options?: object,
+        active: boolean,
+        created: Date
+    }
+}
+
+export namespace Theme {
+    export interface ThemeStore {
+        dark: boolean
+        rounded: string
+        themes: Themes
+    }
+
+    export interface Themes {
+        dark: Dark
+        light: Light
+    }
+
+    export interface Dark {
+        primary: string
+        secondary: string
+        success: string
+        error: string
+        warning: string
+        info: string
+    }
+
+    export interface Light {
+        primary: string
+        secondary: string
+        success: string
+        error: string
+        warning: string
+        info: string
+    }
+}