Bug slugify data attributes

[serhiihiba]

https://github.com/camertron/rux/blob/e77c509ba3c34762eb11d90bea1ad353e572ed62/lib/rux/default_tag_builder.rb#LL16C14-L16C14

Now Rux generates this, that's correct, we can see for example data-controller and data-action looks good

def call
    Rux.tag("div", { class: css_class, :"data-controller" => css_class }) {
      Rux.tag("div", { class: styles.nav_bar }) {
        Rux.create_buffer.tap { |_rux_buf_|
          _rux_buf_ << Rux.tag("div", { class: "#{styles.nav_item} #{styles.nav_item__logo}" })
          _rux_buf_ << Rux.tag("div", { class: styles.nav_item }) {
            Rux.create_buffer.tap { |_rux_buf_|
              _rux_buf_ << Rux.tag("div", { class: styles.btn, :"data-action" => "click->#{css_class}#handleLeftBtn" }) {
                "Left"
              }
              _rux_buf_ << Rux.tag("div", { class: "#{styles.btn} #{styles.btn_active}" }) {
                "Center"
              }
              _rux_buf_ << Rux.tag("div", { class: styles.btn }) {
                "Right"
              }
            }.to_s
          }
          _rux_buf_ << Rux.tag("div", { class: styles.nav_item })
        }.to_s
      }
    }
end

But when we got finally rendered HTML - it still will looks like this:

<div class="ui--mix--bar-component" data_controller="ui--mix--bar-component">
  <div class="nav-bar">
    <div class="nav-item nav-item-logo">
    </div>
    <div class="nav-item">
      <div class="nav-item-btn" data_action="click->ui--mix--bar-component#handleLeftBtn">
        Left
      </div>
      <div class="nav-item-btn nav-item-btn--active">
        Center
      </div>
      <div class="nav-item-btn">
        Right
      </div>
    </div>
    <div class="nav-item">
    </div>
  </div>
</div>

Where data_controller and data_action is still underscored instead of dashing

[serhiihiba]

@camertron Purpose fix this in pull request #6