feature/v1.2.0

.eslintrc.js

@@ -1,16 +1,15 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
-  'extends': [
-    'plugin:vue/essential'
-  ],
+  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    "vue/multi-word-component-names": "off",
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
   },
   parserOptions: {
-    parser: 'babel-eslint'
-  }
-}
+    parser: "@babel/eslint-parser",
+  },
+};

.github/workflows/main.yml

@@ -4,9 +4,9 @@ jobs:
   autoclose:
     runs-on: ubuntu-latest
     steps:
-    - name: Issue auto-closer
-      uses: roots/[email protected]
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow the bellow rules:\n\n<pre>\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vue-argon-design-system\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n</pre>\n\n"
-        issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)
+      - name: Issue auto-closer
+        uses: roots/[email protected]
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow the bellow rules:\n\n<pre>\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vue-argon-design-system\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n</pre>\n\n"
+          issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 node_modules
+package-lock.json
 /dist
 
 # local env files

.npmrc

@@ -0,0 +1,3 @@
+legacy-peer-deps=true
+auto-install-peers=true
+strict-peer-dependencies=false

.postcssrc.js

@@ -1,5 +1,5 @@
 module.exports = {
   plugins: {
-    autoprefixer: {}
-  }
-}
+    autoprefixer: {},
+  },
+};

CHANGELOG.md

@@ -1,11 +1,22 @@
 # Changelog
 
+##[1.2.0] 2023-06-20
+
+- Update dependencies and devDependencies
+- Fix installation issue when running `npm i`
+- Fix issue when running `npm run serve`
+- Migrate from `node-sass` to `sass`
+- Fix warnings
+
 ##[1.1.0] 2019-02-12
+
 - Package updates
 - SSR fixes for checkboxes and radio
 - IE fixes
 - Best practices & accessibility improvements + pwa support
 
 ## [1.0.0] 2018-08-14
+
 Initial stable release
+
 ### Original Release

babel.config.js

@@ -1,10 +1,3 @@
 module.exports = {
-  presets: [
-    [
-      "@vue/app",
-      {
-        "polyfills": ["es7.object.entries", "es6.promise"]
-      }
-    ]
-  ]
+  presets: [["@vue/app"]],
 };

package.json

@@ -1,30 +1,41 @@
 {
   "name": "vue-argon-design-system",
-  "version": "0.1.0",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "prettify": "prettier --write ."
   },
   "dependencies": {
-    "bootstrap-vue": "^2.0.4",
-    "flatpickr": "^4.5.1",
-    "nouislider": "^11.1.0",
-    "register-service-worker": "^1.5.2",
-    "vue": "^2.6.6",
-    "vue-flatpickr-component": "^8.1.1",
-    "vue-lazyload": "^1.2.6",
-    "vue-router": "^3.0.2",
-    "vue2-transitions": "^0.2.3"
+    "bootstrap-vue": "2.23.1",
+    "flatpickr": "4.6.13",
+    "nouislider": "15.7.1",
+    "register-service-worker": "1.7.2",
+    "vue": "2.7.14",
+    "vue-flatpickr-component": "8.1.8",
+    "vue-lazyload": "1.3.4",
+    "vue-router": "3.6.5",
+    "vue2-transitions": "0.3.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.4.0",
-    "@vue/cli-plugin-eslint": "^3.4.0",
-    "@vue/cli-plugin-pwa": "^3.4.0",
-    "@vue/cli-service": "^3.4.0",
-    "node-sass": "^4.11.0",
-    "sass-loader": "^7.1.0",
-    "vue-template-compiler": "^2.6.6"
+    "@babel/eslint-parser": "7.22.5",
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-plugin-eslint": "5.0.8",
+    "@vue/cli-plugin-pwa": "5.0.8",
+    "@vue/cli-service": "5.0.8",
+    "@vue/eslint-config-prettier": "7.1.0",
+    "babel-plugin-component": "1.1.1",
+    "eslint": "8.43.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-vue": "9.15.0",
+    "prettier": "2.8.8",
+    "sass": "1.63.4",
+    "sass-loader": "13.3.2",
+    "vue-template-compiler": "2.7.14"
+  },
+  "overrides": {
+    "consolidate": "1.0.1"
   }
 }

public/index.html

@@ -1,11 +1,11 @@
 <!--
 
 =========================================================
-* Vue Argon Design System - v1.1.0
+* Vue Argon Design System - v1.2.0
 =========================================================
 
 * Product Page: https://www.creative-tim.com/product/argon-design-system
-* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
 * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system/blob/master/LICENSE.md)
 
 * Coded by www.creative-tim.com
@@ -18,19 +18,31 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=1, shrink-to-fit=no" name="viewport">
-    <meta name="description" content="Start your development with a Design System for Bootstrap 4 and Vue.js.">
-    <meta name="author" content="Creative Tim, Cristi Jora">
-    <link rel="icon" href="<%= BASE_URL %>favicon.png">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=1, shrink-to-fit=no"
+      name="viewport"
+    />
+    <meta
+      name="description"
+      content="Start your development with a Design System for Bootstrap 4 and Vue.js."
+    />
+    <meta name="author" content="Creative Tim, Cristi Jora" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.png" />
     <title>Vue Argon Design System</title>
     <!-- Fonts -->
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but vue-argon-design-system doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but vue-argon-design-system doesn't work properly without
+        JavaScript enabled. Please enable it to continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

src/App.vue

@@ -1,20 +1,20 @@
 <template>
-    <div id="app">
-        <router-view name="header"></router-view>
-        <main>
-            <fade-transition origin="center" mode="out-in" :duration="250">
-                <router-view/>
-            </fade-transition>
-        </main>
-        <router-view name="footer"></router-view>
-    </div>
+  <div id="app">
+    <router-view name="header"></router-view>
+    <main>
+      <fade-transition origin="center" mode="out-in" :duration="250">
+        <router-view />
+      </fade-transition>
+    </main>
+    <router-view name="footer"></router-view>
+  </div>
 </template>
 <script>
 import { FadeTransition } from "vue2-transitions";
 
 export default {
   components: {
-    FadeTransition
-  }
+    FadeTransition,
+  },
 };
 </script>

src/assets/scss/argon.scss

@@ -1,11 +1,11 @@
 /*!
 
 =========================================================
-* Vue Argon Design System - v1.1.0
+* Vue Argon Design System - v1.2.0
 =========================================================
 
 * Product Page: https://www.creative-tim.com/product/argon-design-system
-* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
 * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system/blob/master/LICENSE.md)
 
 * Coded by www.creative-tim.com

src/assets/scss/bootstrap/_alert.scss

@@ -21,7 +21,6 @@
   font-weight: $alert-link-font-weight;
 }
 
-
 // Dismissible alerts
 //
 // Expand the right padding and account for the close button's positioning.
@@ -39,13 +38,16 @@
   }
 }
 
-
 // Alternate styles
 //
 // Generate contextual modifier classes for colorizing the alert.
 
 @each $color, $value in $theme-colors {
   .alert-#{$color} {
-    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+    @include alert-variant(
+      theme-color-level($color, $alert-bg-level),
+      theme-color-level($color, $alert-border-level),
+      theme-color-level($color, $alert-color-level)
+    );
   }
 }

src/assets/scss/bootstrap/_button-group.scss

@@ -64,17 +64,20 @@
 //
 // Remix the default button sizing classes into new ones for easier manipulation.
 
-.btn-group-sm > .btn { @extend .btn-sm; }
-.btn-group-lg > .btn { @extend .btn-lg; }
-
+.btn-group-sm > .btn {
+  @extend .btn-sm;
+}
+.btn-group-lg > .btn {
+  @extend .btn-lg;
+}
 
 //
 // Split button dropdowns
 //
 
 .dropdown-toggle-split {
-  padding-right: $btn-padding-x * .75;
-  padding-left: $btn-padding-x * .75;
+  padding-right: $btn-padding-x * 0.75;
+  padding-left: $btn-padding-x * 0.75;
 
   &::after,
   .dropup &::after,
@@ -88,16 +91,15 @@
 }
 
 .btn-sm + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-sm * .75;
-  padding-left: $btn-padding-x-sm * .75;
+  padding-right: $btn-padding-x-sm * 0.75;
+  padding-left: $btn-padding-x-sm * 0.75;
 }
 
 .btn-lg + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-lg * .75;
-  padding-left: $btn-padding-x-lg * .75;
+  padding-right: $btn-padding-x-lg * 0.75;
+  padding-left: $btn-padding-x-lg * 0.75;
 }
 
-
 // The clickable button for toggling the menu
 // Set the same inset shadow as the :active state
 .btn-group.show .dropdown-toggle {
@@ -109,7 +111,6 @@
   }
 }
 
-
 //
 // Vertical button groups
 //
@@ -144,7 +145,6 @@
   }
 }
 
-
 // Checkbox and radio options
 //
 // In order to support the browser's form validation feedback, powered by the