@ditojs/admin 2.1.2 → 2.2.0

package/src/types/DitoTypeList.vue

@@ -38,10 +38,11 @@
       :columns="columns"
       :hasEditButtons="hasEditButtons"
     )
-    UseSortable(
+    DitoDraggable(
       tag="tbody"
       :modelValue="updateOrder(sourceSchema, listData, paginationRange)"
-      :options="getSortableOptions(draggable)"
+      :options="getSortableOptions(false)"
+      :draggable="draggable"
       @update:modelValue="value => (listData = value)"
     )
       tr(
@@ -167,6 +168,7 @@ import { pickBy, equals, hyphenate } from '@ditojs/utils'
 // @vue/component
 export default DitoTypeComponent.register('list', {
   mixins: [SourceMixin, SortableMixin],
+  alignBottom: false,
 
   getSourceType(type) {
     // No need for transformation here. See TypeTreeList for details.

package/src/types/DitoTypeMarkup.vue

@@ -83,6 +83,8 @@ export default DitoTypeComponent.register('markup', {
     Icon
   },
 
+  alignBottom: false,
+
   data() {
     return {
       editor: null,

package/src/types/DitoTypeObject.vue

@@ -63,6 +63,8 @@ import { resolveSchemaComponent } from '../utils/schema.js'
 export default DitoTypeComponent.register('object', {
   mixins: [SourceMixin],
 
+  alignBottom: false,
+
   getSourceType(type) {
     // No need for transformation here. See TypeTreeList for details.
     return type

package/src/types/DitoTypePanel.vue

@@ -6,6 +6,7 @@ export default DitoTypeComponent.register('panel', {
   defaultValue: () => undefined, // Callback to override `defaultValue: null`
   excludeValue: true,
   generateLabel: false,
+  alignBottom: false,
   omitPadding: true,
 
   getPanelSchema(schema) {

package/src/types/DitoTypeSection.vue

@@ -20,7 +20,7 @@ export default DitoTypeComponent.register('section', {
   ignoreMissingValue: schema => !schema.nested && !('default' in schema),
   defaultNested: false,
   generateLabel: false,
-  omitFlexGrow: true,
+  alignBottom: false,
 
   computed: {
     item() {

package/src/types/DitoTypeTextarea.vue

@@ -17,6 +17,7 @@ import { getSchemaAccessor } from '../utils/accessor.js'
 export default DitoTypeComponent.register('textarea', {
   nativeField: true,
   textField: true,
+  alignBottom: false,
 
   computed: {
     lines() {

package/src/types/DitoTypeTreeList.vue

@@ -35,6 +35,8 @@ export default DitoTypeComponent.register(
   {
     mixins: [SourceMixin],
 
+    alignBottom: false,
+
     provide() {
       return { container: this }
     },

package/src/types/DitoTypeUpload.vue

@@ -12,10 +12,11 @@
           span Status
         th
           span
-    UseSortable(
+    DitoDraggable(
       v-model="files"
       tag="tbody"
-      :options="getSortableOptions(draggable)"
+      :options="getSortableOptions(false)"
+      :draggable="draggable"
     )
       tr(
         v-for="(file, index) in files"
@@ -111,6 +112,8 @@ export default DitoTypeComponent.register('upload', {
   mixins: [SortableMixin],
   components: { VueUpload },
 
+  alignBottom: false,
+
   data() {
     return {
       uploads: []

package/src/utils/accessor.js

@@ -53,7 +53,7 @@ export function getStoreAccessor(name, { default: def, get, set } = {}) {
       let value = this.getStore(name)
       if (value === undefined && def !== undefined) {
         // Support `default()` functions:
-        value = isFunction(def) ? def.call(this, this.context) : def
+        value = isFunction(def) ? def.call(this) : def
         // Trigger setter by setting value and accessor to default:
         this[name] = value
         // Now access store again, for reactivity tracking

package/src/utils/options.js

@@ -36,6 +36,7 @@ const ditoOptionKeys = [
   'generateLabel',
   'excludeValue',
   'ignoreMissingValue',
+  'alignBottom',
   'omitPadding',
   'processValue',
   'processSchema',

package/src/utils/schema.js

@@ -98,6 +98,14 @@ export function isView(schema) {
   return isSchema(schema) && schema.type === 'view'
 }
 
+export function isTab(schema) {
+  return isSchema(schema) && schema.type === 'tab'
+}
+
+export function isPanel(schema) {
+  return isSchema(schema) && schema.type === 'panel'
+}
+
 export function getSchemaIdentifier(schema) {
   return schema.name || schema.label || schema.type
 }
@@ -161,16 +169,6 @@ export async function resolveSchemas(
   return schemas
 }
 
-export async function resolveNestedSchemas(schema) {
-  const { tabs, panels } = schema
-  if (tabs) {
-    schema.tabs = await resolveSchemas(tabs)
-  }
-  if (panels) {
-    schema.panels = await resolveSchemas(panels)
-  }
-}
-
 export async function resolveSchemaComponent(schema) {
   // Resolves async schema components and adds DitoMixin and TypeMixin to them.
   let { component } = schema
@@ -193,51 +191,6 @@ export async function resolveSchemaComponents(schemas) {
   await mapConcurrently(Object.values(schemas || {}), resolveSchemaComponent)
 }
 
-export async function processView(component, api, schema, name) {
-  processRouteSchema(api, schema, name)
-  processDefaults(api, schema)
-  await resolveNestedSchemas(schema)
-  const children = []
-  if (isView(schema)) {
-    await processSchemaComponents(api, schema, children, 0)
-  } else {
-    throw new Error(`Invalid view schema: '${getSchemaIdentifier(schema)}'`)
-  }
-  return {
-    path: `/${schema.path}`,
-    children,
-    component,
-    meta: {
-      api,
-      schema
-    }
-  }
-}
-
-export function processDefaults(api, schema) {
-  let defaults = api.defaults[schema.type]
-  if (defaults) {
-    if (isFunction(defaults)) {
-      defaults = defaults(schema)
-    }
-    if (isObject(defaults)) {
-      for (const [key, value] of Object.entries(defaults)) {
-        if (schema[key] === undefined) {
-          schema[key] = value
-        } else {
-          schema[key] = merge(value, schema[key])
-        }
-      }
-    }
-  }
-}
-
-export function processRouteSchema(api, schema, name) {
-  // Used for view and source schemas, see SourceMixin.
-  schema.name = name
-  schema.path ||= api.normalizePath(name)
-}
-
 export async function processSchemaComponents(api, schema, routes, level) {
   const promises = []
   const process = (component, name, relativeLevel) => {
@@ -277,19 +230,59 @@ export async function processSchemaComponent(api, schema, name, routes, level) {
   ])
 }
 
-export async function processForms(api, schema, level) {
-  const processForm = async form => {
-    form = await resolveForm(form)
-    processDefaults(api, schema)
-    return form
+export async function processView(component, api, schema, name) {
+  if (!isView(schema)) {
+    throw new Error(`Invalid view schema: '${getSchemaIdentifier(schema)}'`)
+  }
+  processRouteSchema(api, schema, name)
+  processDefaults(api, schema)
+  await resolveNestedSchemas(api, schema)
+  const children = []
+  await processSchemaComponents(api, schema, children, 0)
+  return {
+    path: `/${schema.path}`,
+    children,
+    component,
+    meta: {
+      api,
+      schema
+    }
+  }
+}
+
+export function processDefaults(api, schema) {
+  let defaults = api.defaults[schema.type]
+  if (defaults) {
+    if (isFunction(defaults)) {
+      defaults = defaults(schema)
+    }
+    if (isObject(defaults)) {
+      for (const [key, value] of Object.entries(defaults)) {
+        if (schema[key] === undefined) {
+          schema[key] = value
+        } else {
+          schema[key] = merge(value, schema[key])
+        }
+      }
+    }
   }
+}
 
+export function processRouteSchema(api, schema, name) {
+  // Used for view and source schemas, see SourceMixin.
+  schema.name = name
+  schema.path ||= api.normalizePath(name)
+}
+
+export async function processForms(api, schema, level) {
   // First resolve the forms and store the results back on the schema.
   let { form, forms, components } = schema
   if (forms) {
-    forms = schema.forms = await resolveSchemas(forms, processForm)
+    forms = schema.forms = await resolveSchemas(forms, form =>
+      processForm(api, form)
+    )
   } else if (form) {
-    form = schema.form = await processForm(form)
+    form = schema.form = await processForm(api, form)
   } else if (components) {
     // NOTE: Processing forms in computed components is not supported, since it
     // only can be computed in conjunction with actual data.
@@ -306,15 +299,50 @@ export async function processForms(api, schema, level) {
   return children
 }
 
-export async function resolveForm(schema) {
+export async function processForm(api, schema) {
   schema = await resolveSchema(schema, true)
   if (!isForm(schema)) {
     throw new Error(`Invalid form schema: '${getSchemaIdentifier(schema)}'`)
   }
-  await resolveNestedSchemas(schema)
+  processDefaults(api, schema)
+  await resolveNestedSchemas(api, schema)
+  return schema
+}
+
+export async function processTab(api, schema) {
+  schema = await resolveSchema(schema, true)
+  if (!isTab(schema)) {
+    throw new Error(`Invalid tab schema: '${getSchemaIdentifier(schema)}'`)
+  }
+  processDefaults(api, schema)
+  return schema
+}
+
+export async function processPanel(api, schema) {
+  schema = await resolveSchema(schema, true)
+  if (!isPanel(schema)) {
+    throw new Error(`Invalid panel schema: '${getSchemaIdentifier(schema)}'`)
+  }
+  processDefaults(api, schema)
   return schema
 }
 
+export async function resolveNestedSchemas(api, schema) {
+  const { tabs, panels } = schema
+  if (tabs) {
+    schema.tabs = await resolveSchemas(
+      tabs,
+      tab => processTab(api, tab)
+    )
+  }
+  if (panels) {
+    schema.panels = await resolveSchemas(
+      panels,
+      panel => processPanel(api, panel)
+    )
+  }
+}
+
 export function hasFormSchema(schema) {
   // Support both single form and multiple forms notation, as well as inlined
   // components.
@@ -404,10 +432,6 @@ export function getItemFormSchema(schema, item, context) {
   return getItemFormSchemaFromForms(getFormSchemas(schema, context), item)
 }
 
-export function hasLabel(schema) {
-  return schema.label !== false
-}
-
 export function isCompact(schema) {
   return !!schema.compact
 }
@@ -420,10 +444,14 @@ export function isNested(schema) {
   return !!(schema.nested || getTypeOptions(schema)?.defaultNested === true)
 }
 
-export function shouldOmitPadding(schema) {
+export function omitPadding(schema) {
   return !!getTypeOptions(schema)?.omitPadding
 }
 
+export function alignBottom(schema) {
+  return !!getTypeOptions(schema)?.alignBottom
+}
+
 export function getDefaultValue(schema) {
   // Support default values both on schema and on component level.
   // NOTE: At the time of creation, components may not be instantiated, (e.g. if
@@ -447,16 +475,6 @@ export function ignoreMissingValue(schema) {
   )
 }
 
-export function hasLabels(schema) {
-  const checkComponents = components =>
-    Object.values(components || {}).some(hasLabel)
-
-  return (
-    checkComponents(schema.components) ||
-    Object.values(schema.tabs || {}).some(checkComponents)
-  )
-}
-
 export function setDefaultValues(schema, data = {}, component) {
   const options = { component, rootData: data }
 

package/types/index.d.ts

@@ -319,40 +319,19 @@ export interface SchemaSourceMixin<$Item> {
    *
    * @defaultValue `false`
    */
-  creatable?: OrItemAccessor<
-    $Item,
-    {},
-    | boolean
-    | {
-        label: string
-      }
-  >
+  creatable?: OrItemAccessor<$Item, {}, boolean | { label: string }>
   /**
    * Whether to add edit buttons next to the list items.
    *
    * @defaultValue `false`
    */
-  editable?: OrItemAccessor<
-    $Item,
-    {},
-    | boolean
-    | {
-        label: string
-      }
-  >
+  editable?: OrItemAccessor<$Item, {}, boolean | { label: string }>
   /**
    * Whether to add delete buttons next to the list items.
    *
    * @defaultValue `false`
    */
-  deletable?: OrItemAccessor<
-    $Item,
-    {},
-    | boolean
-    | {
-        label: string
-      }
-  >
+  deletable?: OrItemAccessor<$Item, {}, boolean | { label: string }>
   /**
    * The column used for the order resulting from dragging around list entries
    * when the `draggable` property of the list schema is set to `true`.