@ditojs/admin 2.8.1 → 2.9.0

package/src/components/DitoSidebar.vue

@@ -1,5 +1,8 @@
 <template lang="pug">
-aside.dito-sidebar.dito-scroll-parent
+aside.dito-sidebar.dito-scroll-parent(
+  v-resize="onResizeSidebar"
+  :class="classes"
+)
   nav.dito-header
     slot
   .dito-sidebar__teleport.dito-scroll
@@ -9,7 +12,31 @@ aside.dito-sidebar.dito-scroll-parent
 import DitoComponent from '../DitoComponent.js'
 
 // @vue/component
-export default DitoComponent.component('DitoSidebar', {})
+export default DitoComponent.component('DitoSidebar', {
+  data() {
+    return {
+      sidebarWidth: 0
+    }
+  },
+
+  computed: {
+    classes() {
+      const prefix = 'dito-sidebar'
+      // NOTE: Keep synced with $sidebar-max-width in SCSS:
+      const sidebarWidth = 360
+      return {
+        [`${prefix}--width-99`]: this.sidebarWidth < sidebarWidth,
+        [`${prefix}--width-60`]: this.sidebarWidth <= sidebarWidth * 0.6
+      }
+    }
+  },
+
+  methods: {
+    onResizeSidebar({ contentRect: { width } }) {
+      this.sidebarWidth = width
+    }
+  }
+})
 </script>
 
 <style lang="scss">
@@ -19,7 +46,5 @@ export default DitoComponent.component('DitoSidebar', {})
   flex: 0 1 $sidebar-max-width;
   max-width: $sidebar-max-width;
   min-width: $sidebar-min-width;
-  // For the `@container` rule in `.dito-container` to work:
-  container-type: inline-size;
 }
 </style>

package/src/components/DitoTreeItem.vue

@@ -2,7 +2,7 @@
 .dito-tree-item(
   :id="dataPath"
   :class=`{
-    'dito-dragging': dragging,
+    'dito-dragging': isDragging,
     'dito-active': active
   }`
   :style="level > 0 && { '--level': level }"
@@ -76,7 +76,7 @@
     v-if="childrenSchema"
     v-show="opened"
     :modelValue="updateOrder(childrenSchema, childrenList)"
-    :options="getSortableOptions(true)"
+    :options="getDraggableOptions(true)"
     :draggable="childrenDraggable"
     @update:modelValue="value => (childrenList = value)"
   )

package/src/components/DitoUploadFile.vue

@@ -51,7 +51,7 @@ export default DitoComponent.component('DitoUploadFile', {
     'file.upload.file': {
       immediate: true,
       handler(file) {
-        if (file && this.thumbnail) {
+        if (this.thumbnail && file?.type.startsWith('image/')) {
           const reader = new FileReader()
           reader.onload = () => {
             this.uploadUrl = reader.result

package/src/mixins/DitoMixin.js

@@ -39,13 +39,14 @@ export default {
   ],
 
   provide() {
+    const self = () => this
     return this.providesData
       ? {
-          $parentComponent: () => this,
-          $dataComponent: () => this
+          $parentComponent: self,
+          $dataComponent: self
         }
       : {
-          $parentComponent: () => this
+          $parentComponent: self
         }
   },
 

package/src/mixins/SortableMixin.js

@@ -2,19 +2,20 @@
 export default {
   data() {
     return {
-      dragging: false
+      isDragging: false
     }
   },
 
   methods: {
-    getSortableOptions(forceFallback = false) {
+    getDraggableOptions(forceFallback = false) {
+      const prefix = 'dito-draggable'
       return {
         animation: 150,
         handle: '.dito-button-drag',
-        dragClass: 'dito-sortable-active',
-        chosenClass: 'dito-sortable-chosen',
-        ghostClass: 'dito-sortable-ghost',
-        fallbackClass: 'dito-sortable-fallback',
+        dragClass: `${prefix}__drag`,
+        chosenClass: `${prefix}__chosen`,
+        ghostClass: `${prefix}__ghost`,
+        fallbackClass: `${prefix}__fallback`,
         forceFallback,
         onStart: this.onStartDrag,
         onEnd: this.onEndDrag
@@ -22,11 +23,11 @@ export default {
     },
 
     onStartDrag() {
-      this.dragging = true
+      this.isDragging = true
     },
 
     onEndDrag({ oldIndex, newIndex }) {
-      this.dragging = false
+      this.isDragging = false
       if (oldIndex !== newIndex) {
         this.onChange()
       }

package/src/styles/_layout.scss

@@ -13,7 +13,7 @@
 }
 
 .dito-layout-horizontal {
-  > *:not(:first-child) {
+  > :not(:first-child) {
     padding-left: $form-spacing;
   }
 }

package/src/styles/style.scss

@@ -4,7 +4,6 @@
 @import '_pulldown';
 @import '_layout';
 @import '_scroll';
-@import '_sortable';
 @import '_table';
 @import '_info';
 @import '_tippy';

package/src/types/DitoTypeCheckbox.vue

@@ -1,11 +1,12 @@
 <template lang="pug">
-input.dito-checkbox(
-  :id="dataPath"
-  ref="element"
-  v-model="value"
-  type="checkbox"
-  v-bind="attributes"
-)
+.dito-checkbox
+  input(
+    :id="dataPath"
+    ref="element"
+    v-model="value"
+    type="checkbox"
+    v-bind="attributes"
+  )
 </template>
 
 <script>

package/src/types/DitoTypeCheckboxes.vue

@@ -7,14 +7,15 @@ ul.dito-checkboxes(
     v-for="option in options"
   )
     label
-      input.dito-checkbox(
-        ref="element"
-        v-model="selectedOptions"
-        type="checkbox"
-        :value="getValueForOption(option)"
-        v-bind="attributes"
-      )
-      | {{ getLabelForOption(option) }}
+      .dito-checkbox
+        input(
+          ref="element"
+          v-model="selectedOptions"
+          type="checkbox"
+          :value="getValueForOption(option)"
+          v-bind="attributes"
+        )
+        span {{ getLabelForOption(option) }}
 </template>
 
 <script>
@@ -51,7 +52,7 @@ export default DitoTypeComponent.register('checkboxes', {
     @extend %input-borderless;
   }
 
-  .dito-checkbox {
+  input {
     margin-right: $form-spacing;
   }
 }

package/src/types/DitoTypeList.vue

@@ -39,7 +39,7 @@
     DitoDraggable(
       tag="tbody"
       :modelValue="updateOrder(sourceSchema, listData, paginationRange)"
-      :options="getSortableOptions()"
+      :options="getDraggableOptions()"
       :draggable="draggable"
       @update:modelValue="value => (listData = value)"
     )

package/src/types/DitoTypeMultiselect.vue

@@ -1,15 +1,14 @@
 <template lang="pug">
-.dito-multiselect(
-  :class=`{
-    'dito-multiselect-single': !multiple,
-    'dito-multiselect-multiple': multiple
-  }`
-)
+.dito-multiselect
   .dito-multiselect__inner
     VueMultiselect(
       ref="element"
       v-model="selectedOptions"
-      :class="{ 'multiselect--show-highlight': showHighlight }"
+      :class=`{
+        'multiselect--multiple': multiple,
+        'multiselect--loading': isLoading,
+        'multiselect--highlight': showHighlight
+      }`
       :showLabels="false"
       :placeholder="placeholder"
       tagPlaceholder="Press enter to add new tag"
@@ -241,16 +240,6 @@ $tag-line-height: 1em;
     position: relative;
   }
 
-  // TODO: BEM
-  &.dito-multiselect-single {
-    --input-width: 100%;
-  }
-
-  // TODO: BEM
-  &.dito-multiselect-multiple {
-    --input-width: auto;
-  }
-
   .dito-edit-buttons {
     margin-left: $form-spacing-half;
   }
@@ -258,10 +247,16 @@ $tag-line-height: 1em;
   .multiselect {
     $self: last-selector(&);
 
+    --input-width: 100%;
+
     font-size: inherit;
     min-height: inherit;
     color: $color-black;
 
+    &--multiple {
+      --input-width: auto;
+    }
+
     &__tags {
       display: flex;
       font-size: inherit;
@@ -373,11 +368,11 @@ $tag-line-height: 1em;
       }
 
       // Only show the highlight once the pulldown has received mouse or
-      // keyboard interaction, in which case `&--show-highlight` will be set,
+      // keyboard interaction, in which case `&--highlight` will be set,
       // which is controlled by `pointerDirty` in vue-multiselect.
       // Until then, clear the highlight style, but only if it isn't also
       // disabled or selected, in which case we want to keep the style.
-      @at-root #{$self}:not(#{$self}--show-highlight)
+      @at-root #{$self}:not(#{$self}--highlight)
           #{$option}:not(#{$option}--disabled):not(#{$option}--selected) {
         color: $color-text;
         background: transparent;
@@ -391,7 +386,7 @@ $tag-line-height: 1em;
           color: $color-white;
         }
 
-        @at-root #{$self}#{$self}--show-highlight #{last-selector(&)} {
+        @at-root #{$self}#{$self}--highlight #{last-selector(&)} {
           color: $color-text-inverted;
           background: $color-active;
         }
@@ -402,7 +397,7 @@ $tag-line-height: 1em;
         color: $color-text;
         background: $color-highlight;
 
-        @at-root #{$self}#{$self}--show-highlight &#{$option}--highlight {
+        @at-root #{$self}#{$self}--highlight &#{$option}--highlight {
           color: $color-text-inverted;
         }
       }
@@ -490,6 +485,16 @@ $tag-line-height: 1em;
         }
       }
     }
+
+    &--loading {
+      #{$self}__tags {
+        border-radius: $border-radius;
+      }
+
+      #{$self}__content-wrapper {
+        display: none;
+      }
+    }
   }
 }
 </style>

package/src/types/DitoTypeUpload.vue

@@ -35,7 +35,7 @@
     DitoDraggable(
       v-model="files"
       tag="tbody"
-      :options="getSortableOptions()"
+      :options="getDraggableOptions()"
       :draggable="draggable"
     )
       template(

package/src/utils/agent.js

@@ -0,0 +1,47 @@
+// This user-agent parser was lifted from Paper.js:
+// https://github.com/paperjs/paper.js/blob/cc15696750035ab00e00c64c7c95daa2c85efe01/src/core/PaperScope.js#L75-L107
+
+export function parseUserAgent(userAgent = '') {
+  const agent = {}
+  // Use replace() to get all matches, and deal with Chrome/Webkit overlap:
+  const ua = userAgent.toLowerCase()
+  const [os] =
+    /(iphone|ipad|linux; android|darwin|win|mac|linux|freebsd|sunos)/.exec(
+      ua
+    ) || []
+  const platform = (
+    {
+      'darwin': 'mac',
+      'iphone': 'ios',
+      'ipad': 'ios',
+      'linux; android': 'android'
+    }[os] ||
+    os
+  )
+  if (platform) {
+    agent.platform = platform
+    agent[platform] = true
+  }
+  ua.replace(
+    /(opera|chrome|safari|webkit|firefox|msie|trident)\/?\s*([.\d]+)(?:.*version\/([.\d]+))?(?:.*rv:v?([.\d]+))?/g,
+    (match, browser, v1, v2, rv) => {
+      // Do not set additional browsers once chrome is detected.
+      if (!agent.chrome) {
+        const version = rv || v2 || v1
+        if (!agent.version || browser !== 'safari') {
+          // Use the version we get for webkit for Safari, which is actually
+          // The Safari version, e.g. 16.0
+          agent.version = version
+          agent.versionNumber = parseFloat(version)
+        }
+        agent.browser = browser
+        agent[browser] = true
+      }
+    }
+  )
+  if (agent.chrome) {
+    // Can't have it both ways, Chrome.
+    delete agent.webkit
+  }
+  return agent
+}

package/src/utils/schema.js

@@ -485,11 +485,11 @@ export function getFormSchemas(schema, context, modifyForm) {
 
   let { form, forms } = schema
   if (!form && !forms) {
-    const { components, tabs, compact, clipboard } = schema
+    const { name, compact, clipboard, tabs, components } = schema
     if (components || tabs) {
-      // Convert inlined components to forms, also supporting `tabs`, `compact`
-      // and `clipboard` settings.
-      form = { components, tabs, compact, clipboard }
+      // Convert inlined forms to stand-alone forms, supporting `name`,
+      // `compact`, `clipboard`, `tabs` and `components` settings.
+      form = { type: 'form', name, compact, clipboard, tabs, components }
     } else {
       // No `forms`, `form` or `components`, return and empty `forms` object.
       return {}
@@ -702,10 +702,11 @@ function cloneItem(sourceSchema, item, options) {
 
 export function processData(schema, sourceSchema, data, dataPath, {
   component,
+  rootData,
   schemaOnly, // whether to only include data covered by the schema, or all data
   target
 } = {}) {
-  const options = { component, schemaOnly, target, rootData: data }
+  const options = { component, rootData, schemaOnly, target }
   const processedData = cloneItem(sourceSchema, data, options)
   const graph = new SchemaGraph()
 
@@ -837,15 +838,15 @@ export function processSchemaData(
           const componentDataPath = getDataPath(dataPath, name)
 
           const processItem = (item, index = null) => {
-            const dataPath =
+            const itemDataPath =
               index !== null
                 ? getDataPath(componentDataPath, index)
                 : componentDataPath
             const context = new DitoContext(options.component, {
               schema: componentSchema,
-              data,
+              data: item,
               value: item,
-              dataPath,
+              dataPath: itemDataPath,
               index,
               rootData: options.rootData
             })
@@ -862,7 +863,7 @@ export function processSchemaData(
               return processSchemaData(
                 form,
                 item,
-                dataPath,
+                itemDataPath,
                 processedItem,
                 processBefore,
                 processAfter,
@@ -882,6 +883,7 @@ export function processSchemaData(
             componentDataPath,
             processedData
           )
+
           let value = processedData ? processedData[name] : data[name]
           if (value != null && hasFormSchema(componentSchema)) {
             // Recursively process data on nested form items.
@@ -897,6 +899,7 @@ export function processSchemaData(
               processedData[name] = value
             }
           }
+
           processAfter?.(
             componentSchema,
             data,

package/src/styles/_sortable.scss

@@ -1,13 +0,0 @@
-.dito-sortable-fallback {
-  filter: drop-shadow(0 2px 4px $color-shadow);
-
-  // Nested <td> need to also switch to `display: block` style during dragging
-  &,
-  td {
-    display: flex;
-
-    > * {
-      flex: 1;
-    }
-  }
-}