design-system-next 2.15.6 → 2.16.2

package/src/assets/styles/tailwind.css

@@ -64,11 +64,11 @@
   #sidenav-menu-wrapper,
   #sidenav-submenu-l1-wrapper,
   #user-menu-wrapper {
-    @apply spr-background-color spr-border-color-base spr-overflow-y-auto spr-overflow-x-hidden spr-rounded-[12px] spr-border spr-border-solid spr-drop-shadow-md;
+    @apply spr-background-color spr-border-color-base spr-overflow-y-auto spr-overflow-x-hidden spr-rounded-xl spr-border spr-border-solid spr-drop-shadow-md;
 
     .v-popper__wrapper {
       .v-popper__inner {
-        @apply spr-overflow-hidden spr-rounded-none spr-border-none spr-bg-transparent spr-shadow-drop;
+        @apply spr-overflow-hidden spr-rounded-none spr-border-none spr-bg-transparent spr-shadow-none;
 
         .slide-fade-enter-active {
           @apply spr-duration-300 spr-ease-out;
@@ -124,11 +124,11 @@
 
   /* #region - Dropdown */
   #dropdown-wrapper {
-    @apply spr-z-[1000] spr-w-[inherit] spr-overflow-hidden;
+    @apply spr-border-color-weak spr-z-[1000] spr-w-[inherit] spr-overflow-hidden spr-rounded-xl spr-border spr-border-solid spr-shadow-drop;
 
     .v-popper__wrapper {
       .v-popper__inner {
-        @apply spr-border-color-weak spr-w-full spr-rounded-xl spr-border spr-border-solid spr-font-main spr-shadow-drop;
+        @apply spr-w-full spr-rounded-none spr-border-none spr-font-main spr-shadow-none;
 
         &::-webkit-scrollbar-track {
           @apply spr-rounded-br-xl spr-rounded-tr-xl;
@@ -146,11 +146,11 @@
   #select-wrapper,
   #multi-select-wrapper,
   #ladderized-select-wrapper {
-    @apply spr-z-[1000] spr-w-[inherit] spr-overflow-hidden;
+    @apply spr-border-color-weak spr-z-[1000] spr-w-[inherit] spr-overflow-hidden spr-rounded-xl spr-border spr-border-solid spr-shadow-drop;
 
     .v-popper__wrapper {
       .v-popper__inner {
-        @apply spr-border-color-weak spr-w-full spr-rounded-xl spr-border spr-border-solid spr-font-main spr-shadow-none;
+        @apply spr-w-full spr-rounded-none spr-border-none spr-font-main spr-shadow-none;
 
         &::-webkit-scrollbar-track {
           @apply spr-rounded-br-xl spr-rounded-tr-xl;
@@ -183,6 +183,7 @@
     thead {
       @apply spr-pr-size-spacing-6xs;
     }
+
     tbody::-webkit-scrollbar {
       @apply spr-h-0 spr-w-0; /* Hides the scrollbar in WebKit browsers */
     }
@@ -418,6 +419,26 @@
 
   /* #endregion - Labels */
 
+  /* #region - Attribute Filter */
+  #attribute_filter_wrapper {
+    @apply spr-z-[1000] spr-w-[inherit] spr-overflow-hidden;
+
+    .v-popper__wrapper {
+      .v-popper__inner {
+        @apply spr-border-color-weak spr-w-full spr-rounded-xl spr-border spr-border-solid spr-font-main spr-shadow-none;
+
+        &::-webkit-scrollbar-track {
+          @apply spr-rounded-br-xl spr-rounded-tr-xl;
+        }
+      }
+
+      .v-popper__arrow-container {
+        @apply spr-hidden;
+      }
+    }
+  }
+  /* #endregion - Attribute Filter */
+
   /* #region - Font Size */
   .spr-font-size-100 {
     @apply spr-text-100;

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

@@ -0,0 +1,134 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { MenuListType } from '../list/list';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+const TRIGGER_EVENTS = ['click', 'hover', 'focus', 'touch'] as const;
+const POPPER_STRATEGY_TYPES = ['fixed', 'absolute'] as const;
+const PLACEMENTS_TYPES = [
+  'auto',
+  'auto-start',
+  'auto-end',
+  'top',
+  'top-start',
+  'top-end',
+  'right',
+  'right-start',
+  'right-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'left',
+  'left-start',
+  'left-end',
+] as const;
+
+export const attributeFilterPropTypes = {
+  id: {
+    type: String,
+    default: 'attribute_filter',
+  },
+  filterLabel: {
+    type: String,
+    default: 'Filter',
+  },
+  headerLabel: {
+    type: String,
+    default: 'Add Filter',
+  },
+  triggers: {
+    type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
+    validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
+      return value.every((val) => TRIGGER_EVENTS.includes(val));
+    },
+    default: () => [],
+  },
+  popperTriggers: {
+    type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
+    validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
+      return value.every((val) => TRIGGER_EVENTS.includes(val));
+    },
+    default: () => [],
+  },
+  autoHide: {
+    type: Boolean,
+    default: true,
+  },
+  popperStrategy: {
+    type: String,
+    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+    default: 'absolute',
+  },
+  distance: {
+    type: Number,
+    default: 6,
+  },
+  placement: {
+    type: String as PropType<(typeof PLACEMENTS_TYPES)[number]>,
+    validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
+    default: 'bottom',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  wrapperPosition: {
+    type: String,
+    default: 'relative',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  popperWidth: {
+    type: String,
+    default: '100%',
+  },
+  popperInnerWidth: {
+    type: String,
+    default: 'unset',
+  },
+  searchable: {
+    type: Boolean,
+    default: false,
+  },
+  multiselect: {
+    type: Boolean,
+    default: false,
+  },
+  filterMenuList: {
+    type: Array as PropType<MenuListType[] | string[]>,
+    default: [],
+  },
+  disableLocalSearch: {
+    type: Boolean,
+    default: false,
+  },
+  showBadge: {
+    type: Boolean,
+    default: true,
+  },
+  badgeVariant: {
+    type: String,
+    default: 'danger',
+  },
+  noList: {
+    type: Boolean,
+    default: false,
+  },
+  clearable: {
+    type: Boolean,
+    default: true,
+  }
+};
+
+export const attributeFilterEmitTypes = {
+  onSaveFilter: (savedFilters: MenuListType[]) => Array.isArray(savedFilters),
+  onCloseFilter: () => true,
+  onOpenFilter: () => true,
+  onSelectFilter: (selectedFilters: MenuListType[]) => Array.isArray(selectedFilters),
+  infiniteScrollTrigger: () => true,
+  onClearFilter: () => true,
+};
+
+export type AttributeFilterPropTypes = ExtractPropTypes<typeof attributeFilterPropTypes>;
+export type AttributeFilterEmitTypes = typeof attributeFilterEmitTypes;

package/src/components/attribute-filter/attribute-filter.vue

@@ -0,0 +1,141 @@
+<template>
+  <Menu
+    :shown="isFilterActive"
+    aria-id="attribute_filter_wrapper"
+    :distance="props.distance"
+    :placement="props.placement"
+    :triggers="props.triggers"
+    :popper-triggers="props.popperTriggers"
+    :auto-hide="props.autoHide"
+    :disabled="props.disabled"
+    :container="`#${props.id}`"
+    :strategy="
+      props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
+    "
+    :delay="0"
+    :style="{
+      position: props.wrapperPosition,
+      width: props.width,
+    }"
+    @hide="handleClosePopper"
+    @show="handleShowPopper"
+  >
+    <div @click="handleFilterTrigger">
+      <slot>
+        <spr-chips
+          :label="props.filterLabel"
+          :active="isFilterActive"
+          icon="ph:funnel-simple"
+          :badge="props.showBadge && savedFilters.length > 0"
+          :badge-text="savedFilters.length.toString()"
+          :badge-variant="props.badgeVariant"
+          :closable="props.clearable && savedFilters.length > 0"
+          :disabled="props.disabled"
+          @close="handleClear"
+        />
+      </slot>
+    </div>
+
+    <div
+      :id="props.id"
+      :style="{
+        width: props.popperWidth,
+      }"
+    ></div>
+    <template #popper="{ hide }">
+      <div
+        id="attribute_filter_popper"
+        :style="{
+          width: props.popperInnerWidth,
+        }"
+      >
+        <slot name="header">
+          <div
+            id="attribute_filter_header"
+            class="spr-border-color-weak spr-flex spr-items-center spr-justify-between spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-px-size-spacing-xs spr-py-size-spacing-2xs"
+          >
+            <span class="spr-text-color-strong spr-text-300 spr-font-medium"> {{ props.headerLabel }} </span>
+            <Icon
+              icon="ph:x"
+              width="20px"
+              height="20px"
+              class="spr-text-color-weak spr-cursor-pointer"
+              @click="hide()"
+            />
+          </div>
+        </slot>
+        <div
+          v-if="props.searchable"
+          id="attribute_filter_subheader"
+          class="spr-border-color-weak spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-px-size-spacing-xs spr-py-size-spacing-2xs"
+        >
+          <spr-input-search
+            v-model="searchModel"
+            label=""
+            placeholder="Search..."
+            class="!spr-py-0"
+            @focus="isSearchFocused = true"
+            @blur="isSearchFocused = false"
+          />
+        </div>
+        <slot name="actions"> </slot>
+        <slot name="body">
+          <div
+            v-if="!noList"
+            ref="filterDropdownRef"
+            id="attribute_filter_body"
+            class="spr-max-h-[250px] spr-overflow-y-auto"
+          >
+            <spr-list
+              v-model="selectedFilters"              
+              :menu-list="attributeFilterList"
+              :multi-select="props.multiselect"
+              @update:model-value="handleOnSelect"
+            />
+          </div>
+        </slot>
+        <slot name="footer">
+          <div
+            id="attribute_filter_footer"
+            class="spr-border-color-weak spr-flex spr-items-center spr-justify-end spr-gap-size-spacing-3xs spr-border-x-0 spr-border-b-0 spr-border-t spr-border-solid spr-px-size-spacing-xs spr-py-size-spacing-2xs"
+          >
+            <spr-button variant="secondary" size="medium" @click="isFilterActive = false"> Cancel </spr-button>
+            <spr-button variant="primary" size="medium" tone="success" @click="handleSave"> Save </spr-button>
+          </div>
+        </slot>
+      </div>
+    </template>
+  </Menu>
+</template>
+<script lang="ts" setup>
+import { Menu } from 'floating-vue';
+import { attributeFilterEmitTypes, attributeFilterPropTypes } from './attribute-filter';
+import { useAttributeFilter } from './use-attribute-filter';
+import SprChips from '../chips/chips.vue';
+import { Icon } from '@iconify/vue';
+import SprInputSearch from '../input/input-search/input-search.vue';
+import SprList from '../list/list.vue';
+import SprButton from '../button/button.vue';
+
+import 'floating-vue/dist/style.css';
+
+const props = defineProps(attributeFilterPropTypes);
+const emit = defineEmits(attributeFilterEmitTypes);
+const searchModel = defineModel<string>('search', {
+  default: '',
+});
+const {
+  isFilterActive,
+  isSearchFocused,
+  attributeFilterList,
+  handleFilterTrigger,
+  selectedFilters,
+  savedFilters,
+  handleClosePopper,
+  handleShowPopper,
+  handleSave,  
+  handleOnSelect,
+  filterDropdownRef,
+  handleClear,
+} = useAttributeFilter(props, emit, searchModel);
+</script>

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

@@ -0,0 +1,125 @@
+import type { MenuListType } from '../list/list';
+import type { AttributeFilterPropTypes, AttributeFilterEmitTypes } from './attribute-filter';
+import { onMounted, ref, toRefs, watch, type SetupContext, type Ref } from 'vue';
+import { useInfiniteScroll } from '@vueuse/core';
+export const useAttributeFilter = (
+  props: AttributeFilterPropTypes,
+  emit: SetupContext<AttributeFilterEmitTypes>['emit'],
+  searchModel: Ref<string>,
+) => {
+  const isFilterActive = ref(false);
+  const isSearchFocused = ref(false);  
+  const selectedFilters = ref<MenuListType[]>([]);
+  const savedFilters = ref<MenuListType[]>([]);  
+  const isSaving = ref(false);
+  const filterDropdownRef = ref<HTMLDivElement | null>(null);
+
+  const { filterMenuList, disableLocalSearch, noList } = toRefs(props);
+  const attributeFilterList = ref<MenuListType[]>([]);
+
+  const handleFilterTrigger = () => {
+    isFilterActive.value = !isFilterActive.value;
+  };
+
+  const getFilterList = () => {
+    if (Array.isArray(filterMenuList.value)) {
+      attributeFilterList.value = filterMenuList.value as MenuListType[];
+    }
+
+    if (typeof filterMenuList.value[0] === 'string' || typeof attributeFilterList.value[0] === 'number') {
+      attributeFilterList.value = (filterMenuList.value as string[] | number[]).map((item) => ({
+        text: item.toString(),
+        value: item,
+      }));
+    }
+  };
+
+  const handleClosePopper = () => {
+    if (isSaving.value) {
+      isSaving.value = false;
+      return;
+    }
+
+    isFilterActive.value = false;
+    emit('onCloseFilter');
+  };
+
+  const handleShowPopper = () => {
+    emit('onOpenFilter');
+    if (noList.value) return;
+
+    selectedFilters.value = [...savedFilters.value];
+  };
+
+  const handleSave = () => {
+    isSaving.value = true;
+    savedFilters.value = [...selectedFilters.value];
+    isFilterActive.value = false;
+
+    emit('onSaveFilter', savedFilters.value);
+  };
+
+  const getFilteredMenuList = (list: MenuListType[]) => {
+    return list.filter((item: MenuListType) => {
+      const searchTerm = searchModel.value.toLowerCase().trim();
+      return item.text.toLowerCase().trim().includes(searchTerm);
+    });
+  };
+
+  const handleSearch = () => {
+    if (disableLocalSearch.value || noList.value) return;
+    getFilterList();
+    attributeFilterList.value = getFilteredMenuList(attributeFilterList.value);
+  };
+
+  const handleOnSelect = (selectedFilters: MenuListType[]) => {
+    emit('onSelectFilter', selectedFilters);
+  };
+
+  const handleClear = () => {
+    selectedFilters.value = [];
+    savedFilters.value = [];    
+    emit('onClearFilter');
+  };
+
+  useInfiniteScroll(
+    filterDropdownRef,
+    () => {
+      if (!filterDropdownRef.value) return;
+      const element = filterDropdownRef.value;
+      const hasVerticalScrollbar = element.scrollHeight > element.clientHeight;
+
+      if (hasVerticalScrollbar) {
+        emit('infiniteScrollTrigger');
+      }
+    },
+    { distance: 10 },
+  );
+
+  onMounted(() => {
+    if (noList.value) return;
+    getFilterList();
+  });
+
+  watch(filterMenuList, () => {
+    if (noList.value) return;
+    getFilterList();
+  });
+
+  watch(searchModel, () => handleSearch());
+
+  return {
+    isFilterActive,
+    isSearchFocused,
+    attributeFilterList,
+    handleFilterTrigger,
+    selectedFilters,
+    handleClosePopper,
+    handleShowPopper,
+    handleSave,
+    savedFilters,    
+    handleOnSelect,
+    filterDropdownRef,
+    handleClear,
+  };
+};

package/src/components/card/card.ts

@@ -2,9 +2,17 @@ import type { PropType, ExtractPropTypes } from 'vue';
 
 export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
 
+const TONES = ['plain', 'neutral', 'success', 'information', 'pending', 'caution', 'accent', 'danger'] as const;
 const BORDER_RADIUS_SIZE = ['xl', 'lg', 'md', 'sm', 'xs', '2xs'] as const;
 
 export const cardPropTypes = {
+  id: {
+    type: String,
+  },
+  tone: {
+    type: String as PropType<(typeof TONES)[number] | undefined>,
+    validator: (val: string | undefined) => !val || TONES.includes(val as (typeof TONES)[number]),
+  },
   title: {
     type: String,
     default: '',
@@ -30,6 +38,10 @@ export const cardPropTypes = {
     validator: (value: (typeof BORDER_RADIUS_SIZE)[number]) => BORDER_RADIUS_SIZE.includes(value),
     default: 'xl',
   },
+  borderWidth: {
+    type: String,
+    default: '1px',
+  },
   hasCollapsible: {
     type: Boolean,
     default: false,

package/src/components/card/card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="cardClasses.baseClasses">
+  <div :class="cardClasses.baseClasses" :style="{ borderWidth: props.borderWidth }">
     <div v-if="props.showHeader && ($slots.header || props.title)" :class="cardClasses.headerClasses">
       <div v-if="props.title" class="spr-flex spr-items-center">
         <Icon

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

@@ -12,21 +12,42 @@ interface CardClasses {
 }
 
 export const useCard = (props: CardPropTypes, slots: Slots) => {
-  const { title, headerIcon, borderRadiusSize, hasCollapsible, isCollapsibleOpen, hasContentPadding, flexbox } =
+  const { tone, title, headerIcon, borderRadiusSize, hasCollapsible, isCollapsibleOpen, hasContentPadding, flexbox } =
     toRefs(props);
 
   const cardClasses: ComputedRef<CardClasses> = computed(() => {
-    const baseClasses = classNames(
-      `spr-bg-white-50 spr-text-color-strong spr-border spr-border-solid spr-border-mushroom-200`,
-      {
-        'spr-rounded-border-radius-2xs': borderRadiusSize.value === 'xs',
-        'spr-rounded-border-radius-xs': borderRadiusSize.value === 'sm',
-        'spr-rounded-border-radius-sm': borderRadiusSize.value === 'md',
-        'spr-rounded-border-radius-md': borderRadiusSize.value === 'xs',
-        'spr-rounded-border-radius-lg': borderRadiusSize.value === 'lg',
-        'spr-rounded-border-radius-xl': borderRadiusSize.value === 'xl' || !borderRadiusSize.value,
-      },
-    );
+    const toneValue = tone?.value;
+
+    const baseClasses = classNames(`spr-border-solid`, {
+      // Tones
+      'spr-background-color-base': !toneValue,
+      'spr-bg-white': toneValue === 'plain',
+      'spr-background-color-surface': toneValue === 'neutral',
+      'spr-background-color-success-weak': toneValue === 'success',
+      'spr-background-color-information-weak': toneValue === 'information',
+      'spr-background-color-pending-weak': toneValue === 'pending',
+      'spr-background-color-caution-weak': toneValue === 'caution',
+      'spr-background-color-accent-weak': toneValue === 'accent',
+      'spr-background-color-danger-weak': toneValue === 'danger',
+
+      // Borders
+      'spr-border-color-weak': !toneValue || toneValue === 'plain',
+      'spr-border-color-base': toneValue === 'neutral',
+      'spr-border-color-success-base': toneValue === 'success',
+      'spr-border-color-information-base': toneValue === 'information',
+      'spr-border-color-pending-base': toneValue === 'pending',
+      'spr-border-color-caution-base': toneValue === 'caution',
+      'spr-border-color-accent-base': toneValue === 'accent',
+      'spr-border-color-danger-base': toneValue === 'danger',
+
+      // Border radius
+      'spr-rounded-border-radius-2xs': borderRadiusSize.value === 'xs',
+      'spr-rounded-border-radius-xs': borderRadiusSize.value === 'sm',
+      'spr-rounded-border-radius-sm': borderRadiusSize.value === 'md',
+      'spr-rounded-border-radius-md': borderRadiusSize.value === 'xs',
+      'spr-rounded-border-radius-lg': borderRadiusSize.value === 'lg',
+      'spr-rounded-border-radius-xl': borderRadiusSize.value === 'xl' || !borderRadiusSize.value,
+    });
 
     const headerClasses = classNames(`spr-flex spr-items-center transition-all duration-300 ease-in-out`, {
       'spr-min-h-[18px]': slots.header,

package/src/components/dropdown/dropdown.ts

@@ -39,8 +39,7 @@ export const dropdownPropTypes = {
   },
   menuList: {
     type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
-    required: true,
-    default: [],
+    default: () => [],
   },
   searchableMenu: {
     type: Boolean,
@@ -116,10 +115,6 @@ export const dropdownPropTypes = {
     type: Boolean,
     default: false,
   },
-  dropdown: {
-    type: Boolean,
-    default: false,
-  },
   lozenge: {
     type: Boolean,
     default: false,