feat(tailwind): first version of RefInput to show REF as radiogroup a…

…nd REF_ARRAY as checkboxgroup (#4585)

apps/metadata-utils/src/types.ts

@@ -102,7 +102,7 @@ export interface IFormLegendSection {
 export type columnId = string;
 export type columnValue = string | number | boolean | null | columnValueObject;
 
-interface columnValueObject {
+export interface columnValueObject {
   [x: string]: columnValue;
 }
 

apps/tailwind-components/assets/css/main.css

@@ -108,6 +108,7 @@
     --text-color-search-button-hover: var(--text-blue-800);
     --text-color-favorite: var(--color-blue-800);
     --text-color-favorite-hover: var(--color-blue-800);
+    --text-color-button-text: var(--color-blue-800);
     --text-color-search-button: var(--color-blue-500);
     --text-color-search-button-hover: var(--color-blue-800);
     --text-color-search-results-view-tabs: var(--color-blue-500);

apps/tailwind-components/assets/css/theme/aumc.css

@@ -24,6 +24,7 @@
 
     --text-color-button-primary: var(--color-white);
     --text-color-button-primary-hover: var(--color-black);
+    --text-color-button-text: var(--color-white);
     --text-color-title: var(--color-white);
     --text-color-form-header: var(--text-color-title);
     --text-color-breadcrumb: var(--text-color-title);

apps/tailwind-components/assets/css/theme/dark.css

@@ -13,6 +13,7 @@
     --text-color-button-primary-hover: var(--color-gray-800);
     --text-color-button-secondary: var(--color-green-500);
     --text-color-button-secondary-hover: var(--color-green-200);
+    --text-color-button-text: var(--color-green-500);
     --text-color-title: var(--color-white);
     --text-color-title-contrast: var(--color-blue-500);
     --text-color-form-header: var(--color-white);

apps/tailwind-components/assets/css/theme/molgenis.css

@@ -48,6 +48,7 @@
     --text-color-button-outline-hover: var(--color-blue-700);
     --text-color-button-disabled: var(--color-gray-600);
     --text-color-button-disabled-hover: var(--color-gray-600);
+    --text-color-button-text: var(--color-white);
     --text-color-menu: var(--color-white);
     --text-color-sub-menu: var(--color-blue-500);
     --text-color-sub-menu-hover: var(--color-blue-700);

apps/tailwind-components/components/Button.vue

@@ -53,6 +53,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: "",
@@ -71,6 +77,9 @@ const iconPositionClass = computed(() => {
   return ICON_POSITION_MAPPING[props.iconPosition];
 });
 
+const iconSize = computed(() => {
+  return ICON_SIZE_MAPPING[props.size];
+});
 const tooltipText = computed(() => {
   return props.tooltip || props.iconOnly ? props.label : "";
 });
@@ -82,8 +91,7 @@ const tooltipText = computed(() => {
     class="flex items-center border rounded-input group-[.button-bar]:rounded-none group-[.button-bar]:first:rounded-l-input group-[.button-bar]:last:rounded-r-input"
     :class="`${colorClasses} ${sizeClasses} ${iconPositionClass} transition-colors`"
   >
-    <BaseIcon v-if="icon" :name="icon" />
-
+    <BaseIcon v-if="icon" :name="icon" :width="iconSize" />
     <span :class="{ 'sr-only': iconOnly }">{{ label }}<slot /></span>
   </button>
 </template>

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

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

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

@@ -7,6 +7,7 @@ import type {
 } from "../../../metadata-utils/src/types";
 
 const props = defineProps<{
+  schemaId: string;
   column: IColumn;
   data: columnValue;
   errors: IFieldError[];
@@ -55,6 +56,9 @@ function validate(value: columnValue) {
         :type="column.columnType"
         :id="column.id"
         :label="column.label"
+        :refSchemaId="column.refSchemaId || schemaId"
+        :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"]);
@@ -85,5 +91,16 @@ function validate(value: columnValue) {
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"
   />
+  <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/form/Fields.vue

@@ -9,6 +9,7 @@ import type {
 } from "../../../metadata-utils/src/types";
 
 const props = defineProps<{
+  schemaId: string;
   metadata: ITableMetaData;
   data: Record<columnId, columnValue>[];
 }>();
@@ -110,6 +111,7 @@ defineExpose({ validate });
       <div class="pb-8" v-for="column in chapter.columns">
         <FormField
           :id="`${column.id}-form-field`"
+          :schemaId="schemaId"
           :column="column"
           :data="dataMap[column.id]"
           :errors="errorMap[column.id]"

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,15 +38,12 @@
 </template>
 
 <script lang="ts" setup>
-interface checkboxDataIF {
-  value: string;
-  label?: string;
-  checked?: boolean | undefined;
-}
+import type { IValueLabel } from "~/types/types";
+
 withDefaults(
   defineProps<{
     id: string;
-    checkboxOptions: checkboxDataIF[];
+    options: IValueLabel[];
     showClearButton?: boolean;
   }>(),
   {
@@ -54,6 +52,16 @@ withDefaults(
 );
 
 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/CheckboxIcon.vue

@@ -11,9 +11,10 @@
     <rect
       width="20"
       height="20"
+      class="stroke-current"
       :class="{
         'fill-input': !checked && !indeterminate,
-        'fill-input-checked stroke-none': checked || indeterminate,
+        'fill-input-checked': checked || indeterminate,
       }"
     />
     <path

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/RadioGroup.vue

@@ -7,15 +7,15 @@
       'flex-col': align === 'vertical',
     }"
   >
-    <div v-for="option in radioOptions" class="flex justify-start align-center">
+    <div v-for="option in options" class="flex justify-start align-center">
       <InputRadio
         :id="`${id}-radio-group-${option.value}`"
         class="sr-only fixed"
         :name="id"
         :value="option.value"
-        :modelValue="props.modelValue"
-        @input="$emit('update:modelValue', $event.target.value)"
-        :checked="option.value === props.modelValue"
+        v-model="modelValue"
+        @input="toggleSelect"
+        :checked="option.value === modelValue"
       />
       <InputLabel
         :for="`${id}-radio-group-${option.value}`"
@@ -46,13 +46,13 @@
 </template>
 
 <script lang="ts" setup>
-import type { IRadioOptionsData } from "~/types/types";
+import type { IValueLabel } from "~/types/types";
+import type { columnValue } from "metadata-utils/src/types";
 
 const props = withDefaults(
   defineProps<{
     id: string;
-    modelValue: boolean | string | null;
-    radioOptions: IRadioOptionsData[];
+    options: IValueLabel[];
     showClearButton?: boolean;
     align?: "horizontal" | "vertical";
   }>(),
@@ -61,19 +61,28 @@ const props = withDefaults(
     align: "vertical",
   }
 );
+const modelValue = defineModel<columnValue>();
+const emit = defineEmits(["update:modelValue", "select", "deselect"]);
 
-const emit = defineEmits(["update:modelValue"]);
+function toggleSelect(event: Event) {
+  const target = event.target as HTMLInputElement;
+  if (target.checked) {
+    emit("select", target.value);
+  } else {
+    emit("deselect", target.value);
+  }
+}
 
 function resetModelValue() {
-  emit("update:modelValue", null);
+  modelValue.value = undefined;
 }
 
 const isClearBtnShow = computed(() => {
   return (
     props.showClearButton &&
-    (props.modelValue === true ||
-      props.modelValue === false ||
-      (typeof props.modelValue === "string" && props.modelValue.length > 0))
+    (modelValue.value === true ||
+      modelValue.value === false ||
+      (modelValue.value && modelValue.value !== ""))
   );
 });
 </script>

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

@@ -12,9 +12,11 @@
       r="9"
       stroke-width="1"
       fill="none"
-      class="stroke-gray-600"
+      class="stroke-current"
       :class="{
-        'fill-yellow-500 stroke-none': checked,
+        'fill-input hover:fill-input-checked hover:stroke-none focus:fill-input-checked focus:stroke-none':
+          !checked,
+        'fill-input-checked stroke-none': checked,
       }"
     />
     <circle
@@ -23,10 +25,10 @@
       r="3"
       stroke-width="1"
       stroke="none"
+      class="fill-transparent"
       :class="{
-        'fill-gray-900': checked,
+        '!fill-gray-900': checked,
       }"
-      v-if="checked"
     />
   </svg>
 </template>