@ditojs/admin 1.10.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -25,7 +25,7 @@
     "prepare": "yarn build"
   },
   "engines": {
-    "node": ">= 16.0.0",
+    "node": ">= 18.0.0",
     "yarn": ">= 1.0.0"
   },
   "browserslist": [
@@ -35,11 +35,10 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^1.10.0",
-    "@ditojs/utils": "^1.10.0",
-    "axios": "^0.27.2",
+    "@ditojs/ui": "^1.11.0",
+    "@ditojs/utils": "^1.11.0",
     "codeflask": "^1.4.1",
-    "filesize": "^9.0.11",
+    "filesize": "^10.0.5",
     "filesize-parser": "^1.5.0",
     "nanoid": "^4.0.0",
     "tinycolor2": "^1.4.2",
@@ -47,23 +46,23 @@
     "tiptap-commands": "^1.17.1",
     "tiptap-extensions": "^1.35.2",
     "to-pascal-case": "^1.0.0",
-    "vue": "^2.7.8",
+    "vue": "^2.7.13",
     "vue-color": "^2.8.1",
-    "vue-js-modal": "^1.3.35",
+    "vue-js-modal": "^2.0.1",
     "vue-multiselect": "^2.1.6",
     "vue-notification": "^1.3.20",
-    "vue-router": "^3.5.4",
+    "vue-router": "^3.6.5",
     "vue-spinner": "^1.0.4",
-    "vue-template-compiler": "^2.7.8",
+    "vue-template-compiler": "^2.7.13",
     "vue-upload-component": "^2.8.22",
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
-    "@ditojs/build": "^1.10.0",
+    "@ditojs/build": "^1.11.0",
     "pug": "^3.0.2",
-    "sass": "1.53.0",
-    "vite": "^3.0.2",
+    "sass": "1.55.0",
+    "vite": "^3.2.2",
     "vite-plugin-vue2": "^2.0.2"
   },
-  "gitHead": "0b044d649e0fe1bcbcd3603bcdc9c6168058fb6d"
+  "gitHead": "cc2a838ccf15a75f435844f3087698c4efaf44e4"
 }

package/src/DitoAdmin.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 import VueModal from 'vue-js-modal'
 import VueRouter from 'vue-router'
 import VueNotifications from 'vue-notification'
-import axios from 'axios'
 import {
   isString, isAbsoluteUrl, merge, hyphenate, camelize, defaultFormats
 } from '@ditojs/utils'
@@ -11,6 +10,7 @@ import * as types from './types/index.js'
 import DitoRoot from './components/DitoRoot.vue'
 import TypeComponent from './TypeComponent.js'
 import { getResource } from './utils/resource.js'
+import { deprecate } from './utils/deprecate.js'
 import verbs from './verbs.js'
 
 Vue.config.productionTip = false
@@ -37,25 +37,14 @@ export default class DitoAdmin {
 
     // Setup default api setttings:
     api.locale ||= 'en-US'
-
     api.formats = merge({}, defaultFormats, api.formats)
-
-    api.request ||= options => this.request(options)
-
+    api.request ||= options => request(api, options)
+    api.getApiUrl ||= path => getApiUrl(api, path)
+    api.isApiRequest ||= url => isApiRequest(api, url)
     // Setting `api.normalizePaths = true (plural) sets both:
     // `api.normalizePath = hyphenate` and `api.denormalizePath = camelize`
-    api.normalizePath = (
-      api.normalizePath ||
-      api.normalizePaths
-        ? hyphenate
-        : val => val
-    )
-    api.denormalizePath = (
-      api.denormalizePath ||
-      api.normalizePaths
-        ? camelize
-        : val => val
-    )
+    api.normalizePath ||= api.normalizePaths ? hyphenate : val => val
+    api.denormalizePath ||= api.normalizePaths ? camelize : val => val
 
     // Allow the configuration of all auth resources, like so:
     // api.users = {
@@ -140,10 +129,6 @@ export default class DitoAdmin {
       ...api.headers
     }
 
-    api.isApiRequest = api.isApiRequest || function(url) {
-      return !isAbsoluteUrl(url) || url.startsWith(api.url)
-    }
-
     if (isString(el)) {
       el = document.querySelector(el)
     }
@@ -202,26 +187,62 @@ export default class DitoAdmin {
   register(type, options) {
     return TypeComponent.register(type, options)
   }
+}
 
-  request({
-    url,
-    method = 'get',
-    data = null,
-    params = null,
-    headers = null
-  }) {
-    const isApiRequest = this.api.isApiRequest(url)
-    return axios.request({
-      url,
-      method,
-      params,
-      ...(data && { data }),
-      baseURL: isApiRequest ? this.api.url : null,
-      headers: {
-        ...(isApiRequest && this.api.headers),
-        ...headers
-      },
-      withCredentials: isApiRequest && !!this.api.cors?.credentials
-    })
+class RequestError extends Error {
+  constructor(response) {
+    super(`Request failed with status code: ${response.status} (${response.statusText})`)
+    this.response = response
+  }
+}
+
+async function request(api, {
+  url,
+  method = 'get',
+  // TODO: `params` was deprecated in favor of `query` on 2022-11-01, remove
+  // once not in use anywhere anymore.
+  params = null,
+  query = params || null,
+  headers = null,
+  data = null
+}) {
+  if (params) {
+    deprecate(`request.params is deprecated. Use action.method and action.path instead.`)
   }
+
+  const isApiRequest = api.isApiRequest(url)
+  if (isApiRequest && !isAbsoluteUrl(url)) {
+    url = api.getApiUrl(url)
+  }
+
+  const search = query && new URLSearchParams(query).toString()
+  if (search) {
+    url = `${url}?${search}`
+  }
+
+  const response = await fetch(url, {
+    method: method.toUpperCase(),
+    ...(data && { body: JSON.stringify(data) }),
+    headers: {
+      ...(isApiRequest && api.headers),
+      ...headers
+    },
+    credentials: isApiRequest && api.cors?.credentials
+      ? 'include'
+      : 'same-origin'
+  })
+  response.data = await response.json()
+  if (!response.ok) {
+    throw new RequestError(response)
+  }
+  return response
+}
+
+function getApiUrl(api, path) {
+  // Use same approach as axios `combineURLs()` to join baseURL with path:
+  return `${api.url.replace(/\/+$/, '')}/${path.replace(/^\/+/, '')}`
+}
+
+function isApiRequest(api, url) {
+  return !isAbsoluteUrl(url) || url.startsWith(api.url)
 }

package/src/components/DitoRoot.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
   .dito-root
-    modals-container
     notifications.dito-notifications(
       ref="notifications"
       position="top right"

package/src/mixins/DitoMixin.js

@@ -8,7 +8,6 @@ import DitoContext from '../DitoContext.js'
 import EmitterMixin from './EmitterMixin.js'
 import { isMatchingType, convertType } from '../utils/type.js'
 import { getResource, getMemberResource } from '../utils/resource.js'
-import { deprecate } from '../utils/deprecate.js'
 
 // @vue/component
 export default {
@@ -294,35 +293,22 @@ export default {
 
     getResourceUrl(resource) {
       const path = this.getResourcePath(resource)
-      let url = null
-      if (path) {
-        // Use same approach as axios internally to join baseURL with path:
-        url = `${
-          this.api.url.replace(/\/+$/, '')
-        }/${
-          path.replace(/^\/+/, '')
-        }`
-        // Support optional query parameters, which are added to the URL:
-        const { query } = resource
-        if (query) {
-          const params = Object.entries(query).map(
-            ([key, value]) =>
-              `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
-          )
-          url = `${url}?${params.join('&')}`
-        }
-      }
-      return url
+      if (!path) return null
+      const url = this.api.getApiUrl(path)
+      // Support optional query parameters, to be are added to the URL.
+      const { query } = resource
+      const search = query && new URLSearchParams(query).toString()
+      return search ? `${url}?${search}` : url
     },
 
-    async sendRequest({ method, url, resource, data, params, internal }) {
-      url = url || this.getResourcePath(resource)
-      method = method || resource?.method
+    async sendRequest({ method, url, resource, query, data, internal }) {
+      url ||= this.getResourcePath(resource)
+      method ||= resource?.method
       const checkUser = !internal && this.api.isApiRequest(url)
       if (checkUser) {
         await this.rootComponent.ensureUser()
       }
-      const response = await this.api.request({ method, url, data, params })
+      const response = await this.api.request({ method, url, data, query })
       // Detect change of the own user, and fetch it again if it was changed.
       if (
         checkUser &&
@@ -371,11 +357,6 @@ export default {
       return res
     },
 
-    load(options) {
-      deprecate('load() is deprecated. Use request() instead.')
-      return this.request(options)
-    },
-
     format(value, {
       locale = this.api.locale,
       defaults = this.api.formats,

package/src/mixins/ItemMixin.js

@@ -102,7 +102,7 @@ export default {
         text = item[key]
       }
       const hadLabel = !!text
-      text = text || ''
+      text ||= ''
       // If no label was found so far, try to produce one from theindex.
       if (!text) {
         // Always use extended style when auto-generating labels from index/id:

package/src/mixins/ResourceMixin.js

@@ -193,8 +193,8 @@ export default {
     },
 
     requestData() {
-      const params = this.queryParams
-      this.handleRequest({ method: 'get', params }, (err, response) => {
+      const query = this.queryParams
+      this.handleRequest({ method: 'get', query }, (err, response) => {
         if (err) {
           if (response) {
             const { data } = response
@@ -226,15 +226,15 @@ export default {
     async handleRequest({
       method,
       resource = this.resource,
-      data,
-      params
+      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
       }
       this.setLoading(true, loadingOptions)
-      const request = { method, resource, data, params }
+      const request = { method, resource, data, query }
       try {
         const response = await this.sendRequest(request)
         // Pass both request and response to the callback, so they can be
@@ -307,7 +307,7 @@ export default {
     } = {}) {
       return new Promise(resolve => {
         this.handleRequest(
-          { method, data, resource },
+          { method, resource, data },
           async (err, response) => {
             const data = response?.data
             if (err) {

package/src/mixins/SourceMixin.js

@@ -79,7 +79,7 @@ export default {
           // at the root in `setData()`, but here instead.
           data = this.unwrapListData(data) || data
         }
-        data = data || []
+        data ||= []
         const { wrapPrimitives } = this
         if (wrapPrimitives) {
           if (this.unwrappingPrimitives) {

package/src/utils/uid.js

@@ -5,7 +5,7 @@ let uid = 0
 export function getUid(object, itemId) {
   let id = uidMap.get(object)
   if (!id) {
-    id = id = itemId || `@${++uid}`
+    id = itemId || `@${++uid}`
     uidMap.set(object, id)
   }
   return id

package/src/utils/units.js

@@ -1,4 +1,4 @@
-import filesize from 'filesize'
+import { filesize } from 'filesize'
 
 export function formatFileSize(size) {
   return filesize(size, { base: 10 })