Feat: Add model import button to Vue model list popover. (#7085)

## Summary

Adds a button to trigger the model upload on the Asset dropdown.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7085-Feat-Add-model-import-button-to-Vue-model-list-popover-2bd6d73d365081958c8ef23de55a341e)
by [Unito](https://www.unito.io)
This commit is contained in:
Alexander Brown
2025-12-01 19:19:23 -08:00
committed by GitHub
parent 1b30880e6c
commit a5f1eb0b92
3 changed files with 53 additions and 28 deletions

View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import IconTextButton from '@/components/button/IconTextButton.vue'
import { useModelUpload } from '@/platform/assets/composables/useModelUpload'
import { cn } from '@/utils/tailwindUtil'
import type { FilterOption, OptionId } from './types'
@@ -8,10 +10,12 @@ defineProps<{
}>()
const filterSelected = defineModel<OptionId>('filterSelected')
const { isUploadButtonEnabled, showUploadDialog } = useModelUpload()
</script>
<template>
<div class="text-secondary mb-4 flex gap-1 px-4">
<div class="text-secondary mb-4 flex gap-1 px-4 justify-between">
<div
v-for="option in filterOptions"
:key="option.id"
@@ -30,5 +34,15 @@ const filterSelected = defineModel<OptionId>('filterSelected')
>
{{ option.name }}
</div>
<IconTextButton
v-if="isUploadButtonEnabled"
:label="$t('g.import')"
type="secondary"
@click="showUploadDialog"
>
<template #icon>
<i class="icon-[lucide--folder-input]" />
</template>
</IconTextButton>
</div>
</template>