design-system-next 2.3.1 → 2.5.0

package/src/components/stepper/step/use-step.ts

@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import type { SetupContext } from 'vue';
+import { computed, ComputedRef } from 'vue';
+import type { StepEmitTypes, StepPropTypes } from './step';
+
+interface StepClasses {
+  baseClass: string;
+  badgeClass: string;
+  numberClass: string;
+  textContainerClass: string;
+  labelClass: string;
+  descriptionClass: string;
+
+}
+
+export const useStep = (props: StepPropTypes, emit: SetupContext<StepEmitTypes>['emit']) => {
+
+  const stepClasses: ComputedRef<StepClasses> = computed(() => {
+    const baseClass = classNames('spr-flex spr-gap-2 spr-items-center');
+    
+    // Usage of prop.status ensures reactivity instead of destructuring props
+    const badgeClass = classNames(
+      'spr-flex spr-items-center spr-justify-center spr-rounded-border-radius-full spr-h-6 spr-w-6 spr-border spr-border-solid spr-border-2',
+      {
+        'spr-bg-kangkong-700 spr-border-kangkong-700': props.status === 'active',
+        'spr-border-mushroom-300': props.status === 'pending',
+        'spr-border-kangkong-700': props.status === 'completed',
+      }
+    );
+    
+    const numberClass = classNames('spr-text-sm spr-font-medium', 
+      {
+        'spr-text-white-50': props.status === 'active',
+        'spr-text-mushroom-600': props.status === 'pending',
+        'spr-text-kangkong-700': props.status === 'completed',
+      }
+    );
+
+    const textContainerClass = classNames('spr-flex spr-flex-col spr-relative');
+
+    const labelClass = classNames('spr-text-sm spr-whitespace-nowrap', 
+      {
+      'spr-text-kangkong-700 spr-font-semibold': props.status === 'active',
+      'spr-text-mushroom-600': props.status === 'pending',
+      'spr-text-mushroom-950': props.status === 'completed',
+      }
+    );
+
+    // Absolute since the sample in the figma is a hanging text for description
+    const descriptionClass = classNames('spr-text-xs spr-text-mushroom-400 spr-absolute spr-mt-size-spacing-sm spr-whitespace-nowrap');
+
+    return {
+      baseClass,
+      badgeClass,
+      numberClass,
+      labelClass,
+      textContainerClass,
+      descriptionClass,
+    };
+  });
+
+  const handleClick = (evt: MouseEvent) => {
+    emit('click', evt);
+  };
+
+  return {
+    stepClasses,
+    handleClick,
+  };
+};

package/src/components/stepper/stepper.ts

@@ -0,0 +1,38 @@
+import type { StepPropTypes } from '@/components/stepper/step/step';
+import type { ExtractPropTypes, PropType } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+const STEPPER_VARIANTS = ['horizontal', 'vertical'] as const;
+export const STEPPER_STATES = ['pending', 'active', 'completed'] as const;
+
+export const stepperPropTypes = {
+  /**
+   * @description Variant of the stepper
+   */
+  variant: {
+    type: String as PropType<(typeof STEPPER_VARIANTS)[number]>,
+    validator: (value: (typeof STEPPER_VARIANTS)[number]) => STEPPER_VARIANTS.includes(value),
+    default: 'vertical',
+  },
+  /**
+   * @description steps of the stepper
+   * @type {Array<Step>}
+   * @property {number} number - Step number
+   * @property {string} label - Text label shown in step
+   * @property {string} status - Step state either as 'pending', 'active', 'completed'
+   * @property {string} description - Description shown in step
+   */
+  steps: {
+    type: Array as PropType<StepPropTypes[]>,
+    default: () => [],
+  },
+  /**
+   * @description has lines between steps
+   */
+  hasLines: {
+    type: Boolean,
+    default: false,
+  }
+};
+
+export type StepperPropTypes = ExtractPropTypes<typeof stepperPropTypes>;

package/src/components/stepper/stepper.vue

@@ -0,0 +1,33 @@
+<template>
+  <div :class="stepperClasses.baseClass">
+    <div v-for="(step, index) in props.steps" :key="index" :class="stepperClasses.stepClass">
+      <!-- STEP NUMBER -->
+      <spr-step
+        :number="step.number"
+        :label="step.label"
+        :status="step.status"
+        :description="step.description"
+      />
+
+      <!-- LINES -->
+      <!-- Line container -->
+      <div
+        v-if="props.hasLines && index < props.steps.length - 1"
+        :class="stepperClasses.lineContainerClass"
+      >
+        <!-- Actual line -->
+        <div :class="[stepperClasses.linesClass, getLineColorClass(step)]"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SprStep from '@/components/stepper/step/step.vue';
+import { stepperPropTypes } from '@/components/stepper/stepper';
+import { useStepper } from '@/components/stepper/use-stepper';
+
+const props = defineProps(stepperPropTypes);
+
+const { stepperClasses, getLineColorClass} = useStepper(props);
+</script>

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

@@ -0,0 +1,52 @@
+import type { StepPropTypes } from '@/components/stepper/step/step';
+import type { StepperPropTypes } from '@/components/stepper/stepper';
+import classNames from 'classnames';
+import { computed, ComputedRef } from 'vue';
+
+interface StepperClasses {
+  baseClass: string;
+  stepClass: string;
+  lineContainerClass: string;
+  linesClass: string;
+}
+
+export const useStepper = (props: StepperPropTypes) => {
+  const stepperClasses: ComputedRef<StepperClasses> = computed(() => {
+    const baseClass = classNames('spr-flex spr-gap-size-spacing-xs ', {
+      'spr-flex-col spr-mb-size-spacing-xs': props.variant === 'vertical',
+      'spr-flex-row spr-mr-size-spacing-xs': props.variant === 'horizontal',
+    });
+
+    const stepClass = classNames('spr-flex spr-flex-grow', {
+      'spr-flex-col': props.variant === 'vertical',
+      'spr-flex-rows': props.variant === 'horizontal',
+    });
+
+    const lineContainerClass = classNames('spr-flex spr-min-w-6 spr-min-h-6', {
+      'spr-ml-3.5 spr-pt-size-spacing-2xs': props.variant === 'vertical',
+      'spr-items-center spr-pl-size-spacing-xs spr-w-full': props.variant === 'horizontal',
+    })
+
+    const linesClass = classNames({
+      'spr-w-0.5 spr-rounded-full spr-h-12': props.variant === 'vertical',
+      'spr-h-0.5 spr-rounded-full spr-w-full': props.variant === 'horizontal',
+    });
+
+
+    return {
+      baseClass,
+      stepClass,
+      lineContainerClass,
+      linesClass,
+    }
+  });
+
+  const getLineColorClass = (step: StepPropTypes) => {
+    return step.status === 'completed' ? 'spr-bg-kangkong-700' : 'spr-bg-mushroom-200';
+  };
+
+  return {
+    stepperClasses,
+    getLineColorClass,
+  };
+};

package/src/components/table/table.vue

@@ -63,7 +63,7 @@
           >
             <td v-if="props.isMultiSelect" :class="[getTableClasses.multiselectClass, getTableClasses.multiselectRowClass]">
               <div class="spr-flex spr-justify-center spr-items-center">
-                <spr-checkbox label="" :checked="isRowSelected(item)" @update:modelValue="handleSelect(item)"/>
+                <spr-checkbox label="" :checked="isRowSelected(item)" @update:model-value="handleSelect(item)"/>
               </div>
             </td>
             <td v-for="(column, headerKey) in headers" :key="headerKey" :class="getTableClasses.tableDataClasses">