TahaSh / swapy

✨ A framework-agnostic tool that converts any layout into a drag-to-swap one with just a few lines of code https://swapy.tahazsh.com/
MIT License
5.86k stars 114 forks source link

Deep override #4

Closed fecony closed 2 months ago

fecony commented 2 months ago

No matter how deep DOM is, they all get swapy attributes I have a case of showing blocks with background with style attribute that just gets overwriten by swapy

Screenshot 2024-07-22 at 00 53 29

https://github.com/user-attachments/assets/315332c0-47e5-4366-9516-9e967466bc5d

code like this

<div
      className="item"
      data-swapy-item={itemId}
    >
      <div>
        <span>
          <span>
            <span>
              <span>
                <span
                  className="w-8 h-8 rounded-md bg-slate-50 inline-block"
                  style={{
                    backgroundColor: colour,
                  }}
                ></span>
              </span>
            </span>
          </span>
          {/* {colour} */}
        </span>
      </div>
    </div>

is same as this for swapy

    <div className="item" data-swapy-item={itemId}>
      <div>
        <span
          className="w-8 h-8 rounded-md bg-slate-50 inline-block"
          style={{
            backgroundColor: colour,
          }}
        ></span>
      </div>
    </div>
TahaSh commented 2 months ago

@fecony Good catch! I will fix the styling override issue. However, please note that using Swapy attributes (which are actually from Veloxi) on any nested element is expected. Other than the styling override, this shouldn't be a problem. Thank you for reporting this!

TahaSh commented 2 months ago

@fecony This should now be fixed in v0.1.0. Let me know if you have any questions!

fecony commented 2 months ago

@fecony This should now be fixed in v0.1.0.

Perfect! 2024-07-28 16 58 50