@vaadin/message-input - npm Package Compare versions

Comparing version 23.3.0-alpha3 to 24.0.0-alpha1

package.json

 {
   "name": "@vaadin/message-input",
-  "version": "23.3.0-alpha3",
+  "version": "24.0.0-alpha1",
   "publishConfig": {
@@ -39,8 +39,8 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.3.0-alpha3",
-    "@vaadin/component-base": "23.3.0-alpha3",
-    "@vaadin/text-area": "23.3.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.3.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha3"
+    "@vaadin/button": "24.0.0-alpha1",
+    "@vaadin/component-base": "24.0.0-alpha1",
+    "@vaadin/text-area": "24.0.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
   },
@@ -56,3 +56,3 @@ "devDependencies": {
   ],
-  "gitHead": "e86cd2abf3e28bade37711291331415d92c454ec"
+  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
 }

src/vaadin-message-input.js

@@ -6,7 +6,8 @@ /**
  */
-import './vaadin-message-input-text-area.js';
-import './vaadin-message-input-button.js';
+import '@vaadin/button/src/vaadin-button.js';
+import '@vaadin/text-area/src/vaadin-text-area.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
@@ -27,12 +28,4 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
  *
- * ### Internal components
- *
- * In addition to `<vaadin-message-input>` itself, the following internal
- * components are themable:
- *
- * - `<vaadin-message-input-button>` - has the same API as [`<vaadin-button>`](#/elements/vaadin-button).
- * - `<vaadin-message-input-text-area>` - has the same API as [`<vaadin-text-area>`](#/elements/vaadin-text-area).
- *
  * @extends HTMLElement
- * @mizes ControllerMixin
+ * @mixes ControllerMixin
  * @mixes ThemableMixin
@@ -49,6 +42,6 @@ * @mixes ElementMixin
         type: String,
+        value: '',
       },
 
       /**
-       *
        * The object used to localize this component.
@@ -90,2 +83,12 @@ * For changing the default localization, change the entire
       },
+
+      /** @private */
+      _button: {
+        type: Object,
+      },
+
+      /** @private */
+      _textArea: {
+        type: Object,
+      },
     };
@@ -105,14 +108,20 @@ }
         }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+
+        ::slotted([slot='button']) {
+          flex-shrink: 0;
+        }
+
+        ::slotted([slot='textarea']) {
+          align-self: stretch;
+          flex-grow: 1;
+        }
       </style>
-      <vaadin-message-input-text-area
-        disabled="[[disabled]]"
-        value="{{value}}"
-        placeholder="[[i18n.message]]"
-        aria-label="[[i18n.message]]"
-        on-enter="__submit"
-      ></vaadin-message-input-text-area>
-      <vaadin-message-input-button disabled="[[disabled]]" theme="primary contained" on-click="__submit"
-        >[[i18n.send]]</vaadin-message-input-button
-      >
+      <slot name="textarea"></slot>
 
+      <slot name="button"></slot>
+
       <slot name="tooltip"></slot>
@@ -126,2 +135,9 @@ `;
 
+  static get observers() {
+    return [
+      '__buttonPropsChanged(_button, disabled, i18n)',
+      '__textAreaPropsChanged(_textArea, disabled, i18n, value)',
+    ];
+  }
+
   /** @protected */
@@ -131,2 +147,47 @@ ready() {
 
+    this._buttonController = new SlotController(
+      this,
+      'button',
+      () => document.createElement('vaadin-button'),
+      (_, btn) => {
+        btn.setAttribute('theme', 'primary contained');
+
+        btn.addEventListener('click', () => {
+          this.__submit();
+        });
+
+        this._button = btn;
+      },
+    );
+    this.addController(this._buttonController);
+
+    this._textAreaController = new SlotController(
+      this,
+      'textarea',
+      () => document.createElement('vaadin-text-area'),
+      (_, textarea) => {
+        textarea.addEventListener('value-changed', (event) => {
+          this.value = event.detail.value;
+        });
+
+        textarea.addEventListener('keydown', (event) => {
+          if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            this.__submit();
+          }
+        });
+
+        const input = textarea.inputElement;
+        input.removeAttribute('aria-labelledby');
+
+        // Set initial height to one row
+        input.setAttribute('rows', 1);
+        input.style.minHeight = '0';
+
+        this._textArea = textarea;
+      },
+    );
+    this.addController(this._textAreaController);
+
     this._tooltipController = new TooltipController(this);
@@ -136,2 +197,27 @@ this.addController(this._tooltipController);
 
+  /** @private */
+  __buttonPropsChanged(button, disabled, i18n) {
+    if (button) {
+      button.disabled = disabled;
+      button.textContent = i18n.send;
+    }
+  }
+
+  /** @private */
+  __textAreaPropsChanged(textArea, disabled, i18n, value) {
+    if (textArea) {
+      textArea.disabled = disabled;
+      textArea.value = value;
+
+      const message = i18n.message;
+      textArea.placeholder = message;
+
+      if (message) {
+        textArea.inputElement.setAttribute('aria-label', message);
+      } else {
+        textArea.inputElement.removeAttribute('aria-label');
+      }
+    }
+  }
+
   /**
@@ -148,3 +234,3 @@ * Submits the current value as an custom event named 'submit'.
     }
-    this.shadowRoot.querySelector('vaadin-message-input-text-area').focus();
+    this._textArea.focus();
   }
@@ -151,0 +237,0 @@ }

theme/lumo/vaadin-message-input-styles.js

@@ -13,4 +13,8 @@ import '@vaadin/vaadin-lumo-styles/color.js';
     }
+
+    ::slotted([slot='textarea']) {
+      margin-inline-end: var(--lumo-space-s);
+    }
   `,
   { moduleId: 'lumo-message-input' },
 );

theme/lumo/vaadin-message-input.js

@@ -0,4 +1,4 @@
+import '@vaadin/button/theme/lumo/vaadin-button.js';
+import '@vaadin/text-area/theme/lumo/vaadin-text-area.js';
 import './vaadin-message-input-styles.js';
-import './vaadin-message-input-text-area.js';
-import './vaadin-message-input-button.js';
 import '../../src/vaadin-message-input.js';

theme/material/vaadin-message-input-styles.js

@@ -11,4 +11,9 @@ import '@vaadin/vaadin-material-styles/color.js';
     }
+
+    ::slotted([slot='textarea']) {
+      margin: 0;
+      margin-inline-end: 0.5em;
+    }
   `,
   { moduleId: 'material-message-input' },
 );

theme/material/vaadin-message-input.js

@@ -0,4 +1,4 @@
+import '@vaadin/button/theme/material/vaadin-button.js';
+import '@vaadin/text-area/theme/material/vaadin-text-area.js';
 import './vaadin-message-input-styles.js';
-import './vaadin-message-input-text-area.js';
-import './vaadin-message-input-button.js';
 import '../../src/vaadin-message-input.js';

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-input",
-  "version": "23.3.0-alpha3",
+  "version": "24.0.0-alpha1",
   "description-markup": "markdown",
@@ -11,3 +11,3 @@ "contributions": {
           "name": "vaadin-message-input",
-          "description": "`<vaadin-message-input>` is a Web Component for sending messages.\nIt consists of a text area that grows on along with the content, and a send button to send message.\n\nThe message can be sent by one of the following actions:\n- by pressing Enter (use Shift + Enter to add a new line)\n- by clicking `submit` button.\n\n```html\n<vaadin-message-input></vaadin-message-input>\n```\n\n### Internal components\n\nIn addition to `<vaadin-message-input>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-input-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-button).\n- `<vaadin-message-input-text-area>` - has the same API as [`<vaadin-text-area>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-text-area).",
+          "description": "`<vaadin-message-input>` is a Web Component for sending messages.\nIt consists of a text area that grows on along with the content, and a send button to send message.\n\nThe message can be sent by one of the following actions:\n- by pressing Enter (use Shift + Enter to add a new line)\n- by clicking `submit` button.\n\n```html\n<vaadin-message-input></vaadin-message-input>\n```",
           "attributes": [
@@ -14,0 +14,0 @@ {

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-input",
-  "version": "23.3.0-alpha3",
+  "version": "24.0.0-alpha1",
   "description-markup": "markdown",
@@ -19,3 +19,3 @@ "framework": "lit",
           "name": "vaadin-message-input",
-          "description": "`<vaadin-message-input>` is a Web Component for sending messages.\nIt consists of a text area that grows on along with the content, and a send button to send message.\n\nThe message can be sent by one of the following actions:\n- by pressing Enter (use Shift + Enter to add a new line)\n- by clicking `submit` button.\n\n```html\n<vaadin-message-input></vaadin-message-input>\n```\n\n### Internal components\n\nIn addition to `<vaadin-message-input>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-input-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-button).\n- `<vaadin-message-input-text-area>` - has the same API as [`<vaadin-text-area>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-text-area).",
+          "description": "`<vaadin-message-input>` is a Web Component for sending messages.\nIt consists of a text area that grows on along with the content, and a send button to send message.\n\nThe message can be sent by one of the following actions:\n- by pressing Enter (use Shift + Enter to add a new line)\n- by clicking `submit` button.\n\n```html\n<vaadin-message-input></vaadin-message-input>\n```",
           "extension": true,
@@ -22,0 +22,0 @@ "attributes": [

No alert changes

Worsened metrics

Total package byte prevSize

28730

decreased by-12.87%

Number of package files

13

decreased by-43.48%

Lines of code

456

decreased by-20.28%

Dependency changes

• + Added@vaadin/button@24.0.0-alpha1(transitive)

• + Added@vaadin/component-base@24.0.0-alpha1(transitive)

• + Added@vaadin/field-base@24.0.0-alpha1(transitive)

• + Added@vaadin/icon@24.0.0-alpha1(transitive)

• + Added@vaadin/input-container@24.0.0-alpha1(transitive)

• + Added@vaadin/text-area@24.0.0-alpha1(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.0.0-alpha1(transitive)

• + Added@vaadin/vaadin-material-styles@24.0.0-alpha1(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.0.0-alpha1(transitive)

• - Removed@vaadin/button@23.3.0-alpha3(transitive)

• - Removed@vaadin/component-base@23.3.0-alpha3(transitive)

• - Removed@vaadin/field-base@23.3.0-alpha3(transitive)

• - Removed@vaadin/icon@23.3.0-alpha3(transitive)

• - Removed@vaadin/input-container@23.3.0-alpha3(transitive)

• - Removed@vaadin/text-area@23.3.0-alpha3(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.3.0-alpha3(transitive)

• - Removed@vaadin/vaadin-material-styles@23.3.0-alpha3(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.3.0-alpha3(transitive)

• Updated@vaadin/button@24.0.0-alpha1

• Updated@vaadin/component-base@24.0.0-alpha1

• Updated@vaadin/text-area@24.0.0-alpha1

• Updated@vaadin/vaadin-lumo-styles@24.0.0-alpha1

• Updated@vaadin/vaadin-material-styles@24.0.0-alpha1

• Updated@vaadin/vaadin-themable-mixin@24.0.0-alpha1