mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

prettier

pull/1711/head
konnorrogers 2023-11-09 13:44:10 -05:00
rodzic 9038ae4a15
commit 810891ae75
2 zmienionych plików z 45 dodań i 1 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
docs/pages/resources/changelog.md
Wyświetl plik

@ -15,7 +15,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
## Next
- Added the ability to call `form.checkValidity()` and it will use Shoelace's custom `checkValidity()` handler. [#1708]
- Fixed a bug where nested dialogs were not properly trapping focus. [#1709]
- Fixed a bug where nested dialogs were not properly trapping focus. [#1711]
- Fixed a bug with form controls removing the custom validity handlers from the form. [#1708]
- Fixed a bug in form control components that used a `form` property, but not an attribute. [#1707]
- Fixed a bug with bundled components using CDN builds not having translations on initial connect [#1696]

44
index.html 100644
Wyświetl plik

@ -0,0 +1,44 @@
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="/cdn/themes/light.css" />
<script type="module" src="/cdn/shoelace-autoloader.js"></script>
</head>
<body>
<div>
<sl-dialog label="Dialog 1" class="dialog-1">
<sl-button class="open-2b">Open Dialog 2</sl-button>
<sl-button slot="footer" variant="primary" class="close-1">Close</sl-button>
</sl-dialog>
<sl-dialog label="Dialog 2" class="dialog-2">
<sl-input autofocus placeholder="I will have focus when the dialog is opened"></sl-input>
<sl-input placeholder="Second input"></sl-input>
<sl-button slot="footer" variant="primary" class="close-2">Close</sl-button>
</sl-dialog>
<sl-button class="open-1">Open Dialog 1</sl-button>
<sl-button class="open-2a">Open Dialog 2</sl-button>
</div>
<script>
const dialog1 = document.querySelector('.dialog-1');
const openButton1 = document.querySelector('.open-1');
const closeButton1 = document.querySelector('.close-1');
const dialog2 = document.querySelector('.dialog-2');
const openButton2a = document.querySelector('.open-2a');
const openButton2b = document.querySelector('.open-2b');
const closeButton2 = document.querySelector('.close-2');
openButton1.addEventListener('click', () => dialog1.show());
closeButton1.addEventListener('click', () => dialog1.hide());
openButton2a.addEventListener('click', () => dialog2.show());
openButton2b.addEventListener('click', () => dialog2.show());
closeButton2.addEventListener('click', () => dialog2.hide());
</script>
</body>
</html>