Rewrite on TS (#29)

.eslintrc.js

@@ -3,13 +3,22 @@ module.exports = {
   env: {
     node: true,
   },
+  "plugins": ["prettier"],
   extends: [
-    "plugin:vue/vue3-recommended",
+    "airbnb-base",
+    "airbnb-typescript/base",
     "plugin:vue/vue3-essential",
-    "eslint:recommended",
+    "@vue/eslint-config-typescript/recommended",
+    "prettier"
   ],
-  parser: "vue-eslint-parser",
+  parserOptions: {
+    project: "./tsconfig.json",
+  },
   rules: {
+    "prettier/prettier": "error",
+    "arrow-body-style": "off",
+    "prefer-arrow-callback": "off",
+
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
     "vue/multi-word-component-names": "off",

.gitignore

@@ -1,7 +1,5 @@
 .DS_Store
 node_modules
-/dist/src/
-
 
 # local env files
 .env.local

README.md

@@ -415,6 +415,47 @@ Scope props:
 </Notification>
 ```
 
+## Typescript
+
+Typed notifications supported using the Composition API only.
+
+```typescript
+// notiwind.ts
+import {
+  createNotifier,
+  NotificationGroup,
+  defineNotificationComponent,
+} from "notiwind";
+
+export type NotificationSchema = {
+  title: string;
+  text: string;
+};
+
+export const notify = createNotifier<NotificationSchema>();
+export const Notification = defineNotificationComponent<NotificationSchema>();
+export { NotificationGroup };
+```
+
+```vue
+<script setup lang="ts">
+  import { notify, Notification, NotificationGroup } from "./notiwind.ts";
+
+  notify({
+    title: "title",
+    text: "text",
+  }, 4000);
+</script>
+
+<template>
+<NotificationGroup>
+  <Notification v-slot="{ notifications }">
+   <!-- Here you have typed `notifications` -->
+  </Notification>
+</NotificationGroup>
+</template>
+```
+
 ## TODO
 
 * Add tests

dist/Notification.vue.d.ts

@@ -0,0 +1,146 @@
+import type { Context, Notification } from "./types";
+export interface Props {
+    maxNotifications?: number;
+    enter?: string;
+    enterFrom?: string;
+    enterTo?: string;
+    leave?: string;
+    leaveFrom?: string;
+    leaveTo?: string;
+    move?: string;
+    moveDelay?: string;
+}
+declare const _sfc_main: import("vue").DefineComponent<{
+    maxNotifications: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+    enter: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    enterFrom: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    enterTo: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    leave: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    leaveFrom: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    leaveTo: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    move: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    moveDelay: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+}, {
+    props: any;
+    emit: (e: "close") => void;
+    context: Context;
+    state: {
+        notifications: {
+            [x: string]: unknown;
+            id: number;
+            group: string;
+        }[];
+        timeouts: Record<string, number>;
+    };
+    notificationsByGroup: import("vue").ComputedRef<{
+        [x: string]: unknown;
+        id: number;
+        group: string;
+    }[]>;
+    sortedNotifications: import("vue").ComputedRef<{
+        [x: string]: unknown;
+        id: number;
+        group: string;
+    }[]>;
+    remove: (id: Notification["id"]) => void;
+    add: ({ notification, timeout, }: {
+        notification: Notification;
+        timeout?: number | undefined;
+    }) => void;
+    close: (id: Notification["id"]) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    maxNotifications: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+    enter: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    enterFrom: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    enterTo: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    leave: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    leaveFrom: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    leaveTo: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    move: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    moveDelay: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    maxNotifications: number;
+    enter: string;
+    enterFrom: string;
+    enterTo: string;
+    leave: string;
+    leaveFrom: string;
+    leaveTo: string;
+    move: string;
+    moveDelay: string;
+}>;
+export default _sfc_main;

dist/NotificationGroup.vue.d.ts

@@ -0,0 +1,33 @@
+export interface Props {
+    group?: string;
+    position?: "top" | "bottom";
+}
+declare const _sfc_main: import("vue").DefineComponent<{
+    group: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    position: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+}, {
+    props: any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    position: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+}>>, {
+    group: string;
+    position: string;
+}>;
+export default _sfc_main;

dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const CONTEXT_KEY = "context";

dist/createNotifier.d.ts

@@ -0,0 +1,4 @@
+import { Notification, NotificationSchema } from "./types";
+declare type UserNotification<T extends NotificationSchema> = Omit<Notification<T>, "id" | "group"> & Partial<Pick<Notification<T>, "group">>;
+declare const createNotifier: <T extends NotificationSchema>() => (notification: UserNotification<T>, timeout?: number) => () => void;
+export default createNotifier;