@ditojs/admin 1.12.0 → 1.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "1.12.0",
+  "version": "1.13.1",
   "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",
@@ -17,12 +17,14 @@
   },
   "files": [
     "src/",
-    "dist/"
+    "dist/",
+    "types/"
   ],
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",
-    "prepare": "yarn build"
+    "prepare": "yarn build",
+    "types": "tsc --noEmit types/index.d.ts"
   },
   "engines": {
     "node": ">= 18.0.0",
@@ -35,8 +37,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^1.12.0",
-    "@ditojs/utils": "^1.12.0",
+    "@ditojs/ui": "^1.13.1",
+    "@ditojs/utils": "^1.13.1",
     "codeflask": "^1.4.1",
     "filesize": "^10.0.5",
     "filesize-parser": "^1.5.0",
@@ -58,11 +60,14 @@
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
-    "@ditojs/build": "^1.12.0",
+    "@ditojs/build": "^1.13.0",
     "pug": "^3.0.2",
     "sass": "1.55.0",
+    "type-fest": "^3.1.0",
+    "typescript": "^4.8.4",
     "vite": "^3.2.2",
     "vite-plugin-vue2": "^2.0.2"
   },
-  "gitHead": "3707045b72d84db4b5174d2efeb8cf62e2065ffa"
+  "types": "types",
+  "gitHead": "0c6a508e04ca915691c1fb0f3706827c8ecfe0ab"
 }

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'
@@ -39,8 +41,8 @@ export default class DitoAdmin {
     api.locale ||= 'en-US'
     api.formats = merge({}, defaultFormats, api.formats)
     api.request ||= options => request(api, options)
-    api.getApiUrl ||= path => getApiUrl(api, path)
-    api.isApiRequest ||= url => isApiRequest(api, url)
+    api.getApiUrl ||= options => getApiUrl(api, options)
+    api.isApiUrl ||= url => isApiUrl(api, url)
     // Setting `api.normalizePaths = true (plural) sets both:
     // `api.normalizePath = hyphenate` and `api.denormalizePath = camelize`
     api.normalizePath ||= api.normalizePaths ? hyphenate : val => val
@@ -210,24 +212,16 @@ async function request(api, {
     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 isApiUrl = api.isApiUrl(url)
 
-  const response = await fetch(url, {
+  const response = await fetch(api.getApiUrl({ url, query }), {
     method: method.toUpperCase(),
     ...(data && { body: JSON.stringify(data) }),
     headers: {
-      ...(isApiRequest && api.headers),
+      ...(isApiUrl && api.headers),
       ...headers
     },
-    credentials: isApiRequest && api.cors?.credentials
+    credentials: isApiUrl && api.cors?.credentials
       ? 'include'
       : 'same-origin'
   })
@@ -242,11 +236,41 @@ async function request(api, {
   return response
 }
 
-function getApiUrl(api, path) {
-  // Use same approach as axios `combineURLs()` to join baseURL with path:
-  return `${api.url.replace(/\/+$/, '')}/${path.replace(/^\/+/, '')}`
+function isApiUrl(api, url) {
+  return !isAbsoluteUrl(url) || url.startsWith(api.url)
 }
 
-function isApiRequest(api, url) {
-  return !isAbsoluteUrl(url) || url.startsWith(api.url)
+function getApiUrl(api, { url, query }) {
+  if (!isAbsoluteUrl(url)) {
+    url = combineUrls(api.url, url)
+  }
+  // Support optional query parameters, to be are added to the URL.
+  const search = formatQuery(query)
+  return search ? `${url}?${search}` : 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/mixins/DitoMixin.js

@@ -292,19 +292,14 @@ export default {
     },
 
     getResourceUrl(resource) {
-      const path = this.getResourcePath(resource)
-      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
+      const url = this.getResourcePath(resource)
+      return url ? this.api.getApiUrl({ url, query: resource.query }) : null
     },
 
     async sendRequest({ method, url, resource, query, data, internal }) {
       url ||= this.getResourcePath(resource)
       method ||= resource?.method
-      const checkUser = !internal && this.api.isApiRequest(url)
+      const checkUser = !internal && this.api.isApiUrl(url)
       if (checkUser) {
         await this.rootComponent.ensureUser()
       }
@@ -385,13 +380,10 @@ export default {
       if (isString(options)) {
         options = { url: options }
       }
-      const { url, filename } = options
       // See: https://stackoverflow.com/a/49917066/1163708
       const a = document.createElement('a')
-      a.href = url
-      if (filename) {
-        a.download = filename
-      }
+      a.href = this.api.getApiUrl(options)
+      a.download = options.filename ?? null
       const { body } = document
       body.appendChild(a)
       a.click()

package/src/types/TypeColor.vue

@@ -135,11 +135,13 @@ export default TypeComponent.register('color', {
       default: 'hex'
     }),
 
+    // TODO: Rename to `showAlpha`?
     alpha: getSchemaAccessor('alpha', {
       type: Boolean,
       default: false
     }),
 
+    // TODO: Rename to `showInputs`?
     inputs: getSchemaAccessor('inputs', {
       type: Boolean,
       default: true

package/src/types/TypeMultiselect.vue

@@ -293,8 +293,8 @@ export default TypeComponent.register('multiselect', {
     placeholder() {
       const { placeholder, searchable, taggable } = this.schema
       return placeholder || (
-        searchable && taggable ? 'Search or add a tag'
-        : searchable ? 'Select or search entry'
+        searchable && taggable ? `Search or add a ${this.label}`
+        : searchable ? `Select or search ${this.label}`
         : undefined
       )
     }

package/src/types/TypeSlider.vue

@@ -50,6 +50,7 @@ export default TypeComponent.register('slider', {
   nativeField: true,
 
   computed: {
+    // TODO: Rename to `showInput`?
     input: getSchemaAccessor('input', {
       type: Boolean,
       default: true