forked from nikita/muzika-gromche
41 lines
1.3 KiB
Vue
41 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type { Orientation } from './Slider'
|
|
import type { UseZoomAxis } from '@/lib/useZoomAxis'
|
|
import Add from '@material-design-icons/svg/filled/add.svg'
|
|
import Remove from '@material-design-icons/svg/filled/remove.svg'
|
|
import Slider from '@/components/library/Slider.vue'
|
|
import ToolButtonSmall from './ToolButtonSmall.vue'
|
|
|
|
const {
|
|
axis,
|
|
orientation = 'horizontal',
|
|
} = defineProps<{
|
|
axis: UseZoomAxis
|
|
orientation?: Orientation
|
|
}>()
|
|
</script>
|
|
|
|
<!-- for some reason min-width does not propagate up from Slider -->
|
|
<template>
|
|
<div
|
|
class="tw:px-2 tw:flex tw:items-center tw:gap-2"
|
|
:class="orientation === 'vertical' ? 'tw:flex-col' : 'tw:flex-row'"
|
|
>
|
|
<ToolButtonSmall :icon="Remove" title="Zoom Out" :disabled="axis.isAtMin.value" @click="axis.zoomOut" />
|
|
|
|
<!-- skip :defaultValue="axis.default.discrete.value" because snapping makes dragging to negative values impossible -->
|
|
<Slider
|
|
v-model.number="axis.zoom.discrete.value"
|
|
:min="axis.min.discrete.value"
|
|
:max="axis.max.discrete.value"
|
|
:step="axis.stepSmall.discrete.value"
|
|
:orientation
|
|
:reset="axis.reset"
|
|
/>
|
|
|
|
<ToolButtonSmall :icon="Add" title="Zoom In" :disabled="axis.isAtMax.value" @click="axis.zoomIn" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|