@ditojs/admin 1.30.0 → 2.0.1

package/src/types/TypeColor.vue

@@ -1,12 +1,10 @@
 <template lang="pug">
-  trigger.dito-color(
-    trigger="click"
-    :show.sync="showPopup"
-  )
-    .dito-input(
-      slot="trigger"
-      :class="{ 'dito-focus': showPopup }"
-    )
+trigger.dito-color(
+  trigger="click"
+  v-model:show="showPopup"
+)
+  template(#trigger)
+    .dito-input(:class="{ 'dito-focus': showPopup }")
       input(
         ref="element"
         :id="dataPath"
@@ -14,7 +12,6 @@
         size="8"
         v-model="hexValue"
         v-bind="attributes"
-        v-on="listeners"
       )
       .dito-color-preview.dito-inherit-focus(
         v-if="value"
@@ -25,8 +22,8 @@
         @click.stop="clear"
         :disabled="disabled"
       )
+  template(#popup)
     sketch-picker.dito-color-picker(
-      slot="popup"
       v-model="colorValue"
       :disable-alpha="!alpha"
       :disable-fields="!inputs"
@@ -71,7 +68,7 @@
 
 <script>
 import tinycolor from 'tinycolor2'
-import { Sketch as SketchPicker } from 'vue-color'
+import { Sketch as SketchPicker } from '@lk77/vue3-color'
 import TypeComponent from '../TypeComponent.js'
 import { Trigger } from '@ditojs/ui/src'
 import { getSchemaAccessor } from '../utils/accessor.js'
@@ -96,7 +93,7 @@ export default TypeComponent.register('color', {
       set(value) {
         const format = this.colorFormat
         const key = {
-          // NOTE: vue-color calls it 'hex', while tinycolor calls it 'hex6'
+          // NOTE: vue3-color calls it 'hex', while tinycolor calls it 'hex6'
           hex: value?.a < 1 ? 'hex8' : 'hex',
           rgb: 'rgba'
         }[format] || format

package/src/types/TypeComponent.vue

@@ -1,26 +1,31 @@
 <template lang="pug">
-  component(
-    :is="component"
-    v-bind="$props"
-  )
+component(
+  :is="schema.component"
+  v-bind="$props"
+)
 </template>
 
 <script>
 // This is the general purpose 'component' type, which can resolve to any custom
-// component through `schema.component`, see `resolveTypeComponent()`. This can
-// be used to nest arbitrary vue components in schema:
+// component through `schema.component`, see `resolveSchemaComponent()`. This
+// can be used to nest arbitrary vue components in schema:
 // {
 //   type: 'component',
 //   component: import('./component')
 // }
 
 import TypeComponent from '../TypeComponent.js'
+import { resolveSchemaComponent } from '../utils/schema.js'
 
 // @vue/component
 export default TypeComponent.register('component', {
   // Override the standard `defaultValue: null` to not set any data for custom
   // components, unless they provide a default value.
   defaultValue: () => undefined, // Callback to override `defaultValue: null`
-  ignoreMissingValue: schema => !('default' in schema)
+  ignoreMissingValue: schema => !('default' in schema),
+
+  async processSchema(api, schema) {
+    await resolveSchemaComponent(schema)
+  }
 })
 </script>

package/src/types/TypeComputed.vue

@@ -1,15 +1,15 @@
 <template lang="pug">
-  //- TODO: Find a better way to trigger evaluation of `value` that dose not
-  //  involve actually rendering it when the component is not visible.
-  input.dito-text.dito-input(
-    ref="element"
-    :id="dataPath"
-    :name="name"
-    type="text"
-    :value="value"
-    :disabled="disabled"
-    :readonly="true"
-  )
+//- TODO: Find a better way to trigger evaluation of `value` that dose not
+//- involve actually rendering it when the component is not visible.
+input.dito-text.dito-input(
+  ref="element"
+  :id="dataPath"
+  :name="name"
+  type="text"
+  :value="value"
+  :disabled="disabled"
+  :readonly="true"
+)
 </template>
 
 <script>
@@ -38,7 +38,8 @@ export default TypeComponent.register([
             // resolved data twice.
             resolveCounter: 2
           })
-          this.$set(this.data, this.name, value)
+          // eslint-disable-next-line vue/no-mutating-props
+          this.data[this.name] = value
         }
         return TypeMixin.computed.value.get.call(this)
       },

package/src/types/TypeDate.vue

@@ -1,15 +1,14 @@
 <template lang="pug">
-  .dito-date
-    component(
-      :is="getComponent(type)"
-      ref="element"
-      :id="dataPath"
-      :locale="locale"
-      :dateFormat="{ ...api.formats.date, ...dateFormat }"
-      v-model="dateValue"
-      v-bind="attributes"
-      v-on="listeners"
-    )
+.dito-date
+  component(
+    :is="getComponent(type)"
+    ref="element"
+    :id="dataPath"
+    :locale="locale"
+    :dateFormat="{ ...api.formats.date, ...dateFormat }"
+    v-model="dateValue"
+    v-bind="attributes"
+  )
 </template>
 
 <script>

package/src/types/TypeLabel.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  dito-label.dito-label-component(:label="value" :dataPath="dataPath")
+dito-label.dito-label-component(:label="value" :dataPath="dataPath")
 </template>
 
 <style lang="sass">

package/src/types/TypeList.vue

@@ -1,71 +1,75 @@
 <template lang="pug">
-  .dito-list(
-    v-if="isReady"
-    :id="dataPath"
-    :class="schema.class"
-    :style="schema.style"
+.dito-list(
+  v-if="isReady"
+  :id="dataPath"
+  :class="schema.class"
+  :style="schema.style"
+)
+  .dito-navigation(
+    v-if="scopes || hasPagination"
   )
-    .dito-navigation(
-      v-if="scopes || hasPagination"
+    dito-scopes(
+      v-if="scopes"
+      :query="query"
+      :scopes="scopes"
     )
-      dito-scopes(
-        v-if="scopes"
-        :query="query"
-        :scopes="scopes"
-      )
-      // When there's only pagination without scopes, we need a good ol' spacer
-      // div, for the layout not to break...
-      .dito-spacer(
-        v-else-if="hasPagination"
-      )
-      dito-pagination(
-        v-if="hasPagination"
-        :query="query"
-        :limit="paginate"
-        :total="total || 0"
-      )
-    table.dito-table(
-      :class=`{
-        'dito-table-separators': isInlined,
-        'dito-table-larger-padding': hasEditButtons && !isInlined,
-        'dito-table-alternate-colors': !isInlined,
-        'dito-table-even-count': hasEvenCount
-      }`
+    //- When there's only pagination without scopes, we need a good ol' spacer
+    //- div, for the layout not to break...
+    .dito-spacer(
+      v-else-if="hasPagination"
     )
-      dito-table-head(
-        v-if="columns"
-        :query="query"
-        :columns="columns"
-        :hasEditButtons="hasEditButtons"
-      )
-      vue-draggable(
-        tag="tbody"
-        v-bind="getDragOptions(draggable)"
-        :list="updateOrder(sourceSchema, listData, paginationRange)"
-        @start="onStartDrag"
-        @end="onEndDrag"
-      )
+    dito-pagination(
+      v-if="hasPagination"
+      :query="query"
+      :limit="paginate"
+      :total="total || 0"
+    )
+  table.dito-table(
+    :class=`{
+      'dito-table-separators': isInlined,
+      'dito-table-larger-padding': hasEditButtons && !isInlined,
+      'dito-table-alternate-colors': !isInlined,
+      'dito-table-even-count': hasEvenCount
+    }`
+  )
+    dito-table-head(
+      v-if="columns"
+      :query="query"
+      :columns="columns"
+      :hasEditButtons="hasEditButtons"
+    )
+    vue-sortable(
+      tag="tbody"
+      :list="updateOrder(sourceSchema, listData, paginationRange)"
+      :options="getDragOptions(draggable)"
+      :itemKey="item => getItemUid(schema, item)"
+      @start="onStartDrag"
+      @end="onEndDrag"
+    )
+      template(#item="{ element: item, index }")
         tr(
-          v-for="item, index in listData"
-          :key="getItemUid(schema, item)"
           :id="getDataPath(index)"
         )
           template(v-if="columns")
-            dito-table-cell(
+            template(
               v-for="column in columns"
-              v-if="shouldRender(column)"
-              :key="column.name"
-              :class="getCellClass(column)"
-              :cell="column"
-              :schema="schema"
-              :dataPath="getDataPath(index)"
-              :data="item"
-              :meta="nestedMeta"
-              :store="store"
-              :nested="false"
-              :disabled="disabled || isLoading"
             )
-          template(v-else)
+              dito-table-cell(
+                v-if="shouldRender(column)"
+                :key="column.name"
+                :class="getCellClass(column)"
+                :cell="column"
+                :schema="schema"
+                :dataPath="getDataPath(index)"
+                :data="item"
+                :meta="nestedMeta"
+                :store="store"
+                :nested="false"
+                :disabled="disabled || isLoading"
+              )
+          template(
+            v-else
+          )
             td
               dito-schema-inlined(
                 v-if="isInlined"
@@ -85,8 +89,8 @@
                 @delete="deleteItem(item, index)"
               )
               component(
-                v-else-if="component"
-                :is="component"
+                v-else-if="schema.component"
+                :is="schema.component"
                 :dataPath="getDataPath(index)"
                 :data="item"
                 :nested="false"
@@ -114,36 +118,36 @@
               :store="getChildStore(index)"
               @delete="deleteItem(item, index)"
             )
-      // Render create buttons inside table when not in a single component view:
-      tfoot(
-        v-if="hasListButtons && !single"
-      )
-        tr
-          td.dito-cell-edit-buttons(
-            :colspan="numColumns"
-          )
-            dito-edit-buttons(
-              :creatable="creatable"
-              :createPath="path"
-              :buttons="buttonSchemas"
-              :schema="schema"
-              :dataPath="dataPath"
-              :data="listData"
-              :meta="meta"
-              :store="store"
-            )
-    // Render create buttons outside table when in a single component view:
-    dito-edit-buttons.dito-buttons-main.dito-buttons-large(
-      v-if="hasListButtons && single"
-      :creatable="creatable"
-      :createPath="path"
-      :buttons="buttonSchemas"
-      :schema="schema"
-      :dataPath="dataPath"
-      :data="listData"
-      :meta="meta"
-      :store="store"
+    //- Render create buttons inside table when not in a single component view:
+    tfoot(
+      v-if="hasListButtons && !single"
     )
+      tr
+        td.dito-cell-edit-buttons(
+          :colspan="numColumns"
+        )
+          dito-edit-buttons(
+            :creatable="creatable"
+            :createPath="path"
+            :buttons="buttonSchemas"
+            :schema="schema"
+            :dataPath="dataPath"
+            :data="listData"
+            :meta="meta"
+            :store="store"
+          )
+  //- Render create buttons outside table when in a single component view:
+  dito-edit-buttons.dito-buttons-main.dito-buttons-large(
+    v-if="hasListButtons && single"
+    :creatable="creatable"
+    :createPath="path"
+    :buttons="buttonSchemas"
+    :schema="schema"
+    :dataPath="dataPath"
+    :data="listData"
+    :meta="meta"
+    :store="store"
+  )
 </template>
 
 <style lang="sass">
@@ -175,15 +179,18 @@ import TypeComponent from '../TypeComponent.js'
 import DitoContext from '../DitoContext.js'
 import SourceMixin from '../mixins/SourceMixin.js'
 import OrderedMixin from '../mixins/OrderedMixin.js'
-import VueDraggable from 'vuedraggable'
-import { getNamedSchemas, getViewEditPath } from '../utils/schema.js'
+import { Sortable as VueSortable } from 'sortablejs-vue3'
+import {
+  getNamedSchemas, getViewEditPath,
+  resolveSchemaComponent, resolveSchemaComponents
+} from '../utils/schema.js'
 import { getFiltersPanel } from '../utils/filter.js'
 import { appendDataPath } from '../utils/data.js'
 import { pickBy, equals, hyphenate } from '@ditojs/utils'
 
 // @vue/component
 export default TypeComponent.register('list', {
-  components: { VueDraggable },
+  components: { VueSortable },
   mixins: [SourceMixin, OrderedMixin],
 
   getSourceType(type) {
@@ -299,6 +306,22 @@ export default TypeComponent.register('list', {
         return true
       }
     }
+  },
+
+  async processSchema(
+    api, schema, name, routes, level,
+    nested = false, flatten = false,
+    process = null
+  ) {
+    await Promise.all([
+      resolveSchemaComponent(schema),
+      resolveSchemaComponents(schema.columns),
+      SourceMixin.processSchema(
+        api, schema, name, routes, level,
+        nested, flatten,
+        process
+      )
+    ])
   }
 })
 </script>