pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Build of the Chat Client using Vue.js

Browse Source 
- Accompanying css
- Views to serve the Chat Client
- first test version of the TRACIE_SELECTION_SPECIALIST
- ESS Implemented.
This commit is contained in:
Josako
2025-06-12 18:21:51 +02:00
parent 67ceb57b79
commit 5f1a5711f6
22 changed files with 2723 additions and 533 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
eveai_chat_client/static/js/components/FormField.js Normal file
View File

@@ -0,0 +1,179 @@
export const FormField = {
name: 'FormField',
props: {
field: {
type: Object,
required: true,
validator: (field) => {
return field.name && field.type && field.label;
}
},
modelValue: {
default: ''
}
},
emits: ['update:modelValue'],
computed: {
value: {
get() {
return this.modelValue;
},
set(value) {
this.$emit('update:modelValue', value);
}
}
},
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
if (file) {
this.value = file;
}
}
},
template: `
<div class="form-field">
<label>
{{ field.label }}
<span v-if="field.required" class="required">*</span>
</label>
<!-- Text/Email/Tel inputs -->
<input
v-if="['text', 'email', 'tel', 'url', 'password'].includes(field.type)"
:type="field.type"
v-model="value"
:required="field.required"
:placeholder="field.placeholder || ''"
:maxlength="field.maxLength"
:minlength="field.minLength"
>
<!-- Number input -->
<input
v-if="field.type === 'number'"
type="number"
v-model.number="value"
:required="field.required"
:min="field.min"
:max="field.max"
:step="field.step || 1"
:placeholder="field.placeholder || ''"
>
<!-- Date input -->
<input
v-if="field.type === 'date'"
type="date"
v-model="value"
:required="field.required"
:min="field.min"
:max="field.max"
>
<!-- Time input -->
<input
v-if="field.type === 'time'"
type="time"
v-model="value"
:required="field.required"
>
<!-- File input -->
<input
v-if="field.type === 'file'"
type="file"
@change="handleFileUpload"
:required="field.required"
:accept="field.accept"
:multiple="field.multiple"
>
<!-- Select dropdown -->
<select
v-if="field.type === 'select'"
v-model="value"
:required="field.required"
>
<option value="">{{ field.placeholder || 'Kies een optie' }}</option>
<option
v-for="option in field.options"
:key="option.value || option"
:value="option.value || option"
>
{{ option.label || option }}
</option>
</select>
<!-- Radio buttons -->
<div v-if="field.type === 'radio'" class="radio-group">
<label
v-for="option in field.options"
:key="option.value || option"
class="radio-label"
>
<input
type="radio"
:value="option.value || option"
v-model="value"
:required="field.required"
>
<span>{{ option.label || option }}</span>
</label>
</div>
<!-- Checkboxes -->
<div v-if="field.type === 'checkbox'" class="checkbox-group">
<label
v-for="option in field.options"
:key="option.value || option"
class="checkbox-label"
>
<input
type="checkbox"
:value="option.value || option"
v-model="value"
>
<span>{{ option.label || option }}</span>
</label>
</div>
<!-- Single checkbox -->
<label v-if="field.type === 'single-checkbox'" class="checkbox-label">
<input
type="checkbox"
v-model="value"
:required="field.required"
>
<span>{{ field.checkboxText || field.label }}</span>
</label>
<!-- Textarea -->
<textarea
v-if="field.type === 'textarea'"
v-model="value"
:required="field.required"
:rows="field.rows || 3"
:placeholder="field.placeholder || ''"
:maxlength="field.maxLength"
></textarea>
<!-- Range slider -->
<div v-if="field.type === 'range'" class="range-field">
<input
type="range"
v-model.number="value"
:min="field.min || 0"
:max="field.max || 100"
:step="field.step || 1"
>
<span class="range-value">{{ value }}</span>
</div>
<!-- Help text -->
<small v-if="field.helpText" class="help-text">
{{ field.helpText }}
</small>
</div>
`
};