activeadmin_addons 1.10.2 → 2.0.0.beta.0

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

@@ -0,0 +1,75 @@
+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
+function setupSelect(el) {
+  const emptyOption = el.querySelector('option[value=""]');
+  if (!emptyOption) {
+    el.insertAdjacentHTML('afterbegin', '<option value=""></option>');
+  }
+  el.querySelector('option[value=""]').dataset.placeholder = true;
+
+  el.style.width = el.dataset.width;
+  let settings = {
+    select: el,
+    settings: {
+      allowDeselect: true,
+      placeholderText: 'Select Value',
+    },
+  };
+
+  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);
+      }
+    }
+  });
+
+  const slim = new SlimSelect(settings);
+  el.dataset.slimSelectId = slim.settings.id;
+}
+
+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 'jquery-datetimepicker/build/jquery.datetimepicker.min.css';
 @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/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|
         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/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

data/lib/activeadmin_addons/version.rb

@@ -1,3 +1,3 @@
 module ActiveadminAddons
-  VERSION = "1.10.2"
+  VERSION = "2.0.0.beta.0"
 end

data/lib/activeadmin_addons.rb

@@ -4,7 +4,7 @@ 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
 

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,6 +1,6 @@
 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

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

@@ -17,7 +17,7 @@ module ActiveadminAddons
       end
 
       def install_package
-        run "yarn add activeadmin_addons"
+        run "yarn add activeadmin_addons@beta"
       end
 
       private