@ditojs/admin 1.13.0 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "1.13.0",
+  "version": "1.14.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",
@@ -37,8 +37,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^1.13.0",
-    "@ditojs/utils": "^1.13.0",
+    "@ditojs/ui": "^1.14.0",
+    "@ditojs/utils": "^1.14.0",
     "codeflask": "^1.4.1",
     "filesize": "^10.0.5",
     "filesize-parser": "^1.5.0",
@@ -48,26 +48,26 @@
     "tiptap-commands": "^1.17.1",
     "tiptap-extensions": "^1.35.2",
     "to-pascal-case": "^1.0.0",
-    "vue": "^2.7.13",
+    "vue": "^2.7.14",
     "vue-color": "^2.8.1",
     "vue-js-modal": "^2.0.1",
     "vue-multiselect": "^2.1.6",
     "vue-notification": "^1.3.20",
     "vue-router": "^3.6.5",
     "vue-spinner": "^1.0.4",
-    "vue-template-compiler": "^2.7.13",
-    "vue-upload-component": "^2.8.22",
+    "vue-template-compiler": "^2.7.14",
+    "vue-upload-component": "^2.8.23",
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
-    "@ditojs/build": "^1.13.0",
+    "@ditojs/build": "^1.14.0",
     "pug": "^3.0.2",
-    "sass": "1.55.0",
-    "type-fest": "^3.1.0",
-    "typescript": "^4.8.4",
-    "vite": "^3.2.2",
+    "sass": "1.56.1",
+    "type-fest": "^3.2.0",
+    "typescript": "^4.9.3",
+    "vite": "^3.2.4",
     "vite-plugin-vue2": "^2.0.2"
   },
   "types": "types",
-  "gitHead": "b65d7d15871b0d11579565df92780536ef2926da"
+  "gitHead": "ba197ae5254deb657b2c3b5dab7a851f488e022a"
 }

package/src/DitoAdmin.js

@@ -3,7 +3,9 @@ import VueModal from 'vue-js-modal'
 import VueRouter from 'vue-router'
 import VueNotifications from 'vue-notification'
 import {
-  isString, isAbsoluteUrl, merge, hyphenate, camelize, defaultFormats
+  isString, isArray, asArray, isAbsoluteUrl,
+  merge, hyphenate, camelize,
+  defaultFormats
 } from '@ditojs/utils'
 import * as components from './components/index.js'
 import * as types from './types/index.js'
@@ -234,16 +236,41 @@ async function request(api, {
   return response
 }
 
+function isApiUrl(api, url) {
+  return !isAbsoluteUrl(url) || url.startsWith(api.url)
+}
+
 function getApiUrl(api, { url, query }) {
   if (!isAbsoluteUrl(url)) {
-    // Use same approach as axios `combineURLs()` to join baseURL with path:
-    url = `${api.url.replace(/\/+$/, '')}/${url.replace(/^\/+/, '')}`
+    url = combineUrls(api.url, url)
   }
   // Support optional query parameters, to be are added to the URL.
-  const search = query && new URLSearchParams(query).toString()
+  const search = formatQuery(query)
   return search ? `${url}?${search}` : url
 }
 
-function isApiUrl(api, url) {
-  return !isAbsoluteUrl(url) || url.startsWith(api.url)
+function combineUrls(baseUrl, relativeUrl) {
+  // Use same approach as axios `combineURLs()` to join baseUrl & relativeUrl:
+  return `${baseUrl.replace(/\/+$/, '')}/${relativeUrl.replace(/^\/+/, '')}`
+}
+
+function formatQuery(query) {
+  const entries = query
+    ? isArray(query)
+      ? query
+      : Object.entries(query)
+    : []
+  return new URLSearchParams(
+    // Expand array values into multiple entries under the same key, so
+    // `formatQuery({ foo: [1, 2], bar: 3 })` => 'foo=1&foo=2&bar=3'.
+    entries.reduce(
+      (entries, [key, value]) => {
+        for (const val of asArray(value)) {
+          entries.push([key, val])
+        }
+        return entries
+      },
+      []
+    )
+  ).toString()
 }

package/src/components/DitoForm.vue

@@ -288,8 +288,7 @@ export default DitoComponent.component('dito-form', {
     // @override ResourceMixin.setupData()
     setupData() {
       if (this.isCreating) {
-        this.createdData = this.createdData ||
-          this.createData(this.schema, this.type)
+        this.createdData ||= this.createData(this.schema, this.type)
       } else {
         this.ensureData()
       }

package/src/utils/schema.js

@@ -163,7 +163,7 @@ export function processComponent(api, schema, name, routes, level) {
 export function processRouteSchema(api, schema, name) {
   // Used for view and source schemas, see SourceMixin
   schema.name = name
-  schema.path = schema.path || api.normalizePath(name)
+  schema.path ||= api.normalizePath(name)
 }
 
 export async function processSchemaComponents(api, schema, routes, level) {

package/types/index.d.ts

@@ -7,7 +7,6 @@ import {
   NumberFormat,
   TimeFormat
 } from '@ditojs/utils'
-import { AxiosResponse as Response } from 'axios'
 import { RequireAtLeastOne, SetOptional } from 'type-fest'
 import Vue, { VueConstructor } from 'vue'
 
@@ -21,7 +20,7 @@ export interface DitoGlobal {
   base?: string
   settings?: Record<string, any>
 }
-export type PerformRequest = <T>({
+export type RequestMethod = <T>({
   url,
   method,
   data,
@@ -39,7 +38,9 @@ export type PerformRequest = <T>({
   params: ConstructorParameters<typeof URLSearchParams>[0]
   query: ConstructorParameters<typeof URLSearchParams>[0]
   headers: Record<string, string>
-}) => Promise<Response<T>>
+}) => Promise<RequestMethodResponse<T>>
+
+export type RequestMethodResponse<T> = Response & { data: T }
 
 export interface ApiResource {
   type: string
@@ -61,7 +62,7 @@ export interface ApiConfig {
     date?: DateFormat
     time?: TimeFormat
   }
-  request?: PerformRequest
+  request?: RequestMethod
   /**
    * Whether to display admin notifications.
    *
@@ -74,7 +75,7 @@ export interface ApiConfig {
          * The amount of milliseconds multiplied with the amount of characters
          * displayed in the notification, plus 40 (40 + title + message).
          * @defaultValue `20`
-         **/
+         */
         durationFactor: number
       }
   cors?: {
@@ -214,7 +215,11 @@ export interface SchemaTypeMixin<$Item> {
    * depend on its contents or as 'fill' to fill left over space. A line will
    * contain multiple components until their widths exceed 100%.
    */
-  width?: OrItemAccessor<$Item, {}, 'auto' | 'fill' | `${number}%` | `${number}/${number}` | number>
+  width?: OrItemAccessor<
+    $Item,
+    {},
+    'auto' | 'fill' | `${number}%` | `${number}/${number}` | number
+  >
 
   /**
    * Whether the component is visible.
@@ -879,76 +884,83 @@ export type ColumnSchema<$Item = any> = {
 
 export type ResolvableForm<$Item = any> = Resolvable<Form<$Item>>
 
-export type ListSchema<$Item = { [key: string]: any }> = SchemaSourceMixin<$Item> &
-  BaseSchema<$Item> & {
-    /**
-     * The type of the view
-     */
-    type: 'list'
-    /**
-     * The form.
-     */
-    form?: ResolvableForm
-    /**
-     * The forms.
-     */
-    forms?: {
-      [key: string]: ResolvableForm
-    }
-    /**
-     * The label given to the items. If no itemLabel is given, the default is
-     * the 'name' property of the item, followed by label of the form of the
-     * view (plus item id) and other defaults.
-     */
-    itemLabel?: OrItemAccessor<any, {}, string>
-    /**
-     * The columns displayed in the table. While columns can be supplied as an
-     * array where each entry is the name of a property of the item, it is
-     * usually beneficial to assign an object with further options to the
-     * columns property.
-     */
-    columns?: Record<string, ColumnSchema<$Item>> | (keyof $Item)[]
-    /**
-     * Scope names as defined on the model. When set, the admin renders a set of
-     * scope buttons, allowing the user to switch between them while editing.
-     */
-    scopes?:
-      | string[]
-      | {
-          [scopeName: string]:
-            | {
-                label?: string
-                hint?: string
-                defaultScope?: boolean
-              }
-            | string
-        }
-    /**
-     * Default scope name as defined on the model.
-     */
-    scope?: string
-
-    // TODO: document filters
-    filters?: {
-      [k: string]:
-        | {
-            label?: string
-            filter: 'text'
-            /**
-             * @defaultValue `['contains']`
-             */
-            operators?: ('contains' | 'equals' | 'starts-with' | 'ends-with')[]
-          }
-        | {
-            label?: string
-            filter: 'date-range'
-          }
+export type ListSchema<$Item = { [key: string]: any }> =
+  SchemaSourceMixin<$Item> &
+    BaseSchema<$Item> & {
+      /**
+       * The type of the view
+       */
+      type: 'list'
+      /**
+       * The form.
+       */
+      form?: ResolvableForm
+      /**
+       * The forms.
+       */
+      forms?: {
+        [key: string]: ResolvableForm
+      }
+      /**
+       * The label given to the items. If no itemLabel is given, the default is
+       * the 'name' property of the item, followed by label of the form of the
+       * view (plus item id) and other defaults.
+       */
+      itemLabel?: OrItemAccessor<any, {}, string>
+      /**
+       * The columns displayed in the table. While columns can be supplied as an
+       * array where each entry is the name of a property of the item, it is
+       * usually beneficial to assign an object with further options to the
+       * columns property.
+       */
+      columns?: Record<string, ColumnSchema<$Item>> | (keyof $Item)[]
+      /**
+       * Scope names as defined on the model. When set, the admin renders a set
+       * of scope buttons, allowing the user to switch between them while
+       * editing.
+       */
+      scopes?:
+        | string[]
         | {
-            label?: string
-            components: Components<any>
+            [scopeName: string]:
+              | {
+                  label?: string
+                  hint?: string
+                  defaultScope?: boolean
+                }
+              | string
           }
+      /**
+       * Default scope name as defined on the model.
+       */
+      scope?: string
+
+      // TODO: document filters
+      filters?: {
+        [k: string]:
+          | {
+              label?: string
+              filter: 'text'
+              /**
+               * @defaultValue `['contains']`
+               */
+              operators?: (
+                | 'contains'
+                | 'equals'
+                | 'starts-with'
+                | 'ends-with'
+              )[]
+            }
+          | {
+              label?: string
+              filter: 'date-range'
+            }
+          | {
+              label?: string
+              components: Components<any>
+            }
+      }
     }
-  }
 
 export type OrItemAccessor<
   $Item = any,
@@ -1013,7 +1025,7 @@ export type DitoContext<$Item = any> = {
 
   // Helper Methods
 
-  request<T extends any>(options: {
+  request<T>(options: {
     /**
      * Allows caching of loaded data on two levels:
      * - 'global': cache globally, for the entire admin session
@@ -1044,7 +1056,7 @@ export type DitoContext<$Item = any> = {
 }
 
 export type View<$Item = any> = {
-  resource?: Form['resource'];
+  resource?: Form['resource']
   clipboard?: Form['clipboard']
 } & (
   | InputSchema<$Item>
@@ -1167,7 +1179,7 @@ export class DitoAdmin<
 
   // TODO: options and return type
   register(type: OrArrayOf<string>, options: any): any
-  request: PerformRequest
+  request: RequestMethod
 }
 export type HTTPVerb = 'get' | 'post' | 'put' | 'delete' | 'patch'