phoenix_duskmoon 4.5.0 → 4.5.2

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [4.5.2](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v4.5.1...v4.5.2) (2024-07-08)
+
+
+### Bug Fixes
+
+* Add expand to table. ([1dd3282](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/1dd3282fc47bdda7b955881bad45f65607c2aa75))
+* Fix style. ([f7a5624](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/f7a56244514e4814ec0daa0ed0650ea255d8bfb1))
+
+## [4.5.1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v4.5.0...v4.5.1) (2024-07-04)
+
+
+### Bug Fixes
+
+* Fix tailwindcss. ([f675f86](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/f675f86df77a8b08e634e5238767d2e0cd0dad27))
+
 # [4.5.0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v4.4.4...v4.5.0) (2024-07-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_duskmoon",
-  "version": "4.5.0",
+  "version": "4.5.2",
   "main": "./priv/static/phoenix_duskmoon.js",
   "exports": {
     ".": "./priv/static/phoenix_duskmoon.js",
@@ -23,14 +23,17 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@gsmlg/lit": "1.29.5",
-    "lit": "^2.4.1",
-    "lit-element": "^3.2.2",
-    "lit-html": "^2.4.0"
+    "@gsmlg/lit": "1.30.3",
+    "lit": "^3.1.4",
+    "lit-element": "^4.0.6",
+    "lit-html": "^3.1.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/preset-env": "^7.20.2"
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@tailwindcss/typography": "^0.5.13",
+    "daisyui": "^4.12.10",
+    "postcss": "^8.4.39"
   },
   "peerDependencies": {
     "@gsmlg/lit": "1.29.5",
@@ -38,4 +41,4 @@
     "lit-element": "^3.2.2",
     "lit-html": "^2.4.0"
   }
-}
+}

package/priv/static/phoenix_duskmoon.css

@@ -27,50 +27,49 @@
 }
 
 .sticky {
-  position: -webkit-sticky;
   position: sticky;
 }
 
-.top-14 {
-  top: 3.5rem;
+.left-0 {
+  left: 0px;
+}
+
+.right-0 {
+  right: 0px;
 }
 
 .right-2 {
   right: 0.5rem;
 }
 
-.top-2 {
-  top: 0.5rem;
+.top-0 {
+  top: 0px;
 }
 
 .top-12 {
   top: 3rem;
 }
 
-.left-0 {
-  left: 0px;
-}
-
-.right-0 {
-  right: 0px;
+.top-14 {
+  top: 3.5rem;
 }
 
-.top-0 {
-  top: 0px;
+.top-2 {
+  top: 0.5rem;
 }
 
 .isolate {
   isolation: isolate;
 }
 
-.z-50 {
-  z-index: 50;
-}
-
 .z-10 {
   z-index: 10;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .m-4 {
   margin: 1rem;
 }
@@ -80,9 +79,9 @@
   margin-right: 3rem;
 }
 
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+.mx-8 {
+  margin-left: 2rem;
+  margin-right: 2rem;
 }
 
 .mx-auto {
@@ -90,33 +89,33 @@
   margin-right: auto;
 }
 
-.mx-8 {
-  margin-left: 2rem;
-  margin-right: 2rem;
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .mb-4 {
   margin-bottom: 1rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
+.mr-1 {
+  margin-right: 0.25rem;
 }
 
-.mt-3 {
-  margin-top: 0.75rem;
+.mt-0 {
+  margin-top: 0px;
 }
 
 .mt-0\.5 {
   margin-top: 0.125rem;
 }
 
-.mt-0 {
-  margin-top: 0px;
+.mt-2 {
+  margin-top: 0.5rem;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
+.mt-3 {
+  margin-top: 0.75rem;
 }
 
 .flex {
@@ -131,6 +130,10 @@
   display: table;
 }
 
+.table-row {
+  display: table-row;
+}
+
 .grid {
   display: grid;
 }
@@ -139,24 +142,20 @@
   display: none;
 }
 
-.h-16 {
-  height: 4rem;
-}
-
-.h-14 {
-  height: 3.5rem;
+.h-10 {
+  height: 2.5rem;
 }
 
-.h-full {
-  height: 100%;
+.h-12 {
+  height: 3rem;
 }
 
-.h-10 {
-  height: 2.5rem;
+.h-14 {
+  height: 3.5rem;
 }
 
-.h-8 {
-  height: 2rem;
+.h-16 {
+  height: 4rem;
 }
 
 .h-4 {
@@ -167,8 +166,16 @@
   height: 1.25rem;
 }
 
-.h-12 {
-  height: 3rem;
+.h-8 {
+  height: 2rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.min-h-32 {
+  min-height: 8rem;
 }
 
 .min-h-\[200px\] {
@@ -176,21 +183,16 @@
 }
 
 .min-h-fit {
-  min-height: -webkit-fit-content;
   min-height: -moz-fit-content;
   min-height: fit-content;
 }
 
-.w-full {
-  width: 100%;
-}
-
 .w-10 {
   width: 2.5rem;
 }
 
-.w-8 {
-  width: 2rem;
+.w-16 {
+  width: 4rem;
 }
 
 .w-4 {
@@ -201,14 +203,18 @@
   width: 1.25rem;
 }
 
-.w-16 {
-  width: 4rem;
+.w-8 {
+  width: 2rem;
 }
 
 .w-\[200px\] {
   width: 200px;
 }
 
+.w-full {
+  width: 100%;
+}
+
 .min-w-\[420px\] {
   min-width: 420px;
 }
@@ -217,20 +223,16 @@
   max-width: 20rem;
 }
 
-.flex-none {
-  flex: none;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
 
-.shrink-0 {
-  flex-shrink: 0;
+.flex-none {
+  flex: none;
 }
 
-.table-fixed {
-  table-layout: fixed;
+.shrink-0 {
+  flex-shrink: 0;
 }
 
 .border-collapse {
@@ -254,7 +256,6 @@
 .select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 
@@ -298,22 +299,22 @@
   justify-content: space-between;
 }
 
-.gap-4 {
-  gap: 1rem;
-}
-
 .gap-2 {
   gap: 0.5rem;
 }
 
-.gap-6 {
-  gap: 1.5rem;
-}
-
 .gap-3 {
   gap: 0.75rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
@@ -369,14 +370,6 @@
   border-bottom-width: 0px;
 }
 
-.border-t {
-  border-top-width: 1px;
-}
-
-.border-t-0 {
-  border-top-width: 0px;
-}
-
 .border-b {
   border-bottom-width: 1px;
 }
@@ -389,13 +382,26 @@
   border-right-width: 1px;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-t-0 {
+  border-top-width: 0px;
+}
+
 .border-solid {
   border-style: solid;
 }
 
-.border-zinc-300 {
+.border-blue-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(212 212 216 / var(--tw-border-opacity));
+  border-color: rgb(96 165 250 / var(--tw-border-opacity));
+}
+
+.border-error {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
 }
 
 .border-gray-200 {
@@ -413,9 +419,9 @@
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
 }
 
-.border-blue-400 {
+.border-zinc-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(96 165 250 / var(--tw-border-opacity));
+  border-color: rgb(212 212 216 / var(--tw-border-opacity));
 }
 
 .bg-\[rgba\(255\2c 255\2c 255\2c \.7\)\] {
@@ -427,11 +433,6 @@
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .bg-indigo-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(238 242 255 / var(--tw-bg-opacity));
@@ -442,17 +443,32 @@
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
 
-.bg-slate-50 {
+.bg-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.p-4 {
+  padding: 1rem;
 }
 
 .p-6 {
   padding: 1.5rem;
 }
 
-.p-4 {
-  padding: 1rem;
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
 .px-4 {
@@ -460,24 +476,19 @@
   padding-right: 1rem;
 }
 
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
 
-.px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 .py-20 {
@@ -485,24 +496,14 @@
   padding-bottom: 5rem;
 }
 
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
-.px-12 {
-  padding-left: 3rem;
-  padding-right: 3rem;
-}
-
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 }
 
 .pt-4 {
@@ -513,17 +514,21 @@
   text-align: center;
 }
 
+.indent-2 {
+  text-indent: 0.5rem;
+}
+
 .indent-2\.5 {
   text-indent: 0.625rem;
 }
 
-.indent-2 {
-  text-indent: 0.5rem;
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
+.text-\[14px\] {
+  font-size: 14px;
 }
 
 .text-lg {
@@ -536,17 +541,9 @@
   line-height: 1.25rem;
 }
 
-.text-\[14px\] {
-  font-size: 14px;
-}
-
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
-.font-semibold {
-  font-weight: 600;
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
 }
 
 .font-bold {
@@ -557,23 +554,22 @@
   font-weight: 500;
 }
 
-.leading-6 {
-  line-height: 1.5rem;
+.font-semibold {
+  font-weight: 600;
 }
 
-.text-zinc-600 {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 91 / var(--tw-text-opacity));
+.leading-6 {
+  line-height: 1.5rem;
 }
 
-.text-zinc-900 {
+.text-\[\#A1A7C4\] {
   --tw-text-opacity: 1;
-  color: rgb(24 24 27 / var(--tw-text-opacity));
+  color: rgb(161 167 196 / var(--tw-text-opacity));
 }
 
-.text-\[\#A1A7C4\] {
+.text-blue-400 {
   --tw-text-opacity: 1;
-  color: rgb(161 167 196 / var(--tw-text-opacity));
+  color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
 .text-blue-500 {
@@ -581,9 +577,9 @@
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-.text-gray-700 {
+.text-error {
   --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
+  color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
 }
 
 .text-gray-500 {
@@ -591,14 +587,19 @@
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .text-indigo-600 {
   --tw-text-opacity: 1;
   color: rgb(79 70 229 / var(--tw-text-opacity));
 }
 
-.text-blue-400 {
+.text-teal-400 {
   --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
+  color: rgb(45 212 191 / var(--tw-text-opacity));
 }
 
 .text-teal-600 {
@@ -606,14 +607,18 @@
   color: rgb(13 148 136 / var(--tw-text-opacity));
 }
 
-.text-teal-400 {
+.text-zinc-600 {
   --tw-text-opacity: 1;
-  color: rgb(45 212 191 / var(--tw-text-opacity));
+  color: rgb(82 82 91 / var(--tw-text-opacity));
+}
+
+.text-zinc-900 {
+  --tw-text-opacity: 1;
+  color: rgb(24 24 27 / var(--tw-text-opacity));
 }
 
 .underline {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
+  text-decoration-line: underline;
 }
 
 .shadow {
@@ -671,14 +676,6 @@
   cursor: pointer;
 }
 
-.modal::-webkit-backdrop {
-  opacity: 0;
-  isolation: isolate;
-  /* display: none; */
-  -webkit-transition: all 0s;
-  transition: all 0s;
-}
-
 .modal::backdrop {
   opacity: 0;
   isolation: isolate;
@@ -686,13 +683,6 @@
   transition: all 0s;
 }
 
-.modal.backdrop::-webkit-backdrop {
-  opacity: 0;
-  display: initial;
-  -webkit-transition: all 0s;
-  transition: all 0s;
-}
-
 .modal.backdrop::backdrop {
   opacity: 0;
   display: initial;
@@ -700,10 +690,7 @@
 }
 
 .modal[open] {
-  -webkit-animation: 
-        fade-in var(--delay) forwards var(--animation-timing-func),
-        fly-in var(--delay) forwards var(--animation-timing-func);
-          animation: 
+  animation: 
         fade-in var(--delay) forwards var(--animation-timing-func),
         fly-in var(--delay) forwards var(--animation-timing-func);
   pointer-events: auto;
@@ -711,10 +698,7 @@
 }
 
 .modal[closing] {
-  -webkit-animation: 
-        fade-out var(--delay) forwards var(--animation-timing-func),
-        fly-out var(--delay) forwards var(--animation-timing-func);
-          animation: 
+  animation: 
         fade-out var(--delay) forwards var(--animation-timing-func),
         fly-out var(--delay) forwards var(--animation-timing-func);
   display: block;
@@ -722,38 +706,14 @@
   pointer-events: none;
 }
 
-.modal[open]::-webkit-backdrop {
-  transform: none !important;
-  -webkit-animation: fade-in 500ms forwards;
-          animation: fade-in 500ms forwards;
-}
-
 .modal[open]::backdrop {
   transform: none !important;
-  -webkit-animation: fade-in 500ms forwards;
-          animation: fade-in 500ms forwards;
-}
-
-.modal[closing]::-webkit-backdrop {
-  transform: none !important;
-  -webkit-animation: fade-out 500ms forwards;
-          animation: fade-out 500ms forwards;
+  animation: fade-in 500ms forwards;
 }
 
 .modal[closing]::backdrop {
   transform: none !important;
-  -webkit-animation: fade-out 500ms forwards;
-          animation: fade-out 500ms forwards;
-}
-
-@-webkit-keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
+  animation: fade-out 500ms forwards;
 }
 
 @keyframes fade-in {
@@ -766,16 +726,6 @@
   }
 }
 
-@-webkit-keyframes fade-out {
-  100% {
-    opacity: 0;
-  }
-
-  0% {
-    opacity: 1;
-  }
-}
-
 @keyframes fade-out {
   100% {
     opacity: 0;
@@ -786,17 +736,6 @@
   }
 }
 
-@-webkit-keyframes fly-in {
-  0% {
-    transform: translate3d(var(--x), var(--y), -200px) scale(0.01)
-        perspective(6em);
-  }
-
-  100% {
-    transform: translate3d(0%, 0%, 0px) scale(1) perspective(1em);
-  }
-}
-
 @keyframes fly-in {
   0% {
     transform: translate3d(var(--x), var(--y), -200px) scale(0.01)
@@ -808,17 +747,6 @@
   }
 }
 
-@-webkit-keyframes fly-out {
-  0% {
-    transform: translate3d(0%, 0%, 0px) scale(1) perspective(1em);
-  }
-
-  100% {
-    transform: translate3d(var(--x), var(--y), -200px) scale(0.01)
-        perspective(6em);
-  }
-}
-
 @keyframes fly-out {
   0% {
     transform: translate3d(0%, 0%, 0px) scale(1) perspective(1em);
@@ -845,11 +773,6 @@
   content: var(--tw-content);
 }
 
-.even\:bg-white:nth-child(even) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -863,6 +786,11 @@
   z-index: 20;
 }
 
+.focus\:border-error:focus {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
+}
+
 .focus\:ring-0:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -873,23 +801,6 @@
   display: flex;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-blue-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 58 138 / var(--tw-bg-opacity));
-  }
-
-  .dark\:text-blue-100 {
-    --tw-text-opacity: 1;
-    color: rgb(219 234 254 / var(--tw-text-opacity));
-  }
-
-  .dark\:shadow-slate-600 {
-    --tw-shadow-color: #475569;
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-}
-
 @media (min-width: 768px) {
   .md\:flex {
     display: flex;
@@ -934,3 +845,20 @@
     display: none;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .dark\:bg-blue-900 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(30 58 138 / var(--tw-bg-opacity));
+  }
+
+  .dark\:text-blue-100 {
+    --tw-text-opacity: 1;
+    color: rgb(219 234 254 / var(--tw-text-opacity));
+  }
+
+  .dark\:shadow-slate-600 {
+    --tw-shadow-color: #475569;
+    --tw-shadow: var(--tw-shadow-colored);
+  }
+}

package/priv/static/phoenix_duskmoon.js

@@ -11,10 +11,14 @@
     modal.showModal();
     modal.addEventListener("modal:close", (evt2) => {
       modal.setAttribute("closing", "");
-      modal.addEventListener("animationend", () => {
-        modal.removeAttribute("closing");
-        modal.close();
-      }, { once: true });
+      modal.addEventListener(
+        "animationend",
+        () => {
+          modal.removeAttribute("closing");
+          modal.close();
+        },
+        { once: true }
+      );
     }, {
       once: true
     });
@@ -45,7 +49,7 @@
             }
           });
         }
-        if (attrs[i].name === "darkmoon-receive") {
+        if ("darkmoon-receive" === attrs[i].name) {
           const [phxEvent, callbackName] = attrs[i].value.split(";");
           this.handleEvent(phxEvent, (payload) => {
             this.el[callbackName]?.(payload);