/
StoryView.vue
99 lines (88 loc) · 2.27 KB
/
StoryView.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<script lang="ts" setup>
import { watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Icon } from '@iconify/vue'
import { useStoryStore } from '../../stores/story'
import BaseSplitPane from '../base/BaseSplitPane.vue'
import BaseEmpty from '../base/BaseEmpty.vue'
import { isMobile } from '../../util/responsive'
import StoryViewer from './StoryViewer.vue'
import StorySidePanel from '../panel/StorySidePanel.vue'
import StoryDocs from '../panel/StoryDocs.vue'
const storyStore = useStoryStore()
const router = useRouter()
const route = useRoute()
// Restore variant selection
watch(() => storyStore.currentVariant, value => {
if (value) {
storyStore.currentStory.lastSelectedVariant = value
}
}, {
immediate: true,
})
watch(() => [storyStore.currentStory, storyStore.currentVariant], () => {
if (!storyStore.currentVariant) {
if (storyStore.currentStory?.lastSelectedVariant) {
setVariant(storyStore.currentStory.lastSelectedVariant.id)
return
}
if (storyStore.currentStory?.variants.length === 1) {
setVariant(storyStore.currentStory.variants[0].id)
}
}
}, {
immediate: true,
})
function setVariant (variantId: string) {
router.replace({
...route,
query: {
...route.query,
variantId,
},
})
}
</script>
<template>
<BaseEmpty
v-if="!storyStore.currentStory"
class="histoire-story-view histoire-no-story"
>
<Icon
icon="carbon:software-resource-resource"
class="htw-w-16 htw-h-16 htw-opacity-50"
/>
</BaseEmpty>
<div
v-else
class="histoire-story-view histoire-with-story htw-h-full"
>
<div
v-if="storyStore.currentStory.docsOnly"
class="htw-h-full htw-overflow-auto"
>
<StoryDocs
:story="storyStore.currentStory"
class="md:htw-p-12 htw-w-full md:htw-max-w-[600px] lg:htw-max-w-[800px] xl:htw-max-w-[900px]"
/>
</div>
<template v-else-if="isMobile">
<StoryViewer />
</template>
<BaseSplitPane
v-else
save-id="story-main"
:min="30"
:max="95"
:default-split="75"
class="htw-h-full"
>
<template #first>
<StoryViewer />
</template>
<template #last>
<StorySidePanel />
</template>
</BaseSplitPane>
</div>
</template>