input with alias and input range style corrections (#19441)

* fix alias input

* number range style fix + placeholder inconsistency fix

* build(deps): bump @umbraco-ui/uui to 1.14.0-rc.3

* fix property declaration

* Update src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts

---------

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
This commit is contained in:
Niels Lyngsø
2025-05-28 11:58:57 +02:00
committed by GitHub
parent da436f839f
commit b4d5c8fd51
4 changed files with 44 additions and 25 deletions

View File

@@ -27,7 +27,7 @@
"@tiptap/extension-underline": "2.11.7",
"@tiptap/pm": "2.11.7",
"@tiptap/starter-kit": "2.11.7",
"@umbraco-ui/uui": "1.14.0-rc.2",
"@umbraco-ui/uui": "1.14.0-rc.3",
"@umbraco-ui/uui-css": "1.14.0-rc.2",
"dompurify": "^3.2.5",
"element-internals-polyfill": "^3.0.2",
@@ -4521,9 +4521,9 @@
"link": true
},
"node_modules/@umbraco-ui/uui": {
"version": "1.14.0-rc.2",
"resolved": "https://registry.npmjs.org/@umbraco-ui/uui/-/uui-1.14.0-rc.2.tgz",
"integrity": "sha512-ofM65FbdC+7ICGVUNvb6az7REDdaIqohWkkXbx28Uizeg/HflTOQXAhWGYvdGqryLzh9qBhCGd/zPtBMxfQtyg==",
"version": "1.14.0-rc.3",
"resolved": "https://registry.npmjs.org/@umbraco-ui/uui/-/uui-1.14.0-rc.3.tgz",
"integrity": "sha512-4uSpbJ72qOUMv3wel1c5ALWwC2Tgr/tARU2YwkulBP8v8HBD2OsaFWHl55Pkqu+63kGBw5BlVk5WTbq4DuHhOw==",
"license": "MIT",
"dependencies": {
"@umbraco-ui/uui-action-bar": "1.14.0-rc.1",
@@ -4563,10 +4563,10 @@
"@umbraco-ui/uui-icon": "1.14.0-rc.1",
"@umbraco-ui/uui-icon-registry": "1.14.0-rc.1",
"@umbraco-ui/uui-icon-registry-essential": "1.14.0-rc.1",
"@umbraco-ui/uui-input": "1.14.0-rc.1",
"@umbraco-ui/uui-input": "1.14.0-rc.3",
"@umbraco-ui/uui-input-file": "1.14.0-rc.1",
"@umbraco-ui/uui-input-lock": "1.14.0-rc.1",
"@umbraco-ui/uui-input-password": "1.14.0-rc.1",
"@umbraco-ui/uui-input-lock": "1.14.0-rc.3",
"@umbraco-ui/uui-input-password": "1.14.0-rc.3",
"@umbraco-ui/uui-keyboard-shortcut": "1.14.0-rc.1",
"@umbraco-ui/uui-label": "1.14.0-rc.1",
"@umbraco-ui/uui-loader": "1.14.0-rc.1",
@@ -4980,9 +4980,9 @@
}
},
"node_modules/@umbraco-ui/uui-input": {
"version": "1.14.0-rc.1",
"resolved": "https://registry.npmjs.org/@umbraco-ui/uui-input/-/uui-input-1.14.0-rc.1.tgz",
"integrity": "sha512-tBPivhC6TzROIA2jJ6lY9zbyzJDFN8CtWwx1T3xtJVetaOzK+PD9JSRN4uqDjh5NseyEBMOj+In8/EP3SV0+Rg==",
"version": "1.14.0-rc.3",
"resolved": "https://registry.npmjs.org/@umbraco-ui/uui-input/-/uui-input-1.14.0-rc.3.tgz",
"integrity": "sha512-mnyzgObVWdlitx+8aS4N84ji95Uekd9WhvesOb+bj5Vf5Q7Z8NLgozf8oNcxDa1gg3gFBtV4rwbiWgr2aaKp6Q==",
"license": "MIT",
"dependencies": {
"@umbraco-ui/uui-base": "1.14.0-rc.1"
@@ -5003,26 +5003,26 @@
}
},
"node_modules/@umbraco-ui/uui-input-lock": {
"version": "1.14.0-rc.1",
"resolved": "https://registry.npmjs.org/@umbraco-ui/uui-input-lock/-/uui-input-lock-1.14.0-rc.1.tgz",
"integrity": "sha512-QceYLbPyW9RWrTQ6xZtkU+Dz9o50yjLq52xDiDAH9sdhdUTyeNBoxGpQ795p9vxwGblEY2bj1Mzemm/jvnKa1A==",
"version": "1.14.0-rc.3",
"resolved": "https://registry.npmjs.org/@umbraco-ui/uui-input-lock/-/uui-input-lock-1.14.0-rc.3.tgz",
"integrity": "sha512-oC7CUGhdxyg48/Ul26F6Dl4P0MtHtCHR+N1x+M+FR1EFnItjifeJYYdzpbdd6XM1vGk8amFREPiIQdHU0n2HOA==",
"license": "MIT",
"dependencies": {
"@umbraco-ui/uui-base": "1.14.0-rc.1",
"@umbraco-ui/uui-button": "1.14.0-rc.1",
"@umbraco-ui/uui-icon": "1.14.0-rc.1",
"@umbraco-ui/uui-input": "1.14.0-rc.1"
"@umbraco-ui/uui-input": "1.14.0-rc.3"
}
},
"node_modules/@umbraco-ui/uui-input-password": {
"version": "1.14.0-rc.1",
"resolved": "https://registry.npmjs.org/@umbraco-ui/uui-input-password/-/uui-input-password-1.14.0-rc.1.tgz",
"integrity": "sha512-CacioTomvXFzdcn+6zwtOl9UXkM/6hv1+edYwjni6TV/mkPLWo2qLrf+Rv9cqHoyuq3du5AiroYRBCmhD/f55g==",
"version": "1.14.0-rc.3",
"resolved": "https://registry.npmjs.org/@umbraco-ui/uui-input-password/-/uui-input-password-1.14.0-rc.3.tgz",
"integrity": "sha512-XBpvLyBuOJcy06ukvcy16iInxg7V8bwGstEECoqxydzOdCYn+vNe4QbvXp8tf2EgHzM0vFnXLxReRVSUdE+Zkg==",
"license": "MIT",
"dependencies": {
"@umbraco-ui/uui-base": "1.14.0-rc.1",
"@umbraco-ui/uui-icon-registry-essential": "1.14.0-rc.1",
"@umbraco-ui/uui-input": "1.14.0-rc.1"
"@umbraco-ui/uui-input": "1.14.0-rc.3"
}
},
"node_modules/@umbraco-ui/uui-keyboard-shortcut": {

View File

@@ -215,7 +215,7 @@
"@tiptap/extension-underline": "2.11.7",
"@tiptap/pm": "2.11.7",
"@tiptap/starter-kit": "2.11.7",
"@umbraco-ui/uui": "1.14.0-rc.2",
"@umbraco-ui/uui": "1.14.0-rc.3",
"@umbraco-ui/uui-css": "1.14.0-rc.2",
"dompurify": "^3.2.5",
"element-internals-polyfill": "^3.0.2",
@@ -288,4 +288,4 @@
"access": "public",
"registry": "https://registry.npmjs.org/"
}
}
}

View File

@@ -47,7 +47,21 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
}
@property({ type: Object })
validationRange?: UmbNumberRangeValueType;
public set validationRange(value: UmbNumberRangeValueType | undefined) {
this.#validationRange = value;
this._minPlaceholder = value?.min !== undefined ? String(value?.min) : '';
this._maxPlaceholder = value?.max !== undefined && value.max !== Infinity ? String(value.max) : '∞';
}
public get validationRange(): UmbNumberRangeValueType | undefined {
return this.#validationRange;
}
#validationRange?: UmbNumberRangeValueType | undefined;
@state()
private _minPlaceholder: string = '';
@state()
private _maxPlaceholder: string = '';
private updateValue() {
const newValue =
@@ -114,7 +128,7 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
label=${this.minLabel}
min=${ifDefined(this.validationRange?.min)}
max=${ifDefined(this.validationRange?.max)}
placeholder=${this.validationRange?.min ?? ''}
placeholder=${this._minPlaceholder}
.value=${this._minValue}
@input=${this.#onMinInput}></uui-input>
<b></b>
@@ -123,13 +137,20 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
label=${this.maxLabel}
min=${ifDefined(this.validationRange?.min)}
max=${ifDefined(this.validationRange?.max)}
placeholder=${this.validationRange?.max ?? '∞'}
placeholder=${this._maxPlaceholder}
.value=${this._maxValue}
@input=${this.#onMaxInput}></uui-input>
`;
}
static override styles = css`
:host {
display: flex;
align-items: center;
}
b {
margin: 0 var(--uui-size-space-1);
}
:host(:invalid:not([pristine])) {
color: var(--uui-color-invalid);
}

View File

@@ -138,8 +138,6 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
}
#alias {
max-width: 50%;
&.muted {
opacity: 0.55;
padding: var(--uui-size-1, 3px) var(--uui-size-space-3, 9px);