From 23a3f41c9a314f137d950044c63400f0c4d0adc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A9o=20Coletta?= Date: Fri, 3 Jul 2026 13:08:43 +0200 Subject: [PATCH 1/3] fix(WW-3544): Use generated text CSS in basic input - remove old inline text style generation - consume compiler text-surface variables on input surfaces --- src/composables/useInput.js | 6 +----- src/wwElement.vue | 14 ++++++++++++++ 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/composables/useInput.js b/src/composables/useInput.js index c0d9bb6..46bb5e8 100644 --- a/src/composables/useInput.js +++ b/src/composables/useInput.js @@ -95,13 +95,9 @@ export function useInput(props, emit) { }); const style = computed(() => { - const computedStyle = { - ...wwLib.wwUtils.getTextStyleFromContent(props.content), + return { '--placeholder-color': props.content.placeholderColor, }; - delete computedStyle['whiteSpaceCollapse']; - delete computedStyle['whiteSpace']; - return computedStyle; }); const min = computed(() => { diff --git a/src/wwElement.vue b/src/wwElement.vue index 35cb083..08fc610 100644 --- a/src/wwElement.vue +++ b/src/wwElement.vue @@ -678,6 +678,17 @@ export default { color: var(--placeholder-color, #000000ad); white-space: nowrap; /* Ensure symbol doesn't wrap */ } + + .ww-input-basic { + font: inherit; + color: inherit; + text-align: inherit; + text-transform: inherit; + text-shadow: inherit; + letter-spacing: inherit; + word-spacing: inherit; + text-decoration: inherit; + } } } @@ -686,6 +697,9 @@ export default { border: none; position: relative; isolation: isolate; + white-space: var(--ww-text-white-space, initial); + overflow: var(--ww-text-overflow, initial); + text-overflow: var(--ww-text-text-overflow, initial); &::placeholder { color: var(--placeholder-color, #000000ad); From 116ac0ddf07138bbd7eb0f15c6205bc819847980 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A9o=20Coletta?= Date: Fri, 3 Jul 2026 14:33:42 +0200 Subject: [PATCH 2/3] feat(WW-3544): Use generated CSS for basic input placeholder - expose placeholder color through component CSS config - remove old inline placeholder style writer --- src/composables/useInput.js | 7 ------- src/wwElement.vue | 7 ++----- ww-config.js | 5 +++++ 3 files changed, 7 insertions(+), 12 deletions(-) diff --git a/src/composables/useInput.js b/src/composables/useInput.js index 46bb5e8..0f3b812 100644 --- a/src/composables/useInput.js +++ b/src/composables/useInput.js @@ -94,12 +94,6 @@ export function useInput(props, emit) { : props.wwElementState.props.readonly; }); - const style = computed(() => { - return { - '--placeholder-color': props.content.placeholderColor, - }; - }); - const min = computed(() => { if (type.value === 'date') { return props.content.minDate; @@ -277,7 +271,6 @@ export function useInput(props, emit) { step, inputType, isReadonly, - style, min, max, stepAttribute, diff --git a/src/wwElement.vue b/src/wwElement.vue index 08fc610..2e16fb4 100644 --- a/src/wwElement.vue +++ b/src/wwElement.vue @@ -9,7 +9,7 @@ v-if="showCurrencySymbol" ref="currencySymbolRef" class="currency-symbol" - :style="[currencySymbolStyle, { padding: style.padding }]" + :style="currencySymbolStyle" > {{ currencySymbol }} @@ -113,7 +113,6 @@ export default { step, inputType, isReadonly, - style, min, max, stepAttribute, @@ -504,7 +503,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 +517,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 +624,6 @@ export default { step, inputType, isReadonly, - style, isEditing, min, max, diff --git a/ww-config.js b/ww-config.js index 5cc1819..95a0b31 100644 --- a/ww-config.js +++ b/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', From 38cf6918b446c12c9dc61c220cb573b2e926c2dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A9o=20Coletta?= Date: Fri, 3 Jul 2026 14:41:51 +0200 Subject: [PATCH 3/3] fix(WW-3544): Guard placeholder CSS output explicitly - avoid falsy checks and duplicate proxy reads --- ww-config.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ww-config.js b/ww-config.js index 95a0b31..e372329 100644 --- a/ww-config.js +++ b/ww-config.js @@ -4,9 +4,10 @@ export default { exclude: ['text'], }, css({ content }) { - if (!content.placeholderColor) return []; + const placeholderColor = content.placeholderColor; + if (placeholderColor === undefined || placeholderColor === null || placeholderColor === '') return []; - return [{ property: '--placeholder-color', value: content.placeholderColor }]; + return [{ property: '--placeholder-color', value: placeholderColor }]; }, editor: { label: { en: 'Form Input', fr: 'Entrée de Formulaire' },