mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.2 KiB
79 lines
2.2 KiB
<script lang="ts" setup> |
|
import { iconMap } from '#imports' |
|
import type { UsersSortType } from '~/lib' |
|
|
|
const { field, direction, handleUserSort } = defineProps<{ |
|
field: UsersSortType['field'] |
|
direction?: UsersSortType['direction'] |
|
handleUserSort: Function |
|
}>() |
|
|
|
const isOpen = ref(false) |
|
|
|
const sortUserBy = (direction?: UsersSortType['direction']) => { |
|
handleUserSort({ |
|
field, |
|
direction, |
|
}) |
|
isOpen.value = false |
|
} |
|
</script> |
|
|
|
<template> |
|
<a-dropdown |
|
v-model:visible="isOpen" |
|
:trigger="['click']" |
|
placement="bottomLeft" |
|
overlay-class-name="nc-user-menu-column-operations !border-1 rounded-lg !shadow-xl" |
|
@click.stop="isOpen = !isOpen" |
|
> |
|
<div> |
|
<GeneralIcon |
|
:icon="direction === 'asc' || direction === 'desc' ? 'sortDesc' : 'arrowDown'" |
|
class="text-grey h-full text-grey nc-user-menu-trigger cursor-pointer outline-0 mr-2 transition-none" |
|
:style="{ transform: direction === 'asc' ? 'rotate(180deg)' : undefined }" |
|
/> |
|
</div> |
|
<template #overlay> |
|
<NcMenu class="flex flex-col gap-1 border-gray-200 nc-user-menu-column-options"> |
|
<NcMenuItem @click="sortUserBy('asc')"> |
|
<div class="nc-column-insert-after nc-user-menu-item"> |
|
<component |
|
:is="iconMap.sortDesc" |
|
class="text-gray-700 !rotate-180 !w-4.25 !h-4.25" |
|
:style="{ |
|
transform: 'rotate(180deg)', |
|
}" |
|
/> |
|
|
|
<!-- Sort Ascending --> |
|
{{ $t('general.sortAsc') }} |
|
</div> |
|
</NcMenuItem> |
|
<NcMenuItem @click="sortUserBy('desc')"> |
|
<div class="nc-column-insert-before nc-user-menu-item"> |
|
<component :is="iconMap.sortDesc" class="text-gray-700 !w-4.25 !h-4.25 ml-0.5 mr-0.25" /> |
|
<!-- Sort Descending --> |
|
{{ $t('general.sortDesc') }} |
|
</div> |
|
</NcMenuItem> |
|
</NcMenu> |
|
</template> |
|
</a-dropdown> |
|
</template> |
|
|
|
<style scoped> |
|
.nc-user-menu-item { |
|
@apply flex items-center gap-2; |
|
} |
|
|
|
.nc-user-menu-column-options { |
|
.nc-icons { |
|
@apply !w-5 !h-5; |
|
} |
|
} |
|
|
|
:deep(.ant-dropdown-menu-item) { |
|
@apply !hover:text-black text-gray-700; |
|
} |
|
</style>
|
|
|