halo/ui/src/components/dropdown-selector/EditorProviderSelector.vue

71 lines
2.0 KiB
Vue

<script lang="ts" setup>
import { useEditorExtensionPoints } from "@/composables/use-editor-extension-points";
import {
IconExchange,
VAvatar,
VDropdown,
VDropdownItem,
} from "@halo-dev/components";
import type { EditorProvider } from "@halo-dev/console-shared";
withDefaults(
defineProps<{
provider?: EditorProvider;
allowForcedSelect: boolean;
}>(),
{
provider: undefined,
allowForcedSelect: false,
}
);
const emit = defineEmits<{
(event: "select", provider: EditorProvider): void;
}>();
const { editorProviders, fetchEditorProviders } = useEditorExtensionPoints();
fetchEditorProviders();
</script>
<template>
<VDropdown>
<div
class="group flex w-full cursor-pointer items-center gap-2 rounded p-1 hover:bg-gray-100"
>
<VAvatar v-if="provider?.logo" :src="provider.logo" size="xs"></VAvatar>
<div class="select-none text-sm text-gray-600 group-hover:text-gray-900">
{{ provider?.displayName }}
</div>
<IconExchange class="h-4 w-4 text-gray-600 group-hover:text-gray-900" />
</div>
<template #popper>
<VDropdownItem
v-for="(editorProvider, index) in editorProviders"
:key="index"
v-tooltip="{
disabled:
allowForcedSelect ||
provider?.rawType.toLowerCase() ===
editorProvider.rawType.toLowerCase(),
content: $t(
'core.components.editor_provider_selector.tooltips.disallow'
),
}"
:selected="provider?.name === editorProvider.name"
:disabled="
!allowForcedSelect &&
provider?.rawType.toLowerCase() !==
editorProvider.rawType.toLowerCase()
"
@click="emit('select', editorProvider)"
>
<template v-if="editorProvider.logo" #prefix-icon>
<VAvatar :src="editorProvider.logo" size="xs"></VAvatar>
</template>
{{ editorProvider.displayName }}
</VDropdownItem>
</template>
</VDropdown>
</template>