avo 2.26.1.pr1584.pre.1 → 2.26.3.pre.pr1601

data/lib/avo/concerns/has_fields.rb

@@ -264,6 +264,10 @@ module Avo
         panelfull_items = []
 
         items.each do |item|
+          if item.respond_to? :hydrate
+            item.hydrate(view: view)
+          end
+
           # fields and tabs can be hidden on some views
           if item.respond_to? :visible_on?
             next unless item.visible_on?(view)

data/lib/avo/concerns/visible_items.rb

@@ -13,6 +13,13 @@ module Avo
 
       def visible_items
         items
+          .map do |item|
+            if item.respond_to? :hydrate
+              item.hydrate(view: view)
+            end
+
+            item
+          end
           .map do |item|
             visible(item) ? item : nil
           end

data/lib/avo/engine.rb

@@ -54,6 +54,12 @@ module Avo
       # app.config.logger = ::Logger.new(STDOUT)
     end
 
+    initializer "avo.test_buddy" do |app|
+      if Avo::IN_DEVELOPMENT
+        Rails.autoloaders.main.push_dir Avo::Engine.root.join("spec", "helpers")
+      end
+    end
+
     config.app_middleware.use(
       Rack::Static,
       urls: ["/avo-assets"],

data/lib/avo/fields/tags_field.rb

@@ -5,6 +5,7 @@ module Avo
       attr_reader :close_on_select
       attr_reader :delimiters
       attr_reader :enforce_suggestions
+      attr_reader :mode
 
       def initialize(id, **args, &block)
         super(id, **args, &block)
@@ -15,6 +16,8 @@ module Avo
         add_array_prop args, :disallowed
         add_array_prop args, :delimiters, [","]
         add_array_prop args, :suggestions
+        add_string_prop args, :mode, nil
+        add_string_prop args, :fetch_values_from
       end
 
       def field_value
@@ -33,9 +36,16 @@ module Avo
 
       def fill_field(model, key, value, params)
         if acts_as_taggable_on.present?
-          model.send(act_as_taggable_attribute(key), parsed_value(value))
+          model.send(act_as_taggable_attribute(key), value)
         else
-          model.send("#{key}=", parsed_value(value))
+          val = if value.is_a?(String)
+            value.split(",")
+          elsif value.is_a?(Array)
+            value
+          else
+            value
+          end
+          model.send("#{key}=", val)
         end
 
         model
@@ -61,21 +71,18 @@ module Avo
         []
       end
 
-      private
-
-      def act_as_taggable_attribute(key)
-        "#{key.singularize}_list="
-      end
-
-      def parsed_value(value)
-        JSON.parse(value).pluck("value")
-      rescue
-        []
+      def fetch_values_from
+        if @fetch_values_from.respond_to?(:call)
+          Avo::Hosts::ResourceRecordHost.new(block: @fetch_values_from, resource: resource, record: model).handle
+        else
+          @fetch_values_from
+        end
       end
 
       private
 
-      def parse_suggestions_from_args(args)
+      def act_as_taggable_attribute(key)
+        "#{key.singularize}_list="
       end
     end
   end

data/lib/avo/services/uri_service.rb

@@ -3,13 +3,13 @@ module Avo
     class URIService
       class << self
         def parse(path)
-          self.new path
+          new path
         end
       end
 
       attr_reader :uri
 
-      def initialize(path = '')
+      def initialize(path = "")
         @uri = Addressable::URI.parse(path)
       end
 
@@ -56,19 +56,20 @@ module Avo
       private
 
       def join_paths(paths)
-        paths.map do |path|
-          sanitize_path path
-        end
-        .join("/")
+        paths
+          .map do |path|
+            sanitize_path path
+          end
+          .join("/")
       end
 
       # Removes the forward slash if it's present at the start of the path
       def sanitize_path(path)
-        if path.to_s.starts_with? '/'
-          path = path[1..-1]
+        if path.to_s.starts_with? "/"
+          path = path[1..]
         end
 
-        path
+        ERB::Util.url_encode path
       end
     end
   end

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "2.26.1.pr1584.pre.1" unless const_defined?(:VERSION)
+  VERSION = "2.26.3.pre.pr1601" unless const_defined?(:VERSION)
 end

data/public/avo-assets/avo.base.css

@@ -2677,7 +2677,8 @@ body.dark,body[data-theme=dark]{
 
 :root{
   --tagify-dd-color-primary:rgb(53,149,246);
-  --tagify-dd-bg-color:white
+  --tagify-dd-bg-color:white;
+  --tagify-dd-item-pad:.3em .5em
 }
 
 .tagify{
@@ -2685,6 +2686,7 @@ body.dark,body[data-theme=dark]{
   --tags-border-color:#DDD;
   --tags-hover-border-color:#CCC;
   --tags-focus-border-color:#3595f6;
+  --tag-border-radius:3px;
   --tag-bg:#E5E5E5;
   --tag-hover:#D3E2E2;
   --tag-text-color:black;
@@ -2705,10 +2707,9 @@ body.dark,body[data-theme=dark]{
   --placeholder-color-focus:rgba(0, 0, 0, 0.25);
   --loader-size:.8em;
   --readonly-striped:1;
-  display:flex;
+  display:inline-flex;
   align-items:flex-start;
   flex-wrap:wrap;
-  border:1px solid #ddd;
   border:1px solid var(--tags-border-color);
   padding:0;
   line-height:0;
@@ -2731,15 +2732,8 @@ body.dark,body[data-theme=dark]{
   }
 }
 
-.tagify:hover{
-  border-color:#ccc;
-  border-color:var(--tags-hover-border-color)
-}
-
-.tagify.tagify--focus{
-  transition:0s;
-  border-color:#3595f6;
-  border-color:var(--tags-focus-border-color)
+.tagify:hover:not(.tagify--focus):not(.tagify--invalid){
+  --tags-border-color:var(--tags-hover-border-color)
 }
 
 .tagify[disabled]{
@@ -2764,7 +2758,6 @@ body.dark,body[data-theme=dark]{
 }
 
 .tagify[disabled]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div,.tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div{
-  padding:.3em .5em;
   padding:var(--tag-pad)
 }
 
@@ -2799,6 +2792,7 @@ body.dark,body[data-theme=dark]{
   height:.7em;
   width:var(--loader-size);
   height:var(--loader-size);
+  min-width:0;
   border:3px solid;
   border-color:#eee #bbb #888 transparent;
   border-radius:50%;
@@ -2833,12 +2827,10 @@ body.dark,body[data-theme=dark]{
   vertical-align:top;
   box-sizing:border-box;
   max-width:100%;
-  padding:.3em .5em;
-  padding:var(--tag-pad,.3em .5em);
-  color:#000;
-  color:var(--tag-text-color,#000);
+  padding:var(--tag-pad);
+  color:var(--tag-text-color);
   line-height:inherit;
-  border-radius:3px;
+  border-radius:var(--tag-border-radius);
   white-space:nowrap;
   transition:.13s ease-out
 }
@@ -2849,10 +2841,8 @@ body.dark,body[data-theme=dark]{
   text-overflow:ellipsis;
   display:inline-block;
   vertical-align:top;
-  min-width:1ch;
-  max-width:auto;
-  min-width:var(--tag--min-width,1ch);
-  max-width:var(--tag--max-width,auto);
+  min-width:var(--tag--min-width);
+  max-width:var(--tag--max-width);
   transition:.8s ease,.1s color
 }
 
@@ -2870,25 +2860,17 @@ body.dark,body[data-theme=dark]{
   content:"";
   position:absolute;
   border-radius:inherit;
-  left:0;
-  top:0;
-  right:0;
-  bottom:0;
+  inset:var(--tag-bg-inset,0);
   z-index:-1;
   pointer-events:none;
   transition:120ms ease;
   animation:tags--bump .3s ease-out 1;
-  box-shadow:0 0 0 1.1em #e5e5e5 inset;
-  box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) var(--tag-bg,#e5e5e5) inset
+  box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-bg) inset
 }
 
 .tagify__tag:focus div::before,.tagify__tag:hover:not([readonly]) div::before{
-  top:-2px;
-  right:-2px;
-  bottom:-2px;
-  left:-2px;
-  box-shadow:0 0 0 1.1em #d3e2e2 inset;
-  box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) var(--tag-hover,#d3e2e2) inset
+  --tag-bg-inset:-2.5px;
+  --tag-bg:var(--tag-hover)
 }
 
 .tagify__tag--loading{
@@ -2908,6 +2890,7 @@ body.dark,body[data-theme=dark]{
   height:.7em;
   width:var(--loader-size);
   height:var(--loader-size);
+  min-width:0;
   border:3px solid;
   border-color:#eee #bbb #888 transparent;
   border-radius:50%;
@@ -2927,8 +2910,7 @@ body.dark,body[data-theme=dark]{
   margin-right:0;
   opacity:0;
   transform:scale(0);
-  transition:.3s;
-  transition:var(--tag-hide-transition,.3s);
+  transition:var(--tag-hide-transition);
   pointer-events:none
 }
 
@@ -2945,8 +2927,7 @@ body.dark,body[data-theme=dark]{
 }
 
 .tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before{
-  box-shadow:0 0 0 1.1em rgba(211,148,148,.5) inset!important;
-  box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) var(--tag-invalid-bg,rgba(211,148,148,.5)) inset!important;
+  --tag-bg:var(--tag-invalid-bg);
   transition:.2s
 }
 
@@ -2967,13 +2948,11 @@ body.dark,body[data-theme=dark]{
 }
 
 .tagify__tag--editable>div{
-  color:#000;
-  color:var(--tag-text-color--edit,#000)
+  color:var(--tag-text-color--edit)
 }
 
 .tagify__tag--editable>div::before{
-  box-shadow:0 0 0 2px #d3e2e2 inset!important;
-  box-shadow:0 0 0 2px var(--tag-hover,#d3e2e2) inset!important
+  box-shadow:0 0 0 2px var(--tag-hover) inset!important
 }
 
 .tagify__tag--editable>.tagify__tag__removeBtn{
@@ -2986,8 +2965,7 @@ body.dark,body[data-theme=dark]{
 }
 
 .tagify__tag--editable.tagify--invalid>div::before{
-  box-shadow:0 0 0 2px #d39494 inset!important;
-  box-shadow:0 0 0 2px var(--tag-invalid-color,#d39494) inset!important
+  box-shadow:0 0 0 2px var(--tag-invalid-color) inset!important
 }
 
 .tagify__tag__removeBtn{
@@ -2998,10 +2976,8 @@ body.dark,body[data-theme=dark]{
   border-radius:50px;
   cursor:pointer;
   font:14px/1 Arial;
-  background:0 0;
-  background:var(--tag-remove-btn-bg,none);
-  color:#000;
-  color:var(--tag-remove-btn-color,#000);
+  background:var(--tag-remove-btn-bg);
+  color:var(--tag-remove-btn-color);
   width:14px;
   height:14px;
   margin-right:4.6666666667px;
@@ -3017,8 +2993,7 @@ body.dark,body[data-theme=dark]{
 
 .tagify__tag__removeBtn:hover{
   color:#fff;
-  background:#c77777;
-  background:var(--tag-remove-btn-bg--hover,#c77777)
+  background:var(--tag-remove-btn-bg--hover)
 }
 
 .tagify__tag__removeBtn:hover+div>span{
@@ -3026,8 +3001,7 @@ body.dark,body[data-theme=dark]{
 }
 
 .tagify__tag__removeBtn:hover+div::before{
-  box-shadow:0 0 0 1.1em rgba(211,148,148,.3) inset!important;
-  box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) var(--tag-remove-bg,rgba(211,148,148,.3)) inset!important;
+  box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg,rgba(211,148,148,.3)) inset!important;
   transition:box-shadow .2s
 }
 
@@ -3045,16 +3019,18 @@ body.dark,body[data-theme=dark]{
   display:inline-block;
   min-width:110px;
   margin:5px;
-  padding:.3em .5em;
-  padding:var(--tag-pad,.3em .5em);
+  padding:var(--tag-pad);
   line-height:normal;
   position:relative;
   white-space:pre-wrap;
-  color:inherit;
-  color:var(--input-color,inherit);
+  color:var(--input-color);
   box-sizing:inherit
 }
 
+.tagify__input:empty::before{
+  position:static
+}
+
 .tagify__input:focus{
   outline:0
 }
@@ -3091,7 +3067,6 @@ body.dark,body[data-theme=dark]{
   line-height:1em;
   margin:auto 0;
   z-index:1;
-  color:rgba(0,0,0,.4);
   color:var(--placeholder-color);
   white-space:nowrap;
   pointer-events:none;
@@ -3102,8 +3077,13 @@ body.dark,body[data-theme=dark]{
 .tagify__input::after{
   content:attr(data-suggest);
   display:inline-block;
+  vertical-align:middle;
+  position:absolute;
+  min-width:calc(100% - 1.5em);
+  text-overflow:ellipsis;
+  overflow:hidden;
   white-space:pre;
-  color:#000;
+  color:var(--tag-text-color);
   opacity:.3;
   pointer-events:none;
   max-width:100px
@@ -3182,6 +3162,11 @@ body.dark,body[data-theme=dark]{
   display:inline-block
 }
 
+.tagify--focus{
+  --tags-border-color:var(--tags-focus-border-color);
+  transition:0s
+}
+
 .tagify--invalid{
   --tags-border-color:#D39494
 }
@@ -3215,11 +3200,11 @@ body.dark,body[data-theme=dark]{
 .tagify__dropdown__wrapper{
   max-height:300px;
   overflow:auto;
-  background:#fff;
+  overflow-x:hidden;
   background:var(--tagify-dd-bg-color);
-  border:1px solid #3595f6;
+  border:1px solid;
   border-color:var(--tagify-dd-color-primary);
-  border-bottom-width:1.33px;
+  border-bottom-width:1.5px;
   border-top-width:0;
   box-shadow:0 2px 4px -2px rgba(0,0,0,.2);
   transition:.25s cubic-bezier(0,1,.5,1)
@@ -3232,7 +3217,7 @@ body.dark,body[data-theme=dark]{
 .tagify__dropdown__footer{
   display:inline-block;
   margin-top:.5em;
-  padding:.3em .5em;
+  padding:var(--tagify-dd-item-pad);
   font-size:.7em;
   font-style:italic;
   opacity:.5
@@ -3252,17 +3237,18 @@ body.dark,body[data-theme=dark]{
 }
 
 .tagify__dropdown__item{
-  box-sizing:inherit;
-  padding:.3em .5em;
+  box-sizing:border-box;
+  padding:var(--tagify-dd-item-pad);
   margin:1px;
   cursor:pointer;
   border-radius:2px;
   position:relative;
-  outline:0
+  outline:0;
+  max-height:60px;
+  max-width:100%
 }
 
 .tagify__dropdown__item--active{
-  background:#3595f6;
   background:var(--tagify-dd-color-primary);
   color:#fff
 }
@@ -3271,6 +3257,22 @@ body.dark,body[data-theme=dark]{
   filter:brightness(105%)
 }
 
+.tagify__dropdown__item--hidden{
+  padding-top:0;
+  padding-bottom:0;
+  margin:0 1px;
+  pointer-events:none;
+  overflow:hidden;
+  max-height:0;
+  transition:var(--tagify-dd-item--hidden-duration,.3s)!important
+}
+
+.tagify__dropdown__item--hidden>*{
+  transform:translateY(-100%);
+  opacity:0;
+  transition:inherit
+}
+
 /*! tailwindcss v3.0.18 | MIT License | https://tailwindcss.com
  */
 
@@ -4645,6 +4647,11 @@ tags.tagify span.tagify__input{
     margin-bottom:0.25rem
   }
 
+tags.tagify span.tagify__input:after {
+      /* The loader is not centered by default. This will make it look better. */
+      margin-top: 0.25rem;
+    }
+
 tag.tagify__tag{
   margin-top:0.25rem;
   margin-bottom:0.25rem;
@@ -4653,6 +4660,12 @@ tag.tagify__tag{
   line-height:1.25rem
 }
 
+/* When the tags field is used to select just one value there's a weird ZeroWidthSpace (\u200B) character that breaks the vertical spacing. */
+
+[data-tags-field-mode-value="select"] tags.tagify {
+  height: 40px;
+}
+
 .spinner {
   width: 16px;
   height: 16px;