Update documentation

Author: ivteplo

README.md

@@ -1,8 +1,16 @@
 # HTML Sheet Element
+
 HTML Custom Element for creating sheets
 
+
 ## Features
+
 - There is 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 Documentation
+
+You can find API documentation [here](./documentation/API.md)
+

documentation/API.md

@@ -3,10 +3,26 @@
 HTML Custom Element for creating sheets
 
 <details open>
-<summary><b>Example:</b> Define the element in the registry</summary>
+<summary><b>Example:</b> Define the element in the registry and use it in your HTML</summary>
 
 ```jsx
 customElements.define("ui-sheet", SheetElement)
+
+// in HTML:
+<ui-sheet>
+  <p>Hello World!</p>
+</ui-sheet>
+```
+
+</details>
+
+<details open>
+<summary><b>Example:</b> Sheet open by default</summary>
+
+```jsx
+<ui-sheet open>
+  <p>Hello World!</p>
+</ui-sheet>
 ```
 
 </details>
@@ -42,11 +58,43 @@ sheet.show()
 </details>
 
 
+## `options`
+
+Options for behavior customization
+
+<details open>
+<summary><b>Example:</b> Make the sheet <i>not</i> close on background click</summary>
+
+```jsx
+<ui-sheet ignore-background-click>
+  ...
+</ui-sheet>
+```
+
+</details>
+
+<details open>
+<summary><b>Example:</b> Make the sheet <i>not</i> close when pressing Escape</summary>
+
+```jsx
+<ui-sheet ignore-escape-key>
+  ...
+</ui-sheet>
+```
+
+</details>
+
+
 ## `showModal(): void`
 
 Open the sheet
 
 
+## `show(): void`
+
+Open the sheet
+
+
 ## `close(): void`
 
 Collapse the sheet
@@ -69,4 +117,4 @@ sheet.open = true  // the same as executing sheet.showModal()
 sheet.open = false // the same as executing sheet.close()
 ```
 
-</details>
+</details>

documentation/generateDocumentation.js

@@ -96,6 +96,10 @@ class DocumentationGenerator {
         break
     }
 
+    if (object.isStatic) {
+      name = "static " + name
+    }
+
     return "`" + name + "`"
   }
 
@@ -120,9 +124,10 @@ class DocumentationGenerator {
   }
 
   static generateExample(tag) {
-    const summaryMatchGroup = /\<caption\>([^\<\>]*)\<\/caption\>/.exec(tag.doc)
+    const summaryMatchGroup = /\<caption\>(([^\<\n]|<\/?i>|<\/?b>|<\/?u>|<\/?a>)*)\<\/caption\>/.exec(tag.doc)
     const summaryString = summaryMatchGroup?.[1] ?? ""
     const summaryCode = summaryString ? `<b>Example:</b> ${summaryString}` : "<b>Example</b>"
+
     const code = tag.doc
       .substring(summaryMatchGroup?.[0].length ?? 0)
       .trim()
@@ -137,6 +142,7 @@ class DocumentationGenerator {
         object.jsDoc?.doc,
         ...this.generateTags(object),
       ], "\n\n"),
+      ...(object.classDef?.properties.map(property => this.generate(property, deepnessLevel + 1)) ?? []),
       ...(object.classDef?.methods.map(method => this.generate(method, deepnessLevel + 1)) ?? []),
     ], "\n\n\n")
   }

library/sheet.jsx

@@ -11,9 +11,19 @@ import { styleSheet } from "./styleSheet.js"
 /**
  * HTML Custom Element for creating sheets
  *
- * @example <caption>Define the element in the registry</caption>
+ * @example <caption>Define the element in the registry and use it in your HTML</caption>
  * customElements.define("ui-sheet", SheetElement)
  *
+ * // in HTML:
+ * <ui-sheet>
+ *   <p>Hello World!</p>
+ * </ui-sheet>
+ *
+ * @example <caption>Sheet open by default</caption>
+ * <ui-sheet open>
+ *   <p>Hello World!</p>
+ * </ui-sheet>
+ *
  * @example <caption>Execute certain actions when the sheet opens or closes</caption>
  * const sheet = document.querySelector("...")
  *
@@ -57,6 +67,19 @@ export class SheetElement extends HTMLElement {
     onClick: this.#onClick.bind(this)
   }
 
+  /**
+   * Options for behavior customization
+   *
+   * @example <caption>Make the sheet <i>not</i> close on background click</caption>
+   * <ui-sheet ignore-background-click>
+   *   ...
+   * </ui-sheet>
+   *
+   * @example <caption>Make the sheet <i>not</i> close when pressing Escape</caption>
+   * <ui-sheet ignore-escape-key>
+   *   ...
+   * </ui-sheet>
+   */
   options = {
     closeOnBackgroundClick: true,
     closeOnEscapeKey: true
@@ -132,7 +155,9 @@ export class SheetElement extends HTMLElement {
   /**
    * Open the sheet
    */
-  show = this.showModal
+  show() {
+    this.showModal()
+  }
 
   /**
    * Collapse the sheet

package.json

@@ -20,7 +20,8 @@
   },
   "scripts": {
     "dev": "vite --config test/vite.config.js",
-    "build": "vite build"
+    "build": "vite build",
+    "docs:api": "deno run -A documentation/generateDocumentation.js"
   },
   "devDependencies": {
     "vite": "^4.3.0"