fragment-tools 0.1.13 → 0.1.15

package/src/client/app/ui/SketchSelect.svelte

@@ -1,49 +1,55 @@
 <script>
-import ModuleHeaderAction from "./ModuleHeaderAction.svelte";
-import { sketches, sketchesKeys, sketchesCount } from "../stores/sketches.js";
-import { monitors } from "../stores/rendering";
-
-export let monitorID;
-export let selected;
-
-$: options = [
-    ...$sketchesKeys.map((key) => ({
-        value: key,
-        label: $sketches[key] && $sketches[key].name ? $sketches[key].name : key,
-    })),
-];
-
-$: {
-    if ($sketchesCount > 1 && !options.some((opt) => opt.value === "output")) {
-        options = [
-            ...options,
-            { value: "output", label: "output" },
-        ];
-    }
-
-    if (options.length > 0 && selected === undefined) {
-        selected = options[0].value;
-    }
-}
-
-$: {
-    monitors.update((all) => {
-        return all.map((monitor) => {
-            if (monitor.id === monitorID) {
-                monitor.selected = selected;
-            }
-
-            return monitor;
-        });
-    });
-}
-
+	import ModuleHeaderAction from './ModuleHeaderAction.svelte';
+	import {
+		sketches,
+		sketchesKeys,
+		sketchesCount,
+	} from '../stores/sketches.js';
+	import { monitors } from '../stores/rendering';
+
+	export let monitorID;
+	export let selected;
+
+	$: options = [
+		...$sketchesKeys.map((key) => ({
+			value: key,
+			label:
+				$sketches[key] && $sketches[key].name
+					? $sketches[key].name
+					: key,
+		})),
+	];
+
+	$: {
+		if (
+			$sketchesCount > 1 &&
+			!options.some((opt) => opt.value === 'output')
+		) {
+			options = [...options, { value: 'output', label: 'output' }];
+		}
+
+		if (options.length > 0 && selected === undefined) {
+			selected = options[0].value;
+		}
+	}
+
+	$: {
+		monitors.update((all) => {
+			return all.map((monitor) => {
+				if (monitor.id === monitorID) {
+					monitor.selected = selected;
+				}
+
+				return monitor;
+			});
+		});
+	}
 </script>
 
 <ModuleHeaderAction
-    value={selected}
-    permanent
-    border
-    on:change={(event) => selected = event.detail}
-    options={options}
+	value={selected}
+	permanent
+	border
+	on:change={(event) => (selected = event.detail)}
+	{options}
 />

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

@@ -1,56 +1,69 @@
 <script>
-export let value = null;
-export let label;
-export let disabled = false;
-export let showLabel = true;
-export let title = "";
-export let context = null;
-export let key = "";
-
+	export let value = null;
+	export let label;
+	export let disabled = false;
+	export let showLabel = true;
+	export let title = '';
+	export let context = null;
+	export let key = '';
 </script>
 
-<div class="button-container" class:disabled={disabled}>
-    <button class="button" {disabled} on:click {title} on:mouseenter on:mouseleave>
-        <span class="label" class:visually-hidden={!showLabel}>{label}</span>
-        <slot></slot>
-    </button>
+<div class="button-container" class:disabled>
+	<button
+		class="button"
+		{disabled}
+		on:click
+		{title}
+		on:mouseenter
+		on:mouseleave
+	>
+		<span class="label" class:visually-hidden={!showLabel}>{label}</span>
+		<slot />
+	</button>
 </div>
 
 <style>
-.button-container {
-    display: flex;
-    width: 100%;
-}
-
-.button {
-    display: flex;
-    width: 100%;
-    min-width: var(--height-input);
-    height: var(--height-input);
-    justify-content: center;
-    align-items: center;
-    padding: 0 4px;
-
-    color: rgba(255, 255, 255, 0.5);
-    font-size: var(--font-size-input);
-    
-    border-radius: var(--border-radius-input);
-    background-color: var(--background-color, var(--color-background-input));
-    box-shadow: inset 0 0 0 1px var(--box-shadow-color, var(--color-border-input));
-}
-
-:global(.field.disabled) .button {
-    color: rgba(255, 255, 255, 0.2);
-}
-
-.button:hover {
-    color: var(--color-text);
-
-    box-shadow: inset 0 0 0 1px var(--box-shadow-color-active, var(--color-active));
-}
-
-.button:active {
-    box-shadow: 0 0 0 2px var(--box-shadow-color-active, var(--color-active));
-}
+	.button-container {
+		display: flex;
+		width: 100%;
+	}
+
+	.button {
+		display: flex;
+		width: 100%;
+		min-width: var(--height-input);
+		height: var(--height-input);
+		justify-content: center;
+		align-items: center;
+		padding: 0 4px;
+
+		color: var(--color-text-input);
+		font-size: var(--font-size-input);
+
+		border-radius: var(--border-radius-input);
+		background-color: var(
+			--background-color,
+			var(--color-background-input)
+		);
+		box-shadow: inset 0 0 0 1px
+			var(--box-shadow-color, var(--color-border-input));
+		outline: 0;
+	}
+
+	.button:disabled {
+		color: var(--color-text-input-disabled);
+	}
+
+	.button:hover {
+		color: var(--color-text);
+
+		box-shadow: inset 0 0 0 1px
+			var(--box-shadow-color-active, var(--color-active));
+	}
 
+	.button:active,
+	.button:focus-visible {
+		box-shadow: 0 0 0 2px
+			var(--box-shadow-color-active, var(--color-active));
+	}
 </style>

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

@@ -1,72 +1,78 @@
 <script>
-import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher } from 'svelte';
 
-export let value;
-export let context = null;
-export let key = "";
+	export let value;
+	export let context = null;
+	export let key = '';
+	export let disabled = false;
 
-const dispatch = createEventDispatcher();
-
-function handleChange() {
-    dispatch("change", value);
-}
+	const dispatch = createEventDispatcher();
 
+	function handleChange() {
+		dispatch('change', value);
+	}
 </script>
 
 <div class="checkbox">
-    <input class="input" bind:checked={value} type="checkbox" on:change={handleChange} />
-    <div class="checked">
-    </div>
+	<input
+		class="input"
+		bind:checked={value}
+		type="checkbox"
+		on:change={handleChange}
+		disabled={disabled ? 'disabled' : null}
+	/>
+	<div class="checked" />
 </div>
 
 <style>
-.checkbox {
-    position: relative;
-
-    width: var(--height-input);
-    height: var(--height-input);
-    margin-right: calc(var(--padding));
-    box-shadow: inset 0 0 0 1px var(--color-border-input);
-
-    border-radius: var(--border-radius-input);
-    background-color: var(--color-background-input);
-}
-
-.checkbox:hover {
-    box-shadow: inset 0 0 0 1px var(--color-active);
-}
-
-.checkbox:focus-within {
-    box-shadow: 0 0 0 2px var(--color-active);
-}
-
-.input {
-    width: 100%;
-    height: 100%;
-    border: none;
-    border-radius: var(--border-radius-input);
-    background-color: transparent;
-}
-
-/* .input:checked {
-    background-color: var(--color-active);
-} */
-
-.checked {
-    position: absolute;
-    left: 3px;
-    top: 3px;
-    bottom: 3px;
-    right: 3px;
-
-    border-radius: calc(var(--border-radius-input) * 0.5);
-    background-color: var(--color-active);
-
-    opacity: 0;
-    pointer-events: none;
-}
-
-.input:checked + .checked {
-    opacity: 1;
-}
+	.checkbox {
+		position: relative;
+
+		width: var(--height-input);
+		height: var(--height-input);
+		margin-right: calc(var(--padding));
+		box-shadow: inset 0 0 0 1px var(--color-border-input);
+
+		border-radius: var(--border-radius-input);
+		background-color: var(--color-background-input);
+	}
+
+	.checkbox:hover {
+		box-shadow: inset 0 0 0 1px var(--color-active);
+	}
+
+	.checkbox:focus-within {
+		box-shadow: 0 0 0 2px var(--color-active);
+	}
+
+	.input {
+		width: 100%;
+		height: 100%;
+		border: none;
+		border-radius: var(--border-radius-input);
+		background-color: transparent;
+		outline: 0;
+	}
+
+	.checked {
+		position: absolute;
+		left: 3px;
+		top: 3px;
+		bottom: 3px;
+		right: 3px;
+
+		border-radius: calc(var(--border-radius-input) * 0.5);
+		background-color: var(--color-active);
+
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.input:checked + .checked {
+		opacity: 1;
+	}
+
+	.input:checked:disabled + .checked {
+		background-color: var(--color-active-disabled);
+	}
 </style>