feat!: extending from LitTemplate to get reference to the text field …

…to add Prefix/Suffix components
vaadin-component-factory · Jan 5, 2024 · 09e396e · 09e396e
1 parent 5a1b815
commit 09e396e
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 16 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,4 +12,5 @@ vaadin-crud-flow-integration-tests/error-screenshots/
 # The following files are generated/updated by flow-maven-plugin
 package*.json
 webpack.*.js
-node_modules/
+node_modules/
+dev-bundle/
diff --git a/autocomplete-demo/pom.xml b/autocomplete-demo/pom.xml
@@ -6,7 +6,7 @@
     <groupId>com.vaadin.componentfactory</groupId>
     <artifactId>autocomplete-demo</artifactId>
     <packaging>war</packaging>
-    <version>24.1.6</version>
+    <version>24.1.7</version>
     <name>Autocomplete Demo</name>
     <inceptionYear>2023</inceptionYear>
 

diff --git a/autocomplete-demo/src/main/java/com/vaadin/componentfactory/demo/AutocompleteView.java b/autocomplete-demo/src/main/java/com/vaadin/componentfactory/demo/AutocompleteView.java
@@ -1,19 +1,21 @@
 package com.vaadin.componentfactory.demo;
 
+import java.util.Arrays;
+import java.util.List;
+import java.util.stream.Collectors;
+
 import com.vaadin.componentfactory.Autocomplete;
 import com.vaadin.flow.component.checkbox.Checkbox;
 import com.vaadin.flow.component.html.H3;
 import com.vaadin.flow.component.html.H4;
+import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.PageTitle;
 import com.vaadin.flow.router.Route;
 import com.vaadin.flow.router.RouteAlias;
 
-import java.util.Arrays;
-import java.util.List;
-import java.util.stream.Collectors;
-
 
 @PageTitle("Basic Demo")
 @Route(value = "basic")
@@ -43,6 +45,15 @@ public AutocompleteView() {
         Autocomplete autocomplete = new Autocomplete(5);
         autocomplete.setOptions(allOptions);
 
+        autocomplete.setLabel("Find what you want:");
+        autocomplete.setPlaceholder("search ...");
+
+        autocomplete.setWidth("300px");
+        autocomplete.setThemeName("my-autocomplete");
+
+        autocomplete.setSuffixComponent(VaadinIcon.SEARCH.create());
+        autocomplete.setPrefixComponent(new Span("Input: "));
+
         autocomplete.addChangeListener(event -> {
             String text = event.getValue();
             autocomplete.setOptions(findOptions(text));
@@ -57,12 +68,6 @@ public AutocompleteView() {
             selectionH3.setText("Selection: " + "");
         });
 
-        autocomplete.setLabel("Find what you want:");
-        autocomplete.setPlaceholder("search ...");
-
-        autocomplete.setWidth("300px");
-        autocomplete.setThemeName("my-autocomplete");
-
         Checkbox startsWithBox = new Checkbox("startsWith / contains");
         startsWithBox.setValue(true);
         startsWithBox.addValueChangeListener(event -> {
@@ -79,7 +84,8 @@ public AutocompleteView() {
         add(new VerticalLayout(
                 new H3("Basic Autocomplete"),
                 new HorizontalLayout(inputH4,selectionH3),
-                new HorizontalLayout(autocomplete)
+                new HorizontalLayout(autocomplete),
+                new HorizontalLayout(startsWithBox, readOnlyBox)
         ));
         autocomplete.focus();
     }

diff --git a/autocomplete/pom.xml b/autocomplete/pom.xml
@@ -6,7 +6,7 @@
     <groupId>com.vaadin.componentfactory</groupId>
     <artifactId>autocomplete</artifactId>
     <packaging>jar</packaging>
-    <version>24.1.6</version>
+    <version>24.1.7</version>
 
     <name>Autocomplete</name>
 

diff --git a/autocomplete/src/main/java/com/vaadin/componentfactory/Autocomplete.java b/autocomplete/src/main/java/com/vaadin/componentfactory/Autocomplete.java
@@ -17,8 +17,11 @@
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.dependency.NpmPackage;
+import com.vaadin.flow.component.littemplate.LitTemplate;
 import com.vaadin.flow.component.shared.HasPrefix;
 import com.vaadin.flow.component.shared.HasSuffix;
+import com.vaadin.flow.component.template.Id;
+import com.vaadin.flow.component.textfield.TextField;
 import com.vaadin.flow.shared.Registration;
 
 import elemental.json.JsonArray;
@@ -57,7 +60,7 @@
 @NpmPackage(value = "@lit-labs/observers", version = "2.0.0")
 @NpmPackage(value = "@vaadin-component-factory/vcf-autocomplete", version = "24.1.6")
 @JsModule("@vaadin-component-factory/vcf-autocomplete/src/vcf-autocomplete.js")
-public class Autocomplete extends Component implements HasTheme, HasSize,
+public class Autocomplete extends LitTemplate implements HasTheme, HasSize,
         HasValue<Autocomplete.AutocompleteValueAppliedEvent, String>,
         Focusable<Autocomplete>, HasValidation, HasPrefix, HasSuffix {
     private static final String OPTIONS = "options";
@@ -75,6 +78,9 @@ public class Autocomplete extends Component implements HasTheme, HasSize,
 
     private String errorMessage;
 
+    @Id("textField")
+    private TextField textField;
+
     public Autocomplete() {
         this.readOnly = false;
         /* //TODO
@@ -83,13 +89,16 @@ public Autocomplete() {
                 "textFieldStyles.height='100%';"));
          */
     }
+
     public Autocomplete(int limit) {
         this();
         setLimit(limit);
     }
+
     public void setLimit(int limit) {
         getElement().setProperty(LIMIT_PROP, limit);
     }
+
     @Override
     public void setErrorMessage(String s) {
         this.errorMessage = errorMessage;
@@ -234,6 +243,7 @@ public boolean isReadOnly() {
         return this.readOnly;
 
     }
+
     @Override
     public void setRequiredIndicatorVisible(boolean requiredIndicatorVisible) {
         this.requiredIndicatorVisible = requiredIndicatorVisible;
@@ -258,4 +268,23 @@ public ValueClearEvent(Autocomplete source, boolean fromClient) {
     }
 
 
+    @Override
+    public void setPrefixComponent(Component component) {
+        this.textField.setPrefixComponent(component);
+    }
+
+    @Override
+    public Component getPrefixComponent() {
+        return this.textField.getPrefixComponent();
+    }
+
+    @Override
+    public void setSuffixComponent(Component component) {
+        this.textField.setSuffixComponent(component);
+    }
+
+    @Override
+    public Component getSuffixComponent() {
+        return this.textField.getSuffixComponent();
+    }
 }
diff --git a/pom.xml b/pom.xml
@@ -6,7 +6,7 @@
 	<groupId>com.vaadin.componentfactory</groupId>
 	<artifactId>autocomplete-root</artifactId>
 	<packaging>pom</packaging>
-	<version>24.1.6</version>
+	<version>24.1.7</version>
 	<name>Autocomplete Root</name>
 	<inceptionYear>2023</inceptionYear>
 	<organization>