/
StoryControls.vue
80 lines (71 loc) · 2.03 KB
/
StoryControls.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
<script lang="ts" setup>
import { computed, PropType, ref, watch } from 'vue'
import { Icon } from '@iconify/vue'
import GenericRenderStory from '../story/GenericRenderStory.vue'
import type { Story, Variant } from '../../types'
import BaseEmpty from '../base/BaseEmpty.vue'
import StatePresets from './StatePresets.vue'
import ControlsComponentProps from './ControlsComponentProps.vue'
const props = defineProps({
variant: {
type: Object as PropType<Variant>,
required: true,
},
story: {
type: Object as PropType<Story>,
required: true,
},
})
// Wait for controls render before applying presets
const ready = ref(false)
watch(() => props.variant, () => {
ready.value = false
})
const hasCustomControls = computed(() => props.variant.slots().controls || props.story.slots().controls)
</script>
<template>
<div
data-test-id="story-controls"
class="histoire-story-controls htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-750"
>
<!-- Toolbar -->
<div
class="htw-h-9 htw-flex-none htw-px-2 htw-flex htw-items-center"
>
<StatePresets
v-if="ready || !hasCustomControls"
:story="story"
:variant="variant"
/>
</div>
<!-- Custom controls -->
<GenericRenderStory
v-if="hasCustomControls"
:key="`${story.id}-${variant.id}`"
slot-name="controls"
:variant="variant"
:story="story"
class="htw-flex-none"
@ready="ready = true"
/>
<BaseEmpty v-else-if="!variant.state?._hPropDefs?.length">
<Icon
icon="carbon:audio-console"
class="htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
/>
<span>No controls available for this story</span>
</BaseEmpty>
<!-- Auto props -->
<div
v-if="variant.state?._hPropDefs?.length"
>
<ControlsComponentProps
v-for="(def, index) of variant.state._hPropDefs"
:key="index"
:variant="variant"
:definition="def"
class="htw-flex-none htw-my-2"
/>
</div>
</div>
</template>