@raclettejs/workbench 0.1.33-canary.2 → 0.1.33

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>

package/services/frontend/src/app/components/dynamicForm/typedInputs/ListInput.vue

@@ -1,50 +1,141 @@
 <template>
-  <div class="tw:grid tw:gap-2">
-    <!-- existing tags -->
-    <v-text-field
+  <div class="tw:grid" :class="listGapClasses" role="list">
+    <div
       v-for="(_, index) in modelValue"
-      v-bind="$attrs"
-      :key="index"
-      :id="index === 0 ? inputId : undefined"
-      v-model="modelValue[index]"
-      variant="outlined"
-      append-icon="mdi-minus"
-      @click:append="() => modelValue.length > 1 && modelValue.splice(index, 1)"
-    />
-
-    <!-- add new entry -->
-    <v-text-field
-      :id="modelValue?.length === 0 ? inputId : undefined"
-      v-bind="$attrs"
-      v-model="virtualInput"
-      variant="outlined"
-      hide-details
-      append-icon="mdi-plus"
-      @click:append="addVirtualInput"
-      @blur="addVirtualInput"
-    />
+      :key="`row-${index}`"
+      class="tw:flex tw:min-w-0 tw:items-start tw:gap-2"
+      role="listitem"
+    >
+      <v-text-field
+        :model-value="modelValue[index]"
+        v-bind="passthroughAttrs(index)"
+        class="tw:min-w-0 tw:flex-1"
+        :id="fieldId(index)"
+        variant="outlined"
+        color="primary"
+        :density="effectiveDensity"
+        append-inner-icon="mdi-minus"
+        :aria-label="rowLabel(index)"
+        @click:append-inner="removeAt(index)"
+        @update:model-value="updateAt(index, String($event ?? ''))"
+        @blur="onFieldBlur"
+      />
+    </div>
+
+    <div role="listitem">
+      <v-text-field
+        v-model="virtualInput"
+        v-bind="passthroughAttrs(-1)"
+        class="tw:w-full"
+        :id="addFieldDomId"
+        variant="outlined"
+        color="primary"
+        :density="effectiveDensity"
+        hide-details
+        append-inner-icon="mdi-plus"
+        :aria-label="t('workbench.dynamicInputs.list.addNewLabel')"
+        @click:append-inner="addVirtualInput"
+        @blur="addAndBlur"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { computed, ref, useAttrs } from "vue"
+import { useI18n } from "vue-i18n"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-defineProps<{
+const props = defineProps<{
   inputId?: string
 }>()
 
-const modelValue = defineModel<string[]>({ required: true })
+const emit = defineEmits<{
+  blur: []
+}>()
+
+const { t } = useI18n()
+const attrs = useAttrs()
 
+const modelValue = defineModel<string[]>({ required: true })
 const virtualInput = ref("")
 
+const baseId = computed(() => props.inputId ?? "dynamic-list")
+
+const densityToken = computed(
+  () => (attrs["density"] as string | undefined) ?? "comfortable",
+)
+
+const effectiveDensity = computed(() =>
+  densityToken.value === "spacious" ? "default" : densityToken.value,
+)
+
+const listGapClasses = computed(() => {
+  if (densityToken.value === "compact") return "tw:gap-2"
+  if (
+    densityToken.value === "spacious" ||
+    densityToken.value === "default"
+  ) {
+    return "tw:gap-3"
+  }
+  return "tw:gap-2 tw:md:gap-3"
+})
+
+const passthroughAttrs = (index: number) => {
+  const r = { ...(attrs as Record<string, unknown>) }
+  if (index > 0 || index === -1) {
+    delete r.errorMessages
+    delete r["error-messages"]
+    delete r.errorMessage
+    delete r["error-message"]
+  }
+  if (index === -1) {
+    r.hideDetails = true
+  }
+  return r
+}
+
+function fieldId(index: number): string {
+  if (index === 0 && props.inputId) return props.inputId
+  return `${baseId.value}-${index}`
+}
+
+const addFieldDomId = computed(() =>
+  modelValue.value.length === 0 && props.inputId
+    ? props.inputId
+    : `${baseId.value}-new`,
+)
+
+const rowLabel = (index: number) =>
+  t("workbench.dynamicInputs.list.rowLabel", { n: index + 1 })
+
+const onFieldBlur = () => {
+  emit("blur")
+}
+
+const addAndBlur = () => {
+  addVirtualInput()
+  emit("blur")
+}
+
+const updateAt = (index: number, value: string) => {
+  const next = [...modelValue.value]
+  next[index] = value
+  modelValue.value = next
+}
+
+const removeAt = (index: number) => {
+  if (modelValue.value.length <= 1) return
+  modelValue.value = modelValue.value.filter((_, i) => i !== index)
+}
+
 const addVirtualInput = () => {
   const val = virtualInput.value.trim()
   if (val !== "") {
-    modelValue.value.push(val)
+    modelValue.value = [...modelValue.value, val]
     virtualInput.value = ""
   }
 }

package/services/frontend/src/app/components/dynamicForm/typedInputs/RecordInput.vue

@@ -1,49 +1,154 @@
 <template>
-  <div class="tw:grid tw:gap-2">
+  <div
+    role="group"
+    class="tw:grid tw:gap-3"
+    v-bind="rootA11yAttrs"
+  >
+    <div
+      v-if="errorSummary"
+      role="alert"
+      class="tw:text-sm tw:leading-snug tw:text-[color:rgb(var(--v-theme-error))]"
+    >
+      {{ errorSummary }}
+    </div>
+
     <div
       v-for="(entry, index) in entries"
       :key="index"
-      class="tw:grid tw:grid-cols-12 tw:gap-2"
+      class="tw:grid tw:grid-cols-1 tw:gap-2 sm:tw:grid-cols-12 sm:tw:items-center sm:tw:gap-2"
     >
       <v-text-field
         :model-value="entry.key"
+        v-bind="sharedFieldBindings"
         @update:model-value="entry.key = $event"
-        @blur="emitEntries"
-        label="Key"
-        class="tw:col-span-5"
         hide-details
         variant="outlined"
+        color="primary"
+        :density="effectiveDensity"
+        class="tw:sm:col-span-5"
+        :aria-label="
+          t('workbench.dynamicInputs.record.keyLabel', { n: index + 1 })
+        "
+        @blur="emitEntriesAndBlur"
       />
 
       <v-text-field
         :model-value="entry.value"
+        v-bind="sharedFieldBindings"
         @update:model-value="entry.value = $event"
-        @blur="emitEntries"
-        label="Value"
-        class="tw:col-span-6"
         hide-details
         variant="outlined"
+        color="primary"
+        :density="effectiveDensity"
+        class="tw:sm:col-span-6"
+        :aria-label="
+          t('workbench.dynamicInputs.record.valueLabel', { n: index + 1 })
+        "
+        @blur="emitEntriesAndBlur"
       />
+      <div class="tw:flex tw:justify-end sm:tw:col-span-1 sm:tw:justify-center">
+        <v-btn
+          icon="mdi-minus"
+          variant="text"
+          color="error"
+          size="small"
+          :density="effectiveDensity"
+          class="tw:shrink-0"
+          :aria-label="t('workbench.dynamicInputs.record.removeRow')"
+          type="button"
+          @click="remove(index)"
+        />
+      </div>
+    </div>
+
+    <div class="tw:flex tw:justify-end">
       <v-btn
-        icon="mdi-minus"
-        color="red"
-        class="tw:col-span-1"
-        @click="remove(index)"
+        icon="mdi-plus"
+        variant="tonal"
+        color="secondary"
+        size="small"
+        :density="effectiveDensity"
+        :disabled="hasEmptyKeyEntry"
+        type="button"
+        :aria-label="t('workbench.dynamicInputs.record.addRow')"
+        @click="add"
       />
     </div>
-
-    <v-btn
-      icon="mdi-plus"
-      color="green"
-      @click="add"
-      :disabled="hasEmptyKeyEntry"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue"
+import { computed, ref, useAttrs, watch } from "vue"
 import { equals } from "ramda"
+import { useI18n } from "vue-i18n"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const { t } = useI18n()
+const attrs = useAttrs()
+const emit = defineEmits<{ blur: [] }>()
+
+const densityToken = computed(
+  () => (attrs["density"] as string | undefined) ?? "comfortable",
+)
+
+const effectiveDensity = computed(() =>
+  densityToken.value === "spacious" ? "default" : densityToken.value,
+)
+
+const pickErrorMessages = (raw: Record<string, unknown>): string | undefined => {
+  const m =
+    raw["errorMessages"] ?? raw["error-messages"] ?? raw["errorMessage"]
+  if (m == null) return undefined
+  if (Array.isArray(m)) return m.filter(Boolean)[0]?.toString()
+  return String(m)
+}
+
+const errorSummary = computed(() => pickErrorMessages(attrs))
+
+const omitKeys = (
+  raw: Record<string, unknown>,
+  keys: readonly string[],
+): Record<string, unknown> => {
+  const o = { ...raw }
+  for (const k of keys) delete o[k]
+  return o
+}
+
+const SHARED_OMIT: readonly string[] = [
+  "errorMessages",
+  "error-messages",
+  "errorMessage",
+  "hideDetails",
+  "hide-details",
+  "disabled",
+]
+
+const ROOT_A11Y_KEYS: readonly string[] = [
+  "aria-describedby",
+  "aria-required",
+  "aria-invalid",
+]
+
+const rootA11yAttrs = computed(() => {
+  const raw = attrs as Record<string, unknown>
+  const pick: Record<string, unknown> = {}
+  for (const k of ROOT_A11Y_KEYS) {
+    if (raw[k] !== undefined) pick[k] = raw[k]
+  }
+  return pick
+})
+
+const sharedFieldBindings = computed(() => ({
+  ...omitKeys(attrs as Record<string, unknown>, [
+    ...SHARED_OMIT,
+    ...ROOT_A11Y_KEYS,
+  ]),
+  disabled: attrs.disabled ?? false,
+  density: effectiveDensity.value,
+}))
 
 const modelValue = defineModel<Record<string, string>>({ required: true })
 
@@ -64,15 +169,20 @@ const emitEntries = () => {
   modelValue.value = obj
 }
 
+const emitEntriesAndBlur = () => {
+  emitEntries()
+  emit("blur")
+}
+
 const add = () => {
   entries.value.push({ key: "", value: "" })
 }
 
 const remove = (index: number) => {
   entries.value.splice(index, 1)
+  emitEntriesAndBlur()
 }
 
-// synchronize local clone of the modelValue
 watch(
   () => modelValue.value,
   (newVal, oldVal) => {

package/services/frontend/src/app/components/dynamicForm/typedInputs/TagsInput.vue

@@ -10,6 +10,7 @@
     item-title="title"
     multiple
     variant="outlined"
+    color="primary"
     chips
   >
     <template #chip="{ internalItem }">

package/services/frontend/src/app/components/dynamicForm/typedInputs/TriggerInput.vue

@@ -2,9 +2,9 @@
   <div class="tw:grid tw:gap-2">
     <!-- existing triggers -->
     <div
-      class="tw:py-2 tw:border-solid tw:rounded"
       v-for="(trigger, index) in modelValue"
       :key="index"
+      class="tw:grid tw:gap-3 tw:rounded-md tw:pb-4"
     >
       <v-select
         v-model="trigger.type"
@@ -17,10 +17,9 @@
         @update:model-value="updateTriggerType($event, index)"
         @click:append="modelValue.splice(index, 1)"
         :label="$t('workbench.dynamicInputs.triggers.triggerTypeLabel')"
-        :disabled="true"
       />
 
-      <div class="tw:grid tw:gap-2 tw:p-2">
+      <div class="tw:grid tw:gap-2 tw:pl-4">
         <template
           v-if="
             ['app-bar', 'page-navigation', 'user-menu'].includes(trigger.type)
@@ -33,7 +32,8 @@
             v-bind="$attrs"
             :input-id="`title-${index}`"
             :title="$t('workbench.dynamicInputs.triggers.titleLabel')"
-          />
+            hide-details
+            />
 
           <v-number-input
             v-model="trigger.settings.sortOrder"

package/services/frontend/src/app/composables/useWorkbenchTableActions.ts

@@ -0,0 +1,29 @@
+import { useRouteState } from "@raclettejs/core/orchestrator/composables"
+
+export const useWorkbenchTableActions = () => {
+  const routeState = useRouteState()
+
+  const goToCreate = (interactionLinkId: string) => {
+    routeState.triggerInteractionLinkById(interactionLinkId)
+  }
+
+  const goToEditById = (
+    interactionLinkId: string,
+    id: string | number | undefined | null,
+  ) => {
+    if (id === undefined || id === null) {
+      return
+    }
+    routeState.triggerInteractionLinkById(interactionLinkId, {
+      id: String(id),
+    })
+  }
+
+  return {
+    routeState,
+    goToCreate,
+    goToEditById,
+  }
+}
+
+export default useWorkbenchTableActions