@ditojs/admin 2.34.4 → 2.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.34.4",
+  "version": "2.35.0",
   "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",
@@ -39,33 +39,34 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.34.2",
-    "@ditojs/utils": "^2.34.2",
-    "@kyvg/vue3-notification": "^3.3.0",
+    "@ditojs/ui": "^2.35.0",
+    "@ditojs/utils": "^2.35.0",
+    "@kyvg/vue3-notification": "^3.4.0",
     "@lk77/vue3-color": "^3.0.6",
-    "@tiptap/core": "^2.7.2",
-    "@tiptap/extension-blockquote": "^2.7.2",
-    "@tiptap/extension-bold": "^2.7.2",
-    "@tiptap/extension-bullet-list": "^2.7.2",
-    "@tiptap/extension-code": "^2.7.2",
-    "@tiptap/extension-code-block": "^2.7.2",
-    "@tiptap/extension-document": "^2.7.2",
-    "@tiptap/extension-hard-break": "^2.7.2",
-    "@tiptap/extension-heading": "^2.7.2",
-    "@tiptap/extension-history": "^2.7.2",
-    "@tiptap/extension-horizontal-rule": "^2.7.2",
-    "@tiptap/extension-italic": "^2.7.2",
-    "@tiptap/extension-link": "^2.7.2",
-    "@tiptap/extension-list-item": "^2.7.2",
-    "@tiptap/extension-ordered-list": "^2.7.2",
-    "@tiptap/extension-paragraph": "^2.7.2",
-    "@tiptap/extension-strike": "^2.7.2",
-    "@tiptap/extension-subscript": "^2.7.2",
-    "@tiptap/extension-superscript": "^2.7.2",
-    "@tiptap/extension-text": "^2.7.2",
-    "@tiptap/extension-underline": "^2.7.2",
-    "@tiptap/pm": "^2.7.2",
-    "@tiptap/vue-3": "^2.7.2",
+    "@tiptap/core": "^2.8.0",
+    "@tiptap/extension-blockquote": "^2.8.0",
+    "@tiptap/extension-bold": "^2.8.0",
+    "@tiptap/extension-bullet-list": "^2.8.0",
+    "@tiptap/extension-code": "^2.8.0",
+    "@tiptap/extension-code-block": "^2.8.0",
+    "@tiptap/extension-document": "^2.8.0",
+    "@tiptap/extension-hard-break": "^2.8.0",
+    "@tiptap/extension-heading": "^2.8.0",
+    "@tiptap/extension-history": "^2.8.0",
+    "@tiptap/extension-horizontal-rule": "^2.8.0",
+    "@tiptap/extension-italic": "^2.8.0",
+    "@tiptap/extension-link": "^2.8.0",
+    "@tiptap/extension-list-item": "^2.8.0",
+    "@tiptap/extension-ordered-list": "^2.8.0",
+    "@tiptap/extension-paragraph": "^2.8.0",
+    "@tiptap/extension-strike": "^2.8.0",
+    "@tiptap/extension-subscript": "^2.8.0",
+    "@tiptap/extension-superscript": "^2.8.0",
+    "@tiptap/extension-text": "^2.8.0",
+    "@tiptap/extension-text-style": "^2.8.0",
+    "@tiptap/extension-underline": "^2.8.0",
+    "@tiptap/pm": "^2.8.0",
+    "@tiptap/vue-3": "^2.8.0",
     "@vueuse/integrations": "^11.1.0",
     "codeflask": "^1.4.1",
     "filesize": "^10.1.6",
@@ -76,20 +77,16 @@
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
     "type-fest": "^4.26.1",
-    "vue": "^3.5.8",
+    "vue": "^3.5.11",
     "vue-multiselect": "^3.1.0",
     "vue-router": "^4.4.5",
     "vue-upload-component": "^3.1.17"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.34.2",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vue/compiler-sfc": "^3.5.8",
-    "pug": "^3.0.3",
-    "sass": "^1.79.3",
-    "typescript": "^5.6.2",
+    "@ditojs/build": "^2.35.0",
+    "typescript": "^5.6.3",
     "vite": "^5.4.8"
   },
   "types": "types",
-  "gitHead": "1112f28f40e1e95d9301820cc68f787308cbab50"
+  "gitHead": "53671911f207390474d992e72a9671fb93f2b78c"
 }

package/src/DitoContext.js

@@ -21,7 +21,14 @@ const { hasOwnProperty } = Object.prototype
 const contexts = new WeakMap()
 
 function get(context, key, defaultValue) {
-  const object = contexts.get(toRaw(context))
+  let raw = toRaw(context)
+  let object = null
+  // In case `DitoContext.extend()` was used, we need to find the actual context
+  // object from the object's the inheritance chain:
+  while (raw && !object) {
+    object = contexts.get(raw)
+    raw = Object.getPrototypeOf(raw)
+  }
   const value = key in object ? object[key] : undefined
   // If `object` explicitly sets the key to `undefined`, return it.
   return value !== undefined || hasOwnProperty.call(object, key)

package/src/mixins/OptionsMixin.js

@@ -17,12 +17,6 @@ import {
 export default {
   mixins: [DataMixin],
 
-  data() {
-    return {
-      hasOptions: false
-    }
-  },
-
   computed: {
     selectedValue: {
       get() {
@@ -80,9 +74,6 @@ export default {
       if (!isArray(data)) {
         throw new Error(`Invalid options data, should be array: ${data}`)
       }
-      // TODO: Fix side-effects
-      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      this.hasOptions = data.length > 0
       return this.processOptions(data)
     },
 
@@ -92,6 +83,10 @@ export default {
       return this.options
     },
 
+    hasOptions() {
+      return this.activeOptions.length > 0
+    },
+
     relate: getSchemaAccessor('relate', {
       // TODO: Convert to `relateBy: 'id'`
       type: Boolean,

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/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;