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 | 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';
import '../src/local-storage.js';
export default
{ title: 'local-storage', component: 'local-storage', argTypes:
{ title: { control: 'text', defaultValue: 'read only' }
, tag: { control: 'text', defaultValue: 'ls-test-component' }
, body: { control: 'text', defaultValue: `<xsl:value-of select="//slice/fruits/text()"></xsl:value-of>` }
// local-storage props
, key: { control: 'text', type: { name: 'string', required: true }, defaultValue: `cherries` }
, value: { control: 'text', type: { name: 'string', required: true }, defaultValue: `🍒 from localStorage` }
, slice: { control: 'text', type: { name: 'string', required: true }, defaultValue: `fruits` }
, type: { control: 'text', type: { name: 'string', required: true }, defaultValue: `string`, description: 'string|json|input type' }
, live: { control: 'boolean', type: { name: 'boolean', required: true }, defaultValue: false, description: 'string|json|input type' }
}
, parameters: { controls: { sort: 'requiredFirst' } },
};
function Template( { title, tag , body, key, value, slice, type, live } )
{
localStorage.setItem(key,value);
return `
<fieldset>
<legend>${ title }. <code>localStorage[${key}]="${localStorage[key]}</code>"</legend>
<custom-element
tag="${ tag }"
hidden
>
<local-storage key="${ key }" slice="${ slice }" type="${type}" ${live?'live':''}></local-storage>
${ body }
</custom-element>
<${ tag }></${ tag }>
</fieldset>
`;
}
export const LocalStorageLoad = Template.bind( {} );
LocalStorageLoad.args =
{
body: `fruits slice: <xsl:value-of select="//slice/fruits/text()"></xsl:value-of>`
};
export const LocalStorageLive = Template.bind( {} );
LocalStorageLive.args =
{ title: 'Live update and JSON',
type: 'json',
live: true,
key: 'basket',
slice: 'basket',
value: '{"cherries": 12, "lemons":1 }',
tag: 'ls-live-component',
body: `<html:table xmlns:html="http://www.w3.org/1999/xhtml">
<xsl:for-each select="//slice/basket/@*">
<html:tr>
<html:th><xsl:value-of select="name()"/></html:th>
<html:td><xsl:value-of select="."/></html:td>
</html:tr>
</xsl:for-each>
<html:tfoot>
<html:tr>
<html:td><slot>🤔</slot></html:td>
<html:th><xsl:value-of select="sum(//slice/basket/@*)"/></html:th>
</html:tr>
</html:tfoot>
</html:table>`
};
|