polaris_view_components 0.8.1 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/icons/polaris/AnalyticsMinor.svg +1 -0
  3. data/app/assets/icons/polaris/AppsMinor.svg +1 -0
  4. data/app/assets/icons/polaris/BlockMinor.svg +1 -0
  5. data/app/assets/icons/polaris/ButtonMinor.svg +1 -0
  6. data/app/assets/icons/polaris/CaretDownMinor.svg +1 -1
  7. data/app/assets/icons/polaris/CaretUpMinor.svg +1 -1
  8. data/app/assets/icons/polaris/CircleTickMinor.svg +1 -0
  9. data/app/assets/icons/polaris/Columns3Minor.svg +1 -0
  10. data/app/assets/icons/polaris/CustomersMinor.svg +1 -1
  11. data/app/assets/icons/polaris/DiscountsMinor.svg +1 -0
  12. data/app/assets/icons/polaris/DropdownMinor.svg +1 -1
  13. data/app/assets/icons/polaris/FinancesMajor.svg +1 -0
  14. data/app/assets/icons/polaris/FinancesMinor.svg +1 -0
  15. data/app/assets/icons/polaris/HomeMinor.svg +1 -0
  16. data/app/assets/icons/polaris/MarketingMinor.svg +1 -0
  17. data/app/assets/icons/polaris/OnlineStoreMinor.svg +1 -0
  18. data/app/assets/icons/polaris/OrdersMinor.svg +1 -0
  19. data/app/assets/icons/polaris/ProductsMinor.svg +1 -0
  20. data/app/assets/icons/polaris/QuestionMarkInverseMajor.svg +1 -0
  21. data/app/assets/icons/polaris/QuestionMarkInverseMinor.svg +1 -0
  22. data/app/assets/icons/polaris/SelectMinor.svg +1 -1
  23. data/app/assets/icons/polaris/TitleMinor.svg +1 -0
  24. data/app/assets/icons/polaris/WandMinor.svg +1 -0
  25. data/app/assets/javascripts/polaris_view_components/collapsible_controller.js +19 -0
  26. data/app/assets/javascripts/polaris_view_components/dropzone_controller.js +15 -3
  27. data/app/assets/javascripts/polaris_view_components/frame_controller.js +1 -1
  28. data/app/assets/javascripts/polaris_view_components/index.js +2 -0
  29. data/app/assets/javascripts/polaris_view_components/polaris_controller.js +4 -0
  30. data/app/assets/javascripts/polaris_view_components/text_field_controller.js +5 -0
  31. data/app/assets/javascripts/polaris_view_components/toast_controller.js +13 -2
  32. data/app/assets/javascripts/polaris_view_components/{utils.js → utils/index.js} +3 -1
  33. data/app/assets/javascripts/polaris_view_components/utils/use-transition.js +162 -0
  34. data/app/assets/javascripts/polaris_view_components.js +201 -162
  35. data/app/assets/stylesheets/polaris_view_components/custom.css +37 -0
  36. data/app/assets/stylesheets/polaris_view_components.css +68 -33
  37. data/app/components/polaris/action_list/item_component.rb +2 -1
  38. data/app/components/polaris/button_component.html.erb +2 -2
  39. data/app/components/polaris/collapsible_component.rb +37 -0
  40. data/app/components/polaris/dropzone_component.html.erb +9 -6
  41. data/app/components/polaris/filters_component.rb +3 -1
  42. data/app/components/polaris/headless_button.html.erb +2 -2
  43. data/app/components/polaris/headless_button.rb +3 -1
  44. data/app/components/polaris/keyboard_key_component.rb +20 -0
  45. data/app/components/polaris/page_component.html.erb +81 -10
  46. data/app/components/polaris/page_component.rb +85 -28
  47. data/app/components/polaris/resource_item_component.rb +7 -2
  48. data/app/components/polaris/skeleton_display_text_component.rb +32 -0
  49. data/app/components/polaris/skeleton_thumbnail_component.rb +31 -0
  50. data/app/components/polaris/text_field_component.html.erb +1 -1
  51. data/app/components/polaris/text_field_component.rb +1 -1
  52. data/app/components/polaris/visually_hidden_component.rb +0 -3
  53. data/app/helpers/polaris/form_builder.rb +1 -1
  54. data/app/helpers/polaris/view_helper.rb +4 -0
  55. data/lib/polaris/view_components/version.rb +1 -1
  56. metadata +111 -15
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4d4484aea870437d2c04e9962e86b40d7ebfcfd78119900fd9e5fde4cf225301
4
- data.tar.gz: 8afb88abb96c45259eebbf58af6229faa543afae16c38f96858eaa92e9944795
3
+ metadata.gz: '08aa4ac3025799e63c02f893d3fa9397ae3ea2940b672ed3670e36fae0c09b93'
4
+ data.tar.gz: 58ad189ac881ae6b147d3e319c1d8fb490fad89a5a8cb289f382c480806e4782
5
5
  SHA512:
6
- metadata.gz: 763b2fef888918919bf55c8e3fad976d60727b79b432683d72b4227a178ee6c3ec3f048bc27c6b8b29107b6f8fec5720f07136b16c21202e9e0a427c4bce6955
7
- data.tar.gz: 0b5fdf681d13bab109bf60231bcf9b1fdbd79d86d87859d8df41bd426b1daaf2f779ef38d445806598c3ab974139edda3486514d917d8280eabff654507a021e
6
+ metadata.gz: 54244ec2572f296b21d4e786b21cda3d2bf826866bf684452b67410668ed05f08a9908bfba955fbc65fbf2ef2e45530c4e6f19bafcfa4ff2ddc8bad2315b6357
7
+ data.tar.gz: d0dfce86c9d6ba9f534f64782a0ea534f16f15274f98124e7d5ae74974869ee75f83e1c37f61f92a0199b3053e9f0b0cdbb19167d886829a39e58f89b9a31720
data/app/assets/icons/polaris/AnalyticsMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 11a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0v-5zm4-5a1 1 0 1 1 2 0v10a1 1 0 1 1-2 0V6zm4-2a1 1 0 1 1 2 0v12a1 1 0 1 1-2 0V4zM3 8a1 1 0 0 1 2 0v8a1 1 0 1 1-2 0V8z"/></svg>
data/app/assets/icons/polaris/AppsMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 17a2 2 0 0 1-2-2v-4h6v6H5zm6 0v-6h6v4a2 2 0 0 1-2 2h-4zM3 5v4h6V3H5a2 2 0 0 0-2 2zm8 1a1 1 0 0 1 1-1h1V4a1 1 0 1 1 2 0v1h1a1 1 0 1 1 0 2h-1v1a1 1 0 1 1-2 0V7h-1a1 1 0 0 1-1-1z"/></svg>
data/app/assets/icons/polaris/BlockMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3.6A1.6 1.6 0 0 1 3.6 2H7a1 1 0 0 1 0 2H4v3a1 1 0 0 1-2 0V3.6zM16.4 2A1.6 1.6 0 0 1 18 3.6V7a1 1 0 1 1-2 0V4h-3a1 1 0 1 1 0-2h3.4zm0 16H13a1 1 0 1 1 0-2h3v-3a1 1 0 1 1 2 0v3.4a1.6 1.6 0 0 1-1.6 1.6zM3.6 18A1.6 1.6 0 0 1 2 16.4V13a1 1 0 1 1 2 0v3h3a1 1 0 1 1 0 2H3.6z"/></svg>
data/app/assets/icons/polaris/ButtonMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5.5A1.5 1.5 0 0 1 3.5 4h13A1.5 1.5 0 0 1 18 5.5v4.95l-4.014-2.59c-1.71-1.104-3.953.19-3.853 2.224L10.278 13H3.5A1.5 1.5 0 0 1 2 11.5v-6z"/><path d="M12.131 9.999a.5.5 0 0 1 .77-.445l4.869 3.142a.5.5 0 0 1-.021.853l-1.425.823 1.229 2.128a1 1 0 1 1-1.732 1l-1.23-2.128-1.424.822a.5.5 0 0 1-.75-.408L12.131 10z"/></svg>
data/app/assets/icons/polaris/CaretDownMinor.svg CHANGED
@@ -1 +1 @@
1
- <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m5 8 5 5 5-5H5z"/></svg>
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13.098 8H6.902c-.751 0-1.172.754-.708 1.268L9.292 12.7c.36.399 1.055.399 1.416 0l3.098-3.433C14.27 8.754 13.849 8 13.098 8z"/></svg>
data/app/assets/icons/polaris/CaretUpMinor.svg CHANGED
@@ -1 +1 @@
1
- <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m15 12-5-5-5 5h10z"/></svg>
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6.902 12h6.196c.751 0 1.172-.754.708-1.268L10.708 7.3c-.36-.399-1.055-.399-1.416 0l-3.098 3.433C5.73 11.246 6.151 12 6.902 12z"/></svg>
data/app/assets/icons/polaris/CircleTickMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M2 10a8 8 0 1 0 16 0 8 8 0 0 0-16 0zm12.16-1.44a.8.8 0 0 0-1.12-1.12L9.2 11.28 7.36 9.44a.8.8 0 0 0-1.12 1.12l2.4 2.4c.32.32.8.32 1.12 0l4.4-4.4z"/></svg>
data/app/assets/icons/polaris/Columns3Minor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16 2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h12zm-2.667 2H16v12h-2.667V4zM8.667 4h2.666v12H8.667V4zm-2 0H4v12h2.667V4z"/></svg>
data/app/assets/icons/polaris/CustomersMinor.svg CHANGED
@@ -1 +1 @@
1
- <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.11 2.24a3.44 3.44 0 0 0-3.44 3.43 3.44 3.44 0 0 0 6.88 0 3.44 3.44 0 0 0-3.44-3.43zm0 15.46c2.8 0 5.27-1.36 6.84-3.43-1.57-2.08-4.04-3.44-6.84-3.44s-5.26 1.36-6.83 3.44a8.55 8.55 0 0 0 6.83 3.43z"/></svg>
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-3.5 8a2.5 2.5 0 0 1-1.768-4.268C5.322 12.155 7.2 11 10 11s4.678 1.155 5.268 1.732A2.5 2.5 0 0 1 13.5 17h-7z"/></svg>
data/app/assets/icons/polaris/DiscountsMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 3.072a2 2 0 0 0-.99 1.939 2 2 0 0 0-1.826 3.163 2 2 0 0 0 0 3.652A2 2 0 0 0 5.01 14.99a2 2 0 0 0 3.164 1.828 2 2 0 0 0 3.652 0 2 2 0 0 0 3.164-1.827 2 2 0 0 0 1.826-3.164 2 2 0 0 0 0-3.652A2 2 0 0 0 14.99 5.01a2 2 0 0 0-3.163-1.826 2 2 0 0 0-3.654 0A2 2 0 0 0 6 3.072zm6.832 4.483a1 1 0 1 0-1.664-1.11l-4 6a1 1 0 0 0 1.664 1.11l4-6zM7 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm7 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>
data/app/assets/icons/polaris/DropdownMinor.svg CHANGED
@@ -1 +1 @@
1
- <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m5 8 5 5 5-5H5z"/></svg>
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13.098 8H6.902c-.751 0-1.172.754-.708 1.268L9.292 12.7c.36.399 1.055.399 1.416 0l3.098-3.433C14.27 8.754 13.849 8 13.098 8z"/></svg>
data/app/assets/icons/polaris/FinancesMajor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H5zm7 6.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/><path fill-rule="evenodd" d="M16 15v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1v7a1 1 0 0 0 1 1h13z"/></svg>
data/app/assets/icons/polaris/FinancesMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 3a3 3 0 0 0-3 3v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H6a1 1 0 0 1 0-2h9a1 1 0 1 0 0-2H6zm8 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>
data/app/assets/icons/polaris/HomeMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.555 3.168a1 1 0 0 0-1.11 0L3.891 6.87A2 2 0 0 0 3 8.535V15a2 2 0 0 0 2 2h2a1 1 0 0 0 1-1v-4h4v4a1 1 0 0 0 1 1h2a2 2 0 0 0 2-2V8.535a2 2 0 0 0-.89-1.664l-5.555-3.703z"/></svg>
data/app/assets/icons/polaris/MarketingMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 4a5 5 0 0 0-.163 9.997l.662 1.986a7 7 0 1 1 6.484-6.484l-1.986-.662A5 5 0 0 0 9 4z"/><path d="M9 8a1 1 0 0 0 0 2v2a3 3 0 1 1 3-3h-2a1 1 0 0 0-1-1z"/><path d="M11.316 10.051a1 1 0 0 0-1.265 1.265l2 6a1 1 0 0 0 1.898 0l.842-2.525 2.525-.842a1 1 0 0 0 0-1.898l-6-2z"/></svg>
data/app/assets/icons/polaris/OnlineStoreMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2a1 1 0 1 1 0 2H6a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-1a1 1 0 1 1 0-2h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5zm1.986 3.836a1 1 0 0 0-1.972.329C5.237 8.504 6.579 11 10 11c3.42 0 4.763-2.496 4.986-3.835a1 1 0 1 0-1.972-.33C12.904 7.497 12.179 9 10 9 7.82 9 7.097 7.496 6.986 6.836z"/></svg>
data/app/assets/icons/polaris/OrdersMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3.735 5.507A3 3 0 0 1 6.695 3h6.61a3 3 0 0 1 2.96 2.507L17 10v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5l.735-4.493zM6.695 5a1 1 0 0 0-.987.836L5 10v1h1.394a3 3 0 0 1 1.665.504l.832.555a2 2 0 0 0 2.218 0l.832-.555A3 3 0 0 1 13.607 11H15v-1l-.708-4.164A1 1 0 0 0 13.306 5H6.694z"/></svg>
data/app/assets/icons/polaris/ProductsMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.408 3H16a1 1 0 0 1 1 1v5.592a2 2 0 0 1-.57 1.399l-5.162 5.277a2.5 2.5 0 0 1-3.536 0l-4-4a2.5 2.5 0 0 1 0-3.536l.008-.008L9.01 3.57A2 2 0 0 1 10.407 3zM13.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>
data/app/assets/icons/polaris/QuestionMarkInverseMajor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm-7.071.929A10 10 0 1 1 17.07 17.07 10 10 0 0 1 2.93 2.93z"/><path d="M11.126 13.002H8.99V11.86c.01-1.966.492-2.254 1.374-2.782.093-.056.19-.114.293-.178.73-.459 1.292-1.038 1.292-1.883 0-.948-.743-1.564-1.666-1.564-.852 0-1.657.398-1.712 1.533H6.305c.06-2.294 1.877-3.487 3.99-3.487 2.306 0 3.894 1.447 3.894 3.488 0 1.382-.695 2.288-1.806 2.952l-.237.144c-.79.475-1.009.607-1.02 1.777v1.142zm.17 2.012a1.344 1.344 0 0 1-1.327 1.328 1.32 1.32 0 0 1-1.227-1.834 1.318 1.318 0 0 1 1.227-.81c.712 0 1.322.592 1.328 1.316h-.001z"/></svg>
data/app/assets/icons/polaris/QuestionMarkInverseMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 12H9v-.148c0-.876.306-1.499 1-1.852.385-.195 1-.568 1-1a1.001 1.001 0 0 0-2 0H7c0-1.654 1.346-3 3-3s3 1 3 3-2 2.165-2 3zm-2 3h2v-2H9v2z"/><path d="M10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm-8 6a8 8 0 1 1 16 0 8 8 0 0 1-16 0z"/></svg>
data/app/assets/icons/polaris/SelectMinor.svg CHANGED
@@ -1 +1 @@
1
- <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m10 16-4-4h8l-4 4zm0-12 4 4H6l4-4z"/></svg>
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7.676 9h4.648c.563 0 .879-.603.53-1.014L10.531 5.24a.708.708 0 0 0-1.062 0L7.145 7.986C6.798 8.397 7.113 9 7.676 9zm4.648 2H7.676c-.563 0-.878.603-.53 1.014l2.323 2.746c.27.32.792.32 1.062 0l2.323-2.746c.349-.411.033-1.014-.53-1.014z"/></svg>
data/app/assets/icons/polaris/TitleMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 2a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0 2 2 0 0 1 2-2h2v10.999A1 1 0 0 1 7 16h-.001A1 1 0 0 0 7 18h6a1 1 0 1 0 0-2 1 1 0 0 1-1-1V4h2a2 2 0 0 1 2 2 1 1 0 1 0 2 0V3a1 1 0 0 0-1-1H3z"/></svg>
data/app/assets/icons/polaris/WandMinor.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3.44 15.56a1.5 1.5 0 0 1 0-2.12l6.792-6.793 3.121 3.12-6.792 6.794a1.5 1.5 0 0 1-2.122 0l-1-1zm11.328-7.206L16.56 6.56a1.5 1.5 0 0 0 0-2.122l-1-1a1.5 1.5 0 0 0-2.122 0l-1.793 1.793 3.122 3.122zM13 12c1 0 2-1 2-2 0 1 1 2 2 2-1 0-2 1-2 2 0-1-1-2-2-2zM6 5c1 0 2-1 2-2 0 1 1 2 2 2-1 0-2 1-2 2 0-1-1-2-2-2z"/></svg>
data/app/assets/javascripts/polaris_view_components/collapsible_controller.js ADDED
@@ -0,0 +1,19 @@
1
+ import { Controller } from "@hotwired/stimulus"
2
+
3
+ export default class extends Controller {
4
+ toggle() {
5
+ if (this.isClosed) {
6
+ this.element.style.maxHeight = "none"
7
+ this.element.style.overflow = "visible"
8
+ this.element.classList.remove("Polaris-Collapsible--isFullyClosed")
9
+ } else {
10
+ this.element.style.maxHeight = "0px"
11
+ this.element.style.overflow = "hidden"
12
+ this.element.classList.add("Polaris-Collapsible--isFullyClosed")
13
+ }
14
+ }
15
+
16
+ get isClosed() {
17
+ return this.element.classList.contains("Polaris-Collapsible--isFullyClosed")
18
+ }
19
+ }
data/app/assets/javascripts/polaris_view_components/dropzone_controller.js CHANGED
@@ -164,6 +164,9 @@ export default class extends Controller {
164
164
  onDirectUploadsEnd = () => {
165
165
  this.enable()
166
166
  this.clearFiles()
167
+
168
+ if (this.acceptedFiles.length === 0) return
169
+
167
170
  this.loaderTarget.classList.remove("Polaris--hidden")
168
171
  }
169
172
 
@@ -172,10 +175,16 @@ export default class extends Controller {
172
175
  const { id, file } = detail
173
176
  const dropzone = target.closest('.Polaris-DropZone')
174
177
  if (!dropzone) return
178
+ if (this.acceptedFiles.length === 0) return
175
179
 
176
- const content = dropzone.querySelector(`[data-file-name="${file.name}"]`)
177
- const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]')
178
- progressBar.id = `direct-upload-${id}`
180
+ if (this.sizeValue == 'small') {
181
+ this.clearFiles()
182
+ this.loaderTarget.classList.remove("Polaris--hidden")
183
+ } else {
184
+ const content = dropzone.querySelector(`[data-file-name="${file.name}"]`)
185
+ const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]')
186
+ progressBar.id = `direct-upload-${id}`
187
+ }
179
188
  }
180
189
 
181
190
  onDirectUploadStart = (event) => {
@@ -258,6 +267,7 @@ export default class extends Controller {
258
267
  this.toggleErrorOverlay(true)
259
268
 
260
269
  const dropRejectedEvent = new CustomEvent('polaris-dropzone:drop-rejected', {
270
+ bubbles: true,
261
271
  detail: { rejectedFiles: this.rejectedFiles }
262
272
  })
263
273
  this.element.dispatchEvent(dropRejectedEvent)
@@ -270,12 +280,14 @@ export default class extends Controller {
270
280
  this.toggleErrorOverlay(false)
271
281
 
272
282
  const dropAcceptedEvent = new CustomEvent('polaris-dropzone:drop-accepted', {
283
+ bubbles: true,
273
284
  detail: {acceptedFiles: this.acceptedFiles }
274
285
  })
275
286
  this.element.dispatchEvent(dropAcceptedEvent)
276
287
  }
277
288
 
278
289
  const dropEvent = new CustomEvent('polaris-dropzone:drop', {
290
+ bubbles: true,
279
291
  detail: {
280
292
  files: this.files,
281
293
  acceptedFiles: this.acceptedFiles,
data/app/assets/javascripts/polaris_view_components/frame_controller.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Controller } from "@hotwired/stimulus"
2
- import { useTransition } from "stimulus-use"
2
+ import { useTransition } from "./utils"
3
3
 
4
4
  export default class extends Controller {
5
5
  static targets = ["navigationOverlay", "navigation", "saveBar"]
data/app/assets/javascripts/polaris_view_components/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import Autocomplete from './autocomplete_controller'
2
2
  import Button from './button_controller'
3
+ import Collapsible from './collapsible_controller'
3
4
  import Dropzone from './dropzone_controller'
4
5
  import Frame from './frame_controller'
5
6
  import Modal from './modal_controller'
@@ -17,6 +18,7 @@ export { Frame, Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextF
17
18
  export function registerPolarisControllers(application) {
18
19
  application.register('polaris-autocomplete', Autocomplete)
19
20
  application.register('polaris-button', Button)
21
+ application.register('polaris-collapsible', Collapsible)
20
22
  application.register('polaris-dropzone', Dropzone)
21
23
  application.register('polaris-frame', Frame)
22
24
  application.register('polaris-modal', Modal)
data/app/assets/javascripts/polaris_view_components/polaris_controller.js CHANGED
@@ -17,6 +17,10 @@ export default class extends Controller {
17
17
  this.findElement("toast").show()
18
18
  }
19
19
 
20
+ toggleCollapsible() {
21
+ this.findElement("collapsible").toggle()
22
+ }
23
+
20
24
  // Private
21
25
 
22
26
  findElement(type) {
data/app/assets/javascripts/polaris_view_components/text_field_controller.js CHANGED
@@ -26,7 +26,12 @@ export default class extends Controller {
26
26
  }
27
27
 
28
28
  clear() {
29
+ const oldValue = this.value
29
30
  this.value = null
31
+
32
+ if (this.value != oldValue) {
33
+ this.inputTarget.dispatchEvent(new Event('change'))
34
+ }
30
35
  }
31
36
 
32
37
  increase() {
data/app/assets/javascripts/polaris_view_components/toast_controller.js CHANGED
@@ -37,8 +37,10 @@ export default class extends Controller {
37
37
  }
38
38
 
39
39
  getStyle(position) {
40
- const translateIn = -80 * position
41
- const translateOut = 150 - (80 * position)
40
+ const height = this.element.offsetHeight + this.heightOffset
41
+ const translateIn = height * -1
42
+ const translateOut = 150 - height
43
+
42
44
  return `--toast-translate-y-in: ${translateIn}px; --toast-translate-y-out: ${translateOut}px;`
43
45
  }
44
46
 
@@ -65,4 +67,13 @@ export default class extends Controller {
65
67
  get position() {
66
68
  return this.visibleToasts.filter(el => !this.element.isEqualNode(el)).length + 1
67
69
  }
70
+
71
+ get heightOffset() {
72
+ return this.visibleToasts
73
+ .filter(el => {
74
+ return !this.element.isEqualNode(el) && this.element.dataset.position > el.dataset.position
75
+ })
76
+ .map(el => el.offsetHeight)
77
+ .reduce((a, b) => a + b, 0)
78
+ }
68
79
  }
data/app/assets/javascripts/polaris_view_components/{utils.js → utils/index.js} RENAMED
@@ -4,7 +4,7 @@
4
4
  *
5
5
  * @return {Function}
6
6
  */
7
- export function debounce (fn, wait) {
7
+ export function debounce (fn, wait) {
8
8
  let timeoutId
9
9
 
10
10
  return (...args) => {
@@ -21,3 +21,5 @@ export function formatBytes (bytes, decimals) {
21
21
  i = Math.floor(Math.log(bytes) / Math.log(k))
22
22
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
23
23
  }
24
+
25
+ export { useTransition } from "./use-transition"
data/app/assets/javascripts/polaris_view_components/utils/use-transition.js ADDED
@@ -0,0 +1,162 @@
1
+ const alpineNames = {
2
+ enterFromClass: 'enter',
3
+ enterActiveClass: 'enterStart',
4
+ enterToClass: 'enterEnd',
5
+ leaveFromClass: 'leave',
6
+ leaveActiveClass: 'leaveStart',
7
+ leaveToClass: 'leaveEnd'
8
+ }
9
+ const defaultOptions = {
10
+ transitioned: false,
11
+ hiddenClass: 'hidden',
12
+ preserveOriginalClass: true,
13
+ removeToClasses: true
14
+ };
15
+ export const useTransition = (controller, options = {}) => {
16
+ var _a, _b, _c;
17
+ const targetName = controller.element.dataset.transitionTarget;
18
+ let targetFromAttribute;
19
+ if (targetName) {
20
+ targetFromAttribute = controller[`${targetName}Target`];
21
+ }
22
+ const targetElement = (options === null || options === void 0 ? void 0 : options.element) || targetFromAttribute || controller.element;
23
+ // data attributes are only available on HTMLElement and SVGElement
24
+ if (!(targetElement instanceof HTMLElement || targetElement instanceof SVGElement))
25
+ return;
26
+ const dataset = targetElement.dataset;
27
+ const leaveAfter = parseInt(dataset.leaveAfter || '') || options.leaveAfter || 0;
28
+ const { transitioned, hiddenClass, preserveOriginalClass, removeToClasses } = Object.assign(defaultOptions, options);
29
+ const controllerEnter = (_a = controller.enter) === null || _a === void 0 ? void 0 : _a.bind(controller);
30
+ const controllerLeave = (_b = controller.leave) === null || _b === void 0 ? void 0 : _b.bind(controller);
31
+ const controllerToggleTransition = (_c = controller.toggleTransition) === null || _c === void 0 ? void 0 : _c.bind(controller);
32
+ async function enter(event) {
33
+ if (controller.transitioned)
34
+ return;
35
+ controller.transitioned = true;
36
+ controllerEnter && controllerEnter(event);
37
+ const enterFromClasses = getAttribute('enterFrom', options, dataset);
38
+ const enterActiveClasses = getAttribute('enterActive', options, dataset);
39
+ const enterToClasses = getAttribute('enterTo', options, dataset);
40
+ const leaveToClasses = getAttribute('leaveTo', options, dataset);
41
+ if (!!hiddenClass) {
42
+ targetElement.classList.remove(hiddenClass);
43
+ }
44
+ if (!removeToClasses) {
45
+ removeClasses(targetElement, leaveToClasses);
46
+ }
47
+ await transition(targetElement, enterFromClasses, enterActiveClasses, enterToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
48
+ if (leaveAfter > 0) {
49
+ setTimeout(() => {
50
+ leave(event);
51
+ }, leaveAfter);
52
+ }
53
+ }
54
+ async function leave(event) {
55
+ if (!controller.transitioned)
56
+ return;
57
+ controller.transitioned = false;
58
+ controllerLeave && controllerLeave(event);
59
+ const leaveFromClasses = getAttribute('leaveFrom', options, dataset);
60
+ const leaveActiveClasses = getAttribute('leaveActive', options, dataset);
61
+ const leaveToClasses = getAttribute('leaveTo', options, dataset);
62
+ const enterToClasses = getAttribute('enterTo', options, dataset);
63
+ if (!removeToClasses) {
64
+ removeClasses(targetElement, enterToClasses);
65
+ }
66
+ await transition(targetElement, leaveFromClasses, leaveActiveClasses, leaveToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
67
+ if (!!hiddenClass) {
68
+ targetElement.classList.add(hiddenClass);
69
+ }
70
+ }
71
+ function toggleTransition(event) {
72
+ controllerToggleTransition && controllerToggleTransition(event);
73
+ if (controller.transitioned) {
74
+ leave();
75
+ }
76
+ else {
77
+ enter();
78
+ }
79
+ }
80
+ async function transition(element, initialClasses, activeClasses, endClasses, hiddenClass, preserveOriginalClass, removeEndClasses) {
81
+ // if there's any overlap between the current set of classes and initialClasses/activeClasses/endClasses,
82
+ // we should remove them before we start and add them back at the end
83
+ const stashedClasses = [];
84
+ if (preserveOriginalClass) {
85
+ initialClasses.forEach(cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls));
86
+ activeClasses.forEach(cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls));
87
+ endClasses.forEach(cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls));
88
+ }
89
+ // Add initial class before element start transition
90
+ addClasses(element, initialClasses);
91
+ // remove the overlapping classes
92
+ removeClasses(element, stashedClasses);
93
+ // Add active class before element start transition and maitain it during the entire transition.
94
+ addClasses(element, activeClasses);
95
+ await nextAnimationFrame();
96
+ // remove the initial class on frame after the beginning of the transition
97
+ removeClasses(element, initialClasses);
98
+ // add the endClass on frame after the beginning of the transition
99
+ addClasses(element, endClasses);
100
+ // dynamically comput the duration of the transition from the style of the element
101
+ await afterTransition(element);
102
+ // remove both activeClasses and endClasses
103
+ removeClasses(element, activeClasses);
104
+ if (removeEndClasses) {
105
+ removeClasses(element, endClasses);
106
+ }
107
+ // restore the overlaping classes
108
+ addClasses(element, stashedClasses);
109
+ }
110
+ function initialState() {
111
+ controller.transitioned = transitioned;
112
+ if (transitioned) {
113
+ if (!!hiddenClass) {
114
+ targetElement.classList.remove(hiddenClass);
115
+ }
116
+ enter();
117
+ }
118
+ else {
119
+ if (!!hiddenClass) {
120
+ targetElement.classList.add(hiddenClass);
121
+ }
122
+ leave();
123
+ }
124
+ }
125
+ function addClasses(element, classes) {
126
+ if (classes.length > 0) {
127
+ element.classList.add(...classes);
128
+ }
129
+ }
130
+ function removeClasses(element, classes) {
131
+ if (classes.length > 0) {
132
+ element.classList.remove(...classes);
133
+ }
134
+ }
135
+ initialState();
136
+ Object.assign(controller, { enter, leave, toggleTransition });
137
+ return [enter, leave, toggleTransition];
138
+ };
139
+ function getAttribute(name, options, dataset) {
140
+ const datasetName = `transition${name[0].toUpperCase()}${name.substr(1)}`;
141
+ const datasetAlpineName = alpineNames[name];
142
+ const classes = options[name] || dataset[datasetName] || dataset[datasetAlpineName] || ' ';
143
+ return isEmpty(classes) ? [] : classes.split(' ');
144
+ }
145
+ async function afterTransition(element) {
146
+ return new Promise(resolve => {
147
+ const duration = Number(getComputedStyle(element).transitionDuration.split(',')[0].replace('s', '')) * 1000;
148
+ setTimeout(() => {
149
+ resolve(duration);
150
+ }, duration);
151
+ });
152
+ }
153
+ async function nextAnimationFrame() {
154
+ return new Promise(resolve => {
155
+ requestAnimationFrame(() => {
156
+ requestAnimationFrame(resolve);
157
+ });
158
+ });
159
+ }
160
+ function isEmpty(str) {
161
+ return str.length === 0 || !str.trim();
162
+ }