update deps

assets/js/app.js

@@ -25,7 +25,6 @@ import 'phoenix_html'
 import { Socket } from 'phoenix'
 import { LiveSocket } from 'phoenix_live_view'
 import Date from './date'
-import DateRange from './date_range'
 import DateTime from './datetime'
 import ShotLogChart from './shot_log_chart'
 import SlimSelect from './slim_select'
@@ -34,7 +33,7 @@ import topbar from 'topbar'
 const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
 const liveSocket = new LiveSocket('/live', Socket, {
   params: { _csrf_token: csrfToken },
-  hooks: { Date, DateRange, DateTime, ShotLogChart, SlimSelect }
+  hooks: { Date, DateTime, ShotLogChart, SlimSelect }
 })
 
 // Show progress bar on live navigation and form submits

assets/js/date_range.js

@@ -1,28 +0,0 @@
-import { easepick } from '@easepick/core'
-import { RangePlugin } from '@easepick/range-plugin'
-
-export default {
-  displayDateRange (el) {
-    // eslint-disable-next-line new-cap
-    el.easepick = new easepick.create({
-      element: el.firstElementChild,
-      css: [
-        'https://cdn.jsdelivr.net/npm/@easepick/core@1.2.1/dist/index.css',
-        'https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.1/dist/index.css'
-      ],
-      plugins: [RangePlugin],
-      RangePlugin: {
-        elementEnd: el.lastElementChild,
-        startDate: el.dataset.startDate,
-        endDate: el.dataset.endDate
-      },
-      setup (picker) {
-        picker.on('select', (e) => {
-          el.firstElementChild.dispatchEvent(new Event('input', { bubbles: true }))
-        })
-      }
-    })
-  },
-  mounted () { this.displayDateRange(this.el) },
-  updated () { this.displayDateRange(this.el) }
-}

assets/package-lock.json

@@ -6,7 +6,6 @@
     "": {
       "license": "MIT",
       "dependencies": {
-        "@easepick/bundle": "^1.2.1",
         "@fortawesome/fontawesome-free": "^6.7.2",
         "chart.js": "^4.4.7",
         "chartjs-adapter-date-fns": "^3.0.0",
@@ -2767,102 +2766,6 @@
         "node": ">=14.17.0"
       }
     },
-    "node_modules/@easepick/amp-plugin": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@easepick/amp-plugin/-/amp-plugin-1.2.1.tgz",
-      "integrity": "sha512-LbGd7RU+fiucxTqJnBpT5SwACX1BoEK4yi1joLqN50O57jpN0jQMMvDO/vp/F4Zr8MO6kwaamRmOXhqo/Vb4aw==",
-      "license": "GPL-2.0-or-later",
-      "dependencies": {
-        "@easepick/base-plugin": "^1.1.0"
-      }
-    },
-    "node_modules/@easepick/base-plugin": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@easepick/base-plugin/-/base-plugin-1.2.1.tgz",
-      "integrity": "sha512-aonBQaRyZwNH/gmPzSzZDVjQjgy/rxWd+TXnM0E3Nxkeu4yMbXV+GnWVQbBwTvJx74M7iSCHJowdmZ5T46B7Vg==",
-      "license": "GPL-2.0-or-later",
-      "dependencies": {
-        "@easepick/core": "^1.1.0"
-      }
-    },
-    "node_modules/@easepick/bundle": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@easepick/bundle/-/bundle-1.2.1.tgz",
-      "integrity": "sha512-M9DGu7rrIltbTEPuBfc8fTOdK1E2CjTIiSqXmVRcof/peDnDC7U7h3XaTx7nbB0gq4HUTUO8BKHrofPC0jPqSw==",
-      "license": "GPL-2.0-or-later",
-      "dependencies": {
-        "@easepick/amp-plugin": "^1.1.0",
-        "@easepick/base-plugin": "^1.1.0",
-        "@easepick/core": "^1.1.0",
-        "@easepick/datetime": "^1.1.0",
-        "@easepick/kbd-plugin": "^1.1.0",
-        "@easepick/lock-plugin": "^1.1.0",
-        "@easepick/preset-plugin": "^1.1.0",
-        "@easepick/range-plugin": "^1.1.0",
-        "@easepick/time-plugin": "^1.1.0"
-      }
-    },
-    "node_modules/@easepick/core": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@easepick/core/-/core-1.2.1.tgz",
-      "integrity": "sha512-V/blEia/ykAq+0mnQ9djOU5wvMZ+iffL5iuQrKLObpMOw38kL/qo4inH4pCbB3wm7sDjrJTuDKf+6+FrgdFGsw==",
-      "license": "GPL-2.0-or-later",
-      "dependencies": {
-        "@easepick/datetime": "^1.1.0"
-      }
-    },
-    "node_modules/@easepick/datetime": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@easepick/datetime/-/datetime-1.2.1.tgz",
-      "integrity": "sha512-KIUvWo/kEipwBqPTazjfUf6R7dKb2ztPizPoB/0ZMYz3HrWJptsLSZQma3R1nM/zkaexnk/e4L4nX+vDjwBtYA==",
-      "license": "GPL-2.0-or-later"
-    },
-    "node_modules/@easepick/kbd-plugin": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@easepick/kbd-plugin/-/kbd-plugin-1.2.1.tgz",
-      "integrity": "sha512-t/bEtKuvAbo9b9iw4J5h5DsGYEL4Wm2sLA2VzR2rvmMfJuo1extktgzw2eCy+w6Q/s4ObdKzhXLnjMvFeiJ8Xg==",
-      "license": "GPL-2.0-or-later",
-      "dependencies": {
-        "@easepick/base-plugin": "^1.1.0"
-      }
-    },
-    "node_modules/@easepick/lock-plugin": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@easepick/lock-plugin/-/lock-plugin-1.2.1.tgz",
-      "integrity": "sha512-6sJCdliMpnQtzL9dwznS9vYaQUy66VRKPZ+jFdVR1ohiNUVM6C7dSGdG3dPntVTywTy2Z9uU+yJOeWcVFDT61A==",
-      "license": "GPL-2.0-or-later",
-      "dependencies": {
-        "@easepick/base-plugin": "^1.1.0"
-      }
-    },
-    "node_modules/@easepick/preset-plugin": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@easepick/preset-plugin/-/preset-plugin-1.2.1.tgz",
-      "integrity": "sha512-VAnjyWpf39kXTR6DYbpCJIBeBhbOgRoNTqntpSb5uF9O398KuHUpIM4Ep1id3fTIlfnRrKxzp54rAFwvc48eCA==",
-      "license": "GPL-2.0-or-later",
-      "dependencies": {
-        "@easepick/base-plugin": "^1.1.0",
-        "@easepick/range-plugin": "^1.1.0"
-      }
-    },
-    "node_modules/@easepick/range-plugin": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@easepick/range-plugin/-/range-plugin-1.2.1.tgz",
-      "integrity": "sha512-yEHLUq32Kj0exLz4txxchALQVJUbwyXvnovfN7yxTrCJLpi6uMmPXcW4lyYig2P9+xM9JqF6JsNqOsi0+5GlHQ==",
-      "license": "GPL-2.0-or-later",
-      "dependencies": {
-        "@easepick/base-plugin": "^1.1.0"
-      }
-    },
-    "node_modules/@easepick/time-plugin": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@easepick/time-plugin/-/time-plugin-1.2.1.tgz",
-      "integrity": "sha512-mjynAAppLxlqiDSdHdkBEqi4A67CH17FqO3UH2n6mfAIKPZLQA7R8Y6jEkp+Fpl5tj0/HFqdrk82ceiYYnLFYw==",
-      "license": "GPL-2.0-or-later",
-      "dependencies": {
-        "@easepick/base-plugin": "^1.1.0"
-      }
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",

assets/package.json

@@ -13,7 +13,6 @@
     "test": "standard"
   },
   "dependencies": {
-    "@easepick/bundle": "^1.2.1",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "chart.js": "^4.4.7",
     "chartjs-adapter-date-fns": "^3.0.0",

assets/tailwind.config.js

@@ -19,8 +19,6 @@ module.exports = {
     },
     extend: {
       spacing: {
-        30: '7.5rem',
-        31: '7.75rem',
         128: '32rem',
         192: '48rem',
         256: '64rem'

lib/cannery_web/components/core_components.ex

@@ -150,8 +150,7 @@ defmodule CanneryWeb.CoreComponents do
   attr :end_date, :string, default: Date.utc_today() |> Date.to_iso8601()
 
   @doc """
-  Phoenix.Component for a <time> element that renders the naivedatetime in the
-  user's local timezone
+  Phoenix.Component for an element that generates date fields for a range
   """
   def date_range(assigns)
 

lib/cannery_web/components/core_components/date_range.html.heex

@@ -1,12 +1,15 @@
-<div
-  class="flex items-center mx-4 my-2 space-x-1"
-  data-end-date={@end_date}
-  data-start-date={@start_date}
-  id={@id}
-  phx-hook="DateRange"
-  phx-update="ignore"
->
-  <input class="text-center w-31 input input-primary" name={"#{@name}_start"} />
+<div class="flex items-center mx-4 my-2 space-x-1">
+  <input
+    class="w-36 text-center input input-primary"
+    name={"#{@name}_start"}
+    type="date"
+    value={@start_date}
+  />
   <span>—</span>
-  <input class="text-center w-31 input input-primary" name={"#{@name}_end"} />
+  <input
+    class="w-36 text-center input input-primary"
+    name={"#{@name}_end"}
+    type="date"
+    value={@end_date}
+  />
 </div>

lib/cannery_web/live/range_live/index.html.heex

@@ -23,7 +23,7 @@
         container={container}
         current_user={@current_user}
       >
-        <div class="flex justify-center items-center px-4 py-2 h-full min-w-20 flex-wrap">
+        <div class="flex flex-wrap justify-center items-center px-4 py-2 h-full min-w-20">
           <button
             type="button"
             class="mx-2 my-1 text-sm btn btn-primary"
@@ -139,7 +139,7 @@
           class: "title text-primary-600 text-lg text-center"
         ) %>
 
-        <.date_range id="shot-record-range-picker" name="dates" />
+        <.date_range name="dates" />
       </.form>
     </div>