@robuust-digital/vue-components 2.6.0 → 2.6.2

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,23 @@
1
+ ## 2.6.2 (15-04-2026)
2
+
3
+ ### Added
4
+
5
+ * `Accordion`: Added summary, icon, spacing, and open-state CSS tokens for card-style theming without custom component overrides
6
+
7
+ ### Updated
8
+
9
+ * `Accordion` docs: Documented the expanded token contract and token-based card-style example
10
+
11
+ ## 2.6.1 (14-04-2026)
12
+
13
+ ### Fixed
14
+
15
+ * `DataTable`: Move the `tbody` slot to a body-level override so consumers can render a custom `<tbody>` without nested `<tbody>` markup
16
+
17
+ ### Updated
18
+
19
+ * `DataTable` docs: Clarified that `#tbody` should return valid body markup (typically `<tbody>...</tbody>`)
20
+
1
21
  ## 2.6.0 (14-04-2026)
2
22
 
3
23
  ### Added
@@ -355,7 +355,7 @@ const ae = ["value"], le = ["value"], N = /* @__PURE__ */ w({
355
355
  ])
356
356
  ])) : $("", !0);
357
357
  }
358
- }), ve = { key: 0 }, fe = ["aria-label", "onClick"], ge = ["innerHTML"], be = { key: 1 }, me = ["colspan"], pe = { key: 2 }, ye = ["colspan"], $e = { class: "rvc-table-spinner-wrapper" }, he = { key: 1 }, Fe = /* @__PURE__ */ w({
358
+ }), ve = { key: 0 }, fe = ["aria-label", "onClick"], ge = ["innerHTML"], be = { key: 2 }, me = ["colspan"], pe = { key: 3 }, ye = ["colspan"], $e = { class: "rvc-table-spinner-wrapper" }, he = { key: 4 }, Fe = /* @__PURE__ */ w({
359
359
  __name: "DataTable",
360
360
  props: {
361
361
  headers: { default: () => [] },
@@ -448,11 +448,11 @@ const ae = ["value"], le = ["value"], N = /* @__PURE__ */ w({
448
448
  ])
449
449
  ])
450
450
  ])) : $("", !0),
451
- u("tbody", null, [
452
- e.items.length && !e.spinning ? c(a.$slots, "tbody", {
453
- key: 0,
454
- items: e.items
455
- }, () => [
451
+ e.items.length && !e.spinning ? c(a.$slots, "tbody", {
452
+ key: 1,
453
+ items: e.items
454
+ }, () => [
455
+ u("tbody", null, [
456
456
  (l(!0), n(k, null, V(e.items, (t, i) => c(a.$slots, "items", {
457
457
  item: t,
458
458
  index: i
@@ -477,14 +477,18 @@ const ae = ["value"], le = ["value"], N = /* @__PURE__ */ w({
477
477
  ])
478
478
  ]))
479
479
  ])), 256))
480
- ]) : !e.items.length && !e.spinning ? (l(), n("tr", be, [
480
+ ])
481
+ ]) : !e.items.length && !e.spinning ? (l(), n("tbody", be, [
482
+ u("tr", null, [
481
483
  u("td", {
482
484
  colspan: e.headers.length,
483
485
  class: "rvc-table-state"
484
486
  }, [
485
487
  u("p", null, g(e.noResultsText), 1)
486
488
  ], 8, me)
487
- ])) : (l(), n("tr", pe, [
489
+ ])
490
+ ])) : (l(), n("tbody", pe, [
491
+ u("tr", null, [
488
492
  u("td", {
489
493
  colspan: e.headers.length,
490
494
  class: "rvc-table-state"
@@ -503,8 +507,8 @@ const ae = ["value"], le = ["value"], N = /* @__PURE__ */ w({
503
507
  ])
504
508
  ])
505
509
  ], 8, ye)
506
- ]))
507
- ]),
510
+ ])
511
+ ])),
508
512
  a.$slots.footer ? (l(), n("tfoot", he, [
509
513
  c(a.$slots, "footer", {
510
514
  headers: e.headers,
@@ -1,132 +1 @@
1
- import { ComponentOptionsMixin } from 'vue';
2
- import { ComponentProvideOptions } from 'vue';
3
- import { DefineComponent } from 'vue';
4
- import { FunctionalComponent } from 'vue';
5
- import { HTMLAttributes } from 'vue';
6
- import { PublicProps } from 'vue';
7
- import { SVGAttributes } from 'vue';
8
- import { VNodeProps } from 'vue';
9
-
10
- declare const __VLS_component: DefineComponent<ComboboxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
11
- "update:modelValue": (value: ComboboxModelValue) => any;
12
- "update:requestParams": (value: Record<string, unknown>) => any;
13
- "combobox:noResults": (value: string | null) => any;
14
- "combobox:error": (error: unknown) => any;
15
- }, string, PublicProps, Readonly<ComboboxProps> & Readonly<{
16
- "onUpdate:modelValue"?: ((value: ComboboxModelValue) => any) | undefined;
17
- "onUpdate:requestParams"?: ((value: Record<string, unknown>) => any) | undefined;
18
- "onCombobox:noResults"?: ((value: string | null) => any) | undefined;
19
- "onCombobox:error"?: ((error: unknown) => any) | undefined;
20
- }>, {
21
- icon: Icon | null;
22
- size: ComboboxSize;
23
- modelValue: ComboboxModelValue;
24
- rootClass: string;
25
- prefixIcon: Icon | null;
26
- disabled: boolean;
27
- endpoint: string;
28
- requestParams: Record<string, unknown>;
29
- manualInput: boolean;
30
- responseData: (data: unknown) => unknown[];
31
- displayValue: (item: unknown) => string | null;
32
- optionText: (option: unknown) => string | null;
33
- minLength: number;
34
- itemKey: string;
35
- clearable: boolean;
36
- rootAttrs: Record<string, unknown>;
37
- multiple: boolean;
38
- onSearch: (value: string | null, params: Record<string, unknown>, endpoint?: string) => Promise<{
39
- data: unknown;
40
- error?: unknown;
41
- cancel?: () => void;
42
- }>;
43
- searchOnly: boolean;
44
- debounce: number;
45
- minLoadingTime: number;
46
- onCancel: (cancelToken: (() => void) | null) => void;
47
- }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
48
-
49
- declare function __VLS_template(): {
50
- attrs: Partial<{}>;
51
- slots: {
52
- prefixIcon?(_: {
53
- icon: Icon;
54
- }): any;
55
- spinner?(_: {
56
- spinning: true;
57
- }): any;
58
- icon?(_: {
59
- icon: Icon | null;
60
- }): any;
61
- clear?(_: {}): any;
62
- chip?(_: {
63
- optionText: string | null;
64
- option: any;
65
- removeOption: (option: Record<string, unknown>) => void;
66
- }): any;
67
- option?(_: {
68
- option: unknown;
69
- isActive: (value: number | string) => boolean;
70
- }): any;
71
- optionPrefix?(_: {
72
- option: unknown;
73
- isActive: (value: number | string) => boolean;
74
- }): any;
75
- optionSuffix?(_: {
76
- option: unknown;
77
- isActive: (value: number | string) => boolean;
78
- }): any;
79
- };
80
- refs: {};
81
- rootEl: any;
82
- };
83
-
84
- declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
85
-
86
- declare type __VLS_WithTemplateSlots<T, S> = T & {
87
- new (): {
88
- $slots: S;
89
- };
90
- };
91
-
92
- declare type ComboboxModelValue = object | Array<unknown> | null;
93
-
94
- declare interface ComboboxProps {
95
- id: string;
96
- rootClass?: string;
97
- modelValue?: ComboboxModelValue;
98
- endpoint?: string;
99
- requestParams?: Record<string, unknown>;
100
- manualInput?: boolean;
101
- responseData?: (data: unknown) => unknown[];
102
- displayValue?: (item: unknown) => string | null;
103
- optionText?: (option: unknown) => string | null;
104
- disabled?: boolean;
105
- minLength?: number;
106
- itemKey?: string;
107
- clearable?: boolean;
108
- rootAttrs?: Record<string, unknown>;
109
- multiple?: boolean;
110
- onSearch?: (value: string | null, params: Record<string, unknown>, endpoint?: string) => Promise<{
111
- data: unknown;
112
- error?: unknown;
113
- cancel?: () => void;
114
- }>;
115
- searchOnly?: boolean;
116
- icon?: Icon | null;
117
- prefixIcon?: Icon | null;
118
- size?: ComboboxSize;
119
- debounce?: number;
120
- minLoadingTime?: number;
121
- onCancel?: (cancelToken: (() => void) | null) => void;
122
- }
123
-
124
- declare type ComboboxSize = 'sm' | 'base';
125
-
126
- declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
127
- export { _default as Combobox }
128
- export default _default;
129
-
130
- declare type Icon = FunctionalComponent<SVGAttributes & HTMLAttributes & VNodeProps>;
131
-
132
1
  export { }
@@ -2,14 +2,28 @@
2
2
  --rvc-accordion-border-width: var(--rvc-base-border-width);
3
3
  --rvc-accordion-border-style: var(--rvc-base-border-style);
4
4
  --rvc-accordion-border-color: var(--rvc-base-border-color);
5
+ --rvc-accordion-gap-y: 0;
5
6
  --rvc-accordion-padding-y: calc(var(--spacing) * 6);
6
7
  --rvc-accordion-font-weight: var(--font-weight-normal);
7
8
  --rvc-accordion-font-size: var(--text-base);
8
9
  --rvc-accordion-color: var(--color-slate-600);
10
+ --rvc-accordion-summary-padding-x: 0;
9
11
  --rvc-accordion-summary-font-weight: var(--font-weight-medium);
10
12
  --rvc-accordion-summary-font-size: var(--text-lg);
13
+ --rvc-accordion-summary-border-width: 0;
14
+ --rvc-accordion-summary-border-style: solid;
15
+ --rvc-accordion-summary-border-color: transparent;
16
+ --rvc-accordion-summary-border-radius: 0;
17
+ --rvc-accordion-summary-bg-color: transparent;
11
18
  --rvc-accordion-summary-color: var(--color-black);
19
+ --rvc-accordion-summary-color-open: var(--rvc-accordion-summary-color);
20
+ --rvc-accordion-summary-bg-color-open: var(--rvc-accordion-summary-bg-color);
21
+ --rvc-accordion-summary-border-color-open: var(--rvc-accordion-summary-border-color);
22
+ --rvc-accordion-summary-border-radius-open: var(--rvc-accordion-summary-border-radius);
23
+ --rvc-accordion-summary-border-bottom-width-open: var(--rvc-accordion-summary-border-width);
12
24
  --rvc-accordion-summary-decoration-hover: underline;
25
+ --rvc-accordion-icon-size: calc(var(--spacing) * 5);
26
+ --rvc-accordion-icon-transform-open: rotate(45deg);
13
27
  }
14
28
 
15
29
  @layer components {
@@ -17,34 +31,54 @@
17
31
  details {
18
32
  border-top: var(--rvc-accordion-border-width) var(--rvc-accordion-border-style) var(--rvc-accordion-border-color);
19
33
 
34
+ + details {
35
+ margin-top: var(--rvc-accordion-gap-y);
36
+ }
37
+
38
+ > summary {
39
+ display: flex;
40
+ align-items: center;
41
+ justify-content: space-between;
42
+ width: 100%;
43
+ padding-block: var(--rvc-accordion-padding-y);
44
+ padding-inline: var(--rvc-accordion-summary-padding-x);
45
+ border-width: var(--rvc-accordion-summary-border-width);
46
+ border-style: var(--rvc-accordion-summary-border-style);
47
+ border-radius: var(--rvc-accordion-summary-border-radius);
48
+ border-color: var(--rvc-accordion-summary-border-color);
49
+ background-color: var(--rvc-accordion-summary-bg-color);
50
+ color: var(--rvc-accordion-summary-color);
51
+ font-size: var(--rvc-accordion-summary-font-size);
52
+ font-weight: var(--rvc-accordion-summary-font-weight);
53
+ cursor: pointer;
54
+ user-select: none;
55
+
56
+ &:hover {
57
+ text-decoration: var(--rvc-accordion-summary-decoration-hover);
58
+ }
59
+ }
60
+
20
61
  .rvc-accordion-icon {
21
- width: calc(var(--spacing) * 5);
22
- height: calc(var(--spacing) * 5);
23
- transform: translateZ(0) var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
62
+ width: var(--rvc-accordion-icon-size);
63
+ height: var(--rvc-accordion-icon-size);
64
+ transform: translateZ(0);
24
65
  transition-property: transform, translate, scale, rotate;
25
66
  transition-duration: var(--rvc-base-transition-duration);
26
67
  transition-timing-function: var(--rvc-base-transition-timing-function);
27
68
  }
28
69
 
29
- &:open .rvc-accordion-icon {
30
- transform: rotate(45deg);
31
- }
32
- }
70
+ &:open {
71
+ > summary {
72
+ border-bottom-width: var(--rvc-accordion-summary-border-bottom-width-open);
73
+ border-radius: var(--rvc-accordion-summary-border-radius-open);
74
+ border-color: var(--rvc-accordion-summary-border-color-open);
75
+ background-color: var(--rvc-accordion-summary-bg-color-open);
76
+ color: var(--rvc-accordion-summary-color-open);
77
+ }
33
78
 
34
- summary {
35
- display: flex;
36
- align-items: center;
37
- justify-content: space-between;
38
- width: 100%;
39
- padding-block: var(--rvc-accordion-padding-y);
40
- color: var(--rvc-accordion-summary-color);
41
- font-size: var(--rvc-accordion-summary-font-size);
42
- font-weight: var(--rvc-accordion-summary-font-weight);
43
- cursor: pointer;
44
- user-select: none;
45
-
46
- &:hover {
47
- text-decoration: var(--rvc-accordion-summary-decoration-hover);
79
+ .rvc-accordion-icon {
80
+ transform: translateZ(0) var(--rvc-accordion-icon-transform-open);
81
+ }
48
82
  }
49
83
  }
50
84
 
@@ -1,4 +1,4 @@
1
- import { _ as e, a as s, b as t, c as r, d as m, e as p, f as x, g as c, h as f, i } from "../_shared/Tabs.vue_vue_type_script_setup_true_lang-ByxZ-FVI.js";
1
+ import { _ as e, a as s, b as t, c as r, d as m, e as p, f as x, g as c, h as f, i } from "../_shared/Tabs.vue_vue_type_script_setup_true_lang-CLF0EEY-.js";
2
2
  import { _ as b } from "../_shared/ChevronDownIcon-BYWciGnh.js";
3
3
  import { _ } from "../_shared/ButtonBase.vue_vue_type_script_setup_true_lang-ZYVNEyNx.js";
4
4
  import { _ as l } from "../_shared/FormInput.vue_vue_type_script_setup_true_lang-Bg7YPGyY.js";