@aquera/nile-elements 0.1.0 → 0.1.1

package/package.json

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

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

@@ -16,7 +16,7 @@ import {
 import { customElement, query, property } from 'lit/decorators.js';
 import { styles } from './nile-code-editor.css';
 import { EditorView } from 'codemirror';
-import { ViewUpdate } from '@codemirror/view';
+import { ViewUpdate, placeholder } from '@codemirror/view';
 import { 
   Compartment,
   EditorState,
@@ -54,6 +54,8 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: String, reflect: true , attribute: true }) expandIcon = "expand-2";
 
+  @property({ type: String, reflect: true , attribute: true }) placeholder = "";
+
   @property({ type: Object, reflect: true , attribute: true }) customAutoCompletions: object | any = {};
 
   @property({ type: String, reflect: true , attribute: true}) language: 'javascript' | 'sql' | 'json' = 'javascript';
@@ -65,8 +67,8 @@ export class NileCodeEditor extends NileElement {
   @property({ type: Boolean, reflect: true , attribute: 'noborder' }) noborder: boolean = false;
 
   @property({ type: Boolean, reflect: true , attribute: true }) multiline: boolean = false;
-
-  @property({ type: Boolean, reflect: true , attribute: true }) suggestionBracketSupport: boolean = false;
+  
+  @property({ type: Boolean, reflect: true , attribute: true }) allowVariableInCustomSuggestion: boolean = false;
 
   @property({ type: Boolean, reflect: true , attribute: true }) lineNumbers: boolean = false;
 
@@ -89,6 +91,7 @@ export class NileCodeEditor extends NileElement {
   private restrictSingleLineComp = new Compartment();
   private readOnlyComp = new Compartment();
   private customCompletionComp = new Compartment();
+  private placeholderComp = new Compartment();
 
   /**
    * The styles for CodeEditor
@@ -140,6 +143,13 @@ export class NileCodeEditor extends NileElement {
         ]
       })
     }
+    if (changedProperties.has('placeholder')) {
+      this.view.dispatch({ 
+        effects: [
+          this.placeholderComp.reconfigure(this.getPlaceholderExtension()),
+        ]
+      })
+    }
     if (changedProperties.has('lineNumbers') || changedProperties.has('lineNumbersMultiline')) {
       this.view.dispatch({ 
         effects: [
@@ -151,7 +161,7 @@ export class NileCodeEditor extends NileElement {
       this.view.dispatch({ 
         effects: [
           this.customCompletionComp.reconfigure(javascriptLanguage.data.of({
-            autocomplete: this.suggestionBracketSupport?this.customAutocomplete: scopeCompletionSource(this.customAutoCompletions),
+            autocomplete: this.customAutocomplete
           }))
         ]
       })
@@ -173,16 +183,16 @@ export class NileCodeEditor extends NileElement {
           'no-scroller': noScrollbar
         })}
       >
-        ${this.expandable
-        ? html` 
-          <nile-icon
-            name="${this.expandIcon}"
-            class="code-editor__icon__container"
-            size="16"
-            color="black"
-            @click="${(e: CustomEvent) => this.emitNileExpand()}"
-          ></nile-icon>`
-        : ''}
+      ${this.expandable
+      ? html` 
+        <nile-icon
+          name="${this.expandIcon}"
+          class="code-editor__icon__container"
+          size="16"
+          color="black"
+          @click="${(e: CustomEvent) => this.emit('nile-expand')}"
+        ></nile-icon>`
+      : ''}
       </div>
       ${hasErrorMessage
         ? html`
@@ -208,10 +218,12 @@ export class NileCodeEditor extends NileElement {
     const lineNumbersExtension = this.lineNumbersComp.of(this.getLineNumbersExension());
     const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
     const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension())
+    const placeholderExtension = this.placeholderComp.of(this.getPlaceholderExtension())
+    const language = this.getLanguageExtension()
     const customAutoCompletions = this.customCompletionComp.of(javascriptLanguage.data.of({
-      autocomplete: this.suggestionBracketSupport?this.customAutocomplete: scopeCompletionSource(this.customAutoCompletions),
+      autocomplete: this.customAutocomplete
     }));
-    const language = this.getLanguageExtension()
+
     this.viewState = EditorState.create({
       doc: !this.multiline ? this.convertToSingleLine(this.value) : this.value,
       extensions: [
@@ -223,6 +235,7 @@ export class NileCodeEditor extends NileElement {
         readOnlyExtension,
         restrictSingleLineExtension,
         customAutoCompletions,
+        placeholderExtension,
         autocompletion(),
         language,
         EditorView.theme(Theme),
@@ -297,55 +310,58 @@ export class NileCodeEditor extends NileElement {
     ) : [];
   }
 
+  getPlaceholderExtension(){
+    return this.placeholder ? placeholder(this.placeholder) : [];
+  }
+
   restrictSingleLine() {
     return EditorState.transactionFilter.of(tr =>
       tr.newDoc.lines > 1 ? [] : tr
     );
   }
 
-  emitNileExpand() {
-    this.emit('nile-expand', { expand: true },false);
-  }
-
   customAutocomplete = (context: CompletionContext): CompletionResult | null => {
     // Getting the valid last line, last text from the code editor
     let text = context.state.doc.sliceString(0, context.pos);
-    const [textBeforeCursor,baseTextAfterSeperation]=this.splitStringAtLastSeparator(text.split('\n').at(-1)?.split(' ').at(-1)+'')
-    const textAfterSeperation=baseTextAfterSeperation.replace(/["'\[]/g, '')
+    const [textBeforeCursor, baseTextAfterSeperation] = this.splitStringAtLastSeparator(text.split('\n').at(-1)?.split(' ').at(-1) + '')
+    const textAfterSeperation = baseTextAfterSeperation.replace(/["'\[]/g, '')
 
-    const isSuggestionString=textAfterSeperation!=baseTextAfterSeperation;
+    const isInString = textAfterSeperation != baseTextAfterSeperation;
+    const isBracket = textBeforeCursor.at(-1) == '[';
+    const isDot = textBeforeCursor.at(-1) == '.';
 
     if (!this.isValidPath(textBeforeCursor)) return { from: context.pos, options: [] };
-    if(['.', '['].includes(textBeforeCursor[textBeforeCursor.length - 1])){
+    if (['.', '['].includes(textBeforeCursor[textBeforeCursor.length - 1])) {
       // Parse the path for dot or bracket notation
       const path = this.parsePath(textBeforeCursor);
       if (path) {
+        if (isDot && isInString) return null;
         let resolved = this.resolveNestedProperties(this.customAutoCompletions, path);
-        if(textAfterSeperation){
-          const obj:any={}
-          Object.keys(resolved).forEach((key)=>{
-            if(key.toLowerCase().startsWith(textAfterSeperation.toLowerCase())){
-              obj[key]=resolved[key]
+        if (textAfterSeperation) {
+          const obj: any = {}
+          Object.keys(resolved).forEach((key) => {
+            if (key.toLowerCase().startsWith(textAfterSeperation.toLowerCase())) {
+              obj[key] = resolved[key]
             }
           })
-          resolved=obj
+          resolved = obj
         }
         // If resolved is an object, provide its keys as suggestions
         if (resolved && typeof resolved === 'object') {
           return {
-            from: context.pos-textAfterSeperation.length,
+            from: context.pos - textAfterSeperation.length,
             options: Object.keys(resolved).map((key) => ({
               label: key,
               type: 'property',
               info: `Key of ${path[path.length - 1]}`,
-              apply: key,
+              apply: !this.allowVariableInCustomSuggestion && (isBracket && !isInString) ? "\'" + key + "\'" : key,
               boost: 999
             })),
           };
         }
       }
     }
-    
+
     // Match for top-level object suggestions, e.g., "a"
     const baseMatch: any = textBeforeCursor.match(/([a-zA-Z_$][\w$]*)$/);
     if (baseMatch) {
@@ -361,7 +377,7 @@ export class NileCodeEditor extends NileElement {
       }
     }
     // Default to an empty list if no match
-    return { from: context.pos, options: [] };
+    return null;
   };
 
   resolveNestedProperties = (obj:any, keys:any[]) => {

package/src/nile-error-notification/nile-error-notification.ts

@@ -10,6 +10,7 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
+  PropertyValues,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-error-notification.css';
@@ -35,9 +36,8 @@ export class NileErrorNotification extends LitElement {
 
   @property({ type: String, reflect: true  }) color: string = '';
   
-  connectedCallback(): void {
-    super.connectedCallback();
-    if(this.color){
+  protected updated(_changedProperties: PropertyValues): void {
+    if(_changedProperties.has('color')){
       this.style.setProperty('--indication-color',this.color)
     }
   }

package/vscode-html-custom-data.json

@@ -726,7 +726,7 @@
     },
     {
       "name": "nile-code-editor",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `suggestionBracketSupport` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `suggestionBracketSupport` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `insertBetweenCode` - \n\n  * `customAutocomplete` - \n\n  * `resolveNestedProperties` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `insertBetweenCode` - \n\n  * `customAutocomplete` - \n\n  * `resolveNestedProperties` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -736,6 +736,10 @@
           "name": "expandIcon",
           "description": "`expandIcon` {`string`} - \n\nProperty: expandIcon\n\nDefault: expand-2"
         },
+        {
+          "name": "placeholder",
+          "description": "`placeholder` {`string`} - \n\nProperty: placeholder\n\nDefault: "
+        },
         {
           "name": "customAutoCompletions",
           "description": "`customAutoCompletions` - \n\nProperty: customAutoCompletions\n\nDefault: [object Object]"
@@ -775,8 +779,8 @@
           "valueSet": "v"
         },
         {
-          "name": "suggestionBracketSupport",
-          "description": "`suggestionBracketSupport` {`boolean`} - \n\nProperty: suggestionBracketSupport\n\nDefault: false",
+          "name": "allowVariableInCustomSuggestion",
+          "description": "`allowVariableInCustomSuggestion` {`boolean`} - \n\nProperty: allowVariableInCustomSuggestion\n\nDefault: false",
           "valueSet": "v"
         },
         {