matestack-ui-bootstrap 1.5.1 → 3.0.0.rc1

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

data/app/concepts/matestack/ui/bootstrap/components/popover.js

@@ -1,26 +0,0 @@
-import * as bootstrap from 'bootstrap'
-
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-popover', {
-
-  mixins: [MatestackUiCore.componentMixin],
-  data() {
-    return {
-      popoverInstance: undefined
-
-    };
-  },
-  methods: {
-
-  },
-  mounted: function() {
-    const self = this;
-    var popover = self.$el
-    self.popoverInstance = new bootstrap.Popover(popover, {})
-  },
-  created: function() {
-  },
-
-  beforeDestroy: function() {
-
-  },
-});

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

@@ -1,48 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Scrollspy < Matestack::Ui::Component
-
-  requires :height
-  
-  optional :offset # pixel to offset from top, by default 10
-  optional method: { as: :bs_method} # find which section, by default auto
-  optional :target # scroll target id
-  optional class: { as: :bs_class} # adding custom class to scrollspy
-
-  def response
-    div scrollspy_attributes do
-      yield_components
-    end
-  end
-
-  protected
-
-  def scrollspy_attributes
-    attributes = {}.tap do |hash|
-      hash[:class] = scrollspy_classes
-      hash[:data] = { "bs-spy": "scroll", "bs-target": "#{target}" }
-      hash[:data].merge!("bs-offset": offset) if offset.present?
-      hash[:data].merge!("bs-method": :"#{bs_method}") if bs_method.present?
-      hash[:style] = "overflow-y: scroll; position: relative;"
-      hash[:style] << "height: #{parsed_height};"
-      hash[:tabindex] = 0
-    end
-    html_attributes.merge(
-      attributes
-    )
-  end
-
-  def parsed_height
-    if height.present?
-      if height.to_s.include?("px") || height.to_s.include?("em") || height.to_s.include?("rem")
-        height
-      else
-        "#{height}px"
-      end
-    end
-  end
-
-  def scrollspy_classes
-    [].tap do |classes|
-      classes << bs_class
-    end.join(' ').strip
-  end
-end

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

@@ -1,31 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::SectionCard < Matestack::Ui::Component
-
-  optional :id, :title, :subtitle, :icon, :slots, :content_padding
-
-  def response
-    section id: :id, class: "section-card rounded shadow-sm mb-4 bg-white" do
-      div class: "d-flex flex-row justify-content-between" do
-        if title.present? || subtitle.present?
-          div class: "section-card-heading p-4" do
-            heading size: 5, class: "mb-0" do
-              bs_icon name: icon, size: "35" if icon.present?
-              plain title
-            end
-            small class: "text-muted" do
-              plain subtitle
-            end
-          end
-        end
-        if slots.present? && slots[:actions].present?
-          div class: "section-card-actions p-4" do
-            slot slots[:actions]
-          end
-        end
-      end
-      div class: "section-card-content #{'p-4' unless content_padding == false} #{'pt-1' if title || subtitle}" do
-        yield_components
-      end
-    end
-  end
-
-end

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

@@ -1,31 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Spinner < Matestack::Ui::Component
-
-  optional class: { as: :bs_class }
-  optional :kind, :variant, :size, :sr_only
-
-  def response
-    div spinner_attributes do
-      span class: "visually-hidden", text: sr_only
-    end
-  end
-
-  protected
-
-  def spinner_attributes
-    html_attributes.merge(
-      class: spinner_class,
-      attributes: { 'role': "status" }
-    )
-  end
-
-  def spinner_class
-    [].tap do |classes|
-      spinner_kind = kind || :border
-      classes << "spinner-#{spinner_kind}"
-      classes << "text-#{variant || 'primary'}"
-      classes << "spinner-#{spinner_kind}-sm" if size
-      #optional classes
-      classes << bs_class
-    end.join(' ').strip
-  end
-end

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

@@ -1,83 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::TabNav < Matestack::Ui::Component
-
-  requires :id
-
-  optional  :items, :variant, :fill, :justified, :vertical, :vertical_up_to_sm,
-            :vertical_up_to_md, :vertical_up_to_xl, :horizontal,
-            class: { as: :bs_class }, attributes: { as: :bs_attrs}
-
-  def response
-    if items.present?
-      ul nav_attributes do
-        nav_items_partial
-      end
-    end
-    div class: "tab-content", id: "#{id}Content" do
-      yield_components
-    end
-  end
-
-  protected
-
-  def nav_items_partial
-    items.each do |item|
-      li class: "nav-item", attributes: { role: "presentation" } do
-        # '<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>'
-        link  class: "nav-link #{'active' if item[:active]}",
-              id: "tab-#{item[:id]}",
-              path: "#tab-#{item[:id]}-content",
-              attributes: {
-                role: "tab",
-                "aria-controls": "tab-#{item[:id]}",
-                "aria-selected": "#{'true' if item[:active]}",
-                "data-bs-toggle": "tab"
-              } do
-                bs_icon name: item[:icon], size: 20 if item[:icon]
-                span class: "#{'ps-3' if item[:icon]}", text: item[:text] if item[:text]
-              end
-      end
-    end
-  end
-
-  def link_attrs path, active, disabled, delay=nil
-    {}.tap do |hash|
-      hash[:class] = "nav-link #{'active' if path == request.fullpath } #{'disabled' if disabled}"
-
-      hash[:attributes] = {}.tap do |hash|
-        hash[:'aria-selected'] = path == request.fullpath ? 'true' : 'false'
-        hash[:'aria-current'] = 'page' if active == true
-        hash[:'aria-disabled'] = 'true' if disabled
-        hash[:role] = "tab" if toggle.present?
-        hash[:'aria-controls'] = "#{path.gsub('#','')}" if toggle.present?
-      end
-
-      hash[:data] = { "bs-toggle": "pill" } if pills
-      hash[:data] = { "bs-toggle": "tab" } if tabs
-      hash[:path] = path
-    end
-  end
-
-  def nav_attributes
-    html_attributes.merge(
-      id: id,
-      class: nav_classes,
-      attributes: { role: "tablist"}
-    )
-  end
-
-  def nav_classes
-    [].tap do |classes|
-      classes << 'nav'
-      classes << 'nav-tabs' if variant == :tabs || variant.nil?
-      classes << 'nav-pills' if variant == :pills
-      classes << 'nav-fill' if fill
-      classes << 'nav-justified' if justified
-      classes << 'flex-column' if vertical
-      classes << 'flex-column flex-sm-column flex-md-row' if vertical_up_to_sm
-      classes << 'flex-column flex-sm-column flex-md-column flex-lg-row' if vertical_up_to_md
-      classes << 'flex-column flex-sm-column flex-md-column flex-lg-column flex-xl-row' if vertical_up_to_xl
-      classes << "justify-content-#{horizontal}" if horizontal.present?
-      classes << bs_class
-    end.join(' ').strip
-  end
-end

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

@@ -1,32 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::TabNavContent < Matestack::Ui::Component
-
-  requires :id
-
-  optional :tabs, :pills, :active, class: { as: :bs_class }, attributes: { as: :bs_attrs}
-
-  def response
-    div tab_content_attributes do
-      yield_components
-    end
-  end
-
-  protected
-
-  def tab_content_attributes
-    html_attributes.merge(
-      id: "tab-#{id}-content",
-      class: tab_content_classes,
-      attributes: { role: "tabpanel", "aria-labelledby": "tab-#{id}" }
-    )
-  end
-
-  def tab_content_classes
-    [].tap do |classes|
-      classes << 'tab-pane'
-      classes << 'fade'
-      classes << 'show ' if active
-      classes << 'active' if active
-      classes << bs_class
-    end.join(' ').strip
-  end
-end

data/app/concepts/matestack/ui/bootstrap/components/toast.js

@@ -1,85 +0,0 @@
-import * as bootstrap from 'bootstrap'
-
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-toast', {
-
-  mixins: [MatestackUiCore.componentMixin],
-  data() {
-    return {
-      toastsInstance: undefined,
-      eventData: {},
-      showing: false,
-    };
-  },
-  methods: {
-    show: function(event){
-      const self = this;
-      if(this.componentConfig["autohide"]){
-        setTimeout(function () {
-          self.showing = false;
-        }, 5000);
-      }
-      if(this.componentConfig["delay"]){
-        setTimeout(function () {
-          self.showing = true;
-        }, parseInt(self.componentConfig["delay"]));
-      } else {
-        self.showing = true
-      }
-      this.eventData = event
-    },
-    hide: function(event){
-      const self = this;
-      this.showing = false
-      setTimeout(function () {
-        self.eventData = false;
-      }, 500);
-    },
-    dispose: function(){
-      const self = this;
-      self.toastsInstance.dispose()
-      self.toastsInstance = new bootstrap.Toast(self.$el)
-    }
-  },
-  mounted: function() {
-    const self = this;
-    var myToasts = self.$el
-    self.toastsInstance = new bootstrap.Toast(myToasts)
-  },
-  created: function() {
-    const self = this
-
-    if(this.componentConfig["show_on"] != undefined){
-      var show_events = this.componentConfig["show_on"].split(",")
-      show_events.forEach(show_event => MatestackUiCore.matestackEventHub.$on(show_event.trim(), self.show));
-    }
-
-    if(this.componentConfig["hide_on"] != undefined){
-      var show_events = this.componentConfig["hide_on"].split(",")
-      show_events.forEach(show_event => MatestackUiCore.matestackEventHub.$on(show_event.trim(), self.hide));
-    }
-
-    if(this.componentConfig["dispose_on"] != undefined){
-      var show_events = this.componentConfig["dispose_on"].split(",")
-      show_events.forEach(show_event => MatestackUiCore.matestackEventHub.$on(show_event.trim(), self.dispose));
-    }
-  },
-
-  beforeDestroy: function() {
-    const self = this
-    MatestackUiCore.matestackEventHub.$off(this.componentConfig["show_on"], self.show);
-    MatestackUiCore.matestackEventHub.$off(this.componentConfig["hide_on"], self.hide);
-    MatestackUiCore.matestackEventHub.$off(this.componentConfig["dispose_on"], self.hide);
-    if(this.componentConfig["show_on"] != undefined){
-      var shown_events = this.componentConfig["show_on"].split(",")
-      shown_events.forEach(show_event => MatestackUiCore.matestackEventHub.$off(show_event.trim(), self.show));
-    }
-    if(this.componentConfig["hide_on"] != undefined){
-      var hiden_events = this.componentConfig["hide_on"].split(",")
-      hiden_events.forEach(hide_event => MatestackUiCore.matestackEventHub.$off(hide_event.trim(), self.hide));
-    }
-    if(this.componentConfig["dispose_on"] != undefined){
-      var hiden_events = this.componentConfig["dispose_on"].split(",")
-      hiden_events.forEach(hide_event => MatestackUiCore.matestackEventHub.$off(hide_event.trim(), self.dispose));
-    }
-  },
-});

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

@@ -1,99 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Toast < Matestack::Ui::VueJsComponent
-  vue_js_component_name "matestack-ui-bootstrap-toast"
-
-  # header attributes, expects a hash or string
-  # possible keys `:icon_class, :icon, :title, :subtitle`
-  optional :header
-  # body expects a string as message inside toast
-  optional :body
-  # placement attributes, expects a hash wiht possible keys: position, min-height
-  optional :placement # for adding custom css style
-  optional :important, :delay, :autohide, :animation
-  optional class: { as: :bs_class }, attributes: { as: :bs_attrs }, data: { as: :bs_data }
-  optional :slots
-
-  def response
-    standard_placement_partial
-    # standard_placement_partial unless placement.present?
-    # custom_placement_partial if placement.present?
-  end
-
-  protected
-
-  def custom_placement_partial
-    div attributes: placement_attrs do
-      standard_placement_partial
-    end
-  end
-
-  def standard_placement_partial
-    div toast_attributes do
-      header_partial if header || slots && slots[:header]
-      body_partial
-    end
-  end
-
-  def header_partial
-    header = self.header.is_a?(Hash) ? self.header : { title: self.header }
-    div class: "toast-header" do
-      img class: "#{'rounded me-2' || header[:icon_class]}", path: header[:icon] if header[:icon].present?
-      strong class: "me-auto", text: header[:title] if header[:title].present?
-      small text: header[:subtitle] if header[:subtitle].present?
-
-      slot slots[:header] if slots && slots[:header]
-      bs_close dismiss: 'toast', class: "ms-2 mb-1", attributes: { "@click": "hide()"}
-    end
-
-  end
-
-  def body_partial
-    div class: "toast-body" do
-      plain body if body
-    end
-    unless header || slots && slots[:header]
-      bs_close dismiss: 'toast', class: "ms-auto me-2 btn-close-white", attributes: { "@click": "hide()"}
-    end
-  end
-
-  def toast_attributes
-    html_attributes.merge(
-      class: toast_classes,
-      attributes: toast_attrs,
-      data: toast_data
-    )
-  end
-
-  def toast_data
-    (bs_data || {}).tap do |hash|
-      hash["bs-delay"] = delay.nil? ? 5000 : delay
-      hash["bs-autohide"] = autohide.nil? ? "true" : "#{autohide}"
-      hash["bs-animation"] = animation.nil? ? "true" : "#{animation}"
-    end
-  end
-
-  def toast_attrs
-    (bs_attrs || {}).tap do |hash|
-      hash[:role] = (important == false ? 'status' : 'alert')
-      hash[:'aria-live'] = (important ? 'assertive' : 'polite') if important.present? && !placement.present?
-      hash[:'aria-live'] = 'assertive' unless important.present?
-      hash[:'aria-atomic'] = 'true' unless placement.present?
-      hash[:style] = "z-index: 10000; position: fixed; #{placement[:position] || 'top: 0; right: 0;' }"  if placement.present?
-      hash["v-bind:class"] = "{'show' : showing }"
-    end
-  end
-
-  def toast_classes
-    [].tap do |classes|
-      classes << 'toast p-0 fade d-flex align-items-center border-0'
-      classes << bs_class
-    end.join(' ').strip
-  end
-
-  def placement_attrs
-    {}.tap do |hash|
-      hash[:'aria-live'] = (important ? 'assertive' : 'polite') if important.present?
-      hash[:'aria-atomic'] = 'true'
-      hash[:style] = "position: relative; min-height: #{placement[:height]};"
-    end
-  end
-end

data/app/concepts/matestack/ui/bootstrap/form/checkbox.rb

@@ -1,99 +0,0 @@
-class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::Core::Form::Checkbox::Base
-
-  vue_js_component_name "matestack-ui-core-form-checkbox"
-
-  optional :form_text
-  optional :disabled
-  optional :variant
-
-  def response
-    div class: "matestack-ui-bootstrap-form-checkbox" do
-      label class: "form-label", text: input_label, for: attr_key if input_label && multiple?
-      render_options
-      render_errors
-      render_form_text unless form_text.nil? # otherwise renders empty div
-    end
-  end
-
-  private
-
-  def multiple?
-    options[:options].present?
-  end
-
-  def render_options
-    # multiple
-    if multiple?
-      options[:options].to_a.each do |item|
-        checkbox_wrapper do
-          input html_attributes.merge(
-            attributes: vue_attributes,
-            type: :checkbox,
-            id: "#{id_for_item(item_value(item))}",
-            name: item_name(item),
-            value: item_value(item),
-            class: 'form-check-input'
-          )
-          bootstrap_label text: item_name(item), for_input: id_for_item(item_value(item))
-        end
-      end
-    # checked/unchecked checkbox (true/false checkbox)
-    else
-      checkbox_wrapper do
-        input html_attributes.merge(
-          attributes: vue_attributes_for_single_input,
-          type: :hidden,
-          value: (false_value || 0),
-          class: 'form-check-input'
-        )
-
-        input html_attributes.merge(
-          attributes: vue_attributes_for_single_input,
-          type: :checkbox,
-          id: id_for_item(value),
-          value: checked_value,
-          class: 'form-check-input'
-        )
-
-        bootstrap_label text: input_label, for_input: id_for_item(value)
-      end
-    end
-  end
-
-  def checkbox_wrapper(options = {}, &block)
-    div class: "form-check #{'form-check-inline' if variant == :inline}", attributes: options[:attributes] do
-      yield
-    end
-  end
-
-  def bootstrap_label(text:, for_input:)
-    label text: text, for: for_input, class: 'form-check-label'
-  end
-
-  def render_errors
-    unless @included_config[:errors] == false && (errors == false || errors.nil?) || errors == false
-      div class: 'invalid-feedback', attributes: { 'v-for': "error in #{error_key}", style: "display: block;" } do
-        plain '{{ error }}'
-      end
-    end
-  end
-
-  def input_error_class
-    'is-invalid'
-  end
-
-  def checkbox_options
-    super || {}
-  end
-
-  def render_form_text
-    div id: "form_text_for_#{attr_key}", class: "form-text" do
-      plain form_text
-    end
-  end
-
-  def id_for_item(value)
-    "#{html_attributes[:id]}_#{value}_#{attr_key}"
-  end
-
-end