@ditojs/admin 1.30.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "1.30.0",
+  "version": "2.0.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",
@@ -33,40 +33,55 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/build": "^1.30.0",
-    "@ditojs/ui": "^1.30.0",
-    "@ditojs/utils": "^1.30.0",
+    "@ditojs/ui": "^2.0.0",
+    "@ditojs/utils": "^2.0.0",
+    "@kyvg/vue3-notification": "^2.9.0",
+    "@lk77/vue3-color": "^3.0.6",
+    "@tiptap/core": "^2.0.1",
+    "@tiptap/extension-blockquote": "^2.0.1",
+    "@tiptap/extension-bold": "^2.0.1",
+    "@tiptap/extension-bullet-list": "^2.0.1",
+    "@tiptap/extension-code": "^2.0.1",
+    "@tiptap/extension-code-block": "^2.0.1",
+    "@tiptap/extension-document": "^2.0.1",
+    "@tiptap/extension-hard-break": "^2.0.1",
+    "@tiptap/extension-heading": "^2.0.1",
+    "@tiptap/extension-history": "^2.0.1",
+    "@tiptap/extension-horizontal-rule": "^2.0.1",
+    "@tiptap/extension-italic": "^2.0.1",
+    "@tiptap/extension-link": "^2.0.1",
+    "@tiptap/extension-list-item": "^2.0.1",
+    "@tiptap/extension-ordered-list": "^2.0.1",
+    "@tiptap/extension-paragraph": "^2.0.1",
+    "@tiptap/extension-strike": "^2.0.1",
+    "@tiptap/extension-text": "^2.0.1",
+    "@tiptap/extension-underline": "^2.0.1",
+    "@tiptap/pm": "^2.0.1",
+    "@tiptap/vue-3": "^2.0.1",
     "codeflask": "^1.4.1",
     "filesize": "^10.0.6",
     "filesize-parser": "^1.5.0",
     "nanoid": "^4.0.1",
+    "sortablejs": "^1.15.0",
+    "sortablejs-vue3": "^1.2.8",
     "tinycolor2": "^1.6.0",
-    "tiptap": "^1.32.2",
-    "tiptap-commands": "^1.17.1",
-    "tiptap-extensions": "^1.35.2",
-    "to-pascal-case": "^1.0.0",
-    "vue": "^2.7.14",
-    "vue-color": "^2.8.1",
-    "vue-js-modal": "^2.0.1",
-    "vue-multiselect": "^2.1.7",
-    "vue-notification": "^1.3.20",
-    "vue-router": "^3.6.5",
-    "vue-spinner": "^1.0.4",
-    "vue-template-compiler": "^2.7.14",
-    "vue-upload-component": "^2.8.23",
-    "vuedraggable": "^2.24.3"
+    "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": "^1.19.0",
+    "@ditojs/build": "^2.0.0",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "@vue/compiler-sfc": "^3.2.47",
     "pug": "^3.0.2",
     "sass": "1.59.3",
     "type-fest": "^3.6.1",
     "typescript": "^5.0.2",
-    "vite": "^4.2.1",
-    "vite-plugin-vue2": "^2.0.3"
+    "vite": "^4.2.1"
   },
   "types": "types",
-  "gitHead": "5d09dc24ecb77b511f3c25643275ea1b9514fb52",
+  "gitHead": "dde9462e778bce37bc4fa3e47127a9ba12a4d5e2",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoAdmin.js

@@ -1,7 +1,6 @@
-import Vue from 'vue'
-import VueModal from 'vue-js-modal'
-import VueRouter from 'vue-router'
-import VueNotifications from 'vue-notification'
+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,
@@ -15,19 +14,6 @@ import { getResource } from './utils/resource.js'
 import { deprecate } from './utils/deprecate.js'
 import verbs from './verbs.js'
 
-Vue.config.productionTip = false
-
-// All global plugins that need to be registered on `Vue`:
-Vue.use(VueRouter)
-Vue.use(VueModal, { dynamic: true })
-Vue.use(VueNotifications)
-
-if (import.meta.hot) {
-  // Workaround for a strange Vite hot-reloading bug, see:
-  // https://github.com/vitejs/vite/issues/7839#issuecomment-1340109679
-  import.meta.hot.on('vite:beforeUpdate', onBeforeViteUpdate)
-}
-
 export default class DitoAdmin {
   constructor(el, {
     // `dito` contains the base and api settings passed from `AdminController`
@@ -141,15 +127,17 @@ export default class DitoAdmin {
       el = document.querySelector(el)
     }
 
-    this.root = new Vue({
-      el,
-      router: new VueRouter({
-        mode: 'history',
-        base: dito.base,
-        linkActiveClass: '',
-        linkExactActiveClass: ''
-      }),
-      components: { DitoRoot },
+    const app = this.app = createApp({
+      components: {
+        DitoRoot,
+        VueNotifications,
+        // This may only be needed to avoid tree-shacking of these components,
+        // since they actually handle registry internally already.
+        // TODO: Remove this once we have a better solution.
+        ...components,
+        ...types
+      },
+
       // Most injects are defined as functions, to preserve reactiveness across
       // provide/inject, see:
       // https://github.com/vuejs/vue/issues/7017#issuecomment-480906691
@@ -162,6 +150,7 @@ export default class DitoAdmin {
         //   inject: [  '$isPopulated', '$schemaComponent', '$routeComponent' ]
         $views: () => {},
         $isPopulated: () => true,
+        $parentComponent: () => null,
         $schemaComponent: () => null,
         $schemaParentComponent: () => null,
         $routeComponent: () => null,
@@ -173,23 +162,37 @@ export default class DitoAdmin {
         $tabComponent: () => null
       },
 
-      render: createElement => createElement(DitoRoot, {
-        // Preserve the root container's id, as required by hot-reloading:
-        attrs: {
-          id: el.id
-        },
-        props: {
-          unresolvedViews: views,
-          options
-        },
-        // This may only be needed to avoid tree-shacking of these components,
-        // since they actually handle registry internally already.
-        components: {
-          ...components,
-          ...types
-        }
+      render: () => createElement(DitoRoot, {
+        ref: 'root',
+        class: dito.settings.rootClass,
+        unresolvedViews: views,
+        options
       })
     })
+
+    app.use(VueNotifications, {
+      name: 'notify',
+      componentName: 'VueNotifications'
+    })
+
+    // 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: ''
+    }))
+
+    el.classList.add('dito-app')
+    app.mount(el)
   }
 
   register(type, options) {
@@ -280,20 +283,3 @@ function formatQuery(query) {
     )
   ).toString()
 }
-
-function onBeforeViteUpdate(event) {
-  if (event.type === 'update') {
-    // Patch `event.updates` to remove the version query parameter from path,
-    // so that the update gets picked up.
-    // Why the stored `deps` are missing this part of the URL, I cannot say…
-    const updates = []
-    for (const update of event.updates) {
-      updates.push(update) // Keep the original update.
-      const acceptedPath = update.acceptedPath.replace(/\?v=[0-9a-f]+&/i, '?')
-      if (acceptedPath !== update.acceptedPath) {
-        updates.push({ ...update, acceptedPath })
-      }
-    }
-    event.updates = updates
-  }
-}

package/src/DitoComponent.js

@@ -1,63 +1,31 @@
-import Vue from 'vue'
-import { isFunction, isPromise } from '@ditojs/utils'
 import DitoMixin from './mixins/DitoMixin.js'
-import TypeMixin from './mixins/TypeMixin.js'
 import { getTypeComponent } from './utils/schema.js'
+import { resolveMergedOptions } from './utils/options.js'
+import { isPlainObject } from '@ditojs/utils'
 
 const components = {}
 
-const DitoComponent = Vue.extend({
+// @vue/component
+export default {
   // Make sure that registered components are present in all DitoComponent.
   components,
   mixins: [DitoMixin],
 
-  methods: {
-    getTypeComponent,
-
-    resolveComponent(component, mixins = []) {
-      // A helper method to allow three things:
-      // - When used in a computed property, it removes the need to have to
-      //   load components with async functions `component: () => import(...)`.
-      //   instead, they can be directly provided: `component: import(...)`
-      // - The properties passed to such components don't need to be defined.
-      //   Instead, the provided mixins are automatically inherited.
-      // - The component can use all internal components known to Dito.js Admin.
-      return component
-        ? async () => {
-          // At first, resolve component is it is loaded asynchronously.
-          let comp = isFunction(component) ? await component()
-            : isPromise(component) ? await component
-            : component
-          comp = comp?.default || comp
-          comp.mixins = mixins
-          comp.components = components
-          return comp
-        }
-        : component
-    },
-
-    resolveDitoComponent(component) {
-      return this.resolveComponent(component, [DitoMixin])
-    },
-
-    resolveTypeComponent(component) {
-      return this.resolveComponent(component, [DitoMixin, TypeMixin])
+  component(name, definition) {
+    if (definition) {
+      if (isPlainObject(definition)) {
+        definition = resolveMergedOptions({
+          extends: this,
+          name,
+          ...definition
+        })
+      }
+      components[name] = definition
     }
-  }
-})
+    return components[name]
+  },
 
-DitoComponent.component = function(name, options) {
-  if (options) {
-    options = {
-      name,
-      ...options
-    }
-    const ctor = this.extend(options)
-    components[name] = ctor
-    return ctor
-  } else {
-    return components[name] || Vue.component(name)
+  methods: {
+    getTypeComponent
   }
 }
-
-export default DitoComponent

package/src/DitoContext.js

@@ -1,9 +1,12 @@
+import { toRaw } from 'vue'
 import { isFunction } from '@ditojs/utils'
 import {
   getItemDataPath, getParentItemDataPath, getParentItem, getItem,
   getLastDataPathName, getLastDataPathIndex
 } from './utils/data.js'
 
+const { hasOwnProperty } = Object.prototype
+
 // `DitoContext` instances are a thin wrapper around raw `context` objects,
 // which themselves actually inherit from the linked `component` instance, so
 // that they only need to provide the values that should be different than
@@ -14,10 +17,10 @@ import {
 const contexts = new WeakMap()
 
 function get(context, key, defaultValue) {
-  const object = contexts.get(context)
+  const object = contexts.get(toRaw(context))
   const value = object[key]
   // If `object` explicitly sets the key to `undefined`, return it.
-  return value !== undefined || object.hasOwnProperty(key)
+  return value !== undefined || hasOwnProperty.call(object, key)
     ? value
     : isFunction(defaultValue)
       ? defaultValue()
@@ -25,7 +28,7 @@ function get(context, key, defaultValue) {
 }
 
 function set(context, key, value) {
-  contexts.get(context)[key] = value
+  contexts.get(toRaw(context))[key] = value
 }
 
 export default class DitoContext {
@@ -42,6 +45,7 @@ export default class DitoContext {
     // its values and still retrieve from it, and associate it with `this`
     // through `contexts` map:
     const object = Object.setPrototypeOf(context, component)
+    // No need for `toRaw(this)` here as it's always raw inside the constructor.
     contexts.set(this, object)
   }
 

package/src/TypeComponent.js

@@ -6,7 +6,9 @@ import DitoComponent from './DitoComponent.js'
 import TypeMixin from './mixins/TypeMixin.js'
 import { registerTypeComponent, getTypeComponent } from './utils/schema.js'
 
-const TypeComponent = DitoComponent.extend({
+// @vue/component
+export default {
+  extends: DitoComponent,
   mixins: [TypeMixin],
 
   nativeField: false,
@@ -19,18 +21,18 @@ const TypeComponent = DitoComponent.extend({
   generateLabel: true,
   excludeValue: false,
   ignoreMissingValue: null,
-  omitPadding: false
-})
+  omitPadding: false,
 
-TypeComponent.register = function(types, definition = {}) {
-  types = asArray(types)
-  const component = this.component(`dito-type-${types[0]}`, definition)
-  for (const type of types) {
-    registerTypeComponent(type, component)
-  }
-  return component
-}
+  component: DitoComponent.component,
 
-TypeComponent.get = getTypeComponent
+  get: getTypeComponent,
 
-export default TypeComponent
+  register(types, definition = {}) {
+    types = asArray(types)
+    const component = this.component(`dito-type-${types[0]}`, definition)
+    for (const type of types) {
+      registerTypeComponent(type, component)
+    }
+    return component
+  }
+}

package/src/appState.js

@@ -1,8 +1,10 @@
-export default {
+import { reactive } from 'vue'
+
+export default reactive({
   title: '',
   routeComponents: [],
   user: null,
   loadCache: {}, // See TypeMixin.load()
   activeLabel: null,
   clipboardData: null
-}
+})

package/src/components/DitoAccount.vue

@@ -1,19 +1,19 @@
 <template lang="pug">
-  .dito-account
-    a(
-      @mousedown.stop="onPulldownMouseDown()"
-    )
-      span {{ user.username }}
-    ul.dito-pulldown(
-      :class="{ 'dito-open': pulldown.open }"
+.dito-account
+  a(
+    @mousedown.stop="onPulldownMouseDown()"
+  )
+    span {{ user.username }}
+  ul.dito-pulldown(
+    :class="{ 'dito-open': pulldown.open }"
+  )
+    li(
+      v-for="(label, value) of items"
     )
-      li(
-        v-for="(label, value) of items"
-      )
-        a(
-          @mousedown.stop="onPulldownMouseDown(value)"
-          @mouseup="onPulldownMouseUp(value)"
-        ) {{ label }}
+      a(
+        @mousedown.stop="onPulldownMouseDown(value)"
+        @mouseup="onPulldownMouseUp(value)"
+      ) {{ label }}
 </template>
 
 <style lang="sass">

package/src/components/DitoButtons.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-  .dito-buttons(
-    v-if="buttonSchemas || $slots.default"
-    /* Pass on $listeners so that dito-edit-buttons can pass events. */
-    v-on="$listeners"
+.dito-buttons(
+  v-if="buttonSchemas || hasSlotContent($slots.default)"
+)
+  template(
+    v-for="(buttonSchema, buttonDataPath) in buttonSchemas"
   )
     dito-container(
-      v-for="(buttonSchema, buttonDataPath) in buttonSchemas"
       v-if="shouldRender(buttonSchema)"
       :key="buttonDataPath"
       :schema="buttonSchema"
@@ -16,13 +16,15 @@
       :disabled="disabled"
       :generateLabels="false"
     )
-    // Render each node in the default slot through `dito-vnode`, so it can be
-    // wrapped in a `.dito-container` class.
+  template(
+    v-for="vnode of $slots.default?.()"
+  )
+    //- Render each node in the default slot through `dito-vnode`,
+    //- so it can be wrapped in a `.dito-container` class.
     .dito-container(
-      v-for="node in $slots.default"
-      v-if="node.tag"
+      v-if="hasVNodeContent(vnode)"
     )
-      dito-vnode(:node="node")
+      dito-vnode(:vnode="vnode")
 </template>
 
 <style lang="sass">
@@ -34,6 +36,7 @@
 <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', {
@@ -61,6 +64,11 @@ export default DitoComponent.component('dito-buttons', {
         }, {})
         : null
     }
+  },
+
+  methods: {
+    hasSlotContent,
+    hasVNodeContent
   }
 })
 </script>

package/src/components/DitoClipboard.vue

@@ -1,20 +1,20 @@
 <template lang="pug">
-  .dito-clipboard.dito-buttons.dito-buttons-round(
-    v-if="clipboard"
+.dito-clipboard.dito-buttons.dito-buttons-round(
+  v-if="clipboard"
+)
+  button.dito-button.dito-button-copy(
+    type="button"
+    ref="copyData"
+    title="Copy Data"
+    :disabled="!copyEnabled"
+    @click="onCopy"
+  )
+  button.dito-button.dito-button-paste(
+    type="button"
+    title="Paste Data"
+    :disabled="!pasteEnabled"
+    @click="onPaste"
   )
-    button.dito-button.dito-button-copy(
-      type="button"
-      ref="copyData"
-      title="Copy Data"
-      :disabled="!copyEnabled"
-      @click="onCopy"
-    )
-    button.dito-button.dito-button-paste(
-      type="button"
-      title="Paste Data"
-      :disabled="!pasteEnabled"
-      @click="onPaste"
-    )
 </template>
 
 <script>
@@ -131,7 +131,7 @@ export default DitoComponent.component('dito-clipboard', {
         try {
           const json = JSON.stringify(data, null, 2)
           await navigator.clipboard?.writeText?.(json)
-          // See if we can activate the paste button, dependding on browsers:
+          // See if we can activate the paste button, depending on browsers:
           await this.checkClipboard()
         } catch (err) {
           console.error(err, err.name, err.message)

package/src/components/DitoContainer.vue

@@ -1,31 +1,31 @@
 <template lang="pug">
-  .dito-container(
-    v-show="componentVisible"
-    :class="containerClass"
-    :style="containerStyle"
+.dito-container(
+  v-show="componentVisible"
+  :class="containerClass"
+  :style="containerStyle"
+)
+  dito-label(
+    v-if="label"
+    :label="label"
+    :dataPath="labelDataPath"
+    :class="componentClass"
+  )
+  component.dito-component(
+    :is="typeComponent"
+    :schema="schema"
+    :dataPath="dataPath"
+    :data="data"
+    :meta="meta"
+    :store="store"
+    :single="single"
+    :nested="nested"
+    :disabled="componentDisabled"
+    :class="componentClass"
+    @errors="onErrors"
+  )
+  dito-errors(
+    :errors="errors"
   )
-    dito-label(
-      v-if="label"
-      :label="label"
-      :dataPath="labelDataPath"
-      :class="componentClass"
-    )
-    component.dito-component(
-      :is="getTypeComponent(schema.type)"
-      :schema="schema"
-      :dataPath="dataPath"
-      :data="data"
-      :meta="meta"
-      :store="store"
-      :single="single"
-      :nested="nested"
-      :disabled="componentDisabled"
-      :class="componentClass"
-      @errors="onErrors"
-    )
-    dito-errors(
-      :errors="errors"
-    )
 </template>
 
 <style lang="sass">
@@ -65,7 +65,7 @@ import { isString, isNumber } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import DitoContext from '../DitoContext.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { getTypeOptions, shouldOmitPadding } from '../utils/schema.js'
+import { getTypeComponent, shouldOmitPadding } from '../utils/schema.js'
 import { parseFraction } from '../utils/math.js'
 
 // @vue/component
@@ -93,8 +93,8 @@ export default DitoComponent.component('dito-container', {
       return new DitoContext(this, { nested: this.nested })
     },
 
-    typeOptions() {
-      return getTypeOptions(this.schema) || {}
+    typeComponent() {
+      return getTypeComponent(this.schema.type)
     },
 
     hasLabel() {
@@ -102,7 +102,7 @@ export default DitoComponent.component('dito-container', {
       const { label } = schema
       return (
         label !== false &&
-        (!!label || this.typeOptions.generateLabel && this.generateLabels)
+        (!!label || this.typeComponent?.generateLabel && this.generateLabels)
       )
     },
 
@@ -118,7 +118,7 @@ export default DitoComponent.component('dito-container', {
     componentWidth: getSchemaAccessor('width', {
       type: [String, Number],
       default() {
-        return this.typeOptions.defaultWidth
+        return this.typeComponent?.defaultWidth
       },
       get(width) {
         // Use 100% == 1.0 as default width when nothing is set:
@@ -142,7 +142,7 @@ export default DitoComponent.component('dito-container', {
     componentVisible: getSchemaAccessor('visible', {
       type: Boolean,
       default() {
-        return this.typeOptions.defaultVisible
+        return this.typeComponent?.defaultVisible
       }
     }),