mirror of
https://github.com/directus/directus.git
synced 2026-04-25 03:00:53 -04:00
Remove extra div insdie ul element (#23116)
This commit is contained in:
SP12893678
5
.changeset/rich-seals-type.md
Normal file
5
.changeset/rich-seals-type.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@directus/app': patch
|
||||
---
|
||||
|
||||
Fixed list structure in draggable lists
|
||||
@@ -95,18 +95,23 @@ const removeField = (field: string) => {
|
||||
<v-list v-if="fields.length === 0">
|
||||
<v-notice class="no-fields">{{ t('interfaces.system-fields.no_fields') }}</v-notice>
|
||||
</v-list>
|
||||
<v-list v-else>
|
||||
<draggable v-model="fields" item-key="key" handle=".drag-handle" v-bind="{ 'force-fallback': true }">
|
||||
<template #item="{ element: field }">
|
||||
<v-list-item block>
|
||||
<v-icon name="drag_handle" class="drag-handle" left />
|
||||
<div class="name">{{ field.displayName }}</div>
|
||||
<div class="spacer" />
|
||||
<v-icon name="close" clickable @click="removeField(field.key)" />
|
||||
</v-list-item>
|
||||
</template>
|
||||
</draggable>
|
||||
</v-list>
|
||||
<draggable
|
||||
v-else
|
||||
v-model="fields"
|
||||
tag="v-list"
|
||||
item-key="key"
|
||||
handle=".drag-handle"
|
||||
v-bind="{ 'force-fallback': true }"
|
||||
>
|
||||
<template #item="{ element: field }">
|
||||
<v-list-item block>
|
||||
<v-icon name="drag_handle" class="drag-handle" left />
|
||||
<div class="name">{{ field.displayName }}</div>
|
||||
<div class="spacer" />
|
||||
<v-icon name="close" clickable @click="removeField(field.key)" />
|
||||
</v-list-item>
|
||||
</template>
|
||||
</draggable>
|
||||
<v-menu placement="bottom-start" show-arrow>
|
||||
<template #activator="{ toggle }">
|
||||
<button class="toggle" @click="toggle">
|
||||
|
||||
@@ -210,41 +210,41 @@ function remove(id: string) {
|
||||
|
||||
<template>
|
||||
<div class="system-modules">
|
||||
<v-list class="list">
|
||||
<draggable
|
||||
v-model="valuesWithData"
|
||||
:set-data="hideDragImage"
|
||||
item-key="id"
|
||||
handle=".drag-handle"
|
||||
:animation="150"
|
||||
v-bind="{ 'force-fallback': true }"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<v-list-item
|
||||
block
|
||||
:class="{ enabled: element.enabled }"
|
||||
:clickable="element.type === 'link'"
|
||||
@click="element.type === 'link' ? edit(element.id) : undefined"
|
||||
>
|
||||
<v-icon class="drag-handle" name="drag_handle" />
|
||||
<v-icon class="icon" :name="element.icon" />
|
||||
<div class="info">
|
||||
<div class="name">{{ element.name }}</div>
|
||||
<div class="to">{{ element.to }}</div>
|
||||
</div>
|
||||
<div class="spacer" />
|
||||
<v-icon v-if="element.locked === true" name="lock" />
|
||||
<v-icon v-else-if="element.type === 'link'" name="clear" @click.stop="remove(element.id)" />
|
||||
<v-icon
|
||||
v-else
|
||||
:name="element.enabled ? 'check_box' : 'check_box_outline_blank'"
|
||||
clickable
|
||||
@click.stop="updateItem(element, { enabled: !element.enabled })"
|
||||
/>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</draggable>
|
||||
</v-list>
|
||||
<draggable
|
||||
v-model="valuesWithData"
|
||||
tag="v-list"
|
||||
class="list"
|
||||
:set-data="hideDragImage"
|
||||
item-key="id"
|
||||
handle=".drag-handle"
|
||||
:animation="150"
|
||||
v-bind="{ 'force-fallback': true }"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<v-list-item
|
||||
block
|
||||
:class="{ enabled: element.enabled }"
|
||||
:clickable="element.type === 'link'"
|
||||
@click="element.type === 'link' ? edit(element.id) : undefined"
|
||||
>
|
||||
<v-icon class="drag-handle" name="drag_handle" />
|
||||
<v-icon class="icon" :name="element.icon" />
|
||||
<div class="info">
|
||||
<div class="name">{{ element.name }}</div>
|
||||
<div class="to">{{ element.to }}</div>
|
||||
</div>
|
||||
<div class="spacer" />
|
||||
<v-icon v-if="element.locked === true" name="lock" />
|
||||
<v-icon v-else-if="element.type === 'link'" name="clear" @click.stop="remove(element.id)" />
|
||||
<v-icon
|
||||
v-else
|
||||
:name="element.enabled ? 'check_box' : 'check_box_outline_blank'"
|
||||
clickable
|
||||
@click.stop="updateItem(element, { enabled: !element.enabled })"
|
||||
/>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<v-button @click="edit('+')">{{ t('add_link') }}</v-button>
|
||||
|
||||
|
||||
@@ -298,11 +298,14 @@ const allowDrag = computed(
|
||||
/>
|
||||
</template>
|
||||
|
||||
<v-list v-else class="files">
|
||||
<template v-else>
|
||||
<v-notice v-if="displayItems.length === 0">{{ t('no_items') }}</v-notice>
|
||||
|
||||
<draggable
|
||||
v-else
|
||||
:model-value="displayItems"
|
||||
tag="v-list"
|
||||
class="files"
|
||||
item-key="id"
|
||||
handle=".drag-handle"
|
||||
:disabled="!allowDrag"
|
||||
@@ -354,7 +357,7 @@ const allowDrag = computed(
|
||||
</v-list-item>
|
||||
</template>
|
||||
</draggable>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<div class="actions">
|
||||
<v-button v-if="enableCreate && createAllowed" :disabled="disabled" @click="showUpload = true">
|
||||
|
||||
@@ -351,11 +351,12 @@ const allowDrag = computed(() => canDrag.value && totalItemCount.value <= limitW
|
||||
/>
|
||||
</template>
|
||||
|
||||
<v-list v-else>
|
||||
<template v-else>
|
||||
<v-notice v-if="displayItems.length === 0">{{ t('no_items') }}</v-notice>
|
||||
|
||||
<draggable
|
||||
:model-value="displayItems"
|
||||
tag="v-list"
|
||||
item-key="$index"
|
||||
:set-data="hideDragImage"
|
||||
:disabled="!allowDrag"
|
||||
@@ -400,7 +401,7 @@ const allowDrag = computed(() => canDrag.value && totalItemCount.value <= limitW
|
||||
</v-list-item>
|
||||
</template>
|
||||
</draggable>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<div class="actions">
|
||||
<v-menu v-if="enableCreate && createCollections.length > 0" :disabled="disabled" show-arrow>
|
||||
|
||||
@@ -522,13 +522,14 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
|
||||
/>
|
||||
</template>
|
||||
|
||||
<v-list v-else>
|
||||
<template v-else>
|
||||
<v-notice v-if="displayItems.length === 0">
|
||||
{{ t('no_items') }}
|
||||
</v-notice>
|
||||
|
||||
<draggable
|
||||
:model-value="displayItems"
|
||||
tag="v-list"
|
||||
item-key="id"
|
||||
handle=".drag-handle"
|
||||
:disabled="!allowDrag"
|
||||
@@ -572,7 +573,7 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
|
||||
</v-list-item>
|
||||
</template>
|
||||
</draggable>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<div class="actions" :class="layout">
|
||||
<template v-if="layout === LAYOUTS.TABLE">
|
||||
|
||||
@@ -471,13 +471,14 @@ function getLinkForItem(item: DisplayItem) {
|
||||
/>
|
||||
</template>
|
||||
|
||||
<v-list v-else>
|
||||
<template v-else>
|
||||
<v-notice v-if="displayItems.length === 0">
|
||||
{{ t('no_items') }}
|
||||
</v-notice>
|
||||
|
||||
<draggable
|
||||
:model-value="displayItems"
|
||||
tag="v-list"
|
||||
item-key="id"
|
||||
handle=".drag-handle"
|
||||
:disabled="!allowDrag"
|
||||
@@ -521,7 +522,7 @@ function getLinkForItem(item: DisplayItem) {
|
||||
</v-list-item>
|
||||
</template>
|
||||
</draggable>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<div class="actions" :class="layout">
|
||||
<template v-if="layout === LAYOUTS.TABLE">
|
||||
|
||||
@@ -215,30 +215,30 @@ function closeDrawer() {
|
||||
<p>{{ t('interfaces.list.incompatible_data') }}</p>
|
||||
</v-notice>
|
||||
|
||||
<v-list v-if="Array.isArray(internalValue) && internalValue.length > 0">
|
||||
<draggable
|
||||
:disabled="disabled"
|
||||
:model-value="internalValue"
|
||||
item-key="id"
|
||||
handle=".drag-handle"
|
||||
v-bind="{ 'force-fallback': true }"
|
||||
@update:model-value="$emit('input', $event)"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<v-list-item :dense="internalValue.length > 4" block @click="openItem(index)">
|
||||
<v-icon v-if="!disabled && !sort" name="drag_handle" class="drag-handle" left @click.stop="() => {}" />
|
||||
<render-template
|
||||
:fields="fields"
|
||||
:item="{ ...defaults, ...element }"
|
||||
:direction="direction"
|
||||
:template="templateWithDefaults"
|
||||
/>
|
||||
<div class="spacer" />
|
||||
<v-icon v-if="!disabled" name="close" @click.stop="removeItem(element)" />
|
||||
</v-list-item>
|
||||
</template>
|
||||
</draggable>
|
||||
</v-list>
|
||||
<draggable
|
||||
v-if="Array.isArray(internalValue) && internalValue.length > 0"
|
||||
tag="v-list"
|
||||
:disabled="disabled"
|
||||
:model-value="internalValue"
|
||||
item-key="id"
|
||||
handle=".drag-handle"
|
||||
v-bind="{ 'force-fallback': true }"
|
||||
@update:model-value="$emit('input', $event)"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<v-list-item :dense="internalValue.length > 4" block @click="openItem(index)">
|
||||
<v-icon v-if="!disabled && !sort" name="drag_handle" class="drag-handle" left @click.stop="() => {}" />
|
||||
<render-template
|
||||
:fields="fields"
|
||||
:item="{ ...defaults, ...element }"
|
||||
:direction="direction"
|
||||
:template="templateWithDefaults"
|
||||
/>
|
||||
<div class="spacer" />
|
||||
<v-icon v-if="!disabled" name="close" @click.stop="removeItem(element)" />
|
||||
</v-list-item>
|
||||
</template>
|
||||
</draggable>
|
||||
<v-button v-if="showAddNew" class="add-new" @click="addNew">
|
||||
{{ addLabel }}
|
||||
</v-button>
|
||||
|
||||
@@ -204,31 +204,29 @@ async function onSort(updates: Collection[], removeGroup = false) {
|
||||
<button @click="collapseAll">{{ t('none') }}</button>
|
||||
</div>
|
||||
</transition-expand>
|
||||
|
||||
<v-list class="draggable-list">
|
||||
<draggable
|
||||
:model-value="rootCollections"
|
||||
:group="{ name: 'collections' }"
|
||||
:swap-threshold="0.3"
|
||||
class="root-drag-container"
|
||||
item-key="collection"
|
||||
handle=".drag-handle"
|
||||
v-bind="{ 'force-fallback': true }"
|
||||
@update:model-value="onSort($event, true)"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<collection-item
|
||||
:collection="element"
|
||||
:collections="collections"
|
||||
:is-collapsed="element.isCollapsed"
|
||||
:visibility-tree="findVisibilityChild(element.collection)!"
|
||||
@edit-collection="editCollection = $event"
|
||||
@set-nested-sort="onSort"
|
||||
@toggle-collapse="toggleCollapse"
|
||||
/>
|
||||
</template>
|
||||
</draggable>
|
||||
</v-list>
|
||||
<draggable
|
||||
tag="v-list"
|
||||
:model-value="rootCollections"
|
||||
:group="{ name: 'collections' }"
|
||||
:swap-threshold="0.3"
|
||||
class="root-drag-container draggable-list"
|
||||
item-key="collection"
|
||||
handle=".drag-handle"
|
||||
v-bind="{ 'force-fallback': true }"
|
||||
@update:model-value="onSort($event, true)"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<collection-item
|
||||
:collection="element"
|
||||
:collections="collections"
|
||||
:is-collapsed="element.isCollapsed"
|
||||
:visibility-tree="findVisibilityChild(element.collection)!"
|
||||
@edit-collection="editCollection = $event"
|
||||
@set-nested-sort="onSort"
|
||||
@toggle-collapse="toggleCollapse"
|
||||
/>
|
||||
</template>
|
||||
</draggable>
|
||||
</template>
|
||||
|
||||
<v-list class="db-only">
|
||||
|
||||
Reference in New Issue
Block a user