@vc-shell/create-vc-app 1.0.88

package/dist/template/base/public/assets/logo-white.svg

@@ -0,0 +1,21 @@
+<svg width="252" height="81" viewBox="0 0 252 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.5982 11L22.7992 36.5H34.5982L46.3976 11H34.5982Z" fill="#CCCCCC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 11L22.7992 36.5H34.5984L22.7992 11H11Z" fill="#FF4A4A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.441 41.6C63.441 43.7127 61.6798 45.425 59.5079 45.425C57.3355 45.425 55.5748 43.7127 55.5748 41.6C55.5748 39.4874 57.3355 37.775 59.5079 37.775C61.6798 37.775 63.441 39.4874 63.441 41.6Z" fill="#FF4A4A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.6321 44.15H38.5315C39.9747 54.1672 48.8288 61.9016 59.5079 61.9016V50.3871C55.3794 50.3871 51.8732 47.7685 50.6321 44.15Z" fill="#FFC10D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.6321 39.05C51.8732 35.4115 55.3794 32.7784 59.5079 32.7784V21.2C48.8288 21.2 39.9747 28.9773 38.5315 39.05H50.6321Z" fill="#FFC10D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M89.116 30.176L95.7446 14.672H97.3108L89.4237 32.896H88.8364L80.9213 14.672H82.4875L89.116 30.176ZM101.142 14.672H102.597V32.624H101.142V14.672ZM115.686 24.464L121.923 32.624H120.217L114.008 24.5728H109.505V32.624H108.051V14.672H114.316C116.022 14.672 117.392 15.1344 118.399 16.0592C119.406 16.984 119.909 18.1536 119.909 19.5952C119.909 22.0976 118.343 24.0016 115.686 24.464ZM114.26 15.9504H109.505V23.2944H114.26C116.917 23.2944 118.399 21.7984 118.399 19.6224C118.399 17.4464 116.917 15.9504 114.26 15.9504ZM122.454 14.672H137.418V15.9504H130.649V32.624H129.195V15.9504H122.454V14.672ZM148.241 14.4C150.87 14.4 153.108 15.2976 154.954 17.0656C156.8 18.8336 157.723 21.0368 157.723 23.648C157.723 26.232 156.8 28.4352 154.954 30.2304C153.108 31.9984 150.87 32.896 148.241 32.896C145.584 32.896 143.347 31.9984 141.529 30.2304C139.711 28.4352 138.788 26.232 138.788 23.648C138.788 21.0368 139.711 18.8336 141.529 17.0656C143.347 15.2976 145.584 14.4 148.241 14.4ZM148.269 15.7056C146.004 15.7056 144.102 16.4672 142.592 17.9904C141.082 19.4864 140.326 21.3632 140.326 23.6208C140.326 25.8784 141.082 27.7552 142.592 29.2784C144.102 30.8016 146.004 31.5632 148.269 31.5632C150.535 31.5632 152.409 30.8016 153.919 29.2784C155.429 27.7552 156.185 25.8784 156.185 23.6208C156.185 21.3904 155.429 19.5136 153.891 17.9904C152.381 16.4672 150.507 15.7056 148.269 15.7056ZM90.7662 41.6C93.8707 41.6 96.5836 42.9872 98.2338 45.2448L97.143 46.088C95.6047 43.9664 93.4791 42.9056 90.7941 42.9056C88.5287 42.9056 86.6548 43.6672 85.1165 45.1904C83.6062 46.6864 82.8511 48.5632 82.8511 50.8208C82.8511 53.0784 83.6062 54.9824 85.1165 56.5056C86.6268 58.0016 88.5287 58.7632 90.7941 58.7632C93.5071 58.7632 95.6047 57.7024 97.143 55.608L98.2338 56.4512C96.5836 58.7088 93.8707 60.096 90.7662 60.096C88.1092 60.096 85.8717 59.1984 84.0537 57.4304C82.2358 55.6624 81.3128 53.4592 81.3128 50.848C81.3128 48.2368 82.2358 46.0336 84.0537 44.2656C85.8717 42.4976 88.1092 41.6 90.7662 41.6ZM110.54 41.6C113.169 41.6 115.406 42.4976 117.252 44.2656C119.098 46.0336 120.021 48.2368 120.021 50.848C120.021 53.432 119.098 55.6352 117.252 57.4304C115.406 59.1984 113.169 60.096 110.54 60.096C107.883 60.096 105.645 59.1984 103.827 57.4304C102.01 55.6352 101.087 53.432 101.087 50.848C101.087 48.2368 102.01 46.0336 103.827 44.2656C105.645 42.4976 107.883 41.6 110.54 41.6ZM110.568 42.9056C108.302 42.9056 106.401 43.6672 104.89 45.1904C103.38 46.6864 102.625 48.5632 102.625 50.8208C102.625 53.0784 103.38 54.9552 104.89 56.4784C106.401 58.0016 108.302 58.7632 110.568 58.7632C112.833 58.7632 114.707 58.0016 116.218 56.4784C117.728 54.9552 118.483 53.0784 118.483 50.8208C118.483 48.5904 117.728 46.7136 116.19 45.1904C114.679 43.6672 112.805 42.9056 110.568 42.9056ZM132.467 52.2896L140.159 41.6H140.718V59.824H139.264V45.2176L132.775 54.2208H132.216L125.699 45.2176V59.824H124.244V41.6H124.804L132.467 52.2896ZM154.422 52.2896L162.114 41.6H162.673V59.824H161.219V45.2176L154.73 54.2208H154.171L147.654 45.2176V59.824H146.2V41.6H146.759L154.422 52.2896ZM168.155 41.872H179.706V43.1504H169.609V49.488H177.469V50.7664H169.609V58.5456H180.042V59.824H168.155V41.872ZM191.537 51.664L197.774 59.824H196.068L189.859 51.7728H185.356V59.824H183.901V41.872H190.166C191.872 41.872 193.243 42.3344 194.25 43.2592C195.257 44.184 195.76 45.3536 195.76 46.7952C195.76 49.2976 194.194 51.2016 191.537 51.664ZM190.11 43.1504H185.356V50.4944H190.11C192.767 50.4944 194.25 48.9984 194.25 46.8224C194.25 44.6464 192.767 43.1504 190.11 43.1504ZM208.849 41.6C211.954 41.6 214.667 42.9872 216.317 45.2448L215.226 46.088C213.688 43.9664 211.562 42.9056 208.877 42.9056C206.612 42.9056 204.738 43.6672 203.2 45.1904C201.689 46.6864 200.934 48.5632 200.934 50.8208C200.934 53.0784 201.689 54.9824 203.2 56.5056C204.71 58.0016 206.612 58.7632 208.877 58.7632C211.59 58.7632 213.688 57.7024 215.226 55.608L216.317 56.4512C214.667 58.7088 211.954 60.096 208.849 60.096C206.192 60.096 203.955 59.1984 202.137 57.4304C200.319 55.6624 199.396 53.4592 199.396 50.848C199.396 48.2368 200.319 46.0336 202.137 44.2656C203.955 42.4976 206.192 41.6 208.849 41.6ZM220.568 41.872H232.119V43.1504H222.022V49.488H229.882V50.7664H222.022V58.5456H232.455V59.824H220.568V41.872Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="252" height="81" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

package/dist/template/base/public/assets/logo.svg

@@ -0,0 +1,8 @@
+<svg width="127" height="30" viewBox="0 0 127 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4999 0L6.75 15H13.4999L20.25 0H13.4999Z" fill="#CCCCCC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L6.75 15H13.5L6.75 0H0Z" fill="#FF4A4A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30 18C30 19.2428 28.9925 20.25 27.75 20.25C26.5072 20.25 25.5 19.2428 25.5 18C25.5 16.7572 26.5072 15.75 27.75 15.75C28.9925 15.75 30 16.7572 30 18Z" fill="#FF4A4A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.6724 19.5H15.75C16.5756 25.3925 21.6408 29.9421 27.75 29.9421V23.1689C25.3882 23.1689 23.3824 21.6285 22.6724 19.5Z" fill="#FFC10D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.6724 16.5C23.3824 14.3597 25.3882 12.8108 27.75 12.8108V6C21.6408 6 16.5756 10.5749 15.75 16.5H22.6724Z" fill="#FFC10D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44.688 11.28L48.48 2.16H49.376L44.864 12.88H44.528L40 2.16H40.896L44.688 11.28ZM51.568 2.16H52.4V12.72H51.568V2.16ZM59.888 7.92L63.456 12.72H62.48L58.928 7.984H56.352V12.72H55.52V2.16H59.104C60.08 2.16 60.864 2.432 61.44 2.976C62.016 3.52 62.304 4.208 62.304 5.056C62.304 6.528 61.408 7.648 59.888 7.92ZM59.072 2.912H56.352V7.232H59.072C60.592 7.232 61.44 6.352 61.44 5.072C61.44 3.792 60.592 2.912 59.072 2.912ZM63.76 2.16H72.32V2.912H68.448V12.72H67.616V2.912H63.76V2.16ZM78.512 2C80.016 2 81.296 2.528 82.352 3.568C83.408 4.608 83.936 5.904 83.936 7.44C83.936 8.96 83.408 10.256 82.352 11.312C81.296 12.352 80.016 12.88 78.512 12.88C76.992 12.88 75.712 12.352 74.672 11.312C73.632 10.256 73.104 8.96 73.104 7.44C73.104 5.904 73.632 4.608 74.672 3.568C75.712 2.528 76.992 2 78.512 2ZM78.528 2.768C77.232 2.768 76.144 3.216 75.28 4.112C74.416 4.992 73.984 6.096 73.984 7.424C73.984 8.752 74.416 9.856 75.28 10.752C76.144 11.648 77.232 12.096 78.528 12.096C79.824 12.096 80.896 11.648 81.76 10.752C82.624 9.856 83.056 8.752 83.056 7.424C83.056 6.112 82.624 5.008 81.744 4.112C80.88 3.216 79.808 2.768 78.528 2.768ZM45.632 18C47.408 18 48.96 18.816 49.904 20.144L49.28 20.64C48.4 19.392 47.184 18.768 45.648 18.768C44.352 18.768 43.28 19.216 42.4 20.112C41.536 20.992 41.104 22.096 41.104 23.424C41.104 24.752 41.536 25.872 42.4 26.768C43.264 27.648 44.352 28.096 45.648 28.096C47.2 28.096 48.4 27.472 49.28 26.24L49.904 26.736C48.96 28.064 47.408 28.88 45.632 28.88C44.112 28.88 42.832 28.352 41.792 27.312C40.752 26.272 40.224 24.976 40.224 23.44C40.224 21.904 40.752 20.608 41.792 19.568C42.832 18.528 44.112 18 45.632 18ZM56.944 18C58.448 18 59.728 18.528 60.784 19.568C61.84 20.608 62.368 21.904 62.368 23.44C62.368 24.96 61.84 26.256 60.784 27.312C59.728 28.352 58.448 28.88 56.944 28.88C55.424 28.88 54.144 28.352 53.104 27.312C52.064 26.256 51.536 24.96 51.536 23.44C51.536 21.904 52.064 20.608 53.104 19.568C54.144 18.528 55.424 18 56.944 18ZM56.96 18.768C55.664 18.768 54.576 19.216 53.712 20.112C52.848 20.992 52.416 22.096 52.416 23.424C52.416 24.752 52.848 25.856 53.712 26.752C54.576 27.648 55.664 28.096 56.96 28.096C58.256 28.096 59.328 27.648 60.192 26.752C61.056 25.856 61.488 24.752 61.488 23.424C61.488 22.112 61.056 21.008 60.176 20.112C59.312 19.216 58.24 18.768 56.96 18.768ZM69.488 24.288L73.888 18H74.208V28.72H73.376V20.128L69.664 25.424H69.344L65.616 20.128V28.72H64.784V18H65.104L69.488 24.288ZM82.048 24.288L86.448 18H86.768V28.72H85.936V20.128L82.224 25.424H81.904L78.176 20.128V28.72H77.344V18H77.664L82.048 24.288ZM89.904 18.16H96.512V18.912H90.736V22.64H95.232V23.392H90.736V27.968H96.704V28.72H89.904V18.16ZM103.28 23.92L106.848 28.72H105.872L102.32 23.984H99.744V28.72H98.912V18.16H102.496C103.472 18.16 104.256 18.432 104.832 18.976C105.408 19.52 105.696 20.208 105.696 21.056C105.696 22.528 104.8 23.648 103.28 23.92ZM102.464 18.912H99.744V23.232H102.464C103.984 23.232 104.832 22.352 104.832 21.072C104.832 19.792 103.984 18.912 102.464 18.912ZM113.184 18C114.96 18 116.512 18.816 117.456 20.144L116.832 20.64C115.952 19.392 114.736 18.768 113.2 18.768C111.904 18.768 110.832 19.216 109.952 20.112C109.088 20.992 108.656 22.096 108.656 23.424C108.656 24.752 109.088 25.872 109.952 26.768C110.816 27.648 111.904 28.096 113.2 28.096C114.752 28.096 115.952 27.472 116.832 26.24L117.456 26.736C116.512 28.064 114.96 28.88 113.184 28.88C111.664 28.88 110.384 28.352 109.344 27.312C108.304 26.272 107.776 24.976 107.776 23.44C107.776 21.904 108.304 20.608 109.344 19.568C110.384 18.528 111.664 18 113.184 18ZM119.888 18.16H126.496V18.912H120.72V22.64H125.216V23.392H120.72V27.968H126.688V28.72H119.888V18.16Z" fill="#161D25"/>
+</svg>

package/dist/template/base/public/img/icons/safari-pinned-tab.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1985 4306 c-37 -16 -70 -52 -84 -89 -8 -19 -11 -303 -11 -888 l0
+-859 1615 0 1615 0 0 859 c0 927 2 898 -53 949 -13 12 -39 27 -58 32 -21 6
+-580 10 -1514 10 -1211 -1 -1485 -3 -1510 -14z"/>
+<path d="M646 3514 c-160 -38 -315 -157 -394 -304 -37 -68 -72 -198 -127 -480
+-2 -8 -4 -15 -5 -15 -1 0 -3 -9 -5 -20 -1 -11 -26 -126 -56 -255 l-53 -235 -3
+-495 c-3 -457 -2 -498 14 -529 34 -66 59 -75 191 -76 98 0 116 3 113 15 -2 8
+-5 56 -6 105 -5 175 56 326 185 456 201 201 495 242 746 103 223 -123 358
+-404 311 -645 l-7 -35 1039 0 1039 1 -6 30 c-10 53 -6 188 7 245 22 94 88 213
+159 286 201 207 480 257 732 133 137 -68 269 -217 312 -352 33 -107 44 -244
+25 -324 -5 -20 -3 -21 78 -18 74 2 89 5 119 29 22 16 40 41 46 64 7 25 10 210
+8 567 l-3 530 -1692 0 -1693 0 0 85 c-4 1049 -4 1064 -25 1092 -44 58 -44 58
+-538 57 -350 -1 -465 -4 -511 -15z m799 -739 l0 -480 -567 0 c-313 0 -568 2
+-568 6 0 3 25 122 56 265 61 280 73 336 80 374 22 119 71 204 148 257 86 59
+104 61 496 60 l355 -2 0 -480z m-47 -631 c26 -17 30 -69 8 -99 -11 -16 -28
+-18 -114 -19 -85 -1 -103 2 -121 18 -26 24 -27 66 -1 93 17 19 31 22 112 22
+64 -1 100 -5 116 -15z"/>
+<path d="M825 1670 c-88 -25 -141 -57 -202 -119 -174 -176 -173 -452 2 -625
+204 -203 534 -166 690 78 29 46 46 82 44 96 0 3 5 19 11 35 6 17 12 64 12 105
+1 290 -282 508 -557 430z m211 -286 c14 -10 37 -36 51 -57 21 -34 25 -49 21
+-98 -16 -217 -329 -212 -343 6 -5 73 56 154 131 174 36 9 106 -3 140 -25z"/>
+<path d="M4119 1666 c-155 -46 -257 -147 -304 -301 -83 -275 119 -559 405
+-569 83 -3 139 9 218 46 235 110 321 423 176 639 -112 169 -304 240 -495 185z
+m178 -261 c29 -7 80 -51 97 -84 44 -85 9 -193 -77 -238 -43 -22 -117 -20 -158
+3 -132 77 -116 267 26 318 38 13 59 13 112 1z"/>
+</g>
+</svg>

package/dist/template/base/src/api_client/README.md

@@ -0,0 +1,28 @@
+# Platform Manager REST Client
+
+Generated REST API methods to easily communicate with existing VirtoCommerce Platform.
+
+## To add support of TypeScript API client generation into a project
+
+1. Add `"@vc-shell/api-client-generator": version` dev dependency into the `package.json`
+2. Add `"generate-api-client": "api-client-generator --color"` command to the list of scripts in the `package.json`
+3. Add `"generate-api-client:project-name": "lerna run generate-api-client --scope=@vc-shell/project-name --stream --no-prefix"`
+
+## To generate the TypeScript API client from command line
+
+### Prerequisite
+
+0. Install **.NET Core 6.0**, if you use **Mac OS** or **Linux**
+1. Run `yarn` or `yarn bootstrap` to install dependency
+2. Run `yarn build` or `yarn build-cli:api-client` to build API client generator
+
+### Run command
+
+```
+yarn generate-api-client
+```
+to generate API clients for all projects or
+```
+yarn generate-api-client:project-name
+```
+to generate API clients for specific project.

package/dist/template/base/src/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly PACKAGE_VERSION: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/dist/template/base/src/locales/en.json

@@ -0,0 +1,23 @@
+{
+  "language_name": "English",
+  "SHELL": {
+    "ACCOUNT": {
+      "CHANGE_PASSWORD": "Change password",
+      "PROFILE": "Profile",
+      "LOGOUT": "Log Out"
+    },
+    "MENU": {
+      "DASHBOARD": "Home"
+    },
+    "TOOLBAR": {
+      "LOGIN": "Log In",
+      "SETTINGS": "Settings",
+      "HELP": "Help",
+      "NOTIFICATIONS": "Notifications",
+      "LANGUAGE": "Language selector"
+    },
+    "DASHBOARD": {
+      "TITLE": "Dashboard"
+    }
+  }
+}

package/dist/template/base/src/locales/index.ts

@@ -0,0 +1,2 @@
+import * as en from "./en.json";
+export { en };

package/dist/template/base/src/main.ts.ejs

@@ -0,0 +1,41 @@
+import VirtoShellFramework, { notification } from "@vc-shell/framework";
+import { createApp } from "vue";
+import { router } from "./router";
+import * as locales from "./locales";
+import { RouterView } from "vue-router";
+<% if(commonPages === true) { -%>
+import { useLogin } from "./composables";
+<% } -%>
+<% if(bladeModuleStarter === true) { -%>
+import Default from "./modules/default";
+<% } -%>
+
+// Load required CSS
+import "./styles/index.scss";
+import "@fortawesome/fontawesome-free/css/all.min.css";
+import "roboto-fontface/css/roboto/roboto-fontface.css";
+import "@vc-shell/framework/dist/index.css";
+
+const app = createApp(RouterView)
+.use(VirtoShellFramework<% if(commonPages === true) { -%>, {
+  useLogin,
+}<% } -%>)
+<% if(bladeModuleStarter === true) { -%>
+.use(Default, { router })
+<% } -%>
+
+.use(router)
+
+Object.entries(locales).forEach(([key, message]) => {
+  app.config.globalProperties.$mergeLocaleMessage(key, message);
+});
+
+app.provide("platformUrl", import.meta.env.APP_PLATFORM_URL);
+
+app.config.errorHandler = (err) => {
+  notification.error(err.toString(), {
+    timeout: 5000,
+  });
+};
+
+app.mount("#app");

package/dist/template/base/src/pages/App.vue.ejs

@@ -0,0 +1,373 @@
+<template>
+  <VcLoading
+    v-if="!isReady"
+    active
+    class="app__loader"
+  />
+  <VcApp
+    v-else
+    :menu-items="menuItems"
+    <% if(commonPages === true) { -%>
+    :mobile-menu-items="mobileMenuItems"
+    <% } -%>
+    :toolbar-items="toolbarItems"
+    :is-ready="isReady"
+    :is-authorized="isAuthorized"
+    :logo="uiSettings.logo"
+    :title="uiSettings.title"
+    :version="version"
+    :pages="pages"
+    :blades-refs="bladesRefs"
+    @backlink:click="closeBlade($event)"
+    @close="closeBlade($event)"
+    <% if(dashboard === true) { -%>
+    @logo:click="openDashboard"
+    <% } -%>
+  >
+    <!-- App Switcher -->
+    <template
+      v-if="appsList && appsList.length"
+      #appSwitcher
+    >
+      <VcAppSwitcher
+        :apps-list="appsList"
+        @on-click="switchApp($event)"
+      />
+    </template>
+
+    <template
+      v-if="isAuthorized"
+      #bladeNavigation
+    >
+      <VcBladeNavigation
+        ref="bladeNavigationRefs"
+        :blades="blades"
+        :workspace-options="workspaceOptions"
+        :workspace-param="workspaceParam"
+        @on-close="closeBlade($event)"
+        @on-parent-call="(e) => onParentCall(e.id, e.args)"
+        @vue:mounted="resolveLastBlade(pages)"
+      ></VcBladeNavigation>
+    </template>
+
+    <template #modals>
+      <VcPopupContainer />
+    </template>
+  </VcApp>
+</template>
+
+<script lang="ts" setup>
+import {
+  useAppSwitcher,
+  useNotifications,
+  useSettings,
+  useUser,
+  useBladeNavigation,
+  VcNotificationDropdown,
+  usePopup,
+  useMenuComposer,
+  ChangePassword,
+  LanguageSelector,
+  UserDropdownButton,
+  BladePageComponent
+} from "@vc-shell/framework";
+import { computed, inject, onMounted, reactive, ref, Ref, markRaw, watch, defineComponent } from "vue";
+import { useRoute, useRouter } from "vue-router";
+// eslint-disable-next-line import/no-unresolved
+import avatarImage from "/assets/avatar.jpg";
+// eslint-disable-next-line import/no-unresolved
+import logoImage from "/assets/logo.svg";
+<% if(dashboard === true) { -%>
+import Dashboard from "./Dashboard.vue";
+<% } -%>
+import { useI18n } from "vue-i18n";
+<% if(bladeModuleStarter === true) { -%>
+import { DefaultList } from "./../modules/default";
+<% } -%>
+
+const { open } = usePopup({
+  component: ChangePassword,
+});
+
+const { t, locale: currentLocale, availableLocales, getLocaleMessage } = useI18n({ useScope: "global" });
+const { user, signOut } = useUser();
+const { getUiCustomizationSettings, uiSettings, applySettings } = useSettings();
+const { blades, bladesRefs, workspaceOptions, workspaceParam, closeBlade, onParentCall, resolveLastBlade } = useBladeNavigation();
+const { navigationMenuComposer, toolbarComposer } = useMenuComposer();
+const { appsList, switchApp, getApps } = useAppSwitcher();
+
+const { notifications, loadFromHistory, markAllAsRead } = useNotifications();
+const route = useRoute();
+const router = useRouter();
+const isAuthorized = ref(true);
+const isReady = ref(false);
+const pages = inject<BladePageComponent[]>("pages");
+const isDesktop = inject<Ref<boolean>>("isDesktop");
+const isMobile = inject<Ref<boolean>>("isMobile");
+const version = import.meta.env.PACKAGE_VERSION;
+const bladeNavigationRefs = ref();
+
+onMounted(async () => {
+  try {
+    await getApps();
+    langInit();
+    await customizationHandler();
+    await loadFromHistory();
+
+    isReady.value = true;
+  } catch (e) {
+    console.log(e);
+    throw e;
+  }
+});
+
+watch(
+  () => bladeNavigationRefs.value?.bladesRefs,
+  (newVal) => {
+    bladesRefs.value = newVal;
+  },
+  { deep: true }
+);
+
+console.debug(`Initializing App`);
+
+const toolbarItems = computed(() =>
+  toolbarComposer([
+    {
+      component: markRaw(LanguageSelector),
+      options: {
+        value: currentLocale.value as string,
+        title: t("SHELL.TOOLBAR.LANGUAGE"),
+        languageItems: availableLocales.map((locale: string) => ({
+          lang: locale,
+          title: (getLocaleMessage(locale) as { language_name: string }).language_name,
+          clickHandler(lang: string) {
+            currentLocale.value = lang;
+            localStorage.setItem("VC_LANGUAGE_SETTINGS", lang);
+          },
+        })),
+      },
+      isVisible: isDesktop.value ? isDesktop.value : isMobile.value ? route.path === "/" : false,
+    },
+    {
+      isAccent: notifications.value.some((item) => item.isNew),
+      component: markRaw(VcNotificationDropdown),
+      options: {
+        title: t("SHELL.TOOLBAR.NOTIFICATIONS"),
+        notifications: notifications.value,
+        onOpen() {
+          if (notifications.value.some((x) => x.isNew)) {
+            markAllAsRead();
+          }
+        },
+      },
+    },
+    <% if(commonPages === true) { -%>
+    {
+      component: markRaw(UserDropdownButton),
+      options: {
+        avatar: avatarImage,
+        name: user.value?.userName,
+        role: user.value?.isAdministrator ? "Administrator" : "Seller account",
+        menuItems: [
+          {
+            title: t("SHELL.ACCOUNT.CHANGE_PASSWORD"),
+            clickHandler() {
+              open();
+            },
+          },
+          {
+            title: t("SHELL.ACCOUNT.LOGOUT"),
+            async clickHandler() {
+              const isPrevented = await closeBlade(0);
+              if (!isPrevented) {
+                signOut();
+                router.push({ name: "Login" });
+              }
+            },
+          },
+        ],
+      },
+      isVisible: isDesktop.value,
+    },
+    <% } -%>
+  ])
+);
+
+<% if(commonPages === true) { -%>
+const mobileMenuItems = computed(() =>
+  toolbarComposer([
+    {
+      component: markRaw(UserDropdownButton),
+      options: {
+        avatar: avatarImage,
+        name: user.value?.userName,
+        role: user.value?.isAdministrator ? "Administrator" : "Seller account",
+      },
+      isVisible: isMobile.value,
+    },
+  ])
+);
+<% } -%>
+
+const menuItems = reactive(
+  navigationMenuComposer([
+    <% if(dashboard === true) { -%>
+    {
+      title: computed(() => t("SHELL.MENU.DASHBOARD")),
+      icon: "fas fa-home",
+      isVisible: true,
+      component: defineComponent({
+        url: "/",
+      }),
+      clickHandler() {
+        openDashboard();
+      },
+    },
+    <% } -%>
+    {
+      title: computed(() => t("SHELL.ACCOUNT.CHANGE_PASSWORD")),
+      icon: "fas fa-key",
+      isVisible: isMobile.value,
+      clickHandler() {
+        open();
+      },
+    },
+    <% if(bladeModuleStarter === true) { -%>
+    {
+      title: computed(() => t("<%= bladeModuleName.toUpperCase() %>.MENU.TITLE")),
+      icon: "fas fa-file-alt",
+      isVisible: true,
+      component: markRaw(DefaultList),
+    },
+    <% } -%>
+    <% if(commonPages === true) { -%>
+    {
+      title: computed(() => t("SHELL.ACCOUNT.LOGOUT")),
+      icon: "fas fa-sign-out-alt",
+      isVisible: isMobile,
+      async clickHandler() {
+        const isPrevented = await closeBlade(0);
+        if (!isPrevented) {
+          signOut();
+          router.push({ name: "Login" });
+        }
+      },
+    },
+    <% } -%>
+  ])
+);
+
+function langInit() {
+  const lang = localStorage.getItem("VC_LANGUAGE_SETTINGS");
+
+  if (lang) {
+    currentLocale.value = lang;
+  } else {
+    currentLocale.value = "en";
+  }
+}
+<% if(dashboard === true) { -%>
+const openDashboard = async () => {
+  console.debug(`openDashboard() called.`);
+
+   // Close all opened pages with onBeforeClose callback
+  const isPrevented = await closeBlade(0);
+
+  !isPrevented && router.push("/");
+};
+<% } -%>
+
+async function customizationHandler() {
+  await getUiCustomizationSettings();
+
+  if (!uiSettings.value.logo) {
+    applySettings({ logo: logoImage });
+  }
+  if (!uiSettings.value.title) {
+    applySettings({ title: undefined });
+  }
+}
+</script>
+
+<style lang="scss">
+.vc-theme_light {
+  --background-color: #f5f6f9;
+  --top-bar-color: #161d25;
+  --basic-black-color: #333333;
+  --tooltips-color: #a5a5a5;
+
+  --primary-color: #43b0e6;
+  --primary-color-hover: #319ed4;
+  --primary-color-disabled: #a9ddf6;
+
+  --special-color: #f89406;
+  --special-color-hover: #eb8b03;
+  --special-color-disabled: #fed498;
+
+  /* Layout variables */
+  --app-bar-height: 60px;
+  --app-bar-background-color: var(--top-bar-color);
+  --app-bar-toolbar-icon-background-hover: #2e3d4e;
+  --app-bar-toolbar-item-width: 50px;
+  --app-bar-divider-color: #2e3d4e;
+  --app-bar-toolbar-icon-color: #7e8e9d;
+  --app-bar-account-info-role-color: #838d9a;
+}
+
+html,
+body,
+#app {
+  @apply tw-font-roboto tw-h-full tw-w-full tw-m-0 tw-fixed tw-overflow-hidden tw-overscroll-y-none;
+}
+
+body {
+  @apply tw-text-base;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+button,
+input,
+select,
+textarea {
+  @apply tw-font-roboto;
+}
+::-webkit-input-placeholder {
+  @apply tw-font-roboto;
+}
+:-moz-placeholder {
+  @apply tw-font-roboto;
+}
+::-moz-placeholder {
+  @apply tw-font-roboto;
+}
+:-ms-input-placeholder {
+  @apply tw-font-roboto;
+}
+
+.vc-app.vc-theme_light {
+  --background-color: #f2f2f2;
+  --top-bar-color: #ffffff;
+  --app-background: linear-gradient(180deg, #e4f5fb 5.06%, #e8f3f2 100%), linear-gradient(0deg, #e8f2f3, #e8f2f3),
+    #eef2f8;
+  --app-bar-background-color: #ffffff;
+  --app-bar-divider-color: #ffffff;
+  --app-bar-toolbar-item-width: 50px;
+  --app-bar-toolbar-icon-color: #7e8e9d;
+  --app-bar-toolbar-icon-color-hover: #465769;
+  --app-bar-toolbar-icon-background-hover: #ffffff;
+  --app-bar-account-info-name-color: #161d25;
+  --app-bar-account-info-role-color: #7e8e9d;
+}
+
+.app {
+  &__loader {
+    background: var(--app-background);
+  }
+}
+</style>