@ditojs/admin 2.6.9 → 2.6.10

package/src/types/DitoTypeList.vue

@@ -39,7 +39,7 @@
     DitoDraggable(
       tag="tbody"
       :modelValue="updateOrder(sourceSchema, listData, paginationRange)"
-      :options="getSortableOptions(false)"
+      :options="getSortableOptions()"
       :draggable="draggable"
       @update:modelValue="value => (listData = value)"
     )
@@ -78,7 +78,7 @@
               :dataPath="getDataPath(index)"
               :data="item"
               :meta="nestedMeta"
-              :store="getChildStore(getItemUid(schema, item), index)"
+              :store="getItemStore(schema, item, index)"
               :disabled="disabled || isLoading"
               :collapsed="collapsed"
               :collapsible="collapsible"
@@ -115,7 +115,7 @@
             :dataPath="getDataPath(index)"
             :data="item"
             :meta="nestedMeta"
-            :store="getChildStore(getItemUid(schema, item), index)"
+            :store="getItemStore(schema, item, index)"
             @delete="deleteItem(item, index)"
           )
     //- Render create buttons inside table when not in a single component view:
@@ -161,6 +161,7 @@ import {
 import { createFiltersPanel } from '../utils/filter.js'
 import { appendDataPath } from '../utils/data.js'
 import { pickBy, equals, hyphenate } from '@ditojs/utils'
+import { computed } from 'vue'
 
 // @vue/component
 export default DitoTypeComponent.register('list', {
@@ -171,28 +172,22 @@ export default DitoTypeComponent.register('list', {
     return type
   },
 
-  getPanelSchema(api, schema, dataPath, schemaComponent) {
+  getPanelSchema(api, schema, dataPath, component) {
     const { filters } = schema
     // See if this list component wants to display a filter panel, and if so,
     // create the panel schema for it through `getFiltersPanel()`.
     if (filters) {
-      // At the time of the creation of the panel schema, the schemaComponent is
-      // not filled yet, so we can't get the target component (dataPath) right
-      // away. Use a proxy and a getter instead, to get around this:
-      const getListComponent = () =>
-        schemaComponent.getComponentByDataPath(
-          dataPath,
-          component => component.type === 'list'
-        )
+      return createFiltersPanel(
+        api,
+        filters,
+        dataPath,
+        // Pass a computed value to get / set the query, see getFiltersPanel()
+        computed({
+          get() {
+            return component.query
+          },
 
-      return createFiltersPanel(api, filters, dataPath, {
-        // Create a simple proxy to get / set the query, see getFiltersPanel()
-        get query() {
-          return getListComponent()?.query
-        },
-        set query(query) {
-          const component = getListComponent()
-          if (component) {
+          set(query) {
             // Filter out undefined values for comparing with equals()
             const filter = obj => pickBy(obj, value => value !== undefined)
             if (!equals(filter(query), filter(component.query))) {
@@ -200,8 +195,8 @@ export default DitoTypeComponent.register('list', {
               component.loadData(false)
             }
           }
-        }
-      })
+        })
+      )
     }
   },
 

package/src/types/DitoTypeUpload.vue

@@ -35,7 +35,7 @@
     DitoDraggable(
       v-model="files"
       tag="tbody"
-      :options="getSortableOptions(false)"
+      :options="getSortableOptions()"
       :draggable="draggable"
     )
       template(
@@ -43,7 +43,7 @@
       )
         tr(
           v-for="(file, index) in files"
-          :key="file.key"
+          :key="file.name"
         )
           td(
             v-if="render"

package/src/utils/filter.js

@@ -63,7 +63,7 @@ export const filterComponents = {
   }
 }
 
-export function createFiltersPanel(api, filters, dataPath, proxy) {
+export function createFiltersPanel(api, filters, dataPath, query) {
   const { sticky, ...filterSchemas } = filters
   const panel = {
     type: 'panel',
@@ -80,7 +80,7 @@ export function createFiltersPanel(api, filters, dataPath, proxy) {
     data() {
       return parseFiltersData(
         panel,
-        proxy.query
+        query.value
       )
     },
 
@@ -106,8 +106,8 @@ export function createFiltersPanel(api, filters, dataPath, proxy) {
 
     methods: {
       applyFilters() {
-        proxy.query = {
-          ...proxy.query,
+        query.value = {
+          ...query.value,
           filter: this.filters,
           // Clear pagination when applying or clearing filters:
           page: undefined

package/src/utils/schema.js

@@ -1030,14 +1030,14 @@ export function getAllPanelEntries(
   api,
   schema,
   dataPath = null,
-  schemaComponent = null,
+  component = null,
   tabComponent = null
 ) {
   const panelSchema = getTypeOptions(schema)?.getPanelSchema?.(
     api,
     schema,
     dataPath,
-    schemaComponent
+    component
   )
   const panelEntries = panelSchema
     ? [getPanelEntry(panelSchema, dataPath, tabComponent)]