Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] VDateInput - Add a slot to customize the VDatePicker child-components action slot directly #20690

Open
ysufmv opened this issue Nov 11, 2024 · 1 comment
Labels
C: VDateInput good first issue A quick-win fix that would be great for new contributors T: enhancement Functionality that enhances existing features

Comments

@ysufmv
Copy link

ysufmv commented Nov 11, 2024

Problem to solve

Currently, the VDateInput doesn't have any slots except the default slot.

Request to add a slot to manipulate the Actions directly on VDateInput. This would allow the VDateInput to modify the VDatePicker action slot so that the contents of the actions can be customized. For example replace the buttons with new ones like: Today, Yesterday etc.

Proposed solution

Add an action slot to VDateInput that would replace the action slot on the VDatePicker child-component

@ysufmv
Copy link
Author

ysufmv commented Nov 12, 2024

Turns out the VDateInputs actions are provided by VConfirmEdit

After looking at the code, we can modify code to slot it in easily:

 <VConfirmEdit
              { ...confirmEditProps }
              v-model={ model.value }
              onSave={ onSave }
            >
              {{
                default: ({ actions, model: proxyModel }) => {
                  const slotProps = { actions, model: proxyModel }
                  return (
                    <VDatePicker
                      { ...datePickerProps }
                      modelValue={ props.hideActions ? model.value : proxyModel.value }
                      onUpdate:modelValue={ val => {
                        if (!props.hideActions) {
                          proxyModel.value = val
                        } else {
                          model.value = val

                          if (!props.multiple) menu.value = false
                        }
                      }}
                      onMousedown={ (e: MouseEvent) => e.preventDefault() }
                    >
                       {{
                        actions: slots.actions
                          ? () => slots.actions(slotProps)
                          : (!props.hideActions ? () => actions : undefined),
                      }}
                    </VDatePicker>
                  )
                },
              }}
            </VConfirmEdit>

I am not familiar with pull requests.. so I'll just leave this link here for the full code: Link

@MatthewAry MatthewAry added good first issue A quick-win fix that would be great for new contributors C: VDateInput T: enhancement Functionality that enhances existing features labels Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VDateInput good first issue A quick-win fix that would be great for new contributors T: enhancement Functionality that enhances existing features
Projects
None yet
Development

No branches or pull requests

2 participants