Switch all number inputs to v-number-input

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue

@@ -278,16 +278,17 @@
           <v-card-text>
             <div class="pa-3">
               <v-row>
-                <v-text-field
+                <v-number-input
                   v-model="refreshInterval"
-                  min="1"
-                  max="3600"
-                  step="1"
-                  type="number"
+                  control-variant="stacked"
+                  :min="1"
+                  :max="3600"
+                  :step="1"
                   label="Refresh Interval (s)"
                   :rules="[rules.required, rules.min]"
                   data-test="refresh-interval"
-              /></v-row>
+                />
+              </v-row>
               <v-row class="mt-5">
                 <v-spacer />
                 <v-btn

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/CmdTlmServer.vue

@@ -59,12 +59,12 @@
         <v-card-text>
           <div class="pa-3">
             <v-row>
-              <v-text-field
+              <v-number-input
                 v-model="optionsRefreshInterval"
-                min="1"
-                max="3600"
-                step="1"
-                type="number"
+                control-variant="stacked"
+                :min="1"
+                :max="3600"
+                :step="1"
                 label="Refresh Interval (s)"
                 :rules="[rules.required, rules.min]"
                 data-test="refresh-interval"

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-packetviewer/src/tools/PacketViewer/PacketViewer.vue

@@ -143,24 +143,24 @@
           <v-card-text>
             <div class="pa-3">
               <v-row>
-                <v-text-field
+                <v-number-input
                   v-model="optionsRefreshInterval"
-                  min="1"
-                  max="3600"
-                  step="1"
-                  type="number"
+                  control-variant="stacked"
+                  :min="1"
+                  :max="3600"
+                  :step="1"
                   label="Refresh Interval (s)"
                   :rules="[rules.required, rules.min]"
                   data-test="refresh-interval"
                 />
               </v-row>
               <v-row>
-                <v-text-field
+                <v-number-input
                   v-model="optionsStaleLimit"
-                  min="1"
-                  max="10000"
-                  step="1"
-                  type="number"
+                  control-variant="stacked"
+                  :min="1"
+                  :max="10000"
+                  :step="1"
                   label="Time at which to mark data Stale (s)"
                   :rules="[rules.required, rules.min]"
                   min-width="280px"

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/SettingsDialog.vue

@@ -41,11 +41,11 @@
                 density="compact"
                 data-test="settings-hide-legend"
               />
-              <v-text-field
+              <v-number-input
                 v-else
-                v-model.number="item.value"
+                v-model="item.value"
+                control-variant="stacked"
                 hide-details="auto"
-                type="number"
                 :rules="[rules.required, rules.min]"
                 :label="item.title"
               />

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/src/tools/TlmViewer/TlmViewer.vue

@@ -170,29 +170,29 @@
                 ></v-btn>
               </template>
             </v-tooltip>
-            <v-text-field
+            <v-number-input
               v-model="playbackStep"
+              control-variant="stacked"
               class="mr-4 ml-4"
               density="compact"
               hide-details
               variant="outlined"
               label="Step (Speed)"
               suffix="secs"
-              type="number"
-              step="1"
+              :step="1"
               data-test="playback-speed"
               style="max-width: 120px"
             />
-            <v-text-field
+            <v-number-input
               v-model="playbackSkip"
+              control-variant="stacked"
               class="mr-4"
               density="compact"
               hide-details
               variant="outlined"
               label="Skip"
               suffix="secs"
-              type="number"
-              step="1"
+              :step="1"
               data-test="skip"
               style="max-width: 120px"
             />

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/GraphEditDialog.vue

@@ -144,19 +144,19 @@
             </v-card-text>
             <v-row dense>
               <v-col class="px-2">
-                <v-text-field
+                <v-number-input
                   v-model="graph.graphMinY"
+                  control-variant="stacked"
                   hide-details
                   label="Min Y Axis (Optional)"
-                  type="number"
                 />
               </v-col>
               <v-col class="px-2">
-                <v-text-field
+                <v-number-input
                   v-model="graph.graphMaxY"
+                  control-variant="stacked"
                   hide-details
                   label="Max Y Axis (Optional)"
-                  type="number"
                 />
               </v-col>
             </v-row>

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/dataviewer/DataViewerHistoryComponent.vue

@@ -127,29 +127,29 @@
                       </v-radio-group>
                     </v-col>
                     <v-col>
-                      <v-text-field
+                      <v-number-input
                         v-model="currentConfig.history"
+                        control-variant="stacked"
                         label="History Buffer"
-                        type="number"
-                        min="1"
+                        :min="1"
                         persistent-hint
                         :rules="[rules.required, rules.min]"
                         data-test="history-component-settings-history"
                       />
-                      <v-text-field
+                      <v-number-input
                         v-if="hasRaw"
                         v-model="currentConfig.bytesPerLine"
+                        control-variant="stacked"
                         label="Bytes per line"
-                        type="number"
-                        min="1"
+                        :min="1"
                         :rules="[rules.required, rules.min]"
                         data-test="history-component-settings-num-bytes"
                       />
-                      <v-text-field
+                      <v-number-input
                         v-model="currentConfig.packetsToShow"
+                        control-variant="stacked"
                         label="Entries to show"
-                        type="number"
-                        min="1"
+                        :min="1"
                         :hint="`Maximum: ${currentConfig.history}`"
                         persistent-hint
                         :rules="[rules.required, rules.min, rules.max]"

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/admin/tabs/RedisTab.vue

@@ -68,10 +68,10 @@
             data-test="ephemeral-radio"
           />
         </v-radio-group>
-        <v-text-field
+        <v-number-input
           v-model="db_shard"
-          type="number"
-          min="0"
+          control-variant="stacked"
+          :min="0"
           label="DB Shard"
           hide-details
           density="compact"
@@ -103,7 +103,7 @@ export default {
       redisCommandText: '',
       redisResponse: null,
       redisEndpoint: 'persistent',
-      db_shard: '0',
+      db_shard: 0,
       prettyPrint: false,
       headers: [
         { text: 'Redis', value: 'redis', width: 150 },
@@ -151,7 +151,7 @@ export default {
       if (this.redisEndpoint === 'ephemeral') {
         params.push('ephemeral=1')
       }
-      if (this.db_shard && this.db_shard !== '0') {
+      if (this.db_shard && this.db_shard !== 0) {
         params.push(`db_shard=${this.db_shard}`)
       }
       if (params.length) {
@@ -167,7 +167,7 @@ export default {
         this.redisResponse = response.data.result
         let redis =
           this.redisEndpoint === 'ephemeral' ? 'Ephemeral' : 'Persistent'
-        if (this.db_shard !== '0') {
+        if (this.db_shard !== 0) {
           redis += ` (db_shard ${this.db_shard})`
         }
         this.commands.unshift({

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/admin/tabs/settings/ClassificationBannerSettings.vue

@@ -1,5 +1,5 @@
 <!--
-# Copyright 2024 OpenC3, Inc.
+# Copyright 2026 OpenC3, Inc.
 # All Rights Reserved.
 #
 # This program is distributed in the hope that it will be useful,
@@ -126,11 +126,11 @@
           />
         </v-col>
         <v-col>
-          <v-text-field
+          <v-number-input
             v-model="topHeight"
+            control-variant="stacked"
             label="Top height"
             :disabled="!displayTopBanner"
-            type="number"
             suffix="px"
             data-test="classification-banner-top-height"
           />
@@ -144,11 +144,11 @@
           />
         </v-col>
         <v-col>
-          <v-text-field
+          <v-number-input
             v-model="bottomHeight"
+            control-variant="stacked"
             label="Bottom height"
             :disabled="!displayBottomBanner"
-            type="number"
             suffix="px"
             data-test="classification-banner-bottom-height"
           />

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/admin/tabs/tsdb/TsdbMetrics.vue

@@ -30,10 +30,10 @@
         >
           Refresh
         </v-btn>
-        <v-text-field
+        <v-number-input
           v-model="db_shard"
-          type="number"
-          min="0"
+          control-variant="stacked"
+          :min="0"
           label="DB Shard"
           hint="DB Shard is N/A in Core"
           hide-details
@@ -322,7 +322,7 @@ export default {
       repairDialog: false,
       repairContext: null,
       gapSampleInterval: '1m',
-      db_shard: '0',
+      db_shard: 0,
     }
   },
   computed: {

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/admin/tabs/tsdb/TsdbQueries.vue

@@ -48,10 +48,10 @@
       >
         Execute
       </v-btn>
-      <v-text-field
+      <v-number-input
         v-model="db_shard"
-        type="number"
-        min="0"
+        control-variant="stacked"
+        :min="0"
         label="DB Shard"
         hide-details
         density="compact"
@@ -79,7 +79,7 @@ export default {
   data() {
     return {
       sqlText: '',
-      db_shard: '0',
+      db_shard: 0,
       columns: [],
       rows: [],
       errorMessage: null,

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/admin/tabs/tsdb/tsdbApi.js

@@ -20,7 +20,7 @@ export async function execSql(sql, db_shard, retries = 3) {
   for (let attempt = 1; attempt <= retries; attempt++) {
     try {
       let url = '/openc3-api/tsdb/exec'
-      if (db_shard && db_shard !== '0') {
+      if (db_shard && db_shard !== 0) {
         url += `?db_shard=${db_shard}`
       }
       return await Api.post(url, {

playwright/tests/tlm-viewer.p.spec.ts

@@ -386,15 +386,15 @@ test('plays back to a screen', async ({ page, utils }) => {
     .toBe(previousTime - 10)
 
   // Change step value to 2 and verify step forward increments by 2s
-  await page.getByRole('spinbutton', { name: 'Step (Speed)' }).fill('2')
+  await page.locator('[data-test="playback-speed"] input').fill('2')
   previousTime = parseTime(await packetTimeInput.inputValue())
   await page.locator('[data-test="playback-step-forward"]').click()
   await expect
     .poll(async () => parseTime(await packetTimeInput.inputValue()))
     .toBe(previousTime + 2)
 
   // Change skip value to 15 and verify skip forward increments by 15s
-  await page.getByRole('spinbutton', { name: 'Skip' }).fill('15')
+  await page.locator('[data-test="skip"] input').fill('15')
   previousTime = parseTime(await packetTimeInput.inputValue())
   await page.locator('[data-test="playback-skip-forward"]').click()
   await expect