refactor: simplify custom component properties

Signed-off-by: Pedro Lamas <[email protected]>

Author: pedrolamas

src/components/settings/cameras/CameraConfigDialog.vue

@@ -59,15 +59,12 @@
           filled
           dense
           hide-details="auto"
-          initial-value="false"
           :items="[
             { text: $t('app.setting.camera_rotate_options.none'), value: 0 },
             { text: $t('app.setting.camera_rotate_options.90'), value: 90 },
             { text: $t('app.setting.camera_rotate_options.180'), value: 180 },
             { text: $t('app.setting.camera_rotate_options.270'), value: 270 }
           ]"
-          item-value="value"
-          item-text="text"
         />
       </app-setting>
 
@@ -89,18 +86,13 @@
             { text: $t('app.setting.camera_type_options.video'), value: 'ipstream' },
             { text: $t('app.setting.camera_type_options.iframe'), value: 'iframe' }
           ]"
-          item-value="value"
-          item-text="text"
         />
       </app-setting>
 
       <v-divider />
 
       <template v-if="camera.service === 'mjpegstreamer-adaptive'">
-        <app-setting
-
-          :title="$t('app.setting.label.fps_target')"
-        >
+        <app-setting :title="$t('app.setting.label.fps_target')">
           <v-text-field
             v-model.number="camera.target_fps"
             class="mt-5"
@@ -116,9 +108,7 @@
 
         <v-divider />
 
-        <app-setting
-          :title="$t('app.setting.label.fps_idle_target')"
-        >
+        <app-setting :title="$t('app.setting.label.fps_idle_target')">
           <v-text-field
             v-model.number="camera.target_fps_idle"
             class="mt-5"

src/components/settings/console/ConsoleFilterDialog.vue

@@ -49,8 +49,6 @@
           single-line
           hide-details="auto"
           :items="types"
-          item-value="value"
-          item-text="text"
         />
       </app-setting>
 

src/components/settings/timelapse/subsettings/ToolheadParkingSettings.vue

@@ -72,8 +72,6 @@
           hide-details="auto"
           :items="parkPositions"
           :disabled="parkposBlocked"
-          item-value="value"
-          item-text="text"
         />
       </app-setting>
 

src/components/ui/AppBtnToggle.vue

@@ -1,10 +1,10 @@
 <template>
   <v-btn-toggle
     v-model="inputValue"
-    v-bind="$attrs"
     :class="{
       'elevation-2': !disabled
     }"
+    v-bind="$attrs"
     v-on="$listeners"
   >
     <slot />

src/components/ui/AppBtnToolheadMove.vue

@@ -1,17 +1,17 @@
 <template>
   <v-tooltip
+    :disabled="!tooltip"
     top
   >
     <template #activator="{ on, attrs }">
       <app-btn
         :disabled="disabled"
         min-width="40"
-        :loading="loading"
         :color="color"
-        v-bind="(tooltip !== '') ? attrs : undefined"
         class="px-2"
+        v-bind="{...$attrs, ...attrs}"
+        v-on="{...$listeners, ...on}"
         @click="$emit('click')"
-        v-on="(tooltip !== '') ? on : undefined"
       >
         <v-icon
           v-if="icon"
@@ -41,11 +41,8 @@ export default class AppBtnToolheadMove extends Vue {
   @Prop({ type: String, default: 'btncolor' })
   readonly color!: string
 
-  @Prop({ type: Boolean })
-  readonly loading?: boolean
-
-  @Prop({ type: String, default: '' })
-  readonly tooltip!: string
+  @Prop({ type: String })
+  readonly tooltip?: string
 
   @Prop({ type: Boolean })
   readonly smallIcon?: boolean

src/components/ui/AppChipColor.vue

@@ -1,10 +1,10 @@
 <template>
   <v-chip
-    v-bind="$attrs"
     :style="{
       background: color
     }"
     small
+    v-bind="$attrs"
     v-on="$listeners"
   >
     <slot />

src/components/ui/AppDataTableCellColors.vue

@@ -7,11 +7,11 @@
     >
       <template #activator="{ on, attrs }">
         <app-chip-color
-          v-bind="{...$attrs, ...attrs}"
           :color="color"
           :class="{
             'ms-1': index > 0
           }"
+          v-bind="{...$attrs, ...attrs}"
           v-on="{...$listeners, ...on }"
         />
       </template>

src/components/ui/AppDataTableCellTemps.vue

@@ -7,6 +7,8 @@
         'ms-1': index > 0
       }"
       small
+      v-bind="$attrs"
+      v-on="$listeners"
     >
       {{ temp }}<small>°C</small>
     </v-chip>

src/components/ui/AppDialog.vue

@@ -3,9 +3,9 @@
     v-model="open"
     :scrollable="scrollable"
     :persistent="persistent"
-    v-bind="$attrs"
     :fullscreen="isMobileViewport"
     :transition="isMobileViewport ? 'dialog-bottom-transition' : undefined"
+    v-bind="$attrs"
     v-on="$listeners"
   >
     <v-form

src/components/ui/AppDragOverlay.vue

@@ -1,9 +1,9 @@
 <template>
   <v-overlay
-    v-bind="$attrs"
     class="dragOverlay"
-    :value="value"
     :opacity="0.85"
+    v-bind="$attrs"
+    v-on="$listeners"
   >
     <v-container>
       <v-row
@@ -37,9 +37,6 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
   inheritAttrs: false
 })
 export default class AppDragOverlay extends Vue {
-  @Prop({ type: Boolean })
-  readonly value?: boolean
-
   @Prop({ type: String, required: true })
   readonly message!: string
 

src/components/ui/AppInlineHelp.vue

@@ -7,11 +7,10 @@
   >
     <template #activator="{ on, attrs }">
       <v-icon
-        v-bind="attrs"
         :color="type"
-        :small="small"
         class="ml-2"
-        v-on="on"
+        v-bind="{...$attrs, attrs}"
+        v-on="{...$listeners, ...on}"
       >
         {{ (type === 'error' || type === 'warning') ? '$warning' : '$help' }}
       </v-icon>
@@ -44,8 +43,5 @@ export default class AppInlineHelp extends Vue {
 
   @Prop({ type: Boolean })
   readonly right?: boolean
-
-  @Prop({ type: Boolean })
-  readonly small?: boolean
 }
 </script>

src/components/ui/AppNamedSelect.vue

@@ -12,17 +12,12 @@
       <v-select
         v-model="inputValue"
         class="mt-0"
-        :items="items"
         :disabled="disabled || loading"
-        :prefix="prefix"
-        :suffix="suffix"
-        :item-value="itemValue"
-        :item-text="itemText"
-        :return-object="returnObject"
         dense
         single-line
         outlined
         hide-details
+        v-bind="$attrs"
         v-on="$listeners"
       >
         <template #prepend>
@@ -57,9 +52,6 @@ export default class AppNamedSelect extends Vue {
   @Prop({ })
   readonly resetValue?: unknown
 
-  @Prop({ type: Array })
-  readonly items?: unknown[]
-
   @Prop({ type: String, required: true })
   readonly label!: string
 
@@ -69,21 +61,6 @@ export default class AppNamedSelect extends Vue {
   @Prop({ type: Boolean })
   readonly loading?: boolean
 
-  @Prop({ type: String })
-  readonly prefix?: string
-
-  @Prop({ type: String })
-  readonly suffix?: string
-
-  @Prop({ type: String })
-  readonly itemValue?: string
-
-  @Prop({ type: String })
-  readonly itemText?: string
-
-  @Prop({ type: Boolean })
-  readonly returnObject?: boolean
-
   handleReset () {
     if (this.resetValue !== undefined) {
       this.$emit('change', this.resetValue)

src/components/ui/AppNamedSlider.vue

@@ -19,8 +19,6 @@
       <v-col>
         <v-text-field
           v-model="currentValue"
-          :prefix="prefix"
-          :suffix="suffix"
           :rules="textRules"
           :disabled="disabled || loading"
           :step="step"
@@ -30,6 +28,7 @@
           single-line
           outlined
           hide-details
+          v-bind="$attrs"
           @focus="handleFocus"
           @blur="handleBlur"
           @keyup.enter.exact="handleSubmit(+currentValue)"
@@ -123,12 +122,6 @@ export default class AppNamedSlider extends Vue {
   @Prop({ type: Number, default: 1 })
   readonly step!: number
 
-  @Prop({ type: String })
-  readonly prefix?: string
-
-  @Prop({ type: String })
-  readonly suffix?: string
-
   @Prop({ type: Boolean })
   readonly fullWidth?: boolean
 

src/components/ui/AppNamedSwitch.vue

@@ -12,9 +12,8 @@
       v-model="inputValue"
       class="mt-0"
       :disabled="disabled || loading"
-      :true-value="trueValue"
-      :false-value="falseValue"
       hide-details
+      v-bind="$attrs"
       v-on="$listeners"
     />
   </v-layout>
@@ -38,11 +37,5 @@ export default class AppNamedSwitch extends Vue {
 
   @Prop({ type: Boolean })
   readonly loading?: boolean
-
-  @Prop({ })
-  readonly trueValue?: unknown
-
-  @Prop({ })
-  readonly falseValue?: unknown
 }
 </script>

src/components/ui/AppNamedTextField.vue

@@ -11,17 +11,13 @@
     <v-col>
       <app-text-field
         v-model="inputValue"
-        :type="type"
         :disabled="disabled || loading"
-        :readonly="readonly"
-        :prefix="prefix"
-        :suffix="suffix"
-        :rules="rules"
         class="v-input--text-right"
         dense
         single-line
         hide-details
         outlined
+        v-bind="$attrs"
         v-on="$listeners"
       >
         <template #prepend>
@@ -46,7 +42,6 @@
 <script lang="ts">
 import { Component, Mixins, Prop, VModel } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
-import type { InputValidationRules } from 'vuetify'
 
 @Component({
   inheritAttrs: false
@@ -55,33 +50,18 @@ export default class AppNamedTextField extends Mixins(StateMixin) {
   @VModel({ })
   inputValue?: unknown
 
-  @Prop({ type: String })
-  readonly type?: string
-
   @Prop({ type: String, required: true })
   readonly label!: string
 
   @Prop({ })
   readonly resetValue?: unknown
 
-  @Prop({ type: Boolean })
-  readonly readonly?: boolean
-
   @Prop({ type: Boolean })
   readonly disabled?: boolean
 
   @Prop({ type: Boolean })
   readonly loading?: boolean
 
-  @Prop({ type: String })
-  readonly prefix!: string
-
-  @Prop({ type: String })
-  readonly suffix!: string
-
-  @Prop({ type: Array })
-  readonly rules?: InputValidationRules[]
-
   handleReset () {
     if (this.resetValue !== undefined) {
       this.inputValue = this.resetValue

src/components/ui/AppSetting.vue

@@ -1,11 +1,11 @@
 <template>
   <v-row
     no-gutters
-    v-bind="$attrs"
     :class="{
       'sc-link': hasClick
     }"
     class="app-setting-control"
+    v-bind="$attrs"
     v-on="$listeners"
   >
     <div

src/components/ui/AppTextFieldWithCopy.vue

@@ -1,8 +1,8 @@
 <template>
   <v-text-field
     v-model="inputValue"
-    v-bind="$attrs"
     class="app-text-field"
+    v-bind="$attrs"
     v-on="$listeners"
   >
     <template #append-outer>