github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-16 00:15:35 -05:00
Code Issues Packages Projects Releases Wiki Activity

add O2M options and change v-field-select to use tags

Browse Source
This commit is contained in:
Nitwel
2020-09-11 16:42:18 +02:00
committed by rijkvanzanten
parent 8fcd65de43
commit 1e4e865a12
4 changed files with 68 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
app/src/components/v-field-select/v-field-select.vue
View File

@@ -1,31 +1,25 @@
<template>
<div class="v-field-select">
<draggable v-model="activeFields" handle=".drag-handle" :set-data="hideDragImage">
<div
v-for="(field, index) in activeFields"
:key="index"
:value="field.field"
:label="field.name"
class="field"
>
<v-icon @click.stop="removeField(field.field)" name="close" />
<span class="name">{{ field.name }}</span>
<v-icon @click.stop name="drag_handle" class="drag-handle" />
</div>
</draggable>
<v-menu attached v-model="menuActive" v-show="selectableFields.length > 0">
<draggable v-model="activeFields" draggable=".draggable" :set-data="hideDragImage" class="v-field-select">
<v-chip
v-for="(field, index) in activeFields"
:key="index"
class="field draggable"
@click.stop="removeField(field.field)"
>
{{ field.name }}
</v-chip>
<v-menu showArrow v-model="menuActive" v-show="selectableFields.length > 0" slot="footer" class="add">
<template #activator="{ toggle }">
<div class="field" @click="toggle">
<v-chip class="field" @click="toggle">
<v-icon name="add" />
<span class="name">Add field</span>
</div>
</v-chip>
</template>
<v-list dense>
<field-list-item @add="addField" v-for="field in selectableFields" :key="field.field" :field="field" />
</v-list>
</v-menu>
</div>
</draggable>
</template>
<script lang="ts">
@@ -66,7 +60,7 @@ export default defineComponent({
const _value = computed({
get() {
return props.value;
return props.value || [];
},
set(newVal: string[]) {
emit('input', newVal);
@@ -122,17 +116,12 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.field {
.v-field-select {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.name {
flex: 1;
padding: 0 5px;
}
.v-icon {
--v-icon-color: var(--foreground-subdued);
}
.v-chip.field {
margin-right: 5px;
}
</style>