tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add vite external plugin

Browse Source
This commit is contained in:
Tsanie Lily 2023-04-12 14:45:51 +08:00
parent 9754bd8fbe
commit ee2c1c88f1
14 changed files with 210 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/dropdown.scss
View File

@ -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 {

4
css/variables/definition.scss
View File

@ -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);

7
lib/app.js
View File

@ -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,
Popup,
showAlert,
showConfirm
InternalComment
}

5
lib/app/communications/contact.js
View File

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

124
lib/app/communications/customer.js
View File

@ -1,14 +1,6 @@
import "./style.scss";
import { createElement } from "../../functions";
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 { Grid, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, createPopup, showAlert, showConfirm } from "../../ui";
import { r, nullOrEmpty, formatUrl, isEmail, isPhone } from "../../utility";
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 (item != null) {
this.#contacts.appendChild(item);
if (c.OptOut || c.OptOut_BC || c.selected === false) {
continue;
}
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 (item != null) {
this.#followers.appendChild(item);
if (f.OptOut) {
continue;
}
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'
},

26
lib/app/communications/follower.js
View File

@ -1,10 +1,9 @@
import { createElement } from "../../functions";
import Grid from "../../ui/grid";
import { createPopup } from "../../ui/popup";
import { nullOrEmpty, r } from "../../utility";
import { Grid, createElement, createPopup } from "../../ui";
import { nullOrEmpty, r, contains } 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;
}
}

9
lib/app/communications/internal.js
View File

@ -1,10 +1,5 @@
import "./style.scss";
import { createElement } from "../../functions";
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 { createElement, setTooltip, createIcon } from "../../ui";
import { r, nullOrEmpty, escapeHtml } from "../../utility";
import { createBox } from "./lib";
class InternalComment {

2
lib/app/communications/lib.js
View File

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

5
lib/app/communications/style.scss
View File

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

11
lib/ui.js
View File

@ -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
}

2
lib/ui/popup.js
View File

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

96
package-lock.json generated
View File

@ -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"
}
}
}
}

3
package.json
View File

@ -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"
}
}

9
vite.build.js
View File

@ -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,