feature/v4.0.0

.eslintrc.js

@@ -5,10 +5,11 @@ module.exports = {
   },
   extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
   parserOptions: {
-    parser: "babel-eslint"
+    parser: "@babel/eslint-parser"
   },
   rules: {
     "prettier/prettier": "off",
+    "vue/multi-word-component-names": "off",
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
   }

.npmrc

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

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## [4.0.0] 2023-07-07
+
+- Update dependencies & devDependencies
+- Refactor code from `options api` to `composition api`
+- Add Support for `v-model` to the `SoftInput`
+
 ## [3.0.0] 2022-06-24
 
 - Renamed components name prefix from Vsud to Soft.

README.md

@@ -1,6 +1,6 @@
 # [Vue Soft UI Dashboard](http://demos.creative-tim.com/vue-soft-ui-dashboard/?ref=readme-vsud) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/vue-soft-ui-dashboard&text=Check%20Vue%20Soft%20UI%20Dashboard%20made%20by%20@CreativeTim%20#webdesign%20#dashboard%20#softdesign%20#vue%20https://www.creative-tim.com/product/vue-soft-ui-dashboard)
 
-![version](https://img.shields.io/badge/version-3.0.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-soft-ui-dashboard.svg)](https://github.com/creativetimofficial/vue-soft-ui-dashboard/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vue-soft-ui-dashboard.svg)](https://github.com/creativetimofficial/vue-soft-ui-dashboard/issues?q=is%3Aissue+is%3Aclosed)
+![version](https://img.shields.io/badge/version-4.0.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-soft-ui-dashboard.svg)](https://github.com/creativetimofficial/vue-soft-ui-dashboard/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vue-soft-ui-dashboard.svg)](https://github.com/creativetimofficial/vue-soft-ui-dashboard/issues?q=is%3Aissue+is%3Aclosed)
 
 ![Image](https://s3.amazonaws.com/creativetim_bucket/products/591/original/vue-soft-ui-dashboard.jpg)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-soft-ui-dashboard",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "private": true,
   "author": "Creative Tim",
   "license": "SEE LICENSE IN <https://www.creative-tim.com/license>",
@@ -19,33 +19,33 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/vue-fontawesome": "^3.0.0-5",
-    "@popperjs/core": "2.10.2",
-    "bootstrap": "5.1.3",
-    "chart.js": "3.6.0",
-    "core-js": "3.6.5",
-    "jkanban": "^1.3.1",
-    "vue": "3.2.0",
-    "vue-flatpickr-component": "9.0.5",
-    "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.2"
+    "@fortawesome/fontawesome-svg-core": "6.4.0",
+    "@fortawesome/free-brands-svg-icons": "6.4.0",
+    "@fortawesome/free-solid-svg-icons": "6.4.0",
+    "@fortawesome/vue-fontawesome": "3.0.3",
+    "@popperjs/core": "2.11.8",
+    "bootstrap": "5.3.0",
+    "chart.js": "4.3.0",
+    "core-js": "3.31.1",
+    "jkanban": "1.3.1",
+    "vue": "3.3.4",
+    "vue-flatpickr-component": "11.0.3",
+    "vue-router": "4.2.4",
+    "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "3.2.0",
-    "@vue/eslint-config-prettier": "6.0.0",
-    "babel-eslint": "10.1.0",
-    "eslint": "6.7.2",
-    "eslint-plugin-prettier": "3.3.1",
-    "eslint-plugin-vue": "7.0.0",
-    "prettier": "2.2.1",
-    "sass": "1.43.3",
-    "sass-loader": "10.1.1"
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-plugin-eslint": "5.0.8",
+    "@vue/cli-plugin-router": "5.0.8",
+    "@vue/cli-service": "5.0.8",
+    "@vue/compiler-sfc": "3.3.4",
+    "@vue/eslint-config-prettier": "7.1.0",
+    "@babel/eslint-parser": "7.22.7",
+    "eslint": "8.44.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-vue": "9.15.1",
+    "prettier": "3.0.0",
+    "sass": "1.63.6",
+    "sass-loader": "13.3.2"
   }
 }

public/index.html

@@ -1,18 +1,18 @@
 <!--
 =========================================================
-* Vue Soft UI Dashboard - v3.0.0
+* Vue Soft UI Dashboard - v4.0.0
 =========================================================
 
 * Product Page: https://creative-tim.com/product/vue-soft-ui-dashboard
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
 
 Coded by www.creative-tim.com
 
 =========================================================
 
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
   <head>
     <meta charset="utf-8" />
@@ -36,10 +36,14 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
     />
     <script async defer src="https://buttons.github.io/buttons.js"></script>
-    
+
     <!-- Nepcha Analytics (nepcha.com) -->
     <!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
-    <script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
+    <script
+      defer
+      data-site="YOUR_DOMAIN_HERE"
+      src="https://api.nepcha.com/js/nepcha-analytics.js"
+    ></script>
   </head>
   <body class="bg-gray-100">
     <noscript>

src/App.vue

@@ -1,64 +1,61 @@
+<script setup>
+import { onBeforeMount, computed } from "vue";
+import { useStore } from "vuex";
+
+import Sidenav from "./examples/Sidenav";
+import Configurator from "@/examples/Configurator.vue";
+import Navbar from "@/examples/Navbars/Navbar.vue";
+import AppFooter from "@/examples/Footer.vue";
+
+const store = useStore();
+const isNavFixed = computed(() => store.state.isNavFixed);
+const isAbsolute = computed(() => store.state.isAbsolute);
+
+const navClasses = computed(() => {
+  return {
+    "position-sticky blur shadow-blur mt-4 left-auto top-1 z-index-sticky":
+      isNavFixed.value,
+    "position-absolute px-4 mx-0 w-100 z-index-2": isAbsolute.value,
+    "px-0 mx-4 mt-4": !isAbsolute.value,
+  };
+});
+
+// mutations
+const toggleConfigurator = () => store.commit("toggleConfigurator");
+const navbarMinimize = () => store.commit("navbarMinimize");
+
+onBeforeMount(() => {
+  store.state.isTransparent = "bg-transparent";
+});
+</script>
 <template>
   <sidenav
-    :custom_class="this.$store.state.mcolor"
+    :custom_class="store.state.mcolor"
     :class="[
-      this.$store.state.isTransparent,
-      this.$store.state.isRTL ? 'fixed-end' : 'fixed-start',
+      store.state.isTransparent,
+      store.state.isRTL ? 'fixed-end' : 'fixed-start',
     ]"
-    v-if="this.$store.state.showSidenav"
+    v-if="store.state.showSidenav"
   />
   <main
     class="main-content position-relative max-height-vh-100 h-100 border-radius-lg"
-    :style="this.$store.state.isRTL ? 'overflow-x: hidden' : ''"
+    :style="store.state.isRTL ? 'overflow-x: hidden' : ''"
   >
     <!-- nav -->
     <navbar
       :class="[navClasses]"
-      :textWhite="this.$store.state.isAbsolute ? 'text-white opacity-8' : ''"
+      :textWhite="store.state.isAbsolute ? 'text-white opacity-8' : ''"
       :minNav="navbarMinimize"
-      v-if="this.$store.state.showNavbar"
+      v-if="store.state.showNavbar"
     />
     <router-view />
-    <app-footer v-show="this.$store.state.showFooter" />
+    <app-footer v-show="store.state.showFooter" />
     <configurator
       :toggle="toggleConfigurator"
       :class="[
-        this.$store.state.showConfig ? 'show' : '',
-        this.$store.state.hideConfigButton ? 'd-none' : '',
+        store.state.showConfig ? 'show' : '',
+        store.state.hideConfigButton ? 'd-none' : '',
       ]"
     />
   </main>
 </template>
-<script>
-import Sidenav from "./examples/Sidenav";
-import Configurator from "@/examples/Configurator.vue";
-import Navbar from "@/examples/Navbars/Navbar.vue";
-import AppFooter from "@/examples/Footer.vue";
-import { mapMutations } from "vuex";
-export default {
-  name: "App",
-  components: {
-    Sidenav,
-    Configurator,
-    Navbar,
-    AppFooter,
-  },
-  methods: {
-    ...mapMutations(["toggleConfigurator", "navbarMinimize"]),
-  },
-  computed: {
-    navClasses() {
-      return {
-        "position-sticky blur shadow-blur mt-4 left-auto top-1 z-index-sticky": this
-          .$store.state.isNavFixed,
-        "position-absolute px-4 mx-0 w-100 z-index-2": this.$store.state
-          .isAbsolute,
-        "px-0 mx-4 mt-4": !this.$store.state.isAbsolute,
-      };
-    },
-  },
-  beforeMount() {
-    this.$store.state.isTransparent = "bg-transparent";
-  },
-};
-</script>

src/components/SoftAlert.vue

@@ -1,3 +1,29 @@
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: "success",
+  },
+  icon: {
+    type: String,
+    default: "",
+  },
+  dismissible: {
+    type: Boolean,
+    default: false,
+  },
+});
+const getClasses = (color, dismissible) => {
+  let colorValue, dismissibleValue;
+
+  colorValue = color ? `alert-${color}` : null;
+
+  dismissibleValue = dismissible ? "alert-dismissible fade show" : null;
+
+  return `${colorValue} ${dismissibleValue}`;
+};
+const getIcon = (icon) => (icon ? icon : null);
+</script>
 <template>
   <div
     class="alert text-white font-weight-bold"
@@ -22,35 +48,3 @@
     </button>
   </div>
 </template>
-
-<script>
-export default {
-  name: "SoftAlert",
-  props: {
-    color: {
-      type: String,
-      default: "success",
-    },
-    icon: {
-      type: String,
-      default: "",
-    },
-    dismissible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    getClasses: (color, dismissible) => {
-      let colorValue, dismissibleValue;
-
-      colorValue = color ? `alert-${color}` : null;
-
-      dismissibleValue = dismissible ? "alert-dismissible fade show" : null;
-
-      return `${colorValue} ${dismissibleValue}`;
-    },
-    getIcon: (icon) => (icon ? icon : null),
-  },
-};
-</script>