Sha256: 587cd49fa47edf068846405a6c34af067cfcaa9038f9a5de049c27884d45e18c
Contents?: true
Size: 1.9 KB
Versions: 48
Compression:
Stored size: 1.9 KB
Contents
<%= render component_tag(x: {
data: "appColorPicker({selectedColor: '#{selected}'})",
":class": "colorWheel.show && 'picker-color-wheel-open'",
dimensions: "onResize"
}) do %>
<div class="picker-section picker-swatches-section">
<div class="picker-swatches" x-ref="swatches">
<% color_swatches.each do |swatch| %>
<%
color = swatch[:color].upcase
name = swatch[:name]
%>
<%= coco_tag(:button,
type: "button",
class: "picker-swatch",
style: "background-color: #{color};",
maxlength: 7,
data: {
color: color,
tippy: ("tooltip" if name),
tippy_content: (name if name),
role: "picker-swatch"
},
x: {
"@click": "setSelectedColor('#{color}')",
":class": "{'swatch-current': selectedColor == '#{color}'}"
}
) %>
<% end %>
</div>
</div>
<div class="picker-section picker-display-section" @color-wheel:toggle.stop="toggleColorWheel" x-ref="display">
<div class="picker-display" :class="invalid && 'picker-error'">
<span class="picker-display-color" :style="`background-color: ${selectedColor}`"></span>
<input type="text" class="picker-display-input" x-model="display" x-mask="#******">
</div>
<%= coco_button(
icon: :palette,
theme: :secondary,
tooltip: {
placement: "right",
content: "Open colour wheel"
},
x: {
"@click.prevent": "
toggleState('active');
$dispatch('color-wheel:toggle')
"
}
) do |button| %>
<% button.with_state(:active, tooltip: "Hide colour wheel") %>
<% end %>
</div>
<div class="picker-section picker-section-advanced" x-show="colorWheel.show" x-cloak>
<div class="picker-advanced">
<div x-ref="colorWheel"></div>
</div>
</div>
<% end %>
Version data entries
48 entries across 48 versions & 1 rubygems