enso/app/gui2/stories/CircularMenu.story.vue
Adam Obuchowicz ef2f5f993d
Visualization Preview (#10310)
Fixes #8533

Visualization is shown when pressing ctrl (cmd on mac) and hovering output port.

[Screencast from 2024-06-18 17-06-59.webm](https://github.com/enso-org/enso/assets/3919101/4963eaa7-8b96-4fdb-af09-70de68c6df57)
2024-06-19 13:46:51 +00:00

39 lines
1.3 KiB
Vue

<script setup lang="ts">
import { logEvent } from 'histoire/client'
import { ref } from 'vue'
import CircularMenu from '@/components/CircularMenu.vue'
const isAutoEvaluationDisabled = ref(false)
const isDocsVisible = ref(false)
const isVisualizationVisible = ref(false)
</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
v-model:is-auto-evaluation-disabled="isAutoEvaluationDisabled"
v-model:is-docs-visible="isDocsVisible"
v-model:is-visualization-enabled="isVisualizationVisible"
@update:isAutoEvaluationDisabled="logEvent('update:isAutoEvaluationDisabled', [$event])"
@update:isDocsVisible="logEvent('update:isDocsVisible', [$event])"
@update:isVisualizationVisible="logEvent('update:isVisualizationVisible', [$event])"
/>
</div>
</div>
<template #controls>
<HstCheckbox v-model="isAutoEvaluationDisabled" title="isAutoEvaluationDisabled" />
<HstCheckbox v-model="isDocsVisible" title="isDocsVisible" />
<HstCheckbox v-model="isVisualizationVisible" title="isVisualizationVisible" />
</template>
</Story>
</template>