feat(VColorInput, VDateInput): add picker-props

Author: J-Sek

packages/api-generator/src/locale/en/generic.json

@@ -47,6 +47,7 @@
     "origin": "Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).",
     "persistent": "Clicking outside or pressing **esc** key will not dismiss the dialog.",
     "persistentCounter": "Forces counter to always be visible.",
+    "pickerProps": "Pass props through to the picker component. Intended for props that conflict with `v-text-field` (`color`, `width`, `rounded`, etc.)",
     "prependAvatar": "Prepends a [v-avatar](/components/avatars/) component in the **prepend** slot before default content.",
     "prependIcon": "Creates a [v-icon](/api/v-icon/) component in the **prepend** slot before default content.",
     "ripple": "Applies the [v-ripple](/directives/ripple) directive.",

packages/vuetify/src/labs/VColorInput/VColorInput.tsx

@@ -50,6 +50,7 @@ export const makeVColorInputProps = propsFactory({
     type: String as PropType<VAvatar['$props']['variant']>,
     default: 'text',
   },
+  pickerProps: Object as PropType<VColorPicker['$props']>,
 
   ...makeFocusProps(),
   ...makeVConfirmEditProps(),
@@ -111,15 +112,18 @@ export const VColorInput = genericComponent<VColorInputSlots>()({
 
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props)
-      const colorPickerProps = VColorPicker.filterProps(omit(props, [
-        'active',
-        'bgColor',
-        'color',
-        'rounded',
-        'maxWidth',
-        'minWidth',
-        'width',
-      ]))
+      const colorPickerProps = {
+        ...VColorPicker.filterProps(omit(props, [
+          'active',
+          'bgColor',
+          'color',
+          'rounded',
+          'maxWidth',
+          'minWidth',
+          'width',
+        ])),
+        ...props.pickerProps,
+      }
       const textFieldProps = VTextField.filterProps(props)
 
       const slotWithPip = props.hidePip

packages/vuetify/src/labs/VDateInput/VDateInput.tsx

@@ -53,6 +53,7 @@ export const makeVDateInputProps = propsFactory({
     type: Array as PropType<('blur' | 'enter')[]>,
     default: () => ['blur', 'enter'],
   },
+  pickerProps: Object as PropType<VDatePicker['$props']>,
 
   ...makeDateFormatProps(),
   ...makeDisplayProps({
@@ -260,16 +261,19 @@ export const VDateInput = genericComponent<new <
 
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props)
-      const datePickerProps = VDatePicker.filterProps(omit(props, [
-        'active',
-        'bgColor',
-        'color',
-        'location',
-        'rounded',
-        'maxWidth',
-        'minWidth',
-        'width',
-      ]))
+      const datePickerProps = {
+        ...VDatePicker.filterProps(omit(props, [
+          'active',
+          'bgColor',
+          'color',
+          'location',
+          'rounded',
+          'maxWidth',
+          'minWidth',
+          'width',
+        ])),
+        ...props.pickerProps,
+      }
       const datePickerSlots = pick(slots, ['title', 'header', 'day', 'month', 'year'])
       const textFieldProps = VTextField.filterProps(omit(props, ['placeholder']))