@raclettejs/workbench 0.1.33-canary.3 → 0.1.33

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

package/services/frontend/src/orchestrator/assets/styles/themes/light.ts

@@ -2,8 +2,9 @@
  * light theme
  */
 export default {
-  background: "#F4F4F4",
-  surface: "#F4F4F4",
+  background: "#ffffff",
+  surface: "#ffffff",
+  "surface-light": "#ffffff",
   primary: "#DD8B41",
   "primary-darken-1": "#B26F34",
   "primary-darken-2": "#9D612E",
@@ -23,7 +24,7 @@ export default {
   "secondary-darken-1": "#247DA1",
   "secondary-darken-2": "#1B5D78",
   error: "#B00020",
-  info: "#2196F3",
+  info: "#1973BE",
   success: "#3A823D",
   warning: "#FB8C00",
   "surface-2": "#F4F4F4",