💖 New API (gregziegan#30) 💖

* it compiles! let's get this example working

* remove things, add css

* hmm mouse interaction works but not keyboard

* selects things and hides menu

* both selections work, keyboard + mouse

* wip trying to remove input and replace w/ sub

* no need for input

* might work

* fix nav

* remove excess comments

* code cleanup

* stop annoying input behavior

* well that's... something

* it look a'ight

* remove old tests; get setup for new tests

* change test config

* update test config

* cache test build artifacts

* made single selection state possible

* begin documenting this thing

* keep documenting

* order the documentation

* write more doc strings

* order imports

* lowercase

* clean up documentation

.travis.yml

@@ -1,7 +1,10 @@
-language: haskell
+language: node_js
+node_js:
+  - "6"
+cache:
+  directories:
+    - tests/elm-stuff/build-artifacts
 install:
-  - npm install -g elm
+  - npm install -g elm elm-test
   - elm-package install -y
-before_script:
-  - cd tests && elm-make --yes --output test.js CompletionTests.elm
-script: node test.js
+script: elm-test

elm-package.json

@@ -7,13 +7,13 @@
         "src"
     ],
     "exposed-modules": [
-        "Autocomplete",
-        "Autocomplete.Config",
-        "Autocomplete.Styling"
+        "Autocomplete"
     ],
+    "native-modules": true,
     "dependencies": {
         "elm-lang/core": "4.0.0 <= v < 5.0.0",
-        "elm-lang/html": "1.0.0 <= v < 2.0.0"
+        "elm-lang/html": "1.0.0 <= v < 2.0.0",
+        "elm-lang/keyboard": "1.0.0 <= v < 2.0.0"
     },
     "elm-version": "0.17.0 <= v < 0.18.0"
-}
+}

examples/Makefile

@@ -22,6 +22,9 @@ $(ELM_BUILD): elm
 simple:
 	elm make --yes --output $(ELM_BUILD) $(SOURCE_DIR)/SimpleExample.elm
 
+sections:
+	elm make --yes --output $(ELM_BUILD) $(SOURCE_DIR)/SectionsExample.elm
+
 styled:
 	elm make --yes --output $(ELM_BUILD) $(SOURCE_DIR)/StyledExample.elm
 

examples/css/autocomplete.css

@@ -11,14 +11,22 @@
     z-index: 11110 !important;
 }
 
-.autocomplete-selected-item {
-    color: #3366FF;
+.autocomplete-key-item {
+    background-color: #3366FF;
     display: block;
     padding: 5px 10px;
     border-bottom: 1px solid #DDD;
     cursor: pointer;
 }
 
+.autocomplete-mouse-item {
+  background-color: #ececec;
+  display: block;
+  padding: 5px 10px;
+  border-bottom: 1px solid #DDD;
+  cursor: pointer;
+}
+
 .autocomplete-list {
     list-style: none;
     padding: 0;
@@ -27,6 +35,12 @@
     overflow-y: auto;
 }
 
+.autocomplete-list-with-sections {
+  ist-style: none;
+  padding: 0;
+  margin: auto;
+}
+
 .autocomplete-item {
     display: block;
     padding: 5px 10px;
@@ -43,3 +57,28 @@
     font-family: monospace;
     opacity: 0.5;
 }
+
+.autocomplete-section-list {
+  list-style: none;
+  padding: 0;
+  margin: auto;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.autocomplete-section-item {
+  display: block;
+  padding: 0;
+}
+
+.autocomplete-section-box {
+  display: block;
+  padding: 0;
+  border-top: 1px solid #888888;
+  border-bottom: 1px solid #888888;
+}
+
+.autocomplete-section-text {
+  display: flex;
+  justify-content: center;
+}

examples/elm-package.json

@@ -8,10 +8,12 @@
         "../src"
     ],
     "exposed-modules": [],
+    "native-modules": true,
     "dependencies": {
         "elm-lang/core": "4.0.0 <= v < 5.0.0",
         "elm-lang/html": "1.0.0 <= v < 2.0.0",
+        "elm-lang/keyboard": "1.0.0 <= v < 2.0.0",
         "evancz/elm-http": "3.0.1 <= v < 4.0.0"
     },
     "elm-version": "0.17.0 <= v < 0.18.0"
-}
+}