sprintify-ui 0.0.108 → 0.0.110

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/dist/types/src/components/BaseField.vue.d.ts

@@ -42,9 +42,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<string | string[] | Record<string, boolean>>;
     };
 }>>, {
+    label: string;
     required: boolean;
     name: string;
-    label: string;
     errorType: "default" | "alert";
     labelClass: string | string[] | Record<string, boolean>;
 }>, {

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

@@ -81,9 +81,9 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    label: string;
     required: boolean;
     name: string;
-    label: string;
     defaultValue: string | number | boolean;
     modelValue: {
         [locale: string]: string | number | boolean;

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

@@ -48,8 +48,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | null>;
     };
 }>>, {
-    caption: string | null;
     label: string | null;
+    caption: string | null;
     secondaryValue: string | null;
     trend: "up" | "down" | null;
 }>;

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

@@ -152,8 +152,8 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    meta: Record<string, any> | unknown[];
     label: string;
+    meta: Record<string, any> | unknown[];
     toggle: boolean;
     width: number;
     field: string;

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

@@ -163,9 +163,12 @@ export interface NotificationsConfig {
     footerLabel?: string;
     footerTo?: RouteLocationRaw;
 }
+export interface SelectConfigurationOption {
+    value: OptionValue;
+    label: string;
+    [key: string]: any;
+}
 export interface SelectConfiguration {
-    options: Option[];
-    valueKey: string;
-    labelKey: string;
-    onChange: (value: OptionValue) => void;
+    options: SelectConfigurationOption[];
+    onChange: (option: SelectConfigurationOption | null) => void;
 }

package/package.json

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

package/src/components/BaseAutocomplete.stories.js

@@ -196,7 +196,7 @@ export const WithSelect = (args) => {
         labelKey: 'label',
         valueKey: 'value',
         onChange: (option) => {
-          selected.value = option;
+          selected.value = option.value;
         },
       };
 

package/src/components/BaseAutocomplete.vue

@@ -15,10 +15,10 @@
         >
           <option
             v-for="option in select.options"
-            :key="option[select.valueKey]"
-            :value="option[select.valueKey]"
+            :key="option.value + ''"
+            :value="option.value"
           >
-            {{ option[select.labelKey] }}
+            {{ option.label }}
           </option>
         </select>
         <div class="relative grow">
@@ -120,7 +120,7 @@
 <script lang="ts" setup>
 import { get } from 'lodash';
 import { PropType, Ref, ComputedRef } from 'vue';
-import { NormalizedOption, Option } from '@/types';
+import { NormalizedOption, Option, OptionValue } from '@/types';
 import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
 import { BaseIcon } from './index';
@@ -420,27 +420,34 @@ function highlight() {
   inputElement.value?.select();
 }
 
-const selection = ref(null) as Ref<string | null>;
+const selection = ref(null) as Ref<OptionValue>;
 
 watch(
   () => props.select,
   (select) => {
     if (select && select.options.length > 0) {
-      selection.value = select.options[0][select.valueKey];
+      selection.value = select.options[0].value;
     }
   },
   { immediate: true }
 );
 
 function onSelectChange(event: Event) {
-  focus();
-  open();
-  highlight();
   const value = get(event, 'target.value', null);
+  const option = props.select?.options.find((option) => option.value == value);
+
   if (props.select && props.select.onChange) {
-    props.select.onChange(value);
+    props.select.onChange(option ?? null);
   }
+
   emit('select', value);
+
+  // Let the emitted select event propagate before opening the dropdown
+  nextTick(() => {
+    focus();
+    open();
+    highlight();
+  });
 }
 
 const slotProps = {

package/src/components/BaseAutocompleteFetch.stories.js

@@ -180,7 +180,7 @@ export const WithSelect = (args) => {
         labelKey: 'label',
         valueKey: 'value',
         onChange: (option) => {
-          selected.value = option;
+          selected.value = option.value;
         },
       };
 

package/src/components/BaseBelongsTo.stories.js

@@ -179,7 +179,7 @@ export const WithSelect = (args) => {
         labelKey: 'label',
         valueKey: 'value',
         onChange: (option) => {
-          selected.value = option;
+          selected.value = option.value;
         },
       };
 

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

package/src/types/index.ts

@@ -198,9 +198,13 @@ export interface NotificationsConfig {
   footerTo?: RouteLocationRaw;
 }
 
+export interface SelectConfigurationOption {
+  value: OptionValue;
+  label: string;
+  [key: string]: any;
+}
+
 export interface SelectConfiguration {
-  options: Option[];
-  valueKey: string;
-  labelKey: string;
-  onChange: (value: OptionValue) => void;
+  options: SelectConfigurationOption[];
+  onChange: (option: SelectConfigurationOption | null) => void;
 }