@ditojs/admin 2.0.4 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.0.4",
+  "version": "2.1.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",
@@ -15,7 +15,7 @@
     },
     "./style.css": "./dist/style.css",
     "./src": "./src/index.js",
-    "./imports.sass": "./src/styles/_imports.sass"
+    "./imports.scss": "./src/styles/_imports.scss"
   },
   "files": [
     "src/",
@@ -33,55 +33,56 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.0.4",
-    "@ditojs/utils": "^2.0.1",
+    "@ditojs/ui": "^2.1.0",
+    "@ditojs/utils": "^2.1.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
-    "@tiptap/core": "^2.0.2",
-    "@tiptap/extension-blockquote": "^2.0.2",
-    "@tiptap/extension-bold": "^2.0.2",
-    "@tiptap/extension-bullet-list": "^2.0.2",
-    "@tiptap/extension-code": "^2.0.2",
-    "@tiptap/extension-code-block": "^2.0.2",
-    "@tiptap/extension-document": "^2.0.2",
-    "@tiptap/extension-hard-break": "^2.0.2",
-    "@tiptap/extension-heading": "^2.0.2",
-    "@tiptap/extension-history": "^2.0.2",
-    "@tiptap/extension-horizontal-rule": "^2.0.2",
-    "@tiptap/extension-italic": "^2.0.2",
-    "@tiptap/extension-link": "^2.0.2",
-    "@tiptap/extension-list-item": "^2.0.2",
-    "@tiptap/extension-ordered-list": "^2.0.2",
-    "@tiptap/extension-paragraph": "^2.0.2",
-    "@tiptap/extension-strike": "^2.0.2",
-    "@tiptap/extension-text": "^2.0.2",
-    "@tiptap/extension-underline": "^2.0.2",
-    "@tiptap/pm": "^2.0.2",
-    "@tiptap/vue-3": "^2.0.2",
-    "@vueuse/integrations": "^10.0.0-beta.2",
+    "@tiptap/core": "^2.0.3",
+    "@tiptap/extension-blockquote": "^2.0.3",
+    "@tiptap/extension-bold": "^2.0.3",
+    "@tiptap/extension-bullet-list": "^2.0.3",
+    "@tiptap/extension-code": "^2.0.3",
+    "@tiptap/extension-code-block": "^2.0.3",
+    "@tiptap/extension-document": "^2.0.3",
+    "@tiptap/extension-hard-break": "^2.0.3",
+    "@tiptap/extension-heading": "^2.0.3",
+    "@tiptap/extension-history": "^2.0.3",
+    "@tiptap/extension-horizontal-rule": "^2.0.3",
+    "@tiptap/extension-italic": "^2.0.3",
+    "@tiptap/extension-link": "^2.0.3",
+    "@tiptap/extension-list-item": "^2.0.3",
+    "@tiptap/extension-ordered-list": "^2.0.3",
+    "@tiptap/extension-paragraph": "^2.0.3",
+    "@tiptap/extension-strike": "^2.0.3",
+    "@tiptap/extension-text": "^2.0.3",
+    "@tiptap/extension-underline": "^2.0.3",
+    "@tiptap/pm": "^2.0.3",
+    "@tiptap/vue-3": "^2.0.3",
+    "@vueuse/integrations": "^10.0.0-beta.4",
     "codeflask": "^1.4.1",
     "filesize": "^10.0.7",
     "filesize-parser": "^1.5.0",
+    "focus-trap": "^7.4.0",
     "nanoid": "^4.0.2",
     "sortablejs": "^1.15.0",
     "tinycolor2": "^1.6.0",
+    "type-fest": "^3.8.0",
     "vue": "^3.2.47",
     "vue-multiselect": "^3.0.0-beta.1",
     "vue-router": "^4.1.6",
     "vue-upload-component": "^3.1.8"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.0.0",
+    "@ditojs/build": "^2.1.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vue/compiler-sfc": "^3.2.47",
     "pug": "^3.0.2",
-    "sass": "1.60.0",
-    "type-fest": "^3.7.2",
-    "typescript": "^5.0.3",
+    "sass": "1.62.0",
+    "typescript": "^5.0.4",
     "vite": "^4.2.1"
   },
   "types": "types",
-  "gitHead": "e2236a6758c7716a20f8e9fc7c7787521782d6d4",
+  "gitHead": "5c5048b661395268e720b9ec402d4301bb4a34aa",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoAdmin.js

@@ -2,14 +2,19 @@ import { createApp, h as createElement } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import VueNotifications from '@kyvg/vue3-notification'
 import {
-  isString, isArray, asArray, isAbsoluteUrl,
-  merge, hyphenate, camelize,
+  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'
 import DitoRoot from './components/DitoRoot.vue'
-import TypeComponent from './TypeComponent.js'
+import DitoTypeComponent from './DitoTypeComponent.js'
 import { getResource } from './utils/resource.js'
 import { deprecate } from './utils/deprecate.js'
 import verbs from './verbs.js'
@@ -40,6 +45,23 @@ export default class DitoAdmin {
     api.normalizePath ||= api.normalizePaths ? hyphenate : val => val
     api.denormalizePath ||= api.normalizePaths ? camelize : val => val
 
+    // Allow definition of defaults for admin component types, nested per type:
+    // api.defaults = {
+    //   'multiselect': {
+    //     selectable: true
+    //   },
+    //   'fake-type': schema => {
+    //     // Return defaults, or directly modify the schema:
+    //     Object.assign(schema, {
+    //       type: 'real-type',
+    //       format: ({ value }) => `Formatted ${value}`,
+    //       process: ({ value }) => `Processed ${value}`
+    //     })
+    //   }
+    // }
+
+    api.defaults ||= {}
+
     // Allow the configuration of all auth resources, like so:
     // api.users = {
     //   path: '/admins',
@@ -57,7 +79,7 @@ export default class DitoAdmin {
     //     method: 'get'
     //   }
     // }
-    const users = api.users = getResource(api.users, {
+    const users = getResource(api.users, {
       type: 'collection'
     }) || {}
     users.login = getResource(users.login || 'login', {
@@ -72,6 +94,7 @@ export default class DitoAdmin {
       method: 'get',
       parent: users
     })
+    api.users = users
 
     // Allow overriding of resource path handlers:
     // api.resources = {
@@ -127,7 +150,7 @@ export default class DitoAdmin {
       el = document.querySelector(el)
     }
 
-    const app = this.app = createApp({
+    const app = (this.app = createApp({
       components: {
         DitoRoot,
         VueNotifications,
@@ -162,13 +185,14 @@ export default class DitoAdmin {
         $tabComponent: () => null
       },
 
-      render: () => createElement(DitoRoot, {
-        ref: 'root',
-        class: dito.settings.rootClass,
-        unresolvedViews: views,
-        options
-      })
-    })
+      render: () =>
+        createElement(DitoRoot, {
+          ref: 'root',
+          class: dito.settings.rootClass,
+          unresolvedViews: views,
+          options
+        })
+    }))
 
     app.use(VueNotifications, {
       name: 'notify',
@@ -177,32 +201,40 @@ export default class DitoAdmin {
 
     // root.component('vue-modal', VueModal)
 
-    app.use(createRouter({
-      // Start with a catch-all route, to be replaced by the actual routes once
-      // the schemas are loaded, to prevent vue-router from complaining, see:
-      // `resolveViews()` in `DitoRoot` for the actual route setup.
-      routes: [{
-        name: 'catch-all',
-        path: '/:_(.*)',
-        components: {}
-      }],
-      history: createWebHistory(dito.base),
-      linkActiveClass: '',
-      linkExactActiveClass: ''
-    }))
+    app.use(
+      createRouter({
+        // Start with a catch-all route, to be replaced by the actual routes
+        // once the schemas are loaded, to prevent vue-router from complaining,
+        // see: `resolveViews()` in `DitoRoot` for the actual route setup.
+        routes: [
+          {
+            name: 'catch-all',
+            path: '/:_(.*)',
+            components: {}
+          }
+        ],
+        history: createWebHistory(dito.base),
+        linkActiveClass: '',
+        linkExactActiveClass: ''
+      })
+    )
 
     el.classList.add('dito-app')
     app.mount(el)
   }
 
   register(type, options) {
-    return TypeComponent.register(type, options)
+    return DitoTypeComponent.register(type, options)
   }
 }
 
 class RequestError extends Error {
   constructor(response) {
-    super(`Request failed with status code: ${response.status} (${response.statusText})`)
+    super(
+      `Request failed with status code: ${response.status} (${
+        response.statusText
+      })`
+    )
     this.response = response
   }
 }
@@ -218,7 +250,9 @@ async function request(api, {
   data = null
 }) {
   if (params) {
-    deprecate(`request.params is deprecated. Use action.method and action.path instead.`)
+    deprecate(
+      `request.params is deprecated. Use action.method and action.path instead.`
+    )
   }
 
   const isApiUrl = api.isApiUrl(url)
@@ -230,9 +264,10 @@ async function request(api, {
       ...(isApiUrl && api.headers),
       ...headers
     },
-    credentials: isApiUrl && api.cors?.credentials
-      ? 'include'
-      : 'same-origin'
+    credentials:
+      isApiUrl && api.cors?.credentials
+        ? 'include'
+        : 'same-origin'
   })
 
   if (response.headers.get('Content-Type')?.includes('application/json')) {

package/src/DitoComponent.js

@@ -7,9 +7,9 @@ const components = {}
 
 // @vue/component
 export default {
+  mixins: [DitoMixin],
   // Make sure that registered components are present in all DitoComponent.
   components,
-  mixins: [DitoMixin],
 
   component(name, definition) {
     if (definition) {
@@ -22,6 +22,9 @@ export default {
       }
       components[name] = definition
     }
+    if (!(name in components)) {
+      throw new Error(`Component "${name}" not registered`)
+    }
     return components[name]
   },
 

package/src/DitoContext.js

@@ -1,8 +1,12 @@
 import { toRaw } from 'vue'
 import { isFunction } from '@ditojs/utils'
 import {
-  getItemDataPath, getParentItemDataPath, getParentItem, getItem,
-  getLastDataPathName, getLastDataPathIndex
+  getItemDataPath,
+  getParentItemDataPath,
+  getParentItem,
+  getItem,
+  getLastDataPathName,
+  getLastDataPathIndex
 } from './utils/data.js'
 
 const { hasOwnProperty } = Object.prototype
@@ -35,7 +39,9 @@ export default class DitoContext {
   constructor(component, context) {
     // Use the provided params object / function, or create a new one:
     context = context
-      ? (isFunction(context) ? context() : { ...context })
+      ? isFunction(context)
+        ? context()
+        : { ...context }
       : {}
     // If not explicitly set (to false), default to true so we don't fall back
     // to `component` for its value.
@@ -109,8 +115,10 @@ export default class DitoContext {
   // parent. If needed, we could expose this data here too, as we can do all
   // sorts of data processing with `rootData` and `dataPath`.
   get parentItem() {
-    const parentItem =
-      getParentItem(this.rootItem, this.dataPath, this.nested) || null
+    const parentItem = (
+      getParentItem(this.rootItem, this.dataPath, this.nested) ||
+      null
+    )
     return parentItem !== this.item ? parentItem : null
   }
 

package/src/{TypeComponent.js → DitoTypeComponent.js}

@@ -1,7 +1,7 @@
-// TypeComponent is the abstract base component for all other type components
-// inside the types/ folder. There's also a separate concrete
-// `TypeComponent.vue` component, use to render the `type: 'component'` types.
-import { asArray } from '@ditojs/utils'
+// DitoTypeComponent is the abstract base component for all other type
+// components inside the types/ folder. There's also a separate concrete
+// `DitoTypeComponent.vue` component, use to render `{ type: 'component' }`
+import { asArray, camelize } from '@ditojs/utils'
 import DitoComponent from './DitoComponent.js'
 import TypeMixin from './mixins/TypeMixin.js'
 import { registerTypeComponent, getTypeComponent } from './utils/schema.js'
@@ -29,7 +29,10 @@ export default {
 
   register(types, definition = {}) {
     types = asArray(types)
-    const component = this.component(`dito-type-${types[0]}`, definition)
+    const component = this.component(
+      `DitoType${camelize(types[0], true)}`,
+      definition
+    )
     for (const type of types) {
       registerTypeComponent(type, component)
     }

package/src/components/DitoAccount.vue

@@ -4,9 +4,7 @@
     @mousedown.stop="onPulldownMouseDown()"
   )
     span {{ user.username }}
-  ul.dito-pulldown(
-    :class="{ 'dito-open': pulldown.open }"
-  )
+  ul.dito-pulldown(:class="{ 'dito-open': pulldown.open }")
     li(
       v-for="(label, value) of items"
     )
@@ -16,21 +14,12 @@
       ) {{ label }}
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-account
-    position: relative
-    .dito-pulldown
-      top: $pulldown-padding-ver
-</style>
-
 <script>
 import DitoComponent from '../DitoComponent.js'
 import PulldownMixin from '../mixins/PulldownMixin.js'
 
 // @vue/component
-export default DitoComponent.component('dito-account', {
+export default DitoComponent.component('DitoAccount', {
   mixins: [PulldownMixin],
 
   data() {
@@ -45,14 +34,26 @@ export default DitoComponent.component('dito-account', {
   methods: {
     onPulldownSelect(value) {
       switch (value) {
-      case 'logout':
-        this.rootComponent.logout()
-        break
-      case 'settings':
-        console.info('TODO: Implement Settings')
-        break
+        case 'logout':
+          this.rootComponent.logout()
+          break
+        case 'settings':
+          console.info('TODO: Implement Settings')
+          break
       }
     }
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-account {
+  position: relative;
+
+  .dito-pulldown {
+    top: $pulldown-padding-ver;
+  }
+}
+</style>

package/src/components/DitoButtons.vue

@@ -5,7 +5,7 @@
   template(
     v-for="(buttonSchema, buttonDataPath) in buttonSchemas"
   )
-    dito-container(
+    DitoContainer(
       v-if="shouldRender(buttonSchema)"
       :key="buttonDataPath"
       :schema="buttonSchema"
@@ -24,22 +24,16 @@
     .dito-container(
       v-if="hasVNodeContent(vnode)"
     )
-      dito-vnode(:vnode="vnode")
+      DitoVnode(:vnode="vnode")
 </template>
 
-<style lang="sass">
-.dito-buttons
-  > .dito-container
-    padding: 0
-</style>
-
 <script>
 import DitoComponent from '../DitoComponent.js'
 import { appendDataPath } from '../utils/data.js'
 import { hasSlotContent, hasVNodeContent } from '../utils/vue.js'
 
 // @vue/component
-export default DitoComponent.component('dito-buttons', {
+export default DitoComponent.component('DitoButtons', {
   provide: {
     $tabComponent: () => null
   },
@@ -59,9 +53,9 @@ export default DitoComponent.component('dito-buttons', {
       const { dataPath, buttons } = this
       return buttons
         ? Object.values(buttons).reduce((schemas, button) => {
-          schemas[appendDataPath(dataPath, button.name)] = button
-          return schemas
-        }, {})
+            schemas[appendDataPath(dataPath, button.name)] = button
+            return schemas
+          }, {})
         : null
     }
   },
@@ -72,3 +66,11 @@ export default DitoComponent.component('dito-buttons', {
   }
 })
 </script>
+
+<style lang="scss">
+.dito-buttons {
+  > .dito-container {
+    padding: 0;
+  }
+}
+</style>

package/src/components/DitoClipboard.vue

@@ -3,8 +3,8 @@
   v-if="clipboard"
 )
   button.dito-button.dito-button-copy(
-    type="button"
     ref="copyData"
+    type="button"
     title="Copy Data"
     :disabled="!copyEnabled"
     @click="onCopy"
@@ -24,7 +24,7 @@ import DitoContext from '../DitoContext.js'
 import DomMixin from '../mixins/DomMixin.js'
 
 // @vue/component
-export default DitoComponent.component('dito-clipboard', {
+export default DitoComponent.component('DitoClipboard', {
   mixins: [DomMixin],
 
   props: {
@@ -49,18 +49,26 @@ export default DitoComponent.component('dito-clipboard', {
     copyData() {
       const { copy } = this.clipboardOptions
       return copy
-        ? clipboardData => copy.call(this, new DitoContext(this, {
-          clipboardData
-        }))
+        ? clipboardData =>
+            copy.call(
+              this,
+              new DitoContext(this, {
+                clipboardData
+              })
+            )
         : clipboardData => clone(clipboardData)
     },
 
     pasteData() {
       const { paste } = this.clipboardOptions
       return paste
-        ? clipboardData => paste.call(this, new DitoContext(this, {
-          clipboardData
-        }))
+        ? clipboardData =>
+            paste.call(
+              this,
+              new DitoContext(this, {
+                clipboardData
+              })
+            )
         : clipboardData => clipboardData
     }
   },

package/src/components/DitoContainer.vue

@@ -4,7 +4,7 @@
   :class="containerClass"
   :style="containerStyle"
 )
-  dito-label(
+  DitoLabel(
     v-if="label"
     :label="label"
     :dataPath="labelDataPath"
@@ -23,43 +23,9 @@
     :class="componentClass"
     @errors="onErrors"
   )
-  dito-errors(
-    :errors="errors"
-  )
+  DitoErrors(:errors="errors")
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-container
-    // Needed for better vertical alignment:
-    align-self: stretch
-    box-sizing: border-box
-    // To prevent list tables from blowing out of their flex box containers.
-    max-width: 100%
-    // Cannot use margin here as it needs to be part of box-sizing for
-    // percentages in flex-basis to work.
-    padding: $form-spacing $form-spacing-half
-    &:empty
-      padding: 0
-    &.dito-omit-padding
-      padding: 0
-      > .dito-label
-        margin: $form-spacing $form-spacing-half 0
-    &.dito-single
-      height: 100% // So that list buttons can be sticky at the bottom
-  // NOTE: This is not nested inside `.dito-container` so that other
-  // type components can override `.dito-width-fill` class (filter precedence).
-  .dito-component
-    &.dito-width-fill
-      width: 100%
-      &.dito-checkbox,
-      &.dito-radio-button
-        // WebKit doesn't like changed width on checkboxes and radios, override:
-        display: inline-block
-        width: auto
-</style>
-
 <script>
 import { isString, isNumber } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
@@ -69,7 +35,7 @@ import { getTypeComponent, shouldOmitPadding } from '../utils/schema.js'
 import { parseFraction } from '../utils/math.js'
 
 // @vue/component
-export default DitoComponent.component('dito-container', {
+export default DitoComponent.component('DitoContainer', {
   props: {
     schema: { type: Object, required: true },
     dataPath: { type: String, default: '' },
@@ -170,12 +136,13 @@ export default DitoComponent.component('dito-container', {
     componentBasis() {
       const width = this.componentWidth
       // 'auto' = no fitting:
-      const basis = (
-        [null, 'auto', 'fill'].includes(width) ? 'auto'
-        : /%$/.test(width) ? parseFloat(width) // percentage
-        : /[a-z]/.test(width) ? width // native units
-        : parseFraction(width) * 100 // fraction
-      )
+      const basis = [null, 'auto', 'fill'].includes(width)
+        ? 'auto'
+        : /%$/.test(width)
+          ? parseFloat(width) // percentage
+          : /[a-z]/.test(width)
+            ? width // native units
+            : parseFraction(width) * 100 // fraction
       return isNumber(basis) ? `${basis}%` : basis
     },
 
@@ -211,3 +178,49 @@ export default DitoComponent.component('dito-container', {
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-container {
+  // Needed for better vertical alignment:
+  align-self: stretch;
+  box-sizing: border-box;
+  // To prevent list tables from blowing out of their flex box containers.
+  max-width: 100%;
+  // Cannot use margin here as it needs to be part of box-sizing for
+  // percentages in flex-basis to work.
+  padding: $form-spacing $form-spacing-half;
+
+  &:empty {
+    padding: 0;
+  }
+
+  &.dito-omit-padding {
+    padding: 0;
+
+    > .dito-label {
+      margin: $form-spacing $form-spacing-half 0;
+    }
+  }
+
+  &.dito-single {
+    height: 100%; // So that list buttons can be sticky at the bottom;
+  }
+}
+
+// NOTE: This is not nested inside `.dito-container` so that other
+// type components can override `.dito-width-fill` class (filter precedence).
+.dito-component {
+  &.dito-width-fill {
+    width: 100%;
+
+    &.dito-checkbox,
+    &.dito-radio-button {
+      // WebKit doesn't like changed width on checkboxes and radios, override:
+      display: inline-block;
+      width: auto;
+    }
+  }
+}
+</style>