design-system-next 1.13.2 → 1.13.4

package/src/components/input/input.vue

@@ -4,22 +4,23 @@
       {{ props.label }}
     </label>
 
-    <div class="spr-relative">
+    <div :class="inputClasses.inputTextBaseClasses">
       <div v-if="$slots.prefix" :class="inputClasses.prefixSlotClasses">
         <slot name="prefix" />
       </div>
       <input
         v-bind="$attrs"
         :class="[inputClasses.inputTextClasses, { 'number-input': props.type === 'number' }]"
-        :value="props.modelValue ? props.modelValue : props.preValue"
         :placeholder="props.placeholder"
         :disabled="props.disabled"
         :readonly="props.readonly"
         :type="props.type"
         :minlength="props.minLength"
         :maxlength="props.maxLength"
+        :value="modelValue"
         @input="onInput"
       />
+      <!-- :value="props.modelValue ? modelValue : props.preValue" -->
       <div v-if="$slots.trailing" :class="inputClasses.trailingSlotClasses">
         <slot name="trailing" />
       </div>
@@ -30,11 +31,7 @@
 
     <label
       v-if="props.displayHelper"
-      :class="[
-        inputClasses.helperClasses,
-        'spr-body-sm-regular',
-        'spr-flex spr-items-center spr-gap-size-spacing-5xs',
-      ]"
+      :class="[inputClasses.helperClasses, 'spr-body-sm-regular', 'spr-flex spr-items-center spr-gap-size-spacing-5xs']"
     >
       <slot name="helperMessage">
         <icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
@@ -46,16 +43,17 @@
 
 <script setup lang="ts">
 import { useSlots } from 'vue';
+
 import { Icon } from '@iconify/vue';
+
 import { inputPropTypes, inputEmitTypes } from './input';
 import { useInput } from './use-input';
 
 const emit = defineEmits(inputEmitTypes);
-
 const props = defineProps(inputPropTypes);
 const slots = useSlots();
 
-const { inputClasses, onInput } = useInput(props, slots, emit);
+const { inputClasses, onInput } = useInput(props, emit, slots);
 </script>
 
 <style scoped>

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

@@ -1,4 +1,4 @@
-import { toRefs, computed, ComputedRef, watch } from 'vue';
+import { toRefs, computed, ComputedRef } from 'vue';
 import { useVModel } from '@vueuse/core';
 
 import classNames from 'classnames';
@@ -9,6 +9,7 @@ import type { InputPropTypes, InputEmitTypes } from './input';
 interface InputClasses {
   baseClasses: string;
   labelClasses: string;
+  inputTextBaseClasses: string;
   inputTextClasses: string;
   iconSlotClasses: string;
   prefixSlotClasses: string;
@@ -18,10 +19,11 @@ interface InputClasses {
 
 export const useInput = (
   props: InputPropTypes,
-  slots: Record<string, unknown>,
   emit: SetupContext<InputEmitTypes>['emit'],
+  slots: Record<string, unknown>,
 ) => {
-  const { preValue, active, error, disabled, offsetSize } = toRefs(props);
+  const { active, error, disabled, offsetSize } = toRefs(props);
+
   const modelValue = useVModel(props, 'modelValue', emit);
 
   const inputClasses: ComputedRef<InputClasses> = computed(() => {
@@ -31,53 +33,60 @@ export const useInput = (
       'spr-text-color-on-fill-disabled': disabled.value,
     });
 
-    const inputTextClasses = classNames(
-      'spr-block spr-h-9 spr-w-full spr-px-size-spacing-2xs spr-py-size-spacing-4xs spr-rounded-border-radius-md spr-outline-none spr-ring-0 spr-box-border',
-      'spr-text-color-strong spr-font-size-200 [font-weight:inherit]',
-      'spr-border spr-border-solid',
-      'placeholder:spr-text-mushroom-300',
+    const inputTextBaseClasses = classNames(
+      'spr-relative spr-flex spr-items-center spr-rounded-border-radius-md spr-border spr-border-solid',
       {
         'spr-border-mushroom-200 focus:spr-border-kangkong-700': !error.value && !disabled.value && !active.value,
         'spr-border-kangkong-700 spr-border-[1.5px] spr-border-solid': active.value,
         'spr-border-tomato-600 focus:spr-border-tomato-600': error.value,
-        'spr-background-color-disabled spr-border-white-100 focus:spr-border-white-100 spr-cursor-not-allowed spr-text-color-on-fill-disabled':
+        'spr-background-color-disabled spr-cursor-not-allowed spr-text-color-on-fill-disabled spr-border-white-100 focus:spr-border-white-100':
           disabled.value,
-        'spr-pr-[5%]': slots.icon,
-        'spr-pl-size-spacing-lg': slots.prefix,
-        '!spr-pl-size-spacing-3xl': props.type === 'url',
-        '!spr-pl-[57px]': props.type === 'contact-number',
-        'spr-pr-[93%] sm:spr-pr-[85%]': offsetSize.value === 'xs' && slots.trailing,
-        'spr-pr-[90%] sm:spr-pr-[80%]': offsetSize.value === 'sm' && slots.trailing,
-        'spr-pr-[50%]': offsetSize.value === 'md' && slots.trailing,
       },
     );
 
-    const iconSlotClasses = classNames(
-      'spr-absolute spr-right-3 spr-top-1/2 spr-h-full -spr-translate-y-1/2 spr-transform spr-text-mushroom-300 spr-flex spr-items-center',
+    const inputTextClasses = classNames(
+      'spr-block spr-h-8 spr-py-size-spacing-4xs spr-outline-none spr-ring-0 spr-border-none spr-rounded-border-radius-md spr-font-size-200 spr-text-color-strong',
+      'spr-text-color-strong spr-font-size-200 [font-weight:inherit]',
+      'placeholder:spr-text-mushroom-300',
       {
-        '!spr-text-tomato-600': error.value,
+        'spr-cursor-not-allowed': disabled.value,
+
+        // Prefix, Suffix, Trailing
+        'spr-px-3': !slots.prefix && !slots.icon && !slots.trailing,
+        'spr-pr-3': slots.prefix && !slots.icon && !slots.trailing,
+        'spr-pl-3': !slots.prefix && (slots.icon || slots.trailing),
+
+        // Trailing Width Adjustments
+        'spr-w-full': !slots.trailing,
+        'spr-w-[50px]': slots.trailing && offsetSize.value === 'xs',
+        'spr-w-[40%]': slots.trailing && offsetSize.value === 'sm',
+        'spr-w-[100%]': slots.trailing && offsetSize.value === 'md',
       },
     );
 
-    const prefixSlotClasses = classNames(
-      'spr-absolute spr-left-3 spr-top-1/2 spr-h-5 spr-w-5 -spr-translate-y-1/2 spr-transform spr-text-mushroom-300',
+    const iconSlotClasses = classNames(
+      'spr-flex spr-items-center spr-justify-center spr-h-8 spr-px-2 [&>svg]:spr-min-h-4 [&>svg]:spr-min-w-4',
       {
-        '!spr-text-tomato-600': error.value,
-        'spr-font-size-200 !spr-top-4 ': props.type === 'url',
-        'spr-top-4 spr-z-10': props.type === 'contact-number',
+        'spr-text-mushroom-300': !error.value,
+        'spr-text-tomato-600': error.value,
       },
     );
 
-    const trailingSlotClasses = classNames(
-      'spr-absolute spr-left-[55%] spr-top-1/2 -spr-translate-y-1/2 spr-transform spr-text-mushroom-300',
+    const prefixSlotClasses = classNames(
+      'spr-flex spr-items-center spr-justify-center spr-h-8 spr-px-2 [&>svg]:spr-min-h-4 [&>svg]:spr-min-w-4',
       {
-        '!spr-text-tomato-600': error.value,
-        'spr-left-[7%] sm:spr-left-[16%]': offsetSize.value === 'xs' && slots.trailing,
-        'spr-left-[12%] sm:spr-left-[24%]': offsetSize.value === 'sm' && slots.trailing,
-        'spr-left-[52%]': offsetSize.value === 'md' && slots.trailing,
+        'spr-text-mushroom-300': !error.value,
+        'spr-text-tomato-600': error.value,
+        'spr-font-size-200': props.type === 'url',
+        'spr-top-4 spr-z-10': props.type === 'contact-number',
       },
     );
 
+    const trailingSlotClasses = classNames('spr-flex spr-items-center spr-h-8 spr-w-full spr-px-2', {
+      'spr-text-mushroom-300': !error.value,
+      'spr-text-tomato-600': error.value,
+    });
+
     const helperClasses = classNames({
       'spr-text-color-danger-base': error.value,
       'spr-text-color-supporting': !error.value,
@@ -86,6 +95,7 @@ export const useInput = (
     return {
       baseClasses,
       labelClasses,
+      inputTextBaseClasses,
       inputTextClasses,
       iconSlotClasses,
       prefixSlotClasses,
@@ -94,14 +104,8 @@ export const useInput = (
     };
   });
 
-  watch(preValue, () => {
-    modelValue.value = preValue.value;
-  });
-
   const onInput = (event: Event) => {
-    const target = event.target as HTMLInputElement;
-
-    modelValue.value = target.value;
+    modelValue.value = (event.target as HTMLInputElement).value;
   };
 
   return {

package/src/components/radio/radio.ts

@@ -28,4 +28,4 @@ export const radioEmitTypes = ['update:modelValue'];
 
 export type RadioPropTypes = ExtractPropTypes<typeof radioPropTypes>;
 
-export type SwitchEmitTypes = typeof radioEmitTypes;
+export type RadioEmitTypes = typeof radioEmitTypes;

package/src/components/radio/radio.vue

@@ -18,16 +18,16 @@
 </template>
 
 <script lang="ts" setup>
-import { useVModel } from '@vueuse/core';
+import { useSlots } from 'vue';
 
 import { radioPropTypes, radioEmitTypes } from './radio';
 import { useRadioButton } from './use-radio';
 
 const props = defineProps(radioPropTypes);
 const emit = defineEmits(radioEmitTypes);
+const slots = useSlots();
 
-const proxyValue = useVModel(props, 'modelValue', emit);
-const { radioRef, radioClasses } = useRadioButton(props);
+const { proxyValue, radioRef, radioClasses } = useRadioButton(props, emit, slots);
 </script>
 
 <style scoped>

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

@@ -1,9 +1,10 @@
 import { ref, toRefs, computed, ComputedRef } from 'vue';
-import { useElementHover } from '@vueuse/core';
+import { useVModel, useElementHover } from '@vueuse/core';
 
 import classNames from 'classnames';
 
-import type { RadioPropTypes } from './radio';
+import type { SetupContext } from 'vue';
+import type { RadioPropTypes, RadioEmitTypes } from './radio';
 
 interface RadioClasses {
   baseClasses: string;
@@ -11,7 +12,11 @@ interface RadioClasses {
   labelClasses: string;
 }
 
-export const useRadioButton = (props: RadioPropTypes) => {
+export const useRadioButton = (
+  props: RadioPropTypes,
+  emit: SetupContext<RadioEmitTypes>['emit'],
+  slots: Record<string, unknown>,
+) => {
   const { modelValue, disabled } = toRefs(props);
 
   const radioRef = ref<HTMLInputElement | null>(null);
@@ -23,9 +28,10 @@ export const useRadioButton = (props: RadioPropTypes) => {
     });
 
     const baseIndicatorClasses = classNames(
-      'spr-inline-block spr-w-4 spr-h-4 spr-rounded-full spr-border-2 spr-border-solid spr-mr-2 spr-shrink-0',
+      'spr-inline-block spr-w-4 spr-h-4 spr-rounded-full spr-border-2 spr-border-solid spr-shrink-0',
       'spr-transition spr-duration-150 spr-ease-in-out',
       {
+        'spr-mr-2': slots.default,
         'group-active:spr-scale-95': !disabled.value,
       },
 
@@ -81,8 +87,11 @@ export const useRadioButton = (props: RadioPropTypes) => {
     };
   });
 
+  const proxyValue = useVModel(props, 'modelValue', emit);
+
   return {
     radioRef,
     radioClasses,
+    proxyValue,
   };
 };

package/src/components/table/table.vue

@@ -21,7 +21,7 @@
     <div :class="getTableClasses.getTableHeight">
       <table aria-describedby="describe" class="spr-w-full spr-table-fixed" cellspacing="0" cellpadding="0">
         <thead>
-          <tr v-if="props.removeHeaderOnEmpty && sortedData.length > 0">
+          <tr v-if="!props.removeHeaderOnEmpty && sortedData.length > 0">
             <th v-for="(header, keyHeader) in headers" :key="keyHeader" :class="[getTableClasses.headerClasses]">
               <div :class="getTableClasses.headerNameClass">
                 <span :class="[{ 'spr-cursor-pointer': header.sort }]" @click="header.sort && sortData(header.field)">