-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapi.json
More file actions
120 lines (120 loc) · 60.4 KB
/
api.json
File metadata and controls
120 lines (120 loc) · 60.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
{
"versions": [
{
"1.0": {
"published": true,
"date": "16 June Fri",
"docs": "https://srf.smsk.me",
"developer": "devsimsek",
"commit_message": "First version of the framework SRF!",
"repository": "https://github.com/devsimsek/srf",
"version_code": "v1.0 - Early Development",
"features": {
"components": [
"Component",
"Card",
"Accordion",
"Toast",
"Alert",
"Form",
"Flash",
"Badge",
"Button",
"Carousel",
"List",
"Toolbar",
"Modal",
"Nav",
"Progress"
],
"core": [
"Route",
"Page Manipulation",
"Template Parsing",
"Accessing Query Parameters",
"Integrating HTTP API's",
"Async Loading Scripts and Styles"
]
},
"cdn": {
"bundle": "https://srf.smsk.me/dist/srf.js",
"core": "https://srf.smsk.me/dist/srf.core.js",
"components": "https://srf.smsk.me/dist/srf.components.js"
}
},
"1.0.1": {
"published": true,
"date": "16 June Fri",
"docs": "https://srf.smsk.me",
"developer": "devsimsek",
"commit_message": "Some fixes, optimizations and implementation of the render() function",
"repository": "https://github.com/devsimsek/srf",
"version_code": "v1.0.1 - Early Development",
"features": {
"components": [
"Component",
"Card",
"Accordion",
"Toast",
"Alert",
"Form",
"Flash",
"Badge",
"Button",
"Carousel",
"List",
"Toolbar",
"Modal",
"Nav",
"Progress"
],
"core": [
"Route",
"Page Manipulation",
"Template Parsing",
"Accessing Query Parameters",
"Integrating HTTP API's",
"Async Loading Scripts and Styles"
]
},
"cdn": {
"bundle": "https://srf.smsk.me/dist/srf.js",
"core": "https://srf.smsk.me/dist/srf.core.js",
"components": "https://srf.smsk.me/dist/srf.components.js"
}
}
}
],
"docs": [
{
"document": "introduction@1.0",
"name": "Introduction",
"writer": {
"name": "devsimsek",
"image": "https://avatars.githubusercontent.com/u/75851971?v=4",
"description": "I am young self taught developer from turkey. I worked on most of the languages out there and choose web development + devops for my career."
},
"version": "1.0",
"version_code": "v1.0 - Early Development",
"configuration": {
"theme": "default"
},
"contents": "<h1 id='introducing-srf-v1-0-early-development-'>Introducing SRF v1.0 Early Development!</h1> <p>I am thrilled to announce the launch of SRF, a new web routing framework designed for frontend applications. With its intuitive architecture and powerful features, SRF makes web development and integrating frontend with backend easier than ever.</p> <h3 id='why-choose-srf-'>Why Choose SRF?</h3> <h4 id='1-speed-and-efficiency'>1. Speed and Efficiency</h4> <p>SRF is built with javascript. With my framework, you can create web applications that load quickly, connect to api or services and deliver an exceptional user experience.</p> <h4 id='2-flexibility-and-extensibility'>2. Flexibility and Extensibility</h4> <p>I understand that every project has unique requirements. That's why SRF offers unparalleled flexibility and extensibility. You can pick and choose which features or components you need, enabling you to create tailor-made solutions that align perfectly with your project goals.</p> <h4 id='3-integration-support'>3. Integration Support</h4> <p>We believe that clear and comprehensive documentation is crucial for a successful development experience. That's why we've invested significant time and effort into creating extensive documentation that guides you through every aspect of using MyWebFramework. Additionally, our dedicated support team is always ready to assist you with any questions or issues you may encounter along the way.</p> <h4 id='4-ui-creation-without-designing-anything'>4. UI Creation Without Designing Anything</h4> <p>I believe that every application has a unique look but this does not mean user will like it. So that's why I choose tailwind and bootstrap design frameworks to build internal components which you can include to your application. Everything will be accessible without creating new view/template files by using javascript and my component engine (soon).</p> <h3 id='key-features-of-srf'>Key Features of SRF</h3> <ul> <li><strong>Routing</strong>: Define clean and SEO-friendly URLs for your application's endpoints with my routing system.</li> <li><strong>Templating</strong>: Effortlessly create dynamic and reusable templates using my flexible templating engine.</li> <li><strong>Service Integration</strong>: Seamlessly connect to various services and perform tasks at ease.</li> <li><strong>Authentication and Authorization</strong>: Implement secure user authentication and authorization mechanisms with ease.</li> <li><strong>Error Handling</strong>: Simplify error handling and provide meaningful error messages to enhance the debugging process. (Soon)</li> </ul> <h3 id='get-started-with-srf-today-'>Get Started with SRF Today!</h3> <p>Getting started with SRF is a breeze. Just navigate to my GitHub page to download the latest version and access source. Whether you're a seasoned developer or just starting your web development journey, SRF has the tools and resources you need to build exceptional web applications. But if you want to create backend supported apps with security and database integrations you can use my sdf framework <a href='https://github.com/devsimsek/sdf-go'>golang</a>, <a href='https://github.com/devsimsek/project-sdf'>php</a></p> <p>Together, let's build amazing things!</p>"
},
{
"document": "components@1.0",
"name": "Component Documentation",
"writer": {
"name": "devsimsek",
"image": "https://avatars.githubusercontent.com/u/75851971?v=4",
"description": "I am young self taught developer from turkey. I worked on most of the languages out there and choose web development + devops for my career."
},
"version": "1.0",
"version_code": "v1.0 - Early Development",
"configuration": {
"theme": "default"
},
"contents": "<h2 id='class-component'>Class: Component</h2><p>The <code>Component</code> class serves as the base class for all other components in the library. It provides a common method for generating unique IDs and a placeholder <code>present</code> method.</p><h3 id='method-generateid-flag-'>Method: generateID(flag)</h3><p>Generates a unique ID for a component. If a <code>flag</code> is provided, it will be prefixed to the generated ID.</p><p><strong>Parameters:</strong></p><ul><li><code>flag</code> (optional): A string value to be prefixed to the generated ID.</li></ul><p><strong>Usage Example:</strong></p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> <span class='hljs-keyword'>id</span> = Component.generateID(<span class='hljs-string'>'my-component-'</span>);console.log(<span class='hljs-keyword'>id</span>); <span class='hljs-comment'>// Output: my-component-abc123</span></code></pre><h2 id='class-card'>Class: Card</h2><p>Extends <code>Component</code>. Represents a Card component.</p><h3 id='constructor'>Constructor</h3><p>Create a new Card.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> card = <span class='hljs-keyword'>new</span> Card(<span class='hljs-keyword'>body</span>, options);</code></pre><h4 id='parameters'>Parameters</h4><ul><li><code>body</code> (string): The content of the card body.</li><li><code>options</code> (object, optional): Additional options for the card (default: <code>null</code>).</li></ul><h3 id='properties'>Properties</h3><ul><li><code>options</code> (object): The default options for the card.</li><li><code>html</code> (string): The HTML representation of the card.</li></ul><h3 id='options'>Options</h3><p>The <code>options</code> object can have the following properties:</p><ul><li><code>id</code> (string): The ID of the card. If not provided, a generated ID will be used.</li><li><code>class</code> (string): Additional CSS classes to be applied to the card.</li><li><code>title</code> (object):<ul><li><code>type</code> (string): The HTML tag for the title (default: <code>"h1"</code>).</li><li><code>style</code> (string): Custom CSS styles for the title.</li><li><code>content</code> (string): The content of the title.</li><li><code>custom</code> (string): Custom HTML content for the title.</li></ul></li><li><code>header</code> (object):<ul><li><code>content</code> (string): The content of the card header.</li><li><code>style</code> (string): Custom CSS styles for the card header.</li><li><code>custom</code> (string): Custom HTML content for the card header.</li></ul></li><li><code>footer</code> (object):<ul><li><code>content</code> (string): The content of the card footer.</li><li><code>style</code> (string): Custom CSS styles for the card footer.</li><li><code>custom</code> (string): Custom HTML content for the card footer.</li></ul></li><li><code>buttons</code> (array): An array of button objects with the following properties:<ul><li><code>class</code> (string): Additional CSS classes to be applied to the button.</li><li><code>label</code> (string): The label of the button.</li></ul></li><li><code>inputs</code> (array): An array of input objects with the following properties:<ul><li><code>type</code> (string): The type of the input.</li><li><code>class</code> (string): Additional CSS classes to be applied to the input.</li><li><code>placeholder</code> (string): The placeholder text for the input.</li></ul></li><li><code>image</code> (array): An array of image objects representing images to be displayed in the card.</li><li><code>style</code> (string): Custom CSS styles for the card.</li></ul><h3 id='methods'>Methods</h3><h4 id='-present-'><code>present()</code></h4><p>Present the card on the page.</p><pre><code class='lang-javascript'>const <span class='hljs-keyword'>card</span> = new <span class='hljs-keyword'>Card</span>(body, <span class='hljs-keyword'>options</span>);const cardId = <span class='hljs-keyword'>card</span>.present();console.<span class='hljs-built-in'>log</span>(cardId); <span class='hljs-comment'>// Output: The ID of the card</span></code></pre><h4 id='returns'>Returns</h4><ul><li>(string): The ID of the card if it was successfully presented, otherwise an empty string.</li></ul><strong>Usage Example:</strong><pre><code class='lang-javascript'><span class='hljs-comment'>// Create a new card with default options</span><span class='hljs-keyword'>const</span> card1 = new Card(<span class='hljs-string'>'This is the body content of the card'</span>);<span class='hljs-comment'>// Present the card on the page</span><span class='hljs-keyword'>const</span> cardId1 = card1.present();console.<span class='hljs-built_in'>log</span>(cardId1); <span class='hljs-comment'>// Output: The ID of the card</span><span class='hljs-comment'>// Create a new card with custom options</span><span class='hljs-keyword'>const</span> options = { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'custom-card'</span>, title: { <span class='hljs-keyword'>type</span>: <span class='hljs-string'>'h2'</span>, style: <span class='hljs-string'>'color: red;'</span>, content: <span class='hljs-string'>'Custom Card Title'</span>, }, buttons: [ { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'btn-primary'</span>, <span class='hljs-keyword'>label</span>: <span class='hljs-string'>'Button 1'</span> }, { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'btn-secondary'</span>, <span class='hljs-keyword'>label</span>: <span class='hljs-string'>'Button 2'</span> }, ],};<span class='hljs-keyword'>const</span> card2 = new Card(<span class='hljs-string'>'This is another card with custom options'</span>, options);<span class='hljs-comment'>// Present the card on the page</span><span class='hljs-keyword'>const</span> cardId2 = card2.present();console.<span class='hljs-built_in'>log</span>(cardId2); <span class='hljs-comment'>// Output: The ID of the card</span></code></pre><h2 id='class-accordion'>Class: Accordion</h2><p>Extends <code>Component</code>. Represents an Accordion component.</p><h3 id='constructor'>Constructor</h3><p>Create a new Accordion.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> accordion = <span class='hljs-keyword'>new</span> Accordion(options);</code></pre><h4 id='parameters'>Parameters</h4><ul><li><code>options</code> (object, optional): Additional options for the accordion (default: <code>null</code>).</li></ul><h3 id='properties'>Properties</h3><ul><li><code>item</code> (object): The default item structure for the accordion.</li><li><code>options</code> (object): The default options for the accordion.</li><li><code>html</code> (string): The HTML representation of the accordion.</li></ul><h3 id='options'>Options</h3><p>The <code>options</code> object can have the following properties:</p><ul><li><code>id</code> (string): The ID of the accordion. If not provided, a generated ID will be used.</li><li><code>class</code> (string): Additional CSS classes to be applied to the accordion.</li><li><code>items</code> (array): An array of item objects representing the items in the accordion.</li><li><code>buttons</code> (array): An array of button objects with the following properties:<ul><li><code>class</code> (string): Additional CSS classes to be applied to the button.</li><li><code>label</code> (string): The label of the button.</li></ul></li><li><code>inputs</code> (array): An array of input objects with the following properties:<ul><li><code>type</code> (string): The type of the input.</li><li><code>class</code> (string): Additional CSS classes to be applied to the input.</li><li><code>placeholder</code> (string): The placeholder text for the input.</li></ul></li><li><code>image</code> (array): An array of image objects representing images to be displayed in the accordion.</li><li><code>style</code> (string): Custom CSS styles for the accordion.</li></ul><h3 id='methods'>Methods</h3><h4 id='-present-'><code>present()</code></h4><p>Present the accordion on the page.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> accordion = <span class='hljs-keyword'>new</span> Accordion(options);<span class='hljs-keyword'>const</span> accordionId = accordion.present();console.<span class='hljs-built_in'>log</span>(accordionId); <span class='hljs-comment'>// Output: The ID of the accordion</span></code></pre><h4 id='returns'>Returns</h4><ul><li>(string): The ID of the accordion if it was successfully presented, otherwise an empty string.</li></ul><strong>Usage Example:</strong><pre><code class='lang-javascript'><span class='hljs-comment'>// Create a new accordion with default options</span><span class='hljs-keyword'>const</span> accordion1 = <span class='hljs-keyword'>new</span> Accordion();<span class='hljs-comment'>// Present the accordion on the page</span><span class='hljs-keyword'>const</span> accordionId1 = accordion1.present();console.<span class='hljs-built_in'>log</span>(accordionId1); <span class='hljs-comment'>// Output: The ID of the accordion</span><span class='hljs-comment'>// Create a new accordion with custom options</span><span class='hljs-keyword'>const</span> options = { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'custom-accordion'</span>, items: [ { title: <span class='hljs-string'>'Item 1'</span>, body: <span class='hljs-string'>'Content of Item 1'</span> }, { title: <span class='hljs-string'>'Item 2'</span>, body: <span class='hljs-string'>'Content of Item 2'</span> }, ], buttons: [ { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'btn-primary'</span>, label: <span class='hljs-string'>'Button 1'</span> }, { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'btn-secondary'</span>, label: <span class='hljs-string'>'Button 2'</span> }, ],};<span class='hljs-keyword'>const</span> accordion2 = <span class='hljs-keyword'>new</span> Accordion(options);<span class='hljs-comment'>// Present the accordion on the page</span><span class='hljs-keyword'>const</span> accordionId2 = accordion2.present();console.<span class='hljs-built_in'>log</span>(accordionId2); <span class='hljs-comment'>// Output: The ID of the accordion</span></code></pre><h2 id='class-toast'>Class: Toast</h2><p>Extends <code>Component</code>. Represents a Toast component.</p><h3 id='constructor'>Constructor</h3><p>Create a new Toast.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> toast = <span class='hljs-keyword'>new</span> Toast(title, <span class='hljs-keyword'>body</span>, options);</code></pre><h4 id='parameters'>Parameters</h4><ul><li><code>title</code> (string): The title of the toast.</li><li><code>body</code> (string): The content of the toast body.</li><li><code>options</code> (object, optional): Additional options for the toast (default: <code>null</code>).</li></ul><h3 id='properties'>Properties</h3><ul><li><code>options</code> (object): The default options for the toast.</li><li><code>html</code> (string): The HTML representation of the toast.</li></ul><h3 id='options'>Options</h3><p>The <code>options</code> object can have the following properties:</p><ul><li><code>id</code> (string): The ID of the toast. If not provided, a generated ID will be used.</li><li><code>close</code> (string): The label for the close button.</li><li><code>alignment</code> (string): The alignment of the toast (default: <code>"bottom"</code>).</li><li><code>type</code> (string): The type of the toast. Can be used to apply different styles based on the type.</li><li><code>delay</code> (string): The delay in milliseconds before the toast automatically hides (default: <code>"3000"</code>).</li><li><code>autohide</code> (boolean): Determines whether the toast should automatically hide after the delay (default: <code>true</code>).</li></ul><h3 id='methods'>Methods</h3><h4 id='-present-'><code>present()</code></h4><p>Present the toast on the page.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> toast = <span class='hljs-keyword'>new</span> Toast(title, body, options);<span class='hljs-keyword'>const</span> toastId = toast.present();console.<span class='hljs-built_in'>log</span>(toastId); <span class='hljs-comment'>// Output: The ID of the toast</span></code></pre><h4 id='returns'>Returns</h4><ul><li>(string): The ID of the toast if it was successfully presented, otherwise an empty string.</li></ul><strong>Usage Example:</strong><pre><code class='lang-javascript'><span class='hljs-comment'>// Create a new toast with default options</span><span class='hljs-keyword'>const</span> toast1 = <span class='hljs-keyword'>new</span> Toast(<span class='hljs-string'>'Toast Title'</span>, <span class='hljs-string'>'This is the body content of the toast'</span>);<span class='hljs-comment'>// Present the toast on the page</span><span class='hljs-keyword'>const</span> toastId1 = toast1.present();<span class='hljs-built_in'>console</span>.log(toastId1); <span class='hljs-comment'>// Output: The ID of the toast</span><span class='hljs-comment'>// Create a new toast with custom options</span><span class='hljs-keyword'>const</span> options = { alignment: <span class='hljs-string'>'top'</span>, <span class='hljs-keyword'>type</span>: <span class='hljs-string'>'success'</span>, delay: <span class='hljs-string'>'5000'</span>, autohide: <span class='hljs-literal'>false</span>,};<span class='hljs-keyword'>const</span> toast2 = <span class='hljs-keyword'>new</span> Toast(<span class='hljs-string'>'Custom Toast Title'</span>, <span class='hljs-string'>'This is a custom toast with different options'</span>, options);<span class='hljs-comment'>// Present the toast on the page</span><span class='hljs-keyword'>const</span> toastId2 = toast2.present();<span class='hljs-built_in'>console</span>.log(toastId2); <span class='hljs-comment'>// Output: The ID of the toast</span></code></pre><h2 id='class-alert'>Class: Alert</h2><p>Extends <code>Component</code>. Represents an Alert component.</p><h3 id='constructor'>Constructor</h3><p>Create a new Alert.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> alert = <span class='hljs-keyword'>new</span> Alert(options);</code></pre><h4 id='parameters'>Parameters</h4><ul><li><code>options</code> (object, optional): Additional options for the alert (default: <code>null</code>).</li></ul><h3 id='properties'>Properties</h3><ul><li><code>options</code> (object): The default options for the alert.</li><li><code>html</code> (string): The HTML representation of the alert.</li></ul><h3 id='options'>Options</h3><p>The <code>options</code> object can have the following properties:</p><ul><li><code>id</code> (string): The ID of the alert. If not provided, a generated ID will be used.</li><li><code>class</code> (string): Additional CSS classes to be applied to the alert.</li><li><code>type</code> (string): The type of the alert. Can be one of <code>"info"</code>, <code>"success"</code>, <code>"warning"</code>, <code>"danger"</code>.</li><li><code>dismissible</code> (boolean): Determines whether the alert can be dismissed by the user (default: <code>true</code>).</li><li><code>content</code> (string): The content of the alert.</li></ul><h3 id='methods'>Methods</h3><h4 id='-present-'><code>present()</code></h4><p>Present the alert on the page.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> alert = <span class='hljs-keyword'>new</span> Alert(options);<span class='hljs-keyword'>const</span> alertId = alert.present();console.<span class='hljs-built_in'>log</span>(alertId); <span class='hljs-comment'>// Output: The ID of the alert</span></code></pre><h4 id='returns'>Returns</h4><ul><li>(string): The ID of the alert if it was successfully presented, otherwise an empty string.</li></ul><strong>Usage Example:</strong><pre><code class='lang-javascript'><span class='hljs-comment'>// Create a new alert with default options</span><span class='hljs-keyword'>const</span> alert1 = <span class='hljs-keyword'>new</span> Alert();<span class='hljs-comment'>// Present the alert on the page</span><span class='hljs-keyword'>const</span> alertId1 = alert1.present();<span class='hljs-built_in'>console</span>.log(alertId1); <span class='hljs-comment'>// Output: The ID of the alert</span><span class='hljs-comment'>// Create a new alert with custom options</span><span class='hljs-keyword'>const</span> options = { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'custom-alert'</span>, <span class='hljs-keyword'>type</span>: <span class='hljs-string'>'warning'</span>, dismissible: <span class='hljs-literal'>false</span>, content: <span class='hljs-string'>'This is a custom alert with different options'</span>,};<span class='hljs-keyword'>const</span> alert2 = <span class='hljs-keyword'>new</span> Alert(options);<span class='hljs-comment'>// Present the alert on the page</span><span class='hljs-keyword'>const</span> alertId2 = alert2.present();<span class='hljs-built_in'>console</span>.log(alertId2); <span class='hljs-comment'>// Output: The ID of the alert</span></code></pre><h2 id='class-form'>Class: Form</h2><p>Extends <code>Component</code>. Represents a Form component.</p><h3 id='constructor'>Constructor</h3><p>Create a new Form.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> <span class='hljs-keyword'>form</span> = new <span class='hljs-keyword'>Form</span>(options);</code></pre><h4 id='parameters'>Parameters</h4><ul><li><code>options</code> (object, optional): Additional options for the form (default: <code>null</code>).</li></ul><h3 id='properties'>Properties</h3><ul><li><code>options</code> (object): The default options for the form.</li><li><code>html</code> (string): The HTML representation of the form.</li></ul><h3 id='options'>Options</h3><p>The <code>options</code> object can have the following properties:</p><ul><li><code>id</code> (string): The ID of the form. If not provided, a generated ID will be used.</li><li><code>class</code> (string): Additional CSS classes to be applied to the form.</li><li><code>method</code> (string): The HTTP method for the form. Can be <code>"get"</code> or <code>"post"</code> (default: <code>"post"</code>).</li><li><code>action</code> (string): The URL where the form data will be sent.</li><li><code>content</code> (string): The content of the form.</li><li><code>inputs</code> (array): An array of input objects representing form inputs. Each input object should have the following properties:<ul><li><code>type</code> (string): The type of the input.</li><li><code>label</code> (string): The label for the input.</li><li><code>name</code> (string): The name attribute for the input.</li><li><code>value</code> (string): The initial value of the input.</li><li><code>required</code> (boolean): Determines whether the input is required (default: <code>false</code>).</li></ul></li></ul><h3 id='methods'>Methods</h3><h4 id='-present-'><code>present()</code></h4><p>Present the form on the page.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> <span class='hljs-keyword'>form</span> = new <span class='hljs-keyword'>Form</span>(options);<span class='hljs-keyword'>const</span> formId = <span class='hljs-keyword'>form</span>.present();console.<span class='hljs-built_in'>log</span>(formId); <span class='hljs-comment'>// Output: The ID of the form</span></code></pre><h4 id='returns'>Returns</h4><ul><li>(string): The ID of the form if it was successfully presented, otherwise an empty string.</li></ul><strong>Usage Example:</strong><pre><code class='lang-javascript'><span class='hljs-comment'>// Create a new form with default options</span>const form1 = new Form();<span class='hljs-comment'>// Present the form on the page</span>const formId1 = form1.present();console.log(formId1); <span class='hljs-comment'>// Output: The ID of the form</span><span class='hljs-comment'>// Create a new form with custom options</span>const options = {<span class='hljs-symbol'> class:</span> <span class='hljs-string'>'custom-form'</span>,<span class='hljs-symbol'> method:</span> <span class='hljs-string'>'post'</span>,<span class='hljs-symbol'> action:</span> <span class='hljs-string'>'/submit-form'</span>,<span class='hljs-symbol'> content:</span> <span class='hljs-string'>'Please fill out the form:'</span>,<span class='hljs-symbol'> inputs:</span> [ {<span class='hljs-symbol'> type:</span> <span class='hljs-string'>'text'</span>,<span class='hljs-symbol'> label:</span> <span class='hljs-string'>'Name'</span>,<span class='hljs-symbol'> name:</span> <span class='hljs-string'>'name'</span>,<span class='hljs-symbol'> value:</span> <span class='hljs-string'>''</span>,<span class='hljs-symbol'> required:</span> true, }, {<span class='hljs-symbol'> type:</span> <span class='hljs-string'>'email'</span>,<span class='hljs-symbol'> label:</span> <span class='hljs-string'>'Email'</span>,<span class='hljs-symbol'> name:</span> <span class='hljs-string'>'email'</span>,<span class='hljs-symbol'> value:</span> <span class='hljs-string'>''</span>,<span class='hljs-symbol'> required:</span> true, }, {<span class='hljs-symbol'> type:</span> <span class='hljs-string'>'password'</span>,<span class='hljs-symbol'> label:</span> <span class='hljs-string'>'Password'</span>,<span class='hljs-symbol'> name:</span> <span class='hljs-string'>'password'</span>,<span class='hljs-symbol'> value:</span> <span class='hljs-string'>''</span>,<span class='hljs-symbol'> required:</span> true, }, ],};const form2 = new Form(options);<span class='hljs-comment'>// Present the form on the page</span>const formId2 = form2.present();console.log(formId2); <span class='hljs-comment'>// Output: The ID of the form</span></code></pre><h2 id='class-flash'>Class: Flash</h2><p>Extends <code>Component</code>. Represents a Flash message component.</p><h3 id='constructor'>Constructor</h3><p>Create a new Flash message.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> flash = <span class='hljs-keyword'>new</span> Flash(options);</code></pre><h4 id='parameters'>Parameters</h4><ul><li><code>options</code> (object, optional): Additional options for the flash message (default: <code>null</code>).</li></ul><h3 id='properties'>Properties</h3><ul><li><code>options</code> (object): The default options for the flash message.</li><li><code>html</code> (string): The HTML representation of the flash message.</li></ul><h3 id='options'>Options</h3><p>The <code>options</code> object can have the following properties:</p><ul><li><code>id</code> (string): The ID of the flash message. If not provided, a generated ID will be used.</li><li><code>class</code> (string): Additional CSS classes to be applied to the flash message.</li><li><code>type</code> (string): The type of the flash message. Can be <code>"success"</code>, <code>"info"</code>, <code>"warning"</code>, or <code>"danger"</code> (default: <code>"success"</code>).</li><li><code>content</code> (string): The content of the flash message.</li></ul><h3 id='methods'>Methods</h3><h4 id='-present-'><code>present()</code></h4><p>Present the flash message on the page.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> flash = <span class='hljs-keyword'>new</span> Flash(options);<span class='hljs-keyword'>const</span> flashId = flash.present();console.<span class='hljs-built_in'>log</span>(flashId); <span class='hljs-comment'>// Output: The ID of the flash message</span></code></pre><h4 id='returns'>Returns</h4><ul><li>(string): The ID of the flash message if it was successfully presented, otherwise an empty string.</li></ul><strong>Usage Example:</strong><pre><code class='lang-javascript'><span class='hljs-comment'>// Create a new flash message with default options</span><span class='hljs-keyword'>const</span> flash1 = <span class='hljs-keyword'>new</span> Flash();<span class='hljs-comment'>// Present the flash message on the page</span><span class='hljs-keyword'>const</span> flashId1 = flash1.present();<span class='hljs-built_in'>console</span>.log(flashId1); <span class='hljs-comment'>// Output: The ID of the flash message</span><span class='hljs-comment'>// Create a new flash message with custom options</span><span class='hljs-keyword'>const</span> options = { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'custom-flash'</span>, <span class='hljs-keyword'>type</span>: <span class='hljs-string'>'warning'</span>, content: <span class='hljs-string'>'Warning: This action cannot be undone!'</span>,};<span class='hljs-keyword'>const</span> flash2 = <span class='hljs-keyword'>new</span> Flash(options);<span class='hljs-comment'>// Present the flash message on the page</span><span class='hljs-keyword'>const</span> flashId2 = flash2.present();<span class='hljs-built_in'>console</span>.log(flashId2); <span class='hljs-comment'>// Output: The ID of the flash message</span></code></pre><h2 id='class-badge'>Class: Badge</h2><p>Extends <code>Component</code>. Represents a Badge component.</p><h3 id='constructor'>Constructor</h3><p>Create a new Badge.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> badge = <span class='hljs-keyword'>new</span> Badge(options);</code></pre><h4 id='parameters'>Parameters</h4><ul><li><code>options</code> (object, optional): Additional options for the badge (default: <code>null</code>).</li></ul><h3 id='properties'>Properties</h3><ul><li><code>options</code> (object): The default options for the badge.</li><li><code>html</code> (string): The HTML representation of the badge.</li></ul><h3 id='options'>Options</h3><p>The <code>options</code> object can have the following properties:</p><ul><li><code>id</code> (string): The ID of the badge. If not provided, a generated ID will be used.</li><li><code>class</code> (string): Additional CSS classes to be applied to the badge.</li><li><code>type</code> (string): The type of the badge. Can be <code>"primary"</code>, <code>"secondary"</code>, <code>"success"</code>, <code>"danger"</code>, <code>"warning"</code>, <code>"info"</code>, or <code>"light"</code> (default: <code>"primary"</code>).</li><li><code>content</code> (string): The content of the badge.</li></ul><h3 id='methods'>Methods</h3><h4 id='-present-'><code>present()</code></h4><p>Present the badge on the page.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> badge = <span class='hljs-keyword'>new</span> Badge(options);<span class='hljs-keyword'>const</span> badgeId = badge.present();console.<span class='hljs-built_in'>log</span>(badgeId); <span class='hljs-comment'>// Output: The ID of the badge</span></code></pre><h4 id='returns'>Returns</h4><ul><li>(string): The ID of the badge if it was successfully presented, otherwise an empty string.</li></ul><strong>Usage Example:</strong><pre><code class='lang-javascript'><span class='hljs-comment'>// Create a new badge with default options</span><span class='hljs-keyword'>const</span> badge1 = <span class='hljs-keyword'>new</span> Badge();<span class='hljs-comment'>// Present the badge on the page</span><span class='hljs-keyword'>const</span> badgeId1 = badge1.present();<span class='hljs-built_in'>console</span>.log(badgeId1); <span class='hljs-comment'>// Output: The ID of the badge</span><span class='hljs-comment'>// Create a new badge with custom options</span><span class='hljs-keyword'>const</span> options = { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'custom-badge'</span>, <span class='hljs-keyword'>type</span>: <span class='hljs-string'>'warning'</span>, content: <span class='hljs-string'>'New'</span>,};<span class='hljs-keyword'>const</span> badge2 = <span class='hljs-keyword'>new</span> Badge(options);<span class='hljs-comment'>// Present the badge on the page</span><span class='hljs-keyword'>const</span> badgeId2 = badge2.present();<span class='hljs-built_in'>console</span>.log(badgeId2); <span class='hljs-comment'>// Output: The ID of the badge</span></code></pre><h2 id='class-button'>Class: Button</h2><p>Extends <code>Component</code>. Represents a Button component.</p><h3 id='constructor'>Constructor</h3><p>Create a new Button.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> button = <span class='hljs-keyword'>new</span> Button(options);</code></pre><h4 id='parameters'>Parameters</h4><ul><li><code>options</code> (object, optional): Additional options for the button (default: <code>null</code>).</li></ul><h3 id='properties'>Properties</h3><ul><li><code>options</code> (object): The default options for the button.</li><li><code>html</code> (string): The HTML representation of the button.</li></ul><h3 id='options'>Options</h3><p>The <code>options</code> object can have the following properties:</p><ul><li><code>id</code> (string): The ID of the button. If not provided, a generated ID will be used.</li><li><code>class</code> (string): Additional CSS classes to be applied to the button.</li><li><code>type</code> (string): The type of the button. Can be <code>"button"</code>, <code>"submit"</code>, or <code>"reset"</code> (default: <code>"button"</code>).</li><li><code>content</code> (string): The content of the button.</li><li><code>onClick</code> (function): The click event handler for the button.</li></ul><h3 id='methods'>Methods</h3><h4 id='-present-'><code>present()</code></h4><p>Present the button on the page.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> button = <span class='hljs-keyword'>new</span> Button(options);<span class='hljs-keyword'>const</span> buttonId = button.present();console.<span class='hljs-built_in'>log</span>(buttonId); <span class='hljs-comment'>// Output: The ID of the button</span></code></pre><h4 id='returns'>Returns</h4><ul><li>(string): The ID of the button if it was successfully presented, otherwise an empty string.</li></ul><strong>Usage Example:</strong><pre><code class='lang-javascript'><span class='hljs-comment'>// Create a new button with default options</span><span class='hljs-keyword'>const</span> button1 = <span class='hljs-keyword'>new</span> Button();<span class='hljs-comment'>// Present the button on the page</span><span class='hljs-keyword'>const</span> buttonId1 = button1.present();<span class='hljs-built_in'>console</span>.log(buttonId1); <span class='hljs-comment'>// Output: The ID of the button</span><span class='hljs-comment'>// Create a new button with custom options</span><span class='hljs-keyword'>const</span> options = { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'custom-button'</span>, <span class='hljs-keyword'>type</span>: <span class='hljs-string'>'submit'</span>, content: <span class='hljs-string'>'Submit'</span>, onClick: <span class='hljs-function'><span class='hljs-keyword'>function</span>(<span class='hljs-params'>event</span>) </span>{ <span class='hljs-built_in'>console</span>.log(<span class='hljs-string'>'Button clicked!'</span>); },};<span class='hljs-keyword'>const</span> button2 = <span class='hljs-keyword'>new</span> Button(options);<span class='hljs-comment'>// Present the button on the page</span><span class='hljs-keyword'>const</span> buttonId2 = button2.present();<span class='hljs-built_in'>console</span>.log(buttonId2); <span class='hljs-comment'>// Output: The ID of the button</span></code></pre><h2 id='class-carousel'>Class: Carousel</h2><p>Extends <code>Component</code>. Represents a Carousel component.</p><h3 id='constructor'>Constructor</h3><p>Create a new Carousel.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> carousel = <span class='hljs-keyword'>new</span> Carousel(options);</code></pre><h4 id='parameters'>Parameters</h4><ul><li><code>options</code> (object, optional): Additional options for the carousel (default: <code>null</code>).</li></ul><h3 id='properties'>Properties</h3><ul><li><code>options</code> (object): The default options for the carousel.</li><li><code>html</code> (string): The HTML representation of the carousel.</li></ul><h3 id='options'>Options</h3><p>The <code>options</code> object can have the following properties:</p><ul><li><code>id</code> (string): The ID of the carousel. If not provided, a generated ID will be used.</li><li><code>class</code> (string): Additional CSS classes to be applied to the carousel.</li><li><code>items</code> (array): An array of items to be displayed in the carousel. Each item can be a string representing HTML content or an element.</li><li><code>interval</code> (number): The interval in milliseconds between item transitions in the carousel (default: <code>5000</code>).</li></ul><h3 id='methods'>Methods</h3><h4 id='-present-'><code>present()</code></h4><p>Present the carousel on the page.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> carousel = <span class='hljs-keyword'>new</span> Carousel(options);<span class='hljs-keyword'>const</span> carouselId = carousel.present();console.<span class='hljs-built_in'>log</span>(carouselId); <span class='hljs-comment'>// Output: The ID of the carousel</span></code></pre><h4 id='returns'>Returns</h4><ul><li>(string): The ID of the carousel if it was successfully presented, otherwise an empty string.</li></ul><strong>Usage Example:</strong><pre><code class='lang-javascript'><span class='hljs-comment'>// Create a new carousel with default options</span><span class='hljs-keyword'>const</span> carousel1 = <span class='hljs-keyword'>new</span> Carousel();<span class='hljs-comment'>// Present the carousel on the page</span><span class='hljs-keyword'>const</span> carouselId1 = carousel1.present();console.<span class='hljs-built_in'>log</span>(carouselId1); <span class='hljs-comment'>// Output: The ID of the carousel</span><span class='hljs-comment'>// Create a new carousel with custom options</span><span class='hljs-keyword'>const</span> options = { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'custom-carousel'</span>, items: [ <span class='hljs-string'>'<img src='image1.jpg' alt='Image 1'>'</span>, <span class='hljs-string'>'<img src='image2.jpg' alt='Image 2'>'</span>, <span class='hljs-string'>'<img src='image3.jpg' alt='Image 3'>'</span>, ], interval: <span class='hljs-number'>3000</span>,};<span class='hljs-keyword'>const</span> carousel2 = <span class='hljs-keyword'>new</span> Carousel(options);<span class='hljs-comment'>// Present the carousel on the page</span><span class='hljs-keyword'>const</span> carouselId2 = carousel2.present();console.<span class='hljs-built_in'>log</span>(carouselId2); <span class='hljs-comment'>// Output: The ID of the carousel</span></code></pre><h2 id='class-list'>Class: List</h2><p>Extends <code>Component</code>. Represents a List component.</p><h3 id='constructor'>Constructor</h3><p>Create a new List.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> <span class='hljs-keyword'>list</span> = <span class='hljs-keyword'>new</span> <span class='hljs-keyword'>List</span>(options);</code></pre><h4 id='parameters'>Parameters</h4><ul><li><code>options</code> (object, optional): Additional options for the list (default: <code>null</code>).</li></ul><h3 id='properties'>Properties</h3><ul><li><code>options</code> (object): The default options for the list.</li><li><code>html</code> (string): The HTML representation of the list.</li></ul><h3 id='options'>Options</h3><p>The <code>options</code> object can have the following properties:</p><ul><li><code>id</code> (string): The ID of the list. If not provided, a generated ID will be used.</li><li><code>class</code> (string): Additional CSS classes to be applied to the list.</li><li><code>items</code> (array): An array of items to be displayed in the list. Each item can be a string representing text or an element.</li><li><code>type</code> (string): The type of the list, either "ul" (unordered list) or "ol" (ordered list). Default is "ul".</li></ul><h3 id='methods'>Methods</h3><h4 id='-present-'><code>present()</code></h4><p>Present the list on the page.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> <span class='hljs-built_in'>list</span> = <span class='hljs-keyword'>new</span> List(options);<span class='hljs-keyword'>const</span> listId = <span class='hljs-built_in'>list</span>.present();console.<span class='hljs-built_in'>log</span>(listId); <span class='hljs-comment'>// Output: The ID of the list</span></code></pre><h4 id='returns'>Returns</h4><ul><li>(string): The ID of the list if it was successfully presented, otherwise an empty string.</li></ul><strong>Usage Example:</strong><pre><code class='lang-javascript'><span class='hljs-comment'>// Create a new unordered list with default options</span><span class='hljs-keyword'>const</span> list1 = new <span class='hljs-keyword'>List</span>();<span class='hljs-comment'>// Add items to the list</span>list1.options.items = [<span class='hljs-string'>'Item 1'</span>, <span class='hljs-string'>'Item 2'</span>, <span class='hljs-string'>'Item 3'</span>];<span class='hljs-comment'>// Present the list on the page</span><span class='hljs-keyword'>const</span> listId1 = list1.present();console.<span class='hljs-built_in'>log</span>(listId1); <span class='hljs-comment'>// Output: The ID of the list</span><span class='hljs-comment'>// Create a new ordered list with custom options</span><span class='hljs-keyword'>const</span> options = { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'custom-list'</span>, items: [ <span class='hljs-string'>'<strong>Item A</strong>'</span>, <span class='hljs-string'>'<em>Item B</em>'</span>, <span class='hljs-string'>'<a href='#'>Item C</a>'</span>, ], <span class='hljs-keyword'>type</span>: <span class='hljs-string'>'ol'</span>,};<span class='hljs-keyword'>const</span> list2 = new <span class='hljs-keyword'>List</span>(options);<span class='hljs-comment'>// Present the list on the page</span><span class='hljs-keyword'>const</span> listId2 = list2.present();console.<span class='hljs-built_in'>log</span>(listId2); <span class='hljs-comment'>// Output: The ID of the list</span></code></pre><h2 id='class-toolbar'>Class: Toolbar</h2><p>Extends <code>Component</code>. Represents a Toolbar component.</p><h3 id='constructor'>Constructor</h3><p>Create a new Toolbar.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> toolbar = <span class='hljs-keyword'>new</span> Toolbar(options);</code></pre><h4 id='parameters'>Parameters</h4><ul><li><code>options</code> (object, optional): Additional options for the toolbar (default: <code>null</code>).</li></ul><h3 id='properties'>Properties</h3><ul><li><code>options</code> (object): The default options for the toolbar.</li><li><code>html</code> (string): The HTML representation of the toolbar.</li></ul><h3 id='options'>Options</h3><p>The <code>options</code> object can have the following properties:</p><ul><li><code>id</code> (string): The ID of the toolbar. If not provided, a generated ID will be used.</li><li><code>class</code> (string): Additional CSS classes to be applied to the toolbar.</li><li><code>items</code> (array): An array of items to be displayed in the toolbar. Each item can be a string representing text or an element.</li></ul><h3 id='methods'>Methods</h3><h4 id='-present-'><code>present()</code></h4><p>Present the toolbar on the page.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> toolbar = <span class='hljs-keyword'>new</span> Toolbar(options);<span class='hljs-keyword'>const</span> toolbarId = toolbar.present();console.<span class='hljs-built_in'>log</span>(toolbarId); <span class='hljs-comment'>// Output: The ID of the toolbar</span></code></pre><h4 id='returns'>Returns</h4><ul><li>(string): The ID of the toolbar if it was successfully presented, otherwise an empty string.</li></ul><strong>Usage Example:</strong><pre><code class='lang-javascript'><span class='hljs-comment'>// Create a new toolbar with default options</span><span class='hljs-keyword'>const</span> toolbar1 = <span class='hljs-keyword'>new</span> Toolbar();<span class='hljs-comment'>// Add items to the toolbar</span>toolbar1.options.items = [<span class='hljs-string'>'Item 1'</span>, <span class='hljs-string'>'Item 2'</span>, <span class='hljs-string'>'Item 3'</span>];<span class='hljs-comment'>// Present the toolbar on the page</span><span class='hljs-keyword'>const</span> toolbarId1 = toolbar1.present();console.<span class='hljs-built_in'>log</span>(toolbarId1); <span class='hljs-comment'>// Output: The ID of the toolbar</span><span class='hljs-comment'>// Create a new toolbar with custom options</span><span class='hljs-keyword'>const</span> options = { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'custom-toolbar'</span>, items: [ <span class='hljs-string'>'<button>Button 1</button>'</span>, <span class='hljs-string'>'<button>Button 2</button>'</span>, <span class='hljs-string'>'<button>Button 3</button>'</span>, ],};<span class='hljs-keyword'>const</span> toolbar2 = <span class='hljs-keyword'>new</span> Toolbar(options);<span class='hljs-comment'>// Present the toolbar on the page</span><span class='hljs-keyword'>const</span> toolbarId2 = toolbar2.present();console.<span class='hljs-built_in'>log</span>(toolbarId2); <span class='hljs-comment'>// Output: The ID of the toolbar</span></code></pre><h2 id='class-modal'>Class: Modal</h2><p>Extends <code>Component</code>. Represents a Modal component.</p><h3 id='constructor'>Constructor</h3><p>Create a new Modal.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> modal = <span class='hljs-keyword'>new</span> Modal(options);</code></pre><h4 id='parameters'>Parameters</h4><ul><li><code>options</code> (object, optional): Additional options for the modal (default: <code>null</code>).</li></ul><h3 id='properties'>Properties</h3><ul><li><code>options</code> (object): The default options for the modal.</li><li><code>html</code> (string): The HTML representation of the modal.</li></ul><h3 id='options'>Options</h3><p>The <code>options</code> object can have the following properties:</p><ul><li><code>id</code> (string): The ID of the modal. If not provided, a generated ID will be used.</li><li><code>class</code> (string): Additional CSS classes to be applied to the modal.</li><li><code>title</code> (string): The title of the modal.</li><li><code>body</code> (string): The content of the modal body.</li><li><code>footer</code> (string): The content of the modal footer.</li><li><code>buttons</code> (array): An array of buttons to be displayed in the modal footer.</li></ul><p>Each button in the <code>buttons</code> array should be an object with the following properties:</p><ul><li><code>label</code> (string): The label of the button.</li><li><code>class</code> (string): Additional CSS classes to be applied to the button (optional).</li><li><code>attributes</code> (string): Additional attributes to be added to the button (optional).</li></ul><h3 id='methods'>Methods</h3><h4 id='-present-'><code>present()</code></h4><p>Present the modal on the page.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> modal = <span class='hljs-keyword'>new</span> Modal(options);<span class='hljs-keyword'>const</span> modalId = modal.present();console.<span class='hljs-built_in'>log</span>(modalId); <span class='hljs-comment'>// Output: The ID of the modal</span></code></pre><h4 id='returns'>Returns</h4><ul><li>(string): The ID of the modal if it was successfully presented, otherwise an empty string.</li></ul><strong>Usage Example:</strong><pre><code class='lang-javascript'><span class='hljs-comment'>// Create a new modal with default options</span><span class='hljs-keyword'>const</span> modal1 = new Modal();<span class='hljs-comment'>// Set the title and body of the modal</span>modal1.options.title = <span class='hljs-string'>'Example Modal'</span>;modal1.options.body = <span class='hljs-string'>'This is the content of the modal.'</span>;<span class='hljs-comment'>// Add buttons to the modal</span>modal1.options.buttons = [ { <span class='hljs-keyword'>label</span>: <span class='hljs-string'>'Cancel'</span>, <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'btn-secondary'</span>, attributes: 'data-<span class='hljs-keyword'>bs</span>-dismiss=<span class='hljs-string'>'modal'</span>' }, { <span class='hljs-keyword'>label</span>: <span class='hljs-string'>'Save'</span>, <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'btn-primary'</span> }];<span class='hljs-comment'>// Present the modal on the page</span><span class='hljs-keyword'>const</span> modalId1 = modal1.present();console.<span class='hljs-built_in'>log</span>(modalId1); <span class='hljs-comment'>// Output: The ID of the modal</span><span class='hljs-comment'>// Create a new modal with custom options</span><span class='hljs-keyword'>const</span> options = { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'custom-modal'</span>, title: <span class='hljs-string'>'Custom Modal'</span>, body: <span class='hljs-string'>'<p>This is a custom modal.</p>'</span>, footer: <span class='hljs-string'>'Footer content'</span>, buttons: [ { <span class='hljs-keyword'>label</span>: <span class='hljs-string'>'Button 1'</span>, <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'btn-secondary'</span> }, { <span class='hljs-keyword'>label</span>: <span class='hljs-string'>'Button 2'</span>, <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'btn-primary'</span>, attributes: 'data-<span class='hljs-keyword'>bs</span>-dismiss=<span class='hljs-string'>'modal'</span>' } ]};<span class='hljs-keyword'>const</span> modal2 = new Modal(options);<span class='hljs-comment'>// Present the modal on the page</span><span class='hljs-keyword'>const</span> modalId2 = modal2.present();console.<span class='hljs-built_in'>log</span>(modalId2); <span class='hljs-comment'>// Output: The ID of the modal</span></code></pre><h2 id='class-nav'>Class: Nav</h2><p>Extends <code>Component</code>. Represents a navigation bar component.</p><h3 id='constructor'>Constructor</h3><p>Create a new Nav.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> nav = <span class='hljs-keyword'>new</span> Nav(options);</code></pre><h4 id='parameters'>Parameters</h4><ul><li><code>options</code> (object, optional): Additional options for the navigation bar (default: <code>null</code>).</li></ul><h3 id='properties'>Properties</h3><ul><li><code>options</code> (object): The default options for the navigation bar.</li><li><code>html</code> (string): The HTML representation of the navigation bar.</li></ul><h3 id='options'>Options</h3><p>The <code>options</code> object can have the following properties:</p><ul><li><code>id</code> (string): The ID of the navigation bar. If not provided, a generated ID will be used.</li><li><code>class</code> (string): Additional CSS classes to be applied to the navigation bar.</li><li><code>items</code> (array): An array of navigation items to be displayed in the navigation bar.</li><li><code>type</code> (string): The type of navigation bar element to be used (default: <code>"nav"</code>).</li><li><code>placement</code> (string): The placement of the navigation bar (default: <code>"top"</code>).</li></ul><p>Each item in the <code>items</code> array should be an object with the following properties:</p><ul><li><code>id</code> (string, optional): The ID of the navigation item. If not provided, a generated ID will be used.</li><li><code>url</code> (string): The URL of the navigation item.</li><li><code>label</code> (string): The label of the navigation item.</li><li><code>active</code> (boolean): Specifies whether the navigation item should be marked as active (optional, default: <code>false</code>).</li></ul><h3 id='methods'>Methods</h3><h4 id='-present-'><code>present()</code></h4><p>Present the navigation bar on the page.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> nav = <span class='hljs-keyword'>new</span> Nav(options);<span class='hljs-keyword'>const</span> navId = nav.present();console.<span class='hljs-built_in'>log</span>(navId); <span class='hljs-comment'>// Output: The ID of the navigation bar</span></code></pre><h4 id='returns'>Returns</h4><ul><li>(string): The ID of the navigation bar if it was successfully presented, otherwise an empty string.</li></ul><strong>Usage Example:</strong><pre><code class='lang-javascript'><span class='hljs-comment'>// Create a new navigation bar with default options</span>const nav1 = <span class='hljs-keyword'>new</span> Nav();<span class='hljs-comment'>// Set the items of the navigation bar</span>nav1.options.items = [ { <span class='hljs-string'>url:</span> <span class='hljs-string'>'#'</span>, <span class='hljs-string'>label:</span> <span class='hljs-string'>'Home'</span>, <span class='hljs-string'>active:</span> <span class='hljs-literal'>true</span> }, { <span class='hljs-string'>url:</span> <span class='hljs-string'>'#about'</span>, <span class='hljs-string'>label:</span> <span class='hljs-string'>'About'</span> }, { <span class='hljs-string'>url:</span> <span class='hljs-string'>'#services'</span>, <span class='hljs-string'>label:</span> <span class='hljs-string'>'Services'</span> }];<span class='hljs-comment'>// Present the navigation bar on the page</span>const navId1 = nav1.present();console.log(navId1); <span class='hljs-comment'>// Output: The ID of the navigation bar</span><span class='hljs-comment'>// Create a new navigation bar with custom options</span>const options = {<span class='hljs-symbol'> class:</span> <span class='hljs-string'>'custom-nav'</span>,<span class='hljs-symbol'> items:</span> [ { <span class='hljs-string'>url:</span> <span class='hljs-string'>'#'</span>, <span class='hljs-string'>label:</span> <span class='hljs-string'>'Home'</span>, <span class='hljs-string'>active:</span> <span class='hljs-literal'>true</span> }, { <span class='hljs-string'>url:</span> <span class='hljs-string'>'#about'</span>, <span class='hljs-string'>label:</span> <span class='hljs-string'>'About'</span> }, { <span class='hljs-string'>url:</span> <span class='hljs-string'>'#services'</span>, <span class='hljs-string'>label:</span> <span class='hljs-string'>'Services'</span> } ],<span class='hljs-symbol'> placement:</span> <span class='hljs-string'>'bottom'</span>};const nav2 = <span class='hljs-keyword'>new</span> Nav(options);<span class='hljs-comment'>// Present the navigation bar on the page</span>const navId2 = nav2.present();console.log(navId2); <span class='hljs-comment'>// Output: The ID of the navigation bar</span></code></pre><h2 id='class-progress'>Class: Progress</h2><p>Extends <code>Component</code>. Represents a progress bar component.</p><h3 id='constructor'>Constructor</h3><p>Create a new Progress.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> progress = <span class='hljs-keyword'>new</span> Progress(options);</code></pre><h4 id='parameters'>Parameters</h4><ul><li><code>options</code> (object, optional): Additional options for the progress bar (default: <code>null</code>).</li></ul><h3 id='properties'>Properties</h3><ul><li><code>options</code> (object): The default options for the progress bar.</li><li><code>html</code> (string): The HTML representation of the progress bar.</li></ul><h3 id='options'>Options</h3><p>The <code>options</code> object can have the following properties:</p><ul><li><code>id</code> (string): The ID of the progress bar. If not provided, a generated ID will be used.</li><li><code>class</code> (string): Additional CSS classes to be applied to the progress bar.</li><li><code>type</code> (string): The type of the progress bar (default: <code>"primary"</code>).</li><li><code>value</code> (number): The current value of the progress bar (default: <code>0</code>).</li><li><code>max</code> (number): The maximum value of the progress bar (default: <code>100</code>).</li></ul><h3 id='methods'>Methods</h3><h4 id='-present-'><code>present()</code></h4><p>Present the progress bar on the page.</p><pre><code class='lang-javascript'><span class='hljs-keyword'>const</span> progress = <span class='hljs-keyword'>new</span> Progress(options);<span class='hljs-keyword'>const</span> progressId = progress.present();console.<span class='hljs-built_in'>log</span>(progressId); <span class='hljs-comment'>// Output: The ID of the progress bar</span></code></pre><h4 id='returns'>Returns</h4><ul><li>(string): The ID of the progress bar if it was successfully presented, otherwise an empty string.</li></ul><strong>Usage Example:</strong><pre><code class='lang-javascript'><span class='hljs-comment'>// Create a new progress bar with default options</span><span class='hljs-keyword'>const</span> progress1 = <span class='hljs-keyword'>new</span> Progress();<span class='hljs-comment'>// Set the value of the progress bar</span>progress1.options.value = <span class='hljs-number'>50</span>;<span class='hljs-comment'>// Present the progress bar on the page</span><span class='hljs-keyword'>const</span> progressId1 = progress1.present();<span class='hljs-built_in'>console</span>.log(progressId1); <span class='hljs-comment'>// Output: The ID of the progress bar</span><span class='hljs-comment'>// Create a new progress bar with custom options</span><span class='hljs-keyword'>const</span> options = { <span class='hljs-keyword'>class</span>: <span class='hljs-string'>'custom-progress'</span>, <span class='hljs-keyword'>type</span>: <span class='hljs-string'>'success'</span>, value: <span class='hljs-number'>75</span>, max: <span class='hljs-number'>200</span>};<span class='hljs-keyword'>const</span> progress2 = <span class='hljs-keyword'>new</span> Progress(options);<span class='hljs-comment'>// Present the progress bar on the page</span><span class='hljs-keyword'>const</span> progressId2 = progress2.present();<span class='hljs-built_in'>console</span>.log(progressId2); <span class='hljs-comment'>// Output: The ID of the progress bar</span></code></pre>"
}
]
}