Add the ability to edit the item names (closes #149)

module/sheets/Items/UntypedItemSheet.mjs

@@ -48,10 +48,9 @@ export class UntypedItemSheet extends GenericItemSheet {
 	async getData() {
 		const ctx = await super.getData();
 
-		ctx.computed = {
-			showSettingsTab: ctx.isGM || this.item.isOwned,
-			isEmbedded: this.item.isOwned,
-		};
+		ctx.meta.showSettingsTab = ctx.isGM || this.item.isOwned;
+		ctx.meta.isEmbedded = this.item.isOwned;
+		ctx.meta.isEditable = this.isEditable;
 
 		return ctx;
 	};

styles/v3/elements/button.scss

@@ -15,7 +15,7 @@
 	margin: 0;
 	outline: none;
 	padding: 4px 8px;
-	transition: all 400ms ease-in-out;
+	transition: all 200ms ease-in-out;
 	width: initial;
 
 	&:hover, &:focus-visible {

styles/v3/elements/headers.scss

@@ -4,4 +4,7 @@
 		font-size: 1rem;
 		margin: 0;
 	}
+	h1 {
+		font-size: 1.5rem;
+	}
 }

styles/v3/elements/panel.scss

@@ -5,5 +5,13 @@
 		@include material.elevate(2);
 		border-radius: 4px;
 		padding: var(--gap);
+
+		&--row {
+			@extend .panel;
+			display: flex;
+			flex-direction: row;
+			gap: var(--gap);
+			align-items: center;
+		}
 	}
 }

styles/v3/elements/text-input.scss

@@ -0,0 +1,24 @@
+@use "../mixins/material";
+
+.dotdungeon.style-v3 > .window-content input {
+	outline: none;
+	border: none;
+	@include material.elevate(3);
+	color: white;
+	transition: all 200ms ease-in-out;
+	width: auto;
+	height: auto;
+	font-size: inherit;
+
+	&:hover {
+		@include material.elevate(6);
+	}
+
+	&:focus-visible {
+		@include material.elevate(8);
+	}
+
+	&.h1 {
+		font-size: 1.5rem;
+	}
+}

styles/v3/index.scss

@@ -4,6 +4,7 @@
 
 /* Element-Styling */
 @use "./elements/button.scss";
+@use "./elements/text-input.scss";
 @use "./elements/headers.scss";
 @use "./elements/hr.scss";
 @use "./elements/icons.scss";

templates/items/untyped/v2/index.hbs

@@ -2,7 +2,7 @@
 	<div class="page-content">
 		{{> dotdungeon.untyped.v2.general }}
 		{{> dotdungeon.untyped.v2.details }}
-		{{#if computed.showSettingsTab}}
+		{{#if meta.showSettingsTab}}
 			{{> dotdungeon.untyped.v2.settings }}
 		{{/if}}
 		{{> dotdungeon.untyped.v2.effects }}
@@ -13,7 +13,7 @@
 			<button type="button" data-group="page" data-tab="general">General</button>
 			<button type="button" data-group="page" data-tab="details">Details</button>
 			<button type="button" data-group="page" data-tab="effects">Effects</button>
-			{{#if computed.showSettingsTab}}
+			{{#if meta.showSettingsTab}}
 				<button type="button" data-group="page" data-tab="settings">Settings</button>
 			{{/if}}
 		</nav>

templates/items/untyped/v2/tabs/details.v2.untyped.hbs

@@ -8,7 +8,7 @@
 	<div class="tier panel">
 		Item Rarity
 	</div>
-	{{#if computed.isEmbedded}}
+	{{#if meta.isEmbedded}}
 		<div class="location panel">
 			Item Location
 		</div>

templates/items/untyped/v2/tabs/general.v2.untyped.hbs

@@ -1,5 +1,11 @@
 <div class="tab" data-group="page" data-tab="general">
 	<div class="photo panel" style="background: yellowgreen"></div>
-	<div class="name panel"></div>
+	{{#if meta.isEditable}}
+		<input type="text" name="name" class="name panel h1" value="{{item.name}}">
+	{{else}}
+		<h1 class="name panel--row">
+			{{item.name}}
+		</h1>
+	{{/if}}
 	<div class="description panel"></div>
 </div>

templates/items/untyped/v2/tabs/settings.v2.untyped.hbs

@@ -1,5 +1,5 @@
 <div class="tab" data-group="page" data-tab="settings">
-	{{#if computed.isEmbedded}}
+	{{#if meta.isEmbedded}}
 		<div class="combat-relevant panel">
 			Useful in Combat?
 		</div>