4995e49c46
- Replace `ref`s with `shallowRef` when deep reactivity is not needed. - Replace `readonly`s with `shallowReadonly` where the goal is to only prevent `.value` mutation. - Remove redundant `ref` in `SizeObserver.vue`. - Remove redundant nested `ref` in `TooltipWrapper.vue`. - Remove redundant `events` export from `UseCollectionState.ts`. - Remove redundant `computed` from `UseCollectionState.ts`. - Remove `timestamp` from `TreeViewFilterEvent` that becomes unnecessary after using `shallowRef`. - Add missing unit tests for `UseTreeViewFilterEvent`. - Add missing stub for `FilterChangeDetails`.
91 lines
1.8 KiB
Vue
91 lines
1.8 KiB
Vue
<template>
|
|
<div
|
|
class="slider"
|
|
v-bind:style="{
|
|
'--vertical-margin': verticalMargin,
|
|
'--first-min-width': firstMinWidth,
|
|
'--first-initial-width': firstInitialWidth,
|
|
'--second-min-width': secondMinWidth,
|
|
}"
|
|
>
|
|
<div class="first" ref="firstElement">
|
|
<slot name="first" />
|
|
</div>
|
|
<SliderHandle class="handle" @resized="onResize($event)" />
|
|
<div class="second">
|
|
<slot name="second" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, shallowRef } from 'vue';
|
|
import SliderHandle from './SliderHandle.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
SliderHandle,
|
|
},
|
|
props: {
|
|
verticalMargin: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
firstMinWidth: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
firstInitialWidth: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
secondMinWidth: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
setup() {
|
|
const firstElement = shallowRef<HTMLElement>();
|
|
|
|
function onResize(displacementX: number): void {
|
|
const leftWidth = firstElement.value.offsetWidth + displacementX;
|
|
firstElement.value.style.width = `${leftWidth}px`;
|
|
}
|
|
|
|
return {
|
|
firstElement,
|
|
onResize,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.slider {
|
|
display: flex;
|
|
flex-direction: row;
|
|
.first {
|
|
min-width: var(--first-min-width);
|
|
width: var(--first-initial-width);
|
|
}
|
|
.second {
|
|
flex: 1;
|
|
min-width: var(--second-min-width);
|
|
}
|
|
@media screen and (max-width: $media-vertical-view-breakpoint) {
|
|
flex-direction: column;
|
|
.first {
|
|
width: auto !important;
|
|
}
|
|
.second {
|
|
margin-top: var(--vertical-margin);
|
|
}
|
|
.handle {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|