Convert Vue component tags to PascalCase in HTML templates

As recommended in https://vuejs.org/guide/components/registration.html#component-name-casing
simonsobs · May 30, 2024 · c4c9d68 · c4c9d68
1 parent 34d0d8e
commit c4c9d68
Show file tree

Hide file tree

Showing 54 changed files with 412 additions and 417 deletions.
diff --git a/src/app/App.vue b/src/app/App.vue
@@ -1,14 +1,14 @@
 <template>
-  <v-app>
-    <suspense>
-      <provide-config>
-        <app></app>
-      </provide-config>
+  <VApp>
+    <Suspense>
+      <ProvideConfig>
+        <App></App>
+      </ProvideConfig>
       <template #fallback>
-        <v-progress-linear indeterminate> </v-progress-linear>
+        <VProgressLinear indeterminate> </VProgressLinear>
       </template>
-    </suspense>
-  </v-app>
+    </Suspense>
+  </VApp>
 </template>
 
 <script setup lang="ts">

diff --git a/src/app/AppMain.vue b/src/app/AppMain.vue
@@ -1,27 +1,26 @@
 <template>
   <div class="app-main">
     <div class="banner">
-      <banner></banner>
+      <Banner></Banner>
     </div>
     <div class="app">
-      <navigation-drawer v-model="drawer"></navigation-drawer>
-      <app-bar :absolute="true">
+      <NavigationDrawer v-model="drawer"></NavigationDrawer>
+      <AppBar :absolute="true">
         <template v-slot:prepend>
-          <v-app-bar-nav-icon @click="toggleDrawer()" v-if="mobile">
-          </v-app-bar-nav-icon>
+          <VAppBarNavIcon @click="toggleDrawer()" v-if="mobile"> </VAppBarNavIcon>
         </template>
-      </app-bar>
-      <v-main>
-        <router-view v-slot="{ Component, route }">
+      </AppBar>
+      <VMain>
+        <RouterView v-slot="{ Component, route }">
           <template v-if="Component">
-            <v-fade-transition leave-absolute>
-              <keep-alive>
-                <component :key="route.fullPath" :is="Component"></component>
-              </keep-alive>
-            </v-fade-transition>
+            <VFadeTransition leave-absolute>
+              <KeepAlive>
+                <Component :key="route.fullPath" :is="Component"></Component>
+              </KeepAlive>
+            </VFadeTransition>
           </template>
-        </router-view>
-      </v-main>
+        </RouterView>
+      </VMain>
     </div>
   </div>
 </template>

diff --git a/src/app/Banner.vue b/src/app/Banner.vue
@@ -1,11 +1,11 @@
 <template>
   <template v-if="on">
-    <v-banner lines="one" icon="mdi-alert-outline">
+    <VBanner lines="one" icon="mdi-alert-outline">
       <template #text> Banner </template>
       <template #actions>
-        <v-btn> Action </v-btn>
+        <VBtn> Action </VBtn>
       </template>
-    </v-banner>
+    </VBanner>
   </template>
 </template>
 <script setup lang="ts">

diff --git a/src/app/ListNavi.vue b/src/app/ListNavi.vue
@@ -1,6 +1,6 @@
 <template>
-  <v-list>
-    <v-list-item
+  <VList>
+    <VListItem
       link
       router
       v-for="(item, i) in naviItems"
@@ -10,10 +10,10 @@
       :title="item.title"
     >
       <template v-slot:prepend="{ isActive }">
-        <v-icon :icon="`${isActive ? item.icon : `${item.icon}-outline`}`"> </v-icon>
+        <VIcon :icon="`${isActive ? item.icon : `${item.icon}-outline`}`"> </VIcon>
       </template>
-    </v-list-item>
-  </v-list>
+    </VListItem>
+  </VList>
 </template>
 
 <script setup lang="ts">

diff --git a/src/app/NavigationDrawer.vue b/src/app/NavigationDrawer.vue
@@ -1,16 +1,16 @@
 <template>
-  <v-navigation-drawer disable-resize-watcher comment="fallthrough attributes">
+  <VNavigationDrawer disable-resize-watcher comment="fallthrough attributes">
     <div class="px-8 py-5">
       <span class="text-primary font-weight-bold"> {{ appName }} : {{ apiName }} </span>
     </div>
-    <list-navi></list-navi>
+    <ListNavi></ListNavi>
     <template v-slot:append>
       <div class="ma-4 d-flex justify-space-around align-center">
-        <toggle-dark-mode-button></toggle-dark-mode-button>
+        <ToggleDarkModeButton></ToggleDarkModeButton>
         <span class="text-secondary text-body-2">v{{ version }}</span>
       </div>
     </template>
-  </v-navigation-drawer>
+  </VNavigationDrawer>
 </template>
 
 <script setup lang="ts">

diff --git a/src/app/TabNavi.vue b/src/app/TabNavi.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-tabs v-model="tab" align-tabs="title" class="d-none d-sm-inline">
-    <v-tab :value="item.title" :to="item.to" v-for="item in naviItems">
+  <VTabs v-model="tab" align-tabs="title" class="d-none d-sm-inline">
+    <VTab :value="item.title" :to="item.to" v-for="item in naviItems">
       <span class="text-none"> {{ item.title }} </span>
-    </v-tab>
-  </v-tabs>
+    </VTab>
+  </VTabs>
 </template>
 
 <script setup lang="ts">

diff --git a/src/components/History/RunCard.vue b/src/components/History/RunCard.vue
@@ -79,14 +79,14 @@ watch(
 </script>
 
 <template>
-  <v-card flat class="g-card overflow-auto" height="100%" rounded="lg">
+  <VCard flat class="g-card overflow-auto" height="100%" rounded="lg">
     <div class="g-head">
-      <v-card-title>
+      <VCardTitle>
         Run: {{ run.runNo }}
         ⋅
         <span class="text-capitalize text-primary"> {{ run.state }} </span>
-      </v-card-title>
-      <v-card-text class="text-body-1">
+      </VCardTitle>
+      <VCardText class="text-body-1">
         Started at:
         <span class="font-weight-bold"> {{ formatDateTime(run.startedAt || "") }} </span
         ><br />
@@ -96,31 +96,31 @@ watch(
             {{ formatDateTime(run.endedAt || "") }}
           </span>
         </span>
-      </v-card-text>
+      </VCardText>
     </div>
     <div class="g-exception">
-      <v-card-subtitle v-if="run.exception" class="font-weight-bold error--text">
+      <VCardSubtitle v-if="run.exception" class="font-weight-bold error--text">
         Uncaught exception:
-      </v-card-subtitle>
-      <v-card-text v-if="run.exception">
-        <v-alert type="error" variant="tonal">
+      </VCardSubtitle>
+      <VCardText v-if="run.exception">
+        <VAlert type="error" variant="tonal">
           <pre v-text="run.exception" class="overflow-x-auto"></pre>
-        </v-alert>
-      </v-card-text>
+        </VAlert>
+      </VCardText>
     </div>
     <div class="g-script">
-      <v-card-subtitle class="font-weight-bold"> Script </v-card-subtitle>
-      <v-card-text>
+      <VCardSubtitle class="font-weight-bold"> Script </VCardSubtitle>
+      <VCardText>
         <div class="code" ref="refEditor"></div>
-      </v-card-text>
+      </VCardText>
     </div>
     <div class="g-stdout">
-      <v-card-subtitle class="font-weight-bold"> Stdout </v-card-subtitle>
-      <v-card-text class="stdout-text">
+      <VCardSubtitle class="font-weight-bold"> Stdout </VCardSubtitle>
+      <VCardText class="stdout-text">
         <pre v-text="stdoutText" class="overflow-x-auto"></pre>
-      </v-card-text>
+      </VCardText>
     </div>
-  </v-card>
+  </VCard>
 </template>
 
 <style scoped>

diff --git a/src/components/SuspenseC.vue b/src/components/SuspenseC.vue
@@ -4,12 +4,12 @@
       {{ error }}
     </slot>
   </template>
-  <suspense v-else v-bind="props">
+  <Suspense v-else v-bind="props">
     <slot></slot>
     <template #fallback>
       <slot name="fallback"> Loading... </slot>
     </template>
-  </suspense>
+  </Suspense>
 </template>
 
 <script setup lang="ts">

diff --git a/src/components/auto-mode-button/AutoModeButton.vue b/src/components/auto-mode-button/AutoModeButton.vue
@@ -1,9 +1,9 @@
 <template>
   <v-card-actions>
-    <button-off v-if="mode === 'off'"></button-off>
-    <button-scheduler v-else-if="mode === 'scheduler'"></button-scheduler>
-    <button-queue v-else-if="mode === 'queue'"></button-queue>
-    <button-error v-else></button-error>
+    <ButtonOff v-if="mode === 'off'"></ButtonOff>
+    <ButtonScheduler v-else-if="mode === 'scheduler'"></ButtonScheduler>
+    <ButtonQueue v-else-if="mode === 'queue'"></ButtonQueue>
+    <ButtonError v-else></ButtonError>
   </v-card-actions>
 </template>
 

diff --git a/src/components/auto-mode-button/modes/error/Button.vue b/src/components/auto-mode-button/modes/error/Button.vue
@@ -1,10 +1,10 @@
 <template>
-  <v-menu>
+  <VMenu>
     <template v-slot:activator="{ props }">
-      <v-btn v-bind="props" variant="tonal" color="error"> Auto Mode: Unknown </v-btn>
+      <VBtn v-bind="props" variant="tonal" color="error"> Auto Mode: Unknown </VBtn>
     </template>
-    <dialog-error></dialog-error>
-  </v-menu>
+    <DialogError></DialogError>
+  </VMenu>
 </template>
 
 <script setup lang="ts">

diff --git a/src/components/auto-mode-button/modes/error/Dialog.vue b/src/components/auto-mode-button/modes/error/Dialog.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
-    <v-card>
-      <v-alert
+    <VCard>
+      <VAlert
         type="error"
         variant="tonal"
         title="Error"
         text="Unable to determine auto mode state."
       >
-      </v-alert>
-    </v-card>
+      </VAlert>
+    </VCard>
   </div>
 </template>
 

diff --git a/src/components/auto-mode-button/modes/off/Button.vue b/src/components/auto-mode-button/modes/off/Button.vue
@@ -1,10 +1,10 @@
 <template>
-  <v-menu>
+  <VMenu>
     <template v-slot:activator="{ props }">
-      <v-btn v-bind="props"> Auto Mode: Off </v-btn>
+      <VBtn v-bind="props"> Auto Mode: Off </VBtn>
     </template>
-    <dialog-off></dialog-off>
-  </v-menu>
+    <DialogOff></DialogOff>
+  </VMenu>
 </template>
 
 <script setup lang="ts">

diff --git a/src/components/auto-mode-button/modes/off/Dialog.vue b/src/components/auto-mode-button/modes/off/Dialog.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <v-card>
-      <v-card-text>
+    <VCard>
+      <VCardText>
         <div class="mb-1">
           <p class="font-weight-medium">
             The auto mode is currently <span class="font-italic"> off </span>.
@@ -17,18 +17,18 @@
           </p>
           <p class="mt-3">Turn on auto mode?</p>
         </div>
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn variant="outlined" @click="turnOnFromScheduler">
+      </VCardText>
+      <VCardActions>
+        <VSpacer></VSpacer>
+        <VBtn variant="outlined" @click="turnOnFromScheduler">
           turn on from scheduler
-        </v-btn>
-      </v-card-actions>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn variant="outlined" @click="turnOnFromQueue"> turn on from queue </v-btn>
-      </v-card-actions>
-    </v-card>
+        </VBtn>
+      </VCardActions>
+      <VCardActions>
+        <VSpacer></VSpacer>
+        <VBtn variant="outlined" @click="turnOnFromQueue"> turn on from queue </VBtn>
+      </VCardActions>
+    </VCard>
   </div>
 </template>
 

diff --git a/src/components/auto-mode-button/modes/queue/Button.vue b/src/components/auto-mode-button/modes/queue/Button.vue
@@ -1,10 +1,10 @@
 <template>
-  <v-menu>
+  <VMenu>
     <template v-slot:activator="{ props }">
-      <v-btn v-bind="props" variant="tonal" color="tertiary"> Auto Mode: Queue </v-btn>
+      <VBtn v-bind="props" variant="tonal" color="tertiary"> Auto Mode: Queue </VBtn>
     </template>
-    <dialog-on></dialog-on>
-  </v-menu>
+    <DialogOn></DialogOn>
+  </VMenu>
 </template>
 
 <script setup lang="ts">

diff --git a/src/components/auto-mode-button/modes/queue/Dialog.vue b/src/components/auto-mode-button/modes/queue/Dialog.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <v-card>
-      <v-card-text>
+    <VCard>
+      <VCardText>
         <div class="mb-1">
           <p class="font-weight-medium">
             The auto mode currently is <span class="font-italic"> on </span> and loads
@@ -17,18 +17,18 @@
             <span class="font-italic"> queue </span>.
           </p>
         </div>
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn variant="outlined" @click="switchToLoadFromScheduler">
+      </VCardText>
+      <VCardActions>
+        <VSpacer></VSpacer>
+        <VBtn variant="outlined" @click="switchToLoadFromScheduler">
           switch to load from scheduler
-        </v-btn>
-      </v-card-actions>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn variant="outlined" @click="turnOff"> turn off auto mode </v-btn>
-      </v-card-actions>
-    </v-card>
+        </VBtn>
+      </VCardActions>
+      <VCardActions>
+        <VSpacer></VSpacer>
+        <VBtn variant="outlined" @click="turnOff"> turn off auto mode </VBtn>
+      </VCardActions>
+    </VCard>
   </div>
 </template>
 

diff --git a/src/components/auto-mode-button/modes/scheduler/Button.vue b/src/components/auto-mode-button/modes/scheduler/Button.vue
@@ -1,12 +1,12 @@
 <template>
-  <v-menu>
+  <VMenu>
     <template v-slot:activator="{ props }">
-      <v-btn v-bind="props" variant="tonal" color="tertiary">
+      <VBtn v-bind="props" variant="tonal" color="tertiary">
         Auto Mode: Scheduler
-      </v-btn>
+      </VBtn>
     </template>
-    <dialog-on></dialog-on>
-  </v-menu>
+    <DialogOn></DialogOn>
+  </VMenu>
 </template>
 
 <script setup lang="ts">