4531645b4c
These updates ensure better adherence to Vue 3 standards and improve overall code quality and readability. - Update ESLint configuration from Vue 2.x to Vue 3 rules. - Switch from "essential" to strictest "recommended" ESLint ruleset. - Adjust ESLint script to treat warnings as errors by using `--max-warnings=0` flag. This enforces stricter code quality controls provided by Vue 3 rules.
86 lines
2.1 KiB
Vue
86 lines
2.1 KiB
Vue
<template>
|
|
<div id="container">
|
|
<TheSelector class="item" />
|
|
<TheOsChanger class="item" />
|
|
<TheViewChanger
|
|
v-if="!isSearching"
|
|
class="item"
|
|
@view-changed="$emit('viewChanged', $event)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from 'vue';
|
|
import { injectKey } from '@/presentation/injectionSymbols';
|
|
import { IReadOnlyUserFilter } from '@/application/Context/State/Filter/IUserFilter';
|
|
import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
|
|
import TheOsChanger from './TheOsChanger.vue';
|
|
import TheSelector from './Selector/TheSelector.vue';
|
|
import TheViewChanger from './View/TheViewChanger.vue';
|
|
import { ViewType } from './View/ViewType';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
TheSelector,
|
|
TheOsChanger,
|
|
TheViewChanger,
|
|
},
|
|
emits: {
|
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
viewChanged: (viewType: ViewType) => true,
|
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
},
|
|
setup() {
|
|
const { onStateChange } = injectKey((keys) => keys.useCollectionState);
|
|
const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
|
|
|
const isSearching = ref(false);
|
|
|
|
onStateChange((state) => {
|
|
events.unsubscribeAllAndRegister([
|
|
subscribeToFilterChanges(state.filter),
|
|
]);
|
|
}, { immediate: true });
|
|
|
|
function subscribeToFilterChanges(
|
|
filter: IReadOnlyUserFilter,
|
|
): IEventSubscription {
|
|
return filter.filterChanged.on((event) => {
|
|
event.visit({
|
|
onApply: () => { isSearching.value = true; },
|
|
onClear: () => { isSearching.value = false; },
|
|
});
|
|
});
|
|
}
|
|
|
|
return {
|
|
isSearching,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$margin-between-lines: 7px;
|
|
#container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: -$margin-between-lines;
|
|
.item {
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: $margin-between-lines 5px 0 5px;
|
|
&:first-child {
|
|
justify-content: flex-start;
|
|
}
|
|
&:last-child {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
</style>
|