Implemented status property on TarSelect and TarTextarea components.

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-Nothing yet.
+### Added
+
+- Implemented status property on `TarSelect` and `TarTextarea` components.
 
 ## [2.2.0] - 2024-04-17
 

src/App.vue

@@ -4,18 +4,44 @@ import { nanoid } from "nanoid";
 
 import AppDelete from "./components/demo/AppDelete.vue";
 import TarButton from "./components/TarButton.vue";
+import TarCheckbox from "./components/TarCheckbox.vue";
 import TarInput from "./components/TarInput.vue";
+import TarSelect from "./components/TarSelect.vue";
+import TarTextarea from "./components/TarTextarea.vue";
 import TarToaster from "./components/TarToaster.vue";
 import type { InputStatus } from "./types/TarInput";
+import type { SelectStatus, SelectOption } from "./types/TarSelect";
+import type { TextareaStatus } from "./types/TarTextarea";
 import { registerTooltips } from "./helpers/tooltipUtils";
 import { useToastStore } from "./stores/toast";
 
+const animalOptions: SelectOption[] = [
+  { value: "bird", text: "Bird" },
+  { value: "cat", text: "Cat" },
+  { value: "dog", text: "Dog" },
+];
 const store = useToastStore();
 
+const animal = ref<string>("");
+const description = ref<string>("");
 const emailAddress = ref<string>("");
 const isDeleting = ref<boolean>(false);
 const isTouched = ref<boolean>(false);
+const isDescriptionValid = ref<boolean>(false);
 
+const animalStatus = computed<SelectStatus | undefined>(() => {
+  switch (animal.value) {
+    case "bird":
+    case "dog":
+      return "valid";
+    case "cat":
+      return "invalid";
+  }
+  return undefined;
+});
+const descriptionStatus = computed<TextareaStatus | undefined>(() =>
+  description.value.trim().length > 0 ? (isDescriptionValid.value ? "valid" : "invalid") : undefined,
+);
 const status = computed<InputStatus | undefined>(() => (isTouched.value ? (emailAddress.value ? "valid" : "invalid") : undefined));
 
 function reset(): void {
@@ -93,6 +119,29 @@ onUpdated(registerTooltips);
           <div id="email-address-help" class="form-text">We'll never share your email with anyone else.</div>
         </template>
       </TarInput>
+      <TarSelect
+        floating
+        id="animal"
+        label="Favorite Animal"
+        :options="animalOptions"
+        placeholder="Select your favorite animal species"
+        :status="animalStatus"
+        v-model="animal"
+      />
+      <TarTextarea
+        described-by="is-description-valid"
+        floating
+        id="description"
+        label="Description"
+        placeholder="Description"
+        rows="10"
+        :status="descriptionStatus"
+        v-model="description"
+      >
+        <template #after>
+          <TarCheckbox id="is-description-valid" label="Is valid?" v-model="isDescriptionValid" />
+        </template>
+      </TarTextarea>
       <div class="mb-3">
         <TarButton class="me-1" :icon="['fas', 'paper-plane']" text="Send message" type="submit" />
         <TarButton

src/components/TarSelect.vue

@@ -25,6 +25,9 @@ const classes = computed<string[]>(() => {
       classes.push("form-select-sm");
       break;
   }
+  if (props.status) {
+    classes.push(`is-${props.status}`);
+  }
   return classes;
 });
 

src/components/TarTextarea.vue

@@ -27,6 +27,9 @@ const classes = computed<string[]>(() => {
       classes.push("form-control-sm");
       break;
   }
+  if (props.status) {
+    classes.push(`is-${props.status}`);
+  }
   return classes;
 });
 const height = computed<string | undefined>(() => {

src/types/TarSelect.ts

@@ -3,7 +3,7 @@
  */
 export type SelectOption = {
   /**
-   * The input will display with a disabled style and will not react to events.
+   * The option will display with a disabled style and will not react to events.
    */
   disabled?: boolean;
   /**
@@ -76,9 +76,18 @@ export type SelectOptions = {
    * The size of the select.
    */
   size?: SelectSize;
+  /**
+   * The status of the select. The select will display a valid style (green border) or invalid style (red border) when specified.
+   */
+  status?: SelectStatus;
 };
 
 /**
  * The sizes of the TarSelect component.
  */
 export type SelectSize = "small" | "medium" | "large";
+
+/**
+ * The status values of the TarSelect component.
+ */
+export type SelectStatus = "invalid" | "valid";

src/types/TarTextarea.ts

@@ -66,9 +66,18 @@ export type TextareaOptions = {
    * The size of the textarea.
    */
   size?: TextareaSize;
+  /**
+   * The status of the textarea. The textarea will display a valid style (green border) or invalid style (red border) when specified.
+   */
+  status?: TextareaStatus;
 };
 
 /**
  * The sizes of the TarTextarea component.
  */
 export type TextareaSize = "small" | "medium" | "large";
+
+/**
+ * The status values of the TarTextarea component.
+ */
+export type TextareaStatus = "invalid" | "valid";