add vite external plugin

css/dropdown.scss

@@ -244,7 +244,7 @@ $listMaxHeight: 210px;
             @include scrollbar();
 
             &.filtered>li:first-child {
-                background-color: var(--hover-color);
+                background-color: var(--hover-bg-color);
             }
 
             >li {
@@ -260,7 +260,7 @@ $listMaxHeight: 210px;
 
                 &:hover,
                 &.selected {
-                    background-color: var(--hover-color);
+                    background-color: var(--hover-bg-color);
                 }
 
                 >.checkbox-wrapper {

css/variables/definition.scss

@@ -16,12 +16,12 @@
     --title-color: #fff;
     --title-bg-color: rgb(68, 114, 196);
     --border-color: #d9d9d9;
-    --focus-color: #b9b9b9;
+    --focus-color: #666;
     --disabled-bg-color: #e9e9e9;
     --disabled-color: #aaa;
     --box-color: #999898;
     --disabled-box-color: #d9d9d9;
-    --hover-color: #eee;
+    --hover-bg-color: #eee;
     --link-color: #1890ff;
     --primary-color: rgb(123, 28, 33);
     --loading-bg-color: hsla(0, 0%, 100%, .4);

lib/app.js

@@ -1,11 +1,8 @@
+import "./app/communications/style.scss";
 import CustomerCommunication from "./app/communications/customer";
 import InternalComment from "./app/communications/internal";
-import Popup, { showAlert, showConfirm } from "./ui/popup";
 
 export {
     CustomerCommunication,
-    InternalComment,
+    InternalComment
-    Popup,
-    showAlert,
-    showConfirm
 }

lib/app/communications/contact.js

@@ -1,7 +1,4 @@
-import { createElement } from "../../functions";
+import { Dropdown, createElement, createCheckbox, createPopup, showAlert } from "../../ui";
-import { createCheckbox } from "../../ui/checkbox";
-import Dropdown from "../../ui/dropdown";
-import { createPopup, showAlert } from "../../ui/popup";
 import { isEmail, nullOrEmpty, r } from "../../utility";
 
 class Contact {

lib/app/communications/customer.js

@@ -1,14 +1,6 @@
-import "./style.scss";
+import { Grid, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, createPopup, showAlert, showConfirm } from "../../ui";
-import { createElement } from "../../functions";
+import { r, nullOrEmpty, formatUrl, isEmail, isPhone } from "../../utility";
-import { r } from "../../utility/lgres";
-import { nullOrEmpty } from "../../utility/strings";
-import { formatUrl, isEmail, isPhone } from "../../utility";
-import { setTooltip } from "../../ui/tooltip";
-import { createIcon } from "../../ui/icon";
-import { createCheckbox, createRadiobox } from "../../ui/checkbox";
 import { createBox } from "./lib";
-import { createPopup, showAlert, showConfirm } from "../../ui/popup";
-import Grid from "../../ui/grid";
 import Contact from "./contact";
 import Follower from "./follower";
 
@@ -107,28 +99,6 @@ class CustomerCommunication {
         }
     }
 
-    #createContactItem(c) {
-        if (c.OptOut || c.OptOut_BC || c.selected === false) {
-            return null;
-        }
-        const mp = String(c.MobilePhone).trim();
-        const email = String(c.Email).trim();
-        const pref = String(c.ContactPreference);
-        if (pref === '0' && !isPhone(mp) ||
-            pref === '1' && !isEmail(email)) {
-            return null;
-        }
-        const to = pref === '0' ? mp : email;
-        return createElement('div', 'contact-item',
-            createIcon('fa-light', pref === '0' ? 'comment-lines' : 'envelope'),
-            setTooltip(createElement('span', span => {
-                span.dataset.to = to;
-                span.dataset.name = c.Name;
-                span.innerText = to;
-            }), to, true)
-        );
-    }
-
     get contacts() {
         return [...this.#contacts.children].map(el => {
             const span = el.querySelector('span');
@@ -139,10 +109,26 @@ class CustomerCommunication {
         this.#contacts.replaceChildren();
         if (contacts?.length > 0) {
             for (let c of contacts) {
-                const item = this.#createContactItem(c);
+                if (c.OptOut || c.OptOut_BC || c.selected === false) {
-                if (item != null) {
+                    continue;
-                    this.#contacts.appendChild(item);
                 }
+                const mp = String(c.MobilePhone).trim();
+                const email = String(c.Email).trim();
+                const pref = String(c.ContactPreference);
+                if (pref === '0' && !isPhone(mp) ||
+                    pref === '1' && !isEmail(email)) {
+                    continue;
+                }
+                const to = pref === '0' ? mp : email;
+                const item = createElement('div', 'contact-item',
+                    createIcon('fa-light', pref === '0' ? 'comment-lines' : 'envelope'),
+                    setTooltip(createElement('span', span => {
+                        span.dataset.to = to;
+                        span.dataset.name = c.Name;
+                        span.innerText = to;
+                    }), to, true)
+                );
+                this.#contacts.appendChild(item);
             }
             this.#message.scrollTop = this.#message.scrollHeight
         }
@@ -175,7 +161,7 @@ class CustomerCommunication {
     get followers() {
         return [...this.#followers.children].map(el => {
             const span = el.querySelector('span');
-            return { 'Key': span.dataset.to, 'Value': span.dataset.name };
+            return { 'Email': span.dataset.email, 'MobilePhone': span.dataset.mp, 'Value': span.dataset.name };
         });
     }
     set followers(followers) {
@@ -184,10 +170,32 @@ class CustomerCommunication {
         if (followers?.length > 0) {
             this.#container.querySelector('.follower-bar').style.display = '';
             for (let f of followers) {
-                const item = this.#createContactItem(f);
+                if (f.OptOut) {
-                if (item != null) {
+                    continue;
-                    this.#followers.appendChild(item);
                 }
+                const mp = String(f.MobilePhone).trim();
+                const email = String(f.Email).trim();
+                const tips = [];
+                if (f.SendEmail) {
+                    tips.push(r('emailColon', 'Email:') + ` ${email}`);
+                }
+                if (f.SendText) {
+                    tips.push(r('phoneColon', 'Mobile Phone:' + ` ${mp}`));
+                }
+                const item = createElement('div', 'contact-item',
+                    createIcon('fa-light', f.SendText ? 'comment-lines' : 'envelope'),
+                    setTooltip(createElement('span', span => {
+                        if (f.SendEmail) {
+                            span.dataset.email = email;
+                        }
+                        if (f.SendText) {
+                            span.dataset.mp = mp;
+                        }
+                        span.dataset.name = f.Name;
+                        span.innerText = f.SendText ? mp : email;
+                    }), tips.join('\n'), true)
+                );
+                this.#followers.appendChild(item);
             }
         } else {
             this.#container.querySelector('.follower-bar').style.display = 'none';
@@ -585,28 +593,6 @@ class CustomerCommunication {
                                                 height: '16px'
                                             }));
                                             button.addEventListener('click', () => {
-                                                /*const add = new Contact({
-                                                    onSave: (item) => {
-                                                        const exists = this.#gridContact.source.some(s => s.Name === item.Name && s.MobilePhone === item.MobilePhone);
-                                                        if (exists) {
-                                                            showAlert(r('addContact', 'Add Contact'), r('contactUniqueRequired', 'Contact name and contact mobile must be a unique combination.'), 'warn');
-                                                            return false;
-                                                        }
-                                                        if (typeof option.onSave === 'function') {
-                                                            const result = option.onSave(item, true);
-                                                            if (typeof result?.then === 'function') {
-                                                                return result.then(r => {
-                                                                    this.#gridContact.source = r.filter(c => c.Id >= 0);
-                                                                    this.#gridWo.source = r.filter(c => c.Id < 0);
-                                                                    return r;
-                                                                });
-                                                            }
-                                                            return false;
-                                                        }
-                                                    }
-                                                });
-                                                add.show(container);
-                                                 */
                                                 if (typeof this.#option.onInitFollower === 'function') {
                                                     this.#option.onInitFollower().then(data => {
                                                         if (typeof data === 'string') {
@@ -614,7 +600,19 @@ class CustomerCommunication {
                                                             return;
                                                         }
                                                         const add = new Follower({
-                                                            followers: data
+                                                            followers: data,
+                                                            onOk: list => {
+                                                                if (typeof this.#option.onAddFollower === 'function') {
+                                                                    const result = this.#option.onAddFollower(list);
+                                                                    if (typeof result?.then === 'function') {
+                                                                        return result.then(r => {
+                                                                            this.#gridFollower.source = r;
+                                                                            return r;
+                                                                        });
+                                                                    }
+                                                                    return false;
+                                                                }
+                                                            }
                                                         });
                                                         add.show(container);
                                                     })
@@ -646,7 +644,7 @@ class CustomerCommunication {
                                         key: 'type',
                                         type: Grid.ColumnTypes.Icon,
                                         width: 50,
-                                        filter: c => String(c.ContactPreference) === '0' ? 'comment-lines' : 'envelope',
+                                        filter: c => c.SendText ? 'comment-lines' : 'envelope',
                                         className: 'icon-contact-type',
                                         iconType: 'fa-light'
                                     },

lib/app/communications/follower.js

@@ -1,10 +1,9 @@
-import { createElement } from "../../functions";
+import { Grid, createElement, createPopup } from "../../ui";
-import Grid from "../../ui/grid";
+import { nullOrEmpty, r, contains } from "../../utility";
-import { createPopup } from "../../ui/popup";
-import { nullOrEmpty, r } from "../../utility";
 
 class Follower {
     #option;
+    #grid;
 
     constructor(option = {}) {
         this.#option = option;
@@ -19,15 +18,29 @@ class Follower {
                 createElement('input', search => {
                     search.className = 'ui-input follower-search';
                     search.addEventListener('input', () => {
-
+                        const key = search.value;
+                        if (nullOrEmpty(key)) {
+                            this.#grid.source = this.#option.followers;
+                        } else {
+                            this.#grid.source = this.#option.followers.filter(f => contains(f.DisplayName, key, true));
+                        }
                     });
                 }),
                 gridContainer
             ),
-            { text: r('ok', 'OK'), key: 'ok' },
+            {
+                text: r('ok', 'OK'),
+                key: 'ok',
+                trigger: () => {
+                    if (typeof this.#option.onOk === 'function') {
+                        return this.#option.onOk.call(this, this.#grid.source.filter(f => f.Email || f.Text));
+                    }
+                }
+            },
             { text: r('cancel', 'Cancel'), key: 'cancel' }
         );
         const result = await popup.show(parent);
+        result.querySelector('.follower-search').focus();
         // grid
         const grid = new Grid(gridContainer);
         grid.columns = [
@@ -50,6 +63,7 @@ class Follower {
         ];
         grid.init();
         grid.source = this.#option.followers;
+        this.#grid = grid;
         return result;
     }
 }

lib/app/communications/internal.js

@@ -1,10 +1,5 @@
-import "./style.scss";
+import { createElement, setTooltip, createIcon } from "../../ui";
-import { createElement } from "../../functions";
+import { r, nullOrEmpty, escapeHtml } from "../../utility";
-import { r } from "../../utility/lgres";
-import { nullOrEmpty } from "../../utility/strings";
-import { escapeHtml } from "../../utility";
-import { setTooltip } from "../../ui/tooltip";
-import { createIcon } from "../../ui/icon";
 import { createBox } from "./lib";
 
 class InternalComment {

lib/app/communications/lib.js

@@ -1,4 +1,4 @@
-import { createElement } from "../../functions";
+import { createElement } from "../../ui";
 
 function createBox(title, functions) {
     const container = createElement('div', 'comm');

lib/app/communications/style.scss

@@ -359,6 +359,11 @@
         .follower-wrapper {
             display: flex;
             flex-direction: column;
+            width: 600px;
+
+            >.follower-search {
+                margin-bottom: 6px;
+            }
 
             >.follower-grid {
                 height: 380px;

lib/ui.js

@@ -1,18 +1,21 @@
 import "../css/ui.scss";
+import { createElement } from "./functions";
 import { createIcon, resolveIcon } from "./ui/icon";
-import { createCheckbox, resolveCheckbox } from "./ui/checkbox";
+import { createCheckbox, createRadiobox, resolveCheckbox } from "./ui/checkbox";
 import { setTooltip, resolveTooltip } from "./ui/tooltip";
 import Dropdown from "./ui/dropdown";
 import Grid from "./ui/grid";
 import Popup from "./ui/popup";
-import { createPopup } from "./ui/popup";
+import { createPopup, showAlert, showConfirm } from "./ui/popup";
 
 export {
+  createElement,
   // icon
   createIcon,
   resolveIcon,
   // checkbox
   createCheckbox,
+  createRadiobox,
   resolveCheckbox,
   // tooltip
   setTooltip,
@@ -23,5 +26,7 @@ export {
   Grid,
   // popup
   Popup,
-  createPopup
+  createPopup,
+  showAlert,
+  showConfirm
 }

lib/ui/popup.js

@@ -89,7 +89,7 @@ class Popup {
         return new Promise(resolve => {
             setTimeout(() => {
                 mask.style.opacity = 1
-                resolve();
+                resolve(mask);
             }, 0);
         });
     }

package-lock.json

@@ -10,7 +10,8 @@
       "devDependencies": {
         "postcss-preset-env": "^8.2.0",
         "sass": "^1.60.0",
-        "vite": "^4.0.4"
+        "vite": "^4.0.4",
+        "vite-plugin-externals": "^0.6.2"
       }
     },
     "node_modules/@csstools/cascade-layer-name-parser": {
@@ -947,6 +948,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/acorn": {
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -1173,6 +1186,12 @@
       "integrity": "sha512-gM7TdwuG3amns/1rlgxMbeeyNoBFPa+4Uu0c7FeROWh4qWmvSOnvcslKmWy51ggLKZ2n/F/4i2HJ+PVNxH9uCQ==",
       "dev": true
     },
+    "node_modules/es-module-lexer": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz",
+      "integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==",
+      "dev": true
+    },
     "node_modules/esbuild": {
       "version": "0.17.14",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.14.tgz",
@@ -1244,6 +1263,20 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -1276,6 +1309,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -1348,6 +1387,27 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -2065,6 +2125,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+      "dev": true
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -2089,6 +2156,15 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
@@ -2169,6 +2245,24 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vite-plugin-externals": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/vite-plugin-externals/-/vite-plugin-externals-0.6.2.tgz",
+      "integrity": "sha512-R5oVY8xDJjLXLTs2XDYzvYbc/RTZuIwOx2xcFbYf+/VXB6eJuatDgt8jzQ7kZ+IrgwQhe6tU8U2fTyy72C25CQ==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.4.0",
+        "es-module-lexer": "^0.4.1",
+        "fs-extra": "^10.0.0",
+        "magic-string": "^0.25.7"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.0.0"
+      }
     }
   }
 }

package.json

@@ -27,6 +27,7 @@
   "devDependencies": {
     "postcss-preset-env": "^8.2.0",
     "sass": "^1.60.0",
-    "vite": "^4.0.4"
+    "vite": "^4.0.4",
+    "vite-plugin-externals": "^0.6.2"
   }
 }

vite.build.js

@@ -1,5 +1,6 @@
 import { build } from "vite";
 import postcssPresetEnv from "postcss-preset-env";
+import { viteExternalsPlugin } from "vite-plugin-externals";
 
 const libraries = [
   {
@@ -47,7 +48,13 @@ const libraries = [
       sourcemap: true,
       outDir: '../../../../IronIntel/Contractor2.0/Contractor/Site/js/lib',
       emptyOutDir: false
-    }
+    },
+    plugins: [
+      viteExternalsPlugin({
+        '../../ui': 'lib-ui',
+        '../../utility': 'lib-utility'
+      })
+    ]
   },
   {
     clearScreen: false,