feat(vue-vuetify): add prepend and append slots to control renderers

yaffol · yaffol · commit c718f0d77239 · 2025-11-26T23:09:57.000Z
diff --git a/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue b/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue
@@ -27,12 +27,19 @@
           : undefined
       "
       :items="items"
-      :clearable="control.enabled"
+      :clearable="appliedOptions.clearable !== undefined ? appliedOptions.clearable : control.enabled"
       v-bind="vuetifyProps('v-combobox')"
       @update:model-value="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    />
+    >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
+    </v-combobox>
   </control-wrapper>
 </template>
 
diff --git a/packages/vue-vuetify/src/controls/BooleanControlRenderer.vue b/packages/vue-vuetify/src/controls/BooleanControlRenderer.vue
@@ -22,7 +22,14 @@
       @update:model-value="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    />
+    >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
+    </v-checkbox>
   </control-wrapper>
 </template>
 
diff --git a/packages/vue-vuetify/src/controls/BooleanToggleControlRenderer.vue b/packages/vue-vuetify/src/controls/BooleanToggleControlRenderer.vue
@@ -25,7 +25,14 @@
       @update:model-value="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    />
+    >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
+    </v-switch>
   </control-wrapper>
 </template>
 
diff --git a/packages/vue-vuetify/src/controls/DateControlRenderer.vue b/packages/vue-vuetify/src/controls/DateControlRenderer.vue
@@ -19,11 +19,18 @@
       :error-messages="control.errors"
       v-bind="vuetifyProps('v-text-field')"
       v-model="inputModel"
-      :clearable="control.enabled"
+      :clearable="
+        appliedOptions.clearable !== undefined
+          ? appliedOptions.clearable
+          : control.enabled
+      "
       @focus="handleFocus"
       @blur="handleBlur"
       v-maska:[options]="maska"
     >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
       <template v-slot:prepend-inner>
         <v-menu
           v-model="showMenu"
@@ -71,6 +78,9 @@
           </v-confirm-edit>
         </v-menu>
       </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
     </v-text-field>
   </control-wrapper>
 </template>
diff --git a/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue b/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue
@@ -19,11 +19,14 @@
       :error-messages="control.errors"
       v-bind="vuetifyProps('v-text-field')"
       v-model="inputModel"
-      :clearable="control.enabled"
+      :clearable="appliedOptions.clearable !== undefined ? appliedOptions.clearable : control.enabled"
       @focus="handleFocus"
       @blur="handleBlur"
       v-maska:[options]="maska"
     >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
       <template v-slot:prepend-inner>
         <v-menu
           v-model="showMenu"
@@ -194,6 +197,9 @@
           </v-confirm-edit>
         </v-menu>
       </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
     </v-text-field>
   </control-wrapper>
 </template>
diff --git a/packages/vue-vuetify/src/controls/EnumControlRenderer.vue b/packages/vue-vuetify/src/controls/EnumControlRenderer.vue
@@ -17,7 +17,7 @@
       :persistent-hint="persistentHint()"
       :required="control.required"
       :error-messages="control.errors"
-      :clearable="control.enabled"
+      :clearable="appliedOptions.clearable !== undefined ? appliedOptions.clearable : control.enabled"
       :model-value="control.data"
       :items="control.options"
       item-title="label"
@@ -26,7 +26,14 @@
       @update:model-value="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    />
+    >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
+    </v-select>
   </control-wrapper>
 </template>
 
diff --git a/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue b/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
@@ -19,12 +19,19 @@
       :required="control.required"
       :error-messages="control.errors"
       :model-value="value"
-      :clearable="control.enabled"
+      :clearable="appliedOptions.clearable !== undefined ? appliedOptions.clearable : control.enabled"
       v-bind="vuetifyProps('v-text-field')"
       @update:model-value="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    ></v-number-input>
+    >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
+    </v-number-input>
   </control-wrapper>
 </template>
 
diff --git a/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue b/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue
@@ -26,13 +26,20 @@
           ? control.schema.maxLength
           : undefined
       "
-      :clearable="control.enabled"
+      :clearable="appliedOptions.clearable !== undefined ? appliedOptions.clearable : control.enabled"
       multi-line
       v-bind="vuetifyProps('v-textarea')"
       @update:model-value="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    />
+    >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
+    </v-textarea>
   </control-wrapper>
 </template>
 
diff --git a/packages/vue-vuetify/src/controls/NumberControlRenderer.vue b/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
@@ -20,12 +20,19 @@
       :required="control.required"
       :error-messages="control.errors"
       :model-value="value"
-      :clearable="control.enabled"
+      :clearable="appliedOptions.clearable !== undefined ? appliedOptions.clearable : control.enabled"
       v-bind="vuetifyProps('v-number-input')"
       @update:model-value="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    ></v-number-input>
+    >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
+    </v-number-input>
   </control-wrapper>
 </template>
 
diff --git a/packages/vue-vuetify/src/controls/OneOfEnumControlRenderer.vue b/packages/vue-vuetify/src/controls/OneOfEnumControlRenderer.vue
@@ -17,7 +17,7 @@
       :persistent-hint="persistentHint()"
       :required="control.required"
       :error-messages="control.errors"
-      :clearable="control.enabled"
+      :clearable="appliedOptions.clearable !== undefined ? appliedOptions.clearable : control.enabled"
       :model-value="control.data"
       :items="control.options"
       item-title="label"
@@ -26,7 +26,14 @@
       @update:model-value="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    />
+    >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
+    </v-select>
   </control-wrapper>
 </template>
 
diff --git a/packages/vue-vuetify/src/controls/OneOfRadioGroupControlRenderer.vue b/packages/vue-vuetify/src/controls/OneOfRadioGroupControlRenderer.vue
@@ -24,13 +24,19 @@
       @focus="handleFocus"
       @blur="handleBlur"
     >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
       <v-radio
         v-for="o in control.options"
         v-bind="vuetifyProps(`v-radio[${o.value}]`)"
         :key="o.value"
         :label="o.label"
         :value="o.value"
       ></v-radio>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
     </v-radio-group>
   </control-wrapper>
 </template>
diff --git a/packages/vue-vuetify/src/controls/PasswordControlRenderer.vue b/packages/vue-vuetify/src/controls/PasswordControlRenderer.vue
@@ -36,7 +36,12 @@
       @update:model-value="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    />
+    >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
+      <!-- No append slot - uses built-in append-icon for password visibility toggle -->
+    </v-text-field>
   </control-wrapper>
 </template>
 
diff --git a/packages/vue-vuetify/src/controls/RadioGroupControlRenderer.vue b/packages/vue-vuetify/src/controls/RadioGroupControlRenderer.vue
@@ -24,13 +24,19 @@
       @focus="handleFocus"
       @blur="handleBlur"
     >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
       <v-radio
         v-for="o in control.options"
         v-bind="vuetifyProps(`v-radio[${o.value}]`)"
         :key="o.value"
         :label="o.label"
         :value="o.value"
       ></v-radio>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
     </v-radio-group>
   </control-wrapper>
 </template>
diff --git a/packages/vue-vuetify/src/controls/SliderControlRenderer.vue b/packages/vue-vuetify/src/controls/SliderControlRenderer.vue
@@ -25,7 +25,14 @@
       @update:model-value="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    />
+    >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
+    </v-slider>
   </control-wrapper>
 </template>
 
diff --git a/packages/vue-vuetify/src/controls/StringControlRenderer.vue b/packages/vue-vuetify/src/controls/StringControlRenderer.vue
@@ -26,15 +26,22 @@
           ? control.schema.maxLength
           : undefined
       "
-      :clearable="control.enabled"
+      :clearable="appliedOptions.clearable !== undefined ? appliedOptions.clearable : control.enabled"
       :model-value="control.data"
       :items="suggestions"
       hide-no-data
       v-bind="vuetifyProps('v-combobox')"
       @update:model-value="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    />
+    >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
+    </v-combobox>
     <v-text-field
       v-else
       v-disabled-icon-focus
@@ -57,12 +64,19 @@
           ? control.schema.maxLength
           : undefined
       "
-      :clearable="control.enabled"
+      :clearable="appliedOptions.clearable !== undefined ? appliedOptions.clearable : control.enabled"
       v-bind="vuetifyProps('v-text-field')"
       @update:model-value="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    />
+    >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
+    </v-text-field>
   </control-wrapper>
 </template>
 
diff --git a/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue b/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
@@ -25,14 +25,21 @@
           ? control.schema.maxLength
           : undefined
       "
-      :clearable="control.enabled"
+      :clearable="appliedOptions.clearable !== undefined ? appliedOptions.clearable : control.enabled"
       @click:clear="clear"
       v-bind="vuetifyProps('v-text-field')"
       @focus="handleFocus"
       @blur="handleBlur"
       v-model="maskModel"
       v-maska:[options]
-    />
+    >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
+    </v-text-field>
   </control-wrapper>
 </template>
 
diff --git a/packages/vue-vuetify/src/controls/TimeControlRenderer.vue b/packages/vue-vuetify/src/controls/TimeControlRenderer.vue
@@ -19,11 +19,14 @@
       :error-messages="control.errors"
       v-bind="vuetifyProps('v-text-field')"
       v-model="inputModel"
-      :clearable="control.enabled"
+      :clearable="appliedOptions.clearable !== undefined ? appliedOptions.clearable : control.enabled"
       @focus="handleFocus"
       @blur="handleBlur"
       v-maska:[options]="maska"
     >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
       <template v-slot:prepend-inner>
         <v-menu
           v-model="showMenu"
@@ -87,6 +90,9 @@
           </v-confirm-edit>
         </v-menu>
       </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
     </v-text-field>
   </control-wrapper>
 </template>
