RC-26 | Name input

Apps/HeroSummaryCardV1/content.hbs

@@ -9,7 +9,13 @@
 			Player
 		</div>
 	</div>
-	<input id="{{meta.idp}}-name" class="hero_name row-alt" value="Hugo">
+	<input
+		id="{{meta.idp}}-name"
+		type="text"
+		class="hero_name row-alt"
+		value="{{actor.name}}"
+		name="name"
+	>
 
 	{{!-- * Armour --}}
 	<div class="armour"></div>

Apps/HeroSummaryCardV1/style.css

@@ -16,17 +16,6 @@
 		padding: 2px 4px;
 	}
 
-	input {
-		box-sizing: border-box;
-		border: none;
-
-		&[type="text"],
-		&[type="number"] {
-			padding: 2px 4px;
-			border-bottom: 2px dashed blueviolet;
-		}
-	}
-
 	.hero_name {
 		grid-column: span 3;
 		margin-left: calc(var(--col-gap) * -1);

Apps/common.css

@@ -5,8 +5,22 @@
 	}
 
 	.HeroSummaryCardV1 {
-		height: 270px;
+		/* height: 270px; */
 		width: 680px;
 		--col-gap: 2px;
 	}
+
+	input {
+		all: initial;
+		box-sizing: border-box;
+		border: none;
+		outline: none;
+		font-family: inherit;
+		font-size: inherit;
+		position: relative;
+
+		&[type="text"] {
+			border-bottom: 2px dashed purple;
+		}
+	}
 }

module/Apps/ActorSheets/HeroSummaryCardV1.mjs

@@ -1,8 +1,9 @@
 import { filePath } from "../../consts.mjs";
 
-const { DocumentSheetV2, HandlebarsApplicationMixin } = foundry.applications.api;
+const { HandlebarsApplicationMixin } = foundry.applications.api;
+const { ActorSheetV2 } = foundry.applications.sheets;
 
-export class HeroSummaryCardV1 extends HandlebarsApplicationMixin(DocumentSheetV2) {
+export class HeroSummaryCardV1 extends HandlebarsApplicationMixin(ActorSheetV2) {
 
 	// #region Options
 	static DEFAULT_OPTIONS = {
@@ -40,6 +41,8 @@ export class HeroSummaryCardV1 extends HandlebarsApplicationMixin(DocumentSheetV
 		ctx.meta ??= {};
 		ctx.meta.idp = this.document.uuid;
 
+		ctx.actor = this.document;
+
 		partId = partId.slice(0,1).toUpperCase() + partId.slice(1);
 		if (this[`_prepare${partId}Context`] != null) {
 			ctx = await this[`_prepare${partId}Context`](ctx, opts);