fragment-tools 0.1.13 → 0.1.15

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

@@ -1,146 +1,159 @@
 <script>
-import { createEventDispatcher } from "svelte";
-import SelectChevrons from "../SelectChevrons.svelte";
-
-export let options = [];
-export let name = "";
-export let value;
-export let disabled = false;
-export let title = "";
-export let context = null;
-export let key = "";
-
-let node;
-let sanitizedValue, sanitizedOptions = [];
-
-const dispatch = createEventDispatcher();
-
-function toStringifiedValue(option, optionType = typeof option) {
-    if (option === null) {
-        return `null`;
-    } else if (option === undefined) {
-        return `undefined`;
-    } else if (optionType === "object") {
-        return toStringifiedValue(option.value);
-    } else if (optionType === "function") {
-        return option.name;
-    }
-    
-    return option.toString();
-}
-
-$: {
-    sanitizedOptions = [];
-    
-    for (let i = 0; i < options.length; i++) {
-        let option = options[i];
-        let optionType = typeof option;
-        let disabled = (optionType === "object" && typeof option.disabled === "boolean") ? option.disabled : false;
-        let _value = optionType === "object" ? option.value : option;
-
-        let stringifiedValue = toStringifiedValue(option);
-        let label;
-
-        if (_value === value) {
-            sanitizedValue = stringifiedValue;
-        }
-
-        if (option.label) {
-            label = option.label;
-        } else {
-            label = stringifiedValue;
-        }
-
-        sanitizedOptions[i] = {
-            label,
-            value: stringifiedValue,
-            disabled
-        };
-    }
-}
-
-function handleChange(event) {
-    const index = sanitizedOptions.findIndex((opt) => opt.value === event.currentTarget.value);
-    const option = options[index]
-    const newValue = typeof option === "object" ? option.value : option;
-
-    value = newValue;
-
-    dispatch("change", newValue);
-}
-
+	import { createEventDispatcher } from 'svelte';
+	import SelectChevrons from '../SelectChevrons.svelte';
+
+	export let options = [];
+	export let name = '';
+	export let value;
+	export let disabled = false;
+	export let title = '';
+	export let context = null;
+	export let key = '';
+
+	let node;
+	let sanitizedValue,
+		sanitizedOptions = [];
+
+	const dispatch = createEventDispatcher();
+
+	function toStringifiedValue(option, optionType = typeof option) {
+		if (option === null) {
+			return `null`;
+		} else if (option === undefined) {
+			return `undefined`;
+		} else if (optionType === 'object') {
+			return toStringifiedValue(option.value);
+		} else if (optionType === 'function') {
+			return option.name;
+		}
+
+		return option.toString();
+	}
+
+	$: {
+		sanitizedOptions = [];
+
+		for (let i = 0; i < options.length; i++) {
+			let option = options[i];
+			let optionType = typeof option;
+			let disabled =
+				optionType === 'object' && typeof option.disabled === 'boolean'
+					? option.disabled
+					: false;
+			let _value = optionType === 'object' ? option.value : option;
+
+			let stringifiedValue = toStringifiedValue(option);
+			let label;
+
+			if (_value === value) {
+				sanitizedValue = stringifiedValue;
+			}
+
+			if (option.label) {
+				label = option.label;
+			} else {
+				label = stringifiedValue;
+			}
+
+			sanitizedOptions[i] = {
+				label,
+				value: stringifiedValue,
+				disabled,
+			};
+		}
+	}
+
+	function handleChange(event) {
+		const index = sanitizedOptions.findIndex(
+			(opt) => opt.value === event.currentTarget.value,
+		);
+		const option = options[index];
+		const newValue = typeof option === 'object' ? option.value : option;
+
+		value = newValue;
+
+		dispatch('change', newValue);
+	}
 </script>
 
 <div
-    class="select-input"
-    class:disabled={disabled}
-    class:single={sanitizedOptions.length === 1}
+	class="select-input"
+	class:disabled
+	class:single={sanitizedOptions.length === 1}
 >
-    <div class="container">
-        <select class="select" bind:this={node} on:change={handleChange} {name} {disabled} {title} bind:value={sanitizedValue}>
-            {#each sanitizedOptions as option}
-                <option value={option.value} selected={sanitizedValue === option.value} disabled={option.disabled}>{option.label}</option>
-            {/each}
-        </select>
-        {#if sanitizedOptions.length > 1 }
-            <SelectChevrons />
-        {/if}
-    </div>
+	<div class="container">
+		<select
+			class="select"
+			bind:this={node}
+			on:change={handleChange}
+			{name}
+			{disabled}
+			{title}
+			bind:value={sanitizedValue}
+		>
+			{#each sanitizedOptions as option}
+				<option
+					value={option.value}
+					selected={sanitizedValue === option.value}
+					disabled={option.disabled}>{option.label}</option
+				>
+			{/each}
+		</select>
+		{#if sanitizedOptions.length > 1}
+			<SelectChevrons />
+		{/if}
+	</div>
 </div>
 
 <style>
-.select-input {
-    width: 100%;
-}
-
-.container {
-    position: relative;
+	.select-input {
+		width: 100%;
 
-    display: flex;
-    height: var(--height-input);
-    margin: 2px 0;
+		color: var(--color-text-input);
+	}
 
-    color: rgba(255, 255, 255, 0.5);
+	.select-input.disabled {
+		color: var(--color-text-input-disabled);
+	}
 
-    box-shadow: inset 0 0 0 1px var(--color-border-input);
-    border-radius: var(--border-radius-input);
-    background-color: var(--color-background-input);
-}
+	.container {
+		position: relative;
 
-.select-input:not(.disabled) .container:hover {
-    box-shadow: inset 0 0 0 1px var(--color-active);
-}
+		display: flex;
+		height: var(--height-input);
+		margin: 2px 0;
 
-.container:focus-within {
-    box-shadow: 0 0 0 2px var(--color-active);
-}
+		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		border-radius: var(--border-radius-input);
+		background-color: var(--color-background-input);
+	}
 
-.select {
-    padding: 0 var(--padding, 6px) 0 var(--padding, 6px);
+	.select-input:not(.disabled) .container:hover {
+		box-shadow: inset 0 0 0 1px var(--color-active);
+	}
 
-    width: 100%;
-    
-    color: inherit;
-    font-size: var(--font-size-input);
+	.container:focus-within {
+		box-shadow: 0 0 0 2px var(--color-active);
+	}
 
-    outline: 0;
-    background-color: transparent;
-}
+	.select {
+		padding: 0 var(--padding, 6px) 0 var(--padding, 6px);
 
-.select-input:not(.disabled) .select {
-    cursor: pointer;
-}
+		width: 100%;
 
-:global(.field__section:hover .select-input:not(.disabled) .container) {
-    color: var(--color-text);
-}
+		color: inherit;
+		font-size: var(--font-size-input);
 
-.select-input:not(.disabled) .select:focus {
-    color: var(--color-text);
-}
+		outline: 0;
+		background-color: transparent;
+		opacity: 1;
+	}
 
-.select-input:not(.disabled) .select:hover {
-    color: var(--color-text);
-}
+	.select-input:not(.disabled) .select {
+		cursor: pointer;
+	}
 
+	.select-input:not(.disabled) .select:focus {
+		color: var(--color-text);
+	}
 </style>

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

@@ -1,20 +1,19 @@
 <script>
-import Input from "./Input.svelte";
-
-export let value;
-export let label = "";
-export let disabled = false;
-export let context = null;
-export let key = "";
+	import Input from './Input.svelte';
 
+	export let value;
+	export let label = '';
+	export let disabled = false;
+	export let context = null;
+	export let key = '';
 </script>
 
 <div class="text-input">
-    <Input {context} {key} bind:value={value} {label} {disabled} on:change on:input />
+	<Input {context} {key} bind:value {label} {disabled} on:change on:input />
 </div>
 
 <style>
-.text-input {
-    width: 100%;
-}
+	.text-input {
+		width: 100%;
+	}
 </style>

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

@@ -1,92 +1,96 @@
 <script>
-import { createEventDispatcher } from "svelte";
-import FieldInputRow from "./FieldInputRow.svelte";
-import NumberInput from "./NumberInput.svelte";
-
-export let value;
-export let suffix = "";
-export let min = -Infinity;
-export let max = Infinity;
-export let step = 0.1;
-export let locked = false;
-export let disabled = false;
-export let context = null;
-export let key = "";
-
-const dispatch = createEventDispatcher();
-
-$: isArray = Array.isArray(value);
-$: isObject = !isArray && typeof value === "object";
-$: components = isObject ? Object.values(value) : value;
-$: keys = isObject ? Object.keys(value) : value.map(() => undefined);
-
-function dispatchChange() {
-    let needsUpdate = false;
-    for (let i = 0; i < components.length; i++) {
-        const key = isArray ? i : keys[i];
-
-        if (value[key] !== components[i]) {
-            value[key] = components[i];
-            needsUpdate = true;
-        }
-    }
-
-    if (needsUpdate) {
-        dispatch('change', value);
-    }
-}
-
-function handleComponentChange(newValue, componentIndex) {
-    let ratio = newValue / components[componentIndex];
-
-    if (!isFinite(ratio)) {
-        ratio = 1;
-    }
-
-    components = components.map((component, index) => {
-        return index === componentIndex ? newValue : 
-            locked ? (Math.round(component * ratio * (1/step)) / (1/step)) : component;
-    });
-
-    dispatchChange();
-}
-
+	import { createEventDispatcher } from 'svelte';
+	import FieldInputRow from './FieldInputRow.svelte';
+	import NumberInput from './NumberInput.svelte';
+
+	export let value;
+	export let suffix = '';
+	export let min = -Infinity;
+	export let max = Infinity;
+	export let step = 0.1;
+	export let locked = false;
+	export let disabled = false;
+	export let context = null;
+	export let key = '';
+
+	const dispatch = createEventDispatcher();
+
+	$: isArray = Array.isArray(value);
+	$: isObject = !isArray && typeof value === 'object';
+	$: components = isObject ? Object.values(value) : value;
+	$: keys = isObject ? Object.keys(value) : value.map(() => undefined);
+
+	function dispatchChange() {
+		let needsUpdate = false;
+		for (let i = 0; i < components.length; i++) {
+			const key = isArray ? i : keys[i];
+
+			if (value[key] !== components[i]) {
+				value[key] = components[i];
+				needsUpdate = true;
+			}
+		}
+
+		if (needsUpdate) {
+			dispatch('change', value);
+		}
+	}
+
+	function handleComponentChange(newValue, componentIndex) {
+		let ratio = newValue / components[componentIndex];
+
+		if (!isFinite(ratio)) {
+			ratio = 1;
+		}
+
+		components = components.map((component, index) => {
+			return index === componentIndex
+				? newValue
+				: locked
+					? Math.round(component * ratio * (1 / step)) / (1 / step)
+					: component;
+		});
+
+		dispatchChange();
+	}
 </script>
 
-<div class="vector-container vec{components.length}" class:locked={locked}>
-    <FieldInputRow --grid-template-columns={components.map(() => "1fr").join(" ")}>
-        {#each components as component, index}
-            <NumberInput
-                {min}
-                {max}
-                {step}
-                {suffix}
-                {disabled}
-                {context}
-                {key}
-                label={keys[index]}
-                value={component}
-                on:change={(event) => handleComponentChange(event.detail, index)}
-            />
-        {/each}
-    </FieldInputRow>
+<div class="vector-container vec{components.length}" class:locked>
+	<FieldInputRow
+		--grid-template-columns={components.map(() => '1fr').join(' ')}
+	>
+		{#each components as component, index}
+			<NumberInput
+				{min}
+				{max}
+				{step}
+				{suffix}
+				{disabled}
+				{context}
+				{key}
+				label={keys[index]}
+				value={component}
+				on:change={(event) =>
+					handleComponentChange(event.detail, index)}
+			/>
+		{/each}
+	</FieldInputRow>
 </div>
 
 <style>
-.vector-container {
-    width: 100%;
-}
-
-:global(.vector-container.locked .number-input:not(:last-child):after) {
-    content: '';
+	.vector-container {
+		width: 100%;
+	}
 
-    position: absolute;
-    top: 50%;
-    right: calc(var(--column-gap) * -1);
-    width: var(--column-gap);
-    height: 1px;
+	:global(.vector-container.locked .number-input:not(:last-child):after) {
+		content: '';
 
-    background-color: var(--color-border-input);
-}
+		position: absolute;
+		top: 50%;
+		right: calc(var(--column-gap) * -1);
+		width: var(--column-gap);
+		height: 1px;
 
+		background-color: var(--color-border-input);
+	}
 </style>