From bafaed97ed1600d3a23242147a3042f98359d13b Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Thu, 30 Nov 2023 13:46:57 +0700
Subject: [PATCH 1/2] fix: pass down props from radio group to its children

---
 src/components/forms/checkbox/Checkbox.vue    |  2 +-
 .../radio-button/radio-group/RadioGroup.vue   | 36 +++++++++++++++++--
 .../forms/radio-button/radio/Radio.vue        |  6 ++--
 src/components/forms/text-field/TextField.vue | 13 +++++--
 src/components/index.ts                       |  2 +-
 5 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/components/forms/checkbox/Checkbox.vue b/src/components/forms/checkbox/Checkbox.vue
index 0813e21..50917b4 100644
--- a/src/components/forms/checkbox/Checkbox.vue
+++ b/src/components/forms/checkbox/Checkbox.vue
@@ -214,7 +214,7 @@ const { hasError, hasSuccess } = useFormTextDetail(
     @apply flex-1 text-rui-text;
 
     &:not(:empty) {
-      @apply mt-[9px];
+      @apply mt-[9px] mb-1;
     }
   }
 
diff --git a/src/components/forms/radio-button/radio-group/RadioGroup.vue b/src/components/forms/radio-button/radio-group/RadioGroup.vue
index 689f0e7..67d0f4f 100644
--- a/src/components/forms/radio-button/radio-group/RadioGroup.vue
+++ b/src/components/forms/radio-button/radio-group/RadioGroup.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import VRender from '@/components/VRender';
 import FormTextDetail from '@/components/helpers/FormTextDetail.vue';
+import { type ContextColorsType } from '@/consts/colors';
+import type { RadioProps } from '@/components/forms/radio-button/radio/Radio.vue';
 
 export interface Props {
   value?: string;
@@ -9,19 +11,25 @@ export interface Props {
   errorMessages?: string | string[];
   successMessages?: string | string[];
   hideDetails?: boolean;
+  disabled?: boolean;
+  color?: ContextColorsType;
+  size?: 'sm' | 'lg';
 }
 
 defineOptions({
   name: 'RuiRadioGroup',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   value: '',
   inline: false,
   hint: '',
   errorMessages: () => [],
   successMessages: () => [],
   hideDetails: false,
+  disabled: false,
+  color: undefined,
+  size: undefined,
 });
 
 const emit = defineEmits<{
@@ -31,7 +39,27 @@ const emit = defineEmits<{
 const radioGroupName = ref('');
 
 const slots = useSlots();
-const children = computed(() => slots.default?.() ?? []);
+
+const { disabled, color } = toRefs(props);
+
+const children = computed(() =>
+  (slots.default?.() ?? []).map((node) => {
+    const propsData = (node.componentOptions?.propsData ?? {}) as RadioProps;
+
+    // if group is disabled, disable child buttons
+    if (get(disabled)) {
+      propsData.disabled = true;
+    }
+
+    const rootColor = get(color);
+    // if given root color, use it
+    if (rootColor) {
+      propsData.color = rootColor;
+    }
+
+    return { node, props: propsData };
+  }),
+);
 
 onMounted(() => {
   slots.default?.();
@@ -47,7 +75,9 @@ const css = useCssModule();
       <VRender
         v-for="(child, i) in children"
         :key="i"
-        :v-node="child"
+        :v-node="child.node"
+        v-bind="child.props"
+        :size="size"
         :value="value"
         hide-details
         :name="radioGroupName"
diff --git a/src/components/forms/radio-button/radio/Radio.vue b/src/components/forms/radio-button/radio/Radio.vue
index 64aaebb..41e6380 100644
--- a/src/components/forms/radio-button/radio/Radio.vue
+++ b/src/components/forms/radio-button/radio/Radio.vue
@@ -4,7 +4,7 @@ import { type ContextColorsType } from '@/consts/colors';
 import Icon from '@/components/icons/Icon.vue';
 import FormTextDetail from '@/components/helpers/FormTextDetail.vue';
 
-export interface Props {
+export interface RadioProps {
   internalValue: string;
   value?: string;
   disabled?: boolean;
@@ -21,7 +21,7 @@ defineOptions({
   name: 'RuiRadio',
 });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<RadioProps>(), {
   value: '',
   disabled: false,
   color: undefined,
@@ -210,7 +210,7 @@ const { hasError, hasSuccess } = useFormTextDetail(
     @apply flex-1 text-rui-text;
 
     &:not(:empty) {
-      @apply mt-[9px];
+      @apply mt-[9px] mb-1;
     }
   }
 
diff --git a/src/components/forms/text-field/TextField.vue b/src/components/forms/text-field/TextField.vue
index 5a32446..a69d9a5 100644
--- a/src/components/forms/text-field/TextField.vue
+++ b/src/components/forms/text-field/TextField.vue
@@ -108,6 +108,15 @@ const clearIconClicked = () => {
 
 const input = ref();
 const { focused } = useFocus(input);
+const throttledFocused = ref(false);
+
+watchThrottled(
+  focused,
+  (focused) => {
+    set(throttledFocused, focused);
+  },
+  { throttle: 500 },
+);
 
 const showClearIcon = logicAnd(
   clearable,
@@ -167,13 +176,13 @@ const showClearIcon = logicAnd(
       <div class="flex items-center gap-1 shrink-0" :class="css.append">
         <RuiButton
           v-if="showClearIcon"
-          :class="{ hidden: !focused }"
+          :class="{ hidden: !throttledFocused }"
           variant="text"
           type="button"
           icon
           class="!p-2"
           :color="color"
-          @click.stop="clearIconClicked()"
+          @click="clearIconClicked()"
         >
           <RuiIcon name="close-line" size="20" />
         </RuiButton>
diff --git a/src/components/index.ts b/src/components/index.ts
index 61b1363..403b431 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -32,7 +32,7 @@ import {
   default as RuiRadioGroup,
 } from '@/components/forms/radio-button/radio-group/RadioGroup.vue';
 import {
-  type Props as RadioProps,
+  type RadioProps,
   default as RuiRadio,
 } from '@/components/forms/radio-button/radio/Radio.vue';
 import { default as RuiRevealableTextField } from '@/components/forms/revealable-text-field/RevealableTextField.vue';

From 584f890719eb9806068416bbea644c8d3d4eb63a Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Thu, 30 Nov 2023 16:56:49 +0700
Subject: [PATCH 2/2] fix: fix the clearable issue on text field

---
 src/components/forms/text-field/TextField.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/forms/text-field/TextField.vue b/src/components/forms/text-field/TextField.vue
index a69d9a5..d51cf20 100644
--- a/src/components/forms/text-field/TextField.vue
+++ b/src/components/forms/text-field/TextField.vue
@@ -108,14 +108,14 @@ const clearIconClicked = () => {
 
 const input = ref();
 const { focused } = useFocus(input);
-const throttledFocused = ref(false);
+const focusedDebounced = ref(false);
 
-watchThrottled(
+watchDebounced(
   focused,
   (focused) => {
-    set(throttledFocused, focused);
+    set(focusedDebounced, focused);
   },
-  { throttle: 500 },
+  { debounce: 500 },
 );
 
 const showClearIcon = logicAnd(
@@ -176,7 +176,7 @@ const showClearIcon = logicAnd(
       <div class="flex items-center gap-1 shrink-0" :class="css.append">
         <RuiButton
           v-if="showClearIcon"
-          :class="{ hidden: !throttledFocused }"
+          :class="{ hidden: !focusedDebounced }"
           variant="text"
           type="button"
           icon