Port vue counter to admonitions

README.md

@@ -6,8 +6,6 @@ Some helper elements for the MCDM Draw Steel TTRPG
 
 Please use this [form to report bugs](https://docs.google.com/forms/d/e/1FAIpQLSc6m-pZ0NLt2EArE-Tcxr-XbAPMyhu40ANHJKtyRvvwBd2LSw/viewform?usp=sharing&ouid=105036387964900154878) if you find them!
 
-You can see [Element Documentation Here](https://steelcompendium.github.io/draw-steel-elements/power-roll/) or see below.
-
 ![sample](./docs/Media/sample.png)
 
 ## Elements

main.ts

@@ -4,9 +4,10 @@ import {DEFAULT_SETTINGS, DSESettings} from "@model/Settings";
 import {CompendiumDownloader} from "@utils/CompendiumDownloader";
 import { registerElements } from '@/utils/RegisterElements';
 import { initializeSchemaRegistry, resetSchemaRegistry } from '@utils/JsonSchemaValidator';
-import componentWrapperSchemaYaml from '@model/schemas/ComponentWrapperSchema.yaml';
 import "./styles-source.css";
 
+import commonElementFieldsSchema from '@model/schemas/CommonElementFieldsSchema.yaml';
+
 
 export default class DrawSteelAdmonitionPlugin extends Plugin {
     settings: DSESettings;
@@ -39,9 +40,9 @@ export default class DrawSteelAdmonitionPlugin extends Plugin {
     private initializeSchemas() {
         const dependencySchemas = [
             {
-                id: "https://steelcompendium.io/schemas/component-wrapper-1.0.0",
-                schema: componentWrapperSchemaYaml
-            }
+                id: commonElementFieldsSchema.$id ?? "",
+                schema: commonElementFieldsSchema
+            },
             // Add more dependency schemas here as needed
             // Note: Don't register main schemas that are being validated directly
         ];

package.json

@@ -21,30 +21,30 @@
     "ajv": "^8.17.1",
     "ajv-errors": "^3.0.0",
     "ajv-keywords": "^5.1.0",
-    "vue": "^3.5.20"
+    "vue": "^3.5.27"
   },
   "devDependencies": {
-    "@codemirror/language": "^6.11.3",
+    "@codemirror/language": "^6.12.1",
     "@types/css": "^0.0.38",
     "@types/jest": "^30.0.0",
-    "@types/node": "^24.3.0",
-    "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "8.41.0",
-    "@typescript-eslint/parser": "8.41.0",
-    "@vue/compiler-sfc": "3.5.20",
+    "@types/node": "^25.2.2",
+    "@types/uuid": "^11.0.0",
+    "@typescript-eslint/eslint-plugin": "8.54.0",
+    "@typescript-eslint/parser": "8.54.0",
+    "@vue/compiler-sfc": "3.5.27",
     "builtin-modules": "5.0.0",
     "css": "^3.0.0",
-    "esbuild": "0.25.9",
+    "esbuild": "0.27.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.0.5",
+    "jest": "^30.2.0",
     "jszip": "^3.10.1",
     "jszip-utils": "^0.1.0",
-    "obsidian": "1.8.7",
+    "obsidian": "1.11.4",
     "steel-compendium-sdk": "2.1.5",
-    "ts-jest": "^29.4.1",
+    "ts-jest": "^29.4.6",
     "tslib": "2.8.1",
-    "typescript": "5.9.2",
-    "unplugin-vue": "^7.0.1",
-    "vue-tsc": "^3.0.6"
+    "typescript": "5.9.3",
+    "unplugin-vue": "^7.1.1",
+    "vue-tsc": "^3.2.4"
   }
 }

src/drawSteelAdmonition/Common/AbstractElementView.ts

@@ -0,0 +1,17 @@
+import { MarkdownPostProcessorContext, Plugin } from "obsidian";
+
+export abstract class AbstractElementView {
+    protected plugin: Plugin;
+    protected data: any;
+    protected ctx: MarkdownPostProcessorContext;
+    protected options?: any
+
+    constructor(plugin: Plugin, data: any, ctx: MarkdownPostProcessorContext, options?: any) {
+        this.plugin = plugin;
+        this.data = data;
+        this.ctx = ctx;
+        this.options = options;
+    }
+
+    public abstract build(parent: HTMLElement, children?: Array<HTMLElement>, options?: any): HTMLElement | Promise<HTMLElement>;
+}

src/drawSteelAdmonition/Common/CommonElementWrapperView.ts

@@ -0,0 +1,59 @@
+import { MarkdownPostProcessorContext, Plugin } from "obsidian";
+import { CommonElementWrapper } from "@model/CommonElementWrapper";
+import { AbstractElementView } from "@drawSteelAdmonition/Common/AbstractElementView";
+
+export class CommonElementWrapperView extends AbstractElementView {
+    private state: { isCollapsed: boolean };
+
+    constructor(
+        plugin: Plugin,
+        data: CommonElementWrapper,
+        ctx: MarkdownPostProcessorContext,
+        options: { elementName: string },
+    ) {
+        super(plugin, data, ctx, options);
+        this.state = { isCollapsed: this.data?.collapse_default ?? false };
+    }
+
+    public build(
+        parent: HTMLElement,
+        children: Array<HTMLElement>,
+    ): HTMLElement {
+        const container = parent.createEl("div", {
+            cls: "ds-common-element-wrapper",
+        });
+        container.toggleClass(
+            "ds-common-element-wrapper-collapsible",
+            this.data.collapsible,
+        );
+
+        // Hide Indicator
+        // TODO: implement
+
+        if (!this.state.isCollapsed) {
+            if (children) {
+                container.appendChild(children[0])
+            }
+        } else {
+            container.createEl("div", { text: this.options.elementName });
+        }
+
+        // Container click handler - only triggers on container itself
+        container.addEventListener("click", (event: MouseEvent) => {
+            if (this.data.collapsible == false) return;
+            if (event.target === container) {
+                this.state.isCollapsed = !this.state.isCollapsed;
+                container.empty();
+                if (!this.state.isCollapsed) {
+                    if (children) {
+                        container.appendChild(children[0])
+                    }
+                } else { 
+                    container.createEl("div", { text: this.options.elementName });
+                }
+            }
+        });
+
+        return container;
+    }
+}

src/drawSteelAdmonition/Counter/CounterHorizontalView.ts

@@ -0,0 +1,112 @@
+import {
+    MarkdownPostProcessorContext,
+    Plugin,
+    setIcon,
+} from "obsidian";
+import { Counter } from "@model/Counter";
+import { CounterView } from "@drawSteelAdmonition/Counter/CounterView";
+import { CodeBlocks } from "@utils/CodeBlocks";
+
+export class CounterHorizontalView extends CounterView {
+    constructor(
+        plugin: Plugin,
+        data: Counter,
+        ctx: MarkdownPostProcessorContext,
+    ) {
+        super(plugin, data, ctx);
+    }
+
+    public async build(parent: HTMLElement): Promise<HTMLElement> {
+        const container = super.buildBase(parent);
+
+        // TODO: Remove
+        // Not implemented warning
+        container.createEl('div', {
+            text: "Horizontal Counter is not implemented yet"
+        })
+
+        // // LAYOUT
+        // const displayContainer = container.createEl("div", {
+        //     cls: "ds-counter-display-container",
+        // });
+
+        // const nameTopDisplay = displayContainer.createEl("div", {
+        //     cls: "ds-counter-name",
+        //     text: this.data?.name_top,
+        // });
+
+        // const valueDisplay = displayContainer.createEl("input", {
+        //     cls: "ds-counter-value",
+        //     value: this.data?.current_value.toString(),
+        //     placeholder: this.data?.current_value.toString(),
+        //     type: "number",
+        // });
+        // valueDisplay.readOnly = false;
+
+        // const nameBottomDisplay = displayContainer.createEl("div", {
+        //     cls: "ds-counter-name",
+        //     text: this.data?.name_bottom,
+        // });
+
+        // const controlsContainer = container.createEl("div", {
+        //     cls: "ds-counter-controls",
+        // });
+
+        // const incrementButton = controlsContainer.createEl("button", {
+        //     cls: "ds-counter-button",
+        // });
+        // const decrementButton = controlsContainer.createEl("button", {
+        //     cls: "ds-counter-button",
+        // });
+
+        // // EVENTS
+        // valueDisplay.addEventListener("click", () => {
+        //     valueDisplay.focus();
+        //     valueDisplay.select();
+        // });
+        // valueDisplay.addEventListener("change", () => {
+        //     let newValue = parseInt(valueDisplay.value);
+        //     if (!isNaN(newValue)) {
+        //         newValue = Math.min(newValue, this.data?.max_value ?? Infinity);
+        //         newValue = Math.max(newValue, this.data.min_value ?? 0);
+        //         this.data.current_value = newValue;
+        //         valueDisplay.value = newValue.toString();
+        //         super.updateButtons(incrementButton, decrementButton);
+        //         if (this.data.auto_save) {
+        //             CodeBlocks.updateCounter(
+        //                 this.plugin.app,
+        //                 this.data,
+        //                 this.ctx,
+        //             );
+        //         }
+        //     }
+        // });
+
+        // incrementButton.addEventListener("click", () => {
+        //     this.incrementValue();
+        //     valueDisplay.value = this.data.current_value.toString();
+        //     this.updateButtons(incrementButton, decrementButton);
+        //     CodeBlocks.updateCounter(this.plugin.app, this.data, this.ctx);
+        // });
+
+        // decrementButton.addEventListener("click", () => {
+        //     this.decrementValue();
+        //     valueDisplay.value = this.data.current_value.toString();
+        //     this.updateButtons(incrementButton, decrementButton);
+        //     CodeBlocks.updateCounter(this.plugin.app, this.data, this.ctx);
+        // });
+
+        // // STYLING
+        // valueDisplay.style.fontSize = `${this.data.value_height}em`;
+        // setIcon(incrementButton, "chevron-up");
+        // setIcon(decrementButton, "chevron-down");
+
+        // nameTopDisplay.style.fontSize = `${this.data.name_top_height}em`;
+        // nameBottomDisplay.style.fontSize = `${this.data.name_bottom_height}em`;
+
+        // // ADDITIONAL
+        // this.updateButtons(incrementButton, decrementButton);
+
+        return container;
+    }
+}

src/drawSteelAdmonition/Counter/CounterVerticalView.ts

@@ -0,0 +1,69 @@
+import { MarkdownPostProcessorContext, Plugin, setIcon } from "obsidian";
+import { Counter } from "@model/Counter";
+import { CounterView } from "@drawSteelAdmonition/Counter/CounterView";
+import { CodeBlocks } from "@utils/CodeBlocks";
+
+export class CounterVerticalView extends CounterView {
+    constructor(
+        plugin: Plugin,
+        data: Counter,
+        ctx: MarkdownPostProcessorContext,
+    ) {
+        super(plugin, data, ctx);
+    }
+
+    public async build(parent: HTMLElement): Promise<HTMLElement> {
+        const container = super.buildBase(parent);
+
+        // LAYOUT
+        const displayContainer = container.createEl("div", {
+            cls: "ds-counter-display-container",
+        });
+
+        const nameTopDisplay = displayContainer.createEl("div", {
+            cls: "ds-counter-name",
+            text: this.data?.name_top,
+        });
+
+        const valueDisplay = displayContainer.createEl("input", {
+            cls: "ds-counter-value",
+            value: this.clampedCurrentValue().toString(),
+            placeholder: this.clampedCurrentValue().toString(),
+            type: "number",
+        });
+        valueDisplay.readOnly = false;
+
+        const nameBottomDisplay = displayContainer.createEl("div", {
+            cls: "ds-counter-name",
+            text: this.data?.name_bottom,
+        });
+
+        const controlsContainer = container.createEl("div", {
+            cls: "ds-counter-controls",
+        });
+
+        const incrementButton = controlsContainer.createEl("button", {
+            cls: "ds-counter-button",
+        });
+        const decrementButton = controlsContainer.createEl("button", {
+            cls: "ds-counter-button",
+        });
+
+        // EVENTS
+        this.setEventListeners(valueDisplay, incrementButton, decrementButton);
+
+        // STYLING
+        valueDisplay.style.fontSize = `${this.data.value_height}em`;
+        setIcon(incrementButton, "chevron-up");
+        setIcon(decrementButton, "chevron-down");
+
+        nameTopDisplay.style.fontSize = `${this.data.name_top_height}em`;
+        nameBottomDisplay.style.fontSize = `${this.data.name_bottom_height}em`;
+
+        // ADDITIONAL
+        this.applyValue(valueDisplay, incrementButton, decrementButton);
+
+
+        return container;
+    }
+}