design-system-next 2.9.7 → 2.9.10

package/src/components/avatar/use-avatar.ts

@@ -13,13 +13,14 @@ interface AvatarClasses {
 }
 
 export const useAvatar = (props: AvatarPropTypes) => {
-  const { size, color, variant, initial } = toRefs(props);
+  const { size, color, variant, initial, loading } = toRefs(props);
 
   const avatarClasses: ComputedRef<AvatarClasses> = computed(() => {
     const baseClasses = classNames('spr-relative spr-inline-block spr-rounded-full', {
       'spr-background-color-surface': color.value === 'primary',
       'spr-background-color': color.value === 'secondary',
       'spr-background-color spr-border-color-success-base spr-border spr-border-solid': color.value === 'tertiary',
+      'spr-skeletal-loader spr-h-full spr-w-full': loading.value,
     });
 
     const imageContainerClasses = classNames(

package/src/components/calendar/calendar.ts

@@ -71,6 +71,15 @@ export const calendarPropTypes = {
     type: Boolean,
     default: false,
   },
+
+  infiniteLoading: {
+    type: Boolean,
+    default: false,
+  },
+  loadingTextCompleted: {
+    type: String,
+    default: '',
+  },
 };
 
 export const calendarEmitTypes = {};

package/src/components/calendar/calendar.vue

@@ -1,5 +1,5 @@
 <template>
-  <SprCard :has-content-padding="false" class="spr-flex spr-h-full spr-flex-col spr-overflow-hidden">
+  <SprCard flexbox :has-content-padding="false" class="spr-flex spr-h-full spr-flex-col spr-overflow-hidden">
     <template #content>
       <div :class="getCalendarClasses.contentWrapper">
         <div :class="[getCalendarClasses.headerWrapper]">
@@ -20,17 +20,19 @@
         <!-- Filters -->
         <slot name="filter" />
 
-        <div ref="tableBodyRef" class="spr-table-wrapper spr-h-[calc(100vh-12rem)] spr-w-full spr-overflow-auto">
-          <div class="spr-pb-size-spacing-lg">
-            <table
-              id="table-calendar"
-              aria-describedby="calendar"
-              :class="[getCalendarClasses.calendarTable, 'spr-relative']"
-            >
+        <div class="spr-table-wrapper spr-relative spr-flex spr-h-full spr-flex-col spr-overflow-hidden">
+          <div class="spr-h-full">
+            <table id="table-calendar" aria-describedby="calendar" :class="getCalendarClasses.calendarTable">
               <!-- Calendar Header -->
-              <thead class="spr-bg-white spr-sticky spr-top-0 spr-z-20">
+              <thead>
                 <tr>
-                  <th :class="[getCalendarClasses.tableHeaderEmployeeName, 'spr-sticky spr-left-0']">
+                  <th
+                    :class="[
+                      getCalendarClasses.tableHeaderEmployeeName,
+                      'spr-sticky spr-left-0',
+                      getCalendarClasses.borderClasses,
+                    ]"
+                  >
                     <div :class="getCalendarClasses.headerContent">
                       <div>Employee Name</div>
                       <div
@@ -65,12 +67,12 @@
                   </th>
                 </tr>
               </thead>
-              <tbody v-if="employees.length > 0 && !loading" class="spr-overflow-y-auto">
+              <tbody v-if="employees.length > 0 && !loading" ref="tableBodyRef" class="spr-h-full spr-overflow-y-auto">
                 <tr v-for="employee in employees" :key="employee.id">
                   <td
                     :class="[
                       getCalendarClasses.borderClasses,
-                      'spr-bg-white spr-sticky spr-left-0 spr-z-10 spr-content-start spr-border-y spr-border-b-0 spr-border-l-0 spr-border-r spr-p-size-spacing-xs',
+                      'spr-bg-white spr-sticky spr-left-0 spr-z-10 spr-content-start spr-border-y spr-border-l-0 spr-border-r spr-border-t-0 spr-p-size-spacing-xs',
                     ]"
                   >
                     <div class="spr-flex spr-flex-col spr-gap-size-spacing-3xs spr-overflow-hidden">
@@ -81,7 +83,9 @@
                         :variant="employee.avatar ? 'image' : 'initial'"
                         color="tertiary"
                       />
-                      <div class="spr-label-xs-regular">{{ employee.name }}</div>
+                      <div class="spr-label-xs-regular">
+                        {{ employee.name }}
+                      </div>
                       <div class="spr-text-color-supporting spr-label-xs-regular spr-uppercase">
                         {{ employee.position }}
                       </div>
@@ -102,7 +106,7 @@
                     :key="index"
                     :class="[
                       getCalendarClasses.borderClasses,
-                      'spr-min-w-[180px] spr-content-start spr-space-y-size-spacing-3xs spr-border-x spr-border-b-0 spr-border-t spr-p-size-spacing-sm last:spr-mb-size-spacing-lg last:spr-border-r-0',
+                      'spr-min-w-[180px] spr-content-start spr-space-y-size-spacing-3xs spr-border-x spr-border-b spr-border-t-0 spr-p-size-spacing-sm last:spr-mb-size-spacing-lg last:spr-border-r-0',
                     ]"
                     @mouseover="handleHover(true, index, employee.id)"
                     @mouseleave="handleHover(false, index, employee.id)"
@@ -148,6 +152,7 @@
                             :title="`${schedule.startTime} - ${schedule.endTime}`"
                             :description="schedule.location"
                             :sub-description="schedule.type"
+                            :type="schedule.color"
                             fullwidth
                           />
                         </div>
@@ -172,8 +177,57 @@
                     </section>
                   </td>
                 </tr>
+                <tr v-if="props.infiniteLoading || props.loadingTextCompleted">
+                  <td
+                    :colspan="weekDates.length + 1"
+                    class="spr-flex spr-h-full spr-items-center spr-justify-center spr-p-size-spacing-xs"
+                  >
+                    <div v-if="props.infiniteLoading">
+                      <Icon icon="svg-spinners:ring-resize" class="spr-text-color-success-base spr-font-size-400" />
+                    </div>
+
+                    <div v-else>
+                      {{ props.loadingTextCompleted }}
+                    </div>
+                  </td>
+                </tr>
               </tbody>
-              <tbody v-else>
+              <tbody v-if="employees.length === 0 && loading">
+                <tr v-for="employeeKey in 10" :key="employeeKey">
+                  <td
+                    :class="[
+                      getCalendarClasses.borderClasses,
+                      'spr-bg-white spr-sticky spr-left-0 spr-z-10 spr-content-start spr-border-y spr-border-l-0 spr-border-r spr-border-t-0 spr-p-size-spacing-xs',
+                    ]"
+                  >
+                    <div class="spr-flex spr-flex-col spr-gap-size-spacing-3xs spr-overflow-hidden">
+                      <spr-avatar size="md" variant="initial" color="tertiary" loading />
+                      <div :class="[{ 'spr-skeletal-loader spr-h-6 spr-rounded-md': true }]" />
+                      <div :class="[{ 'spr-skeletal-loader spr-h-6 spr-rounded-md': true }]" />
+                    </div>
+                    <div class="spr-mt-size-spacing-xs">
+                      <spr-lozenge loading />
+                    </div>
+                  </td>
+                  <td
+                    v-for="weekDays in 7"
+                    :key="weekDays"
+                    :class="[
+                      getCalendarClasses.borderClasses,
+                      'spr-min-w-[180px] spr-content-start spr-space-y-size-spacing-3xs spr-border-x spr-border-b spr-border-t-0 spr-p-size-spacing-sm last:spr-mb-size-spacing-lg last:spr-border-r-0',
+                    ]"
+                  >
+                    <section class="spr-flex spr-flex-col spr-justify-start spr-gap-size-spacing-3xs">
+                      <div v-for="weekDaysValue in 1" :key="weekDaysValue" class="spr-w-full">
+                        <div class="spr-flex spr-flex-col spr-items-center spr-justify-start">
+                          <spr-calendar-cell type="restday" fullwidth loading />
+                        </div>
+                      </div>
+                    </section>
+                  </td>
+                </tr>
+              </tbody>
+              <tbody v-else class="spr-h-full">
                 <tr v-if="!loading" class="spr-h-full">
                   <td :colspan="weekDates.length + 1" class="spr-flex spr-h-full spr-items-center spr-justify-center">
                     <slot name="empty-state">
@@ -193,15 +247,6 @@
                     </slot>
                   </td>
                 </tr>
-                <tr v-else>
-                  <td :colspan="weekDates.length + 1" class="spr-h-[360px] spr-overflow-hidden">
-                    <slot name="loading">
-                      <div class="spr-flex spr-items-center spr-justify-center">
-                        <Icon size="48" icon="svg-spinners:ring-resize" class="spr-text-color-success-base" />
-                      </div>
-                    </slot>
-                  </td>
-                </tr>
               </tbody>
             </table>
           </div>

package/src/components/calendar/use-calendar.ts

@@ -141,15 +141,17 @@ export const useCalendar = (props: CalendarPropTypes, emit: SetupContext<Calenda
       'spr-bg-color-weak spr-flex spr-w-full spr-items-center spr-justify-between spr-p-size-spacing-sm',
     );
 
-    const contentWrapper = classNames('spr-divide-color-weak spr-divide-x-0 spr-divide-y spr-divide-solid');
+    const contentWrapper = classNames(
+      ' spr-flex spr-flex-col spr-h-full spr-divide-color-weak spr-divide-x-0 spr-divide-y spr-divide-solid',
+    );
     const calendarTable = classNames(
-      ' spr-overflow-y-auto spr-h-full spr-table spr-w-full spr-table-fixed spr-border-collapse spr-border-spacing-0 spr-rounded-border',
+      'spr-h-full spr-table spr-w-full spr-table-fixed spr-border-collapse spr-border-spacing-0 spr-rounded-border',
     );
     const tableHeaderEmployeeName = classNames(
-      'spr-sticky spr-left-0 spr-z-20 spr-background-color spr-body-xs-regular-medium spr-p-size-spacing-xs spr-text-left spr-overflow-hidden spr-h-full',
+      'spr-sticky spr-left-0 spr-z-20 spr-background-color spr-body-xs-regular-medium spr-p-size-spacing-xs spr-text-left spr-overflow-hidden spr-h-full spr-border-x-0 spr-border-t-0 ',
     );
     const tableHeader = classNames(
-      'spr-background-color spr-border-x-0 spr-border-y-0 spr-border-l  spr-p-size-spacing-sm spr-text-center',
+      'spr-background-color spr-border-x-0 spr-border-t-0 spr-border-l  spr-p-size-spacing-sm spr-text-center',
     );
     const headerContent = classNames(
       'spr-flex  spr-flex-row spr-w-full spr-items-center spr-gap-size-spacing-3xs lg:spr-flex-col spr-overflow-hidden',

package/src/components/calendar-cell/calendar-cell.ts

@@ -45,6 +45,10 @@ export const calendarCellPropTypes = {
     type: String,
     default: '',
   },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export type CalendarCellPropTypes = ExtractPropTypes<typeof calendarCellPropTypes>;

package/src/components/calendar-cell/calendar-cell.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="getCalendarCellClassess.getMainClasses" @click="handleClick">
+  <div v-if="!props.loading" :class="getCalendarCellClassess.getMainClasses" @click="handleClick">
     <slot name="prefix">
       <Icon v-if="hasIconStatus" :icon="getCellIcon" />
     </slot>
@@ -18,6 +18,8 @@
       </div>
     </slot>
   </div>
+
+  <div v-else :class="getCalendarCellClassess.getMainClasses" />
 </template>
 
 <script setup lang="ts">

package/src/components/calendar-cell/use-calendar-cell.ts

@@ -66,11 +66,12 @@ export const useCalendarCell = (props: CalendarCellPropTypes, emit: SetupContext
 
   const getCalendarCellClassess = computed(() => {
     const calendarCellWrapper = classNames(
-      'spr-flex spr-items-center  spr-p-size-spacing-3xs spr-gap-size-spacing-3xs spr-relative spr-rounded-lg spr-border-2 spr-transition-all  sm:spr-flex-col spr-overflow-hidden',
+      'spr-flex spr-items-center spr-p-size-spacing-3xs spr-gap-size-spacing-3xs spr-relative spr-rounded-lg spr-border-2 spr-transition-all sm:spr-flex-col spr-overflow-hidden',
       {
         'spr-w-full': props.fullwidth,
         'spr-max-w-[217px]': !props.fullwidth,
-        'hover:spr-drop-shadow-sm  spr-cursor-pointer': !props.viewOnly,
+        'hover:spr-drop-shadow-sm spr-cursor-pointer': !props.viewOnly,
+        'spr-h-[80px] spr-skeletal-loader': props.loading,
       },
     );
 

package/src/components/card/card.ts

@@ -42,6 +42,11 @@ export const cardPropTypes = {
     type: Boolean,
     default: true,
   },
+
+  flexbox: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export type CardPropTypes = ExtractPropTypes<typeof cardPropTypes>;

package/src/components/card/card.vue

@@ -21,7 +21,7 @@
       </template>
     </div>
 
-    <div v-if="$slots.content" :class="cardClasses.contentPaddingSizeClasses">
+    <div v-if="$slots.content" :class="[cardClasses.contentPaddingSizeClasses, cardClasses.hasFlexBox]">
       <slot name="content" />
     </div>
 

package/src/components/card/use-card.ts

@@ -8,10 +8,12 @@ interface CardClasses {
   headerClasses: string;
   contentPaddingSizeClasses: string;
   footerClasses: string;
+  hasFlexBox: string;
 }
 
 export const useCard = (props: CardPropTypes, slots: Slots) => {
-  const { title, headerIcon, borderRadiusSize, hasCollapsible, isCollapsibleOpen, hasContentPadding } = toRefs(props);
+  const { title, headerIcon, borderRadiusSize, hasCollapsible, isCollapsibleOpen, hasContentPadding, flexbox } =
+    toRefs(props);
 
   const cardClasses: ComputedRef<CardClasses> = computed(() => {
     const baseClasses = classNames(
@@ -56,11 +58,16 @@ export const useCard = (props: CardPropTypes, slots: Slots) => {
       },
     );
 
+    const hasFlexBox = classNames({
+      'spr-flex spr-flex-col spr-h-full': flexbox.value,
+    });
+
     return {
       baseClasses,
       headerClasses,
       contentPaddingSizeClasses,
       footerClasses,
+      hasFlexBox,
     };
   });
 

package/src/components/filter/filter.ts

@@ -73,6 +73,18 @@ export const filterPropTypes = {
     type: Boolean,
     default: false,
   },
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  helperText: {
+    type: String,
+    default: '',
+  },
+  hasAdvancedFilterApi: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export interface FilterPropsInterface {

package/src/components/filter/filter.vue

@@ -6,22 +6,24 @@
     placement="bottom"
     :triggers="[]"
     :popper-hide-triggers="[]"
-    :container="`#${uniqueId}`"
+    :container="`#${generateStableId}`"
     :auto-hide="false"
     :delay="0"
+    :popper-class="'filter-menu-popper'"
     :style="{
       width: props.width,
       position: 'relative',
     }"
   >
-    <span
-      :id="uniqueId"
+    <div
+      :id="generateStableId"
       :style="{
         width: props.width,
         position: 'relative',
       }"
       @click="isFilterOpen = true"
     >
+      <!-- Main Search Input -->
       <slot>
         <spr-input
           :id="props.id"
@@ -30,13 +32,16 @@
           :placeholder="placeholder"
           :label="label"
           :disabled="disabled"
+          :helper-text="props.helperText"
+          :display-helper="!!props.helperText"
+          :error="props.error"
         >
           <template #icon>
             <Icon icon="ph:magnifying-glass" />
           </template>
         </spr-input>
       </slot>
-    </span>
+    </div>
 
     <template #popper>
       <div :class="filterClass.MenuOptionClasses">
@@ -58,6 +63,8 @@
             placement="right-start"
             :triggers="['click']"
             :auto-hide="false"
+            :delay="0"
+            popover-base="filter-menu-base"
           >
             <spr-button id="add-filter-button" has-icon variant="secondary" size="small">
               <Icon icon="ph:faders-horizontal" />
@@ -79,7 +86,9 @@
                     aria-id="filter-menu-wrapper"
                     placement="right"
                     :triggers="['click']"
+                    :delay="0"
                     :auto-hide="false"
+                    popover-base="filter-menu-field"
                   >
                     <spr-chips
                       :active="mappedFilterMenuList[menu.field].isFilterVisible"
@@ -104,6 +113,7 @@
                         </div>
 
                         <div class="spr-p-size-spacing-2xs">
+                          <!-- search for the filter Option -->
                           <spr-input
                             :id="`${props.id}-search`"
                             v-model="filterMenuSearchvalue"
@@ -130,26 +140,26 @@
                           />
                         </div>
                         <div
-                          v-if="getFiltereredMenuOption.length > 0"
+                          v-if="getFilteredMenuOption.length > 0"
                           :id="menu.field"
                           ref="filterMenuOptionList"
                           class="spr-h-[264px] spr-space-y-size-spacing-6xs spr-overflow-auto spr-p-size-spacing-2xs"
                         >
                           <div
-                            v-for="(option, key) in getFiltereredMenuOption"
+                            v-for="(option, key) in getFilteredMenuOption"
                             :key="option.value"
                             :class="[
                               filterClass.filterListClasses,
-                              { 'spr-background-color-multiple-active': getFiltereredMenuOption[key].isSelected },
+                              { 'spr-background-color-multiple-active': getFilteredMenuOption[key].isSelected },
                             ]"
                           >
                             <spr-checkbox
                               id="filter-menu-option"
-                              v-model="getFiltereredMenuOption[key].isSelected"
+                              v-model="getFilteredMenuOption[key].isSelected"
                               class="spr-w-full"
-                              :checked="getFiltereredMenuOption[key].isSelected"
-                              :label="getFiltereredMenuOption[key].text"
-                              :description="getFiltereredMenuOption[key].subtext"
+                              :checked="getFilteredMenuOption[key].isSelected"
+                              :label="getFilteredMenuOption[key].text"
+                              :description="getFilteredMenuOption[key].subtext"
                             />
                           </div>
                         </div>
@@ -264,11 +274,11 @@ const {
   isAddFilterVisible,
   getFiltereredOption,
   getSelectedFilterMenuOption,
-  getFiltereredMenuOption,
+  getFilteredMenuOption,
   filterMenuSearchvalue,
   mappedFilterMenuList,
   filterClass,
-  uniqueId,
+  generateStableId,
   filterOptionRef,
   filterMenuOptionList,
 

package/src/components/filter/use-filter.ts

@@ -7,7 +7,17 @@ import dayjs from 'dayjs';
 import { useInfiniteScroll, onClickOutside } from '@vueuse/core';
 
 export const useFilter = (props: FilterPropTypes, emit: SetupContext<FilterEmitTypes>['emit']) => {
-  const { options, filterMenu, filterData, loading, filterable, filling, deselected, hasSearchApi } = toRefs(props);
+  const {
+    options,
+    filterMenu,
+    filterData,
+    loading,
+    filterable,
+    filling,
+    deselected,
+    hasSearchApi,
+    hasAdvancedFilterApi,
+  } = toRefs(props);
 
   const selectedValue = useVModel(props, 'modelValue', emit);
   const searchText = useVModel(props, 'search', emit);
@@ -20,14 +30,13 @@ export const useFilter = (props: FilterPropTypes, emit: SetupContext<FilterEmitT
   const isAdvanceFilterVisible = ref<boolean>(false);
   const mappedMenuData = ref<Record<string, FilterPropsInterface['optionDetails']>>({});
   const mappedFilterMenuList = ref<Record<string, FilterPropsInterface['filterDetails']>>({});
-  const uniqueId = ref<string>(`filter-${dayjs().valueOf()}-${Math.floor(Math.random() * 1000)}`);
   const filterMenuList = ref<FilterPropsInterface['filterDetails'][]>(
     filterMenu.value as FilterPropsInterface['filterDetails'][],
   );
   const selectedFilters = ref<FilterPropsInterface['optionDetails'][]>([]);
   const filterOptionRef = ref<HTMLDivElement | null>(null);
   const filterMenuOptionList = ref<(HTMLDivElement | null)[]>([]);
-  const selectedColumn = ref('');
+  const selectedColumn = ref<string>('');
 
   // Main List
   const getFiltereredOption = computed<FilterPropsInterface['optionDetails'][]>(() => {
@@ -47,19 +56,24 @@ export const useFilter = (props: FilterPropTypes, emit: SetupContext<FilterEmitT
   });
 
   //  Filter Menu Option List
-  const getFiltereredMenuOption = computed<FilterPropsInterface['optionDetails'][]>(() => {
+  const getFilteredMenuOption = computed<FilterPropsInterface['optionDetails'][]>(() => {
     if (loading.value) return filterData.value;
 
+    const searchQuery = hasAdvancedFilterApi.value ? '' : filterMenuSearchvalue.value.toLowerCase();
+
     const filter = filterData.value.filter((option, index) => {
       const existing = selectedFilters.value.find(
-        (prevSelected) => prevSelected.value === option.value && prevSelected.isSelected,
+        (prevSelected) =>
+          prevSelected.value === option.value &&
+          prevSelected.isSelected &&
+          prevSelected.column === selectedColumn.value,
       );
 
       if (existing) {
         filterData.value[index].isSelected = true;
       }
 
-      return option.text.toLowerCase().includes(filterMenuSearchvalue.value.toLowerCase());
+      return option.text.toLowerCase().includes(searchQuery.toLowerCase());
     });
 
     return filter;
@@ -70,12 +84,24 @@ export const useFilter = (props: FilterPropTypes, emit: SetupContext<FilterEmitT
   });
 
   const getSelectedFilterMenuOption = computed(() => {
-    return getFiltereredMenuOption.value.filter((item) => item.isSelected);
+    return selectedFilters.value.filter((item) => item.isSelected && item.column === selectedColumn.value);
+  });
+
+  const generateStableId = computed(() => {
+    if (props.id) {
+      return `filter-popover-${props.id}`;
+    }
+    return `filter-popover-${dayjs().valueOf().toString().slice(-8)}`;
   });
 
   const getMappedFilterData = (column: string) => {
-    emit('getFilterData', column);
-    selectedColumn.value = column;
+    mappedFilterMenuList.value[column].isFilterVisible = true;
+
+    if (selectedColumn.value !== column) {
+      filterMenuSearchvalue.value = '';
+      selectedColumn.value = column;
+      emit('getFilterData', column);
+    }
   };
 
   const setFilterVisible = (field: string) => {
@@ -112,20 +138,23 @@ export const useFilter = (props: FilterPropTypes, emit: SetupContext<FilterEmitT
   };
 
   const saveSelectedFilter = (field: string) => {
-    const selectedValues = Object.values(getFiltereredMenuOption.value).filter(
-      (selected) => selected.isSelected && selected.column === field,
+    const selectedValues = getFilteredMenuOption.value.filter((option) => option.isSelected && option.column === field);
+
+    const newValues = selectedValues.filter(
+      (newVal) =>
+        !selectedFilters.value.some((existing) => existing.value === newVal.value && existing.column === newVal.column),
     );
-    selectedFilters.value = selectedFilters.value
-      .filter((prevSelected) => prevSelected.column !== field)
-      .concat(selectedValues);
 
-    emit('selectedFilter', selectedFilters.value);
+    selectedFilters.value = [...selectedFilters.value, ...newValues];
+
     mappedFilterMenuList.value[field].count = selectedValues.length;
     mappedFilterMenuList.value[field].isFilterVisible = false;
+    filterMenuSearchvalue.value = '';
+    emit('selectedFilter', selectedFilters.value);
   };
 
   const handleRemoveFilterValues = (filter: string) => {
-    getFiltereredMenuOption.value.map((option) => {
+    getFilteredMenuOption.value.map((option) => {
       if (option.value === filter) {
         option.isSelected = false;
       }
@@ -133,6 +162,7 @@ export const useFilter = (props: FilterPropTypes, emit: SetupContext<FilterEmitT
     });
 
     selectedFilters.value = selectedFilters.value.filter((item) => item.value !== filter);
+    mappedFilterMenuList.value[selectedColumn.value].count = selectedFilters.value.length;
     emit('selectedFilter', selectedFilters.value);
   };
 
@@ -195,7 +225,7 @@ export const useFilter = (props: FilterPropTypes, emit: SetupContext<FilterEmitT
   });
 
   watch(filterMenuSearchvalue, (value, oldValue) => {
-    if (value === oldValue) return; // Prevent unnecessary updates
+    if (value === oldValue || !hasAdvancedFilterApi.value) return; // Prevent unnecessary updates
     searchFilterValue.value = value;
   });
 
@@ -249,11 +279,11 @@ export const useFilter = (props: FilterPropTypes, emit: SetupContext<FilterEmitT
     getFiltereredOption,
     mappedMenuData,
     getSelectedFilterMenuOption,
-    getFiltereredMenuOption,
+    getFilteredMenuOption,
     filterMenuSearchvalue,
     mappedFilterMenuList,
     filterClass,
-    uniqueId,
+    generateStableId,
     filterOptionRef,
     filterMenuOptionList,
 

package/src/components/lozenge/lozenge.ts

@@ -48,6 +48,10 @@ export const lozengePropTypes = {
     type: Boolean,
     default: true,
   },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export type LozengePropTypes = ExtractPropTypes<typeof lozengePropTypes>;

package/src/components/lozenge/lozenge.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="spr-h-fit spr-w-fit">
-    <div v-if="visible" :class="lozengeClasses.baseClasses">
+  <div :class="lozengeClasses.wrapperClasses">
+    <div v-if="visible && !loading" :class="lozengeClasses.baseClasses">
       <div :class="lozengeClasses.toneClasses">
         <div v-if="$slots.icon" class="spr-flex spr-h-3 spr-w-3 spr-items-center spr-overflow-hidden">
           <slot name="icon" />
@@ -17,6 +17,7 @@
         <div>{{ label }}</div>
       </div>
     </div>
+    <div v-if="visible && loading" :class="lozengeClasses.baseClasses" />
   </div>
 </template>