@nathapp/na-cli 1.0.7 → 1.0.9

package/dist/templates/vuexy-portal/.gitlab-ci.yml

@@ -0,0 +1,233 @@
+# Project must implement Makefile for commands (test, version-prerelease, version-patch, name, version, image)
+# command:
+#   - test: run project test cases
+#   - version-prerelease: bump prerelease version
+#   - version-patch: bump release version
+#   - name: display project name
+#   - version: display project version
+#   - image: display project name and version (e.g. hello-world:1.0.0)
+#
+stages:
+  - test
+  # run test cases
+  - build-init
+  - build
+  - build-commit
+  # build docker image and push to registry
+  - release
+  - notify
+  # mark release commit as verified
+
+run-test:
+  stage: test
+  image: node:10.13.0-jessie
+  script:
+    - make test
+  rules:
+    - if: '$CI_COMMIT_MESSAGE =~ /release-rc-by-devbot/ || $CI_COMMIT_MESSAGE =~ /release-by-devbot/'
+      when: never
+    - if: '$CI_PIPELINE_SOURCE == "merge_request_event"'
+    - if: '$CI_COMMIT_REF_PROTECTED == "true"'
+    - if: '$CI_COMMIT_MESSAGE =~ /run-test/'
+    - if: '$CI_COMMIT_MESSAGE =~ /run-prerelease/ && $CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH'
+    - if: '$CI_COMMIT_MESSAGE =~ /run-release/ && $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH'
+    # NOT triggerred by bot
+    # merge request
+    # commit to protected branch
+    # commit message contains `run-test` keyword
+    # commit message contains `run-prerelease` keyword and commit branch is nott default branch (master)
+    # commit message contains `run-release` keyword and commit branch is default branch (master)
+
+run-pre-build-init:
+  stage: build-init
+  image: registry-intl.cn-hongkong.aliyuncs.com/gkci/node:10.20.0-alpine-ci-1
+  artifacts:
+    paths:
+      - package.json
+      - package-lock.json
+      - image-tag.txt
+  script:
+    - make version-prerelease
+    - make image | awk '{ printf("%s/%s/%s", ENVIRON["CONTAINER_REGISTRY_URL"], ENVIRON["CONTAINER_REGISTRY_NAMESPACE"], $0)}' > image-tag.txt
+  rules:
+    - if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH || $CI_PIPELINE_SOURCE == "merge_request_event"'
+      when: never
+    - if: '$CI_COMMIT_MESSAGE =~ /run-prerelease/'
+    # NOT commit branch is default branch (master)
+    # NOT merge request
+    # commit message contains `run-prerelease` keyword
+
+run-pre-build-warmer:
+  stage: build-init
+  image: 
+    name: registry-intl.cn-hongkong.aliyuncs.com/gkci/kaniko-warmer:debug
+    entrypoint: [""]
+  before_script:
+    - echo "$DOCKER_AUTH_CONFIG" > /kaniko/.docker/config.json
+  script:
+    - warmer `cat $CI_PROJECT_DIR/Dockerfile | grep FROM | awk -F" " '{ printf("--image=%s ", $2) }'`
+  rules:
+    - if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH || $CI_PIPELINE_SOURCE == "merge_request_event"'
+      when: never
+    - if: '$CI_COMMIT_MESSAGE =~ /run-prerelease/'
+    # NOT commit branch is default branch (master)
+    # NOT merge request
+    # commit message contains `run-prerelease` keyword
+
+run-pre-build:
+  stage: build
+  image: 
+    name: registry-intl.cn-hongkong.aliyuncs.com/gkci/kaniko-executor:debug
+    entrypoint: [""]
+  artifacts:
+    paths:
+      - image-digest.txt
+  before_script:
+    - echo "$DOCKER_AUTH_CONFIG" > /kaniko/.docker/config.json
+  script:
+    - echo "BUILDING... `cat $CI_PROJECT_DIR/image-tag.txt`"
+    - executor --cache=true --context $CI_PROJECT_DIR --dockerfile $CI_PROJECT_DIR/Dockerfile --digest-file $CI_PROJECT_DIR/image-digest.txt --destination "`cat $CI_PROJECT_DIR/image-tag.txt`"
+    - echo "PUSHED `cat $CI_PROJECT_DIR/image-tag.txt` (`cat $CI_PROJECT_DIR/image-digest.txt`)"
+  rules:
+    - if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH || $CI_PIPELINE_SOURCE == "merge_request_event"'
+      when: never
+    - if: '$CI_COMMIT_MESSAGE =~ /run-prerelease/'
+    # NOT commit branch is default branch (master)
+    # NOT merge request
+    # commit message contains `run-prerelease` keyword
+
+run-pre-build-commit:
+  stage: build-commit
+  image: registry-intl.cn-hongkong.aliyuncs.com/gkci/node:10.20.0-alpine-ci-1
+  before_script:
+    - git config --global user.name "$GITLAB_USER_NAME"
+    - git config --global user.email "$GITLAB_USER_EMAIL"
+  script:
+    - git add -A
+    - git commit -m "$(make version)" -m "== release-rc-by-devbot ($CI_COMMIT_SHA) =="
+    - git tag -a "$(make version)" -m "$(cat image-tag.txt) ($(cat image-digest.txt))"
+    - git push "https://${GITLAB_USER_NAME}:${CI_GIT_TOKEN}@${CI_REPOSITORY_URL#*@}" "HEAD:${CI_COMMIT_BRANCH}"
+    - git push "https://${GITLAB_USER_NAME}:${CI_GIT_TOKEN}@${CI_REPOSITORY_URL#*@}" --tags
+  rules:
+    - if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH || $CI_PIPELINE_SOURCE == "merge_request_event"'
+      when: never
+    - if: '$CI_COMMIT_MESSAGE =~ /run-prerelease/'
+    # NOT commit branch is default branch (master)
+    # NOT merge request
+    # commit message contains `run-prerelease` keyword
+
+run-pre-release:
+  stage: release
+  image: registry-intl.cn-hongkong.aliyuncs.com/gkci/node:10.20.0-alpine-ci-1
+  script:
+    - echo "Prerelease version $(make version)"
+  rules:
+    - if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH'
+      when: never
+    - if: '$CI_COMMIT_TAG != null'
+    # NOT commit branch is default branch (master)
+    # tag was created
+
+run-build-init:
+  stage: build-init
+  image: registry-intl.cn-hongkong.aliyuncs.com/gkci/node:10.20.0-alpine-ci-1
+  artifacts:
+    paths:
+      - package.json
+      - package-lock.json
+      - image-tag.txt
+  script:
+    - make version-patch
+    - make image | awk '{ printf("%s/%s/%s", ENVIRON["CONTAINER_REGISTRY_URL"], ENVIRON["CONTAINER_REGISTRY_NAMESPACE"], $0)}' > image-tag.txt
+  rules:
+    - if: '$CI_PIPELINE_SOURCE == "merge_request_event" || $CI_COMMIT_MESSAGE =~ /== release-by-devbot/'
+      when: never
+    - if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH'
+    # NOT merge requests and not triggerred by bot
+    # commit into default branch (master)
+
+run-build-warmer:
+  stage: build-init
+  image: 
+    name: registry-intl.cn-hongkong.aliyuncs.com/gkci/kaniko-warmer:debug
+    entrypoint: [""]
+  before_script:
+    - echo "$DOCKER_AUTH_CONFIG" > /kaniko/.docker/config.json
+  script:
+    - warmer `cat $CI_PROJECT_DIR/Dockerfile | grep FROM | awk -F" " '{ printf("--image=%s ", $2) }'`
+  rules:
+    - if: '$CI_PIPELINE_SOURCE == "merge_request_event" || $CI_COMMIT_MESSAGE =~ /== release-by-devbot/'
+      when: never
+    - if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH'
+    # NOT merge requests and not triggerred by bot
+    # commit into default branch (master)
+
+run-build:
+  stage: build
+  image: 
+    name: registry-intl.cn-hongkong.aliyuncs.com/gkci/kaniko-executor:debug
+    entrypoint: [""]
+  artifacts:
+    paths:
+      - image-digest.txt
+  before_script:
+    - echo "$DOCKER_AUTH_CONFIG" > /kaniko/.docker/config.json
+  script:
+    - echo "BUILDING... `cat $CI_PROJECT_DIR/image-tag.txt`"
+    - executor --cache=true --context $CI_PROJECT_DIR --dockerfile $CI_PROJECT_DIR/Dockerfile --digest-file $CI_PROJECT_DIR/image-digest.txt --destination "`cat $CI_PROJECT_DIR/image-tag.txt`"
+    - echo "PUSHED `cat $CI_PROJECT_DIR/image-tag.txt` (`cat $CI_PROJECT_DIR/image-digest.txt`)"
+  rules:
+    - if: '$CI_PIPELINE_SOURCE == "merge_request_event" || $CI_COMMIT_MESSAGE =~ /== release-by-devbot/'
+      when: never
+    - if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH'
+    # NOT merge requests and not triggerred by bot
+    # commit into default branch (master)
+
+run-build-commit:
+  stage: build-commit
+  image: registry-intl.cn-hongkong.aliyuncs.com/gkci/node:10.20.0-alpine-ci-1
+  before_script:
+    - git config --global user.name "$GITLAB_USER_NAME"
+    - git config --global user.email "$GITLAB_USER_EMAIL"
+  script:
+    - git add -A
+    - git commit -m "$(make version)" -m "== release-by-devbot ($CI_COMMIT_SHA) =="
+    - git tag -a "$(make version)" -m "$(cat image-tag.txt) ($(cat image-digest.txt))"
+    - git push "https://${GITLAB_USER_NAME}:${CI_GIT_TOKEN}@${CI_REPOSITORY_URL#*@}" "HEAD:${CI_COMMIT_BRANCH}"
+    - git push "https://${GITLAB_USER_NAME}:${CI_GIT_TOKEN}@${CI_REPOSITORY_URL#*@}" --tags
+  rules:
+    - if: '$CI_PIPELINE_SOURCE == "merge_request_event" || $CI_COMMIT_MESSAGE =~ /== release-by-devbot/'
+      when: never
+    - if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH'
+    # NOT merge requests and not triggerred by bot
+    # commit into default branch (master)
+
+run-release:
+  stage: release
+  image: registry-intl.cn-hongkong.aliyuncs.com/gkci/node:10.20.0-alpine-ci-1
+  script:
+    - echo "Release version $(make version)"
+  rules:
+    - if: '$CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH'
+      when: never
+    - if: '$CI_COMMIT_TAG != null'
+    # NOT commit branch is NON default branch (master)
+    # tag was created
+
+run-notify:
+  stage: notify
+  image: registry-intl.cn-hongkong.aliyuncs.com/gkci/node:10.20.0-alpine-ci-1
+  before_script:
+    - apk --no-cache add curl
+  script:
+    - 'curl -X POST -H "Content-Type: application/json" -d "{\"chat_id\": \"$TELEGRAM_CHAT_ID\", \"text\": \"CI: $CI_PROJECT_NAMESPACE/$CI_PROJECT_NAME version:$(make version) has been released \"}" https://api.telegram.org/bot$TELEGRAM_BOT_TOKEN/sendMessage'
+  rules:
+    # NOT triggerred by bot and NOT commit message contains `run-without-release` keyword and NOT merge request and NOT tag was created
+    - if: '$CI_COMMIT_MESSAGE =~ /release-by-bot/ || $CI_COMMIT_MESSAGE =~ /run-without-release/ || $CI_PIPELINE_SOURCE == "merge_request_event" || $CI_COMMIT_TAG != null'
+      when: never
+    - if: '$TELEGRAM_BOT_TOKEN == null || $TELEGRAM_BOT_TOKEN == "" || $TELEGRAM_CHAT_ID == null || $TELEGRAM_CHAT_ID == ""'
+      when: never
+    # Commit message contains `run-prerelease` keyword and commit branch is not default branch (master)
+    - if: '$CI_COMMIT_MESSAGE =~ /run-prerelease/ && $CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH'
+    # Commit into default branch (master)
+    - if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH'

package/dist/templates/vuexy-portal/.npmrc-rename

@@ -0,0 +1,2 @@
+auto-install-peers=true
+shamefully-hoist=true

package/dist/templates/vuexy-portal/.nvmrc

@@ -0,0 +1 @@
+v18.19.0

package/dist/templates/vuexy-portal/Makefile

@@ -0,0 +1,55 @@
+MAKEFILE := $(abspath $(lastword $(MAKEFILE_LIST)))
+ROOT_PATH := $(shell pwd)
+SERVICE_NAME := <%= projectName %>
+
+.PHONY: version name image
+all: build
+
+version-major: version-sync
+	@npm -s version major --no-git-tag-version
+
+version-minor: version-sync
+	@npm -s version minor --no-git-tag-version
+
+version-patch: version-sync
+	@npm -s version patch --no-git-tag-version
+
+version-prerelease: version-sync
+	@npm -s version prerelease --preid=rc --no-git-tag-version
+
+version-latest:
+	@(git tag --sort=-creatordate || echo) | awk 'NR==1 { \
+		split($$0, n, "-"); \
+		if (n[1] != "") { \
+			split(n[1], v, "."); \
+			if (v[1] ~ /^[0-9]+$$/ && v[2] ~ /^[0-9]+$$/ && v[3] ~ /^[0-9]+$$/) { \
+				print $$0; \
+				exit 0; \
+			} \
+		} \
+		print "1.0.0-rc.0"; \
+	 } \
+	 END { \
+		 if (NR == 0) { \
+			 print "1.0.0-rc.0"; \
+		 } \
+	 }'
+
+version-sync:
+	@git checkout $(CI_COMMIT_BRANCH)
+	@git pull --tags 2&>/dev/null || true
+	@git tag --sort=-creatordate | head -10
+	@cat package.json | jq -r --arg PKG_VERSION `make --no-print-directory -f$(MAKEFILE) version-latest` '.version=$$PKG_VERSION' > package.json;
+	@echo -n "Current Git tag: "; cat package.json | jq -r '.version'
+
+version:
+	@echo $(shell node -p "require('$(ROOT_PATH)/package.json').version")
+
+name:
+	@echo $(SERVICE_NAME)
+
+image:
+	@echo $(SERVICE_NAME):$(shell node -p "require('$(ROOT_PATH)/package.json').version")
+
+test:
+	@echo SKIPPED

package/dist/templates/vuexy-portal/src/@core/composable/createUrl.ts

@@ -0,0 +1,20 @@
+import { stringifyQuery } from 'ufo'
+import type { MaybeRefOrGetter } from 'vue'
+
+interface Options {
+  query: MaybeRefOrGetter<Record<string, any>>
+}
+
+export const createUrl = (url: MaybeRefOrGetter<string>, options?: Options) => computed(() => {
+  if (!options?.query)
+    return toValue(url)
+
+  const _url = toValue(url)
+  const _query = toValue(options?.query)
+
+  const queryObj = Object.fromEntries(
+    Object.entries(_query).map(([key, val]) => [key, toValue(val)]),
+  )
+
+  return `${_url}${queryObj ? `?${stringifyQuery(queryObj)}` : ''}`
+})

package/dist/templates/vuexy-portal/src/@core/composable/useCookie.ts

@@ -0,0 +1,43 @@
+// Ported from [Nuxt](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/cookie.ts)
+
+import type { CookieParseOptions, CookieSerializeOptions } from 'cookie-es'
+import { parse, serialize } from 'cookie-es'
+import { destr } from 'destr'
+
+type _CookieOptions = Omit<CookieSerializeOptions & CookieParseOptions, 'decode' | 'encode'>
+
+export interface CookieOptions<T = any> extends _CookieOptions {
+  decode?(value: string): T
+  encode?(value: T): string
+  default?: () => T | Ref<T>
+  watch?: boolean | 'shallow'
+}
+
+export type CookieRef<T> = Ref<T>
+
+const CookieDefaults: CookieOptions<any> = {
+  path: '/',
+  watch: true,
+  decode: val => destr(decodeURIComponent(val)),
+  encode: val => encodeURIComponent(typeof val === 'string' ? val : JSON.stringify(val)),
+}
+
+export const useCookie = <T = string | null | undefined>(name: string, _opts?: CookieOptions<T>): CookieRef<T> => {
+  const opts = { ...CookieDefaults, ..._opts || {} }
+  const cookies = parse(document.cookie, opts)
+
+  const cookie = ref<T | undefined>(cookies[name] as any ?? opts.default?.())
+
+  watch(cookie, () => {
+    document.cookie = serializeCookie(name, cookie.value, opts)
+  })
+
+  return cookie as CookieRef<T>
+}
+
+function serializeCookie(name: string, value: any, opts: CookieSerializeOptions = {}) {
+  if (value === null || value === undefined)
+    return serialize(name, value, { ...opts, maxAge: -1 })
+
+  return serialize(name, value, opts)
+}

package/dist/templates/vuexy-portal/src/@core/composable/useGenerateImageVariant.ts

@@ -0,0 +1,25 @@
+import { useTheme } from 'vuetify'
+import { useConfigStore } from '@core/stores/config'
+
+// composable function to return the image variant as per the current theme and skin
+export const useGenerateImageVariant = (imgLight: string, imgDark: string, imgLightBordered?: string, imgDarkBordered?: string, bordered = false) => {
+  const configStore = useConfigStore()
+  const { global } = useTheme()
+
+  return computed(() => {
+    if (global.name.value === 'light') {
+      if (configStore.skin === 'bordered' && bordered)
+        return imgLightBordered
+
+      else
+        return imgLight
+    }
+    if (global.name.value === 'dark') {
+      if (configStore.skin === 'bordered' && bordered)
+        return imgDarkBordered
+
+      else
+        return imgDark
+    }
+  })
+}

package/dist/templates/vuexy-portal/src/@core/composable/useResponsiveSidebar.ts

@@ -0,0 +1,29 @@
+import type { Ref } from 'vue'
+import { useDisplay } from 'vuetify'
+
+export const useResponsiveLeftSidebar = (mobileBreakpoint: Ref<boolean> | undefined = undefined) => {
+  const { mdAndDown, name: currentBreakpoint } = useDisplay()
+
+  const _mobileBreakpoint = mobileBreakpoint || mdAndDown
+
+  const isLeftSidebarOpen = ref(true)
+
+  const setInitialValue = () => {
+    isLeftSidebarOpen.value = !_mobileBreakpoint.value
+  }
+
+  // Set the initial value of sidebar
+  setInitialValue()
+
+  watch(
+    currentBreakpoint,
+    () => {
+      // Reset left sidebar
+      isLeftSidebarOpen.value = !_mobileBreakpoint.value
+    },
+  )
+
+  return {
+    isLeftSidebarOpen,
+  }
+}

package/dist/templates/vuexy-portal/src/@core/composable/useSkins.ts

@@ -0,0 +1,42 @@
+import { VThemeProvider } from 'vuetify/components/VThemeProvider'
+import { useConfigStore } from '@core/stores/config'
+import { AppContentLayoutNav } from '@layouts/enums'
+
+// TODO: Use `VThemeProvider` from dist instead of lib (Using this component from dist causes navbar to loose sticky positioning)
+
+export const useSkins = () => {
+  const configStore = useConfigStore()
+
+  const layoutAttrs = computed(() => ({
+    verticalNavAttrs: {
+      wrapper: h(VThemeProvider, { tag: 'aside' }),
+      wrapperProps: {
+        withBackground: true,
+        theme: (configStore.isVerticalNavSemiDark && configStore.appContentLayoutNav === AppContentLayoutNav.Vertical)
+          ? 'dark'
+          : undefined,
+      },
+    },
+  }))
+
+  const injectSkinClasses = () => {
+    if (typeof document !== 'undefined') {
+      const bodyClasses = document.body.classList
+      const genSkinClass = (_skin?: string) => `skin--${_skin}`
+
+      watch(
+        () => configStore.skin,
+        (val, oldVal) => {
+          bodyClasses.remove(genSkinClass(oldVal))
+          bodyClasses.add(genSkinClass(val))
+        },
+        { immediate: true },
+      )
+    }
+  }
+
+  return {
+    injectSkinClasses,
+    layoutAttrs,
+  }
+}

package/dist/templates/vuexy-portal/src/@core/enums.ts

@@ -0,0 +1,21 @@
+export const Skins = {
+  Default: 'default',
+  Bordered: 'bordered',
+} as const
+
+export const Theme = {
+  Light: 'light',
+  Dark: 'dark',
+  System: 'system',
+} as const
+
+export const Layout = {
+  Vertical: 'vertical',
+  Horizontal: 'horizontal',
+  Collapsed: 'collapsed',
+} as const
+
+export const Direction = {
+  Ltr: 'ltr',
+  Rtl: 'rtl',
+} as const

package/dist/templates/vuexy-portal/src/@core/index.ts

@@ -0,0 +1,43 @@
+import type { UserThemeConfig } from './types'
+import type { LayoutConfig } from '@layouts/types'
+
+export const defineThemeConfig = (userConfig: UserThemeConfig): { themeConfig: UserThemeConfig; layoutConfig: LayoutConfig } => {
+  return {
+    themeConfig: userConfig,
+    layoutConfig: {
+      app: {
+        title: userConfig.app.title,
+        logo: userConfig.app.logo,
+        contentWidth: userConfig.app.contentWidth,
+        contentLayoutNav: userConfig.app.contentLayoutNav,
+        overlayNavFromBreakpoint: userConfig.app.overlayNavFromBreakpoint,
+        i18n: {
+          enable: userConfig.app.i18n.enable,
+        },
+        iconRenderer: userConfig.app.iconRenderer,
+      },
+      navbar: {
+        type: userConfig.navbar.type,
+        navbarBlur: userConfig.navbar.navbarBlur,
+      },
+      footer: { type: userConfig.footer.type },
+      verticalNav: {
+        isVerticalNavCollapsed: userConfig.verticalNav.isVerticalNavCollapsed,
+        defaultNavItemIconProps: userConfig.verticalNav.defaultNavItemIconProps,
+      },
+      horizontalNav: {
+        type: userConfig.horizontalNav.type,
+        transition: userConfig.horizontalNav.transition,
+        popoverOffset: userConfig.horizontalNav.popoverOffset,
+      },
+      icons: {
+        chevronDown: userConfig.icons.chevronDown,
+        chevronRight: userConfig.icons.chevronRight,
+        close: userConfig.icons.close,
+        verticalNavPinned: userConfig.icons.verticalNavPinned,
+        verticalNavUnPinned: userConfig.icons.verticalNavUnPinned,
+        sectionTitlePlaceholder: userConfig.icons.sectionTitlePlaceholder,
+      },
+    },
+  }
+}

package/dist/templates/vuexy-portal/src/@core/initCore.ts

@@ -0,0 +1,93 @@
+import { useStorage } from '@vueuse/core'
+import { useTheme } from 'vuetify'
+import { useConfigStore } from '@core/stores/config'
+import { cookieRef, namespaceConfig } from '@layouts/stores/config'
+import { themeConfig } from '@themeConfig'
+
+const _syncAppRtl = () => {
+  const configStore = useConfigStore()
+  const storedLang = cookieRef<string | null>('language', null)
+
+  const { locale } = useI18n({ useScope: 'global' })
+
+  // TODO: Handle case where i18n can't read persisted value
+  if (locale.value !== storedLang.value && storedLang.value)
+    locale.value = storedLang.value
+
+  // watch and change lang attribute of html on language change
+  watch(
+    locale,
+    val => {
+      // Update lang attribute of html tag
+      if (typeof document !== 'undefined')
+        document.documentElement.setAttribute('lang', val as string)
+
+      // Store selected language in cookie
+      storedLang.value = val as string
+
+      // set isAppRtl value based on selected language
+      if (themeConfig.app.i18n.langConfig && themeConfig.app.i18n.langConfig.length) {
+        themeConfig.app.i18n.langConfig.forEach(lang => {
+          if (lang.i18nLang === storedLang.value)
+            configStore.isAppRTL = lang.isRTL
+        })
+      }
+    },
+    { immediate: true },
+  )
+}
+
+const _handleSkinChanges = () => {
+  const { themes } = useTheme()
+  const configStore = useConfigStore()
+
+  // Create skin default color so that we can revert back to original (default skin) color when switch to default skin from bordered skin
+  Object.values(themes.value).forEach(t => {
+    t.colors['skin-default-background'] = t.colors.background
+    t.colors['skin-default-surface'] = t.colors.surface
+  })
+
+  watch(
+    () => configStore.skin,
+    val => {
+      Object.values(themes.value).forEach(t => {
+        t.colors.background = t.colors[`skin-${val}-background`]
+        t.colors.surface = t.colors[`skin-${val}-surface`]
+      })
+    },
+    { immediate: true },
+  )
+}
+
+/*
+    ℹ️ Set current theme's surface color in localStorage
+
+    Why? Because when initial loader is shown (before vue is ready) we need to what's the current theme's surface color.
+    We will use color stored in localStorage to set the initial loader's background color.
+
+    With this we will be able to show correct background color for the initial loader even before vue identify the current theme.
+  */
+const _syncInitialLoaderTheme = () => {
+  const vuetifyTheme = useTheme()
+
+  watch(
+    () => useConfigStore().theme,
+    () => {
+      // ℹ️ We are not using theme.current.colors.surface because watcher is independent and when this watcher is ran `theme` computed is not updated
+      useStorage<string | null>(namespaceConfig('initial-loader-bg'), null).value = vuetifyTheme.current.value.colors.surface
+      useStorage<string | null>(namespaceConfig('initial-loader-color'), null).value = vuetifyTheme.current.value.colors.primary
+    },
+    { immediate: true },
+  )
+}
+
+const initCore = () => {
+  _syncInitialLoaderTheme()
+  _handleSkinChanges()
+
+  // ℹ️ We don't want to trigger i18n in SK
+  if (themeConfig.app.i18n.enable)
+    _syncAppRtl()
+}
+
+export default initCore