feat(autocomplete): add much more functionalities to the AutoComplete (…

…#69) * feat(autocomplete): add much more functionalities to the AutoComplete - optionally change renderItem template (user can override jQuery UI callbacks method like "_renderItem" callback)
ghiscoding · Aug 11, 2020 · 93c3d0a · 93c3d0a
1 parent 3b3ec59
commit 93c3d0a
Show file tree

Hide file tree

Showing 49 changed files with 1,276 additions and 231 deletions.
diff --git a/README.md b/README.md
@@ -156,6 +156,13 @@ yarn run test:watch
 - [x] Upgrade to latest jQuery version `3.5.1`
 - [x] Change `index` file of `Editors`, `Filters`, ... to regular barel export and rename previous files to `editors.index`, ...
   - [x] Also add all  `Editors`, `Filters`, ... to the Vanilla Grid Bundle
+- [x] AutoComplete Editor/Filter Extra Features
+  - [x] should support instance callbacks
+  - [x] should support `enableRenderHtml` (same as Select Filter)
+  - [x] try to copy SF lookup component look & feel
+    - [SF Lookup](https://www.lightningdesignsystem.com/components/lookups/#site-main-content)
 - [ ] See if we can get `DOM Purify` to work in SF, else keep the custom sanitizer
 - [ ] See if we can get all the vanilla-grid-bundle `instances` as `readonly` class members
 - [ ] See if adding `lerna-changelog` make sense
+- [ ] Mutiple-Select is not showing caret icon to represent a dropdown in SF 
+- [ ] Check if Date Picker works correctly with new latest version of `Flatpickr`
diff --git a/docs/app.523343e25b1b252315f4.bundle.css b/docs/app.523343e25b1b252315f4.bundle.css
diff --git a/docs/app.8d9a03d55378f50756b1.bundle.map b/docs/app.8d9a03d55378f50756b1.bundle.map
diff --git a/docs/app.8d9a03d55378f50756b1.bundle.js → docs/app.cf13d32fd66f13d44a78.bundle.js b/docs/app.8d9a03d55378f50756b1.bundle.js → docs/app.cf13d32fd66f13d44a78.bundle.js
diff --git a/docs/app.cf13d32fd66f13d44a78.bundle.map b/docs/app.cf13d32fd66f13d44a78.bundle.map
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf-8"><title>Slickgrid-Universal</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href=""><link rel="icon" href="favicon.ico"><link href="app.523343e25b1b252315f4.bundle.css" rel="stylesheet"></head><body class="has-navbar-fixed-top"><script async defer="defer" src="//buttons.github.io/buttons.js"></script><div app="main"><div style="margin: 50px; font-weight: bold;">LOADING...</div></div><script src="app.8d9a03d55378f50756b1.bundle.js"></script></body></html>
+<!doctype html><html><head><meta charset="utf-8"><title>Slickgrid-Universal</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href=""><link rel="icon" href="favicon.ico"><link href="app.523343e25b1b252315f4.bundle.css" rel="stylesheet"></head><body class="has-navbar-fixed-top"><script async defer="defer" src="//buttons.github.io/buttons.js"></script><div app="main"><div style="margin: 50px; font-weight: bold;">LOADING...</div></div><script src="app.cf13d32fd66f13d44a78.bundle.js"></script></body></html>
diff --git a/examples/webpack-demo-vanilla-bundle/src/app.html b/examples/webpack-demo-vanilla-bundle/src/app.html
@@ -7,11 +7,15 @@
       <span>
         <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
       </span>
-      <span style="position: relative; top: 5px; margin-left: 5px;">
-        <iframe src="//ghbtns.com/github-btn.html?user=ghiscoding&repo=slickgrid-universal&type=star&count=true"
-                allowtransparency="true" scrolling="no" frameborder="0" width="170px" height="20px"></iframe>
-      </span>
     </a>
+    <div class="github-button-container">
+      <!-- <iframe src="https://ghbtns.com/github-btn.html?user=ghiscoding&repo=slickgrid-universal&type=star&count=true"
+              allowtransparency="true" scrolling="no" frameborder="0" width="170px" height="20px">
+      </iframe> -->
+      <a href="https://github.com/ghiscoding/slickgrid-universal">
+        <img src="https://img.shields.io/github/stars/ghiscoding/slickgrid-universal?style=social">
+      </a>
+    </div>
 
     <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
        data-target="navbarBasicExample">
@@ -58,7 +62,7 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
             Example10 - Grid with GraphQL Backend Service
           </a>
           <a class="navbar-item" onclick.delegate="loadRoute('example11')">
-            Example11 - Queued Editing
+            Example11 - Batch Editing
           </a>
           <!--
           <hr class="navbar-divider">
@@ -72,4 +76,4 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
 
 <div class="demo-container container is-fluid" style="padding-top: 20px">
   <view-route></view-route>
-</div>
+</div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.html b/examples/webpack-demo-vanilla-bundle/src/examples/example11.html
@@ -1,5 +1,5 @@
 <h3 class="title is-3">
-  Example 11 - Queued Editing
+  Example 11 - Batch Editing
   <span class="subtitle has-text-grey-dark">(with Salesforce Theme)</span>
 </h3>
 
@@ -34,4 +34,4 @@ <h3 class="title is-3">
 <br>
 
 <div class="grid11">
-</div>
+</div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example11.scss
@@ -1,5 +1,5 @@
 $control-height: 2.4em;
+$autocomplete-max-height: 250px;
 
 @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 @import 'bulma/bulma';
-