@aquera/nile-elements 0.0.88 → 0.0.90

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.88",
+  "version": "0.0.90",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -78,8 +78,10 @@
     "./nile-split-panel": "./dist/src/nile-split-panel/index.js",
     "./nile-list": "./dist/src/nile-list/index.js",
     "./nile-list-item": "./dist/src/nile-list-item/index.js",
+    "./nile-divider": "./dist/src/nile-divider/index.js",
     "./nile-detail": "./dist/src/nile-detail/index.js",
-    "./nile-title": "./dist/src/nile-title/index.js"
+    "./nile-title": "./dist/src/nile-title/index.js",
+    "./nile-toolbar": "./dist/src/nile-toolbar/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -108,6 +110,7 @@
     "@floating-ui/dom": "^1.2.1",
     "composed-offset-position": "^0.0.4",
     "@codemirror/lang-javascript": "6.2.1",
+    "@codemirror/lang-sql": "6.7.0",
     "codemirror": "6.0.1",
     "chalk": "5.3.0",
     "figlet": "1.7.0"

package/src/index.ts

@@ -72,3 +72,5 @@ export { NileList } from './nile-list';
 export { NileDetail } from './nile-detail';
 export { NileDivider } from './nile-divider';
 export { NileTitle } from './nile-title';
+
+export { NileToolbar } from './nile-toolbar';

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

@@ -18,13 +18,14 @@ import { styles } from './nile-code-editor.css';
 import { EditorView } from 'codemirror';
 import { ViewUpdate } from '@codemirror/view';
 import { EditorState, Compartment } from '@codemirror/state';
-import {lineNumbers} from '@codemirror/view';
+import { lineNumbers } from '@codemirror/view';
 import {
   javascript,
   javascriptLanguage,
   scopeCompletionSource,
   completionPath,
 } from '@codemirror/lang-javascript';
+import { sql } from '@codemirror/lang-sql';
 import { autocompletion } from '@codemirror/autocomplete';
 import { CompletionContext, Completion } from '@codemirror/autocomplete';
 import NileElement from '../internal/nile-element';
@@ -44,17 +45,26 @@ import { Theme } from './theme';
  */
 @customElement('nile-code-editor')
 export class NileCodeEditor extends NileElement {
+  
   @query('.code-mirror') codeEditor: HTMLInputElement;
-  @property({ type: Boolean, reflect: true }) multiline = false;
+
   @property({ type: String }) value = '';
+
   @property({ type: String }) customAutoCompletions: any = {};
-  @property({ type: Boolean }) updateValue: any = false;
-  @property({ attribute: 'error-message' }) errorMessage = '';
-  @property({ attribute: 'error', type: Boolean }) error = false;
-  @property({ attribute: 'noborder', type:Boolean }) noborder = false;
 
-  @property({ type: Boolean }) expandable: any = false;
-  @property({ type: Boolean, reflect:true }) readonly: boolean = false;
+  @property({ type: String }) language: 'javascript' | 'sql' = 'javascript'
+
+  @property({ attribute: 'error-message' }) errorMessage: string = '';
+
+  @property({ attribute: 'error', type: Boolean }) error: boolean = false;
+
+  @property({ attribute: 'noborder', type: Boolean }) noborder: boolean = false;
+
+  @property({ type: Boolean, reflect: true }) multiline: boolean = false;
+
+  @property({ type: Boolean }) expandable: boolean = false;
+
+  @property({ type: Boolean, reflect: true }) readonly: boolean = false;
 
   /**
    * The styles for CodeEditor
@@ -78,12 +88,13 @@ export class NileCodeEditor extends NileElement {
   public view: EditorView;
 
   convertToSingleLine(code: any) {
+    if (!code) return '';
     // Remove line breaks and unnecessary whitespace
     return code.replace(/\s+/g, ' ').trim();
   }
-  lineNumbersComp = new Compartment();
-  restrictSingleLineComp = new Compartment();
-  readOnlyComp = new Compartment();
+  private lineNumbersComp = new Compartment();
+  private restrictSingleLineComp = new Compartment();
+  private readOnlyComp = new Compartment();
 
   getLineNumbersExension() {
     return this.multiline ? lineNumbers() : [];
@@ -93,8 +104,8 @@ export class NileCodeEditor extends NileElement {
     return EditorState.readOnly.of(this.readonly);
   }
 
-  getSingleLineExtension(){
-     return !this.multiline ? EditorState.transactionFilter.of(tr =>
+  getSingleLineExtension() {
+    return !this.multiline ? EditorState.transactionFilter.of(tr =>
       tr.newDoc.lines > 1 ? [] : tr
     ) : [];
   }
@@ -106,6 +117,7 @@ export class NileCodeEditor extends NileElement {
     const customAutoCompletions = javascriptLanguage.data.of({
       autocomplete: scopeCompletionSource(this.customAutoCompletions),
     });
+    const language = this.language == "sql" ? sql() : javascript()
     let startState = EditorState.create({
       doc: !this.multiline
         ? this.convertToSingleLine(this.value)
@@ -120,7 +132,7 @@ export class NileCodeEditor extends NileElement {
         restrictSingleLineExtension,
         customAutoCompletions,
         autocompletion(),
-        javascript(),
+        language,
         EditorView.theme(Theme),
         EditorView.updateListener.of((v: ViewUpdate) => {
           if (v.docChanged) {
@@ -141,7 +153,7 @@ export class NileCodeEditor extends NileElement {
   }
 
   singleLineMultiLineToggle() {
-     this.view.dispatch({
+    this.view.dispatch({
       changes: {
         from: 0,
         to: this.view.state.doc.length,
@@ -151,22 +163,22 @@ export class NileCodeEditor extends NileElement {
       },
     });
   }
-  
+
   updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
-    if (changedProperties.has('value') && this.updateValue) {
-          // Editor has already been initialized, update its state
-          this.singleLineMultiLineToggle();
-        }
+    if (changedProperties.has('value')) {
+      // Editor has already been initialized, update its state
+      this.singleLineMultiLineToggle();
+    }
     if (changedProperties.has('multiline')) {
       this.view.dispatch({
         effects: [this.lineNumbersComp.reconfigure(this.getLineNumbersExension()),
-          this.restrictSingleLineComp.reconfigure(this.getSingleLineExtension())],
+        this.restrictSingleLineComp.reconfigure(this.getSingleLineExtension())],
       })
       this.singleLineMultiLineToggle();
     }
     if (changedProperties.has('readonly')) {
-      this.view.dispatch({ effects: this.readOnlyComp.reconfigure(this.getReadOnlyExtension()) })      
+      this.view.dispatch({ effects: this.readOnlyComp.reconfigure(this.getReadOnlyExtension()) })
     }
   }
 
@@ -186,21 +198,21 @@ export class NileCodeEditor extends NileElement {
     return html`<div
         part="code-editor-base"
         class=${classMap({
-          'code-mirror': true,
-          noborder: noborder,
-          error: hasError || hasErrorMessage,
-          'code-mirror__singleline': !this.multiline,
-        })}
+      'code-mirror': true,
+      noborder: noborder,
+      error: hasError || hasErrorMessage,
+      'code-mirror__singleline': !this.multiline,
+    })}
       >
         ${this.expandable
-          ? html` <nile-icon
+        ? html` <nile-icon
               name="expand-2"
               class="code-editor__icon__container"
               size="16"
               color="black"
               @click="${(e: CustomEvent) => this.expandCodeEditor()}"
             ></nile-icon>`
-          : ''}
+        : ''}
       </div>
       ${hasErrorMessage
         ? html`

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

@@ -1,10 +1,11 @@
 export const Theme = {
   '&': {
-    width:"100%",
     fontSize: '14px',
     fontFamily: 'Colfax-regular',
     fontWeight: '400',
   },
   '.cm-content': {},
-  ".cm-scroller": {overflow: "hidden"},
+  ".cm-scroller": {
+    scrollbarWidth:'thin',
+  },
 };

package/src/nile-divider/nile-divider.css.ts

@@ -22,7 +22,7 @@ export const styles = css`
 	
 	.horizontal {
 		height: 2px;
-		width: 100%;
+		/* width: 100%; */
 		margin: 8px 0;
 	}
 
@@ -34,7 +34,7 @@ export const styles = css`
 		vertical-align: middle;
 	}
 
-	.inset {
+	.inset.horizontal {
 		margin-left: 72px;
 	}
 `;

package/src/nile-toolbar/index.ts

@@ -1,52 +1 @@
-/**
- * Copyright Aquera Inc 2023
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
-import { customElement } from 'lit/decorators.js';
-import {styles} from './nile-toolbar.css';
-
-/**
- * Nile icon component.
- *
- * @tag nile-toolbar
- *
- */
-@customElement('nile-toolbar')
-export class NileToolbar extends LitElement {
-
-	/**
-	 * The styles for Toolbar
-	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-	 */
-	public static get styles(): CSSResultArray {
-		return [styles];
-	}
-
-	/* #endregion */
-
-	/* #region Methods */
-
-	/**
-	 * Render method
-	 * @slot This is a slot test
-	 */
-	public render(): TemplateResult {
-		return html`
-			<slot> </slot>
-			`;
-	}
-
-	/* #endregion */
-}
-
-export default NileToolbar;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-toolbar': NileToolbar;
-  }
-}
+export { NileToolbar } from './nile-toolbar';

package/src/nile-toolbar/nile-toolbar.css.ts

@@ -1,19 +1,35 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
-import {css} from 'lit-element';
+import { css } from 'lit-element';
 
 /**
  * Toolbar CSS
  */
 export const styles = css`
-	:host {
+  :host {
+    display: block;
+    width: 100%;
+  }
 
-	}
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    box-sizing: border-box;
+    min-height: 64px;
+	line-height: var(--nile-toolbar-line-height);
+	font-weight: var(--nile-toolbar-font-weight);
+    font-family: var(--nile-font-family-sans-serif);
+	font-size: var(--nile-toolbar-font-size);
+    background-color: var(--nile-toolbar-background-color, #f5f5f5);
+    color: var(--nile-toolbar-text-color, rgba(0, 0, 0, 0.87));
+  }
 `;
 
-export default [styles];
+export default [styles];

package/src/nile-toolbar/nile-toolbar.ts

@@ -0,0 +1,63 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html, property, CSSResultArray, TemplateResult } from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-toolbar.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile toolbar component.
+ *
+ * @tag nile-toolbar
+ *
+ */
+@customElement('nile-toolbar')
+export class NileToolbar extends NileElement {
+
+	@property({ reflect: true }) color: string = ''
+	@property({ reflect: true }) background: string = ''
+
+	/**
+	 * The styles for nile-toolbar
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+		<div class="toolbar" part="nile-toolbar" style="${this.color ? 'color:' + this.color + ';' : ''} ${this.background ? 'background:' + this.background + ';' : ''}">
+		  <slot name="start"></slot>
+		  <div class="toolbar-content" part="toolbar-mid">
+			<slot></slot>
+		  </div>
+		  <slot name="end"></slot>
+		</div>
+	  `;
+	}
+
+	/* #endregion */
+}
+
+export default NileToolbar;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'nile-toolbar': NileToolbar;
+	}
+}