sprintify-ui 0.0.32 → 0.0.34

package/src/components/BaseTagAutocomplete.vue

@@ -82,7 +82,6 @@
                 <slot
                   name="option"
                   :option="option.option"
-                  :selected="optionValues.includes(option.value)"
                   :active="optionActive && optionActive.value == option.value"
                 >
                   <div
@@ -127,10 +126,11 @@
 <script lang="ts" setup>
 import { cloneDeep, get } from 'lodash';
 import { PropType, Ref, ComputedRef } from 'vue';
-import { NormalizedOption, Option, OptionValue } from '@/types/types';
+import { NormalizedOption, Option } from '@/types/types';
 import { useInfiniteScroll, useMutationObserver } from '@vueuse/core';
 import { useNotificationsStore } from '@/stores/notifications';
 import BaseSkeleton from './BaseSkeleton.vue';
+import { useHasOptions } from '@/composables/hasOptions';
 
 const props = defineProps({
   modelValue: {
@@ -194,9 +194,23 @@ const keywords = ref('');
 const showDropdown = ref(false);
 const inputElement = ref(null) as Ref<HTMLInputElement | null>;
 const dropdown = ref(null) as Ref<HTMLElement | null>;
-const selectionIndex = ref(0);
+const activeIndex = ref(0);
 const selectionToDelete = ref(null) as Ref<NormalizedOption | null>;
 
+const hasOptions = useHasOptions(
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  computed(() => props.labelKey),
+  computed(() => props.valueKey),
+  computed(() => true)
+);
+
+const isSelected = hasOptions.isSelected;
+const normalizedOptions = hasOptions.normalizedOptions;
+const normalizedModelValue = hasOptions.normalizedModelValue as ComputedRef<
+  NormalizedOption[]
+>;
+
 onMounted(() => {
   useInfiniteScroll(
     dropdown.value,
@@ -210,34 +224,11 @@ onMounted(() => {
 const optionActive = computed(() => {
   return (
     filteredNormalizedOptions.value[
-      Math.min(selectionIndex.value, filteredNormalizedOptions.value.length - 1)
+      Math.min(activeIndex.value, filteredNormalizedOptions.value.length - 1)
     ] ?? null
   );
 });
 
-const normalizedModelValue = computed(() => {
-  if (!props.modelValue) {
-    return [];
-  }
-  return props.modelValue.map((o) => {
-    return {
-      label: o[props.labelKey] as string,
-      value: o[props.valueKey] as string | number,
-      option: o,
-    };
-  });
-}) as ComputedRef<NormalizedOption[]>;
-
-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) => {
@@ -250,20 +241,10 @@ const filteredNormalizedOptions = computed((): NormalizedOption[] => {
       return option.label.toLowerCase().includes(keywords.value.toLowerCase());
     })
     .filter((option) => {
-      return !hasSelectedOption(option.value);
+      return !isSelected(option);
     });
 });
 
-const optionValues = computed(() => {
-  return normalizedModelValue.value.map((o) => {
-    return o.value;
-  });
-});
-
-const hasSelectedOption = (value: OptionValue): boolean => {
-  return optionValues.value.includes(value);
-};
-
 function preventUnfocus(elements: HTMLElement[]) {
   elements.forEach((e) => {
     e.removeEventListener('mousedown', dontLooseFocus);
@@ -294,7 +275,7 @@ const onTextBlur = () => {
 };
 
 const onTextInput = (event: Event) => {
-  selectionIndex.value = 0;
+  activeIndex.value = 0;
   selectionToDelete.value = null;
   setKeywords(get(event, 'target.value', '') + '');
   dropdown.value?.scrollTo({
@@ -315,19 +296,22 @@ const onTextKeydown = (event: KeyboardEvent) => {
   }
 
   if (key === 'ArrowDown') {
-    if (selectionIndex.value < props.options.length - 1) {
-      selectionIndex.value++;
+    if (activeIndex.value < filteredNormalizedOptions.value.length - 1) {
+      activeIndex.value++;
     } else {
-      selectionIndex.value = 0;
+      activeIndex.value = 0;
     }
     return;
   }
 
   if (key === 'ArrowUp') {
-    if (selectionIndex.value > 0) {
-      selectionIndex.value--;
+    if (activeIndex.value > 0) {
+      activeIndex.value--;
     } else {
-      selectionIndex.value = Math.max(0, props.options.length - 1);
+      activeIndex.value = Math.max(
+        0,
+        filteredNormalizedOptions.value.length - 1
+      );
     }
     return;
   }
@@ -343,9 +327,7 @@ const onTextKeydown = (event: KeyboardEvent) => {
 
 const optionClass = (option: NormalizedOption) => {
   const active = optionActive.value && optionActive.value.value == option.value;
-  const selected =
-    normalizedModelValue.value &&
-    normalizedModelValue.value.map((o) => o.value).includes(option.value);
+  const selected = isSelected(option);
 
   if (selected) {
     if (active) {
@@ -389,7 +371,7 @@ const addOption = (option: NormalizedOption) => {
     return;
   }
 
-  if (hasSelectedOption(option.value)) {
+  if (isSelected(option)) {
     return;
   }
 
@@ -440,19 +422,19 @@ const beforeAddOption = () => {
 };
 
 const afterUpdate = () => {
-  validateSelectionIndex();
+  validateActiveIndex();
 };
 
 const clearInput = () => {
   setKeywords('');
 };
 
-const validateSelectionIndex = () => {
+const validateActiveIndex = () => {
   // Wait for filteredOptions to update
   nextTick(() => {
-    selectionIndex.value = Math.max(
+    activeIndex.value = Math.max(
       0,
-      Math.min(selectionIndex.value, normalizedOptions.value.length - 1)
+      Math.min(activeIndex.value, filteredNormalizedOptions.value.length - 1)
     );
   });
 };

package/src/components/index.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';
@@ -45,6 +46,7 @@ import BasePagination from './BasePagination.vue';
 import BasePanel from './BasePanel.vue';
 import BasePassword from './BasePassword.vue';
 import BaseProgressCircle from './BaseProgressCircle.vue';
+import BaseRadioGroup from './BaseRadioGroup.vue';
 import BaseReadMore from './BaseReadMore.vue';
 import BaseSelect from './BaseSelect.vue';
 import BaseSideNavigation from './BaseSideNavigation.vue';
@@ -80,6 +82,7 @@ export {
   BaseBoolean,
   BaseBreadcrumbs,
   BaseButton,
+  BaseButtonGroup,
   BaseCard,
   BaseCardRow,
   BaseCharacterCounter,
@@ -114,6 +117,7 @@ export {
   BasePanel,
   BasePassword,
   BaseProgressCircle,
+  BaseRadioGroup,
   BaseReadMore,
   BaseSelect,
   BaseSideNavigation,

package/src/composables/hasOptions.ts

@@ -0,0 +1,68 @@
+import { Ref } from 'vue';
+import { NormalizedOption, Option } from '@/types/types';
+import { isArray, isObject } from 'lodash';
+
+export function useHasOptions(
+  modelValue: Ref<Option[] | Option | null | undefined>,
+  options: Ref<Option[]>,
+  labelKey: Ref<string>,
+  valueKey: Ref<string>,
+  multiple: Ref<boolean> = ref(false)
+) {
+  const normalizedModelValue = computed(
+    (): NormalizedOption[] | NormalizedOption | null => {
+      if (multiple.value) {
+        if (!isArray(modelValue.value)) {
+          return [];
+        }
+        return modelValue.value.map((option) => {
+          return {
+            label: option[labelKey.value] as string,
+            value: option[valueKey.value] as string | number,
+            option: option,
+          } as NormalizedOption;
+        });
+      } else {
+        if (!isObject(modelValue.value)) {
+          return null;
+        }
+
+        return {
+          label: modelValue.value[labelKey.value as never] as string,
+          value: modelValue.value[valueKey.value as never] as string | number,
+          option: modelValue.value,
+        } as NormalizedOption;
+      }
+    }
+  );
+
+  const normalizedOptions = computed((): NormalizedOption[] => {
+    return options.value.map((option) => {
+      return {
+        label: option[labelKey.value] as string,
+        value: option[valueKey.value] as string | number,
+        option: option,
+      } as NormalizedOption;
+    });
+  });
+
+  function isSelected(option: NormalizedOption): boolean {
+    if (isArray(normalizedModelValue.value)) {
+      return normalizedModelValue.value.some((modelValue) => {
+        return modelValue.value === option.value;
+      });
+    }
+
+    if (isObject(normalizedModelValue.value)) {
+      return normalizedModelValue.value.value == option.value;
+    }
+
+    return false;
+  }
+
+  return {
+    normalizedOptions,
+    normalizedModelValue,
+    isSelected,
+  };
+}

package/src/types/types.ts

@@ -21,16 +21,12 @@ 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[];