@ditojs/admin 2.3.0 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "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.3.0",
+    "@ditojs/ui": "^2.3.1",
     "@ditojs/utils": "^2.3.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
@@ -83,7 +83,7 @@
     "vite": "^4.3.1"
   },
   "types": "types",
-  "gitHead": "81398b333e755f30b2c3c1998c8879a3e87f7873",
+  "gitHead": "1b5f5121a2e8e6d3741f0bb2b81d38c2343810d6",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoEditButtons.vue

@@ -10,23 +10,25 @@ DitoButtons.dito-edit-buttons.dito-buttons-round(
 )
   //- Firefox doesn't like <button> here, so use <a> instead:
   a.dito-button(
-    v-if="isDraggable"
+    v-if="hasDraggable"
     v-bind="getButtonAttributes(verbs.drag)"
   )
   RouterLink.dito-button(
-    v-if="isEditable"
-    :to="{ path: editPath }"
+    v-if="hasEditable"
+    :class="{ 'dito-disabled': !editPath }"
+    :to="editPath ? { path: editPath } : {}"
     v-bind="getButtonAttributes(verbs.edit)"
   )
   DitoCreateButton(
-    v-if="isCreatable"
+    v-if="hasCreatable"
+    :class="{ 'dito-disabled': !createPath }"
     :schema="schema"
     :path="createPath"
     :verb="verbs.create"
     :text="createButtonText"
   )
   button.dito-button(
-    v-if="isDeletable"
+    v-if="hasDeletable"
     type="button"
     v-bind="getButtonAttributes(verbs.delete)"
     @click="$emit('delete')"
@@ -61,19 +63,19 @@ export default DitoComponent.component('DitoEditButtons', {
       return this.getLabel(this.schema.form)
     },
 
-    isDraggable() {
+    hasDraggable() {
       return this.hasOption('draggable')
     },
 
-    isEditable() {
-      return this.hasOption('editable') && !!this.editPath
+    hasEditable() {
+      return this.hasOption('editable')
     },
 
-    isCreatable() {
-      return this.hasOption('creatable') && !!this.createPath
+    hasCreatable() {
+      return this.hasOption('creatable')
     },
 
-    isDeletable() {
+    hasDeletable() {
       return this.hasOption('deletable')
     },
 

package/src/components/DitoForm.vue

@@ -289,8 +289,9 @@ export default DitoComponent.component('DitoForm', {
       if (
         param &&
         this.providesData &&
-        from.params[param] !== 'create' &&
-        to.params[param] !== from.params[param]
+        from.matched[0].path === to.matched[0].path && // Staying on same form?
+        from.params[param] !== 'create' && // But haven't been creating?
+        to.params[param] !== from.params[param] // Going to a different entity?
       ) {
         this.loadData(true)
       }

package/src/components/DitoPanel.vue

@@ -224,10 +224,10 @@ export default DitoComponent.component('DitoPanel', {
     > .dito-schema-content {
       > .dito-pane {
         padding: $form-spacing-half $form-spacing;
-      }
 
-      .dito-container {
-        padding: $form-spacing-half;
+        > .dito-container {
+          padding: $form-spacing-half;
+        }
       }
 
       .dito-object {

package/src/mixins/OptionsMixin.js

@@ -1,5 +1,6 @@
 import DitoContext from '../DitoContext.js'
 import DataMixin from './DataMixin.js'
+import { hasViewSchema, getViewEditPath } from '../utils/schema.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { setTemporaryId, isReference } from '../utils/data.js'
 import {
@@ -145,6 +146,23 @@ export default {
       }
     }),
 
+    editable: getSchemaAccessor('editable', {
+      type: Boolean,
+      default: false,
+      get(editable) {
+        return (
+          editable &&
+          hasViewSchema(this.schema, this.context)
+        )
+      }
+    }),
+
+    editPath() {
+      return this.editable && this.selectedValue
+        ? getViewEditPath(this.schema, this.selectedValue, this.context)
+        : null
+    },
+
     groupByLabel() {
       return this.groupBy ? 'label' : null
     },

package/src/styles/_button.scss

@@ -191,18 +191,18 @@
   cursor: pointer;
 
   &.dito-button-clear {
+    $self: &;
+
     width: $input-height;
     z-index: 1;
     background: $color-white;
     display: none;
 
-    $button-clear: &;
-
     @at-root .dito-component:hover {
       // Support two levels of nesting inside .dito-component, used by TypeColor
-      & > #{$button-clear},
-      & > * > #{$button-clear},
-      & > * > * > #{$button-clear} {
+      & > #{$self},
+      & > * > #{$self},
+      & > * > * > #{$self} {
         display: block;
       }
     }

package/src/types/DitoTypeButton.vue

@@ -98,10 +98,6 @@ export default DitoTypeComponent.register(
 .dito-button {
   $self: &;
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
   &__text {
     position: relative;
     min-width: min-content;

package/src/types/DitoTypeList.vue

@@ -251,9 +251,11 @@ export default DitoTypeComponent.register('list', {
 
     getEditPath(item, index) {
       if (this.editable) {
-        const path = getViewEditPath(this.schema, this.context) || this.path
         const id = this.getItemId(this.schema, item, index)
-        return `${path}/${id}`
+        return (
+          getViewEditPath(this.schema, id, this.context) ||
+          `${this.path}/${id}`
+        )
       }
       return null
     },

package/src/types/DitoTypeMultiselect.vue

@@ -5,37 +5,48 @@
     'dito-multiselect-multiple': multiple
   }`
 )
-  VueMultiselect(
-    ref="element"
-    v-model="selectedOptions"
-    :class="{ 'multiselect--show-highlight': showHighlight }"
-    :showLabels="false"
-    :placeholder="placeholder"
-    tagPlaceholder="Press enter to add new tag"
-    :options="populate && activeOptions || []"
-    :customLabel="getLabelForOption"
-    :trackBy="optionValue"
-    :groupLabel="groupByLabel"
-    :groupValues="groupByOptions"
-    :multiple="multiple"
-    :taggable="taggable"
-    :searchable="searchable"
-    :internalSearch="!searchFilter"
-    :preserveSearch="!!searchFilter"
-    :clearOnSelect="!searchFilter"
-    :closeOnSelect="!stayOpen"
-    :loading="isLoading"
-    v-bind="attributes"
-    @open="onOpen"
-    @close="onClose"
-    @tag="onAddTag"
-    @search-change="onSearchChange"
-  )
-  button.dito-button-clear.dito-button-overlay(
-    v-if="showClearButton"
-    type="button"
-    :disabled="disabled"
-    @click="clear"
+  .dito-multiselect__inner
+    VueMultiselect(
+      ref="element"
+      v-model="selectedOptions"
+      :class="{ 'multiselect--show-highlight': showHighlight }"
+      :showLabels="false"
+      :placeholder="placeholder"
+      tagPlaceholder="Press enter to add new tag"
+      :options="populate && activeOptions || []"
+      :customLabel="getLabelForOption"
+      :trackBy="optionValue"
+      :groupLabel="groupByLabel"
+      :groupValues="groupByOptions"
+      :multiple="multiple"
+      :taggable="taggable"
+      :searchable="searchable"
+      :internalSearch="!searchFilter"
+      :preserveSearch="!!searchFilter"
+      :clearOnSelect="!searchFilter"
+      :closeOnSelect="!stayOpen"
+      :loading="isLoading"
+      v-bind="attributes"
+      @open="onOpen"
+      @close="onClose"
+      @tag="onAddTag"
+      @search-change="onSearchChange"
+    )
+    button.dito-button-clear.dito-button-overlay(
+      v-if="showClearButton"
+      type="button"
+      :disabled="disabled"
+      @click="clear"
+    )
+  DitoEditButtons(
+    v-if="editable"
+    :editable="editable"
+    :editPath="editPath"
+    :schema="schema"
+    :dataPath="dataPath"
+    :data="data"
+    :meta="meta"
+    :store="store"
   )
 </template>
 
@@ -218,12 +229,20 @@ $tag-padding: 3px;
 $tag-line-height: 1em;
 
 .dito-multiselect {
+  display: inline-flex;
   position: relative;
 
+  &__inner {
+    flex: 1;
+    position: relative;
+  }
+
+  // TODO: BEM
   &.dito-multiselect-single {
     --input-width: 100%;
   }
 
+  // TODO: BEM
   &.dito-multiselect-multiple {
     --input-width: auto;
   }
@@ -234,6 +253,10 @@ $tag-line-height: 1em;
     }
   }
 
+  .dito-edit-buttons {
+    margin-left: $form-spacing-half;
+  }
+
   .dito-button-clear {
     width: $spinner-width;
   }

package/src/types/DitoTypeSelect.vue

@@ -1,40 +1,51 @@
 <template lang="pug">
 //- Nesting is needed to make an arrow appear over the select item:
 .dito-select
-  select(
-    :id="dataPath"
-    ref="element"
-    v-model="selectedValue"
-    v-bind="attributes"
-    @mousedown="populate = true"
-    @focus="populate = true"
-  )
-    template(
-      v-if="populate"
+  .dito-select__inner
+    select(
+      :id="dataPath"
+      ref="element"
+      v-model="selectedValue"
+      v-bind="attributes"
+      @mousedown="populate = true"
+      @focus="populate = true"
     )
       template(
-        v-for="option in options"
+        v-if="populate"
       )
-        optgroup(
-          v-if="groupBy"
-          :label="option[groupByLabel]"
+        template(
+          v-for="option in options"
         )
+          optgroup(
+            v-if="groupBy"
+            :label="option[groupByLabel]"
+          )
+            option(
+              v-for="opt in option[groupByOptions]"
+              :value="getValueForOption(opt)"
+            ) {{ getLabelForOption(opt) }}
           option(
-            v-for="opt in option[groupByOptions]"
-            :value="getValueForOption(opt)"
-          ) {{ getLabelForOption(opt) }}
-        option(
-          v-else
-          :value="getValueForOption(option)"
-        ) {{ getLabelForOption(option) }}
-    template(
-      v-else-if="selectedOption"
+            v-else
+            :value="getValueForOption(option)"
+          ) {{ getLabelForOption(option) }}
+      template(
+        v-else-if="selectedOption"
+      )
+        option(:value="selectedValue") {{ getLabelForOption(selectedOption) }}
+    button.dito-button-clear.dito-button-overlay(
+      v-if="showClearButton"
+      :disabled="disabled"
+      @click="clear"
     )
-      option(:value="selectedValue") {{ getLabelForOption(selectedOption) }}
-  button.dito-button-clear.dito-button-overlay(
-    v-if="showClearButton"
-    :disabled="disabled"
-    @click="clear"
+  DitoEditButtons(
+    v-if="editable"
+    :editable="editable"
+    :editPath="editPath"
+    :schema="schema"
+    :dataPath="dataPath"
+    :data="data"
+    :meta="meta"
+    :store="store"
   )
 </template>
 
@@ -65,12 +76,30 @@ export default DitoTypeComponent.register('select', {
 $select-arrow-right: calc(($select-arrow-width - $select-arrow-size) / 2);
 
 .dito-select {
-  display: inline-block;
+  display: inline-flex;
   position: relative;
 
   select {
     padding-right: $select-arrow-width;
   }
+
+  &__inner {
+    flex: 1;
+    position: relative;
+
+    &::after {
+      position: absolute;
+      @include arrow($select-arrow-size);
+
+      bottom: $select-arrow-bottom;
+      right: calc(#{$select-arrow-right} + #{$border-width});
+    }
+  }
+
+  .dito-edit-buttons {
+    margin-left: $form-spacing-half;
+  }
+
   // Handle .dito-width-fill separately due to required nesting of select:
   &.dito-width-fill {
     select {
@@ -78,14 +107,6 @@ $select-arrow-right: calc(($select-arrow-width - $select-arrow-size) / 2);
     }
   }
 
-  &::after {
-    position: absolute;
-    @include arrow($select-arrow-size);
-
-    bottom: $select-arrow-bottom;
-    right: calc(#{$select-arrow-right} + #{$border-width});
-  }
-
   &.dito-disabled::after {
     border-color: $border-color;
   }

package/src/utils/schema.js

@@ -416,13 +416,19 @@ export function getViewSchema(schema, context) {
     : null
 }
 
-export function getViewEditPath(schema, context) {
+export function hasViewSchema(schema, context) {
+  return !!getViewSchema(schema, context)
+}
+
+export function getViewEditPath(schema, id, context) {
   const view = getViewSchema(schema, context)
-  return view
-    ? isSingleComponentView(view)
+  if (view) {
+    const path = isSingleComponentView(view)
       ? `/${view.path}`
       : `/${view.path}/${view.path}`
-    : null
+    return `${path}/${id}`
+  }
+  return null
 }
 
 export function getFormSchemas(schema, context, modifyForm) {
@@ -595,7 +601,7 @@ export function computeValue(schema, data, name, dataPath, {
   const { compute } = schema
   if (compute) {
     const value = compute(
-      DitoContext.get(component, {
+      new DitoContext(component, {
         schema,
         // Override value to prevent endless recursion through calling the
         // getter for `this.value` in `DitoContext`:
@@ -691,7 +697,7 @@ export function processData(schema, sourceSchema, data, dataPath, {
 
     // NOTE: We don't cache this context, since `value` is changing.
     const getContext = () =>
-      DitoContext.get(component, {
+      new DitoContext(component, {
         schema,
         value,
         name,
@@ -782,7 +788,7 @@ export function processSchemaData(
               index !== null
                 ? getDataPath(componentDataPath, index)
                 : componentDataPath
-            const context = DitoContext.get(options.component, {
+            const context = new DitoContext(options.component, {
               schema: componentSchema,
               data,
               value: item,