design-system-next 1.8.2 → 1.9.2

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

@@ -66,7 +66,7 @@ export const useCalendarCell = (props: CalendarCellPropTypes) => {
 
   const getCalendarCellClassess = computed(() => {
     const calendarCellWrapper =
-      'spr-flex spr-items-center spr-gap-size-spacing-3xs spr-relative spr-w-[217px] spr-rounded-md spr-border-2 spr-p-3 spr-transition-all hover:spr-shadow-md';
+      'spr-flex spr-items-center spr-gap-size-spacing-3xs spr-relative spr-max-w-[217px] spr-rounded-md spr-border-2 spr-p-3 spr-transition-all hover:spr-shadow-md';
 
     const statusCellClasses = classNames({
       'spr-border-dashed': props.status === 'pending',

package/src/components/checkbox/checkbox.ts

@@ -5,7 +5,7 @@ export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<
 export const checkboxPropTypes = {
   modelValue: {
     type: Boolean,
-    required: true,
+    default: false,
   },
   label: {
     type: String,
@@ -19,6 +19,10 @@ export const checkboxPropTypes = {
     type: Boolean,
     default: false,
   },
+  checked: {
+    type: Boolean,
+    default: true,
+  },
 };
 
 export const checkboxEmitTypes = {};

package/src/components/checkbox/checkbox.vue

@@ -3,9 +3,9 @@
     <div class="spr-relative spr-flex spr-items-center">
       <input
         type="checkbox"
-        :checked="props.modelValue"
         :class="checkboxClasses.inputCheckboxClasses"
         :disabled="props.disabled"
+        :checked="props.modelValue || props.checked"
         @change="handleCheckbox"
       />
       <span :class="checkboxClasses.inputCheckboxCheckIconClasses">

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

@@ -13,12 +13,8 @@ interface CheckboxClasses {
   descriptionClasses: string;
 }
 
-interface CheckboxEvent extends Event {
-  target: HTMLInputElement;
-}
-
 export const useCheckbox = (props: CheckboxPropTypes, emit: SetupContext<CheckboxEmitTypes>['emit']) => {
-  const { modelValue, disabled } = toRefs(props);
+  const { modelValue, disabled, checked } = toRefs(props);
 
   const checkboxClasses: ComputedRef<CheckboxClasses> = computed(() => {
     const baseClasses = classNames(
@@ -33,8 +29,8 @@ export const useCheckbox = (props: CheckboxPropTypes, emit: SetupContext<Checkbo
       'spr-h-5 spr-w-5 spr-appearance-none spr-rounded-[2.5px] spr-border-color-supporting spr-border-[1.25px] spr-border-solid',
       'spr-transition spr-duration-150 spr-ease-in-out',
       {
-        'spr-background-color-brand-base spr-border-color-brand-base': modelValue.value,
-        'spr-border-color-disabled spr-background-color-base spr-cursor-not-allowed': disabled.value,
+        'spr-background-color-brand-base spr-border-color-brand-base': modelValue.value || checked.value,
+        'spr-border-color-disabled spr-background-color-base spr-cursor-not-allowed': disabled.value || checked.value,
         'spr-cursor-pointer': !disabled.value,
       },
     );
@@ -42,7 +38,7 @@ export const useCheckbox = (props: CheckboxPropTypes, emit: SetupContext<Checkbo
     const inputCheckboxCheckIconClasses = classNames(
       'spr-flex spr-items-center spr-justify-center spr-pointer-events-none spr-absolute spr-left-1/2 spr-top-1/2 -spr-translate-x-1/2 -spr-translate-y-1/2 spr-transform spr-font-bold spr-opacity-0',
       {
-        'spr-opacity-100': modelValue.value,
+        'spr-opacity-100': modelValue.value || checked.value,
         'spr-text-color-inverted-strong': !disabled.value,
         'spr-text-color-on-fill-disabled': disabled.value,
       },
@@ -65,8 +61,10 @@ export const useCheckbox = (props: CheckboxPropTypes, emit: SetupContext<Checkbo
     };
   });
 
-  const handleCheckbox = (e: CheckboxEvent): void => {
-    emit('update:modelValue', e.target.checked);
+  const handleCheckbox = (event: Event): void => {
+    if (event.target instanceof HTMLInputElement) {
+      emit('update:modelValue', event.target.checked);
+    }
   };
 
   return {

package/src/components/date-picker/date-picker.ts

@@ -4,10 +4,12 @@ export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<
 
 export const REST_DAYS_TYPES = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'] as const;
 
+const POPPER_STRATEGY_TYPES = ['fixed', 'absolute'] as const;
+
 export const datePickerPropTypes = {
   id: {
     type: String,
-    default: '',
+    required: true,
   },
   modelValue: {
     type: String,
@@ -70,6 +72,11 @@ export const datePickerPropTypes = {
     type: String,
     default: '100%',
   },
+  popperStrategy: {
+    type: String,
+    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+    default: 'absolute',
+  },
 };
 
 export type RestDayType = (typeof REST_DAYS_TYPES)[number];

package/src/components/date-picker/date-picker.vue

@@ -9,11 +9,16 @@
       :popper-hide-triggers="[]"
       :auto-hide="false"
       :disabled="isDatePickerPopperDisabled"
+      :container="`#${props.id}`"
+      :strategy="
+        props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
+      "
+      :delay="0"
       :style="{
         width: props.width,
       }"
     >
-      <div class="spr-grid spr-gap-2">
+      <div :id="props.id" class="spr-grid spr-gap-2">
         <label v-if="props.label" :for="props.id" :class="datePickerClasses.labelClasses">
           {{ props.label }}
         </label>

package/src/components/dropdown/dropdown.ts

@@ -2,8 +2,9 @@ import type { PropType, ExtractPropTypes } from 'vue';
 
 export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
 
-const DROPDOWN_TYPES = ['single-select', 'multi-select'] as const;
-const PLACEMENTS = [
+const GROUPED_ITEMS_BY_TYPES = ['A-Z', 'Z-A'] as const;
+
+const PLACEMENTS_TYPES = [
   'auto',
   'auto-start',
   'auto-end',
@@ -21,41 +22,68 @@ const PLACEMENTS = [
   'left-end',
 ] as const;
 
+const POPPER_STRATEGY_TYPES = ['fixed', 'absolute'] as const;
+
 export type DropdownMenuType = {
   text: string;
   value: string;
 };
 
 export const dropdownPropTypes = {
-  menu: {
-    type: Array as PropType<DropdownMenuType[]>,
+  id: {
+    type: String,
     required: true,
-    default: [],
   },
-  preSelectedItems: {
-    type: Array,
-    default: [],
+  modelValue: {
+    type: Array as PropType<string[]>,
+    default: () => [],
   },
-  dropdownType: {
-    type: String,
-    validator: (value: (typeof DROPDOWN_TYPES)[number]) => DROPDOWN_TYPES.includes(value),
+  menuList: {
+    type: Array as PropType<{ text: string; value: string }[]>,
     required: true,
-    default: 'single-select',
+    default: [],
   },
-  placement: {
+  searchString: {
     type: String,
-    validator: (value: (typeof PLACEMENTS)[number]) => PLACEMENTS.includes(value),
-    default: 'bottom',
+    default: '',
   },
-  menuOpened: {
+  multiSelect: {
     type: Boolean,
     default: false,
   },
+  placement: {
+    type: String as PropType<(typeof PLACEMENTS_TYPES)[number]>,
+    validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
+    default: 'bottom',
+  },
+  groupItemsBy: {
+    type: String as PropType<(typeof GROUPED_ITEMS_BY_TYPES)[number]>,
+    validator: (value: (typeof GROUPED_ITEMS_BY_TYPES)[number] | undefined) => {
+      return value === undefined || GROUPED_ITEMS_BY_TYPES.includes(value);
+    },
+  },
+  wrapperPosition: {
+    type: String,
+    default: 'relative',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  popperWidth: {
+    type: String,
+    default: '100%',
+  },
+  popperStrategy: {
+    type: String,
+    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+    default: 'absolute',
+  },
 };
 
 export const dropdownEmitTypes = {
   'get-selected-item': Object,
-  'get-popper-state': Boolean,
+  'infinite-scroll-trigger': Boolean,
 };
 
 export type DropdownPropTypes = ExtractPropTypes<typeof dropdownPropTypes>;

package/src/components/dropdown/dropdown.vue

@@ -1,40 +1,49 @@
 <template>
   <Menu
-    v-model:shown="menuOpenedState"
-    class="spr-w-fit"
+    v-model:shown="dropdownPopperState"
     aria-id="dropdown-wrapper"
     distance="4"
     :placement="props.placement"
     :triggers="[]"
     :popper-hide-triggers="[]"
+    :auto-hide="false"
+    :container="`#${props.id}`"
+    :strategy="
+      props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
+    "
+    :delay="0"
+    :style="{
+      position: props.wrapperPosition,
+      width: props.width,
+    }"
   >
-    <div @click="menuOpenedState = !menuOpenedState">
+    <div @click="dropdownPopperState = true">
       <slot />
     </div>
 
+    <div
+      :id="props.id"
+      :style="{
+        width: props.popperWidth,
+      }"
+    ></div>
+
     <template #popper>
-      <div class="spr-grid spr-gap-0.5">
-        <div
-          v-for="(item, index) in props.menu"
-          :key="index"
-          :class="[
-            dropdownItemBaseClasses,
-            {
-              'spr-background-color-single-active': isItemSelected(item),
-            },
-          ]"
-          @click="handleSelectedItem(item)"
-        >
-          <spr-checkbox v-if="props.dropdownType === 'multi-select'" v-model="checkboxModels[item.text]" />
-          <div class="spr-flex spr-w-full spr-items-center">
-            <span class="spr-text-xs">{{ item.text }}</span>
-          </div>
-          <Icon
-            v-if="props.dropdownType === 'single-select' && isItemSelected(item)"
-            class="spr-text-color-brand-base spr-w-[1.39em]"
-            icon="ph:check"
+      <div ref="dropdownRef" class="spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-p-2">
+        <template v-if="dropdownMenuList.length > 0">
+          <SprList
+            v-model="preSelectedItems"
+            :menu-list="dropdownMenuList"
+            :group-items-by="props.groupItemsBy"
+            :multi-select="props.multiSelect"
+            @get-selected-item="handleSelectedItem"
           />
-        </div>
+        </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>
   </Menu>
@@ -42,19 +51,18 @@
 
 <script lang="ts" setup>
 import { Menu } from 'floating-vue';
-import { Icon } from '@iconify/vue';
 
 import 'floating-vue/dist/style.css';
 
 import { dropdownPropTypes, dropdownEmitTypes } from './dropdown';
 import { useDropdown } from './use-dropdown';
 
-import SprCheckbox from '../checkbox/checkbox.vue';
+import SprList from '../list/list.vue';
 
 const props = defineProps(dropdownPropTypes);
 const emit = defineEmits(dropdownEmitTypes);
 
-const { dropdownItemBaseClasses, menuOpenedState, handleSelectedItem, isItemSelected, checkboxModels } = useDropdown(
+const { dropdownPopperState, dropdownRef, preSelectedItems, dropdownMenuList, handleSelectedItem } = useDropdown(
   props,
   emit,
 );

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

@@ -1,6 +1,5 @@
-import { ref, toRefs, onMounted, watch, computed, ComputedRef } from 'vue';
-
-import classNames from 'classnames';
+import { ref, toRefs, onMounted, watch } from 'vue';
+import { onClickOutside, useInfiniteScroll } from '@vueuse/core';
 
 import type { SetupContext } from 'vue';
 import type { DropdownPropTypes, DropdownEmitTypes } from './dropdown';
@@ -11,115 +10,67 @@ interface SelectedItem {
 }
 
 export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<DropdownEmitTypes>['emit']) => {
-  const { menu, preSelectedItems, dropdownType, menuOpened } = toRefs(props);
-
-  const dropdownItemBaseClasses: ComputedRef<string> = computed(() => {
-    return classNames(
-      'spr-flex spr-cursor-pointer spr-items-center spr-justify-between spr-gap-1.5 spr-rounded-lg spr-p-2',
-      'spr-transition spr-duration-150 spr-ease-in-out',
-      'hover:spr-background-color-hover',
-      'active:spr-background-color-single-active active:spr-scale-95',
-    );
-  });
+  const { modelValue, menuList, searchString, multiSelect } = toRefs(props);
 
-  const menuOpenedState = ref<boolean>(false);
+  const dropdownPopperState = ref<boolean>(false);
 
-  watch(menuOpenedState, () => {
-    handlePopperState();
-  });
+  const dropdownRef = ref<HTMLDivElement | null>(null);
 
-  const isSingleSelect = computed(() => dropdownType.value === 'single-select');
-  const isMultiSelect = computed(() => dropdownType.value === 'multi-select');
+  const preSelectedItems = ref<Array<string>>([]);
 
-  const selectedItems = ref<SelectedItem[]>([]);
+  const initialMenuList = ref<{ text: string; value: string }[]>([]);
+  const dropdownMenuList = ref<{ text: string; value: string }[]>([]);
 
   const handleSelectedItem = (item: SelectedItem) => {
-    if (isSingleSelect.value) {
-      menuOpenedState.value = false;
-
-      selectedItems.value = [item];
-
-      emit('get-selected-item', selectedItems.value[0]);
+    if (!multiSelect.value) {
+      dropdownPopperState.value = false;
     }
 
-    if (isMultiSelect.value) {
-      const index = selectedItems.value.findIndex((selectedItem: SelectedItem) => selectedItem.value === item.value);
-
-      if (index === -1) {
-        checkboxModels.value[item.text] = true;
-        selectedItems.value.push(item);
-      } else {
-        checkboxModels.value[item.text] = false;
-        selectedItems.value.splice(index, 1);
-      }
-
-      emit('get-selected-item', selectedItems.value);
-    }
+    emit('get-selected-item', item);
   };
 
-  const isItemSelected = (item: SelectedItem) => {
-    if (Array.isArray(selectedItems.value)) {
-      return selectedItems.value.some((selectedItem) => selectedItem.text === item.text);
-    }
-
-    return (selectedItems.value[0] as SelectedItem).text === item.text;
+  const setDropdownMenuList = () => {
+    initialMenuList.value = menuList.value;
+    dropdownMenuList.value = initialMenuList.value;
   };
 
-  const checkboxModels = ref<Record<string, boolean>>({});
+  const handleSearch = () => {
+    if (menuList.value && menuList.value.length > 0) {
+      dropdownMenuList.value = initialMenuList.value.filter((item) => {
+        const searchTerm = searchString.value.toLowerCase();
 
-  const setCheckboxModels = () => {
-    if (menu.value && menu.value.length > 0) {
-      menu.value.forEach((item) => {
-        checkboxModels.value = Object.assign({}, checkboxModels.value, {
-          [item.text]: false,
-        });
+        return item.text.toLowerCase().includes(searchTerm) || item.value.toLowerCase().includes(searchTerm);
       });
     }
   };
 
-  const setPreSelectedItems = () => {
-    if (menu.value && menu.value.length > 0 && preSelectedItems.value && preSelectedItems.value.length > 0) {
-      (preSelectedItems.value as string[]).forEach((preSelectedItem: string) => {
-        const item = menu.value.find((menuItem) => menuItem.text === preSelectedItem);
-
-        if (item) {
-          if (isMultiSelect.value) {
-            checkboxModels.value[item.text] = true;
-          }
-
-          selectedItems.value.push(item);
-        }
-      });
-
-      if (isSingleSelect.value) {
-        if (selectedItems.value.length > 0) {
-          emit('get-selected-item', selectedItems.value[0]);
-        }
-      }
+  watch(searchString, () => {
+    handleSearch();
+  });
 
-      if (isMultiSelect.value) {
-        emit('get-selected-item', selectedItems.value);
-      }
-    }
-  };
+  onClickOutside(dropdownRef, () => {
+    dropdownPopperState.value = false;
+  });
 
-  const handlePopperState = () => {
-    emit('get-popper-state', menuOpenedState.value);
-  };
+  useInfiniteScroll(
+    dropdownRef,
+    () => {
+      emit('infinite-scroll-trigger', true);
+    },
+    { distance: 10 },
+  );
 
   onMounted(() => {
-    menuOpenedState.value = menuOpened.value;
+    preSelectedItems.value = modelValue.value;
 
-    setCheckboxModels();
-    setPreSelectedItems();
-    handlePopperState();
+    setDropdownMenuList();
   });
 
   return {
-    dropdownItemBaseClasses,
-    menuOpenedState,
+    dropdownPopperState,
+    dropdownRef,
+    preSelectedItems,
+    dropdownMenuList,
     handleSelectedItem,
-    isItemSelected,
-    checkboxModels,
   };
 };

package/src/components/input/input.ts

@@ -5,8 +5,28 @@ export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<
 const TRAILING_SIZES = ['xs', 'sm', 'md'] as const;
 
 export const INPUT_TYPES = [
-  'button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 
-  'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week'
+  'button',
+  'checkbox',
+  'color',
+  'date',
+  'datetime-local',
+  'email',
+  'file',
+  'hidden',
+  'image',
+  'month',
+  'number',
+  'password',
+  'radio',
+  'range',
+  'reset',
+  'search',
+  'submit',
+  'tel',
+  'text',
+  'time',
+  'url',
+  'week',
 ] as const;
 
 export const inputPropTypes = {
@@ -16,7 +36,11 @@ export const inputPropTypes = {
   },
   modelValue: {
     type: String,
-    required: true,
+    default: '',
+  },
+  value: {
+    type: String,
+    default: '',
   },
   label: {
     type: String,
@@ -43,6 +67,14 @@ export const inputPropTypes = {
     type: Boolean,
     default: false,
   },
+  minLength: {
+    type: Number,
+    default: 0,
+  },
+  maxLength: {
+    type: Number,
+    default: 0,
+  },
   error: {
     type: Boolean,
     default: false,
@@ -54,16 +86,16 @@ export const inputPropTypes = {
   },
   helperText: {
     type: String,
-    default: ''
+    default: '',
   },
   helperIcon: {
     type: String,
-    default: null
+    default: null,
   },
   displayHelper: {
     type: Boolean,
     default: false,
-  }
+  },
 };
 
 export const inputEmitTypes = {

package/src/components/input/input.vue

@@ -3,6 +3,7 @@
     <label v-if="props.label" :for="id" :class="inputClasses.labelClasses">
       {{ props.label }}
     </label>
+
     <div class="spr-relative">
       <div v-if="$slots.prefix" :class="inputClasses.prefixSlotClasses">
         <slot name="prefix" />
@@ -12,8 +13,10 @@
         :placeholder="props.placeholder"
         :disabled="props.disabled"
         :readonly="props.readonly"
-        :value="props.modelValue"
+        :value="props.modelValue ? props.modelValue : props.value"
         :type="props.type"
+        :minlength="props.minLength"
+        :maxlength="props.maxLength"
         @input="onInput"
       />
       <div v-if="$slots.trailing" :class="inputClasses.trailingSlotClasses">

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

@@ -32,7 +32,7 @@ export const useInput = (
     });
 
     const inputTextClasses = classNames(
-      'spr-block spr-w-full spr-px-size-spacing-2xs spr-py-size-spacing-4xs spr-rounded-border-radius-md spr-outline-none spr-ring-0',
+      'spr-block spr-h-9 spr-w-full spr-px-size-spacing-2xs spr-py-size-spacing-4xs spr-rounded-border-radius-md spr-outline-none spr-ring-0 spr-box-border',
       'spr-text-color-strong spr-font-size-200 [font-weight:inherit]',
       'spr-border spr-border-solid',
       'placeholder:spr-text-mushroom-300',
@@ -44,7 +44,7 @@ export const useInput = (
           disabled.value,
         'spr-pr-[5%]': slots.icon,
         'spr-pl-size-spacing-lg': slots.prefix,
-		    '!spr-pl-size-spacing-3xl': props.type === 'url',
+        '!spr-pl-size-spacing-3xl': props.type === 'url',
         'spr-pr-[93%] sm:spr-pr-[85%]': offsetSize.value === 'xs' && slots.trailing,
         'spr-pr-[90%] sm:spr-pr-[80%]': offsetSize.value === 'sm' && slots.trailing,
         'spr-pr-[50%]': offsetSize.value === 'md' && slots.trailing,
@@ -77,20 +77,24 @@ export const useInput = (
       },
     );
 
-    const helperClasses = classNames(
-      {
-        'spr-text-color-danger-base': error.value,
-        'spr-text-color-supporting': !error.value,
-      }
-    );
+    const helperClasses = classNames({
+      'spr-text-color-danger-base': error.value,
+      'spr-text-color-supporting': !error.value,
+    });
 
-    return { baseClasses, labelClasses, inputTextClasses, iconSlotClasses, prefixSlotClasses, trailingSlotClasses, helperClasses };
+    return {
+      baseClasses,
+      labelClasses,
+      inputTextClasses,
+      iconSlotClasses,
+      prefixSlotClasses,
+      trailingSlotClasses,
+      helperClasses,
+    };
   });
 
-  const onInput = (event: Event) => {
-    const target = event.target as HTMLInputElement;
-    
-    modelValue.value = target.value;
+  const onInput = () => {
+    emit('update:modelValue', modelValue.value);
   };
 
   return {

package/src/components/list/list.ts

@@ -0,0 +1,34 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const GROUPED_ITEMS_BY_TYPES = ['A-Z', 'Z-A'] as const;
+
+export const listPropTypes = {
+  modelValue: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  menuList: {
+    type: Array as PropType<{ text: string; value: string }[]>,
+    required: true,
+    default: [],
+  },
+  groupItemsBy: {
+    type: String as PropType<(typeof GROUPED_ITEMS_BY_TYPES)[number]>,
+    validator: (value: (typeof GROUPED_ITEMS_BY_TYPES)[number] | undefined) => {
+      return value === undefined || GROUPED_ITEMS_BY_TYPES.includes(value);
+    },
+  },
+  multiSelect: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const listEmitTypes = {
+  'get-selected-item': Object,
+};
+
+export type ListPropTypes = ExtractPropTypes<typeof listPropTypes>;
+export type ListEmitTypes = typeof listEmitTypes;