Bug slugify data attributes
serhiihiba opened this issue · 1 comments
serhiihiba commented
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
serhiijun commented
@camertron Purpose fix this in pull request #6