@cortezaproject/corteza-vue 2024.9.6-dev.1 → 2024.9.6-dev.2

package/dist/index.cjs

@@ -8581,8 +8581,6 @@ const __vue_script__$16 = script$16;
 //
 //
 //
-//
-//
 
 
 var script$15 = {
@@ -8607,12 +8605,6 @@ var script$15 = {
     }
   },
 
-  computed: {
-    typeStyle () {
-      return `${this.format.type}-icon`
-    },
-  },
-
   methods: {
     getComputedColor (cssVar) {
       try {
@@ -8645,24 +8637,22 @@ var script$15 = {
 const __vue_script__$15 = script$15;
 
 /* template */
-var __vue_render__$12 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-button',{staticClass:"text-dark font-weight-bold text-decoration-none",attrs:{"id":("color-popover-" + (_vm.format.type)),"variant":"link"},on:{"click":function($event){$event.stopPropagation();$event.preventDefault();return _vm.showPicker.apply(null, arguments)}}},[_c('span',{staticClass:"icon",class:_vm.typeStyle,style:({
+var __vue_render__$12 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-button',{staticClass:"text-dark font-weight-bold text-decoration-none mb-1",attrs:{"id":("color-popover-" + (_vm.format.type)),"variant":"link"},on:{"click":function($event){$event.stopPropagation();$event.preventDefault();return _vm.showPicker.apply(null, arguments)}}},[_c('span',{style:({
         backgroundColor: _vm.background ? _vm.selectedColor : 'transparent',
-        borderColor: _vm.background ? 'transparent' : _vm.selectedColor,
+        'border-bottom': _vm.background ? 'none' : ("2px solid " + _vm.selectedColor),
       })},[_vm._v("\n      A\n    ")])]),_vm._v(" "),_c('c-input-color-picker',{ref:"picker",staticClass:"d-none",attrs:{"value":_vm.selectedColor,"default-value":_vm.getDefaultColor(),"show-text":false,"width":'0px',"height":'0px'},on:{"input":_vm.applyFromPicker}})],1)};
 var __vue_staticRenderFns__$12 = [];
 
   /* style */
-  const __vue_inject_styles__$16 = function (inject) {
-    if (!inject) return
-    inject("data-v-f18be530_0", { source: ".icon[data-v-f18be530]{padding:0 2px}.icon.color-icon[data-v-f18be530]{border-bottom:2px solid var(--dark)}.icon.background-icon[data-v-f18be530]{padding:2px 3px}", map: undefined, media: undefined });
-
-  };
+  const __vue_inject_styles__$16 = undefined;
   /* scoped */
-  const __vue_scope_id__$16 = "data-v-f18be530";
+  const __vue_scope_id__$16 = undefined;
   /* module identifier */
   const __vue_module_identifier__$16 = undefined;
   /* functional template */
   const __vue_is_functional_template__$16 = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -8677,7 +8667,7 @@ var __vue_staticRenderFns__$12 = [];
     __vue_is_functional_template__$16,
     __vue_module_identifier__$16,
     false,
-    createInjector);
+    undefined);
 
 //
 //
@@ -9097,11 +9087,11 @@ var suggestion = {
             }
           });
         };
-        popup.addEventListener('click', function (event) {
-          return handleSelection(event);
+        popup.addEventListener('click', function () {
+          return handleSelection;
         });
-        popup.addEventListener('mouseup', function (event) {
-          return handleSelection(event);
+        popup.addEventListener('mouseup', function () {
+          return handleSelection;
         });
         popperInstance = core.createPopper(virtualElement, popup, {
           placement: 'bottom-start',
@@ -10294,6 +10284,9 @@ var __vue_staticRenderFns__$V = [];
 //
 //
 //
+//
+//
+//
 
 
 fontawesomeSvgCore.library.add(freeSolidSvgIcons.faExpandAlt);
@@ -10314,9 +10307,9 @@ var script$W = {
       default: 'text',
     },
 
-    height: {
+    minHeight: {
       type: String,
-      default: '80',
+      default: '2.35rem',
     },
 
     showLineNumbers: {
@@ -10378,6 +10371,21 @@ var script$W = {
       type: String,
       default: '',
     },
+
+    resizable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data () {
+    return {
+      resizeObserver: null,
+      manualHeight: null,
+      contentHeight: null,
+      programmaticUpdate: false,
+      resizeTimeout: null,
+    }
   },
 
   computed: {
@@ -10390,9 +10398,144 @@ var script$W = {
         this.$emit('update:value', value);
       },
     },
+
+    containerStyle () {
+      if (this.resizable) {
+        return {
+          minHeight: this.minHeight,
+          height: this.effectiveHeight,
+        }
+      }
+      return {}
+    },
+
+    effectiveHeight () {
+      if (this.resizable) {
+        // Use the larger of manual height, content height, or minimum height
+        const manualHeightPx = this.manualHeight ? this.parseHeight(this.manualHeight) : 0;
+        const contentHeightPx = this.contentHeight ? this.parseHeight(this.contentHeight) : 0;
+        const minHeightPx = this.parseHeight(this.minHeight);
+        
+        const maxHeight = Math.max(manualHeightPx, contentHeightPx, minHeightPx);
+        return `${maxHeight}px`
+      }
+      return this.minHeight
+    },
+  },
+
+  watch: {
+    value () {
+      if (this.resizable && this.$refs.aceeditor && this.$refs.aceeditor.editor) {
+        this.$nextTick(() => {
+          this.calculateContentHeight(this.$refs.aceeditor.editor);
+        });
+      }
+    },
+  },
+
+  mounted () {
+    if (this.resizable) {
+      this.setupResizeObserver();
+    }
+  },
+
+  beforeDestroy () {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    if (this.resizeTimeout) {
+      clearTimeout(this.resizeTimeout);
+    }
   },
 
   methods: {
+    parseHeight (height) {
+      if (typeof height === 'number') return height
+      if (typeof height === 'string') {
+        // Remove 'px' and parse to number
+        return parseFloat(height.replace('px', '').replace('rem', '')) * (height.includes('rem') ? 16 : 1)
+      }
+      return 0
+    },
+
+    calculateContentHeight (editor) {
+      if (!editor) return
+
+      const session = editor.session;
+      const lineCount = session.getLength();
+      const lineHeight = editor.renderer.lineHeight || 16;
+      const padding = 14; // Top and bottom padding
+      
+      const contentHeight = (lineCount * lineHeight) + padding;
+      
+      // Parse minHeight to ensure we don't go below it
+      const minHeightPx = this.parseHeight(this.minHeight);
+      const finalHeight = Math.max(contentHeight, minHeightPx);
+      
+      // Set flag to prevent ResizeObserver from reacting to this change
+      this.programmaticUpdate = true;
+      this.contentHeight = `${finalHeight}px`;
+      
+      // Clear the flag after a short delay
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.programmaticUpdate = false;
+        }, 50);
+      });
+    },
+
+    setupResizeObserver () {
+      let lastHeight = null;
+      let isInitialized = false;
+      
+      this.resizeObserver = new ResizeObserver((entries) => {
+        // Skip if we're in the middle of a programmatic update
+        if (this.programmaticUpdate) {
+          return
+        }
+
+        for (const entry of entries) {
+          const newHeight = entry.contentRect.height;
+          
+          // Skip the first observation (initialization)
+          if (!isInitialized) {
+            lastHeight = newHeight;
+            isInitialized = true;
+            return
+          }
+          
+          // Only update if height actually changed significantly (more than 2px to avoid rounding issues)
+          if (lastHeight !== null && Math.abs(lastHeight - newHeight) > 2) {
+            // Clear any pending timeout
+            if (this.resizeTimeout) {
+              clearTimeout(this.resizeTimeout);
+            }
+            
+            // Debounce the update slightly to prevent flickering
+            this.resizeTimeout = setTimeout(() => {
+              this.manualHeight = `${newHeight}px`;
+              this.updateEditorSize();
+              lastHeight = newHeight;
+            }, 10);
+          }
+        }
+      });
+
+      if (this.$refs.container) {
+        this.resizeObserver.observe(this.$refs.container);
+      }
+    },
+
+    updateEditorSize () {
+      // Force ace editor to resize
+      this.$nextTick(() => {
+        if (this.$refs.aceeditor && this.$refs.aceeditor.editor) {
+          const editor = this.$refs.aceeditor.editor;
+          editor.resize();
+        }
+      });
+    },
+
     editorInit (editor) {
       Promise.resolve().then(function () { return text$1; });
       Promise.resolve().then(function () { return html$1; });
@@ -10400,7 +10543,6 @@ var script$W = {
       Promise.resolve().then(function () { return scss$1; });
       Promise.resolve().then(function () { return json$1; });
       Promise.resolve().then(function () { return javascript$1; });
-      Promise.resolve().then(function () { return json$1; });
 
       Promise.resolve().then(function () { return text; });
       Promise.resolve().then(function () { return html; });
@@ -10408,7 +10550,6 @@ var script$W = {
       Promise.resolve().then(function () { return scss; });
       Promise.resolve().then(function () { return json; });
       Promise.resolve().then(function () { return javascript; });
-      Promise.resolve().then(function () { return json; });
 
       Promise.resolve().then(function () { return chrome; });
       Promise.resolve().then(function () { return language_tools; });
@@ -10427,8 +10568,6 @@ var script$W = {
         readOnly: this.readOnly,
         highlightActiveLine: this.highlightActiveLine,
         cursorStyle: 'smooth',
-        // // minLines: this.height,
-        // maxPixelHeight: 100,
 
         ...(this.autoComplete && {
           enableBasicAutocompletion: true,
@@ -10444,6 +10583,19 @@ var script$W = {
       editor.on('input', this.updatePlaceholder);
       this.updatePlaceholder(undefined, editor);
 
+      // Calculate initial content height and listen for changes if resizable
+      if (this.resizable) {
+        // Calculate initial height
+        this.$nextTick(() => {
+          this.calculateContentHeight(editor);
+        });
+
+        // Recalculate on content change
+        editor.session.on('change', () => {
+          this.calculateContentHeight(editor);
+        });
+      }
+
       if (this.initExpressions) {
         this.processExpressionAutoComplete(editor);
       } else if (this.autoComplete) {
@@ -10487,55 +10639,95 @@ var script$W = {
     },
 
     processExpressionAutoComplete (editor) {
+      // Extract text context from current cursor position
+      const getTextContext = (pos) => {
+        const session = editor.session;
+        const line = session.getLine(pos.row);
+        const lastSpaceIndex = Math.max(0, line.lastIndexOf(' '));
+        const textAfterSpace = line.slice(lastSpaceIndex, pos.column).trim();
+        const lastDotIndex = textAfterSpace.lastIndexOf('.');
+        const searchTextForCaption = lastDotIndex >= 0 ? textAfterSpace.slice(lastDotIndex + 1) : textAfterSpace;
+        
+        return { line, textAfterSpace, searchTextForCaption }
+      };
+
+      // Check if suggestion matches search text
+      const matchesSuggestion = (suggestion, textAfterSpace, searchTextForCaption) => {
+        const suggestionValue = typeof suggestion === 'string' ? suggestion : suggestion.value;
+        const suggestionCaption = typeof suggestion === 'string' ? suggestion : suggestion.caption;
+        return suggestionValue.toLowerCase().startsWith(textAfterSpace.toLowerCase()) ||
+               suggestionCaption.toLowerCase().startsWith(searchTextForCaption.toLowerCase())
+      };
+
+      // Check and trigger autocomplete if there are matching suggestions
+      const checkAndTriggerAutocomplete = () => {
+        setTimeout(() => {
+          const pos = editor.getCursorPosition();
+          const { line, textAfterSpace, searchTextForCaption } = getTextContext(pos);
+          
+          // Don't trigger after closing braces
+          const charBeforeCursor = pos.column > 0 ? line[pos.column - 1] : '';
+          if (charBeforeCursor === '}' || charBeforeCursor === ')' || textAfterSpace.length === 0) {
+            return
+          }
+          
+          const context = this.getContext(editor, editor.session, pos);
+          const suggestions = this.getSuggestionsForContext(context);
+          const hasMatches = suggestions.some(s => matchesSuggestion(s, textAfterSpace, searchTextForCaption));
+          
+          if (hasMatches) {
+            editor.execCommand('startAutocomplete');
+          }
+        }, 10);
+      };
+      
       const staticWordCompleter = {
+        identifierRegexps: [/[${\w]+/],
         getCompletions: (editor, session, pos, prefix, callback) => {
           const context = this.getContext(editor, session, pos);
           const suggestions = this.getSuggestionsForContext(context);
-
-          callback(null, suggestions.map(suggestion => {
-            let caption = '';
-            let value = '';
-
-            if (typeof suggestion === 'string') {
-              caption = suggestion;
-              value = suggestion;
-            } else {
-              caption = suggestion.caption;
-              value = suggestion.value;
-            }
-
-            return {
-              caption,
-              value,
-              meta: 'variable',
-              completer: {
-                insertMatch: function (insertEditor, data) {
-                  const insertValue = data.value;
-
-                  insertEditor.jumpToMatching();
-                  const line = session.getLine(pos.row);
-                  let lastSpaceIndex = line.lastIndexOf(' ') >= 0 ? line.lastIndexOf(' ') : 0;
-
-                  if (lastSpaceIndex > 0) {
-                    lastSpaceIndex += 1;
-                  }
-
-                  insertEditor.session.replace({
-                    start: { row: pos.row, column: lastSpaceIndex },
-                    end: { row: pos.row, column: pos.column },
-                  }, insertValue);
+          const { textAfterSpace, searchTextForCaption } = getTextContext(pos);
+          
+          const filteredSuggestions = suggestions
+            .filter(s => matchesSuggestion(s, textAfterSpace, searchTextForCaption))
+            .map(suggestion => {
+              const caption = typeof suggestion === 'string' ? suggestion : suggestion.caption;
+              const value = typeof suggestion === 'string' ? suggestion : suggestion.value;
+              const captionMatch = caption.toLowerCase().indexOf(searchTextForCaption.toLowerCase());
+              
+              return {
+                caption,
+                value,
+                score: captionMatch === 0 ? 10000 : 1000,
+                meta: 'variable',
+                completer: {
+                  insertMatch: (insertEditor, data) => {
+                    insertEditor.jumpToMatching();
+                    const line = session.getLine(pos.row);
+                    const spaceIndex = line.lastIndexOf(' ');
+                    const startCol = spaceIndex > 0 ? spaceIndex + 1 : 0;
+
+                    insertEditor.session.replace({
+                      start: { row: pos.row, column: startCol },
+                      end: { row: pos.row, column: pos.column },
+                    }, data.value);
+                    
+                    checkAndTriggerAutocomplete();
+                  },
                 },
-              },
-            }
-          }));
+              }
+            });
+
+          callback(null, filteredSuggestions);
         },
       };
 
       editor.completers = [staticWordCompleter];
 
-      editor.commands.on('afterExec', function (e) {
+      // Only trigger autocomplete automatically when there's a partial match
+      editor.commands.on('afterExec', (e) => {
         if (['insertstring', 'Return'].includes(e.command.name) || /^[\w.($]$/.test(e.args)) {
-          editor.execCommand('startAutocomplete');
+          checkAndTriggerAutocomplete();
         }
       });
 
@@ -10545,17 +10737,13 @@ var script$W = {
 
     getContext (editor, session, pos) {
       const line = session.getLine(pos.row);
-      const lastSpaceIndex = line.lastIndexOf(' ') >= 0 ? line.lastIndexOf(' ') : 0;
-      const textBeforeCursor = line.slice(lastSpaceIndex, pos.column);
-      const context = textBeforeCursor.split('.').slice(0, -1).join('.').trim();
-
-      return context
+      const lastSpaceIndex = Math.max(0, line.lastIndexOf(' '));
+      const textBeforeCursor = line.slice(lastSpaceIndex, pos.column).trim();
+      return textBeforeCursor.split('.').slice(0, -1).join('.')
     },
 
     getSuggestionsForContext (context) {
-      const suggestions = this.autoCompleteSuggestions;
-
-      return suggestions[context] || []
+      return this.autoCompleteSuggestions[context] || []
     },
   },
 };
@@ -10564,18 +10752,18 @@ var script$W = {
 const __vue_script__$W = script$W;
 
 /* template */
-var __vue_render__$U = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('ace-editor',_vm._g({ref:"aceeditor",class:{ 'border-0 rounded-0': !_vm.border },attrs:{"lang":_vm.lang,"mode":_vm.lang,"theme":"chrome","width":"100%","height":_vm.height},on:{"init":_vm.editorInit},model:{value:(_vm.editorValue),callback:function ($$v) {_vm.editorValue=$$v;},expression:"editorValue"}},_vm.$listeners)),_vm._v(" "),(_vm.showPopout)?_c('b-button',{staticClass:"popout position-absolute px-2 py-1 mr-3",attrs:{"variant":"link"},on:{"click":function($event){return _vm.$emit('open')}}},[_c('font-awesome-icon',{attrs:{"icon":['fas', 'expand-alt']}})],1):_vm._e()],1)};
+var __vue_render__$U = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"position-relative ace-editor-wrapper",class:{ 'resizable': _vm.resizable },style:(_vm.containerStyle)},[_c('ace-editor',_vm._g({ref:"aceeditor",class:{ 'border-0 rounded-0': !_vm.border },attrs:{"lang":_vm.lang,"mode":_vm.lang,"theme":"chrome","width":"100%","height":_vm.effectiveHeight},on:{"init":_vm.editorInit},model:{value:(_vm.editorValue),callback:function ($$v) {_vm.editorValue=$$v;},expression:"editorValue"}},_vm.$listeners)),_vm._v(" "),(_vm.showPopout)?_c('b-button',{staticClass:"popout position-absolute px-2 py-1 mr-3",attrs:{"variant":"link"},on:{"click":function($event){return _vm.$emit('open')}}},[_c('font-awesome-icon',{attrs:{"icon":['fas', 'expand-alt']}})],1):_vm._e()],1)};
 var __vue_staticRenderFns__$U = [];
 
   /* style */
   const __vue_inject_styles__$X = function (inject) {
     if (!inject) return
-    inject("data-v-0a4a06ee_0", { source: ".popout[data-v-0a4a06ee]{z-index:7;bottom:0;right:0}", map: undefined, media: undefined })
-,inject("data-v-0a4a06ee_1", { source: ".ace_editor{color:var(--black)!important;background-color:var(--white)!important;border-radius:.25rem;border:2px solid var(--extra-light);font-size:initial!important}.ace_editor .ace_gutter{background-color:var(--light)!important;color:var(--black)!important}.ace_editor .ace_gutter .ace_gutter-active-line{background-color:var(--extra-light)!important}.ace_editor .ace_hidden-cursors .ace_cursor{color:var(--white)!important}.ace_editor .ace_cursor{color:var(--black)!important}.ace_autocomplete{border:none!important}.ace_autocomplete .ace_active-line{background-color:var(--extra-light)!important}.ace_autocomplete .ace_line-hover{border:none!important;background-color:var(--extra-light)!important}.ace_autocomplete .ace_completion-highlight{color:var(--primary)!important}", map: undefined, media: undefined });
+    inject("data-v-00e2204c_0", { source: ".popout[data-v-00e2204c]{z-index:7;bottom:0;right:0}.ace-editor-wrapper.resizable[data-v-00e2204c]{resize:vertical;overflow:auto}.ace-editor-wrapper.resizable .ace_editor[data-v-00e2204c]{height:100%!important}", map: undefined, media: undefined })
+,inject("data-v-00e2204c_1", { source: ".ace_editor{color:var(--black)!important;background-color:var(--white)!important;border-radius:.25rem;border:2px solid var(--extra-light);font-size:initial!important}.ace_editor .ace_gutter{background-color:var(--light)!important;color:var(--black)!important}.ace_editor .ace_gutter .ace_gutter-active-line{background-color:var(--extra-light)!important}.ace_editor .ace_hidden-cursors .ace_cursor{color:var(--white)!important}.ace_editor .ace_cursor{color:var(--black)!important}.ace_autocomplete{border:none!important}.ace_autocomplete .ace_active-line{background-color:var(--extra-light)!important}.ace_autocomplete .ace_line-hover{border:none!important;background-color:var(--extra-light)!important}.ace_autocomplete .ace_completion-highlight{color:var(--primary)!important}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$X = "data-v-0a4a06ee";
+  const __vue_scope_id__$X = "data-v-00e2204c";
   /* module identifier */
   const __vue_module_identifier__$X = undefined;
   /* functional template */
@@ -10629,9 +10817,9 @@ var script$V = {
       default: 'text',
     },
 
-    height: {
+    minHeight: {
       type: String,
-      default: '80px',
+      default: '2.35rem',
     },
 
     showLineNumbers: {
@@ -10683,6 +10871,11 @@ var script$V = {
       type: String,
       default: '',
     },
+
+    resizable: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   computed: {
@@ -11287,7 +11480,7 @@ var script$R = {
       return this.$SystemAPI
         .userGroupList(this.userGroup.filter)
         .then(({ set }) => {
-          this.userGroup.options = set.map((m) => Object.freeze(m));
+          this.userGroup.options = set.map((m) => new cortezaJs.system.UserGroup(m));
         })
         .finally(() => {
           setTimeout(() => {
@@ -11298,9 +11491,7 @@ var script$R = {
 
     getUserGroupByID (userGroupID) {
       if (!userGroupID || userGroupID === cortezaJs.NoID) {
-        this.userGroup.value = this.userGroup.options.find(
-          ({ selfID }) => selfID === cortezaJs.NoID,
-        );
+        this.userGroup.value = this.userGroup.options.find(({ isRoot }) => !!isRoot);
 
         this.$emit('input', this.userGroup.value?.userGroupID);
         return
@@ -11310,13 +11501,6 @@ var script$R = {
 
       if (userGroup) {
         this.userGroup.value = userGroup;
-      } else {
-        return this.$SystemAPI.userGroupRead({ userGroupID }).then((userGroup) => {
-          this.userGroup.options.push(Object.freeze(userGroup));
-          this.userGroup.value = this.userGroup.options.find(
-            ({ selfID }) => selfID === cortezaJs.NoID,
-          );
-        })
       }
     },