sprintify-ui 0.0.113 → 0.0.115

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/components/BaseDropdown.vue.d.ts

@@ -16,7 +16,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "open" | "mounted")[], "close" | "open" | "mounted", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "open")[], "close" | "open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     placement: {
         type: PropType<"bottom-start" | "bottom-end" | "top-start" | "top-end">;
         default(): string;
@@ -34,7 +34,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
 }>> & {
-    onMounted?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
 }, {

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

@@ -49,7 +49,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: PropType<SelectConfiguration | undefined>;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:model-value" | "dropdown:mounted")[], "close" | "update:model-value" | "dropdown:mounted", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:model-value")[], "close" | "update:model-value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<Option | Option[] | null | undefined>;
         default: undefined;
@@ -101,7 +101,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
-    "onDropdown:mounted"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
     select: SelectConfiguration | undefined;

package/dist/types/src/components/index.d.ts

@@ -16,6 +16,7 @@ import BaseButtonGroup from './BaseButtonGroup.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
 import BaseCharacterCounter from './BaseCharacterCounter.vue';
+import BaseClickOutside from './BaseClickOutside.vue';
 import BaseClipboard from './BaseClipboard.vue';
 import BaseColor from './BaseColor.vue';
 import BaseContainer from './BaseContainer.vue';
@@ -78,4 +79,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseColor, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDropdown, BaseDropdownAutocomplete, BaseField, BaseFieldI18n, BaseFilePicker, BaseFileUploader, BaseForm, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseColor, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDropdown, BaseDropdownAutocomplete, BaseField, BaseFieldI18n, BaseFilePicker, BaseFileUploader, BaseForm, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

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.113",
+  "version": "0.0.115",
   "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

@@ -16,7 +16,7 @@
           leave-to-class="transform scale-95 opacity-0"
         >
           <template v-if="showDropdown || keepAlive">
-            <div v-show="showDropdown" :id="id" class="inline-block">
+            <div v-show="showDropdown" class="inline-block">
               <slot
                 name="dropdown"
                 :show-dropdown="showDropdown"
@@ -34,8 +34,8 @@
 
 <script lang="ts" setup>
 import { useClickOutside } from '@/composables/clickOutside';
-import { useResizeObserver } from '@vueuse/core';
-import { throttle, uniqueId } from 'lodash';
+import { MaybeElement, MaybeRef, useResizeObserver } from '@vueuse/core';
+import { throttle } from 'lodash';
 import { PropType, StyleValue } from 'vue';
 import { disableScroll, enableScroll } from '../utils';
 
@@ -43,10 +43,6 @@ const button = ref<HTMLElement | null>(null);
 const dropdown = ref<HTMLElement | null>(null);
 
 const showDropdown = ref(false);
-
-// This is id is used to configure onClickOutside includes
-const id = 'base-dropdown-drawer-' + uniqueId();
-
 const props = defineProps({
   placement: {
     type: String as PropType<
@@ -70,7 +66,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['close', 'open', 'mounted']);
+const emit = defineEmits(['close', 'open']);
 
 const buttonX = ref(0);
 const buttonY = ref(0);
@@ -166,7 +162,7 @@ useClickOutside(
       close();
     }
   },
-  { includes: [button] }
+  { includes: () => [button] }
 );
 
 const placementInternal = computed(() => {
@@ -254,11 +250,11 @@ const dropdownStyles = computed((): StyleValue => {
   return styles as StyleValue;
 });
 
-onMounted(() => {
-  emit('mounted', {
-    id: id,
-  });
-});
+const addClickOutsideInclude = inject('clickOutside:addInclude', () => {
+  return;
+}) as (include: MaybeRef<MaybeElement> | string) => void;
+
+addClickOutsideInclude(dropdown);
 
 onBeforeUnmount(() => {
   close();

package/src/components/BaseDropdownAutocomplete.vue

@@ -6,7 +6,6 @@
     :padding="padding"
     @open="onOpen"
     @close="onClose"
-    @mounted="onDropdownMounted"
   >
     <template #button="buttonProps">
       <slot name="button" v-bind="buttonProps" :new-value="newValue"></slot>
@@ -125,7 +124,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:model-value', 'close', 'dropdown:mounted']);
+const emit = defineEmits(['update:model-value', 'close']);
 
 const componentName = computed(() => {
   if (props.multiple) {
@@ -228,8 +227,4 @@ function getNewValue(value: Option | Option[] | null | undefined) {
 function update() {
   emit('update:model-value', newValue.value);
 }
-
-function onDropdownMounted(payload: any) {
-  emit('dropdown:mounted', payload);
-}
 </script>

package/src/components/index.ts

@@ -16,6 +16,7 @@ import BaseButtonGroup from './BaseButtonGroup.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
 import BaseCharacterCounter from './BaseCharacterCounter.vue';
+import BaseClickOutside from './BaseClickOutside.vue';
 import BaseClipboard from './BaseClipboard.vue';
 import BaseColor from './BaseColor.vue';
 import BaseContainer from './BaseContainer.vue';
@@ -99,6 +100,7 @@ export {
   BaseCard,
   BaseCardRow,
   BaseCharacterCounter,
+  BaseClickOutside,
   BaseClipboard,
   BaseColor,
   BaseContainer,

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;