@ditojs/admin 2.3.0 → 2.3.2

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

@@ -113,6 +113,10 @@ export function isPanel(schema) {
   return isSchema(schema) && schema.type === 'panel'
 }
 
+export function isMenu(schema) {
+  return isSchema(schema) && schema.type === 'menu'
+}
+
 export function getSchemaIdentifier(schema) {
   return JSON.stringify(schema)
 }
@@ -176,6 +180,19 @@ export async function resolveSchemas(
   return schemas
 }
 
+export async function resolveViews(unresolvedViews) {
+  return resolveSchemas(unresolvedViews, async (schema, unwrapModule) => {
+    schema = await resolveSchema(schema, unwrapModule)
+    if (!schema.name && isMenu(schema)) {
+      // Generate a name for sub-menus from their label if it's missing.
+      // NOTE: This is never actually referenced from anywhere, but they need
+      // a name by which they're stored in the parent object.
+      schema.name = camelize(schema.label)
+    }
+    return schema
+  })
+}
+
 export async function resolveSchemaComponent(schema) {
   // Resolves async schema components and adds DitoMixin and TypeMixin to them.
   let { component } = schema
@@ -250,22 +267,31 @@ export async function processSchemaComponent(
 }
 
 export async function processView(component, api, schema, name) {
-  if (!isView(schema)) {
-    throw new Error(`Invalid view schema: '${getSchemaIdentifier(schema)}'`)
-  }
-  processRouteSchema(api, schema, name)
   processSchemaDefaults(api, schema)
-  await processNestedSchemas(api, schema)
-  const children = []
-  await processSchemaComponents(api, schema, children, 0)
-  return {
-    path: `/${schema.path}`,
-    children,
-    component,
-    meta: {
-      api,
-      schema
+  if (isView(schema)) {
+    processRouteSchema(api, schema, name)
+    await processNestedSchemas(api, schema)
+    const children = []
+    await processSchemaComponents(api, schema, children, 0)
+    return {
+      path: `/${schema.path}`,
+      children,
+      component,
+      meta: {
+        api,
+        schema
+      }
     }
+  } else if (isMenu(schema)) {
+    schema.items = await resolveSchemas(schema.items)
+    return Promise.all(
+      Object.entries(schema.items).map(async ([name, item]) =>
+        processView(component, api, item, name)
+      )
+    )
+    //
+  } else {
+    throw new Error(`Invalid view schema: '${getSchemaIdentifier(schema)}'`)
   }
 }
 
@@ -303,8 +329,8 @@ export function processNestedSchemaDefaults(api, schema) {
 
 export function processRouteSchema(api, schema, name) {
   // Used for view and source schemas, see SourceMixin.
-  schema.name = name
-  schema.path ||= api.normalizePath(name)
+  schema.name ??= name
+  schema.path ??= api.normalizePath(name)
 }
 
 export async function processForms(api, schema, level) {
@@ -416,13 +442,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 +627,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 +723,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 +814,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,