design-system-next 2.26.2 → 2.26.3

package/src/components/list/list-item/list-item.ts

@@ -1,60 +1,60 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import type { MenuListType } from '../list';
-
-export const listItemPropTypes = {
-  item: {
-    type: Object as PropType<MenuListType>,
-    required: true,
-  },
-  isSelected: {
-    type: Boolean,
-    required: true,
-  },
-  classes: {
-    type: [String, Array, Object] as PropType<string | string[] | Record<string, boolean>>,
-    required: true,
-  },
-  multiSelect: {
-    type: Boolean,
-    default: false,
-  },
-  lozenge: {
-    type: Boolean,
-    default: false,
-  },
-  ladderized: {
-    type: Boolean,
-    default: false,
-  },
-  noCheck: {
-    type: Boolean,
-    default: false,
-  },
-  itemIcon: {
-    type: String,
-    default: '',
-  },
-  itemIconTone: {
-    type: String,
-    default: 'plain',
-  },
-  itemIconFill: {
-    type: Boolean,
-    default: false,
-  },
-  disabledUnselectedItems: {
-    type: Boolean,
-    default: false,
-  },
-  radioList: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export const listItemEmitTypes = {
-  select: () => true,
-};
-
-export type ListItemPropTypes = ExtractPropTypes<typeof listItemPropTypes>;
-export type ListItemEmitTypes = typeof listItemEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { MenuListType } from '../list';
+
+export const listItemPropTypes = {
+  item: {
+    type: Object as PropType<MenuListType>,
+    required: true,
+  },
+  isSelected: {
+    type: Boolean,
+    required: true,
+  },
+  classes: {
+    type: [String, Array, Object] as PropType<string | string[] | Record<string, boolean>>,
+    required: true,
+  },
+  multiSelect: {
+    type: Boolean,
+    default: false,
+  },
+  lozenge: {
+    type: Boolean,
+    default: false,
+  },
+  ladderized: {
+    type: Boolean,
+    default: false,
+  },
+  noCheck: {
+    type: Boolean,
+    default: false,
+  },
+  itemIcon: {
+    type: String,
+    default: '',
+  },
+  itemIconTone: {
+    type: String,
+    default: 'plain',
+  },
+  itemIconFill: {
+    type: Boolean,
+    default: false,
+  },
+  disabledUnselectedItems: {
+    type: Boolean,
+    default: false,
+  },
+  radioList: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const listItemEmitTypes = {
+  select: () => true,
+};
+
+export type ListItemPropTypes = ExtractPropTypes<typeof listItemPropTypes>;
+export type ListItemEmitTypes = typeof listItemEmitTypes;

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

@@ -375,7 +375,7 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   const getListItemClasses = (item: MenuListType) => ({
     [listClasses.value.listItemClasses]: !item.disabled && !(disabledUnselectedItems.value && !isItemSelected(item)),
     'spr-background-color-single-active': isItemSelected(item) && !item.disabled && !noCheck.value,
-    'spr-cursor-not-allowed spr-flex spr-items-center spr-gap-1.5 spr-rounded-lg':
+    'spr-cursor-not-allowed spr-flex spr-items-center spr-justify-between spr-gap-1.5 spr-rounded-lg':
       item.disabled || (disabledUnselectedItems.value && !isItemSelected(item)),
     'spr-p-size-spacing-3xs': !props.lozenge,
     'spr-py-size-spacing-3xs spr-px-size-spacing-4xs': props.lozenge,
@@ -527,13 +527,13 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
       } else {
         handleSingleSelect(item);
       }
-    }    
+    }
   };
 
   const handleDeselect = (item: MenuListType) => {
     if (selectedItems.value.length === 0 || !isItemSelected(item)) {
-      selectedItems.value = [item];  
-      emit('get-single-selected-item', item);    
+      selectedItems.value = [item];
+      emit('get-single-selected-item', item);
     } else {
       selectedItems.value = [];
       emit('get-single-deselected-item', item);
@@ -542,8 +542,8 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
 
   const handleSingleSelect = (item: MenuListType) => {
     selectedItems.value = [item];
-    if (item.onClickFn) item.onClickFn();   
-    emit('get-single-selected-item', item); 
+    if (item.onClickFn) item.onClickFn();
+    emit('get-single-selected-item', item);
   };
   // #endregion - Helper Methods
 

package/src/components/{radio-grouped → radio/radio-grouped}/radio-grouped.ts

@@ -1,65 +1,74 @@
-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;
+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;
+  description?: string;
+}
+
+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,
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  },
+  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',
+  },
+  choiceBox: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const radioGroupedEmitTypes = ['update:modelValue'];
+
+export type RadioGroupedPropTypes = ExtractPropTypes<typeof radioGroupedPropTypes>;
+
+export type RadioGroupedEmitTypes = typeof radioGroupedEmitTypes;

package/src/components/{radio-grouped → radio/radio-grouped}/radio-grouped.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['spr-relative']">
+  <div :class="['spr-relative', { 'spr-w-full': props.choiceBox || props.fullWidth }]">
     <div :class="radioGroupedClasses.containerClasses">
       <spr-radio
         v-for="(option, index) in renderOptions()"
@@ -9,6 +9,9 @@
         :name="props.name"
         :value="option.value"
         :disabled="isOptionDisabled(option)"
+        :choice-box="props.choiceBox"
+        :full-width="props.fullWidth || props.choiceBox"
+        :description="option.description"
       >
         {{ option.text }}
       </spr-radio>

package/src/components/{radio-grouped → radio/radio-grouped}/use-radio-grouped.ts

@@ -1,62 +1,63 @@
-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,
-  };
-};
+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, choiceBox } = 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,
+    choiceBox,
+  };
+};

package/src/components/radio/radio.ts

@@ -33,6 +33,10 @@ export const radioPropTypes = {
     type: Boolean,
     default: false,
   },
+  choiceBox: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export const radioEmitTypes = ['update:modelValue'];

package/src/components/radio/radio.vue

@@ -1,5 +1,10 @@
 <template>
-  <div :class="['spr-relative', { 'spr-w-full': props.fullWidth }]">
+  <div
+    :class="radioClasses.baseClasses"
+    @click="radioRef?.click()"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
     <input
       :id="props.id"
       ref="radioRef"
@@ -8,7 +13,7 @@
       :name="props.name"
       :value="props.value"
       :disabled="props.disabled"
-      :class="radioClasses.baseClasses"
+      :class="radioClasses.baseInputClasses"
     />
     <label
       ref="radioRef"
@@ -25,8 +30,9 @@
             'spr-text-xs spr-font-normal spr-leading-4 spr-text-mushroom-600',
             { 'spr-text-color-disabled': props.disabled },
           ]"
-          >{{ props.description }}</span
         >
+          {{ props.description }}
+        </span>
       </div>
     </label>
   </div>
@@ -42,7 +48,7 @@ const props = defineProps(radioPropTypes);
 const emit = defineEmits(radioEmitTypes);
 const slots = useSlots();
 
-const { proxyValue, radioRef, radioClasses } = useRadioButton(props, emit, slots);
+const { proxyValue, radioRef, radioClasses, isHovered } = useRadioButton(props, emit, slots);
 </script>
 
 <style scoped>

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

@@ -8,6 +8,7 @@ import type { RadioPropTypes, RadioEmitTypes } from './radio';
 
 interface RadioClasses {
   baseClasses: string;
+  baseInputClasses: string;
   baseIndicatorClasses: string;
   labelClasses: string;
   borderedClasses: string;
@@ -18,13 +19,24 @@ export const useRadioButton = (
   emit: SetupContext<RadioEmitTypes>['emit'],
   slots: Record<string, unknown>,
 ) => {
-  const { modelValue, disabled, description, bordered, fullWidth } = toRefs(props);
+  const { modelValue, disabled, description, bordered, fullWidth, choiceBox } = toRefs(props);
 
   const radioRef = ref<HTMLInputElement | null>(null);
   const isHovered = useElementHover(radioRef);
 
   const radioClasses: ComputedRef<RadioClasses> = computed(() => {
-    const baseClasses = classNames('spr-sr-only spr-peer spr-inline-block', {
+    const baseClasses = classNames('spr-relative spr-m-0', {
+      'spr-inline-block': !choiceBox.value,
+      'spr-block': choiceBox.value,
+      'spr-w-full': fullWidth.value || choiceBox.value,
+      'spr-align-middle': !choiceBox.value,
+      'spr-border-color spr-border-color-weak spr-border spr-border-solid spr-p-2 spr-rounded-lg spr-transition spr-ease-in-out spr-duration-150 active:spr-scale-[0.98]':
+        choiceBox.value,
+      'spr-cursor-pointer': choiceBox.value && !disabled.value,
+      'spr-cursor-not-allowed': disabled.value && choiceBox.value,
+    });
+
+    const baseInputClasses = classNames('spr-sr-only spr-peer spr-inline-block', {
       'spr-cursor-not-allowed': disabled.value,
     });
 
@@ -121,6 +133,7 @@ export const useRadioButton = (
 
     return {
       baseClasses,
+      baseInputClasses,
       baseIndicatorClasses,
       labelClasses,
       borderedClasses,
@@ -132,6 +145,7 @@ export const useRadioButton = (
   return {
     radioRef,
     radioClasses,
+    isHovered,
     proxyValue,
     description,
     bordered,