Updated

.gitignore

@@ -7,7 +7,11 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-node_modules
+# dependencies
+/node_modules
+package-lock.json
+yarn.lock
+
 .DS_Store
 dist
 dist-ssr

package.json

@@ -9,9 +9,9 @@
     },
     "dependencies": {
         "chart.js": "3.3.2",
-        "primeflex": "^3.2.1",
+        "primeflex": "^3.3.1",
         "primeicons": "^6.0.1",
-        "primevue": "3.28.0",
+        "primevue": "3.30.2",
         "vue": "^3.2.41",
         "vue-router": "^4.1.5"
     },

src/assets/demo/code.scss

@@ -0,0 +1,15 @@
+pre.app-code {
+    background-color: var(--surface-ground);
+    margin: 0 0 1rem 0;
+    padding: 0;
+    border-radius: var(--border-radius);
+    overflow: auto;
+    
+    code {
+        color: var(--surface-900);
+        padding: 1rem;
+        line-height: 1.5;
+        display: block;
+        font-family: monaco, Consolas, monospace;
+    }
+}

src/assets/demo/demo.scss

@@ -0,0 +1,2 @@
+@import './flags/flags.css';
+@import './code.scss';

src/assets/demo/styles/badges.scss

@@ -1,81 +0,0 @@
-.customer-badge,
-.product-badge,
-.order-badge {
-    border-radius: var(--border-radius);
-    padding: .25em .5rem;
-    text-transform: uppercase;
-    font-weight: 700;
-    font-size: 12px;
-    letter-spacing: .3px;
-}
-
-.product-badge {
-    &.status-instock {
-        background: #C8E6C9;
-        color: #256029;
-    }
-
-    &.status-outofstock {
-        background: #FFCDD2;
-        color: #C63737;
-    }
-
-    &.status-lowstock {
-        background: #FEEDAF;
-        color: #8A5340;
-    }
-}
-
-.customer-badge {
-    &.status-qualified {
-        background: #C8E6C9;
-        color: #256029;
-    }
-
-    &.status-unqualified {
-        background: #FFCDD2;
-        color: #C63737;
-    }
-
-    &.status-negotiation {
-        background: #FEEDAF;
-        color: #8A5340;
-    }
-
-    &.status-new {
-        background: #B3E5FC;
-        color: #23547B;
-    }
-
-    &.status-renewal {
-        background: #ECCFFF;
-        color: #694382;
-    }
-
-    &.status-proposal {
-        background: #FFD8B2;
-        color: #805B36;
-    }
-}
-
-.order-badge {
-    &.order-delivered {
-        background: #C8E6C9;
-        color: #256029;
-    }
-
-    &.order-cancelled {
-        background: #FFCDD2;
-        color: #C63737;
-    }
-
-    &.order-pending {
-        background: #FEEDAF;
-        color: #8A5340;
-    }
-
-    &.order-returned {
-        background: #ECCFFF;
-        color: #694382;
-    }
-}

src/assets/demo/styles/items.scss

@@ -1,13 +0,0 @@
-.product-item {
-    .product-item-content {
-        border: 1px solid var(--surface-d);
-        border-radius: 3px;
-        margin: 0.3rem;
-        text-align: center;
-        padding: 2rem 0;
-    }
-    .product-image {
-        width: 50%;
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-    }
-}

src/assets/layout/_config.scss

@@ -0,0 +1,44 @@
+.layout-wrapper {
+    .layout-config-button {
+        display: block;
+        position: fixed;
+        width: 3rem;
+        height: 3rem;
+        line-height: 3rem;
+        background: var(--primary-color);
+        color: var(--primary-color-text);
+        text-align: center;
+        top: 50%;
+        right: 0;
+        margin-top: -1.5rem;
+        border-top-left-radius: var(--border-radius);
+        border-bottom-left-radius: var(--border-radius);
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        transition: background-color var(--transition-duration);
+        overflow: hidden;
+        cursor: pointer;
+        z-index: 999;
+        box-shadow: -0.25rem 0 1rem rgba(0, 0, 0, 0.15);
+
+        i {
+            font-size: 2rem;
+            line-height: inherit;
+            transform: rotate(0deg);
+            transition: transform 1s;
+        }
+
+        &:hover {
+            background: var(--primary-400);
+        }
+    }
+
+    .layout-config-sidebar {
+        &.p-sidebar {
+            .p-sidebar-content {
+                padding-left: 2rem;
+                padding-right: 2rem;
+            }
+        }
+    }
+}

src/assets/layout/styles/layout/_config.scss

@@ -1,42 +0,0 @@
-.layout-config-button {
-    display: block;
-    position: fixed;
-    width: 3rem;
-    height: 3rem;
-    line-height: 3rem;
-    background: var(--primary-color);
-    color: var(--primary-color-text);
-    text-align: center;
-    top: 50%;
-    right: 0;
-    margin-top: -1.5rem;
-    border-top-left-radius: var(--border-radius);
-    border-bottom-left-radius: var(--border-radius);
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    transition: background-color var(--transition-duration);
-    overflow: hidden;
-    cursor: pointer;
-    z-index: 999;
-    box-shadow: -.25rem 0 1rem rgba(0,0,0,.15);
-
-    i {
-        font-size: 2rem;
-        line-height: inherit;
-        transform: rotate(0deg);
-        transition: transform 1s;
-    }
-    
-    &:hover {
-        background: var(--primary-400);
-    }
-}
-
-.layout-config-sidebar {
-    &.p-sidebar {
-        .p-sidebar-content {
-            padding-left: 2rem;
-            padding-right: 2rem;
-        }
-    }
-}