refactor: adds pixels value string formatter

pedrolamas · pedrolamas · commit 9b0f6f896fff · 2025-03-17T17:51:14.000Z
Signed-off-by: Pedro Lamas &lt;pedrolamas@gmail.com&gt;
diff --git a/src/components/widgets/bedmesh/BedMeshCard.vue b/src/components/widgets/bedmesh/BedMeshCard.vue
@@ -57,7 +57,7 @@
         :options="options"
         :data="series"
         :graphics="graphics"
-        :height="(isMobileViewport) ? '225px' : '525px'"
+        :height="(isMobileViewport) ? 225 : 525"
       />
 
       <span v-else>{{ $t('app.bedmesh.msg.not_loaded') }}</span>
diff --git a/src/components/widgets/bedmesh/BedMeshChart.vue b/src/components/widgets/bedmesh/BedMeshChart.vue
@@ -1,7 +1,9 @@
 <template>
   <div
     class="chart"
-    :style="{ 'height': height }"
+    :style="{
+      height: $filters.getPixelsString(height)
+    }"
   >
     <e-chart
       ref="chart"
@@ -35,8 +37,8 @@ export default class BedMeshChart extends Mixins(BrowserMixin) {
   @Prop({ type: Object, default: () => {} })
   readonly options!: Record<string, unknown>
 
-  @Prop({ type: String, default: '100%' })
-  readonly height!: string
+  @Prop({ type: [String, Number], default: '100%' })
+  readonly height!: string | number
 
   @Ref('chart')
   readonly chart!: ECharts
diff --git a/src/components/widgets/filesystem/FileSystem.vue b/src/components/widgets/filesystem/FileSystem.vue
@@ -487,7 +487,7 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
         text: '',
         value: 'data-table-icons',
         sortable: false,
-        width: this.dense ? '28px' : '56px'
+        width: this.dense ? 28 : 56
       },
       {
         text: this.$tc('app.general.table.header.name'),
diff --git a/src/components/widgets/history/JobHistory.vue b/src/components/widgets/history/JobHistory.vue
@@ -369,7 +369,7 @@ export default class JobHistory extends Mixins(FilesMixin) {
         text: '',
         value: 'data-table-icons',
         sortable: false,
-        width: '24px'
+        width: 24
       },
       {
         text: this.$tc('app.general.table.header.name'),
diff --git a/src/components/widgets/job-queue/JobQueue.vue b/src/components/widgets/job-queue/JobQueue.vue
@@ -134,13 +134,13 @@ export default class JobQueue extends Vue {
         text: '',
         value: 'handle',
         sortable: false,
-        width: '24px'
+        width: 24
       },
       {
         text: '',
         value: 'data-table-icons',
         sortable: false,
-        width: this.dense ? '28px' : '56px'
+        width: this.dense ? 28 : 56
       },
       {
         text: this.$tc('app.general.table.header.name'),
diff --git a/src/components/widgets/spoolman/SpoolmanCard.vue b/src/components/widgets/spoolman/SpoolmanCard.vue
@@ -7,7 +7,7 @@
   >
     <template #menu>
       <app-btn
-        v-if="!targetableMacros.length"
+        v-if="!klippyReady || !targetableMacros.length"
         small
         class="me-1 my-1"
         :disabled="!isConnected"
@@ -42,6 +42,7 @@
             </v-icon>
           </app-btn>
         </template>
+
         <v-list dense>
           <v-list-item @click="handleSelectSpool">
             <v-list-item-content>
@@ -109,7 +110,7 @@
               <status-label
                 :key="`spoolman-card-${field}`"
                 :label="$t(`app.spoolman.label.${field}`)"
-                :label-width="labelWidth"
+                :label-width="86"
               >
                 <template v-if="field === 'remaining_weight'">
                   <span v-if="remainingFilamentUnit === 'weight'">
@@ -162,21 +163,21 @@
           <v-icon
             v-if="activeSpool"
             :color="getSpoolColor(activeSpool)"
-            size="110px"
+            size="110"
             class="spool-icon"
           >
             $filament
           </v-icon>
           <v-icon
             v-else-if="isConnected"
-            size="55px"
+            size="55"
           >
             $progressQuestion
           </v-icon>
           <v-icon
             v-else
             color="warning"
-            size="55px"
+            size="55"
           >
             $warning
           </v-icon>
@@ -204,8 +205,6 @@ type MacroWithSpoolId = Macro & {
   components: { StatusLabel }
 })
 export default class SpoolmanCard extends Mixins(StateMixin) {
-  labelWidth = '86px'
-
   handleSelectSpool (targetMacro?: Macro) {
     this.$typedCommit('spoolman/setDialogState', {
       show: true,
diff --git a/src/components/widgets/status/ReprintTab.vue b/src/components/widgets/status/ReprintTab.vue
@@ -111,7 +111,7 @@ export default class ReprintTab extends Mixins(StateMixin, FilesMixin) {
 
   get headers () {
     const headers = [
-      { text: '', value: 'data-table-icons', sortable: false, width: '24px' },
+      { text: '', value: 'data-table-icons', sortable: false, width: 24 },
       { text: this.$tc('app.general.table.header.name'), value: 'filename', sortable: false },
       { text: this.$tc('app.general.table.header.status'), value: 'status', sortable: false },
       { text: this.$tc('app.general.table.header.print_duration'), value: 'print_duration', sortable: false }
diff --git a/src/components/widgets/status/StatusLabel.vue b/src/components/widgets/status/StatusLabel.vue
@@ -2,7 +2,10 @@
   <v-layout align-center>
     <span
       class="label body-2 secondary--text"
-      :style="`width: ${labelWidth}; min-width: ${labelWidth};`"
+      :style="{
+        width: $filters.getPixelsString(labelWidth),
+        'min-width': $filters.getPixelsString(labelWidth)
+      }"
       v-html="label"
     />
     <span class="value"><slot /></span>
@@ -22,7 +25,7 @@ export default class AppSwitch extends Mixins(StateMixin) {
   @Prop({ type: String, required: true })
   readonly label!: string
 
-  @Prop({ type: [String, Number], default: '70px' })
+  @Prop({ type: [String, Number], default: 70 })
   readonly labelWidth!: string | number
 }
 </script>
diff --git a/src/components/widgets/thermals/TemperatureCard.vue b/src/components/widgets/thermals/TemperatureCard.vue
@@ -102,7 +102,7 @@
 
       <thermal-chart
         ref="thermalchart"
-        :height="(isMobileViewport) ? '180px' : '260px'"
+        :height="(isMobileViewport) ? 180 : 260"
       />
     </template>
   </collapsable-card>
diff --git a/src/components/widgets/thermals/ThermalChart.vue b/src/components/widgets/thermals/ThermalChart.vue
@@ -1,7 +1,9 @@
 <template>
   <div
     class="chart"
-    :style="{ 'height': height }"
+    :style="{
+      height: $filters.getPixelsString(height)
+    }"
   >
     <e-chart
       ref="chart"
@@ -26,8 +28,8 @@ import type { ChartData, ChartSelectedLegends } from '@/store/charts/types'
 
 @Component({})
 export default class ThermalChart extends Mixins(BrowserMixin) {
-  @Prop({ type: String, default: '100%' })
-  readonly height!: string
+  @Prop({ type: [String, Number], default: '100%' })
+  readonly height!: string | number
 
   @Ref('chart')
   readonly chart!: ECharts
diff --git a/src/util/string-formatters.ts b/src/util/string-formatters.ts
@@ -17,6 +17,20 @@ const stringFormatters = () => {
         .join(' ')
     },
 
+    getPixelsString: (value: number | string | undefined | null) => {
+      if (value == null || value === '') {
+        return undefined
+      }
+
+      const valueAsNumber = +value
+
+      if (isNaN(valueAsNumber)) {
+        return value.toString()
+      }
+
+      return `${valueAsNumber}px`
+    },
+
     getStringValueWithUnit: (value: number, fractionDigits: number, unit: string) => {
       if (value === 0) {
         return `0${unit}`

Original file line number	Diff line number	Diff line change
`@@ -487,7 +487,7 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM`
`487`	`487`	`text: '',`
`488`	`488`	`value: 'data-table-icons',`
`489`	`489`	`sortable: false,`
`490`		`- width: this.dense ? '28px' : '56px'`
	`490`	`+ width: this.dense ? 28 : 56`
`491`	`491`	`},`
`492`	`492`	`{`
`493`	`493`	`text: this.$tc('app.general.table.header.name'),`
Original file line number	Diff line number	Diff line change
`@@ -369,7 +369,7 @@ export default class JobHistory extends Mixins(FilesMixin) {`
`369`	`369`	`text: '',`
`370`	`370`	`value: 'data-table-icons',`
`371`	`371`	`sortable: false,`
`372`		`- width: '24px'`
	`372`	`+ width: 24`
`373`	`373`	`},`
`374`	`374`	`{`
`375`	`375`	`text: this.$tc('app.general.table.header.name'),`