@ditojs/admin 2.0.4 → 2.1.0

package/src/types/{TypeSection.vue → DitoTypeSection.vue}

@@ -1,8 +1,6 @@
 <template lang="pug">
-.dito-section(
-  :class="{ 'dito-section-labelled' : !!schema.label }"
-)
-  dito-pane.dito-section-pane(
+.dito-section(:class="{ 'dito-section-labelled': !!schema.label }")
+  DitoPane.dito-section-pane(
     :schema="getItemFormSchema(schema, item, context)"
     :dataPath="dataPath"
     :data="item"
@@ -12,23 +10,12 @@
   )
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-section
-    &.dito-section-labelled
-      border: $border-style
-      border-radius: $border-radius
-      padding: $form-spacing
-      box-sizing: border-box
-</style>
-
 <script>
-import TypeComponent from '../TypeComponent.js'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 import { getItemFormSchema, processSchemaComponents } from '../utils/schema.js'
 
 // @vue/component
-export default TypeComponent.register('section', {
+export default DitoTypeComponent.register('section', {
   defaultValue: () => undefined, // Callback to override `defaultValue: null`
   ignoreMissingValue: schema => !schema.nested && !('default' in schema),
   defaultNested: false,
@@ -51,3 +38,16 @@ export default TypeComponent.register('section', {
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-section {
+  &.dito-section-labelled {
+    border: $border-style;
+    border-radius: $border-radius;
+    padding: $form-spacing;
+    box-sizing: border-box;
+  }
+}
+</style>

package/src/types/{TypeSelect.vue → DitoTypeSelect.vue}

@@ -2,8 +2,8 @@
 //- Nesting is needed to make an arrow appear over the select item:
 .dito-select
   select(
-    ref="element"
     :id="dataPath"
+    ref="element"
     v-model="selectedValue"
     v-bind="attributes"
     @mousedown="populate = true"
@@ -30,50 +30,20 @@
     template(
       v-else-if="selectedOption"
     )
-      option(
-        :value="selectedValue"
-      ) {{ getLabelForOption(selectedOption) }}
+      option(:value="selectedValue") {{ getLabelForOption(selectedOption) }}
   button.dito-button-clear.dito-button-overlay(
     v-if="showClearButton"
-    @click="clear"
     :disabled="disabled"
+    @click="clear"
   )
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  // TODO: Move to dito-ui
-  $select-arrow-right: calc(($select-arrow-width - $select-arrow-size) / 2)
-
-  .dito-select
-    display: inline-block
-    position: relative
-
-    select
-      padding-right: $select-arrow-width
-
-    // Handle .dito-width-fill separately due to required nesting of select:
-    &.dito-width-fill
-      select
-        width: 100%
-
-    &::after
-      position: absolute
-      +arrow($select-arrow-size)
-      bottom: $select-arrow-bottom
-      right: calc(#{$select-arrow-right} + #{$border-width})
-
-    &.dito-disabled::after
-      border-color: $border-color
-</style>
-
 <script>
-import TypeComponent from '../TypeComponent.js'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 import OptionsMixin from '../mixins/OptionsMixin.js'
 
 // @vue/component
-export default TypeComponent.register('select', {
+export default DitoTypeComponent.register('select', {
   mixins: [OptionsMixin],
 
   nativeField: true,
@@ -87,3 +57,37 @@ export default TypeComponent.register('select', {
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+// TODO: Move to dito-ui
+$select-arrow-right: calc(($select-arrow-width - $select-arrow-size) / 2);
+
+.dito-select {
+  display: inline-block;
+  position: relative;
+
+  select {
+    padding-right: $select-arrow-width;
+  }
+  // Handle .dito-width-fill separately due to required nesting of select:
+  &.dito-width-fill {
+    select {
+      width: 100%;
+    }
+  }
+
+  &::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;
+  }
+}
+</style>

package/src/types/{TypeSlider.vue → DitoTypeSlider.vue}

@@ -1,19 +1,19 @@
 <template lang="pug">
 .dito-slider
   input.dito-range(
-    ref="element"
     :id="dataPath"
-    type="range"
+    ref="element"
     v-model="inputValue"
+    type="range"
     v-bind="attributes"
     :min="min"
     :max="max"
     :step="stepValue"
   )
-  input-field.dito-number(
+  InputField.dito-number(
     v-if="input"
-    type="number"
     v-model="inputValue"
+    type="number"
     v-bind="attributes"
     :min="min"
     :max="max"
@@ -21,32 +21,16 @@
   )
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-slider
-    @extend %input
-    display: flex
-    .dito-range
-      flex: auto
-      height: calc(1em * var(--line-height))
-    .dito-number
-      border: 0
-      padding: 0
-      text-align: right
-      font-variant-numeric: tabular-nums
-</style>
-
 <script>
-import TypeComponent from '../TypeComponent.js'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 import NumberMixin from '../mixins/NumberMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { InputField } from '@ditojs/ui/src'
 
 // @vue/component
-export default TypeComponent.register('slider', {
-  components: { InputField },
+export default DitoTypeComponent.register('slider', {
   mixins: [NumberMixin],
+  components: { InputField },
   nativeField: true,
 
   computed: {
@@ -58,3 +42,25 @@ export default TypeComponent.register('slider', {
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-slider {
+  @extend %input;
+
+  display: flex;
+
+  .dito-range {
+    flex: auto;
+    height: calc(1em * var(--line-height));
+  }
+
+  .dito-number {
+    border: 0;
+    padding: 0;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+}
+</style>

package/src/types/{TypeSwitch.vue → DitoTypeSwitch.vue}

@@ -1,27 +1,19 @@
 <template lang="pug">
-switch-button.dito-switch(
-  ref="element"
+SwitchButton.dito-switch(
   :id="dataPath"
-  :labels="labels"
+  ref="element"
   v-model="value"
+  :labels="labels"
   v-bind="attributes"
 )
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-switch
-    .dito-switch-label
-      font-size: $font-size-small
-</style>
-
 <script>
-import TypeComponent from '../TypeComponent.js'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 import { SwitchButton } from '@ditojs/ui/src'
 
 // @vue/component
-export default TypeComponent.register('switch', {
+export default DitoTypeComponent.register('switch', {
   defaultValue: false,
   defaultWidth: 'auto',
 
@@ -36,3 +28,13 @@ export default TypeComponent.register('switch', {
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-switch {
+  .dito-switch-label {
+    font-size: $font-size-small;
+  }
+}
+</style>

package/src/types/DitoTypeText.vue

@@ -0,0 +1,77 @@
+<template lang="pug">
+InputField.dito-text(
+  :id="dataPath"
+  ref="element"
+  v-model="inputValue"
+  :type="inputType"
+  v-bind="attributes"
+)
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import { InputField } from '@ditojs/ui/src'
+
+const maskedPassword = '****************'
+
+export default DitoTypeComponent.register(
+  [
+    'text',
+    'email',
+    'url',
+    'hostname',
+    'domain',
+    'tel',
+    'password',
+    'creditcard'
+  ],
+  // @vue/component
+  {
+    components: { InputField },
+    nativeField: true,
+    textField: true,
+    ignoreMissingValue: schema => schema.type === 'password',
+
+    computed: {
+      inputType() {
+        return (
+          {
+            creditcard: 'text',
+            hostname: 'text',
+            domain: 'text'
+          }[this.type] ||
+          this.type
+        )
+      },
+
+      inputValue: {
+        get() {
+          return this.type === 'password' &&
+            this.value === undefined &&
+            !this.focused
+            ? maskedPassword
+            : this.value
+        },
+
+        set(value) {
+          this.value = value
+        }
+      }
+    },
+
+    methods: {
+      getValidations() {
+        const rule = {
+          email: 'email',
+          url: 'url',
+          hostname: 'hostname',
+          domain: 'domain',
+          password: 'password',
+          creditcard: 'creditcard'
+        }[this.type]
+        return rule ? { [rule]: true } : {}
+      }
+    }
+  }
+)
+</script>

package/src/types/{TypeTextarea.vue → DitoTypeTextarea.vue}

@@ -1,7 +1,7 @@
 <template lang="pug">
 textarea.dito-textarea.dito-input(
-  ref="element"
   :id="dataPath"
+  ref="element"
   v-model="value"
   v-bind="attributes"
   :rows="lines"
@@ -9,23 +9,12 @@ textarea.dito-textarea.dito-input(
 )
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-textarea
-    display: block
-    resize: none
-    min-height: calc(1em * var(--line-height) + #{ 2 * $input-padding-ver })
-    &.dito-resizable
-      resize: vertical
-</style>
-
 <script>
-import TypeComponent from '../TypeComponent.js'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 
 // @vue/component
-export default TypeComponent.register('textarea', {
+export default DitoTypeComponent.register('textarea', {
   nativeField: true,
   textField: true,
 
@@ -41,3 +30,17 @@ export default TypeComponent.register('textarea', {
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-textarea {
+  display: block;
+  resize: none;
+  min-height: calc(1em * var(--line-height) + #{2 * $input-padding-ver});
+
+  &.dito-resizable {
+    resize: vertical;
+  }
+}
+</style>

package/src/types/DitoTypeTreeList.vue

@@ -0,0 +1,191 @@
+<template lang="pug">
+.dito-tree-list
+  DitoScopes(
+    v-if="scopes"
+    :query="query"
+    :scopes="scopes"
+  )
+  .dito-tree-panel
+    DitoTreeItem(
+      :schema="treeSchema"
+      :dataPath="treeDataPath"
+      :data="treeData"
+      :draggable="draggable"
+      :open="true"
+    )
+    .dito-tree-form-container(
+      v-if="hasEditableForms"
+    )
+      //- Include a router-view for the optional DitoFormInlined
+      RouterView
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import SourceMixin from '../mixins/SourceMixin.js'
+import {
+  hasFormSchema,
+  getFormSchemas,
+  resolveSchemaComponents
+} from '../utils/schema.js'
+
+export default DitoTypeComponent.register(
+  ['tree-list', 'tree-object'],
+  // @vue/component
+  {
+    mixins: [SourceMixin],
+
+    provide() {
+      return { container: this }
+    },
+
+    getSourceType(type) {
+      return type === 'tree-object' ? 'object' : 'list'
+    },
+
+    computed: {
+      path() {
+        // Accessed from DitoTreeItem through `container.path`:
+        return this.formComponent?.path
+      },
+
+      editPath() {
+        // Accessed from DitoTreeItem through `container.editPath`:
+        return this.$route.path.slice(this.path?.length)
+      },
+
+      treeData() {
+        return this.isListSource
+          ? { [this.name]: this.value }
+          : this.value
+      },
+
+      treeDataPath() {
+        // Remove `name` from `dataPath`, as it is added
+        // to `treeData` and `treeSchema`
+        return this.isListSource
+          ? this.dataPath.slice(0, this.dataPath.length - this.name.length)
+          : this.dataPath
+      },
+
+      treeSchema() {
+        return this.isListSource
+          ? {
+              children: {
+                name: this.name,
+                ...this.schema
+              }
+            }
+          : this.schema
+      },
+
+      hasEditableForms() {
+        const hasEditableForms = schema => {
+          return (
+            hasFormSchema(schema) && (
+              this.getSchemaValue('editable', {
+                type: Boolean,
+                default: false,
+                schema
+              }) ||
+              schema.children &&
+              hasEditableForms(schema.children)
+            )
+          )
+        }
+        return hasEditableForms(this.schema)
+      }
+    },
+
+    async processSchema(
+      api,
+      schema,
+      name,
+      routes,
+      level,
+      nested = true,
+      flatten = false,
+      process = null
+    ) {
+      await Promise.all([
+        resolveSchemaComponents(schema.properties),
+        SourceMixin.processSchema(
+          api,
+          schema,
+          name,
+          routes,
+          level,
+          nested,
+          flatten,
+          // Pass process() to add more routes to childRoutes:
+          (childRoutes, level) => {
+            const { children } = schema
+            if (children) {
+              // Add `type` to the nested tree list.
+              children.type = 'tree-list'
+              // Recursively call `processSchema()` for the nested tree list:
+              return this.processSchema(
+                api,
+                children,
+                children.name,
+                childRoutes,
+                level,
+                nested,
+                true, // Pass `true` for `flatten` in tree lists.
+                process
+              )
+            }
+          }
+        )
+      ])
+    },
+
+    getFormSchemasForProcessing(schema, context) {
+      // Convert nested children schema to stand-alone schema component,
+      // present in each of the forms, as required by `processSchemaData()`
+      const { children } = schema
+      return getFormSchemas(
+        schema,
+        context,
+        children
+          ? form => ({
+              ...form,
+              components: {
+                ...form.components,
+                [children.name]: children
+              }
+            })
+          : null
+      )
+    }
+  }
+)
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-tree-list {
+  @extend %field;
+
+  .dito-tree-panel {
+    display: flex;
+    justify-content: space-between;
+
+    > .dito-tree-item {
+      flex: 1 1 25%;
+    }
+
+    > .dito-tree-form-container {
+      flex: 0 1 75%;
+      align-self: stretch;
+      background: $content-color-background;
+      border-left: $border-style;
+      border-top-right-radius: $border-radius - 1;
+      border-bottom-right-radius: $border-radius - 1;
+      margin: (-$input-padding-ver) (-$input-padding-hor);
+      margin-left: $input-padding-hor;
+    }
+  }
+}
+</style>