change por headless ui

2024-09-08 15:20:50 +02:00
parent 8fa8066e88
commit 1fa94762b0
5 changed files with 125 additions and 113 deletions
--- a/index.html
+++ b/index.html
@@ -9,6 +9,5 @@
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
-    <script src="./node_modules/preline/dist/preline.js"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,9 @@
      "name": "frontend",
      "version": "0.0.0",
      "dependencies": {
-        "@preline/overlay": "^2.4.1",
+        "@headlessui/vue": "^1.7.22",
        "pinia": "^2.1.7",
        "pocketbase": "^0.21.5",
-        "preline": "^2.4.1",
        "vue": "^3.4.29",
        "vue-router": "^4.3.3"
      },
@@ -38,6 +37,21 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@headlessui/vue": {
+      "version": "1.7.22",
+      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.22.tgz",
+      "integrity": "sha512-Hoffjoolq1rY+LOfJ+B/OvkhuBXXBFgd8oBlN+l1TApma2dB0En0ucFZrwQtb33SmcCqd32EQd0y07oziXWNYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/vue-virtual": "^3.0.0-beta.60"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
    "node_modules/@isaacs/cliui": {
      "version": "8.0.2",
      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -157,22 +171,6 @@
        "node": ">=14"
      }
    },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
-    "node_modules/@preline/overlay": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@preline/overlay/-/overlay-2.4.1.tgz",
-      "integrity": "sha512-ZchnVlntiIopOOkDKClVpRryVDGvGPswq4911wl0ZAjOdag09nTs2KKJ4qet9AYn1/o2uOGexDvIAJ6iIAakRQ==",
-      "license": "Licensed under MIT and Preline UI Fair Use License"
-    },
    "node_modules/@tailwindcss/forms": {
      "version": "0.5.9",
      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.9.tgz",
@@ -186,6 +184,32 @@
        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20"
      }
    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.10.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.7.tgz",
+      "integrity": "sha512-ND5dfsU0n9F4gROzwNNDJmg6y8n9pI8YWxtgbfJ5UcNn7Hx+MxEXtXcQ189tS7sh8pmCObgz2qSiyRKTZxT4dg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-virtual": {
+      "version": "3.10.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.10.7.tgz",
+      "integrity": "sha512-OSK1fkvz4GaBhF80KVmBsJZoMI9ncVaUU//pI8OqTdBnepw467zcuF2Y+Ia1VC0CPYfUEALyS8n4Ar0RI/7ASg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.10.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.0.0"
+      }
+    },
    "node_modules/@types/estree": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -1281,15 +1305,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/preline": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/preline/-/preline-2.4.1.tgz",
-      "integrity": "sha512-30yx5s2gEOTBWXSTPa+Th23/kGryn9Inhmp9KPzz9G8DZPp9j/LkGyyrSvdsuXh4Clc/sJFLObumFrbI/WmB0w==",
-      "license": "Licensed under MIT and Preline UI Fair Use License",
-      "dependencies": {
-        "@popperjs/core": "^2.11.2"
-      }
-    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
--- a/package.json
+++ b/package.json
@@ -9,10 +9,9 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@preline/overlay": "^2.4.1",
+    "@headlessui/vue": "^1.7.22",
    "pinia": "^2.1.7",
    "pocketbase": "^0.21.5",
-    "preline": "^2.4.1",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -42,10 +42,7 @@
          <a
            href="#"
            class="text-xs text-blue-400 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-            aria-haspopup="dialog"
-            aria-expanded="false"
-            aria-controls="hs-vertically-centered-modal"
-            data-hs-overlay="#hs-vertically-centered-modal"
+            @click="isOpenModalRecuPContras = true"
            >Olvidó la contraseña?</a
          >
        </div>
@@ -72,84 +69,81 @@
  <!-- Modal de correo invalido -->

  <!-- Modal de recuperar contraseña -->
-  <div
-    id="hs-vertically-centered-modal"
-    class="hs-overlay hidden size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none"
-    role="dialog"
-    tabindex="-1"
-    aria-labelledby="hs-vertically-centered-modal-label"
-  >
-    <div
-      class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto min-h-[calc(100%-3.5rem)] flex items-center"
+  <TransitionRoot appear :show="isOpenModalRecuPContras" as="template">
+    <Dialog
+      as="div"
+      @close="isOpenModalRecuPContras = false"
+      class="relative z-10"
    >
-      <div
-        class="w-full flex flex-col bg-white border shadow-sm rounded-xl pointer-events-auto dark:bg-emerald-700 dark:border-neutral-700 dark:shadow-neutral-700/70"
+      <TransitionChild
+        as="template"
+        enter="duration-300 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-200 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
      >
+        <div class="fixed inset-0 bg-black/25" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-y-auto">
        <div
-          class="flex justify-between items-center py-3 px-4 border-b dark:border-neutral-700"
+          class="flex min-h-full items-center justify-center p-4 text-center"
        >
-          <h3
-            id="hs-vertically-centered-modal-label"
-            class="font-bold text-gray-800 dark:text-white"
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
          >
-            Recuperar contraseña
-          </h3>
-          <button
-            type="button"
-            class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-none focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600"
-            aria-label="Close"
-            data-hs-overlay="#hs-vertically-centered-modal"
-          >
-            <span class="sr-only">Close</span>
-            <svg
-              class="shrink-0 size-4"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+            <DialogPanel
+              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all"
            >
-              <path d="M18 6 6 18"></path>
-              <path d="m6 6 12 12"></path>
-            </svg>
-          </button>
-        </div>
-        <div class="p-4 overflow-y-auto">
-          <input
-            type="text"
-            class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-emerald-900 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"
-            placeholder="Email@example.com"
-          />
-          <p class="text-gray-800 dark:text-white"><small>
-            Si el correo electrónico existe en nuestra base de datos, le
-            enviaremos un correo.</small>
-          </p>
-        </div>
-        <div
-          class="flex justify-end items-center gap-x-2 py-3 px-4 border-t dark:border-neutral-700"
-        >
-          <button
-            type="button"
-            class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
-            data-hs-overlay="#hs-vertically-centered-modal"
-          >
-            Cerrar
-          </button>
-          <button
-            type="button"
-            class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
-           @click="cerrar"          
-            >
-            Aceptar
-          </button>
+              <DialogTitle
+                as="h3"
+                class="text-lg font-medium leading-6 text-gray-900"
+              >
+                Recuperar contraseña
+              </DialogTitle>
+              <div class="mt-2">
+                <input
+                  class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                  id="username"
+                  type="text"
+                  placeholder="email@example.com"
+                />
+                <p class="text-gray-500 text-xs">
+                  Si el email existe en nuestra base de datos, le enviaremos un
+                  correo electrónico de recuperación.
+                </p>
+              </div>
+
+              <div class="mt-4 justify-between flex">
+                <button
+                  type="button"
+                  class="inline-flex justify-center rounded-md border border-transparent bg-red-100 px-4 py-2 text-sm font-medium text-red-900 hover:bg-red-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
+                  @click="isOpenModalRecuPContras = false"
+                >
+                  Cancelar
+                </button>
+                <button
+                  type="button"
+                  class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                  @click="requestPasswordReset"
+                >
+                  Aceptar
+                </button>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
        </div>
      </div>
-    </div>
-  </div>
+    </Dialog>
+  </TransitionRoot>
 </template>

 <script setup>
@@ -157,6 +151,13 @@ import { useUserStore } from "@/stores/user";
 import { onMounted, ref } from "vue";
 import PocketBase from "pocketbase";
 import router from "@/router";
+import {
+  TransitionRoot,
+  TransitionChild,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/vue";

 // access the `store` variable anywhere in the component ✨
 const storeUser = useUserStore();
@@ -164,7 +165,7 @@ const storeUser = useUserStore();
 let pb = null;
 let email = ref("p40store@gmail.com");
 let password = ref("p40store");
-
+let isOpenModalRecuPContras = ref(false);
 onMounted(() => {
  pb = new PocketBase(storeUser.urlPocketbase);
 });
@@ -188,7 +189,7 @@ const login = async () => {
 };

 const requestPasswordReset = async () => {
-  const authData = await pb
+  /* const authData = await pb
    .collection("users")
    .requestPasswordReset(email.value)
    .then(function (result) {
@@ -197,14 +198,14 @@ const requestPasswordReset = async () => {
    .catch(function (error) {
      console.log(error);
      visibleModalInvalid.value = true;
-    });
-  visibleModalPassword.value = false;
+    }); */
+  isOpenModalRecuPContras.value = false;
  email.value = "";
 };

 const cerrar = () => {
-  window.HSOverlay.close('#hs-vertically-centered-modal');
-}
+  window.HSOverlay.close("#hs-vertically-centered-modal");
+};
 </script>
 <style>
 .ancho {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,12 +2,10 @@ module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
-    './node_modules/preline/preline.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [
-    require("@tailwindcss/forms"),
-    require("preline/plugin")],
+    require("@tailwindcss/forms")],
 };