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}}
|
{#each items as item, i}
|
||||||
<div class='{{item.foo ? "foo" : ""}} {{item.bar ? "bar" : ""}}'>{{i + 1}}</div>
|
<div class='{item.foo ? "foo" : ""} {item.bar ? "bar" : ""}'>{i + 1}</div>
|
||||||
{{/each}}
|
{/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='{false}'>
|
||||||
<input type='radio' bind:group='foo' value='{{true}}'>
|
<input type='radio' bind:group='foo' value='{true}'>
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
{{#if visible}}
|
{#if visible}
|
||||||
<input ref:input autofocus>
|
<input ref:input autofocus>
|
||||||
{{/if}}
|
{/if}
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
{{#if promise}}
|
{#if promise}
|
||||||
{{#await promise}}
|
{#await promise}
|
||||||
<p>wait for it...</p>
|
<p>wait for it...</p>
|
||||||
{{then _}}
|
{:then _}
|
||||||
<p>the answer is {{answer}}!</p>
|
<p>the answer is {answer}!</p>
|
||||||
{{catch error}}
|
{:catch error}
|
||||||
<p>well that's odd</p>
|
<p>well that's odd</p>
|
||||||
{{/await}}
|
{/await}
|
||||||
{{/if}}
|
{/if}
|
@ -1,9 +1,9 @@
|
|||||||
<div>
|
<div>
|
||||||
{{#await thePromise}}
|
{#await thePromise}
|
||||||
<p>loading...</p>
|
<p>loading...</p>
|
||||||
{{then theValue}}
|
{:then theValue}
|
||||||
<p>the value is {{theValue}}</p>
|
<p>the value is {theValue}</p>
|
||||||
{{catch theError}}
|
{:catch theError}
|
||||||
<p>oh no! {{theError.message}}</p>
|
<p>oh no! {theError.message}</p>
|
||||||
{{/await}}
|
{/await}
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
{{#await thePromise}}
|
{#await thePromise}
|
||||||
<p>loading...</p>
|
<p>loading...</p>
|
||||||
{{then theValue}}
|
{:then theValue}
|
||||||
<button ref:button on:click='set({ clicked: theValue })'>click me</button>
|
<button ref:button on:click='set({ clicked: theValue })'>click me</button>
|
||||||
{{catch theError}}
|
{:catch theError}
|
||||||
<p>oh no! {{theError.message}}</p>
|
<p>oh no! {theError.message}</p>
|
||||||
{{/await}}
|
{/await}
|
@ -1,11 +1,11 @@
|
|||||||
{{#if show}}
|
{#if show}
|
||||||
{{#await thePromise}}
|
{#await thePromise}
|
||||||
<p>loading...</p>
|
<p>loading...</p>
|
||||||
{{then theValue}}
|
{:then theValue}
|
||||||
<p>the value is {{theValue}}</p>
|
<p>the value is {theValue}</p>
|
||||||
{{catch theError}}
|
{:catch theError}
|
||||||
<p>oh no! {{theError.message}}</p>
|
<p>oh no! {theError.message}</p>
|
||||||
{{/await}}
|
{/await}
|
||||||
{{else}}
|
{:else}
|
||||||
<p>Else</p>
|
<p>Else</p>
|
||||||
{{/if}}
|
{/if}
|
||||||
|
@ -1,15 +1,15 @@
|
|||||||
{{#await thePromise}}
|
{#await thePromise}
|
||||||
<p>loading...</p>
|
<p>loading...</p>
|
||||||
{{then theValue}}
|
{:then theValue}
|
||||||
<p>the value is {{theValue}}</p>
|
<p>the value is {theValue}</p>
|
||||||
{{catch theError}}
|
{:catch theError}
|
||||||
<p>oh no! {{theError.message}}</p>
|
<p>oh no! {theError.message}</p>
|
||||||
{{/await}}
|
{/await}
|
||||||
|
|
||||||
{{#await thePromise}}
|
{#await thePromise}
|
||||||
<p>loading...</p>
|
<p>loading...</p>
|
||||||
{{then theValue}}
|
{:then theValue}
|
||||||
<p>the value is {{theValue}}</p>
|
<p>the value is {theValue}</p>
|
||||||
{{catch theError}}
|
{:catch theError}
|
||||||
<p>oh no! {{theError.message}}</p>
|
<p>oh no! {theError.message}</p>
|
||||||
{{/await}}
|
{/await}
|
@ -1,7 +1,7 @@
|
|||||||
{{#await thePromise}}
|
{#await thePromise}
|
||||||
<p>loading...</p>
|
<p>loading...</p>
|
||||||
{{then theValue}}
|
{:then theValue}
|
||||||
<p>the value is {{theValue}}</p>
|
<p>the value is {theValue}</p>
|
||||||
{{catch theError}}
|
{:catch theError}
|
||||||
<p>oh no! {{theError.message}}</p>
|
<p>oh no! {theError.message}</p>
|
||||||
{{/await}}
|
{/await}
|
@ -1,7 +1,7 @@
|
|||||||
{{#await thePromise}}
|
{#await thePromise}
|
||||||
<p>loading...</p>
|
<p>loading...</p>
|
||||||
{{then theValue}}
|
{:then theValue}
|
||||||
<p>the value is {{theValue}}</p>
|
<p>the value is {theValue}</p>
|
||||||
{{catch theError}}
|
{:catch theError}
|
||||||
<p>oh no! {{theError.message}}</p>
|
<p>oh no! {theError.message}</p>
|
||||||
{{/await}}
|
{/await}
|
@ -1,5 +1,5 @@
|
|||||||
{{#await thePromise then theValue}}
|
{#await thePromise then theValue}
|
||||||
<p>the value is {{theValue}}</p>
|
<p>the value is {theValue}</p>
|
||||||
{{catch theError}}
|
{:catch theError}
|
||||||
<p>oh no! {{theError.message}}</p>
|
<p>oh no! {theError.message}</p>
|
||||||
{{/await}}
|
{/await}
|
@ -1,14 +1,14 @@
|
|||||||
<select bind:value='selected'>
|
<select bind:value='selected'>
|
||||||
{{#each tasks as task}}
|
{#each tasks as task}
|
||||||
<option value='{{task}}'>{{task.description}}</option>
|
<option value='{task}'>{task.description}</option>
|
||||||
{{/each}}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label>
|
<label>
|
||||||
<input type='checkbox' bind:checked='selected.done'> {{selected.description}}
|
<input type='checkbox' bind:checked='selected.done'> {selected.description}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<h2>Pending tasks</h2>
|
<h2>Pending tasks</h2>
|
||||||
{{#each tasks.filter(t => !t.done) as task}}
|
{#each tasks.filter(t => !t.done) as task}
|
||||||
<p>{{task.description}}</p>
|
<p>{task.description}</p>
|
||||||
{{/each}}
|
{/each}
|
@ -1,13 +1,13 @@
|
|||||||
<label>
|
<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>
|
||||||
|
|
||||||
<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>
|
||||||
|
|
||||||
<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>
|
</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>
|
<label>
|
||||||
<input type="checkbox" value="{{value}}" bind:group='selected' /> {{value.name}}
|
<input type="checkbox" value="{value}" bind:group='selected' /> {value.name}
|
||||||
</label>
|
</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>
|
<input type='checkbox' bind:checked bind:indeterminate>
|
||||||
<p>checked? {{checked}}</p>
|
<p>checked? {checked}</p>
|
||||||
<p>indeterminate? {{indeterminate}}</p>
|
<p>indeterminate? {indeterminate}</p>
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
<input type='checkbox' bind:checked='foo'>
|
<input type='checkbox' bind:checked='foo'>
|
||||||
<p>{{foo}}</p>
|
<p>{foo}</p>
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
<input type='number' bind:value='count'>
|
<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>
|
<label>
|
||||||
<input type="radio" value="{{value}}" bind:group='selected' /> {{value.name}}
|
<input type="radio" value="{value}" bind:group='selected' /> {value.name}
|
||||||
</label>
|
</label>
|
||||||
{{/each}}
|
{/each}
|
||||||
|
|
||||||
<p>{{selected.name}}</p>
|
<p>{selected.name}</p>
|
@ -1,2 +1,2 @@
|
|||||||
<input type='range' bind:value='count'>
|
<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'>
|
<input type='range' bind:value='count'>
|
||||||
<p>{{typeof count}} {{count}}</p>
|
<p>{typeof count} {count}</p>
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
{{#each items as item}}
|
{#each items as item}
|
||||||
<div><input bind:value='item'><p>{{item}}</p></div>
|
<div><input bind:value='item'><p>{item}</p></div>
|
||||||
{{/each}}
|
{/each}
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
<h1>Hello {{component.name}}!</h1>
|
<h1>Hello {component.name}!</h1>
|
||||||
<input bind:value="component.name"/>
|
<input bind:value="component.name"/>
|
@ -1,2 +1,2 @@
|
|||||||
<input bind:value='obj[prop]'>
|
<input bind:value='obj[prop]'>
|
||||||
<pre>{{JSON.stringify(obj)}}</pre>
|
<pre>{JSON.stringify(obj)}</pre>
|
@ -1,2 +1,2 @@
|
|||||||
<input bind:value='user[prop]'>
|
<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]'>
|
<input bind:value='obj[prop]'>
|
||||||
<pre>{{JSON.stringify(obj)}}</pre>
|
<pre>{JSON.stringify(obj)}</pre>
|
||||||
{{/each}}
|
{/each}
|
@ -1,3 +1,3 @@
|
|||||||
{{#each items as item}}
|
{#each items as item}
|
||||||
<div><input bind:value='item.description'><p>{{item.description}}</p></div>
|
<div><input bind:value='item.description'><p>{item.description}</p></div>
|
||||||
{{/each}}
|
{/each}
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
<input bind:value='user.name'>
|
<input bind:value='user.name'>
|
||||||
<p>hello {{user.name}}</p>
|
<p>hello {user.name}</p>
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
<input bind:value='name'>
|
<input bind:value='name'>
|
||||||
<p>hello {{name}}</p>
|
<p>hello {name}</p>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<select bind:value='foo'>
|
<select bind:value='foo'>
|
||||||
{{#each values as v}}
|
{#each values as v}
|
||||||
<option>{{v}}</option>
|
<option>{v}</option>
|
||||||
{{/each}}
|
{/each}
|
||||||
</select>
|
</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">
|
<select bind:value="item.value">
|
||||||
<option value="hullo">Hullo</option>
|
<option value="hullo">Hullo</option>
|
||||||
<option value="world">World</option>
|
<option value="world">World</option>
|
||||||
</select>
|
</select>
|
||||||
{{/each}}
|
{/each}
|
@ -1,7 +1,7 @@
|
|||||||
<select bind:value='selected'>
|
<select bind:value='selected'>
|
||||||
{{#each items as item}}
|
{#each items as item}
|
||||||
<option>{{item}}</option>
|
<option>{item}</option>
|
||||||
{{/each}}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<p>selected: {{selected || 'nothing'}}</p>
|
<p>selected: {selected || 'nothing'}</p>
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
<textarea bind:value></textarea>
|
<textarea bind:value></textarea>
|
||||||
<p>{{value}}</p>
|
<p>{value}</p>
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
<label>
|
<label>
|
||||||
{{field}} <input bind:value>
|
{field} <input bind:value>
|
||||||
</label>
|
</label>
|
@ -1,5 +1,5 @@
|
|||||||
<select bind:value='selectedComponent'>
|
<select bind:value='selectedComponent'>
|
||||||
{{#each components as component}}
|
{#each components as component}
|
||||||
<option value='{{component}}'>{{component.name}}.html</option>
|
<option value='{component}'>{component.name}.html</option>
|
||||||
{{/each}}
|
{/each}
|
||||||
</select>
|
</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>
|
<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>foo: {foo}</p>
|
||||||
<p>baz: {{baz}} ({{typeof baz}})</p>
|
<p>baz: {baz} ({typeof baz})</p>
|
||||||
<p>qux: {{qux}}</p>
|
<p>qux: {qux}</p>
|
||||||
<p>quux: {{quux}}</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>foo: {foo}</p>
|
||||||
<p>baz: {{baz}} ({{typeof baz}})</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