design-system-next 1.8.2 → 1.9.2

package/src/components/list/list.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="spr-font-main">
+    <template v-if="props.groupItemsBy">
+      <div class="spr-grid spr-gap-2">
+        <div v-for="(items, labelIndex) in groupedMenuList" :key="labelIndex" class="spr-grid spr-gap-0.5">
+          <label v-if="labelIndex" class="spr-label-sm-regular spr-text-color-base spr-p-2">
+            {{ labelIndex }}
+          </label>
+          <div
+            v-for="(item, itemIndex) in items"
+            :key="itemIndex"
+            :class="getListItemClasses(item)"
+            @click="handleSelectedItem(item)"
+          >
+            <spr-checkbox v-if="props.multiSelect" :checked="isItemSelected(item)" />
+            <div class="spr-flex spr-w-full spr-items-center">
+              <span class="spr-text-xs">{{ item.text }}</span>
+            </div>
+            <Icon
+              v-if="isItemSelected(item) && !props.multiSelect"
+              class="spr-text-color-brand-base spr-w-[1.39em]"
+              icon="ph:check"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div
+        v-for="(item, index) in initialMenuList"
+        :key="index"
+        :class="getListItemClasses(item)"
+        @click="handleSelectedItem(item)"
+      >
+        <spr-checkbox v-if="props.multiSelect" :checked="isItemSelected(item)" />
+        <div class="spr-flex spr-w-full spr-items-center">
+          <span class="spr-text-xs">{{ item.text }}</span>
+        </div>
+        <Icon
+          v-if="isItemSelected(item) && !props.multiSelect"
+          class="spr-text-color-brand-base spr-w-[1.39em]"
+          icon="ph:check"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+
+import { listPropTypes, listEmitTypes } from './list';
+import { useList } from './use-list';
+
+import SprCheckbox from '../checkbox/checkbox.vue';
+
+const props = defineProps(listPropTypes);
+const emit = defineEmits(listEmitTypes);
+
+const { initialMenuList, groupedMenuList, isItemSelected, getListItemClasses, handleSelectedItem } = useList(
+  props,
+  emit,
+);
+</script>

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

@@ -0,0 +1,149 @@
+import { ref, toRefs, computed, ComputedRef, onMounted, watch } from 'vue';
+
+import classNames from 'classnames';
+
+import type { SetupContext } from 'vue';
+import type { ListPropTypes, ListEmitTypes } from './list';
+
+interface ListClasses {
+  listItemClasses: string;
+}
+
+interface SelectedItem {
+  text: string;
+  value: string | number;
+}
+
+export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>['emit']) => {
+  const { modelValue, menuList, groupItemsBy, multiSelect } = toRefs(props);
+
+  const listClasses: ComputedRef<ListClasses> = computed(() => {
+    const listItemClasses = 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-[.98]',
+    );
+
+    return { listItemClasses };
+  });
+
+  const initialMenuList = ref<{ text: string; value: string }[]>([]);
+
+  const groupedMenuList = ref<{ [key: string]: { text: string; value: string }[] }>({});
+
+  const selectedItems = ref<SelectedItem[]>([]);
+
+  // #region - Helper Methods
+  const isItemSelected = (item: SelectedItem) => {
+    return selectedItems.value.some((selectedItem) => selectedItem.text === item.text);
+  };
+
+  const setMenuList = () => {
+    if (menuList.value && menuList.value.length > 0) {
+      initialMenuList.value = menuList.value;
+
+      if (groupItemsBy?.value) {
+        setGroupedMenuList();
+      }
+    }
+  };
+
+  const setGroupedMenuList = () => {
+    if (!groupItemsBy?.value) return;
+
+    const groupedItems: { [key: string]: { text: string; value: string }[] } = {};
+
+    initialMenuList.value.forEach((item) => {
+      const firstCharacter = item.text.charAt(0);
+      const groupKey = /^\d/.test(firstCharacter) ? '' : firstCharacter.toUpperCase();
+
+      if (!groupedItems[groupKey]) {
+        groupedItems[groupKey] = [];
+      }
+
+      groupedItems[groupKey].push(item);
+    });
+
+    const sortedGroupedItems = Object.keys(groupedItems)
+      .sort((a, b) => {
+        if (a === '') return -1;
+        if (b === '') return 1;
+        return groupItemsBy.value === 'Z-A' ? b.localeCompare(a) : a.localeCompare(b);
+      })
+      .reduce((result: { [key: string]: { text: string; value: string }[] }, key) => {
+        const sortedItems = groupedItems[key].sort((a, b) => {
+          const comparison = a.text.localeCompare(b.text);
+          return groupItemsBy.value === 'Z-A' ? -comparison : comparison;
+        });
+
+        result[key] = sortedItems;
+
+        return result;
+      }, {});
+
+    groupedMenuList.value = sortedGroupedItems;
+  };
+
+  const setPreSelectedItems = () => {
+    if (modelValue.value && modelValue.value.length > 0) {
+      modelValue.value.forEach((preSelectedItem: string) => {
+        const item = initialMenuList.value.find(
+          (menuItem) =>
+            String(menuItem.text) === String(preSelectedItem) || String(menuItem.value) === String(preSelectedItem),
+        );
+
+        if (item) {
+          selectedItems.value.push(item);
+        }
+      });
+    }
+  };
+
+  const getListItemClasses = (item: SelectedItem) => ({
+    [listClasses.value.listItemClasses]: true,
+    'spr-background-color-single-active': isItemSelected(item),
+  });
+
+  const handleSelectedItem = (item: SelectedItem) => {
+    if (!multiSelect.value) {
+      selectedItems.value = [item];
+
+      emit('get-selected-item', selectedItems.value[0]);
+    } else {
+      const index = selectedItems.value.findIndex((selectedItem: SelectedItem) => selectedItem.value === item.value);
+
+      if (index === -1) {
+        selectedItems.value.push(item);
+      } else {
+        selectedItems.value.splice(index, 1);
+      }
+
+      emit('get-selected-item', selectedItems.value);
+    }
+  };
+  // #endregion - Helper Methods
+
+  watch(
+    menuList,
+    () => {
+      setMenuList();
+      setPreSelectedItems();
+    },
+    { immediate: true },
+  );
+
+  onMounted(() => {
+    setMenuList();
+    setPreSelectedItems();
+  });
+
+  return {
+    listClasses,
+    initialMenuList,
+    groupedMenuList,
+    isItemSelected,
+    getListItemClasses,
+    handleSelectedItem,
+  };
+};

package/src/components/modal/modal.ts

@@ -5,16 +5,19 @@ export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<
 const MODAL_SIZE = ['sm', 'md', 'lg', 'xl'] as const;
 
 export const modalPropTypes = {
-  open: {
+  modelValue: {
     type: Boolean,
     default: false,
   },
-
   title: {
     type: String,
     default: '',
   },
-  hasHeader: {
+  closeButtonX: {
+    type: Boolean,
+    default: true,
+  },
+  contentPadding: {
     type: Boolean,
     default: true,
   },
@@ -25,16 +28,18 @@ export const modalPropTypes = {
   size: {
     type: String as PropType<(typeof MODAL_SIZE)[number]>,
     validator: (value: (typeof MODAL_SIZE)[number]) => MODAL_SIZE.includes(value),
-    default: 'sm',
+    default: 'md',
   },
-  hasClose: {
+  staticBackdrop: {
     type: Boolean,
-    default: true,
+    default: false,
   },
 };
 
 export type ModalPropTypes = ExtractPropTypes<typeof modalPropTypes>;
+
 export const modalEmitTypes = {
-  onClose: () => true,
+  'update:modelValue': (value: boolean) => value,
 };
+
 export type ModalEmitTypes = typeof modalEmitTypes;

package/src/components/modal/modal.vue

@@ -1,35 +1,29 @@
 <template>
-  <dialog ref="dialog" :class="[modalClasses.baseClasses, modalClasses.sizeClasses]">
-    <header
-      v-if="hasHeader"
-      :class="[
-        'spr-border-color-weak spr-background-color spr-flex spr-items-center spr-justify-between spr-gap-size-spacing-3xs 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-text-color-strong spr-subheading-xs',
-      ]"
-    >
-      <slot name="header" />
-
-      <div v-if="!$slots.header">{{ title }}</div>
-
-      <span v-if="hasClose" class="spr-text-color-weak spr-subheading-xs spr-cursor-pointer" @click="closeModal">
-        <Icon icon="ph:x" />
-      </span>
-    </header>
-
-    <div class="spr-body-sm-regular">
-      <slot />
-    </div>
+  <transition name="backdrop-transition">
+    <div v-if="props.modelValue" :class="modalClasses.backdropClasses" @click="handleBackdropClick"></div>
+  </transition>
+
+  <transition name="modal-transition">
+    <div v-if="props.modelValue" id="modal" :class="modalClasses.baseClasses">
+      <header v-if="$slots.header || title" :class="modalClasses.headerClasses">
+        <span v-if="!$slots.header && title">{{ title }}</span>
+
+        <slot name="header"></slot>
+
+        <span v-if="props.closeButtonX" :class="modalClasses.headerCloseButtonXClasses" @click="handleCloseModal">
+          <Icon icon="ph:x" />
+        </span>
+      </header>
+
+      <div :class="modalClasses.contentClasses">
+        <slot />
+      </div>
 
-    <footer
-      v-if="hasFooter"
-      :class="[
-        'spr-border-color-weak spr-background-color spr-flex spr-w-full spr-items-center 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-text-color-strong spr-subheading-xs',
-      ]"
-    >
-      <slot name="footer" />
-    </footer>
-  </dialog>
+      <footer v-if="$slots.footer" :class="modalClasses.footerClasses">
+        <slot name="footer" />
+      </footer>
+    </div>
+  </transition>
 </template>
 
 <script lang="ts" setup>
@@ -41,12 +35,58 @@ import { useModal } from './use-modal';
 const props = defineProps(modalPropTypes);
 const emit = defineEmits(modalEmitTypes);
 
-const { modalClasses, dialog, closeModal } = useModal(props, emit);
+const { modalClasses, handleCloseModal, handleBackdropClick } = useModal(props, emit);
 </script>
 
 <style scoped>
-/* Tailwind CSS does not directly support the ::backdrop pseudo-element, need to add this */
-.spr-modal::backdrop {
-  @apply spr-bg-overlay;
+.backdrop-transition-enter-active,
+.backdrop-transition-leave-active {
+  transition: opacity 150ms ease-in-out;
+}
+
+.backdrop-transition-enter-from,
+.backdrop-transition-leave-to {
+  opacity: 0;
+}
+
+.modal-transition-enter-active,
+.modal-transition-leave-active {
+  transition:
+    opacity 150ms ease-in-out,
+    transform 150ms ease-in-out;
+}
+
+.modal-transition-enter-from,
+.modal-transition-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-50%) scale(0.9);
+}
+
+.modal-transition-enter-to,
+.modal-transition-leave-from {
+  opacity: 1;
+  transform: translateX(-50%) translateY(-50%) scale(1);
+}
+
+.bounce-animation {
+  animation: bounce 0.5s ease;
+}
+
+@keyframes bounce {
+  0% {
+    transform: translateX(-50%) translateY(-50%) scale(1);
+  }
+  30% {
+    transform: translateX(-50%) translateY(-50%) scale(1.02);
+  }
+  50% {
+    transform: translateX(-50%) translateY(-50%) scale(0.98);
+  }
+  70% {
+    transform: translateX(-50%) translateY(-50%) scale(1.02);
+  }
+  100% {
+    transform: translateX(-50%) translateY(-50%) scale(1);
+  }
 }
 </style>

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

@@ -1,4 +1,4 @@
-import { ref, toRefs, computed, ComputedRef, watch } from 'vue';
+import { ref, toRefs, computed, ComputedRef } from 'vue';
 
 import classNames from 'classnames';
 
@@ -6,62 +6,96 @@ import type { SetupContext } from 'vue';
 import type { ModalEmitTypes, ModalPropTypes } from './modal';
 
 interface ModalClasses {
+  backdropClasses: string;
   baseClasses: string;
-  sizeClasses: string;
+  headerClasses: string;
+  headerCloseButtonXClasses: string;
+  contentClasses: string;
+  footerClasses: string;
 }
 
 export const useModal = (props: ModalPropTypes, emit: SetupContext<ModalEmitTypes>['emit']) => {
-  const { size } = toRefs(props);
-
-  const dialog = ref<HTMLDialogElement | null>(null);
+  const { size, contentPadding, staticBackdrop } = toRefs(props);
 
   const modalClasses: ComputedRef<ModalClasses> = computed(() => {
+    const backdropClasses = classNames(
+      'spr-fixed spr-bottom-0 spr-left-0 spr-right-0 spr-top-0 spr-z-[9999999] spr-h-full spr-w-full spr-bg-[#4C5857] spr-opacity-60',
+    );
+
     const baseClasses = classNames(
-      'spr-modal spr-background-color spr-rounded-border-radius-xl spr-p-0 spr-drop-shadow-[0_2px_8px_-2px_rgba(38,43,43,0.20)]',
+      'spr-fixed spr-z-[99999999] spr-left-1/2 spr-top-1/2 spr-transform -spr-translate-x-1/2 -spr-translate-y-1/2',
+      'spr-background-color spr-rounded-xl',
       'spr-border spr-border-solid spr-border-color-weak',
+      'sm:spr-w-[calc(100%-2rem)] sm:spr-max-w-[calc(100%-2rem)]',
+      {
+        'spr-w-[360px] spr-max-w-[480px]': size.value === 'sm',
+        'spr-w-[480px] spr-max-w-[720px]': size.value === 'md',
+        'spr-w-[720px] spr-max-w-[960px]': size.value === 'lg',
+        'spr-w-[900px] spr-max-w-[1200px]': size.value === 'xl',
+      },
+      { 'bounce-animation': staticBackdropClicked.value },
+    );
+
+    const headerClasses = classNames(
+      'spr-flex spr-items-start spr-justify-between spr-gap-2 spr-px-4 spr-py-3',
+      'spr-text-color-strong spr-subheading-xs',
+      'spr-border-color-weak spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid',
+      'spr-rounded-tl-xl spr-rounded-tr-xl',
+      'sm:spr-p-2',
+    );
+
+    const headerCloseButtonXClasses = classNames(
+      'spr-text-color-weak spr-subheading-xs spr-mt-0.5 spr-cursor-pointer',
+      'spr-transition spr-duration-150 spr-ease-in-out',
+      'hover:spr-text-color-base',
+      'active:spr-text-color-strong active:spr-scale-75',
     );
 
-    const sizeClasses = classNames({
-      'spr-min-w-[360px] spr-max-w-[800px] ': size.value === 'sm',
-      'spr-min-w-[480px] spr-max-w-[800px] ': size.value === 'md',
-      'spr-w-[720px]': size.value === 'lg',
-      'spr-w-[1280px]': size.value === 'xl',
-    });
+    const contentClasses = classNames(
+      'spr-body-sm-regular spr-max-h-[calc(100vh-100px)] spr-overflow-y-auto spr-overflow-x-hidden',
+      {
+        'spr-p-4 sm:spr-p-2': contentPadding.value,
+      },
+    );
+
+    const footerClasses = classNames(
+      'spr-border-color-weak spr-border-x-0 spr-border-b-0 spr-border-t spr-border-solid',
+      'spr-flex spr-w-full spr-items-center spr-px-size-spacing-xs spr-py-size-spacing-2xs',
+      'spr-text-color-strong spr-subheading-xs',
+    );
 
     return {
+      backdropClasses,
       baseClasses,
-      sizeClasses,
+      headerClasses,
+      headerCloseButtonXClasses,
+      contentClasses,
+      footerClasses,
     };
   });
 
-  const openModal = () => {
-    if (dialog.value) {
-      dialog.value.showModal();
-    }
+  const staticBackdropClicked = ref(false);
+
+  const handleCloseModal = () => {
+    emit('update:modelValue', false);
   };
 
-  const closeModal = () => {
-    if (dialog.value) {
-      dialog.value.close();
-      emit('onClose');
+  const handleBackdropClick = () => {
+    if (!staticBackdrop.value) {
+      handleCloseModal();
+    } else {
+      staticBackdropClicked.value = true;
+
+      setTimeout(() => {
+        staticBackdropClicked.value = false;
+      }, 500);
     }
   };
 
-  watch(
-    () => props.open,
-    (value) => {
-      if (value) {
-        openModal();
-      } else {
-        closeModal();
-      }
-    },
-  );
-
   return {
     modalClasses,
-    dialog,
-    openModal,
-    closeModal,
+    staticBackdropClicked,
+    handleCloseModal,
+    handleBackdropClick,
   };
 };