@farming-labs/svelte-theme 0.1.54 → 0.1.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +3 -3
  2. package/src/components/DocsLayout.svelte +86 -34
  3. package/styles/docs.css +32 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@farming-labs/svelte-theme",
3
- "version": "0.1.54",
3
+ "version": "0.1.56",
4
4
  "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
5
5
  "keywords": [
6
6
  "docs",
@@ -112,8 +112,8 @@
112
112
  "dependencies": {
113
113
  "gray-matter": "^4.0.3",
114
114
  "sugar-high": "^0.9.5",
115
- "@farming-labs/docs": "0.1.54",
116
- "@farming-labs/svelte": "0.1.54"
115
+ "@farming-labs/docs": "0.1.56",
116
+ "@farming-labs/svelte": "0.1.56"
117
117
  },
118
118
  "peerDependencies": {
119
119
  "svelte": ">=5.0.0"
package/src/components/DocsLayout.svelte CHANGED
@@ -49,7 +49,6 @@
49
49
  let staticExport = $derived(!!(config && config.staticExport));
50
50
  let showSearch = $derived(!staticExport);
51
51
  let showFloatingAI = $derived(!staticExport && config?.ai?.mode === "floating" && !!config?.ai?.enabled);
52
-
53
52
  let showThemeToggle = $derived.by(() => {
54
53
  const toggle = config?.themeToggle;
55
54
  if (toggle === undefined || toggle === true) return true;
@@ -106,6 +105,24 @@
106
105
  searchOpen = false;
107
106
  }
108
107
 
108
+ function suppressFolderSummaryToggle(event) {
109
+ event.preventDefault();
110
+ }
111
+
112
+ function keepFolderLinkNavigation(event) {
113
+ event.stopPropagation();
114
+ closeSidebar();
115
+ }
116
+
117
+ function toggleFolder(event) {
118
+ event.preventDefault();
119
+ event.stopPropagation();
120
+ const details = event.currentTarget?.closest("details");
121
+ if (details) {
122
+ details.open = !details.open;
123
+ }
124
+ }
125
+
109
126
  function handleKeydown(e) {
110
127
  if (showSearch && (e.metaKey || e.ctrlKey) && e.key === "k") {
111
128
  e.preventDefault();
@@ -318,29 +335,48 @@
318
335
  </a>
319
336
  {:else if node.type === "folder"}
320
337
  <details class="fd-sidebar-folder" class:fd-sidebar-first-item={i === 0} open>
321
- <summary class="fd-sidebar-folder-trigger">
322
- <span class="fd-sidebar-folder-label">
323
- {#if getIcon(node.icon)}
324
- <span class="fd-sidebar-icon">{@html getIcon(node.icon)}</span>
325
- {/if}
326
- {node.name}
327
- </span>
328
- <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
329
- <polyline points="6 9 12 15 18 9" />
330
- </svg>
331
- </summary>
332
- <div class="fd-sidebar-folder-content">
333
- {#if node.index}
338
+ {#if node.index}
339
+ <summary
340
+ class="fd-sidebar-folder-trigger fd-sidebar-folder-trigger-link"
341
+ onclick={suppressFolderSummaryToggle}
342
+ >
334
343
  <a
335
344
  href={withLang(node.index.url)}
336
- class="fd-sidebar-link fd-sidebar-child-link"
345
+ class="fd-sidebar-link fd-sidebar-folder-parent-link"
337
346
  class:fd-sidebar-link-active={isActive(node.index.url)}
338
- data-active={isActive(node.index.url)}
339
- onclick={closeSidebar}
347
+ data-active={isActive(node.index.url) || undefined}
348
+ onclick={keepFolderLinkNavigation}
340
349
  >
341
- {node.index.name}
350
+ {#if getIcon(node.icon)}
351
+ <span class="fd-sidebar-icon">{@html getIcon(node.icon)}</span>
352
+ {/if}
353
+ {node.name}
342
354
  </a>
343
- {/if}
355
+ <button
356
+ type="button"
357
+ class="fd-sidebar-folder-toggle"
358
+ aria-label={`Toggle ${node.name}`}
359
+ onclick={toggleFolder}
360
+ >
361
+ <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
362
+ <polyline points="6 9 12 15 18 9" />
363
+ </svg>
364
+ </button>
365
+ </summary>
366
+ {:else}
367
+ <summary class="fd-sidebar-folder-trigger">
368
+ <span class="fd-sidebar-folder-label">
369
+ {#if getIcon(node.icon)}
370
+ <span class="fd-sidebar-icon">{@html getIcon(node.icon)}</span>
371
+ {/if}
372
+ {node.name}
373
+ </span>
374
+ <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
375
+ <polyline points="6 9 12 15 18 9" />
376
+ </svg>
377
+ </summary>
378
+ {/if}
379
+ <div class="fd-sidebar-folder-content">
344
380
  {#each node.children as child}
345
381
  {#if child.type === "page"}
346
382
  <a
@@ -354,26 +390,42 @@
354
390
  </a>
355
391
  {:else if child.type === "folder"}
356
392
  <details class="fd-sidebar-folder fd-sidebar-nested-folder" open>
357
- <summary class="fd-sidebar-folder-trigger">
358
- <span class="fd-sidebar-folder-label">
359
- {child.name}
360
- </span>
361
- <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
362
- <polyline points="6 9 12 15 18 9" />
363
- </svg>
364
- </summary>
365
- <div class="fd-sidebar-folder-content">
366
- {#if child.index}
393
+ {#if child.index}
394
+ <summary
395
+ class="fd-sidebar-folder-trigger fd-sidebar-folder-trigger-link"
396
+ onclick={suppressFolderSummaryToggle}
397
+ >
367
398
  <a
368
399
  href={withLang(child.index.url)}
369
- class="fd-sidebar-link fd-sidebar-child-link"
400
+ class="fd-sidebar-link fd-sidebar-folder-parent-link"
370
401
  class:fd-sidebar-link-active={isActive(child.index.url)}
371
- data-active={isActive(child.index.url)}
372
- onclick={closeSidebar}
402
+ data-active={isActive(child.index.url) || undefined}
403
+ onclick={keepFolderLinkNavigation}
373
404
  >
374
- {child.index.name}
405
+ {child.name}
375
406
  </a>
376
- {/if}
407
+ <button
408
+ type="button"
409
+ class="fd-sidebar-folder-toggle"
410
+ aria-label={`Toggle ${child.name}`}
411
+ onclick={toggleFolder}
412
+ >
413
+ <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
414
+ <polyline points="6 9 12 15 18 9" />
415
+ </svg>
416
+ </button>
417
+ </summary>
418
+ {:else}
419
+ <summary class="fd-sidebar-folder-trigger">
420
+ <span class="fd-sidebar-folder-label">
421
+ {child.name}
422
+ </span>
423
+ <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
424
+ <polyline points="6 9 12 15 18 9" />
425
+ </svg>
426
+ </summary>
427
+ {/if}
428
+ <div class="fd-sidebar-folder-content">
377
429
  {#each child.children as grandchild}
378
430
  {#if grandchild.type === "page"}
379
431
  <a
package/styles/docs.css CHANGED
@@ -373,13 +373,44 @@ samp {
373
373
  background: var(--color-fd-accent);
374
374
  }
375
375
 
376
+ .fd-sidebar-folder-trigger-link {
377
+ gap: 8px;
378
+ }
379
+
380
+ .fd-sidebar-folder-parent-link {
381
+ min-width: 0;
382
+ flex: 1;
383
+ padding: 0;
384
+ color: inherit;
385
+ background: transparent !important;
386
+ }
387
+
388
+ .fd-sidebar-folder-parent-link:hover {
389
+ color: inherit;
390
+ background: transparent !important;
391
+ }
392
+
393
+ .fd-sidebar-folder-toggle {
394
+ display: inline-flex;
395
+ align-items: center;
396
+ justify-content: center;
397
+ margin: 0;
398
+ padding: 0;
399
+ border: 0;
400
+ background: transparent;
401
+ color: inherit;
402
+ cursor: pointer;
403
+ flex-shrink: 0;
404
+ }
405
+
376
406
  .fd-sidebar-chevron {
377
407
  transition: transform 0.2s;
378
408
  flex-shrink: 0;
379
409
  opacity: 0.5;
380
410
  }
381
411
 
382
- .fd-sidebar-folder[open] > .fd-sidebar-folder-trigger .fd-sidebar-chevron {
412
+ .fd-sidebar-folder[open] > .fd-sidebar-folder-trigger .fd-sidebar-chevron,
413
+ .fd-sidebar-folder[open] > .fd-sidebar-folder-trigger-link .fd-sidebar-chevron {
383
414
  transform: rotate(180deg);
384
415
  }
385
416