polaris_view_components 0.8.1 → 0.10.0

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) => {
@@ -165,6 +322,23 @@ class Button extends Controller {
   }
 }
 
+class Collapsible extends Controller {
+  toggle() {
+    if (this.isClosed) {
+      this.element.style.maxHeight = "none";
+      this.element.style.overflow = "visible";
+      this.element.classList.remove("Polaris-Collapsible--isFullyClosed");
+    } else {
+      this.element.style.maxHeight = "0px";
+      this.element.style.overflow = "hidden";
+      this.element.classList.add("Polaris-Collapsible--isFullyClosed");
+    }
+  }
+  get isClosed() {
+    return this.element.classList.contains("Polaris-Collapsible--isFullyClosed");
+  }
+}
+
 const dragEvents = [ "dragover", "dragenter", "drop" ];
 
 const SIZES = {
@@ -285,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 => {
@@ -292,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;
@@ -364,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
         }
@@ -376,6 +558,7 @@ class Dropzone extends Controller {
       }
       this.toggleErrorOverlay(false);
       const dropAcceptedEvent = new CustomEvent("polaris-dropzone:drop-accepted", {
+        bubbles: true,
         detail: {
           acceptedFiles: this.acceptedFiles
         }
@@ -383,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,
@@ -547,163 +731,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() {
@@ -803,6 +830,9 @@ class Polaris extends Controller {
   showToast() {
     this.findElement("toast").show();
   }
+  toggleCollapsible() {
+    this.findElement("collapsible").toggle();
+  }
   findElement(type) {
     const targetId = this.element.dataset.target.replace("#", "");
     const target = document.getElementById(targetId);
@@ -2372,7 +2402,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);
@@ -2465,8 +2499,9 @@ class Toast extends Controller {
     this.element.removeEventListener("transitionend", this.updatePositions, false);
   };
   getStyle(position) {
-    const translateIn = -80 * position;
-    const translateOut = 150 - 80 * position;
+    const height = this.element.offsetHeight + this.heightOffset;
+    const translateIn = height * -1;
+    const translateOut = 150 - height;
     return `--toast-translate-y-in: ${translateIn}px; --toast-translate-y-out: ${translateOut}px;`;
   }
   get timeoutDuration() {
@@ -2487,11 +2522,15 @@ class Toast extends Controller {
   get position() {
     return this.visibleToasts.filter((el => !this.element.isEqualNode(el))).length + 1;
   }
+  get heightOffset() {
+    return this.visibleToasts.filter((el => !this.element.isEqualNode(el) && this.element.dataset.position > el.dataset.position)).map((el => el.offsetHeight)).reduce(((a, b) => a + b), 0);
+  }
 }
 
 function registerPolarisControllers(application) {
   application.register("polaris-autocomplete", Autocomplete);
   application.register("polaris-button", Button);
+  application.register("polaris-collapsible", Collapsible);
   application.register("polaris-dropzone", Dropzone);
   application.register("polaris-frame", Frame);
   application.register("polaris-modal", Modal);

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;
   }
 }