andrewwallacespeckle
9f4b0c99da
* Fixing up "Manage Project" & "New Project" Dialogs * Dialog Updates * Updates from tickets * Remove sidepanel * Remove max-height prop from Dialog component * Updates to Profile Dialog * Props for Buttons in Dialog. Attachment Dialog * Remove margin to show issue with dialogs * Update to stories * Responsive updates * Fix overflow on MoveTo * Use Dialog header prop * Dialog updates * Responsive Changes * Responsive fixes * Small responsive change * Fixes * Type based declaration * Last fixes * Small darkmode fixes * Updated type * Update * Updates from PR comments * Fix storybook issues * Updates from PR * Updates from PR * Changes from Agi * Turntable mode Toggle * Fix dialog shadows on scroll * Fix invite autocomplete * Changes from PR Comments * Small styling updates * Responsive views * Adjust Danger zones * Fix typo * New Webhook Icon. Swap icon prop to slot. * Adjust Icon weights * FE2-TASK-27 * FE2-TASK-26 * FE2-TASK-28
80 lines
2.1 KiB
Vue
80 lines
2.1 KiB
Vue
<template>
|
|
<FormSelectBase
|
|
v-model="selectValue"
|
|
:items="Object.values(items)"
|
|
label="Project visibility"
|
|
:show-label="showLabel"
|
|
:name="name || 'visibility'"
|
|
:allow-unset="false"
|
|
:disabled="disabled"
|
|
by="id"
|
|
>
|
|
<template #something-selected="{ value }">
|
|
<div class="text-sm">
|
|
<div class="font-bold">
|
|
{{ isArray(value) ? value[0].title : value.title }}
|
|
</div>
|
|
<span class="text-foreground-2 text-xs sm:text-sm">
|
|
{{ isArray(value) ? value[0].description : value.description }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
<template #option="{ item }">
|
|
<div class="flex flex-col">
|
|
<div class="label">{{ item.title }}</div>
|
|
<div class="label label--light text-foreground-2 text-xs sm:text-sm">
|
|
{{ item.description }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</FormSelectBase>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ProjectVisibility } from '~~/lib/common/generated/gql/graphql'
|
|
import { isArray } from 'lodash-es'
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', v: ProjectVisibility): void
|
|
}>()
|
|
|
|
const props = defineProps<{
|
|
modelValue: ProjectVisibility
|
|
showLabel?: boolean
|
|
name?: string
|
|
disabled?: boolean
|
|
}>()
|
|
|
|
const items = ref<
|
|
Record<
|
|
ProjectVisibility,
|
|
{ id: ProjectVisibility; description: string; title: string }
|
|
>
|
|
>({
|
|
[ProjectVisibility.Public]: {
|
|
id: ProjectVisibility.Public,
|
|
description: 'Project will be visible to everyone',
|
|
title: 'Discoverable'
|
|
},
|
|
[ProjectVisibility.Unlisted]: {
|
|
id: ProjectVisibility.Unlisted,
|
|
description: 'Anyone with the link will be able to view',
|
|
title: 'Link Shareable'
|
|
},
|
|
[ProjectVisibility.Private]: {
|
|
id: ProjectVisibility.Private,
|
|
description: 'Only team members will have access',
|
|
title: 'Private'
|
|
}
|
|
})
|
|
|
|
const selectedValue = computed({
|
|
get: () => props.modelValue,
|
|
set: (newVal) => emit('update:modelValue', newVal)
|
|
})
|
|
|
|
const selectValue = computed({
|
|
get: () => items.value[selectedValue.value],
|
|
set: (newVal) => (selectedValue.value = newVal.id)
|
|
})
|
|
</script>
|