sprintify-ui 0.0.96 → 0.0.99

package/src/composables/clickOutside.ts

@@ -6,11 +6,11 @@ interface UseClickOutsideOptions {
 
 export function useClickOutside(
   element: MaybeElementRef,
-  callback: (outside: boolean) => void,
+  callback: () => void,
   options: UseClickOutsideOptions = {}
 ) {
   function cleanup() {
-    window.removeEventListener('mousedown', onClick);
+    window.removeEventListener('mousedown', onClick, { capture: true });
   }
 
   const stopWatch = watch(
@@ -18,7 +18,7 @@ export function useClickOutside(
     (el) => {
       if (el) {
         cleanup();
-        window.addEventListener('mousedown', onClick);
+        window.addEventListener('mousedown', onClick, { capture: true });
       }
     },
     { immediate: true }
@@ -35,13 +35,18 @@ export function useClickOutside(
 
     const contains = el.contains(e.target as HTMLElement);
 
-    const includeContainsEl = includeEls.some((exceptionEl) =>
-      exceptionEl?.contains(e.target as HTMLElement)
-    );
+    let containsIncludes = false;
+    if (includeEls.length > 0) {
+      containsIncludes = includeEls.some((exceptionEl) =>
+        exceptionEl?.contains(e.target as HTMLElement)
+      );
+    }
 
-    const outside = !contains && !includeContainsEl;
+    const outside = !contains && !containsIncludes;
 
-    callback(outside);
+    if (outside) {
+      callback();
+    }
   }
 
   const stop = () => {

package/src/index.ts

@@ -2,12 +2,13 @@ import axios, { AxiosInstance } from 'axios';
 import { App } from 'vue';
 import * as components from './components';
 import QueryString from 'qs';
-import { createI18n, I18n, Locale } from 'vue-i18n';
+import { createI18n, I18n } from 'vue-i18n';
 import en from '@/lang/en.json';
 import fr from '@/lang/fr.json';
 import { useDialogsStore } from './stores/dialogs';
 import { useNotificationsStore } from './stores/notifications';
 import { useSystemAlertStore } from './stores/systemAlerts';
+import { useClickOutside } from './composables/clickOutside';
 
 const messages = { en, fr };
 
@@ -91,3 +92,4 @@ export { config };
 export { useDialogsStore };
 export { useNotificationsStore };
 export { useSystemAlertStore };
+export { useClickOutside };

package/src/assets/pikaday.css

@@ -1,134 +0,0 @@
-@import 'pikaday/css/pikaday.css';
-
-.pikaday-white {
-  --backgroundColor: #ffffff;
-  --textColor: #718096;
-  --currentDateTextColor: #3182ce;
-  --selectedDateBackgroundColor: #3182ce;
-  --selectedDateTextColor: #ffffff;
-
-  --labelTextColor: #4a5568; /* eg. May 2020 */
-  --weekDaysTextColor: #a0aec0; /* eg. Mo Tu We ....*/
-
-  font-family: inherit;
-  background-color: var(--backgroundColor);
-  padding: 0.5rem;
-  z-index: 2000;
-  margin: 6px 0 0 0;
-
-  @apply shadow;
-  @apply rounded-lg;
-}
-
-.pikaday-white .pika-title {
-  width: 100%;
-  text-align: center;
-  display: flex;
-  justify-content: flex-start;
-  margin-bottom: 5px;
-}
-
-/* Next/Previous */
-.pikaday-white .pika-prev,
-.pikaday-white .pika-next {
-  position: absolute;
-  outline: none;
-  padding: 0;
-  width: 26px;
-  height: 26px;
-  top: -1px;
-  display: inline-block;
-  margin-top: 0;
-  cursor: pointer;
-  /* hide text using text-indent trick, using width value (it's enough) */
-  text-indent: -9999px;
-  white-space: nowrap;
-  overflow: hidden;
-  background-color: transparent;
-  background-position: center center;
-  background-repeat: no-repeat;
-  opacity: 0.7;
-}
-.pikaday-white .pika-prev:hover,
-.pikaday-white .pika-next:hover {
-  opacity: 1;
-}
-.pikaday-white .pika-prev {
-  right: 30px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'%3E%3C/path%3E%3C/svg%3E");
-}
-.pikaday-white .pika-next {
-  right: 2px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E");
-}
-.pika-prev.is-disabled,
-.pika-next.is-disabled {
-  cursor: default;
-  opacity: 0.2;
-}
-
-.pikaday-white .pika-label {
-  @apply mr-1.5 rounded border border-slate-300 py-1 px-2 text-[14px] font-medium leading-none;
-}
-
-/* Show Month & Year select */
-.pikaday-white .pika-label {
-  position: relative; /* add this */
-  /* some additional code */
-}
-
-.pikaday-white .pika-select-month,
-.pikaday-white .pika-select-year {
-  /*display: none;*/
-  width: 100%;
-  cursor: pointer;
-  position: absolute;
-  z-index: 9998;
-  margin: 0;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  padding: 0px;
-}
-
-.pikaday-white table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.pikaday-white table th {
-  width: 2em;
-  height: 2em;
-  font-weight: normal;
-  color: var(--weekDaysTextColor);
-  text-align: center;
-}
-.pikaday-white table th abbr {
-  text-decoration: none;
-}
-.pikaday-white table td {
-  padding: 1px;
-}
-.pikaday-white table td button {
-  width: 2em;
-  height: 2em;
-  text-align: center;
-  @apply rounded-full;
-  background-color: var(--backgroundColor);
-}
-.pikaday-white table td button:hover {
-  @apply bg-slate-200;
-  @apply text-slate-900;
-}
-.pikaday-white table td.is-today button {
-  color: var(--currentDateTextColor);
-}
-.pikaday-white table td.is-selected button {
-  @apply bg-primary-500;
-  @apply text-white;
-  @apply font-normal;
-}
-
-.pikaday-white table td button {
-  color: var(--textColor);
-}