From 218adcb813400f82a39b3e89620ff23b8f1936ac Mon Sep 17 00:00:00 2001
From: Antoine Savard <antoinesavard8@gmail.com>
Date: Wed, 18 Feb 2026 13:57:42 -0500
Subject: [PATCH] Add has-value class to filled form fields

---
 src/App.vue                                   |  3 ++
 src/components/QuesoField/QuesoField.test.ts  | 29 ++++++++++++++++
 src/components/QuesoField/QuesoField.vue      |  3 +-
 src/components/QuesoField/types.ts            |  1 +
 .../QuesoPassword/QuesoPassword.test.ts       | 22 +++++++++++++
 .../QuesoPassword/QuesoPassword.vue           |  3 +-
 .../QuesoSelect/QuesoSelect.test.ts           | 24 ++++++++++++++
 src/components/QuesoSelect/QuesoSelect.vue    |  7 +++-
 .../QuesoSelectMultiple.test.ts               | 24 ++++++++++++++
 .../QuesoSelectMultiple.vue                   |  4 ++-
 .../QuesoTextArea/QuesoTextArea.test.ts       | 22 +++++++++++++
 .../QuesoTextArea/QuesoTextArea.vue           |  4 ++-
 .../QuesoTextField/QuesoTextField.test.ts     | 33 +++++++++++++++++++
 .../QuesoTextField/QuesoTextField.vue         |  5 ++-
 14 files changed, 178 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e99a44d..07da59b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,9 @@
 <template>
     <h3>Fields</h3>
     <QuesoTextField name="textfield" label="QuesoTextField" v-model="TextField" />
+    <QuesoTextField name="textfield" label="QuesoTextField" v-model="TextField">
+        <template #afterInput>test</template>
+    </QuesoTextField>
     <QuesoPassword name="password" label="QuesoPassword" v-model="PasswordField" />
     <QuesoTextArea name="textarea" label="QuesoTextArea" v-model="TextArea" />
     <QuesoCheckbox
diff --git a/src/components/QuesoField/QuesoField.test.ts b/src/components/QuesoField/QuesoField.test.ts
index 47eb2fc..c3415bb 100644
--- a/src/components/QuesoField/QuesoField.test.ts
+++ b/src/components/QuesoField/QuesoField.test.ts
@@ -13,4 +13,33 @@ describe("QuesoField", () => {
         });
         expect(wrapper.vm).toBeTruthy();
     });
+
+    test("applies has-value class when hasValue prop is true", () => {
+        const wrapper = mount(QuesoField, {
+            props: {
+                name: "field-name",
+                hasValue: true,
+            },
+        });
+        expect(wrapper.classes()).toContain("has-value");
+    });
+
+    test("does not apply has-value class when hasValue prop is false", () => {
+        const wrapper = mount(QuesoField, {
+            props: {
+                name: "field-name",
+                hasValue: false,
+            },
+        });
+        expect(wrapper.classes()).not.toContain("has-value");
+    });
+
+    test("does not apply has-value class when hasValue prop is undefined", () => {
+        const wrapper = mount(QuesoField, {
+            props: {
+                name: "field-name",
+            },
+        });
+        expect(wrapper.classes()).not.toContain("has-value");
+    });
 });
diff --git a/src/components/QuesoField/QuesoField.vue b/src/components/QuesoField/QuesoField.vue
index 309b1c8..4bd3ee3 100644
--- a/src/components/QuesoField/QuesoField.vue
+++ b/src/components/QuesoField/QuesoField.vue
@@ -50,7 +50,7 @@ const emit = defineEmits<{
 /**
  * STATES
  */
-const { isRequired, isDisabled, isError, isReadOnly } = toRefs(props);
+const { isRequired, isDisabled, isError, isReadOnly, hasValue } = toRefs(props);
 
 // Active
 const isActive = ref<boolean>(false);
@@ -93,6 +93,7 @@ const fieldClasses = computed<HTMLAttributes["class"]>(() => ({
     "is-active": isActive.value,
     "is-hover": isHover.value,
     "is-read-only": isReadOnly.value,
+    "has-value": hasValue.value,
 }));
 
 /**
diff --git a/src/components/QuesoField/types.ts b/src/components/QuesoField/types.ts
index be76e19..b8eabfb 100644
--- a/src/components/QuesoField/types.ts
+++ b/src/components/QuesoField/types.ts
@@ -20,6 +20,7 @@ export interface QuesoFieldProps {
 
 export interface QuesoFieldPrivateProps extends QuesoFieldProps {
     hasStaticLabel?: boolean;
+    hasValue?: boolean;
 }
 
 // Typeguard
diff --git a/src/components/QuesoPassword/QuesoPassword.test.ts b/src/components/QuesoPassword/QuesoPassword.test.ts
index 966d379..ff680bb 100644
--- a/src/components/QuesoPassword/QuesoPassword.test.ts
+++ b/src/components/QuesoPassword/QuesoPassword.test.ts
@@ -35,4 +35,26 @@ describe("QuesoPassword", () => {
         });
         expect(wrapper.find(".queso-field__input").exists()).toBe(true);
     });
+
+    test("applies has-value class when model has content", () => {
+        const wrapper = mount(QuesoPassword, {
+            props: {
+                name: "field-name",
+                modelValue: "secret",
+            },
+        });
+        const field = wrapper.findComponent({ name: "QuesoField" });
+        expect(field.classes()).toContain("has-value");
+    });
+
+    test("does not apply has-value class when model is empty", () => {
+        const wrapper = mount(QuesoPassword, {
+            props: {
+                name: "field-name",
+                modelValue: "",
+            },
+        });
+        const field = wrapper.findComponent({ name: "QuesoField" });
+        expect(field.classes()).not.toContain("has-value");
+    });
 });
diff --git a/src/components/QuesoPassword/QuesoPassword.vue b/src/components/QuesoPassword/QuesoPassword.vue
index 08c86dd..729b343 100644
--- a/src/components/QuesoPassword/QuesoPassword.vue
+++ b/src/components/QuesoPassword/QuesoPassword.vue
@@ -1,5 +1,5 @@
 <template>
-    <queso-field class="-password" v-bind="extendedProps">
+    <queso-field class="-password" v-bind="{ ...extendedProps, hasValue: hasContent }">
         <template #beforeLabel="exposedData">
             <slot name="beforeLabel" v-bind="exposedData"></slot>
         </template>
@@ -92,6 +92,7 @@ const props = withDefaults(defineProps<QuesoPasswordProps>(), {});
 const extendedProps = useExtendedFieldProps(props);
 
 const model = defineModel<QuesoPasswordModel>({ required: true, default: "" });
+const hasContent = computed(() => String(model.value ?? "").trim().length > 0);
 
 const isPasswordShow = ref<boolean>(false);
 const type = computed(() => (isPasswordShow.value ? "text" : "password"));
diff --git a/src/components/QuesoSelect/QuesoSelect.test.ts b/src/components/QuesoSelect/QuesoSelect.test.ts
index 6e60925..080a523 100644
--- a/src/components/QuesoSelect/QuesoSelect.test.ts
+++ b/src/components/QuesoSelect/QuesoSelect.test.ts
@@ -43,6 +43,30 @@ describe("QuesoSelect", () => {
         expect(field.classes()).toContain("is-disabled");
     });
 
+    test("applies has-value class when model has a selected value", () => {
+        const wrapper = mount(QuesoSelect, {
+            props: {
+                ...props,
+                modelValue: "1",
+            },
+        });
+
+        const field = wrapper.findComponent({ name: "QuesoField" });
+        expect(field.classes()).toContain("has-value");
+    });
+
+    test("does not apply has-value class when model is empty", () => {
+        const wrapper = mount(QuesoSelect, {
+            props: {
+                ...props,
+                modelValue: "",
+            },
+        });
+
+        const field = wrapper.findComponent({ name: "QuesoField" });
+        expect(field.classes()).not.toContain("has-value");
+    });
+
     // Hiding it for now
     // test("renders correctly the label", () => {
     //     const wrapper = shallowMount(QuesoSelect, {
diff --git a/src/components/QuesoSelect/QuesoSelect.vue b/src/components/QuesoSelect/QuesoSelect.vue
index 0b088fb..df85a99 100644
--- a/src/components/QuesoSelect/QuesoSelect.vue
+++ b/src/components/QuesoSelect/QuesoSelect.vue
@@ -1,5 +1,5 @@
 <template>
-    <queso-field class="-select" v-bind="extendedProps">
+    <queso-field class="-select" v-bind="{ ...extendedProps, hasValue: hasContent }">
         <template #beforeLabel="exposedData">
             <slot name="beforeLabel" v-bind="exposedData"></slot>
         </template>
@@ -98,6 +98,11 @@ const extendedProps = useExtendedFieldProps(props);
 
 const model = defineModel<QuesoSelectModel>({ required: true });
 
+const hasContent = computed(() => {
+    const val = model.value;
+    return val != null && val !== "";
+});
+
 // Writable computed because QuesoDropdown expects an array
 const dropdownModel = computed<QuesoDropdownOptionValues>({
     get() {
diff --git a/src/components/QuesoSelectMultiple/QuesoSelectMultiple.test.ts b/src/components/QuesoSelectMultiple/QuesoSelectMultiple.test.ts
index 3fc6d93..851ade9 100644
--- a/src/components/QuesoSelectMultiple/QuesoSelectMultiple.test.ts
+++ b/src/components/QuesoSelectMultiple/QuesoSelectMultiple.test.ts
@@ -93,4 +93,28 @@ describe("QuesoSelectMultiple.vue", () => {
         const field = wrapper.findComponent({ name: "QuesoField" });
         expect(field.classes()).toContain("is-disabled");
     });
+
+    test("applies has-value class when model has selected values", () => {
+        const wrapper = mount(QuesoSelectMultiple, {
+            props: {
+                ...props,
+                modelValue: ["option1"],
+            },
+        });
+
+        const field = wrapper.findComponent({ name: "QuesoField" });
+        expect(field.classes()).toContain("has-value");
+    });
+
+    test("does not apply has-value class when model is empty", () => {
+        const wrapper = mount(QuesoSelectMultiple, {
+            props: {
+                ...props,
+                modelValue: [],
+            },
+        });
+
+        const field = wrapper.findComponent({ name: "QuesoField" });
+        expect(field.classes()).not.toContain("has-value");
+    });
 });
diff --git a/src/components/QuesoSelectMultiple/QuesoSelectMultiple.vue b/src/components/QuesoSelectMultiple/QuesoSelectMultiple.vue
index 9a21f64..be14f86 100644
--- a/src/components/QuesoSelectMultiple/QuesoSelectMultiple.vue
+++ b/src/components/QuesoSelectMultiple/QuesoSelectMultiple.vue
@@ -1,5 +1,5 @@
 <template>
-    <queso-field class="-select-multiple" v-bind="extendedProps">
+    <queso-field class="-select-multiple" v-bind="{ ...extendedProps, hasValue: hasContent }">
         <template #beforeLabel="exposedData">
             <slot name="beforeLabel" v-bind="exposedData"></slot>
         </template>
@@ -85,6 +85,7 @@
 </template>
 
 <script setup lang="ts" generic="TOptionData extends Record<string, any> = Record<string, any>">
+import { computed } from "vue";
 import { useExtendedFieldProps } from "@composables/fields";
 
 import type { QuesoSelectMultipleModel, QuesoSelectMultipleProps } from "./types";
@@ -96,6 +97,7 @@ const props = defineProps<QuesoSelectMultipleProps<TOptionData>>();
 const extendedProps = useExtendedFieldProps(props);
 
 const model = defineModel<QuesoSelectMultipleModel>({ required: true, default: [] });
+const hasContent = computed(() => Array.isArray(model.value) && model.value.length > 0);
 </script>
 
 <style lang="scss">
diff --git a/src/components/QuesoTextArea/QuesoTextArea.test.ts b/src/components/QuesoTextArea/QuesoTextArea.test.ts
index 7c862ee..d89d457 100644
--- a/src/components/QuesoTextArea/QuesoTextArea.test.ts
+++ b/src/components/QuesoTextArea/QuesoTextArea.test.ts
@@ -35,4 +35,26 @@ describe("QuesoTextArea", () => {
         });
         expect(wrapper.find(".queso-field__input").exists()).toBe(true);
     });
+
+    test("applies has-value class when model has content", () => {
+        const wrapper = mount(QuesoTextArea, {
+            props: {
+                name: "field-name",
+                modelValue: "hello",
+            },
+        });
+        const field = wrapper.findComponent({ name: "QuesoField" });
+        expect(field.classes()).toContain("has-value");
+    });
+
+    test("does not apply has-value class when model is empty", () => {
+        const wrapper = mount(QuesoTextArea, {
+            props: {
+                name: "field-name",
+                modelValue: "",
+            },
+        });
+        const field = wrapper.findComponent({ name: "QuesoField" });
+        expect(field.classes()).not.toContain("has-value");
+    });
 });
diff --git a/src/components/QuesoTextArea/QuesoTextArea.vue b/src/components/QuesoTextArea/QuesoTextArea.vue
index 2aec049..a53634f 100644
--- a/src/components/QuesoTextArea/QuesoTextArea.vue
+++ b/src/components/QuesoTextArea/QuesoTextArea.vue
@@ -1,5 +1,5 @@
 <template>
-    <queso-field class="-text-area" v-bind="extendedProps">
+    <queso-field class="-text-area" v-bind="{ ...extendedProps, hasValue: hasContent }">
         <template #beforeLabel="exposedData">
             <slot name="beforeLabel" v-bind="exposedData"></slot>
         </template>
@@ -54,6 +54,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import { useExtendedFieldProps } from "@composables/fields";
 
 import type { QuesoTextAreaModel, QuesoTextAreaProps } from "./types";
@@ -64,6 +65,7 @@ const props = defineProps<QuesoTextAreaProps>();
 const extendedProps = useExtendedFieldProps(props);
 
 const model = defineModel<QuesoTextAreaModel>({ required: true, default: "" });
+const hasContent = computed(() => String(model.value ?? "").trim().length > 0);
 </script>
 
 <style lang="scss">
diff --git a/src/components/QuesoTextField/QuesoTextField.test.ts b/src/components/QuesoTextField/QuesoTextField.test.ts
index 5bc2949..3477323 100644
--- a/src/components/QuesoTextField/QuesoTextField.test.ts
+++ b/src/components/QuesoTextField/QuesoTextField.test.ts
@@ -35,4 +35,37 @@ describe("QuesoTextField", () => {
         });
         expect(wrapper.find(".queso-field__input").exists()).toBe(true);
     });
+
+    test("applies has-value class when model has content", () => {
+        const wrapper = mount(QuesoTextField, {
+            props: {
+                name: "field-name",
+                modelValue: "hello",
+            },
+        });
+        const field = wrapper.findComponent({ name: "QuesoField" });
+        expect(field.classes()).toContain("has-value");
+    });
+
+    test("does not apply has-value class when model is empty", () => {
+        const wrapper = mount(QuesoTextField, {
+            props: {
+                name: "field-name",
+                modelValue: "",
+            },
+        });
+        const field = wrapper.findComponent({ name: "QuesoField" });
+        expect(field.classes()).not.toContain("has-value");
+    });
+
+    test("does not apply has-value class when model has only whitespace", () => {
+        const wrapper = mount(QuesoTextField, {
+            props: {
+                name: "field-name",
+                modelValue: "   ",
+            },
+        });
+        const field = wrapper.findComponent({ name: "QuesoField" });
+        expect(field.classes()).not.toContain("has-value");
+    });
 });
diff --git a/src/components/QuesoTextField/QuesoTextField.vue b/src/components/QuesoTextField/QuesoTextField.vue
index 0c23850..fea4bc3 100644
--- a/src/components/QuesoTextField/QuesoTextField.vue
+++ b/src/components/QuesoTextField/QuesoTextField.vue
@@ -1,5 +1,5 @@
 <template>
-    <queso-field class="-text-field" v-bind="extendedProps">
+    <queso-field class="-text-field" v-bind="{ ...extendedProps, hasValue: hasContent }">
         <template #beforeLabel="exposedData">
             <slot name="beforeLabel" v-bind="exposedData"></slot>
         </template>
@@ -55,6 +55,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import { useExtendedFieldProps } from "@composables/fields";
 
 import type { QuesoTextFieldModel, QuesoTextFieldProps } from "./types";
@@ -67,6 +68,8 @@ const props = withDefaults(defineProps<QuesoTextFieldProps>(), {
 const extendedProps = useExtendedFieldProps(props);
 
 const model = defineModel<QuesoTextFieldModel>({ required: true, default: "" });
+
+const hasContent = computed(() => String(model.value ?? "").trim().length > 0);
 </script>
 
 <style lang="scss">