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

package/dist/core/input.css

@@ -7,6 +7,8 @@
   --rvc-input-box-shadow: var(--rvc-base-box-shadow);
   --rvc-input-color: var(--rvc-base-input-color);
   --rvc-input-bg-color: var(--rvc-base-input-bg-color);
+  --rvc-input-bg-color-disabled: var(--rvc-base-input-bg-color-disabled);
+  --rvc-input-disabled-opacity: var(--rvc-base-input-disabled-opacity);
   --rvc-input-icon-size: var(--rvc-base-input-icon-size);
   --rvc-input-icon-color: var(--rvc-base-input-icon-color);
   --rvc-input-padding-x: var(--rvc-base-input-padding-x);
@@ -51,12 +53,20 @@
       &::placeholder {
         color: var(--rvc-input-placeholder-color);
       }
+
+      &:disabled {
+        background-color: var(--rvc-input-bg-color-disabled);
+      }
     }
 
     &:has(svg:last-child) input {
       padding-right: calc(var(--rvc-input-padding-x) + var(--rvc-input-icon-size) + 0.25rem);
     }
 
+    &:has(:disabled) {
+      opacity: var(--rvc-input-disabled-opacity);
+    }
+
     .rvc-input-prefix, svg {
       position: relative;
       z-index: 1;

package/dist/core/radio.css

@@ -5,6 +5,9 @@
   --rvc-radio-font-size: var(--text-base);
   --rvc-radio-font-weight: var(--font-weight-medium);
   --rvc-radio-color: var(--color-slate-950);
+  --rvc-radio-input-bg-color: var(--rvc-base-input-bg-color);
+  --rvc-radio-input-bg-color-disabled: var(--rvc-base-input-bg-color-disabled);
+  --rvc-radio-input-disabled-opacity: var(--rvc-base-input-disabled-opacity);
   --rvc-radio-input-size: calc(var(--spacing) * 4);
   --rvc-radio-input-border-radius: calc(infinity * 1px);
   --rvc-radio-input-border-width: 1px;
@@ -37,6 +40,7 @@
       border-width: var(--rvc-radio-input-border-width);
       border-radius: var(--rvc-radio-input-border-radius);
       border-color: var(--rvc-radio-input-border-color);
+      background-color: var(--rvc-radio-input-bg-color);
       box-shadow: var(--rvc-radio-input-box-shadow);
 
       &::before {
@@ -49,6 +53,17 @@
       }
     }
 
+    input {
+      position: absolute;
+      opacity: 0;
+      inset: 0;
+      cursor: pointer;
+
+      &:disabled {
+        cursor: default;
+      }
+    }
+
     input:checked + .rvc-radio-input {
       border-color: var(--rvc-radio-input-checked-border-color);
       background-color: var(--rvc-radio-input-checked-bg-color);
@@ -58,6 +73,12 @@
       }
     }
 
+    input:disabled + .rvc-radio-input {
+      opacity: var(--rvc-radio-input-disabled-opacity);
+      background-color: var(--rvc-radio-input-bg-color-disabled);
+      cursor: default;
+    }
+
     input:focus + .rvc-radio-input {
       @apply rvc-focus;
     }

package/dist/core/select.css

@@ -7,6 +7,8 @@
   --rvc-select-box-shadow: var(--rvc-base-box-shadow);
   --rvc-select-color: var(--rvc-base-input-color);
   --rvc-select-bg-color: var(--rvc-base-input-bg-color);
+  --rvc-select-bg-color-disabled: var(--rvc-base-input-bg-color-disabled);
+  --rvc-select-disabled-opacity: var(--rvc-base-input-disabled-opacity);
   --rvc-select-icon-size: var(--rvc-base-input-icon-size);
   --rvc-select-icon-color: var(--rvc-base-input-icon-color);
   --rvc-select-padding-x: var(--rvc-base-input-padding-x);
@@ -47,6 +49,14 @@
       &:nth-child(2) {
         padding-left: calc(var(--rvc-select-padding-x) + var(--rvc-select-icon-size) + 0.25rem);
       }
+
+      &:disabled {
+        background-color: var(--rvc-select-bg-color-disabled);
+      }
+    }
+
+    &:has(:disabled) {
+      opacity: var(--rvc-select-disabled-opacity);
     }
 
     svg {

package/dist/core/styles.css

@@ -36,6 +36,8 @@
   /* Input Variables */
   --rvc-base-input-color: var(--color-slate-600);
   --rvc-base-input-bg-color: var(--color-white);
+  --rvc-base-input-bg-color-disabled: var(--color-slate-100);
+  --rvc-base-input-disabled-opacity: 0.7;
   --rvc-base-input-icon-color: var(--color-slate-400);
   --rvc-base-input-icon-size: calc(var(--spacing) * 5);
   --rvc-base-input-padding-x: calc(var(--spacing) * 3);

package/dist/core/textarea.css

@@ -7,6 +7,8 @@
   --rvc-textarea-box-shadow: var(--rvc-base-box-shadow);
   --rvc-textarea-color: var(--rvc-base-input-color);
   --rvc-textarea-bg-color: var(--rvc-base-input-bg-color);
+  --rvc-textarea-bg-color-disabled: var(--rvc-base-input-bg-color-disabled);
+  --rvc-textarea-disabled-opacity: var(--rvc-base-input-disabled-opacity);
   --rvc-textarea-padding-x: var(--rvc-base-input-padding-x);
   --rvc-textarea-padding-y: calc(var(--spacing) * 1.5);
   --rvc-textarea-height: var(--rvc-base-input-height);
@@ -38,6 +40,11 @@
     font-weight: var(--rvc-textarea-font-weight);
     appearance: none;
 
+    &:disabled {
+      opacity: var(--rvc-textarea-disabled-opacity);
+      background-color: var(--rvc-textarea-bg-color-disabled);
+    }
+
     &.rvc-textarea-sm {
       --rvc-textarea-font-size: var(--rvc-textarea-font-size-sm);
       --rvc-textarea-padding-x: var(--rvc-textarea-padding-x-sm);

package/dist/dialogs/drawer.css

@@ -25,7 +25,7 @@
 @layer components {
   .rvc-drawer {
     position: relative;
-    z-index: 500;
+    z-index: 997;
 
     .rvc-drawer-backdrop {
       position: fixed;

package/dist/dialogs/index.js

@@ -1,8 +1,8 @@
 import { createBlock as f, openBlock as m, unref as e, withCtx as s, createVNode as i, withModifiers as B, createElementVNode as a, normalizeClass as w, renderSlot as d, createCommentVNode as b, createTextVNode as L, toDisplayString as T } from "vue";
 import { TransitionRoot as E, 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-BXOR8t7c.js";
-import { _ as W } from "../_shared/Modal-BXOR8t7c.js";
+import { u as R } from "../_shared/Modal-BztsrTZC.js";
+import { _ as W } from "../_shared/Modal-BztsrTZC.js";
 import { r as k } from "../_shared/XMarkIcon-90mcPzBs.js";
 const q = {
   class: "rvc-drawer-presentation",

package/dist/dialogs/modal.css

@@ -26,7 +26,7 @@
 @layer components {
   .rvc-modal {
     position: relative;
-    z-index: 600;
+    z-index: 998;
 
     .rvc-modal-backdrop {
       position: fixed;
@@ -72,6 +72,12 @@
       border-color: var(--rvc-modal-border-color);
       box-shadow: var(--rvc-modal-box-shadow);
       text-align: left;
+
+      &.rvc-modal-panel-max-width {
+        @media (width >= theme(--breakpoint-sm)) {
+          max-width: 32rem;
+        }
+      }
     }
 
     .rvc-modal-header {

package/dist/lightswitch/lightswitch.css

@@ -8,6 +8,8 @@
   --rvc-lightswitch-width: 3.125rem;
   --rvc-lightswitch-bg-color: var(--color-slate-200);
   --rvc-lightswitch-bg-color-enabled: var(--color-green-400);
+  --rvc-lightswitch-bg-color-disabled: var(--rvc-base-input-bg-color-disabled);
+  --rvc-lightswitch-disabled-opacity: var(--rvc-base-input-disabled-opacity);
   --rvc-lightswitch-transition-property: colors;
   --rvc-lightswitch-label-offset: 0.5rem;
   --rvc-lightswitch-toggle-offset: 0.1875rem;
@@ -25,6 +27,15 @@
       align-items: center;
     }
 
+    &:has(:disabled) .rvc-lightswitch {
+      opacity: var(--rvc-lightswitch-disabled-opacity);
+      cursor: default;
+
+      .rvc-lightswitch-toggle {
+        background-color: var(--rvc-lightswitch-bg-color-disabled);
+      }
+    }
+
     label {
       padding-left: var(--rvc-lightswitch-label-offset);
       cursor: pointer;

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

@@ -1,11 +1,11 @@
-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 { 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 M, normalizeClass as _, 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-B93ZF7IF.js";
 import { _ as z } from "../_shared/FormInput-abFMz_J4.js";
-import { _ as D } from "../_shared/Modal-BXOR8t7c.js";
-function I(a, c) {
+import { _ as D } from "../_shared/Modal-BztsrTZC.js";
+function I(i, d) {
   return s(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
@@ -20,7 +20,7 @@ function I(a, c) {
     })
   ]);
 }
-function R(a, c) {
+function R(i, d) {
   return s(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
@@ -35,7 +35,7 @@ function R(a, c) {
     })
   ]);
 }
-function j(a, c) {
+function j(i, d) {
   return s(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
@@ -55,7 +55,7 @@ function j(a, c) {
     })
   ]);
 }
-function F(a, c) {
+function F(i, d) {
   return s(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
@@ -66,7 +66,7 @@ function F(a, c) {
     n("path", { d: "M3 4.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM6.25 3a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM6.25 7.25a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM6.25 11.5a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM4 12.25a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM3 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" })
   ]);
 }
-function K(a, c) {
+function K(i, d) {
   return s(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
@@ -95,7 +95,7 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
     config: {
       type: String,
       default: "default",
-      validator: (a) => ["default", "simple"].includes(a)
+      validator: (i) => ["default", "simple"].includes(i)
     },
     customExtensions: {
       type: Array,
@@ -104,22 +104,25 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
     customCommands: {
       type: Array,
       default: () => []
+    },
+    disabled: {
+      type: Boolean
     }
   },
   emits: ["update:modelValue", "tiptap:onCreate"],
-  setup(a, { emit: c }) {
-    const i = a, h = c, g = p(!1), u = p(!1), d = p(""), m = H(), k = m.class ? `${m.class} ` : "", V = [
+  setup(i, { emit: d }) {
+    const a = i, h = d, b = p(!1), u = p(!1), c = p(""), m = H(), k = m.class ? `${m.class} ` : "", y = [
       U,
       N.configure({
         openOnClick: !1
       })
     ], t = O({
-      extensions: [...V, ...i.customExtensions],
-      content: i.modelValue,
+      extensions: [...y, ...a.customExtensions],
+      content: a.modelValue,
       editorProps: {
         attributes: {
           ...m,
-          id: i.id,
+          id: a.id,
           class: `${k}rvc-textarea rvc-rich-text-textarea`
         }
       },
@@ -131,9 +134,9 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
         h("update:modelValue", o);
       },
       onSelectionUpdate({ editor: l }) {
-        g.value = !l.view.state.selection.empty;
+        b.value = !l.view.state.selection.empty;
       }
-    }), y = x(() => [
+    }), V = x(() => [
       {
         name: "bold",
         icon: I,
@@ -154,7 +157,7 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
         name: "bulletList",
         icon: F,
         title: "Bullet List",
-        isVisible: i.config === "default",
+        isVisible: a.config === "default",
         isActive: () => t.value.isActive("bulletList"),
         action: () => t.value.commands.toggleBulletList()
       },
@@ -162,7 +165,7 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
         name: "orderedList",
         icon: K,
         title: "Ordered List",
-        isVisible: i.config === "default",
+        isVisible: a.config === "default",
         isActive: () => t.value.isActive("orderedList"),
         action: () => t.value.commands.toggleOrderedList()
       },
@@ -170,15 +173,15 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
         name: "link",
         icon: j,
         title: "Hyperlink",
-        isVisible: i.config === "default",
-        disabled: !g.value && !t.value.isActive("link"),
+        isVisible: a.config === "default",
+        disabled: !b.value && !t.value.isActive("link"),
         isActive: () => t.value.isActive("link"),
         action: () => {
-          d.value = t.value.getAttributes("link").href, u.value = !0;
+          c.value = t.value.getAttributes("link").href, u.value = !0;
         }
       }
-    ]), b = x(() => {
-      const l = y.value.filter((e) => i.config === "default" || ["bold", "italic"].includes(e.name)), o = i.customCommands.map((e) => ({
+    ]), g = x(() => {
+      const l = V.value.filter((e) => a.config === "default" || ["bold", "italic"].includes(e.name)), o = a.customCommands.map((e) => ({
         ...e,
         isVisible: e.isVisible ?? !0,
         disabled: typeof e.disabled == "function" ? e.disabled(t.value) : e.disabled ?? !1,
@@ -190,25 +193,25 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
       }));
       return [...l, ...o];
     });
-    L(() => i.modelValue, (l) => {
+    L(() => a.modelValue, (l) => {
       t.value.getHTML() === l || t.value.commands.setContent(l, !1);
     });
     const Z = () => {
-      t.value.commands.setLink({ href: d.value }), u.value = !1, d.value = null;
+      t.value.commands.setLink({ href: c.value }), u.value = !1, c.value = null;
     };
     return (l, o) => (s(), r(A, null, [
       v(D, {
-        id: `${i.id}-modal-add-hyperlink`,
+        id: `${a.id}-modal-add-hyperlink`,
         title: "Add Hyperlink",
         as: "form",
         show: u.value,
         "onModal:close": o[1] || (o[1] = (e) => u.value = !1),
         "onModal:save": Z
       }, {
-        default: _(() => [
+        default: M(() => [
           v(z, {
-            modelValue: d.value,
-            "onUpdate:modelValue": o[0] || (o[0] = (e) => d.value = e),
+            modelValue: c.value,
+            "onUpdate:modelValue": o[0] || (o[0] = (e) => c.value = e),
             placeholder: "https://www.example.com",
             type: "url",
             required: ""
@@ -218,15 +221,15 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
       }, 8, ["id", "show"]),
       C(l.$slots, "default"),
       n("div", {
-        class: M(["rvc-rich-text", a.rootClass])
+        class: _(["rvc-rich-text", i.rootClass, { "rvc-rich-text-disabled": i.disabled }])
       }, [
         f(t) ? C(l.$slots, "toolbar", {
           key: 0,
-          commands: b.value,
+          commands: g.value,
           tiptap: f(t)
         }, () => [
           n("ul", P, [
-            (s(!0), r(A, null, B(b.value.filter((e) => e.isVisible), (e) => (s(), r("li", {
+            (s(!0), r(A, null, B(g.value.filter((e) => e.isVisible), (e) => (s(), r("li", {
               key: `toolbar-item-command-${e.name}`
             }, [
               v(q, {
@@ -235,12 +238,12 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
                 size: "sm",
                 class: "rvc-rich-text-tooltip"
               }, {
-                default: _(() => [
+                default: M(() => [
                   n("button", {
                     disabled: e.disabled,
                     type: "button",
                     "aria-label": e.title,
-                    class: M([{ "rvc-rich-text-button-active": e.isActive() }, "rvc-rich-text-button"]),
+                    class: _([{ "rvc-rich-text-button-active": e.isActive() }, "rvc-rich-text-button"]),
                     onClick: e.action
                   }, [
                     (s(), E(S(e.icon)))

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

@@ -46,6 +46,19 @@
       }
     }
 
+    &.rvc-rich-text-disabled {
+      opacity: var(--rvc-textarea-disabled-opacity);
+      pointer-events: none;
+
+      .rvc-rich-text-button {
+        pointer-events: none;
+      }
+
+      .rvc-rich-text-textarea {
+        background-color: var(--rvc-textarea-bg-color-disabled);
+      }
+    }
+
     .rvc-rich-text-toolbar {
       display: flex;
       position: absolute;

package/dist/toast/toast.css

@@ -61,7 +61,7 @@
   .rvc-toast {
     display: flex;
     position: fixed;
-    z-index: 99;
+    z-index: 999;
     left: 50%;
     width: var(--rvc-toast-width);
     max-width: var(--rvc-toast-max-width);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robuust-digital/vue-components",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0-rc.7",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -19,7 +19,8 @@
   "files": [
     "dist",
     "LICENSE",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "main": "./dist/core/index.js",
   "module": "./dist/core/index.js",