Enforce Pascal casing of component name in template in the docs package

packages/docs/.eslintrc.js

@@ -15,5 +15,14 @@ module.exports = {
   "rules": {
     "vue/multi-word-component-names": "off",
     "vue/no-reserved-component-names": "warn",
+    "vue/component-name-in-template-casing": ["error", "PascalCase", {
+      registeredComponentsOnly: false,
+      ignores: ["transition", "component"],
+    }],
+    "vue/max-attributes-per-line": ["error", {
+      singleline: {
+        max: 4
+      },
+    }],
   },
 }

packages/docs/components/ComponentPlayground.vue

@@ -54,24 +54,24 @@ const doShowComponent = false; // TODO: Temporarily disabled
     <div class="component-playground__example">
       <slot v-bind="{ bind: optionValues, slots }" />
     </div>
-    <va-card
+    <VaCard
       class="component-playground__options"
       square
     >
-      <va-card-content>
+      <VaCardContent>
         <div
           v-for="option in filteredOptions"
           :key="option.key"
           class="mb-2"
         >
-          <va-input
+          <VaInput
             v-if="option.type === 'input'"
             v-model="option.value"
             class="w-full"
             :label="option.key"
             :rules="option.rules"
           />
-          <va-select
+          <VaSelect
             v-if="option.type === 'select'"
             v-model="option.value"
             class="w-full"
@@ -80,7 +80,7 @@ const doShowComponent = false; // TODO: Temporarily disabled
             :rules="option.rules"
             clearable
           />
-          <va-select
+          <VaSelect
             v-if="option.type === 'multiselect'"
             v-model="option.value"
             class="w-full"
@@ -90,7 +90,7 @@ const doShowComponent = false; // TODO: Temporarily disabled
             clearable
             multiple
           />
-          <va-checkbox
+          <VaCheckbox
             v-if="option.type === 'checkbox'"
             v-model="option.value"
             :label="option.key"
@@ -99,8 +99,8 @@ const doShowComponent = false; // TODO: Temporarily disabled
             :rules="option.rules"
           />
         </div>
-      </va-card-content>
-    </va-card>
+      </VaCardContent>
+    </VaCard>
   </div>
   <div v-if="doShowComponent" class="component-playground">
     <div

packages/docs/components/HeaderBanner.vue

@@ -11,8 +11,8 @@
         <div class="header-banner__left">
           <a :href="`https://github.com/epicmaxco/vuestic-ui/releases/tag/v${uiVersion}`">We just released&nbsp;<strong>Vuestic {{ uiVersion }} 🤗</strong></a>
 
-<!--          <div class="header-banner__left-links">-->
-            <!-- <a
+          <!--          <div class="header-banner__left-links">-->
+          <!-- <a
               href="https://vuejs.org/partners/epicmax.html"
               title="Epicmax creates high performance Vue.js interfaces"
               target="_blank"
@@ -34,53 +34,53 @@
               <strong>Vue.js</strong>
             </a> -->
 
-            <!-- <strong>and</strong> -->
-
-<!--            <a-->
-<!--              href="https://nuxtjs.org/partners/epicmax"-->
-<!--              title="Epicmax creates high performance Vue.js interfaces"-->
-<!--              target="_blank"-->
-<!--              class="header-banner__link"-->
-<!--            >-->
-<!--              <svg-->
-<!--                xmlns="http://www.w3.org/2000/svg"-->
-<!--                width="24"-->
-<!--                height="24"-->
-<!--                viewBox="0 0 400 420"-->
-<!--                aria-hidden="true"-->
-<!--              >-->
-<!--                <g-->
-<!--                  fill="none"-->
-<!--                  fill-rule="evenodd"-->
-<!--                >-->
-<!--                  <path-->
-<!--                    d="M123 292l-1-1c-2-4-2-8-2-12H25L167 27l59 107 19-14-59-107c-1-2-8-13-20-13-5 0-13 2-19 13L4 268c-1 2-7 14-1 24 2 5 8 10 21 10h120c-13 0-19-5-21-10z"-->
-<!--                    fill="#00C58E"-->
-<!--                  />-->
-<!--                  <path-->
-<!--                    d="M395 269L280 62c-2-2-8-13-20-13-5 0-12 2-19 13l-15 24v48l34-59 114 204h-43a20 20 0 0 1-2 12v1c-6 10-19 10-21 10h68c2 0 15 0 21-10 2-5 4-13-2-23z"-->
-<!--                    fill="#108775"-->
-<!--                  />-->
-<!--                  <path-->
-<!--                    d="M332 292v-1l1-2c1-3 2-7 1-10l-4-11-90-158-13-24h-1l-13 24-91 158-3 11a21 21 0 0 0 2 13c3 5 9 10 21 10h168c3 0 16 0 22-10zM226 134l83 145H144l82-145z"-->
-<!--                    fill="#2F495E"-->
-<!--                    fill-rule="nonzero"-->
-<!--                  />-->
-<!--                </g>-->
-<!--              </svg>-->
-<!--              <strong>Nuxt</strong>-->
-<!--            </a>-->
-<!--          </div>-->
+          <!-- <strong>and</strong> -->
+
+          <!--            <a-->
+          <!--              href="https://nuxtjs.org/partners/epicmax"-->
+          <!--              title="Epicmax creates high performance Vue.js interfaces"-->
+          <!--              target="_blank"-->
+          <!--              class="header-banner__link"-->
+          <!--            >-->
+          <!--              <svg-->
+          <!--                xmlns="http://www.w3.org/2000/svg"-->
+          <!--                width="24"-->
+          <!--                height="24"-->
+          <!--                viewBox="0 0 400 420"-->
+          <!--                aria-hidden="true"-->
+          <!--              >-->
+          <!--                <g-->
+          <!--                  fill="none"-->
+          <!--                  fill-rule="evenodd"-->
+          <!--                >-->
+          <!--                  <path-->
+          <!--                    d="M123 292l-1-1c-2-4-2-8-2-12H25L167 27l59 107 19-14-59-107c-1-2-8-13-20-13-5 0-13 2-19 13L4 268c-1 2-7 14-1 24 2 5 8 10 21 10h120c-13 0-19-5-21-10z"-->
+          <!--                    fill="#00C58E"-->
+          <!--                  />-->
+          <!--                  <path-->
+          <!--                    d="M395 269L280 62c-2-2-8-13-20-13-5 0-12 2-19 13l-15 24v48l34-59 114 204h-43a20 20 0 0 1-2 12v1c-6 10-19 10-21 10h68c2 0 15 0 21-10 2-5 4-13-2-23z"-->
+          <!--                    fill="#108775"-->
+          <!--                  />-->
+          <!--                  <path-->
+          <!--                    d="M332 292v-1l1-2c1-3 2-7 1-10l-4-11-90-158-13-24h-1l-13 24-91 158-3 11a21 21 0 0 0 2 13c3 5 9 10 21 10h168c3 0 16 0 22-10zM226 134l83 145H144l82-145z"-->
+          <!--                    fill="#2F495E"-->
+          <!--                    fill-rule="nonzero"-->
+          <!--                  />-->
+          <!--                </g>-->
+          <!--              </svg>-->
+          <!--              <strong>Nuxt</strong>-->
+          <!--            </a>-->
+          <!--          </div>-->
         </div>
 
         <div class="header-banner__buttons">
-          <va-button
+          <VaButton
             href="https://epicmax.co/?ref=vuestic-header"
             target="blank"
           >
             🔥🔥🔥 Hire us
-          </va-button>
-          <va-button
+          </VaButton>
+          <VaButton
             v-if="closeable"
             icon="close"
             preset="secondary"

packages/docs/components/PageConfigSkeleton.vue

@@ -1,5 +1,5 @@
 <template>
-  <va-content
+  <VaContent
     v-show="doShow"
     class="va-skeleton page-config"
   >
@@ -9,12 +9,12 @@
     <h3 class="page-config-subtitle medium" />
     <p class="three-lines short" />
 
-    <va-card style="height: 150px; width: 100%;" />
+    <VaCard style="height: 150px; width: 100%;" />
     <h3 class="page-config-subtitle long" />
     <p class="medium" />
 
-    <va-card style="height: 300px; width: 100%;" />
-  </va-content>
+    <VaCard style="height: 300px; width: 100%;" />
+  </VaContent>
 </template>
 
 <script lang="ts" setup>

packages/docs/components/landing/Admin.vue

@@ -11,31 +11,31 @@
         </div>
 
         <div class="admin__buttons">
-          <va-button
+          <VaButton
             class="admin__buttons--button"
             href="https://github.com/epicmaxco/vuestic-admin"
             target="blank"
           >
             <template #prepend>
-              <va-icon
+              <VaIcon
                 class="fa-brands fa-github"
                 style="margin-right: 0.5rem;"
               />
             </template>
             View on GitHub
-          </va-button>
+          </VaButton>
 
-          <va-button
+          <VaButton
             class="admin__buttons--button"
             href="https://vuestic.epicmax.co/admin/dashboard"
             target="blank"
             :preset="breakpoint.xs ? `primary` : `secondary`"
           >
             Live Demo
-          </va-button>
+          </VaButton>
 
           <div class="admin__buttons--button stars-button">
-            <landing-stars-button
+            <LandingStarsButton
               repo="epicmaxco/vuestic-admin"
               border-radius="0.5rem"
             />

packages/docs/components/landing/Customize.vue

@@ -11,23 +11,23 @@
         </div>
 
         <div class="customize__buttons">
-          <va-button
+          <VaButton
             class="customize__buttons-item"
             color="textInverted"
             text-color="primary"
             to="/getting-started/installation"
           >
             Get Started
-          </va-button>
+          </VaButton>
         </div>
 
         <div class="customize__image">
-          <va-aspect-ratio :ratio="1337/192">
+          <VaAspectRatio :ratio="1337/192">
             <img
               src="/landing/customize-everything.png"
               alt="Vuestic UI components"
             >
-          </va-aspect-ratio>
+          </VaAspectRatio>
         </div>
       </div>
     </div>

packages/docs/components/landing/Features.vue

@@ -45,9 +45,9 @@
             >
             <p class="features__item-description">
               Professional support: Fast and reliable assistance from
-              <router-link to="/introduction/team">
+              <RouterLink to="/introduction/team">
                 the core team
-              </router-link>
+              </RouterLink>
               &#160;&#x1fac2;
             </p>
           </div>

packages/docs/components/landing/Footer.vue

@@ -37,7 +37,7 @@
         </div>
 
         <div class="footer__buttons">
-          <va-button
+          <VaButton
             v-for="{ href, icon, label } in buttons"
             :key="label"
             class="footer__buttons__button"
@@ -47,13 +47,13 @@
             size="large"
           >
             <template #prepend>
-              <va-icon
+              <VaIcon
                 class="footer__buttons__icon"
                 :component="icon"
               />
             </template>
             {{ label }}
-          </va-button>
+          </VaButton>
         </div>
 
         <SocialsLinks class="footer__socials" />