design-system-next 2.22.2 → 2.23.0

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,
+  };
+};