Description
There are many UI plugins that require passing in a view as a property, in xml this is achieved the following way:
<nsDrawer:RadSideDrawer id="sideDrawer">
<nsDrawer:RadSideDrawer.drawerContent>
<StackLayout>
<!-- etc -->
</StackLayout>
</nsDrawer:RadSideDrawer.drawerContent>
</nsDrawer:RadSideDrawer>When registering custom UI elements that use the same approach, the problem is that in ns-vue
<RadSideDrawer id="sideDrawer">
<StackLayout>
<!-- etc -->
</StackLayout>
</RadSideDrawer>tries to append the StackLayout as a child element, and results in nothing displaying.
My initial idea is to add a custom directive that will handle this, using a similar syntax to the default v-bind:, : or v-on, @ directives.
Naming things is hard, so please help me find a good name and syntax for the proposed directive.
The new syntax would look something like
<RadSideDrawer id="sideDrawer">
<StackLayout v-view:drawerContent>
<!-- etc -->
</StackLayout>
</RadSideDrawer>And it would probably make sense to add a shorthand version as well
<RadSideDrawer id="sideDrawer">
<StackLayout ~drawerContent>
<!-- etc -->
</StackLayout>
</RadSideDrawer>Leave your suggestion as a comment to what the name of the directive should be!
My initial idea is v-view:parentPropName, ~parentPropName for the shorthand version.
Checklist
- Add
v-viewdirective and~as the alias - Document usage in docs
- Decide if
v-viewis the right name for the directive. - Add
.arraymodifier - Add array mode shorthand alias
Allow setting a parent array property
So looks like we need to allow multiple children to be added to the parent's prop using an array. Either extend the module to detect arrays (this will likely break in many cases), or create a dedicated directive for setting the array.
Possible short syntax: ~~, ~[], ~.array etc (comment below if you have an idea)
Example:
<Parent>
<Child ~parentProp.array />
<Child ~parentProp.array />
<Child ~parentProp.array />
</Parent>
The long syntax would use a directive modifier: v-view:prop.array.