@robuust-digital/vue-components 2.6.3 → 2.6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,27 @@
1
+ ## 2.6.5 (05-05-2026)
2
+
3
+ ### Added
4
+
5
+ * `Dropdown`: Added open-state synchronization and external close support for coordinating sibling dropdowns
6
+
7
+ ### Updated
8
+
9
+ * `Dropdown` docs: Documented open-state synchronization and the Headless UI programmatic open limitation
10
+
11
+ ### Fixed
12
+
13
+ * `Build`: Pin TypeScript to a compatible version so declaration files are generated non-empty again
14
+
15
+ ## 2.6.4 (20-04-2026)
16
+
17
+ ### Added
18
+
19
+ * `Badge`: Added per-variant border color tokens and made bordered badges default to each variant background color
20
+
21
+ ### Updated
22
+
23
+ * `Badge` docs: Clarified how default and per-variant border color tokens are inherited
24
+
1
25
  ## 2.6.3 (17-04-2026)
2
26
 
3
27
  ### Fixed
@@ -0,0 +1,150 @@
1
+ import { openBlock as r, createElementBlock as k, createElementVNode as D, defineComponent as w, watch as b, createBlock as d, unref as o, normalizeClass as g, withCtx as s, createVNode as i, renderSlot as c, mergeProps as B, Transition as A, Fragment as L, renderList as N, resolveDynamicComponent as y, createCommentVNode as O, createTextVNode as V, toDisplayString as x } from "vue";
2
+ import { Menu as I, MenuButton as C, MenuItems as Z, MenuItem as h } from "@headlessui/vue";
3
+ import { _ as q } from "./ButtonBase.vue_vue_type_script_setup_true_lang-ZYVNEyNx.js";
4
+ function E(t, u) {
5
+ return r(), k("svg", {
6
+ xmlns: "http://www.w3.org/2000/svg",
7
+ viewBox: "0 0 20 20",
8
+ fill: "currentColor",
9
+ "aria-hidden": "true",
10
+ "data-slot": "icon"
11
+ }, [
12
+ D("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" })
13
+ ]);
14
+ }
15
+ const z = /* @__PURE__ */ w({
16
+ inheritAttrs: !1,
17
+ __name: "Dropdown",
18
+ props: {
19
+ items: {},
20
+ alignLeft: { type: Boolean, default: !1 },
21
+ fullWidth: { type: Boolean, default: !1 },
22
+ label: { default: "Options" },
23
+ open: { type: [Boolean, null], default: null },
24
+ rootClass: { default: "" }
25
+ },
26
+ emits: ["dropdown:click", "update:open"],
27
+ setup(t, { emit: u }) {
28
+ const m = u, M = w({
29
+ name: "DropdownMenuStateBridge",
30
+ props: {
31
+ close: {
32
+ type: Function,
33
+ required: !0
34
+ },
35
+ menuOpen: {
36
+ type: Boolean,
37
+ required: !0
38
+ },
39
+ open: {
40
+ type: Boolean,
41
+ default: null
42
+ }
43
+ },
44
+ emits: ["update:open"],
45
+ setup(n, { emit: a }) {
46
+ return b(
47
+ () => n.menuOpen,
48
+ (l) => a("update:open", l)
49
+ ), b(
50
+ () => n.open,
51
+ (l) => {
52
+ l === !1 && n.menuOpen && n.close();
53
+ }
54
+ ), () => null;
55
+ }
56
+ }), $ = (n) => {
57
+ const {
58
+ as: a,
59
+ bindAs: l,
60
+ event: p,
61
+ icon: e,
62
+ name: f,
63
+ ...v
64
+ } = n;
65
+ return v;
66
+ };
67
+ return (n, a) => (r(), d(o(I), {
68
+ as: "div",
69
+ class: g(["rvc-dropdown", t.rootClass])
70
+ }, {
71
+ default: s(({ open: l, close: p }) => [
72
+ i(o(M), {
73
+ open: t.open,
74
+ "menu-open": l,
75
+ close: p,
76
+ "onUpdate:open": a[0] || (a[0] = (e) => m("update:open", e))
77
+ }, null, 8, ["open", "menu-open", "close"]),
78
+ c(n.$slots, "button", {
79
+ label: t.label,
80
+ button: o(C)
81
+ }, () => [
82
+ i(o(C), B({
83
+ as: q,
84
+ label: t.label,
85
+ color: "light",
86
+ icon: o(E),
87
+ "icon-left": t.alignLeft
88
+ }, n.$attrs), null, 16, ["label", "icon", "icon-left"])
89
+ ]),
90
+ i(A, {
91
+ "enter-active-class": "rvc-dropdown-transition-enter",
92
+ "enter-from-class": "rvc-dropdown-transition-enter-from",
93
+ "enter-to-class": "rvc-dropdown-transition-enter-to",
94
+ "leave-active-class": "rvc-dropdown-transition-leave",
95
+ "leave-from-class": "rvc-dropdown-transition-leave-from",
96
+ "leave-to-class": "rvc-dropdown-transition-leave-to"
97
+ }, {
98
+ default: s(() => [
99
+ i(o(Z), {
100
+ class: g([
101
+ "rvc-dropdown-items",
102
+ {
103
+ "rvc-dropdown-items-left": t.alignLeft,
104
+ "rvc-dropdown-items-full": t.fullWidth
105
+ }
106
+ ])
107
+ }, {
108
+ default: s(() => [
109
+ c(n.$slots, "items", {
110
+ items: t.items,
111
+ menuItem: o(h)
112
+ }, () => [
113
+ (r(!0), k(L, null, N(t.items, (e, f) => (r(), d(o(h), {
114
+ key: `${f}-dropdown-item`,
115
+ as: "template"
116
+ }, {
117
+ default: s(() => [
118
+ c(n.$slots, "item", { item: e }, () => [
119
+ (r(), d(y(e.as ? e.as : "button"), B({ class: "rvc-dropdown-item" }, { ref_for: !0 }, $(e), {
120
+ as: e.bindAs ? e.bindAs : void 0,
121
+ onClick: (v) => (m("dropdown:click", e), e.event ? e.event() : null)
122
+ }), {
123
+ default: s(() => [
124
+ e.icon ? (r(), d(y(e.icon), {
125
+ key: 0,
126
+ class: "rvc-dropdown-item-icon"
127
+ })) : O("", !0),
128
+ V(" " + x(e.name), 1)
129
+ ]),
130
+ _: 2
131
+ }, 1040, ["as", "onClick"]))
132
+ ])
133
+ ]),
134
+ _: 2
135
+ }, 1024))), 128))
136
+ ])
137
+ ]),
138
+ _: 3
139
+ }, 8, ["class"])
140
+ ]),
141
+ _: 3
142
+ })
143
+ ]),
144
+ _: 3
145
+ }, 8, ["class"]));
146
+ }
147
+ });
148
+ export {
149
+ z as _
150
+ };
@@ -7,45 +7,53 @@
7
7
  --rvc-badge-border-radius: calc(infinity * 1px);
8
8
  --rvc-badge-border-width: 0;
9
9
  --rvc-badge-border-style: solid;
10
- --rvc-badge-border-color: transparent;
11
10
  --rvc-badge-font-size: var(--text-base);
12
11
  --rvc-badge-gap: calc(var(--spacing) * 1);
13
12
 
14
13
  /* Default color variables */
15
14
  --rvc-badge-bg-color: #fcffc4;
16
15
  --rvc-badge-color: #576d07;
16
+ --rvc-badge-border-color: var(--rvc-badge-bg-color);
17
17
 
18
18
  /* Gray variant */
19
19
  --rvc-badge-bg-color-gray: var(--color-slate-100);
20
20
  --rvc-badge-color-gray: var(--color-slate-700);
21
+ --rvc-badge-border-color-gray: var(--rvc-badge-bg-color-gray);
21
22
 
22
23
  /* Red variant */
23
24
  --rvc-badge-bg-color-red: var(--color-red-100);
24
25
  --rvc-badge-color-red: var(--color-red-700);
26
+ --rvc-badge-border-color-red: var(--rvc-badge-bg-color-red);
25
27
 
26
28
  /* Yellow variant */
27
29
  --rvc-badge-bg-color-yellow: var(--color-yellow-100);
28
30
  --rvc-badge-color-yellow: var(--color-yellow-700);
31
+ --rvc-badge-border-color-yellow: var(--rvc-badge-bg-color-yellow);
29
32
 
30
33
  /* Green variant */
31
34
  --rvc-badge-bg-color-green: var(--color-green-100);
32
35
  --rvc-badge-color-green: var(--color-green-700);
36
+ --rvc-badge-border-color-green: var(--rvc-badge-bg-color-green);
33
37
 
34
38
  /* Blue variant */
35
39
  --rvc-badge-bg-color-blue: var(--color-blue-100);
36
40
  --rvc-badge-color-blue: var(--color-blue-700);
41
+ --rvc-badge-border-color-blue: var(--rvc-badge-bg-color-blue);
37
42
 
38
43
  /* Violet variant */
39
44
  --rvc-badge-bg-color-violet: var(--color-violet-100);
40
45
  --rvc-badge-color-violet: var(--color-violet-700);
46
+ --rvc-badge-border-color-violet: var(--rvc-badge-bg-color-violet);
41
47
 
42
48
  /* Purple variant */
43
49
  --rvc-badge-bg-color-purple: var(--color-purple-100);
44
50
  --rvc-badge-color-purple: var(--color-purple-700);
51
+ --rvc-badge-border-color-purple: var(--rvc-badge-bg-color-purple);
45
52
 
46
53
  /* Pink variant */
47
54
  --rvc-badge-bg-color-pink: var(--color-pink-100);
48
55
  --rvc-badge-color-pink: var(--color-pink-700);
56
+ --rvc-badge-border-color-pink: var(--rvc-badge-bg-color-pink);
49
57
 
50
58
  /* Small variant */
51
59
  --rvc-badge-height-sm: calc(var(--spacing) * 6);
@@ -78,41 +86,49 @@
78
86
  &.rvc-badge-gray {
79
87
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-gray);
80
88
  --rvc-badge-color: var(--rvc-badge-color-gray);
89
+ --rvc-badge-border-color: var(--rvc-badge-border-color-gray);
81
90
  }
82
91
 
83
92
  &.rvc-badge-red {
84
93
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-red);
85
94
  --rvc-badge-color: var(--rvc-badge-color-red);
95
+ --rvc-badge-border-color: var(--rvc-badge-border-color-red);
86
96
  }
87
97
 
88
98
  &.rvc-badge-yellow {
89
99
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-yellow);
90
100
  --rvc-badge-color: var(--rvc-badge-color-yellow);
101
+ --rvc-badge-border-color: var(--rvc-badge-border-color-yellow);
91
102
  }
92
103
 
93
104
  &.rvc-badge-green {
94
105
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-green);
95
106
  --rvc-badge-color: var(--rvc-badge-color-green);
107
+ --rvc-badge-border-color: var(--rvc-badge-border-color-green);
96
108
  }
97
109
 
98
110
  &.rvc-badge-blue {
99
111
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-blue);
100
112
  --rvc-badge-color: var(--rvc-badge-color-blue);
113
+ --rvc-badge-border-color: var(--rvc-badge-border-color-blue);
101
114
  }
102
115
 
103
116
  &.rvc-badge-violet {
104
117
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-violet);
105
118
  --rvc-badge-color: var(--rvc-badge-color-violet);
119
+ --rvc-badge-border-color: var(--rvc-badge-border-color-violet);
106
120
  }
107
121
 
108
122
  &.rvc-badge-purple {
109
123
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-purple);
110
124
  --rvc-badge-color: var(--rvc-badge-color-purple);
125
+ --rvc-badge-border-color: var(--rvc-badge-border-color-purple);
111
126
  }
112
127
 
113
128
  &.rvc-badge-pink {
114
129
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-pink);
115
130
  --rvc-badge-color: var(--rvc-badge-color-pink);
131
+ --rvc-badge-border-color: var(--rvc-badge-border-color-pink);
116
132
  }
117
133
 
118
134
  &.rvc-badge-sm {
@@ -1,4 +1,4 @@
1
- import { _ as o } from "../_shared/Dropdown.vue_vue_type_script_setup_true_lang-L_lQEUBC.js";
1
+ import { _ as o } from "../_shared/Dropdown.vue_vue_type_script_setup_true_lang-Cv3HwIyF.js";
2
2
  export {
3
3
  o as Dropdown,
4
4
  o as default
@@ -15,10 +15,13 @@ import { VNodeProps } from 'vue';
15
15
 
16
16
  declare const __VLS_component: DefineComponent<DropdownProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
17
17
  "dropdown:click": (item: DropdownItem) => any;
18
+ "update:open": (value: boolean) => any;
18
19
  }, string, PublicProps, Readonly<DropdownProps> & Readonly<{
19
20
  "onDropdown:click"?: ((item: DropdownItem) => any) | undefined;
21
+ "onUpdate:open"?: ((value: boolean) => any) | undefined;
20
22
  }>, {
21
23
  label: string;
24
+ open: boolean | null;
22
25
  rootClass: string;
23
26
  alignLeft: boolean;
24
27
  fullWidth: boolean;
@@ -137,6 +140,7 @@ declare interface DropdownProps {
137
140
  alignLeft?: boolean;
138
141
  fullWidth?: boolean;
139
142
  label?: string;
143
+ open?: boolean | null;
140
144
  rootClass?: string;
141
145
  }
142
146
 
@@ -5,7 +5,7 @@ import { _ as h } from "../_shared/FormInput.vue_vue_type_script_setup_true_lang
5
5
  import { _ as g } from "../_shared/Combobox.vue_vue_type_script_setup_true_lang-BwTRzqr6.js";
6
6
  import { _ as B } from "../_shared/Drawer.vue_vue_type_script_setup_true_lang-DjP68vua.js";
7
7
  import { _ as F } from "../_shared/Modal.vue_vue_type_script_setup_true_lang-MN3D46CX.js";
8
- import { _ as A } from "../_shared/Dropdown.vue_vue_type_script_setup_true_lang-L_lQEUBC.js";
8
+ import { _ as A } from "../_shared/Dropdown.vue_vue_type_script_setup_true_lang-Cv3HwIyF.js";
9
9
  import { _ as E } from "../_shared/Lightswitch.vue_vue_type_script_setup_true_lang-hiuDVfo5.js";
10
10
  import { _ as S } from "../_shared/RichTextEditor.vue_vue_type_script_setup_true_lang-t14vKtCW.js";
11
11
  import { _ as y } from "../_shared/Toast.vue_vue_type_script_setup_true_lang-DS6keeu7.js";
package/dist/index.d.ts CHANGED
@@ -139,10 +139,13 @@ contentRef: HTMLDivElement;
139
139
 
140
140
  declare const __VLS_component_15: DefineComponent<DropdownProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
141
141
  "dropdown:click": (item: DropdownItem) => any;
142
+ "update:open": (value: boolean) => any;
142
143
  }, string, PublicProps, Readonly<DropdownProps> & Readonly<{
143
144
  "onDropdown:click"?: ((item: DropdownItem) => any) | undefined;
145
+ "onUpdate:open"?: ((value: boolean) => any) | undefined;
144
146
  }>, {
145
147
  label: string;
148
+ open: boolean | null;
146
149
  rootClass: string;
147
150
  alignLeft: boolean;
148
151
  fullWidth: boolean;
@@ -1245,6 +1248,7 @@ declare interface DropdownProps {
1245
1248
  alignLeft?: boolean;
1246
1249
  fullWidth?: boolean;
1247
1250
  label?: string;
1251
+ open?: boolean | null;
1248
1252
  rootClass?: string;
1249
1253
  }
1250
1254
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@robuust-digital/vue-components",
3
- "version": "2.6.3",
3
+ "version": "2.6.5",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -142,7 +142,7 @@
142
142
  "stylelint-config-property-sort-order-smacss": "^11.1.0",
143
143
  "stylelint-config-standard": "^40.0.0",
144
144
  "tailwindcss": "^4.1.17",
145
- "typescript": "^5.9.3",
145
+ "typescript": "5.9.3",
146
146
  "vite": "^7.2.2",
147
147
  "vite-plugin-dts": "^4.5.4",
148
148
  "vite-plugin-static-copy": "3.4.0",
@@ -1,115 +0,0 @@
1
- import { openBlock as r, createElementBlock as p, createElementVNode as B, defineComponent as M, createBlock as l, unref as n, normalizeClass as u, withCtx as a, renderSlot as s, createVNode as i, mergeProps as f, Transition as $, Fragment as y, renderList as A, resolveDynamicComponent as m, createCommentVNode as L, createTextVNode as N, toDisplayString as V } from "vue";
2
- import { Menu as x, MenuButton as v, MenuItems as D, MenuItem as w } from "@headlessui/vue";
3
- import { _ as I } from "./ButtonBase.vue_vue_type_script_setup_true_lang-ZYVNEyNx.js";
4
- function Z(t, c) {
5
- return r(), p("svg", {
6
- xmlns: "http://www.w3.org/2000/svg",
7
- viewBox: "0 0 20 20",
8
- fill: "currentColor",
9
- "aria-hidden": "true",
10
- "data-slot": "icon"
11
- }, [
12
- B("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" })
13
- ]);
14
- }
15
- const z = /* @__PURE__ */ M({
16
- inheritAttrs: !1,
17
- __name: "Dropdown",
18
- props: {
19
- items: {},
20
- alignLeft: { type: Boolean, default: !1 },
21
- fullWidth: { type: Boolean, default: !1 },
22
- label: { default: "Options" },
23
- rootClass: { default: "" }
24
- },
25
- emits: ["dropdown:click"],
26
- setup(t, { emit: c }) {
27
- const b = c, g = (o) => {
28
- const {
29
- as: h,
30
- bindAs: e,
31
- event: d,
32
- icon: C,
33
- name: E,
34
- ...k
35
- } = o;
36
- return k;
37
- };
38
- return (o, h) => (r(), l(n(x), {
39
- as: "div",
40
- class: u(["rvc-dropdown", t.rootClass])
41
- }, {
42
- default: a(() => [
43
- s(o.$slots, "button", {
44
- label: t.label,
45
- button: n(v)
46
- }, () => [
47
- i(n(v), f({
48
- as: I,
49
- label: t.label,
50
- color: "light",
51
- icon: n(Z),
52
- "icon-left": t.alignLeft
53
- }, o.$attrs), null, 16, ["label", "icon", "icon-left"])
54
- ]),
55
- i($, {
56
- "enter-active-class": "rvc-dropdown-transition-enter",
57
- "enter-from-class": "rvc-dropdown-transition-enter-from",
58
- "enter-to-class": "rvc-dropdown-transition-enter-to",
59
- "leave-active-class": "rvc-dropdown-transition-leave",
60
- "leave-from-class": "rvc-dropdown-transition-leave-from",
61
- "leave-to-class": "rvc-dropdown-transition-leave-to"
62
- }, {
63
- default: a(() => [
64
- i(n(D), {
65
- class: u([
66
- "rvc-dropdown-items",
67
- {
68
- "rvc-dropdown-items-left": t.alignLeft,
69
- "rvc-dropdown-items-full": t.fullWidth
70
- }
71
- ])
72
- }, {
73
- default: a(() => [
74
- s(o.$slots, "items", {
75
- items: t.items,
76
- menuItem: n(w)
77
- }, () => [
78
- (r(!0), p(y, null, A(t.items, (e, d) => (r(), l(n(w), {
79
- key: `${d}-dropdown-item`,
80
- as: "template"
81
- }, {
82
- default: a(() => [
83
- s(o.$slots, "item", { item: e }, () => [
84
- (r(), l(m(e.as ? e.as : "button"), f({ class: "rvc-dropdown-item" }, { ref_for: !0 }, g(e), {
85
- as: e.bindAs ? e.bindAs : void 0,
86
- onClick: (C) => (b("dropdown:click", e), e.event ? e.event() : null)
87
- }), {
88
- default: a(() => [
89
- e.icon ? (r(), l(m(e.icon), {
90
- key: 0,
91
- class: "rvc-dropdown-item-icon"
92
- })) : L("", !0),
93
- N(" " + V(e.name), 1)
94
- ]),
95
- _: 2
96
- }, 1040, ["as", "onClick"]))
97
- ])
98
- ]),
99
- _: 2
100
- }, 1024))), 128))
101
- ])
102
- ]),
103
- _: 3
104
- }, 8, ["class"])
105
- ]),
106
- _: 3
107
- })
108
- ]),
109
- _: 3
110
- }, 8, ["class"]));
111
- }
112
- });
113
- export {
114
- z as _
115
- };