sprintify-ui 0.0.94 → 0.0.96

package/src/components/BaseDropdown.stories.js

@@ -1,8 +1,17 @@
 import BaseBadge from './BaseBadge.vue';
 import BaseAutocomplete from './BaseAutocomplete.vue';
+import BaseModalCenter from './BaseModalCenter.vue';
 import BaseDropdown from './BaseDropdown.vue';
 import { options } from '../../.storybook/utils';
 
+const items = [];
+
+for (let i = 0; i < 100; i++) {
+  items.push({
+    label: `Item ${i + 1}`,
+  });
+}
+
 export default {
   title: 'Components/BaseDropdown',
   component: BaseDropdown,
@@ -23,7 +32,7 @@ export default {
 const Template = (args) => ({
   components: { BaseDropdown },
   setup() {
-    return { args };
+    return { args, items };
   },
   template: `
   <div style="height: 1000px; margin-top: 300px;">
@@ -33,10 +42,11 @@ const Template = (args) => ({
           <div class="btn btn-primary">Click me</div>
         </template>
         <template #dropdown>
-          <div class="bg-white shadow py-1 px-1 rounded">
-            <button type="button" class="block text-sm px-4 py-1.5">Item 1</button>
-            <button type="button" class="block text-sm px-4 py-1.5">Item 2</button>
-            <button type="button" class="block text-sm px-4 py-1.5">Item 3</button>
+          <div 
+            class="bg-white shadow py-1 px-1 rounded" 
+            style="max-height: 200px; overflow: auto;" 
+            data-scroll-lock-scrollable>
+            <button type="button" v-for="item in items" :key="item.label" class="block text-sm px-4 py-1.5">{{ item.label }}</button>
           </div>
         </template>
       </BaseDropdown>
@@ -67,11 +77,11 @@ export const WithAutocomplete = (args) => ({
     }
 
     function onClose() {
-      if (autocomplete.value) {
-        setTimeout(() => {
+      setTimeout(() => {
+        if (autocomplete.value) {
           autocomplete.value.setKeywords('');
-        }, 10);
-      }
+        }
+      }, 10);
     }
 
     function onUpdate(v, close) {
@@ -113,3 +123,31 @@ WithAutocomplete.args = {
   placement: 'bottom-start',
   padding: 3,
 };
+
+export const ModalWithScroll = (args) => ({
+  components: { BaseDropdown, BaseModalCenter },
+  setup() {
+    return { args, items };
+  },
+  template: `
+  <BaseModalCenter :model-value="true">
+    <div class="p-10 bg-white">
+      <BaseDropdown v-bind="args">
+        <template #button>
+          <div class="btn btn-primary">Click me</div>
+        </template>
+        <template #dropdown>
+          <div 
+            class="bg-white shadow py-1 px-1 rounded" 
+            style="max-height: 200px; overflow: auto;" 
+            data-scroll-lock-scrollable>
+            <button type="button" v-for="item in items" :key="item.label" class="block text-sm px-4 py-1.5">{{ item.label }}</button>
+          </div>
+        </template>
+      </BaseDropdown>
+
+      <div style="height: 3000px;"></div>
+    </div>
+  </BaseModalCenter>
+  `,
+});

package/src/components/BaseDropdown.vue

@@ -15,9 +15,10 @@
           leave-from-class="transform scale-100 opacity-100"
           leave-to-class="transform scale-90 opacity-0"
         >
-          <div v-show="showDropdown" class="inline-block" scroll-lock-target>
+          <div v-show="showDropdown" class="inline-block">
             <slot
               name="dropdown"
+              :show-dropdown="showDropdown"
               :close="close"
               :open="open"
               :toggle="toggle"
@@ -30,6 +31,8 @@
 </template>
 
 <script lang="ts" setup>
+import { useClickOutside } from '@/composables/clickOutside';
+import { throttle } from 'lodash';
 import { PropType, StyleValue } from 'vue';
 import { disableScroll, enableScroll } from '../utils';
 
@@ -96,7 +99,7 @@ function open() {
   showDropdown.value = true;
   nextTick(() => {
     setBoundingBoxes();
-    disableScroll(dropdown.value);
+    disableScroll();
     emit('open');
   });
 }
@@ -108,16 +111,6 @@ function close() {
   emit('close');
 }
 
-function activate() {
-  window.addEventListener('keydown', onKeydown);
-  window.addEventListener('mousedown', onMouseDown);
-}
-
-function deactivate() {
-  window.removeEventListener('keydown', onKeydown);
-  window.removeEventListener('mousedown', onMouseDown);
-}
-
 function onKeydown(event: KeyboardEvent) {
   if (event.code == 'Escape') {
     if (showDropdown.value) {
@@ -126,33 +119,32 @@ function onKeydown(event: KeyboardEvent) {
   }
 }
 
-function onMouseDown(event: MouseEvent) {
-  if (!dropdown.value) {
-    return;
-  }
-  // Get the element that was clicked
-  const clickedElement = event.target as HTMLElement | null;
-
-  if (!clickedElement) {
-    return;
-  }
+const setBoundingBoxesDebounced = throttle(() => {
+  setBoundingBoxes();
+}, 10);
 
-  // Button is clicked
-  if (
-    button.value == clickedElement ||
-    button.value?.contains(clickedElement)
-  ) {
-    return;
-  }
+function activate() {
+  window.addEventListener('keydown', onKeydown);
+  window.addEventListener('resize', setBoundingBoxesDebounced);
+  window.addEventListener('scroll', setBoundingBoxesDebounced, true);
+}
 
-  // `el` is the element you're detecting clicks outside of
-  if (dropdown.value.contains(clickedElement)) {
-    // do nothing..
-  } else {
-    close();
-  }
+function deactivate() {
+  window.removeEventListener('resize', setBoundingBoxesDebounced);
+  window.removeEventListener('scroll', setBoundingBoxesDebounced, true);
+  window.removeEventListener('keydown', onKeydown);
 }
 
+useClickOutside(
+  dropdown,
+  (outside: boolean) => {
+    if (outside && showDropdown.value) {
+      close();
+    }
+  },
+  { includes: [button] }
+);
+
 const placementInternal = computed(() => {
   const tooTallForTop =
     buttonY.value - dropdownHeight.value - props.padding < 0;

package/src/components/BaseLayoutSidebar.vue

@@ -59,7 +59,10 @@
               <div class="flex flex-shrink-0 items-center px-4">
                 <img class="block h-8 w-auto" :src="logoUrl" :alt="appName" />
               </div>
-              <div class="mt-5 h-0 flex-1 overflow-y-auto">
+              <div
+                data-scroll-lock-scrollable
+                class="mt-5 h-0 flex-1 overflow-y-auto"
+              >
                 <nav>
                   <slot name="menu" />
                 </nav>

package/src/components/BaseModalCenter.vue

@@ -7,9 +7,8 @@
     >
       <div v-show="modelValue">
         <div
-          ref="allow"
+          data-scroll-lock-scrollable
           class="fixed inset-0 z-modal w-full overflow-y-auto overflow-x-hidden"
-          scroll-lock-target
         >
           <div
             class="flex min-h-full w-full items-end justify-center overflow-hidden sm:px-6 sm:pb-6"
@@ -112,11 +111,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
-const allow = ref(null);
-
 const modal = useModal(
   computed(() => props.modelValue),
-  allow,
   emit as any
 );
 </script>

package/src/components/BaseModalSide.vue

@@ -7,9 +7,8 @@
     >
       <div v-show="modelValue">
         <div
-          ref="allow"
+          data-scroll-lock-scrollable
           class="fixed inset-0 z-modal w-full overflow-y-auto overflow-x-hidden"
-          scroll-lock-target
         >
           <div class="flex min-h-full w-full pt-20 sm:pt-0">
             <div class="min-h-full grow">
@@ -97,10 +96,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
-const allow = ref(null);
 const modal = useModal(
   computed(() => props.modelValue),
-  allow,
   emit
 );
 

package/src/components/BaseSideNavigation.vue

@@ -1,7 +1,10 @@
 <template>
   <nav aria-label="Sidebar" class="relative">
     <div class="absolute bottom-0 left-0 h-full w-px bg-slate-300" />
-    <div class="relative overflow-x-auto overflow-y-hidden">
+    <div
+      class="relative overflow-x-auto overflow-y-hidden"
+      data-scroll-lock-scrollable
+    >
       <div class="space-y-2">
         <slot />
       </div>

package/src/components/BaseTable.vue

@@ -7,6 +7,7 @@
     <div class="flex flex-col">
       <div
         class="overflow-x-auto overflow-y-auto"
+        data-scroll-lock-scrollable
         :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
       >
         <div class="inline-block min-w-full align-middle">

package/src/components/BaseTabs.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="relative">
     <div class="absolute bottom-0 left-0 h-px w-full bg-slate-300" />
-    <div class="relative overflow-x-auto overflow-y-hidden">
+    <div
+      class="relative overflow-x-auto overflow-y-hidden"
+      data-scroll-lock-scrollable
+    >
       <ul class="flex space-x-4 text-center">
         <slot />
       </ul>

package/src/components/BaseTagAutocomplete.vue

@@ -58,6 +58,7 @@
       >
         <div
           ref="dropdown"
+          data-scroll-lock-scrollable
           class="max-h-[214px] min-h-[75px] w-full overflow-y-auto"
         >
           <slot v-if="filteredNormalizedOptions.length == 0" name="empty">

package/src/composables/clickOutside.ts

@@ -0,0 +1,57 @@
+import { MaybeElementRef, unrefElement, tryOnScopeDispose } from '@vueuse/core';
+
+interface UseClickOutsideOptions {
+  includes?: MaybeElementRef[];
+}
+
+export function useClickOutside(
+  element: MaybeElementRef,
+  callback: (outside: boolean) => void,
+  options: UseClickOutsideOptions = {}
+) {
+  function cleanup() {
+    window.removeEventListener('mousedown', onClick);
+  }
+
+  const stopWatch = watch(
+    () => unrefElement(element),
+    (el) => {
+      if (el) {
+        cleanup();
+        window.addEventListener('mousedown', onClick);
+      }
+    },
+    { immediate: true }
+  );
+
+  function onClick(e: Event) {
+    const el = unrefElement(element);
+
+    const includeEls = options.includes?.map(unrefElement) ?? [];
+
+    if (!el) {
+      return;
+    }
+
+    const contains = el.contains(e.target as HTMLElement);
+
+    const includeContainsEl = includeEls.some((exceptionEl) =>
+      exceptionEl?.contains(e.target as HTMLElement)
+    );
+
+    const outside = !contains && !includeContainsEl;
+
+    callback(outside);
+  }
+
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+
+  tryOnScopeDispose(stop);
+
+  return {
+    stop,
+  };
+}

package/src/composables/modal.ts

@@ -1,11 +1,7 @@
 import { disableScroll, enableScroll } from '../utils';
 import { Ref } from 'vue';
 
-export function useModal(
-  modelValue: Ref<boolean>,
-  scrollable: Ref<HTMLElement | null>,
-  emit: any
-) {
+export function useModal(modelValue: Ref<boolean>, emit: any) {
   const mounted = ref(false);
 
   watch(
@@ -38,7 +34,7 @@ export function useModal(
   }
 
   function activate() {
-    disableScroll(scrollable.value);
+    disableScroll();
     window.addEventListener('keydown', onKeydown);
   }
 

package/src/utils/scrollPreventer.ts

@@ -1,20 +1,10 @@
-import {
-  disablePageScroll,
-  clearQueueScrollLocks,
-  enablePageScroll,
-  ScrollableTarget,
-} from 'scroll-lock';
+import { disablePageScroll, enablePageScroll } from 'scroll-lock';
 
-function disableScroll(allow: ScrollableTarget | null = null) {
-  if (allow == null) {
-    allow = document.querySelectorAll('[scroll-lock-target]');
-  }
-
-  disablePageScroll(allow);
+function disableScroll() {
+  disablePageScroll();
 }
 
 function enableScroll() {
-  clearQueueScrollLocks();
   enablePageScroll();
 }