Merge pull request #677 from ben/vue-theme-domain

Vue theme/domain sheet

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Next Release
 
+- Replace the delve theme/domain sheet with a vue implementation ([#677](https://github.com/ben/foundry-ironsworn/pull/677))
+
 ## 1.20.29
 
 - Update move-sheet aesthetics to reduce the use of color a bit ([#672](https://github.com/ben/foundry-ironsworn/pull/672))

src/index.ts

@@ -27,7 +27,7 @@ import { runDataMigrations } from './module/helpers/migrations'
 import { IronswornSettings } from './module/helpers/settings'
 import { AssetSheetV2 } from './module/item/asset/assetsheet-v2'
 import { BondsetSheetV2 } from './module/item/bondset/bondsetsheet-v2'
-import { DelveThemeOrDomainSheet } from './module/item/delve-theme-domain/delvethemeordomainsheet'
+import { ThemeDomainSheet } from './module/item/delve-theme-domain/theme-domain-sheet'
 import { IronswornItem } from './module/item/item'
 import { SFMoveSheet } from './module/item/move/sfmovesheet'
 import { ProgressSheetV2 } from './module/item/progress/progresssheet-v2'
@@ -129,12 +129,10 @@ Hooks.once('init', async () => {
     types: ['sfmove'],
     label: 'IRONSWORN.ITEM.TypeMove',
   })
-  Items.registerSheet('ironsworn', DelveThemeOrDomainSheet, {
+
+  Items.registerSheet('ironsworn', ThemeDomainSheet, {
     types: ['delve-theme', 'delve-domain'],
-    label:
-      game.i18n.localize('IRONSWORN.ITEM.TypeDelveTheme') +
-      ' / ' +
-      game.i18n.localize('IRONSWORN.ITEM.TypeDelveDomain'),
+    label: 'IRONSWORN.ITEM.TypeDelveThemeOrDomain',
     makeDefault: true,
   })
 

src/module/item/delve-theme-domain/theme-domain-sheet.ts

@@ -0,0 +1,11 @@
+import { VueItemSheet } from '../../vue/vueitemsheet'
+import delveThemeDomainSheet from '../../vue/delve-theme-domain-sheet.vue'
+
+export class ThemeDomainSheet extends VueItemSheet {
+  static get defaultOptions() {
+    return mergeObject(super.defaultOptions, {
+      height: 650,
+      rootComponent: delveThemeDomainSheet,
+    } as any)
+  }
+}

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

@@ -66,7 +66,6 @@
 .wrapper {
   margin: 0;
   border-radius: var(--ironsworn-border-radius-lg);
-  background-color: var(--ironsworn-color-midtone-30);
   height: max-content;
 }
 

src/module/vue/delve-theme-domain-sheet.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="flexcol" :class="$style.sheetStyles">
+    <SheetHeaderBasic class="nogrow" :document="data.item" />
+
+    <input
+      class="nogrow"
+      type="text"
+      v-model="typedSystem.summary"
+      :placeholder="$t('IRONSWORN.Summary')"
+      @blur="save"
+    />
+    <MceEditor v-model="typedSystem.description" style="flex-basis: 8rem" />
+
+    <h3 class="nogrow">{{ $t('IRONSWORN.DELVESITE.Features') }}</h3>
+    <table>
+      <tbody>
+        <tr v-for="feature in typedSystem.features">
+          <td>{{ formattedRange(feature.range) }}</td>
+          <td>
+            <input type="text" v-model="feature.text" @blur="save" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3 class="nogrow">{{ $t('IRONSWORN.DELVESITE.Dangers') }}</h3>
+    <table>
+      <tbody>
+        <tr v-for="danger in typedSystem.dangers">
+          <td>{{ formattedRange(danger.range) }}</td>
+          <td>
+            <input type="text" v-model="danger.text" @blur="save" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style lang="less" module>
+.sheetStyles {
+  gap: var(--ironsworn-spacer-md);
+
+  h3 {
+    margin: var(--ironsworn-spacer-lg) 0 0 0;
+  }
+}
+</style>
+
+<script setup lang="ts">
+import { inject, provide, computed } from 'vue'
+import { DelveThemeDataPropertiesData } from '../item/itemtypes'
+import MceEditor from './components/mce-editor.vue'
+import { $ItemKey, ItemKey } from './provisions'
+import SheetHeaderBasic from './sheet-header-basic.vue'
+
+const $item = inject($ItemKey)
+
+const props = defineProps<{ data: { item: any } }>()
+provide(ItemKey, computed(() => props.data.item) as any)
+
+const typedSystem = props.data.item.system as DelveThemeDataPropertiesData
+
+function formattedRange(range: [number, number]): string {
+  if (range[0] === range[1]) return `${range[0]}`
+  return `${range[0]}–${range[1]}`
+}
+
+function save() {
+  const { summary, description, features, dangers } = typedSystem
+  $item?.update({
+    system: { summary, description, features, dangers },
+  })
+}
+</script>

system/lang/en.json

@@ -680,6 +680,7 @@
       "TypeBondset": "Bondset",
       "TypeDelveDomain": "Site domain",
       "TypeDelveTheme": "Site theme",
+      "TypeDelveThemeOrDomain": "Site theme/domain",
       "TypeMove": "Move",
       "TypeProgressTrack": "Progress track"
     },

system/lang/fr.json

@@ -603,6 +603,7 @@
       "TypeBondset": "Forger un lien",
       "TypeDelveDomain": "Domaine du site",
       "TypeDelveTheme": "Thème du site",
+      "TypeDelveThemeOrDomain": "Thème/domaine du site",
       "TypeMove": "Action",
       "TypeProgressTrack": "Jauge de progrès"
     },

system/lang/pl.json

@@ -505,7 +505,8 @@
       "TypeBond": "Więź",
       "TypeProgressTrack": "Tor postępu",
       "TypeDelveDomain": "Domena",
-      "TypeDelveTheme": "Motyw"
+      "TypeDelveTheme": "Motyw",
+      "TypeDelveThemeOrDomain": "Motyw/domena"
     },
     "ITEMS": {
       "SubtypeConnection": "Połączenia",