Mike
51 lines
1.5 KiB
Vue
51 lines
1.5 KiB
Vue
<template>
|
|
<FormSelectBase
|
|
v-bind="props"
|
|
v-model="selectedValue"
|
|
label="Select workspace"
|
|
name="workspace"
|
|
:rules="workspaceRules"
|
|
help="You may need to authenticate separately for each workspace you want to access."
|
|
>
|
|
<template #option="{ item }">
|
|
<div class="flex items-center gap-2">
|
|
<WorkspaceAvatar :name="item.name" :logo="item.logo" size="xs" />
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</template>
|
|
<template #nothing-selected>Select a workspace</template>
|
|
<template #something-selected="{ value }">
|
|
<div v-if="!isArrayValue(value)" class="flex items-center gap-2">
|
|
<WorkspaceAvatar :logo="value.logo" :name="value.name" size="xs" />
|
|
<span>{{ value.name }}</span>
|
|
</div>
|
|
</template>
|
|
</FormSelectBase>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useFormSelectChildInternals } from '@speckle/ui-components'
|
|
import type { AuthSsoLogin_WorkspaceFragment } from '~/lib/common/generated/gql/graphql'
|
|
import { isRequired } from '~/lib/common/helpers/validation'
|
|
|
|
const props = defineProps<{
|
|
modelValue?: AuthSsoLogin_WorkspaceFragment
|
|
items: AuthSsoLogin_WorkspaceFragment[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(
|
|
e: 'update:modelValue',
|
|
v: AuthSsoLogin_WorkspaceFragment | AuthSsoLogin_WorkspaceFragment[] | undefined
|
|
): void
|
|
}>()
|
|
|
|
const workspaceRules = computed(() => [isRequired])
|
|
|
|
const { selectedValue, isArrayValue } =
|
|
useFormSelectChildInternals<AuthSsoLogin_WorkspaceFragment>({
|
|
props: toRefs(props),
|
|
emit
|
|
})
|
|
</script>
|