design-system-next 2.26.2 → 2.26.6

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,

package/src/components/select/select-multiple/select-multiple.ts

@@ -209,6 +209,10 @@ export const multiSelectPropTypes = {
     type: Boolean,
     default: false,
   },
+  allowSelectAll: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export const multiSelectEmitTypes = {

package/src/components/select/select-multiple/select-multiple.vue

@@ -165,6 +165,7 @@
             :display-list-item-selected="props.displayListItemSelected"
             :disabled-local-search="props.disabledLocalSearch"
             :disabled-unselected-items="props.disabledUnselectedItems"
+            :allow-select-all="props.allowSelectAll"
             multi-select
             @update:model-value="handleMultiSelectedItem"
             @get-single-selected-item="emit('get-single-selected-item', $event)"

package/src/components/select/select-multiple/use-select-multiple.ts

@@ -268,8 +268,9 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     }
 
     // Always keep multiSelectedListItems in sync with selected values
+    const seenValues = new Set<string>();
     multiSelectedListItems.value = multiSelectOptions.value.filter((item) => {
-      return values.some((val) => {
+      const isMatch = values.some((val) => {
         let itemVal = item.value;
         let valToCompare = val;
 
@@ -292,6 +293,16 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
         }
         return itemVal == valToCompare;
       });
+
+      if (isMatch) {
+        const itemKey = typeof item.value === 'object' ? JSON.stringify(item.value) : String(item.value);
+        if (seenValues.has(itemKey)) {
+          return false; // Skip duplicates
+        }
+        seenValues.add(itemKey);
+      }
+
+      return isMatch;
     });
 
     // Determine input text based on whether count-only mode is enabled