sprintify-ui 0.0.112 → 0.0.114

package/dist/types/src/components/BaseClickOutside.vue.d.ts

@@ -0,0 +1,26 @@
+import { MaybeElement } from '@vueuse/core';
+import { MaybeRef } from '@vueuse/shared';
+import { PropType } from 'vue';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    includes: {
+        type: PropType<(string | MaybeRef<MaybeElement>)[]>;
+        default: () => never[];
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "clickOutside"[], "clickOutside", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    includes: {
+        type: PropType<(string | MaybeRef<MaybeElement>)[]>;
+        default: () => never[];
+    };
+}>> & {
+    onClickOutside?: ((...args: any[]) => any) | undefined;
+}, {
+    includes: (string | MaybeRef<MaybeElement>)[];
+}>, {
+    default: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/src/composables/clickOutside.d.ts

@@ -1,6 +1,6 @@
 import { MaybeElementRef } from '@vueuse/core';
 interface UseClickOutsideOptions {
-    includes?: (MaybeElementRef | string)[];
+    includes?: () => (MaybeElementRef | string)[];
 }
 export declare function useClickOutside(element: MaybeElementRef, callback: () => void, options?: UseClickOutsideOptions): {
     stop: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.112",
+  "version": "0.0.114",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseClickOutside.vue

@@ -0,0 +1,37 @@
+<template>
+  <div ref="root">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useClickOutside } from '@/composables/clickOutside';
+import { MaybeElement } from '@vueuse/core';
+import { MaybeRef } from '@vueuse/shared';
+import { PropType } from 'vue';
+
+const props = defineProps({
+  includes: {
+    type: Array as PropType<(MaybeRef<MaybeElement> | string)[]>,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['clickOutside']);
+
+const root = ref<null | HTMLElement>(null);
+
+const includes = [] as (MaybeRef<MaybeElement> | string)[];
+
+function addInclude(include: MaybeRef<MaybeElement> | string) {
+  includes.push(include);
+}
+
+provide('clickOutside:addInclude', addInclude);
+
+useClickOutside(root, () => emit('clickOutside'), {
+  includes: () => {
+    return [...includes, ...props.includes];
+  },
+});
+</script>

package/src/components/BaseDropdown.stories.js

@@ -3,6 +3,7 @@ import BaseAutocomplete from './BaseAutocomplete.vue';
 import BaseModalCenter from './BaseModalCenter.vue';
 import BaseDropdown from './BaseDropdown.vue';
 import BaseDatePicker from './BaseDatePicker.vue';
+import BaseClickOutside from './BaseClickOutside.vue';
 import { options } from '../../.storybook/utils';
 
 const items = [];
@@ -181,3 +182,29 @@ export const WithDatePicker = (args) => ({
 WithDatePicker.args = {
   placement: 'bottom-start',
 };
+
+export const WithinClickOutside = (args) => ({
+  components: { BaseDropdown, BaseClickOutside },
+  setup() {
+    function onClickOutside() {
+      alert('click outside');
+    }
+    return { args, items, onClickOutside };
+  },
+  template: `
+  <BaseClickOutside @clickOutside="onClickOutside">
+    <div class="bg-slate-200 shadow-md min-h-[100px] p-3">
+      <BaseDropdown v-bind="args">
+        <template #button>
+          <div class="btn btn-primary">Click me</div>
+        </template>
+        <template #dropdown>
+          <div class="bg-white shadow-lg rounded border p-2 w-[260px]">
+            ...
+          </div>
+        </template>
+      </BaseDropdown>
+    </div>
+  </BaseClickOutside>
+  `,
+});

package/src/components/BaseDropdown.vue

@@ -34,7 +34,7 @@
 
 <script lang="ts" setup>
 import { useClickOutside } from '@/composables/clickOutside';
-import { useResizeObserver } from '@vueuse/core';
+import { MaybeElement, MaybeRef, useResizeObserver } from '@vueuse/core';
 import { throttle } from 'lodash';
 import { PropType, StyleValue } from 'vue';
 import { disableScroll, enableScroll } from '../utils';
@@ -43,7 +43,6 @@ const button = ref<HTMLElement | null>(null);
 const dropdown = ref<HTMLElement | null>(null);
 
 const showDropdown = ref(false);
-
 const props = defineProps({
   placement: {
     type: String as PropType<
@@ -163,7 +162,7 @@ useClickOutside(
       close();
     }
   },
-  { includes: [button] }
+  { includes: () => [button] }
 );
 
 const placementInternal = computed(() => {
@@ -251,6 +250,12 @@ const dropdownStyles = computed((): StyleValue => {
   return styles as StyleValue;
 });
 
+const addClickOutsideInclude = inject('clickOutside:addInclude', () => {
+  return;
+}) as (include: MaybeRef<MaybeElement> | string) => void;
+
+addClickOutsideInclude(dropdown);
+
 onBeforeUnmount(() => {
   close();
   deactivate();

package/src/composables/clickOutside.ts

@@ -2,7 +2,7 @@ import { MaybeElementRef, unrefElement, tryOnScopeDispose } from '@vueuse/core';
 import { isString } from 'lodash';
 
 interface UseClickOutsideOptions {
-  includes?: (MaybeElementRef | string)[];
+  includes?: () => (MaybeElementRef | string)[];
 }
 
 export function useClickOutside(
@@ -30,16 +30,22 @@ export function useClickOutside(
 
     const includeEls = [] as Element[];
 
-    options.includes?.forEach((include) => {
+    const optionIncludes = [];
+
+    if (options.includes) {
+      optionIncludes.push(...options.includes());
+    }
+
+    optionIncludes.forEach((include) => {
       if (isString(include)) {
         includeEls.push(...document.querySelectorAll(include));
-        return;
-      }
-      const element = unrefElement(include);
-      if (element) {
-        includeEls.push(element);
+      } else {
+        const element = unrefElement(include);
+        if (element) {
+          includeEls.push(element);
+        }
       }
-    }) ?? [];
+    });
 
     if (!el) {
       return;