@gravitee/ui-components 3.24.2-migrate-codemirror-4150e72 → 3.24.3-fix-lit2-button-623e8b3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.24.3](https://github.com/gravitee-io/gravitee-ui-components/compare/v3.24.2...v3.24.3) (2021-12-15)
+
+
+### Bug Fixes
+
+* resolve will update implementation ([e4a8076](https://github.com/gravitee-io/gravitee-ui-components/commit/e4a8076358a0715734cc03fa9023fc0fb7d9029f))
+
 ## [3.24.2](https://github.com/gravitee-io/gravitee-ui-components/compare/v3.24.1...v3.24.2) (2021-12-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/ui-components",
-  "version": "3.24.2-migrate-codemirror-4150e72",
+  "version": "3.24.3-fix-lit2-button-623e8b3",
   "description": "Gravitee.io UI Components library, based on Web Components",
   "repository": {
     "type": "git",
@@ -49,20 +49,6 @@
     "package.json": "npm run lint:package"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^0.19.5",
-    "@codemirror/basic-setup": "^0.19.0",
-    "@codemirror/closebrackets": "^0.19.0",
-    "@codemirror/fold": "^0.19.1",
-    "@codemirror/gutter": "^0.19.4",
-    "@codemirror/highlight": "^0.19.6",
-    "@codemirror/history": "^0.19.0",
-    "@codemirror/lang-java": "^0.19.1",
-    "@codemirror/lang-javascript": "^0.19.2",
-    "@codemirror/language": "^0.19.3",
-    "@codemirror/language-data": "^0.19.1",
-    "@codemirror/matchbrackets": "^0.19.3",
-    "@codemirror/state": "^0.19.5",
-    "@codemirror/view": "^0.19.16",
     "@formatjs/intl-locale": "^2.4.40",
     "@formatjs/intl-relativetimeformat": "^9.3.2",
     "clipboard-copy": "^4.0.0",
@@ -81,8 +67,6 @@
     "@babel/core": "7.16.0",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/preset-env": "7.16.4",
-    "@codemirror/commands": "^0.19.5",
-    "@codemirror/lang-html": "^0.19.3",
     "@commitlint/cli": "15.0.0",
     "@commitlint/config-conventional": "15.0.0",
     "@highcharts/map-collection": "1.1.3",

package/src/atoms/gv-button.js

@@ -322,14 +322,6 @@ export class GvButton extends LitElement {
     }
   }
 
-  async performUpdate() {
-    super.performUpdate();
-    const icon = this.shadowRoot.querySelector('gv-icon');
-    if (icon) {
-      icon.performUpdate();
-    }
-  }
-
   render() {
     const classes = {
       button: true,

package/src/atoms/gv-select-native.js

@@ -202,7 +202,7 @@ export class GvSelectNative extends InputElement(LitElement) {
 
   willUpdate(changedProperties) {
     if (changedProperties.has('value')) {
-      this.updateState(changedProperties.get('value'));
+      this.updateState(this.value);
     }
   }
 

package/src/atoms/gv-select.js

@@ -239,7 +239,7 @@ export class GvSelect extends withResizeObserver(InputElement(LitElement)) {
 
   willUpdate(changedProperties) {
     if (changedProperties.has('value')) {
-      this.updateState(changedProperties.get('value'));
+      this.updateState(this.value);
     }
   }
 

package/src/index.js

@@ -31,7 +31,6 @@ export { GvCardList } from './molecules/gv-card-list';
 export { GvCard } from './molecules/gv-card';
 export { GvCategoryList } from './molecules/gv-category-list';
 export { GvCategory } from './molecules/gv-category';
-export { GvCodeEditor } from './molecules/gv-code-editor';
 export { GvCodeHint } from './molecules/gv-code-hint';
 export { GvCode } from './molecules/gv-code';
 export { GvConfirm } from './molecules/gv-confirm';

package/src/molecules/gv-code-editor.js

@@ -1,407 +0,0 @@
-/*
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { LitElement, html, css } from 'lit-element';
-
-import { shapeClipboard } from '../styles/shapes';
-import { dispatchCustomEvent } from '../lib/events';
-import { uuid } from '../lib/utils';
-import { classMap } from 'lit-html/directives/class-map';
-
-import { EditorView, basicSetup } from '@codemirror/basic-setup';
-import { EditorState, Compartment, Prec, EditorSelection } from '@codemirror/state';
-import { autocompletion, startCompletion, pickedCompletion } from '@codemirror/autocomplete';
-import { json } from '@codemirror/lang-json';
-import { languages } from '@codemirror/language-data';
-import { placeholder, keymap } from '@codemirror/view';
-import { get } from 'object-path';
-
-const languageCompartment = new Compartment();
-const readonlyCompartment = new Compartment();
-const placeholderCompartment = new Compartment();
-
-/**
- * Code editor component
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-code:input - input events with the `value` on `detail`
- * @fires gv-code:ready - event dispatch when component is ready
- * @fires gv-code:clipboard-copy - event dispatch when component the `value` has been copied to clipboard
- *
- * @attr {String} label - code language
- * @attr {String} value - code content to be highlighted
- * @attr {options} Object - options based on codemirror https://codemirror.net/doc/manual.html#config
- * @attr {Object} grammar - The grammar for Expression Language support
- * @attr {String} placeholder - an example value to display in the input when empty
- * @attr {Number} rows - number of rows of the text element
- * @attr {Boolean} large - for a large input (only if the field has one row)
- * @attr {Boolean} medium - for a medium input (only if the field has one row) (Default)
- * @attr {Boolean} small - for a small input (only if the field has one row)
- *
- * @attr {Boolean} [clipboard=false]- true if field has clipboard button
- * @attr {Boolean} [autofocus=false] - true to put the focus on the input
- * @attr {Boolean} [readonly=false] - true if field is readonly mode
- */
-export class GvCodeEditor extends LitElement {
-  static get properties() {
-    return {
-      value: { type: String },
-      readonly: { type: Boolean },
-      placeholder: { type: String },
-      options: { type: Object },
-      rows: { type: Number },
-      clipboard: { type: Boolean },
-      grammar: { type: Object },
-      _clipboardIcon: { type: String },
-      _codeMirror: { type: Object },
-      _error: { type: String, attribute: false },
-    };
-  }
-
-  constructor() {
-    super();
-    this._id = `gv-code-${uuid()}`;
-    this.value = '';
-    this.readonly = false;
-    this.autofocus = false;
-    this.clipboard = false;
-    this._clipboardIcon = shapeClipboard;
-  }
-
-  render() {
-    const classes = {
-      singleLine: this.singleLine,
-    };
-    return html` <div id="${this._id}" class="${classMap(classes)}"></div> `;
-  }
-
-  _onChange() {
-    dispatchCustomEvent(this, 'input', this.value);
-  }
-
-  get singleLine() {
-    return this.rows === 1;
-  }
-
-  _getModelType(typeId) {
-    if (this.grammar != null) {
-      return get(this.grammar, `_types.${typeId}`);
-    }
-    return null;
-  }
-
-  _isMap(typeId) {
-    return ['Map', 'HttpHeaders', 'MultiValueMap'].includes(typeId);
-  }
-
-  _getEnum(typeId) {
-    if (this.grammar != null) {
-      return get(this.grammar, `_enums.${typeId}`);
-    }
-    return [''];
-  }
-
-  _convertType(type) {
-    if (type) {
-      const lowerType = type.toLowerCase();
-      if (lowerType === 'string') {
-        // class, constant, enum, function, interface, keyword, method, namespace, property, text, type, and variable.
-        return 'text';
-      } else if (lowerType === 'httpheaders' || lowerType === 'multivaluemap') {
-        return 'type';
-      } else if (lowerType === 'int' || lowerType === 'long') {
-        return 'variable';
-      } else if (lowerType.includes('[]')) {
-        return 'enum';
-      }
-    }
-    return 'variable';
-  }
-
-  _autocomplete(ctx) {
-    const { handler, match } = this._completionHandlers
-      .filter((handler) => (this.grammar != null && handler.supportEL === true) || handler.supportEL !== true)
-      .map((handler) => ({ handler, match: handler.expr ? ctx.matchBefore(handler.expr) : true }))
-      .find(({ match, expr }) => match);
-    return handler.run.call(this, ctx, match);
-  }
-
-  _buildMethods(type) {
-    const modelType = this._getModelType(type);
-    return modelType.methods.map(({ name, params = [], returnType }) => {
-      const command = `${name}()`;
-      const displayParams = params.map((p) => `${p.type} ${p.name}`);
-      const label = `${name}(${displayParams.join(', ')})`;
-      const detail = `return ${returnType}`;
-      return {
-        type: 'method',
-        command,
-        apply: (view, completion, from, to) => {
-          const anchor = from + name.length + 1;
-          view.dispatch({
-            changes: { from, to, insert: completion.command },
-            selection: { anchor },
-            userEvent: 'input.complete',
-            annotations: pickedCompletion.of(view),
-          });
-        },
-        label,
-        detail,
-      };
-    });
-  }
-
-  get _completionHandlers() {
-    return [
-      {
-        expr: /{#[a-z]*/,
-        supportEL: true,
-        run(ctx, match) {
-          const prefix = match.text.replaceAll('{#', '');
-          const from = ctx.pos - prefix.length;
-          const options = Object.keys(this.grammar)
-            .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
-            .map((command) => {
-              return {
-                // class, constant, enum, function, interface, keyword, method, namespace, property, text, type, and variable.
-                type: 'variable',
-                command,
-                apply: command,
-                label: command,
-              };
-            });
-          return { from, options };
-        },
-      },
-      {
-        expr: /{#[a-z]*.[a-zA-Z]*/,
-        run(ctx, match) {
-          const tokens = match.text.split('.');
-          const key = tokens[0].replaceAll('{#', '');
-          const prefix = tokens[1];
-          const candidate = this.grammar[key][prefix];
-          let options = [];
-          let from = ctx.pos;
-          if (candidate) {
-            // const modelType = this._getModelType(candidate._type);
-            if (this._isMap(candidate._type)) {
-              options = this._getEnum(candidate._type).map((value) => {
-                const type = this._convertType(candidate._type);
-                const command = `['${value}'][0]`;
-                return {
-                  type,
-                  command,
-                  apply: command,
-                  label: value,
-                };
-              });
-            }
-          } else {
-            from -= prefix.length;
-            const candidate = this.grammar[key];
-            if (candidate._type) {
-              options = this._buildMethods(candidate._type);
-            } else {
-              options = Object.keys(candidate)
-                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
-                .map((command) => ({
-                  type: this._convertType(candidate[command]._type),
-                  command,
-                  apply: command,
-                  label: command,
-                }));
-            }
-          }
-          return { from, options };
-        },
-      },
-      {
-        expr: /{#[a-z]*.[a-zA-Z]*.[a-zA-Z]*/,
-        run(ctx, match) {
-          const tokens = match.text.split('.');
-          const key = tokens[0].replaceAll('{#', '');
-          const word = tokens[1];
-          const prefix = tokens[2];
-          const candidate = this.grammar[key][word];
-          let options = [];
-          let from = ctx.pos;
-          if (candidate) {
-            if (this._isMap(candidate._type)) {
-              options = this._getEnum(candidate._type)
-                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
-                .map((label) => {
-                  const type = this._convertType(candidate._type);
-                  return {
-                    type,
-                    command: `['${label}'][0]`,
-                    apply(view, completion, _from, to) {
-                      const from = _from - prefix.length - 1;
-                      view.dispatch({
-                        changes: { from, to, insert: completion.command },
-                        selection: { anchor: from + completion.command.length },
-                        userEvent: 'input.complete',
-                        annotations: pickedCompletion.of(view),
-                      });
-                    },
-                    label,
-                  };
-                });
-            } else {
-              if (candidate._type) {
-                options = this._buildMethods(candidate._type);
-              } else {
-                from -= prefix.length;
-                options = Object.keys(candidate)
-                  .filter((command) => command.startsWith(prefix))
-                  .map((command) => {
-                    return {
-                      type: this._convertType(candidate[command]._type),
-                      command,
-                      apply: command,
-                      label: command,
-                    };
-                  });
-              }
-            }
-          }
-          return { from, options };
-        },
-      },
-      {
-        run(ctx) {
-          const autocompleteLanguage = ctx.state.languageDataAt('autocomplete', ctx.pos);
-          if (autocompleteLanguage.length > 0) {
-            return autocompleteLanguage[0](ctx);
-          }
-          return { from: ctx.pos, options: [] };
-        },
-      },
-    ];
-  }
-
-  getExtensions() {
-    return [
-      basicSetup,
-      languageCompartment.of(json()),
-      placeholderCompartment.of(placeholder(this.placeholder || '')),
-      EditorState.transactionFilter.of((tr) => (this.singleLine && tr.newDoc.lines > 1 ? [] : tr)),
-      readonlyCompartment.of(EditorView.editable.of(!this.readonly)),
-      EditorView.updateListener.of((update) => {
-        this.value = update.view.contentDOM.innerText;
-      }),
-      autocompletion({
-        activateOnTyping: true,
-        override: [this._autocomplete.bind(this)],
-      }),
-      Prec.high(this.insertELKeymap()),
-    ];
-  }
-
-  insertELKeymap() {
-    return keymap.of([
-      {
-        key: 'Ctrl-Shift-e',
-        mac: 'Cmd-Shift-e',
-        run(view) {
-          view.dispatch(
-            view.state.changeByRange((range) => ({
-              changes: [{ from: range.from, to: range.to, insert: '{#}' }],
-              range: EditorSelection.range(range.from + 2, range.to + 2),
-            })),
-          );
-          startCompletion(view);
-          return true;
-        },
-      },
-    ]);
-  }
-
-  firstUpdated() {
-    super.firstUpdated();
-    const parent = this.shadowRoot.querySelector(`[id=${this._id}]`);
-    this._editorState = EditorState.create({
-      doc: this.value,
-      extensions: this.getExtensions(),
-    });
-    this._editorView = new EditorView({
-      root: this.shadowRoot,
-      parent,
-      state: this._editorState,
-    });
-    parent.appendChild(this._editorView.dom);
-  }
-
-  async updated(properties) {
-    if (properties.has('placeholder')) {
-      this._editorView.dispatch({
-        effects: placeholderCompartment.reconfigure(placeholder(this.placeholder)),
-      });
-    }
-    if (properties.has('value')) {
-      this._editorState.update({ changes: { from: 0, to: this._editorState.doc.length, insert: this.value } });
-    }
-    if (properties.has('readonly')) {
-      this._editorView.dispatch({
-        effects: readonlyCompartment.reconfigure(EditorView.editable.of(!this.readonly)),
-      });
-    }
-
-    if (properties.has('options') && this.options) {
-      if (this.options.mode) {
-        const language = languages.find((language) => {
-          return language.name.toUpperCase() === this.options.mode.toUpperCase() || language.alias.includes(this.options.mode);
-        });
-        if (language != null) {
-          if (language.support == null) {
-            await language.load();
-          }
-          this._editorView.dispatch({
-            effects: languageCompartment.reconfigure(language.support.extension),
-          });
-        } else {
-          console.warn(
-            `Cannot find language ${this.options.mode}, please use language supported by CodeMirror 6`,
-            languages.map((l) => l.name),
-          );
-        }
-      }
-    }
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: block;
-          margin: 0 0.2rem 0.2rem 0.2rem;
-        }
-
-        .singleLine .cm-gutters {
-          display: none;
-        }
-
-        .singleLine .cm-scroller {
-          overflow: hidden;
-        }
-      `,
-    ];
-  }
-}
-
-window.customElements.define('gv-code-editor', GvCodeEditor);

package/wc/gv-code-editor.js

@@ -1 +0,0 @@
-import '../src/molecules/gv-code-editor';