frayerjj-frontend 0.8.31 → 0.8.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frayerjj-frontend",
-  "version": "0.8.31",
+  "version": "0.8.33",
   "description": "My base frontend for various projects",
   "main": "src/index.js",
   "type": "module",
@@ -9,23 +9,25 @@
     "./styles": "./src/scss/styles.scss"
   },
   "style": "src/scss/styles.scss",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "files": [
     "src/"
   ],
   "scripts": {
     "build": "echo 'No build step required'",
-    "test": "echo 'No tests yet'",
-    "postinstall": "patch-package"
+    "test": "echo 'No tests yet'"
   },
   "author": "Joshua Frayer",
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.8",
-    "cropperjs": "^2.1.0",
+    "cropperjs": "^2.1.1",
     "flag-icons": "^7.5.0",
-    "libphonenumber-js": "^1.12.39",
-    "patch-package": "^8.0.1",
+    "libphonenumber-js": "^1.13.7",
     "quill": "^2.0.3"
   }
 }

package/src/autocomplete.js

@@ -1,3 +1,4 @@
+import './scss/_autocomplete.scss';
 export const autocomplete = {
     registry: new Map(),
     evalPattern: (pattern, item) => {

package/src/hasMany.js

@@ -1,3 +1,4 @@
+import './scss/_tokenfield.scss';
 import { msg } from './msg.js';
 import { modal } from './modal.js';
 

package/src/init.js

@@ -1,43 +1,65 @@
 import * as bootstrap from 'bootstrap';
-import { createPopper } from '@popperjs/core';
-import { avatarCropper } from './avatarCropper';
-import { quillUpload } from './quillupload';
-import { fileUpload } from './fileUpload';
-import { hasMany } from './hasMany';
 import { loading } from './loading';
 import { msg } from './msg';
 import { modal } from './modal';
-import { wizard } from './wizard';
-import { phoneInput } from './phoneInput';
 import { session } from './session';
 import { validate } from './validate';
 import { autocomplete } from './autocomplete';
 
 export const init = (args) => {
 
+    const excluded = new Set(args?.exclude ?? []);
+    const use = (name) => !excluded.has(name);
+
     window.bootstrap = bootstrap;
-    window.createPopper = createPopper;
     window.msg = msg;
     window.modal = modal;
     window.session = session;
     window.validate = validate;
     window.loading = loading;
-    window.wizard = wizard;
     window.autocomplete = autocomplete;
     loading.init(args?.loadingAnimationStyle ?? 'default');
 
-    window.addEventListener('load', () => {
+    window.addEventListener('load', async () => {
 
         msg.verbose('Page Loaded, Initializing');
-        avatarCropper.init();
-        quillUpload.init();
-        fileUpload.init();
-        hasMany.init();
-        modal.ajax.init();
-        phoneInput.init();
-        validate.init();
-        wizard.init();
-        autocomplete.init();
+        if (use('popper')) {
+            const { createPopper } = await import('@popperjs/core');
+            window.createPopper = createPopper;
+        }
+        if (use('cropper')) {
+            const { avatarCropper } = await import('./avatarCropper');
+            window.avatarCropper = avatarCropper;
+            avatarCropper.init();
+        }
+        if (use('quill')) {
+            const { quillUpload } = await import('./quillupload');
+            window.quillUpload = quillUpload;
+            quillUpload.init();
+        }
+        if (use('fileUpload')) {
+            const { fileUpload } = await import('./fileUpload');
+            window.fileUpload = fileUpload;
+            fileUpload.init();
+        }
+        if (use('hasMany')) {
+            const { hasMany } = await import('./hasMany');
+            window.hasMany = hasMany;
+            hasMany.init();
+        }
+        if (use('modal')) modal.ajax.init();
+        if (use('phoneInput')) {
+            const { phoneInput } = await import('./phoneInput');
+            window.phoneInput = phoneInput;
+            phoneInput.init();
+        }
+        if (use('validate')) validate.init();
+        if (use('wizard')) {
+            const { wizard } = await import('./wizard');
+            window.wizard = wizard;
+            wizard.init();
+        }
+        if (use('autocomplete')) autocomplete.init();
         
         //Dynamic height for container-fixed
         let container = document.querySelectorAll('.container-fixed');

package/src/phoneInput.js

@@ -1,3 +1,4 @@
+import 'flag-icons/css/flag-icons.min.css';
 import { parsePhoneNumber } from 'libphonenumber-js/min';
 
 export const phoneInput = {

package/src/quillupload.js

@@ -1,3 +1,4 @@
+import 'quill/dist/quill.snow.css';
 import Quill from 'quill';
 import { msg } from "./msg";
 

package/src/scss/_forms.scss

@@ -36,37 +36,4 @@ span.required {
     background-color: #dc3545;
     border-color: #dc3545;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
-}
-.token {
-  display: inline-block;
-  background-color: $color-light-gray-background;
-  border: 1px solid $color-light-gray;
-  margin: 0.25rem 0.5rem 0.25rem 0;
-  padding: 0 0.5rem;
-  border-radius: 0.25rem;
-  .close {
-    margin-left: 0.5rem;
-    text-decoration: none;
-    color: $color-black;
-  }
-}
-.token-input,.token-input:focus-visible {
-  border: none;
-  outline: none;
-}
-.tokenfield {
-  height: auto !important;
-}
-.search-input .list-group {
-  z-index: 1;
-  .list-group-item:first-child {
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-  }
-}
-.input-loader {
-  position: absolute;
-  top: 0.45rem;
-  right: .45rem;
-  font-size: 18pt;
 }

package/src/scss/_nav.scss

@@ -73,6 +73,6 @@
     .dropdown-menu {
         border-top-left-radius: 0;
         border-top-right-radius: 0;
-        top: 46px;
+        top: 6px !important;
     }
 }

package/src/scss/_tokenfield.scss

@@ -0,0 +1,35 @@
+@import 'colors';
+
+.token {
+  display: inline-block;
+  background-color: $color-light-gray-background;
+  border: 1px solid $color-light-gray;
+  margin: 0.25rem 0.5rem 0.25rem 0;
+  padding: 0 0.5rem;
+  border-radius: 0.25rem;
+  .close {
+    margin-left: 0.5rem;
+    text-decoration: none;
+    color: $color-black;
+  }
+}
+.token-input,.token-input:focus-visible {
+  border: none;
+  outline: none;
+}
+.tokenfield {
+  height: auto !important;
+}
+.search-input .list-group {
+  z-index: 1;
+  .list-group-item:first-child {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
+}
+.input-loader {
+  position: absolute;
+  top: 0.45rem;
+  right: .45rem;
+  font-size: 18pt;
+}

package/src/scss/styles.scss

@@ -1,6 +1,4 @@
 @import 'bootstrap/scss/bootstrap';
-@import 'flag-icons/css/flag-icons.min.css';
-@import 'quill/dist/quill.snow.css';
 @import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css);
 @import url(//use.typekit.net/oox8pkj.css);
 @import 'fonts';
@@ -11,6 +9,4 @@
 @import 'header';
 @import 'footer';
 @import 'loading';
-@import 'forms';
-@import 'wizard';
-@import 'autocomplete';
+@import 'forms';

package/src/wizard.js

@@ -1,3 +1,4 @@
+import './scss/_wizard.scss';
 import { msg } from './msg.js';
 import { validate } from './validate.js';