Kristaps Fabians Geikins
d8640bbdc9
* FormSelectBase converted to generic Vue component * WIP tags w/ custom input box * a11y works * proper tags wrapping * errors/validation/icon styling * styling fixes * autocomplete item resolution * feat: configurable tags input * various fixes * moved avatar components to ui-components * replaced avatar in frontend-2 w/ new ui-components exports * new icon loader * added validation support for avatar editor * updated fe-2 to use new avatar editor api * disabled support for avatar editor * more fixes and improvements * attempted preview-service fix * attempted preview-service fix * added story * linting fix * more fixes * server test fix
56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<template>
|
|
<FormSelectBase
|
|
v-model="selectValue"
|
|
:items="Object.values(items)"
|
|
label="Commenting permissions"
|
|
:show-label="showLabel"
|
|
:name="name || 'commentPermissions'"
|
|
:allow-unset="false"
|
|
:disabled="disabled"
|
|
by="id"
|
|
>
|
|
<template #something-selected="{ value }">
|
|
<div class="label label--light">
|
|
{{ isArray(value) ? value[0].title : value.title }}
|
|
</div>
|
|
</template>
|
|
<template #option="{ item, selected }">
|
|
<div class="flex flex-col">
|
|
<div :class="['label label--light', selected ? 'text-primary' : '']">
|
|
{{ item.title }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</FormSelectBase>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { isArray } from 'lodash-es'
|
|
import {
|
|
CommentPermissions,
|
|
commentPermissionsSelectItems
|
|
} from '~~/lib/projects/helpers/components'
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', v: CommentPermissions): void
|
|
}>()
|
|
|
|
const props = defineProps<{
|
|
modelValue: CommentPermissions
|
|
showLabel?: boolean
|
|
name?: string
|
|
disabled?: boolean
|
|
}>()
|
|
|
|
const items = ref(commentPermissionsSelectItems)
|
|
|
|
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>
|