From dfa2186ee914044b323b8e5a97501f9d941c0710 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Barfleur?=
 <39409397+kevinbarfleur@users.noreply.github.com>
Date: Tue, 12 Nov 2024 14:59:29 +0100
Subject: [PATCH 1/8] Add element-event to use this element in
 ww-select-input-search

---
 src/wwElement.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/wwElement.vue b/src/wwElement.vue
index 8fd5a17..e58b257 100644
--- a/src/wwElement.vue
+++ b/src/wwElement.vue
@@ -59,7 +59,7 @@ export default {
         uid: { type: String, required: true },
         wwElementState: { type: Object, required: true },
     },
-    emits: ['trigger-event', 'add-state', 'remove-state', 'update:content:effect'],
+    emits: ['element-event', 'trigger-event', 'add-state', 'remove-state', 'update:content:effect'],
     setup(props) {
         const type = computed(() => {
             if (Object.keys(props.wwElementState.props).includes('type')) {
@@ -258,10 +258,14 @@ export default {
                         name: 'change',
                         event: { domEvent: event, value: newValue },
                     });
+                    // element-event is useful when using inputs inside other coded components.
+                    // See ww-select-input-search => https://github.com/weweb-assets/ww-input-select-search
+                    this.$emit('element-event', { type: 'change', value: { domEvent: event, value: newValue } });
                     this.isDebouncing = false;
                 }, this.delay);
             } else {
                 this.$emit('trigger-event', { name: 'change', event: { domEvent: event, value: newValue } });
+                this.$emit('element-event', { type: 'change', value: { domEvent: event, value: newValue } });
             }
         },
         onKeyEnter(event) {

From 57dc6f07329d978a6b4e1675e7b59cbad05c4c6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Barfleur?=
 <39409397+kevinbarfleur@users.noreply.github.com>
Date: Tue, 12 Nov 2024 19:31:46 +0100
Subject: [PATCH 2/8] Parent selection

---
 src/wwElement.vue | 35 ++++++++++++++++++++++++++++++++---
 ww-config.js      | 21 +++++++++++++++++++++
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/wwElement.vue b/src/wwElement.vue
index e58b257..e63f767 100644
--- a/src/wwElement.vue
+++ b/src/wwElement.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 export default {
     props: {
@@ -55,12 +55,36 @@ export default {
         /* wwEditor:start */
         wwFrontState: { type: Object, required: true },
         wwEditorState: { type: Object, required: true },
+        parentSelection: { type: Object, default: () => ({ allow: false, texts: {} }) },
         /* wwEditor:end */
         uid: { type: String, required: true },
         wwElementState: { type: Object, required: true },
     },
-    emits: ['element-event', 'trigger-event', 'add-state', 'remove-state', 'update:content:effect'],
-    setup(props) {
+    emits: [
+        'element-event',
+        'trigger-event',
+        'add-state',
+        'remove-state',
+        'update:content:effect',
+        'update:sidepanel-content',
+    ],
+    setup(props, { emit }) {
+        /* wwEditor:start */
+        const parentSelection = computed(() => props.parentSelection);
+
+        watch(
+            parentSelection,
+            parentSelection => {
+                if (parentSelection.allow && parentSelection.info) {
+                    emit('update:sidepanel-content', { path: 'parentSelection', value: parentSelection.info });
+                } else {
+                    emit('update:sidepanel-content', { path: 'parentSelection', value: null });
+                }
+            },
+            { immediate: true, deep: true }
+        );
+        /* wwEditor:end */
+
         const type = computed(() => {
             if (Object.keys(props.wwElementState.props).includes('type')) {
                 return props.wwElementState.props.type;
@@ -295,6 +319,11 @@ export default {
             const el = this.$refs.input;
             if (el) el.select();
         },
+        /* wwEditor:start */
+        selectParentElement(...args) {
+            wwLib.selectParentByFlag(this.$el, ...args);
+        },
+        /* wwEditor:end */
     },
 };
 </script>
diff --git a/ww-config.js b/ww-config.js
index 72f869e..934c8c4 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -29,6 +29,21 @@ export default {
                 'resize',
             ],
         ],
+        hint: (_, sidePanelContent) => {
+            if (!sidePanelContent.parentSelection) return null;
+            const { header, text, button, args } = sidePanelContent.parentSelection;
+            const sections = ['style', 'settings'];
+            return sections.map(section => ({
+                section,
+                header: header,
+                text: text,
+                button: {
+                    text: button,
+                    action: 'selectParentElement',
+                    args,
+                },
+            }));
+        },
     },
     states: ['focus', 'readonly'],
     actions: [{ label: 'Focus element', action: 'focusInput' }],
@@ -340,5 +355,11 @@ export default {
             },
             /* wwEditor:end */
         },
+        /* wwEditor:start */
+        parentSelection: {
+            editorOnly: true,
+            defaultValue: false,
+        },
+        /* wwEditor:end */
     },
 };

From 807ad7eefe24a37857efe384db7793c459f5b573 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Barfleur?=
 <39409397+kevinbarfleur@users.noreply.github.com>
Date: Wed, 13 Nov 2024 09:21:30 +0100
Subject: [PATCH 3/8] Refactor

---
 src/editor/useParentSelection.js | 23 +++++++++++++++++++++++
 src/wwElement.vue                | 24 ++++++++----------------
 ww-config.js                     |  2 +-
 3 files changed, 32 insertions(+), 17 deletions(-)
 create mode 100644 src/editor/useParentSelection.js

diff --git a/src/editor/useParentSelection.js b/src/editor/useParentSelection.js
new file mode 100644
index 0000000..ebcb641
--- /dev/null
+++ b/src/editor/useParentSelection.js
@@ -0,0 +1,23 @@
+import { computed, watch } from 'vue';
+
+export default function useParentSelection(props, emit) {
+    const parentSelection = computed(() => props.parentSelection);
+
+    function selectParentElement(el, ...args) {
+        wwLib.selectParentByFlag(el, ...args);
+    }
+
+    watch(
+        parentSelection,
+        parentSelection => {
+            if (parentSelection.allow && parentSelection.info) {
+                emit('update:sidepanel-content', { path: 'parentSelection', value: parentSelection.info });
+            } else {
+                emit('update:sidepanel-content', { path: 'parentSelection', value: null });
+            }
+        },
+        { immediate: true, deep: true }
+    );
+
+    return { selectParentElement };
+}
diff --git a/src/wwElement.vue b/src/wwElement.vue
index e63f767..cdaeb99 100644
--- a/src/wwElement.vue
+++ b/src/wwElement.vue
@@ -47,7 +47,10 @@
 </template>
 
 <script>
-import { computed, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
+/* wwEditor:start */
+import useParentSelection from '@/editor/useParentSelection';
+/* wwEditor:end */
 
 export default {
     props: {
@@ -70,19 +73,7 @@ export default {
     ],
     setup(props, { emit }) {
         /* wwEditor:start */
-        const parentSelection = computed(() => props.parentSelection);
-
-        watch(
-            parentSelection,
-            parentSelection => {
-                if (parentSelection.allow && parentSelection.info) {
-                    emit('update:sidepanel-content', { path: 'parentSelection', value: parentSelection.info });
-                } else {
-                    emit('update:sidepanel-content', { path: 'parentSelection', value: null });
-                }
-            },
-            { immediate: true, deep: true }
-        );
+        const { selectParentElement } = useParentSelection(props, emit);
         /* wwEditor:end */
 
         const type = computed(() => {
@@ -121,6 +112,7 @@ export default {
             step,
             type,
             inputRef,
+            selectParentElement,
         };
     },
     data() {
@@ -320,8 +312,8 @@ export default {
             if (el) el.select();
         },
         /* wwEditor:start */
-        selectParentElement(...args) {
-            wwLib.selectParentByFlag(this.$el, ...args);
+        selectParent(...args) {
+            this.selectParentElement(this.$el, ...args);
         },
         /* wwEditor:end */
     },
diff --git a/ww-config.js b/ww-config.js
index 934c8c4..dffd4cc 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -39,7 +39,7 @@ export default {
                 text: text,
                 button: {
                     text: button,
-                    action: 'selectParentElement',
+                    action: 'selectParent',
                     args,
                 },
             }));

From 53e24b362b5d6b230fe9a4042684ffb978466fa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Barfleur?=
 <39409397+kevinbarfleur@users.noreply.github.com>
Date: Wed, 13 Nov 2024 09:30:14 +0100
Subject: [PATCH 4/8] Fix

---
 src/wwElement.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wwElement.vue b/src/wwElement.vue
index cdaeb99..e6ca395 100644
--- a/src/wwElement.vue
+++ b/src/wwElement.vue
@@ -49,7 +49,7 @@
 <script>
 import { computed, ref } from 'vue';
 /* wwEditor:start */
-import useParentSelection from '@/editor/useParentSelection';
+import useParentSelection from './editor/useParentSelection';
 /* wwEditor:end */
 
 export default {

From 8603a5fe1cb9fdf9d3c618a80be4ccfac237edaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Barfleur?=
 <39409397+kevinbarfleur@users.noreply.github.com>
Date: Mon, 18 Nov 2024 18:16:03 +0100
Subject: [PATCH 5/8] v0 form

---
 package.json                 |   3 +
 src/composables/useInput.js  | 167 ++++++++++++++++
 src/wwElement.vue            | 370 -----------------------------------
 src/wwElement_InputBasic.vue | 201 +++++++++++++++++++
 ww-config.js                 |  55 +++++-
 5 files changed, 422 insertions(+), 374 deletions(-)
 create mode 100644 src/composables/useInput.js
 delete mode 100644 src/wwElement.vue
 create mode 100644 src/wwElement_InputBasic.vue

diff --git a/package.json b/package.json
index 81c6f5b..412c517 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,9 @@
         "type": "git",
         "url": "https://github.com/weweb-assets/ww-form-input"
     },
+    "weweb": {
+        "componentPath": "./src/wwElement_InputBasic.vue"
+    },
     "version": "3.3.1",
     "scripts": {
         "build": "weweb build",
diff --git a/src/composables/useInput.js b/src/composables/useInput.js
new file mode 100644
index 0000000..890946b
--- /dev/null
+++ b/src/composables/useInput.js
@@ -0,0 +1,167 @@
+import { computed, ref } from 'vue';
+
+export function useInput(props, emit) {
+    const isReallyFocused = ref(false);
+    const isDebouncing = ref(false);
+    const inputRef = ref(null);
+    let debounceTimeout = null;
+
+    const type = computed(() => {
+        if (Object.keys(props.wwElementState.props).includes('type')) {
+            return props.wwElementState.props.type;
+        }
+        return props.content.type;
+    });
+
+    function formatValue(value) {
+        if (type.value !== 'decimal') return value;
+        if (!value && value !== 0) return '';
+        value = `${value}`.replace(',', '.');
+        const length = value.indexOf('.') !== -1 ? props.content.precision.split('.')[1].length : 0;
+        const newValue = parseFloat(Number(value).toFixed(length).replace(',', '.'));
+        return newValue;
+    }
+
+    const { value: variableValue, setValue } = wwLib.wwVariable.useComponentVariable({
+        uid: props.uid,
+        name: 'value',
+        type: computed(() => (['decimal', 'number'].includes(type.value) ? 'number' : 'string')),
+        defaultValue: computed(() => (props.content.value === undefined ? '' : formatValue(props.content.value))),
+    });
+
+    const inputType = computed(() => {
+        if (!props.content) return 'text';
+        if (props.content.type === 'password') {
+            return props.content.displayPassword ? 'text' : 'password';
+        }
+        return props.content.type === 'decimal' ? 'number' : props.content.type;
+    });
+
+    const isReadonly = computed(() => {
+        /* wwEditor:start */
+        if (props.wwEditorState?.isSelected) {
+            return props.wwElementState.states.includes('readonly');
+        }
+        /* wwEditor:end */
+        return props.wwElementState.props.readonly === undefined
+            ? props.content.readonly
+            : props.wwElementState.props.readonly;
+    });
+
+    const style = computed(() => {
+        const computedStyle = {
+            ...wwLib.wwUtils.getTextStyleFromContent(props.content),
+            '--placeholder-color': props.content.placeholderColor,
+        };
+        delete computedStyle['whiteSpaceCollapse'];
+        delete computedStyle['whiteSpace'];
+        return computedStyle;
+    });
+
+    const min = computed(() => {
+        if (type.value === 'date') {
+            return props.content.minDate;
+        }
+        return props.content.min;
+    });
+
+    const max = computed(() => {
+        if (type.value === 'date') {
+            return props.content.maxDate;
+        }
+        return props.content.max;
+    });
+
+    const step = computed(() => {
+        if (['decimal', 'number'].includes(type.value)) return props.content.step;
+        if ('time' === type.value) return props.content.timePrecision || 1;
+        return 1;
+    });
+
+    const stepAttribute = computed(() => {
+        return !isReallyFocused.value && inputType.value === 'number' ? 'any' : step.value;
+    });
+
+    const delay = computed(() => wwLib.wwUtils.getLengthUnit(props.content.debounceDelay)[0]);
+
+    function correctDecimalValue(event) {
+        if (type.value === 'decimal') {
+            const newValue = formatValue(props.value);
+
+            if (newValue === props.value) return;
+            props.setValue(newValue);
+            emit('trigger-event', { name: 'change', event: { domEvent: event, value: newValue } });
+        }
+    }
+
+    function handleManualInput(event) {
+        const value = event.target.value;
+        let newValue;
+
+        if (inputType.value === 'number' && (event.data === '.' || event.data === ',') && value === '') {
+            return;
+        } else if (inputType.value === 'number' && (value === 0 || (value && value.length))) {
+            try {
+                newValue = parseFloat(value);
+            } catch (error) {
+                newValue = value;
+            }
+        } else {
+            newValue = value;
+        }
+
+        if (newValue === props.value) return;
+        setValue(newValue);
+
+        if (props.content.debounce) {
+            isDebouncing.value = true;
+            if (debounceTimeout) {
+                clearTimeout(debounceTimeout);
+            }
+            debounceTimeout = setTimeout(() => {
+                emit('trigger-event', {
+                    name: 'change',
+                    event: { domEvent: event, value: newValue },
+                });
+                emit('element-event', { type: 'change', value: { domEvent: event, value: newValue } });
+                isDebouncing.value = false;
+            }, delay.value);
+        } else {
+            emit('trigger-event', { name: 'change', event: { domEvent: event, value: newValue } });
+            emit('element-event', { type: 'change', value: { domEvent: event, value: newValue } });
+        }
+    }
+
+    function onBlur(event) {
+        correctDecimalValue(event);
+        isReallyFocused.value = false;
+    }
+
+    function focusInput() {
+        if (isReadonly.value) return;
+        if (inputRef.value) inputRef.value.focus();
+    }
+
+    function selectInput() {
+        if (inputRef.value) inputRef.value.select();
+    }
+
+    return {
+        inputRef,
+        variableValue,
+        isReallyFocused,
+        isDebouncing,
+        type,
+        step,
+        inputType,
+        isReadonly,
+        style,
+        min,
+        max,
+        stepAttribute,
+        handleManualInput,
+        focusInput,
+        selectInput,
+        onBlur,
+    };
+}
diff --git a/src/wwElement.vue b/src/wwElement.vue
deleted file mode 100644
index e6ca395..0000000
--- a/src/wwElement.vue
+++ /dev/null
@@ -1,370 +0,0 @@
-<template>
-    <input
-        v-if="content.type !== 'textarea'"
-        :key="'ww-input-basic-' + step"
-        ref="input"
-        v-bind="wwElementState.props.attributes || {}"
-        :value="value"
-        class="ww-input-basic"
-        :class="{
-            hideArrows: content.hideArrows && inputType === 'number',
-            'date-placeholder': content.type === 'date' && !value,
-            '-readonly': isReadonly,
-            editing: isEditing,
-        }"
-        :type="inputType"
-        :name="wwElementState.name"
-        :readonly="isReadonly || isEditing"
-        :required="content.required"
-        :autocomplete="content.autocomplete ? 'on' : 'off'"
-        :placeholder="wwLang.getText(content.placeholder)"
-        :style="style"
-        :min="min"
-        :max="max"
-        :step="stepAttribute"
-        @input="handleManualInput($event)"
-        @blur="onBlur($event)"
-        @focus="isReallyFocused = true"
-    />
-    <textarea
-        v-else
-        ref="input"
-        v-bind="wwElementState.props.attributes || {}"
-        :value="value"
-        class="ww-input-basic"
-        :class="{ editing: isEditing }"
-        :type="content.type"
-        :name="wwElementState.name"
-        :readonly="isReadonly || isEditing"
-        :required="content.required"
-        :placeholder="wwLang.getText(content.placeholder)"
-        :style="[style, { resize: content.resize ? '' : 'none' }]"
-        :rows="content.rows"
-        @input="handleManualInput($event)"
-        @focus="isReallyFocused = true"
-        @blur="isReallyFocused = false"
-    />
-</template>
-
-<script>
-import { computed, ref } from 'vue';
-/* wwEditor:start */
-import useParentSelection from './editor/useParentSelection';
-/* wwEditor:end */
-
-export default {
-    props: {
-        content: { type: Object, required: true },
-        /* wwEditor:start */
-        wwFrontState: { type: Object, required: true },
-        wwEditorState: { type: Object, required: true },
-        parentSelection: { type: Object, default: () => ({ allow: false, texts: {} }) },
-        /* wwEditor:end */
-        uid: { type: String, required: true },
-        wwElementState: { type: Object, required: true },
-    },
-    emits: [
-        'element-event',
-        'trigger-event',
-        'add-state',
-        'remove-state',
-        'update:content:effect',
-        'update:sidepanel-content',
-    ],
-    setup(props, { emit }) {
-        /* wwEditor:start */
-        const { selectParentElement } = useParentSelection(props, emit);
-        /* wwEditor:end */
-
-        const type = computed(() => {
-            if (Object.keys(props.wwElementState.props).includes('type')) {
-                return props.wwElementState.props.type;
-            }
-            return props.content.type;
-        });
-        const step = computed(() => {
-            if (['decimal', 'number'].includes(type.value)) return props.content.step;
-            if ('time' === type.value) return props.content.timePrecision || 1;
-            return 1;
-        });
-        function formatValue(value) {
-            if (type.value !== 'decimal') return value;
-            if (!value && value !== 0) return '';
-            value = `${value}`.replace(',', '.');
-            const length = value.indexOf('.') !== -1 ? props.content.precision.split('.')[1].length : 0;
-            const newValue = parseFloat(Number(value).toFixed(length).replace(',', '.'));
-            return newValue;
-        }
-
-        const { value: variableValue, setValue } = wwLib.wwVariable.useComponentVariable({
-            uid: props.uid,
-            name: 'value',
-            type: computed(() => (['decimal', 'number'].includes(type.value) ? 'number' : 'string')),
-            defaultValue: computed(() => (props.content.value === undefined ? '' : formatValue(props.content.value))),
-        });
-
-        const inputRef = ref('input');
-
-        return {
-            variableValue,
-            setValue,
-            formatValue,
-            step,
-            type,
-            inputRef,
-            selectParentElement,
-        };
-    },
-    data() {
-        return {
-            paddingLeft: '0px',
-            isReallyFocused: false,
-            isDebouncing: false,
-        };
-    },
-    computed: {
-        isEditing() {
-            /* wwEditor:start */
-            return this.wwEditorState.editMode === wwLib.wwEditorHelper.EDIT_MODES.EDITION;
-            /* wwEditor:end */
-            // eslint-disable-next-line no-unreachable
-            return false;
-        },
-        value() {
-            return this.variableValue;
-        },
-        delay() {
-            return wwLib.wwUtils.getLengthUnit(this.content.debounceDelay)[0];
-        },
-        style() {
-            const style = {
-                ...wwLib.wwUtils.getTextStyleFromContent(this.content),
-                '--placeholder-color': this.content.placeholderColor,
-            };
-            delete style['whiteSpaceCollapse']; //Create a visual bug in Firefox
-            delete style['whiteSpace']; //Create a visual bug in Firefox
-
-            return style;
-        },
-        inputType() {
-            if (!this.content) return 'text';
-            if (this.content.type === 'password') {
-                return this.content.displayPassword ? 'text' : 'password';
-            }
-            return this.content.type === 'decimal' ? 'number' : this.content.type;
-        },
-        isReadonly() {
-            /* wwEditor:start */
-            if (this.wwEditorState.isSelected) {
-                return this.wwElementState.states.includes('readonly');
-            }
-            /* wwEditor:end */
-            return this.wwElementState.props.readonly === undefined
-                ? this.content.readonly
-                : this.wwElementState.props.readonly;
-        },
-        isFocused() {
-            /* wwEditor:start */
-            if (this.wwEditorState.isSelected) {
-                return this.wwElementState.states.includes('focus');
-            }
-            /* wwEditor:end */
-            return this.isReallyFocused;
-        },
-        stepAttribute() {
-            return !this.isFocused && this.inputType === 'number' ? 'any' : this.step;
-        },
-        min() {
-            if (this.type === 'date') {
-                return this.content.minDate;
-            } else {
-                return this.content.min;
-            }
-        },
-        max() {
-            if (this.type === 'date') {
-                return this.content.maxDate;
-            } else {
-                return this.content.max;
-            }
-        },
-    },
-    watch: {
-        'content.value'(newValue) {
-            if (this.type === 'decimal') newValue = this.formatValue(newValue);
-            if (newValue === this.value) return;
-            this.setValue(newValue);
-            this.$emit('trigger-event', { name: 'initValueChange', event: { value: newValue } });
-        },
-        isReadonly: {
-            immediate: true,
-            handler(value) {
-                if (value) {
-                    this.$emit('add-state', 'readonly');
-                } else {
-                    this.$emit('remove-state', 'readonly');
-                }
-            },
-        },
-        /* wwEditor:start */
-        'content.precision'(newValue, OldValue) {
-            if (newValue === OldValue) return;
-            const value = this.formatValue(this.value);
-            this.setValue(value);
-        },
-        /* wwEditor:end */
-        'content.timePrecision'(value) {
-            if (typeof this.value !== 'string') return;
-            else if (value === 3600) this.setValue(this.value.slice(0, 2));
-            else if (value === 60) this.setValue(this.value.slice(0, 5));
-            else if (value === 1) this.setValue(this.value.slice(0, 8));
-        },
-        isReallyFocused(isFocused, wasFocused) {
-            if (isFocused && !wasFocused) {
-                this.$emit('trigger-event', { name: 'focus' });
-            } else if (!isFocused && wasFocused) {
-                this.$emit('trigger-event', { name: 'blur' });
-            }
-        },
-        isFocused: {
-            immediate: true,
-            handler(value) {
-                if (value) {
-                    this.$emit('add-state', 'focus');
-                } else {
-                    this.$emit('remove-state', 'focus');
-                }
-            },
-        },
-    },
-    mounted() {
-        wwLib.getFrontDocument().addEventListener('keyup', this.onKeyEnter);
-
-        if (this.value !== this.$refs.input.value) {
-            this.$refs.input.value = this.value;
-        }
-    },
-    methods: {
-        handleManualInput(event) {
-            const value = event.target.value;
-            let newValue;
-            if (this.inputType === 'number' && (event.data === '.' || event.data === ',') && value === '') {
-                // I dont know why, but 10. is not a valid number, and event.target.value is empty at this moment
-                // It's probably depending on the system local, so i have put the ',' usecase as well
-                // Returning here prevent the value to be set to null then blinking
-                return;
-            } else if (this.inputType === 'number' && (value === 0 || (value && value.length))) {
-                try {
-                    newValue = parseFloat(value);
-                } catch (error) {
-                    newValue = value;
-                }
-            } else {
-                newValue = value;
-            }
-            if (newValue === this.value) return;
-            this.setValue(newValue);
-            if (this.content.debounce) {
-                this.isDebouncing = true;
-                if (this.debounce) {
-                    clearTimeout(this.debounce);
-                }
-                this.debounce = setTimeout(() => {
-                    this.$emit('trigger-event', {
-                        name: 'change',
-                        event: { domEvent: event, value: newValue },
-                    });
-                    // element-event is useful when using inputs inside other coded components.
-                    // See ww-select-input-search => https://github.com/weweb-assets/ww-input-select-search
-                    this.$emit('element-event', { type: 'change', value: { domEvent: event, value: newValue } });
-                    this.isDebouncing = false;
-                }, this.delay);
-            } else {
-                this.$emit('trigger-event', { name: 'change', event: { domEvent: event, value: newValue } });
-                this.$emit('element-event', { type: 'change', value: { domEvent: event, value: newValue } });
-            }
-        },
-        onKeyEnter(event) {
-            if (event.key === 'Enter' && this.isReallyFocused)
-                this.$emit('trigger-event', { name: 'onEnterKey', event: { value: this.value } });
-        },
-        onBlur(event) {
-            this.correctDecimalValue(event);
-            this.isReallyFocused = false;
-        },
-        correctDecimalValue(event) {
-            if (this.content.type === 'decimal') {
-                const newValue = this.formatValue(this.value);
-
-                if (newValue === this.value) return;
-                this.setValue(newValue);
-                this.$emit('trigger-event', { name: 'change', event: { domEvent: event, value: newValue } });
-            }
-        },
-        // /!\ Use externally
-        focusInput() {
-            if (this.isReadonly) return;
-            const el = this.$refs.input;
-            if (el) el.focus();
-        },
-        selectInput() {
-            const el = this.$refs.input;
-            if (el) el.select();
-        },
-        /* wwEditor:start */
-        selectParent(...args) {
-            this.selectParentElement(this.$el, ...args);
-        },
-        /* wwEditor:end */
-    },
-};
-</script>
-
-<style lang="scss" scoped>
-.ww-input-basic {
-    outline: none;
-    border: none;
-    position: relative;
-    isolation: isolate;
-    &::placeholder {
-        color: var(--placeholder-color, #000000ad);
-        font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-        line-height: inherit;
-        text-decoration: inherit;
-        letter-spacing: inherit;
-        word-spacing: inherit;
-    }
-
-    &.date-placeholder {
-        color: var(--placeholder-color, #000000ad);
-        font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-        line-height: inherit;
-        text-decoration: inherit;
-        letter-spacing: inherit;
-        word-spacing: inherit;
-    }
-
-    &.hideArrows::-webkit-outer-spin-button,
-    &.hideArrows::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-    &.hideArrows {
-        -moz-appearance: textfield;
-    }
-
-    &.-readonly {
-        cursor: inherit;
-    }
-
-    /* wwEditor:start */
-    &.editing {
-        cursor: initial !important;
-    }
-    /* wwEditor:end */
-}
-</style>
diff --git a/src/wwElement_InputBasic.vue b/src/wwElement_InputBasic.vue
new file mode 100644
index 0000000..bb134ea
--- /dev/null
+++ b/src/wwElement_InputBasic.vue
@@ -0,0 +1,201 @@
+<template>
+    <input
+        v-if="content.type !== 'textarea'"
+        ref="inputRef"
+        v-bind="inputBindings"
+        class="ww-input-basic"
+        :class="inputClasses"
+        @input="handleManualInput"
+        @blur="onBlur"
+        @focus="isReallyFocused = true"
+    />
+    <textarea
+        v-else
+        ref="inputRef"
+        v-bind="textareaBindings"
+        class="ww-input-basic"
+        :class="{ editing: isEditing }"
+        @input="handleManualInput"
+        @focus="isReallyFocused = true"
+        @blur="isReallyFocused = false"
+    />
+</template>
+
+<script>
+import { computed, inject, watch } from 'vue';
+import { useInput } from './composables/useInput';
+/* wwEditor:start */
+import useParentSelection from './editor/useParentSelection';
+/* wwEditor:end */
+
+export default {
+    props: {
+        content: { type: Object, required: true },
+        /* wwEditor:start */
+        wwFrontState: { type: Object, required: true },
+        wwEditorState: { type: Object, required: true },
+        parentSelection: { type: Object, default: () => ({ allow: false, texts: {} }) },
+        /* wwEditor:end */
+        uid: { type: String, required: true },
+        wwElementState: { type: Object, required: true },
+        useForm: { type: Boolean, default: true }, // TODO => Prevent specific component from using form
+    },
+    emits: [
+        'element-event',
+        'trigger-event',
+        'add-state',
+        'remove-state',
+        'update:content:effect',
+        'update:sidepanel-content',
+    ],
+    setup(props, { emit }) {
+        const isEditing = computed(() => {
+            /* wwEditor:start */
+            return props.wwEditorState.editMode === wwLib.wwEditorHelper.EDIT_MODES.EDITION;
+            /* wwEditor:end */
+            return false;
+        });
+
+        /* wwEditor:start */
+        const { selectParentElement } = useParentSelection(props, emit);
+        /* wwEditor:end */
+
+        const {
+            inputRef,
+            variableValue,
+            isReallyFocused,
+            isDebouncing,
+            type,
+            step,
+            inputType,
+            isReadonly,
+            style,
+            min,
+            max,
+            stepAttribute,
+            handleManualInput,
+            focusInput,
+            selectInput,
+            onBlur,
+        } = useInput(props, emit);
+
+        const useForm = inject('wwUseForm', () => {});
+        useForm(
+            variableValue,
+            {
+                fieldName: props.content.fieldName,
+                validation: props.content.validation,
+                customValidation: props.content.customValidation,
+            },
+            { elementState: props.wwElementState, emit, sidepanelFormPath: 'form' }
+        );
+
+        const inputBindings = computed(() => ({
+            ...props.wwElementState.props.attributes,
+            key: 'ww-input-basic-' + step.value,
+            value: variableValue.value,
+            type: inputType.value,
+            name: props.wwElementState.name,
+            readonly: isReadonly.value || isEditing.value,
+            required: props.content.required,
+            autocomplete: props.content.autocomplete ? 'on' : 'off',
+            placeholder: wwLib.wwLang.getText(props.content.placeholder),
+            style: style.value,
+            min: min.value,
+            max: max.value,
+            step: stepAttribute.value,
+        }));
+
+        const textareaBindings = computed(() => ({
+            ...props.wwElementState.props.attributes,
+            value: variableValue.value,
+            type: props.content.type,
+            name: props.wwElementState.name,
+            readonly: isReadonly.value || isEditing.value,
+            required: props.content.required,
+            placeholder: wwLib.wwLang.getText(props.content.placeholder),
+            rows: props.content.rows,
+            style: [style.value, { resize: props.content.resize ? '' : 'none' }],
+        }));
+
+        const inputClasses = computed(() => ({
+            hideArrows: props.content.hideArrows && inputType.value === 'number',
+            'date-placeholder': props.content.type === 'date' && !variableValue.value,
+            '-readonly': isReadonly.value,
+            editing: isEditing.value,
+        }));
+
+        return {
+            inputRef,
+            isReallyFocused,
+            isDebouncing,
+            type,
+            step,
+            inputType,
+            isReadonly,
+            style,
+            isEditing,
+            min,
+            max,
+            stepAttribute,
+            handleManualInput,
+            focusInput,
+            selectInput,
+            onBlur,
+            selectParentElement,
+            inputBindings,
+            textareaBindings,
+            inputClasses,
+        };
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.ww-input-basic {
+    outline: none;
+    border: none;
+    position: relative;
+    isolation: isolate;
+    &::placeholder {
+        color: var(--placeholder-color, #000000ad);
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        text-decoration: inherit;
+        letter-spacing: inherit;
+        word-spacing: inherit;
+    }
+
+    &.date-placeholder {
+        color: var(--placeholder-color, #000000ad);
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        text-decoration: inherit;
+        letter-spacing: inherit;
+        word-spacing: inherit;
+    }
+
+    &.hideArrows::-webkit-outer-spin-button,
+    &.hideArrows::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    &.hideArrows {
+        -moz-appearance: textfield;
+    }
+
+    &.-readonly {
+        cursor: inherit;
+    }
+
+    /* wwEditor:start */
+    &.editing {
+        cursor: initial !important;
+    }
+    /* wwEditor:end */
+}
+</style>
diff --git a/ww-config.js b/ww-config.js
index dffd4cc..a8cd3e7 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -7,13 +7,18 @@ export default {
         label: { en: 'Form Input', fr: 'Entrée de Formulaire' },
         icon: 'text-input',
         customSettingsPropertiesOrder: [
+            'formInfobox',
+            ['fieldName', 'customValidation', 'validation'],
+            'type',
             'value',
-            ['placeholder'],
-            ['readonly', 'required'],
-            ['debounce', 'debounceDelay'],
+            'placeholder',
+            'readonly',
+            'required',
+            'autocomplete',
+            'debounce',
+            'debounceDelay',
         ],
         customStylePropertiesOrder: [
-            'type',
             'placeholderColor',
             [
                 'precision',
@@ -361,5 +366,47 @@ export default {
             defaultValue: false,
         },
         /* wwEditor:end */
+        /* wwEditor:start */
+        form: {
+            editorOnly: true,
+            hidden: true,
+            defaultValue: false,
+        },
+        formInfobox: {
+            type: 'InfoBox',
+            section: 'settings',
+            options: (_, sidePanelContent) => ({
+                variant: sidePanelContent.form?.name ? 'success' : 'warning',
+                icon: 'pencil',
+                title: sidePanelContent.form?.name || 'Unnamed form',
+                content: !sidePanelContent.form?.name && 'Give your form a meaningful name.',
+            }),
+            hidden: (_, sidePanelContent) => !sidePanelContent.form?.uid,
+        },
+        /* wwEditor:end */
+        fieldName: {
+            label: 'Field name',
+            section: 'settings',
+            type: 'Text',
+            defaultValue: '',
+            bindable: true,
+            hidden: (_, sidePanelContent) => !sidePanelContent.form?.uid,
+        },
+        customValidation: {
+            label: 'Custom validation',
+            section: 'settings',
+            type: 'OnOff',
+            defaultValue: false,
+            bindable: true,
+            hidden: (_, sidePanelContent) => !sidePanelContent.form?.uid,
+        },
+        validation: {
+            label: 'Validation',
+            section: 'settings',
+            type: 'Formula',
+            defaultValue: '',
+            bindable: true,
+            hidden: (content, sidePanelContent) => !sidePanelContent.form?.uid || !content.customValidation,
+        },
     },
 };

From 29951b1cd9357a9439d7715e87bd4b2645e23128 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Barfleur?=
 <39409397+kevinbarfleur@users.noreply.github.com>
Date: Tue, 19 Nov 2024 07:09:33 +0100
Subject: [PATCH 6/8] Renaming

---
 src/wwElement_InputBasic.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wwElement_InputBasic.vue b/src/wwElement_InputBasic.vue
index bb134ea..f1754fd 100644
--- a/src/wwElement_InputBasic.vue
+++ b/src/wwElement_InputBasic.vue
@@ -79,7 +79,7 @@ export default {
             onBlur,
         } = useInput(props, emit);
 
-        const useForm = inject('wwUseForm', () => {});
+        const useForm = inject('_wwForm:useForm', () => {});
         useForm(
             variableValue,
             {

From 7ebab57b75dc787f7d1ab94ca82be7211fadcd9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Barfleur?=
 <39409397+kevinbarfleur@users.noreply.github.com>
Date: Tue, 19 Nov 2024 11:40:36 +0100
Subject: [PATCH 7/8] test

---
 src/wwElement_InputBasic.vue | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/wwElement_InputBasic.vue b/src/wwElement_InputBasic.vue
index f1754fd..81e91d7 100644
--- a/src/wwElement_InputBasic.vue
+++ b/src/wwElement_InputBasic.vue
@@ -80,14 +80,25 @@ export default {
         } = useInput(props, emit);
 
         const useForm = inject('_wwForm:useForm', () => {});
-        useForm(
-            variableValue,
-            {
-                fieldName: props.content.fieldName,
-                validation: props.content.validation,
-                customValidation: props.content.customValidation,
+
+        const fieldName = computed(() => props.content.fieldName);
+        const validation = computed(() => props.content.validation);
+        const customValidation = computed(() => props.content.customValidation);
+
+        watch(
+            () => [fieldName.value, validation.value, customValidation.value],
+            () => {
+                useForm(
+                    variableValue,
+                    {
+                        fieldName: fieldName.value,
+                        validation: validation.value,
+                        customValidation: customValidation.value,
+                    },
+                    { elementState: props.wwElementState, emit, sidepanelFormPath: 'form' }
+                );
             },
-            { elementState: props.wwElementState, emit, sidepanelFormPath: 'form' }
+            { immediate: true, deep: true }
         );
 
         const inputBindings = computed(() => ({

From 260b5bbe33df77305bc7c353d8dbd6eb2968b24a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Barfleur?=
 <39409397+kevinbarfleur@users.noreply.github.com>
Date: Tue, 19 Nov 2024 12:16:58 +0100
Subject: [PATCH 8/8] Fix useForm

---
 src/wwElement_InputBasic.vue | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/wwElement_InputBasic.vue b/src/wwElement_InputBasic.vue
index 81e91d7..f586a66 100644
--- a/src/wwElement_InputBasic.vue
+++ b/src/wwElement_InputBasic.vue
@@ -85,20 +85,10 @@ export default {
         const validation = computed(() => props.content.validation);
         const customValidation = computed(() => props.content.customValidation);
 
-        watch(
-            () => [fieldName.value, validation.value, customValidation.value],
-            () => {
-                useForm(
-                    variableValue,
-                    {
-                        fieldName: fieldName.value,
-                        validation: validation.value,
-                        customValidation: customValidation.value,
-                    },
-                    { elementState: props.wwElementState, emit, sidepanelFormPath: 'form' }
-                );
-            },
-            { immediate: true, deep: true }
+        useForm(
+            variableValue,
+            { fieldName, validation, customValidation },
+            { elementState: props.wwElementState, emit, sidepanelFormPath: 'form' }
         );
 
         const inputBindings = computed(() => ({