[WW-3544] Export input text CSS variables

src/composables/useInput.js

@@ -94,16 +94,6 @@ export function useInput(props, emit) {
             : 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;
@@ -230,34 +220,6 @@ export function useInput(props, emit) {
         return isReallyFocused.value;
     });
 
-    watch(
-        isFocused,
-        value => {
-            if (value) {
-                emit('add-state', 'focus');
-            } else {
-                emit('remove-state', 'focus');
-            }
-        },
-        {
-            immediate: true,
-        }
-    );
-
-    watch(
-        isReadonly,
-        value => {
-            if (value) {
-                emit('add-state', 'readonly');
-            } else {
-                emit('remove-state', 'readonly');
-            }
-        },
-        {
-            immediate: true,
-        }
-    );
-
     /* wwEditor:start */
     watch(
         () => props.content.precision,
@@ -281,7 +243,6 @@ export function useInput(props, emit) {
         step,
         inputType,
         isReadonly,
-        style,
         min,
         max,
         stepAttribute,

src/wwElement.vue

@@ -9,7 +9,7 @@
                 v-if="showCurrencySymbol"
                 ref="currencySymbolRef"
                 class="currency-symbol"
-                :style="[currencySymbolStyle, { padding: style.padding }]"
+                :style="currencySymbolStyle"
             >
                 {{ currencySymbol }}
             </span>
@@ -86,8 +86,6 @@ export default {
     emits: [
         'element-event',
         'trigger-event',
-        'add-state',
-        'remove-state',
         'update:content:effect',
         'update:sidepanel-content',
     ],
@@ -113,7 +111,6 @@ export default {
             step,
             inputType,
             isReadonly,
-            style,
             min,
             max,
             stepAttribute,
@@ -504,7 +501,6 @@ export default {
             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,
@@ -519,7 +515,7 @@ export default {
             required: props.content.required,
             placeholder: wwLib.wwLang.getText(props.content.placeholder),
             rows: props.content.rows,
-            style: [style.value, { resize: props.content.resize ? '' : 'none' }],
+            style: { resize: props.content.resize ? '' : 'none' },
         }));
 
         const inputClasses = computed(() => ({
@@ -626,7 +622,6 @@ export default {
             step,
             inputType,
             isReadonly,
-            style,
             isEditing,
             min,
             max,
@@ -686,6 +681,9 @@ export default {
     border: none;
     position: relative;
     isolation: isolate;
+    overflow: var(--ww-text-overflow, initial);
+    text-overflow: var(--ww-text-text-overflow, initial);
+    white-space: var(--ww-text-white-space, initial);
 
     &::placeholder {
         color: var(--placeholder-color, #000000ad);
@@ -730,7 +728,18 @@ export default {
 
     &.currency-type {
         background-color: transparent;
+        color: inherit;
+        font: inherit;
+        letter-spacing: inherit;
+        line-height: inherit;
+        text-align: inherit;
+        text-decoration: inherit;
+        text-decoration-color: inherit;
+        text-decoration-style: inherit;
+        text-shadow: inherit;
+        text-transform: inherit;
         width: 100%;
+        word-spacing: inherit;
     }
 }
 </style>

ww-config.js

@@ -3,6 +3,11 @@ export default {
         type: 'ww-text',
         exclude: ['text'],
     },
+    css({ content }) {
+        if (!content.placeholderColor) return [];
+
+        return [{ property: '--placeholder-color', value: content.placeholderColor }];
+    },
     editor: {
         label: { en: 'Form Input', fr: 'Entrée de Formulaire' },
         icon: 'text-input',
@@ -59,7 +64,10 @@ export default {
             }));
         },
     },
-    states: ['focus', 'readonly'],
+    states: [
+        { label: 'focus', selector: '&:focus-within' },
+        { label: 'readonly', selectors: ['&:read-only', '&:has(:read-only)'] },
+    ],
     actions: [{ label: 'Focus element', action: 'focusInput' }],
     triggerEvents: [
         { name: 'change', label: { en: 'On change' }, event: { value: '' }, default: true },