design-system-next 2.15.7 → 2.16.2

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,

package/src/components/dropdown/dropdown.vue

@@ -30,47 +30,57 @@
     ></div>
 
     <template #popper>
-      <div
-        ref="dropdownRef"
-        :class="[
-          'spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden',
-          !props.ladderized || isLadderizedSearch,
-        ]"
-        :style="{
-          width: props.popperInnerWidth,
-        }"
-      >
-        <template v-if="dropdownMenuList.length > 0">
-          <spr-list
-            v-if="!props.ladderized || isLadderizedSearch"
-            v-model="selectedListItems"
-            :menu-list="dropdownMenuList"
-            :searchable-menu="props.searchableMenu"
-            :group-items-by="props.groupItemsBy"
-            :multi-select="props.multiSelect"
-            :pre-selected-items="dropdownValue"
-            :no-check="props.noCheckInList"
-            :dropdown="props.dropdown"
-            :lozenge="props.lozenge"
-            @update:model-value="handleSelectedItem"
-          />
-          <spr-ladderized-list
-            v-else
-            v-model="dropdownValue"
-            :ladderized="props.ladderized"
-            :dropdown="props.dropdown"
-            :menu-list="dropdownMenuList"
-            :searchable-menu="props.searchableMenu"
-            :remove-current-level-in-back-label="removeCurrentLevelInBackLabel"
-            @update:model-value="handleSelectedLadderizedItem"
-          />
-        </template>
-        <template v-else>
-          <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
-            <span class="spr-body-sm-regular spr-m-0">No results found</span>
-          </div>
-        </template>
-      </div>
+      <template v-if="$slots.popper">
+        <div
+          class="spr-overflow-y-auto spr-overflow-x-hidden spr-p-2"
+          :style="{
+            width: props.popperInnerWidth,
+          }"
+        >
+          <slot name="popper" />
+        </div>
+      </template>
+      <template v-else>
+        <div
+          ref="dropdownRef"
+          :class="[
+            'spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden',
+            !props.ladderized || isLadderizedSearch,
+          ]"
+          :style="{
+            width: props.popperInnerWidth,
+          }"
+        >
+          <template v-if="dropdownMenuList.length > 0">
+            <spr-list
+              v-if="!props.ladderized || isLadderizedSearch"
+              v-model="selectedListItems"
+              :menu-list="dropdownMenuList"
+              :searchable-menu="props.searchableMenu"
+              :group-items-by="props.groupItemsBy"
+              :multi-select="props.multiSelect"
+              :pre-selected-items="dropdownValue"
+              :no-check="props.noCheckInList"
+              :lozenge="props.lozenge"
+              @update:model-value="handleSelectedItem"
+            />
+            <spr-ladderized-list
+              v-else
+              v-model="dropdownValue"
+              :ladderized="props.ladderized"
+              :menu-list="dropdownMenuList"
+              :searchable-menu="props.searchableMenu"
+              :remove-current-level-in-back-label="removeCurrentLevelInBackLabel"
+              @update:model-value="handleSelectedLadderizedItem"
+            />
+          </template>
+          <template v-else>
+            <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
+              <span class="spr-body-sm-regular spr-m-0">No results found</span>
+            </div>
+          </template>
+        </div>
+      </template>
     </template>
   </Menu>
 </template>

package/src/components/list/list.ts

@@ -82,10 +82,6 @@ export const listPropTypes = {
     type: Boolean,
     default: false,
   },
-  dropdown: {
-    type: Boolean,
-    default: false,
-  },
   lozenge: {
     type: Boolean,
     default: false,

package/src/components/select/select-ladderized/select-ladderized.vue

@@ -42,13 +42,16 @@
             :error="props.error"
           >
             <template #icon>
-              <div class="spr-flex spr-items-center spr-gap-1">
-                <Icon
-                  v-if="props.clearable && inputText"
-                  class="spr-cursor-pointer"
-                  icon="ph:x"
-                  @click.stop="handleClear"
-                />
+              <div
+                :class="[
+                  'spr-flex spr-items-center spr-gap-1',
+                  {
+                    'spr-cursor-pointer': !props.disabled,
+                    'spr-cursor-not-allowed': props.disabled,
+                  },
+                ]"
+              >
+                <Icon v-if="props.clearable && inputText" icon="ph:x" @click.stop="handleClear" />
                 <Icon icon="ph:caret-down" />
               </div>
             </template>

package/src/components/select/select-ladderized/use-select-ladderized.ts

@@ -147,6 +147,8 @@ export const useSelectLadderized = (
   };
 
   const handleClear = () => {
+    if (disabled.value) return;
+
     wasCleared.value = true;
 
     inputText.value = '';