mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
parent
e85eda8279
commit
9bba8d18d1
@ -1 +1 @@
|
||||
<svelte:component {foo ? Foo : Bar}></svelte:component>
|
||||
<svelte:component this="{foo ? Foo : Bar}"></svelte:component>
|
||||
@ -0,0 +1,52 @@
|
||||
<button use:tooltip="tooltip">action</button>
|
||||
<svelte:window on:keydown="checkForCtrl(event)" on:keyup="checkForCtrl(event)"/>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return { tooltip: 'Perform an Action' };
|
||||
},
|
||||
|
||||
methods: {
|
||||
checkForCtrl(event) {
|
||||
if (event.ctrlKey) {
|
||||
this.set({ tooltip: 'Perform an augmented Action' });
|
||||
} else {
|
||||
this.set({ tooltip: 'Perform an Action' });
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
tooltip(node, text) {
|
||||
let tooltip = null;
|
||||
|
||||
function onMouseEnter() {
|
||||
tooltip = document.createElement('div');
|
||||
tooltip.classList.add('tooltip');
|
||||
tooltip.textContent = text;
|
||||
node.parentNode.appendChild(tooltip);
|
||||
}
|
||||
|
||||
function onMouseLeave() {
|
||||
if (!tooltip) return;
|
||||
tooltip.remove();
|
||||
tooltip = null;
|
||||
}
|
||||
|
||||
node.addEventListener('mouseenter', onMouseEnter);
|
||||
node.addEventListener('mouseleave', onMouseLeave);
|
||||
|
||||
return {
|
||||
update(text) {
|
||||
if (tooltip) tooltip.textContent = text;
|
||||
},
|
||||
destroy() {
|
||||
node.removeEventListener('mouseenter', onMouseEnter);
|
||||
node.removeEventListener('mouseleave', onMouseLeave);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,13 @@
|
||||
<svelte:component this="{x ? Foo : Bar}"/>
|
||||
|
||||
<script>
|
||||
import Foo from './Foo.html';
|
||||
import Bar from './Bar.html';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Foo,
|
||||
Bar
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1 @@
|
||||
<svelte:window bind:innerWidth='width'/>
|
||||
@ -0,0 +1 @@
|
||||
<p>green {foo}</p>
|
||||
@ -0,0 +1 @@
|
||||
<p>red {foo}</p>
|
||||
@ -0,0 +1,15 @@
|
||||
<svelte:component this="{x ? Green : Red}" bind:foo />
|
||||
|
||||
<script>
|
||||
import Green from './Green-v2.html';
|
||||
import Red from './Red-v2.html';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
Green,
|
||||
Red
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,12 @@
|
||||
<svelte:component this="{ x ? Foo : Bar }" bind:y bind:z/>
|
||||
|
||||
<script>
|
||||
import Foo from './Foo.html';
|
||||
import Bar from './Bar.html';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return { Foo, Bar };
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,12 @@
|
||||
<svelte:component this="{ x ? Foo : Bar }" on:select='set({ selected: event.id })'/>
|
||||
|
||||
<script>
|
||||
import Foo from './Foo.html';
|
||||
import Bar from './Bar.html';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return { Foo, Bar };
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1 @@
|
||||
<p>{x}, therefore Bar</p>
|
||||
@ -0,0 +1 @@
|
||||
<p>{x}, therefore Foo</p>
|
||||
@ -0,0 +1,14 @@
|
||||
<div>
|
||||
<svelte:component this="{ x ? Foo : Bar }" x='{x}'/>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import Foo from './Foo-v2.html';
|
||||
import Bar from './Bar-v2.html';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return { Foo, Bar };
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,11 @@
|
||||
<svelte:component this={foo} ref:test/>
|
||||
|
||||
<script>
|
||||
import Foo from './Foo.html';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return { foo: Foo };
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,45 @@
|
||||
<svelte:component this="{ x ? Foo : Bar }" x='{x}'>
|
||||
<p>element</p>
|
||||
|
||||
{tag}
|
||||
|
||||
{#if foo}
|
||||
<p>foo</p>
|
||||
{:elseif bar}
|
||||
<p>bar</p>
|
||||
{:else}
|
||||
<p>neither foo nor bar</p>
|
||||
{/if}
|
||||
|
||||
text
|
||||
|
||||
{#each things as thing}
|
||||
<span>{thing}</span>
|
||||
{/each}
|
||||
|
||||
<Baz/>
|
||||
|
||||
<div slot='other'>what goes up must come down</div>
|
||||
</svelte:component>
|
||||
|
||||
<script>
|
||||
import Foo from './Foo.html';
|
||||
import Bar from './Bar.html';
|
||||
import Baz from './Baz.html';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
Foo,
|
||||
Bar,
|
||||
|
||||
tag: 'you\'re it',
|
||||
things: ['a', 'b', 'c']
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
Baz
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1 @@
|
||||
<p>Bar {x}</p>
|
||||
@ -0,0 +1 @@
|
||||
<p>Foo {x}</p>
|
||||
@ -0,0 +1,12 @@
|
||||
<svelte:component this="{ x ? Foo : Bar }" x='{x}'/>
|
||||
|
||||
<script>
|
||||
import Foo from './Foo-v2.html';
|
||||
import Bar from './Bar-v2.html';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return { Foo, Bar };
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,4 @@
|
||||
<svelte:head>
|
||||
<title>a {adjective} title</title>
|
||||
<meta name='twitter:creator' content='@sveltejs'>
|
||||
</svelte:head>
|
||||
@ -0,0 +1,4 @@
|
||||
<svelte:head>
|
||||
<title>changed</title>
|
||||
<meta name='twitter:creator' content='@sveltejs'>
|
||||
</svelte:head>
|
||||
@ -0,0 +1,11 @@
|
||||
<article class='file {file.type}'>
|
||||
<span class='name'>{file.name}</span>
|
||||
|
||||
{#if file.type === 'folder'}
|
||||
<ul>
|
||||
{#each file.children as child}
|
||||
<li><svelte:self file='{child}'/></li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</article>
|
||||
@ -0,0 +1,4 @@
|
||||
<span>{depth}</span>
|
||||
{#if depth > 0}
|
||||
<svelte:self depth='{depth - 1}'/>
|
||||
{/if}
|
||||
@ -0,0 +1,3 @@
|
||||
<svelte:window bind:scrollY/>
|
||||
|
||||
<div style='width: 100%; height: 9999px;'></div>
|
||||
@ -0,0 +1,3 @@
|
||||
<svelte:window bind:innerWidth='width' bind:innerHeight='height'/>
|
||||
|
||||
<div>{width}x{height}</div>
|
||||
@ -0,0 +1,3 @@
|
||||
<svelte:window on:click='set({ foo: !foo })'/>
|
||||
|
||||
{foo}
|
||||
@ -0,0 +1,25 @@
|
||||
<svelte:window on:esc="set({ escaped: true })" />
|
||||
|
||||
<p>escaped: {escaped}</p>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return { escaped: false };
|
||||
},
|
||||
|
||||
events: {
|
||||
esc(node, callback) {
|
||||
function onKeyDown(event) {
|
||||
if (event.which === 27) callback(event);
|
||||
}
|
||||
node.addEventListener('keydown', onKeyDown);
|
||||
return {
|
||||
destroy() {
|
||||
node.removeEventListener('keydown', onKeyDown);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in new issue