New site sheet

src/module/actor/sheets/sitesheet.ts

@@ -4,7 +4,7 @@ import siteSheetVue from '../../vue/site-sheet.vue'
 export class IronswornSiteSheet extends VueActorSheet {
 	static get defaultOptions() {
 		return foundry.utils.mergeObject(super.defaultOptions, {
-			width: 750,
+			width: 600,
 			height: 700,
 			rootComponent: siteSheetVue
 		}) as any

src/module/vue/components/site/site-denizenrow.vue

@@ -0,0 +1,52 @@
+<template>
+	<DropTarget is="tr" drop-type="progress" :class="$style.tr">
+		<td width="60">
+			<span v-if="denizen.range[0] === denizen.range[1]">{{
+				denizen.range[0]
+			}}</span>
+			<span v-else>{{ denizen.range[0] }}–{{ denizen.range[1] }}</span>
+		</td>
+		<td>
+			<input
+				v-if="editMode"
+				ref="description"
+				type="text"
+				:class="{ highlight: focused, [$style.input]: true }"
+				v-model="denizen.text"
+				:placeholder="frequencyLabel"
+			/>
+			<Suspense v-else>
+				<RenderedText element="div" :content="denizen.text" />
+			</Suspense>
+		</td>
+	</DropTarget>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import RenderedText from 'component:rendered-text.vue'
+import DropTarget from '../../drop-target.vue'
+
+const denizen = defineModel()
+
+const props = defineProps<{ editMode: boolean }>()
+
+const focused = ref(false)
+const description = ref<HTMLInputElement>()
+function focus() {
+	focused.value = true
+	description.value?.focus()
+	setTimeout(() => (focused.value = false), 5000)
+}
+defineExpose({ focus })
+</script>
+
+<style lang="scss" module>
+.tr {
+	height: 20px;
+	padding: 1px;
+}
+.input {
+	height: 19px !important;
+}
+</style>

src/module/vue/components/site/site-droparea.vue

@@ -1,53 +1,28 @@
 <template>
 	<DropTarget is="div" class="flexcol box" :drop-type="itemType">
-		<div
-			v-if="item"
-			style="position: relative; padding: var(--ironsworn-spacer-xl)">
-			<div class="flexrow">
-				<document-img
-					:document="item"
-					size="40px"
-					class="nogrow"
-					style="margin-right: var(--ironsworn-spacer-md)" />
+		<div v-if="item" class="flexrow" :class="$style.container" style="">
+			<document-img :document="item" size="40px" class="nogrow" />
 
-				<div class="flexcol">
-					<h4 style="margin: 0">{{ item.name }}</h4>
-					<p>{{ item.system.summary }}</p>
-				</div>
+			<h4>{{ item.name }}</h4>
 
-				<div
-					v-if="editMode"
-					class="flexrow"
-					style="
-						position: absolute;
-						top: var(--ironsworn-spacer-md);
-						right: var(--ironsworn-spacer-md);
-					">
-					<BtnDocDelete
-						v-if="foundryitem() != null"
-						block
-						:document="(foundryitem() as IronswornItem)" />
-					<IronBtn block icon="fa:pen-to-square" @click="edit" />
-				</div>
+			<div v-if="editMode" class="flexrow" :class="$style.controls">
+				<BtnDocDelete
+					v-if="foundryitem() != null"
+					block
+					:document="(foundryitem() as IronswornItem)"
+				/>
+				<IronBtn block icon="fa:pen-to-square" @click="edit" />
 			</div>
 		</div>
 
-		<div v-else style="padding: 1em; width: 100%">
-			<div class="flexcol">
-				<h4 style="margin: 0">{{ $t(titleKey) }}</h4>
-				<btn-compendium
-					:compendium="compendiumKey"
-					style="padding: 0 2em"
-					class="inset"
-					block
-					:text="$t('IRONSWORN.OpenCompendium')" />
-			</div>
+		<div v-else class="flexcol" :class="$style.emptyContainer">
+			<btn-compendium block :compendium="compendiumKey" :text="$t(titleKey)" />
 		</div>
 	</DropTarget>
 </template>
 
 <script setup lang="ts">
-import type { Ref } from 'vue'
+import { capitalize, Ref } from 'vue'
 import { inject, computed } from 'vue'
 import { $ActorKey, ActorKey } from '../../provisions'
 import DocumentImg from '../document-img.vue'
@@ -79,3 +54,27 @@ function edit() {
 	foundryitem()?.sheet?.render(true)
 }
 </script>
+
+<style lang="scss" module>
+.container {
+	position: relative;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5rem;
+	padding: 0.5em;
+
+	h4 {
+		margin: 0;
+	}
+}
+
+.emptyContainer {
+	min-height: 54px;
+}
+
+.controls {
+	position: absolute;
+	top: var(--ironsworn-spacer-xs);
+	right: var(--ironsworn-spacer-xs);
+}
+</style>