Models empty state

This commit is contained in:
andrewwallacespeckle
2025-08-01 12:50:12 +01:00
parent fcb1d4c136
commit b65bb9023b
4 changed files with 143 additions and 9 deletions
@@ -0,0 +1,128 @@
<template>
<svg
width="194"
height="141"
viewBox="0 0 194 141"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.99907 57.3669L124.822 17.7594C127.703 16.7988 131.551 17.9639 133.416 20.3616L189.592 92.5873C191.457 94.985 190.632 97.7074 187.751 98.668L68.928 138.276C66.0463 139.236 62.1984 138.071 60.3336 135.673L4.15799 63.4476C2.2931 61.0499 3.11738 58.3275 5.99907 57.3669Z"
fill="currentColor"
class="fill-foundation-2"
/>
<path
d="M5.99907 57.3669L124.822 17.7594C127.703 16.7988 131.551 17.9639 133.416 20.3616L189.592 92.5873C191.457 94.985 190.632 97.7074 187.751 98.668L68.928 138.276C66.0463 139.236 62.1984 138.071 60.3336 135.673L4.15799 63.4476C2.2931 61.0499 3.11738 58.3275 5.99907 57.3669Z"
stroke="currentColor"
class="stroke-outline-5"
/>
<g clip-path="url(#clip0_1292_252810)">
<g clip-path="url(#clip1_1292_252810)">
<path
d="M70.2824 95.2936L109.853 89.7543L91.3456 65.9597L57.4463 78.7901L70.2824 95.2936Z"
fill="currentColor"
class="fill-foundation stroke-outline-5"
stroke="currentColor"
stroke-linejoin="round"
/>
<path
d="M152.677 64.5977L109.852 89.7544L91.3454 65.9598L142.236 51.1736L152.677 64.5977Z"
fill="currentColor"
class="fill-foundation-2 stroke-outline-5"
stroke="currentColor"
stroke-linejoin="round"
/>
<path
d="M73.3716 50.6423L102.837 32.453L118.925 53.1365L85.5753 66.3329L73.3716 50.6423Z"
fill="currentColor"
class="fill-foundation stroke-outline-5"
stroke="currentColor"
stroke-linejoin="round"
/>
<path
d="M147.845 62.3606L109.582 81.6143L100.72 70.2207L142.424 55.3907L147.845 62.3606Z"
fill="currentColor"
class="fill-foundation stroke-outline-5"
stroke="currentColor"
stroke-linejoin="round"
/>
<path
d="M62.457 76.8958L76.129 94.4741"
stroke="currentColor"
class="stroke-outline-5"
stroke-miterlimit="10"
/>
<path
d="M68.1668 74.735L82.7949 93.5427"
stroke="currentColor"
class="stroke-outline-5"
stroke-miterlimit="10"
/>
<path
d="M74.7316 72.2502L90.4578 92.4696"
stroke="currentColor"
class="stroke-outline-5"
stroke-miterlimit="10"
/>
<path
d="M82.365 69.3611L99.3682 91.2224"
stroke="currentColor"
class="stroke-outline-5"
stroke-miterlimit="10"
/>
<path
d="M93.3629 68.5537L144.204 52.3733L140.504 47.6164L86.7189 60.0115L93.3629 68.5537Z"
fill="currentColor"
class="fill-foundation-2 stroke-outline-5"
stroke="currentColor"
stroke-linejoin="round"
/>
<path
d="M93.3629 68.5537L57.7381 80.9755L53.1962 75.1359L86.7189 60.0115L93.3629 68.5537Z"
fill="currentColor"
class="fill-foundation stroke-outline-5"
stroke="currentColor"
stroke-linejoin="round"
/>
<path
d="M137.004 48.4233L118.564 52.6725L102.838 32.453L124.515 32.3659L137.004 48.4233Z"
fill="currentColor"
class="fill-foundation-2 stroke-outline-5"
stroke="currentColor"
stroke-linejoin="round"
/>
</g>
</g>
<rect
x="0.585984"
y="0.177422"
width="136.5"
height="102.75"
rx="5.625"
transform="matrix(0.948683 -0.316228 0.613941 0.789352 -0.0788556 44.0924)"
stroke="currentColor"
class="stroke-outline-5"
stroke-width="0.75"
stroke-dasharray="3 4"
/>
<defs>
<clipPath id="clip0_1292_252810">
<rect
width="137.25"
height="103.5"
rx="6"
transform="matrix(0.948683 -0.316228 0.613941 0.789352 0 43.8697)"
fill="white"
/>
</clipPath>
<clipPath id="clip1_1292_252810">
<rect
width="91"
height="60"
fill="white"
transform="matrix(0.948683 -0.316228 0.613941 0.789352 37.0532 54.3806)"
/>
</clipPath>
</defs>
</svg>
</template>
@@ -117,9 +117,7 @@
]"
:style="`width: ${widthClass};`"
>
<ViewerModelsPanel
v-if="resourceItems.length !== 0 && activePanel === 'models'"
/>
<ViewerModelsPanel v-if="activePanel === 'models'" />
<KeepAlive v-show="resourceItems.length !== 0 && activePanel === 'filters'">
<ViewerFiltersPanel />
</KeepAlive>
@@ -1,6 +1,6 @@
<template>
<div class="flex">
<div v-tippy="'Versions'" class="flex">
<div v-if="!hideVersions" v-tippy="'Versions'" class="flex">
<button
class="group-hover:opacity-100 hover:bg-highlight-3 rounded-md h-6 w-6 flex items-center justify-center shrink-0"
@click="$emit('showVersions')"
@@ -9,7 +9,7 @@
<span class="sr-only">Versions</span>
</button>
</div>
<div v-tippy="'Add model'" class="flex">
<div v-if="!hideAddModel" v-tippy="'Add model'" class="flex">
<button
class="group-hover:opacity-100 hover:bg-highlight-3 rounded-md h-6 w-6 flex items-center justify-center shrink-0"
@click="$emit('addModel')"
@@ -22,6 +22,11 @@
</template>
<script setup lang="ts">
defineProps<{
hideVersions?: boolean
hideAddModel?: boolean
}>()
defineEmits<{
showVersions: []
addModel: []
@@ -14,6 +14,7 @@
<template #actions>
<ViewerModelsActions
v-if="!hasObjects"
:hide-versions="resourceItems.length === 0"
@show-versions="showVersions = true"
@add-model="showAddModel = true"
/>
@@ -52,10 +53,12 @@
</template>
<!-- Empty State -->
<div v-else class="flex flex-col items-center justify-center gap-4 h-full">
<IconViewerModels v-if="!showVersions" class="h-10 w-10 text-foreground-2" />
<IconVersions v-else class="h-10 w-10 text-foreground-2" />
<p class="text-body-xs text-foreground-2">No models loaded, yet.</p>
<div
v-else
class="flex flex-col items-center justify-center gap-4 h-full -mt-8"
>
<IllustrationEmptystateModels />
<span class="text-body-xs text-foreground-2">No models loaded, yet.</span>
<FormButton @click="showAddModel = true">Add model</FormButton>
</div>
</div>