matestack-ui-bootstrap 1.4.0 → 2.1.0

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

@@ -1,71 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Chart < Matestack::Ui::VueJsComponent
-  vue_js_component_name "matestack-ui-bootstrap-chart"
-
-  requires :type
-  requires :datasets
-  optional :labels
-  optional :height
-  optional :width
-  optional :display_legend
-  optional :display_x_axes
-  optional :display_y_axes
-  optional :cutout_percentage
-  optional class: { as: :bs_class }
-
-  def setup
-    @component_config[:type] = type
-    @component_config[:datasets] = datasets
-    @component_config[:labels] = labels
-    @component_config[:display_legend] = !display_legend.nil? ? display_legend : false
-    @component_config[:display_x_axes] = !display_x_axes.nil? ? display_x_axes : true
-    @component_config[:display_y_axes] = !display_y_axes.nil? ? display_y_axes : true
-    @component_config[:display_y_axes] = !display_y_axes.nil? ? display_y_axes : true
-    @component_config[:cutout_percentage] = !cutout_percentage.nil? ? cutout_percentage : 70
-  end
-
-  def response
-    div class: "chart-container #{bs_class}", attributes: { style: "width: 100%; height: 100%;" } do
-      plain "<canvas ref='chart'></canvas>".html_safe
-    end
-  end
-
-end
-
-# chart class: "w-50", type: :bar, datasets: [
-#   {
-#     label: "€",
-#     data: [total, last_7_days, last_30_days],
-#     backgroundColor: :primary
-#   },
-# ], labels: ["total", "last 7 days", "last 30 days"]
-
-# chart type: :doughnut, datasets: [
-#   {
-#     label: "€",
-#     data: [total, last_7_days, last_30_days],
-#     backgroundColor: [:orange, :secondary, :primary]
-#   },
-# ], labels: ["total", "last 7 days", "last 30 days"]
-
-# chart type: :line, datasets: [
-#   {
-#     label: "€",
-#     data: [total, last_7_days, last_30_days],
-#     borderColor: :primary,
-#     pointRadius: 0
-#   },
-#   {
-#     label: "€",
-#     data: [last_7_days, total, last_30_days],
-#     borderColor: :danger,
-#     fill: false
-#   },
-# ], labels: ["total", "last 7 days", "last 30 days"], display_x_axes: false, display_y_axes: false
-
-# chart type: :pie, datasets: [
-#   {
-#     label: "€",
-#     data: [total, last_7_days, last_30_days],
-#     backgroundColor: [:orange, :secondary, :primary]
-#   },
-# ], labels: ["total", "last 7 days", "last 30 days"]

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: { 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/list_group.rb

@@ -1,83 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::ListGroup < Matestack::Ui::Component
-  html_attributes :role
-
-  #  optional :id 
-  optional :items 
-  optional :horizontal, :horizontal_size, :checkbox
-  optional :flush, :tablist, class: { as: :bs_class }
-
-
-  def response 
-    ul list_group_attributes do
-      yield_components unless items
-      list_partial if items
-    end
-  end
-
-  protected
-
-  def list_partial
-    items.each do |item|
-      case item[:type]        
-      when :link 
-        link link_attrs(item)  do
-          plain item[:text]
-        end
-      when :transition 
-        transition link_attrs(item)  do
-          plain item[:text]
-        end
-      when :label 
-        label id: item[:id], class: "#{list_classes item, false}" do
-          input class: "form-check-input me-1", attributes: { 'type': "checkbox", 'value': "" } if checkbox
-          plain item[:text]
-        end
-      else
-        li id: item[:id], class: "#{list_classes item, false}" do
-          input class: "form-check-input me-1", attributes: { 'type': "checkbox", 'value': "", 'aria-label': "#{item[:text]}" } if checkbox
-          plain item[:text]
-        end
-      end
-    end
-  end
-
-  def list_group_attributes
-    attributes = {}.tap do |hash|
-      hash[:class] = list_group_classes
-      hash[:attributes] = { role: "tablist" } if tablist
-    end
-    html_attributes.merge(
-      attributes
-    )
-  end
-
-  def list_group_classes
-    [].tap do |classes|
-      classes << 'list-group'
-      classes << (horizontal_size.present? ? "list-group-horizontal-#{horizontal_size}": "list-group-horizontal") if horizontal
-      classes << 'list-group-flush' if flush
-      classes << bs_class
-    end.join(' ').strip
-  end
-
-  def link_attrs(item)
-    {}.tap do |hash|
-      hash[:id] = item[:id]
-      hash[:class] = "#{list_classes item, true}"
-      hash[:data] = { toggle: "list" } if tablist
-      hash[:attributes] = { 'aria-controls': "#{id}", role: "tab" } if tablist
-      hash[:path] = item[:path]
-    end
-  end
-
-  def list_classes(item, action)
-    [].tap do |classes|
-      classes << 'list-group-item'
-      classes << 'list-group-item-action' if action
-      classes << "list-group-item-#{item[:variant]}" if item[:variant].present?
-      classes << 'active' if item[:active]
-      classes << item[:class]
-    end.join(' ').strip
-  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: { 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

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

@@ -1,120 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
-
-  POS_ATTRIBUTES = %i[fixed_top fixed_bottom sticky_top]
-  optional *POS_ATTRIBUTES
-
-  optional class: { as: :bs_class }
-  optional :items, :items_class, :theme, :hide_at, :color, :container_size
-  optional :collapse_class
-  # brand expect hash or string, possible keys for hash: text, path, img
-  optional :brand
-  # toogle expect hash or a symbol (:left or :right),
-  # possible keys for hash: position, class
-  optional :toggle
-
-  def prepare
-    @toggle = self.toggle.is_a?(Hash) ? self.toggle : { position: self.toggle }
-  end
-
-  def response
-    nav navbar_attributes do
-      bs_container size: "#{container_size.present? ? container_size : "fluid" }" do
-        # custom elements for navbar
-        if options[:slots] && options[:slots][:custom_items]
-          slot options[:slots][:custom_items]
-        else
-          toggle_button if @toggle[:position] == :left
-          brand_partial
-          toggle_button if !@toggle[:position].present? || @toggle[:position] == :right
-          navbar_content_partial
-        end
-      end
-    end
-  end
-
-  protected
-
-  def brand_partial
-    brand = self.brand.is_a?(Hash) ? self.brand : { text: self.brand }
-    path = brand[:path].present? ? brand[:path] : "/"
-    link class: "navbar-brand", path: path do
-      img height: 40, path: brand[:img], attributes: { loading: "lazy" } if brand[:img].present?
-      plain brand[:text]
-    end
-  end
-
-  def navbar_content_partial
-    div class: "collapse navbar-collapse #{collapse_class}", id: 'matestackNavbarContent' do
-      ul class: items_classes do
-        items.each do |item|
-          li class: "nav-item" do
-            if item[:type] == :link
-              link class: "nav-link", path: item[:path] do
-                bs_icon name: item[:icon], size: 20 if item[:icon]
-                span class: "ps-3", text: item[:text] if item[:text]
-              end
-            else
-              transition class: "nav-link", path: item[:path], delay: item[:delay] do
-                bs_icon name: item[:icon], size: 20 if item[:icon]
-                span class: "ps-3", text: item[:text] if item[:text]
-              end
-            end
-          end
-        end
-      end
-      yield_components
-    end
-  end
-
-  def navbar_attributes
-    html_attributes.merge(
-      class: navbar_classes
-    )
-  end
-
-  def navbar_classes
-    [].tap do |classes|
-      classes << "navbar"
-      POS_ATTRIBUTES.each do |pos|
-        classes << "#{pos}".gsub('_','-') if self.send("#{pos}")
-      end
-      classes << "navbar-expand-#{ (hide_at.present? ? hide_at : "lg") }"
-      classes << "navbar-#{theme}" if  theme.present?
-      classes << (color.present? ? "bg-#{color}" : "bg-#{theme}") if theme || color
-      classes << bs_class
-    end.join(' ').strip
-  end
-
-  def toggle_button
-    button toggle_attributes do
-      bs_icon name: "list", size: 25, class: "text-muted"
-    end
-    # button toggle_attributes do
-    #   span class: "navbar-toggler-icon"
-    # end
-  end
-
-  def toggle_attributes
-    toggle_classes = [].tap do |classes|
-      classes << 'd-lg-none'
-      classes << 'btn btn-link'
-      classes << "ms-auto" if @toggle[:position] == :right
-      classes << "me-auto" if @toggle[:position] == :left
-      classes << @toggle[:class] if @toggle[:class]
-    end.join(' ').strip
-
-    {}.tap do |hash|
-      hash[:class] = toggle_classes
-      hash[:data] = { toggle: 'collapse', target: '#matestackNavbarContent' }
-      hash[:attributes] = { 'aria-controls': 'matestackNavbarContent', 'aria-expanded': 'false', 'aria-label': 'Toggle navigation' }
-    end
-  end
-
-  def items_classes
-    [].tap do |classes|
-      classes << 'navbar-nav'
-      classes << (items_class.present? ? items_class : "ms-auto mb-2 mb-lg-0")
-      # classes << "ms-auto" unless items_class.present?
-    end.join(' ').strip
-  end
-end