@raclettejs/workbench 0.1.33-canary.3 → 0.1.33

package/services/frontend/src/app/components/dynamicForm/DynamicForm.vue

@@ -1,69 +1,97 @@
 <template>
-  <div class="tw:p-6" :class="{ 'tw:max-w-6xl': !fluid }">
-    <div v-if="title" class="tw:mb-6 tw:flex tw:gap-1 tw:items-center">
-      <v-btn
-        v-if="routeBackInteractionLinkId"
-        @click="navigateBack"
-        density="comfortable"
-        icon="mdi-chevron-left"
-        flat
-      />
-      <h1 v-if="title" class="tw:text-2xl tw:font-bold">
-        {{ title }}
-      </h1>
-    </div>
-
-    <v-form @submit.prevent="onFormSubmit">
-      <!-- body -->
-      <div class="tw:grid tw:gap-6">
-        <template v-for="(value, key) in props.data" :key="key">
-          <TextDivider v-if="'divider' in value" :label="value.divider" />
-          <DynamicInput
-            v-else
-            v-model="modelProxy[value.field]"
-            :input-type="value.inputType"
-            :value="value"
-            :disabled="!!disabled"
-            :error-message="getValidationError(value)"
-            @validate="validateField(value)"
-          />
-        </template>
-      </div>
-
-      <!-- button area -->
-      <slot name="button-area-override">
-        <v-btn type="submit" class="tw:hidden!" />
-        <div
-          class="tw:mt-8 tw:flex tw:gap-4 tw:justify-end"
-          v-if="$slots?.['button-area']"
+  <div :class="wrapperClasses">
+    <v-form
+      class="tw:flex tw:min-h-0 tw:w-full tw:flex-col"
+      @submit.prevent="onFormSubmit"
+    >
+      <div class="tw:flex tw:min-h-0 tw:w-full tw:flex-col">
+        <header
+          v-if="title || routeBackInteractionLinkId"
+          class="tw:flex tw:items-center tw:justify-between tw:gap-3 tw:pt-3"
         >
-          <slot name="button-area" v-bind="{ isValid, validateAllFields }" />
-          <!-- <v-btn color="primary" variant="outlined"> Validate Form </v-btn>
+          <div class="tw:flex tw:min-w-0 tw:items-center tw:gap-2">
+            <v-btn
+              v-if="routeBackInteractionLinkId"
+              @click="navigateBack"
+              :density="vuetifyDensity"
+              icon="mdi-chevron-left"
+              variant="text"
+              aria-label="Go back"
+            />
+            <h1
+              v-if="title"
+              class="tw:min-w-0 tw:truncate tw:font-semibold tw:tracking-tight tw:text-[color:rgb(var(--v-theme-on-surface))]"
+              :class="titleClasses"
+            >
+              {{ title }}
+            </h1>
+          </div>
+        </header>
+
+        <!-- body -->
+        <div class="tw:grid" :class="bodyClasses">
+          <template v-for="(value, key) in props.data" :key="key">
+            <TextDivider
+              v-if="'divider' in value"
+              :label="value.divider"
+              :density="density"
+            />
+            <DynamicInput
+              v-else
+              v-model="modelProxy[value.field]"
+              :input-type="value.inputType"
+              :value="value"
+              :disabled="!!disabled"
+              :error-message="getValidationError(value)"
+              :density="density"
+              @validate="validateField(value)"
+            />
+          </template>
+        </div>
+
+        <!-- button area -->
+        <slot name="button-area-override">
+          <v-btn type="submit" class="tw:hidden!" />
+          <footer
+            v-if="$slots?.['button-area']"
+            class="tw:flex tw:flex-wrap tw:items-center tw:justify-end"
+            :class="actionClasses"
+          >
+            <slot name="button-area" v-bind="{ isValid, validateAllFields }" />
+            <!-- <v-btn color="primary" variant="outlined"> Validate Form </v-btn>
         <v-btn color="secondary" variant="outlined"> Reset Form </v-btn>
         <v-btn color="info" variant="outlined"> Show Form Data </v-btn> -->
-        </div>
-      </slot>
+          </footer>
+        </slot>
+      </div>
     </v-form>
   </div>
 </template>
 
 <script setup lang="ts" generic="T">
-import { computed, ref, watch, watchEffect } from "vue"
+import { computed, ref, watch, watchEffect, withDefaults } from "vue"
 import DynamicInput from "./DynamicInput.vue"
 import TextDivider from "./TextDivider.vue"
 import { DynamicFormItem, DynamicFormField } from "./DynamicFormTypes"
 import { useI18n } from "vue-i18n"
 import { useRouteState } from "@raclettejs/core/orchestrator/composables"
 
-const props = defineProps<{
-  title?: string
-  data: DynamicFormItem<T>[]
-  modelValue: T
-  disabled?: Boolean
-  validateOnChange?: boolean
-  fluid?: boolean
-  routeBackInteractionLinkId?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    data: DynamicFormItem<T>[]
+    modelValue: T
+    disabled?: Boolean
+    validateOnChange?: boolean
+    /** When false, constrains width (previous default). Default true fills the layout. */
+    fluid?: boolean
+    routeBackInteractionLinkId?: string
+    density?: "compact" | "comfortable" | "spacious"
+  }>(),
+  {
+    fluid: true,
+  },
+)
 
 const emit = defineEmits<{
   (e: "update:modelValue", value: T): void
@@ -75,6 +103,66 @@ const { t } = useI18n()
 const { triggerInteractionLinkById } = useRouteState()
 
 const validationErrors = ref<Record<string, string>>({})
+const density = computed(() => props.density ?? "comfortable")
+
+const vuetifyDensity = computed(() => {
+  if (density.value === "spacious") {
+    return "default"
+  }
+  return density.value
+})
+
+const horizontalInsetClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:px-3 sm:tw:px-4"
+  }
+  if (density.value === "spacious") {
+    return "tw:px-5 tw:mdpx-6"
+  }
+  return "tw:px-4 tw:mdpx-5"
+})
+
+const wrapperClasses = computed(() => [
+  "tw:box-border tw:flex tw:min-h-0 tw:w-full tw:flex-col",
+  horizontalInsetClasses.value,
+  !props.fluid ? "tw:mx-auto tw:max-w-6xl" : "",
+])
+
+const titleClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:text-lg"
+  }
+
+  if (density.value === "spacious") {
+    return "tw:text-2xl"
+  }
+
+  return "tw:text-xl"
+})
+
+const bodyClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:gap-0"
+  }
+
+  if (density.value === "spacious") {
+    return "tw:gap-4"
+  }
+
+  return "tw:gap-2"
+})
+
+const actionClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:gap-2 tw:py-3"
+  }
+
+  if (density.value === "spacious") {
+    return "tw:gap-4 tw:py-5"
+  }
+
+  return "tw:gap-3 tw:py-4"
+})
 
 const isValid = computed(() => Object.keys(validationErrors.value).length === 0)
 

package/services/frontend/src/app/components/dynamicForm/DynamicInput.vue

@@ -1,11 +1,33 @@
 <template>
-  <div class="tw:grid tw:grid-cols-12 tw:gap-6">
-    <label class="tw:col-span-5" :for="inputId" v-if="hasTitleOrDescription">
-      <div class="tw:text-sm tw:font-bold">
+  <div
+    class="tw:grid tw:grid-cols-1 tw:rounded-md tw:p-2 tw:grid-cols-12"
+    :class="rowGapClasses"
+  >
+    <label
+      class="tw:col-span-5"
+      :class="labelSpacingClasses"
+      :for="inputId"
+      v-if="hasTitleOrDescription"
+    >
+      <div
+        class="tw:font-semibold tw:leading-5 tw:text-[color:rgb(var(--v-theme-on-surface))]"
+        :class="labelTextClasses"
+      >
         {{ value.title }}
-        <span v-if="value.validation?.required" class="tw:text-red-500">*</span>
+        <span
+          v-if="value.validation?.required"
+          class="tw:ml-0.5 tw:text-[color:rgb(var(--v-theme-error))]"
+          aria-hidden="true"
+        >
+          *
+        </span>
       </div>
-      <div class="tw:text-xs">
+      <div
+        v-if="value.description"
+        :id="descriptionHtmlId ?? undefined"
+        class="tw:mt-1 tw:max-w-prose tw:leading-snug tw:text-[color:rgb(var(--v-theme-on-surface))]"
+        :class="descriptionTextClasses"
+      >
         {{ value.description }}
       </div>
     </label>
@@ -66,6 +88,7 @@
         <RecordInput
           v-model="recordModel"
           :input-id="inputId"
+          v-bind="additionalInputBindings"
           @blur="$emit('validate')"
         />
       </template>
@@ -87,6 +110,7 @@
           v-model="objectArrayModel"
           :fields="value.fields"
           :disabled="!!disabled"
+          :density="density"
           @validate="$emit('validate')"
         />
       </template>
@@ -239,6 +263,7 @@ const props = defineProps<{
   disabled?: boolean
   errorMessage?: string
   hideDetails?: boolean
+  density?: "compact" | "comfortable" | "spacious"
 }>()
 
 defineEmits<{
@@ -262,6 +287,69 @@ const id = useId()
 const attrs = useAttrs()
 
 const inputId = computed(() => `dynamic-input-${id}`)
+const descriptionHtmlId = computed(() =>
+  props.value.description ? `${inputId.value}-description` : undefined,
+)
+
+const density = computed(() => props.density ?? "comfortable")
+
+const vuetifyDensity = computed(() => {
+  if (density.value === "spacious") {
+    return "default"
+  }
+  return density.value
+})
+
+const rowGapClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:gap-3 tw:md:gap-4"
+  }
+  if (density.value === "spacious") {
+    return "tw:gap-6"
+  }
+  return "tw:gap-4 tw:md:gap-5"
+})
+
+const labelSpacingClasses = computed(() => {
+  if (density.value === "spacious") {
+    return "tw:pt-1"
+  }
+  return ""
+})
+
+const labelTextClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:text-sm"
+  }
+  if (density.value === "spacious") {
+    return "tw:text-base"
+  }
+  return "tw:text-sm"
+})
+
+const descriptionTextClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:text-xs"
+  }
+  return "tw:text-sm"
+})
+
+const accessibilityFieldBindings = computed(() => {
+  const o: Record<string, unknown> = {
+    color: "primary",
+  }
+  const descId = descriptionHtmlId.value
+  if (descId) {
+    o["aria-describedby"] = descId
+  }
+  if (props.value.validation?.required) {
+    o["aria-required"] = true
+  }
+  if (props.errorMessage) {
+    o["aria-invalid"] = true
+  }
+  return o
+})
 
 const createTypedModel = <T extends DynamicModelType>(
   types: DynamicInputType[],
@@ -333,8 +421,10 @@ const additionalInputBindings = computed(() => {
   } = props.value
 
   const result: Record<string, unknown> = {
+    ...accessibilityFieldBindings.value,
     prefix,
     suffix,
+    density: vuetifyDensity.value,
     prependIcon: prependIcon ? `mdi-${prependIcon}` : undefined,
     prependInnerIcon: prependInnerIcon ? `mdi-${prependInnerIcon}` : undefined,
     appendIcon: appendIcon ? `mdi-${appendIcon}` : undefined,

package/services/frontend/src/app/components/dynamicForm/ObjectListInput.vue

@@ -1,75 +1,110 @@
 <template>
-  <div class="tw:grid tw:gap-4">
-    <v-expansion-panels v-model="openPanels" multiple>
-      <v-expansion-panel
-        v-for="(item, index) in internalItems"
-        :key="index"
-        :value="index"
+  <div class="tw:flex tw:flex-col tw:gap-4">
+    <div
+      class="tw:rounded-lg tw:border tw:border-solid tw:border-[color:rgb(var(--v-theme-border-default))] tw:bg-[rgb(var(--v-theme-primary)/0.04)] tw:pb-2 tw:pl-2 tw:pr-2 tw:pt-2"
+    >
+      <v-expansion-panels
+        v-model="openPanels"
+        class="dynamic-object-list-panels tw:rounded-lg tw:bg-transparent"
+        flat
+        multiple
+        rounded="lg"
       >
-        <v-expansion-panel-title class="tw:flex tw:items-center tw:gap-2">
-          <span class="tw:flex-1">
-            {{ getPanelTitle(item, index) }}
-          </span>
-          <v-btn
-            icon="mdi-minus"
-            size="small"
-            variant="text"
-            :disabled="disabled"
-            @click.stop="removeItem(index)"
-          />
-        </v-expansion-panel-title>
-
-        <v-expansion-panel-text>
-          <div class="tw:grid tw:gap-4 tw:pt-4">
-            <DynamicInput
-              v-for="field in fields"
-              :key="field.field as string"
-              v-model="internalItems[index][field.field]"
-              :input-type="field.inputType"
-              :value="field"
+        <v-expansion-panel
+          v-for="(item, index) in internalItems"
+          :key="index"
+          :value="index"
+          class="tw:bg-[rgb(var(--v-theme-primary)/0.02)] [&:first-child]:tw:rounded-t-lg [&:last-child]:tw:rounded-b-lg"
+        >
+          <v-expansion-panel-title
+            class="tw:flex tw:min-h-14 tw:items-center tw:gap-2 tw:py-4 tw:text-[color:rgb(var(--v-theme-on-surface))]"
+          >
+            <span class="tw:flex-1 tw:truncate tw:font-semibold tw:text-sm">
+              {{ getPanelTitle(item, index) }}
+            </span>
+            <v-btn
+              icon="mdi-minus"
+              size="small"
+              variant="text"
+              color="error"
+              class="tw:shrink-0"
+              type="button"
+              :density="panelButtonDensity"
               :disabled="disabled"
-              @update:model-value="onItemChange(index)"
-              @validate="$emit('validate')"
+              :aria-label="t('workbench.dynamicInputs.objectList.removeEntry')"
+              @click.stop="removeItem(index)"
             />
-          </div>
-        </v-expansion-panel-text>
-      </v-expansion-panel>
-    </v-expansion-panels>
+          </v-expansion-panel-title>
+
+          <v-expansion-panel-text
+            class="tw:border-t tw:border-solid tw:border-[color:rgb(var(--v-theme-border-default))]"
+          >
+            <div class="tw:grid tw:gap-4 tw:pb-4 tw:pt-4">
+              <DynamicInput
+                v-for="field in fields"
+                :key="String(field.field)"
+                v-model="internalItems[index][field.field]"
+                :input-type="field.inputType"
+                :value="field"
+                :disabled="disabled"
+                :density="density"
+                @update:model-value="onItemChange(index)"
+                @validate="$emit('validate')"
+              />
+            </div>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </div>
 
     <v-btn
       v-if="canAddNewItem"
-      color="primary"
-      variant="outlined"
+      variant="flat"
+      color="secondary"
       prepend-icon="mdi-plus"
+      class="tw:self-start tw:!rounded-lg"
+      size="small"
+      type="button"
+      :density="panelButtonDensity"
       :disabled="disabled"
       @click="addNewItem"
     >
-      Add Entry
+      {{ t("workbench.dynamicInputs.objectList.addEntry") }}
     </v-btn>
   </div>
 </template>
 
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { ref, watch, computed } from "vue"
+import { computed, ref, watch } from "vue"
+import { useI18n } from "vue-i18n"
 import DynamicInput from "./DynamicInput.vue"
 import type { DynamicFormField } from "./DynamicFormTypes"
 
+const { t } = useI18n()
+
 const props = defineProps<{
   fields?: DynamicFormField<T>[]
   disabled?: boolean
+  density?: "compact" | "comfortable" | "spacious"
 }>()
 
 defineEmits<{
   validate: []
 }>()
 
+const density = computed(() => props.density ?? "comfortable")
+
+const panelButtonDensity = computed(() =>
+  density.value === "compact" ? "compact" : "comfortable",
+)
+
 const modelValue = defineModel<T[]>({ required: true, default: () => [] })
 
 const internalItems = ref<T[]>([])
 const openPanels = ref<number[]>([0])
 
 const initializeEmptyItem = (): T => {
-  const item: any = {}
+  const item: Record<string, unknown> = {}
   props.fields?.forEach((field) => {
     const fieldKey = field.field as string
 
@@ -127,7 +162,9 @@ const isItemEmpty = (item: T): boolean => {
 
 const getPanelTitle = (item: T, index: number): string => {
   if (!props.fields || props.fields.length === 0) {
-    return `Entry ${index + 1}`
+    return t("workbench.dynamicInputs.objectList.unnamedEntry", {
+      n: index + 1,
+    })
   }
 
   const firstField = props.fields[0]
@@ -137,7 +174,7 @@ const getPanelTitle = (item: T, index: number): string => {
     return String(firstValue)
   }
 
-  return `Entry ${index + 1}`
+  return t("workbench.dynamicInputs.objectList.unnamedEntry", { n: index + 1 })
 }
 
 const syncToModelValue = () => {
@@ -145,7 +182,7 @@ const syncToModelValue = () => {
   modelValue.value = nonEmptyItems
 }
 
-const onItemChange = (index: number) => {
+const onItemChange = (_index: number) => {
   syncToModelValue()
 }
 

package/services/frontend/src/app/components/dynamicForm/TextDivider.vue

@@ -1,13 +1,53 @@
 <template>
-  <div class="tw:flex tw:w-full tw:items-center tw:gap-2">
-    <v-divider />
-    <div class="tw:text-nowrap">{{ label }}</div>
-    <v-divider />
+  <div
+    class="tw:flex tw:w-full tw:items-center"
+    :class="containerClasses"
+    role="separator"
+    :aria-label="label"
+  >
+    <v-divider
+      class="tw:opacity-80"
+      color="border-default"
+      thickness="1"
+    />
+    <div
+      class="tw:text-nowrap tw:font-medium tw:tracking-wide tw:text-[color:rgb(var(--v-theme-on-surface))]"
+      :class="labelClasses"
+    >
+      {{ label }}
+    </div>
+    <v-divider
+      class="tw:opacity-80"
+      color="border-default"
+      thickness="1"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps({
-  label: { type: String, required: true },
+import { computed } from "vue"
+
+const props = defineProps<{
+  label: string
+  density?: "compact" | "comfortable" | "spacious"
+}>()
+
+const density = computed(() => props.density ?? "comfortable")
+
+const containerClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:gap-2 tw:py-2"
+  }
+  if (density.value === "spacious") {
+    return "tw:gap-4 tw:py-4"
+  }
+  return "tw:gap-3 tw:py-3"
+})
+
+const labelClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:text-xs"
+  }
+  return "tw:text-sm"
 })
 </script>