From 83cd00b8f30502acccd71a9889ba25a57c8a2982 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A9o=20Coletta?= Date: Mon, 6 Jul 2026 14:21:24 +0200 Subject: [PATCH 1/3] feat(WW-3544): Export input text CSS variables - move placeholder and text surface variables to CSS config - remove legacy inline text style bridge --- src/composables/useInput.js | 11 ----------- src/wwElement.vue | 21 ++++++++++++++++----- ww-config.js | 35 +++++++++++++++++++++++++++++++++++ 3 files changed, 51 insertions(+), 16 deletions(-) diff --git a/src/composables/useInput.js b/src/composables/useInput.js index c0d9bb6..0f3b812 100644 --- a/src/composables/useInput.js +++ b/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; @@ -281,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 35cb083..860f4fe 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, @@ -686,6 +683,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 +730,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; } } diff --git a/ww-config.js b/ww-config.js index 5cc1819..fcd8a2b 100644 --- a/ww-config.js +++ b/ww-config.js @@ -1,8 +1,43 @@ +function getTextSurfaceCss(content) { + return [ + { + property: '--ww-text-white-space', + value: content._mapValue('_ww-text_nowrap', 'white-space', { + trueValue: 'nowrap', + falseValue: 'initial', + }), + }, + { + property: '--ww-text-overflow', + value: content._mapValue('_ww-text_nowrap', 'overflow', { + trueValue: 'hidden', + falseValue: 'initial', + }), + }, + { + property: '--ww-text-text-overflow', + value: content._mapValue('_ww-text_ellipsis', 'text-overflow', { + trueValue: 'ellipsis', + falseValue: 'initial', + }), + }, + ]; +} + export default { inherit: { type: 'ww-text', exclude: ['text'], }, + css({ content }) { + const css = getTextSurfaceCss(content); + + if (content.placeholderColor) { + css.push({ property: '--placeholder-color', value: content.placeholderColor }); + } + + return css; + }, editor: { label: { en: 'Form Input', fr: 'Entrée de Formulaire' }, icon: 'text-input', From a77e8b6691799018adc13a5bb56048a893fd3ed6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A9o=20Coletta?= Date: Tue, 7 Jul 2026 17:15:40 +0200 Subject: [PATCH 2/3] chore(WW-3544): Use inherited input text CSS variables --- ww-config.js | 34 ++-------------------------------- 1 file changed, 2 insertions(+), 32 deletions(-) diff --git a/ww-config.js b/ww-config.js index fcd8a2b..95a0b31 100644 --- a/ww-config.js +++ b/ww-config.js @@ -1,42 +1,12 @@ -function getTextSurfaceCss(content) { - return [ - { - property: '--ww-text-white-space', - value: content._mapValue('_ww-text_nowrap', 'white-space', { - trueValue: 'nowrap', - falseValue: 'initial', - }), - }, - { - property: '--ww-text-overflow', - value: content._mapValue('_ww-text_nowrap', 'overflow', { - trueValue: 'hidden', - falseValue: 'initial', - }), - }, - { - property: '--ww-text-text-overflow', - value: content._mapValue('_ww-text_ellipsis', 'text-overflow', { - trueValue: 'ellipsis', - falseValue: 'initial', - }), - }, - ]; -} - export default { inherit: { type: 'ww-text', exclude: ['text'], }, css({ content }) { - const css = getTextSurfaceCss(content); - - if (content.placeholderColor) { - css.push({ property: '--placeholder-color', value: content.placeholderColor }); - } + if (!content.placeholderColor) return []; - return css; + return [{ property: '--placeholder-color', value: content.placeholderColor }]; }, editor: { label: { en: 'Form Input', fr: 'Entrée de Formulaire' }, From 76733c4a2a4a18ba2ab29eafb2aae8a30e2b0ee3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A9o=20Coletta?= Date: Wed, 8 Jul 2026 18:54:53 +0200 Subject: [PATCH 3/3] feat(WW-3544): Use selector-based input states --- src/composables/useInput.js | 28 ---------------------------- src/wwElement.vue | 2 -- ww-config.js | 5 ++++- 3 files changed, 4 insertions(+), 31 deletions(-) diff --git a/src/composables/useInput.js b/src/composables/useInput.js index 0f3b812..a01904b 100644 --- a/src/composables/useInput.js +++ b/src/composables/useInput.js @@ -220,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, diff --git a/src/wwElement.vue b/src/wwElement.vue index 860f4fe..cff23ed 100644 --- a/src/wwElement.vue +++ b/src/wwElement.vue @@ -86,8 +86,6 @@ export default { emits: [ 'element-event', 'trigger-event', - 'add-state', - 'remove-state', 'update:content:effect', 'update:sidepanel-content', ], diff --git a/ww-config.js b/ww-config.js index 95a0b31..2ca4fdf 100644 --- a/ww-config.js +++ b/ww-config.js @@ -64,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 },