mirror of
https://github.com/enso-org/enso.git
synced 2024-12-22 18:38:11 +03:00
a3873b9565
Closes #8751 Closes #8752 - The numeric widget allows the use of the input field after clicking with LMB - Slider is only visible if the engine provides widget configuration with set limits (see below for testing) - Setting value outside limits is possible - For now, to distinguish drag from click, we compare relative mouse movement on the mouse up event. We might benefit from using a timer instead, but let’s see how good it is now. - Changes after demo - No more input validation. You can enter literally anything and it would be accepted. - Updates debouncing – the code is updated on defocus or when slider dragging has finished. https://github.com/enso-org/enso/assets/6566674/b3580083-c678-4734-881c-97f8ac56176b
30 lines
586 B
Vue
30 lines
586 B
Vue
<script lang="ts" setup>
|
|
import type { Story, Variant } from 'histoire'
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
story: Story
|
|
variant?: Variant
|
|
}>()
|
|
|
|
const color = computed(() => {
|
|
return props.story.meta?.customBackground ?? props.variant?.meta?.customBackground ?? '#fff'
|
|
})
|
|
|
|
declare module 'histoire' {
|
|
interface StoryMeta {
|
|
customBackground?: string
|
|
}
|
|
|
|
interface VariantMeta {
|
|
customBackground?: string
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="custom-background-wrapper" :style="{ backgroundColor: color }">
|
|
<slot />
|
|
</div>
|
|
</template>
|