matestack-ui-bootstrap 1.4.0

data/app/concepts/matestack/ui/bootstrap/content/figure.rb

@@ -0,0 +1,7 @@
+class Matestack::Ui::Bootstrap::Content::Figure < Matestack::Ui::Component
+
+  def response
+    # provide a bootstrap figure
+  end
+
+end

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

@@ -0,0 +1,90 @@
+class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::Core::Form::Checkbox::Checkbox
+
+  optional :form_text
+  optional :disabled
+  optional :variant
+
+  def response
+    if !checkbox_options.empty?
+      label for: attr_key,  class: "form-label", text: input_label if input_label
+    end
+    if !checkbox_options.empty?
+      multiple_checkboxes
+    else
+      true_false_checkbox
+    end
+    render_form_text
+  end
+
+  private
+
+  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 true_false_checkbox
+    checkbox_wrapper do
+      form_input type: :hidden, key: key, value: (false_value || 0), errors: false
+      input html_attributes.merge(
+        type: :checkbox,
+        id: "#{id_for_item(value)}",
+        name: item_name(key),
+        value: checked_value,
+        class: 'form-check-input',
+        disabled: disabled,
+        attributes: vue_attributes.merge(
+          ref: "input.#{attr_key}",
+        )
+      )
+      bootstrap_label text: input_label, for_input: id_for_item(value)
+      render_errors
+    end
+  end
+
+  def multiple_checkboxes
+    checkbox_options.to_a.each do |item|
+      checkbox_wrapper do
+        input html_attributes.merge(
+          type: :checkbox,
+          id: "#{id_for_item(item_value(item))}",
+          name: item_name(item),
+          value: item_value(item),
+          class: 'form-check-input',
+          disabled: disabled,
+          attributes: vue_attributes
+        )
+        bootstrap_label text: item_name(item), for_input: id_for_item(item_value(item))
+        render_errors if checkbox_options.to_a.last == item
+      end
+    end
+  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}" } 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
+
+end

data/app/concepts/matestack/ui/bootstrap/form/date.js

@@ -0,0 +1,38 @@
+const bootstrap = require('bootstrap')
+import flatpickr from "flatpickr";
+
+MatestackUiCore.Vue.component('matestack-ui-bootstrap-date', {
+  mixins: [MatestackUiCore.componentMixin],
+
+  data() {
+    return {};
+  },
+
+  methods: {
+
+  },
+
+  mounted: function() {
+    const self = this
+    let data = this.$parent.data;
+    flatpickr(this.$el.querySelector('.flatpickr'), {
+      defaultDate: this.componentConfig["init_value"],
+      enableTime: (this.componentConfig["enable_time"] == true)
+    });
+    for (let key in this.$refs) {
+      let initValue = this.$refs[key]["attributes"]["init-value"];
+
+      if (initValue) {
+        data[key.replace("input.", "")] = initValue["value"];
+      } else {
+        data[key.replace("input.", "")] = null;
+      }
+    }
+    this.$parent.data = data
+
+    //without the timeout it's somehow not working
+    setTimeout(function () {
+      self.$parent.data = data
+    }, 100);
+  }
+});

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

@@ -0,0 +1,98 @@
+class Matestack::Ui::Bootstrap::Form::Date <  Matestack::Ui::Core::Component::Dynamic
+
+  include Matestack::Ui::Core::Form::Utils
+  include Matestack::Ui::Core::Form::HasInputHtmlAttributes
+  include Matestack::Ui::Core::Form::HasErrors
+
+  requires :key
+  optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
+
+  optional :form_text
+  optional :disabled
+  optional :placeholder
+
+  optional :with_time
+
+  vue_js_component_name "matestack-ui-bootstrap-date"
+
+  def input_key
+    "$parent.data[\"#{key}\"]"
+  end
+
+  def error_key
+    "$parent.errors[\"#{key}\"]"
+  end
+
+  def setup
+    @component_config[:init_value] = init_value
+    @component_config[:with_time] = with_time
+  end
+
+  def response
+    div do
+      label for: attr_key,  class: "form-label", text: input_label if input_label
+      input html_attributes.merge(attributes: vue_attributes).merge(bootstrap_input_attributes)
+      render_errors
+      render_form_text if form_text
+    end
+  end
+
+  def vue_attributes
+    (options[:attributes] || {}).merge({
+      id: attr_key,
+      "@change": change_event,
+      ref: "input.#{attr_key}",
+      'init-value': init_value,
+      'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+      "aria-describedby": attr_key
+    }).merge({ "v-model": input_key })
+  end
+
+  def change_event
+    "$parent.inputChanged('#{attr_key}');".strip
+  end
+
+  def custom_options_validation
+    raise "included form config is missing, please add ':include' to parent form component" if @included_config.nil?
+  end
+
+  def attr_key
+    super
+  end
+
+  private
+
+  def parse_value(value)
+    if [true, false].include? value
+      value ? 1 : 0
+    else
+      return value
+    end
+  end
+
+  def bootstrap_input_attributes
+    {
+      class: (options[:class] || "") << (" form-control flatpickr"),
+      disabled: disabled
+    }
+  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}" } do
+        plain '{{ error }}'
+      end
+    end
+  end
+
+  def input_error_class
+    'is-invalid'
+  end
+
+  def render_form_text
+    div id: "form_text_for_#{attr_key}", class: "form-text" do
+      plain form_text
+    end
+  end
+
+end

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

@@ -0,0 +1,123 @@
+class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::Core::Form::Input::Input
+
+  optional :form_text
+  optional :disabled
+  optional :browse_button_text
+  optional :placeholder
+  optional :variant
+  optional :min
+  optional :max
+  optional :step
+  optional :show_value
+
+  def response
+    div do
+      label for: attr_key,  class: "form-label", text: input_label if input_label
+      case type
+      when :range
+        input html_attributes.merge(attributes: vue_attributes).merge(bootstrap_range_attributes)
+        if show_value
+          div id: attr_key, class: "form-text" do
+            plain "{{ data['#{attr_key}'] }}"
+          end
+        end
+      when :file
+        file_input
+      else
+        input html_attributes.merge(attributes: vue_attributes).merge(bootstrap_input_attributes)
+        render_errors
+      end
+      render_form_text if form_text
+    end
+  end
+
+  def vue_attributes
+    (options[:attributes] || {}).merge({
+      id: attr_key,
+      "@change": change_event,
+      ref: "input.#{attr_key}",
+      'init-value': init_value,
+      'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+      "aria-describedby": attr_key,
+      "step": "any"
+    }).merge(
+      type != :file ? { "#{v_model_type}": input_key } : {}
+    ) # file inputs are readonly, no v-model possible
+  end
+
+  def bootstrap_input_attributes
+    {
+      class: (options[:class] || "") << (" form-control"),
+      disabled: disabled
+    }
+  end
+
+  def bootstrap_range_attributes
+    {
+      class: (options[:class] || "") << (" form-range"),
+      disabled: disabled,
+      min: min,
+      max: max,
+      steps: step
+    }
+  end
+
+  def bootstrap_file_input_attributes
+    {
+      class: (options[:class] || "") << (" form-file-input"),
+      disabled: disabled
+    }
+  end
+
+  def form_file_wrapper_class
+    case variant
+    when :lg
+      (options[:class] || "") << (" form-file form-file-lg")
+    when :sm
+      (options[:class] || "") << (" form-file form-file-sm")
+    else
+      (options[:class] || "") << (" form-file")
+    end
+  end
+
+  def file_input
+    div class: form_file_wrapper_class do
+      input html_attributes.merge(attributes: vue_attributes).merge(bootstrap_file_input_attributes)
+      label class: "form-file-label", for: attr_key do
+        span class: "form-file-text", attributes: { "v-if": "data['#{attr_key}']" } do
+          if multiple
+            span attributes: { "v-for": "file in data['#{attr_key}']" } do
+              plain "{{ file['name'] }}"
+            end
+          else
+            plain "{{ data['#{attr_key}']['name'] }}"
+          end
+        end
+        span class: "form-file-text", attributes: { "v-if": "!data['#{attr_key}']" } do
+          plain placeholder || "Choose file"
+        end
+        span class: "form-file-button", text: browse_button_text || "Browse"
+      end
+      render_errors
+    end
+  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}" } do
+        plain '{{ error }}'
+      end
+    end
+  end
+
+  def input_error_class
+    'is-invalid'
+  end
+
+  def render_form_text
+    div id: "form_text_for_#{attr_key}", class: "form-text" do
+      plain form_text
+    end
+  end
+
+end

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

@@ -0,0 +1,65 @@
+class Matestack::Ui::Bootstrap::Form::Radio < Matestack::Ui::Core::Form::Radio::Radio
+
+  optional :form_text
+  optional :disabled
+  optional :variant
+
+  def response
+    label class: "form-label", text: input_label if input_label
+
+    radio_options.to_a.each_with_index do |item, index|
+      div class: "form-check #{'form-check-inline' if variant == :inline}" do
+        input html_attributes.merge(
+          attributes: vue_attributes,
+          type: :radio,
+          id: "#{id_for_item(item_value(item))}",
+          name: item_name(item),
+          value: item_value(item),
+          class: radio_class,
+          disabled: disabled
+        )
+        label class: "form-check-label", text: item_label(item), for: id_for_item(item_value(item))
+        if index == radio_options.to_a.size - 1
+          render_errors
+        end
+      end
+    end
+    render_form_text if form_text
+
+  end
+
+  def radio_class
+    (options[:class] || "") << (" form-check-input")
+  end
+
+  def vue_attributes
+    (options[:attributes] || {}).merge({
+      "@change": change_event,
+      ref: "select.#{attr_key}",
+      'init-value': init_value,
+      'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+      'value-type': value_type,
+      "#{v_model_type}": input_key,
+    })
+  end
+
+  def render_form_text
+    div id: "form_text_for_#{attr_key}", class: "form-text" do
+      plain form_text
+    end
+  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}" } do
+        plain '{{ error }}'
+      end
+    end
+  end
+
+  def input_error_class
+    'is-invalid'
+  end
+
+
+end

data/app/concepts/matestack/ui/bootstrap/form/select.haml

@@ -0,0 +1,11 @@
+- if input_label
+  %label{ for: attr_key,  class: "form-label" }= input_label
+
+%select{ html_attributes.merge(vue_attributes) }
+  - if placeholder
+    %option{value: placeholder_value, disabled: true, selected: init_value.nil?}= placeholder
+  - select_options.to_a.each do |item|
+    %option{value: item_value(item), disabled: item_disabled(item)}= item_label(item)
+= render_errors
+- if form_text
+  = render_form_text

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

@@ -0,0 +1,74 @@
+class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::Core::Form::Select::Select
+
+  optional :variant
+  optional :size
+  optional :form_text
+
+  def vue_attributes
+    (options[:attributes] || {}).merge({
+      "@change": change_event,
+      ref: vue_ref,
+      'init-value': determine_init_value,
+      'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+      'value-type': value_type,
+      'class': form_select_class,
+      'size': size_class,
+      'id': attr_key,
+      "#{v_model_type}": input_key,
+    })
+  end
+
+  def form_select_class
+    case variant
+    when :lg
+      (options[:class] || "") << (" form-select form-select-lg")
+    when :sm
+      (options[:class] || "") << (" form-select form-select-sm")
+    else
+      (options[:class] || "") << (" form-select")
+    end
+  end
+
+  def size_class
+    size
+  end
+
+  def determine_init_value
+    if init_value
+      init_value
+    else
+      if multiple
+        []
+      else
+        nil
+      end
+    end
+  end
+
+  def placeholder_value
+    if multiple
+      '[]'
+    else
+      'null'
+    end
+  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}" } do
+        plain '{{ error }}'
+      end
+    end
+  end
+
+  def input_error_class
+    'is-invalid'
+  end
+
+  def render_form_text
+    div id: "form_text_for_#{attr_key}", class: "form-text" do
+      plain form_text
+    end
+  end
+
+end