@ditojs/admin 0.265.0 → 0.269.0

package/src/types/TypeMarkup.vue

@@ -491,7 +491,7 @@ export default TypeComponent.register('markup', {
       return list
     },
 
-    focus() {
+    focusElement() {
       this.$el.scrollIntoView?.()
       this.editor.focus()
     }

package/src/types/TypeMultiselect.vue

@@ -290,15 +290,6 @@ export default TypeComponent.register('multiselect', {
       default: false
     }),
 
-    listeners() {
-      // override TypeMixin's listeners to re-route input to onChange()
-      return {
-        focus: this.onFocus,
-        blur: this.onBlur,
-        input: this.onChange
-      }
-    },
-
     placeholder() {
       const { placeholder, searchable, taggable } = this.schema
       return placeholder || (
@@ -318,6 +309,16 @@ export default TypeComponent.register('multiselect', {
   },
 
   methods: {
+    // @override
+    getListeners() {
+      // override `TypeMixin.getListeners()` to re-route 'input' to `onChange()`
+      return {
+        focus: this.onFocus,
+        blur: this.onBlur,
+        input: this.onChange
+      }
+    },
+
     addTagOption(tag) {
       if (this.taggable) {
         const { optionLabel, optionValue } = this
@@ -334,7 +335,7 @@ export default TypeComponent.register('multiselect', {
       }
     },
 
-    focus() {
+    focusElement() {
       this.$refs.element.activate()
     },
 

package/src/types/TypeSection.vue

@@ -2,7 +2,7 @@
   .dito-section(
     :class="{ 'dito-section-labelled' : !!schema.label }"
   )
-    dito-components.dito-section-components(
+    dito-pane.dito-section-pane(
       :schema="getItemFormSchema(schema, item, context)"
       :dataPath="dataPath"
       :data="item"

package/src/types/TypeTreeList.vue

@@ -52,9 +52,7 @@ export default TypeComponent.register([
   mixins: [SourceMixin],
 
   provide() {
-    return {
-      container: this
-    }
+    return { container: this }
   },
 
   getSourceType(type) {

package/src/types/TypeUpload.vue

@@ -233,7 +233,7 @@ export default TypeComponent.register('upload', {
         this.notify({
           type: 'info',
           title: 'Successfully Removed',
-          text: `${name} was ${this.verbs.removed}.`
+          text: `${name} was ${this.verbs.deleted}.`
         })
       }
     },

package/src/utils/accessor.js

@@ -48,6 +48,8 @@ export function getStoreAccessor(name, { default: def, get, set } = {}) {
         value = isFunction(def) ? def.call(this, this.context) : def
         // Trigger setter by setting value and accessor to default:
         this[name] = value
+        // Now access store again, for reactivity tracking
+        this.getStore(name)
       }
       // Allow the provided getter to further change or process the value
       // retrieved from the store:

package/src/utils/schema.js

@@ -653,7 +653,7 @@ export function getSourceType(schemaOrType) {
   ) ?? null
 }
 
-export function getPanelSchema(schema, dataPath) {
+export function getPanelSchema(schema, dataPath, tabComponent) {
   return schema
     ? {
       schema,
@@ -661,15 +661,20 @@ export function getPanelSchema(schema, dataPath) {
       // This is used e.g. for $filters panels.
       dataPath: schema.name
         ? appendDataPath(dataPath, schema.name)
-        : dataPath
+        : dataPath,
+      tabComponent
     }
     : null
 }
 
-export function getPanelSchemas(schemas, dataPath, panels = []) {
+export function getPanelSchemas(schemas, dataPath, tabComponent, panels = []) {
   if (schemas) {
     for (const [key, schema] of Object.entries(schemas)) {
-      const panel = getPanelSchema(schema, appendDataPath(dataPath, key))
+      const panel = getPanelSchema(
+        schema,
+        appendDataPath(dataPath, key),
+        tabComponent
+      )
       if (panel) {
         panels.push(panel)
       }
@@ -678,16 +683,21 @@ export function getPanelSchemas(schemas, dataPath, panels = []) {
   return panels
 }
 
-export function getAllPanelSchemas(schema, dataPath, schemaComponent = null) {
+export function getAllPanelSchemas(
+  schema,
+  dataPath,
+  schemaComponent = null,
+  tabComponent = null
+) {
   const panel = getTypeOptions(schema)?.getPanelSchema?.(
     schema,
     dataPath,
     schemaComponent
   )
-  const panels = panel ? [getPanelSchema(panel, dataPath)] : []
+  const panels = panel ? [getPanelSchema(panel, dataPath, tabComponent)] : []
   // Allow each component to provide its own set of panels, in
   // addition to the default one (e.g. $filter):
-  getPanelSchemas(schema.panels, dataPath, panels)
+  getPanelSchemas(schema.panels, dataPath, tabComponent, panels)
   return panels
 }
 

package/src/components/DitoButtonContainer.vue

@@ -1,22 +0,0 @@
-<script>
-import DitoComponentContainer from './DitoComponentContainer'
-
-// NOTE: DitoButtonContainer extends DitoComponentContainer and changes the
-// behavior of computed properties for use with buttons.
-// @vue/component
-export default DitoComponentContainer.component('dito-button-container', {
-  computed: {
-    width() {
-      // Override DitoComponentContainer's width() to never use a default width:
-      return this.schema.width
-    },
-
-    containerStyle() {
-      // Remove 'flex-grow' from DitoComponentContainer's containerStyle()
-      return {
-        'flex-basis': this.percentage && `${this.percentage}%`
-      }
-    }
-  }
-})
-</script>