sprintify-ui 0.0.107 → 0.0.109

package/src/components/BaseDropdown.vue

@@ -67,16 +67,18 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['close', 'open']);
+
 const buttonX = ref(0);
 const buttonY = ref(0);
 const buttonWidth = ref(0);
 const buttonHeight = ref(0);
 
+const dropdownX = ref(0);
+const dropdownY = ref(0);
 const dropdownWidth = ref(0);
 const dropdownHeight = ref(0);
 
-const emit = defineEmits(['close', 'open']);
-
 function setBoundingBoxes() {
   if (button.value) {
     const { y, x, height, width } = button.value.getBoundingClientRect();
@@ -87,7 +89,9 @@ function setBoundingBoxes() {
   }
 
   if (dropdown.value) {
-    const { height, width } = dropdown.value.getBoundingClientRect();
+    const { y, x, height, width } = dropdown.value.getBoundingClientRect();
+    dropdownX.value = x;
+    dropdownY.value = y;
     dropdownWidth.value = width;
     dropdownHeight.value = height;
   }
@@ -163,25 +167,50 @@ useClickOutside(
 );
 
 const placementInternal = computed(() => {
-  const tooTallForTop =
-    buttonY.value - dropdownHeight.value - props.padding < 0;
-  const tooTallForBottom =
-    window.innerHeight - buttonY.value - buttonHeight.value - props.padding <
-    dropdownHeight.value;
-
-  if (props.placement == 'top-start' && tooTallForTop) {
-    return 'bottom-start';
-  }
-  if (props.placement == 'top-end' && tooTallForTop) {
-    return 'bottom-end';
-  }
-  if (props.placement == 'bottom-start' && tooTallForBottom) {
-    return 'top-start';
+  // vertical
+  const spaceTop = buttonY.value - props.padding;
+  const spaceBottom =
+    window.innerHeight - buttonY.value - buttonHeight.value - props.padding;
+
+  const tooTallForTop = spaceTop < dropdownHeight.value;
+  const tooTallForBottom = spaceBottom < dropdownHeight.value;
+
+  let verticalPreference = props.placement.split('-')[0];
+
+  if (tooTallForTop && !tooTallForBottom) {
+    verticalPreference = 'bottom';
+  } else if (!tooTallForTop && tooTallForBottom) {
+    verticalPreference = 'top';
+  } else if (tooTallForTop && tooTallForBottom) {
+    if (spaceTop > spaceBottom) {
+      verticalPreference = 'top';
+    } else {
+      verticalPreference = 'bottom';
+    }
   }
-  if (props.placement == 'bottom-end' && tooTallForBottom) {
-    return 'top-end';
+
+  // horizontal
+  const spaceStart = buttonX.value + buttonWidth.value;
+  const spaceEnd = window.innerWidth - buttonX.value;
+
+  const tooLargeForStart = spaceStart < dropdownWidth.value;
+  const tooLargeForEnd = spaceEnd < dropdownWidth.value;
+
+  let horizontalPreference = props.placement.split('-')[1];
+
+  if (tooLargeForStart && !tooLargeForEnd) {
+    horizontalPreference = 'start';
+  } else if (!tooLargeForStart && tooLargeForEnd) {
+    horizontalPreference = 'end';
+  } else if (tooLargeForStart && tooLargeForEnd) {
+    if (spaceStart > spaceEnd) {
+      horizontalPreference = 'end';
+    } else {
+      horizontalPreference = 'start';
+    }
   }
-  return props.placement;
+
+  return `${verticalPreference}-${horizontalPreference}`;
 });
 
 const dropdownStyles = computed((): StyleValue => {

package/src/components/BaseDropdownAutocomplete.stories.js

@@ -57,6 +57,15 @@ Autocomplete.args = {
   multiple: false,
   labelKey: 'label',
   valueKey: 'value',
+  select: {
+    options: [
+      { label: 'Option 1', value: 'option-1' },
+      { label: 'Option 2', value: 'option-2' },
+      { label: 'Option 3', value: 'option-3' },
+    ],
+    labelKey: 'label',
+    valueKey: 'value',
+  },
 };
 
 export const AutocompleteFetch = (args) => ({

package/src/components/BaseDropdownAutocomplete.vue

@@ -24,6 +24,7 @@
           :value-key="valueKey"
           :inline="true"
           :required="required"
+          :select="select"
           dropdown-show="always"
           @update:model-value="onUpdate($event, close)"
         >
@@ -61,7 +62,7 @@
 <script lang="ts" setup>
 import { isArray } from 'lodash';
 import { PropType, Ref } from 'vue';
-import { Option } from '@/types';
+import { Option, SelectConfiguration } from '@/types';
 import BaseDropdown from './BaseDropdown.vue';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
@@ -117,6 +118,10 @@ const props = defineProps({
     default: undefined,
     type: Number,
   },
+  select: {
+    default: undefined,
+    type: [Object, undefined] as PropType<SelectConfiguration | undefined>,
+  },
 });
 
 const emit = defineEmits(['update:model-value', 'close']);

package/src/types/index.ts

@@ -197,3 +197,10 @@ export interface NotificationsConfig {
   footerLabel?: string;
   footerTo?: RouteLocationRaw;
 }
+
+export interface SelectConfiguration {
+  options: Option[];
+  valueKey: string;
+  labelKey: string;
+  onChange: (value: OptionValue) => void;
+}