🔨 Upgrade tailwindCSS to 2.1+ with JIT engine

.gitignore

@@ -4,6 +4,7 @@ node_modules
 
 
 # local env files
+.env
 .env.local
 .env.*.local
 
@@ -15,7 +16,6 @@ pnpm-debug.log*
 
 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj

.vscode/README.md

@@ -0,0 +1,3 @@
+# Custom VS Code snippets
+
+See VS Code docs: <https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-scope>

.vscode/_scaffold-blocks.code-snippets

@@ -0,0 +1,74 @@
+{
+  "Vue 2 composition API component": {
+    "scope": "vue",
+    "prefix": "scf",
+    "body": [
+        "<template>",
+        "  <div class=\"${TM_FILENAME_BASE/(^[A-Z][a-z]*|[a-z])([A-Z])?/${1:/downcase}${2:+-}${2:/downcase}/g}\">",
+        "    <!--  -->",
+        "  </div>",
+        "</template>",
+        "<script>",
+        "// ${RELATIVE_FILEPATH}",
+        "import { defineComponent } from '@vue/composition-api'",
+        "",
+        "export default defineComponent({",
+        "  name: '${TM_FILENAME_BASE:/pascalcase}',",
+        "  props: {},",
+        "  setup() {",
+        "    //${0}",
+        "  },",
+        "})",
+        "</script>",
+        "",
+        "<style lang=\"scss\" scoped>",
+        ".${TM_FILENAME_BASE/(^[A-Z][a-z]*|[a-z])([A-Z])?/${1:/downcase}${2:+-}${2:/downcase}/g} {",
+        "  //",
+        "}",
+        "</style>",
+        "",
+        "<style lang=\"scss\">",
+        ".${TM_FILENAME_BASE/(^[A-Z][a-z]*|[a-z])([A-Z])?/${1:/downcase}${2:+-}${2:/downcase}/g} {",
+        "  //",
+        "}",
+        "</style>",
+        ""
+    ],
+    "description": "Scaffold a vue component with vue 2 composition API"
+  },
+  "Vue 2 composition API script": {
+    "scope": "vue",
+    "prefix": "script vue",
+    "body": [
+        "<script>",
+        "import { defineComponent } from '@vue/composition-api'",
+        "",
+        "export default defineComponent({",
+        "  name: '${TM_FILENAME_BASE:/pascalcase}',",
+        "  props: {},",
+        "  setup() {",
+        "    //",
+        "  },",
+        "})",
+        "</script>",
+        ""
+    ],
+    "description": "Vue 2 composition API script tag"
+  },
+  "Vue style tags": {
+    "scope": "vue",
+    "prefix": "style vue",
+    "body": [
+        "",
+        "<style lang=\"scss\" scoped>",
+        "//",
+        "</style>",
+        "",
+        "<style lang=\"scss\">",
+        "//",
+        "</style>",
+        ""
+    ],
+    "description": "Vue style tags, including scoped and non-scoped"
+  }
+}

.vscode/_service-functions.code-snippets

@@ -0,0 +1,42 @@
+{
+  "clientApi": {
+    "scope": "javascript",
+    "prefix": "clientApi",
+    "body": ["$$clientApi",],
+  },
+  "$clientApi": {
+    "scope": "javascript",
+    "prefix": "$clientApi",
+    "body": ["$$clientApi",],
+  },
+  "this.clientApi": {
+    "scope": "javascript",
+    "prefix": "this.clientApi",
+    "body": ["this.$$clientApi",],
+  },
+  "import $clientApi": {
+    "scope": "javascript",
+    "prefix": "import clientApi",
+    "body": ["import { clientApi } from '@services/client'",],
+  },
+  "authApi": {
+    "scope": "javascript",
+    "prefix": "authApi",
+    "body": ["$$authApi",],
+  },
+  "$authApi": {
+    "scope": "javascript",
+    "prefix": "$authApi",
+    "body": ["$$authApi",],
+  },
+  "this.authApi": {
+    "scope": "javascript",
+    "prefix": "this.authApi",
+    "body": ["this.$$authApi",],
+  },
+  "import $authApi": {
+    "scope": "javascript",
+    "prefix": "import authApi",
+    "body": ["import { authApi } from '@services/auth'",],
+  },
+}

.vscode/_util-components.code-snippets

@@ -0,0 +1,21 @@
+{
+  "Auth": {
+    "scope": "vue-html",
+    // Avoid duplicate prefix with v-auth directive
+    "prefix": "<auth",
+    "body": [
+      "<auth :allow=\"['${0}']\" >",
+      "\t${3}",
+      "</auth>",
+    ],
+    "description": "Authentication wrapper, which will display, disable component base on role's permissions"
+  },
+  "Fontawesome": {
+    "scope": "vue-html",
+    "prefix": "fa",
+    "body": [
+      "<fa :icon=\"['fas', '${1}']\" />"
+    ],
+    "description": "Fontawesome component, by default using the 'fas' (fontawesome solid) library, change to use other library"
+  }
+}

.vscode/_util-dev-functions.code-snippets

@@ -0,0 +1,43 @@
+{
+  "dev:log": {
+    "scope": "javascript",
+    "prefix": "dev:log",
+    "body": ["$$dev.log('[${1}]', ${1})",],
+    "description": "Equivalent to console.log(), but only available in dev mode"
+  },
+  "this.$dev:log": {
+    "scope": "javascript",
+    "prefix": "this.dev:log",
+    "body": ["this.$$dev.log('[${1}]', ${1})",],
+    "description": "Equivalent to console.log(), but only available in dev mode"
+  },
+  "dev:warn": {
+    "scope": "javascript",
+    "prefix": "dev:warn",
+    "body": ["$$dev.warn('[${1}]', ${1})",],
+    "description": "Equivalent to console.warn(), but only available in dev mode"
+  },
+  "this.$dev:warn": {
+    "scope": "javascript",
+    "prefix": "this.dev:warn",
+    "body": ["this.$$dev.warn('[${1}]', ${1})",],
+    "description": "Equivalent to console.warn(), but only available in dev mode"
+  },
+  "dev:error": {
+    "scope": "javascript",
+    "prefix": "dev:error",
+    "body": ["$$dev.error('[${1}]', ${1})",],
+    "description": "Equivalent to console.error(), but only available in dev mode"
+  },
+  "this.$dev:error": {
+    "scope": "javascript",
+    "prefix": "this.dev:error",
+    "body": ["this.$$dev.error('[${1}]', ${1})",],
+    "description": "Equivalent to console.error(), but only available in dev mode"
+  },
+  "import $dev": {
+    "scope": "javascript",
+    "prefix": "import dev",
+    "body": ["import dev from '@utils/functions/dev'",],
+  },
+}

.vscode/_util-directives.code-snippets

@@ -0,0 +1,30 @@
+{
+  "v-auth directive": {
+    "scope": "vue-html",
+    "prefix": "auth",
+    "body": [
+      "v-auth:allow=\"['${0}']\"",
+    ],
+    "description": "Authentication directive, which will display, disable component base on role's permissions"
+  },
+  "v-validate directive": {
+    "scope": "vue-html",
+    "prefix": "v-validate",
+    "body": ["v-validate"],
+  },
+  "v-validate.email directive": {
+    "scope": "vue-html",
+    "prefix": "v-validate.email",
+    "body": ["v-validate.email=\"${0}\""],
+  },
+  "v-validate.required directive": {
+    "scope": "vue-html",
+    "prefix": "v-validate.required",
+    "body": ["v-validate.required"],
+  },
+  "v-validate.string directive": {
+    "scope": "vue-html",
+    "prefix": "v-validate.string",
+    "body": ["v-validate.string"],
+  },
+}

.vscode/_util-filters.code-snippets

@@ -0,0 +1,44 @@
+{
+  "formatCurrency": {
+    "scope": "vue-html",
+    "prefix": "formatCurrency",
+    "body": ["formatCurrency",],
+    "description": "Format currency filter"
+  },
+  "formatDate": {
+    "scope": "vue-html",
+    "prefix": "formatDate",
+    "body": ["formatDate",],
+    "description": "Format date filter"
+  },
+  "formatDateTime": {
+    "scope": "vue-html",
+    "prefix": "formatDateTime",
+    "body": ["formatDateTime",],
+    "description": "Format datetime filter"
+  },
+  "formatTime": {
+    "scope": "vue-html",
+    "prefix": "formatTime",
+    "body": ["formatTime",],
+    "description": "Format time filter"
+  },
+  "lower": {
+    "scope": "vue-html",
+    "prefix": "lower",
+    "body": ["lower",],
+    "description": "Lowercase filter"
+  },
+  "upper": {
+    "scope": "vue-html",
+    "prefix": "upper",
+    "body": ["upper",],
+    "description": "Uppercase filter"
+  },
+  "capital": {
+    "scope": "vue-html",
+    "prefix": "capital",
+    "body": ["capital",],
+    "description": "Capitalize filter"
+  },
+}

.vscode/_util-imports.code-snippets

@@ -0,0 +1,92 @@
+{
+  "import-components": {
+    "scope": "javascript",
+    "prefix": "import components",
+    "body": ["import { ${1} } from '@components'",],
+  },
+  "import-common": {
+    "scope": "javascript",
+    "prefix": "import common",
+    "body": ["import { ${1} } from '@common'",],
+  },
+  "import-uncommon": {
+    "scope": "javascript",
+    "prefix": "import uncommon",
+    "body": ["import { ${1} } from '@uncommon'",],
+  },
+  "import-locales": {
+    "scope": "javascript",
+    "prefix": "import theme",
+    "body": ["import { ${1} } from '@locales'",],
+  },
+  "import-pages": {
+    "scope": "javascript",
+    "prefix": "import pages",
+    "body": ["import { ${1} } from '@pages'",],
+  },
+  "import-router": {
+    "scope": "javascript",
+    "prefix": "import router",
+    "body": ["import { ${1} } from '@router'",],
+  },
+  "import-store": {
+    "scope": "javascript",
+    "prefix": "import store",
+    "body": ["import { ${1} } from '@store'",],
+  },
+  "import-use": {
+    "scope": "javascript",
+    "prefix": "import use",
+    "body": ["import { ${1} } from '@use'",],
+  },
+  "import-examples": {
+    "scope": "javascript",
+    "prefix": "import examples",
+    "body": ["import { ${1} } from '@examples'",],
+  },
+  "import-core": {
+    "scope": "javascript",
+    "prefix": "import core",
+    "body": ["import { ${1} } from '@core'",],
+  },
+  "import-theme": {
+    "scope": "javascript",
+    "prefix": "import theme",
+    "body": ["import { ${1} } from '@theme'",],
+  },
+  "import-constants": {
+    "scope": "javascript",
+    "prefix": "import constants",
+    "body": ["import { ${1} } from '@constants'",],
+  },
+  "import-layouts": {
+    "scope": "javascript",
+    "prefix": "import layouts",
+    "body": ["import { ${1} } from '@layouts'",],
+  },
+  "import-middleware": {
+    "scope": "javascript",
+    "prefix": "import middleware",
+    "body": ["import { ${1} } from '@middleware'",],
+  },
+  "import-mixins": {
+    "scope": "javascript",
+    "prefix": "import mixins",
+    "body": ["import { ${1} } from '@mixins'",],
+  },
+  "import-plugins": {
+    "scope": "javascript",
+    "prefix": "import plugins",
+    "body": ["import { ${1} } from '@plugins'",],
+  },
+  "import-services": {
+    "scope": "javascript",
+    "prefix": "import services",
+    "body": ["import { ${1} } from '@services'",],
+  },
+  "import-utils": {
+    "scope": "javascript",
+    "prefix": "import utils",
+    "body": ["import { ${1} } from '@utils'",],
+  },
+}