Class: HakumiComponents::ColorPicker::Component

Inherits:
BaseComponent
  • Object
show all
Extended by:
T::Sig
Includes:
HakumiComponents::Concerns::FormField
Defined in:
app/components/hakumi_components/color_picker/component.rb

Constant Summary collapse

PresetHash = 
T.type_alias do
  T::Hash[T.any(Symbol, String), T.any(String, T::Array[String])]
end
PresetInput = 
T.type_alias do
  T.any(
    T::Array[String],
    T::Array[HakumiComponents::ColorPicker::PresetGroup],
    T::Array[PresetHash],
    T::Hash[Types::HtmlKey, T::Array[String]]
  )
end
TRIGGERS = 
T.let([ :click, :hover ].freeze, T::Array[Symbol])
FORMATS = 
T.let([ :hex, :rgb, :hsl, :hsb ].freeze, T::Array[Symbol])
DEFAULT_PRESET_COLORS = 
T.let(%w[#F5222D #FA541C #FA8C16 #FAAD14 #FADB14 #A0D911 #52C41A #13C2C2 #1677FF #2F54EB #722ED1 #EB2F96].freeze, T::Array[String])

Constants inherited from BaseComponent

BaseComponent::ControllerOptions, BaseComponent::DateInput, BaseComponent::DateLikeValue, BaseComponent::DimensionInput, BaseComponent::HtmlPayloadInput, BaseComponent::I18nOptionValue, BaseComponent::PresenceArray, BaseComponent::PresenceScalar, BaseComponent::PresenceValue, BaseComponent::RawHtmlInput, BaseComponent::SIZES, BaseComponent::SizeValue, BaseComponent::SymbolInput

Instance Method Summary collapse

Methods included from HakumiComponents::Concerns::FormField

#describedby_ids, #error?, #error_message, #form_field_caption, #form_field_contract, #form_field_errors, #form_field_html_options, #form_field_label, #form_field_name, #form_field_required, #form_field_rules, #form_field_standalone, #form_item_attributes, #form_item_classes, #input_id, #render_caption, #render_error, #render_explain, #render_label, #standalone?

Methods included from HakumiComponents::Concerns::FormFieldInterface

#form_field_contract

Methods inherited from BaseComponent

#append_data_token, boolean_html_param, #build_inline_style, cast_boolean, #cast_boolean, #class_names, #component_classes, #data_attributes_from, #dimension_to_css, #ensure_dom_id!, float_html_param, #generate_id, #html_classes, html_param, html_primitive_param, #html_style, #i18n_scope, integer_html_param, #merge_attributes, #render_value, #size_to_pixels, #stimulus_attrs, string_html_param, string_or_symbol_array_html_param, symbol_html_param, #t_default, #translate_with_default, #validate_inclusion!, #validate_required!, #value_present?

Constructor Details

#initialize(name: nil, label: nil, caption: nil, value: nil, default_value: nil, format: :hex, show_text: false, show_format_select: true, disabled: false, disabled_alpha: false, allow_clear: false, show_preset_colors: true, default_preset_label: nil, presets: [], size: :default, trigger: :click, placement: :bottom_left, standalone: true, errors: [], **html_options) ⇒ Component

Returns a new instance of Component.



51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
# File 'app/components/hakumi_components/color_picker/component.rb', line 51

def initialize(
  name: nil,
  label: nil,
  caption: nil,
  value: nil,
  default_value: nil,
  format: :hex,
  show_text: false,
  show_format_select: true,
  disabled: false,
  disabled_alpha: false,
  allow_clear: false,
  show_preset_colors: true,
  default_preset_label: nil,
  presets: [],
  size: :default,
  trigger: :click,
  placement: :bottom_left,
  standalone: true,
  errors: [],
  **html_options
)
  @name = T.let(name || generate_id("color_picker"), Types::FormFieldName)
  @label = T.let(label, T.nilable(String))
  @caption = T.let(caption, T.nilable(String))
  @value = T.let(value, T.nilable(String))
  @default_value = T.let(default_value || "#1677ff", String)
  @format = T.let(format, Symbol)
  @show_text = T.let(cast_boolean(show_text) ? true : false, T::Boolean)
  @show_format_select = T.let(cast_boolean(show_format_select) != false, T::Boolean)
  @disabled = T.let(cast_boolean(disabled) ? true : false, T::Boolean)
  @disabled_alpha = T.let(cast_boolean(disabled_alpha) ? true : false, T::Boolean)
  @allow_clear = T.let(cast_boolean(allow_clear) ? true : false, T::Boolean)
  @show_preset_colors = T.let(cast_boolean(show_preset_colors) != false, T::Boolean)
  @default_preset_label = T.let(default_preset_label || t_default(:default_preset_label, default: "Recommended"), String)
  @presets = T.let(normalize_presets(presets), T::Array[HakumiComponents::ColorPicker::PresetGroup])
  @size = T.let(size, Symbol)
  @trigger = T.let(trigger, Symbol)
  @placement = T.let(placement, Symbol)
  @standalone = T.let(cast_boolean(standalone) ? true : false, T::Boolean)
  @required = T.let(false, T::Boolean)
  @errors = T.let(errors, Types::FormFieldErrors)
  @html_options = T.let(html_options, Types::HtmlAttributes)
  initialize_form_field_contract!(
    name: @name,
    label: @label,
    caption: @caption,
    errors: @errors,
    standalone: @standalone,
    required: @required,
    html_options: @html_options
  )

  validate_props!
end

Instance Method Details

#all_preset_groups ⇒ Object 



167
168
169
 
# File 'app/components/hakumi_components/color_picker/component.rb', line 167

def all_preset_groups
  (default_presets + preset_groups).select(&:any_colors?)
end

#alpha_enabled? ⇒ Boolean

Returns:

  • (Boolean) 


177
178
179
 
# File 'app/components/hakumi_components/color_picker/component.rb', line 177

def alpha_enabled?
  !@disabled_alpha
end

#clearable? ⇒ Boolean

Returns:

  • (Boolean) 


192
193
194
 
# File 'app/components/hakumi_components/color_picker/component.rb', line 192

def clearable?
  @allow_clear && display_value.present?
end

#color_picker_disabled? ⇒ Boolean

Returns:

  • (Boolean) 


172
173
174
 
# File 'app/components/hakumi_components/color_picker/component.rb', line 172

def color_picker_disabled?
  @disabled
end

#current_format ⇒ Object 



197
198
199
 
# File 'app/components/hakumi_components/color_picker/component.rb', line 197

def current_format
  @format
end

#default_presets ⇒ Object 



154
155
156
157
158
159
160
161
162
163
164
 
# File 'app/components/hakumi_components/color_picker/component.rb', line 154

def default_presets
  return [] if @presets.any?
  return [] unless @show_preset_colors

  [
    HakumiComponents::ColorPicker::PresetGroup.new(
      label: @default_preset_label,
      colors: DEFAULT_PRESET_COLORS
    )
  ]
end

#display_value ⇒ Object 



139
140
141
 
# File 'app/components/hakumi_components/color_picker/component.rb', line 139

def display_value
  @value.presence || @default_value.presence || ""
end

#preset_groups ⇒ Object 



149
150
151
 
# File 'app/components/hakumi_components/color_picker/component.rb', line 149

def preset_groups
  @presets
end

#presets? ⇒ Boolean

Returns:

  • (Boolean) 


144
145
146
 
# File 'app/components/hakumi_components/color_picker/component.rb', line 144

def presets?
  @presets.any?
end

#show_format_select? ⇒ Boolean

Returns:

  • (Boolean) 


187
188
189
 
# File 'app/components/hakumi_components/color_picker/component.rb', line 187

def show_format_select?
  @show_format_select
end

#show_text? ⇒ Boolean

Returns:

  • (Boolean) 


182
183
184
 
# File 'app/components/hakumi_components/color_picker/component.rb', line 182

def show_text?
  @show_text
end

#trigger_size_class ⇒ Object 



130
131
132
133
134
135
136
 
# File 'app/components/hakumi_components/color_picker/component.rb', line 130

def trigger_size_class
  case @size
  when :small then "hakumi-color-picker-trigger-sm"
  when :large then "hakumi-color-picker-trigger-lg"
  else "hakumi-color-picker-trigger-md"
  end
end

#wrapper_attributes ⇒ Object 



108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
# File 'app/components/hakumi_components/color_picker/component.rb', line 108

def wrapper_attributes
  base_attrs = {
    class: wrapper_classes,
    data: {
      controller: "hakumi--color-picker",
      "hakumi--color-picker-format-value": current_format.to_s,
      "hakumi--color-picker-trigger-value": @trigger.to_s,
      "hakumi--color-picker-placement-value": @placement.to_s,
      "hakumi--color-picker-disabled-value": @disabled,
      "hakumi--color-picker-disabled-alpha-value": @disabled_alpha,
      "hakumi--color-picker-allow-clear-value": @allow_clear,
      "hakumi--color-picker-show-text-value": @show_text,
      "hakumi--color-picker-show-format-select-value": @show_format_select,
      "hakumi--color-picker-value-value": data_value(@value),
      "hakumi--color-picker-default-value-value": data_value(@default_value)
    }.compact
  }

  merge_attributes(base_attrs, @html_options.except(:class))
end