sprintify-ui 0.0.32 → 0.0.33

package/src/components/BaseButtonGroup.vue

@@ -7,7 +7,7 @@
     >
       <slot
         name="option"
-        :is-active="isActive"
+        :selected="isSelected(option)"
         :on-select="onSelect"
         :option="option"
       >
@@ -16,7 +16,7 @@
           :disabled="disabled"
           :class="[
             buttonClass,
-            isActive(option) ? buttonActiveClass : buttonInactiveClass,
+            isSelected(option) ? buttonActiveClass : buttonInactiveClass,
           ]"
           @click="onSelect(option)"
         >
@@ -31,6 +31,7 @@
 import { PropType } from 'vue';
 import { NormalizedOption, Option } from '@/types/types';
 import { cloneDeep, isArray, isObject } from 'lodash';
+import { useHasOptions } from '@/composables/hasOptions';
 
 const props = defineProps({
   modelValue: {
@@ -87,57 +88,14 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
-const normalizedModelValue = computed(
-  (): NormalizedOption[] | NormalizedOption | null => {
-    if (props.multiple) {
-      if (!isArray(props.modelValue)) {
-        return [];
-      }
-      return props.modelValue.map((option) => {
-        return {
-          label: option[props.labelKey] as string,
-          value: option[props.valueKey] as string | number,
-          option: option,
-        } as NormalizedOption;
-      });
-    } else {
-      if (!isObject(props.modelValue)) {
-        return null;
-      }
-
-      return {
-        label: props.modelValue[props.labelKey as never] as string,
-        value: props.modelValue[props.valueKey as never] as string | number,
-        option: props.modelValue,
-      } as NormalizedOption;
-    }
-  }
+const { normalizedOptions, normalizedModelValue, isSelected } = useHasOptions(
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  computed(() => props.labelKey),
+  computed(() => props.valueKey),
+  computed(() => props.multiple)
 );
 
-const normalizedOptions = computed((): NormalizedOption[] => {
-  return props.options.map((option) => {
-    return {
-      label: option[props.labelKey] as string,
-      value: option[props.valueKey] as string | number,
-      option: option,
-    } as NormalizedOption;
-  });
-});
-
-function isActive(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;
-}
-
 function onSelect(option: NormalizedOption) {
   if (props.multiple) {
     let newModalValue = [] as NormalizedOption[];

package/src/components/BaseTagAutocomplete.stories.js

@@ -64,16 +64,14 @@ export const SlotOption = (args) => ({
     v-model="value"
     :options="options"
   >
-    <template #option="{ option, active, selected }">
+    <template #option="{ option, active }">
       <div
         class="rounded px-2 font-semibold py-1 text-sm"
         :class="{
-          'hover:bg-slate-100': !active && !selected,
-          'bg-slate-200 hover:bg-slate-300': active && !selected,
-          'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
-          'bg-blue-600 text-white hover:bg-blue-700': active && selected,
+          'hover:bg-slate-100': !active,
+          'bg-slate-200 hover:bg-slate-300': active,
         }"
-        :style="{ color: selected ? '' : option.value }"
+        :style="{ color: option.value }"
       >
         {{ option.label }}
       </div>

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';
@@ -80,6 +81,7 @@ export {
   BaseBoolean,
   BaseBreadcrumbs,
   BaseButton,
+  BaseButtonGroup,
   BaseCard,
   BaseCardRow,
   BaseCharacterCounter,

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[];