mirror of https://github.com/sveltejs/svelte
parent
ce114600d1
commit
4b3da75480
@ -1,52 +0,0 @@
|
||||
<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>
|
@ -1 +1 @@
|
||||
<textarea readonly="{{false}}"></textarea>
|
||||
<textarea readonly="{false}"></textarea>
|
||||
|
@ -1 +1 @@
|
||||
<input type='checkbox' indeterminate='{{indeterminate}}'>
|
||||
<input type='checkbox' indeterminate='{indeterminate}'>
|
@ -1 +1 @@
|
||||
<textarea readonly="{{true}}"></textarea>
|
||||
<textarea readonly="{true}"></textarea>
|
||||
|
@ -1,3 +1,3 @@
|
||||
{{#each items as item, i}}
|
||||
<div class='{{item.foo ? "foo" : ""}} {{item.bar ? "bar" : ""}}'>{{i + 1}}</div>
|
||||
{{/each}}
|
||||
{#each items as item, i}
|
||||
<div class='{item.foo ? "foo" : ""} {item.bar ? "bar" : ""}'>{i + 1}</div>
|
||||
{/each}
|
||||
|
@ -1 +1 @@
|
||||
<span title='{{"\"foo\""}}'>foo</span>
|
||||
<span title='{"\"foo\""}'>foo</span>
|
||||
|
@ -1 +1 @@
|
||||
<div class='{{class}}'></div>{{123}}
|
||||
<div class='{class}'></div>{123}
|
||||
|
@ -1,9 +0,0 @@
|
||||
<div {id}/>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
id: 'foo'
|
||||
})
|
||||
};
|
||||
</script>
|
@ -1 +1 @@
|
||||
<input type='{{inputType}}' value='{{inputValue}}'>
|
||||
<input type='{inputType}' value='{inputValue}'>
|
Before Width: | Height: | Size: 42 B After Width: | Height: | Size: 40 B |
@ -1 +1 @@
|
||||
<p data-value="{{value}}"></p>
|
||||
<p data-value="{value}"></p>
|
||||
|
@ -1,2 +1,2 @@
|
||||
<input type='radio' bind:group='foo' value='{{false}}'>
|
||||
<input type='radio' bind:group='foo' value='{{true}}'>
|
||||
<input type='radio' bind:group='foo' value='{false}'>
|
||||
<input type='radio' bind:group='foo' value='{true}'>
|
||||
|
@ -1,3 +1,3 @@
|
||||
{{#if visible}}
|
||||
{#if visible}
|
||||
<input ref:input autofocus>
|
||||
{{/if}}
|
||||
{/if}
|
||||
|
@ -1,9 +1,9 @@
|
||||
{{#if promise}}
|
||||
{{#await promise}}
|
||||
{#if promise}
|
||||
{#await promise}
|
||||
<p>wait for it...</p>
|
||||
{{then _}}
|
||||
<p>the answer is {{answer}}!</p>
|
||||
{{catch error}}
|
||||
{:then _}
|
||||
<p>the answer is {answer}!</p>
|
||||
{:catch error}
|
||||
<p>well that's odd</p>
|
||||
{{/await}}
|
||||
{{/if}}
|
||||
{/await}
|
||||
{/if}
|
@ -1,9 +1,9 @@
|
||||
<div>
|
||||
{{#await thePromise}}
|
||||
{#await thePromise}
|
||||
<p>loading...</p>
|
||||
{{then theValue}}
|
||||
<p>the value is {{theValue}}</p>
|
||||
{{catch theError}}
|
||||
<p>oh no! {{theError.message}}</p>
|
||||
{{/await}}
|
||||
{:then theValue}
|
||||
<p>the value is {theValue}</p>
|
||||
{:catch theError}
|
||||
<p>oh no! {theError.message}</p>
|
||||
{/await}
|
||||
</div>
|
||||
|
@ -1,7 +1,7 @@
|
||||
{{#await thePromise}}
|
||||
{#await thePromise}
|
||||
<p>loading...</p>
|
||||
{{then theValue}}
|
||||
{:then theValue}
|
||||
<button ref:button on:click='set({ clicked: theValue })'>click me</button>
|
||||
{{catch theError}}
|
||||
<p>oh no! {{theError.message}}</p>
|
||||
{{/await}}
|
||||
{:catch theError}
|
||||
<p>oh no! {theError.message}</p>
|
||||
{/await}
|
@ -1,11 +1,11 @@
|
||||
{{#if show}}
|
||||
{{#await thePromise}}
|
||||
{#if show}
|
||||
{#await thePromise}
|
||||
<p>loading...</p>
|
||||
{{then theValue}}
|
||||
<p>the value is {{theValue}}</p>
|
||||
{{catch theError}}
|
||||
<p>oh no! {{theError.message}}</p>
|
||||
{{/await}}
|
||||
{{else}}
|
||||
{:then theValue}
|
||||
<p>the value is {theValue}</p>
|
||||
{:catch theError}
|
||||
<p>oh no! {theError.message}</p>
|
||||
{/await}
|
||||
{:else}
|
||||
<p>Else</p>
|
||||
{{/if}}
|
||||
{/if}
|
||||
|
@ -1,15 +1,15 @@
|
||||
{{#await thePromise}}
|
||||
{#await thePromise}
|
||||
<p>loading...</p>
|
||||
{{then theValue}}
|
||||
<p>the value is {{theValue}}</p>
|
||||
{{catch theError}}
|
||||
<p>oh no! {{theError.message}}</p>
|
||||
{{/await}}
|
||||
{:then theValue}
|
||||
<p>the value is {theValue}</p>
|
||||
{:catch theError}
|
||||
<p>oh no! {theError.message}</p>
|
||||
{/await}
|
||||
|
||||
{{#await thePromise}}
|
||||
{#await thePromise}
|
||||
<p>loading...</p>
|
||||
{{then theValue}}
|
||||
<p>the value is {{theValue}}</p>
|
||||
{{catch theError}}
|
||||
<p>oh no! {{theError.message}}</p>
|
||||
{{/await}}
|
||||
{:then theValue}
|
||||
<p>the value is {theValue}</p>
|
||||
{:catch theError}
|
||||
<p>oh no! {theError.message}</p>
|
||||
{/await}
|
@ -1,7 +1,7 @@
|
||||
{{#await thePromise}}
|
||||
{#await thePromise}
|
||||
<p>loading...</p>
|
||||
{{then theValue}}
|
||||
<p>the value is {{theValue}}</p>
|
||||
{{catch theError}}
|
||||
<p>oh no! {{theError.message}}</p>
|
||||
{{/await}}
|
||||
{:then theValue}
|
||||
<p>the value is {theValue}</p>
|
||||
{:catch theError}
|
||||
<p>oh no! {theError.message}</p>
|
||||
{/await}
|
@ -1,7 +1,7 @@
|
||||
{{#await thePromise}}
|
||||
{#await thePromise}
|
||||
<p>loading...</p>
|
||||
{{then theValue}}
|
||||
<p>the value is {{theValue}}</p>
|
||||
{{catch theError}}
|
||||
<p>oh no! {{theError.message}}</p>
|
||||
{{/await}}
|
||||
{:then theValue}
|
||||
<p>the value is {theValue}</p>
|
||||
{:catch theError}
|
||||
<p>oh no! {theError.message}</p>
|
||||
{/await}
|
@ -1,5 +1,5 @@
|
||||
{{#await thePromise then theValue}}
|
||||
<p>the value is {{theValue}}</p>
|
||||
{{catch theError}}
|
||||
<p>oh no! {{theError.message}}</p>
|
||||
{{/await}}
|
||||
{#await thePromise then theValue}
|
||||
<p>the value is {theValue}</p>
|
||||
{:catch theError}
|
||||
<p>oh no! {theError.message}</p>
|
||||
{/await}
|
@ -1,14 +1,14 @@
|
||||
<select bind:value='selected'>
|
||||
{{#each tasks as task}}
|
||||
<option value='{{task}}'>{{task.description}}</option>
|
||||
{{/each}}
|
||||
{#each tasks as task}
|
||||
<option value='{task}'>{task.description}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<label>
|
||||
<input type='checkbox' bind:checked='selected.done'> {{selected.description}}
|
||||
<input type='checkbox' bind:checked='selected.done'> {selected.description}
|
||||
</label>
|
||||
|
||||
<h2>Pending tasks</h2>
|
||||
{{#each tasks.filter(t => !t.done) as task}}
|
||||
<p>{{task.description}}</p>
|
||||
{{/each}}
|
||||
{#each tasks.filter(t => !t.done) as task}
|
||||
<p>{task.description}</p>
|
||||
{/each}
|
@ -1,13 +1,13 @@
|
||||
<label>
|
||||
<input type="checkbox" value="{{values[0]}}" bind:group='selected' /> {{values[0].name}}
|
||||
<input type="checkbox" value="{values[0]}" bind:group='selected' /> {values[0].name}
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="{{values[1]}}" bind:group='selected' /> {{values[1].name}}
|
||||
<input type="checkbox" value="{values[1]}" bind:group='selected' /> {values[1].name}
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="{{values[2]}}" bind:group='selected' /> {{values[2].name}}
|
||||
<input type="checkbox" value="{values[2]}" bind:group='selected' /> {values[2].name}
|
||||
</label>
|
||||
|
||||
<p>{{selected.map( function ( value ) { return value.name; }).join( ', ' ) }}</p>
|
||||
<p>{selected.map( function ( value ) { return value.name; }).join( ', ' ) }</p>
|
@ -1,7 +1,7 @@
|
||||
{{#each values as value}}
|
||||
{#each values as value}
|
||||
<label>
|
||||
<input type="checkbox" value="{{value}}" bind:group='selected' /> {{value.name}}
|
||||
<input type="checkbox" value="{value}" bind:group='selected' /> {value.name}
|
||||
</label>
|
||||
{{/each}}
|
||||
{/each}
|
||||
|
||||
<p>{{selected.map( function ( value ) { return value.name; }).join( ', ' ) }}</p>
|
||||
<p>{selected.map( function ( value ) { return value.name; }).join( ', ' ) }</p>
|
@ -1,3 +1,3 @@
|
||||
<input type='checkbox' bind:checked bind:indeterminate>
|
||||
<p>checked? {{checked}}</p>
|
||||
<p>indeterminate? {{indeterminate}}</p>
|
||||
<p>checked? {checked}</p>
|
||||
<p>indeterminate? {indeterminate}</p>
|
||||
|
@ -1,2 +1,2 @@
|
||||
<input type='checkbox' bind:checked='foo'>
|
||||
<p>{{foo}}</p>
|
||||
<p>{foo}</p>
|
||||
|
@ -1,2 +1,2 @@
|
||||
<input type='number' bind:value='count'>
|
||||
<p>{{typeof count}} {{count}}</p>
|
||||
<p>{typeof count} {count}</p>
|
||||
|
@ -1,7 +1,7 @@
|
||||
{{#each values as value}}
|
||||
{#each values as value}
|
||||
<label>
|
||||
<input type="radio" value="{{value}}" bind:group='selected' /> {{value.name}}
|
||||
<input type="radio" value="{value}" bind:group='selected' /> {value.name}
|
||||
</label>
|
||||
{{/each}}
|
||||
{/each}
|
||||
|
||||
<p>{{selected.name}}</p>
|
||||
<p>{selected.name}</p>
|
@ -1,2 +1,2 @@
|
||||
<input type='range' bind:value='count'>
|
||||
<p>{{typeof count}} {{count}}</p>
|
||||
<p>{typeof count} {count}</p>
|
||||
|
@ -1,2 +1,2 @@
|
||||
<input type='range' bind:value='count'>
|
||||
<p>{{typeof count}} {{count}}</p>
|
||||
<p>{typeof count} {count}</p>
|
||||
|
@ -1,3 +1,3 @@
|
||||
{{#each items as item}}
|
||||
<div><input bind:value='item'><p>{{item}}</p></div>
|
||||
{{/each}}
|
||||
{#each items as item}
|
||||
<div><input bind:value='item'><p>{item}</p></div>
|
||||
{/each}
|
||||
|
@ -1,2 +1,2 @@
|
||||
<h1>Hello {{component.name}}!</h1>
|
||||
<h1>Hello {component.name}!</h1>
|
||||
<input bind:value="component.name"/>
|
@ -1,2 +1,2 @@
|
||||
<input bind:value='obj[prop]'>
|
||||
<pre>{{JSON.stringify(obj)}}</pre>
|
||||
<pre>{JSON.stringify(obj)}</pre>
|
@ -1,2 +1,2 @@
|
||||
<input bind:value='user[prop]'>
|
||||
<p>hello {{user.name}}</p>
|
||||
<p>hello {user.name}</p>
|
||||
|
@ -1,4 +1,4 @@
|
||||
{{#each objects as obj}}
|
||||
{#each objects as obj}
|
||||
<input bind:value='obj[prop]'>
|
||||
<pre>{{JSON.stringify(obj)}}</pre>
|
||||
{{/each}}
|
||||
<pre>{JSON.stringify(obj)}</pre>
|
||||
{/each}
|
@ -1,3 +1,3 @@
|
||||
{{#each items as item}}
|
||||
<div><input bind:value='item.description'><p>{{item.description}}</p></div>
|
||||
{{/each}}
|
||||
{#each items as item}
|
||||
<div><input bind:value='item.description'><p>{item.description}</p></div>
|
||||
{/each}
|
||||
|
@ -1,2 +1,2 @@
|
||||
<input bind:value='user.name'>
|
||||
<p>hello {{user.name}}</p>
|
||||
<p>hello {user.name}</p>
|
||||
|
@ -1,2 +1,2 @@
|
||||
<input bind:value='name'>
|
||||
<p>hello {{name}}</p>
|
||||
<p>hello {name}</p>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<select bind:value='foo'>
|
||||
{{#each values as v}}
|
||||
<option>{{v}}</option>
|
||||
{{/each}}
|
||||
{#each values as v}
|
||||
<option>{v}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<p>foo: {{foo}}</p>
|
||||
<p>foo: {foo}</p>
|
@ -1,6 +1,6 @@
|
||||
{{#each items as item}}
|
||||
{#each items as item}
|
||||
<select bind:value="item.value">
|
||||
<option value="hullo">Hullo</option>
|
||||
<option value="world">World</option>
|
||||
</select>
|
||||
{{/each}}
|
||||
{/each}
|
@ -1,7 +1,7 @@
|
||||
<select bind:value='selected'>
|
||||
{{#each items as item}}
|
||||
<option>{{item}}</option>
|
||||
{{/each}}
|
||||
{#each items as item}
|
||||
<option>{item}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<p>selected: {{selected || 'nothing'}}</p>
|
||||
<p>selected: {selected || 'nothing'}</p>
|
||||
|
@ -1,2 +1,2 @@
|
||||
<textarea bind:value></textarea>
|
||||
<p>{{value}}</p>
|
||||
<p>{value}</p>
|
||||
|
@ -1,3 +1,3 @@
|
||||
<label>
|
||||
{{field}} <input bind:value>
|
||||
{field} <input bind:value>
|
||||
</label>
|
@ -1,5 +1,5 @@
|
||||
<select bind:value='selectedComponent'>
|
||||
{{#each components as component}}
|
||||
<option value='{{component}}'>{{component.name}}.html</option>
|
||||
{{/each}}
|
||||
{#each components as component}
|
||||
<option value='{component}'>{component.name}.html</option>
|
||||
{/each}
|
||||
</select>
|
@ -1 +1 @@
|
||||
<span>{{value.id}}</span>
|
||||
<span>{value.id}</span>
|
@ -1,2 +1,2 @@
|
||||
<button class='baz' on:click='set({ x: "r" })'>baz</button>
|
||||
<p>baz x: {{x}}</p>
|
||||
<p>baz x: {x}</p>
|
||||
|
@ -1 +1 @@
|
||||
<p>{{p}}</p>
|
||||
<p>{p}</p>
|
||||
|
@ -1 +1 @@
|
||||
<p>foo: {{foo}}</p>
|
||||
<p>foo: {foo}</p>
|
@ -1,4 +1,4 @@
|
||||
<p>foo: {{foo}}</p>
|
||||
<p>baz: {{baz}} ({{typeof baz}})</p>
|
||||
<p>qux: {{qux}}</p>
|
||||
<p>quux: {{quux}}</p>
|
||||
<p>foo: {foo}</p>
|
||||
<p>baz: {baz} ({typeof baz})</p>
|
||||
<p>qux: {qux}</p>
|
||||
<p>quux: {quux}</p>
|
||||
|
@ -1 +1 @@
|
||||
<p>foo: '{{foo}}'</p>
|
||||
<p>foo: '{foo}'</p>
|
||||
|
@ -1 +1 @@
|
||||
<a href={{href}}>link</a>
|
||||
<a href={href}>link</a>
|
@ -1 +1 @@
|
||||
<p>x: {{x}} ({{typeof x}})</p>
|
||||
<p>x: {x} ({typeof x})</p>
|
||||
|
@ -1,2 +1,2 @@
|
||||
<p>foo: {{foo}}</p>
|
||||
<p>baz: {{baz}} ({{typeof baz}})</p>
|
||||
<p>foo: {foo}</p>
|
||||
<p>baz: {baz} ({typeof baz})</p>
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue