c548ec9906
* wip * wip * wip * wip * revert unnecessary changes * wip * refactor(frontend): enforce verbatimModuleSyntax * fix * refactor(frontend-shared): enforce verbatimModuleSyntax * wip * refactor(frontend-embed): enforce verbatimModuleSyntax * enforce consistent-type-imports * fix lint config * attemt to fix ci * fix lint * fix * fix * fix
119 lines
2.7 KiB
Vue
119 lines
2.7 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
-->
|
|
|
|
<template>
|
|
<div :class="$style.sortOrderArea">
|
|
<div :class="$style.sortOrderAreaTags">
|
|
<MkTagItem
|
|
v-for="order in currentOrders"
|
|
:key="order.key"
|
|
:iconClass="order.direction === '+' ? 'ti ti-arrow-up' : 'ti ti-arrow-down'"
|
|
:exButtonIconClass="'ti ti-x'"
|
|
:content="order.key"
|
|
:class="$style.sortOrderTag"
|
|
@click="onToggleSortOrderButtonClicked(order)"
|
|
@exButtonClick="onRemoveSortOrderButtonClicked(order)"
|
|
/>
|
|
</div>
|
|
<MkButton :class="$style.sortOrderAddButton" @click="onAddSortOrderButtonClicked">
|
|
<span class="ti ti-plus"></span>
|
|
</MkButton>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" generic="T extends string">
|
|
import { toRefs } from 'vue';
|
|
import MkTagItem from '@/components/MkTagItem.vue';
|
|
import MkButton from '@/components/MkButton.vue';
|
|
import type { MenuItem } from '@/types/menu.js';
|
|
import * as os from '@/os.js';
|
|
import type { SortOrder } from '@/components/MkSortOrderEditor.define.js';
|
|
|
|
const emit = defineEmits<{
|
|
(ev: 'update', sortOrders: SortOrder<T>[]): void;
|
|
}>();
|
|
|
|
const props = defineProps<{
|
|
baseOrderKeyNames: T[];
|
|
currentOrders: SortOrder<T>[];
|
|
}>();
|
|
|
|
const { currentOrders } = toRefs(props);
|
|
|
|
function onToggleSortOrderButtonClicked(order: SortOrder<T>) {
|
|
switch (order.direction) {
|
|
case '+':
|
|
order.direction = '-';
|
|
break;
|
|
case '-':
|
|
order.direction = '+';
|
|
break;
|
|
}
|
|
|
|
emitOrder(currentOrders.value);
|
|
}
|
|
|
|
function onAddSortOrderButtonClicked(ev: MouseEvent) {
|
|
const menuItems: MenuItem[] = props.baseOrderKeyNames
|
|
.filter(baseKey => !currentOrders.value.map(it => it.key).includes(baseKey))
|
|
.map(it => {
|
|
return {
|
|
text: it,
|
|
action: () => {
|
|
emitOrder([...currentOrders.value, { key: it, direction: '+' }]);
|
|
},
|
|
};
|
|
});
|
|
os.contextMenu(menuItems, ev);
|
|
}
|
|
|
|
function onRemoveSortOrderButtonClicked(order: SortOrder<T>) {
|
|
emitOrder(currentOrders.value.filter(it => it.key !== order.key));
|
|
}
|
|
|
|
function emitOrder(sortOrders: SortOrder<T>[]) {
|
|
emit('update', sortOrders);
|
|
}
|
|
|
|
</script>
|
|
|
|
<style module lang="scss">
|
|
.sortOrderArea {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.sortOrderAreaTags {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.sortOrderAddButton {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
min-width: 2.0em;
|
|
min-height: 2.0em;
|
|
max-width: 2.0em;
|
|
max-height: 2.0em;
|
|
padding: 8px;
|
|
margin-left: auto;
|
|
border-radius: 9999px;
|
|
background-color: var(--MI_THEME-buttonBg);
|
|
}
|
|
|
|
.sortOrderTag {
|
|
user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|