sprintify-ui 0.0.108 → 0.0.109

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { Option } from '@/types';
+import { Option, SelectConfiguration } from '@/types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: {
         type: PropType<Option | Option[] | null | undefined>;
@@ -45,6 +45,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: NumberConstructor;
     };
+    select: {
+        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<{
     modelValue: {
         type: PropType<Option | Option[] | null | undefined>;
@@ -90,11 +94,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: NumberConstructor;
     };
+    select: {
+        default: undefined;
+        type: PropType<SelectConfiguration | undefined>;
+    };
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
+    select: SelectConfiguration | undefined;
     options: Option[] | undefined;
     size: "base" | "xs" | "sm";
     multiple: boolean;

package/package.json

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

package/src/components/BaseDropdown.stories.js

@@ -9,7 +9,7 @@ const items = [];
 
 for (let i = 0; i < 100; i++) {
   items.push({
-    label: `Item ${i + 1}`,
+    label: `Item number #${i + 1}`,
   });
 }
 

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']);