feat(WW-3051): Form revamp

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",

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,
+    };
+}

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 };
+}