1.18.2

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "tabWidth": 4,
+  "useTabs": true,
+  "endOfLine": "lf",
+  "charset": "utf-8",
+  "insertFinalNewline": false,
+  "semi": true,
+  "quotes": "double"
+}

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "vault-explorer",
 	"name": "Vault Explorer",
-	"version": "1.18.1",
+	"version": "1.18.2",
 	"minAppVersion": "1.4.13",
 	"description": "Explore your vault in visual format",
 	"author": "DecafDev",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-vault-explorer",
-	"version": "1.18.1",
+	"version": "1.18.2",
 	"description": "Explore your vault in visual format",
 	"main": "main.js",
 	"scripts": {

src/obsidian/vault-explorer-settings-tab.ts

@@ -28,6 +28,54 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab {
 		const dateTimeProperties = getObsidianPropertiesByType(this.app, "datetime");
 		const checkboxProperties = getObsidianPropertiesByType(this.app, "checkbox");
 
+		new Setting(containerEl).setName("General").setHeading();
+
+		new Setting(containerEl).setName("Page size").setDesc("The number of items to display per page.").addDropdown(dropdown => dropdown
+			.addOptions({
+				"10": "10",
+				"25": "25",
+				"50": "50",
+				"100": "100",
+				"250": "250",
+				"500": "500",
+			})
+			.setValue(this.plugin.settings.pageSize.toString())
+			.onChange(async (value) => {
+				this.plugin.settings.pageSize = parseInt(value);
+				await this.plugin.saveSettings();
+				EventManager.getInstance().emit("page-size-setting-change");
+			}));
+		new Setting(containerEl)
+			.setName("Title wrapping")
+			.setDesc(
+				"Sets the wrapping style for the title."
+			)
+			.addDropdown((cb) => {
+				cb.addOptions({
+					"normal": "Normal",
+					"break-word": "Break Word",
+				})
+				cb.setValue(this.plugin.settings.titleWrapping).onChange(
+					async (value) => {
+						this.plugin.settings.titleWrapping = value as WordBreak;
+						await this.plugin.saveSettings();
+						EventManager.getInstance().emit("title-wrapping-setting-change");
+					}
+				);
+			});
+
+		new Setting(containerEl)
+			.setName("Enable scroll buttons")
+			.setDesc("When enabled, scroll buttons will be displayed for scrollable content.")
+			.addToggle(toggle => toggle
+				.setValue(this.plugin.settings.enableScrollButtons)
+				.onChange(async (value) => {
+					this.plugin.settings.enableScrollButtons = value;
+					await this.plugin.saveSettings();
+					EventManager.getInstance().emit("scroll-buttons-setting-change");
+				}));
+
+
 		new Setting(containerEl).setName("Filters").setHeading();
 
 		new Setting(containerEl)
@@ -168,53 +216,6 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab {
 					EventManager.getInstance().emit("view-toggle-setting-change");
 				}));
 
-		new Setting(containerEl).setName("General").setHeading();
-
-		new Setting(containerEl).setName("Page size").setDesc("The number of items to display per page.").addDropdown(dropdown => dropdown
-			.addOptions({
-				"10": "10",
-				"25": "25",
-				"50": "50",
-				"100": "100",
-				"250": "250",
-				"500": "500",
-			})
-			.setValue(this.plugin.settings.pageSize.toString())
-			.onChange(async (value) => {
-				this.plugin.settings.pageSize = parseInt(value);
-				await this.plugin.saveSettings();
-				EventManager.getInstance().emit("page-size-setting-change");
-			}));
-		new Setting(containerEl)
-			.setName("Title wrapping")
-			.setDesc(
-				"Sets the wrapping style for the title."
-			)
-			.addDropdown((cb) => {
-				cb.addOptions({
-					"normal": "Normal",
-					"break-word": "Break Word",
-				})
-				cb.setValue(this.plugin.settings.titleWrapping).onChange(
-					async (value) => {
-						this.plugin.settings.titleWrapping = value as WordBreak;
-						await this.plugin.saveSettings();
-						EventManager.getInstance().emit("title-wrapping-setting-change");
-					}
-				);
-			});
-
-		new Setting(containerEl)
-			.setName("Enable scroll buttons")
-			.setDesc("When enabled, scroll buttons will be displayed for scrollable content.")
-			.addToggle(toggle => toggle
-				.setValue(this.plugin.settings.enableScrollButtons)
-				.onChange(async (value) => {
-					this.plugin.settings.enableScrollButtons = value;
-					await this.plugin.saveSettings();
-					EventManager.getInstance().emit("scroll-buttons-setting-change");
-				}));
-
 		new Setting(containerEl).setName("Built-in properties").setHeading();
 
 		new Setting(containerEl)
@@ -239,18 +240,18 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab {
 					EventManager.getInstance().emit("property-setting-change");
 				}));
 
-		const createdDateDesc = new DocumentFragment();
-		createdDateDesc.createDiv({
+		const creationDateDesc = new DocumentFragment();
+		creationDateDesc.createDiv({
 			text: "The property containing the creation date. This must be a date or datetime property.",
 		});
-		createdDateDesc.createDiv({
+		creationDateDesc.createDiv({
 			text: "If set to 'Select a property', the file's created at date will be used.",
 		});
 
 
 		new Setting(containerEl)
-			.setName("Created date property")
-			.setDesc(createdDateDesc)
+			.setName("Creation date property")
+			.setDesc(creationDateDesc)
 			.addDropdown(dropdown => dropdown.addOptions(getDropdownOptionsForProperties([...dateProperties, ...dateTimeProperties]))
 				.setValue(this.plugin.settings.properties.createdDate)
 				.onChange(async (value) => {
@@ -259,17 +260,17 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab {
 					EventManager.getInstance().emit("property-setting-change");
 				}));
 
-		const modifiedDateDesc = new DocumentFragment();
-		modifiedDateDesc.createDiv({
+		const modificationDateDesc = new DocumentFragment();
+		modificationDateDesc.createDiv({
 			text: "The property containing the modification date. This must be a date or datetime property.",
 		});
-		modifiedDateDesc.createDiv({
+		modificationDateDesc.createDiv({
 			text: "If set to 'Select a property', the file's modified at date will be used.",
 		});
 
 		new Setting(containerEl)
-			.setName('Modified date property')
-			.setDesc(modifiedDateDesc)
+			.setName('Modification date property')
+			.setDesc(modificationDateDesc)
 			.addDropdown(dropdown => dropdown.addOptions(getDropdownOptionsForProperties([...dateProperties, ...dateTimeProperties]))
 				.setValue(this.plugin.settings.properties.modifiedDate)
 				.onChange(async (value) => {

src/svelte/app/components/custom-filter.svelte

@@ -43,10 +43,6 @@
 </div>
 
 <style>
-	.vault-explorer-custom-filter {
-		margin-left: -4px;
-	}
-
 	.vault-explorer-empty-label {
 		color: var(--text-faint);
 		font-size: var(--font-smaller);

src/svelte/app/components/pagination-indicator.svelte

@@ -2,14 +2,48 @@
 	import Stack from "src/svelte/shared/components/stack.svelte";
 	import Flex from "src/svelte/shared/components/flex.svelte";
 	import IconButton from "src/svelte/shared/components/icon-button.svelte";
-	import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher, onMount } from "svelte";
 
 	export let startIndex: number;
 	export let endIndex: number;
 	export let currentPage: number;
 	export let totalPages: number;
 	export let totalItems: number;
 
+	let isWrapped = false;
+	let ref: HTMLElement | null = null;
+
+	function checkWrapping() {
+		const parentEl = ref?.parentElement;
+		if (parentEl && ref) {
+			if (ref.offsetWidth == parentEl.offsetWidth) {
+				isWrapped = true;
+			} else {
+				isWrapped = false;
+			}
+		}
+	}
+
+	onMount(() => {
+		let resizeObserver: ResizeObserver;
+
+		const leafEl = ref?.closest(
+			".workspace-leaf-content",
+		) as HTMLElement | null;
+		if (leafEl) {
+			checkWrapping();
+
+			resizeObserver = new ResizeObserver(() => {
+				checkWrapping();
+			});
+			resizeObserver.observe(leafEl);
+		}
+
+		return () => {
+			resizeObserver?.disconnect();
+		};
+	});
+
 	const dispatch = createEventDispatcher();
 	function handlePageChange(value: number) {
 		dispatch("change", {
@@ -18,8 +52,13 @@
 	}
 </script>
 
-<div class="vault-explorer-pagination-indicator">
-	<Stack justify="flex-end" align="center">
+<div class="vault-explorer-pagination-indicator" bind:this={ref}>
+	<Stack
+		align="center"
+		direction={isWrapped ? "row-reverse" : "row"}
+		justify="flex-end"
+		spacing="md"
+	>
 		<Stack spacing="xs">
 			<Stack spacing="xs">
 				<span>{startIndex + 1}</span>
@@ -57,4 +96,7 @@
 </div>
 
 <style>
+	.vault-explorer-pagination-indicator {
+		flex: 1;
+	}
 </style>

src/svelte/app/index.svelte

@@ -760,6 +760,12 @@
 	$: totalItems = renderData.length;
 	$: totalPages = Math.ceil(totalItems / pageSize);
 
+	//When using filters, the total pages can be less than the current page
+	//in this case, reset the current page to 1
+	$: if (totalPages < currentPage) {
+		currentPage = 1;
+	}
+
 	let currentPage = 1;
 	$: startIndex = (currentPage - 1) * pageSize;
 	$: pageLength = Math.min(pageSize, renderData.length - startIndex);
@@ -862,6 +868,6 @@
 	}
 
 	.vault-explorer-view-select {
-		margin-left: -4px;
+		flex: 1;
 	}
 </style>

src/svelte/shared/components/stack.svelte

@@ -7,7 +7,8 @@
 		| "flex-end"
 		| "unset" = "unset";
 	export let align: "flex-start" | "center" | "flex-end" | "unset" = "unset";
-	export let direction: "row" | "column" = "row";
+	export let direction: "row" | "column" | "row-reverse" | "column-reverse" =
+		"row";
 	export let width = "unset";
 	export let height = "unset";
 
@@ -38,7 +39,9 @@
 		flex-direction: {direction};
 		justify-content: {justify};
 		align-items: {align};
-		{direction === 'row' ? 'column-gap' : 'row-gap'}: {spacingPx}px;
+		{direction === 'row' || direction === 'row-reverse'
+		? 'column-gap'
+		: 'row-gap'}: {spacingPx}px;
 		width: {width};
 		height: {height};
 	"

versions.json

@@ -77,5 +77,6 @@
 	"1.17.1": "1.4.13",
 	"1.17.2": "1.4.13",
 	"1.18.0": "1.4.13",
-	"1.18.1": "1.4.13"
+	"1.18.1": "1.4.13",
+	"1.18.2": "1.4.13"
 }