design-system-next 2.26.1 → 2.26.3

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,

package/src/components/table/table.vue

@@ -17,13 +17,7 @@
       </spr-table-actions>
     </div>
     <div :class="getTableClasses.tableBackgroundClasses">
-      <table
-        :key="tableKey"
-        aria-describedby="describe"
-        class="spr-h-full spr-w-full"
-        cellspacing="0"
-        cellpadding="0"
-      >
+      <table :key="tableKey" aria-describedby="describe" class="spr-h-full spr-w-full" cellspacing="0" cellpadding="0">
         <thead>
           <tr v-if="!(props.removeHeaderOnEmpty && tableData.length <= 0)">
             <th
@@ -45,12 +39,16 @@
               :class="[getTableClasses.headerClasses(header)]"
               :style="{ width: header?.width }"
             >
-              <div v-if="props.showHeaderFilter" class="spr-cursor-pointer hover:spr-background-color-hover active:spr-background-color-pressed spr-absolute spr-inset-0 spr-z-[2]" @click="handleHeaderDropdownClick(keyHeader)"></div>
+              <div
+                v-if="props.showHeaderFilter"
+                class="hover:spr-background-color-hover active:spr-background-color-pressed spr-absolute spr-inset-0 spr-z-[2] spr-cursor-pointer"
+                @click="handleHeaderDropdownClick(keyHeader)"
+              ></div>
               <!-- Header with Dropdown Filter -->
               <spr-table-header-dropdown
                 v-if="props.showHeaderFilter"
-                :ref="(el: unknown) => setHeaderDropdownRef(el, keyHeader)"      
                 :id="`th-dropdown-${keyHeader}`"
+                :ref="(el: unknown) => setHeaderDropdownRef(el, keyHeader)"
                 :header="header"
                 :is-sortable="true"
                 :header-classes="getTableClasses.headerNameClass"
@@ -83,7 +81,12 @@
                   />
                 </span>
                 <span v-if="props.showHeaderFilter">
-                  <Icon icon="ph:funnel-simple" height="20" width="20" class="spr-ml-size-spacing-5xs spr-text-[#4B685E]" />
+                  <Icon
+                    icon="ph:funnel-simple"
+                    height="20"
+                    width="20"
+                    class="spr-ml-size-spacing-5xs spr-text-[#4B685E]"
+                  />
                 </span>
               </div>
             </th>
@@ -242,7 +245,7 @@ const emit = defineEmits(tableEmitTypes);
 const slots = useSlots();
 const headerDropdownRefs = ref<Record<string, Element | null>>({});
 
-const setHeaderDropdownRef = (el: unknown, key: string | number) => {  
+const setHeaderDropdownRef = (el: unknown, key: string | number) => {
   if (el) {
     headerDropdownRefs.value[String(key)] = el as Element;
   }