ui_bibz 4.0.0.beta16 → 4.0.0.beta17

data/app/assets/javascripts/forms.js

@@ -1,160 +1,202 @@
-import UiBibzFormula from 'formula'
-import 'bootstrap-switch'
-import "input-connected"
-import "jquery.multi-select"
-import "bootstrap-multiselect"
-import extendMultiselect from "jquery.multi-select-extend"
-import "bootstrap-markdown"
-import 'fuzzysort'
-import "bootstrap-datepicker.min.js"
+import UiBibzFormula from "formula";
+import "bootstrap-switch";
+import "input-connected";
+import "jquery.multi-select";
+import "bootstrap-multiselect";
+import extendMultiselect from "jquery.multi-select-extend";
+import "bootstrap-markdown";
+import "fuzzysort";
+import "bootstrap-datepicker.min.js";
+import "nested-dropdown";
 
 export default class UiBibzForm {
-
   constructor(node) {
-    this.node = node || document
-    if(node.querySelector('input.switch-field')){ this.setBootstrapSwitch() }
-    if(node.querySelector('.ui-bibz-connect')) { this.inputConnected() }
+    this.node = node || document;
+    if (node.querySelector("input.switch-field")) {
+      this.setBootstrapSwitch();
+    }
+    if (node.querySelector(".ui-bibz-connect")) {
+      this.inputConnected();
+    }
     //if(node.querySelector('.dropdown-select-field')) { this.setMultiSelect() }
-    if(node.querySelector('.multi-select-field')){ this.setMultiSelect() }
-    if(node.querySelector('.multi-column-field')){ this.setMultiColumn() }
-    if(node.querySelector('.formula-field')){ this.formula() }
-    if(node.querySelector('.auto-complete-field')){ this.autoCompleteFix() }
-    if(node.querySelector('.slider')){ this.doubleSlider() }
-    if(node.querySelector('.dropdown-select-field')){ this.selectpicker() }
+    if (node.querySelector(".multi-select-field")) {
+      this.setMultiSelect();
+    }
+    if (node.querySelector(".multi-column-field")) {
+      this.setMultiColumn();
+    }
+    if (node.querySelector(".formula-field")) {
+      this.formula();
+    }
+    if (node.querySelector(".auto-complete-field")) {
+      this.autoCompleteFix();
+    }
+    if (node.querySelector(".slider")) {
+      this.doubleSlider();
+    }
+    if (node.querySelector(".dropdown-select-field")) {
+      this.selectpicker();
+    }
   }
 
   inputConnected() {
-    $('.ui-bibz-connect', this.node).inputConnected()
+    $(".ui-bibz-connect", this.node).inputConnected();
   }
 
   setSelectPicker() {
-    $('select.dropdown-select-field', this.node).selectpicker()
+    $("select.dropdown-select-field", this.node).selectpicker();
   }
 
   setBootstrapSwitch() {
-    $('input.switch-field', this.node).bootstrapSwitch({
-      size: 'large'
-    })
+    $("input.switch-field", this.node).bootstrapSwitch({
+      size: "large",
+    });
   }
 
   setMultiSelect() {
-    $('select.multi-select-field', this.node).each(function() {
-      var classes, data
-      data = $(this).data()
-      classes = $(this)[0].classList.value
-      delete data["multiselect"]
-      data = Object.assign({
-        buttonClass: "btn " + classes
-      }, data)
-      $(this).multiselect(data)
-      if ($(this).parent().hasClass('input-group')) {
-        $(this).siblings('.btn-group').addClass('input-group-btn')
+    $("select.multi-select-field", this.node).each(function () {
+      var classes, data;
+      data = $(this).data();
+      classes = $(this)[0].classList.value;
+      delete data["multiselect"];
+      data = Object.assign(
+        {
+          buttonClass: "btn " + classes,
+        },
+        data,
+      );
+      $(this).multiselect(data);
+      if ($(this).parent().hasClass("input-group")) {
+        $(this).siblings(".btn-group").addClass("input-group-btn");
       }
-    })
+    });
   }
 
   formula() {
-    let me = this
-    let formula_input_fields = $('.formula-field', this.node)
+    let me = this;
+    let formula_input_fields = $(".formula-field", this.node);
 
-    formula_input_fields.each(function() {
-      me.updateFormulaField($(this))
-    })
+    formula_input_fields.each(function () {
+      me.updateFormulaField($(this));
+    });
 
-    formula_input_fields.on('keyup', function() {
-      me.updateFormulaField($(this))
-    })
+    formula_input_fields.on("keyup", function () {
+      me.updateFormulaField($(this));
+    });
   }
 
   updateFormulaField(field) {
-    let error, f, formulaAlert, formulaInputField, formulaResultField, formulaSignField, response, result
-    formulaInputField = field
-    formulaSignField = formulaInputField.siblings('.formula-field-sign')
-    formulaResultField = formulaInputField.siblings('.formula-field-result')
-    formulaAlert = formulaInputField.siblings('.formula-field-alert')
-    f = new UiBibzFormula()
-    result = f.go(formulaInputField.val())
-    error = result[0]
-    response = result[1]
+    let error,
+      f,
+      formulaAlert,
+      formulaInputField,
+      formulaResultField,
+      formulaSignField,
+      response,
+      result;
+    formulaInputField = field;
+    formulaSignField = formulaInputField.siblings(".formula-field-sign");
+    formulaResultField = formulaInputField.siblings(".formula-field-result");
+    formulaAlert = formulaInputField.siblings(".formula-field-alert");
+    f = new UiBibzFormula();
+    result = f.go(formulaInputField.val());
+    error = result[0];
+    response = result[1];
 
     if (!!error) {
-      formulaAlert.attr('data-original-title', error)
-      formulaAlert.attr('style', 'display: table-cell')
-      formulaResultField.addClass('fix-border-right')
+      formulaAlert.attr("data-original-title", error);
+      formulaAlert.attr("style", "display: table-cell");
+      formulaResultField.addClass("fix-border-right");
     } else {
-      formulaAlert.hide()
-      formulaResultField.val(eval(response))
-      formulaResultField.removeClass('fix-border-right')
+      formulaAlert.hide();
+      formulaResultField.val(eval(response));
+      formulaResultField.removeClass("fix-border-right");
     }
     if (isNaN(response)) {
-      formulaSignField.attr('style', 'display: table-cell')
-      formulaResultField.attr('style', 'display: table-cell; visible: visible')
-      formulaInputField.addClass('fix-border-right')
+      formulaSignField.attr("style", "display: table-cell");
+      formulaResultField.attr("style", "display: table-cell; visible: visible");
+      formulaInputField.addClass("fix-border-right");
     } else {
-      formulaSignField.hide()
-      formulaResultField.attr('style', 'visible: hidden')
-      formulaInputField.removeClass('fix-border-right')
+      formulaSignField.hide();
+      formulaResultField.attr("style", "visible: hidden");
+      formulaInputField.removeClass("fix-border-right");
     }
   }
 
   setMultiColumn() {
-    $.fn.multiSelect.defaults = extendMultiselect
-    $(".multi-column-field", this.node).multiSelect()
+    $.fn.multiSelect.defaults = extendMultiselect;
+    $(".multi-column-field", this.node).multiSelect();
   }
 
   autoCompleteFix() {
-    $(".auto-complete-field", this.node).each(function() {
-      var lastChild, parent, radius
-      parent = $(this).parent('.input-group')
+    $(".auto-complete-field", this.node).each(function () {
+      var lastChild, parent, radius;
+      parent = $(this).parent(".input-group");
       if (parent.length > 0) {
-        lastChild = parent.children().last()
-        if (lastChild.is('datalist')) {
-          radius = parent.children().first().css("border-bottom-left-radius")
-          $(this).css("border-bottom-right-radius", radius)
-          $(this).css("border-top-right-radius", radius)
+        lastChild = parent.children().last();
+        if (lastChild.is("datalist")) {
+          radius = parent.children().first().css("border-bottom-left-radius");
+          $(this).css("border-bottom-right-radius", radius);
+          $(this).css("border-top-right-radius", radius);
         }
       }
-    })
+    });
   }
 
-  doubleSlider(){
-    let me = this
-    this.node.querySelectorAll(".slider").forEach(function(e){
-      let slider = e
-      let sliderId = slider.getAttribute("id")
-      let sliderMin = me.node.querySelector(`.slider-header[data-target=${sliderId}] .slider-header-min span`)
-      let sliderMax = me.node.querySelector(`.slider-header[data-target=${sliderId}] .slider-header-max span`)
-      let rangeInput1 = slider.querySelectorAll("input[type=range]")[0]
-      let rangeInput2 = slider.querySelectorAll("input[type=range]")[1]
-      let inverseLeft = slider.querySelector(".slider-inverse-left")
-      let inverseRight = slider.querySelector(".slider-inverse-right")
-      let range = slider.querySelector(".slider-range")
-      let thumbLeft = slider.querySelector(".slider-thumb-left")
-      let thumbRight = slider.querySelector(".slider-thumb-right")
-      let signLeft = slider.querySelector(".slider-sign-left")
-      let signRight = slider.querySelector(".slider-sign-right")
-
-      rangeInput1.addEventListener("input", function(e){
-        this.value = Math.min(this.value, rangeInput2.value-1)
-        let value = (100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min)
-        value = value +  0.01 * value
-
-        inverseLeft.style.width = `${value}%`
-        range.style.left = `${value}%`
-        thumbLeft.style.left = `${value}%`
-        if(sliderMin){ sliderMin.innerHTML = this.value }
-      })
-
-      rangeInput2.addEventListener("input", function(e){
-        this.value = Math.max(this.value,rangeInput1.value-(-1))
-        let value = (100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min)
-        value = value +  0.01 * value
-
-        inverseRight.style.width = `${100-value}%`
-        range.style.right = `${100-value}%`
-        thumbRight.style.left= `${value}%`
-        if(sliderMax){ sliderMax.innerHTML = this.value }
-      })
-    })
+  doubleSlider() {
+    let me = this;
+    this.node.querySelectorAll(".slider").forEach(function (e) {
+      let slider = e;
+      let sliderId = slider.getAttribute("id");
+      let sliderMin = me.node.querySelector(
+        `.slider-header[data-target=${sliderId}] .slider-header-min span`,
+      );
+      let sliderMax = me.node.querySelector(
+        `.slider-header[data-target=${sliderId}] .slider-header-max span`,
+      );
+      let rangeInput1 = slider.querySelectorAll("input[type=range]")[0];
+      let rangeInput2 = slider.querySelectorAll("input[type=range]")[1];
+      let inverseLeft = slider.querySelector(".slider-inverse-left");
+      let inverseRight = slider.querySelector(".slider-inverse-right");
+      let range = slider.querySelector(".slider-range");
+      let thumbLeft = slider.querySelector(".slider-thumb-left");
+      let thumbRight = slider.querySelector(".slider-thumb-right");
+      let signLeft = slider.querySelector(".slider-sign-left");
+      let signRight = slider.querySelector(".slider-sign-right");
+
+      rangeInput1.addEventListener("input", function (e) {
+        this.value = Math.min(this.value, rangeInput2.value - 1);
+        let value =
+          (100 / (parseInt(this.max) - parseInt(this.min))) *
+            parseInt(this.value) -
+          (100 / (parseInt(this.max) - parseInt(this.min))) *
+            parseInt(this.min);
+        value = value + 0.01 * value;
+
+        inverseLeft.style.width = `${value}%`;
+        range.style.left = `${value}%`;
+        thumbLeft.style.left = `${value}%`;
+        if (sliderMin) {
+          sliderMin.innerHTML = this.value;
+        }
+      });
+
+      rangeInput2.addEventListener("input", function (e) {
+        this.value = Math.max(this.value, rangeInput1.value - -1);
+        let value =
+          (100 / (parseInt(this.max) - parseInt(this.min))) *
+            parseInt(this.value) -
+          (100 / (parseInt(this.max) - parseInt(this.min))) *
+            parseInt(this.min);
+        value = value + 0.01 * value;
+
+        inverseRight.style.width = `${100 - value}%`;
+        range.style.right = `${100 - value}%`;
+        thumbRight.style.left = `${value}%`;
+        if (sliderMax) {
+          sliderMax.innerHTML = this.value;
+        }
+      });
+    });
   }
 }

data/app/assets/javascripts/interfaces.js

@@ -1,56 +1,65 @@
 // Import non minified version, later minifier will make sure minified version
 // is provided, while still allowing debugging to use the non minified version.
 // import bootstrap from "bootstrap/dist/js/bootstrap.bundle"
-import "@popperjs/core"
-import "bootstrap"
-import * as bootstrap from 'bootstrap'
-window.bootstrap = bootstrap
+import "@popperjs/core";
+import "bootstrap";
+import * as bootstrap from "bootstrap";
+window.bootstrap = bootstrap;
 
 export default class UiBibzInterface {
-
   constructor(node) {
-    this.node = node || document
+    this.node = node || document;
 
     // //this.nav()
-    this.tooltip()
+    this.tooltip();
     // this.dropdown()
-    this.popover()
-    this.notify()
-    this.toast()
+    this.popover();
+    this.notify();
+    this.toast();
   }
 
-  nav(){
-    this.node.querySelectorAll('.nav-tabs .nav-item .nav-link').forEach(function(el){
-      let tabTrigger = new bootstrap.Tab(el)
-      el.addEventListener('click', function (e) {
-        e.preventDefault()
-        tabTrigger.show()
-      })
-    })
+  nav() {
+    this.node
+      .querySelectorAll(".nav-tabs .nav-item .nav-link")
+      .forEach(function (el) {
+        let tabTrigger = new bootstrap.Tab(el);
+        el.addEventListener("click", function (e) {
+          e.preventDefault();
+          tabTrigger.show();
+        });
+      });
   }
 
   popover() {
-    this.node.querySelectorAll('[data-bs-toggle="popover"]').forEach(x => new bootstrap.Popover(x))
+    this.node
+      .querySelectorAll('[data-bs-toggle="popover"]')
+      .forEach((x) => new bootstrap.Popover(x));
   }
 
   tooltip() {
-    this.node.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(x => new bootstrap.Tooltip(x))
+    this.node
+      .querySelectorAll('[data-bs-toggle="tooltip"]')
+      .forEach((x) => new bootstrap.Tooltip(x));
   }
 
   dropdown() {
-    this.node.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(x => new bootstrap.Dropdown(x))
+    this.node
+      .querySelectorAll('[data-bs-toggle="dropdown"]')
+      .forEach((x) => new bootstrap.Dropdown(x));
   }
 
   toast() {
-    this.node.querySelectorAll('.toast').forEach(x => new bootstrap.Toast(x))
+    this.node.querySelectorAll(".toast").forEach((x) => new bootstrap.Toast(x));
   }
 
   notify() {
-    new bootstrap.Alert('.myAlert')
-    this.node.querySelectorAll('.alert[data-timeout]').forEach(function(alertElement) {
-      setTimeout(function() {
-        alertElement.classList.add('fade')
-      }, alertElement.getAttribute("data-timeout") )
-    })
+    new bootstrap.Alert(".myAlert");
+    this.node
+      .querySelectorAll(".alert[data-timeout]")
+      .forEach(function (alertElement) {
+        setTimeout(function () {
+          alertElement.classList.add("fade");
+        }, alertElement.getAttribute("data-timeout"));
+      });
   }
 }

data/app/assets/stylesheets/sass/_forms.sass

@@ -1,9 +1,10 @@
+@import forms/_bootstrap_select
 @import forms/_button
+@import forms/_combobox
+@import forms/_dropdown
+@import forms/_form_check
+@import forms/_formula_field
+@import forms/_multiselect
 @import forms/_range
 @import forms/_slider
-@import forms/_bootstrap_select
-@import forms/_multiselect
-@import forms/_formula_field
 @import forms/_surround_field
-@import forms/_form_check
-@import forms/combobox

data/app/assets/stylesheets/sass/forms/_dropdown.sass

@@ -0,0 +1,5 @@
+a.dropdown-item:hover
+  text-decoration: none !important
+
+.dropdown-item > .glyph
+  width: 20px

data/config/importmap.rb

@@ -1,21 +1,22 @@
 # frozen_string_literal: true
 
-pin '@popperjs/core', to: 'https://unpkg.com/@popperjs/core@2.11.2/dist/esm/index.js', preload: true # use unpkg.com as ga.jspm.io contains a broken popper package
-pin 'bootstrap', to: 'https://ga.jspm.io/npm:bootstrap@5.3.3/dist/js/bootstrap.esm.js', preload: true
-pin 'jquery', to: 'jquery-3.7.0.min.js', preload: true
-pin 'bootstrap-multiselect', to: 'bootstrap-multiselect.min.js', preload: true
-pin 'bootstrap-switch', to: 'bootstrap-switch.min.js', preload: true
-pin 'fuzzysort', to: 'fuzzysort.js', preload: true
-pin 'jquery.multi-select', to: 'jquery.multi-select.min.js', preload: true
-pin 'bootstrap-markdown', to: 'bootstrap-markdown.js', preload: true
-pin 'bootstrap-datepicker.min.js', to: 'bootstrap-datepicker.min.js', preload: true
-pin 'bootstrap-switch', to: 'bootstrap-switch.min.js', preload: true
-pin 'jquery.quicksearch', to: 'jquery.quicksearch.min.js', preload: true
-pin 'forms', to: 'forms.js', preload: true
-pin 'interfaces', to: 'interfaces.js', preload: true
-pin 'tables', to: 'tables.js', preload: true
-pin 'formula', to: 'forms/formula.js', preload: true
-pin 'input-connected', to: 'forms/input-connected.js', preload: true
-pin 'jquery.multi-select-extend', to: 'forms/jquery.multi-select-extend.js', preload: true
-pin 'debounce', to: 'debounce.js', preload: true
-pin 'controllers/combobox_controller', to: 'controllers/combobox_controller.js', preload: true
+pin '@popperjs/core', to: 'https://unpkg.com/@popperjs/core@2.11.2/dist/esm/index.js' # use unpkg.com as ga.jspm.io contains a broken popper package
+pin 'bootstrap', to: 'https://ga.jspm.io/npm:bootstrap@5.3.3/dist/js/bootstrap.esm.js'
+pin 'jquery', to: 'jquery-3.7.0.min.js'
+pin 'bootstrap-multiselect', to: 'bootstrap-multiselect.min.js'
+pin 'bootstrap-switch', to: 'bootstrap-switch.min.js'
+pin 'fuzzysort', to: 'fuzzysort.js'
+pin 'jquery.multi-select', to: 'jquery.multi-select.min.js'
+pin 'bootstrap-markdown', to: 'bootstrap-markdown.js'
+pin 'bootstrap-datepicker.min.js', to: 'bootstrap-datepicker.min.js'
+pin 'bootstrap-switch', to: 'bootstrap-switch.min.js'
+pin 'jquery.quicksearch', to: 'jquery.quicksearch.min.js'
+pin 'forms', to: 'forms.js'
+pin 'interfaces', to: 'interfaces.js'
+pin 'tables', to: 'tables.js'
+pin 'formula', to: 'forms/formula.js'
+pin 'input-connected', to: 'forms/input-connected.js'
+pin 'jquery.multi-select-extend', to: 'forms/jquery.multi-select-extend.js'
+pin 'debounce', to: 'debounce.js'
+pin 'controllers/combobox_controller', to: 'controllers/combobox_controller.js'
+pin 'nested-dropdown', to: 'forms/nested-dropdown.js'

data/lib/ui_bibz/concerns/models/searchable.rb

@@ -172,7 +172,7 @@ module UiBibz::Concerns::Models::Searchable
 
     # If there's several table in the same page
     def self.good_store_id?
-      @params[:store_id].nil? ? true : store_id == @params[:store_id]
+      @params[:store_id].nil? || store_id == @params[:store_id]
     end
 
     def self.new_search?

data/lib/ui_bibz/infos.rb

@@ -12,6 +12,6 @@ module UiBibz
   REPO                = 'git+https://github.com/thooams/ui_bibz.git'
   EMAIL               = 'thomas@hummel.link'
   AUTHOR              = 'Thooams [Thomas HUMMEL]'
-  VERSION             = '4.0.0.beta16'
+  VERSION             = '4.0.0.beta17'
   AUTHORS = ['Thooams'].freeze
 end

data/lib/ui_bibz/inputs/ui_bibz_inputs/string_input.rb

@@ -22,7 +22,7 @@ module UiBibzInputs
     private
 
     def string?
-      input_type == :string || input_type == :citext
+      %i[string citext].include?(input_type)
     end
   end
 end

data/lib/ui_bibz/ui/core/component.rb

@@ -79,9 +79,7 @@ module UiBibz::Ui::Core
     end
 
     # Know if component is tapped or not
-    def tapped?(block)
-      UiBibz::Utils::Screwdriver.tapped?(block)
-    end
+    delegate :tapped?, to: :'UiBibz::Utils::Screwdriver'
 
     protected