✨ feat(component): Extra Components

dist/assets/js/extensions/rater-js.js

@@ -0,0 +1,38 @@
+window.raterJs({
+    element: document.querySelector("#basic"), 
+    starSize: 32,
+    rateCallback:function rateCallback(rating, done) {
+        this.setRating(rating); 
+        done(); 
+    }
+});
+
+window.raterJs({
+    element:document.querySelector("#step"),
+    rateCallback:function rateCallback(rating, done) {
+        this.setRating(rating); 
+        done(); 
+    },
+    starSize:32,
+    step:0.5
+})
+window.raterJs({
+    element:document.querySelector("#unli1"),
+    rateCallback:function rateCallback(rating, done) {
+        this.setRating(rating); 
+        done(); 
+    },
+    starSize:32,
+    max:10, 
+    step:0.5
+})
+window.raterJs({
+    element:document.querySelector("#unli2"),
+    rateCallback:function rateCallback(rating, done) {
+        this.setRating(rating); 
+        done(); 
+    },
+    starSize:32,
+    max:16, 
+    step:0.5
+})

dist/assets/js/extensions/sweetalert2.js

@@ -0,0 +1,154 @@
+document.getElementById('basic').addEventListener('click', (e) => {
+    Swal.fire('Any fool can use a computer')
+})
+document.getElementById('footer').addEventListener('click', (e) => {
+    Swal.fire({
+        icon: 'error',
+        title: 'Oops...',
+        text: 'Something went wrong!',
+        footer: '<a href>Why do I have this issue?</a>'
+      })
+})
+document.getElementById('title').addEventListener('click', (e) => {
+    Swal.fire(
+        'The Internet?',
+        'That thing is still around?',
+        'question'
+      )
+})
+document.getElementById('success').addEventListener('click', (e) => {
+    Swal.fire({
+        icon: "success",
+        title: "Success"
+    })
+})
+document.getElementById('error').addEventListener('click', (e) => {
+    Swal.fire({
+        icon: "error",
+        title: "Error"
+    })
+})
+document.getElementById('warning').addEventListener('click', (e) => {
+    Swal.fire({
+        icon: "warning",
+        title: "Warning"
+    })
+})
+document.getElementById('info').addEventListener('click', (e) => {
+    Swal.fire({
+        icon: "info",
+        title: "Info"
+    })
+})
+document.getElementById('question').addEventListener('click', (e) => {
+    Swal.fire({
+        icon: "question",
+        title: "Question"
+    })
+})
+document.getElementById('text').addEventListener('click', (e) => {
+
+     Swal.fire({
+        title: 'Enter your IP address',
+        input: 'text',
+        inputLabel: 'Your IP address',
+        showCancelButton: true,
+    })
+
+})
+document.getElementById('email').addEventListener('click', async (e) => {
+
+    const { value: email } = await Swal.fire({
+        title: 'Input email address',
+        input: 'email',
+        inputLabel: 'Your email address',
+        inputPlaceholder: 'Enter your email address'
+      })
+
+      if (email) {
+        Swal.fire(`Entered email: ${email}`)
+      }
+
+})
+document.getElementById('url').addEventListener('click', async (e) => {
+
+    const { value: url } = await Swal.fire({
+        input: 'url',
+        inputLabel: 'URL address',
+        inputPlaceholder: 'Enter the URL'
+      })
+
+      if (url) {
+        Swal.fire(`Entered URL: ${url}`)
+      }
+})
+document.getElementById('password').addEventListener('click', async (e) => {
+
+    const { value: password } = await Swal.fire({
+        title: 'Enter your password',
+        input: 'password',
+        inputLabel: 'Password',
+        inputPlaceholder: 'Enter your password',
+        inputAttributes: {
+        maxlength: 10,
+        autocapitalize: 'off',
+        autocorrect: 'off'
+        }
+    })
+
+    if (password) {
+        Swal.fire(`Entered password: ${password}`)
+    }
+
+})
+document.getElementById('textarea').addEventListener('click', async (e) => {
+    const { value: text } = await Swal.fire({
+        input: 'textarea',
+        inputLabel: 'Message',
+        inputPlaceholder: 'Type your message here...',
+        inputAttributes: {
+          'aria-label': 'Type your message here'
+        },
+        showCancelButton: true
+      })
+
+      if (text) {
+        Swal.fire(text)
+      }
+})
+document.getElementById('select').addEventListener('click', async (e) => {
+    const { value: fruit } = await Swal.fire({
+        title: 'Select field validation',
+        input: 'select',
+        inputOptions: {
+          'Fruits': {
+            apples: 'Apples',
+            bananas: 'Bananas',
+            grapes: 'Grapes',
+            oranges: 'Oranges'
+          },
+          'Vegetables': {
+            potato: 'Potato',
+            broccoli: 'Broccoli',
+            carrot: 'Carrot'
+          },
+          'icecream': 'Ice cream'
+        },
+        inputPlaceholder: 'Select a fruit',
+        showCancelButton: true,
+        inputValidator: (value) => {
+          return new Promise((resolve) => {
+            if (value === 'oranges') {
+              resolve()
+            } else {
+              resolve('You need to select oranges :)')
+            }
+          })
+        }
+      })
+
+      if (fruit) {
+        Swal.fire(`You selected: ${fruit}`)
+      }
+
+})

dist/assets/js/extensions/toastify.js

@@ -0,0 +1,81 @@
+document.getElementById('basic').addEventListener('click', () => {
+    Toastify({
+        text: "This is a toast",
+        duration: 3000
+    }).showToast();
+})
+document.getElementById('background').addEventListener('click', () => {
+    Toastify({
+        text: "This is a toast",
+        duration: 3000,
+        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+    }).showToast();
+})
+document.getElementById('close').addEventListener('click', () => {
+    Toastify({
+        text: "Click close button",
+        duration: 3000,
+        close:true,
+        backgroundColor: "#4fbe87",
+    }).showToast();
+})
+document.getElementById('top-left').addEventListener('click', () => {
+    Toastify({
+        text: "This is toast in top left",
+        duration: 3000,
+        close:true,
+        gravity:"top",
+        position: "left",
+        backgroundColor: "#4fbe87",
+    }).showToast();
+})
+document.getElementById('top-center').addEventListener('click', () => {
+    Toastify({
+        text: "This is toast in top center",
+        duration: 3000,
+        close:true,
+        gravity:"top",
+        position: "center",
+        backgroundColor: "#4fbe87",
+    }).showToast();
+})
+document.getElementById('top-right').addEventListener('click', () => {
+    Toastify({
+        text: "This is toast in top right",
+        duration: 3000,
+        close:true,
+        gravity:"top",
+        position: "right",
+        backgroundColor: "#4fbe87",
+    }).showToast();
+})
+document.getElementById('bottom-right').addEventListener('click', () => {
+    Toastify({
+        text: "This is toast in bottom right",
+        duration: 3000,
+        close:true,
+        gravity:"bottom",
+        position: "right",
+        backgroundColor: "#4fbe87",
+    }).showToast();
+})
+document.getElementById('bottom-center').addEventListener('click', () => {
+    Toastify({
+        text: "This is toast in bottom center",
+        duration: 3000,
+        close:true,
+        gravity:"bottom",
+        position: "center",
+        backgroundColor: "#4fbe87",
+    }).showToast();
+})
+document.getElementById('bottom-left').addEventListener('click', () => {
+    Toastify({
+        text: "This is toast in bottom left",
+        duration: 3000,
+        close:true,
+        gravity:"bottom",
+        position: "left",
+        backgroundColor: "#4fbe87",
+    }).showToast();
+})