mirror of https://github.com/rancher/dashboard.git
72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
|
|
type HiddenAction = {
|
|
action: string;
|
|
enabled: boolean;
|
|
icon: string;
|
|
label: string;
|
|
bulkable: boolean;
|
|
bulkAction: string;
|
|
allEnabled: boolean;
|
|
anyEnabled: boolean;
|
|
}
|
|
|
|
defineProps<{
|
|
disabled: boolean,
|
|
hiddenActions: HiddenAction[],
|
|
actionTooltip: unknown,
|
|
}>();
|
|
|
|
const emit = defineEmits(['click', 'mouseover', 'mouseleave']);
|
|
|
|
const applyTableAction = (act: HiddenAction, args: unknown, event: Event) => {
|
|
emit('click', act, args, event);
|
|
};
|
|
|
|
const setBulkActionOfInterest = (act: HiddenAction | null, event: 'mouseover' | 'mouseleave' = 'mouseover') => {
|
|
emit(event, act);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<rc-dropdown
|
|
:distance="14"
|
|
placement="bottom"
|
|
>
|
|
<rc-dropdown-trigger
|
|
class="bulk-actions-dropdown"
|
|
:disabled="disabled"
|
|
>
|
|
<template #before>
|
|
<i class="icon icon-gear" />
|
|
</template>
|
|
<span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
|
|
<template #after>
|
|
<i class="ml-10 icon icon-chevron-down" />
|
|
</template>
|
|
</rc-dropdown-trigger>
|
|
<template #dropdownCollection>
|
|
<rc-dropdown-item
|
|
v-for="(act, i) in hiddenActions"
|
|
:key="i"
|
|
v-clean-tooltip="{
|
|
content: actionTooltip,
|
|
placement: 'right'
|
|
}"
|
|
:disabled="!act.enabled"
|
|
@click="applyTableAction(act, null, $event)"
|
|
@mouseover="setBulkActionOfInterest(act)"
|
|
@mouseleave="setBulkActionOfInterest(null, 'mouseleave')"
|
|
>
|
|
<template #before>
|
|
<i
|
|
v-if="act.icon"
|
|
:class="act.icon"
|
|
/>
|
|
</template>
|
|
<span v-clean-html="act.label" />
|
|
</rc-dropdown-item>
|
|
</template>
|
|
</rc-dropdown>
|
|
</template>
|