bullet_train-fields 1.6.37 → 1.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb3c67bc46f05227308634677e215341945f64e40379ed6f57a0d28cf884b206
-  data.tar.gz: 882ce6f3f8b1d85b7514794c1da09dfb3563bc800a0a70ece965606a433cb01d
+  metadata.gz: 15e17d1f6ce3e83a96ffb6010b7f8f42f2bcb87870cd48ed182cc4947d3b6470
+  data.tar.gz: 03a1f3b08a2d14a6395d81c12ab83ea48f9987c81db7abb185d7e535a034cc05
 SHA512:
-  metadata.gz: ab86cbae7b6a92f6c74e49c4fc19f6ac910fffcfcd29f10316ce2a695befbc4905afdf078d84db0b8cdab6a553181dbbebea5749a93cdba7ed57147160aee93b
-  data.tar.gz: 26580a5ae4d7ca10d12d7812a6432bc0efd7e79a7d075459c592896666c487280c78c48a6d3e60d5c1921e8b71813e64fb4e58f9b05b4afed8fca35fa59a44db
+  metadata.gz: fed2c6efd2436abf9231a3c0ed31facc653a5dd95373aac3bdd0502bb1b970ce1522c07e6ee2f5cf7b4c42898104d093346d8db6516cdfca209a8e760410bfd8
+  data.tar.gz: 3ba2447f87e6e4a82e7a983f9facabe764453c20b186cce1b26f160ced3ea572811e19f5517c1beee7b7677a083785bd3cef0c6d246a6880f38f7760c19fa46b

data/app/controllers/concerns/fields/super_select_support.rb

@@ -11,7 +11,7 @@ module Fields::SuperSelectSupport
   end
 
   def create_model_if_new(id)
-    ActiveSupport::Deprecation.warn(
+    ActiveSupport::Deprecation.new.warn(
       "#create_model_if_new is deprecated. " \
       "Use #ensure_backing_models_on instead. See examples at https://bullettrain.co/docs/field-partials/super-select#accepting-new-entries"
     )
@@ -24,7 +24,7 @@ module Fields::SuperSelectSupport
   end
 
   def create_models_if_new(ids)
-    ActiveSupport::Deprecation.warn(
+    ActiveSupport::Deprecation.new.warn(
       "#create_models_if_new is deprecated. " \
       "Use #ensure_backing_models_on instead. See examples at https://bullettrain.co/docs/field-partials/super-select#accepting-new-entries"
     )

data/app/helpers/account/forms_helper.rb

@@ -33,13 +33,13 @@ module Account::FormsHelper
 
   def labels_for(form, method)
     keys = [:placeholder, :label, :help, :options_help]
-    path = [model_key(form), (current_fields_namespace || :fields), method].compact
+    path = [model_key(form), current_fields_namespace || :fields, method].compact
     Struct.new(*keys).new(*keys.map { |key| t((path + [key]).join("."), default: "").presence })
   end
 
   def options_for(form, method)
     # e.g. "scaffolding/completely_concrete/tangible_things.fields.text_area_value.options"
-    path = [model_key(form), (current_fields_namespace || :fields), method, :options]
+    path = [model_key(form), current_fields_namespace || :fields, method, :options]
     options = t(path.compact.join("."))
     return options unless options.is_a?(Hash)
     options.stringify_keys

data/app/javascript/controllers/fields/color_picker_controller.js

@@ -21,27 +21,22 @@ export default class extends Controller {
 
   connect() {
     this.initPluginInstance()
-    this.colorOptions = $(this.colorOptionsTarget)
-      .find('button')
-      .map(function (_, button) {
-        return $(button).attr('data-color').toLowerCase()
-      })
-      .get()
   }
 
   disconnect() {
     this.teardownPluginInstance()
   }
 
+
+
   pickColor(event) {
     event.preventDefault()
 
-    const targetEl = event.target
-    const color = targetEl.dataset.color
+    const color = event.target.dataset.color
 
-    $(this.colorInputTarget).val(color)
-    $(this.colorPickerValueTarget).val(color)
-    $(this.userSelectedColorTarget).data('color', color)
+    this.colorInputTarget.value = color
+    this.colorPickerValueTarget.value = color
+    this.userSelectedColorTarget.dataset.color = color
 
     this.pickr.setColor(color)
   }
@@ -61,21 +56,20 @@ export default class extends Controller {
   }
 
   showUserSelectedColor(color) {
-    $(this.colorInputTarget).val(color)
-    $(this.colorPickerValueTarget).val(color)
-
-    $(this.userSelectedColorTarget)
-      .css('background-color', color)
-      .css('--tw-ring-color', color)
-      .attr('data-color', color)
-      .show()
+    this.colorInputTarget.value = color
+    this.colorPickerValueTarget.value = color
+
+    this.userSelectedColorTarget.style.backgroundColor = color
+    this.userSelectedColorTarget.style.setProperty('--tw-ring-color', color)
+    this.userSelectedColorTarget.setAttribute('data-color', color)
+    this.userSelectedColorTarget.classList.remove('hidden')
   }
 
   unpickColor(event) {
     event.preventDefault()
-    $(this.colorPickerValueTarget).val('')
-    $(this.colorInputTarget).val('')
-    $(this.userSelectedColorTarget).hide()
+    this.colorPickerValueTarget.value = ''
+    this.colorInputTarget.value = ''
+    this.userSelectedColorTarget.classList.add('hidden')
     this.dispatchChangeEvent()
   }
 
@@ -146,7 +140,12 @@ export default class extends Controller {
     this.pickr.destroy()
   }
 
+  get colorOptions () {
+    const colorButtons = this.colorOptionsTarget.querySelectorAll('button[data-color]')
+    return Array.from(colorButtons).map(button => button.getAttribute('data-color').toLowerCase());
+  }
+
   get selectedColor() {
-    return $(this.colorInputTarget).val()
+    return this.colorInputTarget.value
   }
 }

data/app/javascript/controllers/fields/date_controller.js

@@ -2,8 +2,10 @@ import { Controller } from "@hotwired/stimulus"
 require("daterangepicker/daterangepicker.css");
 
 // requires jQuery, moment, might want to consider a vanilla JS alternative
+import jquery from "jquery";
 import 'daterangepicker';
 import moment from 'moment-timezone'
+import select2 from "select2";
 
 export default class extends Controller {
   static targets = [ "field", "displayField", "clearButton", "currentTimeZoneWrapper", "timeZoneButtons", "timeZoneSelectWrapper", "timeZoneField", "timeZoneSelect" ]
@@ -17,6 +19,19 @@ export default class extends Controller {
     pickerLocale: { type: Object, default: {} }
   }
 
+  initialize() {
+    if (window.jQuery === undefined) {
+      window.jQuery = jquery // required for select2 used for time zone select, but we also use global jQuery throughout below
+    }
+    if (!this.isSelect2LoadedOnWindowJquery) {
+      select2()
+    }
+  }
+
+  get isSelect2LoadedOnWindowJquery() {
+    return window?.jQuery?.fn?.select2 !== undefined
+  }
+
   connect() {
     this.initPluginInstance()
   }
@@ -29,13 +44,13 @@ export default class extends Controller {
     // don't submit the form, unless it originated from the cancel/clear button
     event.preventDefault()
 
-    $(this.fieldTarget).val('')
-    $(this.displayFieldTarget).val('')
+    this.fieldTarget.value = ''
+    this.displayFieldTarget.value = ''
   }
 
   currentTimeZone(){
     return (
-      ( this.hasTimeZoneSelectWrapperTarget && $(this.timeZoneSelectWrapperTarget).is(":visible") && this.timeZoneSelectTarget.value ) ||
+      ( this.hasTimeZoneSelectWrapperTarget && jQuery(this.timeZoneSelectWrapperTarget).is(":visible") && this.timeZoneSelectTarget.value ) ||
       ( this.hasTimeZoneFieldTarget && this.timeZoneFieldTarget.value ) ||
         this.currentTimeZoneValue
     )
@@ -51,8 +66,8 @@ export default class extends Controller {
     )
     const displayVal = momentVal.format(format)
     const dataVal = this.includeTimeValue ? momentVal.toISOString(true) : momentVal.format('YYYY-MM-DD')
-    $(this.displayFieldTarget).val(displayVal)
-    $(this.fieldTarget).val(dataVal)
+    this.displayFieldTarget.value = displayVal
+    this.fieldTarget.value = dataVal
     // bubble up a change event when the input is updated for other listeners
     if(picker){
       this.displayFieldTarget.dispatchEvent(new CustomEvent('change', { detail: { picker: picker }}))
@@ -63,8 +78,8 @@ export default class extends Controller {
     // don't follow the anchor
     event.preventDefault()
 
-    $(this.currentTimeZoneWrapperTarget).toggleClass('hidden')
-    $(this.timeZoneButtonsTarget).toggleClass('hidden')
+    this.currentTimeZoneWrapperTarget.classList.toggle('hidden')
+    this.timeZoneButtonsTarget.classList.toggle('hidden')
   }
 
   // triggered on other click from the timezone buttons
@@ -72,23 +87,23 @@ export default class extends Controller {
     // don't follow the anchor
     event.preventDefault()
 
-    $(this.timeZoneButtonsTarget).toggleClass('hidden')
+    this.timeZoneButtonsTarget.classList.toggle('hidden')
     if (this.hasTimeZoneSelectWrapperTarget) {
-      $(this.timeZoneSelectWrapperTarget).toggleClass('hidden')
+      this.timeZoneSelectWrapperTarget.classList.toggle('hidden')
     }
     if(!["", null].includes(this.fieldTarget.value)){
-      $(this.displayFieldTarget).trigger("apply.daterangepicker");
+      jQuery(this.displayFieldTarget).trigger("apply.daterangepicker");
     }
   }
 
   resetTimeZoneUI(e) {
     e && e.preventDefault()
 
-    $(this.currentTimeZoneWrapperTarget).removeClass('hidden')
-    $(this.timeZoneButtonsTarget).addClass('hidden')
+    this.currentTimeZoneWrapperTarget.classList.remove('hidden')
+    this.timeZoneButtonsTarget.classList.add('hidden')
 
     if (this.hasTimeZoneSelectWrapperTarget) {
-      $(this.timeZoneSelectWrapperTarget).addClass('hidden')
+      this.timeZoneSelectWrapperTarget.classList.add('hidden')
     }
   }
 
@@ -97,20 +112,26 @@ export default class extends Controller {
     // don't follow the anchor
     event.preventDefault()
     const currentTimeZoneEl = this.currentTimeZoneWrapperTarget.querySelector('a')
-    $(this.timeZoneFieldTarget).val(event.target.dataset.value)
-    $(currentTimeZoneEl).text(event.target.dataset.label)
-    $('.time-zone-button').removeClass('button').addClass('button-alternative')
-    $(event.target).removeClass('button-alternative').addClass('button')
+    if (this.hasTimeZoneFieldTarget) {
+      this.timeZoneFieldTarget.value = event.target.dataset.value
+    }
+    currentTimeZoneEl.textContent = event.target.dataset.label
+    this.element.querySelectorAll('.time-zone-button').forEach(el => {
+      el.classList.remove('button');
+      el.classList.add('button-alternative');
+    });
+    event.target.classList.remove('button-alternative')
+    event.target.classList.add('button')
     this.resetTimeZoneUI()
     if(!["", null].includes(this.fieldTarget.value)){
-      $(this.displayFieldTarget).trigger("apply.daterangepicker");
+      jQuery(this.displayFieldTarget).trigger("apply.daterangepicker");
     }
   }
 
   // triggered on selecting a new timezone from the timezone picker
   selectTimeZoneChange(event) {
     if(!["", null].includes(this.fieldTarget.value)){
-      $(this.displayFieldTarget).trigger("apply.daterangepicker");
+      jQuery(this.displayFieldTarget).trigger("apply.daterangepicker");
     }
   }
 
@@ -119,7 +140,7 @@ export default class extends Controller {
     event.preventDefault()
     this.resetTimeZoneUI()
     if(!["", null].includes(this.fieldTarget.value)){
-      $(this.displayFieldTarget).trigger("apply.daterangepicker")
+      jQuery(this.displayFieldTarget).trigger("apply.daterangepicker")
     }
   }
 
@@ -130,10 +151,10 @@ export default class extends Controller {
     if(momentParsed.isValid()){
       const momentVal = moment.tz(momentParsed.format("YYYY-MM-DDTHH:mm"), newTimeZone)
       const dataVal = this.includeTimeValue ? momentVal.toISOString(true) : momentVal.format('YYYY-MM-DD')
-      $(this.fieldTarget).val(dataVal)
+      this.fieldTarget.value = dataVal
     } else {
       // nullify field value when the display format is wrong
-      $(this.fieldTarget).val("")
+      this.fieldTarget.value = ''
     }
   }
 
@@ -142,7 +163,7 @@ export default class extends Controller {
     const isAmPm = this.isAmPmValue
     localeValues['format'] = this.includeTimeValue ? this.timeFormatValue : this.dateFormatValue
 
-    $(this.displayFieldTarget).daterangepicker({
+    jQuery(this.displayFieldTarget).daterangepicker({
       singleDatePicker: true,
       timePicker: this.includeTimeValue,
       timePickerIncrement: 5,
@@ -151,41 +172,59 @@ export default class extends Controller {
       timePicker24Hour: !isAmPm,
     })
 
-    $(this.displayFieldTarget).on('apply.daterangepicker', this.applyDateToField.bind(this))
-    $(this.displayFieldTarget).on('cancel.daterangepicker', this.clearDate.bind(this))
-    $(this.displayFieldTarget).on('input', this,this.displayFieldChange.bind(this));
+    jQuery(this.displayFieldTarget).on('apply.daterangepicker', this.applyDateToField.bind(this))
+    jQuery(this.displayFieldTarget).on('cancel.daterangepicker', this.clearDate.bind(this))
+    jQuery(this.displayFieldTarget).on('input', this,this.displayFieldChange.bind(this));
 
     this.pluginMainEl = this.displayFieldTarget
-    this.plugin = $(this.pluginMainEl).data('daterangepicker') // weird
+    this.plugin = jQuery(this.pluginMainEl).data('daterangepicker') // weird
 
     // Init time zone select
     if (this.includeTimeValue && this.hasTimeZoneSelectWrapperTarget) {
       this.timeZoneSelect = this.timeZoneSelectWrapperTarget.querySelector('select.select2')
 
-      $(this.timeZoneSelect).select2({
+      jQuery(this.timeZoneSelect).select2({
         width: 'style'
       })
 
       const self = this
 
-      $(this.timeZoneSelect).on('change.select2', function(event) {
+      jQuery(this.timeZoneSelect).on('change.select2', function(event) {
         const currentTimeZoneEl = self.currentTimeZoneWrapperTarget.querySelector('a')
         const {value} = event.target
-        $(self.timeZoneFieldTarget).val(value)
-        $(currentTimeZoneEl).text(value)
 
-        const selectedOptionTimeZoneButton = $('.selected-option-time-zone-button')
+        const selectedTimeZoneOption = event.target.options[event.target.options.selectedIndex]
 
-        if (self.defaultTimeZonesValue.includes(value)) {
-          $('.time-zone-button').removeClass('button').addClass('button-alternative')
-          selectedOptionTimeZoneButton.addClass('hidden').attr('hidden', true)
-          $(`a[data-value="${value}"`).removeClass('button-alternative').addClass('button')
+        if (self.hasTimeZoneFieldTarget) {
+          self.timeZoneFieldTarget.value = value
+        }
+        currentTimeZoneEl.textContent = selectedTimeZoneOption.textContent
+
+        const selectedOptionTimeZoneButton = self.element.querySelector('.selected-option-time-zone-button')
+
+        if (self.defaultTimeZonesValue.includes(selectedTimeZoneOption.textContent)) {
+          self.element.querySelectorAll('.time-zone-button').forEach(el => {
+            el.classList.remove('button');
+            el.classList.add('button-alternative');
+          })
+          selectedOptionTimeZoneButton.classList.add('hidden')
+          selectedOptionTimeZoneButton.hidden = true
+          self.element.querySelectorAll(`a[data-value="${value}"`).forEach(el => {
+            el.classList.remove('button-alternative')
+            el.classList.add('button')
+          })
         } else {
           // deselect any selected button
-          $('.time-zone-button').removeClass('button').addClass('button-alternative')
-          selectedOptionTimeZoneButton.text(value)
-          selectedOptionTimeZoneButton.attr('data-value', value).removeAttr('hidden')
-          selectedOptionTimeZoneButton.removeClass(['hidden', 'button-alternative']).addClass('button')
+          self.element.querySelectorAll('.time-zone-button').forEach(el => {
+            el.classList.remove('button');
+            el.classList.add('button-alternative');
+          })
+          selectedOptionTimeZoneButton.textContent = selectedTimeZoneOption.textContent
+          selectedOptionTimeZoneButton.setAttribute('data-value', value)
+          selectedOptionTimeZoneButton.hidden = false
+          selectedOptionTimeZoneButton.classList.remove('hidden')
+          selectedOptionTimeZoneButton.classList.remove('button-alternative')
+          selectedOptionTimeZoneButton.classList.add('button')
         }
 
         self.resetTimeZoneUI()
@@ -195,13 +234,13 @@ export default class extends Controller {
 
   teardownPluginInstance() {
     if (this.plugin === undefined) { return }
-    $(this.pluginMainEl).off('apply.daterangepicker')
-    $(this.pluginMainEl).off('cancel.daterangepicker')
+    jQuery(this.pluginMainEl).off('apply.daterangepicker')
+    jQuery(this.pluginMainEl).off('cancel.daterangepicker')
     // revert to original markup, remove any event listeners
     this.plugin.remove()
 
-    if (this.includeTimeValue) {
-      $(this.timeZoneSelect).select2('destroy');
+    if (this.includeTimeValue && this.hasTimeZoneSelectWrapperTarget) {
+      jQuery(this.timeZoneSelectTarget).select2('destroy');
     }
   }
 }

data/app/javascript/controllers/fields/super_select_controller.js

@@ -1,6 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 require("select2/dist/css/select2.min.css");
 import select2 from "select2";
+import jquery from "jquery";
 
 const select2SelectedPreviewSelector = ".select2-selection--single"
 const select2SearchInputFieldSelector = ".select2-search__field"
@@ -20,13 +21,16 @@ export default class extends Controller {
 
   initialize() {
     this.dispatchNativeEvent = this.dispatchNativeEvent.bind(this)
+    if (window.jQuery === undefined) {
+      window.jQuery = jquery
+    }
     if (!this.isSelect2LoadedOnWindowJquery) {
       select2()
     }
   }
 
   get isSelect2LoadedOnWindowJquery() {
-    return window?.$?.fn?.select2 !== undefined
+    return window?.jQuery?.fn?.select2 !== undefined
   }
 
   get optionsOverride() {
@@ -41,16 +45,18 @@ export default class extends Controller {
   }
 
   disconnect() {
-    this.teardownPluginInstance()
+    if (this.isSelect2LoadedOnWindowJquery) {
+      this.teardownPluginInstance()
+    }
   }
 
   cleanupBeforeInit() {
-    $(this.element).find('.select2-container--default').remove()
+    this.element.querySelectorAll('.select2-container--default').forEach(el => el.remove());
   }
 
   initPluginInstance() {
     let options = {
-      dropdownParent: $(this.element)
+      dropdownParent: jQuery(this.element)
     };
 
     if (!this.enableSearchValue) {
@@ -84,7 +90,7 @@ export default class extends Controller {
 
     this.cleanupBeforeInit() // in case improperly torn down
     this.pluginMainEl = this.selectTarget // required because this.selectTarget is unavailable on disconnect()
-    $(this.pluginMainEl).select2(options);
+    jQuery(this.pluginMainEl).select2(options);
 
     this.initReissuePluginEventsAsNativeEvents()
   }
@@ -96,11 +102,11 @@ export default class extends Controller {
     this.teardownPluginEventsAsNativeEvents()
     
     // revert to original markup, remove any event listeners
-    $(this.pluginMainEl).select2('destroy');
+    jQuery(this.pluginMainEl).select2('destroy');
   }
   
   open() {
-    $(this.pluginMainEl).select2('open')
+    jQuery(this.pluginMainEl).select2('open')
   }
   
   focusOnTextField(event) {
@@ -127,13 +133,13 @@ export default class extends Controller {
 
   initReissuePluginEventsAsNativeEvents() {
     this.constructor.jQueryEventsToReissue.forEach((eventName) => {
-      $(this.pluginMainEl).on(eventName, this.dispatchNativeEvent)
+      jQuery(this.pluginMainEl).on(eventName, this.dispatchNativeEvent)
     })
   }
   
   teardownPluginEventsAsNativeEvents() {
     this.constructor.jQueryEventsToReissue.forEach((eventName) => {
-      $(this.pluginMainEl).off(eventName)
+      jQuery(this.pluginMainEl).off(eventName)
     })
   }
   
@@ -144,12 +150,12 @@ export default class extends Controller {
 
   // https://stackoverflow.com/questions/29290389/select2-add-image-icon-to-option-dynamically
   formatState(opt) {
-    var imageUrl = $(opt.element).attr('data-image');
+    var imageUrl = opt.element?.dataset.image
     var imageHtml = "";
     if (imageUrl) {
       imageHtml = '<img src="' + imageUrl + '" /> ';
     }
-    return $('<span>' + imageHtml + sanitizeHTML(opt.text) + '</span>');
+    return jQuery('<span>' + imageHtml + sanitizeHTML(opt.text) + '</span>');
   }
 }
 
@@ -158,4 +164,4 @@ function sanitizeHTML(str) {
   return str.replace(/[^\w. ]/gi, function (c) {
     return '&#' + c.charCodeAt(0) + ';';
   });
-};
+};

data/lib/bullet_train/fields/version.rb

@@ -1,5 +1,5 @@
 module BulletTrain
   module Fields
-    VERSION = "1.6.37"
+    VERSION = "1.7.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bullet_train-fields
 version: !ruby/object:Gem::Version
-  version: 1.6.37
+  version: 1.7.0
 platform: ruby
 authors:
 - Andrew Culver
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-03-11 00:00:00.000000000 Z
+date: 2024-03-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: standard