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 | 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: 'dom-merge', component: 'custom-element', argTypes:
{ title: { control: 'text', defaultValue: 'simple payload' }
, tag: { control: 'text', defaultValue: 'my-component' }
, attributes: { control: 'text', defaultValue: '' }
, slot: { control: 'text', defaultValue: `Hello World` }
, payload: { control: 'text', defaultValue: `🍋` }
}
};
function Template( { title, tag , attributes, slot, payload } )
{
return `
<fieldset>
<legend>${ title }</legend>
<custom-element
tag="${ tag }"
hidden
>
${ slot }
</custom-element>
<${ tag } ${attributes}>${ payload }</${ tag }>
</fieldset>
`;
}
export const TextareaOnBlur = Template.bind( {} );
TextareaOnBlur.args =
{ title: 'Textarea value, type and observe char count update on focus change'
, tag: ''
, slot: ` <textarea slice="text-container" >Hello world!</textarea>
<p> Char count:
<b>{string-length(//slice/text-container/text())}</b>
</p>
<button> click to focus change </button>
`
};
export const InputOnChange = Template.bind( {} );
InputOnChange.args =
{ title: 'input value, type and observe char count update on keyup'
, slot: ` <input type="text" value="Type time update" slice="txt" slice-update="keyup"/>
<span> Character count:
<b> {string-length(//slice/txt)} </b>
</span>
<span> Word count:
<i> {string-length(normalize-space(//slice/txt)) -
string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1} </i>
</span>
`
};
|