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

package/dist/core/input.css

@@ -59,7 +59,7 @@
       }
     }
 
-    &:has(svg:last-child) input {
+    &:has(.rvc-input-suffix) input {
       padding-right: calc(var(--rvc-input-padding-x) + var(--rvc-input-icon-size) + 0.25rem);
     }
 
@@ -67,7 +67,8 @@
       opacity: var(--rvc-input-disabled-opacity);
     }
 
-    .rvc-input-prefix, svg {
+    .rvc-input-prefix,
+    .rvc-input-suffix {
       position: relative;
       z-index: 1;
       grid-column-start: 1;
@@ -82,14 +83,14 @@
       justify-self: start;
     }
 
+    .rvc-input-suffix {
+      margin-right: var(--rvc-input-padding-x);
+      justify-self: end;
+    }
+
     svg {
       width: var(--rvc-input-icon-size);
       height: var(--rvc-input-icon-size);
-      justify-self: end;
-
-      &:last-child:not(:first-child) {
-        margin-right: var(--rvc-input-padding-x);
-      }
     }
 
     &.rvc-input-sm {

package/dist/core/radio.css

@@ -24,7 +24,11 @@
     cursor: pointer;
     gap: var(--rvc-radio-gap);
 
-    label {
+    &:has(*:disabled) {
+      cursor: default;
+    }
+
+    .rvc-radio-label {
       color: var(--rvc-radio-color);
       font-size: var(--rvc-radio-font-size);
       font-weight: var(--rvc-radio-font-weight);
@@ -54,14 +58,7 @@
     }
 
     input {
-      position: absolute;
-      opacity: 0;
-      inset: 0;
-      cursor: pointer;
-
-      &:disabled {
-        cursor: default;
-      }
+      display: none;
     }
 
     input:checked + .rvc-radio-input {

package/dist/core/utilities.css

@@ -10,3 +10,15 @@
   outline: var(--rvc-base-focus-outline-color) var(--rvc-base-focus-outline-style) var(--rvc-base-focus-outline-offset);
   outline-offset: var(--rvc-base-focus-outline-width);
 }
+
+@utility rvc-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(0);
+  border-width: 0;
+  white-space: nowrap;
+}

package/dist/core.d.ts

@@ -0,0 +1,27 @@
+import { default as Accordion } from './components/Accordion.vue';
+import { default as Alert } from './components/Alert.vue';
+import { default as Badge } from './components/Badge.vue';
+import { default as ButtonBase } from './components/ButtonBase.vue';
+import { default as Checkbox } from './components/Checkbox.vue';
+import { default as DataTable } from './components/DataTable.vue';
+import { default as EmptyState } from './components/EmptyState.vue';
+import { default as FormInput } from './components/FormInput.vue';
+import { default as FormSelect } from './components/FormSelect.vue';
+import { default as FormTextarea } from './components/FormTextarea.vue';
+import { default as Pagination } from './components/Pagination.vue';
+import { default as Radio } from './components/Radio.vue';
+import { default as Tabs } from './components/Tabs.vue';
+export type { AccordionProps, AccordionItem } from './components/Accordion.vue';
+export type { AlertProps, AlertType } from './components/Alert.vue';
+export type { BadgeProps, BadgeColor, BadgeSize } from './components/Badge.vue';
+export type { ButtonProps } from './components/ButtonBase.vue';
+export type { CheckboxProps, CheckboxModelValue } from './components/Checkbox.vue';
+export type { DataTableProps, DataTableHeader, DataTableItem, DataTableSortBy, DataTablePagination, } from './components/DataTable.vue';
+export type { EmptyStateProps } from './components/EmptyState.vue';
+export type { FormInputProps, FormInputModelValue, FormInputSize } from './components/FormInput.vue';
+export type { FormSelectProps, FormSelectModelValue, FormSelectSize, FormSelectOption, } from './components/FormSelect.vue';
+export type { FormTextareaProps, FormTextareaSize } from './components/FormTextarea.vue';
+export type { PaginationProps, PaginationData, PaginationLink } from './components/Pagination.vue';
+export type { RadioProps, RadioModelValue } from './components/Radio.vue';
+export type { TabsProps, TabItem, TabStyle } from './components/Tabs.vue';
+export { Accordion, Alert, Badge, ButtonBase, Checkbox, DataTable, EmptyState, FormInput, FormSelect, FormTextarea, Pagination, Radio, Tabs, };

package/dist/dialogs/index.js

@@ -1,208 +1,6 @@
-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-dqDGKVw5.js";
-import { _ as W } from "../_shared/Modal-dqDGKVw5.js";
-import { r as k } from "../_shared/XMarkIcon-90mcPzBs.js";
-const q = {
-  class: "rvc-drawer-presentation",
-  role: "presentation"
-}, 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: {
-      type: String,
-      default: "form"
-    },
-    id: {
-      type: String,
-      required: !0
-    },
-    title: {
-      type: String,
-      required: !0
-    },
-    showClose: {
-      type: Boolean
-    },
-    scrolledDown: {
-      type: Boolean
-    },
-    headerSticky: {
-      type: Boolean
-    },
-    spinning: {
-      type: Boolean
-    },
-    submitLabel: {
-      type: String,
-      default: "Save"
-    },
-    cancelLabel: {
-      type: String,
-      default: "Cancel"
-    },
-    panelClass: {
-      type: String,
-      default: "rvc-drawer-panel-max-width"
-    }
-  },
-  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": 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: s(() => [
-            i(r(p), {
-              as: "template",
-              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: s(() => e[8] || (e[8] = [
-                a("div", {
-                  class: "rvc-drawer-backdrop",
-                  "aria-hidden": "true"
-                }, null, -1)
-              ])),
-              _: 1,
-              __: [8]
-            }),
-            a("div", q, [
-              a("div", A, [
-                a("div", F, [
-                  i(r(p), {
-                    as: "template",
-                    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: s(() => [
-                      i(r(V), {
-                        class: w(["rvc-drawer-panel", t.panelClass]),
-                        "aria-busy": t.spinning,
-                        "aria-describedby": r(f)
-                      }, {
-                        default: s(() => [
-                          a("div", I, [
-                            a("header", {
-                              class: w([{ "rvc-drawer-header-sticky": t.headerSticky }, "rvc-drawer-header"])
-                            }, [
-                              d(l.$slots, "header", {
-                                title: t.title,
-                                showClose: t.showClose
-                              }, () => [
-                                a("div", M, [
-                                  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" })
-                                      ])
-                                    ])
-                                  ]) : b("", !0)
-                                ])
-                              ])
-                            ], 2),
-                            a("div", {
-                              class: w([{ "rvc-drawer-scroll-reverse": t.scrolledDown }, "rvc-drawer-scroll"])
-                            }, [
-                              a("div", {
-                                id: r(f),
-                                ref_key: "contentRef",
-                                ref: S,
-                                class: "rvc-drawer-content"
-                              }, [
-                                d(l.$slots, "default", { ready: r(c) })
-                              ], 8, z)
-                            ], 2),
-                            a("footer", P, [
-                              d(l.$slots, "footer", { loading: t.spinning }, () => [
-                                i(g, {
-                                  type: "button",
-                                  label: t.cancelLabel,
-                                  color: "light",
-                                  onClick: e[3] || (e[3] = (n) => o("drawer:close"))
-                                }, null, 8, ["label"]),
-                                r(h) ? (m(), u(g, {
-                                  key: 0,
-                                  type: "submit",
-                                  label: t.submitLabel,
-                                  spinning: t.spinning,
-                                  disabled: t.spinning
-                                }, null, 8, ["label", "spinning", "disabled"])) : b("", !0)
-                              ])
-                            ])
-                          ])
-                        ]),
-                        _: 3
-                      }, 8, ["class", "aria-busy", "aria-describedby"])
-                    ]),
-                    _: 3
-                  })
-                ])
-              ])
-            ])
-          ]),
-          _: 3
-        }, 8, ["as", "initial-focus", "aria-labelledby"])
-      ]),
-      _: 3
-    }));
-  }
-};
+import { _ as a } from "../_shared/Drawer.vue_vue_type_script_setup_true_lang-DT6tBBZ7.js";
+import { _ as f } from "../_shared/Modal.vue_vue_type_script_setup_true_lang-DBEOIZnO.js";
 export {
-  O as Drawer,
-  W as Modal
+  a as Drawer,
+  f as Modal
 };

package/dist/dialogs.d.ts

@@ -0,0 +1,5 @@
+import { default as Drawer } from './components/Drawer.vue';
+import { default as Modal } from './components/Modal.vue';
+export type { DrawerProps } from './components/Drawer.vue';
+export type { ModalProps } from './components/Modal.vue';
+export { Drawer, Modal };

package/dist/dropdown/index.js

@@ -1,133 +1,5 @@
-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 r(), w("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 20 20",
-    fill: "currentColor",
-    "aria-hidden": "true",
-    "data-slot": "icon"
-  }, [
-    C("path", { d: "M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" })
-  ]);
-}
-const T = /* @__PURE__ */ Object.assign({
-  inheritAttrs: !1
-}, {
-  __name: "Dropdown",
-  props: {
-    items: {
-      type: Array,
-      required: !0,
-      default: () => []
-    },
-    alignLeft: {
-      type: Boolean,
-      default: !1
-    },
-    fullWidth: {
-      type: Boolean,
-      default: !1
-    },
-    label: {
-      type: String,
-      default: "Options"
-    },
-    rootClass: {
-      type: String,
-      default: ""
-    }
-  },
-  emits: ["dropdown:click"],
-  setup(t, { emit: c }) {
-    const b = c, g = (o) => {
-      const {
-        as: h,
-        bindAs: e,
-        event: d,
-        icon: y,
-        name: I,
-        ...k
-      } = o;
-      return k;
-    };
-    return (o, h) => (r(), l(n(N), {
-      as: "div",
-      class: u(["rvc-dropdown", t.rootClass])
-    }, {
-      default: a(() => [
-        s(o.$slots, "button", {
-          label: t.label,
-          button: n(v)
-        }, () => [
-          i(n(v), f({
-            as: V,
-            label: t.label,
-            color: "light",
-            icon: n(x),
-            "icon-left": t.alignLeft
-          }, o.$attrs), null, 16, ["label", "icon", "icon-left"])
-        ]),
-        i(B, {
-          "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: a(() => [
-            i(n(S), {
-              class: u([
-                "rvc-dropdown-items",
-                {
-                  "rvc-dropdown-items-left": t.alignLeft,
-                  "rvc-dropdown-items-full": t.fullWidth
-                }
-              ])
-            }, {
-              default: a(() => [
-                s(o.$slots, "items", {
-                  items: t.items,
-                  menuItem: n(p)
-                }, () => [
-                  (r(!0), w(M, null, $(t.items, (e, d) => (r(), l(n(p), {
-                    key: `${d}-dropdown-item`,
-                    as: "template"
-                  }, {
-                    default: a(() => [
-                      s(o.$slots, "item", { item: e }, () => [
-                        (r(), l(m(e.as ? e.as : "button"), f({ class: "rvc-dropdown-item" }, { ref_for: !0 }, g(e), {
-                          as: e.bindAs ? e.bindAs : void 0,
-                          onClick: (y) => (b("dropdown:click", e), e.event ? e.event() : null)
-                        }), {
-                          default: a(() => [
-                            e.icon ? (r(), l(m(e.icon), {
-                              key: 0,
-                              class: "rvc-dropdown-item-icon"
-                            })) : A("", !0),
-                            D(" " + L(e.name), 1)
-                          ]),
-                          _: 2
-                        }, 1040, ["as", "onClick"]))
-                      ])
-                    ]),
-                    _: 2
-                  }, 1024))), 128))
-                ])
-              ]),
-              _: 3
-            }, 8, ["class"])
-          ]),
-          _: 3
-        })
-      ]),
-      _: 3
-    }, 8, ["class"]));
-  }
-});
+import { _ as o } from "../_shared/Dropdown.vue_vue_type_script_setup_true_lang-D5vTFLkq.js";
 export {
-  T as Dropdown,
-  T as default
+  o as Dropdown,
+  o as default
 };

package/dist/dropdown.d.ts

@@ -0,0 +1,4 @@
+import { default as Dropdown } from './components/Dropdown.vue';
+export type { DropdownProps, DropdownItem } from './components/Dropdown.vue';
+export { Dropdown };
+export default Dropdown;

package/dist/index/index.js

@@ -0,0 +1,35 @@
+import { _ as r, a as t, b as e, c as s, d as m, e as p, f as x, g as f, h as _, i } from "../_shared/Tabs.vue_vue_type_script_setup_true_lang-CsGx6wBK.js";
+import { _ as d } from "../_shared/ChevronDownIcon-DaaXfD3C.js";
+import { _ as n } from "../_shared/ButtonBase.vue_vue_type_script_setup_true_lang-B0YsKehI.js";
+import { _ as h } from "../_shared/FormInput.vue_vue_type_script_setup_true_lang-BhJpG-Fw.js";
+import { _ as g } from "../_shared/Combobox.vue_vue_type_script_setup_true_lang-D1vKMJok.js";
+import { _ as B } from "../_shared/Drawer.vue_vue_type_script_setup_true_lang-DT6tBBZ7.js";
+import { _ as F } from "../_shared/Modal.vue_vue_type_script_setup_true_lang-DBEOIZnO.js";
+import { _ as A } from "../_shared/Dropdown.vue_vue_type_script_setup_true_lang-D5vTFLkq.js";
+import { _ as E } from "../_shared/Lightswitch.vue_vue_type_script_setup_true_lang-CvN-2WJt.js";
+import { _ as S } from "../_shared/RichTextEditor.vue_vue_type_script_setup_true_lang-Bs4WdJhA.js";
+import { _ as y } from "../_shared/Toast.vue_vue_type_script_setup_true_lang-FEeRXoIx.js";
+import { _ as L } from "../_shared/Tooltip.vue_vue_type_script_setup_true_lang-CoydN9sS.js";
+export {
+  r as Accordion,
+  t as Alert,
+  d as Badge,
+  n as ButtonBase,
+  e as Checkbox,
+  g as Combobox,
+  s as DataTable,
+  B as Drawer,
+  A as Dropdown,
+  m as EmptyState,
+  h as FormInput,
+  p as FormSelect,
+  x as FormTextarea,
+  E as Lightswitch,
+  F as Modal,
+  f as Pagination,
+  _ as Radio,
+  S as RichTextEditor,
+  i as Tabs,
+  y as Toast,
+  L as Tooltip
+};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export * from './core';
+export * from './combobox';
+export * from './dialogs';
+export * from './dropdown';
+export * from './lightswitch';
+export * from './rich-text-editor';
+export * from './toast';
+export * from './tooltip';

package/dist/lightswitch/index.js

@@ -1,49 +1,5 @@
-import { computed as n, createBlock as o, openBlock as r, unref as a, withCtx as s, createVNode as p, createCommentVNode as h, mergeProps as f, createElementVNode as g, renderSlot as w } from "vue";
-import { SwitchGroup as V, Switch as v, SwitchLabel as b } from "@headlessui/vue";
-const k = /* @__PURE__ */ Object.assign({
-  inheritAttrs: !1
-}, {
-  __name: "Lightswitch",
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: ["update:modelValue"],
-  setup(u, { emit: i }) {
-    const d = u, c = i, l = n({
-      get: () => d.modelValue,
-      set: (e) => c("update:modelValue", e)
-    });
-    return (e, t) => (r(), o(a(V), {
-      as: "div",
-      class: "rvc-lightswitch-group"
-    }, {
-      default: s(() => [
-        p(a(v), f({
-          modelValue: l.value,
-          "onUpdate:modelValue": t[0] || (t[0] = (m) => l.value = m),
-          class: [{ "rvc-lightswitch-enabled": l.value }, "rvc-lightswitch"]
-        }, e.$attrs), {
-          default: s(() => t[1] || (t[1] = [
-            g("span", { class: "rvc-lightswitch-toggle" }, null, -1)
-          ])),
-          _: 1,
-          __: [1]
-        }, 16, ["modelValue", "class"]),
-        e.$slots.default ? (r(), o(a(b), { key: 0 }, {
-          default: s(() => [
-            w(e.$slots, "default")
-          ]),
-          _: 3
-        })) : h("", !0)
-      ]),
-      _: 3
-    }));
-  }
-});
+import { _ as s } from "../_shared/Lightswitch.vue_vue_type_script_setup_true_lang-CvN-2WJt.js";
 export {
-  k as Lightswitch,
-  k as default
+  s as Lightswitch,
+  s as default
 };

package/dist/lightswitch.d.ts

@@ -0,0 +1,4 @@
+import { default as Lightswitch } from './components/Lightswitch.vue';
+export type { LightswitchProps } from './components/Lightswitch.vue';
+export { Lightswitch };
+export default Lightswitch;