feat(tailwind): first version of RefInput to show REF as radiogroup and REF_ARRAY as checkboxgroup

apps/metadata-utils/src/types.ts

@@ -93,8 +93,14 @@ export interface IFieldError {
 }
 
 export type columnId = string;
-export type columnValue = string | number | boolean | columnValueObject;
 
-interface columnValueObject {
+export type columnValue =
+  | string
+  | number
+  | boolean
+  | columnValueObject
+  | columnValueObject[];
+
+export interface columnValueObject {
   [x: string]: columnValue;
 }

apps/tailwind-components/components/Button.vue

@@ -44,6 +44,12 @@ const SIZE_MAPPING = {
   medium: "h-14 px-7.5 text-heading-xl gap-4",
   large: "h-18 px-8.75 text-heading-xl gap-5",
 };
+const ICON_SIZE_MAPPING = {
+  tiny: 12,
+  small: 18,
+  medium: 24,
+  large: 36,
+};
 
 const ICON_POSITION_MAPPING = {
   left: "",
@@ -61,6 +67,10 @@ const sizeClasses = computed(() => {
 const iconPositionClass = computed(() => {
   return ICON_POSITION_MAPPING[props.iconPosition];
 });
+
+const iconSize = computed(() => {
+  return ICON_SIZE_MAPPING[props.size];
+});
 </script>
 
 <template>
@@ -69,7 +79,7 @@ const iconPositionClass = computed(() => {
     class="flex items-center border rounded-full"
   >
     <span v-if="icon">
-      <BaseIcon :name="icon" />
+      <BaseIcon :name="icon" :width="iconSize" />
     </span>
     <span>{{ label }}<slot /></span>
   </button>

apps/tailwind-components/components/button/Text.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    inverted: boolean;
+    icon?: string;
+  }>(),
+  {
+    inverted: false,
+  }
+);
+</script>
+
+<template>
+  <button class="flex items-center">
+    <BaseIcon
+      v-if="icon"
+      :name="icon"
+      :class="`text-search-filter-expand${inverted ? '-mobile' : ''}`"
+      :width="18"
+    />
+    <span
+      class="ml-2 text-body-sm hover:underline"
+      :class="`text-search-filter-expand${inverted ? '-mobile' : ''}`"
+    >
+      <slot />
+    </span>
+  </button>
+</template>

apps/tailwind-components/components/form/Field.vue

@@ -21,7 +21,7 @@ const dirty = computed(() => !pristine.value);
 const touched = ref(false);
 const untouched = computed(() => !touched.value);
 
-const hasError = computed(() => props.errors.length > 0);
+const hasError = computed(() => props.errors?.length > 0);
 
 const formFieldInput = ref<InstanceType<typeof FormFieldInput>>();
 
@@ -53,6 +53,9 @@ function validate(value: columnValue) {
         :type="column.columnType"
         :id="column.id"
         :label="column.label"
+        :refSchemaId="column.refSchemaId"
+        :refTableId="column.refTableId"
+        :refLabel="column.refLabel || column.refLabelDefault"
         :data="data"
         :required="!!column.required"
         :aria-invalid="hasError"

apps/tailwind-components/components/form/FieldInput.vue

@@ -2,17 +2,20 @@
 import type {
   InputString,
   InputTextArea,
+  InputRef,
   InputPlaceHolder,
 } from "#build/components";
 import type {
   columnId,
   columnValue,
   CellValueType,
+  columnValueObject,
 } from "../../../metadata-utils/src/types";
 
 type inputComponent =
   | InstanceType<typeof InputString>
   | InstanceType<typeof InputTextArea>
+  | InstanceType<typeof InputRef>
   | InstanceType<typeof InputPlaceHolder>;
 
 defineProps<{
@@ -21,6 +24,9 @@ defineProps<{
   label: string;
   required: boolean;
   data: columnValue;
+  refSchemaId?: string;
+  refTableId?: string;
+  refLabel?: string;
 }>();
 
 defineEmits(["focus", "error", "update:modelValue"]);
@@ -63,5 +69,16 @@ function validate(value: columnValue) {
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"
   ></LazyInputTextArea>
+  <LazyInputRef
+    v-else-if="type === 'REF_ARRAY' || type === 'REF'"
+    :id="id"
+    :modelValue="data as columnValueObject | columnValueObject[]"
+    :refSchemaId="refSchemaId as string"
+    :refTableId="refTableId as string"
+    :refLabel="refLabel as string"
+    :isArray="type === 'REF_ARRAY'"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  >
+  </LazyInputRef>
   <LazyInputPlaceHolder v-else ref="input" :type="type" />
 </template>

apps/tailwind-components/components/input/CheckboxGroup.vue

@@ -1,13 +1,14 @@
 <template>
   <div :id="`${id}-checkbox-group`">
-    <div class="flex flex-row" v-for="option in checkboxOptions">
+    <div class="flex flex-row" v-for="option in options">
       <input
         type="checkbox"
         :id="`${id}-${option.value}`"
         :name="id"
         :value="option.value"
         v-model="modelValue"
         :checked="modelValue!.includes(option.value)"
+        @input="toggleSelect"
         class="sr-only"
       />
       <InputLabel
@@ -37,23 +38,29 @@
 </template>
 
 <script lang="ts" setup>
-interface checkboxDataIF {
-  value: string;
-  label?: string;
-  checked?: boolean | undefined;
-}
+import type { SelectOption } from "~/types/types";
+
 withDefaults(
   defineProps<{
     id: string;
-    checkboxOptions: checkboxDataIF[];
+    options: SelectOption[];
     showClearButton?: boolean;
   }>(),
   {
     showClearButton: false,
   }
 );
-
 const modelValue = defineModel<string[]>();
+const emit = defineEmits(["update:modelValue", "select", "deselect"]);
+
+function toggleSelect(event: Event) {
+  const target = event.target as HTMLInputElement;
+  if (target.checked) {
+    emit("select", target.value);
+  } else {
+    emit("deselect", target.value);
+  }
+}
 
 function resetModelValue() {
   modelValue.value = [];

apps/tailwind-components/components/input/GUIDELINES.md

@@ -0,0 +1,26 @@
+## Guidelines for inputs
+
+Inputs:
+
+- shouldn't have margins, that is up to the wrapper to apply
+- should have 'script' before 'template' so the props are on top of the file
+
+All inputs should have the following props:
+
+- id
+- modelValue
+- inverted
+
+All inputs could have the following props:
+
+- placeholder
+- hasError
+- valid
+- disabled
+- schemaId (for backend linked inputs)
+- tableId (for backend linked inputs)
+
+N.B. the following files are not inputs and should be moved elsewhere
+
+- Label
+- Placeholder

apps/tailwind-components/components/input/Radio.vue

@@ -9,8 +9,8 @@
 
 <script lang="ts" setup>
 defineProps<{
-  value: string;
+  value: any;
 }>();
 
-const modelValue = defineModel<string>();
+const modelValue = defineModel<any>();
 </script>

apps/tailwind-components/components/input/RadioGroup.vue

@@ -2,7 +2,7 @@
   <div :id="`${id}-radio-group`">
     <div
       class="flex justify-start align-center"
-      v-for="option in radioOptions"
+      v-for="option in options"
       :key="option.value"
     >
       <InputRadio
@@ -11,6 +11,7 @@
         :name="id"
         :value="option.value"
         v-model="modelValue"
+        @input="toggleSelect"
         :checked="option.value === modelValue"
       />
       <InputLabel
@@ -40,26 +41,31 @@
 </template>
 
 <script lang="ts" setup>
-interface RadioOptionsDataIF {
-  value: string;
-  label?: string;
-  checked?: boolean | undefined;
-}
+import type { SelectOption } from "~/types/types";
 
 withDefaults(
   defineProps<{
     id: string;
-    radioOptions: RadioOptionsDataIF[];
+    options: SelectOption[];
     showClearButton?: boolean;
   }>(),
   {
     showClearButton: false,
   }
 );
-
 const modelValue = defineModel<string>();
+const emit = defineEmits(["update:modelValue", "select", "deselect"]);
+
+function toggleSelect(event: Event) {
+  const target = event.target as HTMLInputElement;
+  if (target.checked) {
+    emit("select", target.value);
+  } else {
+    emit("deselect", target.value);
+  }
+}
 
 function resetModelValue() {
-  modelValue.value = "";
+  modelValue.value = undefined;
 }
 </script>