@raclettejs/workbench 0.0.1

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

@@ -0,0 +1,344 @@
+<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">
+        {{ value.title }}
+        <span v-if="value.validation?.required" class="tw:text-red-500">*</span>
+      </div>
+      <div class="tw:text-xs">
+        {{ value.description }}
+      </div>
+    </label>
+
+    <div
+      :class="{
+        'tw:col-span-7': hasTitleOrDescription,
+        'tw:col-span-12': !hasTitleOrDescription,
+      }"
+    >
+      <!-- custom inputs -->
+      <template v-if="inputType === 'tags'">
+        <TagsInput
+          v-model="stringArrayModel"
+          :input-id="inputId"
+          :hide-details="!showDetails"
+          :error-messages="errorMessage"
+          v-bind="additionalInputBindings"
+          @blur="$emit('validate')"
+        />
+      </template>
+
+      <template v-else-if="inputType === 'localized'">
+        <LocalizedInput
+          v-model="recordModel"
+          :input-id="inputId"
+          :hide-details="!showDetails"
+          :error-messages="errorMessage"
+          v-bind="additionalInputBindings"
+          @blur="$emit('validate')"
+        />
+      </template>
+
+      <template v-else-if="inputType === 'composition'">
+        <CompositionInput
+          v-model="stringModel"
+          :input-id="inputId"
+          :hide-details="!showDetails"
+          :error-messages="errorMessage"
+          v-bind="additionalInputBindings"
+          @update:model-value="$emit('validate')"
+          @blur="$emit('validate')"
+        />
+      </template>
+
+      <template v-else-if="inputType === 'password'">
+        <PasswordInput
+          v-model="stringModel"
+          :input-id="inputId"
+          :hide-details="!showDetails"
+          :error-messages="errorMessage"
+          v-bind="additionalInputBindings"
+          @blur="$emit('validate')"
+        />
+      </template>
+
+      <template v-else-if="inputType === 'record'">
+        <RecordInput
+          v-model="recordModel"
+          :input-id="inputId"
+          @blur="$emit('validate')"
+        />
+      </template>
+
+      <template v-else-if="inputType === 'list'">
+        <ListInput
+          v-model="stringArrayModel"
+          :input-id="inputId"
+          :hide-details="!showDetails"
+          :error-messages="errorMessage"
+          v-bind="additionalInputBindings"
+          @update:model-value="$emit('validate')"
+          @blur="$emit('validate')"
+        />
+      </template>
+
+      <template v-else-if="inputType === 'triggers'">
+        <TriggerInput
+          v-model="triggerModel"
+          v-bind="additionalInputBindings"
+          @blur="$emit('validate')"
+        />
+      </template>
+
+      <template v-else-if="inputType === 'color'">
+        <ColorInput
+          v-model="stringModel"
+          :input-id="inputId"
+          :hide-details="!showDetails"
+          :error-messages="errorMessage"
+          v-bind="additionalInputBindings"
+          @blur="$emit('validate')"
+        />
+      </template>
+
+      <template v-else-if="inputType === 'user'">
+        <UserInput
+          v-model="stringModel"
+          :input-id="inputId"
+          :hide-details="!showDetails"
+          :error-messages="errorMessage"
+          v-bind="additionalInputBindings"
+          @update:model-value="$emit('validate')"
+          @blur="$emit('validate')"
+        />
+      </template>
+
+      <!-- vuetify inputs -->
+      <template v-else-if="inputType === 'switch'">
+        <SwitchInput
+          v-model="booleanModel"
+          :input-id="inputId"
+          :hide-details="!showDetails"
+          :error-messages="errorMessage"
+          v-bind="additionalInputBindings"
+          @update:model-value="$emit('validate')"
+          @blur="$emit('validate')"
+        />
+      </template>
+      <template v-else-if="inputType === 'checkbox'">
+        <CheckboxInput
+          v-model="booleanModel"
+          :input-id="inputId"
+          :hide-details="!showDetails"
+          :error-messages="errorMessage"
+          v-bind="additionalInputBindings"
+          @update:model-value="$emit('validate')"
+        />
+      </template>
+
+      <template v-else-if="inputType === 'text'">
+        <v-text-field
+          :id="inputId"
+          v-model="stringModel"
+          variant="outlined"
+          :hide-details="!showDetails"
+          :error-messages="errorMessage"
+          v-bind="additionalInputBindings"
+          @blur="$emit('validate')"
+        />
+      </template>
+
+      <template v-else-if="inputType === 'textarea'">
+        <v-textarea
+          :id="inputId"
+          v-model="stringModel"
+          variant="outlined"
+          :hide-details="!showDetails"
+          :error-messages="errorMessage"
+          v-bind="additionalInputBindings"
+          @blur="$emit('validate')"
+        />
+      </template>
+
+      <template v-else-if="inputType === 'number'">
+        <v-number-input
+          v-model="numberModel"
+          :id="inputId"
+          variant="outlined"
+          :hide-details="!showDetails"
+          :error-messages="errorMessage"
+          v-bind="additionalInputBindings"
+          @update:model-value="$emit('validate')"
+          @blur="$emit('validate')"
+        />
+      </template>
+
+      <template v-else-if="inputType === 'select'">
+        <v-select
+          :id="inputId"
+          v-model="stringModel"
+          :items="value.selectItems"
+          variant="outlined"
+          :hide-details="!showDetails"
+          :error-messages="errorMessage"
+          v-bind="additionalInputBindings"
+          @blur="$emit('validate')"
+        />
+      </template>
+
+      <template v-else-if="inputType === 'multiselect'">
+        <v-autocomplete
+          :id="inputId"
+          v-model="stringArrayModel"
+          :items="value.selectItems"
+          variant="outlined"
+          :hide-details="!showDetails"
+          :error-messages="errorMessage"
+          multiple
+          v-bind="additionalInputBindings"
+          @blur="$emit('validate')"
+        />
+      </template>
+
+      <template v-else>
+        <div>I am not implemented yet 🙁 ({{ inputType }})</div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, useId, WritableComputedRef } from "vue"
+import LocalizedInput from "./typedInputs/LocalizedInput.vue"
+import CompositionInput from "./typedInputs/CompositionInput.vue"
+import ListInput from "./typedInputs/ListInput.vue"
+import PasswordInput from "./typedInputs/PasswordInput.vue"
+import RecordInput from "./typedInputs/RecordInput.vue"
+import TagsInput from "./typedInputs/TagsInput.vue"
+import TriggerInput from "./typedInputs/TriggerInput.vue"
+import CheckboxInput from "./typedInputs/CheckboxInput.vue"
+import SwitchInput from "./typedInputs/SwitchInput.vue"
+import type { Trigger } from "@raclettejs/core"
+import ColorInput from "./typedInputs/ColorInput.vue"
+import UserInput from "./typedInputs/UserInput.vue"
+import type { DynamicFormField, DynamicInputType } from "./DynamicFormTypes"
+
+const props = defineProps<{
+  inputType: DynamicInputType
+  value: DynamicFormField<any>
+  disabled?: boolean
+  errorMessage?: string
+  hideDetails?: boolean
+}>()
+
+defineEmits<{
+  validate: []
+}>()
+
+type DynamicModelType =
+  | string
+  | string[]
+  | number
+  | Record<string, string>
+  | Trigger[]
+  | boolean
+
+const model = defineModel<DynamicModelType | null>({
+  required: true,
+})
+
+const id = useId()
+const attrs = useAttrs()
+
+const inputId = computed(() => `dynamic-input-${id}`)
+
+// make dynamic typed model to true type
+const createTypedModel = <T extends DynamicModelType>(
+  types: DynamicInputType[],
+): WritableComputedRef<T> =>
+  computed<T>({
+    get: () =>
+      types.includes(props.inputType) ? (model.value as T) : ({} as T),
+    set: (value: T) => {
+      if (types.includes(props.inputType)) {
+        model.value = value
+      }
+    },
+  })
+
+const stringModel = createTypedModel<string>([
+  "text",
+  "textarea",
+  "number",
+  "composition",
+  "select",
+  "password",
+  "color",
+  "user",
+])
+
+const numberModel = createTypedModel<number>(["number"])
+
+const stringArrayModel = createTypedModel<string[]>([
+  "tags",
+  "permissions",
+  "multiselect",
+  "list",
+])
+
+const recordModel = createTypedModel<Record<string, string>>([
+  "record",
+  "localized",
+])
+
+const booleanModel = createTypedModel<boolean>(["switch", "checkbox"])
+const triggerModel = createTypedModel<Trigger[]>(["triggers"])
+
+const hasTitleOrDescription = computed(
+  () => props.value.title?.length || props.value.description?.length,
+)
+
+const showDetails = () => {
+  if (props.errorMessage) {
+    return true
+  }
+
+  return !props.hideDetails
+}
+
+const additionalInputBindings = computed(() => {
+  const {
+    prefix,
+    suffix,
+    prependIcon,
+    prependInnerIcon,
+    appendIcon,
+    appendInnerIcon,
+    onClickPrepend,
+    onClickPrependInner,
+    onClickAppend,
+    onClickAppendInner,
+  } = props.value
+
+  const result: Record<string, unknown> = {
+    prefix,
+    suffix,
+    prependIcon: prependIcon ? `mdi-${prependIcon}` : undefined,
+    prependInnerIcon: prependInnerIcon ? `mdi-${prependInnerIcon}` : undefined,
+    appendIcon: appendIcon ? `mdi-${appendIcon}` : undefined,
+    appendInnerIcon: appendInnerIcon ? `mdi-${appendInnerIcon}` : undefined,
+  }
+
+  // add click handlers if they exist
+  if (onClickPrepend) result["onClick:prepend"] = onClickPrepend
+  if (onClickPrependInner) result["onClick:prependInner"] = onClickPrependInner
+  if (onClickAppend) result["onClick:append"] = onClickAppend
+  if (onClickAppendInner) result["onClick:appendInner"] = onClickAppendInner
+
+  const filteredResult = Object.fromEntries(
+    Object.entries(result).filter(([_, value]) => value !== undefined),
+  )
+
+  return { ...filteredResult, ...attrs, disabled: props.disabled }
+})
+</script>

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

@@ -0,0 +1,13 @@
+<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>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  label: { type: String, required: true },
+})
+</script>