@robuust-digital/vue-components 2.0.0-rc.5 → 2.0.0-rc.6

package/dist/dropdown/dropdown.css

@@ -23,67 +23,97 @@
   --rvc-dropdown-item-padding-y: 0;
   --rvc-dropdown-item-font-size: var(--rvc-base-font-size);
   --rvc-dropdown-item-font-weight: var(--rvc-base-font-weight);
+  --rvc-dropdown-transition-timing-function: ease-in-out;
+  --rvc-dropdown-transition-duration: 100ms;
 }
 
 @layer components {
   .rvc-dropdown {
-    width: var(--rvc-dropdown-width);
-    background-color: var(--rvc-dropdown-bg-color);
-    border-radius: var(--rvc-dropdown-border-radius);
-    border-width: var(--rvc-dropdown-border-width);
-    border-color: var(--rvc-dropdown-border-color);
-    padding-block: var(--rvc-dropdown-padding-y);
-    padding-inline: var(--rvc-dropdown-padding-x);
-    font-size: var(--rvc-dropdown-font-size);
-    font-weight: var(--rvc-dropdown-font-weight);
-    gap: var(--rvc-dropdown-gap);
-    z-index: var(--rvc-dropdown-z-index);
-    margin-top: calc(var(--spacing) * 1);
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    right: 0;
+    display: inline-block;
+    position: relative;
+    width: fit-content;
 
-    &.rvc-dropdown-left {
-      left: 0;
-      right: auto;
-    }
-
-    &.rvc-dropdown-full {
-      left: 0;
+    .rvc-dropdown-items {
+      display: flex;
+      position: absolute;
+      z-index: var(--rvc-dropdown-z-index);
       right: 0;
-      width: 100%;
-    }
+      flex-direction: column;
+      align-items: flex-start;
+      width: var(--rvc-dropdown-width);
+      margin-top: calc(var(--spacing) * 1);
+      padding-block: var(--rvc-dropdown-padding-y);
+      padding-inline: var(--rvc-dropdown-padding-x);
+      border-width: var(--rvc-dropdown-border-width);
+      border-radius: var(--rvc-dropdown-border-radius);
+      border-color: var(--rvc-dropdown-border-color);
+      background-color: var(--rvc-dropdown-bg-color);
+      font-size: var(--rvc-dropdown-font-size);
+      font-weight: var(--rvc-dropdown-font-weight);
+      gap: var(--rvc-dropdown-gap);
 
-    .rvc-dropdown-item {
-      color: var(--rvc-dropdown-item-color);
-      background-color: var(--rvc-dropdown-item-bg-color);
-      gap: var(--rvc-dropdown-item-gap);
-      padding-block: var(--rvc-dropdown-item-padding-y);
-      padding-inline: var(--rvc-dropdown-item-padding-x);
-      border-radius: var(--rvc-dropdown-item-border-radius);
-      font-size: var(--rvc-dropdown-item-font-size);
-      font-weight: var(--rvc-dropdown-item-font-weight);
-      display: flex;
-      align-items: center;
-      width: 100%;
+      &.rvc-dropdown-items-left {
+        right: auto;
+        left: 0;
+      }
 
-      &:hover {
-        color: var(--rvc-dropdown-item-color-hover);
-        background-color: var(--rvc-dropdown-item-bg-color-hover);
-        text-decoration: underline;
+      &.rvc-dropdown-items-full {
+        right: 0;
+        left: 0;
+        width: 100%;
+      }
 
-        .rvc-dropdown-item-icon {
-          color: var(--rvc-dropdown-icon-color-hover);
+      .rvc-dropdown-item {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding-block: var(--rvc-dropdown-item-padding-y);
+        padding-inline: var(--rvc-dropdown-item-padding-x);
+        border-radius: var(--rvc-dropdown-item-border-radius);
+        background-color: var(--rvc-dropdown-item-bg-color);
+        color: var(--rvc-dropdown-item-color);
+        font-size: var(--rvc-dropdown-item-font-size);
+        font-weight: var(--rvc-dropdown-item-font-weight);
+        gap: var(--rvc-dropdown-item-gap);
+
+        &:hover {
+          background-color: var(--rvc-dropdown-item-bg-color-hover);
+          color: var(--rvc-dropdown-item-color-hover);
+          text-decoration: underline;
+
+          .rvc-dropdown-item-icon {
+            color: var(--rvc-dropdown-icon-color-hover);
+          }
         }
-      }
 
-      .rvc-dropdown-item-icon {
-        width: var(--rvc-dropdown-icon-size);
-        height: var(--rvc-dropdown-icon-size);
-        color: var(--rvc-dropdown-icon-color);
+        .rvc-dropdown-item-icon {
+          width: var(--rvc-dropdown-icon-size);
+          height: var(--rvc-dropdown-icon-size);
+          color: var(--rvc-dropdown-icon-color);
+        }
       }
     }
   }
+
+  /* Transitions */
+  .rvc-dropdown-transition-enter,
+  .rvc-dropdown-transition-leave {
+    --tw-duration: var(--rvc-dropdown-transition-duration);
+
+    transition-duration: var(--rvc-dropdown-transition-duration);
+
+    --tw-ease: var(--rvc-dropdown-transition-timing-function);
+
+    transition-timing-function: var(--rvc-dropdown-transition-timing-function);
+  }
+
+  .rvc-dropdown-transition-enter-from,
+  .rvc-dropdown-transition-leave-to {
+    opacity: 0;
+  }
+
+  .rvc-dropdown-transition-enter-to,
+  .rvc-dropdown-transition-leave-from {
+    opacity: 1;
+  }
 }

package/dist/dropdown/index.js

@@ -1,8 +1,8 @@
-import { createElementBlock as w, openBlock as o, createElementVNode as C, createBlock as r, unref as a, normalizeClass as u, withCtx as l, renderSlot as s, createVNode as i, mergeProps as f, Transition as B, Fragment as M, renderList as $, resolveDynamicComponent as m, createCommentVNode as A, createTextVNode as D, toDisplayString as L } from "vue";
-import { Menu as N, MenuButton as p, MenuItems as S, MenuItem as v } from "@headlessui/vue";
-import { _ as V } from "../_shared/ButtonBase-CQjlJ85F.js";
+import { createElementBlock as w, openBlock as r, createElementVNode as C, createBlock as l, unref as n, normalizeClass as u, withCtx as a, renderSlot as s, createVNode as i, mergeProps as f, Transition as B, Fragment as M, renderList as $, resolveDynamicComponent as m, createCommentVNode as A, createTextVNode as D, toDisplayString as L } from "vue";
+import { Menu as N, MenuButton as v, MenuItems as S, MenuItem as p } from "@headlessui/vue";
+import { _ as V } from "../_shared/ButtonBase-DfkwHIhN.js";
 function x(t, c) {
-  return o(), w("svg", {
+  return r(), w("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor",
@@ -41,72 +41,72 @@ const T = /* @__PURE__ */ Object.assign({
   },
   emits: ["dropdown:click"],
   setup(t, { emit: c }) {
-    const b = c, y = (n) => {
+    const b = c, g = (o) => {
       const {
-        as: g,
+        as: h,
         bindAs: e,
         event: d,
-        icon: h,
+        icon: y,
         name: I,
         ...k
-      } = n;
+      } = o;
       return k;
     };
-    return (n, g) => (o(), r(a(N), {
+    return (o, h) => (r(), l(n(N), {
       as: "div",
-      class: u(["relative inline-block w-fit", t.rootClass])
+      class: u(["rvc-dropdown", t.rootClass])
     }, {
-      default: l(() => [
-        s(n.$slots, "button", {
+      default: a(() => [
+        s(o.$slots, "button", {
           label: t.label,
-          button: a(p)
+          button: n(v)
         }, () => [
-          i(a(p), f({
+          i(n(v), f({
             as: V,
             label: t.label,
             color: "light",
-            icon: a(x),
+            icon: n(x),
             "icon-left": t.alignLeft
-          }, n.$attrs), null, 16, ["label", "icon", "icon-left"])
+          }, o.$attrs), null, 16, ["label", "icon", "icon-left"])
         ]),
         i(B, {
-          "enter-active-class": "transition duration-100 ease-out",
-          "enter-from-class": "transform scale-95 opacity-0",
-          "enter-to-class": "transform scale-100 opacity-100",
-          "leave-active-class": "transition duration-75 ease-in",
-          "leave-from-class": "transform scale-100 opacity-100",
-          "leave-to-class": "transform scale-95 opacity-0"
+          "enter-active-class": "rvc-dropdown-transition-enter",
+          "enter-from-class": "rvc-dropdown-transition-enter-from",
+          "enter-to-class": "rvc-dropdown-transition-enter-to",
+          "leave-active-class": "rvc-dropdown-transition-leave",
+          "leave-from-class": "rvc-dropdown-transition-leave-from",
+          "leave-to-class": "rvc-dropdown-transition-leave-to"
         }, {
-          default: l(() => [
-            i(a(S), {
+          default: a(() => [
+            i(n(S), {
               class: u([
-                "rvc-dropdown",
+                "rvc-dropdown-items",
                 {
-                  "rvc-dropdown-left": t.alignLeft,
-                  "rvc-dropdown-full": t.fullWidth
+                  "rvc-dropdown-items-left": t.alignLeft,
+                  "rvc-dropdown-items-full": t.fullWidth
                 }
               ])
             }, {
-              default: l(() => [
-                s(n.$slots, "items", {
+              default: a(() => [
+                s(o.$slots, "items", {
                   items: t.items,
-                  menuItem: a(v)
+                  menuItem: n(p)
                 }, () => [
-                  (o(!0), w(M, null, $(t.items, (e, d) => (o(), r(a(v), {
+                  (r(!0), w(M, null, $(t.items, (e, d) => (r(), l(n(p), {
                     key: `${d}-dropdown-item`,
                     as: "template"
                   }, {
-                    default: l(() => [
-                      s(n.$slots, "item", { item: e }, () => [
-                        (o(), r(m(e.as ? e.as : "button"), f({
+                    default: a(() => [
+                      s(o.$slots, "item", { item: e }, () => [
+                        (r(), l(m(e.as ? e.as : "button"), f({
                           class: "rvc-dropdown-item",
                           ref_for: !0
-                        }, y(e), {
+                        }, g(e), {
                           as: e.bindAs ? e.bindAs : void 0,
-                          onClick: (h) => (b("dropdown:click", e), e.event ? e.event() : null)
+                          onClick: (y) => (b("dropdown:click", e), e.event ? e.event() : null)
                         }), {
-                          default: l(() => [
-                            e.icon ? (o(), r(m(e.icon), {
+                          default: a(() => [
+                            e.icon ? (r(), l(m(e.icon), {
                               key: 0,
                               class: "rvc-dropdown-item-icon"
                             })) : A("", !0),

package/dist/lightswitch/lightswitch.css

@@ -26,33 +26,33 @@
     }
 
     label {
-      cursor: pointer;
       padding-left: var(--rvc-lightswitch-label-offset);
+      cursor: pointer;
     }
 
     .rvc-lightswitch {
+      display: inline-flex;
+      position: relative;
+      align-items: center;
+      width: var(--rvc-lightswitch-width);
       height: var(--rvc-lightswitch-height);
       transition-property: var(--rvc-lightswitch-transition-property);
       transition-duration: var(--rvc-lightswitch-transition-duration);
       transition-timing-function: var(--rvc-lightswitch-transition-timing-function);
-      width: var(--rvc-lightswitch-width);
       border-radius: var(--rvc-lightswitch-border-radius);
       background-color: var(--rvc-lightswitch-bg-color);
-      position: relative;
-      display: inline-flex;
-      align-items: center;
 
       .rvc-lightswitch-toggle {
+        display: inline-block;
         width: var(--rvc-lightswitch-toggle-size);
         height: var(--rvc-lightswitch-toggle-size);
         transform: translateX(var(--rvc-lightswitch-toggle-offset));
         transform-origin: left;
-        border-radius: var(--rvc-lightswitch-border-radius);
-        background-color: var(--rvc-lightswitch-toggle-bg-color);
         transition-property: var(--rvc-lightswitch-toggle-transition-property);
         transition-duration: var(--rvc-lightswitch-toggle-transition-duration);
         transition-timing-function: var(--rvc-lightswitch-toggle-transition-timing-function);
-        display: inline-block;
+        border-radius: var(--rvc-lightswitch-border-radius);
+        background-color: var(--rvc-lightswitch-toggle-bg-color);
         box-shadow: var(--shadow-md);
       }
 

package/dist/rich-text-editor/index.js

@@ -1,10 +1,10 @@
-import { createElementBlock as r, openBlock as s, createElementVNode as n, ref as p, useAttrs as H, computed as x, watch as L, Fragment as A, createVNode as v, renderSlot as C, withCtx as _, normalizeClass as M, createCommentVNode as $, unref as m, renderList as B, createBlock as E, resolveDynamicComponent as S } from "vue";
+import { createElementBlock as r, openBlock as s, createElementVNode as n, ref as p, useAttrs as H, computed as x, watch as L, Fragment as A, createVNode as v, renderSlot as C, withCtx as _, normalizeClass as M, createCommentVNode as $, unref as f, renderList as B, createBlock as E, resolveDynamicComponent as S } from "vue";
 import { useEditor as O, EditorContent as T } from "@tiptap/vue-3";
 import N from "@tiptap/extension-link";
 import U from "@tiptap/starter-kit";
-import { _ as q } from "../_shared/Tooltip-BKXJoJ1x.js";
+import { _ as q } from "../_shared/Tooltip-B93ZF7IF.js";
 import { _ as z } from "../_shared/FormInput-abFMz_J4.js";
-import { _ as D } from "../_shared/Modal-CsI5mZlJ.js";
+import { _ as D } from "../_shared/Modal-BXOR8t7c.js";
 function I(a, c) {
   return s(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -108,7 +108,7 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
   },
   emits: ["update:modelValue", "tiptap:onCreate"],
   setup(a, { emit: c }) {
-    const i = a, h = c, g = p(!1), u = p(!1), d = p(""), f = H(), k = f.class ? `${f.class} ` : "", V = [
+    const i = a, h = c, g = p(!1), u = p(!1), d = p(""), m = H(), k = m.class ? `${m.class} ` : "", V = [
       U,
       N.configure({
         openOnClick: !1
@@ -118,7 +118,7 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
       content: i.modelValue,
       editorProps: {
         attributes: {
-          ...f,
+          ...m,
           id: i.id,
           class: `${k}rvc-textarea rvc-rich-text-textarea`
         }
@@ -220,10 +220,10 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
       n("div", {
         class: M(["rvc-rich-text", a.rootClass])
       }, [
-        m(t) ? C(l.$slots, "toolbar", {
+        f(t) ? C(l.$slots, "toolbar", {
           key: 0,
           commands: b.value,
-          tiptap: m(t)
+          tiptap: f(t)
         }, () => [
           n("ul", P, [
             (s(!0), r(A, null, B(b.value.filter((e) => e.isVisible), (e) => (s(), r("li", {
@@ -233,7 +233,7 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
                 content: e.title,
                 placement: "bottom",
                 size: "sm",
-                class: "text-sm font-medium"
+                class: "rvc-rich-text-tooltip"
               }, {
                 default: _(() => [
                   n("button", {
@@ -251,7 +251,7 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
             ]))), 128))
           ])
         ]) : $("", !0),
-        v(m(T), { editor: m(t) }, null, 8, ["editor"])
+        v(f(T), { editor: f(t) }, null, 8, ["editor"])
       ], 2)
     ], 64));
   }

package/dist/rich-text-editor/rich-text.css

@@ -28,8 +28,8 @@
       }
 
       ul, ol {
-        list-style-position: var(--rvc-rich-text-list-position);
         padding-left: var(--rvc-rich-text-list-padding);
+        list-style-position: var(--rvc-rich-text-list-position);
 
         li > * {
           display: inline;
@@ -40,28 +40,28 @@
       ol { list-style-type: decimal; }
 
       a {
-        text-decoration: var(--rvc-rich-text-anchor-text-decoration);
-        font-weight: var(--rvc-rich-text-anchor-font-weight);
         color: var(--rvc-rich-text-anchor-color);
+        font-weight: var(--rvc-rich-text-anchor-font-weight);
+        text-decoration: var(--rvc-rich-text-anchor-text-decoration);
       }
     }
 
     .rvc-rich-text-toolbar {
-      padding: var(--rvc-textarea-padding-x);
-      gap: calc(var(--spacing) * 1);
       display: flex;
-      align-items: center;
       position: absolute;
-      inset-block-start: 0;
-      inset-inline: 0;
-      flex-wrap: wrap;
       z-index: 1;
+      flex-wrap: wrap;
+      align-items: center;
+      padding: var(--rvc-textarea-padding-x);
       pointer-events: none;
+      gap: calc(var(--spacing) * 1);
+      inset-block-start: 0;
+      inset-inline: 0;
     }
 
     .rvc-rich-text-button {
-      border-radius: var(--rvc-rich-text-button-border-radius);
       padding: var(--rvc-rich-text-button-padding);
+      border-radius: var(--rvc-rich-text-button-border-radius);
       background-color: var(--rvc-rich-text-button-bg-color);
       color: var(--rvc-rich-text-button-color);
       pointer-events: auto;
@@ -79,5 +79,10 @@
         height: var(--rvc-rich-text-icon-size);
       }
     }
+
+    .rvc-rich-text-tooltip {
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+    }
   }
 }

package/dist/toast/index.js

@@ -1,6 +1,6 @@
-import { onMounted as p, watch as v, createBlock as i, openBlock as s, unref as r, withCtx as c, resolveDynamicComponent as u, normalizeClass as w, renderSlot as a, createElementVNode as m, createCommentVNode as d, toDisplayString as h, createElementBlock as $, createVNode as g } from "vue";
-import { TransitionRoot as C } from "@headlessui/vue";
-import { r as b } from "../_shared/XMarkIcon-90mcPzBs.js";
+import { onMounted as y, watch as w, createBlock as n, openBlock as s, unref as r, withCtx as c, resolveDynamicComponent as m, normalizeClass as h, renderSlot as a, createElementVNode as u, createCommentVNode as f, toDisplayString as p, createElementBlock as C, createVNode as $ } from "vue";
+import { TransitionRoot as b } from "@headlessui/vue";
+import { r as g } from "../_shared/XMarkIcon-90mcPzBs.js";
 const k = { class: "rvc-toast-title" }, V = {
   __name: "Toast",
   props: {
@@ -39,52 +39,53 @@ const k = { class: "rvc-toast-title" }, V = {
     }
   },
   emits: ["toast:close"],
-  setup(t, { emit: f }) {
-    const e = t, y = f, n = () => {
-      e.timeout && e.show && setTimeout(() => {
-        y("toast:close");
-      }, e.timeout);
+  setup(t, { emit: d }) {
+    const o = t, v = d, l = () => {
+      o.timeout && o.show && setTimeout(() => {
+        v("toast:close");
+      }, o.timeout);
     };
-    return p(() => {
-      n();
-    }), v(() => e.show, (o) => {
-      o && n();
-    }), (o, l) => (s(), i(r(C), {
+    return y(() => {
+      l();
+    }), w(() => o.show, (e) => {
+      e && l();
+    }), (e, i) => (s(), n(r(b), {
       show: t.show,
       as: "template",
-      enter: "transition-opacity duration-300",
-      "enter-from": "opacity-0",
-      "enter-to": "opacity-100",
-      leave: "transition-opacity duration-300",
-      "leave-from": "opacity-100",
-      "leave-to": "opacity-0"
+      enter: "rvc-toast-transition-enter",
+      "enter-from": "rvc-toast-transition-enter-from",
+      "enter-to": "rvc-toast-transition-enter-to",
+      leave: "rvc-toast-transition-leave",
+      "leave-from": "rvc-toast-transition-leave-from",
+      "leave-to": "rvc-toast-transition-leave-to"
     }, {
       default: c(() => [
-        (s(), i(u(t.as), {
-          class: w(["rvc-toast transition-opacity", `rvc-toast-${t.position}`, `rvc-toast-${t.type}`, { "rvc-toast-open": t.show }])
+        (s(), n(m(t.as), {
+          class: h(["rvc-toast", `rvc-toast-${t.position}`, `rvc-toast-${t.type}`, { "rvc-toast-open": t.show }])
         }, {
           default: c(() => [
-            a(o.$slots, "icon", {}, () => [
-              t.icon ? (s(), i(u(t.icon), {
+            a(e.$slots, "icon", {}, () => [
+              t.icon ? (s(), n(m(t.icon), {
                 key: 0,
                 class: "rvc-toast-icon"
-              })) : d("", !0)
+              })) : f("", !0)
             ]),
-            m("div", null, [
-              a(o.$slots, "title", {}, () => [
-                m("span", k, h(t.title), 1)
+            u("div", null, [
+              a(e.$slots, "title", {}, () => [
+                u("span", k, p(t.title), 1)
               ]),
-              a(o.$slots, "default")
+              a(e.$slots, "default")
             ]),
-            a(o.$slots, "close", {}, () => [
-              t.showClose ? (s(), $("button", {
+            a(e.$slots, "close", {}, () => [
+              t.showClose ? (s(), C("button", {
                 key: 0,
                 type: "button",
-                class: "rvc-toast-close transition-colors",
-                onClick: l[0] || (l[0] = (B) => o.$emit("toast:close"))
+                class: "rvc-toast-close",
+                "aria-label": "Close",
+                onClick: i[0] || (i[0] = (B) => e.$emit("toast:close"))
               }, [
-                g(r(b), { class: "size-5" })
-              ])) : d("", !0)
+                $(r(g))
+              ])) : f("", !0)
             ])
           ]),
           _: 3