design-system-next 1.2.18 → 1.2.21

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

@@ -0,0 +1,122 @@
+import { ref, onMounted, watch, computed } from 'vue';
+import type { SetupContext } from 'vue';
+import classNames from 'classnames';
+
+import type { DropdownPropTypes, DropdownEmitTypes } from './dropdown';
+
+interface SelectedItem {
+  text: string;
+  value: string | number;
+}
+
+export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<DropdownEmitTypes>['emit']) => {
+  const dropdownItemBaseClasses = computed(() => {
+    return classNames(
+      'flex cursor-pointer items-center justify-between gap-1.5 rounded-lg p-2',
+      'transition duration-150 ease-in-out',
+      'hover:background-color-hover',
+      'active:background-color-single-active active:scale-95',
+    );
+  });
+
+  const menuOpened = ref(false);
+
+  watch(menuOpened, () => {
+    handlePopperState();
+  });
+
+  const isSingleSelect = computed(() => props.dropdownType === 'single-select');
+  const isMultiSelect = computed(() => props.dropdownType === 'multi-select');
+
+  const selectedItems = ref<SelectedItem[]>([]);
+
+  const handleSelectedItem = (item: SelectedItem) => {
+    if (isSingleSelect.value) {
+      menuOpened.value = false;
+
+      selectedItems.value = [item];
+
+      emit('get-selected-item', selectedItems.value[0]);
+    }
+
+    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);
+    }
+  };
+
+  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 checkboxModels = ref<Record<string, boolean>>({});
+
+  const setCheckboxModels = () => {
+    if (props.menu && props.menu.length > 0) {
+      props.menu.forEach((item) => {
+        checkboxModels.value = Object.assign({}, checkboxModels.value, {
+          [item.text]: false,
+        });
+      });
+    }
+  };
+
+  const setPreSelectedItems = () => {
+    if (props.menu && props.menu.length > 0 && props.preSelectedItems && props.preSelectedItems.length > 0) {
+      (props.preSelectedItems as string[]).forEach((preSelectedItem: string) => {
+        const item = props.menu?.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]);
+        }
+      }
+
+      if (isMultiSelect.value) {
+        emit('get-selected-item', selectedItems.value);
+      }
+    }
+  };
+
+  const handlePopperState = () => {
+    emit('get-popper-state', menuOpened.value);
+  };
+
+  onMounted(() => {
+    menuOpened.value = props.menuOpened;
+
+    setCheckboxModels();
+    setPreSelectedItems();
+    handlePopperState();
+  });
+
+  return {
+    dropdownItemBaseClasses,
+    menuOpened,
+    handleSelectedItem,
+    isItemSelected,
+    checkboxModels,
+  };
+};

package/src/components/input/input.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="wrapperClasses">
-    <label v-if="label" :for="id" :class="labelClasses">
-      {{ label }}
+    <label v-if="props.label" :for="id" :class="labelClasses">
+      {{ props.label }}
     </label>
     <div class="relative">
       <div v-if="$slots.prefix" :class="prefixSlotClasses">
@@ -9,9 +9,10 @@
       </div>
       <input
         :class="[inputClasses, { 'number-input': type === 'number' }]"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :readonly="readonly"
+        :placeholder="props.placeholder"
+        :disabled="props.disabled"
+        :readonly="props.readonly"
+        :value="props.modelValue"
         @input="onInput"
       />
       <div v-if="$slots.trailing" :class="trailingSlotClasses">

package/src/components/sidenav/sidenav.vue

@@ -277,7 +277,7 @@
             <template v-else>
               <Tooltip
                 v-if="!parentLink.hidden"
-                aria-id="default-tooltip"
+                aria-id="sidenav-tooltip-wrapper"
                 placement="right"
                 distance="18"
                 :triggers="['hover']"
@@ -460,7 +460,7 @@
             <template v-else>
               <Tooltip
                 v-if="!parentLink.hidden"
-                aria-id="default-tooltip"
+                aria-id="sidenav-tooltip-wrapper"
                 placement="right"
                 distance="18"
                 :triggers="['hover']"
@@ -504,7 +504,7 @@
         @click="emit('notifications', 'notifications-triggered')"
       >
         <Icon icon="ph:bell" class="h-[1.25em] w-[1.25em]" />
-        <badge
+        <spr-badge
           class="absolute -top-0.5 right-2.5"
           :text="String(props.notificationCount)"
           variant="danger"
@@ -523,7 +523,12 @@
         @click="emit('requests', 'requests-triggered')"
       >
         <Icon icon="ph:check-square" class="h-[1.25em] w-[1.25em]" />
-        <badge class="absolute -top-0.5 right-2.5" :text="String(props.requestCount)" variant="danger" size="small" />
+        <spr-badge
+          class="absolute -top-0.5 right-2.5"
+          :text="String(props.requestCount)"
+          variant="danger"
+          size="small"
+        />
       </div>
     </div>
 
@@ -625,7 +630,7 @@ import 'floating-vue/dist/style.css';
 import { sidenavPropTypes, sidenavEmitTypes } from './sidenav';
 import { useSidenav } from './use-sidenav';
 
-import badge from '../badge/badge.vue';
+import SprBadge from '../badge/badge.vue';
 
 const props = defineProps(sidenavPropTypes);
 const emit = defineEmits(sidenavEmitTypes);

package/src/components/sidepanel/sidepanel.ts

@@ -0,0 +1,87 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+const SIDEPANEL_SIZE = ['sm', 'md', 'lg', 'xl'] as const;
+const SIDEPANEL_POSITION = ['right'] as const;
+
+export const sidepanelPropTypes = {
+  /**
+   * @description Controls whether the side panel is open. 
+   * Set to `true` to display the side panel or `false` to hide it.
+  */
+  isOpen: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description The title displayed in the side panel's header.
+   * If not provided, defaults to 'Sidepanel Header'.
+  */
+  headerTitle: {
+    type: String,
+    default: 'Sidepanel Header'
+  },
+  /**
+   * @description Specifies the size of the side panel.
+   * Acceptable values are: `'sm'`, `'md'`, `'lg'`, `'xl'`.
+   * Defaults to `'sm'`.
+  */
+  size: {
+    type: String as PropType<(typeof SIDEPANEL_SIZE)[number]>,
+    validator: (value: (typeof SIDEPANEL_SIZE)[number]) => SIDEPANEL_SIZE.includes(value),
+    default: 'sm',
+  },
+  /**
+   * @description Sets the height of the side panel.
+   * Accepts a string (e.g., `'500px'`, `'70vh'`) or a number (interpreted as pixels).
+   * Defaults to `'calc(100vh - 32px)'`.
+  */
+  height: {
+    type: [String, Number],
+    default: 'calc(100vh - 32px)',
+  },
+  /**
+   * @description Controls the visibility of the side panel header.
+   * Set to `true` to hide the header, or `false` to display it.
+   * Defaults to `false`.
+  */
+  hideHeader: {
+    type: Boolean,
+    default: false 
+  },
+  /**
+   * @description Specifies the position of the side panel.
+   * Currently, only `'right'` is supported.
+   * Defaults to `'right'`.
+  */
+  position: {
+    type: String as PropType<(typeof SIDEPANEL_POSITION)[number]>,
+    validator: (value: (typeof SIDEPANEL_POSITION)[number]) => SIDEPANEL_POSITION.includes(value),
+    default: 'right',
+  },
+  /**
+   * @description Determines whether a backdrop is displayed behind the side panel.
+   * Set to `true` to enable the backdrop, or `false` to disable it.
+   * Defaults to `true`.
+  */
+  hasBackdrop: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description Controls whether clicking outside the side panel should close it.
+   * Set to `true` to enable closing on outside click, or `false` to disable it.
+   * Defaults to `false`.
+  */
+  closeOutside: {
+    type: Boolean,
+    default: false,
+  }
+}
+
+export const sidepanelEmitTypes = {
+  close: Function,
+  onClose: Function,
+};
+
+export type SidepanelPropTypes = ExtractPropTypes<typeof sidepanelPropTypes>;
+export type SidepanelEmitTypes = typeof sidepanelEmitTypes;

package/src/components/sidepanel/sidepanel.vue

@@ -0,0 +1,60 @@
+<template>
+  <div 
+    v-if="isOpen && hasBackdrop"
+    class="w-screen h-screen bg-mushroom-700/60 fixed top-0 left-0 z-[30]" 
+    @click="handleBackdropClick"
+  ></div>
+  <Transition 
+    :name="`sidepanel`"
+    enter-active-class="transition-transform duration-[0.3s] ease-[ease-out]"
+    leave-active-class="transition-transform duration-[0.3s] ease-[ease-out]"
+    :enter-from-class="sidepanelStartEndState"
+    :leave-to-class="sidepanelStartEndState"
+    :enter-to-class="sidepanelMidState"
+    :leave-from-class="sidepanelMidState"
+    appear
+  >
+    <div
+      v-if="isOpen"
+      ref="sidepanelRef"
+      :class="[
+        sidepanelSizesClasses,
+        'h-[calc(100vh_-_32px)] bg-white-50 rounded-border-radius-xl fixed right-4 z-[30] min-h-[200px] flex flex-col top-1/2 translate-y-[-50%] drop-shadow'
+      ]"
+      :style="{ height: typeof height === 'number' ? `${height}px` : height }"
+    >
+      <template v-if="!hideHeader">
+        <div v-if="!$slots.header" class="flex justify-between tw-min-h-12 p-4 border-mushroom-200 border-b border-solid border-0 subheading-xs text-color-strong">
+          {{ headerTitle }}
+          <Icon 
+            class="cursor-pointer"
+            icon="ph:x"
+            @click="handleClose"
+          />
+        </div>
+        <div v-else>
+          <slot name="header"></slot>
+        </div>
+      </template>
+      <div :class="['overflow-y-auto p-4', {'mb-[52px]': $slots.footer}]">
+        <slot>
+          Sidepanel Content
+        </slot>
+      </div>
+      <div v-if="$slots.footer" class="absolute bottom-0 left-0 w-full border-0 border-t border-mushroom-200 bg-white-50 border-solid py-3 rounded-b-border-radius-xl">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </Transition>
+  
+</template>
+<script lang="ts" setup>
+import { useSidepanel } from './use-sidepanel';
+import { sidepanelPropTypes, sidepanelEmitTypes } from './sidepanel';
+import { Icon } from '@iconify/vue';
+
+const props = defineProps(sidepanelPropTypes);
+const emit = defineEmits(sidepanelEmitTypes);
+
+const { sidepanelRef, sidepanelSizesClasses, sidepanelMidState, sidepanelStartEndState, handleClose, handleBackdropClick } = useSidepanel(props, emit);
+</script>

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

@@ -0,0 +1,81 @@
+import { ref, computed, toRefs, watch, onMounted, onUnmounted } from 'vue';
+
+import classNames from 'classnames';
+import type { SetupContext } from 'vue';
+import type { SidepanelPropTypes, SidepanelEmitTypes } from './sidepanel';
+
+export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<SidepanelEmitTypes>['emit']) => {
+  const sidepanelRef = ref<HTMLDivElement | null>(null);
+  const { size, position } = toRefs(props);
+
+  const sidepanelSizesClasses = computed(() => {
+    return classNames({
+      'w-[360px]': size.value === 'sm',
+      'w-[420px]': size.value === 'md',
+      'w-[480px]': size.value === 'lg',
+    });
+  });
+
+  const sidepanelStartEndState = computed(() => {
+    return classNames({
+      'translate-x-full -translate-y-2/4': position.value === 'right'
+    })
+  })
+
+  const sidepanelMidState = computed(() => {
+    return classNames({
+      'translate-x-0 -translate-y-2/4': position.value === 'right'
+    })
+  })
+
+  const handleClose = () => {
+    emit('close');
+  };
+
+  const handleBackdropClick = () => {
+    if (props.closeOutside) {
+      emit('close')
+    }
+  }
+
+  let ignoreClick = false;
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (ignoreClick) return;
+    if (sidepanelRef.value && !sidepanelRef.value.contains(event.target as Node) && props.closeOutside) {
+      emit('close')
+    }
+  };
+
+  watch(
+    () => props.isOpen,
+    (value) => {
+      if (value) {
+        ignoreClick = true;
+        setTimeout(() => {
+          ignoreClick = false;
+        });
+      } else {
+        emit('onClose');
+      }
+    },
+  );
+
+  onMounted(() => {
+    document.addEventListener('click', handleClickOutside);
+  });
+
+  onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside);
+  });
+
+  return {
+    sidepanelRef,
+    sidepanelSizesClasses,
+    sidepanelMidState,
+    sidepanelStartEndState,
+    handleClose,
+    handleBackdropClick,
+    handleClickOutside
+  }
+}

package/src/components/tooltip/tooltip.ts

@@ -2,7 +2,7 @@ import type { PropType, ExtractPropTypes } from 'vue';
 
 export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
 
-const TOOLTIP_POSITION = [
+const PLACEMENTS = [
   'top',
   'top-start',
   'top-end',
@@ -14,7 +14,7 @@ const TOOLTIP_POSITION = [
   'left-end',
   'right',
   'right-start',
-  'right-end'
+  'right-end',
 ] as const;
 
 export const tooltipPropTypes = {
@@ -26,12 +26,12 @@ export const tooltipPropTypes = {
     default: 'Sample tooltip',
   },
   /**
-   * @description Tooltip Position
+   * @description Tooltip Placement
    */
-  position: {
+  placement: {
     type: String,
-    validator: (value: (typeof TOOLTIP_POSITION)[number]) => TOOLTIP_POSITION.includes(value),
-    default: 'top-start',
+    validator: (value: (typeof PLACEMENTS)[number]) => PLACEMENTS.includes(value),
+    default: 'top',
   },
 };
 

package/src/components/tooltip/tooltip.vue

@@ -1,23 +1,23 @@
 <template>
-  <div v-if="$slots.default" ref="componentRef" class="relative h-min w-min whitespace-nowrap">
+  <Tooltip class="w-fit" aria-id="tooltip-wrapper" :placement="placement">
+    <template #popper>
+      <p>{{ text }}</p>
+
+      <slot name="popper-content" />
+    </template>
+
     <slot />
-    <div
-      :class="[
-        tooltipClasses,
-        'background-color-inverted absolute z-50 w-max min-w-10 max-w-72 text-wrap rounded-md px-size-spacing-4xs py-size-spacing-3xs',
-      ]"
-    >
-      <div class="text-color-inverted-strong body-xs-regular">
-        {{ text }}
-      </div>
-    </div>
-  </div>
+  </Tooltip>
 </template>
 
 <script lang="ts" setup>
+import { Tooltip } from 'floating-vue';
+import 'floating-vue/dist/style.css';
+
 import { tooltipPropTypes } from './tooltip';
 import { useTooltip } from './use-tooltip';
 
 const props = defineProps(tooltipPropTypes);
-const { componentRef, tooltipClasses, text } = useTooltip(props);
+
+const { placement } = useTooltip(props);
 </script>

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

@@ -1,37 +1,13 @@
-import { computed, ref, toRefs } from 'vue';
-import { useElementHover } from '@vueuse/core';
-import { TooltipPropTypes } from './tooltip';
-
-import classNames from 'classnames';
+import { ref } from 'vue';
 
-export const useTooltip = (props: TooltipPropTypes) => {
-  const { position, text } = toRefs(props);
+import { Placement } from 'floating-vue';
 
-  const componentRef = ref<HTMLDivElement | null>(null);
-  const isHovered = useElementHover(componentRef);
+import { TooltipPropTypes } from './tooltip';
 
-  const tooltipClasses = computed(() => {
-    // Tooltip Gap: 6px
-    return classNames({
-      hidden: !isHovered.value,
-      'bottom-[calc(100%+6px)] left-[50%] translate-x-[-50%]': position.value === 'top',
-      'bottom-[calc(100%+6px)] left-0': position.value === 'top-start',
-      'bottom-[calc(100%+6px)] right-0': position.value === 'top-end',
-      'top-[calc(100%+6px)] left-[50%] translate-x-[-50%]': position.value === 'bottom',
-      'top-[calc(100%+6px)] left-0': position.value === 'bottom-start',
-      'top-[calc(100%+6px)] right-0': position.value === 'bottom-end',
-      'left-[calc(100%+6px)] top-[50%] translate-y-[-50%]': position.value === 'right',
-      'left-[calc(100%+6px)] top-0': position.value === 'right-start',
-      'left-[calc(100%+6px)] bottom-0': position.value === 'right-end',
-      'right-[calc(100%+6px)] top-[50%] translate-y-[-50%]': position.value === 'left',
-      'right-[calc(100%+6px)] top-0': position.value === 'left-start',
-      'right-[calc(100%+6px)] bottom-0': position.value === 'left-end',
-    });
-  });
+export const useTooltip = (props: TooltipPropTypes) => {
+  const placement = ref(props.placement as Placement);
 
   return {
-    componentRef,
-    tooltipClasses,
-    text,
+    placement,
   };
 };