2023-10-29 22:02:07 +03:00
|
|
|
<script setup lang="ts">
|
|
|
|
import { logEvent } from 'histoire/client'
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
|
|
import CircularMenu from '@/components/CircularMenu.vue'
|
|
|
|
|
2024-08-08 15:12:05 +03:00
|
|
|
const isRecordingOverridden = ref(false)
|
2023-10-29 22:02:07 +03:00
|
|
|
const isVisualizationVisible = ref(false)
|
2024-08-08 15:12:05 +03:00
|
|
|
|
|
|
|
const emptySet = new Set<string>()
|
2023-10-29 22:02:07 +03:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<Story
|
|
|
|
title="Circular Menu"
|
|
|
|
group="graph"
|
|
|
|
:layout="{ type: 'grid', width: 200 }"
|
|
|
|
autoPropsDisabled
|
|
|
|
>
|
|
|
|
<div style="height: 76px">
|
|
|
|
<div style="position: absolute; left: 32px">
|
|
|
|
<CircularMenu
|
2024-08-08 15:12:05 +03:00
|
|
|
v-model:isRecordingOverridden="isRecordingOverridden"
|
|
|
|
v-model:isVisualizationEnabled="isVisualizationVisible"
|
|
|
|
:isRecordingEnabledGlobally="true"
|
|
|
|
:isFullMenuVisible="true"
|
|
|
|
:isRemovable="true"
|
|
|
|
:matchableNodeColors="emptySet"
|
|
|
|
:documentationUrl="undefined"
|
|
|
|
@update:isRecordingOverridden="logEvent('update:isRecordingOverridden', [$event])"
|
2023-10-29 22:02:07 +03:00
|
|
|
@update:isVisualizationVisible="logEvent('update:isVisualizationVisible', [$event])"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<template #controls>
|
2024-08-08 15:12:05 +03:00
|
|
|
<HstCheckbox v-model="isRecordingOverridden" title="isRecordingOverridden" />
|
2023-10-29 22:02:07 +03:00
|
|
|
<HstCheckbox v-model="isVisualizationVisible" title="isVisualizationVisible" />
|
|
|
|
</template>
|
|
|
|
</Story>
|
|
|
|
</template>
|