[REF] web_editor: no left panel input default value as placeholder

Changes (+ fix) to the way inputs work:

- Placeholder is now independant from the default value and set through
  data-placeholder. When emptying an input, it still sends the default
  value but appears empty. The value is only visually added in the input
  after leaving it (or hitting enter), after the validation through
  _computeWidgetState (because now when the default value is applied on
  a snippet, the value is displayed in the input as any other value).

- Consider inputs active if they hold a value and, in the case the input
  has an associated unit, if that value is different from 0 (important
  for visibility checks).

- If no default value is set and that a unit is set, the input will
  return the ('0' + unit) value by default (no need to specify it in xml
  anymore).

Part of https://github.com/odoo/odoo/pull/42407

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -241,13 +241,12 @@ const UserValueWidget = Widget.extend({
         return this.getDefaultValue(methodName);
     },
     /**
-     * Returns whether or not the widget is active: holds a value which is
-     * not the default one.
+     * Returns whether or not the widget is active (holds a value).
      *
      * @returns {boolean}
      */
     isActive: function () {
-        return this._value && this._value !== this.getDefaultValue();
+        return !!this._value;
     },
     /**
      * Indicates if the widget can contain sub user value widgets or not.
@@ -703,6 +702,7 @@ const InputUserValueWidget = UserValueWidget.extend({
 
         this.inputEl = document.createElement('input');
         this.inputEl.setAttribute('type', 'text');
+        this.inputEl.setAttribute('placeholder', this.el.dataset.placeholder || '');
         this.inputEl.classList.toggle('text-left', !unit);
         this.inputEl.classList.toggle('text-right', !!unit);
         this.containerEl.appendChild(this.inputEl);
@@ -754,7 +754,7 @@ const InputUserValueWidget = UserValueWidget.extend({
         }
 
         const unit = useInputUnit ? params.unit : params.saveUnit;
-        const numValue = weUtils.convertValueToUnit(defaultValue, unit, params.cssProperty, this.$target);
+        const numValue = weUtils.convertValueToUnit(defaultValue || '0', unit, params.cssProperty, this.$target);
         if (isNaN(numValue)) {
             return defaultValue;
         }
@@ -763,17 +763,13 @@ const InputUserValueWidget = UserValueWidget.extend({
     /**
      * @override
      */
-    loadMethodsData: function () {
-        this._super(...arguments);
-        let placeholder = '';
-        for (const methodName of this._methodsNames) {
-            const defaultValue = this.getDefaultValue(methodName, true);
-            if (defaultValue && defaultValue !== 'true') {
-                placeholder = parseFloat(defaultValue);
-                break;
-            }
+    isActive: function () {
+        const isSuperActive = this._super(...arguments);
+        const params = this._methodsParams;
+        if (!params.unit) {
+            return isSuperActive;
         }
-        this.inputEl.setAttribute('placeholder', placeholder);
+        return isSuperActive && parseInt(this._value) !== 0;
     },
     /**
      * @override
@@ -784,12 +780,10 @@ const InputUserValueWidget = UserValueWidget.extend({
             return this._super(value, methodName);
         }
 
-        const defaultValNum = parseFloat(this.getDefaultValue(methodName, true));
-
         value = value.split(' ').map(v => {
             const numValue = weUtils.convertValueToUnit(v, params.unit, params.cssProperty, this.$target);
-            if (isNaN(numValue) || Math.abs(numValue - defaultValNum) < Number.EPSILON) {
-                return ''; // Either equal to the default value and we don't want to display it, or something not supported
+            if (isNaN(numValue)) {
+                return ''; // Something not supported
             }
             return `${parseFloat(numValue.toFixed(3))}`;
         }).join(' ');
@@ -853,11 +847,15 @@ const InputUserValueWidget = UserValueWidget.extend({
             case $.ui.keyCode.UP:
             case $.ui.keyCode.DOWN: {
                 const input = ev.currentTarget;
+                const params = this._methodsParams;
+                if (!params.unit && !params.step) {
+                    break;
+                }
                 let value = parseFloat(input.value || input.placeholder);
                 if (isNaN(value)) {
-                    return;
+                    value = 0.0;
                 }
-                let step = parseFloat(input.parentNode.dataset.step);
+                let step = parseFloat(params.step);
                 if (isNaN(step)) {
                     step = 1.0;
                 }
@@ -1132,12 +1130,6 @@ const DatetimePickerUserValueWidget = InputUserValueWidget.extend({
     // Public
     //--------------------------------------------------------------------------
 
-    /**
-     * @override
-     */
-    isActive: function () {
-        return true;
-    },
     /**
      * @override
      */

addons/website/views/snippets/snippets.xml

@@ -234,8 +234,8 @@
                        data-background-position-overlay="true" data-no-preview="true"/>
         </we-row>
         <we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
-            <we-input string="Width" data-select-style="auto" data-unit="px"/>
-            <we-input string="Height" data-select-style="auto" data-unit="px"/>
+            <we-input string="Width" data-select-style="auto" data-placeholder="auto" data-unit="px"/>
+            <we-input string="Height" data-select-style="auto" data-placeholder="auto" data-unit="px"/>
         </we-multi>
     </div>