sprintify-ui 0.0.32 → 0.0.33

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { NormalizedOption, Option, Selection } from '@/types/types';
+import { NormalizedOption, Option } from '@/types/types';
 declare const _default: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
@@ -7,7 +7,7 @@ declare const _default: {
         $props: Partial<{
             filter: (option: NormalizedOption) => boolean;
             required: boolean;
-            modelValue: Selection;
+            modelValue: Option | null | undefined;
             inputClass: string;
             placeholder: string;
             loading: boolean;
@@ -15,7 +15,7 @@ declare const _default: {
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 default: undefined;
-                type: PropType<Selection>;
+                type: PropType<Option | null | undefined>;
             };
             options: {
                 required: true;
@@ -76,7 +76,7 @@ declare const _default: {
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 default: undefined;
-                type: PropType<Selection>;
+                type: PropType<Option | null | undefined>;
             };
             options: {
                 required: true;
@@ -123,7 +123,7 @@ declare const _default: {
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "update:modelValue" | "typing" | "focus" | "scrollBottom")[], string, {
             filter: (option: NormalizedOption) => boolean;
             required: boolean;
-            modelValue: Selection;
+            modelValue: Option | null | undefined;
             inputClass: string;
             placeholder: string;
             loading: boolean;
@@ -151,7 +151,7 @@ declare const _default: {
     } & Readonly<import("vue").ExtractPropTypes<{
         modelValue: {
             default: undefined;
-            type: PropType<Selection>;
+            type: PropType<Option | null | undefined>;
         };
         options: {
             required: true;
@@ -202,7 +202,7 @@ declare const _default: {
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: undefined;
-        type: PropType<Selection>;
+        type: PropType<Option | null | undefined>;
     };
     options: {
         required: true;
@@ -249,7 +249,7 @@ declare const _default: {
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "update:modelValue" | "typing" | "focus" | "scrollBottom")[], "clear" | "update:modelValue" | "typing" | "focus" | "scrollBottom", {
     filter: (option: NormalizedOption) => boolean;
     required: boolean;
-    modelValue: Selection;
+    modelValue: Option | null | undefined;
     inputClass: string;
     placeholder: string;
     loading: boolean;
@@ -259,7 +259,7 @@ declare const _default: {
         empty: (_: {}) => any;
         option: (_: {
             option: Option;
-            selected: boolean | null;
+            selected: boolean;
             active: boolean;
         }) => any;
         footer: (_: {

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { Option, Selection } from '@/types/types';
+import { Option } from '@/types/types';
 import { RouteLocationRaw } from 'vue-router';
 declare const _default: {
     new (...args: any[]): {
@@ -7,7 +7,7 @@ declare const _default: {
         $data: {};
         $props: Partial<{
             required: boolean;
-            modelValue: Selection;
+            modelValue: Option | null | undefined;
             inputClass: string;
             placeholder: string;
             disabled: boolean;
@@ -16,7 +16,7 @@ declare const _default: {
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 default: undefined;
-                type: PropType<Selection>;
+                type: PropType<Option | null | undefined>;
             };
             url: {
                 required: true;
@@ -77,7 +77,7 @@ declare const _default: {
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 default: undefined;
-                type: PropType<Selection>;
+                type: PropType<Option | null | undefined>;
             };
             url: {
                 required: true;
@@ -123,7 +123,7 @@ declare const _default: {
             onScrollBottom?: ((...args: any[]) => any) | undefined;
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "update:modelValue" | "typing" | "focus" | "scrollBottom")[], string, {
             required: boolean;
-            modelValue: Selection;
+            modelValue: Option | null | undefined;
             inputClass: string;
             placeholder: string;
             disabled: boolean;
@@ -152,7 +152,7 @@ declare const _default: {
     } & Readonly<import("vue").ExtractPropTypes<{
         modelValue: {
             default: undefined;
-            type: PropType<Selection>;
+            type: PropType<Option | null | undefined>;
         };
         url: {
             required: true;
@@ -203,7 +203,7 @@ declare const _default: {
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: undefined;
-        type: PropType<Selection>;
+        type: PropType<Option | null | undefined>;
     };
     url: {
         required: true;
@@ -249,7 +249,7 @@ declare const _default: {
     onScrollBottom?: ((...args: any[]) => any) | undefined;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "update:modelValue" | "typing" | "focus" | "scrollBottom")[], "clear" | "update:modelValue" | "typing" | "focus" | "scrollBottom", {
     required: boolean;
-    modelValue: Selection;
+    modelValue: Option | null | undefined;
     inputClass: string;
     placeholder: string;
     disabled: boolean;
@@ -259,7 +259,7 @@ declare const _default: {
     $slots: {
         option: (_: {
             option: Option;
-            selected: boolean | null;
+            selected: boolean;
             active: boolean;
         }) => any;
         footer: (_: {

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

@@ -1,6 +1,6 @@
-import { Selection } from '@/types/types';
 import { PropType } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
+import { Option } from '@/types/types';
 declare const _default: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
@@ -14,7 +14,7 @@ declare const _default: {
             createNewUrl: RouteLocationRaw;
             showRouteUrl: ((id: string | number) => string) | undefined;
             foreignKey: string;
-            currentModel: Selection;
+            currentModel: Option | null;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 default: undefined;
@@ -54,7 +54,7 @@ declare const _default: {
             };
             currentModel: {
                 default: null;
-                type: PropType<Selection>;
+                type: PropType<Option | null>;
             };
             createNewUrl: {
                 default: string;
@@ -115,7 +115,7 @@ declare const _default: {
             };
             currentModel: {
                 default: null;
-                type: PropType<Selection>;
+                type: PropType<Option | null>;
             };
             createNewUrl: {
                 default: string;
@@ -132,7 +132,7 @@ declare const _default: {
             createNewUrl: RouteLocationRaw;
             showRouteUrl: ((id: string | number) => string) | undefined;
             foreignKey: string;
-            currentModel: Selection;
+            currentModel: Option | null;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -192,7 +192,7 @@ declare const _default: {
         };
         currentModel: {
             default: null;
-            type: PropType<Selection>;
+            type: PropType<Option | null>;
         };
         createNewUrl: {
             default: string;
@@ -243,7 +243,7 @@ declare const _default: {
     };
     currentModel: {
         default: null;
-        type: PropType<Selection>;
+        type: PropType<Option | null>;
     };
     createNewUrl: {
         default: string;
@@ -260,12 +260,12 @@ declare const _default: {
     createNewUrl: RouteLocationRaw;
     showRouteUrl: ((id: string | number) => string) | undefined;
     foreignKey: string;
-    currentModel: Selection;
+    currentModel: Option | null;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         option: (_: {
-            option: import("@/types/types").Option;
-            selected: boolean | null;
+            option: Option;
+            selected: boolean;
             active: boolean;
         }) => any;
         empty: (_: {

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

@@ -8,12 +8,12 @@ declare const _default: {
             required: boolean;
             modelValue: Option | Option[] | undefined;
             disabled: boolean;
-            multiple: boolean;
-            buttonClass: string;
             buttonType: "button" | "submit";
+            buttonClass: string;
             buttonActiveClass: string;
             buttonInactiveClass: string;
             spacing: string;
+            multiple: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 default: undefined;
@@ -65,7 +65,7 @@ declare const _default: {
             };
         }>> & {
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "modelValue" | "disabled" | "multiple" | "buttonClass" | "buttonType" | "buttonActiveClass" | "buttonInactiveClass" | "spacing">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "modelValue" | "disabled" | "buttonType" | "buttonClass" | "buttonActiveClass" | "buttonInactiveClass" | "spacing" | "multiple">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -134,12 +134,12 @@ declare const _default: {
             required: boolean;
             modelValue: Option | Option[] | undefined;
             disabled: boolean;
-            multiple: boolean;
-            buttonClass: string;
             buttonType: "button" | "submit";
+            buttonClass: string;
             buttonActiveClass: string;
             buttonInactiveClass: string;
             spacing: string;
+            multiple: boolean;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -270,16 +270,16 @@ declare const _default: {
     required: boolean;
     modelValue: Option | Option[] | undefined;
     disabled: boolean;
-    multiple: boolean;
-    buttonClass: string;
     buttonType: "button" | "submit";
+    buttonClass: string;
     buttonActiveClass: string;
     buttonInactiveClass: string;
     spacing: string;
+    multiple: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         option: (_: {
-            isActive: (option: NormalizedOption) => boolean;
+            selected: boolean;
             onSelect: (option: NormalizedOption) => void;
             option: NormalizedOption;
         }) => any;

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

@@ -38,7 +38,7 @@ declare const _default: import("vue").DefineComponent<{
     onSelect?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
-    accept: string;
     buttonClass: string;
+    accept: string;
 }>;
 export default _default;

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

@@ -7,8 +7,8 @@ declare const _default: {
             loading: boolean;
             disabled: boolean;
             url: string;
-            accept: string;
             buttonClass: string;
+            accept: string;
             beforeUpload: () => boolean;
             maxSize: number;
             acceptedExtensions: string[];
@@ -50,7 +50,7 @@ declare const _default: {
             "onUpload:success"?: ((...args: any[]) => any) | undefined;
             "onUpload:fail"?: ((...args: any[]) => any) | undefined;
             "onUpload:end"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "loading" | "disabled" | "url" | "accept" | "buttonClass" | "beforeUpload" | "maxSize" | "acceptedExtensions">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "loading" | "disabled" | "url" | "buttonClass" | "accept" | "beforeUpload" | "maxSize" | "acceptedExtensions">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -106,8 +106,8 @@ declare const _default: {
             loading: boolean;
             disabled: boolean;
             url: string;
-            accept: string;
             buttonClass: string;
+            accept: string;
             beforeUpload: () => boolean;
             maxSize: number;
             acceptedExtensions: string[];
@@ -215,8 +215,8 @@ declare const _default: {
     loading: boolean;
     disabled: boolean;
     url: string;
-    accept: string;
     buttonClass: string;
+    accept: string;
     beforeUpload: () => boolean;
     maxSize: number;
     acceptedExtensions: string[];

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

@@ -261,7 +261,6 @@ declare const _default: {
     $slots: {
         option: (_: {
             option: Option;
-            selected: boolean;
             active: boolean;
         }) => any;
         empty: (_: {

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

@@ -271,7 +271,6 @@ declare const _default: {
         empty: (_: {}) => any;
         option: (_: {
             option: Option;
-            selected: boolean;
             active: boolean;
         }) => any;
         footer: (_: {

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

@@ -251,7 +251,6 @@ declare const _default: {
     $slots: {
         option: (_: {
             option: Option;
-            selected: boolean;
             active: boolean;
         }) => any;
         footer: (_: {

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

@@ -11,6 +11,7 @@ import BaseBelongsTo from './BaseBelongsTo.vue';
 import BaseBoolean from './BaseBoolean.vue';
 import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
 import BaseButton from './BaseButton.vue';
+import BaseButtonGroup from './BaseButtonGroup.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
 import BaseCharacterCounter from './BaseCharacterCounter.vue';
@@ -64,4 +65,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/dist/types/src/composables/hasOptions.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+import { NormalizedOption, Option } from '@/types/types';
+export declare function useHasOptions(modelValue: Ref<Option[] | Option | null | undefined>, options: Ref<Option[]>, labelKey: Ref<string>, valueKey: Ref<string>, multiple?: Ref<boolean>): {
+    normalizedOptions: import("vue").ComputedRef<NormalizedOption[]>;
+    normalizedModelValue: import("vue").ComputedRef<NormalizedOption | NormalizedOption[] | null>;
+    isSelected: (option: NormalizedOption) => boolean;
+};

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

@@ -14,13 +14,11 @@ export interface DataTableQuery extends Record<string, any> {
 }
 export type OptionValue = string | number;
 export type Option = Record<string, any>;
-export type Selection = Option | null | undefined;
 export type NormalizedOption = {
     option: Option;
     value: OptionValue;
     label: string;
 };
-export type NormalizedSelection = NormalizedOption | null | undefined;
 export type MediaLibraryPayload = {
     to_remove: string[];
     to_add: UploadedFile[];

package/package.json

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

package/src/components/BaseAutocomplete.vue

@@ -78,10 +78,7 @@
                 <slot
                   name="option"
                   :option="option.option"
-                  :selected="
-                    normalizedModelValue &&
-                    normalizedModelValue.value == option.value
-                  "
+                  :selected="isSelected(option)"
                   :active="optionActive && optionActive.value == option.value"
                 >
                   <div
@@ -125,20 +122,16 @@
 
 <script lang="ts" setup>
 import { get } from 'lodash';
-import { PropType, Ref } from 'vue';
-import {
-  NormalizedOption,
-  Option,
-  Selection,
-  NormalizedSelection,
-} from '@/types/types';
+import { PropType, Ref, ComputedRef } from 'vue';
+import { NormalizedOption, Option } from '@/types/types';
 import { useInfiniteScroll, useMutationObserver } from '@vueuse/core';
 import BaseSkeleton from './BaseSkeleton.vue';
+import { useHasOptions } from '@/composables/hasOptions';
 
 const props = defineProps({
   modelValue: {
     default: undefined,
-    type: [Object, null] as PropType<Selection | undefined>,
+    type: [Object, null] as PropType<Option | null | undefined>,
   },
   options: {
     required: true,
@@ -193,6 +186,19 @@ const selectionIndex = ref(0);
 const inputElement = ref(null) as Ref<HTMLInputElement | null>;
 const dropdown = ref(null) as Ref<HTMLElement | null>;
 
+const hasOptions = useHasOptions(
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  computed(() => props.labelKey),
+  computed(() => props.valueKey),
+  computed(() => false)
+);
+
+const isSelected = hasOptions.isSelected;
+const normalizedOptions = hasOptions.normalizedOptions;
+const normalizedModelValue =
+  hasOptions.normalizedModelValue as ComputedRef<NormalizedOption | null>;
+
 onMounted(() => {
   useInfiniteScroll(
     dropdown.value,
@@ -211,17 +217,7 @@ const optionActive = computed(() => {
   );
 });
 
-const normalizedModelValue = computed(() => {
-  if (!props.modelValue) {
-    return null;
-  }
-  return {
-    label: props.modelValue[props.labelKey] as string,
-    value: props.modelValue[props.valueKey] as string | number,
-    option: props.modelValue,
-  };
-});
-
+// Update the keywords when the model value changes
 watch(
   () => normalizedModelValue.value,
   () => {
@@ -234,16 +230,6 @@ watch(
   { immediate: true }
 );
 
-const normalizedOptions = computed(() => {
-  return props.options.map((option) => {
-    return {
-      label: option[props.labelKey] as string,
-      value: option[props.valueKey] as string | number,
-      option: option,
-    } as NormalizedOption;
-  });
-});
-
 const filteredNormalizedOptions = computed((): NormalizedOption[] => {
   return normalizedOptions.value.filter((option) => {
     if (props.filter !== undefined) {
@@ -276,6 +262,8 @@ const onTextFocus = () => {
   emit('focus');
 };
 
+// If keywords is changed but no new selection was made,
+// update keywords to original value
 const onTextBlur = () => {
   timerId.value = setTimeout(() => {
     showDropdown.value = false;
@@ -305,7 +293,7 @@ const onTextKeydown = (event: KeyboardEvent) => {
   }
 
   if (key === 'ArrowDown') {
-    if (selectionIndex.value < props.options.length - 1) {
+    if (selectionIndex.value < filteredNormalizedOptions.value.length - 1) {
       selectionIndex.value++;
     } else {
       selectionIndex.value = 0;
@@ -317,7 +305,10 @@ const onTextKeydown = (event: KeyboardEvent) => {
     if (selectionIndex.value > 0) {
       selectionIndex.value--;
     } else {
-      selectionIndex.value = Math.max(0, props.options.length - 1);
+      selectionIndex.value = Math.max(
+        0,
+        filteredNormalizedOptions.value.length - 1
+      );
     }
     return;
   }
@@ -333,9 +324,7 @@ const onTextKeydown = (event: KeyboardEvent) => {
 
 const optionClass = (option: NormalizedOption) => {
   const active = optionActive.value && optionActive.value.value == option.value;
-  const selected =
-    normalizedModelValue.value &&
-    normalizedModelValue.value.value == option.value;
+  const selected = isSelected(option);
 
   if (selected) {
     if (active) {
@@ -359,12 +348,12 @@ const clear = () => {
   inputElement.value?.focus();
 };
 
-const onSelect = (normalizedModelValue: NormalizedSelection) => {
+const onSelect = (normalizedModelValue: Option | null | undefined) => {
   update(normalizedModelValue);
   inputElement.value?.blur();
 };
 
-const update = (normalizedSelection: NormalizedSelection) => {
+const update = (normalizedSelection: Option | null | undefined) => {
   const selection = normalizedSelection ? normalizedSelection.option : null;
   if (normalizedSelection) {
     setKeywordsWithoutEvent(normalizedSelection.label);

package/src/components/BaseAutocompleteFetch.vue

@@ -61,14 +61,14 @@
 import { config } from '../';
 import { debounce } from 'lodash';
 import { PropType, Ref } from 'vue';
-import { Option, Selection } from '@/types/types';
+import { Option } from '@/types/types';
 import { RouteLocationRaw } from 'vue-router';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 
 const props = defineProps({
   modelValue: {
     default: undefined,
-    type: [Object, null] as PropType<Selection | undefined>,
+    type: [Object, null] as PropType<Option | null | undefined>,
   },
   url: {
     required: true,

package/src/components/BaseBelongsTo.vue

@@ -24,12 +24,12 @@
 </template>
 
 <script lang="ts" setup>
-import { Selection } from '@/types/types';
 import { PropType } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 import { AxiosResponse } from 'axios';
 import { config } from '@/index';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
+import { Option } from '@/types/types';
 
 const props = defineProps({
   modelValue: {
@@ -72,7 +72,7 @@ const props = defineProps({
   },
   currentModel: {
     default: null,
-    type: [Object, null] as PropType<Selection>,
+    type: [Object, null] as PropType<Option | null>,
   },
   createNewUrl: {
     default: '',
@@ -120,7 +120,7 @@ watch(
   { immediate: true }
 );
 
-function onUpdate(newModel: Selection) {
+function onUpdate(newModel: Option | null) {
   if (!newModel) {
     model.value = null;
     emit('update:modelValue', null);

package/src/components/BaseButtonGroup.stories.js

@@ -71,10 +71,10 @@ export const SlotOption = (args) => ({
     v-model="value"
     :options="options"
   >
-    <template #option="{ option, isActive, onSelect }">
+    <template #option="{ option, selected, onSelect }">
       <button
         class="btn btn-xs flex items-center space-x-1 font-semibold"
-        :class="[isActive(option) ? 'btn-black' : '']"
+        :class="[selected ? 'btn-black' : '']"
         type="button"
         @click="onSelect(option)"
       >