From dac8b16082fa39bf1f46eb57f034dcdff8ccbd55 Mon Sep 17 00:00:00 2001 From: Dave Stewart Date: Mon, 3 Mar 2025 17:35:22 +0000 Subject: [PATCH 01/24] refactor: move stories nav to component --- src/runtime/components/nav/StoriesNav.vue | 69 +++++++++++++++++++++++ src/runtime/layouts/stories.vue | 61 ++------------------ 2 files changed, 74 insertions(+), 56 deletions(-) create mode 100644 src/runtime/components/nav/StoriesNav.vue diff --git a/src/runtime/components/nav/StoriesNav.vue b/src/runtime/components/nav/StoriesNav.vue new file mode 100644 index 0000000..099d3cf --- /dev/null +++ b/src/runtime/components/nav/StoriesNav.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/src/runtime/layouts/stories.vue b/src/runtime/layouts/stories.vue index e138af1..85d41c8 100644 --- a/src/runtime/layouts/stories.vue +++ b/src/runtime/layouts/stories.vue @@ -5,22 +5,7 @@ ref="sidebarRef" class="stories-sidebar" > - +
@@ -30,20 +15,19 @@ diff --git a/src/runtime/components/nav/NavItem.vue b/src/runtime/components/nav/NavItem.vue new file mode 100644 index 0000000..c4bc6e5 --- /dev/null +++ b/src/runtime/components/nav/NavItem.vue @@ -0,0 +1,75 @@ + + + + + diff --git a/src/runtime/components/nav/NavRoot.vue b/src/runtime/components/nav/NavRoot.vue new file mode 100644 index 0000000..906990e --- /dev/null +++ b/src/runtime/components/nav/NavRoot.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/src/runtime/components/nav/StoriesNav.vue b/src/runtime/components/nav/StoriesNav.vue deleted file mode 100644 index 099d3cf..0000000 --- a/src/runtime/components/nav/StoriesNav.vue +++ /dev/null @@ -1,69 +0,0 @@ - - - - - diff --git a/src/runtime/components/nav/types.ts b/src/runtime/components/nav/types.ts new file mode 100644 index 0000000..0cfe1bb --- /dev/null +++ b/src/runtime/components/nav/types.ts @@ -0,0 +1,7 @@ +import type { BedtimeStory } from '../../../types/module' + +export interface NavFolderData { + folders: NavFolderData[] + stories: BedtimeStory[] + title: string +} diff --git a/src/runtime/layouts/stories.vue b/src/runtime/layouts/stories.vue index 85d41c8..c1c5101 100644 --- a/src/runtime/layouts/stories.vue +++ b/src/runtime/layouts/stories.vue @@ -5,7 +5,10 @@ ref="sidebarRef" class="stories-sidebar" > - +
@@ -17,7 +20,7 @@ From f87b64f3cf6140dc1a340d495132ad8d4638b476 Mon Sep 17 00:00:00 2001 From: Dave Stewart Date: Tue, 4 Mar 2025 02:28:21 +0000 Subject: [PATCH 08/24] feat: add command palette background --- src/runtime/components/CommandPalette.vue | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue index fdc2880..d9e60a6 100644 --- a/src/runtime/components/CommandPalette.vue +++ b/src/runtime/components/CommandPalette.vue @@ -104,6 +104,7 @@ function scrollIntoView(index: number) { @@ -15,6 +28,7 @@ import { computed, ref, onMounted } from 'vue' import type { BedtimeStory } from '../../types/module' import NavFolder from './NavFolder.vue' +import NavItem from './NavItem.vue' import type { NavFolderData } from './types' defineOptions({ @@ -29,8 +43,8 @@ const props = defineProps<{ /** * Transform flat story list into hierarchical tree structure */ -const tree = computed(() => { - const tree: NavFolderData = { +const nested = computed(() => { + const data: NavFolderData = { title: 'root', path: '/', folders: [], @@ -38,54 +52,42 @@ const tree = computed(() => { } // tree - if (props.tree) { - // sort stories to ensure consistent order - const sorted = [...props.stories].sort((a, b) => - a.shortPath.localeCompare(b.shortPath), - ) - - // build the tree structure - for (const story of sorted) { - const parts = story.shortPath.split('/') - let current = tree - - // handle nested paths - for (let i = 0; i < parts.length - 1; i++) { - const part = parts[i] - - // find existing folder or create new one - let folder = current.folders.find(f => f.title === part) - - if (!folder) { - folder = { - title: part, - path: parts.slice(0, i + 1).join('/'), - folders: [], - stories: [], - } - current.folders.push(folder) + // sort stories to ensure consistent order + const sorted = [...props.stories].sort((a, b) => + a.shortPath.localeCompare(b.shortPath), + ) + + // build the tree structure + for (const story of sorted) { + const parts = story.shortPath.split('/') + let current = data + + // handle nested paths + for (let i = 0; i < parts.length - 1; i++) { + const part = parts[i] + + // find existing folder or create new one + let folder = current.folders.find(f => f.title === part) + + if (!folder) { + folder = { + title: part, + path: parts.slice(0, i + 1).join('/'), + folders: [], + stories: [], } - - current = folder + current.folders.push(folder) } - // add the story to the current level - current.stories.push(story) + current = folder } - } - // flat - else { - tree.folders.push({ - title: 'stories', - path: '/stories', - folders: [], - stories: props.stories, - }) + // add the story to the current level + current.stories.push(story) } // return - return tree + return data }) // prevent fouc diff --git a/src/runtime/layouts/stories.vue b/src/runtime/layouts/stories.vue deleted file mode 100644 index cd1d834..0000000 --- a/src/runtime/layouts/stories.vue +++ /dev/null @@ -1,98 +0,0 @@ - - - - - diff --git a/src/runtime/pages/options-page.vue b/src/runtime/pages/options-page.vue deleted file mode 100644 index ca99617..0000000 --- a/src/runtime/pages/options-page.vue +++ /dev/null @@ -1,31 +0,0 @@ - - - - - diff --git a/src/runtime/pages/story-view.vue b/src/runtime/pages/story-view.vue index ab7ea63..232065e 100644 --- a/src/runtime/pages/story-view.vue +++ b/src/runtime/pages/story-view.vue @@ -4,15 +4,29 @@ :data-bedtime-theme="theme" >
+ + +
Date: Wed, 5 Mar 2025 11:30:06 +1100 Subject: [PATCH 17/24] fix: types --- src/runtime/components/nav/NavItem.vue | 4 ++-- src/runtime/components/nav/NavRoot.vue | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/runtime/components/nav/NavItem.vue b/src/runtime/components/nav/NavItem.vue index 51b36c7..fb0ec0d 100644 --- a/src/runtime/components/nav/NavItem.vue +++ b/src/runtime/components/nav/NavItem.vue @@ -17,7 +17,7 @@ /> {{ title }}
- {{ Object.values(story.variants).length || 1 }} + {{ Object.values(story.variants ?? {}).length || 1 }}
@@ -25,7 +25,7 @@ diff --git a/src/runtime/components/nav/NavFolder.vue b/src/runtime/components/nav/NavFolder.vue index 7173c40..744510e 100644 --- a/src/runtime/components/nav/NavFolder.vue +++ b/src/runtime/components/nav/NavFolder.vue @@ -6,10 +6,11 @@ >
@@ -21,7 +22,10 @@ v-if="!isClosed" class="bt-nav-folder-container" > -
+
import { onMounted, ref, watch } from 'vue' -import Icon from '../elements/Icon' +import Icon from '../elements/Icon.vue' import NavItem from './NavItem.vue' import type { NavFolderData } from './types' @@ -89,9 +93,11 @@ onMounted(() => { diff --git a/src/runtime/components/nav/NavItem.vue b/src/runtime/components/nav/NavItem.vue index fb0ec0d..709ebad 100644 --- a/src/runtime/components/nav/NavItem.vue +++ b/src/runtime/components/nav/NavItem.vue @@ -9,7 +9,7 @@ class="bt-nav-item-link" :class="{ 'bt-active': currentStory === story.kebabName }" > -
+
{ From 3128afbf3da59eac0ec86e13db4815039c2b5622 Mon Sep 17 00:00:00 2001 From: Dave Stewart Date: Wed, 5 Mar 2025 15:09:29 +0000 Subject: [PATCH 19/24] fix: update scroll fix --- src/runtime/composables/useScrollfix.ts | 38 +++++++++++++++++ src/runtime/pages/story-view.vue | 54 +++++++------------------ 2 files changed, 53 insertions(+), 39 deletions(-) create mode 100644 src/runtime/composables/useScrollfix.ts diff --git a/src/runtime/composables/useScrollfix.ts b/src/runtime/composables/useScrollfix.ts new file mode 100644 index 0000000..9b29421 --- /dev/null +++ b/src/runtime/composables/useScrollfix.ts @@ -0,0 +1,38 @@ +import { onMounted, onUpdated, type Ref } from 'vue' +// @ts-expect-error resolved at runtime +import { onBeforeRouteLeave, onBeforeRouteUpdate, type RouteLocationNormalized } from '#vue-router' +// @ts-expect-error resolved at runtime +import { useState } from '#imports' + +export function useFixScroll(ref: Ref) { + const id = ref.value?.id || ref.value?.className + if (ref.value && !id) { + console.warn('UseScrollFix requires that the fixed element have a unique class or id') + } + + const lastScrollTop = useState(`bedtime-${id}-scroll-top`, () => 0) + const saveScrollPosition = () => { + if (ref.value) { + lastScrollTop.value = ref.value.scrollTop + } + } + const restoreScrollPosition = () => { + if (ref.value) { + ref.value.scrollTop = lastScrollTop.value + } + } + + onBeforeRouteLeave((_to: RouteLocationNormalized, _from: RouteLocationNormalized) => { + saveScrollPosition() + }) + onBeforeRouteUpdate((_to: RouteLocationNormalized, _from: RouteLocationNormalized) => { + saveScrollPosition() + }) + + onMounted(() => { + restoreScrollPosition() + }) + onUpdated(() => { + restoreScrollPosition() + }) +} diff --git a/src/runtime/pages/story-view.vue b/src/runtime/pages/story-view.vue index 232065e..d5a1609 100644 --- a/src/runtime/pages/story-view.vue +++ b/src/runtime/pages/story-view.vue @@ -5,11 +5,11 @@ >
-