sprintify-ui 0.0.111 → 0.0.113

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")[], "close" | "open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, 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<{
     placement: {
         type: PropType<"bottom-start" | "bottom-end" | "top-start" | "top-end">;
         default(): string;
@@ -34,6 +34,7 @@ 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")[], "close" | "update:model-value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, 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<{
     modelValue: {
         type: PropType<Option | Option[] | null | undefined>;
         default: undefined;
@@ -101,6 +101,7 @@ 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/composables/clickOutside.d.ts

@@ -1,6 +1,6 @@
 import { MaybeElementRef } from '@vueuse/core';
 interface UseClickOutsideOptions {
-    includes?: MaybeElementRef[];
+    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.111",
+  "version": "0.0.113",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

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" class="inline-block">
+            <div v-show="showDropdown" :id="id" class="inline-block">
               <slot
                 name="dropdown"
                 :show-dropdown="showDropdown"
@@ -35,7 +35,7 @@
 <script lang="ts" setup>
 import { useClickOutside } from '@/composables/clickOutside';
 import { useResizeObserver } from '@vueuse/core';
-import { throttle } from 'lodash';
+import { throttle, uniqueId } from 'lodash';
 import { PropType, StyleValue } from 'vue';
 import { disableScroll, enableScroll } from '../utils';
 
@@ -44,6 +44,9 @@ 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<
@@ -67,7 +70,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['close', 'open']);
+const emit = defineEmits(['close', 'open', 'mounted']);
 
 const buttonX = ref(0);
 const buttonY = ref(0);
@@ -251,6 +254,12 @@ const dropdownStyles = computed((): StyleValue => {
   return styles as StyleValue;
 });
 
+onMounted(() => {
+  emit('mounted', {
+    id: id,
+  });
+});
+
 onBeforeUnmount(() => {
   close();
   deactivate();

package/src/components/BaseDropdownAutocomplete.vue

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

@@ -1,7 +1,8 @@
 import { MaybeElementRef, unrefElement, tryOnScopeDispose } from '@vueuse/core';
+import { isString } from 'lodash';
 
 interface UseClickOutsideOptions {
-  includes?: MaybeElementRef[];
+  includes?: (MaybeElementRef | string)[];
 }
 
 export function useClickOutside(
@@ -27,7 +28,18 @@ export function useClickOutside(
   function onClick(e: Event) {
     const el = unrefElement(element);
 
-    const includeEls = options.includes?.map(unrefElement) ?? [];
+    const includeEls = [] as Element[];
+
+    options.includes?.forEach((include) => {
+      if (isString(include)) {
+        includeEls.push(...document.querySelectorAll(include));
+        return;
+      }
+      const element = unrefElement(include);
+      if (element) {
+        includeEls.push(element);
+      }
+    }) ?? [];
 
     if (!el) {
       return;