activeadmin_addons 1.10.0 → 2.0.0.beta.2

data/app/javascript/activeadmin_addons/inputs/slim-select-tags.js

@@ -0,0 +1,28 @@
+const classes = ['tags-input'];
+
+// eslint-disable-next-line max-statements
+function settings(el) {
+  const isRelation = el.dataset.relation === 'true';
+  const collection = el.dataset.collection ? JSON.parse(el.dataset.collection) : null;
+
+  const parsedCollection = collection && collection.map((item) => {
+    const { id, ...rest } = item;
+
+    return { ...rest, value: id, selected: !!item.selected };
+  });
+
+  const events = {};
+  if (!isRelation) {
+    events.addable = (value) => value;
+  }
+
+  return {
+    data: parsedCollection,
+    events,
+  };
+}
+
+export {
+  settings,
+  classes,
+};

data/app/javascript/activeadmin_addons/inputs/slim-select-utils.js

@@ -0,0 +1,70 @@
+import merge from 'lodash.merge';
+
+function parseObjectToQuery(obj, prefix) {
+  let queryArray = [];
+  Object.keys(obj).forEach(key => {
+    const value = obj[key];
+    const prefixedKey = prefix ? `${prefix}[${key}]` : key;
+    if (Array.isArray(value)) {
+      value.forEach((v, i) => {
+        queryArray = [...queryArray, parseObjectToQuery(v, `${prefixedKey}[${i}]`)];
+      });
+    } else if (typeof value === 'object') {
+      queryArray = [...queryArray, parseObjectToQuery(value, prefixedKey)];
+    } else {
+      queryArray.push(`${prefixedKey}=${encodeURIComponent(value)}`);
+    }
+  });
+
+  return queryArray.join('&');
+}
+
+export function ransackSearch(search, currentData, settings) {
+  return new Promise((resolve, reject) => {
+    if (search.length < settings.minimumInputLength) {
+      reject(`Please enter ${settings.minimumInputLength} or more characters`);
+    }
+
+    const defaultQuery = {
+      order: settings.order,
+      q: {
+        groupings: [settings.textQuery],
+        combinator: 'and',
+      },
+    };
+
+    const finalQuery = merge({}, defaultQuery, settings.query);
+    const csrfTokenEl = document.querySelector('meta[name="csrf-token"]');
+    const csrfToken = csrfTokenEl ? csrfTokenEl.getAttribute('content') : null;
+
+    const queryString = parseObjectToQuery(finalQuery);
+    fetch(`${settings.url}?${queryString}`, {
+      method: 'GET',
+      headers: {
+        'X-CSRF-TOKEN': csrfToken,
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then((response) => response.json())
+      .then((res) => {
+        let data = res;
+        if (data.constructor === Object) {
+          data = data[settings.responseRoot];
+        }
+
+        const options = data.map(resource => {
+          if (!resource[settings.displayName]) {
+            resource[settings.displayName] = `No display name for id #${resource.id.toString()}`;
+          }
+
+          return {
+            value: resource.id,
+            text: resource[settings.displayName],
+          };
+        });
+
+        resolve(options);
+      });
+  });
+}

data/app/javascript/activeadmin_addons/inputs/slim-select.js

@@ -0,0 +1,93 @@
+import SlimSelect from 'slim-select';
+import merge from 'lodash.merge';
+
+import * as searchSelect from './slim-select-search';
+import * as simpleTagsSelect from './slim-select-simple-tags';
+import * as nestedSelect from './slim-select-nested';
+import * as selectedListSelect from './slim-select-selected-list';
+import * as tagsSelect from './slim-select-tags';
+
+const SELECT_CLASS = 'select:not(.default-select)';
+const SLIM_SELECT_CLASS = 'select.slim-select';
+
+const selectTypes = {
+  searchSelect,
+  simpleTagsSelect,
+  nestedSelect,
+  selectedListSelect,
+  tagsSelect,
+};
+
+// eslint-disable-next-line max-statements, complexity
+function setupSelect(el) {
+  let settings = {
+    select: el,
+    settings: {
+      allowDeselect: true,
+      placeholderText: 'Select Value',
+    },
+  };
+
+  const selectStyles = window.getComputedStyle(el);
+  el.style.width = el.dataset.width;
+  el.style.fontSize = selectStyles.fontSize;
+
+  const searchSelectFilter = el.closest('.filter_form_field');
+  if (searchSelectFilter) {
+    if (searchSelectFilter.classList.contains('search_select_filter') ||
+    searchSelectFilter.classList.contains('filter_string')) {
+      settings.settings.allowDeselect = false;
+    }
+
+    if (el.options.length > 0) {
+      el.style.width = el.dataset.width || selectStyles.width;
+      if (selectStyles.display === 'inline-block') {
+        el.style.display = 'inline-flex';
+      }
+    }
+  }
+
+  const emptyOption = el.querySelector('option[value=""]');
+  if (!emptyOption) {
+    el.insertAdjacentHTML('afterbegin', '<option value=""></option>');
+  }
+  el.querySelector('option[value=""]').dataset.placeholder = true;
+
+  Object.keys(selectTypes).forEach((type) => {
+    if (selectTypes[type].classes.some((className) => el.classList.contains(className))) {
+      settings = merge({}, settings, selectTypes[type].settings(el));
+      if (selectTypes[type].init) {
+        selectTypes[type].init(el);
+      }
+    }
+  });
+
+  // eslint-disable-next-line no-new
+  new SlimSelect(settings);
+}
+
+function initSelects(node = document) {
+  if (document.querySelector('body').dataset.defaultSelect === 'slim-select') {
+    node.querySelectorAll(SELECT_CLASS).forEach(setupSelect);
+  }
+
+  node.querySelectorAll(SLIM_SELECT_CLASS).forEach(setupSelect);
+}
+
+// mutation observer to add slim select to new elements
+const observer = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
+    if (mutation.type === 'childList') {
+      mutation.addedNodes.forEach((node) => {
+        if (node instanceof Element) {
+          initSelects(node);
+        }
+      });
+    }
+  });
+});
+
+window.addEventListener('load', () => {
+  initSelects();
+  observer.observe(document.querySelector('body'), { attributes: false, childList: true, subtree: true });
+});

data/app/{assets/stylesheets/activeadmin_addons → javascript/activeadmin_addons/stylesheets}/all.scss

@@ -1,20 +1,14 @@
-@import 'select2';
 @import 'imports/jquery-datepicker';
 @import 'vendor/palette-color-picker';
+@import 'imports/slimselect';
+
+$error-color: #932419;
 
 @import 'inputs/numeric-range-filter';
 @import 'inputs/date-time-picker-filter';
 @import 'inputs/color-picker';
 @import 'inputs/date-time-picker';
-@import 'inputs/select2';
 @import 'inputs/selected-list';
+@import 'inputs/slim-select';
 @import 'addons/toggle_bool';
 @import 'addons/interactive_select_tag';
-
-$error-color: #932419;
-
-li.error {
-  .select2-selection {
-    border-color: $error-color;
-  }
-}

data/app/javascript/activeadmin_addons/stylesheets/imports/slimselect.css

@@ -0,0 +1 @@
+:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-font-placeholder-color: #8d8d8d;--ss-disabled-color: #dcdee2;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-success-color: #00b755;--ss-error-color: #dc3545;--ss-main-height: 30px;--ss-content-height: 300px;--ss-spacing-l: 7px;--ss-spacing-m: 5px;--ss-spacing-s: 3px;--ss-animation-timing: 0.2s;--ss-border-radius: 4px}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-hide{display:none !important}.ss-main{display:flex;flex-direction:row;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing)}.ss-main:focus{box-shadow:0 0 5px var(--ss-primary-color)}.ss-main.ss-disabled{background-color:var(--ss-disabled-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-values{display:inline-flex;flex-wrap:wrap;gap:var(--ss-spacing-m);flex:1 1 100%}.ss-main .ss-values .ss-placeholder{display:flex;padding:var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);margin:auto 0px auto 0px;line-height:1em;align-items:center;width:100%;color:var(--ss-font-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-max{display:flex;user-select:none;align-items:center;width:fit-content;font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m);background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius)}.ss-main .ss-values .ss-single{display:flex;margin:auto 0px auto var(--ss-spacing-s)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);animation-name:ss-valueIn;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-values .ss-value.ss-value-out{animation-name:ss-valueOut;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m)}.ss-main .ss-values .ss-value .ss-value-delete{display:flex;align-items:center;height:var(--ss-spacing-l);width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color)}.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{display:flex;align-self:center;justify-content:flex-end;flex:0 1 auto;width:8px;height:8px;margin:0 var(--ss-spacing-m) 0 var(--ss-spacing-m)}.ss-main .ss-deselect svg{width:8px;height:8px}.ss-main .ss-deselect svg path{fill:none;stroke:var(--ss-font-color);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-arrow{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-main .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content{position:absolute;display:flex;height:auto;flex-direction:column;width:auto;max-height:var(--ss-content-height);box-sizing:border-box;border:solid 1px var(--ss-border-color);background-color:var(--ss-bg-color);transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);opacity:0;transform:scaleY(0);transform-origin:center top;overflow:hidden;z-index:10000}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-open-above{flex-direction:column-reverse;opacity:1;transform:scaleY(1);transform-origin:center bottom;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-open-below{opacity:1;transform:scaleY(1);transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;padding:var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;padding:var(--ss-spacing-m) var(--ss-spacing-l);margin:0;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;text-align:left;box-sizing:border-box}.ss-content .ss-search input::placeholder{color:var(--ss-font-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:0 0 5px var(--ss-primary-color)}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;flex:0 0 auto;height:auto;margin:0 0 0 var(--ss-spacing-m);border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius)}.ss-content .ss-search .ss-addable svg{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-content .ss-search .ss-addable svg path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list{flex:1 1 auto;height:auto;overflow-x:hidden;overflow-y:auto}.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-searching{color:var(--ss-font-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup.ss-close .ss-option{display:none !important}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text{flex:1 1 auto;font-weight:bold;color:var(--ss-font-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow){cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions{flex:0 1 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ss-spacing-m)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall{flex:0 0 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall:hover{opacity:.5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path{stroke:var(--ss-error-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span{flex:0 1 auto;display:flex;align-items:center;justify-content:center;font-size:60%;text-align:center;padding:0 var(--ss-spacing-s) 0 0}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg{flex:0 1 auto;width:13px;height:13px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path{fill:none;stroke:var(--ss-success-color);stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child{stroke-width:5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child{stroke-width:11}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable{flex:0 1 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow{flex:1 1 auto;width:10px;height:10px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content .ss-list .ss-optgroup .ss-option{padding:var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l)*3)}.ss-content .ss-list .ss-option{display:flex;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);color:var(--ss-font-color);cursor:pointer;user-select:none}.ss-content .ss-list .ss-option:hover{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-highlighted,.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;background-color:var(--ss-disabled-color)}.ss-content .ss-list .ss-option.ss-disabled:hover{color:var(--ss-font-color)}.ss-content .ss-list .ss-option .ss-search-highlight{background-color:var(--ss-highlight-color)}

data/app/{assets/stylesheets/activeadmin_addons → javascript/activeadmin_addons/stylesheets}/inputs/selected-list.scss

@@ -3,7 +3,6 @@ $selected-list-btn-hover-color: #333;
 
 .selected-list-container {
   display: inline-block;
-  width: 80%;
 
   .selected-item {
     height: 25px;

data/app/javascript/activeadmin_addons/stylesheets/inputs/slim-select.scss

@@ -0,0 +1,9 @@
+.ss-main {
+  width: auto;
+}
+
+li.error {
+  .ss-main {
+    border-color: $error-color;
+  }
+}

data/lib/activeadmin_addons/addons/image_builder.rb

@@ -3,22 +3,15 @@ module ActiveAdminAddons
     def render
       return nil if data.nil?
 
-      if Object.const_defined?('Paperclip::Attachment') && data.is_a?(Paperclip::Attachment)
-        paperclip_data
-      elsif Object.const_defined?('Shrine::UploadedFile') && data.is_a?(Shrine::UploadedFile)
+      if Object.const_defined?('Shrine::UploadedFile') && data.is_a?(Shrine::UploadedFile)
         shrine_data
       else
-        raise "you need to pass a paperclip or shrine image attribute"
+        raise "you need to pass a shrine image attribute"
       end
     end
 
     private
 
-    def paperclip_data
-      style = options.fetch(:style, :original)
-      context.image_tag(data.url(style)) if data.file?
-    end
-
     def shrine_data
       image_options = options[:image_options].presence || {}
       if options[:style] && derivatives.include?(options[:style])

data/lib/activeadmin_addons/addons/state_builder.rb

@@ -11,6 +11,7 @@ module ActiveAdminAddons
     def render
       raise "you need to install AASM gem first" unless defined? AASM
       raise "the #{attribute} is not an AASM state" unless state_attribute?
+
       context.status_tag(model.aasm(machine_name).human_state, class: status_class_for_model)
     end
 

data/lib/activeadmin_addons/addons/tag_builder.rb

@@ -1,13 +1,8 @@
 module ActiveAdminAddons
   class TagBuilder < CustomBuilder
     def render
-      @enum_attr = if enumerize_attr?
-                     :enumerize
-                   elsif rails_enum_attr?
-                     :enum
-                   end
+      raise "you need to pass an enum attribute" unless rails_enum_attr?
 
-      raise "you need to pass an enumerize or enum attribute" unless @enum_attr
       append_tag
     end
 
@@ -36,11 +31,7 @@ module ActiveAdminAddons
     end
 
     def display_data
-      if @enum_attr == :enumerize
-        data.text
-      else
-        EnumUtils.translate_enum_option(model.class, attribute.to_s, data)
-      end
+      EnumUtils.translate_enum_option(model.class, attribute.to_s, data)
     end
 
     def interactive_params(klass)
@@ -72,17 +63,7 @@ module ActiveAdminAddons
 
     def possible_values
       klass = model.class
-      if @enum_attr == :enumerize
-        klass.enumerized_attributes[attribute.to_s].values.map { |value| [value.capitalize, value] }
-      else
-        EnumUtils.options_for_select(klass, attribute.to_s)
-      end
-    end
-
-    def enumerize_attr?
-      data.is_a?("Enumerize::Value".constantize)
-    rescue NameError
-      false
+      EnumUtils.options_for_select(klass, attribute.to_s)
     end
 
     def rails_enum_attr?

data/lib/activeadmin_addons/engine.rb

@@ -1,18 +1,13 @@
 module ActiveAdminAddons
   module Rails
     class Engine < ::Rails::Engine
-      require 'sassc'
-      require 'sassc-rails'
       require "xdan-datetimepicker-rails"
       require "require_all"
-      require "active_material"
 
-      initializer "initialize addons" do |app|
+      initializer "initialize addons" do |_app|
         require_rel "support"
         require_rel "addons"
         require_rel "active_admin_config"
-        app.config.assets.precompile += %w(select.scss fileicons/*.png switches/switch_*.png
-                                           material/icons *.svg)
       end
     end
   end

data/lib/activeadmin_addons/support/custom_builder.rb

@@ -79,7 +79,7 @@ module ActiveAdminAddons
     end
 
     def has_label?
-      has_opts? ? args.length == 3 : args.length == 2
+      args.length == (has_opts? ? 3 : 2)
     end
 
     def has_opts?

data/lib/activeadmin_addons/support/input_base.rb

@@ -7,47 +7,5 @@ module ActiveAdminAddons
     include InputOptionsHandler
     include InputMethods
     include InputHtmlHelpers
-
-    def to_html
-      load_input_class
-      load_control_attributes
-      render_custom_input
-      if parts.any?
-        return input_wrapping { parts_to_html }
-      else
-        super
-      end
-    end
-
-    def input_html_options
-      # maxwidth and size are added by Formtastic::Inputs::StringInput
-      # but according to the HTML standard these are not valid attributes
-      # on the inputs provided by this module
-      super.except(:maxlength, :size).merge(control_attributes)
-    end
-
-    def parts_to_html
-      parts.flatten.join("\n").html_safe
-    end
-
-    def load_input_class
-      load_class(self.class.to_s.underscore.dasherize)
-    end
-
-    def load_control_attributes
-      # Override on child classes if needed
-    end
-
-    def render_custom_input
-      # Override on child classes if needed
-    end
-
-    def parts
-      @parts ||= []
-    end
-
-    def concat(part)
-      parts << part
-    end
   end
 end

data/lib/activeadmin_addons/support/input_helpers/filter_input_methods.rb

@@ -14,6 +14,7 @@ module ActiveAdminAddons
       end
 
       return unless result
+
       result.values.first.value
     end
 

data/lib/activeadmin_addons/support/input_helpers/input_html_helpers.rb

@@ -40,5 +40,47 @@ module ActiveAdminAddons
         value: value
       )
     end
+
+    def to_html
+      load_input_class
+      load_control_attributes
+      render_custom_input
+      if parts.any?
+        input_wrapping { parts_to_html }
+      else
+        super
+      end
+    end
+
+    def input_html_options
+      # maxwidth and size are added by Formtastic::Inputs::StringInput
+      # but according to the HTML standard these are not valid attributes
+      # on the inputs provided by this module
+      super.except(:maxlength, :size).merge(control_attributes)
+    end
+
+    def load_input_class
+      load_class(self.class.to_s.underscore.dasherize)
+    end
+
+    def load_control_attributes
+      # Override on child classes if needed
+    end
+
+    def render_custom_input
+      # Override on child classes if needed
+    end
+
+    def parts_to_html
+      parts.flatten.join("\n").html_safe # rubocop:disable Rails/OutputSafety
+    end
+
+    def concat(part)
+      parts << part
+    end
+
+    def parts
+      @parts ||= []
+    end
   end
 end

data/lib/activeadmin_addons/support/input_helpers/select_helpers.rb

@@ -14,7 +14,7 @@ module ActiveAdminAddons
     end
 
     def initial_collection_to_select_options
-      initial_options = [[nil]] # add blank option
+      initial_options = [] # add blank option
       selected = selected_item
 
       if selected
@@ -57,21 +57,19 @@ module ActiveAdminAddons
     end
 
     def selected_collection
-      @selected_collection ||= begin
-        if active_record_relation?(collection)
-          collection.model.where(id: input_value)
-        else
-          method_model.where(id: input_value)
-        end
-      end
+      @selected_collection ||= if active_record_relation?(collection)
+                                 collection.model.where(id: input_value)
+                               else
+                                 method_model.where(id: input_value)
+                               end
     end
 
     def selected_item
       @selected_item ||= begin
-                           input_association_value
-                         rescue NoMethodError
-                           selected_collection.first
-                         end
+        input_association_value
+      rescue NoMethodError
+        selected_collection.first
+      end
     end
 
     private

data/lib/activeadmin_addons/support/select_filter_input_extension.rb

@@ -14,6 +14,4 @@ module ActiveAdminAddons
   end
 end
 
-::ActiveAdmin::Inputs::Filters::SelectInput.send(
-  :prepend, ActiveAdminAddons::SelectFilterInputExtension
-)
+::ActiveAdmin::Inputs::Filters::SelectInput.prepend ActiveAdminAddons::SelectFilterInputExtension

data/lib/activeadmin_addons/support/select_input_base.rb

@@ -0,0 +1,11 @@
+require_relative "input_helpers/input_options_handler"
+require_relative "input_helpers/input_methods"
+require_relative "input_helpers/input_html_helpers"
+
+module ActiveAdminAddons
+  class SelectInputBase < Formtastic::Inputs::SelectInput
+    include InputOptionsHandler
+    include InputMethods
+    include InputHtmlHelpers
+  end
+end

data/lib/activeadmin_addons/version.rb

@@ -1,3 +1,3 @@
 module ActiveadminAddons
-  VERSION = "1.10.0"
+  VERSION = "2.0.0.beta.2"
 end

data/lib/activeadmin_addons.rb

@@ -4,17 +4,20 @@ module ActiveadminAddons
   attr_writer :default_select, :datetime_picker_default_options, :datetime_picker_input_format
 
   def default_select
-    return "select2" unless @default_select
+    return "slim-select" unless @default_select
+
     @default_select
   end
 
   def datetime_picker_default_options
     return {} unless @datetime_picker_default_options
+
     @datetime_picker_default_options
   end
 
   def datetime_picker_input_format
     return "%Y-%m-%d %H:%M" unless @datetime_picker_input_format
+
     @datetime_picker_input_format
   end
 

data/lib/generators/activeadmin_addons/install/install_generator.rb

@@ -11,7 +11,8 @@ module ActiveadminAddons
         if use_webpacker?
           generate "activeadmin_addons:webpacker"
         else
-          generate "activeadmin_addons:assets"
+          puts "ActiveAdmin Addons requires ActiveAdmin installed with webpacker. "\
+          "Please run 'rails generate active_admin:install --webpacker' and then 'rails generate activeadmin_addons:install'"
         end
       end
 

data/lib/generators/activeadmin_addons/install/templates/initializer.rb

@@ -1,9 +1,9 @@
 ActiveadminAddons.setup do |config|
   # Change to "default" if you want to use ActiveAdmin's default select control.
-  # config.default_select = "select2"
+  # config.default_select = "slim-select"
 
   # Set default options for DateTimePickerInput. The options you can provide are the same as in
-  # xdan's datetimepicker library (https://github.com/xdan/datetimepicker/tree/2.5.4). Yo need to
+  # xdan's datetimepicker library (https://github.com/xdan/datetimepicker/tree/2.5.4). You need to
   # pass a ruby hash, avoid camelCase keys. For example: use min_date instead of minDate key.
   # config.datetime_picker_default_options = {}
 

data/lib/generators/activeadmin_addons/webpacker/webpacker_generator.rb

@@ -11,20 +11,17 @@ module ActiveadminAddons
       def add_stylesheets
         file_path = 'app/javascript/stylesheets/active_admin.scss'
 
-        begin
-          prepend_file(file_path, css_assets)
-        end
+        prepend_file(file_path, css_assets)
       end
 
       def install_package
-        run "yarn add activeadmin_addons"
+        run "yarn add activeadmin_addons@beta"
       end
 
       private
 
       def js_assets
-        to_add = "import \"activeadmin_addons\"\n"
-        to_add
+        "import \"activeadmin_addons\"\n"
       end
 
       def css_assets