phoenix_live_view 0.18.13 → 0.18.15

package/README.md

@@ -10,12 +10,14 @@ you can build, or see a sneak peek below:
 
 https://user-images.githubusercontent.com/576796/162234098-31b580fe-e424-47e6-b01d-cd2cfcf823a9.mp4
 
+<br />
+
 After you [install Elixir](https://elixir-lang.org/install.html)
 on your machine, you can create your first LiveView app in two
 steps:
 
     $ mix archive.install hex phx_new
-    $ mix phx.new demo --live
+    $ mix phx.new demo
 
 ## Features
 
@@ -58,6 +60,8 @@ steps:
 
 News from the Phoenix team on LiveView:
 
+  * [LiveBeats: Building a Social Music App With Phoenix LiveView](https://fly.io/blog/livebeats/)
+
   * [Build a real-time Twitter clone with LiveView](https://www.phoenixframework.org/blog/build-a-real-time-twitter-clone-in-15-minutes-with-live-view-and-phoenix-1-5)
 
   * [Initial announcement](https://dockyard.com/blog/2018/12/12/phoenix-liveview-interactive-real-time-apps-no-need-to-write-javascript)

package/assets/js/phoenix_live_view/dom.js

@@ -270,6 +270,20 @@ let DOM = {
     }
   },
 
+  resetForm(form, phxFeedbackFor){
+    Array.from(form.elements).forEach(input => {
+      let query = `[${phxFeedbackFor}="${input.id}"],
+                   [${phxFeedbackFor}="${input.name}"],
+                   [${phxFeedbackFor}="${input.name.replace(/\[\]$/, "")}"]`
+
+      this.deletePrivate(input, PHX_HAS_FOCUSED)
+      this.deletePrivate(input, PHX_HAS_SUBMITTED)
+      this.all(document, query, feedbackEl => {
+        feedbackEl.classList.add(PHX_NO_FEEDBACK_CLASS)
+      })
+    })
+  },
+
   showError(inputEl, phxFeedbackFor){
     if(inputEl.id || inputEl.name){
       this.all(inputEl.form, `[${phxFeedbackFor}="${inputEl.id}"], [${phxFeedbackFor}="${inputEl.name}"]`, (el) => {

package/assets/js/phoenix_live_view/js.js

@@ -90,10 +90,7 @@ let JS = {
   },
 
   exec_transition(eventType, phxEvent, view, sourceEl, el, {time, transition}){
-    let [transition_start, running, transition_end] = transition
-    let onStart = () => this.addOrRemoveClasses(el, transition_start.concat(running), [])
-    let onDone = () => this.addOrRemoveClasses(el, transition_end, transition_start.concat(running))
-    view.transition(time, onStart, onDone)
+    this.addOrRemoveClasses(el, [], [], transition, time, view)
   },
 
   exec_toggle(eventType, phxEvent, view, sourceEl, el, {display, ins, outs, time}){
@@ -152,7 +149,8 @@ let JS = {
         if(eventType === "remove"){ return }
         let onStart = () => {
           this.addOrRemoveClasses(el, inStartClasses, outClasses.concat(outStartClasses).concat(outEndClasses))
-          DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = (display || "block"))
+          let stickyDisplay = display || this.defaultDisplay(el)
+          DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = stickyDisplay)
           window.requestAnimationFrame(() => {
             this.addOrRemoveClasses(el, inClasses, [])
             window.requestAnimationFrame(() => this.addOrRemoveClasses(el, inEndClasses, inStartClasses))
@@ -174,7 +172,8 @@ let JS = {
       } else {
         window.requestAnimationFrame(() => {
           el.dispatchEvent(new Event("phx:show-start"))
-          DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = display || "block")
+          let stickyDisplay = display || this.defaultDisplay(el)
+          DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = stickyDisplay)
           el.dispatchEvent(new Event("phx:show-end"))
         })
       }
@@ -225,6 +224,10 @@ let JS = {
 
   filterToEls(sourceEl, {to}){
     return to ? DOM.all(document, to) : [sourceEl]
+  },
+
+  defaultDisplay(el){
+    return {tr: "table-row", td: "table-cell"}[el.tagName.toLowerCase()] || "block"
   }
 }
 

package/assets/js/phoenix_live_view/live_socket.js

@@ -95,6 +95,7 @@ import {
   PHX_THROTTLE,
   PHX_TRACK_UPLOADS,
   PHX_SESSION,
+  PHX_FEEDBACK_FOR,
   RELOAD_JITTER_MIN,
   RELOAD_JITTER_MAX,
 } from "./constants"
@@ -855,6 +856,15 @@ export default class LiveSocket {
         })
       }, false)
     }
+    this.on("reset", (e) => {
+      let form = e.target
+      DOM.resetForm(form, this.binding(PHX_FEEDBACK_FOR))
+      let input = Array.from(form.elements).find(el => el.type === "reset")
+      // wait until next tick to get updated input value
+      window.requestAnimationFrame(() => {
+        input.dispatchEvent(new Event("input", {bubbles: true, cancelable: false}))
+      })
+    })
   }
 
   debounce(el, event, eventType, callback){

package/assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.18.13",
+  "version": "0.18.15",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "repository": {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.18.13",
+  "version": "0.18.15",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "module": "./priv/static/phoenix_live_view.esm.js",

package/priv/static/phoenix_live_view.cjs.js

@@ -511,6 +511,18 @@ var DOM = {
       el.classList.add(PHX_NO_FEEDBACK_CLASS);
     }
   },
+  resetForm(form, phxFeedbackFor) {
+    Array.from(form.elements).forEach((input) => {
+      let query = `[${phxFeedbackFor}="${input.id}"],
+                   [${phxFeedbackFor}="${input.name}"],
+                   [${phxFeedbackFor}="${input.name.replace(/\[\]$/, "")}"]`;
+      this.deletePrivate(input, PHX_HAS_FOCUSED);
+      this.deletePrivate(input, PHX_HAS_SUBMITTED);
+      this.all(document, query, (feedbackEl) => {
+        feedbackEl.classList.add(PHX_NO_FEEDBACK_CLASS);
+      });
+    });
+  },
   showError(inputEl, phxFeedbackFor) {
     if (inputEl.id || inputEl.name) {
       this.all(inputEl.form, `[${phxFeedbackFor}="${inputEl.id}"], [${phxFeedbackFor}="${inputEl.name}"]`, (el) => {
@@ -2256,10 +2268,7 @@ var JS = {
     this.addOrRemoveClasses(el, [], names, transition, time, view);
   },
   exec_transition(eventType, phxEvent, view, sourceEl, el, { time, transition }) {
-    let [transition_start, running, transition_end] = transition;
-    let onStart = () => this.addOrRemoveClasses(el, transition_start.concat(running), []);
-    let onDone = () => this.addOrRemoveClasses(el, transition_end, transition_start.concat(running));
-    view.transition(time, onStart, onDone);
+    this.addOrRemoveClasses(el, [], [], transition, time, view);
   },
   exec_toggle(eventType, phxEvent, view, sourceEl, el, { display, ins, outs, time }) {
     this.toggle(eventType, view, el, display, ins, outs, time);
@@ -2310,7 +2319,8 @@ var JS = {
         }
         let onStart = () => {
           this.addOrRemoveClasses(el, inStartClasses, outClasses.concat(outStartClasses).concat(outEndClasses));
-          dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = display || "block");
+          let stickyDisplay = display || this.defaultDisplay(el);
+          dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = stickyDisplay);
           window.requestAnimationFrame(() => {
             this.addOrRemoveClasses(el, inClasses, []);
             window.requestAnimationFrame(() => this.addOrRemoveClasses(el, inEndClasses, inStartClasses));
@@ -2332,7 +2342,8 @@ var JS = {
       } else {
         window.requestAnimationFrame(() => {
           el.dispatchEvent(new Event("phx:show-start"));
-          dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = display || "block");
+          let stickyDisplay = display || this.defaultDisplay(el);
+          dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = stickyDisplay);
           el.dispatchEvent(new Event("phx:show-end"));
         });
       }
@@ -2377,6 +2388,9 @@ var JS = {
   },
   filterToEls(sourceEl, { to }) {
     return to ? dom_default.all(document, to) : [sourceEl];
+  },
+  defaultDisplay(el) {
+    return { tr: "table-row", td: "table-cell" }[el.tagName.toLowerCase()] || "block";
   }
 };
 var js_default = JS;
@@ -4177,6 +4191,14 @@ var LiveSocket = class {
         });
       }, false);
     }
+    this.on("reset", (e) => {
+      let form = e.target;
+      dom_default.resetForm(form, this.binding(PHX_FEEDBACK_FOR));
+      let input = Array.from(form.elements).find((el) => el.type === "reset");
+      window.requestAnimationFrame(() => {
+        input.dispatchEvent(new Event("input", { bubbles: true, cancelable: false }));
+      });
+    });
   }
   debounce(el, event, eventType, callback) {
     if (eventType === "blur" || eventType === "focusout") {