matestack-ui-bootstrap 1.5.1 → 2.0.0

data/app/concepts/matestack/ui/bootstrap/components/avatar.rb

@@ -1,27 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Avatar < Matestack::Ui::Component
-
-  optional :text, :bg_variant, :text_variant, :img_path, :size, class: { as: :bs_class }
-
-  def response
-    if text.present? && img_path.nil?
-      div class: "rounded-circle bg-#{bg_variant || 'primary'} text-#{text_variant || 'white'} text-center p-2 #{bs_class}",
-          attributes: { style: "height: #{height}px; width: #{width}px; display: inline-block;"} do
-        plain text
-      end
-    else
-      div class: "rounded-circle text-#{text_variant || 'white'} text-center p-2 #{bs_class}",
-          attributes: { style: "height: #{height}px; width: #{width}px; display: inline-block; background-image: url(#{img_path}); background-size: contain;"} do
-        plain text
-      end
-    end
-  end
-
-  def height
-    size || 40
-  end
-
-  def width
-    size || 40
-  end
-
-end

data/app/concepts/matestack/ui/bootstrap/components/badge.rb

@@ -1,30 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Badge < Matestack::Ui::Component
-
-  optional class: { as: :bs_class }
-  optional :text, :variant, :rounded, :visually_hidden
-
-  def response
-    span badge_attributes do
-      plain text if text
-      yield_components
-    end
-    span class: "visually-hidden", text: visually_hidden if visually_hidden.present?
-  end
-
-  protected
-
-  def badge_attributes
-    html_attributes.merge(
-      class: badge_classes
-    )
-  end
-
-  def badge_classes
-    [].tap do |classes|
-      classes << 'badge'
-      classes << (variant.present? ? "bg-#{variant}" : "bg-secondary")
-      classes << "rounded-pill" if rounded
-      classes << bs_class
-    end.join(' ').strip
-  end
-end

data/app/concepts/matestack/ui/bootstrap/components/button.rb

@@ -1,69 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Button < Matestack::Ui::Component
-
-  optional :text, :type, :variant, :size, :outline
-  optional attributes: { as: :bs_attrs }, class: { as: :bs_class }
-  optional transition: { as: :bs_btn_transition }
-  optional action: { as: :bs_btn_action }
-  optional onclick: { as: :bs_btn_onclick }
-  optional link: { as: :bs_btn_link }
-
-  def response
-    if bs_btn_transition.present? && bs_btn_transition.is_a?(Hash)
-      transition button_attributes.merge(bs_btn_transition.merge({attributes: { role: "button"} })) do
-        inner_response
-      end
-    elsif bs_btn_action.present? && bs_btn_action.is_a?(Hash)
-      action button_attributes.merge(bs_btn_action.merge({attributes: { role: "button"} })) do
-        inner_response
-      end
-    elsif bs_btn_onclick.present? && bs_btn_onclick.is_a?(Hash)
-      onclick button_attributes.merge(bs_btn_onclick.merge({attributes: { role: "button"} })) do
-        inner_response
-      end
-    elsif bs_btn_link.present? && bs_btn_link.is_a?(Hash)
-      link button_attributes.merge(bs_btn_link.merge({attributes: { role: "button"} })) do
-        inner_response
-      end
-    else
-      button_response
-    end
-  end
-
-  def button_response
-    button button_attributes do
-      inner_response
-    end
-  end
-
-  def inner_response
-    plain text if text
-    yield_components
-  end
-
-  protected
-
-  def button_attributes
-    html_attributes.merge(
-      type: type || 'button',
-      class: button_classes,
-      attributes: bs_attrs
-    )
-  end
-
-  def button_classes
-    [].tap do |classes|
-      classes << 'btn'
-      # btn variants outlined or solid background
-      if outline
-        classes << "btn-outline-#{variant.to_s.gsub('_', '-') || 'primary'}"
-      else
-        classes << (variant ? "btn-#{variant.to_s.gsub('_', '-')}" : 'btn-primary')
-      end
-      # btn size
-      classes << "btn-#{size}" if size
-      # custom classes
-      classes << bs_class
-    end.join(' ').strip
-  end
-
-end

data/app/concepts/matestack/ui/bootstrap/components/button_group.rb

@@ -1,36 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::ButtonGroup < Matestack::Ui::Component
-
-  optional class: { as: :bs_class }
-  optional label: { as: :bs_label }
-  optional :toolbar, :size, :vertical
-
-  def response 
-    div buttongroup_attributes do
-      yield_components
-    end
-  end
-
-  protected
-
-  def buttongroup_attributes
-    attributes = {}.tap do |hash|
-      hash[:class] = buttongroup_classes
-      hash[:attributes] = { 
-        role: "#{toolbar ? :toolbar : :group}", 
-        'aria-label': bs_label 
-      } 
-    end
-    html_attributes.merge(
-      attributes
-    )
-  end
-
-  def buttongroup_classes
-    [].tap do |classes|
-      classes << ("btn-#{toolbar ? :toolbar : :group}#{'-vertical' if vertical}")
-      classes << "btn-group-#{size}" if size.present?
-      classes << bs_class
-    end.join(' ').strip
-  end
-
-end

data/app/concepts/matestack/ui/bootstrap/components/card.rb

@@ -1,100 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Card < Matestack::Ui::Component
-
-  optional class: { as: :bs_class }
-
-  # header attributes, expects a hash or string
-  # possible keys `:class, :text`
-  optional :header
-  # footer attributes, expects a hash or string
-  # possible keys `:class, :text`
-  optional :footer
-
-  optional :title, :body, :subtitle # body attributes
-  optional :img_path, :img_pos, :alt_text # image attributes
-
-  optional :content_wrapper_class # class for content wrapper -> useful for content padding without affecting top image
-
-  optional :slots # passed in slots for card header or footer
-
-  def response
-    div card_attributes do
-      if header || slots && slots[:header]
-        header_partial
-      end
-
-      img_partial :top unless img_pos == :bottom
-      div class: content_wrapper_class do
-        body_partial if title || body || slots && slots[:body]
-
-        # custom body components
-        # needed a div otherwise it will be displayed below footer
-        div class: "p-3 pt-1" do yield_components end
-
-        img_partial :bottom if img_pos == :bottom
-
-        footer_partial if footer || slots && slots[:footer]
-      end
-    end
-  end
-
-  protected
-
-  def header_partial
-    header = self.header.is_a?(Hash) ? self.header : { text: self.header }
-    div class: "card-header #{header[:class]}" do
-      plain header[:text] if header[:text].present?
-      slot slots[:header] if slots && slots[:header]
-    end
-  end
-
-  def body_partial
-    div class: "card-body" do
-      # title
-      card_title(title, "card-title")
-      # subtitle
-      card_title(subtitle, 6, "card-subtitle text-muted")
-      # body
-      if body.is_a? Hash
-        paragraph class: "card-text #{body[:class]}", text: body[:text]
-      elsif body
-        paragraph class: "card-text", text: body
-      end
-      slot slots[:body] if slots && slots[:body]
-    end
-  end
-
-  def footer_partial
-    footer = self.footer.is_a?(Hash) ? self.footer : { text: self.footer }
-    div class: "card-footer #{footer[:class]}" do
-      plain footer[:text] if footer[:text].present?
-      slot slots[:footer] if slots && slots[:footer]
-    end
-  end
-
-  def img_partial pos
-    img class: "card-img-#{pos}", path: img_path, alt: alt_text if img_path.present?
-  end
-
-  def card_attributes
-    html_attributes.except(:title).merge(
-      class: card_classes
-    )
-  end
-
-  def card_classes
-    [].tap do |classes|
-      classes << 'card'
-      classes << bs_class
-    end.join(' ').strip
-  end
-
-  def card_title(options, default_size = 5, title_class)
-    if options.is_a? Hash
-      heading size: (options[:size] || default_size), class: "#{options[:class]} #{title_class}",
-        text: options[:text]
-    elsif options
-      heading size: default_size, class: title_class, text: options
-    end
-  end
-
-end

data/app/concepts/matestack/ui/bootstrap/components/carousel.rb

@@ -1,86 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Carousel < Matestack::Ui::VueJsComponent
-  vue_js_component_name "matestack-ui-bootstrap-carousel"
-
-  optional :start, :controls, :indicators, :fade, :interval, :variant
-  optional :items, class: { as: :bs_class }
-  # possible keys for items: path, title, text, interval
-  # event trigger
-  optional :cycle_on, :pause_on, :prev_on, :next_on
-
-  def setup
-    @component_config["carousel-id"] = carousel_id
-  end
-
-  def response
-    div carousel_attributes do
-      # carousel indicator
-      indicator_partial if indicators.present?
-      # carousel content
-      div class: "carousel-inner" do
-        yield_components
-        carousel_partial if items
-      end
-      controls_partial if controls
-    end
-  end
-
-  protected
-
-  def indicator_partial
-    ol class: "carousel-indicators" do
-      items.size.times do |index|
-        li data: { "bs-target": "##{carousel_id}", 'bs-slide-to': index },
-          class: "#{'active' if index == (start || 0) }"
-      end
-    end
-  end
-
-  def carousel_partial
-    items.each_with_index do |item, index|
-      div class: "carousel-item #{'active' if index == (start || 0) } #{item[:class]}".strip,
-        data: { "bs-interval": item[:interval] } do
-        img class: "d-block w-100", path: item[:path]
-        if item[:title] || item[:text]
-          div class: "carousel-caption d-none d-md-block #{item[:title_class]}" do
-            heading size: 5, text: item[:title]
-            paragraph text: item[:text]
-          end
-        end
-      end
-    end
-  end
-
-  def controls_partial
-    link class: "carousel-control-prev", data: { "bs-target": "##{carousel_id}", "bs-slide": :prev }, attributes: { 'role': "button" } do
-      span class: "carousel-control-prev-icon", attributes: { 'aria-hidden': "true" }
-      span class: "visually-hidden", text: "Previous"
-    end
-    link class: "carousel-control-next", data: { "bs-target": "##{carousel_id}", "bs-slide": :next }, attributes: { 'role': "button" } do
-      span class: "carousel-control-next-icon", attributes: { 'aria-hidden': "true" }
-      span class: "visually-hidden", text: "Next"
-    end
-  end
-
-  def carousel_attributes
-    html_attributes.merge(
-      id: carousel_id,
-      class: carousel_classes,
-      data: { "bs-ride": 'carousel', "bs-interval": (interval || 5000) }
-    )
-  end
-
-  def carousel_classes
-    [].tap do |classes|
-      classes << 'carousel slide'
-      classes << 'carousel-fade' if fade
-      classes << 'carousel-dark' if variant == :dark
-      #custom classes
-      classes << bs_class
-    end.join(' ').strip
-  end
-
-  def carousel_id
-    @carousel_id ||= "matestack-carousel-#{SecureRandom.hex}"
-  end
-
-end

data/app/concepts/matestack/ui/bootstrap/components/collapse.rb

@@ -1,43 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Collapse < Matestack::Ui::VueJsComponent
-  vue_js_component_name "matestack-ui-bootstrap-collapse"
-
-  optional :multi, :labelledby, :parent, class: { as: :bs_class }
-  optional :card # possible keys: class, text
-  # event trigger
-  optional :toggle_on, :show_on, :hide_on, :dispose_on
-
-  def response
-    div collapse_attributes do
-      card_partial if card
-      yield_components
-    end
-  end
-
-  protected
-
-  def card_partial
-    tmp_card = card.is_a?(Hash) ? self.card : { text: self.card }
-    div class: "card card-body #{tmp_card[:class]}".strip do
-      plain tmp_card[:text]
-    end
-  end
-
-  def collapse_attributes
-    html_attributes.merge(
-      class: collapse_classes,
-      data: { "bs-parent": parent },
-      attributes: { 'aria-labelledby': "#{labelledby}" }
-    )
-  end
-
-  def collapse_classes
-    [].tap do |classes|
-      classes << 'collapse'
-      # mulit target
-      classes << 'multi-collapse' if multi
-      #custom classes
-      classes << bs_class
-    end.join(' ').strip
-  end
-
-end

data/app/concepts/matestack/ui/bootstrap/components/icon.rb

@@ -1,19 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Icon < Matestack::Ui::Component
-
-  requires :name
-  optional :size
-  optional class: { as: :bs_class }
-
-  def response
-    plain " <svg class='bi #{bs_class}' width='#{get_size}' height='#{get_size}' fill='currentColor'>
-              <use xlink:href='#{image_url("icons/bootstrap-icons.svg")}##{name}'/>
-            </svg>".html_safe
-  end
-
-  def get_size
-    size || 20
-  end
-
-
-
-end

data/app/concepts/matestack/ui/bootstrap/components/modal.rb

@@ -1,106 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Modal < Matestack::Ui::VueJsComponent
-  vue_js_component_name 'matestack-ui-bootstrap-modal'
-
-  # header attributes, expects a hash or string
-  # possible keys `:class, :text, :size`
-  optional :header
-  # body attributes, expects a hash or string
-  # possible keys `:class, :text`
-  optional :body
-  # footer is a dismiss button, expects a hash or string for button text
-  # possible keys `:class, :text`
-  optional :footer
-  optional :fade, :size
-  optional :fullscreen # fullscreen attribute, expects boolean or bootstrap breakpoint
-  optional :static, :keyboard, :scrollable, :centered
-  optional :modal_dialog_class, class: { as: :bs_class }, id: { as: :bs_id }
-  # event trigger
-  optional :toggle_on, :show_on, :hide_on, :handle_update_on, :dispose_on
-
-  optional :slots
-
-  def response
-    div modal_attributes do
-      div class: dialog_classes do
-        div class: "modal-content" do
-          header_partial if header || (slots && slots[:header])
-          body_partial if body || slots && slots[:body]
-          footer_partial if footer || (slots && slots[:footer])
-          yield_components
-        end
-      end
-    end
-  end
-
-  protected
-
-  def header_partial
-    header = self.header.is_a?(Hash) ? self.header : { text: self.header }
-    div class: "modal-header" do
-      if slots && slots[:header]
-        slot slots[:header]
-      else
-        heading size: (header[:size] || 5), class: "modal-title #{header[:class]}", text: header[:text] if header[:text].present?
-        bs_close dismiss: 'modal'
-      end
-    end
-  end
-
-  def body_partial
-    body = self.body.is_a?(Hash) ? self.body : { text: self.body }
-    div class: "modal-body #{body[:class]}".strip do
-      if slots && slots[:body]
-        slot slots[:body]
-      else
-        plain body[:text] if body[:text].present?
-      end
-    end
-  end
-
-  def footer_partial
-    footer = self.footer.is_a?(Hash) ? self.footer : { text: self.footer }
-    div class: "modal-footer" do
-      slot slots[:footer] if slots && slots[:footer]
-      if footer[:text].present?
-        button class: "btn #{footer[:class].present? ? footer[:class] : 'btn-secondary'}",
-          data: { "bs-dismiss": 'modal' }, attributes: { type: 'button' },
-          text: footer[:text]
-      end
-    end
-  end
-
-  def modal_attributes
-    attributes = {}.tap do |hash|
-      hash[:class] = modal_classes
-      hash[:attributes] = { 'tabindex': "-1", 'aria-labelledby': "#{bs_id}Label", 'aria-hidden': "true" }
-      hash[:data] = {}.tap do |data|
-        data[:backdrop] = "static" if static
-        data[:keyboard] = "false" if keyboard
-      end
-    end
-    html_attributes.merge(
-      attributes
-    )
-  end
-
-  def modal_classes
-    [].tap do |classes|
-      classes << 'modal'
-      classes << 'fade' if fade || !fade.present?
-      classes << bs_class
-    end.join(' ').strip
-  end
-
-  def dialog_classes
-    [].tap do |classes|
-      classes << 'modal-dialog'
-      classes << 'modal-dialog-centered' if centered
-      classes << 'modal-dialog-scrollable' if scrollable
-      classes << "modal-#{size}" if size
-      if fullscreen.present?
-        classes << (fullscreen == true ? 'modal-fullscreen' : "modal-fullscreen-#{fullscreen}-down")
-      end
-      classes << modal_dialog_class
-    end.join(' ').strip
-  end
-end