Viewer Grid
In #2161 hebben we ondersteuning voor de VDK layout gemaakt. Tegelijkertijd hebben we het component stateless gemaakt, in lijn met onze visie op stateful vs. stateless components.
Dit betekent dat afnemers van het Viewer Grid met de VRK layout ook werk moeten verzetten.
Stateless
Voorheen was de breedte van het linkerpaneel onderdeel van de interne state. Nu moet de afnemer dit bijhouden. Hetzelfde geldt voor de "responsive tab view".
Hierdoor is de property initialMainSize komen te vervallen.
Interfaces
| Oud | Nieuw | Opmerkingen |
|---|---|---|
MainSize | ViewerGridMainSize | |
ViewerGridChangeSizeEvent.stage | ViewerGridChangeSizeAnimationEndEvent | Deze property is verplaatst naar een eigen event DsoViewerGridCustomEvent<ViewerGridChangeSizeAnimationEndEvent> |
ViewerGridChangeSizeEvent.previousSize | ViewerGridChangeSizeEvent.currentSize | |
ViewerGridChangeSizeEvent.currentSize | ViewerGridChangeSizeEvent.nextSize |
API
Bovenstaande opmerkingen komen enigszins in onderstaande markup voorschriften samen. Dit is exclusief de nieuwe functionaliteit die is ontwikkeld voor VDK.
❌
<dso-viewer-grid
[initialMainSize]="'medium'"
(dsoMainSizeChange)="$event.detail.stage === 'end' && resizeMap()"
></dso-viewer-grid>
✅
<dso-viewer-grid
[mainSize]="mainSize"
(dsoMainSizeChange)="mainSize = $event.detail.nextSize"
[activeTab]="activeTab"
(dsoActiveTabSwitch)="activeTab = $event.detail.tab"
(dsoMainSizeChangeAnimationEnd)="resizeMap()"
></dso-viewer-grid>
Date Picker
In #2226 is de maatwerk Date Picker vervangen door een browser natve <input type="date"> implementatie. Dit betekent iets minder invloed maar veel betere toegankelijkheid.
Properties
De volgende properties zijn komen te vervallen:
| Property | Migratie |
|---|---|
direction | Geen: Is met browser native control niet meer van toepassing. |
role | Geen: Is met browser native control niet meer van toepassing. |
show() | Geen: Is met browser native control niet meer van toepassing. |
hide() | Geen: Is met browser native control niet meer van toepassing. |
setFocus() | <dso-date-picker dso-autofocus> |
Interfaces hernoemd
De interfaces van de Date Picker waren onterecht geprefixed met Dso.
| Oud | Nieuw |
|---|---|
DsoDatePickerChangeEvent | DatePickerChangeEvent |
DsoDatePickerFocusEvent | DatePickerFocusEvent |
DsoDatePickerKeyboardEvent | DatePickerKeyboardEvent |
DsoDatePickerDirection | ❌ Verwijderd |