Fix path generator and tags

Selenite-GEOS · Sep 6, 2024 · 2a13797 · 2a13797
1 parent 4950f74
commit 2a13797
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@selenite/commons",
-	"version": "0.26.4",
+	"version": "0.26.5",
 	"repository": "github:ShaitanLyss/selenite-commons",
 	"license": "MIT",
 	"keywords": [

diff --git a/src/lib/components/PathGenerator.svelte b/src/lib/components/PathGenerator.svelte
@@ -45,10 +45,10 @@
 	// let showAddPopup = $state(true);
 	let creatingPart = $state(false);
 
-	function addCreatedPart() {
+	function addCreatedPart(b?: boolean) {
 		if (trimmedCreatedPart.length > 0) path.push(trimmedCreatedPart);
 		else if (focusedOption) path.push(focusedOption);
-		else if (optionsForCreatedPart[0]) path.push(optionsForCreatedPart[0]);
+		else if (b && optionsForCreatedPart[0]) path.push(optionsForCreatedPart[0]);
 		createdPart = '';
 		focusedOption = '';
 	}
@@ -74,7 +74,7 @@
 							type="button"
 							class="btn btn-ghost gap-0 {!isFocused ? '' : 'outline outline-accent outline-1'}"
 							class:outline-accent={isFocused}
-							class:outline-[0.5rem]={isFocused}
+							class:outline-[0.5]={isFocused}
 							use:keyboardNavigation
 							onpointerdown={async () => {
 								path.push(part);
@@ -95,10 +95,10 @@
 
 <div
 	{...props}
-	class="breadcrumbs {props.class} pe-1"
+	class="breadcrumbs py-0 {props.class} pe-1"
 	use:horizontalScroll
 	style="scrollbar-gutter: stable;">
-	<ul class="!min-h-12 flex items-center">
+	<ul class="flex items-center !min-h-14">
 		{#snippet Button(label: string, props: HTMLButtonAttributes & { action?: Action } = {})}
 			{#if props.action}
 				<button type="button" {...props} class="hover:link p-1 {props.class}" use:props.action>
@@ -131,7 +131,12 @@
 			</li>
 		{/snippet}
 
-		{@render pathButton('/', 0)}
+		{@render pathButton('/', 0, {
+			onclick: () => {
+				path.splice(0);
+				focusedOption = '';
+			}
+		})}
 
 		{#each path as part, i (i)}
 			{@render pathButton(part, i)}
@@ -157,13 +162,25 @@
 							return;
 						}
 						console.log(e);
-						if (createdPart) addCreatedPart();
+						if (blurDiscards) addCreatedPart();
 						if (blurDiscards) discardCreatedPart();
 					}}
+					use:keys={{
+						backspace: (e) => {
+							if (createdPart.length > 0 || path.length === 0) return;
+							e.preventDefault();
+							const tmp = path.pop()!;
+							if (optionsForCreatedPart.includes(tmp)) {
+								focusedOption = tmp;
+							} else {
+								createdPart = tmp;
+							}
+						}
+					}}
 					use:keys={{
 						preventDefault: true,
 						enter: async (e) => {
-							addCreatedPart();
+							addCreatedPart(true);
 							await tick();
 							await sleep();
 							e.target
@@ -181,16 +198,6 @@
 								(focusedOptionIndex - 1 + optionsForCreatedPart.length) %
 								optionsForCreatedPart.length;
 							focusedOption = optionsForCreatedPart[i];
-						},
-						backspace: (e) => {
-							if (createdPart.length > 0 || path.length === 0) return;
-							e.preventDefault();
-							const tmp = path.pop()!;
-							if (optionsForCreatedPart.includes(tmp)) {
-								focusedOption = tmp;
-							} else {
-								createdPart = tmp;
-							}
 						}
 					}} />
 			</li>

diff --git a/src/lib/components/Tags.svelte b/src/lib/components/Tags.svelte
@@ -40,7 +40,7 @@
 </script>
 
 {#snippet Tag(label: string, props: HTMLButtonAttributes = {})}
-	<button type="button" {...props} class="badge badge-neutral {props.class}">
+	<button type="button" {...props} class="badge badge-neutral my-2 {props.class}">
 		{label}
 	</button>
 {/snippet}
@@ -61,7 +61,7 @@
 	</div>
 {/if}
 
-<ul {...props} class="flex flex-wrap gap-2 {props.class}">
+<ul {...props} class="flex flex-wrap gap-2 items-center {props.class}">
 	{#each tags as tag, i (tag)}
 		<li animate:flip={{ duration: 200 }}>
 			{@render Tag(tag, { class: 'hover:badge-error', onclick: () => tags.splice(i, 1) })}
@@ -87,8 +87,8 @@
 				creatingTag = false;
 			}}
 			use:keys={{
-				preventDefault: true,
 				enter: (e) => {
+					e.preventDefault()
 					if (!e.target.value) {
 						addTag(filteredKnownTags[0]);
 						return;

diff --git a/src/routes/path-generator/+page.svelte b/src/routes/path-generator/+page.svelte
@@ -12,8 +12,10 @@
 	);
 </script>
 
+<div>
 	<span class="font-semibold">Path</span>
-	<PathGenerator bind:path {paths} class="w-[40rem] mb-8" />
+	<PathGenerator bind:path {paths} class="w-[40rem]" />
 
-<h2 class="text-2xl font-bold">Result</h2>
-<p class="text-xl">{path.join('/')}</p>
+	<h2 class="text-2xl font-bold">Result</h2>
+	<p class="text-xl">{path.join('/')}</p>
+</div>
diff --git a/src/routes/tags/+page.svelte b/src/routes/tags/+page.svelte
@@ -3,6 +3,12 @@
 
 	let tags: string[] = $state(["Fire", "Avatar"]);
 	let knownTags: string[] = $state(["Fire", "Water", "Earth", "Air", "Harmony", "Chi", "Energy", "Spirit", "State", "Ghost", "Cyborg", "Fallen Angel", "What"]);
+	// let knownTags: string[] = [];
 </script>
-
-<Tags bind:tags {knownTags} class="max-w-[20rem]"/>
+<div>
+<p>
+	The <code>Tags</code> component.
+</p>
+<Tags bind:tags {knownTags} class="w-[30rem]"/>
+Number of tags : {tags.length}
+</div>