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

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

package/dist/toast/toast.css

@@ -13,7 +13,7 @@
   --rvc-toast-anchor-decoration: underline;
   --rvc-toast-icon-size: calc(var(--spacing) * 6);
   --rvc-toast-title-font-weight: var(--font-weight-medium);
-  --rvc-toast-transition-property: colors;
+  --rvc-toast-transition-property: color, background-color, border-color;
   --rvc-toast-offset: calc(var(--spacing) * 6);
 
   /* Default (Info) variant */
@@ -59,23 +59,26 @@
 
 @layer components {
   .rvc-toast {
-    gap: var(--rvc-toast-gap);
-    padding: var(--rvc-toast-padding-y) var(--rvc-toast-padding-x);
-    border-radius: var(--rvc-toast-border-radius);
-    font-size: var(--rvc-toast-font-size);
-    background-color: var(--rvc-toast-bg-color);
-    color: var(--rvc-toast-color);
-    width: var(--rvc-toast-width);
-    max-width: var(--rvc-toast-max-width);
-    border-width: var(--rvc-toast-border-width);
-    border-color: var(--rvc-toast-border-color);
-    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.05));
     display: flex;
     position: fixed;
+    z-index: 999;
     left: 50%;
-    transform: translateX(-50%);
+    width: var(--rvc-toast-width);
+    max-width: var(--rvc-toast-max-width);
+    padding: var(--rvc-toast-padding-y) var(--rvc-toast-padding-x);
     overflow: hidden;
-    z-index: 99;
+    transform: translateX(-50%);
+    transition-property: opacity;
+    transition-duration: var(--rvc-toast-transition-duration);
+    transition-timing-function: var(--rvc-toast-transition-timing-function);
+    border-width: var(--rvc-toast-border-width);
+    border-radius: var(--rvc-toast-border-radius);
+    border-color: var(--rvc-toast-border-color);
+    background-color: var(--rvc-toast-bg-color);
+    color: var(--rvc-toast-color);
+    font-size: var(--rvc-toast-font-size);
+    gap: var(--rvc-toast-gap);
+    filter: drop-shadow(0 4px 8px rgb(0 0 0 / 5%));
 
     &.rvc-toast-bottom {
       bottom: var(--rvc-toast-offset);
@@ -86,11 +89,11 @@
     }
 
     a {
-      text-decoration: var(--rvc-toast-anchor-decoration);
       transition-property: var(--rvc-toast-transition-property);
       transition-duration: var(--rvc-toast-transition-duration);
       transition-timing-function: var(--rvc-toast-transition-timing-function);
       color: var(--rvc-toast-anchor-color);
+      text-decoration: var(--rvc-toast-anchor-decoration);
 
       &:hover {
         color: var(--rvc-toast-anchor-color);
@@ -98,9 +101,9 @@
     }
 
     ul, ol {
-      list-style-position: inside;
       margin: 0;
       padding-left: calc(var(--spacing) * 2);
+      list-style-position: inside;
     }
 
     ul {
@@ -112,39 +115,44 @@
     }
 
     .rvc-toast-close {
-      background-color: var(--rvc-toast-close-bg-color);
-      color: var(--rvc-toast-icon-color);
-      border-bottom-left-radius: var(--rvc-toast-border-radius);
-      transition-property: var(--rvc-toast-transition-property);
-      transition-duration: var(--rvc-toast-transition-duration);
-      transition-timing-function: var(--rvc-toast-transition-timing-function);
       display: inline-flex;
-      justify-content: center;
-      align-items: center;
       position: absolute;
       top: 0;
       right: 0;
+      align-items: center;
+      justify-content: center;
       padding: calc(var(--spacing) * 1.5);
+      transition-property: var(--rvc-toast-transition-property);
+      transition-duration: var(--rvc-toast-transition-duration);
+      transition-timing-function: var(--rvc-toast-transition-timing-function);
+      border-bottom-left-radius: var(--rvc-toast-border-radius);
+      background-color: var(--rvc-toast-close-bg-color);
+      color: var(--rvc-toast-icon-color);
 
       &:hover {
         background-color: var(--rvc-toast-close-bg-color-hover);
         color: var(--rvc-toast-icon-color-hover);
       }
+
+      svg {
+        width: calc(var(--spacing) * 5);
+        height: calc(var(--spacing) * 5);
+      }
     }
 
     .rvc-toast-icon {
+      display: block;
+      flex-shrink: 0;
       width: var(--rvc-toast-icon-size);
       height: var(--rvc-toast-icon-size);
       color: var(--rvc-toast-icon-color);
-      display: block;
-      flex-shrink: 0;
     }
 
     .rvc-toast-title {
-      color: var(--rvc-toast-title-color);
-      font-weight: var(--rvc-toast-title-font-weight);
       display: block;
       margin-bottom: calc(var(--spacing) * 2);
+      color: var(--rvc-toast-title-color);
+      font-weight: var(--rvc-toast-title-font-weight);
 
       &:last-child {
         margin-bottom: 0;
@@ -184,4 +192,22 @@
       --rvc-toast-anchor-color-hover: var(--rvc-toast-anchor-color-danger-hover);
     }
   }
+
+  /* Transitions */
+  .rvc-toast-transition-enter,
+  .rvc-toast-transition-leave {
+    transition-property: opacity;
+    transition-duration: 300ms;
+    transition-timing-function: var(--rvc-toast-transition-timing-function);
+  }
+
+  .rvc-toast-transition-enter-from,
+  .rvc-toast-transition-leave-to {
+    opacity: 0;
+  }
+
+  .rvc-toast-transition-enter-to,
+  .rvc-toast-transition-leave-from {
+    opacity: 1;
+  }
 }

package/dist/tooltip/index.js

@@ -1,4 +1,4 @@
-import { _ as o } from "../_shared/Tooltip-BKXJoJ1x.js";
+import { _ as o } from "../_shared/Tooltip-B93ZF7IF.js";
 export {
   o as Tooltip,
   o as default

package/dist/tooltip/tooltip.css

@@ -20,39 +20,36 @@
 
 @layer components {
   .rvc-tooltip {
+    visibility: hidden;
+    position: absolute;
     z-index: 10;
-    color: var(--rvc-tooltip-color);
+    top: 0;
+    left: 0;
+    width: var(--rvc-tooltip-width);
+    padding: var(--rvc-tooltip-padding-y) var(--rvc-tooltip-padding-x) var(--rvc-tooltip-padding-y) var(--rvc-tooltip-padding-x);
     transition-property: var(--rvc-tooltip-transition-property);
     transition-duration: var(--rvc-tooltip-transition-duration);
     transition-timing-function: var(--rvc-tooltip-transition-timing-function);
+    opacity: 0;
+    color: var(--rvc-tooltip-color);
     text-align: var(--rvc-tooltip-text-align);
-    padding-top: var(--rvc-tooltip-padding-y);
-    padding-right: var(--rvc-tooltip-padding-x);
-    padding-bottom: var(--rvc-tooltip-padding-y);
-    padding-left: var(--rvc-tooltip-padding-x);
-    width: var(--rvc-tooltip-width);
-    position: absolute;
-    top: 0;
-    left: 0;
 
     &::before {
       content: '';
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      z-index: -1;
+      inset: 0;
       border-radius: var(--rvc-tooltip-border-radius);
       background-color: var(--rvc-tooltip-bg-color);
-      z-index: -1;
     }
 
     .rvc-tooltip-arrow {
-      background-color: var(--rvc-tooltip-bg-color);
+      position: absolute;
+      z-index: -1;
       width: var(--rvc-tooltip-arrow-size);
       height: var(--rvc-tooltip-arrow-size);
+      background-color: var(--rvc-tooltip-bg-color);
       clip-path: polygon(0 0, 50% 50%, 100% 0);
-      z-index: -1;
     }
 
     &.rvc-tooltip-blur::before,
@@ -66,4 +63,9 @@
       --rvc-tooltip-arrow-size: var(--rvc-tooltip-arrow-size-sm);
     }
   }
+
+  .rvc-tooltip-wrapper:hover .rvc-tooltip {
+    visibility: visible;
+    opacity: 1;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robuust-digital/vue-components",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.10",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -17,11 +17,15 @@
   },
   "homepage": "https://github.com/robuust/vue-components/#readme",
   "files": [
-    "./dist",
-    "./LICENSE",
-    "./README.md"
+    "dist",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
   ],
+  "main": "./dist/core/index.js",
+  "module": "./dist/core/index.js",
   "exports": {
+    ".": "./dist/core/index.js",
     "./core": "./dist/core/index.js",
     "./core/css": "./dist/core/styles.css",
     "./core/theme": "./dist/core/theme.css",
@@ -47,7 +51,8 @@
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
     "test:unit": "vitest run",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "lint:style": "stylelint 'src/**/*.{vue,css}'"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.6",
@@ -56,7 +61,7 @@
     "@tiptap/extension-link": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
     "@tiptap/vue-3": "^2.11.5",
-    "@vueuse/core": "^12.6.1",
+    "@vueuse/core": "^13.0.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {
@@ -71,14 +76,23 @@
     "eslint-plugin-vue": "^9.32.0",
     "jsdom": "^26.0.0",
     "postcss": "^8.5.2",
+    "postcss-html": "^1.8.0",
+    "postcss-scss": "^4.0.9",
+    "stylelint": "^16.14.1",
+    "stylelint-config-property-sort-order-smacss": "^10.0.0",
+    "stylelint-config-standard": "^38.0.0",
     "tailwindcss": "^4.0.6",
     "vite": "^6.1.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-static-copy": "^2.2.0",
+    "vite-plugin-static-copy": "^3.0.0",
+    "vite-plugin-stylelint": "^6.0.0",
     "vite-plugin-vue-devtools": "^7.7.2",
     "vite-svg-loader": "^5.1.0",
     "vitepress": "^2.0.0-alpha.2",
     "vitest": "^3.0.5"
   },
-  "packageManager": "yarn@4.6.0"
+  "resolutions": {
+    "@vueuse/core": "^13.0.0"
+  },
+  "packageManager": "yarn@4.9.1"
 }

package/dist/_shared/Modal-COVlUEud.js

@@ -1,193 +0,0 @@
-import { ref as g, computed as f, createBlock as w, openBlock as C, unref as a, withCtx as r, createVNode as n, withModifiers as x, createElementVNode as o, normalizeClass as B, renderSlot as b, createElementBlock as E, createCommentVNode as D, createTextVNode as L, toDisplayString as h } from "vue";
-import { TransitionRoot as F, Dialog as I, TransitionChild as $, DialogPanel as N, DialogTitle as R } from "@headlessui/vue";
-import { _ as S } from "./ButtonBase-CQjlJ85F.js";
-import { r as T } from "./XMarkIcon-90mcPzBs.js";
-function V(t) {
-  const c = g(null), i = g(!1), y = f(() => t.as === "form"), v = f(() => `${t.id}-title`), d = f(() => `${t.id}-content`), u = f(() => {
-    var m;
-    return (m = c.value) == null ? void 0 : m.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-  });
-  return {
-    contentRef: c,
-    ready: i,
-    isForm: y,
-    titleId: v,
-    descriptionId: d,
-    initialFocusElement: u
-  };
-}
-const q = {
-  role: "presentation",
-  class: "fixed inset-0 z-10 w-screen overflow-y-auto"
-}, z = { class: "flex min-h-full justify-center p-4 items-center sm:p-0" }, j = { class: "rvc-modal-header" }, M = { class: "flex items-center justify-between" }, A = {
-  key: 0,
-  class: "ml-3 flex h-7 items-center"
-}, P = ["id"], G = { class: "rvc-modal-footer" }, Q = {
-  __name: "Modal",
-  props: {
-    as: {
-      type: String,
-      default: "div"
-    },
-    id: {
-      type: String,
-      required: !0
-    },
-    title: {
-      type: String,
-      required: !0
-    },
-    showClose: {
-      type: Boolean
-    },
-    spinning: {
-      type: Boolean
-    },
-    submitLabel: {
-      type: String,
-      default: "Confirm"
-    },
-    cancelLabel: {
-      type: String,
-      default: "Cancel"
-    },
-    panelClass: {
-      type: String,
-      default: "sm:max-w-lg"
-    }
-  },
-  emits: ["modal:open", "modal:close", "modal:save", "modal:closed"],
-  setup(t, { emit: c }) {
-    const i = c, y = t, {
-      contentRef: v,
-      ready: d,
-      isForm: u,
-      titleId: m,
-      descriptionId: p,
-      initialFocusElement: k
-    } = V(y);
-    return (s, e) => (C(), w(a(F), { as: "template" }, {
-      default: r(() => [
-        n(a(I), {
-          as: t.as,
-          class: "rvc-modal",
-          static: "",
-          "aria-modal": "true",
-          role: "dialog",
-          "initial-focus": a(k),
-          "aria-labelledby": a(m),
-          onClose: e[6] || (e[6] = (l) => s.$emit("modal:close")),
-          onSubmit: e[7] || (e[7] = x((l) => i("modal:save", l), ["prevent"]))
-        }, {
-          default: r(() => [
-            n(a($), {
-              as: "template",
-              enter: "ease-out duration-300",
-              "enter-from": "opacity-0",
-              "enter-to": "opacity-100",
-              leave: "ease-in duration-200",
-              "leave-from": "opacity-100",
-              "leave-to": "opacity-0",
-              onBeforeEnter: e[0] || (e[0] = (l) => i("modal:open"))
-            }, {
-              default: r(() => e[8] || (e[8] = [
-                o("div", {
-                  "aria-hidden": "true",
-                  class: "fixed inset-0 transition-opacity rvc-modal-backdrop"
-                }, null, -1)
-              ])),
-              _: 1
-            }),
-            o("div", q, [
-              o("div", z, [
-                n(a($), {
-                  as: "template",
-                  enter: "ease-out duration-300",
-                  "enter-from": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
-                  "enter-to": "opacity-100 translate-y-0 sm:scale-100",
-                  leave: "ease-in duration-200",
-                  "leave-from": "opacity-100 translate-y-0 sm:scale-100",
-                  "leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
-                  onBeforeEnter: e[4] || (e[4] = (l) => d.value = !0),
-                  onAfterLeave: e[5] || (e[5] = (l) => (d.value = !1, i("modal:closed")))
-                }, {
-                  default: r(() => [
-                    n(a(N), {
-                      class: B(["rvc-modal-panel", t.panelClass]),
-                      "aria-busy": t.spinning,
-                      "aria-describedby": a(p)
-                    }, {
-                      default: r(() => [
-                        o("header", j, [
-                          b(s.$slots, "header", { title: t.title }, () => [
-                            o("div", M, [
-                              n(a(R), {
-                                id: a(m),
-                                class: "rvc-modal-title"
-                              }, {
-                                default: r(() => [
-                                  L(h(t.title), 1)
-                                ]),
-                                _: 1
-                              }, 8, ["id"]),
-                              t.showClose ? (C(), E("div", A, [
-                                o("button", {
-                                  type: "button",
-                                  class: "relative rvc-modal-close",
-                                  "aria-label": "Close panel",
-                                  onClick: e[1] || (e[1] = (l) => i("modal:close"))
-                                }, [
-                                  n(a(T), {
-                                    class: "size-full",
-                                    "aria-hidden": "true"
-                                  })
-                                ])
-                              ])) : D("", !0)
-                            ])
-                          ])
-                        ]),
-                        o("div", {
-                          id: a(p),
-                          ref_key: "contentRef",
-                          ref: v,
-                          class: "rvc-modal-content"
-                        }, [
-                          b(s.$slots, "default", { ready: a(d) })
-                        ], 8, P),
-                        o("footer", G, [
-                          b(s.$slots, "footer", { loading: t.spinning }, () => [
-                            n(S, {
-                              type: a(u) ? "submit" : "button",
-                              label: t.submitLabel,
-                              spinning: t.spinning,
-                              disabled: t.spinning,
-                              onClick: e[2] || (e[2] = (l) => !a(u) && s.$emit("modal:save"))
-                            }, null, 8, ["type", "label", "spinning", "disabled"]),
-                            n(S, {
-                              type: "button",
-                              color: "light",
-                              label: t.cancelLabel,
-                              onClick: e[3] || (e[3] = (l) => s.$emit("modal:close"))
-                            }, null, 8, ["label"])
-                          ])
-                        ])
-                      ]),
-                      _: 3
-                    }, 8, ["class", "aria-busy", "aria-describedby"])
-                  ]),
-                  _: 3
-                })
-              ])
-            ])
-          ]),
-          _: 3
-        }, 8, ["as", "initial-focus", "aria-labelledby"])
-      ]),
-      _: 3
-    }));
-  }
-};
-export {
-  Q as _,
-  V as u
-};