matestack-ui-bootstrap 1.5.1 → 3.0.0.rc1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (112) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE +17 -5
  3. data/README.md +36 -60
  4. data/lib/matestack/ui/bootstrap/base_component.rb +11 -0
  5. data/lib/matestack/ui/bootstrap/base_vue_js_component.rb +11 -0
  6. data/{app/concepts → lib}/matestack/ui/bootstrap/components/accordion.rb +18 -16
  7. data/lib/matestack/ui/bootstrap/components/alert.js +58 -0
  8. data/lib/matestack/ui/bootstrap/components/alert.rb +43 -0
  9. data/lib/matestack/ui/bootstrap/components/avatar.rb +27 -0
  10. data/lib/matestack/ui/bootstrap/components/badge.rb +32 -0
  11. data/{app/concepts → lib}/matestack/ui/bootstrap/components/breadcrumb.rb +12 -10
  12. data/lib/matestack/ui/bootstrap/components/button.rb +71 -0
  13. data/lib/matestack/ui/bootstrap/components/button_group.rb +36 -0
  14. data/lib/matestack/ui/bootstrap/components/card.rb +105 -0
  15. data/lib/matestack/ui/bootstrap/components/carousel.js +84 -0
  16. data/lib/matestack/ui/bootstrap/components/carousel.rb +103 -0
  17. data/{app/concepts → lib}/matestack/ui/bootstrap/components/close.rb +10 -9
  18. data/lib/matestack/ui/bootstrap/components/collapse.js +89 -0
  19. data/lib/matestack/ui/bootstrap/components/collapse.rb +54 -0
  20. data/lib/matestack/ui/bootstrap/components/dropdown.js +19 -0
  21. data/{app/concepts → lib}/matestack/ui/bootstrap/components/dropdown.rb +29 -25
  22. data/lib/matestack/ui/bootstrap/components/icon.rb +21 -0
  23. data/{app/concepts → lib}/matestack/ui/bootstrap/components/list_group.rb +32 -29
  24. data/{app/concepts → lib}/matestack/ui/bootstrap/components/modal.js +32 -28
  25. data/lib/matestack/ui/bootstrap/components/modal.rb +121 -0
  26. data/{app/concepts → lib}/matestack/ui/bootstrap/components/navbar.rb +39 -30
  27. data/{app/concepts → lib}/matestack/ui/bootstrap/components/page_heading.rb +7 -5
  28. data/{app/concepts → lib}/matestack/ui/bootstrap/components/pagination.rb +11 -9
  29. data/lib/matestack/ui/bootstrap/components/popover.js +30 -0
  30. data/{app/concepts → lib}/matestack/ui/bootstrap/components/popover.rb +25 -21
  31. data/{app/concepts → lib}/matestack/ui/bootstrap/components/progress.rb +19 -19
  32. data/lib/matestack/ui/bootstrap/components/scrollspy.rb +50 -0
  33. data/lib/matestack/ui/bootstrap/components/section_card.rb +33 -0
  34. data/lib/matestack/ui/bootstrap/components/spinner.rb +35 -0
  35. data/lib/matestack/ui/bootstrap/components/tab_nav.rb +79 -0
  36. data/lib/matestack/ui/bootstrap/components/tab_nav_content.rb +35 -0
  37. data/lib/matestack/ui/bootstrap/components/toast.js +89 -0
  38. data/lib/matestack/ui/bootstrap/components/toast.rb +113 -0
  39. data/{app/concepts → lib}/matestack/ui/bootstrap/components/tooltip.js +9 -6
  40. data/{app/concepts → lib}/matestack/ui/bootstrap/components/tooltip.rb +20 -18
  41. data/{app/concepts → lib}/matestack/ui/bootstrap/content/figure.rb +4 -2
  42. data/{app/concepts → lib}/matestack/ui/bootstrap/content/smart_collection/collection.rb +22 -16
  43. data/{app/concepts → lib}/matestack/ui/bootstrap/content/smart_collection/collection.scss +0 -0
  44. data/{app/concepts → lib}/matestack/ui/bootstrap/content/smart_collection/content.rb +38 -21
  45. data/{app/concepts → lib}/matestack/ui/bootstrap/content/smart_collection/filter.rb +6 -2
  46. data/{app/concepts → lib}/matestack/ui/bootstrap/content/smart_collection/paginate.rb +16 -11
  47. data/lib/matestack/ui/bootstrap/form/checkbox.rb +88 -0
  48. data/lib/matestack/ui/bootstrap/form/input.rb +116 -0
  49. data/lib/matestack/ui/bootstrap/form/radio.rb +55 -0
  50. data/{app/concepts → lib}/matestack/ui/bootstrap/form/select.rb +18 -10
  51. data/lib/matestack/ui/bootstrap/form/submit.rb +20 -0
  52. data/lib/matestack/ui/bootstrap/form/switch.rb +30 -0
  53. data/lib/matestack/ui/bootstrap/form/textarea.rb +47 -0
  54. data/lib/matestack/ui/bootstrap/index.js +40 -0
  55. data/lib/matestack/ui/bootstrap/initialize.rb +3 -0
  56. data/lib/matestack/ui/bootstrap/layout/column.rb +49 -0
  57. data/{app/concepts → lib}/matestack/ui/bootstrap/layout/container.rb +12 -9
  58. data/lib/matestack/ui/bootstrap/layout/row.rb +25 -0
  59. data/{app/concepts → lib}/matestack/ui/bootstrap/layout/sidebar.js +10 -6
  60. data/lib/matestack/ui/bootstrap/layout/sidebar.rb +43 -0
  61. data/{app/concepts → lib}/matestack/ui/bootstrap/layout/sidebar.scss +0 -0
  62. data/{app/concepts/matestack/ui/bootstrap/apps → lib/matestack/ui/bootstrap/layouts}/admin_template.rb +18 -13
  63. data/lib/matestack/ui/bootstrap/registry.rb +173 -0
  64. data/{app/javascript/matestack-ui-bootstrap → lib/matestack/ui/bootstrap}/stylesheets/matestack-ui-bootstrap.scss +0 -0
  65. data/lib/matestack/ui/bootstrap/version.rb +1 -1
  66. data/lib/matestack/ui/bootstrap.rb +99 -17
  67. metadata +85 -80
  68. data/app/assets/images/avatar-placeholder.png +0 -0
  69. data/app/assets/images/icons/bootstrap-icons.svg +0 -1
  70. data/app/concepts/matestack/ui/bootstrap/components/alert.js +0 -53
  71. data/app/concepts/matestack/ui/bootstrap/components/alert.rb +0 -34
  72. data/app/concepts/matestack/ui/bootstrap/components/avatar.rb +0 -27
  73. data/app/concepts/matestack/ui/bootstrap/components/badge.rb +0 -30
  74. data/app/concepts/matestack/ui/bootstrap/components/button.rb +0 -69
  75. data/app/concepts/matestack/ui/bootstrap/components/button_group.rb +0 -36
  76. data/app/concepts/matestack/ui/bootstrap/components/card.rb +0 -100
  77. data/app/concepts/matestack/ui/bootstrap/components/carousel.js +0 -79
  78. data/app/concepts/matestack/ui/bootstrap/components/carousel.rb +0 -86
  79. data/app/concepts/matestack/ui/bootstrap/components/collapse.js +0 -84
  80. data/app/concepts/matestack/ui/bootstrap/components/collapse.rb +0 -43
  81. data/app/concepts/matestack/ui/bootstrap/components/dropdown.js +0 -14
  82. data/app/concepts/matestack/ui/bootstrap/components/icon.rb +0 -19
  83. data/app/concepts/matestack/ui/bootstrap/components/modal.rb +0 -106
  84. data/app/concepts/matestack/ui/bootstrap/components/popover.js +0 -26
  85. data/app/concepts/matestack/ui/bootstrap/components/scrollspy.rb +0 -48
  86. data/app/concepts/matestack/ui/bootstrap/components/section_card.rb +0 -31
  87. data/app/concepts/matestack/ui/bootstrap/components/spinner.rb +0 -31
  88. data/app/concepts/matestack/ui/bootstrap/components/tab_nav.rb +0 -83
  89. data/app/concepts/matestack/ui/bootstrap/components/tab_nav_content.rb +0 -32
  90. data/app/concepts/matestack/ui/bootstrap/components/toast.js +0 -85
  91. data/app/concepts/matestack/ui/bootstrap/components/toast.rb +0 -99
  92. data/app/concepts/matestack/ui/bootstrap/form/checkbox.rb +0 -99
  93. data/app/concepts/matestack/ui/bootstrap/form/input.rb +0 -112
  94. data/app/concepts/matestack/ui/bootstrap/form/radio.rb +0 -57
  95. data/app/concepts/matestack/ui/bootstrap/form/submit.rb +0 -21
  96. data/app/concepts/matestack/ui/bootstrap/form/switch.rb +0 -99
  97. data/app/concepts/matestack/ui/bootstrap/layout/column.rb +0 -47
  98. data/app/concepts/matestack/ui/bootstrap/layout/row.rb +0 -15
  99. data/app/concepts/matestack/ui/bootstrap/layout/sidebar.rb +0 -45
  100. data/app/concepts/matestack/ui/bootstrap/pages/devise/sign_in.rb +0 -40
  101. data/app/concepts/matestack/ui/bootstrap/registry.rb +0 -61
  102. data/app/helpers/matestack/ui/bootstrap/application_helper.rb +0 -17
  103. data/app/javascript/matestack-ui-bootstrap/index.js +0 -24
  104. data/app/javascript/packs/matestack-ui-bootstrap.js +0 -2
  105. data/app/matestack/bootstrap/form/submit.rb +0 -20
  106. data/config/routes.rb +0 -2
  107. data/config/webpack/development.js +0 -5
  108. data/config/webpack/environment.js +0 -29
  109. data/config/webpack/production.js +0 -33
  110. data/config/webpack/test.js +0 -5
  111. data/config/webpacker.yml +0 -96
  112. data/lib/matestack/ui/bootstrap/engine.rb +0 -26
@@ -1,5 +1,7 @@
1
- class Matestack::Ui::Bootstrap::Components::Popover < Matestack::Ui::VueJsComponent
2
- vue_js_component_name "matestack-ui-bootstrap-popover"
1
+ require_relative "../base_vue_js_component"
2
+
3
+ class Matestack::Ui::Bootstrap::Components::Popover < Matestack::Ui::Bootstrap::BaseVueJsComponent
4
+ vue_name "matestack-ui-bootstrap-popover"
3
5
 
4
6
  # How i imagine using a popover
5
7
  #
@@ -26,16 +28,16 @@ class Matestack::Ui::Bootstrap::Components::Popover < Matestack::Ui::VueJsCompon
26
28
  DATA_ALIAS_ATTRIBUTES = %i[container delay selector html template fallback_placement]
27
29
 
28
30
  DATA_ALIAS_ATTRIBUTES.each do |attribute|
29
- optional "#{attribute}": { as: :"bs_#{attribute}"}
31
+ optional :"#{attribute}"
30
32
  end
31
33
 
32
34
  # TODO:
33
35
  # for security reasons the sanitize, sanitizeFn and whiteList options cannot be supplied using data attributes.
34
36
  # sanitize sanitize_fn white_list
35
37
 
36
- optional class: { as: :bs_class }
38
+ optional class: { as: :bs_class }
37
39
  optional id: { as: :bs_id }
38
- DATA_ATTRIBUTES = %i[tag content title text variant animation placement tabindex trigger boundary offset popper_config]
40
+ DATA_ATTRIBUTES = %i[tag content title variant animation placement tabindex trigger boundary offset popper_config]
39
41
  optional *DATA_ATTRIBUTES
40
42
  # :tag # different element to apply: div, span, links, button, ...
41
43
  # :content, :title # popover title and content strings
@@ -43,49 +45,51 @@ class Matestack::Ui::Bootstrap::Components::Popover < Matestack::Ui::VueJsCompon
43
45
  # :variant, :text # button styling & text
44
46
  # :placement # placement direction as string
45
47
 
46
- def response
47
- if tag.present?
48
- public_send(tag, popover_attributes) do
49
- content_partial
48
+ def response(&block)
49
+ if context.tag.present?
50
+ public_send(context.tag, popover_attributes) do
51
+ content_partial(&block)
50
52
  end
51
53
  else
52
54
  bs_btn popover_attributes do
53
- content_partial
55
+ content_partial(&block)
54
56
  end
55
57
  end
56
58
  end
57
59
 
58
60
  protected
59
61
 
60
- def content_partial
61
- plain text if text
62
- yield_components unless text
62
+ def content_partial(&block)
63
+ plain context.text if context.text
64
+ yield if block_given? unless context.text
63
65
  end
64
66
 
65
67
  def popover_attributes
66
68
  attributes = {}.tap do |hash|
67
69
  hash[:class] = popover_classes
68
- hash[:attributes] = { role: (text ? 'button': nil), title: "#{title}", tabindex: "#{tabindex}" }
70
+ hash[:role] = (context.text ? 'button': nil)
71
+ hash[:title] = "#{context.title}"
72
+ hash[:tabindex] = "#{context.tabindex}"
69
73
  hash[:data] = {}.tap do |data|
70
74
  DATA_ALIAS_ATTRIBUTES.each do |attribute|
71
- data["bs-#{attribute}"] = self.send(:"bs_#{attribute}") if self.send(:"bs_#{attribute}")
75
+ data["bs-#{attribute}"] = context.send("#{attribute}") if context.send("#{attribute}")
72
76
  end
73
77
  (DATA_ATTRIBUTES - [:tag, :text, :variant]).each do |attribute|
74
- data["bs-#{attribute}"] = self.send(:"#{attribute}") if self.send(:"#{attribute}")
78
+ data["bs-#{attribute}"] = context.send("#{attribute}") if context.send("#{attribute}")
75
79
  end
76
80
  data["bs-toggle"] = "popover"
77
81
  end
78
82
  end
79
- html_attributes.merge(
80
- attributes
83
+ options.merge(
84
+ attributes || {}
81
85
  )
82
86
  end
83
87
 
84
88
  def popover_classes
85
89
  [].tap do |classes|
86
- classes << "d-inline-block" unless text
87
- classes << "btn btn-#{variant}" if variant
88
- classes << bs_class
90
+ classes << "d-inline-block" unless context.text
91
+ classes << "btn btn-#{context.variant}" if context.variant
92
+ classes << context.bs_class
89
93
  end.join(' ').strip
90
94
  end
91
95
 
@@ -1,24 +1,26 @@
1
- class Matestack::Ui::Bootstrap::Components::Progress < Matestack::Ui::Component
1
+ require_relative "../base_component"
2
2
 
3
- optional class: { as: :bs_class }
4
- optional :text, :valuemin, :valuemax
3
+ class Matestack::Ui::Bootstrap::Components::Progress < Matestack::Ui::Bootstrap::BaseComponent
4
+
5
+ optional class: { as: :bs_class }
6
+ optional :valuemin, :valuemax
5
7
  # progress expects a number or a list containing hashes with at least a :value
6
- # other options are :text, :class, :variant, :striped, :animated, :aria_valuenow
8
+ # other options are :text, class: { as: :bs_class }, :variant, :striped, :animated, :aria_valuenow
7
9
  optional :progress
8
10
  optional :value
9
11
  optional :variant, :striped, :animated, :height
10
12
 
11
13
  def response
12
14
  div progress_attributes do
13
- progress = self.progress.is_a?(Array) ? self.progress : [{ value: self.progress || value, text: self.text }]
15
+ progress = context.progress.is_a?(Array) ? context.progress : [{ value: context.progress || context.value, text: context.text }]
14
16
  progress.each do |prog|
15
- progress_bar(prog[:value], valuemin, valuemax,
16
- text: prog[:text], klass: prog[:class], variant: prog[:variant] || variant,
17
- striped: prog[:striped] || striped, animated: prog[:animated] || animated,
17
+ progress_bar(prog[:value], context.valuemin, context.valuemax,
18
+ text: prog[:text], klass: prog[:class], variant: prog[:variant] || context.variant,
19
+ striped: prog[:striped] || context.striped, animated: prog[:animated] || context.animated,
18
20
  aria_valuenow: prog[:aria_valuenow]
19
21
  )
20
22
  end
21
- yield_components
23
+ yield if block_given?
22
24
  end
23
25
  end
24
26
 
@@ -26,10 +28,10 @@ class Matestack::Ui::Bootstrap::Components::Progress < Matestack::Ui::Component
26
28
 
27
29
  def progress_attributes
28
30
  attributes = {}.tap do |hash|
29
- hash[:class] = "progress #{bs_class}".strip
30
- hash[:attributes] = { style: "height: #{height}px;" } if height
31
+ hash[:class] = "progress #{context.bs_class}".strip
32
+ hash[:style] = "height: #{context.height}px;" if context.height
31
33
  end
32
- html_attributes.merge(
34
+ options.merge(
33
35
  attributes
34
36
  )
35
37
  end
@@ -43,13 +45,11 @@ class Matestack::Ui::Bootstrap::Components::Progress < Matestack::Ui::Component
43
45
  def progress_bar_attributes(value, klass, variant, striped, animated, aria_valuenow)
44
46
  {
45
47
  class: progress_bar_classes(klass, variant, striped, animated),
46
- attributes: {
47
- role: :progressbar,
48
- style: "width: #{value.to_i > 0 ? value : 0}%;",
49
- 'aria-valuenow': aria_valuenow || value || 0,
50
- 'aria-valuemin': valuemin || 0,
51
- 'aria-valuemax': valuemax || 100
52
- }
48
+ role: :progressbar,
49
+ style: "width: #{value.to_i > 0 ? value : 0}%;",
50
+ 'aria-valuenow': aria_valuenow || value || 0,
51
+ 'aria-valuemin': context.valuemin || 0,
52
+ 'aria-valuemax': context.valuemax || 100
53
53
  }
54
54
  end
55
55
 
@@ -0,0 +1,50 @@
1
+ require_relative "../base_component"
2
+
3
+ class Matestack::Ui::Bootstrap::Components::Scrollspy < Matestack::Ui::Bootstrap::BaseComponent
4
+
5
+ required :height
6
+
7
+ optional :offset # pixel to offset from top, by default 10
8
+ optional method: { as: :bs_method } # find which section, by default auto
9
+ optional :target # scroll target id
10
+ optional class: { as: :bs_class } # adding custom class to scrollspy
11
+
12
+ def response
13
+ div scrollspy_attributes do
14
+ yield if block_given?
15
+ end
16
+ end
17
+
18
+ protected
19
+
20
+ def scrollspy_attributes
21
+ attributes = {}.tap do |hash|
22
+ hash[:class] = scrollspy_classes
23
+ hash[:data] = { "bs-spy": "scroll", "bs-target": "#{context.target}" }
24
+ hash[:data].merge!("bs-offset": context.offset) if context.offset.present?
25
+ hash[:data].merge!("bs-method": :"#{context.bs_method}") if context.bs_method.present?
26
+ hash[:style] = "overflow-y: scroll; position: relative;"
27
+ hash[:style] << "height: #{parsed_height};"
28
+ hash[:tabindex] = 0
29
+ end
30
+ options.merge(
31
+ attributes
32
+ )
33
+ end
34
+
35
+ def parsed_height
36
+ if context.height.present?
37
+ if context.height.to_s.include?("px") || context.height.to_s.include?("em") || context.height.to_s.include?("rem")
38
+ context.height
39
+ else
40
+ "#{context.height}px"
41
+ end
42
+ end
43
+ end
44
+
45
+ def scrollspy_classes
46
+ [].tap do |classes|
47
+ classes << context.bs_class
48
+ end.join(' ').strip
49
+ end
50
+ end
@@ -0,0 +1,33 @@
1
+ require_relative "../base_component"
2
+
3
+ class Matestack::Ui::Bootstrap::Components::SectionCard < Matestack::Ui::Bootstrap::BaseComponent
4
+
5
+ optional :id, :title, :subtitle, :icon, :slots, :content_padding
6
+
7
+ def response
8
+ section id: context.id, class: "section-card rounded shadow-sm mb-4 bg-white #{options[:class]}" do
9
+ div class: "d-flex flex-row justify-content-between" do
10
+ if context.title.present? || context.subtitle.present?
11
+ div class: "section-card-heading p-4" do
12
+ heading size: 5, class: "mb-0" do
13
+ bs_icon name: context.icon, size: "35" if context.icon.present?
14
+ plain context.title
15
+ end
16
+ small class: "text-muted" do
17
+ plain context.subtitle
18
+ end
19
+ end
20
+ end
21
+ if slots.present? && slots[:actions].present?
22
+ div class: "section-card-actions p-4" do
23
+ slot :actions
24
+ end
25
+ end
26
+ end
27
+ div class: "section-card-content #{'p-4' unless context.content_padding == false} #{'pt-1' if context.title || context.subtitle}" do
28
+ yield if block_given?
29
+ end
30
+ end
31
+ end
32
+
33
+ end
@@ -0,0 +1,35 @@
1
+ require_relative "../base_component"
2
+
3
+ class Matestack::Ui::Bootstrap::Components::Spinner < Matestack::Ui::Bootstrap::BaseComponent
4
+
5
+ optional class: { as: :bs_class }
6
+ optional :kind, :variant, :size, :sr_only
7
+
8
+ def response
9
+ div spinner_attributes do
10
+ span class: "visually-hidden" do
11
+ plain context.sr_only
12
+ end
13
+ end
14
+ end
15
+
16
+ protected
17
+
18
+ def spinner_attributes
19
+ options.merge(
20
+ class: spinner_class,
21
+ 'role': "status"
22
+ )
23
+ end
24
+
25
+ def spinner_class
26
+ [].tap do |classes|
27
+ spinner_kind = context.kind || :border
28
+ classes << "spinner-#{spinner_kind}"
29
+ classes << "text-#{context.variant || 'primary'}"
30
+ classes << "spinner-#{spinner_kind}-sm" if context.size
31
+ #optional classes
32
+ classes << context.bs_class
33
+ end.join(' ').strip
34
+ end
35
+ end
@@ -0,0 +1,79 @@
1
+ require_relative "../base_component"
2
+
3
+ class Matestack::Ui::Bootstrap::Components::TabNav < Matestack::Ui::Bootstrap::BaseComponent
4
+
5
+ required :id
6
+
7
+ optional :items, :variant, :fill, :justified, :vertical, :vertical_up_to_sm,
8
+ :vertical_up_to_md, :vertical_up_to_xl, :horizontal,
9
+ class: { as: :bs_class }
10
+
11
+ def response
12
+ if context.items.present?
13
+ ul nav_attributes do
14
+ nav_items_partial
15
+ end
16
+ end
17
+ div class: "tab-content", id: "#{context.id}Content" do
18
+ yield if block_given?
19
+ end
20
+ end
21
+
22
+ protected
23
+
24
+ def nav_items_partial
25
+ context.items.each do |item|
26
+ li class: "nav-item", role: "presentation" do
27
+ a class: "nav-link #{'active' if item[:active]}",
28
+ id: "tab-#{item[:id]}",
29
+ path: "#tab-#{item[:id]}-content",
30
+ role: "tab",
31
+ "aria-controls": "tab-#{item[:id]}",
32
+ "aria-selected": "#{'true' if item[:active]}",
33
+ "data-bs-toggle": "tab" do
34
+ bs_icon name: item[:icon], size: 20 if item[:icon]
35
+ span item[:text], class: "#{'ps-3' if item[:icon]}" if item[:text]
36
+ end
37
+ end
38
+ end
39
+ end
40
+
41
+ def link_attrs path, active, disabled, delay=nil
42
+ {}.tap do |hash|
43
+ hash[:class] = "nav-link #{'active' if path == request.fullpath } #{'disabled' if disabled}"
44
+ hash[:'aria-selected'] = path == request.fullpath ? 'true' : 'false'
45
+ hash[:'aria-current'] = 'page' if active == true
46
+ hash[:'aria-disabled'] = 'true' if disabled
47
+ hash[:role] = "tab" if toggle.present?
48
+ hash[:'aria-controls'] = "#{path.gsub('#','')}" if context.toggle.present?
49
+
50
+ hash[:data] = { "bs-toggle": "pill" } if context.pills
51
+ hash[:data] = { "bs-toggle": "tab" } if context.tabs
52
+ hash[:path] = path
53
+ end
54
+ end
55
+
56
+ def nav_attributes
57
+ options.merge(
58
+ id: context.id,
59
+ class: nav_classes,
60
+ role: "tablist"
61
+ )
62
+ end
63
+
64
+ def nav_classes
65
+ [].tap do |classes|
66
+ classes << 'nav'
67
+ classes << 'nav-tabs' if context.variant == :tabs || context.variant.nil?
68
+ classes << 'nav-pills' if context.variant == :pills
69
+ classes << 'nav-fill' if context.fill
70
+ classes << 'nav-justified' if context.justified
71
+ classes << 'flex-column' if context.vertical
72
+ classes << 'flex-column flex-sm-column flex-md-row' if context.vertical_up_to_sm
73
+ classes << 'flex-column flex-sm-column flex-md-column flex-lg-row' if context.vertical_up_to_md
74
+ classes << 'flex-column flex-sm-column flex-md-column flex-lg-column flex-xl-row' if context.vertical_up_to_xl
75
+ classes << "justify-content-#{context.horizontal}" if context.horizontal.present?
76
+ classes << context.bs_class
77
+ end.join(' ').strip
78
+ end
79
+ end
@@ -0,0 +1,35 @@
1
+ require_relative "../base_component"
2
+
3
+ class Matestack::Ui::Bootstrap::Components::TabNavContent < Matestack::Ui::Bootstrap::BaseComponent
4
+
5
+ required :id
6
+
7
+ optional :active, class: { as: :bs_class }
8
+
9
+ def response
10
+ div tab_content_attributes do
11
+ yield if block_given?
12
+ end
13
+ end
14
+
15
+ protected
16
+
17
+ def tab_content_attributes
18
+ options.merge(
19
+ id: "tab-#{context.id}-content",
20
+ class: tab_content_classes,
21
+ role: "tabpanel",
22
+ "aria-labelledby": "tab-#{context.id}"
23
+ )
24
+ end
25
+
26
+ def tab_content_classes
27
+ [].tap do |classes|
28
+ classes << 'tab-pane'
29
+ classes << 'fade'
30
+ classes << 'show ' if context.active
31
+ classes << 'active' if context.active
32
+ classes << context.bs_class
33
+ end.join(' ').strip
34
+ end
35
+ end
@@ -0,0 +1,89 @@
1
+ import * as bootstrap from 'bootstrap'
2
+
3
+ import MatestackUiVueJs from 'matestack-ui-vuejs'
4
+
5
+ const toastComponent = {
6
+ mixins: [MatestackUiVueJs.componentMixin],
7
+ template: MatestackUiVueJs.componentHelpers.inlineTemplate,
8
+ data() {
9
+ return {
10
+ toastsInstance: undefined,
11
+ eventData: {},
12
+ showing: false,
13
+ };
14
+ },
15
+ methods: {
16
+ show: function(event){
17
+ const self = this;
18
+ if(this.props["autohide"]){
19
+ setTimeout(function () {
20
+ self.showing = false;
21
+ }, 5000);
22
+ }
23
+ if(this.props["delay"]){
24
+ setTimeout(function () {
25
+ self.showing = true;
26
+ }, parseInt(self.props["delay"]));
27
+ } else {
28
+ self.showing = true
29
+ }
30
+ this.eventData = event
31
+ },
32
+ hide: function(event){
33
+ const self = this;
34
+ this.showing = false
35
+ setTimeout(function () {
36
+ self.eventData = false;
37
+ }, 500);
38
+ },
39
+ dispose: function(){
40
+ const self = this;
41
+ self.toastsInstance.dispose()
42
+ self.toastsInstance = new bootstrap.Toast(self.getElement())
43
+ }
44
+ },
45
+ mounted: function() {
46
+ const self = this;
47
+ var myToasts = self.getElement()
48
+ self.toastsInstance = new bootstrap.Toast(myToasts)
49
+ },
50
+ created: function() {
51
+ const self = this
52
+
53
+ if(this.props["show_on"] != undefined){
54
+ var show_events = this.props["show_on"].split(",")
55
+ show_events.forEach(show_event => MatestackUiVueJs.eventHub.$on(show_event.trim(), self.show));
56
+ }
57
+
58
+ if(this.props["hide_on"] != undefined){
59
+ var show_events = this.props["hide_on"].split(",")
60
+ show_events.forEach(show_event => MatestackUiVueJs.eventHub.$on(show_event.trim(), self.hide));
61
+ }
62
+
63
+ if(this.props["dispose_on"] != undefined){
64
+ var show_events = this.props["dispose_on"].split(",")
65
+ show_events.forEach(show_event => MatestackUiVueJs.eventHub.$on(show_event.trim(), self.dispose));
66
+ }
67
+ },
68
+
69
+ beforeUnmount: function() {
70
+ const self = this
71
+ MatestackUiVueJs.eventHub.$off(this.props["show_on"], self.show);
72
+ MatestackUiVueJs.eventHub.$off(this.props["hide_on"], self.hide);
73
+ MatestackUiVueJs.eventHub.$off(this.props["dispose_on"], self.hide);
74
+ if(this.props["show_on"] != undefined){
75
+ var shown_events = this.props["show_on"].split(",")
76
+ shown_events.forEach(show_event => MatestackUiVueJs.eventHub.$off(show_event.trim(), self.show));
77
+ }
78
+ if(this.props["hide_on"] != undefined){
79
+ var hiden_events = this.props["hide_on"].split(",")
80
+ hiden_events.forEach(hide_event => MatestackUiVueJs.eventHub.$off(hide_event.trim(), self.hide));
81
+ }
82
+ if(this.props["dispose_on"] != undefined){
83
+ var hiden_events = this.props["dispose_on"].split(",")
84
+ hiden_events.forEach(hide_event => MatestackUiVueJs.eventHub.$off(hide_event.trim(), self.dispose));
85
+ }
86
+ },
87
+ }
88
+
89
+ export default toastComponent
@@ -0,0 +1,113 @@
1
+ require_relative "../base_vue_js_component"
2
+
3
+ class Matestack::Ui::Bootstrap::Components::Toast < Matestack::Ui::Bootstrap::BaseVueJsComponent
4
+ vue_name "matestack-ui-bootstrap-toast"
5
+
6
+ # header attributes, expects a hash or string
7
+ # possible keys `:icon_class, :icon, :title, :subtitle`
8
+ optional :header
9
+ # body expects a string as message inside toast
10
+ optional :body
11
+ # placement attributes, expects a hash wiht possible keys: position, min-height
12
+ optional :placement # for adding custom css style
13
+ optional :important, :delay, :autohide, :animation
14
+ optional class: { as: :bs_class }
15
+ optional :attributes, :data
16
+
17
+
18
+ optional :show_on, :hide_on, :dispose_on
19
+
20
+ def response
21
+ standard_placement_partial
22
+ # standard_placement_partial unless placement.present?
23
+ # custom_placement_partial if placement.present?
24
+ end
25
+
26
+ protected
27
+
28
+ def vue_props
29
+ {}.tap do |props|
30
+ props[:delay] = context.delay
31
+ props[:autohide] = context.autohide
32
+ props[:show_on] = context.show_on
33
+ props[:hide_on] = context.hide_on
34
+ props[:dispose_on] = context.dispose_on
35
+ end
36
+ end
37
+
38
+ def custom_placement_partial
39
+ div placement_attrs do
40
+ standard_placement_partial
41
+ end
42
+ end
43
+
44
+ def standard_placement_partial
45
+ div toast_attributes do
46
+ header_partial if context.header || slots && slots[:header]
47
+ body_partial
48
+ end
49
+ end
50
+
51
+ def header_partial
52
+ header = context.header.is_a?(Hash) ? context.header : { title: context.header }
53
+ div class: "toast-header" do
54
+ img class: "#{'rounded me-2' || header[:icon_class]}", path: header[:icon] if header[:icon].present?
55
+ strong header[:title], class: "me-auto" if header[:title].present?
56
+ small header[:subtitle] if header[:subtitle].present?
57
+
58
+ slot :header if slots && slots[:header]
59
+ bs_close dismiss: 'toast', class: "ms-2 mb-1", "@click": "vc.hide()"
60
+ end
61
+
62
+ end
63
+
64
+ def body_partial
65
+ div class: "toast-body" do
66
+ plain context.body if context.body
67
+ end
68
+ unless context.header || slots && slots[:header]
69
+ bs_close dismiss: 'toast', class: "ms-auto me-2 btn-close-white", "@click": "vc.hide()"
70
+ end
71
+ end
72
+
73
+ def toast_attributes
74
+ options.merge(
75
+ class: toast_classes,
76
+ data: toast_data
77
+ ).merge(toast_attrs)
78
+ end
79
+
80
+ def toast_data
81
+ (context.data || {}).tap do |hash|
82
+ hash["bs-delay"] = context.delay.nil? ? 5000 : context.delay
83
+ hash["bs-autohide"] = context.autohide.nil? ? "true" : "#{context.autohide}"
84
+ hash["bs-animation"] = context.animation.nil? ? "true" : "#{context.animation}"
85
+ end
86
+ end
87
+
88
+ def toast_attrs
89
+ (context.attributes || {}).tap do |hash|
90
+ hash[:role] = (context.important == false ? 'status' : 'alert')
91
+ hash[:'aria-live'] = (context.important ? 'assertive' : 'polite') if context.important.present? && !context.placement.present?
92
+ hash[:'aria-live'] = 'assertive' unless context.important.present?
93
+ hash[:'aria-atomic'] = 'true' unless context.placement.present?
94
+ hash[:style] = "z-index: 10000; position: fixed; #{context.placement[:position] || 'top: 0; right: 0;' }" if context.placement.present?
95
+ hash[:"v-bind:class"] = "{'show' : vc.showing }"
96
+ end
97
+ end
98
+
99
+ def toast_classes
100
+ [].tap do |classes|
101
+ classes << 'toast p-0 fade d-flex align-items-center border-0'
102
+ classes << context.bs_class
103
+ end.join(' ').strip
104
+ end
105
+
106
+ def placement_attrs
107
+ {}.tap do |hash|
108
+ hash[:'aria-live'] = (context.important ? 'assertive' : 'polite') if context.important.present?
109
+ hash[:'aria-atomic'] = 'true'
110
+ hash[:style] = "position: relative; min-height: #{context.placement[:height]};"
111
+ end
112
+ end
113
+ end
@@ -1,8 +1,9 @@
1
1
  import * as bootstrap from 'bootstrap'
2
+ import MatestackUiVueJs from 'matestack-ui-vuejs'
2
3
 
3
- MatestackUiCore.Vue.component('matestack-ui-bootstrap-tooltip', {
4
-
5
- mixins: [MatestackUiCore.componentMixin],
4
+ const tooltipComponent = {
5
+ mixins: [MatestackUiVueJs.componentMixin],
6
+ template: MatestackUiVueJs.componentHelpers.inlineTemplate,
6
7
  data() {
7
8
  return {
8
9
  // tooltipInstance: undefined
@@ -14,13 +15,15 @@ MatestackUiCore.Vue.component('matestack-ui-bootstrap-tooltip', {
14
15
  },
15
16
  mounted: function() {
16
17
  const self = this;
17
- var tooltip = self.$el
18
+ var tooltip = self.getElement()
18
19
  self.tooltipInstance = new bootstrap.Tooltip(tooltip)
19
20
  }
20
21
  // created: function() {
21
22
  // },
22
23
 
23
- // beforeDestroy: function() {
24
+ // beforeUnmount: function() {
24
25
 
25
26
  // },
26
- });
27
+ }
28
+
29
+ export default tooltipComponent