fix styles for obsidian version 1.5.0

Author: mProjectsCode

exampleVault/Advanced Examples/PF2e Encounter Calculator.md

@@ -38,9 +38,9 @@ const bindTarget = mb.createBindTarget('enemy');
 const tableHead = ['Name', 'Level', 'Variant', 'Count'];
 const columns = [
 	mb.inputField.createInputFieldDeclarationFromString('INPUT[text:^.name]'),
-	mb.inputField.createInputFieldDeclarationFromString('INPUT[number:^.level]'),
+	mb.inputField.createInputFieldDeclarationFromString('INPUT[number(class(meta-bind-small-width)):^.level]'),
 	mb.inputField.createInputFieldDeclarationFromString('INPUT[inlineSelect(option(-1, weak), option(0, normal), option(1, elite)):^.variant]'),
-	mb.inputField.createInputFieldDeclarationFromString('INPUT[number:^.count]')
+	mb.inputField.createInputFieldDeclarationFromString('INPUT[number(class(meta-bind-small-width)):^.count]')
 ];
 
 mb.createTable(container, context.file.path, component, bindTarget, tableHead, columns);
@@ -50,12 +50,11 @@ mb.createTable(container, context.file.path, component, bindTarget, tableHead, c
 
 ```meta-bind-js-view
 {enemy} and children as enemies
-{playerCount} as playerCount
 {playerLevel} as playerLevel
 ---
 
 function getXP(enemyLevel) {
-	const diff = enemyLevel - context.playerLevel;
+	const diff = enemyLevel - context.bound.playerLevel;
 	if (diff === -4) {
 		return 10;
 	}
@@ -88,7 +87,7 @@ function getXP(enemyLevel) {
 
 function calculateTotalXP() {
 	let acc = 0;
-	for (const enemy of context.enemies) {
+	for (const enemy of context.bound.enemies) {
 		const xp = getXP((enemy.level ?? 0) + (enemy.variant ?? 0));
 		if (xp === -1) {
 			return -1;
@@ -98,7 +97,7 @@ function calculateTotalXP() {
 	return acc;
 }
 
-return "Encounter XP: " + calculateTotalXP()
+return engine.markdown.create(`Encounter XP: **${calculateTotalXP()}**`);
 ```
 
 > [!info] XP Reference

exampleVault/examples.md

@@ -1,5 +1,5 @@
 ---
-slider1: 3
+slider1: 8
 suggest: test
 toggle1: false
 Domestic_tasks:
@@ -15,10 +15,10 @@ nested:
 ---
 
 ## In callouts
-> quote
+
 > `INPUT[slider(addLabels, minValue(1), maxValue(10)):slider1]`
 
-> [!INFO]
+> [!info]
 > `INPUT[slider(addLabels, minValue(1), maxValue(10)):slider1]`
 
 > [!INFO]

src/metaBindTable/MetaBindTableComponent.svelte

@@ -14,34 +14,37 @@
 	}
 </script>
 
-<table>
-	<thead>
-		<tr>
-			{#each tableHead as headCell}
-				<th>{headCell}</th>
-			{/each}
-			<th></th>
-		</tr>
-	</thead>
-	<tbody>
-		{#each tableCells as tableRow (tableRow.index)}
+<div class="mb-table-wrapper">
+	<table class="mb-html-table">
+		<thead>
 			<tr>
-				{#if tableRow.isValid}
-					{#each tableRow.cells as tableCell}
-						<MetaBindTableCellComponent table={table} bind:cell={tableCell}></MetaBindTableCellComponent>
-					{/each}
-				{:else}
-					<td class="meta-bind-error" colspan={tableHead.length}> invalid data</td>
-				{/if}
-
-				<td>
-					<Button on:click={() => table.removeColumn(tableRow.index)}>
-						<Icon iconName="x" />
-					</Button>
-				</td>
+				{#each tableHead as headCell}
+					<th>{headCell}</th>
+				{/each}
+				<th></th>
 			</tr>
-		{/each}
-	</tbody>
-</table>
+		</thead>
+		<tbody>
+			{#each tableCells as tableRow (tableRow.index)}
+				<tr>
+					{#if tableRow.isValid}
+						{#each tableRow.cells as tableCell}
+							<MetaBindTableCellComponent table={table} bind:cell={tableCell}
+							></MetaBindTableCellComponent>
+						{/each}
+					{:else}
+						<td class="meta-bind-error" colspan={tableHead.length}> invalid data</td>
+					{/if}
+
+					<td>
+						<Button on:click={() => table.removeColumn(tableRow.index)}>
+							<Icon iconName="x" />
+						</Button>
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
 
 <Button on:click={() => table.addColumn()}>Add Column</Button>

styles.css

@@ -14,6 +14,7 @@ body {
 
 .mb-input-wrapper {
 	display: inline;
+	white-space: normal;
 }
 
 /* View Wrappers */
@@ -421,6 +422,14 @@ a.mb-no-link {
 	text-decoration: none;
 }
 
+table.mb-html-table {
+	--table-column-min-width: 10px;
+}
+
+.mb-table-wrapper {
+	overflow-x: auto;
+}
+
 /* --- UTIL CLASSES --- */
 
 .meta-bind-full-width > * {
@@ -430,3 +439,7 @@ a.mb-no-link {
 .meta-bind-high > * {
 	height: 200px;
 }
+
+.meta-bind-small-width > * {
+	width: 80px;
+}