@raclettejs/workbench 0.0.1

package/services/frontend/src/app/components/dynamicForm/testing/DynamicFormInputTesting.vue

@@ -0,0 +1,477 @@
+<template>
+  <div class="tw:max-w-4xl tw:mx-auto tw:p-6">
+    <div class="tw:mb-6">
+      <h1 class="tw:text-2xl tw:font-bold tw:mb-2">
+        Dynamic Form Validation Test
+      </h1>
+      <p class="tw:text-gray-600">
+        This form demonstrates all input types with various validation rules.
+      </p>
+    </div>
+
+    <!-- Validation Status -->
+    <div class="tw:mb-6 tw:p-4 tw:rounded-lg" :class="validationStatusClass">
+      <div class="tw:flex tw:items-center tw:gap-2">
+        <div
+          class="tw:w-3 tw:h-3 tw:rounded-full"
+          :class="validationIndicatorClass"
+        ></div>
+        <span class="tw:font-medium">{{ validationStatusText }}</span>
+      </div>
+      <div
+        v-if="!isValid && Object.keys(errors).length > 0"
+        class="tw:mt-2 tw:text-sm"
+      >
+        <strong>Errors:</strong>
+        <ul class="tw:list-disc tw:list-inside tw:mt-1">
+          <li v-for="(error, field) in errors" :key="field">
+            {{ field }}: {{ error }}
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div>
+      <v-number-input
+        v-model="inputFilter"
+        variant="outlined"
+        :min="0"
+        :max="inputFields.filter((input) => !('divider' in input)).length"
+      />
+    </div>
+
+    <!-- The Dynamic Form -->
+    <DynamicForm
+      ref="dynamicFormRef"
+      v-model="testData"
+      :data="filteredInputs"
+      :disabled="false"
+      @validation-change="onValidationChange"
+    />
+
+    <!-- Action Buttons -->
+    <div class="tw:mt-8 tw:flex tw:gap-4">
+      <v-btn @click="validateForm" color="primary" variant="outlined">
+        Validate Form
+      </v-btn>
+      <v-btn @click="resetForm" color="secondary" variant="outlined">
+        Reset Form
+      </v-btn>
+      <v-btn
+        @click="showFormData = !showFormData"
+        color="info"
+        variant="outlined"
+      >
+        {{ showFormData ? "Hide" : "Show" }} Form Data
+      </v-btn>
+    </div>
+
+    <!-- Form Data Display -->
+    <div v-if="showFormData" class="tw:mt-6 tw:p-4 tw:bg-gray-50 tw:rounded-lg">
+      <h3 class="tw:text-lg tw:font-semibold tw:mb-2">Current Form Data:</h3>
+      <pre class="tw:text-sm tw:overflow-auto">{{
+        JSON.stringify(testData, null, 2)
+      }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, reactive, useTemplateRef } from "vue"
+import DynamicForm from "@app/components/dynamicForm/DynamicForm.vue"
+import type { DynamicFormItem } from "@app/components/dynamicForm/DynamicFormTypes"
+import type { Trigger } from "@raclettejs/core"
+import { emailValidator } from "../validators"
+
+// Test data interface
+interface TestFormData {
+  // Text inputs
+  requiredText: string
+  optionalText: string
+  textWithLength: string
+  textWithPattern: string
+
+  // Textarea
+  description: string
+
+  // Number
+  requiredNumber: number
+  numberWithRange: number
+
+  // Select inputs
+  singleSelect: string
+  multiSelect: string[]
+
+  // Boolean inputs
+  requiredSwitch: boolean
+  optionalCheckbox: boolean
+
+  // Array inputs
+  tags: string[]
+  permissions: string[]
+  listItems: string[]
+
+  // Object inputs
+  localized: Record<string, string>
+  record: Record<string, string>
+
+  // Special inputs
+  password: string
+  color: string
+  user: string
+  composition: string
+  triggers: Trigger[]
+}
+
+const dynamicFormRef = useTemplateRef("dynamicFormRef")
+const isValid = ref(true)
+const errors = ref<Record<string, string>>({})
+const showFormData = ref(false)
+const inputFilter = ref(0)
+
+// Test data with initial values
+const testData = reactive<TestFormData>({
+  requiredText: "",
+  optionalText: "",
+  textWithLength: "",
+  textWithPattern: "",
+  description: "",
+  requiredNumber: 0,
+  numberWithRange: 0,
+  singleSelect: "",
+  multiSelect: [],
+  requiredSwitch: false,
+  optionalCheckbox: false,
+  tags: [],
+  permissions: [],
+  listItems: [],
+  localized: { default: "", de: "", en: "" },
+  record: {},
+  password: "",
+  color: "#000000",
+  user: "",
+  composition: "",
+  triggers: [],
+})
+
+// Validation status computed properties
+const validationStatusClass = computed(() => ({
+  "tw:bg-green-50 tw:border tw:border-green-200": isValid.value,
+  "tw:bg-red-50 tw:border tw:border-red-200": !isValid.value,
+}))
+
+const validationIndicatorClass = computed(() => ({
+  "tw:bg-green-500": isValid.value,
+  "tw:bg-red-500": !isValid.value,
+}))
+
+const validationStatusText = computed(() =>
+  isValid.value ? "Form is valid ✓" : "Form has validation errors ✗",
+)
+
+const filteredInputs = computed(() => {
+  if (inputFilter.value === 0) {
+    return inputFields.value
+  }
+
+  const result: typeof inputFields.value = []
+  let count = 0
+
+  for (const input of inputFields.value) {
+    result.push(input)
+
+    if (!("divider" in input)) {
+      count++
+    }
+
+    if (count >= inputFilter.value) {
+      break
+    }
+  }
+
+  return result
+})
+
+const onValidationChange = (valid: boolean) => {
+  isValid.value = valid
+  errors.value = dynamicFormRef.value?.errors ?? {}
+}
+
+const validateForm = () => {
+  dynamicFormRef.value?.validateAllFields()
+}
+
+const resetForm = () => {
+  Object.assign(testData, {
+    requiredText: "",
+    optionalText: "",
+    textWithLength: "",
+    textWithPattern: "",
+    description: "",
+    requiredNumber: 0,
+    numberWithRange: 0,
+    singleSelect: "",
+    multiSelect: [],
+    requiredSwitch: false,
+    optionalCheckbox: false,
+    tags: [],
+    permissions: [],
+    listItems: [],
+    localized: {},
+    record: {},
+    password: "",
+    color: "#000000",
+    user: "",
+    composition: "",
+    triggers: [],
+  })
+}
+
+// Form field definitions
+const inputFields = computed<DynamicFormItem<TestFormData>[]>(() => [
+  { divider: "Text Inputs" },
+  {
+    title: "Required Text",
+    description: "This field is required and must be at least 3 characters",
+    inputType: "text",
+    field: "requiredText",
+    prependIcon: "text",
+    validation: {
+      required: true,
+      minLength: 3,
+    },
+  },
+  {
+    title: "Optional Text",
+    description: "This field is optional but has a max length of 50 characters",
+    inputType: "text",
+    field: "optionalText",
+    prependIcon: "text-short",
+    validation: {
+      maxLength: 50,
+    },
+  },
+  {
+    title: "Text with Length Validation",
+    description: "Must be between 5 and 20 characters",
+    inputType: "text",
+    field: "textWithLength",
+    prependIcon: "ruler",
+    validation: {
+      minLength: 5,
+      maxLength: 20,
+    },
+  },
+  {
+    title: "Email Address",
+    description: "Must be a valid email format",
+    inputType: "text",
+    field: "textWithPattern",
+    prependIcon: "email",
+    validation: {
+      required: true,
+      customValidator: emailValidator,
+    },
+  },
+
+  { divider: "Textarea" },
+  {
+    title: "Description",
+    description: "Optional description with max 200 characters",
+    inputType: "textarea",
+    field: "description",
+    prependIcon: "text",
+    validation: {
+      maxLength: 200,
+    },
+  },
+
+  { divider: "Number Inputs" },
+  {
+    title: "Required Number",
+    description: "This number field is required",
+    inputType: "number",
+    field: "requiredNumber",
+    prependIcon: "numeric",
+    validation: {
+      required: true,
+    },
+  },
+  {
+    title: "Number with Range",
+    description: "Must be between 10 and 100",
+    inputType: "number",
+    field: "numberWithRange",
+    prependIcon: "numeric-1",
+    validation: {
+      customValidator: (value: number) => {
+        if (value < 10 || value > 100) {
+          return "Number must be between 10 and 100"
+        }
+        return null
+      },
+    },
+  },
+
+  { divider: "Select Inputs" },
+  {
+    title: "Single Select",
+    description: "Choose one option (required)",
+    inputType: "select",
+    field: "singleSelect",
+    selectItems: ["Option 1", "Option 2", "Option 3", "Option 4"],
+    prependIcon: "form-select",
+    validation: {
+      required: true,
+    },
+  },
+  {
+    title: "Multi Select",
+    description: "Choose multiple options (at least 2 required)",
+    inputType: "multiselect",
+    field: "multiSelect",
+    selectItems: ["Tag A", "Tag B", "Tag C", "Tag D", "Tag E"],
+    prependIcon: "form-select",
+    validation: {
+      required: true,
+      customValidator: (value: string[]) => {
+        if (value.length < 2) {
+          return "Please select at least 2 options"
+        }
+        return null
+      },
+    },
+  },
+
+  { divider: "Boolean Inputs" },
+  {
+    title: "Required Switch",
+    description: "This switch must be enabled",
+    inputType: "switch",
+    field: "requiredSwitch",
+    validation: {
+      required: true,
+      customValidator: (value: boolean) =>
+        value ? null : "This switch must be enabled",
+    },
+  },
+  {
+    title: "Optional Checkbox",
+    description: "This checkbox is optional",
+    inputType: "checkbox",
+    field: "optionalCheckbox",
+  },
+
+  { divider: "Array Inputs" },
+  {
+    title: "Tags",
+    description: "Add at least 2 tags",
+    inputType: "tags",
+    field: "tags",
+    validation: {
+      required: true,
+      customValidator: (value: string[]) => {
+        if (value.length < 2) {
+          return "Please add at least 2 tags"
+        }
+        return null
+      },
+    },
+  },
+  {
+    title: "Permissions",
+    description: "Optional permissions list",
+    inputType: "permissions",
+    field: "permissions",
+  },
+  {
+    title: "List Items",
+    description: "Optional list of items",
+    inputType: "list",
+    field: "listItems",
+    validation: {
+      required: true,
+    },
+  },
+
+  { divider: "Object Inputs" },
+  {
+    title: "Localized Content",
+    description: "Add content in at least one language",
+    inputType: "localized",
+    field: "localized",
+    validation: {
+      required: true,
+      customValidator: (value: Record<string, string>) => {
+        if (!value || !value.default?.length) {
+          return "A default localization is required"
+        }
+
+        return null
+      },
+    },
+  },
+  {
+    title: "Record Data",
+    description: "Optional key-value pairs",
+    inputType: "record",
+    field: "record",
+  },
+
+  { divider: "Special Inputs" },
+  {
+    title: "Password",
+    description: "Must be at least 8 characters with special characters",
+    inputType: "password",
+    field: "password",
+    prependIcon: "lock",
+    validation: {
+      required: true,
+      minLength: 8,
+      customValidator: (value: string) => {
+        if (!/(?=.*[!@#$%^&*])/.test(value)) {
+          return "Password must contain at least one special character (!@#$%^&*)"
+        }
+        return null
+      },
+    },
+  },
+  {
+    title: "Color",
+    description: "Choose a color (required)",
+    inputType: "color",
+    field: "color",
+    prependIcon: "palette",
+    validation: {
+      required: true,
+    },
+  },
+  {
+    title: "User",
+    description: "Select a user (required)",
+    inputType: "user",
+    field: "user",
+    prependIcon: "account",
+    validation: {
+      required: true,
+    },
+  },
+  {
+    title: "Composition",
+    description: "Optional composition field",
+    inputType: "composition",
+    field: "composition",
+    prependIcon: "file-document",
+    validation: {
+      required: true,
+    },
+  },
+  {
+    title: "Triggers",
+    description: "Optional triggers configuration",
+    inputType: "triggers",
+    field: "triggers",
+    prependIcon: "gesture-tap-button",
+  },
+])
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <v-checkbox
+    v-model="modelValue"
+    :id="inputId"
+    variant="outlined"
+    hide-details
+  />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  inputId: string
+}>()
+
+const modelValue = defineModel<boolean>({ default: false })
+</script>

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

@@ -0,0 +1,52 @@
+<template>
+  <v-menu v-model="showPicker" :close-on-content-click="false">
+    <template #activator="{ props }">
+      <v-text-field
+        v-model="color"
+        v-bind="{ ...props, ...$attrs }"
+        :label="$t('color')"
+        :color="color"
+        variant="outlined"
+        hide-details
+        :append-inner-icon="
+          !showPicker ? 'mdi-chevron-left' : 'mdi-chevron-down'
+        "
+        readonly
+      >
+        <template #prepend-inner>
+          <v-chip
+            :style="{
+              'background-color': color,
+            }"
+            size="x-small"
+            :color="color"
+            label
+            class="tw:m-2 tw:w-[45px]"
+          />
+        </template>
+      </v-text-field>
+    </template>
+    <v-color-picker v-model="color" show-swatches />
+    <template #header></template>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps({
+  readOnly: Boolean,
+  inputId: {
+    type: String,
+    default: "",
+  },
+})
+
+const color = defineModel<string>({ required: true })
+
+const showPicker = ref(false)
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+  <v-autocomplete
+    v-model="modelValue"
+    :id="inputId"
+    :items="compositions"
+    :loading="query.loading"
+    :disabled="query.loading"
+    item-value="_id"
+    item-title="title"
+    variant="outlined"
+    hide-details
+  />
+</template>
+
+<script setup lang="ts">
+import { usePluginApi } from "@raclettejs/core/orchestrator/composables"
+import { computed } from "vue"
+
+defineProps<{
+  inputId: string
+}>()
+
+const modelValue = defineModel<string | null>({ required: true })
+
+const { $data } = usePluginApi("raclette__core")
+
+const { data, query } = $data.composition.getAll({
+  options: { immediate: true },
+})
+
+const compositions = computed(() => Object.values(data.value || {}))
+</script>

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

@@ -0,0 +1,40 @@
+<template>
+  <v-autocomplete
+    v-model="modelProxy"
+    :items="icons"
+    label="Icon"
+    item-title="name"
+    item-value="name"
+    variant="outlined"
+    hide-details
+    :menu-props="{ maxHeight: 400 }"
+    :virtual-scroll="true"
+  >
+    <template #item="{ props, item }">
+      <v-list-item v-bind="props" :prepend-icon="`mdi-${item.raw}`" />
+    </template>
+
+    <template #selection="{ item }">
+      <v-icon :icon="`mdi-${item.value}`" class="me-2" />
+      {{ item.value }}
+    </template>
+  </v-autocomplete>
+</template>
+
+<script setup lang="ts">
+import icons from "./mdi-icons"
+import { computed } from "vue"
+
+const modelValue = defineModel<string | null>()
+
+const modelProxy = computed({
+  get() {
+    return modelValue.value?.startsWith("mdi-")
+      ? modelValue.value.slice(4)
+      : modelValue.value
+  },
+  set(newValue: string | null) {
+    modelValue.value = newValue ? `mdi-${newValue}` : null
+  },
+})
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+  <div class="tw:grid tw:gap-2">
+    <!-- existing tags -->
+    <v-text-field
+      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"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{
+  inputId?: string
+}>()
+
+const modelValue = defineModel<string[]>({ required: true })
+
+const virtualInput = ref("")
+
+const addVirtualInput = () => {
+  const val = virtualInput.value.trim()
+  if (val !== "") {
+    modelValue.value.push(val)
+    virtualInput.value = ""
+  }
+}
+</script>