2.0.0-alpha.2 (#40)

nandi95 · Aug 5, 2023 · b41285a · b41285a
1 parent c4115c7
commit b41285a
Show file tree

Hide file tree

Showing 10 changed files with 196 additions and 180 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,6 @@ index.es.js
 index.umd.js
 types
 vue-toastify-*
+
+# Local Netlify folder
+.netlify
diff --git a/index.html b/index.html
@@ -1,13 +1,18 @@
 <!DOCTYPE html>
 <html lang="en" data-theme="emerald">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+    <script>
+          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+              document.documentElement.dataset.theme = 'halloween';
+          }
+    </script>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>
+</body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "vue-toastify",
-    "version": "2.0.0-alpha.1",
+    "version": "2.0.0-alpha.2",
     "license": "MIT",
     "author": "Nandor Kraszlan",
     "scripts": {
@@ -39,7 +39,7 @@
         "@vue/compiler-sfc": "^3.0.5",
         "@vue/eslint-config-typescript": "^11.0.2",
         "autoprefixer": "^10.2.5",
-        "daisyui": "^2.51.5",
+        "daisyui": "^3.5.1",
         "eslint": "^8.24.0",
         "eslint-plugin-import": "^2.22.1",
         "eslint-plugin-vue": "^9.5.1",

diff --git a/src/App.vue b/src/App.vue
@@ -1,15 +1,28 @@
 <template>
-    <div class="bg-gradient-to-br from-base-100 to-base-300 py-2 min-h-screen">
-        <a href="https://github.com/nandi95/vue-toastify/">
-            <svg width="98"
-                 height="96"
-                 style="transform: scale(35%)"
-                 class="absolute top-0 right-0 text-gray-500"
-                 xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd"
-                      fill="currentColor"
-                      clip-rule="evenodd"
-                      d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059
+    <div class="bg-gradient-to-br from-base-100/40 to-base-300/60 pb-2 min-h-screen">
+        <header class="navbar flex-wrap sm:flex-nowrap bg-base-300/20 mb-10">
+            <div class="navbar-start">
+                <AppThemeToggle />
+            </div>
+            <div class="w-full order-first sm:w-auto sm:order-1 navbar-center flex justify-center text-center flex-col flex-no-wrap">
+                <h2 class="text-primary font-bold text-3xl mb-2">
+                    Vue Toastify
+                </h2>
+                <p class="text-base-content">
+                    A fuss free notification component.
+                </p>
+            </div>
+            <div class="navbar-end order-last">
+                <a href="https://github.com/nandi95/vue-toastify/">
+                    <svg width="98"
+                         height="96"
+                         style="transform: scale(35%)"
+                         class="text-gray-500"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                              fill="currentColor"
+                              clip-rule="evenodd"
+                              d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059
                      3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59
                      2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015
                      4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378
@@ -19,16 +32,9 @@
                      11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548
                      3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52
                      33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
-            </svg>
-        </a>
-        <header
-            class="flex justify-center text-center flex-col flex-no-wrap mb-10 pt-3">
-            <h2 class="text-primary font-bold text-3xl mb-2">
-                Vue Toastify
-            </h2>
-            <p class="text-primary-content/80">
-                A fuss free notification component.
-            </p>
+                    </svg>
+                </a>
+            </div>
         </header>
         <main class="px-2">
             <div
@@ -40,7 +46,7 @@
                         <AppTextarea v-model="status.body"
                                      name="body"
                                      label="Body"
-                                     :error="status.body < 1 ? 'Needs to have length' : ''" />
+                                     :error="status.body.length < 1 ? 'Needs to have length' : ''" />
                         <AppSelect v-model="status.type"
                                    name="type"
                                    label="Type"
@@ -65,7 +71,10 @@
                 </div>
                 <div class="w-full sm:w-1/2 xl:w-1/4 sm:max-w-50 sm:ml-2">
                     <div class="w-1/2 mx-auto lg:w-2/3 xl:w-1/2 mb-12 space-y-1">
-                        <AppToggle v-model="status.pauseOnHover" label="Can be Paused" @change="checkTimingProps" />
+                        <AppToggle v-model="status.pauseOnHover"
+                                   :disabled="!status.canTimeout"
+                                   label="Can be Paused"
+                                   @change="checkTimingProps" />
                         <AppToggle v-model="status.canTimeout"
                                    label="Can Timeout"
                                    @change="
@@ -84,11 +93,12 @@
                                    label="One notification at a time"
                                    @change="checkIfLoading" />
                         <AppToggle v-model="oneTypeAtAtime"
+                                   :disabled="singular"
                                    label="One type at a time"
                                    @change="checkIfLoading" />
                     </div>
                     <div class="flex flex-col justify-around w-full">
-                        <AppInput v-model.number="status.duration"
+                        <AppInput v-model="status.duration"
                                   name="duration"
                                   label="Duration"
                                   :disabled="!status.canTimeout"
@@ -105,11 +115,11 @@
             </div>
             <div class="flex justify-around items-center align-middle flex-wrap mt-2">
                 <button v-if="status.mode === 'loader'"
-                        class="btn"
+                        class="btn btn-primary"
                         @click="loadStop">
                     Call .stopLoader()
                 </button>
-                <button class="btn" @click="addToast">
+                <button class="btn btn-primary" @click="addToast">
                     Toastify!
                 </button>
             </div>
@@ -125,7 +135,7 @@
                     Make sure to also cancel the loading if your process has
                     failed.
                 </h4>
-                <button class="btn" @click="loadStop">
+                <button class="btn btn-primary" @click="loadStop">
                     Call .stopLoader()
                 </button>
             </div>
@@ -143,10 +153,11 @@ import AppSelect from './app-components/AppSelect.vue';
 import AppTextarea from './app-components/AppTextarea.vue';
 import AppStatusDisplay from './app-components/AppStatusDisplay.vue';
 import { isObject } from './utils';
+import AppThemeToggle from "./app-components/AppThemeToggle.vue";
 
 export default defineComponent({
     name: 'App',
-    components: { AppStatusDisplay, AppTextarea, AppSelect, AppInput, AppToggle },
+    components: { AppThemeToggle, AppStatusDisplay, AppTextarea, AppSelect, AppInput, AppToggle },
 
     setup: () => {
         const status = reactive<ToastOptions>({

diff --git a/src/app-components/AppStatusDisplay.vue b/src/app-components/AppStatusDisplay.vue
@@ -33,7 +33,11 @@ export default defineComponent({
 
             return JSON.stringify(clone, null, 4)
                 .split('\n')
-                .map(line => line.replace('"', '').replace('"', ''));
+                .map(line => line
+                    .replace('"', '')
+                    .replace('"', '')
+                    .replace(/"(\d+)"/g, '$1')
+                );
         });
 
         return {

diff --git a/src/app-components/AppThemeToggle.vue b/src/app-components/AppThemeToggle.vue
@@ -0,0 +1,27 @@
+<template>
+    <AppToggle v-model="isDark" label="Dark theme" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch } from 'vue';
+import AppToggle from './AppToggle.vue';
+
+export default defineComponent({
+    name: 'AppThemeToggle',
+
+    components: { AppToggle },
+
+    setup: () => {
+        const isDark = ref(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+        watch(
+            isDark,
+            value => document.documentElement.dataset.theme = value ? 'halloween' : 'emerald'
+        );
+
+        return {
+            isDark
+        };
+    }
+});
+</script>
diff --git a/src/app-components/AppToggle.vue b/src/app-components/AppToggle.vue
@@ -1,7 +1,10 @@
 <template>
     <div class="flex">
         <label class="cursor-pointer label">
-            <input v-model="model" type="checkbox" class="toggle toggle-primary">
+            <input v-model="model"
+                   type="checkbox"
+                   :disabled="disabled"
+                   class="toggle toggle-primary">
             <span class="label-text ml-2">{{ label }}</span>
         </label>
     </div>
@@ -22,6 +25,11 @@ export default defineComponent({
         label: {
             type: String,
             required: true
+        },
+
+        disabled: {
+            type: Boolean,
+            default: false
         }
     },
 

diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
@@ -73,7 +73,7 @@ export default defineComponent({
 
                 progress.value = elapsed / wholeTime * 100;
 
-                // if timer is running
+                // if the timer is running
                 if (timerId.value) {
                     progressId.value = requestAnimationFrame(progressBar);
                 }
@@ -87,20 +87,6 @@ export default defineComponent({
 
         onMounted(() => {
             events.emit('vtStarted', { id: props.id });
-
-            // set new timeout
-            timerId.value = window.setTimeout(
-                () => {
-                    // ensure progress bar is full
-                    // (there's a chance it won't be if when the timer finishes,
-                    // the animation frame hasn't been called yet)
-                    progress.value = 100;
-                    ctx.emit('vtFinished');
-                },
-                timerFinishesAt.value.getTime() - Date.now()
-            );
-            // animation start
-            progressId.value = requestAnimationFrame(progressBar);
             timerStart();
         });
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,9 +1,13 @@
 /**
- * @type {import('@types/tailwindcss').TailwindConfig}
+ * @type {import("@types/tailwindcss").TailwindConfig}
  */
 module.exports = {
-  content: ['**/*.html', './src/**/*.{ts,tsx,vue}'],
+    darkMode: "class",
+    content: ["**/*.html", "./src/**/*.{ts,tsx,vue}"],
     plugins: [
-        require("daisyui"),
-    ]
-}
+        require("daisyui")
+    ],
+    daisyui: {
+        themes: ['emerald', 'halloween']
+    }
+};