@ditojs/admin 2.2.1 → 2.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "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,7 +33,7 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.2.0",
+    "@ditojs/ui": "^2.2.3",
     "@ditojs/utils": "^2.2.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
@@ -73,16 +73,16 @@
     "vue-upload-component": "^3.1.8"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.2.0",
+    "@ditojs/build": "^2.2.3",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vue/compiler-sfc": "^3.2.47",
     "pug": "^3.0.2",
     "sass": "1.62.0",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1"
+    "vite": "^4.3.1"
   },
   "types": "types",
-  "gitHead": "306d4d9ef2a0c989b026f1d1cd77f6d4fd60430b",
+  "gitHead": "7102747103c7d60e9fffca44ca6ae459bea67cc1",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoAdmin.js

@@ -3,8 +3,6 @@ import { createRouter, createWebHistory } from 'vue-router'
 import VueNotifications from '@kyvg/vue3-notification'
 import {
   isString,
-  isArray,
-  asArray,
   isAbsoluteUrl,
   merge,
   hyphenate,
@@ -17,6 +15,7 @@ import DitoRoot from './components/DitoRoot.vue'
 import DitoTypeComponent from './DitoTypeComponent.js'
 import { getResource } from './utils/resource.js'
 import { deprecate } from './utils/deprecate.js'
+import { formatQuery } from './utils/route.js'
 import verbs from './verbs.js'
 
 export default class DitoAdmin {
@@ -297,24 +296,3 @@ 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/DitoMenu.vue

@@ -5,18 +5,30 @@ nav.dito-menu.dito-scroll-parent
     li(
       v-for="view in views"
     )
-      RouterLink.dito-link(
+      RouterLink(
         v-if="shouldRender(view)"
+        v-slot="{ isActive, href, route }"
+        custom
         :to="`/${view.path}`"
-        activeClass="dito-active"
-      ) {{ getLabel(view) }}
+      )
+        a.dito-link(
+          :href="href"
+          :class="{ 'dito-active': isActive }"
+          @click.prevent="onClickLink(route)"
+        ) {{ getLabel(view) }}
 </template>
 
 <script>
 import DitoComponent from '../DitoComponent.js'
 
 // @vue/component
-export default DitoComponent.component('DitoMenu', {})
+export default DitoComponent.component('DitoMenu', {
+  methods: {
+    onClickLink(route) {
+      this.$router.push({ ...route, force: true })
+    }
+  }
+})
 </script>
 
 <style lang="scss">

package/src/components/DitoPane.vue

@@ -101,6 +101,7 @@ export default DitoComponent.component('DitoPane', {
       return this.componentSchemas.flatMap(
         ({ schema, nestedDataPath: dataPath }) =>
           getAllPanelEntries(
+            this.api,
             schema,
             dataPath,
             this.schemaComponent,
@@ -118,7 +119,7 @@ export default DitoComponent.component('DitoPane', {
     this._register(true)
   },
 
-  beforeUnmount() {
+  unmounted() {
     this._register(false)
   },
 

package/src/components/DitoPanel.vue

@@ -5,8 +5,7 @@ component.dito-panel(
   :is="panelTag"
   @submit.prevent
 )
-  label.dito-panel-title {{ getLabel(schema) }}
-  DitoSchema.dito-panel-schema(
+  DitoSchema.dito-panel__schema(
     :schema="panelSchema"
     :dataPath="panelDataPath"
     :data="panelData"
@@ -15,6 +14,17 @@ component.dito-panel(
     :disabled="disabled"
     :hasOwnData="hasOwnData"
   )
+    template(#before)
+      h2.dito-panel__header(:class="{ 'dito-panel__header--sticky': sticky }")
+        span {{ getLabel(schema) }}
+        DitoButtons.dito-buttons-small(
+          :buttons="panelButtonSchemas"
+          :dataPath="panelDataPath"
+          :data="panelData"
+          :meta="meta"
+          :store="store"
+          :disabled="disabled"
+        )
     template(#buttons)
       DitoButtons(
         :buttons="buttonSchemas"
@@ -73,6 +83,10 @@ export default DitoComponent.component('DitoPanel', {
       return getButtonSchemas(this.schema.buttons)
     },
 
+    panelButtonSchemas() {
+      return getButtonSchemas(this.schema.panelButtons)
+    },
+
     target() {
       return this.schema.target || this.dataPath
     },
@@ -111,6 +125,11 @@ export default DitoComponent.component('DitoPanel', {
     visible: getSchemaAccessor('visible', {
       type: Boolean,
       default: true
+    }),
+
+    sticky: getSchemaAccessor('sticky', {
+      type: Boolean,
+      default: false
     })
   },
 
@@ -126,7 +145,7 @@ export default DitoComponent.component('DitoPanel', {
     }
   },
 
-  beforeUnmount() {
+  unmounted() {
     this._register(false)
   },
 
@@ -144,19 +163,53 @@ export default DitoComponent.component('DitoPanel', {
 @import '../styles/_imports';
 
 .dito-panel {
-  margin-bottom: $content-padding;
+  padding-bottom: $content-padding;
 
-  .dito-panel-title {
+  &__header {
     display: block;
+    position: relative;
     box-sizing: border-box;
     padding: $input-padding;
     background: $button-color;
     border: $border-style;
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
+
+    &--sticky {
+      $margin: $input-height-factor * $line-height * $font-size-small +
+        $form-spacing;
+
+      position: sticky;
+      top: $content-padding;
+      margin-bottom: $margin;
+      z-index: 1;
+
+      & + * {
+        margin-top: -$margin;
+      }
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        background: $content-color-background;
+        left: 0;
+        right: 0;
+        height: $content-padding;
+        top: -$content-padding;
+        margin: -$border-width;
+      }
+    }
+
+    .dito-buttons {
+      position: absolute;
+      right: $input-padding-ver;
+      top: 50%;
+      transform: translateY(-50%);
+    }
   }
 
-  .dito-panel-schema {
+  &__schema {
     font-size: $font-size-small;
     background: $content-color-background;
     border: $border-style;
@@ -167,16 +220,24 @@ export default DitoComponent.component('DitoPanel', {
     > .dito-schema-content {
       padding: $form-spacing-half $form-spacing;
 
+      .dito-container {
+        padding: $form-spacing-half;
+      }
+
+      .dito-object {
+        border: 0;
+        padding: 0;
+      }
+
       > .dito-buttons {
         --button-margin: #{$form-spacing};
 
         padding: $form-spacing-half 0;
-      }
-    }
 
-    .dito-object {
-      border: 0;
-      padding: 0;
+        .dito-container {
+          padding: 0;
+        }
+      }
     }
 
     .dito-label {
@@ -190,10 +251,6 @@ export default DitoComponent.component('DitoPanel', {
     .dito-pane {
       margin: 0 (-$form-spacing-half);
     }
-
-    .dito-container {
-      padding: $form-spacing-half;
-    }
   }
 }
 </style>

package/src/components/DitoRoot.vue

@@ -212,8 +212,16 @@ export default DitoComponent.component('DitoRoot', {
           ...additionalComponents
         },
         buttons: {
-          cancel: {},
-          login: { type: 'submit' }
+          cancel: {
+            type: 'button',
+            text: 'Cancel'
+            // NOTE: The click event is added in DitoDialog.buttonSchemas()
+          },
+
+          login: {
+            type: 'submit',
+            text: 'Login'
+          }
         }
       })
       if (loginData) {

package/src/components/DitoSchema.vue

@@ -1,5 +1,8 @@
 <template lang="pug">
-.dito-schema
+slot(name="before")
+.dito-schema(
+  v-bind="$attrs"
+)
   .dito-schema-content
     .dito-schema-header(
       v-if="hasLabel || hasTabs || clipboard"
@@ -81,6 +84,7 @@
       :store="store"
       :disabled="disabled"
     )
+slot(name="after")
 </template>
 
 <script>
@@ -334,7 +338,7 @@ export default DitoComponent.component('DitoSchema', {
     this.emitEvent('initialize') // Not `'create'`, since that's for data.
   },
 
-  beforeUnmount() {
+  unmounted() {
     this.emitEvent('destroy')
     this._register(false)
   },

package/src/mixins/DataMixin.js

@@ -98,13 +98,16 @@ export default {
     },
 
     async resolveData(load, loadingOptions = {}) {
-      this.setLoading(true, loadingOptions)
+      // Use a timeout to allow already resolved promises to return data without
+      // showing a loading indicator.
+      const timer = setTimeout(() => this.setLoading(true, loadingOptions), 0)
       let data = null
       try {
         data = await (isFunction(load) ? load() : load)
       } catch (error) {
         this.addError(error.message || error)
       }
+      clearTimeout(timer)
       this.setLoading(false, loadingOptions)
       return data
     }

package/src/mixins/DitoMixin.js

@@ -176,6 +176,8 @@ export default {
   },
 
   methods: {
+    labelize,
+
     // The state of components is only available during the life-cycle of a
     // component. Some information we need available longer than that, e.g.
     // `query` & `total` on TypeList, so that when the user navigates back from
@@ -245,13 +247,10 @@ export default {
         : labelize(name) || ''
     },
 
-    labelize,
-
-    getButtonAttributes(name, button) {
-      const verb = this.verbs[name] || name
+    getButtonAttributes(verb) {
       return {
         class: `dito-button-${verb}`,
-        title: button?.text || labelize(verb)
+        title: labelize(verb)
       }
     },
 

package/src/mixins/DomMixin.js

@@ -9,7 +9,7 @@ export default {
     }
   },
 
-  beforeUnmount() {
+  unmounted() {
     for (const { remove } of this.domHandlers) {
       remove()
     }

package/src/mixins/NumberMixin.js

@@ -25,7 +25,13 @@ export default {
     },
 
     stepValue() {
-      return this.step == null && !this.isInteger ? 'any' : this.step
+      // Don't show steps if the input is also clearable, since the step buttons
+      // would collide with the clear button.
+      return this.clearable
+        ? null
+        : this.step == null && !this.isInteger
+          ? 'any'
+          : this.step
     },
 
     decimals: getSchemaAccessor('decimals', {

package/src/mixins/SourceMixin.js

@@ -3,6 +3,7 @@ import ResourceMixin from './ResourceMixin.js'
 import SchemaParentMixin from '../mixins/SchemaParentMixin.js'
 import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
 import { getMemberResource } from '../utils/resource.js'
+import { replaceRoute } from '../utils/route.js'
 import {
   processRouteSchema,
   processForms,
@@ -43,8 +44,7 @@ export default {
   data() {
     return {
       wrappedPrimitives: null,
-      unwrappingPrimitives: false,
-      ignoreRouteChange: false
+      unwrappingPrimitives: false
     }
   },
 
@@ -177,9 +177,9 @@ export default {
           ...query
         }
         if (!equals(query, this.$route.query)) {
-          // Tell the `$route` watcher to ignore the changed triggered here:
-          this.ignoreRouteChange = true
-          this.$router.replace({ query, hash: this.$route.hash })
+          // Change the route query parameters, but don't trigger a route
+          // change, as that would cause the list to reload.
+          replaceRoute({ query })
         }
         return query // Let getStoreAccessor() do the actual setting
       }
@@ -314,10 +314,6 @@ export default {
 
   watch: {
     $route(to, from) {
-      if (this.ignoreRouteChange) {
-        this.ignoreRouteChange = false
-        return
-      }
       if (from.path === to.path && from.hash === to.hash) {
         // Paths and hashes remain the same, so only queries have changed.
         // Update filter and reload data without clearing.

package/src/mixins/TypeMixin.js

@@ -229,7 +229,7 @@ export default {
     this.setupSchemaFields()
   },
 
-  beforeUnmount() {
+  unmounted() {
     this._register(false)
   },
 

package/src/styles/_button.scss

@@ -63,6 +63,10 @@
   content: 'Edit';
 }
 
+.dito-button-clear:empty::before {
+  content: 'Clear';
+}
+
 .dito-button-save:empty::before {
   content: 'Save';
 }
@@ -159,6 +163,10 @@
       @extend %icon-edit;
     }
 
+    .dito-button-clear:empty::before {
+      @extend %icon-clear;
+    }
+
     .dito-button-drag:empty::before {
       @extend %icon-drag;
     }

package/src/types/DitoTypeButton.vue

@@ -3,7 +3,7 @@ button.dito-button(
   :id="dataPath"
   ref="element"
   :type="type"
-  :title="text"
+  :title="title"
   :class="buttonClass"
   v-bind="attributes"
 ) {{ text }}
@@ -34,12 +34,13 @@ export default DitoTypeComponent.register(
       },
 
       text: getSchemaAccessor('text', {
-        type: String,
-        get(text) {
-          return text || labelize(this.verb)
-        }
+        type: String
       }),
 
+      title() {
+        return this.text || labelize(this.verb)
+      },
+
       closeForm: getSchemaAccessor('closeForm', {
         type: Boolean,
         default: false

package/src/types/DitoTypeCode.vue

@@ -110,10 +110,6 @@ export default DitoTypeComponent.register('code', {
   // for proper line-height calculation.
   padding: $input-padding;
 
-  &.dito-width-fill {
-    width: auto;
-  }
-
   .codeflask {
     background: none;
     // Ignore the parent padding defined above which is only needed to set

package/src/types/DitoTypeList.vue

@@ -156,12 +156,11 @@ import DitoContext from '../DitoContext.js'
 import SourceMixin from '../mixins/SourceMixin.js'
 import SortableMixin from '../mixins/SortableMixin.js'
 import {
-  getNamedSchemas,
   getViewEditPath,
   resolveSchemaComponent,
   resolveSchemaComponents
 } from '../utils/schema.js'
-import { getFiltersPanel } from '../utils/filter.js'
+import { createFiltersPanel } from '../utils/filter.js'
 import { appendDataPath } from '../utils/data.js'
 import { pickBy, equals, hyphenate } from '@ditojs/utils'
 
@@ -175,7 +174,7 @@ export default DitoTypeComponent.register('list', {
     return type
   },
 
-  getPanelSchema(schema, dataPath, schemaComponent) {
+  getPanelSchema(api, schema, dataPath, schemaComponent) {
     const { filters } = schema
     // See if this list component wants to display a filter panel, and if so,
     // create the panel schema for it through `getFiltersPanel()`.
@@ -189,27 +188,23 @@ export default DitoTypeComponent.register('list', {
           component => component.type === 'list'
         )
 
-      return getFiltersPanel(
-        getNamedSchemas(filters),
-        dataPath,
-        {
-          // Create a simple proxy to get / set the query, see getFiltersPanel()
-          get query() {
-            return getListComponent()?.query
-          },
-          set query(query) {
-            const component = getListComponent()
-            if (component) {
-              // Filter out undefined values for comparing with equals()
-              const filter = obj => pickBy(obj, value => value !== undefined)
-              if (!equals(filter(query), filter(component.query))) {
-                component.query = query
-                component.loadData(false)
-              }
+      return createFiltersPanel(api, filters, dataPath, {
+        // Create a simple proxy to get / set the query, see getFiltersPanel()
+        get query() {
+          return getListComponent()?.query
+        },
+        set query(query) {
+          const component = getListComponent()
+          if (component) {
+            // Filter out undefined values for comparing with equals()
+            const filter = obj => pickBy(obj, value => value !== undefined)
+            if (!equals(filter(query), filter(component.query))) {
+              component.query = query
+              component.loadData(false)
             }
           }
         }
-      )
+      })
     }
   },
 

package/src/types/DitoTypeMarkup.vue

@@ -262,7 +262,7 @@ export default DitoTypeComponent.register('markup', {
     })
   },
 
-  beforeUnmount() {
+  unmounted() {
     this.editor.destroy()
   },
 

package/src/types/DitoTypeNumber.vue

@@ -9,6 +9,12 @@ InputField.dito-number(
   :max="max"
   :step="stepValue"
 )
+  template(#after)
+    button.dito-button-clear.dito-button-overlay(
+      v-if="showClearButton"
+      :disabled="disabled"
+      @click.stop="clear"
+    )
 </template>
 
 <script>

package/src/types/DitoTypePanel.vue

@@ -9,7 +9,7 @@ export default DitoTypeComponent.register('panel', {
   alignBottom: false,
   omitPadding: true,
 
-  getPanelSchema(schema) {
+  getPanelSchema(api, schema) {
     // For a TypePanel, the component schema is also the panel schema, but
     // remove the added name, so it doesn't get appended twice to data-path.
     const { name, ...panel } = schema

package/src/types/DitoTypeText.vue

@@ -6,6 +6,12 @@ InputField.dito-text(
   :type="inputType"
   v-bind="attributes"
 )
+  template(#after)
+    button.dito-button-clear.dito-button-overlay(
+      v-if="showClearButton"
+      :disabled="disabled"
+      @click.stop="clear"
+    )
 </template>
 
 <script>