sprintify-ui 0.1.17 → 0.2.0

package/src/components/BaseAppDialogs.vue

@@ -1,124 +1,124 @@
-<template>
-  <Teleport to="body">
-    <Transition
-      appear
-      enter-active-class="duration-300 ease-out"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-active-class="duration-200 ease-in"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <div
-        v-if="dialogs.length"
-        class="fixed inset-0 z-dialogs h-full w-full bg-black bg-opacity-60"
-      />
-    </Transition>
-
-    <TransitionGroup
-      appear
-      enter-active-class="duration-300 ease-out"
-      enter-from-class="translate-y-10 opacity-0"
-      enter-to-class="translate-y-0 opacity-100"
-      leave-active-class="duration-200 ease-in"
-      leave-from-class="translate-y-0 opacity-100"
-      leave-to-class="translate-y-10 opacity-0"
-      tag="div"
-    >
-      <div
-        v-for="dialog in dialogs"
-        :key="dialog.id"
-        data-scroll-lock-scrollable
-        class="fixed inset-0 z-dialogs transform overflow-y-auto"
-      >
-        <div
-          class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
-        >
-          <div
-            class="fixed inset-0 h-full w-full"
-            @click="
-              dialog.closeOnOutsideClick
-                ? cancel(dialog)
-                : refuseAnimation(dialog)
-            "
-          />
-          <BaseDialog
-            :class="animationClasses[dialog.id] ?? ''"
-            :color="dialog.color"
-            :title="dialog.title"
-            :message="dialog.message"
-            :confirm-text="dialog.confirmText"
-            :cancel-text="dialog.cancelText"
-            @cancel="cancel(dialog)"
-            @confirm="confirm(dialog)"
-          />
-        </div>
-      </div>
-    </TransitionGroup>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { Dialog } from '@/types';
-import BaseDialog from './BaseDialog.vue';
-import { useDialogsStore } from '@/stores/dialogs';
-import { disableScroll, enableScroll } from '@/utils/scrollPreventer';
-
-const dialogStore = useDialogsStore();
-
-const dialogs = computed(() => {
-  return dialogStore.dialogs;
-});
-
-function confirm(dialog: Dialog) {
-  dialog.onConfirm();
-  remove(dialog);
-}
-
-function cancel(dialog: Dialog) {
-  dialog.onCancel();
-  remove(dialog);
-}
-
-function remove(dialog: Dialog) {
-  dialogStore.remove(dialog);
-}
-
-const animationClasses = ref<Record<string, string>>({});
-
-function refuseAnimation(dialog: Dialog) {
-  animationClasses.value[dialog.id] = '';
-  setTimeout(() => {
-    animationClasses.value[dialog.id] = 'animate-shake';
-  });
-}
-
-watch(
-  () => dialogs.value.length,
-  () => {
-    if (dialogs.value.length == 0) {
-      enableScroll();
-    } else {
-      disableScroll();
-    }
-  }
-);
-
-window.addEventListener('keydown', onKeydown);
-
-onBeforeUnmount(() => {
-  window.removeEventListener('keydown', onKeydown);
-});
-
-function onKeydown(event: KeyboardEvent) {
-  if (dialogs.value.length == 0) return;
-
-  if (event.key === 'Escape') {
-    cancel(dialogs.value[dialogs.value.length - 1]);
-  }
-}
-
-defineExpose({
-  dialogs,
-});
-</script>
+<template>
+  <Teleport to="body">
+    <Transition
+      appear
+      enter-active-class="duration-300 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="duration-200 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="dialogs.length"
+        class="fixed inset-0 z-dialogs h-full w-full bg-black bg-opacity-60"
+      />
+    </Transition>
+
+    <TransitionGroup
+      appear
+      enter-active-class="duration-300 ease-out"
+      enter-from-class="translate-y-10 opacity-0"
+      enter-to-class="translate-y-0 opacity-100"
+      leave-active-class="duration-200 ease-in"
+      leave-from-class="translate-y-0 opacity-100"
+      leave-to-class="translate-y-10 opacity-0"
+      tag="div"
+    >
+      <div
+        v-for="dialog in dialogs"
+        :key="dialog.id"
+        data-scroll-lock-scrollable
+        class="fixed inset-0 z-dialogs transform overflow-y-auto"
+      >
+        <div
+          class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+        >
+          <div
+            class="fixed inset-0 h-full w-full"
+            @click="
+              dialog.closeOnOutsideClick
+                ? cancel(dialog)
+                : refuseAnimation(dialog)
+            "
+          />
+          <BaseDialog
+            :class="animationClasses[dialog.id] ?? ''"
+            :color="dialog.color"
+            :title="dialog.title"
+            :message="dialog.message"
+            :confirm-text="dialog.confirmText"
+            :cancel-text="dialog.cancelText"
+            @cancel="cancel(dialog)"
+            @confirm="confirm(dialog)"
+          />
+        </div>
+      </div>
+    </TransitionGroup>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { Dialog } from '@/types';
+import BaseDialog from './BaseDialog.vue';
+import { useDialogsStore } from '@/stores/dialogs';
+import { disableScroll, enableScroll } from '@/utils/scrollPreventer';
+
+const dialogStore = useDialogsStore();
+
+const dialogs = computed(() => {
+  return dialogStore.dialogs;
+});
+
+function confirm(dialog: Dialog) {
+  dialog.onConfirm();
+  remove(dialog);
+}
+
+function cancel(dialog: Dialog) {
+  dialog.onCancel();
+  remove(dialog);
+}
+
+function remove(dialog: Dialog) {
+  dialogStore.remove(dialog);
+}
+
+const animationClasses = ref<Record<string, string>>({});
+
+function refuseAnimation(dialog: Dialog) {
+  animationClasses.value[dialog.id] = '';
+  setTimeout(() => {
+    animationClasses.value[dialog.id] = 'animate-shake';
+  });
+}
+
+watch(
+  () => dialogs.value.length,
+  () => {
+    if (dialogs.value.length == 0) {
+      enableScroll();
+    } else {
+      disableScroll();
+    }
+  }
+);
+
+window.addEventListener('keydown', onKeydown);
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeydown);
+});
+
+function onKeydown(event: KeyboardEvent) {
+  if (dialogs.value.length == 0) return;
+
+  if (event.key === 'Escape') {
+    cancel(dialogs.value[dialogs.value.length - 1]);
+  }
+}
+
+defineExpose({
+  dialogs,
+});
+</script>

package/src/components/BaseAppNotifications.vue

@@ -1,73 +1,73 @@
-<template>
-  <Teleport to="body">
-    <div
-      class="pointer-events-none fixed inset-0 z-notifications flex items-end justify-end p-6 md:p-8"
-    >
-      <div class="w-full max-w-sm">
-        <TransitionGroup
-          enter-active-class="transition duration-300 ease-out transform"
-          enter-from-class="sm:translate-y-0 sm:translate-x-4 translate-y-2 opacity-0"
-          enter-to-class="sm:translate-x-0 translate-y-0 opacity-100"
-          leave-active-class="transition duration-100 ease-in"
-          leave-from-class="sm:translate-x-0 translate-y-0 opacity-100"
-          leave-to-class="sm:translate-y-0 sm:translate-x-4 translate-y-2 opacity-0"
-        >
-          <div v-for="notification in notifications" :key="notification.id">
-            <div
-              class="mx-auto mt-4 flex w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-xl"
-            >
-              <div
-                class="flex w-12 items-center justify-center"
-                :class="{
-                  'bg-blue-500': notification.color == 'info',
-                  'bg-red-500': notification.color == 'danger',
-                  'bg-yellow-500': notification.color == 'warning',
-                  'bg-green-500': notification.color == 'success',
-                }"
-              >
-                <svg
-                  class="h-6 w-6 fill-current text-white"
-                  viewBox="0 0 40 40"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"
-                  />
-                </svg>
-              </div>
-
-              <div class="-mx-3 px-4 pt-2 pb-3">
-                <div class="mx-3">
-                  <h3
-                    class="mb-1 font-semibold leading-tight"
-                    :class="{
-                      'text-blue-500': notification.color == 'info',
-                      'text-red-500': notification.color == 'danger',
-                      'text-yellow-500': notification.color == 'warning',
-                      'text-green-500': notification.color == 'success',
-                    }"
-                  >
-                    {{ notification.title }}
-                  </h3>
-                  <p class="text-sm leading-tight text-slate-600">
-                    {{ notification.text }}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </TransitionGroup>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { useNotificationsStore } from '@/index';
-
-const notificationsStore = useNotificationsStore();
-
-const notifications = computed(() => {
-  return notificationsStore.notifications;
-});
-</script>
+<template>
+  <Teleport to="body">
+    <div
+      class="pointer-events-none fixed inset-0 z-notifications flex items-end justify-end p-6 md:p-8"
+    >
+      <div class="w-full max-w-sm">
+        <TransitionGroup
+          enter-active-class="transition duration-300 ease-out transform"
+          enter-from-class="sm:translate-y-0 sm:translate-x-4 translate-y-2 opacity-0"
+          enter-to-class="sm:translate-x-0 translate-y-0 opacity-100"
+          leave-active-class="transition duration-100 ease-in"
+          leave-from-class="sm:translate-x-0 translate-y-0 opacity-100"
+          leave-to-class="sm:translate-y-0 sm:translate-x-4 translate-y-2 opacity-0"
+        >
+          <div v-for="notification in notifications" :key="notification.id">
+            <div
+              class="mx-auto mt-4 flex w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-xl"
+            >
+              <div
+                class="flex w-12 items-center justify-center"
+                :class="{
+                  'bg-blue-500': notification.color == 'info',
+                  'bg-red-500': notification.color == 'danger',
+                  'bg-yellow-500': notification.color == 'warning',
+                  'bg-green-500': notification.color == 'success',
+                }"
+              >
+                <svg
+                  class="h-6 w-6 fill-current text-white"
+                  viewBox="0 0 40 40"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"
+                  />
+                </svg>
+              </div>
+
+              <div class="-mx-3 px-4 pt-2 pb-3">
+                <div class="mx-3">
+                  <h3
+                    class="mb-1 font-semibold leading-tight"
+                    :class="{
+                      'text-blue-500': notification.color == 'info',
+                      'text-red-500': notification.color == 'danger',
+                      'text-yellow-500': notification.color == 'warning',
+                      'text-green-500': notification.color == 'success',
+                    }"
+                  >
+                    {{ notification.title }}
+                  </h3>
+                  <p class="text-sm leading-tight text-slate-600">
+                    {{ notification.text }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </TransitionGroup>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useNotificationsStore } from '@/index';
+
+const notificationsStore = useNotificationsStore();
+
+const notifications = computed(() => {
+  return notificationsStore.notifications;
+});
+</script>