Sha256: 4bdc90c81915093da357b55275a74d80dd842f009c248dea637915b7753d0041
Contents?: true
Size: 1.99 KB
Versions: 66
Compression:
Stored size: 1.99 KB
Contents
# frozen_string_literal: true
module Ariadne
# Bar used to show a progress in an activity, supports single bars or multiple bars within one component
# use aria-labelledby and aria-describedby to describe the progress bar's purpose
class ProgressBarComponent < Ariadne::Component
DEFAULT_TAGS = {
wrapper: :div,
item: :div,
}
DEFAULT_CLASSES = {
wrapper: "ariadne-flex ariadne-gap-1 ariadne-bg-slate-200 ariadne-rounded-md ariadne-overflow-hidden",
item: "",
}
DEFAULT_ATTRIBUTES = {
wrapper: {
role: "progressbar",
"data-controller": "accumulator",
"aria-valuenow": 0,
},
item: { "data-accumulator-target": "sum" },
}
BAR_SIZES = {
sm: "ariadne-h-2",
md: "ariadne-h-3",
lg: "ariadne-h-4",
}
renders_many :items, lambda { |tag: DEFAULT_TAGS[:item], classes: "", value: 0, attributes: {}|
Ariadne::BaseComponent.new(
tag: check_incoming_tag(DEFAULT_TAGS[:item], tag),
classes: merge_class_names(DEFAULT_CLASSES[:item], BAR_SIZES[@size], classes),
attributes: DEFAULT_ATTRIBUTES[:item].merge({
style: "width: #{(value - @min).to_f / (@max - @min) * 100}%",
"data-value": value,
}).merge(attributes),
)
}
# @example Default
#
# <%= render(Ariadne::ProgressBarComponent.new) { "Example" } %>
#
# @param tag [Symbol, String] The rendered tag name.
# @param classes [String] <%= link_to_classes_docs %>
# @param attributes [Hash] <%= link_to_attributes_docs %>
def initialize(tag: DEFAULT_TAGS[:wrapper], min: 0, max: 100, classes: "", size: :md, attributes: {})
@tag = check_incoming_tag(DEFAULT_TAGS[:wrapper], tag)
@classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
@min = min
@max = max
@size = size
@attributes = DEFAULT_ATTRIBUTES[:wrapper].merge({
"aria-valuemin": @min,
"aria-valuemax": @max,
}).merge(attributes)
end
end
end
Version data entries
66 entries across 66 versions & 1 rubygems