sprintify-ui 0.5.12 → 0.6.1

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

@@ -75,6 +75,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    focusOnMount: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     /** Show an 'empty option', should use with showModelValue = true for better UX  */
     showEmptyOption: {
         default: boolean;
@@ -171,6 +175,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    focusOnMount: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     /** Show an 'empty option', should use with showModelValue = true for better UX  */
     showEmptyOption: {
         default: boolean;
@@ -208,6 +216,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     dropdownShow: "focus" | "always";
     showModelValue: boolean;
     visibleFocus: boolean;
+    focusOnMount: boolean;
     showEmptyOption: boolean;
     emptyOptionLabel: string;
 }, {}>, {

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

@@ -61,6 +61,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    focusOnMount: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     showEmptyOption: {
         default: boolean;
         type: BooleanConstructor;
@@ -146,6 +150,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    focusOnMount: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     showEmptyOption: {
         default: boolean;
         type: BooleanConstructor;
@@ -177,6 +185,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     dropdownShow: "focus" | "always";
     showModelValue: boolean;
     visibleFocus: boolean;
+    focusOnMount: boolean;
     showEmptyOption: boolean;
     emptyOptionLabel: string;
     queryKey: string;

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

@@ -57,6 +57,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    focusOnMount: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     showEmptyOption: {
         default: boolean;
         type: BooleanConstructor;
@@ -134,6 +138,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    focusOnMount: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     showEmptyOption: {
         default: boolean;
         type: BooleanConstructor;
@@ -161,6 +169,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     dropdownShow: "focus" | "always";
     showModelValue: boolean;
     visibleFocus: boolean;
+    focusOnMount: boolean;
     showEmptyOption: boolean;
     emptyOptionLabel: string;
     primaryKey: string;

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

@@ -65,6 +65,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    focusOnMount: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     showEmptyOption: {
         default: boolean;
         type: BooleanConstructor;
@@ -150,6 +154,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    focusOnMount: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     showEmptyOption: {
         default: boolean;
         type: BooleanConstructor;
@@ -177,6 +185,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     dropdownShow: "focus" | "always";
     showModelValue: boolean;
     visibleFocus: boolean;
+    focusOnMount: boolean;
     showEmptyOption: boolean;
     emptyOptionLabel: string;
     primaryKey: string;

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

@@ -41,9 +41,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
 }>>, {
+    trim: boolean;
     min: number;
     max: number;
-    trim: boolean;
     removeDoubleSpaces: boolean;
 }, {}>;
 export default _default;

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

@@ -1,16 +1,6 @@
+import { Placement } from '@floating-ui/vue';
 import { PropType } from 'vue';
-declare function toggle(): void;
-declare function open(): void;
-declare function close(): void;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    placement: {
-        type: PropType<"top-start" | "top-end" | "bottom-start" | "bottom-end">;
-        default(): string;
-    };
-    padding: {
-        default: number;
-        type: NumberConstructor;
-    };
     animated: {
         default: boolean;
         type: BooleanConstructor;
@@ -19,22 +9,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {
-    open: typeof open;
-    close: typeof close;
-    toggle: typeof toggle;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (...args: any[]) => void;
-    open: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     placement: {
-        type: PropType<"top-start" | "top-end" | "bottom-start" | "bottom-end">;
-        default(): string;
-    };
-    padding: {
-        default: number;
-        type: NumberConstructor;
+        default: string;
+        type: PropType<Placement>;
     };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     animated: {
         default: boolean;
         type: BooleanConstructor;
@@ -43,21 +22,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
-    onOpen?: ((...args: any[]) => any) | undefined;
-}, {
-    placement: "top-start" | "top-end" | "bottom-start" | "bottom-end";
-    padding: number;
+    placement: {
+        default: string;
+        type: PropType<Placement>;
+    };
+}>>, {
+    placement: Placement;
     animated: boolean;
     keepAlive: boolean;
 }, {}>, {
     button?(_: {}): any;
     dropdown?(_: {
-        showDropdown: boolean;
-        close: typeof close;
-        open: typeof open;
-        toggle: typeof toggle;
+        close: any;
+        opened: any;
     }): any;
 }>;
 export default _default;

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

@@ -1,5 +1,6 @@
 import { PropType } from 'vue';
 import { Option, SelectConfiguration } from '@/types';
+import { Placement } from '@floating-ui/vue';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: {
         type: PropType<Option | Option[] | null | undefined>;
@@ -38,19 +39,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
     };
     placement: {
-        type: PropType<"top-start" | "top-end" | "bottom-start" | "bottom-end">;
+        type: PropType<Placement>;
         default: undefined;
     };
-    padding: {
-        default: undefined;
-        type: NumberConstructor;
-    };
     select: {
         default: undefined;
         type: PropType<SelectConfiguration | undefined>;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (...args: any[]) => void;
     "update:model-value": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -90,12 +86,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
     };
     placement: {
-        type: PropType<"top-start" | "top-end" | "bottom-start" | "bottom-end">;
-        default: undefined;
-    };
-    padding: {
+        type: PropType<Placement>;
         default: undefined;
-        type: NumberConstructor;
     };
     select: {
         default: undefined;
@@ -103,12 +95,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>> & {
     "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
     select: SelectConfiguration | undefined;
     options: Option[] | undefined;
-    placement: "top-start" | "top-end" | "bottom-start" | "bottom-end";
+    placement: Placement;
     modelValue: Option | Option[] | null | undefined;
     labelKey: string;
     valueKey: string;
@@ -116,7 +107,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     multiple: boolean;
     emptyOptionLabel: string;
     url: string;
-    padding: number;
 }, {}>, {
     button?(_: {
         newValue: any;

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

@@ -70,6 +70,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: PropType<"focus" | "always">;
     };
+    focusOnMount: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     twContainer: {
         default: string;
         type: PropType<string | string[]>;
@@ -151,6 +155,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: PropType<"focus" | "always">;
     };
+    focusOnMount: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     twContainer: {
         default: string;
         type: PropType<string | string[]>;
@@ -174,6 +182,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     loadingBottom: boolean;
     size: "base" | "xs" | "sm";
     dropdownShow: "focus" | "always";
+    focusOnMount: boolean;
     twContainer: string | string[];
 }, {}>, {
     items?(_: {

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

@@ -41,6 +41,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    focusOnMount: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }, {
     focus: () => void | undefined;
     blur: () => void | undefined;
@@ -93,6 +97,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    focusOnMount: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }>> & {
     onFocus?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -104,6 +112,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     disabled: boolean;
     hasError: boolean;
     max: number;
+    focusOnMount: boolean;
     queryKey: string;
 }, {}>, {
     items?(_: {

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

@@ -1,16 +1,36 @@
-import { PropType } from 'vue';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    target: {
-        required: true;
-        type: PropType<HTMLElement | null>;
+    class: {
+        type: import("vue").PropType<string | string[] | null>;
+        default: null;
+    };
+    text: {
+        type: import("vue").PropType<string | null>;
+        default: null;
+    };
+    visible: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    target: {
-        required: true;
-        type: PropType<HTMLElement | null>;
+    class: {
+        type: import("vue").PropType<string | string[] | null>;
+        default: null;
+    };
+    text: {
+        type: import("vue").PropType<string | null>;
+        default: null;
+    };
+    visible: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
     };
-}>>, {}, {}>, {
+}>>, {
+    class: string | string[] | null;
+    text: string | null;
+    visible: boolean;
+}, {}>, {
     default?(_: {}): any;
+    tooltip?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -18,7 +18,6 @@ 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 BaseCalendar from './BaseCalendar.vue';
 import BaseColor from './BaseColor.vue';
@@ -90,9 +89,10 @@ import BaseTextarea from './BaseTextarea.vue';
 import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
 import BaseTimeline from './BaseTimeline.vue';
 import BaseTimelineItem from './BaseTimelineItem.vue';
+import BaseTooltip from './BaseTooltip.vue';
 import BaseUniqueCode from './BaseUniqueCode.vue';
 import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseCalendar, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseCalendar, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseTooltip, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/package.json

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

package/src/components/BaseAutocomplete.vue

@@ -26,11 +26,10 @@
             ref="inputElement"
             :value="keywords"
             type="text"
-            :placeholder="
-              placeholder ? placeholder : t('sui.autocomplete_placeholder')
-            "
-            class="relative w-full pr-9 disabled:cursor-not-allowed disabled:text-slate-300"
+            :placeholder="placeholder ? placeholder : t('sui.autocomplete_placeholder')"
+            class="relative w-full placeholder:text-slate-400 disabled:cursor-not-allowed disabled:text-slate-300"
             :class="[
+              showDeleteButton ? 'pr-9' : '',
               select ? '-left-px rounded-r' : 'rounded',
               hasErrorInternal ? 'border-red-600' : 'border-slate-300',
               inputSizeClass,
@@ -63,7 +62,7 @@
       </div>
 
       <div
-        v-if="normalizedModelValue && !disabled && showModelValue"
+        v-if="showDeleteButton"
         class="absolute right-0 top-0 flex h-full items-center p-1"
       >
         <button
@@ -207,6 +206,10 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  focusOnMount: {
+    default: false,
+    type: Boolean,
+  },
   /** Show an 'empty option', should use with showModelValue = true for better UX  */
   showEmptyOption: {
     default: false,
@@ -249,6 +252,20 @@ const hasOptions = useHasOptions(
   computed(() => false)
 );
 
+let openOfFocusTimeout = 0;
+
+onMounted(() => {
+  openOfFocusTimeout = setTimeout(() => {
+    if (props.focusOnMount) {
+      open();
+    }
+  }, 10)
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(openOfFocusTimeout);
+});
+
 const drawer = ref<InstanceType<typeof BaseAutocompleteDrawer> | null>(null);
 
 let timerId = 0;
@@ -321,6 +338,7 @@ useClickOutside(autocomplete, () => {
 function open() {
   clearInterval(timerId);
   // Always focus as a safety
+
   focus();
   // Only emit open if value changes
   if (!opened.value) {
@@ -513,6 +531,10 @@ const iconWrapClass = computed(() => {
   return 'pl-2.5';
 });
 
+const showDeleteButton = computed(() => {
+  return normalizedModelValue.value && !props.disabled && props.showModelValue;
+});
+
 defineExpose({
   focus,
   blur,

package/src/components/BaseAutocompleteFetch.vue

@@ -17,6 +17,7 @@
     :dropdown-show="dropdownShow"
     :show-model-value="showModelValue"
     :visible-focus="visibleFocus"
+    :focus-on-mount="focusOnMount"
     :show-empty-option="showEmptyOption"
     :empty-option-label="emptyOptionLabel"
     :select="select"
@@ -144,6 +145,10 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  focusOnMount: {
+    default: false,
+    type: Boolean,
+  },
   showEmptyOption: {
     default: false,
     type: Boolean,

package/src/components/BaseAvatar.vue

@@ -1,49 +1,40 @@
 <template>
-  <component
-    :is="to ? 'RouterLink' : 'div'"
-    ref="buttonRef"
-    :to="to"
+  <BaseTooltip
+    :visible="tooltip"
+    :text="tooltipText"
     :class="classInternal"
   >
-    <img
-      :src="user.avatar_url"
-      :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
-      class="shrink-0 block overflow-hidden rounded-full object-cover object-center"
+    <component
+      :is="to ? 'RouterLink' : 'div'"
+      :to="to"
+      class="flex items-center"
     >
-    <div
-      v-if="showDetails"
-      class="max-w-[120px] grow leading-tight"
-      :class="[
-        textSizeClass,
-        detailsPosition == 'left' ? 'order-1 text-right' : 'order-2 text-left',
-      ]"
-      :style="{
-        marginLeft: detailsPosition == 'right' ? spacing : '0',
-        marginRight: detailsPosition == 'left' ? spacing : '0',
-      }"
-    >
-      <div class="truncate">
-        {{ user.full_name }}
-      </div>
-      <div class="truncate font-light opacity-50">
-        {{ user.email }}
-      </div>
-    </div>
-
-    <BaseTooltip
-      v-if="tooltip"
-      :target="buttonRef"
-    >
-      <div>
-        <p class="text-xs font-medium leading-tight">
+      <img
+        :src="user.avatar_url"
+        :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
+        class="shrink-0 block overflow-hidden rounded-full object-cover object-center"
+      >
+      <div
+        v-if="showDetails"
+        class="max-w-[120px] grow leading-tight"
+        :class="[
+          textSizeClass,
+          detailsPosition == 'left' ? 'order-1 text-right' : 'order-2 text-left',
+        ]"
+        :style="{
+          marginLeft: detailsPosition == 'right' ? spacing : '0',
+          marginRight: detailsPosition == 'left' ? spacing : '0',
+        }"
+      >
+        <div class="truncate">
           {{ user.full_name }}
-        </p>
-        <p class="text-xs text-slate-500 leading-tight">
+        </div>
+        <div class="truncate font-light opacity-50">
           {{ user.email }}
-        </p>
+        </div>
       </div>
-    </BaseTooltip>
-  </component>
+    </component>
+  </BaseTooltip>
 </template>
 
 <script lang="ts" setup>
@@ -97,7 +88,19 @@ const classInternal = computed(() => {
   );
 })
 
-const buttonRef = ref<HTMLElement | null>(null);
+const tooltipText = computed(() => {
+
+  if (!props.tooltip) {
+    return null;
+  }
+
+  return `<p class="font-medium leading-tight">
+  ${props.user.full_name}
+</p>
+<p class="text-slate-500 leading-tight">
+  ${props.user.email}
+</p>`;
+})
 
 const sizeClass = computed((): string => {
   const base = 'h-9 w-9';

package/src/components/BaseBelongsTo.vue

@@ -17,6 +17,7 @@
     :show-empty-option="showEmptyOption"
     :empty-option-label="emptyOptionLabel"
     :visible-focus="visibleFocus"
+    :focus-on-mount="focusOnMount"
     :select="select"
     @update:model-value="onUpdate"
   >
@@ -105,6 +106,10 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  focusOnMount: {
+    default: false,
+    type: Boolean,
+  },
   showEmptyOption: {
     default: false,
     type: Boolean,

package/src/components/BaseBelongsToFetch.vue

@@ -17,6 +17,7 @@
     :show-empty-option="showEmptyOption"
     :empty-option-label="emptyOptionLabel"
     :visible-focus="visibleFocus"
+    :focus-on-mount="focusOnMount"
     :select="select"
     @update:model-value="onUpdate"
   >
@@ -115,6 +116,10 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  focusOnMount: {
+    default: false,
+    type: Boolean,
+  },
   showEmptyOption: {
     default: false,
     type: Boolean,

package/src/components/BaseDatePicker.vue

@@ -232,10 +232,10 @@ onMounted(() => {
   init();
 });
 
-onBeforeUnmount(() => {
-  if (picker) {
-    picker.destroy();
-  }
+onUnmounted(() => {
+  // Cause weird animation problems when using with BaseDropdown
+  // We assume the calendar will self destroy when the component is unmounted
+  // picker?.destroy();
 });
 
 function init() {