Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import '../src/custom-element.js';
export default
{ title: 'parameters', component: 'custom-element', argTypes:
{ title: { control: 'text', defaultValue: 'simple payload' }
, tag: { control: 'text', defaultValue: 'my-component' }
, payload: { control: 'text', defaultValue: `Hi` }
}
};
function Template( { title, tag , payload } )
{
return `
<fieldset>
<legend>${ title }</legend>
<custom-element tag="${ tag }" hidden>
<attribute name="p1" select="//p1 ?? 'def_p1' " ></attribute>
<attribute name="p2" select="'always_p2'" ></attribute>
<attribute name="p3" >default_P3 </attribute>
p1:{$p1} <br/> p2:{$p2} <br/> p3:{$p3}
</custom-element>
${ payload }
</fieldset>
`;
}
export const AttributeDefaults = Template.bind( {} );
AttributeDefaults.args =
{ title: `3 ways to declare DCE attribute default values`
, tag: 'dce-1'
, payload: `<dce-1 id="dce1"></dce-1>`
};
export const AttributeObservable = Template.bind( {} );
AttributeObservable.args =
{ title: `overriding attribute default values`
, tag: 'dce-observable'
, payload: `<dce-observable id="dce2" p1="123" p2="ignored" p3="P3"></dce-observable>`
};
export const AttributeUse = Template.bind( {} );
AttributeUse.args =
{ title: `overriding attribute default values`
, tag: 'dce-2'
, payload: `<dce-2 id="dce2" p1="123" p2="ignored" p3="P3"></dce-2>`
};
export const AttributeChange = Template.bind( {} );
AttributeChange.args =
{ title: `re-render to reflect dynamic attribute change`
, tag: 'dce-3'
, payload: `<dce-3 id="dce3" p1="123"></dce-3>
<button onclick="dce3.setAttribute('p1','changed_P1')">Change p1</button>
<button onclick="dce3.setAttribute('p2','changed_P2')">Change p2</button>
<button onclick="dce3.setAttribute('p3','changed_P3')">Change p3</button>
`
};
function TemplateSlice( { title } )
{
return `
<fieldset>
<legend>${ title }</legend>
<custom-element>
<template>
<attribute name="title" select="//title ?? '😃'"></attribute>
<input slice="/datadom/attributes/title" slice-event="keyup">
title attribute: {$title}
</template>
</custom-element>
</fieldset>
`;
}
export const AttributeFromSlice = TemplateSlice.bind( {} );
AttributeFromSlice.args =
{ title: `Slice from input propagated to title attribute. Type on input to see attribute change.`
};
|