js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Floating labels on select

Browse Source
This commit is contained in:
Lea Verou
2025-01-16 13:48:12 -05:00
parent 5f9695fde1
commit 1298651dd8
1 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/select/select.ts
View File

@@ -1,4 +1,4 @@
import type { TemplateResult } from 'lit';
import type { PropertyValues, TemplateResult } from 'lit';
import { html, isServer } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
@@ -674,6 +674,14 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
});
}
updated(changedProperties: PropertyValues<this>) {
super.updated(changedProperties);
if (changedProperties.has('value')) {
this.toggleCustomState('blank', !this.value);
}
}
@watch('disabled', { waitUntilFirstUpdate: true })
handleDisabledChange() {
// Close the listbox when the control is disabled
@@ -799,7 +807,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
>
<label
id="label"
part="form-control-label"
part="form-control-label label"
class="label"
aria-hidden=${hasLabel ? 'false' : 'true'}
@click=${this.handleLabelClick}