Rename the show event to open

It makes more sense, since `open` and `close` are antonyms just like `show` and `hide` are. However, `close` is used in the `<dialog>` element, so for developer experience it is better to use the first event-name pair.

Author: ivteplo

CHANGELOG.md

@@ -0,0 +1,6 @@
+# Changelog
+
+## v1.0.0
+- Basic functionality implementation
+- API documentation
+

README.md

@@ -5,9 +5,10 @@ HTML Custom Element for creating sheets
 
 ## Features
 
-- There is a draggable area to resize the sheet
+- Has a draggable area to resize the sheet
 - The sheet can be closed using a button in the top right corner, using the `Esc` key, or by clicking outside the bottom sheet
   - This behavior is configurable. You can turn off the `Esc` or the click outside the sheet when you want.
+- API is similar to the `<dialog>` element's
 
 
 ## API Documentation

documentation/API.md

@@ -33,7 +33,7 @@ customElements.define("ui-sheet", SheetElement)
 ```jsx
 const sheet = document.querySelector("...")
 
-sheet.addEventListener("show", event => {
+sheet.addEventListener("open", event => {
   console.log("The sheet is now shown")
 })
 

library/sheet.jsx

@@ -27,7 +27,7 @@ import { styleSheet } from "./styleSheet.js"
  * @example <caption>Execute certain actions when the sheet opens or closes</caption>
  * const sheet = document.querySelector("...")
  *
- * sheet.addEventListener("show", event => {
+ * sheet.addEventListener("open", event => {
  *   console.log("The sheet is now shown")
  * })
  *
@@ -149,7 +149,7 @@ export class SheetElement extends HTMLElement {
    */
   showModal() {
     this.setAttribute("open", true)
-    this.dispatchEvent(new CustomEvent("show"))
+    this.dispatchEvent(new CustomEvent("open"))
   }
 
   /**

test/main.js

@@ -15,10 +15,11 @@ openSheetButton.addEventListener("click", () => {
   sheet.showModal()
 })
 
+sheet.addEventListener("open", () => {
+  console.log("The sheet has been opened")
+})
+
 sheet.addEventListener("close", () => {
   console.log("The sheet has been closed")
 })
 
-sheet.addEventListener("show", () => {
-  console.log("The sheet has been shown")
-})