@ditojs/admin 2.34.5 → 2.36.0

package/src/mixins/ValueMixin.js

@@ -0,0 +1,32 @@
+import DitoContext from '../DitoContext.js'
+import { computeValue } from '../utils/schema.js'
+
+export default {
+  computed: {
+    value: {
+      get() {
+        const value = computeValue(
+          this.schema,
+          this.data,
+          this.name,
+          this.dataPath,
+          { component: this }
+        )
+        const { format } = this.schema
+        return format
+          ? format(new DitoContext(this, { value }))
+          : value
+      },
+
+      set(value) {
+        const { parse } = this.schema
+        if (parse) {
+          value = parse(new DitoContext(this, { value }))
+        }
+        this.parsedValue = value
+        // eslint-disable-next-line vue/no-mutating-props
+        this.data[this.name] = value
+      }
+    }
+  }
+}

package/src/types/DitoTypeCode.vue

@@ -1,34 +1,63 @@
 <template lang="pug">
 .dito-code(
   :id="dataPath"
-  ref="code"
   :style="style"
 )
+  .dito-code__editor(ref="editor")
+  .dito-resize(
+    v-if="resizable"
+    @mousedown.stop.prevent="onDragResize"
+  )
 </template>
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import DomMixin from '../mixins/DomMixin.js'
+import { getSchemaAccessor } from '../utils/accessor.js'
 import CodeFlask from 'codeflask'
 
 // @vue/component
 export default DitoTypeComponent.register('code', {
   mixins: [DomMixin],
 
+  data() {
+    return {
+      height: null
+    }
+  },
+
   computed: {
-    lines() {
-      return this.schema.lines || 3
-    },
+    lines: getSchemaAccessor('lines', {
+      type: Number,
+      default: 3
+    }),
+
+    language: getSchemaAccessor('language', {
+      type: String,
+      default: 'javascript'
+    }),
+
+    indentSize: getSchemaAccessor('indentSize', {
+      type: Number,
+      default: 2
+    }),
+
+    resizable: getSchemaAccessor('resizable', {
+      type: Boolean,
+      default: false
+    }),
 
     style() {
-      return `height: calc(${this.lines}em * var(--line-height))`
+      return {
+        height: this.height || `calc(${this.lines}em * var(--line-height))`
+      }
     }
   },
 
   mounted() {
-    const flask = new CodeFlask(this.$refs.code, {
-      language: this.schema.language || 'javascript',
-      tabSize: this.schema.indentSize || 2,
+    const flask = new CodeFlask(this.$refs.editor, {
+      language: this.language,
+      indentSize: this.indentSize,
       lineNumbers: false
     })
 
@@ -50,7 +79,7 @@ export default DitoTypeComponent.register('code', {
       onChange()
     }
 
-    this.domOn(this.$refs.code.querySelector('textarea'), {
+    this.domOn(this.$refs.editor.querySelector('textarea'), {
       focus: onFocus,
       blur: onBlur
     })
@@ -87,6 +116,10 @@ export default DitoTypeComponent.register('code', {
       }
     })
 
+    this.$watch('language', language => {
+      flask.updateLanguage(language)
+    })
+
     setCode(this.value || '')
   },
 
@@ -96,7 +129,30 @@ export default DitoTypeComponent.register('code', {
     },
 
     blurElement() {
-      this.$el.querySelector('textarea')?.focus()
+      this.$el.querySelector('textarea')?.blur()
+    },
+
+    onDragResize(event) {
+      const getPoint = ({ clientX: x, clientY: y }) => ({ x, y })
+
+      let prevY = getPoint(event).y
+      let height = parseFloat(getComputedStyle(this.$el).height)
+
+      const mousemove = event => {
+        const { y } = getPoint(event)
+        height += y - prevY
+        prevY = y
+        this.height = `${Math.max(height, 0)}px`
+      }
+
+      const handlers = this.domOn(document, {
+        mousemove,
+
+        mouseup(event) {
+          mousemove(event)
+          handlers.remove()
+        }
+      })
     }
   }
 })
@@ -112,6 +168,7 @@ export default DitoTypeComponent.register('code', {
   // For proper sizing of content along with :style="style" setting above,
   // for proper line-height calculation.
   padding: $input-padding;
+  min-height: calc(1em * var(--line-height) + 2 * $input-padding-ver);
 
   .codeflask {
     background: none;
@@ -119,24 +176,24 @@ export default DitoTypeComponent.register('code', {
     // the desired height with :style="style".
     top: 0;
     left: 0;
-  }
 
-  .codeflask__textarea,
-  .codeflask__pre {
-    // Use same padding as .dito-code
-    padding: $input-padding;
-  }
+    &__textarea,
+    &__pre {
+      // Use same padding as .dito-code
+      padding: $input-padding;
+    }
 
-  .codeflask__textarea,
-  .codeflask__code,
-  .codeflask__lines {
-    font-family: $font-family-mono;
-    font-size: var(--font-size);
-    line-height: var(--line-height);
-  }
+    &__textarea,
+    &__code,
+    &__lines {
+      font-family: $font-family-mono;
+      font-size: var(--font-size);
+      line-height: var(--line-height);
+    }
 
-  .codeflask__lines {
-    padding: $input-padding;
+    &__lines {
+      padding: $input-padding;
+    }
   }
 }
 </style>

package/src/types/DitoTypeComputed.vue

@@ -14,7 +14,7 @@ input.dito-text.dito-input(
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
-import TypeMixin from '../mixins/TypeMixin.js'
+import ValueMixin from '../mixins/ValueMixin.js'
 import DataMixin from '../mixins/DataMixin.js'
 
 export default DitoTypeComponent.register(
@@ -37,11 +37,11 @@ export default DitoTypeComponent.register(
             // eslint-disable-next-line vue/no-side-effects-in-computed-properties
             this.data[this.name] = value
           }
-          return TypeMixin.computed.value.get.call(this)
+          return ValueMixin.computed.value.get.call(this)
         },
 
         set(value) {
-          TypeMixin.computed.value.set.call(this, value)
+          ValueMixin.computed.value.set.call(this, value)
         }
       }
     }

package/src/types/DitoTypeList.vue

@@ -132,6 +132,7 @@
             :data="listData"
             :meta="meta"
             :store="store"
+            :nested="nested"
             :disabled="disabled || isLoading"
             :creatable="creatable"
             :createPath="path"

package/src/types/DitoTypeMarkup.vue

@@ -526,18 +526,6 @@ const LinkWithTitle = Link.extend({
 
   position: relative;
 
-  .dito-resize {
-    @extend %icon-resize;
-
-    position: absolute;
-    top: unset;
-    left: unset;
-    right: 0;
-    bottom: 0;
-    width: 1em;
-    height: 1em;
-  }
-
   .ProseMirror {
     height: 100%;
     outline: none;