frayerjj-frontend 0.8.35 → 0.8.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frayerjj-frontend",
-  "version": "0.8.35",
+  "version": "0.8.37",
   "description": "My base frontend for various projects",
   "main": "src/index.js",
   "type": "module",

package/src/hasMany.js

@@ -25,13 +25,17 @@ export const hasMany = {
             msg.verbose('Building Has Many Inupt');
             // Create container
             let container = document.createElement('div');
+            container.className = 'hasmany';
+            // Create card wrapper
+            let card = document.createElement('div');
+            card.className = 'card';
             // Create list of selected items
             let list = document.createElement('ul');
             list.id = 'id_' + args.name;
-            list.className = 'list-group list-group-flush';
+            list.className = 'list-group list-group-flush hasmany-selected-list';
             // Create list of all options for modal
             let modalList = document.createElement('ul');
-            modalList.className = 'list-group list-group-flush';
+            modalList.className = 'list-group list-group-flush hasmany-modal-list';
             // Create hidden input for when there is no selected items
             let input = document.createElement('input');
             input.type = 'hidden';
@@ -40,15 +44,15 @@ export const hasMany = {
             if (args.notb)
                 modalList.insertAdjacentHTML('beforeend', hasMany.build.checkItem(args.name, {
                     id: 'notb',
-                    label: (args.notbLabel ?? hasMany.sampleArgs.messages.notbLabel),
+                    label: (args.messages?.notbLabel ?? hasMany.sampleArgs.messages.notbLabel),
                     notb: true
                 }));
             // Cycle through all options
-            Objects.values(args.options).forEach(option => {
+            Object.values(args.options).forEach(option => {
                 modalList.insertAdjacentHTML('beforeend', hasMany.build.checkItem(args.name, option));
                 // If option is selected, add to list
                 if (option.checked)
-                    list.insertAdjacentHTML('beforeend', hasMany.build.item(args.name, option));
+                    list.insertAdjacentHTML('beforeend', hasMany.build.listItem(args.name, option));
             });
             // Create modal
             let randomId = modal.randomId('hasmany');
@@ -56,19 +60,24 @@ export const hasMany = {
                 id: randomId,
                 title: args.title,
                 body: modalList.outerHTML,
-                buttons: [ { text: args.messages.close ?? hasMany.sampleArgs.messages.close } ]
+                buttons: [ { text: args.messages?.close ?? hasMany.sampleArgs.messages.close } ]
             }));
             // Create button to open modal
             let button = document.createElement('button');
             button.type = 'button';
-            button.className = 'btn btn-outline-secondary btn-block';
+            button.className = 'btn btn-outline-secondary w-100';
             button.setAttribute('data-bs-toggle', 'modal');
             button.setAttribute('data-bs-target', '#' + randomId);
-            button.textContent = args.messages.button ?? hasMany.sampleArgs.messages.button;
+            button.textContent = args.messages?.button ?? hasMany.sampleArgs.messages.button;
+            // Create card footer for action button
+            let footer = document.createElement('div');
+            footer.className = 'card-footer bg-transparent';
+            footer.appendChild(button);
             // Add elements to container
             container.appendChild(input);
-            container.appendChild(list);
-            container.appendChild(button);
+            card.appendChild(list);
+            card.appendChild(footer);
+            container.appendChild(card);
             // Return container
             return container.outerHTML;
         },
@@ -76,10 +85,10 @@ export const hasMany = {
         checkItem: (name, option) => {
             // Create list item
             let item = document.createElement('li');
-            item.className = 'list-group-item';
+            item.className = 'list-group-item hasmany-check-item';
             // Create checkbox
             let input = document.createElement('input');
-            input.classList.add('form-check-input');
+            input.classList.add('form-check-input', 'mt-0');
             if (option.notb)
                 input.classList.add('hasmany-' + name + 'notb');
             else
@@ -92,6 +101,7 @@ export const hasMany = {
             item.appendChild(input);
             // Create label
             let label = document.createElement('label');
+            label.className = 'form-check-label ms-2 flex-grow-1';
             label.setAttribute('for', name + option.id);
             label.textContent = option.label;
             item.appendChild(label);
@@ -103,7 +113,7 @@ export const hasMany = {
             let item = document.createElement('li');
             item.id = 'id_' + name + '_' + option.id;
             item.textContent = option.label;
-            item.className = 'list-group-item';
+            item.className = 'list-group-item hasmany-selected-item';
             // Create hidden input
             let input = document.createElement('input');
             input.type = 'hidden';
@@ -125,7 +135,7 @@ export const hasMany = {
                 input.addEventListener('change', ev => {
                     if (ev.target.checked) {
                         // Add item to list
-                        document.querySelector('#id_' + args.name).insertAdjacentHTML('beforeend', hasMany.build.item(args.name, {
+                        document.querySelector('#id_' + args.name).insertAdjacentHTML('beforeend', hasMany.build.listItem(args.name, {
                             id: ev.target.value,
                             label: ev.target.nextElementSibling.textContent
                         }));
@@ -140,13 +150,14 @@ export const hasMany = {
             // Add event listener for None of the Below
             if (args.notb)
                 document.querySelector('.hasmany-' + args.name + 'notb').addEventListener('change', ev => {
-                    if (ev.target.checked)
+                    if (ev.target.checked) {
                         // Uncheck all other items
-                        document.querySelectorAll('hasmany-' + args.name).forEach(input => {
+                        document.querySelectorAll('.hasmany-' + args.name).forEach(input => {
                             input.checked = false;
                         });
                         // Remove all items from list
                         document.querySelector('#id_' + args.name).innerHTML = '';
+                    }
                 });
         });
     }

package/src/scss/_tokenfield.scss

@@ -33,3 +33,29 @@
   right: .45rem;
   font-size: 18pt;
 }
+
+.hasmany {
+  .card {
+    border-color: var(--bs-border-color);
+  }
+
+  .card-footer {
+    padding: 0.5rem;
+  }
+
+  .hasmany-selected-list .list-group-item {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .hasmany-selected-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .hasmany-check-item {
+    display: flex;
+    align-items: center;
+  }
+}