chore(docs): improve perfomance

package.json

@@ -6,8 +6,8 @@
   "devDependencies": {
     "lerna": "^3.20.2",
     "syncpack": "^9.8.6",
-    "yorkie": "^2.0.0",
-    "tsx": "^4.6.1"
+    "tsx": "^4.6.1",
+    "yorkie": "^2.0.0"
   },
   "private": true,
   "scripts": {
@@ -46,14 +46,16 @@
     "pre-commit": "lerna run --concurrency 1 --stream precommit --since HEAD"
   },
   "resolutions": {
-    "vue": "^3.4.21",
-    "@vue/shared": "3.4.21",
-    "@vue/compiler-sfc": "3.4.21",
-    "@vue/compiler-core": "3.4.21",
-    "@vue/runtime-core": "3.4.21",
-    "@vue/runtime-dom": "3.4.21",
-    "@vue/reactivity": "3.4.21",
-    "@vue/server-renderer": "3.4.21",
-    "@vue/compiler-dom": "3.4.21"
+    "vue": "3.5.12",
+    "@vue/shared": "3.5.12",
+    "@vue/compiler-sfc": "3.5.12",
+    "@vue/compiler-core": "3.5.12",
+    "@vue/runtime-core": "3.5.12",
+    "@vue/runtime-dom": "3.5.12",
+    "@vue/reactivity": "3.5.12",
+    "@vue/server-renderer": "3.5.12",
+    "@vue/compiler-dom": "3.5.12",
+    "sass": "1.52.0",
+    "vue-tsc": "2.0.7"
   }
 }

packages/docs/assets/css/tailwind.css

@@ -1,4 +1,7 @@
 /* Disables Tailwind CSS Reset */
-@tailwind base;
+@layer tailwind.base {
+  @tailwind base;
+}
+
 @tailwind components;
 @tailwind utilities;

packages/docs/components/layout/Sidebar.vue

@@ -3,6 +3,7 @@
     v-model="writableVisible"
     class="sidebar docs-sidebar"
     :width="sidebarWidth"
+    :animated="false"
   >
     <VaAccordion
       v-model="value"

packages/docs/layouts/default.vue

@@ -137,54 +137,54 @@ html {
   position: relative;
   z-index: 0;
 
-  &--theme-halloween {
-    &::before {
-      content: '';
-      position: absolute;
-      height: 100%;
-      min-height: 100vh;
-      width: 100%;
-      background-image: url("https://i.imgur.com/rpnciUN.png");
-      background-size: 30%;
-      background-color: #000;
-      z-index: 0;
-      opacity: 0.5;
-    }
-
-    &::after {
-      content: '';
-      position: fixed;
-      top: 0;
-      height: 100%;
-      width: 100%;
-      background: radial-gradient(circle at v-bind("mouse.x + 'px'") v-bind("mouse.y + 'px'"), transparent 0%, #000 v-bind("(mouseInertia.x + mouseInertia.y) * 0.5 + 'px'"));
-      background-size: 200%;
-      z-index: 0;
-      pointer-events: none;
-    }
-
-    .docs-layout__loader {
-      // Halloween loader
-      background-image: url("https://i.imgur.com/yLvFZoB.png");
-      background-position: center;
-      background-repeat: no-repeat;
-      animation: background-jump 1s infinite;
-    }
-
-    .docs-sidebar {
-      // Halloween background
-      background-image: url("https://i.imgur.com/fLEstk9.png");
-      background-repeat: no-repeat;
-      background-blend-mode: multiply;
-    }
-
-    .docs-header {
-      // Halloween background
-      background-image: url("https://i.imgur.com/BNkuj2J.png");
-      background-position: center;
-      background-blend-mode: multiply;
-    }
-  }
+  // &--theme-halloween {
+  //   &::before {
+  //     content: '';
+  //     position: absolute;
+  //     height: 100%;
+  //     min-height: 100vh;
+  //     width: 100%;
+  //     background-image: url("https://i.imgur.com/rpnciUN.png");
+  //     background-size: 30%;
+  //     background-color: #000;
+  //     z-index: 0;
+  //     opacity: 0.5;
+  //   }
+
+  //   &::after {
+  //     content: '';
+  //     position: fixed;
+  //     top: 0;
+  //     height: 100%;
+  //     width: 100%;
+  //     background: radial-gradient(circle at v-bind("mouse.x + 'px'") v-bind("mouse.y + 'px'"), transparent 0%, #000 v-bind("(mouseInertia.x + mouseInertia.y) * 0.5 + 'px'"));
+  //     background-size: 200%;
+  //     z-index: 0;
+  //     pointer-events: none;
+  //   }
+
+  //   .docs-layout__loader {
+  //     // Halloween loader
+  //     background-image: url("https://i.imgur.com/yLvFZoB.png");
+  //     background-position: center;
+  //     background-repeat: no-repeat;
+  //     animation: background-jump 1s infinite;
+  //   }
+
+  //   .docs-sidebar {
+  //     // Halloween background
+  //     background-image: url("https://i.imgur.com/fLEstk9.png");
+  //     background-repeat: no-repeat;
+  //     background-blend-mode: multiply;
+  //   }
+
+  //   .docs-header {
+  //     // Halloween background
+  //     background-image: url("https://i.imgur.com/BNkuj2J.png");
+  //     background-position: center;
+  //     background-blend-mode: multiply;
+  //   }
+  // }
 
   & > * {
     z-index: 1;

packages/docs/modules/page-config/blocks/alert/index.vue

@@ -30,8 +30,8 @@ const props = defineProps({
 
 <style lang="scss">
 .page-config-alert {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
 
   .MarkdownView {
     p {

packages/docs/modules/page-config/blocks/api/components/ApiDocs.vue

@@ -88,6 +88,7 @@ defineProps({
   &__table-wrapper {
     overflow-x: auto;
     width: 100%;
+    transition: none;
 
     &::-webkit-scrollbar {
       width: 4px;

packages/docs/modules/page-config/blocks/example/example-footer.vue

@@ -238,9 +238,9 @@ const doShowPlaygroundButton = computed(() => {
   flex-wrap: wrap;
 
   &__button {
-    padding: 0.5rem 0rem;
+    padding: 0.5rem 0rem !important ;
     margin-right: 0.25rem;
-    font-weight: bold;
+    font-weight: bold !important;
 
     &:hover {
       background: none !important;

packages/docs/modules/vuestic.ts

@@ -1,9 +1,41 @@
-import { defineNuxtModule, addVitePlugin, addPluginTemplate } from '@nuxt/kit';
+import { defineNuxtModule, addVitePlugin } from '@nuxt/kit';
 import { resolve } from 'pathe'
 import { VuesticOptions } from './../../nuxt/src/types';
 import originalNuxtModule from '../../nuxt/src/module'
 import { componentVBindFix } from '../../ui/build/plugins/component-v-bind-fix'
 
+import { Plugin } from 'vite'
+import MagicString from 'magic-string'
+
+const addLayer = (ms: MagicString, layer: string) => {
+  ms.prepend(`@layer ${layer} {\n`)
+  ms.append(`\n}`)
+  return {
+    code: ms.toString(),
+    map: ms.generateMap()
+  }
+}
+
+/** Add css layers to Vuestic files */
+export const cssLayers: Plugin = {
+  name: 'vuestic:css-layer',
+
+  transform(code, id) {
+    // Only transform CSS files
+    if (!id.endsWith('.scss')) return null
+
+    if (id.includes('packages/ui/src/styles')) {
+      return addLayer(new MagicString(code), 'vuestic.styles')
+    }
+
+    if (id.includes('packages/ui/src/components')) {
+      return addLayer(new MagicString(code), 'vuestic.components')
+    }
+  }
+}
+
+
+
 /**
  * @vuestic/nuxt module wrapper with relative resolved vuestic from packages/ui
  */
@@ -29,6 +61,8 @@ export default defineNuxtModule<VuesticOptions>({
       addVitePlugin(componentVBindFix({ sourcemap: false }))
     }
 
+    addVitePlugin(cssLayers)
+
     nuxt.options.alias['@vuestic/ag-grid-theme'] = resolve(__dirname, '../../ag-grid-theme/src/styles/index.scss');
     nuxt.options.alias['vuestic-ui/styles/typography.css'] = resolve(__dirname, '../../ui/src/styles/typography/typography.scss');
     nuxt.options.alias['vuestic-ui/styles/grid'] = resolve(__dirname, '../../ui/src/styles/grid/grid.scss');

packages/docs/nuxt.config.ts

@@ -154,6 +154,13 @@ export default defineNuxtConfig({
         { find: '~@ag-grid-community', replacement: ('@ag-grid-community') }
       ]
     },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern'
+        }
+      }
+    }
   },
 
   runtimeConfig: {
@@ -175,4 +182,8 @@ export default defineNuxtConfig({
       }
     }
   },
+
+  devtools: {
+    enabled: false,
+  }
 });

packages/github-utilities/package.json

@@ -7,8 +7,8 @@
   },
   "dependencies": {
     "chalk": "^5.2.0",
+    "dotenv": "^16.3.1",
     "inquirer": "^9.0.0",
-    "typescript": "^5",
-    "dotenv": "^16.3.1"
+    "typescript": "^5"
   }
 }

packages/ui/build/plugins/component-v-bind-fix.ts

@@ -141,7 +141,7 @@ export const transformVueComponent = (code: string) => {
 /** We need this plugin to support CSS vbind in SSR. Vue useCssVars is disabled for cjs build */
 export const componentVBindFix = (o: {
   sourcemap?: boolean
-} = { sourcemap: false }): Plugin => {
+} = { sourcemap: false }) => {
   return {
     name: 'vuestic:component-v-bind-fix',
     enforce: 'pre',
@@ -156,7 +156,7 @@ export const componentVBindFix = (o: {
         return result
       }
 
-      return transformVueComponent(code)?.code
+      return result?.code
     },
-  }
+  } satisfies Plugin
 }

packages/ui/package.json

@@ -166,4 +166,4 @@
       ]
     }
   }
-}
+}

packages/ui/src/components/va-form-field/VaFormField.vue

@@ -95,7 +95,7 @@ watchEffect(() => {
 })
 
 const makeSlotRef = () => {
-  return new Proxy(innerValue, {
+  return new Proxy(innerValue as any, {
     get (v, key) {
       if (key === 'ref') {
         return innerValue.value

packages/ui/src/components/va-layout/VaLayout.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="va-layout">
-    <VaLayoutArea
-      v-for="area in areaNames"
-      :key="area"
-      :area="area"
-      :config="$props[area] || {}"
-      @overlay-click="$emit(`${area}-overlay-click` as any)"
-    >
-      <slot :name="area" />
-    </VaLayoutArea>
+    <template  v-for="area in areaNames" :key="area">
+      <VaLayoutArea
+        v-if="$slots[area]"
+        :area="area"
+        :config="$props[area] || {}"
+        @overlay-click="$emit(`${area}-overlay-click` as any)"
+      >
+        <slot :name="area" />
+      </VaLayoutArea>
+    </template>
 
     <div class="va-layout__area va-layout__area--content">
       <slot>
@@ -73,15 +74,15 @@ watchEffect(() => {
   }
 })
 
-const templateArea = useGridTemplateArea(props)
-
 const slots = useSlots()
 
+const templateArea = useGridTemplateArea(props, slots)
+
 const verticalTemplate = computed(() => {
   return [
     slots.top ? 'min-content' : '0fr',
     '1fr',
-    slots.bottom ? 'min-content' : '0fr',
+    slots.bottom ? 'min-content' : '1fr',
   ]
     .filter(Boolean)
     .join(' ')
@@ -91,7 +92,7 @@ const horizontalTemplate = computed(() => {
   return [
     slots.left ? 'min-content' : '0fr',
     '1fr',
-    slots.right ? 'min-content' : '0fr',
+    slots.right ? 'min-content' : '1fr',
   ]
     .filter(Boolean)
     .join(' ')
@@ -113,7 +114,8 @@ const horizontalTemplate = computed(() => {
   max-width: 100%;
   max-height: 100%;
 
-  &__area {
+  // Force more importance, because VaLayoutArea component can be loaded after VaLayout
+  & &__area {
     @include va-scroll();
 
     &--content {

packages/ui/src/components/va-layout/components/VaLayoutArea.vue

@@ -31,6 +31,7 @@ import VaLayoutFixedWrapper from './VaLayoutFixedWrapper.vue'
 import { PropType, computed } from 'vue'
 import { AreaName } from '../hooks/useGridTemplateArea'
 import { AreaConfig } from '../hooks/useLayout'
+import { isServer } from '../../../utils/ssr'
 
 defineOptions({
   name: 'VaLayoutArea',
@@ -44,7 +45,7 @@ const props = defineProps({
 const emit = defineEmits(['overlay-click'])
 
 const absolute = computed(() => props.config.absolute || false)
-const fixed = computed(() => props.config.fixed || false)
+const fixed = computed(() => isServer() ? false : props.config.fixed || false)
 const overlay = computed(() => props.config.overlay || false)
 const zIndex = computed(() => (props.config.order || 0) + 1)
 </script>
@@ -62,8 +63,6 @@ const zIndex = computed(() => (props.config.order || 0) + 1)
 }
 
 .va-layout-area {
-  display: flex;
-
   &__overlay {
     position: absolute;
     top: 0;