migrates spells and equipment to DocumentV2

src/main.mjs

@@ -10,7 +10,7 @@ import {AdvantageSheet} from "./module/sheets/advantageSheet.mjs";
 import {GroupDataModel} from "./module/data/group.mjs";
 import {GroupSheet} from "./module/sheets/groupSheet.mjs";
 import {EquipmentDataModel} from "./module/data/equipment.mjs";
-import {AusruestungSheet} from "./module/sheets/equipmentSheet.mjs";
+import {EquipmentSheet} from "./module/sheets/equipmentSheet.mjs";
 import {CreatureDataModel} from "./module/data/creature.mjs";
 import {CreatureSheet} from "./module/sheets/creatureSheet.mjs";
 import {LiturgySheet} from "./module/sheets/liturgySheet.mjs";
@@ -111,7 +111,7 @@ Hooks.once("init", () => {
         makeDefault: true,
         label: 'DSA41.VornachteilLabels.Item'
     })
-    foundry.documents.collections.Items.registerSheet('dsa41.equipment', AusruestungSheet, {
+    foundry.documents.collections.Items.registerSheet('dsa41.equipment', EquipmentSheet, {
         types: ["Equipment"],
         makeDefault: false,
         label: 'DSA41.AusruestungLabels.Item'

src/module/sheets/advantageSheet.mjs

@@ -35,7 +35,7 @@ export class AdvantageSheet extends HandlebarsApplicationMixin(DocumentSheetV2)
 
     /**
      * Handle form submission
-     * @this {MyClass}
+     * @this {AdvantageSheet}
      * @param {SubmitEvent} event
      * @param {HTMLFormElement} form
      * @param {FormDataExtended} formData

src/module/sheets/equipmentSheet.mjs

@@ -1,42 +1,121 @@
-export class AusruestungSheet extends foundry.appv1.sheets.ItemSheet {
+const {DocumentSheetV2, HandlebarsApplicationMixin} = foundry.applications.api
-    /**@override */
+
-    static get defaultOptions() {
+/**
-        return foundry.utils.mergeObject(super.defaultOptions, {
+ * @typedef ApplicationTab
-            classes: ['dsa41', 'sheet', 'item', 'equipment'],
+ * @property {string}  id
-            width: 520,
+ * @property {string}  group
-            height: 480,
+ * @property {boolean} active
+ * @property {string}  cssClass
+ * @property {string}  [label]
+ * @property {string}  [icon]
+ * @property {string}  [tooltip]
+ */
+
+export class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2) {
+
+    /** @inheritDoc */
+    static DEFAULT_OPTIONS = {
+        position: {width: 640, height: 480},
+        classes: ['dsa41', 'sheet', 'item', 'equipment'],
+        tag: 'form',
+        form: {
+            submitOnChange: true,
+            closeOnSubmit: false,
+            handler: EquipmentSheet.#onSubmitForm
+        },
+        actions: {
+            editImage:
+            DocumentSheetV2.DEFAULT_OPTIONS.actions.editImage
+
+        }
+    }
+
+    static TABS = {
+        sheet: {
             tabs: [
-                {
+                {id: 'meta', group: 'sheet', label: 'Meta'},
-                    navSelector: '.sheet-tabs',
+                // Additional Tabs are added based on the nature of this item
-                    contentSelector: '.sheet-body',
+
-                    initial: 'description',
-                },
             ],
-        });
+            initial: 'meta'
+        }
     }
 
-    /** @override */
+
-    get template() {
+    /** @inheritDoc */
-        return `systems/DSA_4-1/templates/item/item-equipment-sheet.hbs`;
+    static PARTS = {
+        form: {
+            template: `systems/DSA_4-1/templates/item/equipment/main-sheet.hbs`
+        },
+        meta: {
+            template: `systems/DSA_4-1/templates/item/equipment/tab-meta.hbs`
+        },
+        melee: {
+            template: `systems/DSA_4-1/templates/item/equipment/tab-melee.hbs`
+        },
+        ranged: {
+            template: `systems/DSA_4-1/templates/item/equipment/tab-ranged.hbs`
+        },
+        container: {
+            template: `systems/DSA_4-1/templates/item/equipment/tab-container.hbs`
+        },
+        armor: {
+            template: `systems/DSA_4-1/templates/item/equipment/tab-armor.hbs`
+        }
     }
 
-    /** @override */
+    /**
-    getData() {
+     * Handle form submission
-        // Retrieve the data structure from the base sheet. You can inspect or log
+     * @this {EquipmentSheet}
-        // the context variable to see the structure, but some key properties for
+     * @param {SubmitEvent} event
-        // sheets are the actor object, the data object, whether or not it's
+     * @param {HTMLFormElement} form
-        // editable, the items array, and the effects array.
+     * @param {FormDataExtended} formData
-        const context = super.getData();
+     */
+    static async #onSubmitForm(event, form, formData) {
+        event.preventDefault()
 
-        // Use a safe clone of the actor data for further operations.
+        let normalisedFormData = {}
-        const equipmentData = context.data;
 
-        // Add the actor's data to context.data for easier access, as well as flags.
+        Object.entries(formData.object).forEach(([key, value]) => {
-        context.system = equipmentData.system;
+            if (Array.isArray(value)) {
-        context.flags = equipmentData.flags;
+                normalisedFormData[key] = value[0]
+            } else {
+                normalisedFormData[key] = value
+            }
+        })
 
-        context.quantity = context.system.quantity;
+        await this.document.update(normalisedFormData) // Note: formData.object
-        context.description = context.system.description;
+    }
+
+    async _preparePartContext(partId, context) {
+        switch (partId) {
+            case 'meta':
+                this.#prepareMetaContext(context)
+                break;
+            case 'melee':
+                this.#prepareMeleeContext(context)
+                break;
+            case 'ranged':
+                this.#prepareRangedContext(context)
+                break;
+            case 'container':
+                this.#prepareContainerContext(context)
+                break;
+            case 'armor':
+                this.#prepareArmorContext(context)
+                break;
+        }
+        context.tab = context.tabs[partId]
+        return context
+    }
+
+    #prepareMetaContext(context) {
+        const equipmentData = context.document.system;
+        context.system = equipmentData;
+        context.quantity = equipmentData.quantity;
+        context.description = equipmentData.description;
+        context.name = context.document.name;
+        context.img = context.document.img;
 
         context.categoryAndOptions = {
             options: {
@@ -46,23 +125,22 @@ export class AusruestungSheet extends foundry.appv1.sheets.ItemSheet {
                 Behälter: "Behälter",
                 Rüstung: "Rüstung",
             },
-            entries: context.system.category,
+            entries: equipmentData.category,
             targetField: "category"
         };
-        context.isMeleeWeapon = context.system.category.includes("Nahkampfwaffe");
+    }
-        context.isRangedWeapon = context.system.category.includes("Fernkampfwaffe");
+
-        context.isContainer = context.system.category.includes("Behälter");
+    #prepareMeleeContext(context) {
-        context.isArmor = context.system.category.includes("Rüstung");
+        const equipmentData = context.document.system;
-        context.price = context.system.price;
+        context.system = equipmentData;
-        context.weight = context.system.weight;
         context.meleeSkillsAndOptions = {
             options: {
                 "": "",
                 Dolche: "Dolche",
                 Fechtwaffen: "Fechtwaffen",
-                Säbel: "Säbel",
+                "Säbel": "Säbel",
                 Schwerter: "Schwerter",
-                Anderthalbhänder: "Anderthalbhänder",
+                "Anderthalbhänder": "Anderthalbhänder",
                 "Zweihandschwerter/-säbel": "Zweihandschwerter/-säbel",
                 "Infanteriewaffen": "Infanteriewaffen",
                 "Speere": "Speere",
@@ -72,9 +150,13 @@ export class AusruestungSheet extends foundry.appv1.sheets.ItemSheet {
                 "Kettenwaffen": "Kettenwaffen",
                 "Raufen": "Raufen"
             },
-            entries: context.system.meleeSkills,
+            entries: equipmentData.meleeSkills,
             targetField: "meleeSkills"
         }
+    }
+
+    #prepareRangedContext(context) {
+        const equipmentData = context.document.system;
         context.rangedSkillsAndOptions = {
             options: {
                 "": "",
@@ -84,24 +166,86 @@ export class AusruestungSheet extends foundry.appv1.sheets.ItemSheet {
                 "Armbrust": "Armbrust",
                 "Bogen": "Bogen",
             },
-            entries: context.system.rangedSkills,
+            entries: equipmentData.rangedSkills,
             targetField: "rangedSkills"
         }
-        return context;
     }
 
-    activateListeners(html) {
+    #prepareContainerContext(context) {
-        super.activateListeners(html);
 
-        html.on('change', '.array-editor select', (evt) => {
+    }
+
+    #prepareArmorContext(context) {
+
+    }
+
+    /**
+     * Adds Tabs based on the items nature
+     *
+     * @param {String} tabGroup
+     * @private
+     */
+    _prepareTabs(tabGroup) {
+
+        const currentTabs = super._prepareTabs(tabGroup);
+
+        const category = this.document.system.category
+        /**
+         *
+         * @type {[{ApplicationTab}]}
+         */
+        let tabs = currentTabs;
+
+        if (category.includes("Nahkampfwaffe")) {
+            tabs.melee = {
+                id: 'melee', group: tabGroup, label: 'Nahkampfwaffe'
+            }
+        }
+        if (category.includes("Fernkampfwaffe")) {
+            tabs.ranged = {
+                id: 'ranged', group: tabGroup, label: 'Fernkampfwaffe'
+            }
+        }
+        if (category.includes("Behälter")) {
+            tabs.container = {
+                id: 'container', group: tabGroup, label: 'Behälter'
+            }
+        }
+        if (category.includes("Rüstung")) {
+            tabs.armor = {
+                id: 'armor', group: tabGroup, label: 'Rüstung'
+            }
+        }
+
+        return tabs
+    }
+
+    /** @override */
+    async _prepareContext(options) {
+
+        const context = await super._prepareContext(options);
+        context.price = context.document.system.price
+        context.weight = context.document.system.weight
+
+        return context
+    }
+
+    /**
+     * Actions performed after any render of the Application.
+     * Post-render steps are not awaited by the render process.
+     * @param {ApplicationRenderContext} context      Prepared context data
+     * @param {RenderOptions} options                 Provided render options
+     * @protected
+     */
+    _onRender(context, options) {
+        this.element.querySelector('.array-editor select').addEventListener('change', (evt) => {
             const addingValue = evt.currentTarget.value;
             const fieldToTarget = evt.currentTarget.dataset.targetField;
-            const newSkills = [...this.object.system[fieldToTarget], addingValue];
+            const newSkills = [...this.document.system[fieldToTarget], addingValue];
 
-            this.object.update({system: {[fieldToTarget]: newSkills}});
+            this.document.update({system: {[fieldToTarget]: newSkills}});
             evt.currentTarget.value = "";
         })
-
     }
 
 }

src/module/sheets/skillSheet.mjs

@@ -39,7 +39,7 @@ export class SkillSheet extends HandlebarsApplicationMixin(DocumentSheetV2) {
 
     /**
      * Handle form submission
-     * @this {MyClass}
+     * @this {SkillSheet}
      * @param {SubmitEvent} event
      * @param {HTMLFormElement} form
      * @param {FormDataExtended} formData

src/module/sheets/spellSheet.mjs

@@ -1,49 +1,69 @@
-export class SpellSheet extends foundry.appv1.sheets.ItemSheet {
+const {DocumentSheetV2, HandlebarsApplicationMixin} = foundry.applications.api
-    /**@override */
+
-    static get defaultOptions() {
+export class SpellSheet extends HandlebarsApplicationMixin(DocumentSheetV2) {
-        return foundry.utils.mergeObject(super.defaultOptions, {
+
-            classes: ['dsa41', 'sheet', 'item', 'spell'],
+
-            width: 520,
+    /** @inheritDoc */
-            height: 480,
+    static DEFAULT_OPTIONS = {
+        position: {width: 520, height: 480},
+        classes: ['dsa41', 'sheet', 'item', 'spell'],
+        tag: 'form',
+        form: {
+            submitOnChange: true,
+            closeOnSubmit: false,
+            handler: SpellSheet.#onSubmitForm
+        }
+    }
+
+    static TABS = {
+        sheet: {
             tabs: [
-                {
+                {id: 'meta', group: 'sheet', label: 'Meta'},
-                    navSelector: '.sheet-tabs',
+                {id: 'variants', group: 'sheet', label: 'Varianten'},
-                    contentSelector: '.sheet-body',
+                {id: 'commonality', group: 'sheet', label: 'Verbreitung'},
-                    initial: 'meta',
-                },
             ],
-        });
+            initial: 'meta'
+        }
+    }
+
+    /** @inheritDoc */
+    static PARTS = {
+        form: {
+            template: `systems/DSA_4-1/templates/item/spell/main-sheet.hbs`
+        },
+        meta: {
+            template: `systems/DSA_4-1/templates/item/spell/tab-meta.hbs`
+        },
+        variants: {
+            template: `systems/DSA_4-1/templates/item/spell/tab-variants.hbs`
+        },
+        commonality: {
+            template: `systems/DSA_4-1/templates/item/spell/tab-commonality.hbs`
+        }
+    }
+
+    /**
+     * Handle form submission
+     * @this {SpellSheet}
+     * @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-spell-sheet.hbs`;
+        const context = await super._prepareContext(options);
-    }
+        const spellData = context.document;
 
-    /** @override */
+        context.system = spellData.system;
-    getData() {
+        context.flags = spellData.flags;
-        // 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;
-
-        // Add the actor's data to context.data for easier access, as well as flags.
-        context.system = skillData.system;
-        context.flags = skillData.flags;
 
         return context;
     }
 
-    activateListeners(html) {
-        super.activateListeners(html);
-
-        // Everything below here is only needed if the sheet is editable
-        if (!this.isEditable) return;
-
-    }
-
 }

src/style/_equipment-sheet.scss

@@ -1,28 +1,15 @@
 @use "./_colours";
 @use "./_numbers";
 
-.app.window-app.dsa41.sheet.item.equipment {
+.application.sheet.dsa41.item.equipment {
 
-  .sheet-body {
+  .tab.meta.active > div {
 
-    position: relative;
-
-    .tab.active {
-      padding: 4px;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-
-    .tab.meta.active {
-
-      position: absolute;
       display: grid;
       grid-auto-columns: 1fr 1fr;
       grid-template-columns: 80px auto;
-      grid-template-rows: 24px 48px auto 48px;
+    grid-template-rows: 32px 48px auto 48px;
-      gap: 0 0;
+    gap: 8px;
       grid-template-areas:
     "category category"
     "quantity name"
@@ -57,6 +44,7 @@
         grid-area: bottomline;
         display: grid;
         grid-template-columns: repeat(2, 1fr);
+        gap: 8px;
 
         .named-value {
           position: relative;
@@ -104,7 +92,7 @@
 
           ul {
             list-style-type: none;
-            padding: 0;
+            padding: 0 32px 0 0;
             margin: 0;
             text-indent: 0;
 
@@ -124,6 +112,7 @@
             position: absolute;
             right: 0;
             top: 0;
+            width: 24px;
           }
         }
 
@@ -153,7 +142,4 @@
 
     }
 
-
-  }
-
 }

src/templates/item/equipment/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/equipment/tab-armor.hbs

@@ -0,0 +1,37 @@
+<section class="tab {{tabs.armor.id}} {{tabs.armor.cssClass}}"
+         data-tab="{{tabs.armor.id}}"
+         data-group="{{tabs.armor.group}}">
+    <div>
+
+        <div>
+            <label>Gesamt Rüstungswert
+                <input type="text" name="system.armorValue" value="{{system.armorValue}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Gesamt Behinderung
+                <input type="text" name="system.armorHandicap" value="{{system.armorHandicap}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Initiative Modifaktor
+                <input type="text" name="system.iniModifier" value="{{system.iniModifier}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Bruchfaktor
+                <input type="text" name="system.breakFactor" value="{{system.breakFactor}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Attacke
+                <input type="text" name="system.attackModifier" value="{{system.attackModifier}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Parade
+                <input type="text" name="system.parryModifier" value="{{system.parryModifier}}"/>
+            </label>
+        </div>
+    </div>
+</section>

src/templates/item/equipment/tab-container.hbs

@@ -0,0 +1,7 @@
+<section class="tab {{tabs.container.id}} {{tabs.container.cssClass}}"
+         data-tab="{{tabs.container.id}}"
+         data-group="{{tabs.container.group}}">
+    <div>
+        Behälter Specs
+    </div>
+</section>

src/templates/item/equipment/tab-melee.hbs

@@ -0,0 +1,43 @@
+<section class="tab {{tabs.melee.id}} {{tabs.melee.cssClass}}"
+         data-tab="{{tabs.melee.id}}"
+         data-group="{{tabs.melee.group}}">
+    <div>
+        <div>
+            <label>TP
+                <input type="text" name="system.meleeAttackDamage" value="{{system.meleeAttackDamage}}"/>
+            </label>
+        </div>
+        <div>
+            <label>TP/KK
+                <input name="system.meleeAttackModifier" type="number" value="{{system.meleeAttackModifier}}"/>
+                <input name="system.meleeAttackModifierIncrement" type="number"
+                       value="{{system.meleeAttackModifierIncrement}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Geführte Talente
+                {{> "systems/DSA_4-1/templates/ui/partial-array-editor.hbs" this.meleeSkillsAndOptions}}
+            </label>
+        </div>
+        <div>
+            <label>Initiative
+                <input name="system.iniModifier" type="number" value="{{system.iniModifier}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Bruchfaktor
+                <input name="system.breakFactor" type="number" value="{{system.breakFactor}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Attacke
+                <input name="system.attackModifier" type="number" value="{{system.attackModifier}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Parade
+                <input name="system.parryModifier" type="number" value="{{system.parryModifier}}"/>
+            </label>
+        </div>
+    </div>
+</section>

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

@@ -0,0 +1,40 @@
+<section class="tab {{tabs.meta.id}} {{tabs.meta.cssClass}}"
+         data-tab="{{tabs.meta.id}}"
+         data-group="{{tabs.meta.group}}">
+    <div>
+        <div class="name">
+            <img class="img" src="{{img}}" data-action="editImage" data-edit="img" alt="{{name}}" title="{{name}}"/>
+            <label>Name
+                <input name="name" type="text" value="{{name}}" placeholder="Name"/>
+            </label>
+        </div>
+        <div class="quantity">
+            <label>Anzahl
+                <input type="number" name="system.quantity"
+                       value="{{quantity}}"/>
+            </label>
+        </div>
+        <div class="category"><label>Kategorie:
+            {{> "systems/DSA_4-1/templates/ui/partial-array-editor.hbs" this.categoryAndOptions}}
+        </label></div>
+        <div class="description">
+            <label>Beschreibungstext</label>
+            <prose-mirror
+                    name="system.description"
+                    button="false"
+                    editable="{{editable}}"
+                    toggled="true"
+                    value="{{system.description}}">
+                {{{system.description}}}
+            </prose-mirror>
+        </div>
+        <div class="bottomline">
+            <label class="named-value"><span>Preis (Silbertaler)</span>
+                <input type="number" name="system.price" value="{{price}}"/>
+            </label>
+            <label class="named-value"><span>Gewicht (in Stein)</span>
+                <input type="number" name="system.weight" value="{{weight}}"/>
+            </label>
+        </div>
+    </div>
+</section>

src/templates/item/equipment/tab-ranged.hbs

@@ -0,0 +1,32 @@
+<section class="tab {{tabs.ranged.id}} {{tabs.ranged.cssClass}}"
+         data-tab="{{tabs.ranged.id}}"
+         data-group="{{tabs.ranged.group}}">
+    <div>
+        <div>
+            <label>TP
+                <input type="text" name="system.rangedAttackDamage" value="{{system.rangedAttackDamage}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Reichweiten
+                <input type="text" name="system.rangedRangeModifier" value="{{system.rangedRangeModifier}}"/>
+            </label>
+        </div>
+        <div>
+            <label>TP+
+                <input type="text" name="system.rangeRangeDamageModifier"
+                       value="{{system.rangeRangeDamageModifier}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Geführte Talente
+                {{> "systems/DSA_4-1/templates/ui/partial-array-editor.hbs" this.rangedSkillsAndOptions}}
+            </label>
+        </div>
+        <div>
+            <label>Ladedauer (Aktionen)
+                <input type="text" name="system.rangedReloadTime" value="{{system.rangedReloadTime}}"/>
+            </label>
+        </div>
+    </div>
+</section>

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

@@ -1,164 +0,0 @@
-<form class="{{cssClass}} {{item.type}} flexcol" autocomplete="off">
-
-    {{!-- Sheet Tab Navigation --}}
-    <nav class="sheet-tabs tabs" style="flex: 0" data-group="primary">
-        <a class="item" data-tab="meta">Gegenstand</a>
-        {{#if isMeleeWeapon}}
-            <a class="item" data-tab="melee">Nahkampfwaffe</a>
-        {{/if}}
-        {{#if isRangedWeapon}}
-            <a class="item" data-tab="ranged">Fernkampfwaffe</a>
-        {{/if}}
-        {{#if isContainer}}
-            <a class="item" data-tab="container">Behälter</a>
-        {{/if}}
-        {{#if isArmor}}
-            <a class="item" data-tab="armor">Rüstung</a>
-        {{/if}}
-    </nav>
-
-    {{!-- Sheet Body --}}
-    <section class="sheet-body" style="flex: 1">
-
-        <div class="tab meta" data-group="primary" data-tab="meta">
-            <div class="name">
-                <img class="img" src="{{item.img}}" data-edit="img" title="{{item.name}}"/>
-                <label>Name
-                    <input name="name" type="text" value="{{item.name}}" placeholder="Name"/>
-                </label>
-            </div>
-            <div class="quantity">
-                <label>Anzahl
-                    <input type="number" name="system.quantity"
-                           value="{{quantity}}"/>
-                </label>
-            </div>
-            <div class="category"><label>Kategorie:
-                {{> "systems/DSA_4-1/templates/ui/partial-array-editor.hbs" this.categoryAndOptions}}
-            </label></div>
-            <div class="description">
-                <label>Beschreibungstext</label>
-                {{editor system.description target="system.description" button=true owner=owner editable=editable}}
-            </div>
-            <div class="bottomline">
-                <label class="named-value"><span>Preis (Silbertaler)</span>
-                    <input type="number" name="system.price" value="{{price}}"/>
-                </label>
-                <label class="named-value"><span>Gewicht (in Stein)</span>
-                    <input type="number" name="system.weight" value="{{weight}}"/>
-                </label>
-            </div>
-        </div>
-
-        {{#if isMeleeWeapon}}
-            <div class="tab melee" data-group="primary" data-tab="melee">
-                <div>
-                    <label>TP
-                        <input type="text" name="system.meleeAttackDamage" value="{{system.meleeAttackDamage}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>TP/KK
-                        <input name="system.meleeAttackModifier" type="number" value="{{system.meleeAttackModifier}}"/>
-                        <input name="system.meleeAttackModifierIncrement" type="number"
-                               value="{{system.meleeAttackModifierIncrement}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Geführte Talente
-                        {{> "systems/DSA_4-1/templates/ui/partial-array-editor.hbs" this.meleeSkillsAndOptions}}
-                    </label>
-                </div>
-                <div>
-                    <label>Initiative
-                        <input name="system.iniModifier" type="number" value="{{system.iniModifier}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Bruchfaktor
-                        <input name="system.breakFactor" type="number" value="{{system.breakFactor}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Attacke
-                        <input name="system.attackModifier" type="number" value="{{system.attackModifier}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Parade
-                        <input name="system.parryModifier" type="number" value="{{system.parryModifier}}"/>
-                    </label>
-                </div>
-            </div>
-        {{/if}}
-        {{#if isRangedWeapon}}
-            <div class="tab ranged" data-group="primary" data-tab="ranged">
-                <div>
-                    <label>TP
-                        <input type="text" name="system.rangedAttackDamage" value="{{system.rangedAttackDamage}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Reichweiten
-                        <input type="text" name="system.rangedRangeModifier" value="{{system.rangedRangeModifier}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>TP+
-                        <input type="text" name="system.rangeRangeDamageModifier"
-                               value="{{system.rangeRangeDamageModifier}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Geführte Talente
-                        {{> "systems/DSA_4-1/templates/ui/partial-array-editor.hbs" this.rangedSkillsAndOptions}}
-                    </label>
-                </div>
-                <div>
-                    <label>Ladedauer (Aktionen)
-                        <input type="text" name="system.rangedReloadTime" value="{{system.rangedReloadTime}}"/>
-                    </label>
-                </div>
-            </div>
-        {{/if}}
-        {{#if isContainer}}
-            <div class="tab container" data-group="primary" data-tab="container">
-                Behälter Specs
-            </div>
-        {{/if}}
-        {{#if isArmor}}
-            <div class="tab armor" data-group="primary" data-tab="armor">
-                <div>
-                    <label>Gesamt Rüstungswert
-                        <input type="text" name="system.armorValue" value="{{system.armorValue}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Gesamt Behinderung
-                        <input type="text" name="system.armorHandicap" value="{{system.armorHandicap}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Initiative Modifaktor
-                        <input type="text" name="system.iniModifier" value="{{system.iniModifier}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Bruchfaktor
-                        <input type="text" name="system.breakFactor" value="{{system.breakFactor}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Attacke
-                        <input type="text" name="system.attackModifier" value="{{system.attackModifier}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Parade
-                        <input type="text" name="system.parryModifier" value="{{system.parryModifier}}"/>
-                    </label>
-                </div>
-            </div>
-        {{/if}}
-    </section>
-</form>

src/templates/item/spell/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/spell/tab-commonality.hbs

@@ -0,0 +1,21 @@
+<section class="tab {{tabs.commonality.id}} {{tabs.commonality.cssClass}}"
+         data-tab="{{tabs.commonality.id}}"
+         data-group="{{tabs.commonality.group}}">
+
+    <div>
+        <label>Komplexität
+            <input type="text" name="system.komplexität" value="{{system.komplexität}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Repräsentation
+            <input type="text" name="system.repräsentation" value="{{system.repräsentation}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Verbreitung
+            <input type="text" name="system.info" value="{{system.info}}"/>
+        </label>
+    </div>
+
+</section>

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

@@ -0,0 +1,48 @@
+<section class="tab {{tabs.meta.id}} {{tabs.meta.cssClass}}"
+         data-tab="{{tabs.meta.id}}"
+         data-group="{{tabs.meta.group}}">
+
+    <div>
+        <label>Name
+            <input type="text" name="system.name.value"
+                   value="{{system.attributeReference1.value}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Probe
+            <input type="text" name="system.probe.0"
+                   value="{{system.probe.[0]}}"/>
+            <input type="text" name="system.probe.1"
+                   value="{{system.probe.[1]}}"/>
+            <input type="text" name="system.probe[2].value"
+                   value="{{system.probe.[2]}}"/>
+        </label>
+    </div>
+    <div><label>Proben Modifikation
+        <input type="text" name="system.probenMod"
+               value="{{system.probenMod}}"/>
+    </label></div>
+    <div>
+        <label>Zauberdauer
+            <input type="text" name="system.zauberdauer"
+                   value="{{system.zauberdauer}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Kosten
+            <input type="text" name="system.kosten" value="{{system.kosten}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Wirkung
+            <input type="text" name="system.wirkung" value="{{system.wirkung}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Wirkungsdauer
+            <input type="text" name="system.wirkungsdauer" value="{{system.wirkungsdauer}}"/>
+        </label>
+    </div>
+
+
+</section>

src/templates/item/spell/tab-variants.hbs

@@ -0,0 +1,26 @@
+<section class="tab {{tabs.variants.id}} {{tabs.variants.cssClass}}"
+         data-tab="{{tabs.variants.id}}"
+         data-group="{{tabs.variants.group}}">
+
+    <div>
+        <label>Modifikationen
+            <input type="text" name="system.modifikationen" value="{{system.modifikationen}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Varianten
+            hier später Varianten
+        </label>
+    </div>
+    <div>
+        <label>Reversalis
+            <input type="text" name="system.reversalis" value="{{system.reversalis}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Antimagie
+            <input type="text" name="system.antimagie" value="{{system.antimagie}}"/>
+        </label>
+    </div>
+
+</section>