migrates Skill sheet to DocumentV2

src/module/sheets/skillSheet.mjs

@@ -1,35 +1,64 @@
-export class SkillSheet extends foundry.appv1.sheets.ItemSheet {
+const {DocumentSheetV2, HandlebarsApplicationMixin} = foundry.applications.api
-    /**@override */
+
-    static get defaultOptions() {
+export class SkillSheet extends HandlebarsApplicationMixin(DocumentSheetV2) {
-        return foundry.utils.mergeObject(super.defaultOptions, {
+
-            classes: ['dsa41', 'sheet', 'item', 'skill'],
+    /** @inheritDoc */
-            width: 520,
+    static DEFAULT_OPTIONS = {
-            height: 480,
+        position: {width: 520, height: 480},
+        classes: ['dsa41', 'sheet', 'item', 'skill'],
+        tag: 'form',
+        form: {
+            submitOnChange: true,
+            closeOnSubmit: false,
+            handler: SkillSheet.#onSubmitForm
+        }
+    }
+
+    // MIGRATE to tabs
+
+    static TABS = {
+        sheet: {
             tabs: [
-                {
+                {id: 'meta', group: 'sheet', label: 'Meta'},
-                    navSelector: '.sheet-tabs',
+                {id: 'description', group: 'sheet', label: 'Beschreibung'},
-                    contentSelector: '.sheet-body',
-                    initial: 'meta',
-                },
             ],
-        });
+            initial: 'meta'
+        }
+    }
+
+    /** @inheritDoc */
+    static PARTS = {
+        form: {
+            template: `systems/DSA_4-1/templates/item/skill/main-sheet.hbs`
+        },
+        meta: {
+            template: `systems/DSA_4-1/templates/item/skill/tab-meta.hbs`
+        },
+        description: {
+            template: `systems/DSA_4-1/templates/item/skill/tab-description.hbs`
+        }
+    }
+
+    /**
+     * Handle form submission
+     * @this {MyClass}
+     * @param {SubmitEvent} event
+     * @param {HTMLFormElement} form
+     * @param {FormDataExtended} formData
+     */
+    static async #onSubmitForm(event, form, formData) {
+        event.preventDefault()
+
+        await this.document.update(formData.object) // Note: formData.object
     }
 
     /** @override */
-    get template() {
+    async _prepareContext(options) {
-        return `systems/DSA_4-1/templates/item/item-skill-sheet.hbs`;
-    }
 
-    /** @override */
+        const context = await super._prepareContext(options)
-    getData() {
-        // Retrieve the data structure from the base sheet. You can inspect or log
-        // the context variable to see the structure, but some key properties for
-        // sheets are the actor object, the data object, whether or not it's
-        // editable, the items array, and the effects array.
-        const context = super.getData();
 
         // Use a safe clone of the actor data for further operations.
-        const skillData = context.data;
+        const skillData = context.document;
 
         // Add the actor's data to context.data for easier access, as well as flags.
         context.system = skillData.system;
@@ -48,18 +77,9 @@ export class SkillSheet extends foundry.appv1.sheets.ItemSheet {
         context.isCombat = context.system.gruppe === "Kampf"
         context.isTalent = context.system.gruppe !== "Kampf"
         context.isLanguage = context.system.gruppe === "Sprachen" || context.system.gruppe === "Schriften"
-        context.hasRequirement = context.system.voraussetzung.talent != null
+        context.hasRequirement = context.system.voraussetzung?.talent != null ?? false
 
         return context;
     }
 
-    activateListeners(html) {
-        super.activateListeners(html);
-
-        // Everything below here is only needed if the sheet is editable
-        if (!this.isEditable) {
-
-        }
-    }
-
 }

src/style/_richtext-editor.scss

@@ -0,0 +1,3 @@
+.editor.prosemirror.active, .editor.prosemirror.inactive {
+  flex: 1;
+}

src/style/_skill-sheet.scss

@@ -1,6 +1,6 @@
 .sheet.item.skill {
 
-  .tab.meta.active {
+  .meta-details {
 
     display: grid;
     grid-template-areas:
@@ -8,9 +8,7 @@
       "taw statistics ebe"
       "language language language"
       "attack attack attack";
-
+    height: unset;
-    gap: 8px;
-    margin: 8px;
 
     .category {
       grid-area: category;
@@ -48,4 +46,8 @@
 
   }
 
+  .description-details {
+
+  }
+
 }

src/style/_tabs.scss

@@ -10,7 +10,7 @@
     display: flow;
     border-top: unset;
     border-bottom: unset;
-    margin-bottom: 9px;
+    margin-bottom: 0;
 
     a.item[data-tab] {
 
@@ -25,7 +25,6 @@
         background: assets.$tab-background;
         position: relative;
         z-index: 2;
-
       }
 
     }
@@ -46,3 +45,60 @@
   }
 
 }
+
+// Tabs v2
+
+.sheet-tabs {
+
+  position: relative;
+  display: flow;
+  border-top: unset;
+  border-bottom: unset;
+  margin-bottom: 0;
+
+  a[data-action="tab"] {
+
+    background-color: colours.$tab-inactive-background-color;
+    display: inline-block;
+    height: 32px;
+    line-height: 32px;
+    vertical-align: middle;
+    padding: 0 16px;
+
+    span {
+
+    }
+
+    &.active {
+
+      border-left: numbers.$tab-border-width solid colours.$tab-border-color;
+      border-top: numbers.$tab-border-width solid colours.$tab-border-color;
+      border-right: numbers.$tab-border-width solid colours.$tab-border-color;
+      border-bottom: 0;
+      top: numbers.$tab-border-width*2;
+      background: assets.$tab-background;
+      position: relative;
+      z-index: 2;
+
+      span {
+
+      }
+
+    }
+
+  }
+}
+
+section.tab {
+  border: numbers.$tab-border-width solid colours.$tab-border-color;
+  background: assets.$tab-pane-background;
+  flex: 1;
+
+  & > div {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: 8px;
+    padding: 8px;
+  }
+}

src/style/styles.scss

@@ -11,6 +11,7 @@
 @use "_player-action";
 @use "_modify-liturgy";
 @use "_liturgy-banner";
-@use "_talent-sheet";
+@use "_skill-sheet";
 @use "_active-effect-sheet";
 @use "_advantage-sheet";
+@use "_richtext-editor";

src/templates/item/item-skill-sheet.hbs

@@ -1,97 +0,0 @@
-<form class="{{cssClass}} {{actor.type}} flexcol" autocomplete="off">
-
-    {{!-- Sheet Tab Navigation --}}
-    <nav class="sheet-tabs tabs" style="flex: 0" data-group="primary">
-        <a class="item" data-tab="meta">Talent</a>
-        <a class="item" data-tab="description">Regeltext</a>
-    </nav>
-
-    {{!-- Sheet Body --}}
-    <section class="sheet-body" style="flex: 1">
-
-        <div class="tab meta" data-group="primary" data-tab="meta">
-            <div class="category">
-                <label>Kategorie
-                    <select name="system.gruppe">
-                        {{selectOptions categoryOptions selected=system.gruppe inverted=true}}
-                    </select>
-                </label>
-            </div>
-            <div class="taw">
-                <label>TAW:
-                    <input type="text" name="system.taw"
-                           value="{{system.taw}}"/>
-                </label>
-            </div>
-            {{#if isTalent}}
-            <div class="statistics">
-                <label class="throw">Probe</label>
-                <div>
-                    <label>
-                        <input type="text" name="system.probe.0"
-                               value="{{system.probe.[0]}}"/>
-                    </label>
-                </div>
-                <div><label>
-                    <input type="text" name="system.probe.1"
-                           value="{{system.probe.[1]}}"/>
-                </label></div>
-                <div>
-                    <label>
-                        <input type="text" name="system.probe.2"
-                               value="{{system.probe.[2]}}"/>
-                    </label>
-                </div>
-            </div>
-            {{/if}}
-            <div class="ebe">
-                <label>Effektive Behinderung
-                    <input type="text" name="system.behinderung" value="{{system.behinderung}}"/>
-                </label>
-            </div>
-            {{#if isLanguage}}
-            <div class="language-statistics">
-                <label>Sprachenkomplexizität
-                    <input type="text" name="system.komplexität" value="{{system.komplexität}}"/>
-                </label>
-            </div>
-            {{/if}}
-            {{#if isCombat}}
-            <div class="attack-statistics">
-                <div>
-                    <label>Attacke
-                        <input type="text" name="system.at" value="{{system.at}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Parade
-                        <input type="text" name="system.pa" value="{{system.pa}}"/>
-                    </label>
-                </div>
-            </div>
-            {{/if}}
-
-        </div>
-        <div class="tab description" data-group="primary" data-tab="description">
-            <div>
-                <label>Beschreibungstext</label>
-                {{editor system.talent target="system.talent" button=true owner=owner editable=editable}}
-            </div>
-            {{#if hasRequirement}}
-            <div>
-                <label>Voraussetzung</label>
-                <ul>
-                    {{#each system.voraussetzung}}
-                        <li>
-                            <input type="text" name="system.vorraussetzung.{{@key}}.wert" value="{{this}}"/>
-                            <input type="text" name="system.vorraussetzung.{{@key}}.talent" value="{{this}}"/>
-                        </li>
-                    {{/each}}
-                </ul>
-            </div>
-            {{/if}}
-        </div>
-
-        </div>
-    </section>
-</form>

src/templates/item/skill/main-sheet.hbs

@@ -0,0 +1,14 @@
+<div>
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="sheet-tabs tabs{{#if verticalTabs}} vertical{{/if}}"
+         aria-roledescription="{{localize "SHEETS.FormNavLabel"}}">
+        {{#each tabs as |tab|}}
+            <a data-action="tab" data-group="{{tab.group}}" data-tab="{{tab.id}}"
+               {{#if tab.cssClass}}class="{{tab.cssClass}}"{{/if}}
+                {{#if tab.tooltip}}data-tooltip="{{tab.tooltip}}"{{/if}}>
+                {{#if tab.icon}}<i class="{{tab.icon}}" inert></i>{{/if}}
+                {{#if tab.label}}<span>{{localize tab.label}}</span>{{/if}}
+            </a>
+        {{/each}}
+    </nav>
+</div>

src/templates/item/skill/tab-description.hbs

@@ -0,0 +1,32 @@
+{{!-- Individual Tab Template --}}
+<section class="tab {{tabs.description.id}} {{tabs.description.cssClass}}"
+         data-tab="{{tabs.description.id}}"
+         data-group="{{tabs.description.group}}">
+    {{!-- Tab content here --}}
+    <div class="description-details">
+
+        <label>Beschreibungstext</label>
+        <prose-mirror
+                name="system.talent"
+                button="false"
+                editable="{{editable}}"
+                toggled="true"
+                value="{{system.talent}}">
+            {{{system.talent}}}
+        </prose-mirror>
+
+        {{#if hasRequirement}}
+            <div>
+                <label>Voraussetzung</label>
+                <ul>
+                    {{#each system.voraussetzung}}
+                        <li>
+                            <input type="text" name="system.vorraussetzung.{{@key}}.wert" value="{{this}}"/>
+                            <input type="text" name="system.vorraussetzung.{{@key}}.talent" value="{{this}}"/>
+                        </li>
+                    {{/each}}
+                </ul>
+            </div>
+        {{/if}}
+    </div>
+</section>

src/templates/item/skill/tab-meta.hbs

@@ -0,0 +1,68 @@
+{{!-- Individual Tab Template --}}
+<section class="tab {{tabs.meta.id}} {{tabs.meta.cssClass}}"
+         data-tab="{{tabs.meta.id}}"
+         data-group="{{tabs.meta.group}}">
+    {{!-- Tab content here --}}
+    <div class="meta-details">
+        <div class="category">
+            <label>Kategorie
+                <select name="system.gruppe">
+                    {{selectOptions categoryOptions selected=system.gruppe inverted=true}}
+                </select>
+            </label>
+        </div>
+        <div class="taw">
+            <label>TAW:
+                <input type="text" name="system.taw"
+                       value="{{system.taw}}"/>
+            </label>
+        </div>
+        {{#if isTalent}}
+            <div class="statistics">
+                <label class="throw">Probe</label>
+                <div>
+                    <label>
+                        <input type="text" name="system.probe.0"
+                               value="{{system.probe.[0]}}"/>
+                    </label>
+                </div>
+                <div><label>
+                    <input type="text" name="system.probe.1"
+                           value="{{system.probe.[1]}}"/>
+                </label></div>
+                <div>
+                    <label>
+                        <input type="text" name="system.probe.2"
+                               value="{{system.probe.[2]}}"/>
+                    </label>
+                </div>
+            </div>
+        {{/if}}
+        <div class="ebe">
+            <label>Effektive Behinderung
+                <input type="text" name="system.behinderung" value="{{system.behinderung}}"/>
+            </label>
+        </div>
+        {{#if isLanguage}}
+            <div class="language-statistics">
+                <label>Sprachenkomplexizität
+                    <input type="text" name="system.komplexität" value="{{system.komplexität}}"/>
+                </label>
+            </div>
+        {{/if}}
+        {{#if isCombat}}
+            <div class="attack-statistics">
+                <div>
+                    <label>Attacke
+                        <input type="text" name="system.at" value="{{system.at}}"/>
+                    </label>
+                </div>
+                <div>
+                    <label>Parade
+                        <input type="text" name="system.pa" value="{{system.pa}}"/>
+                    </label>
+                </div>
+            </div>
+        {{/if}}
+    </div>
+</section>