_

assets/js/app.js

@@ -19,21 +19,14 @@
 import "phoenix_html"
 // Establish Phoenix Socket and LiveView configuration.
 import { Socket } from "../../../../"
-import { LiveSocket } from "phoenix_live_view"
+import { LiveSocket } from "../vendor/phoenix_live_view"
 import topbar from "../vendor/topbar"
-import Sortable from "../vendor/Sortable.min"
+import Sortable from "../vendor/Sortable"
 
 
 let Hooks = {
   SortableInputs: {
     mounted() {
-      // SortableJS triggers change events on the parent element, but LiveView errors if a
-      // change event is triggered on a non-input element, so we suppress the change event
-      // and use a proxy input element to send the change event to LiveView.
-      this.el.addEventListener('change', (e) => {
-        e.stopPropagation()
-        e.preventDefault()
-      });
       let proxy = document.createElement('input');
       proxy.type = 'hidden';
       proxy.name = 'sortable-change-proxy';
@@ -49,6 +42,14 @@ let Hooks = {
   }
 }
 
+window.addEventListener("munch:show-modal", (e) => {
+  e.target.showModal()
+})
+
+window.addEventListener("munch:close-modal", (e) => {
+  e.target.close()
+})
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,

assets/tailwind.config.js

@@ -14,7 +14,6 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        brand: "#FD4F00",
       }
     },
   },
@@ -25,14 +24,14 @@ module.exports = {
     //
     //     <div class="phx-click-loading:animate-ping">
     //
-    plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
-    plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
-    plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
+    plugin(({ addVariant }) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
+    plugin(({ addVariant }) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
+    plugin(({ addVariant }) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
 
     // Embeds Heroicons (https://heroicons.com) into your app.css bundle
     // See your `CoreComponents.icon/1` for more information.
     //
-    plugin(function({matchComponents, theme}) {
+    plugin(function ({ matchComponents, theme }) {
       let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
       let values = {}
       let icons = [
@@ -44,11 +43,11 @@ module.exports = {
       icons.forEach(([suffix, dir]) => {
         fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
           let name = path.basename(file, ".svg") + suffix
-          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+          values[name] = { name, fullPath: path.join(iconsDir, dir, file) }
         })
       })
       matchComponents({
-        "hero": ({name, fullPath}) => {
+        "hero": ({ name, fullPath }) => {
           let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
           let size = theme("spacing.6")
           if (name.endsWith("-mini")) {
@@ -68,7 +67,7 @@ module.exports = {
             "height": size
           }
         }
-      }, {values})
+      }, { values })
     })
   ]
 }