Is your feature request related to a problem? Please describe.
Create CFlyout component, that can be used inside any other integrations and builder.
Describe the solution you'd like
Render vuetify v-dialog, with base Element component. Component is made of: header, content and footer, template/activator
Header:
Avatar icon - use helper method from sdk - contact M.Vucina
Flyout Title
Menu buttons - just render slot named menu
X - close icon
Options / Props for header part:
Title - String
showAvatar - Boolean - default true
Events:
Closed - emitted on X click
Footer
Action card component
Options / props:
ShowActions - Boolean - default true
cancelLabel - String - default value is 'cancel'
submitLabel - String - default value is 'submit'
3.1. Use CButton and expose some of its props (inside builder meta this would be a separate group). As component definition just define all the props that cbutton already has. This two previous labels (2, 3) could also be replaced with CButton prop label, so check what might be better. CFrom action buttons are using similar solution.
Also it would be nice that this footer part (actions) except those predefined action buttons, could allow user to define slot named actions and override predefined ones.
Events - on click:
Canceled
Submitted
Activator
Render template slot:activator. Inside builder this should be droppable area with ${this.baseChildrenClass}. Not sure if this is gonna work 🤷♀
Additional context
Central part of flyout should be named slot content, and we won't do anything with it for now. Inside builder this content part should be rendered as droppable area with ${this.baseChildrenClass}. Check card createBody method.
MVucina
commented
4 years ago
https://marvelapp.com/1ja724dg/screen/63729246/layer/106657899
Is your feature request related to a problem? Please describe. Create CFlyout component, that can be used inside any other integrations and builder.
Describe the solution you'd like Render vuetify v-dialog, with base Element component. Component is made of: header, content and footer, template/activator
Header:
Options / Props for header part:
Events:
Footer
Options / props:
Events - on click:
Activator
Additional context Central part of flyout should be named slot content, and we won't do anything with it for now. Inside builder this content part should be rendered as droppable area with ${this.baseChildrenClass}. Check card createBody method.
Also explore https://vuetifyjs.com/en/components/dialogs#dialogs props and define those you find useful. (Theme, fullscreen, scrollable, width...)