Merge branch 'release/v0.2.3'

full-stack-biz · Apr 10, 2024 · a9ee07d · a9ee07d
2 parents 88f0f7b + b78203b
commit a9ee07d
Show file tree

Hide file tree

Showing 17 changed files with 59 additions and 114 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    turbo_material (0.2.1)
+    turbo_material (0.2.3)
       importmap-rails (~> 2.0.1)
       rails (~> 7.1, >= 7.1.2)
       stimulus-rails (~> 1.3)

diff --git a/app/assets/dist/turbo_material/tailwind.css b/app/assets/dist/turbo_material/tailwind.css
diff --git a/app/assets/javascripts/turbo_material/material_chips_select_controller.js b/app/assets/javascripts/turbo_material/material_chips_select_controller.js
@@ -35,6 +35,7 @@ export default class extends Controller {
 
     addChip(content, value) {
         const chipEl = document.createElement('div');
+        chipEl.role = 'row';
         chipEl.classList.add('mdc-chip');
         if (this.chipCssValue) {
             chipEl.classList.add(this.chipCssValue);

diff --git a/app/helpers/turbo_material/data_table_helper.rb b/app/helpers/turbo_material/data_table_helper.rb
@@ -3,5 +3,19 @@ module DataTableHelper
     def material_data_table(kwargs = {})
       render "components/material_data_table", **kwargs
     end
+
+    def aria_sort(key, default: false)
+      return 'none' unless (params[:order] == key) || (params[:order].blank? && default)
+
+      (params[:reverse] == 'true') || (params[:reverse].blank? && default) ? 'descending' : 'ascending'
+    end
+
+    def sort_arrow(aria_sort)
+      aria_sort == 'descending' ? 'arrow_downward' : 'arrow_upward'
+    end
+
+    def sort_class(aria_sort)
+      aria_sort == 'none' ? '' : ' mdc-data-table__header-cell--sorted'
+    end
   end
 end
diff --git a/app/views/common/_form.html.erb b/app/views/common/_form.html.erb
@@ -1,4 +1,4 @@
-<div class="flex-col w-full">
+<div class="flex-col w-full p-2">
   <div class="mx-auto px-6 py-3">
     <%= form_with(url: '/', method: :get, html: { novalidate: true }) do |form| %>
       <%= public_send local_assigns.delete(:helper_name).to_sym, **local_assigns.merge(form: form) %>

diff --git a/app/views/components/_chips_input.html.erb b/app/views/components/_chips_input.html.erb
@@ -1,4 +1,4 @@
-<%# locals: (form:, disabled: false, required: false, name:, label: nil, id:, frame: nil, suffix: nil, type: 'text', url: nil, selected: [], options: [], value: nil) %>
+<%# locals: (form:, disabled: false, required: false, name:, label: nil, id:, frame: nil, suffix: nil, type: 'text', url: nil, selected: [], options: [], value: nil, fixed: false) %>
 <%- id = [name, suffix].compact_blank.join('-') -%>
 <div data-controller="material-chips-input"
      data-material-chips-input-url-value="<%= url %>"
@@ -31,6 +31,6 @@
     <span class="mdc-line-ripple"></span>
   </label>
   <div class="mdc-menu-surface--anchor">
-    <%= render partial: 'components/chips_input_options', locals: { options: options, suffix: suffix, name: name, label: label } %>
+    <%= render partial: 'components/chips_input_options', locals: { options: options, suffix: suffix, name: name, label: label, fixed: fixed } %>
   </div>
 </div>
diff --git a/app/views/components/_chips_input_options.html.erb b/app/views/components/_chips_input_options.html.erb
@@ -1,7 +1,7 @@
-<%# locals: (suffix:, options: [], label:, name:, opened: 'false') %>
+<%# locals: (suffix:, options: [], label:, name:, opened: 'false', fixed: false) %>
 <%- id = [name, suffix].compact_blank.join('-') -%>
 <div id="<%= "#{id}-panel" %>"
-     class="mdc-menu-surface <%= (opened != 'true' || options.size.zero?) ? '' : 'mdc-menu-surface--open' %> !z-100 mdc-menu-surface--fullwidth"
+     class="mdc-menu-surface <%= (opened != 'true' || options.size.zero?) ? '' : 'mdc-menu-surface--open' %> !z-100 <%= fixed ? 'mdc-menu-surface--fixed' : 'mdc-menu-surface--fullwidth' %>"
      data-controller="material-menu-surface"
      data-material-chips-input-target="panel" data-size="<%= options.size %>">
   <ul class="mdc-deprecated-list max-h-64 overflow-y-auto"

diff --git a/app/views/components/_chips_select.html.erb b/app/views/components/_chips_select.html.erb
@@ -9,7 +9,7 @@
      data-material-chips-select-modal-url-value="<%= modal_url %>"
      data-material-chips-select-chip-css-value="<%= chip_css %>"
 >
-  <div class="mdc-select__anchor"
+  <div class="mdc-select__anchor !h-fit !flex-row !flex-wrap"
        role="button"
        aria-haspopup="listbox"
        aria-expanded="false"
@@ -19,27 +19,10 @@
        <% if required %>aria-required="true"<% end %>
   >
     <span class="mdc-select__ripple"></span>
-    <span id="<%= id %>-label" class="mdc-floating-label pb-1"><%= label || name.capitalize %></span>
-    <div class="mdc-chip-set mdc-chip-set--input"></div>
-    <span class="mdc-select__selected-text-container"><span id="<%= id %>-selected-text" class="mdc-select__selected-text !hidden"></span></span>
-    <span class="mdc-select__dropdown-icon">
-      <svg
-        class="mdc-select__dropdown-icon-graphic"
-        viewBox="7 10 10 5" focusable="false">
-        <polygon
-          class="mdc-select__dropdown-icon-inactive"
-          stroke="none"
-          fill-rule="evenodd"
-          points="7 10 12 15 17 10">
-        </polygon>
-        <polygon
-          class="mdc-select__dropdown-icon-active"
-          stroke="none"
-          fill-rule="evenodd"
-          points="7 15 12 10 17 15">
-        </polygon>
-      </svg>
-    </span>
+    <span id="<%= id %>-label" class="mdc-floating-label !relative !w-full"><%= label || name.capitalize %></span>
+    <div class="mdc-chip-set !grow !flex-wrap" role="grid"></div>
+    <%= render 'components/select_dropdown_icon' %>
+    <span class="mdc-select__selected-text-container !grow-0 !max-h-0"><span id="<%= id %>-selected-text" class="mdc-select__selected-text !hidden"></span></span>
     <span class="mdc-line-ripple"></span>
   </div>
   <%= form.hidden_field name.to_sym, value: value, data: { 'material-chips-select-target': 'hidden' } if form %>

diff --git a/app/views/components/_material_data_table.html.erb b/app/views/components/_material_data_table.html.erb
@@ -23,7 +23,7 @@
       </tr>
       </thead>
       <tbody class="mdc-data-table__content">
-        <%= render partial: table_contents_partial, locals: { records: records } %>
+      <%= render partial: table_contents_partial, locals: { records: records } %>
       </tbody>
     </table>
   </div>
@@ -42,64 +42,8 @@
           <% params.keys.select { |k| k.starts_with?('ransack') }.each do |key| -%>
             <%= form.hidden_field key, value: params[key] %>
           <%- end -%>
-          <div class="mdc-select mdc-select--outlined mdc-select--no-label mdc-data-table__pagination-rows-per-page-select mdc-data-table__pagination-rows-per-page-select--outlined" data-controller="material-select">
-            <%= form.hidden_field :per_page, value: pagy.items %>
-            <div class="mdc-select__anchor" role="button" aria-haspopup="listbox"
-                 aria-labelledby="demo-pagination-select" tabindex="0">
-                <span class="mdc-select__selected-text-container">
-                  <span id="demo-pagination-select" class="mdc-select__selected-text"><%= pagy.items %></span>
-                </span>
-              <span class="mdc-select__dropdown-icon">
-                  <svg
-                    class="mdc-select__dropdown-icon-graphic"
-                    viewBox="7 10 10 5">
-                    <polygon
-                      class="mdc-select__dropdown-icon-inactive"
-                      stroke="none"
-                      fill-rule="evenodd"
-                      points="7 10 12 15 17 10">
-                    </polygon>
-                    <polygon
-                      class="mdc-select__dropdown-icon-active"
-                      stroke="none"
-                      fill-rule="evenodd"
-                      points="7 15 12 10 17 15">
-                    </polygon>
-                  </svg>
-                </span>
-              <span class="mdc-notched-outline mdc-notched-outline--notched">
-                  <span class="mdc-notched-outline__leading"></span>
-                  <span class="mdc-notched-outline__trailing"></span>
-                </span>
-            </div>
-
-            <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth" role="listbox">
-              <ul class="mdc-list">
-                <li class="mdc-select__option mdc-select__one-line-option mdc-list-item <%= pagy.items == 10 ? 'mdc-list-item--selected' : '' %> mdc-list-item--with-one-line"
-                    aria-selected="true" role="option" data-value="10">
-                  <span class="mdc-list-item__ripple"></span>
-                  <span class="mdc-list-item__content">
-                      <span class="mdc-list-item__primary-text">10</span>
-                    </span>
-                </li>
-                <li class="mdc-select__option mdc-select__one-line-option mdc-list-item <%= pagy.items == 20 ? 'mdc-list-item--selected' : '' %> mdc-list-item--with-one-line"
-                    role="option" data-value="20">
-                  <span class="mdc-list-item__ripple"></span>
-                  <span class="mdc-list-item__content">
-                      <span class="mdc-list-item__primary-text">20</span>
-                    </span>
-                </li>
-                <li class="mdc-select__option mdc-select__one-line-option mdc-list-item <%= pagy.items == 100 ? 'mdc-list-item--selected' : '' %> mdc-list-item--with-one-line"
-                    role="option" data-value="100">
-                  <span class="mdc-list-item__ripple"></span>
-                  <span class="mdc-list-item__content">
-                      <span class="mdc-list-item__primary-text">100</span>
-                    </span>
-                </li>
-              </ul>
-            </div>
-          </div>
-          </div>
+          <%= material_select name: 'per_page', form: form, id: 'per-page', options: per_page_options,
+                              value: pagy.items, outlined: true, additional_classes: 'mdc-data-table__pagination-rows-per-page-select mdc-data-table__pagination-rows-per-page-select--outlined' %>
         <%- end -%>
 
         <div class="mdc-data-table__pagination-navigation">
@@ -127,6 +71,7 @@
             <div class="mdc-button__icon">last_page</div>
           <% end %>
         </div>
-        </div>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/app/views/components/_select.html.erb b/app/views/components/_select.html.erb
@@ -27,24 +27,7 @@
         <%= selected_text || value %>
       </span>
     </span>
-    <span class="mdc-select__dropdown-icon">
-            <svg
-              class="mdc-select__dropdown-icon-graphic"
-              viewBox="7 10 10 5" focusable="false">
-              <polygon
-                class="mdc-select__dropdown-icon-inactive"
-                stroke="none"
-                fill-rule="evenodd"
-                points="7 10 12 15 17 10">
-              </polygon>
-              <polygon
-                class="mdc-select__dropdown-icon-active"
-                stroke="none"
-                fill-rule="evenodd"
-                points="7 15 12 10 17 15">
-              </polygon>
-            </svg>
-          </span>
+    <%= render 'components/select_dropdown_icon' %>
     <%- unless outlined -%><span class="mdc-line-ripple"></span><%- end -%>
   </div>
 

diff --git a/app/views/components/_select_dropdown_icon.html.erb b/app/views/components/_select_dropdown_icon.html.erb
@@ -0,0 +1,18 @@
+<span class="mdc-select__dropdown-icon">
+  <svg
+    class="mdc-select__dropdown-icon-graphic"
+    viewBox="7 10 10 5" focusable="false">
+    <polygon
+      class="mdc-select__dropdown-icon-inactive"
+      stroke="none"
+      fill-rule="evenodd"
+      points="7 10 12 15 17 10">
+    </polygon>
+    <polygon
+      class="mdc-select__dropdown-icon-active"
+      stroke="none"
+      fill-rule="evenodd"
+      points="7 15 12 10 17 15">
+    </polygon>
+  </svg>
+</span>
diff --git a/app/views/layouts/turbo_material/lookbook.html.erb b/app/views/layouts/turbo_material/lookbook.html.erb
@@ -11,6 +11,8 @@
   <%= javascript_importmap_tags %>
   <%= javascript_import_module_tag "turbo_material/application" %>
   <%= stylesheet_link_tag    "turbo_material/application", media: "all" %>
+  <style>
+  </style>
 </head>
 <body>
 

diff --git a/lib/lookbook/chips_input_preview.rb b/lib/lookbook/chips_input_preview.rb
@@ -5,10 +5,9 @@ class ChipsInputPreview < Lookbook::Preview
   # @param label text
   # @param disabled toggle
   # @param required toggle
-  def default(label: 'Input', disabled: false, required: false)
+  def default(label: 'Chips Input', disabled: false, required: false)
     render 'common/form', helper_name: 'material_chips_input',
-                                   url: '/countries', name: 'countries', label:, id: 'Input', disabled:,
-                                   required:,
+                                   url: '/countries', name: 'countries', label:, id: 'Input', disabled:, required:,
                                    options: Carmen::Country.all.map { |c| { id: c.alpha_3_code, label: c.name } }
   end
 end
diff --git a/lib/lookbook/chips_select_preview.rb b/lib/lookbook/chips_select_preview.rb
@@ -3,7 +3,7 @@ class ChipsSelectPreview < Lookbook::Preview
   # @param label text
   # @param disabled toggle
   # @param required toggle
-  def default(label: 'Input', disabled: false, required: false)
+  def default(label: 'Chips Select', disabled: false, required: false)
     render 'common/form', helper_name: 'material_chips_select', label: label, name: 'checkbox',
                                    id: 'Input', disabled: disabled, value: [],
                                    options: [

diff --git a/lib/lookbook/radio_preview.rb b/lib/lookbook/radio_preview.rb
@@ -3,7 +3,7 @@ class RadioPreview < Lookbook::Preview
   # @param label text
   # @param disabled toggle
   # @param required toggle
-  def default(label: 'Input', disabled: false, required: false)
+  def default(label: 'Radio', disabled: false, required: false)
     render 'common/form', helper_name: 'material_radio', label: label, name: 'checkbox', id: 'Input', disabled: disabled, required: required
   end
 end
diff --git a/lib/lookbook/textarea_preview.rb b/lib/lookbook/textarea_preview.rb
@@ -3,7 +3,7 @@ class TextareaPreview < Lookbook::Preview
   # @param label text
   # @param disabled toggle
   # @param required toggle
-  def default(label: 'Text', disabled: false, required: false)
+  def default(label: 'Textarea', disabled: false, required: false)
     render 'common/form', helper_name: 'material_textarea', label: label, name: 'textarea', id: 'Text', disabled: disabled, required: required
   end
 end
diff --git a/lib/turbo_material/version.rb b/lib/turbo_material/version.rb
@@ -1,3 +1,3 @@
 module TurboMaterial
-  VERSION = "0.2.2"
+  VERSION = "0.2.3"
 end