diff --git a/.gitignore b/.gitignore
index a447f88..d9237f0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
/node_modules/
/out/
+/testing/
test.js
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d3d6d9..0a24d1e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Released]
+## [1.2.0] - 2023-06-08
+
+## Fixed
+
+- Fixed the module problem
+
## [1.1.0] - 2023-05-21
### Added
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..4d0be9f
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "baseUrl": "./",
+ "paths": {
+ "$badges": ["src/badge.js"],
+ "$buttons": ["src/button.js"],
+ "$link": ["src/link.js"],
+ "$progressbar": ["src/progressBar.js"],
+ "$spinner": ["src/spinner.js"],
+ "$toasts": ["src/toast.js"]
+ }
+ },
+ "include": ["src/**/*.js"],
+ "exclude": ["node_modules", "**/node_modules", "dist"]
+ }
\ No newline at end of file
diff --git a/jsdoc.conf.json b/jsdoc.conf.json
index 44fd80b..323e23b 100644
--- a/jsdoc.conf.json
+++ b/jsdoc.conf.json
@@ -3,11 +3,17 @@
"allowUnknownTags": true
},
"source": {
- "include": "./neptune.js",
- "exclude": [
+ "include": [
"./neptune.min.js",
- "./test.js"
+ "./neptune.js",
+ "./src/badge.js",
+ "./src/button.js",
+ "./src/link.js",
+ "./src/progressBar.js",
+ "./src/spinner.js",
+ "./src/toast.js"
],
+ "exclude": "./test.js",
"includePattern": ".+\\.js(doc|x)?$",
"excludePattern": "(^|\\/|\\\\)_"
},
diff --git a/neptune.js b/neptune.js
index cb49b56..a5e7476 100644
--- a/neptune.js
+++ b/neptune.js
@@ -1,369 +1,15 @@
-/**
- * @class Badge
- * @description Create a new Neptune Badge
- *
- * @param {any} config Add your configuration
- *
- * parent -> class or id of your target element, when null its document.body
- *
- * text -> content of your badge
- *
- * size -> s, m, l
- *
- * style -> primary, accent, information, success, warning, error
- *
- * @example
- * const myBadge = new Badge({
- * parent: "#container",
- * text: "My Badge",
- * size: "m",
- * style: "primary"
- * });
- *
- */
-export class Badge {
- constructor(config) {
- // Create Badge
- const newBadge = document.createElement('span');
- newBadge.classList.add('badge');
- newBadge.innerText = config.text;
-
- // Setup Size
- if (config.size != null) {
- newBadge.classList.add('badge-' + config.size);
- }
-
- // Setup Style
- if (config.style != null) {
- // Setup Style
- newBadge.classList.add('badge-' + config.style);
- }
-
- // Append badge to DOM
- if (config.parent != null) {
- document.querySelector(config.parent).appendChild(newBadge)
- } else {
- document.body.appendChild(newBadge);
- }
- }
+import Badge from "./src/badge.js"
+import Button from "./src/button.js"
+import Link from "./src/link.js"
+import ProgressBar from "./src/progressBar.js"
+import Spinner from "./src/spinner.js"
+import Toast from "./src/toast.js"
+
+export {
+ Badge,
+ Button,
+ Link,
+ Spinner,
+ Toast,
+ ProgressBar
}
-
-/**
- * @class Button
- * @description Create a new Neptune Button
- *
- * @param {any} config Add your configuration
- *
- * parent -> class or id of your target element, when null its document.body
- *
- * text -> content of your Button
- *
- * icon -> add the i tag of your icon
- *
- * iconPosition -> left or right
- *
- * size -> s, m, l
- *
- * style -> primary, secondary, cta, information, success, warning, error
- *
- * @example
- * const myButton = new Button({
- * parent: "#container",
- * text: "My Button",
- * size: "m",
- * style: "primary"
- * });
- */
-export class Button {
- constructor(config) {
- // Create Badge
- const newButton = document.createElement('button');
- newButton.classList.add('button');
- newButton.innerHTML = '' + config.text + '';
-
- // Add Icon
- if (config.icon != null) {
- const newIcon = document.createElement('span');
- newIcon.innerHTML = config.icon;
-
- if (config.iconPosition != null) {
- if (config.iconPosition == 'left') {
- newIcon.classList.add('button-icon-left');
- newButton.insertBefore(newIcon, newButton.children[0]);
-
- }
-
- if (config.iconPosition == 'right') {
- newIcon.classList.add('button-icon-right');
- newButton.appendChild(newIcon);
-
- }
- } else {
- console.error("Error! Please set icon position!");
- }
- }
-
- // Setup Size
- if (config.size != null) {
- newButton.classList.add('button-' + config.size);
- }
-
- // Setup Style
- if (config.style != null) {
- // Setup Style
- newButton.classList.add('button-' + config.style);
- }
-
- // Append badge to DOM
- if (config.parent != null) {
- document.querySelector(config.parent).appendChild(newButton)
- } else {
- document.body.appendChild(newButton);
- }
- }
-}
-
-/**
- * @class Link
- * @description Create a new Neptune Link
- *
- * @param {any} config Add your configuration
- *
- * parent -> class or id of your target element, when null its document.body
- *
- * text -> content of your Link
- *
- * size -> s, m, l
- *
- * style -> primary, accent, information, success, warning, error
- *
- * title -> add the title
- *
- * href -> add the href
- *
- * @example
- * const myLink = new Link({
- * parent: "#container",
- * text: "My Link",
- * size: "m",
- * style: "primary",
- * title: "My Link",
- * href: "https://de.wikipedia.org/"
- * });
- */
-export class Link {
- constructor(config) {
- // Create Link
- const newLink = document.createElement('a');
- newLink.classList.add('link');
- newLink.innerText = config.text;
-
- // Setup Size
- if (config.size != null) {
- newLink.classList.add('link-' + config.size);
- }
-
- // Setup Style
- if (config.style != null) {
- newLink.classList.add('link-' + config.style);
- }
-
- // Setup title
- if (config.title != null) {
- newLink.title = config.title;
- }
-
- // Setup href
- if (config.href != null) {
- newLink.href = config.href;
- }
-
- // Append to parent element
- if (config.parent != null) {
- document.querySelector(config.parent).appendChild(newLink);
- } else {
- document.body.appendChild(newLink);
- }
- }
-}
-
-/**
- * @class Spinner
- * @description Create a new Neptune Spinner
- *
- * @param {any} config Add your configuration
- *
- * parent -> class or id of your target element, when null its document.body
- *
- * style -> primary, accent, information, success, warning, error
- *
- * animation -> linnear, eased
- *
- * @example
- * const mySpinner = new Spinner({
- * parent: "#container",
- * style: "primary",
- * animation: "eased"
- * });
- */
-export class Spinner {
- constructor(config) {
- // Create Link
- const newSpinner = document.createElement('div');
- const spinnerInner = document.createElement('div')
- const spinnerHole = document.createElement('div')
- newSpinner.classList.add('spinner');
-
- spinnerInner.classList.add('spinner-inner');
- spinnerHole.classList.add('spinner-hole');
-
- newSpinner.appendChild(spinnerHole);
- newSpinner.appendChild(spinnerInner);
-
- // Setup Style
- if (config.style != null) {
- newSpinner.classList.add('spinner-' + config.style);
- }
-
- // Setup Animation
- if (config.animation != null) {
- newSpinner.classList.add('spin-' + config.animation)
- }
-
- // Append to parent element
- if (config.parent != null) {
- document.querySelector(config.parent).appendChild(newSpinner);
- } else {
- document.body.appendChild(newSpinner);
- }
- }
-}
-
-/**
- * @class Toast
- * @description Create a new Neptune Toast
- *
- * @param {any} config Add your configuration
- *
- * parent -> class or id of your target element, when null its document.body
- *
- * icon -> add your icon
- *
- * text -> add your message text
- *
- * style -> primary, accent, information, success, warning, error
- *
- * position -> left-top, left-bottom, right-top, right-bottom
- *
- * @example
- * const myToast = new Toast({
- * icon: "YOUR ICON",
- * text: "Test Toast",
- * style: "primary",
- * position: "top-right"
- * });
- */
-export class Toast {
- constructor(config) {
- // Create Toast
- const newToast = document.createElement('div');
- newToast.classList.add('toast');
-
- // Add Icon
- if (config.icon != null) {
- // Create Icon
- const newIcon = document.createElement('span');
- newIcon.classList.add('toast-icon');
- newIcon.innerHTML = config.icon;
-
- // Append icon
- newToast.appendChild(newIcon);
- }
-
- // Add Message
- if (config.text != null) {
- // Create Message
- const newMessage = document.createElement('p');
- newMessage.classList.add('toast-text', 'text-l');
- newMessage.innerText = config.text;
-
- // Append Message
- newToast.appendChild(newMessage);
- } else {
- console.error('Error! Please ad a Message to your Toast!');
- }
-
- // Setup Style
- if (config.style != null) {
- newToast.classList.add('toast-' + config.style);
- }
-
- // Setup Position
- if (config.position != null) {
- newToast.classList.add('toast-' + config.position);
- }
-
- // Append to parent element
- if (config.parent != null) {
- document.querySelector(config.parent).appendChild(newToast);
- } else {
- document.body.appendChild(newToast);
- }
- }
-}
-
-/**
- * @class ProgressBar
- * @description Create a new Neptune Progress Bar
- *
- * @param {any} config Add your configuration
- *
- * parent -> class or id of your target element, when null its document.body
- *
- * size -> xs, s, m, l, xl
- *
- * style -> primary, accent, information, success, warning, error
- *
- * progress -> set the progress of the par width a number
- *
- * @example
- * const myProgressBAr = new ProgressBar({
- * size: "l",
- * style: "primary",
- * progress: 30
- * });
- */
-export class ProgressBar {
- constructor(config) {
- // Create Progress Bar
- const newProgressBar = document.createElement('div');
- newProgressBar.classList.add('progress');
-
- // Create Bar
- const newBar = document.createElement('div');
- newBar.classList.add('progress-bar');
- newProgressBar.appendChild(newBar);
-
- // Setup Size
- if (config.size != null) {
- newProgressBar.classList.add('progress-' + config.size);
- }
-
- // Setup Style
- if (config.style != null) {
- newProgressBar.classList.add('progress-' + config.style);
- }
-
- // Handle Progress
- if (config.progress != null) {
- newBar.style.width = config.progress + '%';
- }
-
- // Append to parent element
- if (config.parent != null) {
- document.querySelector(config.parent).appendChild(newProgressBar);
- } else {
- document.body.appendChild(newProgressBar);
- }
- }
-}
\ No newline at end of file
diff --git a/neptune.min.js b/neptune.min.js
index 050990f..88f97dc 100644
--- a/neptune.min.js
+++ b/neptune.min.js
@@ -1 +1 @@
-export class Badge{constructor(t){const e=document.createElement("span");e.classList.add("badge"),e.innerText=t.text,null!=t.size&&e.classList.add("badge-"+t.size),null!=t.style&&e.classList.add("badge-"+t.style),null!=t.parent?document.querySelector(t.parent).appendChild(e):document.body.appendChild(e)}}export class Button{constructor(t){const e=document.createElement("button");if(e.classList.add("button"),e.innerHTML=''+t.text+"",null!=t.icon){const n=document.createElement("span");n.innerHTML=t.icon,null!=t.iconPosition&&("left"==t.iconPosition&&(n.classList.add("button-icon-left"),e.insertBefore(n,e.children[0])),"right"==t.iconPosition&&(n.classList.add("button-icon-right"),e.appendChild(n)))}null!=t.size&&e.classList.add("button-"+t.size),null!=t.style&&e.classList.add("button-"+t.style),null!=t.parent?document.querySelector(t.parent).appendChild(e):document.body.appendChild(e)}}export class Link{constructor(t){const e=document.createElement("a");e.classList.add("link"),e.innerText=t.text,null!=t.size&&e.classList.add("link-"+t.size),null!=t.style&&e.classList.add("link-"+t.style),null!=t.title&&(e.title=t.title),null!=t.href&&(e.href=t.href),null!=t.parent?document.querySelector(t.parent).appendChild(e):document.body.appendChild(e)}}export class Spinner{constructor(t){const e=document.createElement("div"),n=document.createElement("div"),s=document.createElement("div");e.classList.add("spinner"),n.classList.add("spinner-inner"),s.classList.add("spinner-hole"),e.appendChild(s),e.appendChild(n),null!=t.style&&e.classList.add("spinner-"+t.style),null!=t.animation&&e.classList.add("spin-"+t.animation),null!=t.parent?document.querySelector(t.parent).appendChild(e):document.body.appendChild(e)}}export class Toast{constructor(t){const e=document.createElement("div");if(e.classList.add("toast"),null!=t.icon){const n=document.createElement("span");n.classList.add("toast-icon"),n.innerHTML=t.icon,e.appendChild(n)}if(null!=t.text){const n=document.createElement("p");n.classList.add("toast-text","text-l"),n.innerText=t.text,e.appendChild(n)}null!=t.style&&e.classList.add("toast-"+t.style),null!=t.position&&e.classList.add("toast-"+t.position),null!=t.parent?document.querySelector(t.parent).appendChild(e):document.body.appendChild(e)}}export class ProgressBar{constructor(t){const e=document.createElement("div");e.classList.add("progress");const n=document.createElement("div");n.classList.add("progress-bar"),e.appendChild(n),null!=t.size&&e.classList.add("progress-"+t.size),null!=t.style&&e.classList.add("progress-"+t.style),null!=t.progress&&(n.style.width=t.progress+"%"),null!=t.parent?document.querySelector(t.parent).appendChild(e):document.body.appendChild(e)}}
\ No newline at end of file
+import Badge from"./src/badge.js";import Button from"./src/button.js";import Link from"./src/link.js";import ProgressBar from"./src/progressBar.js";import Spinner from"./src/spinner.js";import Toast from"./src/toast.js";export{Badge,Button,Link,Spinner,Toast,ProgressBar};
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a293f35..42866a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
"packages": {
"": {
"name": "neptunecss-js",
- "version": "1.1.0",
+ "version": "1.1.1",
"license": "MIT",
"dependencies": {
"neptunecss": "^1.0.0"
diff --git a/package.json b/package.json
index 9af57ca..f7a0bcd 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
{
"name": "neptunecss-js",
- "version": "1.1.1",
+ "version": "1.2.0",
"description": "The official vanilla javascript api for Neptune CSS",
- "main": "index.js",
+ "main": "neptune.js",
"scripts": {
"test": "",
"jsdoc": "C:/Users/colin/AppData/Roaming/npm/jsdoc",
diff --git a/src/badge.js b/src/badge.js
new file mode 100644
index 0000000..bb58d93
--- /dev/null
+++ b/src/badge.js
@@ -0,0 +1,51 @@
+/**
+ * @class Badge
+ * @description Create a new Neptune Badge
+ *
+ * @param {any} config Add your configuration
+ *
+ * parent -> class or id of your target element, when null its document.body
+ *
+ * text -> content of your badge
+ *
+ * size -> s, m, l
+ *
+ * style -> primary, accent, information, success, warning, error
+ *
+ * @example
+ * const myBadge = new Badge({
+ * parent: "#container",
+ * text: "My Badge",
+ * size: "m",
+ * style: "primary"
+ * });
+ *
+ */
+class Badge {
+ constructor(config) {
+ // Create Badge
+ const newBadge = document.createElement('span');
+ newBadge.classList.add('badge');
+ newBadge.innerText = config.text;
+
+ // Setup Size
+ if (config.size != null) {
+ newBadge.classList.add('badge-' + config.size);
+ }
+
+ // Setup Style
+ if (config.style != null) {
+ // Setup Style
+ newBadge.classList.add('badge-' + config.style);
+ }
+
+ // Append badge to DOM
+ if (config.parent != null) {
+ document.querySelector(config.parent).appendChild(newBadge)
+ } else {
+ document.body.appendChild(newBadge);
+ }
+ }
+}
+
+export default Badge;
\ No newline at end of file
diff --git a/src/button.js b/src/button.js
new file mode 100644
index 0000000..02aa03a
--- /dev/null
+++ b/src/button.js
@@ -0,0 +1,76 @@
+/**
+ * @class Button
+ * @description Create a new Neptune Button
+ *
+ * @param {any} config Add your configuration
+ *
+ * parent -> class or id of your target element, when null its document.body
+ *
+ * text -> content of your Button
+ *
+ * icon -> add the i tag of your icon
+ *
+ * iconPosition -> left or right
+ *
+ * size -> s, m, l
+ *
+ * style -> primary, secondary, cta, information, success, warning, error
+ *
+ * @example
+ * const myButton = new Button({
+ * parent: "#container",
+ * text: "My Button",
+ * size: "m",
+ * style: "primary"
+ * });
+ */
+class Button {
+ constructor(config) {
+ // Create Badge
+ const newButton = document.createElement('button');
+ newButton.classList.add('button');
+ newButton.innerHTML = '' + config.text + '';
+
+ // Add Icon
+ if (config.icon != null) {
+ const newIcon = document.createElement('span');
+ newIcon.innerHTML = config.icon;
+
+ if (config.iconPosition != null) {
+ if (config.iconPosition == 'left') {
+ newIcon.classList.add('button-icon-left');
+ newButton.insertBefore(newIcon, newButton.children[0]);
+
+ }
+
+ if (config.iconPosition == 'right') {
+ newIcon.classList.add('button-icon-right');
+ newButton.appendChild(newIcon);
+
+ }
+ } else {
+ console.error("Error! Please set icon position!");
+ }
+ }
+
+ // Setup Size
+ if (config.size != null) {
+ newButton.classList.add('button-' + config.size);
+ }
+
+ // Setup Style
+ if (config.style != null) {
+ // Setup Style
+ newButton.classList.add('button-' + config.style);
+ }
+
+ // Append badge to DOM
+ if (config.parent != null) {
+ document.querySelector(config.parent).appendChild(newButton)
+ } else {
+ document.body.appendChild(newButton);
+ }
+ }
+}
+
+export default Button;
\ No newline at end of file
diff --git a/src/link.js b/src/link.js
new file mode 100644
index 0000000..6d781e7
--- /dev/null
+++ b/src/link.js
@@ -0,0 +1,65 @@
+/**
+ * @class Link
+ * @description Create a new Neptune Link
+ *
+ * @param {any} config Add your configuration
+ *
+ * parent -> class or id of your target element, when null its document.body
+ *
+ * text -> content of your Link
+ *
+ * size -> s, m, l
+ *
+ * style -> primary, accent, information, success, warning, error
+ *
+ * title -> add the title
+ *
+ * href -> add the href
+ *
+ * @example
+ * const myLink = new Link({
+ * parent: "#container",
+ * text: "My Link",
+ * size: "m",
+ * style: "primary",
+ * title: "My Link",
+ * href: "https://de.wikipedia.org/"
+ * });
+ */
+class Link {
+ constructor(config) {
+ // Create Link
+ const newLink = document.createElement('a');
+ newLink.classList.add('link');
+ newLink.innerText = config.text;
+
+ // Setup Size
+ if (config.size != null) {
+ newLink.classList.add('link-' + config.size);
+ }
+
+ // Setup Style
+ if (config.style != null) {
+ newLink.classList.add('link-' + config.style);
+ }
+
+ // Setup title
+ if (config.title != null) {
+ newLink.title = config.title;
+ }
+
+ // Setup href
+ if (config.href != null) {
+ newLink.href = config.href;
+ }
+
+ // Append to parent element
+ if (config.parent != null) {
+ document.querySelector(config.parent).appendChild(newLink);
+ } else {
+ document.body.appendChild(newLink);
+ }
+ }
+}
+
+export default Link;
\ No newline at end of file
diff --git a/src/progressBar.js b/src/progressBar.js
new file mode 100644
index 0000000..014dc66
--- /dev/null
+++ b/src/progressBar.js
@@ -0,0 +1,57 @@
+/**
+ * @class ProgressBar
+ * @description Create a new Neptune Progress Bar
+ *
+ * @param {any} config Add your configuration
+ *
+ * parent -> class or id of your target element, when null its document.body
+ *
+ * size -> xs, s, m, l, xl
+ *
+ * style -> primary, accent, information, success, warning, error
+ *
+ * progress -> set the progress of the par width a number
+ *
+ * @example
+ * const myProgressBAr = new ProgressBar({
+ * size: "l",
+ * style: "primary",
+ * progress: 30
+ * });
+ */
+class ProgressBar {
+ constructor(config) {
+ // Create Progress Bar
+ const newProgressBar = document.createElement('div');
+ newProgressBar.classList.add('progress');
+
+ // Create Bar
+ const newBar = document.createElement('div');
+ newBar.classList.add('progress-bar');
+ newProgressBar.appendChild(newBar);
+
+ // Setup Size
+ if (config.size != null) {
+ newProgressBar.classList.add('progress-' + config.size);
+ }
+
+ // Setup Style
+ if (config.style != null) {
+ newProgressBar.classList.add('progress-' + config.style);
+ }
+
+ // Handle Progress
+ if (config.progress != null) {
+ newBar.style.width = config.progress + '%';
+ }
+
+ // Append to parent element
+ if (config.parent != null) {
+ document.querySelector(config.parent).appendChild(newProgressBar);
+ } else {
+ document.body.appendChild(newProgressBar);
+ }
+ }
+}
+
+export default ProgressBar;
\ No newline at end of file
diff --git a/src/spinner.js b/src/spinner.js
new file mode 100644
index 0000000..c33a0da
--- /dev/null
+++ b/src/spinner.js
@@ -0,0 +1,53 @@
+/**
+ * @class Spinner
+ * @description Create a new Neptune Spinner
+ *
+ * @param {any} config Add your configuration
+ *
+ * parent -> class or id of your target element, when null its document.body
+ *
+ * style -> primary, accent, information, success, warning, error
+ *
+ * animation -> linnear, eased
+ *
+ * @example
+ * const mySpinner = new Spinner({
+ * parent: "#container",
+ * style: "primary",
+ * animation: "eased"
+ * });
+ */
+class Spinner {
+ constructor(config) {
+ // Create Link
+ const newSpinner = document.createElement('div');
+ const spinnerInner = document.createElement('div')
+ const spinnerHole = document.createElement('div')
+ newSpinner.classList.add('spinner');
+
+ spinnerInner.classList.add('spinner-inner');
+ spinnerHole.classList.add('spinner-hole');
+
+ newSpinner.appendChild(spinnerHole);
+ newSpinner.appendChild(spinnerInner);
+
+ // Setup Style
+ if (config.style != null) {
+ newSpinner.classList.add('spinner-' + config.style);
+ }
+
+ // Setup Animation
+ if (config.animation != null) {
+ newSpinner.classList.add('spin-' + config.animation)
+ }
+
+ // Append to parent element
+ if (config.parent != null) {
+ document.querySelector(config.parent).appendChild(newSpinner);
+ } else {
+ document.body.appendChild(newSpinner);
+ }
+ }
+}
+
+export default Spinner;
\ No newline at end of file
diff --git a/src/toast.js b/src/toast.js
new file mode 100644
index 0000000..de591e6
--- /dev/null
+++ b/src/toast.js
@@ -0,0 +1,74 @@
+/**
+ * @class Toast
+ * @description Create a new Neptune Toast
+ *
+ * @param {any} config Add your configuration
+ *
+ * parent -> class or id of your target element, when null its document.body
+ *
+ * icon -> add your icon
+ *
+ * text -> add your message text
+ *
+ * style -> primary, accent, information, success, warning, error
+ *
+ * position -> left-top, left-bottom, right-top, right-bottom
+ *
+ * @example
+ * const myToast = new Toast({
+ * icon: "YOUR ICON",
+ * text: "Test Toast",
+ * style: "primary",
+ * position: "top-right"
+ * });
+ */
+class Toast {
+ constructor(config) {
+ // Create Toast
+ const newToast = document.createElement('div');
+ newToast.classList.add('toast');
+
+ // Add Icon
+ if (config.icon != null) {
+ // Create Icon
+ const newIcon = document.createElement('span');
+ newIcon.classList.add('toast-icon');
+ newIcon.innerHTML = config.icon;
+
+ // Append icon
+ newToast.appendChild(newIcon);
+ }
+
+ // Add Message
+ if (config.text != null) {
+ // Create Message
+ const newMessage = document.createElement('p');
+ newMessage.classList.add('toast-text', 'text-l');
+ newMessage.innerText = config.text;
+
+ // Append Message
+ newToast.appendChild(newMessage);
+ } else {
+ console.error('Error! Please ad a Message to your Toast!');
+ }
+
+ // Setup Style
+ if (config.style != null) {
+ newToast.classList.add('toast-' + config.style);
+ }
+
+ // Setup Position
+ if (config.position != null) {
+ newToast.classList.add('toast-' + config.position);
+ }
+
+ // Append to parent element
+ if (config.parent != null) {
+ document.querySelector(config.parent).appendChild(newToast);
+ } else {
+ document.body.appendChild(newToast);
+ }
+ }
+}
+
+export default Toast;
\ No newline at end of file