Vue-formulate: Hide repeatable group item's 'remove' button when they are within the 'minimum' prop

[titusdecali]

Since we now have the 'minimum' prop (thanks!), we should probably hide the 'remove' buttons on repeatable group items that are not actually removable. I tried to do this manually today while using minimum="1" with:

.formulate-input-group-repeatable-remove { &:first-child { display: none !important; } },

but for some reason wasn't able to get it to work based on how the code is currently set up.

[justin-schroeder]

You should be able to get rid of it with css easily, i was having an internal debate with myself about this before releasing 2.4.3 about what the default should be. On one hand it would be easy to literally remove v-if the buttons if it is at it's limit, but that makes it seem like they aren't removable at all when you're in that state, which isn't totally accurate, its just you can't have any fewer, so I thought it might make sense to grey them out with css, but that's also a bit subjective to what people have set up as their theme.

My last thought was to do something like a [data-can-remove] attribute on the remove...but then I know I'll have tailwind users asking for that knowledge to be class"able" which means the data needs to be available in the context object, which it's not...haha so I decided to ship 😉

But I'll leave this open because it is something we need to get to.

[hmaesta]

Leaving a little abstract idea...

<formulate-input type="group"
                 name="files"
                 :repeatable="true"
                 :minimum="3"
                 label="Files">

   <template v-slot:remove>
      <button v-show="files.length >= files.context.minimum">
         Remove this item
      </button>
   </template>

For disabled:

<button
   :disabled="files.length >= files.context.minimum ? false : true"

For class:

<button
   :class="[ files.length >= files.context.minimum ? 'opacity-100 cursor-pointer' : 'opacity-50 pointer-events-none cursor-not-allowed' ]"

[justin-schroeder]

Kinda low priority, but im putting it on the roadmap for 2.5.0 to solve this with the context object.

[justin-schroeder]

This is now resolved in the release/2.5.0 branch. a [data-is-disabled] attribute is applied to the remove button. In the default snow theme that will apply the styles:

[data-disabled] {
  opacity: .2;
  pointer-events: none;
}