polaris_view_components 0.8.0 → 0.9.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) 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/toast_controller.js +13 -2
  31. data/app/assets/javascripts/polaris_view_components/{utils.js → utils/index.js} +3 -1
  32. data/app/assets/javascripts/polaris_view_components/utils/use-transition.js +162 -0
  33. data/app/assets/javascripts/polaris_view_components.js +194 -162
  34. data/app/assets/stylesheets/polaris_view_components/custom.css +4 -0
  35. data/app/assets/stylesheets/polaris_view_components.css +41 -33
  36. data/app/components/polaris/collapsible_component.rb +37 -0
  37. data/app/components/polaris/dropzone_component.html.erb +1 -1
  38. data/app/components/polaris/keyboard_key_component.rb +20 -0
  39. data/app/components/polaris/resource_item_component.rb +3 -1
  40. data/app/components/polaris/skeleton_display_text_component.rb +32 -0
  41. data/app/components/polaris/skeleton_thumbnail_component.rb +31 -0
  42. data/app/helpers/polaris/form_builder.rb +1 -1
  43. data/app/helpers/polaris/view_helper.rb +4 -0
  44. data/config/locales/en.yml +6 -0
  45. data/lib/polaris/view_components/version.rb +1 -1
  46. metadata +28 -15
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2770c340a3ec833f8538a56a85c52a73cb2a62fdd3e7710713d4af38fe08c838
4
- data.tar.gz: bb143c334cb2a57b29e3a103d8e2179cd0e3a972e80a908a15e35ecf4e3df669
3
+ metadata.gz: 910750f06bdf1ff3095625a911c884155cca167b4dba43fd9e7aa9d61cc0ba72
4
+ data.tar.gz: a0bc6e2afc097fc27148cc8fcb91282380fe6ec878dfcf8828703aed6edec433
5
5
  SHA512:
6
- metadata.gz: 2ac4c9763c823f62b1590928d7b1cc23d549518ae3cb694f0d36128e1fc7bee3def5d9c50008ed5335b42e0d4a66777c525002a1e3060f2060431e630bf5a3b2
7
- data.tar.gz: 580747d9aa8af31dea5a8a13c6a59ed4cbed2f4ebbe8d2787600d5c411e6659e2efd6047c00c40778e277800fa3a71b903354afc2423f86d39f3dfea4039df9a
6
+ metadata.gz: 1d22ebdc5b83c1b52157c8e9b1f59cc2477546b521955329fff0b012a4c0472db8adad6b3bef881d108ad2e9388d2b23f44adb0d9e67fb0bb793015e4d23500b
7
+ data.tar.gz: 4891914fde6deb943f74567a89334bee1a8ada3736d3547acbf47d834446974e42c83ddb9d0b7ae6cf6c3d5017ce70d9cbf74c8b4706097695a5b7bda0b0f3ea
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/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
+ }