@ditojs/admin 0.265.0 → 0.269.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "0.265.0",
+  "version": "0.269.0",
   "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",
   "main": "dist/dito-admin.umd.min.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -33,13 +33,13 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.3",
-    "@ditojs/ui": "^0.265.0",
-    "@ditojs/utils": "^0.265.0",
-    "axios": "^0.21.1",
+    "@babel/runtime": "^7.15.4",
+    "@ditojs/ui": "^0.269.0",
+    "@ditojs/utils": "^0.269.0",
+    "axios": "^0.21.4",
     "codeflask": "^1.4.1",
-    "core-js": "^3.16.4",
-    "filesize": "^8.0.0",
+    "core-js": "^3.18.0",
+    "filesize": "^8.0.3",
     "filesize-parser": "^1.5.0",
     "hint.css": "^2.6.0",
     "nanoid": "^3.1.25",
@@ -61,16 +61,16 @@
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@ditojs/babel-preset": "^0.265.0",
-    "@ditojs/build": "^0.265.0",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@ditojs/babel-preset": "^0.269.0",
+    "@ditojs/build": "^0.269.0",
     "@vue/cli-plugin-babel": "^4.5.13",
     "@vue/cli-service": "^4.5.13",
     "autoprefixer": "^9.8.6",
     "babel-loader": "^8.2.2",
     "fibers": "^5.0.0",
-    "postcss": "^8.3.6",
+    "postcss": "^8.3.8",
     "postcss-loader": "^4.3.0",
     "pug": "^3.0.2",
     "pug-plain-loader": "^1.1.0",
@@ -78,5 +78,5 @@
     "sass-loader": "^10.2.0",
     "webpack": "^4.46.0"
   },
-  "gitHead": "43c28125d771e6d264b7d2b97e29b9b2642e93f6"
+  "gitHead": "74b214afd5691f27312afbfd034c72de8871eac5"
 }

package/src/DitoAdmin.js

@@ -182,7 +182,8 @@ export default class DitoAdmin {
         $sourceComponent: () => null,
         $resourceComponent: () => null,
         $dialogComponent: () => null,
-        $panelComponent: () => null
+        $panelComponent: () => null,
+        $tabComponent: () => null
       },
 
       render: createElement => createElement(DitoRoot, {
@@ -213,8 +214,8 @@ export default class DitoAdmin {
     return axios.request({
       url,
       method,
-      data: data !== null ? JSON.stringify(data) : null,
       params,
+      ...(data && { data }),
       baseURL: isApiRequest ? this.api.url : null,
       headers: {
         ...(isApiRequest && this.api.headers),

package/src/components/DitoAccount.vue

@@ -9,10 +9,11 @@
     )
       li(
         v-for="(label, value) of items"
-        @mousedown.stop="onPulldownMouseDown(value)"
-        @mouseup="onPulldownMouseUp(value)"
       )
-        a {{ label }}
+        a(
+          @mousedown.stop="onPulldownMouseDown(value)"
+          @mouseup="onPulldownMouseUp(value)"
+        ) {{ label }}
 </template>
 
 <style lang="sass">

package/src/components/DitoButtons.vue

@@ -1,12 +1,10 @@
 <template lang="pug">
-  // NOTE: This is similar to DitoComponents, but uses the DitoButtonContainer
-  // sub-class as the component container for different layout:
   .dito-buttons(
     v-if="buttonSchemas || $slots.default"
     /* Pass on $listeners so that dito-edit-buttons can pass events. */
     v-on="$listeners"
   )
-    dito-button-container(
+    dito-container(
       v-for="(buttonSchema, buttonDataPath) in buttonSchemas"
       v-if="shouldRender(buttonSchema)"
       :key="buttonDataPath"
@@ -19,8 +17,8 @@
       :generateLabels="false"
     )
     // Render each node in the default slot through `dito-vnode`, so it can be
-    // wrapped in a `.dito-button-container` class.
-    .dito-button-container(
+    // wrapped in a `.dito-container` class.
+    .dito-container(
       v-for="node in $slots.default"
       v-if="node.tag"
     )
@@ -34,7 +32,7 @@ import { appendDataPath } from '@/utils/data'
 // @vue/component
 export default DitoComponent.component('dito-buttons', {
   provide: {
-    tabComponent: null
+    $tabComponent: () => null
   },
 
   props: {

package/src/components/DitoClipboard.vue

@@ -36,17 +36,18 @@ export default DitoComponent.component('dito-clipboard', {
   data() {
     return {
       copyEnabled: false,
-      pasteEnabled: false
+      pasteEnabled: false,
+      fixClipboard: true
     }
   },
 
   computed: {
-    clipboardSettings() {
+    clipboardOptions() {
       return isObject(this.clipboard) ? this.clipboard : {}
     },
 
     copyData() {
-      const { copy } = this.clipboardSettings
+      const { copy } = this.clipboardOptions
       return copy
         ? clipboardData => copy.call(this, new DitoContext(this, {
           clipboardData
@@ -55,7 +56,7 @@ export default DitoComponent.component('dito-clipboard', {
     },
 
     pasteData() {
-      const { paste } = this.clipboardSettings
+      const { paste } = this.clipboardOptions
       return paste
         ? clipboardData => paste.call(this, new DitoContext(this, {
           clipboardData
@@ -73,11 +74,15 @@ export default DitoComponent.component('dito-clipboard', {
     this.domOn(window, {
       focus: this.checkClipboard
     })
-    this.$watch('data', this.checkClipboard)
-    // If we already have data (e.g. create form), then check right away also:
-    if (this.data) {
-      this.checkClipboard()
-    }
+    this.$watch('data', {
+      // Check right away also in case there's already data (e.g. create form).
+      immediate: true,
+      handler: (to, from) => {
+        if (to !== from) {
+          this.checkClipboard()
+        }
+      }
+    })
   },
 
   methods: {
@@ -86,6 +91,12 @@ export default DitoComponent.component('dito-clipboard', {
       let { clipboardData } = this.appState
       try {
         const json = await navigator.clipboard?.readText?.()
+        if (this.fixClipboard && json) {
+          // This appears to be needed on Safari to prevent a strange "Paste"
+          // button from appearing when the clipboard is accessed (why?!).
+          await navigator.clipboard?.writeText?.(json)
+          this.fixClipboard = false
+        }
         if (json) {
           clipboardData = JSON.parse(json)
         }

package/src/components/{DitoComponentContainer.vue → DitoContainer.vue}

@@ -1,6 +1,5 @@
 <template lang="pug">
-  // See `containerClass` for the assignment of the class-names to this div:
-  div(
+  .dito-container(
     v-show="componentVisible"
     :class="containerClass"
     :style="containerStyle"
@@ -30,7 +29,7 @@
 </template>
 
 <style lang="sass">
-  .dito-component-container
+  .dito-container
     // Needed for better vertical alignment:
     align-self: stretch
     box-sizing: border-box
@@ -47,7 +46,7 @@
         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-component-container so that other
+  // 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
@@ -68,7 +67,7 @@ import { parseFraction } from '@/utils/math'
 import { isString, isNumber } from '@ditojs/utils'
 
 // @vue/component
-export default DitoComponent.component('dito-component-container', {
+export default DitoComponent.component('dito-container', {
   props: {
     schema: { type: Object, required: true },
     dataPath: { type: String, default: '' },
@@ -156,9 +155,6 @@ export default DitoComponent.component('dito-component-container', {
     containerClass() {
       const { class: containerClass } = this.schema
       return {
-        // Use the component name as its class, so the extended
-        // dito-button-container automatically works too.
-        [this.$options.name]: true,
         'dito-single': this.single,
         'dito-omit-padding': shouldOmitPadding(this.schema),
         ...(

package/src/components/DitoForm.vue

@@ -23,7 +23,6 @@
       :meta="meta"
       :store="store"
       :disabled="isLoading"
-      :selectedTab="selectedTab"
       :menuHeader="true"
     )
       dito-buttons.dito-buttons-round.dito-buttons-main.dito-buttons-large(
@@ -266,6 +265,10 @@ export default DitoComponent.component('dito-form', {
   },
 
   methods: {
+    emitSchemaEvent(event, params) {
+      return this.mainSchemaComponent.emitEvent(event, params)
+    },
+
     getDataPathFrom(route) {
       // Get the data path by denormalizePath the relative route path
       return this.api.denormalizePath(this.path
@@ -305,11 +308,11 @@ export default DitoComponent.component('dito-form', {
 
     // @override ResourceMixin.clearData()
     clearData() {
-      this.setData(null, true)
+      this.setData(null)
     },
 
     // @override ResourceMixin.setData()
-    setData(data, clearing = false) {
+    setData(data) {
       // setData() is called after submit when data has changed.
       if (this.isTransient) {
         // For components with transient data, modify this.sourceData.
@@ -318,9 +321,6 @@ export default DitoComponent.component('dito-form', {
         this.createdData = null
         this.loadedData = data
       }
-      if (!clearing) {
-        this.mainSchemaComponent.onLoad()
-      }
     },
 
     clearClonedData(newValue, oldValue) {
@@ -338,17 +338,18 @@ export default DitoComponent.component('dito-form', {
       return this.navigate(this.parentRouteComponent.path)
     },
 
+    getSubmitVerb(present = true) {
+      return this.isCreating
+        ? present ? 'create' : 'created'
+        : present ? 'submit' : 'submitted'
+    },
+
     async submit(button, { validate = true, closeForm = false } = {}) {
       if (validate && !this.validateAll()) {
         return false
       }
 
-      const getVerb = present => {
-        const verb = this.isCreating
-          ? present ? 'create' : 'created'
-          : present ? 'submit' : 'submitted'
-        return this.verbs[verb]
-      }
+      const getVerb = present => this.verbs[this.getSubmitVerb(present)]
 
       // Allow buttons to override both method and resource path to submit to:
       const butttonResource = getResource(button.schema.resource, {
@@ -360,6 +361,10 @@ export default DitoComponent.component('dito-form', {
       let success
       if (!butttonResource && this.isTransient) {
         success = await this.submitTransient(button, resource, method, data, {
+          onSuccess: () => this.emitSchemaEvent(this.getSubmitVerb()),
+          onError: error => this.emitSchemaEvent('error', {
+            context: { error }
+          }),
           notifySuccess: () => {
             const verb = getVerb(false)
             this.notify({
@@ -387,6 +392,10 @@ export default DitoComponent.component('dito-form', {
       } else {
         success = await this.submitResource(button, resource, method, data, {
           setData: true,
+          onSuccess: () => this.emitSchemaEvent(this.getSubmitVerb()),
+          onError: error => this.emitSchemaEvent('error', {
+            context: { error }
+          }),
           notifySuccess: () => {
             const verb = getVerb(false)
             this.notify({
@@ -421,22 +430,27 @@ export default DitoComponent.component('dito-form', {
       return success
     },
 
-    async submitTransient(button, resource, method, data, {
-      notifyError,
-      notifySuccess
+    async submitTransient(button, _resource, _method, data, {
+      onSuccess,
+      onError,
+      notifySuccess,
+      notifyError
     }) {
       // Handle the default "submitting" of transient, nested data:
       const success = this.isCreating
         ? this.addSourceData(data)
         : this.setSourceData(data)
       if (success) {
+        onSuccess?.()
         await this.emitButtonEvent(button, 'success', {
           notify: notifySuccess
         })
       } else {
+        const error = 'Could not submit transient item'
+        onError?.(error)
         await this.emitButtonEvent(button, 'error', {
           notify: notifyError,
-          error: 'Could not submit transient item'
+          error
         })
       }
       return success

package/src/components/DitoLabel.vue

@@ -90,8 +90,8 @@
   // TODO: Find a better way to control this behavior.
   .dito-schema-compact
     > .dito-schema-content
-      > .dito-components
-        > .dito-component-container
+      > .dito-pane
+        > .dito-container
           > .dito-label:not(.dito-label-component)
             display: inline-block
 </style>

package/src/components/{DitoComponents.vue → DitoPane.vue}

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .dito-components(
+  .dito-pane(
     v-if="isPopulated && componentSchemas.length > 0"
     v-show="visible"
   )
@@ -15,7 +15,7 @@
       .dito-break(
         v-if="schema.break === 'before'"
       )
-      dito-component-container(
+      dito-container(
         v-if="shouldRender(schema)"
         :key="nestedDataPath"
         :schema="schema"
@@ -34,30 +34,28 @@
 </template>
 
 <style lang="sass">
-  // TODO: Consider renaming to `DitoContainer`? That's how it's called in
-  // `DitoSchema`
-  .dito-components
+  .dito-pane
     display: flex
     position: relative
     flex-flow: row wrap
     align-content: flex-start
     align-items: baseline
-    // Remove padding added by .dito-component-container
+    // Remove padding added by `.dito-container`
     margin: (-$form-spacing) (-$form-spacing-half)
     // Add removed horizontal margin again to max-width:
     max-width: $content-width + 2 * $form-spacing-half
-    // Use `flex: 0%` for all `.dito-components` except `.dito-components-main`,
+    // Use `flex: 0%` for all `.dito-pane` except `.dito-pane-main`,
     // so that the `.dito-buttons-main` can be moved all the way to the bottom.
     flex: 0%
 
-    &.dito-components-main
+    &.dito-pane-main
       flex: 100%
 
     .dito-schema-header:not(.dito-schema-menu-header) + &
       // Clear top-margin if the components are preceded by a schema header.
       margin-top: 0
 
-    .dito-component-container.dito-omit-padding > &
+    .dito-container.dito-omit-padding > &
       // Clear margins set above again if parent is omitting padding.
       margin: 0
       max-width: unset
@@ -73,10 +71,10 @@ import { appendDataPath } from '@/utils/data'
 import { getAllPanelSchemas, isNested } from '@/utils/schema'
 
 // @vue/component
-export default DitoComponent.component('dito-components', {
+export default DitoComponent.component('dito-pane', {
   provide() {
     return {
-      tabComponent: this.tabComponent
+      $tabComponent: () => this.tabComponent
     }
   },
 
@@ -95,7 +93,7 @@ export default DitoComponent.component('dito-components', {
 
   computed: {
     tabComponent() {
-      return this.tab ? this : null
+      return this.tab ? this : this.$tabComponent()
     },
 
     componentSchemas() {
@@ -130,21 +128,13 @@ export default DitoComponent.component('dito-components', {
     panelSchemas() {
       // Gather all panel schemas from all component schemas, by finding those
       // that want to provide a panel. See `getAllPanelSchemas()` for details.
-      return this.componentSchemas.reduce(
-        (schemas, { schema, nestedDataPath: dataPath }) => {
-          for (const panel of getAllPanelSchemas(
-            schema,
-            dataPath,
-            this.schemaComponent
-          )) {
-            schemas.push({
-              ...panel,
-              tabComponent: this.tabComponent
-            })
-          }
-          return schemas
-        },
-        []
+      return this.componentSchemas.flatMap(
+        ({ schema, nestedDataPath: dataPath }) => getAllPanelSchemas(
+          schema,
+          dataPath,
+          this.schemaComponent,
+          this.tabComponent
+        )
       )
     },
 
@@ -163,7 +153,7 @@ export default DitoComponent.component('dito-components', {
 
   methods: {
     _register(add) {
-      this.schemaComponent._registerContainer(this, add)
+      this.schemaComponent._registerPane(this, add)
     },
 
     focus() {

package/src/components/DitoPanel.vue

@@ -2,7 +2,7 @@
   // Only show panels in tabs when the tabs are also visible.
   component.dito-panel(
     :is="panelTag"
-    v-show="visible && (!tabComponent || tabComponent.visible)"
+    v-show="visible && (!panelTabComponent || panelTabComponent.visible)"
     @submit.prevent
   )
     label.dito-panel-title {{ getLabel(schema) }}
@@ -56,9 +56,9 @@
         margin: 0
         label
           font-weight: normal
-      .dito-components
+      .dito-pane
         margin: 0 (-$form-spacing-half)
-      .dito-component-container
+      .dito-container
         padding: $form-spacing-half
 </style>
 
@@ -75,7 +75,8 @@ export default DitoComponent.component('dito-panel', {
 
   provide() {
     return {
-      $panelComponent: () => this
+      $panelComponent: () => this,
+      $tabComponent: () => this.panelTabComponent
     }
   },
 
@@ -86,7 +87,7 @@ export default DitoComponent.component('dito-panel', {
     meta: { type: Object, required: true },
     store: { type: Object, required: true },
     disabled: { type: Boolean, required: true },
-    tabComponent: { type: DitoComponent, default: null }
+    panelTabComponent: { type: DitoComponent, default: null }
   },
 
   data() {
@@ -100,6 +101,10 @@ export default DitoComponent.component('dito-panel', {
       return this
     },
 
+    tabComponent() {
+      return this.panelTabComponent
+    },
+
     buttonSchemas() {
       return getButtonSchemas(this.schema.buttons)
     },

package/src/components/DitoPanels.vue

@@ -1,5 +1,7 @@
 <template lang="pug">
-  .dito-panels
+  .dito-panels(
+    v-if="panels.length > 0"
+  )
     dito-panel(
       v-for="{ schema, dataPath, tabComponent } in panels"
       v-if="shouldRender(schema)"
@@ -10,7 +12,7 @@
       :meta="meta"
       :store="getChildStore(schema.name)"
       :disabled="schema.disabled != null ? schema.disabled : disabled"
-      :tabComponent="tabComponent"
+      :panelTabComponent="tabComponent"
     )
 </template>