polaris_view_components 0.9.0 → 0.10.1

data/app/assets/javascripts/polaris_view_components.js

@@ -2,6 +2,163 @@ import { Controller } from "@hotwired/stimulus";
 
 import { get } from "@rails/request.js";
 
+const alpineNames = {
+  enterFromClass: "enter",
+  enterActiveClass: "enterStart",
+  enterToClass: "enterEnd",
+  leaveFromClass: "leave",
+  leaveActiveClass: "leaveStart",
+  leaveToClass: "leaveEnd"
+};
+
+const defaultOptions = {
+  transitioned: false,
+  hiddenClass: "hidden",
+  preserveOriginalClass: true,
+  removeToClasses: true
+};
+
+const useTransition = (controller, options = {}) => {
+  var _a, _b, _c;
+  const targetName = controller.element.dataset.transitionTarget;
+  let targetFromAttribute;
+  if (targetName) {
+    targetFromAttribute = controller[`${targetName}Target`];
+  }
+  const targetElement = (options === null || options === void 0 ? void 0 : options.element) || targetFromAttribute || controller.element;
+  if (!(targetElement instanceof HTMLElement || targetElement instanceof SVGElement)) return;
+  const dataset = targetElement.dataset;
+  const leaveAfter = parseInt(dataset.leaveAfter || "") || options.leaveAfter || 0;
+  const {transitioned: transitioned, hiddenClass: hiddenClass, preserveOriginalClass: preserveOriginalClass, removeToClasses: removeToClasses} = Object.assign(defaultOptions, options);
+  const controllerEnter = (_a = controller.enter) === null || _a === void 0 ? void 0 : _a.bind(controller);
+  const controllerLeave = (_b = controller.leave) === null || _b === void 0 ? void 0 : _b.bind(controller);
+  const controllerToggleTransition = (_c = controller.toggleTransition) === null || _c === void 0 ? void 0 : _c.bind(controller);
+  async function enter(event) {
+    if (controller.transitioned) return;
+    controller.transitioned = true;
+    controllerEnter && controllerEnter(event);
+    const enterFromClasses = getAttribute("enterFrom", options, dataset);
+    const enterActiveClasses = getAttribute("enterActive", options, dataset);
+    const enterToClasses = getAttribute("enterTo", options, dataset);
+    const leaveToClasses = getAttribute("leaveTo", options, dataset);
+    if (!!hiddenClass) {
+      targetElement.classList.remove(hiddenClass);
+    }
+    if (!removeToClasses) {
+      removeClasses(targetElement, leaveToClasses);
+    }
+    await transition(targetElement, enterFromClasses, enterActiveClasses, enterToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
+    if (leaveAfter > 0) {
+      setTimeout((() => {
+        leave(event);
+      }), leaveAfter);
+    }
+  }
+  async function leave(event) {
+    if (!controller.transitioned) return;
+    controller.transitioned = false;
+    controllerLeave && controllerLeave(event);
+    const leaveFromClasses = getAttribute("leaveFrom", options, dataset);
+    const leaveActiveClasses = getAttribute("leaveActive", options, dataset);
+    const leaveToClasses = getAttribute("leaveTo", options, dataset);
+    const enterToClasses = getAttribute("enterTo", options, dataset);
+    if (!removeToClasses) {
+      removeClasses(targetElement, enterToClasses);
+    }
+    await transition(targetElement, leaveFromClasses, leaveActiveClasses, leaveToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
+    if (!!hiddenClass) {
+      targetElement.classList.add(hiddenClass);
+    }
+  }
+  function toggleTransition(event) {
+    controllerToggleTransition && controllerToggleTransition(event);
+    if (controller.transitioned) {
+      leave();
+    } else {
+      enter();
+    }
+  }
+  async function transition(element, initialClasses, activeClasses, endClasses, hiddenClass, preserveOriginalClass, removeEndClasses) {
+    const stashedClasses = [];
+    if (preserveOriginalClass) {
+      initialClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
+      activeClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
+      endClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
+    }
+    addClasses(element, initialClasses);
+    removeClasses(element, stashedClasses);
+    addClasses(element, activeClasses);
+    await nextAnimationFrame();
+    removeClasses(element, initialClasses);
+    addClasses(element, endClasses);
+    await afterTransition(element);
+    removeClasses(element, activeClasses);
+    if (removeEndClasses) {
+      removeClasses(element, endClasses);
+    }
+    addClasses(element, stashedClasses);
+  }
+  function initialState() {
+    controller.transitioned = transitioned;
+    if (transitioned) {
+      if (!!hiddenClass) {
+        targetElement.classList.remove(hiddenClass);
+      }
+      enter();
+    } else {
+      if (!!hiddenClass) {
+        targetElement.classList.add(hiddenClass);
+      }
+      leave();
+    }
+  }
+  function addClasses(element, classes) {
+    if (classes.length > 0) {
+      element.classList.add(...classes);
+    }
+  }
+  function removeClasses(element, classes) {
+    if (classes.length > 0) {
+      element.classList.remove(...classes);
+    }
+  }
+  initialState();
+  Object.assign(controller, {
+    enter: enter,
+    leave: leave,
+    toggleTransition: toggleTransition
+  });
+  return [ enter, leave, toggleTransition ];
+};
+
+function getAttribute(name, options, dataset) {
+  const datasetName = `transition${name[0].toUpperCase()}${name.substr(1)}`;
+  const datasetAlpineName = alpineNames[name];
+  const classes = options[name] || dataset[datasetName] || dataset[datasetAlpineName] || " ";
+  return isEmpty(classes) ? [] : classes.split(" ");
+}
+
+async function afterTransition(element) {
+  return new Promise((resolve => {
+    const duration = Number(getComputedStyle(element).transitionDuration.split(",")[0].replace("s", "")) * 1e3;
+    setTimeout((() => {
+      resolve(duration);
+    }), duration);
+  }));
+}
+
+async function nextAnimationFrame() {
+  return new Promise((resolve => {
+    requestAnimationFrame((() => {
+      requestAnimationFrame(resolve);
+    }));
+  }));
+}
+
+function isEmpty(str) {
+  return str.length === 0 || !str.trim();
+}
+
 function debounce$1(fn, wait) {
   let timeoutId;
   return (...args) => {
@@ -204,11 +361,11 @@ class Dropzone extends Controller {
     size: String
   };
   files=[];
-  acceptedFiles=[];
   rejectedFiles=[];
   _dragging=false;
   dragTargets=[];
   previewRendered=false;
+  _acceptedFiles=[];
   _size="large";
   connect() {
     document.body.addEventListener("click", this.onExternalTriggerClick);
@@ -302,6 +459,7 @@ class Dropzone extends Controller {
   onDirectUploadsEnd=() => {
     this.enable();
     this.clearFiles();
+    if (this.acceptedFiles.length === 0) return;
     this.loaderTarget.classList.remove("Polaris--hidden");
   };
   onDirectUploadInitialize=event => {
@@ -309,9 +467,15 @@ class Dropzone extends Controller {
     const {id: id, file: file} = detail;
     const dropzone = target.closest(".Polaris-DropZone");
     if (!dropzone) return;
-    const content = dropzone.querySelector(`[data-file-name="${file.name}"]`);
-    const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]');
-    progressBar.id = `direct-upload-${id}`;
+    if (this.acceptedFiles.length === 0) return;
+    if (this.sizeValue == "small") {
+      this.clearFiles();
+      this.loaderTarget.classList.remove("Polaris--hidden");
+    } else {
+      const content = dropzone.querySelector(`[data-file-name="${file.name}"]`);
+      const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]');
+      progressBar.id = `direct-upload-${id}`;
+    }
   };
   onDirectUploadStart=event => {
     const {id: id} = event.detail;
@@ -381,6 +545,7 @@ class Dropzone extends Controller {
       this.toggleFileUpload(false);
       this.toggleErrorOverlay(true);
       const dropRejectedEvent = new CustomEvent("polaris-dropzone:drop-rejected", {
+        bubbles: true,
         detail: {
           rejectedFiles: this.rejectedFiles
         }
@@ -393,6 +558,7 @@ class Dropzone extends Controller {
       }
       this.toggleErrorOverlay(false);
       const dropAcceptedEvent = new CustomEvent("polaris-dropzone:drop-accepted", {
+        bubbles: true,
         detail: {
           acceptedFiles: this.acceptedFiles
         }
@@ -400,6 +566,7 @@ class Dropzone extends Controller {
       this.element.dispatchEvent(dropAcceptedEvent);
     }
     const dropEvent = new CustomEvent("polaris-dropzone:drop", {
+      bubbles: true,
       detail: {
         files: this.files,
         acceptedFiles: this.acceptedFiles,
@@ -517,6 +684,15 @@ class Dropzone extends Controller {
     sizeClassesToRemove.forEach((className => this.element.classList.remove(className)));
     this.element.classList.add(this.getSizeClass(val));
   }
+  get acceptedFiles() {
+    return this._acceptedFiles;
+  }
+  set acceptedFiles(val) {
+    this._acceptedFiles = val;
+    const list = new DataTransfer;
+    val.forEach((file => list.items.add(file)));
+    this.inputTarget.files = list.files;
+  }
 }
 
 function fileAccepted(file, accept) {
@@ -564,163 +740,6 @@ function isChangeEvent(event) {
   return event.type === "change";
 }
 
-const alpineNames = {
-  enterFromClass: "enter",
-  enterActiveClass: "enterStart",
-  enterToClass: "enterEnd",
-  leaveFromClass: "leave",
-  leaveActiveClass: "leaveStart",
-  leaveToClass: "leaveEnd"
-};
-
-const defaultOptions = {
-  transitioned: false,
-  hiddenClass: "hidden",
-  preserveOriginalClass: true,
-  removeToClasses: true
-};
-
-const useTransition = (controller, options = {}) => {
-  var _a, _b, _c;
-  const targetName = controller.element.dataset.transitionTarget;
-  let targetFromAttribute;
-  if (targetName) {
-    targetFromAttribute = controller[`${targetName}Target`];
-  }
-  const targetElement = (options === null || options === void 0 ? void 0 : options.element) || targetFromAttribute || controller.element;
-  if (!(targetElement instanceof HTMLElement || targetElement instanceof SVGElement)) return;
-  const dataset = targetElement.dataset;
-  const leaveAfter = parseInt(dataset.leaveAfter || "") || options.leaveAfter || 0;
-  const {transitioned: transitioned, hiddenClass: hiddenClass, preserveOriginalClass: preserveOriginalClass, removeToClasses: removeToClasses} = Object.assign(defaultOptions, options);
-  const controllerEnter = (_a = controller.enter) === null || _a === void 0 ? void 0 : _a.bind(controller);
-  const controllerLeave = (_b = controller.leave) === null || _b === void 0 ? void 0 : _b.bind(controller);
-  const controllerToggleTransition = (_c = controller.toggleTransition) === null || _c === void 0 ? void 0 : _c.bind(controller);
-  async function enter(event) {
-    if (controller.transitioned) return;
-    controller.transitioned = true;
-    controllerEnter && controllerEnter(event);
-    const enterFromClasses = getAttribute("enterFrom", options, dataset);
-    const enterActiveClasses = getAttribute("enterActive", options, dataset);
-    const enterToClasses = getAttribute("enterTo", options, dataset);
-    const leaveToClasses = getAttribute("leaveTo", options, dataset);
-    if (!!hiddenClass) {
-      targetElement.classList.remove(hiddenClass);
-    }
-    if (!removeToClasses) {
-      removeClasses(targetElement, leaveToClasses);
-    }
-    await transition(targetElement, enterFromClasses, enterActiveClasses, enterToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
-    if (leaveAfter > 0) {
-      setTimeout((() => {
-        leave(event);
-      }), leaveAfter);
-    }
-  }
-  async function leave(event) {
-    if (!controller.transitioned) return;
-    controller.transitioned = false;
-    controllerLeave && controllerLeave(event);
-    const leaveFromClasses = getAttribute("leaveFrom", options, dataset);
-    const leaveActiveClasses = getAttribute("leaveActive", options, dataset);
-    const leaveToClasses = getAttribute("leaveTo", options, dataset);
-    const enterToClasses = getAttribute("enterTo", options, dataset);
-    if (!removeToClasses) {
-      removeClasses(targetElement, enterToClasses);
-    }
-    await transition(targetElement, leaveFromClasses, leaveActiveClasses, leaveToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
-    if (!!hiddenClass) {
-      targetElement.classList.add(hiddenClass);
-    }
-  }
-  function toggleTransition(event) {
-    controllerToggleTransition && controllerToggleTransition(event);
-    if (controller.transitioned) {
-      leave();
-    } else {
-      enter();
-    }
-  }
-  async function transition(element, initialClasses, activeClasses, endClasses, hiddenClass, preserveOriginalClass, removeEndClasses) {
-    const stashedClasses = [];
-    if (preserveOriginalClass) {
-      initialClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
-      activeClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
-      endClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
-    }
-    addClasses(element, initialClasses);
-    removeClasses(element, stashedClasses);
-    addClasses(element, activeClasses);
-    await nextAnimationFrame();
-    removeClasses(element, initialClasses);
-    addClasses(element, endClasses);
-    await afterTransition(element);
-    removeClasses(element, activeClasses);
-    if (removeEndClasses) {
-      removeClasses(element, endClasses);
-    }
-    addClasses(element, stashedClasses);
-  }
-  function initialState() {
-    controller.transitioned = transitioned;
-    if (transitioned) {
-      if (!!hiddenClass) {
-        targetElement.classList.remove(hiddenClass);
-      }
-      enter();
-    } else {
-      if (!!hiddenClass) {
-        targetElement.classList.add(hiddenClass);
-      }
-      leave();
-    }
-  }
-  function addClasses(element, classes) {
-    if (classes.length > 0) {
-      element.classList.add(...classes);
-    }
-  }
-  function removeClasses(element, classes) {
-    if (classes.length > 0) {
-      element.classList.remove(...classes);
-    }
-  }
-  initialState();
-  Object.assign(controller, {
-    enter: enter,
-    leave: leave,
-    toggleTransition: toggleTransition
-  });
-  return [ enter, leave, toggleTransition ];
-};
-
-function getAttribute(name, options, dataset) {
-  const datasetName = `transition${name[0].toUpperCase()}${name.substr(1)}`;
-  const datasetAlpineName = alpineNames[name];
-  const classes = options[name] || dataset[datasetName] || dataset[datasetAlpineName] || " ";
-  return isEmpty(classes) ? [] : classes.split(" ");
-}
-
-async function afterTransition(element) {
-  return new Promise((resolve => {
-    const duration = Number(getComputedStyle(element).transitionDuration.split(",")[0].replace("s", "")) * 1e3;
-    setTimeout((() => {
-      resolve(duration);
-    }), duration);
-  }));
-}
-
-async function nextAnimationFrame() {
-  return new Promise((resolve => {
-    requestAnimationFrame((() => {
-      requestAnimationFrame(resolve);
-    }));
-  }));
-}
-
-function isEmpty(str) {
-  return str.length === 0 || !str.trim();
-}
-
 class Frame extends Controller {
   static targets=[ "navigationOverlay", "navigation", "saveBar" ];
   connect() {
@@ -2392,7 +2411,11 @@ class TextField extends Controller {
     this.valueValue = this.inputTarget.value;
   }
   clear() {
+    const oldValue = this.value;
     this.value = null;
+    if (this.value != oldValue) {
+      this.inputTarget.dispatchEvent(new Event("change"));
+    }
   }
   increase() {
     this.changeNumber(1);

data/app/assets/stylesheets/polaris_view_components/custom.css

@@ -116,6 +116,15 @@ a.Polaris-Tag__Button {
       justify-content: center;
     }
 
+    &--sizeMedium {
+      justify-content: center;
+      text-align: center;
+
+      .Polaris-Stack.Polaris-Stack--alignmentCenter {
+        justify-content: center;
+      }
+    }
+
     &--sizeSmall {
       padding: 0;
       justify-content: center;
@@ -137,5 +146,33 @@ a.Polaris-Tag__Button {
     align-items: center;
     text-align: center;
     justify-content: center;
+
+    .Polaris-Spinner--sizeSmall {
+      height: 20px;
+    }
+  }
+}
+
+/* ActionMenu */
+.Polaris-ActionMenu {
+  &--mobile {
+    @media (min-width: 768px){
+      display: none;
+    }
+  }
+
+  &--desktop {
+    display: none;
+
+    @media (min-width: 768px){
+      display: block;
+    }
+  }
+}
+
+/* Page Pagination */
+@media (max-width: 768px){
+  .Polaris-Page-Header__PaginationWrapper {
+    display: none;
   }
 }

data/app/assets/stylesheets/polaris_view_components.css

@@ -2325,6 +2325,13 @@ a.Polaris-Tag__Button {
       text-align: center;
       justify-content: center;
     }
+.Polaris-DropZone__Preview--sizeMedium {
+      justify-content: center;
+      text-align: center;
+    }
+.Polaris-DropZone__Preview--sizeMedium .Polaris-Stack.Polaris-Stack--alignmentCenter {
+        justify-content: center;
+      }
 .Polaris-DropZone__Preview--sizeSmall {
       padding: 0;
       justify-content: center;
@@ -2343,3 +2350,26 @@ a.Polaris-Tag__Button {
     text-align: center;
     justify-content: center;
   }
+.Polaris-DropZone__Loader .Polaris-Spinner--sizeSmall {
+      height: 20px;
+    }
+/* ActionMenu */
+@media (min-width: 768px){
+.Polaris-ActionMenu--mobile {
+      display: none
+  }
+    }
+.Polaris-ActionMenu--desktop {
+    display: none;
+  }
+@media (min-width: 768px){
+.Polaris-ActionMenu--desktop {
+      display: block
+  }
+    }
+/* Page Pagination */
+@media (max-width: 768px){
+  .Polaris-Page-Header__PaginationWrapper {
+    display: none;
+  }
+}

data/app/components/polaris/action_list/item_component.rb

@@ -5,6 +5,7 @@ class Polaris::ActionList::ItemComponent < Polaris::Component
   def initialize(
     url: nil,
     icon: nil,
+    icon_name: nil,
     help_text: nil,
     active: false,
     destructive: false,
@@ -12,7 +13,7 @@ class Polaris::ActionList::ItemComponent < Polaris::Component
     **system_arguments
   )
     @url = url
-    @icon = icon
+    @icon = icon || icon_name
     @help_text = help_text
     @active = active
     @destructive = destructive

data/app/components/polaris/button_component.html.erb

@@ -6,9 +6,9 @@
       </span>
     <% end %>
 
-    <% if icon.present? %>
+    <% if icon.present? || @icon_name.present? %>
       <div class="Polaris-Button__Icon">
-        <%= icon %>
+        <%= icon.presence || polaris_icon(name: @icon_name) %>
       </div>
       <% if content.present? %>
         &nbsp;

data/app/components/polaris/dropzone_component.html.erb

@@ -4,10 +4,12 @@
       class="Polaris-DropZone__Overlay Polaris-VisuallyHidden"
       data-polaris-dropzone-target="overlay"
     >
-      <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
-        <% stack.item do %>
-          <%= render Polaris::DisplayTextComponent.new(size: :small) do %>
-            <%= @overlay_text %>
+      <% unless @size == :small %>
+        <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
+          <% stack.item do %>
+            <%= render Polaris::DisplayTextComponent.new(size: :small) do %>
+              <%= @overlay_text %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>
@@ -68,7 +70,7 @@
       <% end %>
 
       <div class="Polaris-DropZone__Loader Polaris--hidden" data-polaris-dropzone-target="loader">
-        <%= polaris_spinner %>
+        <%= polaris_spinner(size: (@size == :small) ? :small : :large) %>
       </div>
     </div>
 
@@ -86,7 +88,8 @@
         class: [
           "Polaris-DropZone__Preview",
           "Polaris-DropZone__Preview--singleFile": !@multiple,
-          "Polaris-DropZone__Preview--sizeSmall": @size == :small
+          "Polaris-DropZone__Preview--sizeMedium": @size == :medium,
+          "Polaris-DropZone__Preview--sizeSmall": @size == :small,
         ]
       ) do %>
         <% if @size.in?(%i[small]) %>

data/app/components/polaris/filters_component.rb

@@ -74,7 +74,9 @@ module Polaris
       def popover_arguments
         {
           sectioned: @sectioned,
-          style: ("width: #{@width}" if @width.present?)
+          style: ("width: #{@width}" if @width.present?),
+          position: :below,
+          alignment: :left
         }
       end
 

data/app/components/polaris/headless_button.html.erb

@@ -5,9 +5,9 @@
     </span>
   <% end %>
 
-  <% if icon.present? %>
+  <% if icon.present? || @icon_name.present? %>
     <div class="Polaris-Button__Icon">
-      <%= icon %>
+      <%= icon || polaris_icon(name: @icon_name) %>
     </div>
     <% if content.present? %>
       &nbsp;

data/app/components/polaris/headless_button.rb

@@ -42,6 +42,7 @@ module Polaris
       remove_underline: false,
       size: SIZE_DEFAULT,
       text_align: TEXT_ALIGN_DEFAULT,
+      icon_name: nil,
       **system_arguments
     )
       @tag = url.present? ? "a" : "button"
@@ -52,6 +53,7 @@ module Polaris
       @loading = loading
       @disclosure = fetch_or_fallback(DISCLOSURE_OPTIONS, disclosure, DISCLOSURE_DEFAULT)
       @disclosure = :down if @disclosure === true
+      @icon_name = icon_name
 
       @system_arguments = system_arguments
       @system_arguments[:type] = submit ? "submit" : "button"
@@ -92,7 +94,7 @@ module Polaris
     def system_arguments
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Button--iconOnly": icon.present? && content.blank?
+        "Polaris-Button--iconOnly": (icon.present? || @icon_name.present?) && content.blank?
       )
       @system_arguments
     end