headmin 0.3.4 → 0.4.0

data/app/assets/javascripts/headmin.js

@@ -4962,6 +4962,202 @@ Controller.blessings = [ClassPropertiesBlessing, TargetPropertiesBlessing, Value
 Controller.targets = [];
 Controller.values = {};
 
+// app/assets/javascripts/headmin/controllers/autocomplete_controller.js
+var autocomplete_controller_default = class extends Controller {
+  static get targets() {
+    return ["input", "dropdown", "dropdownItem"];
+  }
+  static get values() {
+    return {
+      url: String
+    };
+  }
+  connect() {
+    this.inputTarget.addEventListener("focus", (event) => {
+      this.show();
+    });
+    this.inputTarget.addEventListener("keydown", (event) => {
+      this.handleKeydown(event);
+    });
+    document.addEventListener("click", (event) => {
+      this.handleOutsideClick(event);
+    });
+  }
+  handleKeydown(event) {
+    this.show();
+    const keyCode = parseInt(event.keyCode, 10);
+    if (this.isArrowKey(keyCode)) {
+      this.handleArrowKey(keyCode);
+    } else if (this.isEnterKey(keyCode)) {
+      this.selectActiveItem();
+    } else {
+      this.handleTextKey();
+    }
+  }
+  selectActiveItem() {
+    this.activeItem().click();
+  }
+  isEnterKey(keyCode) {
+    return keyCode === 13;
+  }
+  handleArrowKey(keyCode) {
+    switch (keyCode) {
+      case 38:
+        this.handleArrowUp();
+        break;
+      case 40:
+        this.handleArrowDown();
+        break;
+      default:
+    }
+  }
+  handleArrowUp() {
+    this.selectPreviousItem();
+  }
+  handleArrowDown() {
+    this.selectNextItem();
+  }
+  selectNextItem() {
+    const next = this.nextItem();
+    this.deselectAll();
+    next.classList.add("active");
+  }
+  nextItem() {
+    const current = this.activeItem();
+    if (!this.hasSelectedItem()) {
+      return this.firstItem();
+    }
+    if (this.isItemLast(current)) {
+      return this.firstItem();
+    } else {
+      const index2 = this.itemIndex(current);
+      return this.itemAtIndex(index2 + 1);
+    }
+  }
+  selectPreviousItem() {
+    const previous = this.previousItem();
+    this.deselectAll();
+    previous.classList.add("active");
+  }
+  previousItem() {
+    const current = this.activeItem();
+    if (!this.hasSelectedItem()) {
+      return this.lastItem();
+    }
+    if (this.isItemFirst(current)) {
+      return this.lastItem();
+    } else {
+      const index2 = this.itemIndex(current);
+      return this.itemAtIndex(index2 - 1);
+    }
+  }
+  deselectAll() {
+    this.dropdownItemTargets.forEach((dropdownItem) => {
+      dropdownItem.classList.remove("active");
+    });
+  }
+  itemAtIndex(index2) {
+    return this.dropdownItemTargets[index2];
+  }
+  firstItem() {
+    return this.itemAtIndex(0);
+  }
+  lastItem() {
+    return this.itemAtIndex(this.dropdownItemTargets.length - 1);
+  }
+  hasSelectedItem() {
+    return this.activeItem() !== void 0;
+  }
+  activeItem() {
+    return this.dropdownItemTargets.find((item) => {
+      return item.classList.contains("active");
+    });
+  }
+  isItemLast(item) {
+    return this.itemIndex(item) === this.dropdownItemTargets.length - 1;
+  }
+  isItemFirst(item) {
+    return this.itemIndex(item) === 0;
+  }
+  itemIndex(item) {
+    return Array.from(this.dropdownItemTargets).indexOf(item);
+  }
+  handleTextKey() {
+    this.fetchCollection().then((html) => {
+      this.renderCollection(html);
+    }).then(() => {
+      this.highlight();
+    });
+  }
+  show() {
+    if (this.isDropdownEmpty()) {
+      this.dropdownTarget.classList.remove("d-none");
+    } else {
+      this.hide();
+    }
+  }
+  hide() {
+    this.dropdownTarget.classList.add("d-none");
+  }
+  isDropdownEmpty() {
+    return this.dropdownTarget.textContent.trim().length > 0;
+  }
+  isArrowKey(keyCode) {
+    const arrowKeyCodes = [37, 38, 39, 40];
+    return arrowKeyCodes.includes(keyCode);
+  }
+  fetchCollection() {
+    if (this.isRemote()) {
+      return fetch(this.urlValue).then((response) => {
+        return response.text();
+      }).catch((error2) => {
+        console.error("The URL you provided for the autocomplete collection didn't return a successful result", error2);
+      });
+    } else {
+      return Promise.resolve(this.dropdownTarget.innerHTML);
+    }
+  }
+  renderCollection(html) {
+    this.dropdownTarget.innerHTML = html;
+  }
+  isRemote() {
+    return this.hasUrlValue;
+  }
+  highlight() {
+    const query = this.value();
+    this.dropdownItemTargets.forEach((dropdownItem) => {
+      let text = dropdownItem.innerHTML;
+      text = text.replace(/<mark.*?>(.*?)<\/mark>/ig, "$1");
+      const regex2 = new RegExp(`(${query})`, "gi");
+      text = text.replace(regex2, "<mark>$1</mark>");
+      dropdownItem.innerHTML = text;
+    });
+  }
+  select(event) {
+    this.inputTarget.value = event.target.getAttribute("value");
+    this.hide();
+  }
+  value() {
+    return this.inputTarget.value;
+  }
+  numberOfCharacters() {
+    return this.value().length;
+  }
+  handleOutsideClick(event) {
+    if (!this.isClickedInside(event)) {
+      this.hide();
+    }
+  }
+  isClickedInside(event) {
+    if (!event) {
+      return false;
+    }
+    const inInput = this.inputTarget.contains(event.target);
+    const inDropdown = this.dropdownTarget.contains(event.target);
+    return inInput || inDropdown;
+  }
+};
+
 // node_modules/sortablejs/modular/sortable.esm.js
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -7142,7 +7338,7 @@ var blocks_controller_default = class extends Controller {
     return ["templateBlock", "block", "blocks", "templateEmpty", "button", "buttons"];
   }
   connect() {
-    new sortable_esm_default(this.blocksTarget, {
+    sortable_esm_default.create(this.blocksTarget, {
       onEnd: () => {
         this.reorderPositions();
       }
@@ -7171,7 +7367,6 @@ var blocks_controller_default = class extends Controller {
     } else {
       this.blocksTarget.insertAdjacentHTML("afterbegin", html);
     }
-    this.blocksTarget.dispatchEvent(new CustomEvent("headmin:reinit", { bubbles: true }));
     this.reorderPositions();
     this.toggleEmpty();
   }
@@ -7190,8 +7385,7 @@ var blocks_controller_default = class extends Controller {
   }
   setPosition(html) {
     const position = this.retrieveLastPosition() + 1;
-    const regex = new RegExp("99999", "g");
-    return html.replace(regex, position);
+    return html.replace(/99999/g, position);
   }
   retrieveLastPosition() {
     const blocks = Array.from(this.blockTargets);
@@ -7202,7 +7396,7 @@ var blocks_controller_default = class extends Controller {
     return parseInt(lastBlock.querySelector("[name*='position']").value);
   }
   reorderPositions() {
-    for (let [index2, block] of this.blockTargets.entries()) {
+    for (const [index2, block] of this.blockTargets.entries()) {
       this.changePositionInfo(block, index2);
     }
   }
@@ -7248,21 +7442,20 @@ var dropzone_controller_default = class extends Controller {
     return ["input"];
   }
   connect() {
-    this.element.classList.add("h-dropzone");
     this.inputTarget.addEventListener("dragover", (event) => {
-      this.element.classList.add("dragover");
+      this.element.classList.add("focus");
     });
     this.inputTarget.addEventListener("dragleave", (event) => {
-      this.element.classList.remove("dragover");
+      this.element.classList.remove("focus");
     });
     this.inputTarget.addEventListener("drop", (event) => {
-      this.element.classList.remove("dragover");
+      this.element.classList.remove("focus");
     });
     this.inputTarget.addEventListener("focusin", (event) => {
-      this.element.classList.add("active");
+      this.element.classList.add("focus");
     });
     this.inputTarget.addEventListener("focusout", (event) => {
-      this.element.classList.remove("active");
+      this.element.classList.remove("focus");
     });
   }
 };
@@ -7362,7 +7555,7 @@ var file_preview_controller_default = class extends Controller {
   addThumbnails() {
     const files = this.inputFiles();
     files.forEach((file) => {
-      let thumbnail = this.generateDummyThumbnail();
+      const thumbnail = this.generateDummyThumbnail();
       this.appendThumbnail(thumbnail);
       this.updateThumbnail(this.lastThumbnail(), file);
     });
@@ -7407,7 +7600,7 @@ var file_preview_controller_default = class extends Controller {
     thumbnail.title = title;
   }
   updateThumbnailBackground(thumbnail, url) {
-    let thumbnailBackground = thumbnail.querySelector(".h-thumbnail-bg");
+    const thumbnailBackground = thumbnail.querySelector(".h-thumbnail-bg");
     thumbnailBackground.style.backgroundImage = `url('${url}')`;
   }
   removeThumbnailIcon(thumbnail) {
@@ -7430,9 +7623,9 @@ var file_preview_controller_default = class extends Controller {
       zip: ["application/zip application/x-7z-compressed", "application/x-bzip application/x-bzip2 application/gzip application/vnd.rar"],
       pdf: ["application/pdf"]
     };
-    const icon_name = Object.keys(typeMap).find((key) => typeMap[key].includes(mimeType));
-    const full_icon_name = ["bi", "file", "earmark", icon_name].filter((e) => typeof e === "string" && e !== "").join("-");
-    return `<i class="bi ${full_icon_name} h-thumbnail-icon"></i>`;
+    const iconName = Object.keys(typeMap).find((key) => typeMap[key].includes(mimeType));
+    const fullIconName = ["bi", "file", "earmark", iconName].filter((e) => typeof e === "string" && e !== "").join("-");
+    return `<i class="bi ${fullIconName} h-thumbnail-icon"></i>`;
   }
   isImage(file) {
     return file.type.match(/^image/) !== null;
@@ -7468,7 +7661,7 @@ var filter_controller_default = class extends Controller {
     return ["button", "popup"];
   }
   connect() {
-    this.element["controller"] = this;
+    this.element.controller = this;
     document.addEventListener("click", (event) => {
       this.handleOutsideClick(event);
     });
@@ -7524,7 +7717,6 @@ var filters_controller_default = class extends Controller {
     let html = this.getTemplateHTML(name);
     html = this.replaceIdsWithTimestamps(html);
     this.listTarget.insertAdjacentHTML("beforeend", html);
-    this.menuItemTarget.dispatchEvent(new CustomEvent("headmin:reinit", { bubbles: true }));
   }
   remove(event) {
     const filter = event.currentTarget.closest(".h-filter");
@@ -7553,8 +7745,7 @@ var filters_controller_default = class extends Controller {
     return template.innerHTML;
   }
   replaceIdsWithTimestamps(html) {
-    const regex = new RegExp("template_id", "g");
-    return html.replace(regex, new Date().getTime());
+    return html.replace(/template_id/g, new Date().getTime());
   }
 };
 
@@ -9746,7 +9937,7 @@ var flatpickr_controller_default = class extends Controller {
     esm_default(this.inputTarget, options);
   }
   options() {
-    return JSON.parse(this.inputTarget.getAttribute("data-flatpickr-options"));
+    return JSON.parse(this.inputTarget.getAttribute("data-flatpickr"));
   }
   defaultOptions() {
     return {
@@ -14853,8 +15044,8 @@ var popup_controller_default = class extends Controller {
   }
   open(event) {
     const button = event.target.closest('[data-popup-target="button"]');
-    const popup = this.popupById(button.dataset["popupId"]);
-    const passThru = button.dataset["popupPassThru"];
+    const popup = this.popupById(button.dataset.popupId);
+    const passThru = button.dataset.popupPassThru;
     if (passThru) {
       const passThruElement = popup.querySelector(passThru);
       passThruElement.click();
@@ -14865,12 +15056,12 @@ var popup_controller_default = class extends Controller {
   }
   close(event) {
     const button = event.target.closest('[data-popup-target="button"]');
-    const popup = this.popupById(button.dataset["popupId"]);
+    const popup = this.popupById(button.dataset.popupId);
     this.closePopup(popup);
   }
   popupById(id) {
     return this.popupTargets.find((popup) => {
-      return popup.dataset["popupId"] === id;
+      return popup.dataset.popupId === id;
     });
   }
   openPopup(popup) {
@@ -14884,12 +15075,30 @@ var popup_controller_default = class extends Controller {
 // app/assets/javascripts/headmin/controllers/redactorx_controller.js
 var redactorx_controller_default = class extends Controller {
   connect() {
-    if (typeof RedactorX == "undefined") {
+    this.initRedactor();
+  }
+  initRedactor() {
+    if (typeof RedactorX === "undefined") {
       console.error("RedactorX is a paid module and is not included in Headmin. Please purchase it and import it as a JS module");
       return false;
     }
+    const defaultOptions = {
+      editor: {
+        minHeight: "57px"
+      },
+      subscribe: {
+        "app.start": () => {
+          this.stylize();
+        }
+      }
+    };
     const options = JSON.parse(this.element.getAttribute("data-redactor-options"));
-    RedactorX(this.element, options);
+    RedactorX(this.element, { ...defaultOptions, ...options });
+  }
+  stylize() {
+    const container = this.element.nextElementSibling;
+    const inputClasses = this.element.classList;
+    container.classList.add(...inputClasses);
   }
 };
 
@@ -14904,7 +15113,7 @@ var repeater_controller_default = class extends Controller {
     return ["repeater", "footer", "template", "row", "list", "empty", "addButton"];
   }
   connect() {
-    new sortable_esm_default(this.listTarget, {
+    sortable_esm_default.create(this.listTarget, {
       animation: 150,
       ghostClass: "list-group-item-dark",
       draggable: ".repeater-row",
@@ -14935,7 +15144,7 @@ var repeater_controller_default = class extends Controller {
     event.preventDefault();
     const button = event.target;
     const templateName = button.dataset.templateName;
-    let rowIndex = button.dataset.rowIndex;
+    const rowIndex = button.dataset.rowIndex;
     const template = this.getTemplate(templateName);
     const html = this.replaceIdsWithTimestamps(template);
     if (rowIndex) {
@@ -14944,7 +15153,6 @@ var repeater_controller_default = class extends Controller {
     } else {
       this.footerTarget.insertAdjacentHTML("beforebegin", html);
     }
-    document.dispatchEvent(new CustomEvent("headmin:reinit", { bubbles: true }));
     this.resetIndices();
     this.resetPositions();
     this.toggleEmpty();
@@ -15036,7 +15244,7 @@ var select_controller_default = class extends Controller {
     return defaultOptions[locale];
   }
   hasTags() {
-    return this.element.dataset["tags"] === "true";
+    return this.element.dataset.tags === "true";
   }
   initTomSelect() {
     const defaultOptions = this.defaultOptions(i18n_default.locale);
@@ -15152,7 +15360,7 @@ var table_controller_default = class extends Controller {
     return ["table", "body", "actions", "idCheckbox", "idsCheckbox", "row"];
   }
   connect() {
-    new sortable_esm_default(this.bodyTarget, {
+    sortable_esm_default.create(this.bodyTarget, {
       handle: ".table-drag-sort-handle",
       onEnd: (event) => {
         this.submitPositions();
@@ -15179,7 +15387,7 @@ var table_controller_default = class extends Controller {
     });
   }
   idsFormData() {
-    let formData = new FormData();
+    const formData = new FormData();
     this.positions().forEach((id) => {
       formData.append("ids[]", id);
     });
@@ -15247,8 +15455,9 @@ var table_controller_default = class extends Controller {
 var Headmin = class {
   static start() {
     window.Stimulus = window.Stimulus || Application.start();
+    Stimulus.register("autocomplete", autocomplete_controller_default);
     Stimulus.register("blocks", blocks_controller_default);
-    Stimulus.register("date_range", date_range_controller_default);
+    Stimulus.register("date-range", date_range_controller_default);
     Stimulus.register("dropzone", dropzone_controller_default);
     Stimulus.register("file-preview", file_preview_controller_default);
     Stimulus.register("filter", filter_controller_default);

data/app/assets/stylesheets/headmin/forms/autocomplete.scss

@@ -0,0 +1,21 @@
+.h-autocomplete {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  z-index: $zindex-dropdown;
+  width: 100%;
+  @include reset-text();
+  @include font-size($dropdown-font-size);
+  word-wrap: break-word;
+  background-color: $dropdown-bg;
+  background-clip: padding-box;
+  border-radius: $dropdown-border-radius !important;
+  @include box-shadow($dropdown-box-shadow);
+  border: $dropdown-border-width solid $dropdown-border-color;
+  overflow: hidden;
+
+  .list-group-flush {
+    margin: 0;
+    padding: 0;
+  }
+}

data/app/assets/stylesheets/headmin/forms/file.scss

@@ -0,0 +1,46 @@
+.h-form-file {
+  .h-form-file-thumbnails {
+    margin-bottom: map-get($spacers, 2);
+  }
+
+  &.h-dropzone {
+    padding: map-get($spacers, 2);
+
+    .h-form-file-thumbnails {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.h-form-file-thumbnails {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: map-get($spacers, 2);
+}
+
+.h-form-file-thumbnail {
+  position: relative;
+  pointer-events: initial !important;
+  display: flex;
+}
+
+.h-form-file-thumbnail-remove {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: $danger;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  border-radius: $border-radius;
+  z-index: 3;
+  cursor: pointer;
+
+  &:hover {
+    background: tint-color($danger, $btn-hover-bg-tint-amount)
+  }
+}

data/app/assets/stylesheets/headmin/forms/repeater.scss

@@ -0,0 +1,62 @@
+.repeater {
+  position: relative;
+}
+
+.repeater-row {
+  position: relative;
+
+  &:hover {
+    .repeater-row-remove {
+      visibility: visible;
+    }
+
+    .repeater-row-add {
+      visibility: visible;
+    }
+
+    .repeater-row-handle {
+      visibility: visible;
+    }
+  }
+}
+
+.repeater-row-remove {
+  position: absolute;
+  top: calc(50% - 17px);
+  right: -22px;
+  z-index: 2;
+  visibility: hidden;
+
+  i.bi {
+    background: white;
+    border-radius: 50%;
+  }
+}
+
+.repeater-row-add {
+  position: absolute;
+  top: calc(100% - 18px);
+  right: calc(50% - 17px);
+  z-index: 2;
+  visibility: hidden;
+
+  i.bi {
+    background: white;
+    border-radius: 50%;
+  }
+}
+
+.repeater-row-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  visibility: hidden;
+  cursor: move;
+}
+

data/app/assets/stylesheets/headmin/forms/search.scss

@@ -0,0 +1,12 @@
+input[type="search"] {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-position: 10px center;
+  padding-left: 35px !important;
+}
+
+.form-floating {
+  input[type="search"] ~ label {
+    padding-left: 35px;
+  }
+}

data/app/assets/stylesheets/headmin/forms.scss

@@ -0,0 +1,11 @@
+.form-label[required="required"], .form-check-label[required="required"] {
+  &:after {
+    content: ' *';
+    color: $danger;
+  }
+}
+
+@import "forms/autocomplete";
+@import "forms/file";
+@import "forms/repeater";
+@import "forms/search";

data/app/assets/stylesheets/headmin/general.scss

@@ -1,3 +1,8 @@
 html {
   height: 100%;
+}
+
+mark {
+  padding: 0;
+  box-shadow: 0 $mark-padding 0 $mark-bg, 0 (-$mark-padding) 0 $mark-bg;
 }

data/app/assets/stylesheets/headmin/overrides/bootstrap.scss

@@ -18,7 +18,6 @@ $enable-shadows: true;
 // Typography
 $font-size-base: 0.9rem;
 $font-size-xs: $font-size-base * .75;
-$font-weight-medium: 500;
 $input-font-size: $font-size-base;
 $form-select-font-size: $font-size-base;
 $btn-font-size: $font-size-base;
@@ -29,7 +28,7 @@ $table-border-color: $gray-200;
 $table-group-separator-color: $gray-200;
 $table-hover-bg: $gray-100;
 $table-color: $gray-500;
-$table-th-font-weight: $font-weight-medium;
+$table-th-font-weight: $headings-font-weight;
 $table-cell-padding-x: 1rem;
 $table-cell-padding-y: 0.8rem;
 
@@ -53,13 +52,16 @@ $btn-link-color: $gray-500;
 // Form
 $input-group-addon-bg: $gray-100;
 
+// Mark
+$mark-bg: #ffec89;
+
 // Utilities
 $custom-utilities: (
         "font-weight": (
                 property: font-weight,
                 class: fw,
                 values: (
-                        medium: $font-weight-medium,
+                        medium: $headings-font-weight,
                         light: $font-weight-light,
                         lighter: $font-weight-lighter,
                         normal: $font-weight-normal,