luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Add optional name="" attribute so you can name slots with it (#6740) 

Pretty soon we would like to move to XML/Angle Bracket style
components. As they are XML-y it means you can't use positional
parameters anymore (every 'argument' for the component requires it to
use an XML-like attribute).

This adds a `name=""` attribute to both block-slot and yield-slot
components so we can use attributes to specify the name. We prefer using
attributes from now on, whilst the positional parameter is still
available yet deprecated so we can move over at whatever speed fits.

We also did the same with the block params positional parameter.

As a final note this entire in repo addon is a fork of
`ember-block-slots`
This commit is contained in:
John Cowen 2019-11-19 10:13:17 +00:00 committed by John Cowen
parent 976941ea5c
commit 4c24e8b072
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui-v2/lib/block-slots/addon/components/block-slot.js
View File

@ -1,13 +1,16 @@
import { readOnly } from '@ember/object/computed';
import Component from '@ember/component';
import { isPresent } from '@ember/utils';
import { set, defineProperty } from '@ember/object';
import { get, set, defineProperty, computed } from '@ember/object';
import layout from '../templates/components/block-slot';
import Slots from '../mixins/slots';
import YieldSlot from './yield-slot';
const BlockSlot = Component.extend({
layout,
tagName: '',
_name: computed('__name', 'name', function() {
return this.name || this.__name;
}),
didInsertElement: function() {
const slottedComponent = this.nearestOfType(Slots);
if (!slottedComponent._isRegistered(this._name)) {
@ -21,7 +24,7 @@ const BlockSlot = Component.extend({
// The slotted component will yield multiple times - once to register
// the activate slots and once more per active slot - only display this
// block when its associated slot is the one yielding
const isTargetSlotYielding = yieldSlot._name === this._name;
const isTargetSlotYielding = get(yieldSlot, '_name') === this._name;
set(this, 'isTargetSlotYielding', isTargetSlotYielding);
// If the associated slot has block params, create a computed property
@ -30,9 +33,10 @@ const BlockSlot = Component.extend({
// (see the yield in the block-slot template)
//
// Spread PR: https://github.com/wycats/handlebars.js/pull/1149
if (isTargetSlotYielding && isPresent(yieldSlot._blockParams)) {
const params = get(yieldSlot, '_blockParams');
if (isTargetSlotYielding && isPresent(params)) {
// p0 p1 p2...
yieldSlot._blockParams.forEach((param, index) => {
params.forEach((param, index) => {
defineProperty(this, `p${index}`, readOnly(`_yieldSlot._blockParams.${index}`));
});
}
@ -49,7 +53,7 @@ const BlockSlot = Component.extend({
});
BlockSlot.reopenClass({
positionalParams: ['_name'],
positionalParams: ['__name'],
});
export default BlockSlot;

8
ui-v2/lib/block-slots/addon/components/yield-slot.js
View File

@ -5,6 +5,12 @@ import Slots from '../mixins/slots';
const YieldSlotComponent = Component.extend({
layout,
tagName: '',
_name: computed('__name', 'name', function() {
return this.name || this.__name;
}),
_blockParams: computed('__blockParams', 'params', function() {
return this.params || this.__blockParams;
}),
_parentView: computed(function() {
return this.nearestOfType(Slots);
}),
@ -14,7 +20,7 @@ const YieldSlotComponent = Component.extend({
});
YieldSlotComponent.reopenClass({
positionalParams: ['_name', '_blockParams'],
positionalParams: ['__name', '__blockParams'],
});
export default YieldSlotComponent;