feat: Add property-dependant CSS class for Table layout blocks

javalent · Jul 17, 2024 · 065d69f · 065d69f
1 parent e267351
commit 065d69f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/settings/layout/blocks/ui/block.ts b/src/settings/layout/blocks/ui/block.ts
@@ -926,6 +926,17 @@ class TableModal extends BasicModal<TableItem> {
                     this.block.calculate = v;
                 });
             });
+        new Setting(el)
+            .setName("Do Not Add Property as CSS Class")
+            .setDesc(
+                "Disable this to prevent adding the property to the containing HTML element as a CSS class. This can be used to avoid collisions with native Obsidian CSS."
+            )
+            .addToggle((t) => {
+                t.setValue(this.block.doNotAddClass).onChange((v) => {
+                    this.block.doNotAddClass = v;
+                    this.display();
+                });
+            });
     }
 }
 class TraitsModal extends MarkdownEnabledModal<TraitsItem> {

diff --git a/src/view/ui/Table.svelte b/src/view/ui/Table.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Monster } from "index";
     import type { TableItem } from "src/layouts/layout.types";
-    import { stringify } from "src/util/util";
+    import { slugify, stringify } from "src/util/util";
     import TextContentHolder from "./TextContentHolder.svelte";
 
     export let monster: Monster;
@@ -48,9 +48,11 @@
     const headers = item.headers ?? [
         ...Array(values.length > 0 ? values.length : 1).keys()
     ];
+
+    $: cssClass = item.doNotAddClass ? "" : slugify(item.properties[0]);
 </script>
 
-<div class="statblock-table">
+<div class="statblock-table {cssClass}">
     {#each [...valueMap.entries()].slice(0, headers.length) as [index, values]}
         <div class="table-item">
             <span class="statblock-table-header">{headers[index]}</span>