@robuust-digital/vue-components 2.0.0-rc.0 → 2.0.0-rc.10

package/dist/dialogs/drawer.css

@@ -17,15 +17,61 @@
   --rvc-drawer-footer-bg-color: var(--rvc-dialog-footer-bg-color);
   --rvc-drawer-footer-gap: var(--rvc-dialog-footer-gap);
   --rvc-drawer-footer-justify-content: space-between;
+  --rvc-drawer-transition-timing-function: var(--rvc-dialog-transition-timing-function);
+  --rvc-drawer-transition-duration: var(--rvc-dialog-transition-duration);
+  --rvc-drawer-panel-shadow: var(--rvc-dialog-panel-shadow);
 }
 
 @layer components {
   .rvc-drawer {
-    z-index: 500;
     position: relative;
+    z-index: 997;
 
     .rvc-drawer-backdrop {
+      position: fixed;
+      transition-property: opacity;
+      transition-duration: var(--rvc-drawer-transition-duration);
+      transition-timing-function: var(--rvc-drawer-transition-timing-function);
       background-color: var(--rvc-drawer-backdrop-bg-color);
+      inset: 0;
+    }
+
+    .rvc-drawer-presentation {
+      inset: 0;
+      position: fixed;
+      overflow: hidden;
+    }
+
+    .rvc-drawer-container {
+      inset: 0;
+      position: absolute;
+      overflow: hidden;
+    }
+
+    .rvc-drawer-inner {
+      display: flex;
+      position: fixed;
+      right: 0;
+      max-width: 100%;
+      padding-left: calc(var(--spacing) * 10);
+      pointer-events: none;
+      inset-block: 0;
+    }
+
+    .rvc-drawer-panel {
+      width: 100vw;
+      pointer-events: auto;
+
+      &.rvc-drawer-panel-max-width {
+        max-width: 36rem;
+      }
+    }
+
+    .rvc-drawer-panel-inner {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
     }
 
     .rvc-drawer-header {
@@ -34,16 +80,38 @@
       border-bottom-style: var(--rvc-drawer-border-style);
       border-color: var(--rvc-drawer-border-color);
       background-color: var(--rvc-drawer-header-bg-color);
+
+      &.rvc-drawer-header-sticky {
+        position: sticky;
+        z-index: 10;
+        top: 0;
+        left: 0;
+        width: 100%;
+      }
+    }
+
+    .rvc-drawer-header-inner {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
     }
 
     .rvc-drawer-title {
+      color: var(--rvc-drawer-title-color);
+      font-family: var(--rvc-drawer-title-font-family);
       font-size: var(--rvc-drawer-title-font-size);
       font-weight: var(--rvc-drawer-title-font-weight);
-      font-family: var(--rvc-drawer-title-font-family);
-      color: var(--rvc-drawer-title-color);
+    }
+
+    .rvc-drawer-close-wrapper {
+      display: flex;
+      align-items: center;
+      height: calc(var(--spacing) * 7);
+      margin-left: calc(var(--spacing) * 3);
     }
 
     .rvc-drawer-close {
+      position: relative;
       width: var(--rvc-drawer-close-size);
       height: var(--rvc-drawer-close-size);
       color: var(--rvc-drawer-close-color);
@@ -51,22 +119,90 @@
       &:hover {
         color: var(--rvc-drawer-close-color-hover);
       }
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .rvc-drawer-scroll {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      min-height: 0;
+      overflow-y: scroll;
+
+      &.rvc-drawer-scroll-reverse {
+        flex-direction: column-reverse;
+      }
     }
 
     .rvc-drawer-content {
+      position: relative;
+      flex: 1;
       padding-block: var(--rvc-drawer-padding-y);
       padding-inline: var(--rvc-drawer-padding-x);
       background-color: var(--rvc-drawer-content-bg-color);
     }
 
     .rvc-drawer-footer {
+      display: flex;
+      flex-shrink: 0;
+      justify-content: var(--rvc-drawer-footer-justify-content);
       padding: var(--rvc-drawer-padding-y) var(--rvc-drawer-padding-x);
       border-top-width: var(--rvc-drawer-border-width);
       border-top-style: var(--rvc-drawer-border-style);
       border-color: var(--rvc-drawer-border-color);
       background-color: var(--rvc-drawer-footer-bg-color);
       gap: var(--rvc-drawer-footer-gap);
-      justify-content: var(--rvc-drawer-footer-justify-content);
     }
   }
+
+  /* Transitions */
+  .rvc-drawer-backdrop-transition-enter,
+  .rvc-drawer-backdrop-transition-leave {
+    --tw-duration: var(--rvc-drawer-transition-duration);
+
+    transition-duration: var(--rvc-drawer-transition-duration);
+
+    --tw-ease: var(--rvc-drawer-transition-timing-function);
+
+    transition-timing-function: var(--rvc-drawer-transition-timing-function);
+  }
+
+  .rvc-drawer-backdrop-transition-enter-from,
+  .rvc-drawer-backdrop-transition-leave-to {
+    opacity: 0;
+  }
+
+  .rvc-drawer-backdrop-transition-enter-to,
+  .rvc-drawer-backdrop-transition-leave-from {
+    opacity: 1;
+  }
+
+  .rvc-drawer-transition-enter,
+  .rvc-drawer-transition-leave {
+    --tw-duration: var(--rvc-drawer-transition-duration);
+
+    transition-duration: var(--rvc-drawer-transition-duration);
+
+    --tw-ease: var(--rvc-drawer-transition-timing-function);
+
+    transition-timing-function: var(--rvc-drawer-transition-timing-function);
+  }
+
+  .rvc-drawer-transition-enter-from,
+  .rvc-drawer-transition-leave-to {
+    --tw-translate-x: 100%;
+
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .rvc-drawer-transition-enter-to,
+  .rvc-drawer-transition-leave-from {
+    --tw-translate-x: 0;
+
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
 }

package/dist/dialogs/index.js

@@ -1,16 +1,13 @@
-import { createBlock as w, openBlock as f, unref as l, withCtx as o, createVNode as i, withModifiers as S, createElementVNode as a, normalizeClass as u, renderSlot as c, createElementBlock as $, createCommentVNode as y, createTextVNode as B, toDisplayString as D } from "vue";
-import { TransitionRoot as E, Dialog as L, TransitionChild as b, DialogPanel as N, DialogTitle as T } from "@headlessui/vue";
-import { _ as p } from "../_shared/ButtonBase-CQjlJ85F.js";
-import { u as V } from "../_shared/Modal-COVlUEud.js";
-import { _ as X } from "../_shared/Modal-COVlUEud.js";
-import { r as z } from "../_shared/XMarkIcon-90mcPzBs.js";
-const R = {
-  class: "fixed inset-0 overflow-hidden",
+import { createBlock as u, openBlock as m, unref as r, withCtx as s, createVNode as i, withModifiers as B, createElementVNode as a, normalizeClass as w, renderSlot as d, createCommentVNode as b, createTextVNode as E, toDisplayString as L } from "vue";
+import { TransitionRoot as T, Dialog as N, TransitionChild as p, DialogPanel as V, DialogTitle as y } from "@headlessui/vue";
+import { _ as g } from "../_shared/ButtonBase-DfkwHIhN.js";
+import { u as R } from "../_shared/Modal-DdpJnce6.js";
+import { _ as W } from "../_shared/Modal-DdpJnce6.js";
+import { r as k } from "../_shared/XMarkIcon-90mcPzBs.js";
+const q = {
+  class: "rvc-drawer-presentation",
   role: "presentation"
-}, q = { class: "absolute inset-0 overflow-hidden" }, F = { class: "pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10" }, I = { class: "flex h-full flex-col shadow-xl" }, M = { class: "flex items-center justify-between" }, j = {
-  key: 0,
-  class: "ml-3 flex h-7 items-center"
-}, A = ["id"], P = { class: "flex shrink-0 rvc-drawer-footer" }, Q = {
+}, A = { class: "rvc-drawer-container" }, F = { class: "rvc-drawer-inner" }, I = { class: "rvc-drawer-panel-inner" }, M = { class: "rvc-drawer-header-inner" }, x = { class: "rvc-drawer-close-wrapper" }, z = ["id"], P = { class: "rvc-drawer-footer" }, O = {
   __name: "Drawer",
   props: {
     as: {
@@ -47,133 +44,143 @@ const R = {
     },
     panelClass: {
       type: String,
-      default: "max-w-xl"
+      default: "rvc-drawer-panel-max-width"
     }
   },
-  emits: ["drawer:open", "drawer:close", "drawer:save", "drawer:closed"],
-  setup(t, { emit: x }) {
-    const n = x, g = t, {
-      contentRef: h,
-      ready: d,
-      isForm: C,
-      titleId: m,
-      descriptionId: v,
-      initialFocusElement: k
-    } = V(g);
-    return (s, e) => (f(), w(l(E), { as: "template" }, {
-      default: o(() => [
-        i(l(L), {
+  emits: ["drawer:open", "drawer:opened", "drawer:close", "drawer:save", "drawer:closed"],
+  setup(t, { emit: C }) {
+    const o = C, $ = t, {
+      contentRef: S,
+      ready: c,
+      isForm: h,
+      titleId: v,
+      descriptionId: f,
+      initialFocusElement: D
+    } = R($);
+    return (l, e) => (m(), u(r(T), { as: "template" }, {
+      default: s(() => [
+        i(r(N), {
           as: t.as,
           class: "rvc-drawer",
           static: "",
           "aria-modal": "true",
           role: "dialog",
-          "initial-focus": l(k),
-          "aria-labelledby": l(m),
-          onClose: e[5] || (e[5] = (r) => s.$emit("drawer:close")),
-          onSubmit: e[6] || (e[6] = S((r) => n("drawer:save", r), ["prevent"]))
+          "initial-focus": r(D),
+          "aria-labelledby": r(v),
+          onClose: e[6] || (e[6] = (n) => l.$emit("drawer:close")),
+          onSubmit: e[7] || (e[7] = B((n) => o("drawer:save", n), ["prevent"]))
         }, {
-          default: o(() => [
-            i(l(b), {
+          default: s(() => [
+            i(r(p), {
               as: "template",
-              enter: "ease-in-out duration-500",
-              "enter-from": "opacity-0",
-              "enter-to": "opacity-100",
-              leave: "ease-in-out duration-500",
-              "leave-from": "opacity-100",
-              "leave-to": "opacity-0",
-              onBeforeEnter: e[0] || (e[0] = (r) => n("drawer:open"))
+              enter: "rvc-drawer-backdrop-transition-enter",
+              "enter-from": "rvc-drawer-backdrop-transition-enter-from",
+              "enter-to": "rvc-drawer-backdrop-transition-enter-to",
+              leave: "rvc-drawer-backdrop-transition-leave",
+              "leave-from": "rvc-drawer-backdrop-transition-leave-from",
+              "leave-to": "rvc-drawer-backdrop-transition-leave-to",
+              onBeforeEnter: e[0] || (e[0] = (n) => o("drawer:open")),
+              onAfterEnter: e[1] || (e[1] = (n) => o("drawer:opened"))
             }, {
-              default: o(() => e[7] || (e[7] = [
+              default: s(() => e[8] || (e[8] = [
                 a("div", {
-                  class: "fixed inset-0 transition-opacity rvc-drawer-backdrop",
+                  class: "rvc-drawer-backdrop",
                   "aria-hidden": "true"
                 }, null, -1)
               ])),
               _: 1
             }),
-            a("div", R, [
-              a("div", q, [
+            a("div", q, [
+              a("div", A, [
                 a("div", F, [
-                  i(l(b), {
+                  i(r(p), {
                     as: "template",
-                    enter: "transform transition ease-in-out duration-500 sm:duration-700",
-                    "enter-from": "translate-x-full",
-                    "enter-to": "translate-x-0",
-                    leave: "transform transition ease-in-out duration-500 sm:duration-700",
-                    "leave-from": "translate-x-0",
-                    "leave-to": "translate-x-full",
-                    onBeforeEnter: e[3] || (e[3] = (r) => d.value = !0),
-                    onAfterLeave: e[4] || (e[4] = (r) => (d.value = !1, n("drawer:closed")))
+                    enter: "rvc-drawer-transition-enter",
+                    "enter-from": "rvc-drawer-transition-enter-from",
+                    "enter-to": "rvc-drawer-transition-enter-to",
+                    leave: "rvc-drawer-transition-leave",
+                    "leave-from": "rvc-drawer-transition-leave-from",
+                    "leave-to": "rvc-drawer-transition-leave-to",
+                    onBeforeEnter: e[4] || (e[4] = (n) => c.value = !0),
+                    onAfterLeave: e[5] || (e[5] = (n) => (c.value = !1, o("drawer:closed")))
                   }, {
-                    default: o(() => [
-                      i(l(N), {
-                        class: u(["pointer-events-auto w-screen", t.panelClass]),
+                    default: s(() => [
+                      i(r(V), {
+                        class: w(["rvc-drawer-panel", t.panelClass]),
                         "aria-busy": t.spinning,
-                        "aria-describedby": l(v)
+                        "aria-describedby": r(f)
                       }, {
-                        default: o(() => [
+                        default: s(() => [
                           a("div", I, [
                             a("header", {
-                              class: u([{ "sticky top-0 left-0 -w-full z-10": t.headerSticky }, "rvc-drawer-header"])
+                              class: w([{ "rvc-drawer-header-sticky": t.headerSticky }, "rvc-drawer-header"])
                             }, [
-                              c(s.$slots, "header", {
+                              d(l.$slots, "header", {
                                 title: t.title,
                                 showClose: t.showClose
                               }, () => [
                                 a("div", M, [
-                                  i(l(T), {
-                                    id: l(m),
-                                    class: "rvc-drawer-title"
-                                  }, {
-                                    default: o(() => [
-                                      B(D(t.title), 1)
-                                    ]),
-                                    _: 1
-                                  }, 8, ["id"]),
-                                  t.showClose ? (f(), $("div", j, [
-                                    a("button", {
-                                      type: "button",
-                                      class: "relative rvc-drawer-close",
-                                      "aria-label": "Close panel",
-                                      onClick: e[1] || (e[1] = (r) => n("drawer:close"))
-                                    }, [
-                                      i(l(z), {
-                                        class: "size-full",
-                                        "aria-hidden": "true"
-                                      })
+                                  d(l.$slots, "title", {
+                                    id: r(v),
+                                    dialogTitle: r(y),
+                                    title: t.title
+                                  }, () => [
+                                    i(r(y), {
+                                      id: r(v),
+                                      class: "rvc-drawer-title"
+                                    }, {
+                                      default: s(() => [
+                                        E(L(t.title), 1)
+                                      ]),
+                                      _: 1
+                                    }, 8, ["id"])
+                                  ]),
+                                  t.showClose ? d(l.$slots, "close", {
+                                    key: 0,
+                                    icon: r(k),
+                                    emitClose: () => o("drawer:close")
+                                  }, () => [
+                                    a("div", x, [
+                                      a("button", {
+                                        type: "button",
+                                        class: "rvc-drawer-close",
+                                        "aria-label": "Close panel",
+                                        onClick: e[2] || (e[2] = (n) => o("drawer:close"))
+                                      }, [
+                                        i(r(k), { "aria-hidden": "true" })
+                                      ])
                                     ])
-                                  ])) : y("", !0)
+                                  ]) : b("", !0)
                                 ])
                               ])
                             ], 2),
                             a("div", {
-                              class: u([t.scrolledDown ? "flex-col-reverse" : "flex-col", "flex min-h-0 flex-1 overflow-y-scroll"])
+                              class: w([{ "rvc-drawer-scroll-reverse": t.scrolledDown }, "rvc-drawer-scroll"])
                             }, [
                               a("div", {
-                                id: l(v),
+                                id: r(f),
                                 ref_key: "contentRef",
-                                ref: h,
-                                class: "relative flex-1 rvc-drawer-content"
+                                ref: S,
+                                class: "rvc-drawer-content"
                               }, [
-                                c(s.$slots, "default", { ready: l(d) })
-                              ], 8, A)
+                                d(l.$slots, "default", { ready: r(c) })
+                              ], 8, z)
                             ], 2),
                             a("footer", P, [
-                              c(s.$slots, "footer", { loading: t.spinning }, () => [
-                                i(p, {
+                              d(l.$slots, "footer", { loading: t.spinning }, () => [
+                                i(g, {
                                   type: "button",
                                   label: t.cancelLabel,
                                   color: "light",
-                                  onClick: e[2] || (e[2] = (r) => n("drawer:close"))
+                                  onClick: e[3] || (e[3] = (n) => o("drawer:close"))
                                 }, null, 8, ["label"]),
-                                l(C) ? (f(), w(p, {
+                                r(h) ? (m(), u(g, {
                                   key: 0,
                                   type: "submit",
                                   label: t.submitLabel,
                                   spinning: t.spinning,
                                   disabled: t.spinning
-                                }, null, 8, ["label", "spinning", "disabled"])) : y("", !0)
+                                }, null, 8, ["label", "spinning", "disabled"])) : b("", !0)
                               ])
                             ])
                           ])
@@ -195,6 +202,6 @@ const R = {
   }
 };
 export {
-  Q as Drawer,
-  X as Modal
+  O as Drawer,
+  W as Modal
 };

package/dist/dialogs/modal.css

@@ -19,51 +19,96 @@
   --rvc-modal-footer-gap: var(--rvc-dialog-footer-gap);
   --rvc-modal-box-shadow: var(--box-shadow-xl);
   --rvc-modal-margin-y: 0;
+  --rvc-modal-transition-timing-function: var(--rvc-dialog-transition-timing-function);
+  --rvc-modal-transition-duration: var(--rvc-dialog-transition-duration);
 }
 
 @layer components {
   .rvc-modal {
-    z-index: 600;
     position: relative;
+    z-index: 998;
 
     .rvc-modal-backdrop {
+      position: fixed;
+      transition-property: opacity;
+      transition-duration: var(--rvc-modal-transition-duration);
+      transition-timing-function: var(--rvc-modal-transition-timing-function);
       background-color: var(--rvc-modal-backdrop-bg-color);
+      inset: 0;
+    }
+
+    .rvc-modal-presentation {
+      position: fixed;
+      z-index: 10;
+      width: 100vw;
+      overflow-y: auto;
+      inset: 0;
+    }
+
+    .rvc-modal-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100%;
+      padding: calc(var(--spacing) * 4);
+
+      @media (width >= theme(--breakpoint-sm)) {
+        padding: 0;
+      }
     }
 
     .rvc-modal-panel {
-      border-color: var(--rvc-modal-border-color);
+      display: flex;
+      position: relative;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      margin-block: var(--rvc-modal-margin-y);
+      overflow: hidden;
+      transform: translate(0, 0);
       border-width: var(--rvc-modal-border-width);
       border-style: var(--rvc-modal-border-style);
       border-radius: var(--rvc-modal-border-radius);
+      border-color: var(--rvc-modal-border-color);
       box-shadow: var(--rvc-modal-box-shadow);
-      margin-block: var(--rvc-modal-margin-y);
-      display: flex;
-      height: 100%;
-      flex-direction: column;
-      position: relative;
-      transform: translate(0, 0);
-      overflow: hidden;
-      width: 100%;
       text-align: left;
+
+      &.rvc-modal-panel-max-width {
+        @media (width >= theme(--breakpoint-sm)) {
+          max-width: 32rem;
+        }
+      }
     }
 
     .rvc-modal-header {
       padding-block: var(--rvc-modal-padding-y);
       padding-inline: var(--rvc-modal-padding-x);
+      border-bottom: var(--rvc-modal-border-width) var(--rvc-modal-border-style) var(--rvc-modal-border-color);
       background-color: var(--rvc-modal-header-bg-color);
-      border-bottom-color: var(--rvc-modal-border-color);
-      border-bottom-width: var(--rvc-modal-border-width);
-      border-bottom-style: var(--rvc-modal-border-style);
+    }
+
+    .rvc-modal-header-inner {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
     }
 
     .rvc-modal-title {
+      color: var(--rvc-modal-title-color);
+      font-family: var(--rvc-modal-title-font-family);
       font-size: var(--rvc-modal-title-font-size);
       font-weight: var(--rvc-modal-title-font-weight);
-      font-family: var(--rvc-modal-title-font-family);
-      color: var(--rvc-modal-title-color);
+    }
+
+    .rvc-modal-close-wrapper {
+      display: flex;
+      align-items: center;
+      height: cacl(var(--spacing) * 7);
+      margin-left: calc(var(--spacing) * 3);
     }
 
     .rvc-modal-close {
+      position: relative;
       width: var(--rvc-modal-close-size);
       height: var(--rvc-modal-close-size);
       color: var(--rvc-modal-close-color);
@@ -71,6 +116,11 @@
       &:hover {
         color: var(--rvc-modal-close-color-hover);
       }
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
     }
 
     .rvc-modal-content {
@@ -80,19 +130,71 @@
     }
 
     .rvc-modal-footer {
+      display: flex;
+      flex-direction: column;
       padding-block: var(--rvc-modal-padding-y);
       padding-inline: var(--rvc-modal-padding-x);
-      gap: var(--rvc-modal-footer-gap);
+      border-top: var(--rvc-modal-border-width) var(--rvc-modal-border-style) var(--rvc-modal-border-color);
       background-color: var(--rvc-modal-footer-bg-color);
-      border-top-color: var(--rvc-modal-border-color);
-      border-top-width: var(--rvc-modal-border-width);
-      border-top-style: var(--rvc-modal-border-style);
-      display: flex;
-      flex-direction: column;
+      gap: var(--rvc-modal-footer-gap);
 
-      @media (width >= 40rem) {
+      @media (width >= theme(--breakpoint-sm)) {
         flex-direction: row-reverse;
       }
     }
   }
+
+  /* Transition */
+  .rvc-modal-backdrop-transition-enter,
+  .rvc-modal-backgrop-transition-leave {
+    --tw-duration: var(--rvc-modal-transition-duration);
+
+    transition-duration: var(--rvc-modal-transition-duration);
+
+    --tw-ease: var(--rvc-modal-transition-timing-function);
+
+    transition-timing-function: var(--rvc-modal-transition-timing-function);
+  }
+
+  .rvc-modal-backdrop-transition-enter-from,
+  .rvc-modal-backdrop-transition-leave-to {
+    opacity: 0;
+  }
+
+  .rvc-modal-backdrop-transition-enter-to,
+  .rvc-modal-backdrop-transition-leave-from {
+    opacity: 1;
+  }
+
+  .rvc-modal-transition-enter,
+  .rvc-modal-transition-leave {
+    --tw-duration: var(--rvc-modal-transition-duration);
+
+    transition-duration: var(--rvc-modal-transition-duration);
+
+    --tw-ease: var(--rvc-modal-transition-timing-function);
+
+    transition-timing-function: var(--rvc-modal-transition-timing-function);
+  }
+
+  .rvc-modal-transition-enter-from,
+  .rvc-modal-transition-leave-to {
+    opacity: 0;
+    translate: 0 calc(var(--spacing) * 4);
+
+    @media (width >= theme(--breakpoint-sm)) {
+      scale: 0.95;
+      translate: 0 0;
+    }
+  }
+
+  .rvc-modal-transition-enter-to,
+  .rvc-modal-transition-leave-from {
+    opacity: 1;
+    translate: 0 0;
+
+    @media (width >= theme(--breakpoint-sm)) {
+      scale: 1;
+    }
+  }
 }