design-system-next 2.22.2 → 2.23.1

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

@@ -494,6 +494,7 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     handleConvertMonthIfValid();
     calendarTabUpdateCalendar();
     emitDateFormats();
+    emitPartialInputValue();
 
     datePickerErrors.value = [];
 
@@ -563,6 +564,7 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     handleConvertMonthIfValid();
     calendarTabUpdateCalendar();
     emitDateFormats();
+    emitPartialInputValue();
 
     datePickerErrors.value = [];
 
@@ -696,14 +698,8 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
 
     handleValidateDate();
 
-    // Do not set yearInput when typing monthInput
-    if (!monthInput.value && !dateInput.value && !yearInput.value) {
-      emit('getInputValue', null);
-    }
-
-    if (monthInput.value && dateInput.value && yearInput.value) {
-      emitInputValue();
-    }
+    // Emit the partial date value as user types
+    emitPartialInputValue();
   };
 
   const handleDateInput = () => {
@@ -717,14 +713,8 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
 
     handleValidateDate();
 
-    // Do not set yearInput when typing dateInput
-    if (!monthInput.value && !dateInput.value && !yearInput.value) {
-      emit('getInputValue', null);
-    }
-
-    if (monthInput.value && dateInput.value && yearInput.value) {
-      emitInputValue();
-    }
+    // Emit the partial date value as user types
+    emitPartialInputValue();
   };
 
   const handleYearInput = () => {
@@ -736,20 +726,8 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
 
     emit('getDateErrors', datePickerErrors.value);
 
-    // Only validate year, do not set monthInput or dateInput
-    // Only emit year-related changes
-    // Only validate if yearInput is 4 digits (full year)
-    if (yearInput.value.length === 4) {
-      handleValidateDate();
-
-      if (!monthInput.value && !dateInput.value && !yearInput.value) {
-        emit('getInputValue', null);
-      }
-
-      if (monthInput.value && dateInput.value && yearInput.value) {
-        emitInputValue();
-      }
-    }
+    // Emit the partial date value as user types
+    emitPartialInputValue();
   };
 
   const handleConvertMonthIfValid = () => {
@@ -846,6 +824,36 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     }
   };
 
+  const emitPartialInputValue = () => {
+    // Convert month to numeric format if it's text
+    let emittedMonth = monthInput.value;
+
+    if (monthInput.value) {
+      const isNumeric = !isNaN(Number(monthInput.value)) && !isNaN(parseFloat(monthInput.value));
+
+      if (!isNumeric) {
+        const monthIsValid = monthsList.value.find(
+          (_month: MonthsList) => _month.text.toLowerCase() === monthInput.value.toLowerCase(),
+        );
+
+        if (monthIsValid) {
+          emittedMonth =
+            monthIsValid.monthValue < 10 ? `0${monthIsValid.monthValue + 1}` : `${monthIsValid.monthValue + 1}`;
+        }
+      }
+    }
+
+    // Build the partial date string with zeros for empty fields
+    const partialMonth = emittedMonth || '0';
+    const partialDate = dateInput.value || '0';
+    const partialYear = yearInput.value || '0';
+
+    const partialDateString = `${partialMonth}-${partialDate}-${partialYear}`;
+
+    // Emit the partial date string
+    emit('getInputValue', partialDateString);
+  };
+
   const emitDateFormats = () => {
     if (monthInput.value && dateInput.value && yearInput.value) {
       const monthIsValid = monthsList.value.find(
@@ -934,8 +942,8 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
   };
 
   const handleSlotClick = () => {
-    if(disabled.value || readonly.value) return;
-    datePopperState.value = true;    
+    if (disabled.value || readonly.value) return;
+    datePopperState.value = true;
   };
 
   watch(datePopperState, (newValue) => {
@@ -1037,6 +1045,6 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     handleTabClick,
     handleBackspace,
     clearDate,
-    handleSlotClick
+    handleSlotClick,
   };
 };

package/src/components/input/input-contact-number/input-contact-number.ts

@@ -47,6 +47,22 @@ export const inputContactNumberPropTypes = {
     type: Boolean,
     default: false,
   },
+  displayHelper: {
+    type: Boolean,
+    default: false,
+  },
+  helperText: {
+    type: String,
+    default: '',
+  },
+  helperIcon: {
+    type: String,
+    default: null,
+  },
+  error: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export const inputContactNumberEmitTypes = {

package/src/components/input/input-contact-number/input-contact-number.vue

@@ -6,6 +6,10 @@
     :placeholder="props.placeholder"
     :active="popperState"
     :disabled="props.disabled"
+    :display-helper="props.displayHelper"
+    :helper-text="props.helperText"
+    :helper-icon="props.helperIcon"
+    :error="props.error"
     @keyup="handleContactNumberInput"
     @blur="formatContactNumber"
     @update:model-value="handleUpdateModelValue"
@@ -29,6 +33,10 @@
         </div>
       </spr-dropdown>
     </template>
+
+    <template #helperMessage>
+      <slot name="helperMessage" />
+    </template>
   </spr-input>
 </template>
 

package/src/components/radio/radio.ts

@@ -32,7 +32,7 @@ export const radioPropTypes = {
   fullWidth: {
     type: Boolean,
     default: false,
-  }
+  },
 };
 
 export const radioEmitTypes = ['update:modelValue'];

package/src/components/radio/radio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['spr-relative', { 'spr-w-full' : props.fullWidth }]">
+  <div :class="['spr-relative', { 'spr-w-full': props.fullWidth }]">
     <input
       :id="props.id"
       ref="radioRef"
@@ -21,7 +21,10 @@
         <slot />
         <span
           v-if="props.description && props.description !== ''"
-          :class="['spr-text-xs spr-font-normal spr-leading-4 spr-text-mushroom-600', { 'spr-text-color-disabled' : props.disabled}]"
+          :class="[
+            'spr-text-xs spr-font-normal spr-leading-4 spr-text-mushroom-600',
+            { 'spr-text-color-disabled': props.disabled },
+          ]"
           >{{ props.description }}</span
         >
       </div>

package/src/components/radio-grouped/radio-grouped.ts

@@ -0,0 +1,65 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export interface RadioOption {
+  text: string;
+  value: string | number | boolean;
+  disabled?: boolean;
+}
+
+export const radioGroupedPropTypes = {
+  id: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number, Boolean],
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Array as PropType<RadioOption[]>,
+    required: true,
+    default: () => [],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  description: {
+    type: String,
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  displayHelper: {
+    type: Boolean,
+    default: false,
+  },
+  helperIcon: {
+    type: String,
+    default: null,
+  },
+  helperText: {
+    type: String,
+    default: '',
+  },
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  horizontalAlign: {
+    type: String as PropType<'left' | 'center' | 'right'>,
+    default: 'left',
+  },
+};
+
+export const radioGroupedEmitTypes = ['update:modelValue'];
+
+export type RadioGroupedPropTypes = ExtractPropTypes<typeof radioGroupedPropTypes>;
+
+export type RadioGroupedEmitTypes = typeof radioGroupedEmitTypes;

package/src/components/radio-grouped/radio-grouped.vue

@@ -0,0 +1,37 @@
+<template>
+  <div :class="['spr-relative']">
+    <div :class="radioGroupedClasses.containerClasses">
+      <spr-radio
+        v-for="(option, index) in renderOptions()"
+        :id="`${props.id}-${index}`"
+        :key="`${props.id}-option-${index}`"
+        v-model="proxyValue"
+        :name="props.name"
+        :value="option.value"
+        :disabled="isOptionDisabled(option)"
+      >
+        {{ option.text }}
+      </spr-radio>
+    </div>
+
+    <div v-if="props.displayHelper" :class="radioGroupedClasses.helperClasses">
+      <slot name="helperMessage">
+        <Icon v-if="props.helperIcon" class="spr-h-5 spr-min-h-5 spr-w-5 spr-min-w-5" :icon="props.helperIcon" />
+        <span>{{ props.helperText }}</span>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import SprRadio from '@/components/radio/radio.vue';
+
+import { radioGroupedPropTypes, radioGroupedEmitTypes } from './radio-grouped';
+import { useRadioGrouped } from './use-radio-grouped';
+
+const props = defineProps(radioGroupedPropTypes);
+const emit = defineEmits(radioGroupedEmitTypes);
+
+const { radioGroupedClasses, proxyValue, renderOptions, isOptionDisabled } = useRadioGrouped(props, emit);
+</script>

package/src/components/radio-grouped/use-radio-grouped.ts

@@ -0,0 +1,62 @@
+import { toRefs, computed, ComputedRef } from 'vue';
+import { useVModel } from '@vueuse/core';
+
+import classNames from 'classnames';
+
+import type { SetupContext } from 'vue';
+import type { RadioGroupedPropTypes, RadioGroupedEmitTypes, RadioOption } from './radio-grouped';
+
+interface RadioGroupedClasses {
+  containerClasses: string;
+  helperClasses: string;
+}
+
+export const useRadioGrouped = (props: RadioGroupedPropTypes, emit: SetupContext<RadioGroupedEmitTypes>['emit']) => {
+  const { disabled, horizontalAlign, displayHelper, error } = toRefs(props);
+
+  const radioGroupedClasses: ComputedRef<RadioGroupedClasses> = computed(() => {
+    const alignmentMap = {
+      left: 'spr-justify-start',
+      center: 'spr-justify-center',
+      right: 'spr-justify-end',
+    };
+
+    const containerClasses = classNames('spr-flex spr-flex-col spr-gap-2', {
+      [alignmentMap[horizontalAlign.value as keyof typeof alignmentMap]]: true,
+    });
+
+    const helperClasses = classNames(
+      'spr-flex spr-items-center spr-gap-1 spr-mt-size-spacing-2xs spr-body-sm-regular',
+      {
+        'spr-text-mushroom-600': !error.value,
+        'spr-text-color-danger-base': error.value,
+      },
+    );
+
+    return {
+      containerClasses,
+      helperClasses,
+    };
+  });
+
+  const proxyValue = useVModel(props, 'modelValue', emit);
+
+  const renderOptions = (): RadioOption[] => {
+    return props.options || [];
+  };
+
+  const isOptionDisabled = (option: RadioOption): boolean => {
+    return disabled.value || (option.disabled ?? false);
+  };
+
+  return {
+    radioGroupedClasses,
+    proxyValue,
+    renderOptions,
+    isOptionDisabled,
+    disabled,
+    displayHelper,
+    horizontalAlign,
+    error,
+  };
+};