@ditojs/admin 2.0.4 → 2.1.0

package/src/mixins/DitoMixin.js

@@ -1,6 +1,14 @@
 import {
-  isObject, isArray, isString, isFunction, asArray, equals,
-  getValueAtDataPath, labelize, hyphenate, format
+  isObject,
+  isArray,
+  isString,
+  isFunction,
+  asArray,
+  equals,
+  getValueAtDataPath,
+  labelize,
+  hyphenate,
+  format
 } from '@ditojs/utils'
 import appState from '../appState.js'
 import DitoContext from '../DitoContext.js'
@@ -32,12 +40,12 @@ export default {
   provide() {
     return this.providesData
       ? {
-        $parentComponent: () => this,
-        $dataComponent: () => this
-      }
+          $parentComponent: () => this,
+          $dataComponent: () => this
+        }
       : {
-        $parentComponent: () => this
-      }
+          $parentComponent: () => this
+        }
   },
 
   data() {
@@ -161,7 +169,9 @@ export default {
   beforeCreate() {
     const uid = nextUid++
     Object.defineProperty(this, '$uid', {
-      get() { return uid }
+      get() {
+        return uid
+      }
     })
   },
 
@@ -255,11 +265,14 @@ export default {
     },
 
     shouldRender(schema = null) {
-      return !!schema && this.getSchemaValue('if', {
-        type: Boolean,
-        default: true,
-        schema
-      })
+      return (
+        !!schema &&
+        this.getSchemaValue('if', {
+          type: Boolean,
+          default: true,
+          schema
+        })
+      )
     },
 
     getResourcePath(resource) {
@@ -310,20 +323,29 @@ export default {
       // - 'global': cache globally, for the entire admin session
       // - 'local': cache locally within the closest route component that is
       //    associated with a resource and loads its own data.
-      const cacheParent = cache && {
-        global: this.appState,
-        local: this.dataComponent
-      }[cache]
+      const cacheParent = (
+        cache &&
+        {
+          global: this.appState,
+          local: this.dataComponent
+        }[cache]
+      )
       const loadCache = cacheParent?.loadCache
       // Build a cache key from the config:
-      const cacheKey = loadCache && `${
-        options.method || 'get'} ${
-        options.url} ${
-        // TODO: `request.params` was deprecated in favour of `query` on
-        // 2022-11-01, remove once not in use anywhere any more.
-        JSON.stringify(options.query || options.params || '')} ${
-        JSON.stringify(options.data || '')
-      }`
+      const cacheKey = (
+        loadCache &&
+        `${
+          options.method || 'get'
+        } ${
+          options.url
+        } ${
+          // TODO: `request.params` was deprecated in favour of `query` on
+          // 2022-11-01, remove once not in use anywhere any more.
+          JSON.stringify(options.query || options.params || '')
+        } ${
+          JSON.stringify(options.data || '')
+        }`
+      )
       if (loadCache && (cacheKey in loadCache)) {
         return loadCache[cacheKey]
       }

package/src/mixins/EmitterMixin.js

@@ -99,7 +99,8 @@ export default {
                   }
                 } catch (error) {
                   console.error(
-                    `Error during event handler for '${event}':`, error
+                    `Error during event handler for '${event}':`,
+                    error
                   )
                 }
               }

package/src/mixins/ItemMixin.js

@@ -1,6 +1,9 @@
 import DitoContext from '../DitoContext.js'
 import {
-  getItemFormSchema, getItemId, getItemUid, isListSource
+  getItemFormSchema,
+  getItemId,
+  getItemUid,
+  isListSource
 } from '../utils/schema.js'
 import { appendDataPath } from '../utils/data.js'
 import { isObject, isString, isFunction } from '@ditojs/utils'
@@ -31,12 +34,13 @@ export default {
 
     findItemIdIndex(sourceSchema, data, itemId) {
       const index = this.isTransient
-        // For transient data, the index is used as the id
-        ? itemId
+        ? // For transient data, the index is used as the id
+          itemId
         : data?.findIndex(
-          (item, index) =>
-            this.getItemId(sourceSchema, item, index) === itemId
-        )
+            (item, index) => (
+              this.getItemId(sourceSchema, item, index) === itemId
+            )
+          )
       return index !== -1 ? index : null
     },
 
@@ -82,7 +86,7 @@ export default {
           })
         )
         if (isObject(label)) {
-          ({ text, prefix, suffix } = label)
+          ;({ text, prefix, suffix } = label)
         } else {
           text = label
         }
@@ -109,9 +113,10 @@ export default {
       if (text == null) {
         // Always use extended style when auto-generating labels from index/id:
         extended = true
-        text = (isListSource(sourceSchema) && index !== null)
-          ? text = `${index + 1}`
-          : ''
+        text =
+          isListSource(sourceSchema) && index !== null
+            ? (text = `${index + 1}`)
+            : ''
       }
       if (extended) {
         const formLabel = getFormLabel()

package/src/mixins/LoadingMixin.js

@@ -8,7 +8,8 @@ export default {
 
   methods: {
     setLoading(isLoading, { updateRoot = false, updateView = false } = {}) {
-      if (!this.isLoading ^ !isLoading) { // Boolean xor
+      if (!this.isLoading ^ !isLoading) {
+        // Boolean xor
         this.isLoading = !!isLoading
         if (updateRoot) {
           this.rootComponent.registerLoading(isLoading)

package/src/mixins/NumberMixin.js

@@ -10,9 +10,12 @@ export default {
       },
 
       set(value) {
-        this.value = value !== ''
-          ? this.isInteger ? parseInt(value, 10) : parseFloat(value)
-          : null
+        this.value =
+          value !== ''
+            ? this.isInteger
+              ? parseInt(value, 10)
+              : parseFloat(value)
+            : null
       }
     },
 
@@ -40,9 +43,10 @@ export default {
     min: getSchemaAccessor('min', {
       type: Number,
       get(min) {
-        min = min === undefined
-          ? this.getSchemaValue('range', { type: Array })?.[0]
-          : min
+        min =
+          min === undefined
+            ? this.getSchemaValue('range', { type: Array })?.[0]
+            : min
         return this.isInteger && min != null ? Math.floor(min) : min
       }
     }),
@@ -50,9 +54,10 @@ export default {
     max: getSchemaAccessor('max', {
       type: Number,
       get(max) {
-        max = max === undefined
-          ? this.getSchemaValue('range', { type: Array })?.[1]
-          : max
+        max =
+          max === undefined
+            ? this.getSchemaValue('range', { type: Array })?.[1]
+            : max
         return this.isInteger && max != null ? Math.ceil(max) : max
       }
     }),
@@ -70,7 +75,7 @@ export default {
         // Provide a setter that delegates to `[this.min, this.max]`,
         // since those already handle `schema.range`.
         if (isArray(range)) {
-          [this.min, this.max] = range
+          ;[this.min, this.max] = range
         }
       }
     })

package/src/mixins/OptionsMixin.js

@@ -3,8 +3,13 @@ import DataMixin from './DataMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { setTemporaryId, isReference } from '../utils/data.js'
 import {
-  isObject, isArray, isString, isFunction,
-  normalizeDataPath, labelize, debounceAsync
+  isObject,
+  isArray,
+  isString,
+  isFunction,
+  normalizeDataPath,
+  labelize,
+  debounceAsync
 } from '@ditojs/utils'
 
 // @vue/component
@@ -20,17 +25,19 @@ export default {
   computed: {
     selectedValue: {
       get() {
-        const convertValue = value => this.relate
-          ? this.hasOption(value)
-            ? this.getValueForOption(value)
-            : null
-          : value
+        const convertValue = value =>
+          this.relate
+            ? this.hasOption(value)
+              ? this.getValueForOption(value)
+              : null
+            : value
         const value = isArray(this.value)
           ? this.value.map(convertValue).filter(value => value !== null)
           : convertValue(this.value)
         if (
           // When relating and as soon as the options are available...
-          this.relate && this.hasOptions && (
+          this.relate &&
+          this.hasOptions && (
             // ...if the value is forced to null because a disappeared option...
             value === null && this.value !== null ||
             // ...or if the value is a reference, replace it with its option
@@ -38,15 +45,18 @@ export default {
             isReference(this.value)
           )
         ) {
+          // TODO: Fix side-effects
+          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
           this.selectedValue = value
         }
         return value
       },
 
       set(value) {
-        const convert = value => this.relate
-          ? this.getOptionForValue(value)
-          : value
+        const convert = value =>
+          this.relate
+            ? this.getOptionForValue(value)
+            : value
         this.value = isArray(value)
           ? value.map(convert)
           : convert(value)
@@ -64,6 +74,8 @@ export default {
       if (!isArray(data)) {
         throw new Error(`Invalid options data, should be array: ${data}`)
       }
+      // TODO: Fix side-effects
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       this.hasOptions = data.length > 0
       return this.processOptions(data)
     },
@@ -242,7 +254,7 @@ export default {
       }
       // Convert relating objects to a shallow copy with only the id left.
       // TODO: Convert to using `relateBy`:
-      const processRelate = value => value ? { id: value.id } : value
+      const processRelate = value => (value ? { id: value.id } : value)
       // Selected options can be both objects & arrays, e.g. 'checkboxes':
       value = isArray(value)
         ? value.map(processRelate)

package/src/mixins/ResourceMixin.js

@@ -1,6 +1,6 @@
 import ItemMixin from './ItemMixin.js'
 import LoadingMixin from './LoadingMixin.js'
-import { setDefaults } from '../utils/schema.js'
+import { setDefaultValues } from '../utils/schema.js'
 import { isObject, isString, labelize } from '@ditojs/utils'
 import { getResource } from '../utils/resource.js'
 import DitoContext from '../DitoContext.js'
@@ -66,9 +66,10 @@ export default {
 
     transientNote() {
       return (
-        this.isTransient &&
-        '<b>Note</b>: the parent still needs to be saved ' +
-        'in order to persist this change.'
+        this.isTransient && (
+          '<b>Note</b>: the parent still needs to be saved ' +
+          'in order to persist this change.'
+        )
       )
     },
 
@@ -99,6 +100,7 @@ export default {
         const start = page * amount
         return [start, start + amount - 1]
       }
+      return null
     },
 
     queryParams() {
@@ -136,15 +138,15 @@ export default {
       const verbs = this.$verbs()
       return this.isTransient
         ? {
-          ...verbs,
-          // Override default verbs with their transient versions:
-          create: 'add',
-          created: 'added',
-          save: 'apply',
-          saved: 'applied',
-          delete: 'remove',
-          deleted: 'removed'
-        }
+            ...verbs,
+            // Override default verbs with their transient versions:
+            create: 'add',
+            created: 'added',
+            save: 'apply',
+            saved: 'applied',
+            delete: 'remove',
+            deleted: 'removed'
+          }
         : verbs
     },
 
@@ -189,7 +191,7 @@ export default {
     },
 
     createData(schema, type) {
-      return setDefaults(schema, type ? { type } : {}, this)
+      return setDefaultValues(schema, type ? { type } : {}, this)
     },
 
     requestData() {
@@ -200,7 +202,8 @@ export default {
             const { data } = response
             if (
               data?.type === 'FilterValidation' &&
-              this.onFilterErrors?.(data.errors)) {
+              this.onFilterErrors?.(data.errors)
+            ) {
               return true
             } else if (this.isUnauthorizedError(response)) {
               // TODO: Can we really swallow these errors?
@@ -223,12 +226,15 @@ export default {
       return response?.status === 401
     },
 
-    async handleRequest({
-      method,
-      resource = this.resource,
-      query,
-      data
-    }, callback) {
+    async handleRequest(
+      {
+        method,
+        resource = this.resource,
+        query,
+        data
+      },
+      callback
+    ) {
       const loadingOptions = {
         updateRoot: true, // Display spinner in header when loading in resources
         updateView: this.isInView // Notify view of loading for view components
@@ -283,19 +289,21 @@ export default {
       setData = false,
       onSuccess,
       onError,
-      notifySuccess = () => this.notify({
-        type: 'success',
-        title: 'Request Successful',
-        text: 'Request was successfully sent.'
-      }),
-      notifyError = error => this.notify({
-        type: 'error',
-        title: 'Request Error',
-        text: [
-          `Unable to send request${error ? ':' : ''}`,
-          error?.message || error
-        ]
-      })
+      notifySuccess = () =>
+        this.notify({
+          type: 'success',
+          title: 'Request Successful',
+          text: 'Request was successfully sent.'
+        }),
+      notifyError = error =>
+        this.notify({
+          type: 'error',
+          title: 'Request Error',
+          text: [
+            `Unable to send request${error ? ':' : ''}`,
+            error?.message || error
+          ]
+        })
     } = {}) {
       return new Promise(resolve => {
         this.handleRequest(

package/src/mixins/RouteMixin.js

@@ -11,14 +11,6 @@ export default {
     }
   },
 
-  beforeRouteUpdate(to, from, next) {
-    this?.beforeRouteChange(to, from, next)
-  },
-
-  beforeRouteLeave(to, from, next) {
-    this?.beforeRouteChange(to, from, next)
-  },
-
   data() {
     return {
       reload: false,
@@ -110,6 +102,14 @@ export default {
     }
   },
 
+  beforeRouteUpdate(to, from, next) {
+    this?.beforeRouteChange(to, from, next)
+  },
+
+  beforeRouteLeave(to, from, next) {
+    this?.beforeRouteChange(to, from, next)
+  },
+
   created() {
     // Keep a shared stack of root components for DitoTrail to use to render
     // labels. Can't rely on $route.matched[i].instances.default unfortunately,

package/src/mixins/SortableMixin.js

@@ -3,8 +3,8 @@ import { UseSortable } from '@vueuse/integrations/useSortable/component'
 
 // @vue/component
 export default {
-  components: { UseSortable },
   mixins: [ItemMixin],
+  components: { UseSortable },
 
   data() {
     return {

package/src/mixins/SourceMixin.js

@@ -4,14 +4,27 @@ import SchemaParentMixin from '../mixins/SchemaParentMixin.js'
 import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
 import { getMemberResource } from '../utils/resource.js'
 import {
-  processRouteSchema, processForms, getNamedSchemas, getButtonSchemas,
-  hasFormSchema, getFormSchemas, getViewSchema,
-  hasLabels, isCompact, isInlined,
-  isObjectSource, isListSource
+  processRouteSchema,
+  processForms,
+  getNamedSchemas,
+  getButtonSchemas,
+  hasFormSchema,
+  getFormSchemas,
+  getViewSchema,
+  hasLabels,
+  isCompact,
+  isInlined,
+  isObjectSource,
+  isListSource
 } from '../utils/schema.js'
 import {
-  isObject, isString, isArray, isNumber, equals,
-  parseDataPath, normalizeDataPath
+  isObject,
+  isString,
+  isArray,
+  isNumber,
+  equals,
+  parseDataPath,
+  normalizeDataPath
 } from '@ditojs/utils'
 
 // @vue/component
@@ -85,9 +98,13 @@ export default {
           if (this.unwrappingPrimitives) {
             // We're done unwrapping once `listData` is reevaluated, so set
             // this to `false` again. See `wrappedPrimitives` watcher above.
+            // TODO: Fix side-effects
+            // eslint-disable-next-line
             this.unwrappingPrimitives = false
           } else {
             // Convert data to a list of wrapped primitives, and return it.
+            // TODO: Fix side-effects
+            // eslint-disable-next-line
             this.wrappedPrimitives = data.map(value => ({
               [wrapPrimitives]: value
             }))
@@ -102,7 +119,9 @@ export default {
           this.wrappedPrimitives = data
         } else {
           this.value = this.isObjectSource
-            ? (data && data.length > 0 ? data[0] : null)
+            ? data && data.length > 0
+              ? data[0]
+              : null
             : data
         }
       }
@@ -178,8 +197,8 @@ export default {
     },
 
     defaultScope() {
+      let first = null
       if (this.scopes) {
-        let first = null
         for (const scope of Object.values(this.scopes)) {
           if (scope.defaultScope) {
             return scope
@@ -188,8 +207,8 @@ export default {
             first = scope
           }
         }
-        return first
       }
+      return first
     },
 
     defaultOrder() {
@@ -202,6 +221,7 @@ export default {
           }
         }
       }
+      return null
     },
 
     nestedMeta() {
@@ -408,22 +428,29 @@ export default {
     },
 
     deleteItem(item, index) {
-      const label = item && this.getItemLabel(this.schema, item, {
-        index,
-        extended: true
-      })
+      const label = (
+        item &&
+        this.getItemLabel(this.schema, item, {
+          index,
+          extended: true
+        })
+      )
 
-      const notify = () => this.notify({
-        type: this.isTransient ? 'info' : 'success',
-        title: 'Successfully Removed',
-        text: [
-          `${label} was ${this.verbs.deleted}.`,
-          this.transientNote
-        ]
-      })
+      const notify = () =>
+        this.notify({
+          type: this.isTransient ? 'info' : 'success',
+          title: 'Successfully Removed',
+          text: [
+            `${label} was ${this.verbs.deleted}.`,
+            this.transientNote
+          ]
+        })
 
-      if (item && window.confirm(
-        `Do you really want to ${this.verbs.delete} ${label}?`)
+      if (
+        item &&
+        window.confirm(
+          `Do you really want to ${this.verbs.delete} ${label}?`
+        )
       ) {
         if (this.isTransient) {
           this.removeItem(item)
@@ -505,11 +532,12 @@ export default {
           const { matched } = this.$router.match(path)
           if (matched.length) {
             if (this.$route.path === path) {
-            // We're already there, so just call `onComplete()`:
+              // We're already there, so just call `onComplete()`:
               callOnComplete()
             } else {
-            // Navigate to the component's path, then call `onComplete()`_:
-              this.$router.push({ path })
+              // Navigate to the component's path, then call `onComplete()`_:
+              this.$router
+                .push({ path })
                 .catch(reject)
                 // Wait for the last route component to be mounted in the next
                 // tick before calling `onComplete()`
@@ -527,8 +555,13 @@ export default {
   }, // end of `methods`
 
   async processSchema(
-    api, schema, name, routes, level,
-    nested = false, flatten = false,
+    api,
+    schema,
+    name,
+    routes,
+    level,
+    nested = false,
+    flatten = false,
     process = null
   ) {
     processRouteSchema(api, schema, name)
@@ -560,11 +593,12 @@ export default {
     }
     // Inlined forms don't need to actually add routes.
     if (hasFormSchema(schema) && !inlined) {
-      const getPathWithParam = (path, param) => param
-        ? path
-          ? `${path}/:${param}`
-          : `:${param}`
-        : path
+      const getPathWithParam = (path, param) =>
+        param
+          ? path
+            ? `${path}/:${param}`
+            : `:${param}`
+          : path
 
       // Lists in single-component-views (level === 0) use their view's path,
       // while all others need their path prefixed with the parent's path:
@@ -574,7 +608,7 @@ export default {
         // directly edit one object.
         path: getPathWithParam(sourcePath, isListSource(schema) && param),
         component: DitoComponent.component(
-          nested ? 'dito-form-nested' : 'dito-form'
+          nested ? 'DitoFormNested' : 'DitoForm'
         ),
         meta: formMeta
       }