design-system-next 2.20.0 → 2.20.4

package/src/App.vue

@@ -1,3 +1,53 @@
 <template>
-  <div>Test Component Here</div>
+  <spr-dropdown
+    id="sample-dropdownCustomPopper"
+    width="150px"
+    :triggers="['click']"
+    :popper-triggers="['click']"
+    popper-width="500px"
+    :auto-hide="false"
+  >
+    <spr-button class="spr-w-full" tone="success" has-icon>
+      <span>Custom Popper</span>
+      <Icon icon="ph:caret-down" />
+    </spr-button>
+
+    <template #popper>
+      <spr-select-multiple
+        id="sample-select"
+        v-model="selectModel"
+        label="Select Label"
+        placeholder="Select an option"
+        :options="options"
+        popper-container="body"
+        wrapper-position="relative"
+        popper-strategy="fixed"
+        placement="bottom"
+      />
+    </template>
+  </spr-dropdown>
 </template>
+
+<script setup>
+import { ref } from 'vue';
+
+import SprDropdown from './components/dropdown/dropdown.vue';
+import SprButton from './components/button/button.vue';
+import SprSelectMultiple from './components/select/select-multiple/select-multiple.vue';
+
+const selectModel = ref('');
+
+const options = ref([
+  { text: 'Apple', value: 'apple' },
+  { text: 'Banana', value: 'banana' },
+  { text: 'Cherry', value: 'cherry' },
+  { text: 'Date', value: 'date' },
+  { text: 'Elderberry', value: 'elderberry' },
+  { text: 'Fig', value: 'fig' },
+  { text: 'Grape', value: 'grape' },
+  { text: 'Nectarine', value: 'nectarine' },
+  { text: 'Orange', value: 'orange' },
+  { text: 'Papaya', value: 'papaya' },
+  { text: '89 Quince', value: '50' },
+]);
+</script>

package/src/assets/scripts/border-radius.ts

@@ -1,15 +1,15 @@
-type BorderRadius = {
-  [key: string]: string;
-};
-
-const borderRadius: BorderRadius = {
-  'border-radius-2xs': 'var(--size-50)',
-  'border-radius-xs': 'var(--size-100)',
-  'border-radius-sm': 'var(--size-150)',
-  'border-radius-md': 'var(--size-200)',
-  'border-radius-lg': 'var(--size-250)',
-  'border-radius-xl': 'var(--size-300)',
-  'border-radius-full': '999px',
-};
-
-export default borderRadius;
+type BorderRadius = {
+  [key: string]: string;
+};
+
+const borderRadius: BorderRadius = {
+  'border-radius-2xs': 'var(--size-50)',
+  'border-radius-xs': 'var(--size-100)',
+  'border-radius-sm': 'var(--size-150)',
+  'border-radius-md': 'var(--size-200)',
+  'border-radius-lg': 'var(--size-250)',
+  'border-radius-xl': 'var(--size-300)',
+  'border-radius-full': '999px',
+};
+
+export default borderRadius;

package/src/assets/scripts/colors.ts

@@ -1,134 +1,134 @@
-/*
-  Toge Design System v3.0 - Color Scheme
-  (https://www.figma.com/design/tlGkN8uKvxVIHB1FgYRIaF/%F0%9F%8C%B1-Toge-Styles-3.0?node-id=2281-4697&node-type=section&m=dev)
-*/
-
-type ColorShadesTypes = {
-  [key: number]: string;
-};
-
-type ColorPaletteTypes = {
-  [colorName: string]: ColorShadesTypes;
-};
-
-const colorScheme: ColorPaletteTypes = {
-  white: {
-    50: '#FFFFFF',
-    100: '#F1F2F3',
-    200: '#DBDBDD',
-    300: '#BABCC0',
-    400: '#989898',
-    500: '#7C7C7C',
-    600: '#656565',
-    700: '#525252',
-    800: '#464646',
-    900: '#3D3D3D',
-    950: '#292929',
-  },
-  mushroom: {
-    50: '#EFF1F1',
-    100: '#E6EAEA',
-    200: '#D9DEDE',
-    300: '#B8C1C0',
-    400: '#919F9D',
-    500: '#738482',
-    600: '#5D6C6B',
-    700: '#4C5857',
-    800: '#414B4B',
-    900: '#394141',
-    950: '#262B2B',
-  },
-  tomato: {
-    50: '#FEF2F3',
-    100: '#FEE2E3',
-    200: '#FDCBCE',
-    300: '#FBA6AA',
-    400: '#F6737A',
-    500: '#EC4750',
-    600: '#DA2F38',
-    700: '#B61F27',
-    800: '#971D23',
-    900: '#7D1F24',
-    950: '#440B0E',
-  },
-  carrot: {
-    50: '#FFFAEC',
-    100: '#FFF4D3',
-    200: '#FFE5A5',
-    300: '#FFD16D',
-    400: '#FFB132',
-    500: '#FF970A',
-    600: '#FF7F00',
-    700: '#CC5C02',
-    800: '#A1470B',
-    900: '#823C0C',
-    950: '#461C04',
-  },
-  mango: {
-    50: '#FFFFEA',
-    100: '#FFFBC5',
-    200: '#FFF885',
-    300: '#FFED46',
-    400: '#FFDF1B',
-    500: '#FFBF00',
-    600: '#E29300',
-    700: '#BB6802',
-    800: '#985008',
-    900: '#7C420B',
-    950: '#482200',
-  },
-  kangkong: {
-    50: '#F0FDF4',
-    100: '#DCFCE6',
-    200: '#BBF7CE',
-    300: '#86EFA8',
-    400: '#4ADE7B',
-    500: '#22C558',
-    600: '#17AD49',
-    700: '#158039',
-    800: '#166531',
-    900: '#14532B',
-    950: '#052E15',
-  },
-  wintermelon: {
-    50: '#ECFEFF',
-    100: '#CEFBFF',
-    200: '#A3F3FE',
-    300: '#64E9FC',
-    400: '#1ED5F2',
-    500: '#02AFCE',
-    600: '#0592B5',
-    700: '#0C7492',
-    800: '#135E77',
-    900: '#154E64',
-    950: '#073345',
-  },
-  blueberry: {
-    50: '#EEF7FF',
-    100: '#D8EBFF',
-    200: '#BADCFF',
-    300: '#8BBDFF',
-    400: '#549EFF',
-    500: '#2D88FF',
-    600: '#1679FA',
-    700: '#0F6EEB',
-    800: '#1356BA',
-    900: '#164B92',
-    950: '#122E59',
-  },
-  ubas: {
-    50: '#F5F3FF',
-    100: '#EEE9FE',
-    200: '#DED6FE',
-    300: '#C6B5FD',
-    400: '#AA8BFA',
-    500: '#8952F6',
-    600: '#8139EE',
-    700: '#7227DA',
-    800: '#5F21B6',
-    900: '#501D95',
-    950: '#311065',
-  },
-};
-export type { ColorShadesTypes, ColorPaletteTypes };
-export default colorScheme;
+/*
+  Toge Design System v3.0 - Color Scheme
+  (https://www.figma.com/design/tlGkN8uKvxVIHB1FgYRIaF/%F0%9F%8C%B1-Toge-Styles-3.0?node-id=2281-4697&node-type=section&m=dev)
+*/
+
+type ColorShadesTypes = {
+  [key: number]: string;
+};
+
+type ColorPaletteTypes = {
+  [colorName: string]: ColorShadesTypes;
+};
+
+const colorScheme: ColorPaletteTypes = {
+  white: {
+    50: '#FFFFFF',
+    100: '#F1F2F3',
+    200: '#DBDBDD',
+    300: '#BABCC0',
+    400: '#989898',
+    500: '#7C7C7C',
+    600: '#656565',
+    700: '#525252',
+    800: '#464646',
+    900: '#3D3D3D',
+    950: '#292929',
+  },
+  mushroom: {
+    50: '#EFF1F1',
+    100: '#E6EAEA',
+    200: '#D9DEDE',
+    300: '#B8C1C0',
+    400: '#919F9D',
+    500: '#738482',
+    600: '#5D6C6B',
+    700: '#4C5857',
+    800: '#414B4B',
+    900: '#394141',
+    950: '#262B2B',
+  },
+  tomato: {
+    50: '#FEF2F3',
+    100: '#FEE2E3',
+    200: '#FDCBCE',
+    300: '#FBA6AA',
+    400: '#F6737A',
+    500: '#EC4750',
+    600: '#DA2F38',
+    700: '#B61F27',
+    800: '#971D23',
+    900: '#7D1F24',
+    950: '#440B0E',
+  },
+  carrot: {
+    50: '#FFFAEC',
+    100: '#FFF4D3',
+    200: '#FFE5A5',
+    300: '#FFD16D',
+    400: '#FFB132',
+    500: '#FF970A',
+    600: '#FF7F00',
+    700: '#CC5C02',
+    800: '#A1470B',
+    900: '#823C0C',
+    950: '#461C04',
+  },
+  mango: {
+    50: '#FFFFEA',
+    100: '#FFFBC5',
+    200: '#FFF885',
+    300: '#FFED46',
+    400: '#FFDF1B',
+    500: '#FFBF00',
+    600: '#E29300',
+    700: '#BB6802',
+    800: '#985008',
+    900: '#7C420B',
+    950: '#482200',
+  },
+  kangkong: {
+    50: '#F0FDF4',
+    100: '#DCFCE6',
+    200: '#BBF7CE',
+    300: '#86EFA8',
+    400: '#4ADE7B',
+    500: '#22C558',
+    600: '#17AD49',
+    700: '#158039',
+    800: '#166531',
+    900: '#14532B',
+    950: '#052E15',
+  },
+  wintermelon: {
+    50: '#ECFEFF',
+    100: '#CEFBFF',
+    200: '#A3F3FE',
+    300: '#64E9FC',
+    400: '#1ED5F2',
+    500: '#02AFCE',
+    600: '#0592B5',
+    700: '#0C7492',
+    800: '#135E77',
+    900: '#154E64',
+    950: '#073345',
+  },
+  blueberry: {
+    50: '#EEF7FF',
+    100: '#D8EBFF',
+    200: '#BADCFF',
+    300: '#8BBDFF',
+    400: '#549EFF',
+    500: '#2D88FF',
+    600: '#1679FA',
+    700: '#0F6EEB',
+    800: '#1356BA',
+    900: '#164B92',
+    950: '#122E59',
+  },
+  ubas: {
+    50: '#F5F3FF',
+    100: '#EEE9FE',
+    200: '#DED6FE',
+    300: '#C6B5FD',
+    400: '#AA8BFA',
+    500: '#8952F6',
+    600: '#8139EE',
+    700: '#7227DA',
+    800: '#5F21B6',
+    900: '#501D95',
+    950: '#311065',
+  },
+};
+export type { ColorShadesTypes, ColorPaletteTypes };
+export default colorScheme;

package/src/assets/scripts/max-width.ts

@@ -1,11 +1,11 @@
-type MaxWidthTypes = {
-  [key: string]: string;
-};
-
-const maxWidth: MaxWidthTypes = {
-  'sm': '640px',
-  'md': '1000px',
-  'lg': '1320px',
-};
-
-export default maxWidth;
+type MaxWidthTypes = {
+  [key: string]: string;
+};
+
+const maxWidth: MaxWidthTypes = {
+  'sm': '640px',
+  'md': '1000px',
+  'lg': '1320px',
+};
+
+export default maxWidth;

package/src/assets/scripts/spacing.ts

@@ -1,23 +1,23 @@
-type spacingTypes = {
-  [key: string]: string;
-};
-
-const spacing: spacingTypes = {
-  'size-spacing-6xs': 'var(--size-50)',
-  'size-spacing-5xs': 'var(--size-100)',
-  'size-spacing-4xs': 'var(--size-150)',
-  'size-spacing-3xs': 'var(--size-200)',
-  'size-spacing-2xs': 'var(--size-250)',
-  'size-spacing-xs': 'var(--size-300)',
-  'size-spacing-sm': 'var(--size-400)',
-  'size-spacing-md': 'var(--size-500)',
-  'size-spacing-lg': 'var(--size-600)',
-  'size-spacing-xl': 'var(--size-700)',
-  'size-spacing-2xl': 'var(--size-800)',
-  'size-spacing-3xl': 'var(--size-900)',
-  'size-spacing-4xl': 'var(--size-1000)',
-  'size-spacing-5xl': 'var(--size-1100)',
-  'size-spacing-6xl': 'var(--size-1200)',
-};
-
-export default spacing;
+type spacingTypes = {
+  [key: string]: string;
+};
+
+const spacing: spacingTypes = {
+  'size-spacing-6xs': 'var(--size-50)',
+  'size-spacing-5xs': 'var(--size-100)',
+  'size-spacing-4xs': 'var(--size-150)',
+  'size-spacing-3xs': 'var(--size-200)',
+  'size-spacing-2xs': 'var(--size-250)',
+  'size-spacing-xs': 'var(--size-300)',
+  'size-spacing-sm': 'var(--size-400)',
+  'size-spacing-md': 'var(--size-500)',
+  'size-spacing-lg': 'var(--size-600)',
+  'size-spacing-xl': 'var(--size-700)',
+  'size-spacing-2xl': 'var(--size-800)',
+  'size-spacing-3xl': 'var(--size-900)',
+  'size-spacing-4xl': 'var(--size-1000)',
+  'size-spacing-5xl': 'var(--size-1100)',
+  'size-spacing-6xl': 'var(--size-1200)',
+};
+
+export default spacing;

package/src/assets/scripts/utilities.ts

@@ -1,15 +1,15 @@
-type utilitiesTypes = {
-  [key: string]: {
-    backgroundColor?: string;
-    opacity?: string;
-  };
-};
-
-const utilities: utilitiesTypes = {
-  'bg-overlay': {
-    backgroundColor: '#4C5857',
-    opacity: '0.6',
-  },
-};
-
-export default utilities;
+type utilitiesTypes = {
+  [key: string]: {
+    backgroundColor?: string;
+    opacity?: string;
+  };
+};
+
+const utilities: utilitiesTypes = {
+  'bg-overlay': {
+    backgroundColor: '#4C5857',
+    opacity: '0.6',
+  },
+};
+
+export default utilities;

package/src/components/accordion/accordion.ts

@@ -1,43 +1,43 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-const ACCORDION_TRIGGER = ['header', 'button'] as const;
-
-export interface AccordionItem {
-  title: string;
-  subtitle?: string;
-  collapseId: string;
-}
-
-/**
- * Defines the prop types for the Accordion component.
- *
- * @property accordionItems - An array of accordion items. This property is required and defaults to an empty array.
- * @property alwaysOpen - A boolean indicating whether multiple accordion items can be open at the same time. Defaults to `false`.
- * @property isDefaultOpen - A boolean indicating whether the accordion is open by default. Defaults to `false`. Won't work if alwaysOpen is false.
- */
-export const accordionPropTypes = {
-  accordionItems: {
-    type: Array as PropType<AccordionItem[]>,
-    required: true,
-    default: () => [],
-  },
-  alwaysOpen: {
-    type: Boolean,
-    default: false,
-  },
-  isDefaultOpen: {
-    type: Boolean,
-    default: false
-  },
-  accordionTrigger: {
-    type: String,
-    validator: (value: (typeof ACCORDION_TRIGGER)[number]) => ACCORDION_TRIGGER.includes(value),
-    default: 'button'
-  },
-  bordered: {
-    type: Boolean,
-    default: true
-  }
-}
-
-export type AccordionPropTypes = ExtractPropTypes<typeof accordionPropTypes>;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+const ACCORDION_TRIGGER = ['header', 'button'] as const;
+
+export interface AccordionItem {
+  title: string;
+  subtitle?: string;
+  collapseId: string;
+}
+
+/**
+ * Defines the prop types for the Accordion component.
+ *
+ * @property accordionItems - An array of accordion items. This property is required and defaults to an empty array.
+ * @property alwaysOpen - A boolean indicating whether multiple accordion items can be open at the same time. Defaults to `false`.
+ * @property isDefaultOpen - A boolean indicating whether the accordion is open by default. Defaults to `false`. Won't work if alwaysOpen is false.
+ */
+export const accordionPropTypes = {
+  accordionItems: {
+    type: Array as PropType<AccordionItem[]>,
+    required: true,
+    default: () => [],
+  },
+  alwaysOpen: {
+    type: Boolean,
+    default: false,
+  },
+  isDefaultOpen: {
+    type: Boolean,
+    default: false
+  },
+  accordionTrigger: {
+    type: String,
+    validator: (value: (typeof ACCORDION_TRIGGER)[number]) => ACCORDION_TRIGGER.includes(value),
+    default: 'button'
+  },
+  bordered: {
+    type: Boolean,
+    default: true
+  }
+}
+
+export type AccordionPropTypes = ExtractPropTypes<typeof accordionPropTypes>;

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

@@ -1,43 +1,43 @@
-
-import type { AccordionPropTypes } from './accordion';
-import { toRefs, reactive, ref } from 'vue';
-
-export const useAccordion = (props: AccordionPropTypes) => {
-  const { accordionItems, isDefaultOpen, alwaysOpen } = toRefs(props);
-  const clickedIndex = ref<number>()
-
-  const collapsedState = reactive(accordionItems.value.map(() => isDefaultOpen.value && alwaysOpen.value));
-
-  const toggleCollapse = (index: number) => {
-    if (index < 0 || index >= collapsedState.length) return;
-
-    collapsedState[index] = !collapsedState[index];
-
-    if (!props.alwaysOpen) {
-      collapsedState.forEach((_, i) => {
-        if (i !== index) {
-          collapsedState[i] = false;
-        }
-      });
-    }
-  };
-
-  const setClickedIndex = (index: number) => {
-    clickedIndex.value = index
-  }
-
-  const clearIndex = () => {
-    clickedIndex.value = undefined
-  }
-
-  return {
-    accordionItems,
-    isDefaultOpen,
-    alwaysOpen,
-    collapsedState,
-    toggleCollapse,
-    setClickedIndex,
-    clearIndex,
-    clickedIndex
-  }
-};
+
+import type { AccordionPropTypes } from './accordion';
+import { toRefs, reactive, ref } from 'vue';
+
+export const useAccordion = (props: AccordionPropTypes) => {
+  const { accordionItems, isDefaultOpen, alwaysOpen } = toRefs(props);
+  const clickedIndex = ref<number>()
+
+  const collapsedState = reactive(accordionItems.value.map(() => isDefaultOpen.value && alwaysOpen.value));
+
+  const toggleCollapse = (index: number) => {
+    if (index < 0 || index >= collapsedState.length) return;
+
+    collapsedState[index] = !collapsedState[index];
+
+    if (!props.alwaysOpen) {
+      collapsedState.forEach((_, i) => {
+        if (i !== index) {
+          collapsedState[i] = false;
+        }
+      });
+    }
+  };
+
+  const setClickedIndex = (index: number) => {
+    clickedIndex.value = index
+  }
+
+  const clearIndex = () => {
+    clickedIndex.value = undefined
+  }
+
+  return {
+    accordionItems,
+    isDefaultOpen,
+    alwaysOpen,
+    collapsedState,
+    toggleCollapse,
+    setClickedIndex,
+    clearIndex,
+    clickedIndex
+  }
+};

package/src/components/banner/banner.ts

@@ -1,20 +1,20 @@
-import { PropType, type ExtractPropTypes } from 'vue';
-
-export const BANNER_TYPE = ['success', 'error', 'info', 'pending', 'caution'] as const;
-
-export const bannerProps = {
-  type: {
-    type: String as PropType<(typeof BANNER_TYPE)[number]>,
-    validator: (value: (typeof BANNER_TYPE)[number]) => BANNER_TYPE.includes(value),
-    default: 'success',
-  },
-  showCloseButton: {
-    type: Boolean,
-    default: false,
-  },
-  message: {
-    type: String,
-  }
-};
-
-export type BannerPropTypes = ExtractPropTypes<typeof bannerProps>;
+import { PropType, type ExtractPropTypes } from 'vue';
+
+export const BANNER_TYPE = ['success', 'error', 'info', 'pending', 'caution'] as const;
+
+export const bannerProps = {
+  type: {
+    type: String as PropType<(typeof BANNER_TYPE)[number]>,
+    validator: (value: (typeof BANNER_TYPE)[number]) => BANNER_TYPE.includes(value),
+    default: 'success',
+  },
+  showCloseButton: {
+    type: Boolean,
+    default: false,
+  },
+  message: {
+    type: String,
+  }
+};
+
+export type BannerPropTypes = ExtractPropTypes<typeof bannerProps>;