fragment-tools 0.1.13 → 0.1.15

package/src/client/app/ui/fields/ImageInput.svelte

@@ -1,85 +1,88 @@
 <script>
-import { onMount } from "svelte";
-import { loadImage } from "../../lib/loader/loadImage";
-import ButtonInput from "./ButtonInput.svelte";
-import FieldInputRow from "./FieldInputRow.svelte";
-import TextInput from "./TextInput.svelte";
-
-export let value;
-export let context = null;
-export let key = "";
-
-let img, input, name;
-$: url = typeof value === HTMLImageElement ? value.src : value;
-$: displayUrl = name ? name : url.replace(`/@fs${__CWD__}`, '');
-$: {
-	;(async () => {
-		await loadImage(url, { img });
-	})();
-}
-
-function handleClick() {
-	input.click();
-}
-
-let reader = new FileReader();
-let dragover = false;
-
-function handleUpload(event) {
-	event.preventDefault();
-	event.stopPropagation();
-
-	let file;
-
-	if (event.dataTransfer) {
-        file = event.dataTransfer.files[0];
-	} else if(event.target) {
-        file = event.target.files[0];
-    }
-
-    name = file.name;
-
-    reader.onload = async (e) => {
-		reader.onload = null;
-
-		value = e.target.result;
-    };
-	reader.readAsDataURL(file);
-
-	dragover = false;
-}
-
-function handleDragover(event) {
-	event.preventDefault();
-	event.stopPropagation();
-
-	dragover = true;
-}
-
-function handleDragleave(event) {
-	event.preventDefault();
-	event.stopPropagation();
-
-	dragover = false;
-}
-
+	import { onMount } from 'svelte';
+	import { loadImage } from '../../lib/loader/loadImage';
+	import ButtonInput from './ButtonInput.svelte';
+	import FieldInputRow from './FieldInputRow.svelte';
+	import TextInput from './TextInput.svelte';
+
+	export let value;
+	export let context = null;
+	export let key = '';
+	export let disabled = false;
+
+	let img, input, name;
+	$: url = typeof value === HTMLImageElement ? value.src : value;
+	$: displayUrl = name ? name : url.replace(`/@fs${__CWD__}`, '');
+	$: {
+		(async () => {
+			await loadImage(url, { img });
+		})();
+	}
+
+	function handleClick() {
+		input.click();
+	}
+
+	let reader = new FileReader();
+	let dragover = false;
+
+	function handleUpload(event) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		let file;
+
+		if (event.dataTransfer) {
+			file = event.dataTransfer.files[0];
+		} else if (event.target) {
+			file = event.target.files[0];
+		}
+
+		name = file.name;
+
+		reader.onload = async (e) => {
+			reader.onload = null;
+
+			value = e.target.result;
+		};
+		reader.readAsDataURL(file);
+
+		dragover = false;
+	}
+
+	function handleDragover(event) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		dragover = true;
+	}
+
+	function handleDragleave(event) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		dragover = false;
+	}
 </script>
 
 <div
 	class="img-container"
-	class:dragover={dragover}
+	class:dragover
 	on:dragover={handleDragover}
 	on:dragleave={handleDragleave}
 	on:drop={handleUpload}
 >
 	<FieldInputRow --grid-template-columns="1fr 0.5fr">
 		<div class="row">
-			<div
-				class="preview"
-				on:click={handleClick}
-			>
-				<img class="img" src="" alt="" bind:this={img}/>
-				<input class="input" type="file" bind:this={input} on:change={handleUpload} />
+			<div class="preview" on:click={handleClick}>
+				<img class="img" src="" alt="" bind:this={img} />
+				<input
+					class="input"
+					type="file"
+					bind:this={input}
+					on:change={handleUpload}
+					disabled={disabled ? 'disabled' : null}
+				/>
 			</div>
 			<TextInput disabled value={displayUrl} />
 		</div>
@@ -89,59 +92,58 @@ function handleDragleave(event) {
 			on:dragover={handleDragover}
 			on:dragleave={handleDragleave}
 			on:drop={handleUpload}
+			{disabled}
 		/>
 	</FieldInputRow>
-	
 </div>
 
 <style>
-.img-container {
-	width: 100%;
-}
-
-.preview {
-	width: calc(var(--height-input) * 1);
-	height: calc(var(--height-input) * 1);
-;
-	display: grid;
-	place-items: center;
-
-	border-radius: var(--border-radius-input);
-    background-color: var(--color-background-input);
-    box-shadow: inset 0 0 0 1px var(--color-border-input);
-
-	cursor: copy;
-	overflow: hidden;
-}
-
-.row {
-	display: grid;
-	grid-template-columns: 20px auto;
-	gap: var(--column-gap);
-	place-items: center;
-}
-
-.preview:hover {
-    color: var(--color-text);
-
-    box-shadow: inset 0 0 0 1px var(--box-shadow-color, var(--color-active));
-}
-
-.preview:active, .img-container.dragover .preview {
-    box-shadow: 0 0 0 2px var(--box-shadow-color, var(--color-active));
-}
-
-.img-container.dragover {
-	cursor: copy;
-}
-
-.img {
-	max-width: calc(100% - var(--padding) * 0.5);
-	max-height: calc(100% - var(--padding) * 0.5);
-}
-
-.input {
-	display: none;
-}
-
+	.img-container {
+		width: 100%;
+	}
+
+	.preview {
+		width: calc(var(--height-input) * 1);
+		height: calc(var(--height-input) * 1);
+		display: grid;
+		place-items: center;
+
+		border-radius: var(--border-radius-input);
+		background-color: var(--color-background-input);
+		box-shadow: inset 0 0 0 1px var(--color-border-input);
+
+		cursor: copy;
+		overflow: hidden;
+	}
+
+	.row {
+		display: grid;
+		grid-template-columns: 20px auto;
+		gap: var(--column-gap);
+		place-items: center;
+	}
+
+	.preview:hover {
+		color: var(--color-text);
+
+		box-shadow: inset 0 0 0 1px var(--box-shadow-color, var(--color-active));
+	}
+
+	.preview:active,
+	.img-container.dragover .preview {
+		box-shadow: 0 0 0 2px var(--box-shadow-color, var(--color-active));
+	}
+
+	.img-container.dragover {
+		cursor: copy;
+	}
+
+	.img {
+		max-width: calc(100% - var(--padding) * 0.5);
+		max-height: calc(100% - var(--padding) * 0.5);
+	}
+
+	.input {
+		display: none;
+	}
 </style>

package/src/client/app/ui/fields/Input.svelte

@@ -1,126 +1,115 @@
 <script>
-import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher } from 'svelte';
 
+	export let label = null;
+	export let value;
+	export let disabled = false;
+	export let context = null;
+	export let key = '';
 
-export let label = null;
-export let value;
-export let disabled = false;
-export let context = null;
-export let key = "";
+	let node;
 
-let node;
+	const dispatch = createEventDispatcher();
 
-const dispatch = createEventDispatcher();
+	function onKeyPress(event) {
+		if (event.key === 'Enter') {
+			node.blur();
+		}
+	}
 
-function onKeyPress(event) {
-    if (event.key === 'Enter') {
-        node.blur();
-    }
-}
-
-function handleInput(event) {
-    dispatch('input', event.currentTarget.value);
-}
-
-function handleChange(event) {
-    dispatch('change', event.currentTarget.value);
-}
+	function handleInput(event) {
+		dispatch('input', event.currentTarget.value);
+	}
 
+	function handleChange(event) {
+		dispatch('change', event.currentTarget.value);
+	}
 </script>
 
-<div class="input-container" class:disabled={disabled}>
-    {#if label }
-        <span class="label">{label}</span>
-    {/if}
-    <input
-        class="input"
-        bind:this={node}
-        bind:value={value}
-        on:change={handleChange}
-        on:input={handleInput}
-        on:keypress={onKeyPress}
-        on:keydown
-        on:focus
-        on:blur
-        {disabled}
-        autocomplete="off"
-        spellcheck="false"
-    />
+<div class="input-container" class:disabled>
+	{#if label}
+		<span class="label">{label}</span>
+	{/if}
+	<input
+		class="input"
+		bind:this={node}
+		bind:value
+		on:change={handleChange}
+		on:input={handleInput}
+		on:keypress={onKeyPress}
+		on:keydown
+		on:focus
+		on:blur
+		disabled={disabled ? 'disabled' : null}
+		autocomplete="off"
+		spellcheck="false"
+	/>
 </div>
 
 <style>
-.input-container {
-    position: relative;
-
-    display: flex;
-    height: var(--height-input);
-    margin: 2px 0;
-
-    border-radius: var(--border-radius-input);
-    background-color: var(--color-background-input);
-    box-shadow: inset 0 0 0 1px var(--color-border-input);
-}
-
-.input-container:not(.disabled):hover {
-    box-shadow: inset 0 0 0 1px var(--color-active);
-}
-
-.input-container:not(.disabled):focus-within {
-    box-shadow: 0 0 0 2px var(--color-active);
-}
-
-.label {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-
-    display: flex;
-    align-items: center;
-    padding: var(--padding);
-
-    color: var(--color-text);
-    font-size: var(--font-size-input);
-    font-weight: 600;
-    pointer-events: none;
-    opacity: 0.35;
-}
-
-.input-container.disabled .label {
-    opacity: 0.15;
-}
-
-.input {
-    width: 100%;
-    height: 100%;
-    padding: 0 var(--padding);
-
-    color: rgba(255, 255, 255, 0.5);
-    font-size: var(--font-size-input);
-    text-align: right;
-
-    background: transparent;
-    outline: 0;
-}
-
-.input:disabled {
-    opacity: 0.4;
-}
-
-:global(.field.disabled) .input {
-    opacity: 0.4;
-}
-
-:global(.field__section:hover .container .input) {
-    color: var(--color-text);
-}
-
-input:focus {
-    color: var(--color-text);
-}
-
-/* .input:focus {
+	.input-container {
+		position: relative;
+
+		display: flex;
+		height: var(--height-input);
+		margin: 2px 0;
+
+		border-radius: var(--border-radius-input);
+		background-color: var(--color-background-input);
+		box-shadow: inset 0 0 0 1px var(--color-border-input);
+	}
+
+	.input-container:not(.disabled):hover {
+		box-shadow: inset 0 0 0 1px var(--color-active);
+	}
+
+	.input-container:not(.disabled):focus-within {
+		box-shadow: 0 0 0 2px var(--color-active);
+	}
+
+	.label {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+
+		display: flex;
+		align-items: center;
+		padding: var(--padding);
+
+		color: var(--color-text);
+		font-size: var(--font-size-input);
+		font-weight: 600;
+		pointer-events: none;
+		opacity: 0.35;
+	}
+
+	.input-container.disabled .label {
+		opacity: 0.1;
+	}
+
+	.input {
+		width: 100%;
+		height: 100%;
+		padding: 0 var(--padding);
+
+		color: var(--color-text-input);
+		font-size: var(--font-size-input);
+		text-align: right;
+
+		background: transparent;
+		outline: 0;
+	}
+
+	.input:disabled {
+		color: var(--color-text-input-disabled);
+	}
+
+	.input:focus {
+		color: var(--color-text);
+	}
+
+	/* .input:focus {
     border: var(--borderWidth) solid var(--color-active);
 } */
-
 </style>