fragment-tools 0.1.13 → 0.1.15

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

@@ -1,103 +1,115 @@
 <script>
-export let name;
+	export let name;
 
-export let collapsed = false;
-
-function handleClick() {
-    collapsed = !collapsed;
-}
+	export let collapsed = false;
 
+	function handleClick() {
+		collapsed = !collapsed;
+	}
 </script>
 
-<div class="field-group {collapsed ? "collapsed" : ""}">
-    <header class="header">
-        <button class="header__action" on:click={handleClick}>
-            <svg class="header__icon" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.75 8.75L14.25 12L10.75 15.25"/>
-            </svg>
-            <span class="field-group__name">{name}</span>
-        </button>
-    </header>
-    <div class="content">
-        <slot></slot>
-    </div>
+<div class="field-group {collapsed ? 'collapsed' : ''}">
+	<header class="header">
+		<button class="header__action" on:click={handleClick}>
+			<svg
+				class="header__icon"
+				width="24"
+				height="24"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="1.5"
+					d="M10.75 8.75L14.25 12L10.75 15.25"
+				/>
+			</svg>
+			<span class="field-group__name">{name}</span>
+		</button>
+	</header>
+	<div class="content">
+		<slot />
+	</div>
 </div>
 
 <style>
-.field-group {
-    position: relative;
-
-    display: grid;
-    width: 100%;
-    
-}
-
-.field-group:after {
-    content: "";
-
-    position: absolute;
-    left: 0;
-    bottom: 0px;
-    
-    width: 12px;
-    height: 1px;
-    
-    background-color: #323233;
-}
-
-.header {
-    padding: 3px 6px;
-    border-bottom: 1px solid #323233;
-}
-
-.header__action {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    text-align: left;
-
-    background: transparent;
-    cursor: pointer;
-}
-
-.header__icon {
-    padding-bottom: 1px;
-
-    color: #f0f0f0;
-    transform: rotate(90deg);
-    opacity: 0.5;
-    transition: opacity 0.1s ease;
-}
-
-.header__action:hover .header__icon {
-    opacity: 1;
-}
-
-.field-group.collapsed .header__icon {
-    transform: rotate(0deg);
-}
-
-.field-group__name {
-    color: #f0f0f0;
-
-    font-size: 11px;
-    font-weight: 700;
-    /* text-transform: uppercase; */
-
-    opacity: 0.75;
-    transition: opacity 0.1s ease;
-}
-
-.header__action:hover .field-group__name {
-    opacity: 1;
-}
-
-.content {
-    margin-left: 12px;
-    border-left: 1px solid #323233;
-}
-
-.field-group.collapsed .content {
-    display: none;
-}
+	.field-group {
+		position: relative;
+
+		display: grid;
+		width: 100%;
+	}
+
+	.field-group:after {
+		content: '';
+
+		position: absolute;
+		left: 0;
+		bottom: 0px;
+
+		width: 12px;
+		height: 1px;
+
+		background-color: #323233;
+	}
+
+	.header {
+		padding: 3px 6px;
+		border-bottom: 1px solid #323233;
+	}
+
+	.header__action {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		text-align: left;
+
+		background: transparent;
+		cursor: pointer;
+		outline: 0;
+	}
+
+	.header__icon {
+		padding-bottom: 1px;
+
+		color: #f0f0f0;
+		transform: rotate(90deg);
+		opacity: 0.5;
+		transition: opacity 0.1s ease;
+	}
+
+	.header__action:hover .header__icon {
+		opacity: 1;
+	}
+
+	.field-group.collapsed .header__icon {
+		transform: rotate(0deg);
+	}
+
+	.field-group__name {
+		color: #f0f0f0;
+
+		font-size: 11px;
+		font-weight: 700;
+		/* text-transform: uppercase; */
+
+		opacity: 0.75;
+		transition: opacity 0.1s ease;
+	}
+
+	.header__action:hover .field-group__name,
+	.header__action:focus-visible .field-group__name {
+		opacity: 1;
+	}
+
+	.content {
+		margin-left: 12px;
+		border-left: 1px solid #323233;
+	}
+
+	.field-group.collapsed .content {
+		display: none;
+	}
 </style>

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

@@ -1,123 +1,134 @@
 <script>
-export let visible = true;
-export let secondary = false;
-export let interactive = false;
-export let label = "";
-export let name = "";
+	export let key;
+	export let visible = true;
+	export let secondary = false;
+	export let interactive = false;
+	export let displayName = undefined;
+	export let disabled = false;
 </script>
 
-<div class="field__section" class:visible={visible} class:secondary={secondary} class:no-label={label === null}>
-    <div class="field__infos">
-        {#if label !== null}
-            {#if interactive}
-                <button class="field__label" on:click>{label}</button>
-            {:else}
-                <span class="field__label">{label}</span>
-            {/if}
-        {/if}
-        <slot name="infos"></slot>
-    </div>
-    <div class="field__input">
-        <slot></slot>
-    </div>
+<div
+	class="field__section"
+	class:visible
+	class:secondary
+	class:nameless={displayName === null}
+>
+	<div class="field__infos">
+		{#if displayName !== null}
+			{#if interactive}
+				<button class="field__label" {disabled} on:click
+					>{displayName ?? key}</button
+				>
+			{:else}
+				<span class="field__label">{displayName ?? key}</span>
+			{/if}
+		{/if}
+		<slot name="infos" />
+	</div>
+	<div class="field__input">
+		<slot />
+	</div>
 </div>
 
 <style>
-.field__section {
-    position: relative;
-    
-    display: grid;
-    grid-template-columns: 0.5fr 1fr;
-    column-gap: 10px;
-}
-
-.field__section.no-label {
-    grid-template-columns: 1fr;
-}
-
-.field__section:hover .field__label, .field__section:focus-within .field__label {
-    opacity: 1;
-}
-
-.field__section:not(.visible) {
-    display: none;
-}
-
-.field__section.secondary {
-    --margin: 15px;
-
-    grid-template-columns: 0.25fr 1fr;
-    margin-top: var(--margin);
-}
-
-.field__section.secondary:before {
-    content: '';
-
-    position: absolute;
-    left: 10px;
-    top: calc(var(--margin) * -1);
-
-    width: 1px;
-    height: var(--margin);
-    
-    background-color: var(--color-spacing);
-}
-
-.field__infos {
-    position: relative;
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    
-    color: var(--color-text);
-}
-
-.field__label {
-    color: inherit;
-    font-size: var(--font-size-input);
-    user-select: none;
-
-    opacity: 0.6;
-    background-color: transparent;
-    transition: opacity 0.1s ease;
-}
-
-button.field__label {
-    cursor: pointer;
-}
-
-.field__label:focus-visible {
-    outline: 0;
-    box-shadow: 0 0 0 2px var(--color-text);
-    border-radius: 2px;
-}
-
-.field__section.secondary {
-    grid-template-columns: 1fr;
-}
-
-.field__section.secondary .field__infos {
-    display: none;
-}
-
-.field__section.secondary .field__label {
-    position: relative;
-
-    padding-left: 5px;
-
-    background-color: #242425;
-}
-
-.field__input {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-}
-
-.field__section.secondary .field__input {
-    padding: var(--column-gap);
-    border: 1px solid var(--color-spacing);
-}
+	.field__section {
+		position: relative;
+
+		display: grid;
+		grid-template-columns: 0.5fr 1fr;
+		column-gap: 10px;
+	}
+
+	.field__section.nameless {
+		grid-template-columns: 1fr;
+	}
+
+	.field__section:hover .field__label,
+	.field__section:focus-within .field__label {
+		opacity: 1;
+	}
+
+	.field__section:not(.visible) {
+		display: none;
+	}
+
+	.field__section.secondary {
+		--margin: 15px;
+
+		grid-template-columns: 0.25fr 1fr;
+		margin-top: var(--margin);
+	}
+
+	.field__section.secondary:before {
+		content: '';
+
+		position: absolute;
+		left: 10px;
+		top: calc(var(--margin) * -1);
+
+		width: 1px;
+		height: var(--margin);
+
+		background-color: var(--color-spacing);
+	}
+
+	.field__infos {
+		position: relative;
+
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		color: var(--color-text);
+	}
+
+	.field__label {
+		color: inherit;
+		font-size: var(--font-size-input);
+		user-select: none;
+
+		opacity: 0.6;
+		background-color: transparent;
+		transition: opacity 0.1s ease;
+	}
+
+	button.field__label {
+		cursor: pointer;
+	}
+
+	.field__label:focus-visible {
+		outline: 0;
+		box-shadow: 0 0 0 2px var(--color-text);
+		border-radius: 2px;
+	}
+
+	.field__section.secondary {
+		grid-template-columns: 1fr;
+	}
+
+	.field__section.secondary .field__infos {
+		display: none;
+	}
+
+	.field__section.secondary .field__label {
+		position: relative;
+
+		padding-left: 5px;
+
+		background-color: #242425;
+	}
+
+	.field__input {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: flex-start;
+
+		min-height: calc(var(--height-input) + 4px);
+	}
+
+	.field__section.secondary .field__input {
+		padding: var(--column-gap);
+		border: 1px solid var(--color-spacing);
+	}
 </style>

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

@@ -1,37 +1,36 @@
 <script>
-export let height = 20;
+	export let height = 20;
 </script>
 
 <div class="field-space" style="height: {height}px"></div>
 
 <style>
-.field-space {
-    position: relative;
-
-    border-bottom: 1px solid var(--color-spacing);
-    overflow: hidden;
-}
-
-.field-space:before, .field-space:after {
-    /* content: ''; */
-    position: absolute;
-    top: 50%;
-    left: 0;
-
-    width: 100%;
-    height: 1px;
-
-    background-color: var(--color-spacing);
-}
-
-.field-space:before {
-    transform: rotate(3deg);
-}
-
-.field-space:after {
-    content: none;
-    transform: rotate(-3deg);
-}
-
-
+	.field-space {
+		position: relative;
+
+		border-bottom: 1px solid var(--color-spacing);
+		overflow: hidden;
+	}
+
+	.field-space:before,
+	.field-space:after {
+		/* content: ''; */
+		position: absolute;
+		top: 50%;
+		left: 0;
+
+		width: 100%;
+		height: 1px;
+
+		background-color: var(--color-spacing);
+	}
+
+	.field-space:before {
+		transform: rotate(3deg);
+	}
+
+	.field-space:after {
+		content: none;
+		transform: rotate(-3deg);
+	}
 </style>