@aquera/nile-elements 0.0.87 → 0.0.89

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.87",
+  "version": "0.0.89",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-code-editor/nile-code-editor.css.ts

@@ -23,6 +23,9 @@ export const styles = css`
     border-radius: 5px;
     border: 1px solid rgb(204, 204, 204);
   }
+  .code-mirror__singleline .cm-scroller{
+    scrollbar-width:none;
+  }
 
   .error {
     border-color: #e5434d;

package/src/nile-code-editor/nile-code-editor.ts

@@ -50,11 +50,11 @@ export class NileCodeEditor extends NileElement {
   @property({ type: String }) customAutoCompletions: any = {};
   @property({ type: Boolean }) updateValue: any = false;
   @property({ attribute: 'error-message' }) errorMessage = '';
-  @property({ attribute: 'error' }) error = false;
-  @property({ attribute: 'noborder' }) noborder = false;
+  @property({ attribute: 'error', type: Boolean }) error = false;
+  @property({ attribute: 'noborder', type:Boolean }) noborder = false;
 
   @property({ type: Boolean }) expandable: any = false;
-  @property({ type: Boolean }) readonly: any = false;
+  @property({ type: Boolean, reflect:true }) readonly: boolean = false;
 
   /**
    * The styles for CodeEditor
@@ -71,12 +71,14 @@ export class NileCodeEditor extends NileElement {
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
+    this.view.destroy()
     this.emit('nile-destroy');
   }
 
-  view: EditorView;
+  public view: EditorView;
 
   convertToSingleLine(code: any) {
+    if(!code) return '';
     // Remove line breaks and unnecessary whitespace
     return code.replace(/\s+/g, ' ').trim();
   }
@@ -84,10 +86,6 @@ export class NileCodeEditor extends NileElement {
   restrictSingleLineComp = new Compartment();
   readOnlyComp = new Compartment();
 
-
-  @watch(['value'], { waitUntilFirstUpdate: true })
-  handleValueChange() { }
-
   getLineNumbersExension() {
     return this.multiline ? lineNumbers() : [];
   }
@@ -114,24 +112,26 @@ export class NileCodeEditor extends NileElement {
         ? this.convertToSingleLine(this.value)
         : this.value,
       extensions: [
-          basicSetup({
-              lineNumbers: false,
-              highlightActiveLine: false,
-              foldGutter: false,
-            }),
+        basicSetup({
+          highlightActiveLine: false,
+          foldGutter: !!this.multiline,
+        }),
         lineNumbersExtension,
         readOnlyExtension,
         restrictSingleLineExtension,
         customAutoCompletions,
         autocompletion(),
         javascript(),
-        this.setTheme(),
+        EditorView.theme(Theme),
         EditorView.updateListener.of((v: ViewUpdate) => {
           if (v.docChanged) {
-            this.emitValues(this.view.state.doc.toString());
+            this.emit('nile-change', { value: this.view.state.doc.toString() })
           }
         }),
-           
+        EditorView.domEventHandlers({
+          focus: () => this.dispatchEvent(new Event('nile-focus')),
+          blur: () => this.dispatchEvent(new Event('nile-blur')),
+        }),
       ],
     });
 
@@ -139,26 +139,18 @@ export class NileCodeEditor extends NileElement {
       state: startState,
       parent: this.codeEditor,
     });
-    this.addOpenListeners();
   }
-  
-
-  addOpenListeners() {
-    this.view.contentDOM.addEventListener('blur', () => this.toggleFocusAndBlur('blur'));
-    this.view.contentDOM.addEventListener('focus', () => this.toggleFocusAndBlur('focus'));
-  }
-  
 
   singleLineMultiLineToggle() {
      this.view.dispatch({
-            changes: {
-              from: 0,
-              to: this.view.state.doc.length,
-              insert: !this.multiline
-                ? this.convertToSingleLine(this.value)
-                : this.value,
-            },
-          });
+      changes: {
+        from: 0,
+        to: this.view.state.doc.length,
+        insert: !this.multiline
+          ? this.convertToSingleLine(this.value)
+          : this.value,
+      },
+    });
   }
   
   updated(changedProperties: PropertyValues) {
@@ -179,23 +171,6 @@ export class NileCodeEditor extends NileElement {
     }
   }
 
-  toggleFocusAndBlur(action: 'blur' | 'focus') {
-    if(action === 'blur'){
-      this.emit('nile-blur', { onBlur : true });
-     }
-    if (action === 'focus') {
-      this.emit('nile-focus', { onFocus : true });
-    }
- }
-
-  setTheme() {
-    return EditorView.theme(Theme);
-  }
-
-  emitValues(value: string) {
-    this.emit('nile-change', { value: value });
-  }
-
   expandCodeEditor() {
     this.emit('nile-expand', { expand: true });
   }

package/src/nile-code-editor/theme.ts

@@ -5,5 +5,7 @@ export const Theme = {
     fontWeight: '400',
   },
   '.cm-content': {},
-  '.cm-scroller': {},
-};
+  ".cm-scroller": {
+    scrollbarWidth:'thin',
+  },
+};