@robuust-digital/vue-components 2.5.0-beta.2 → 2.5.0-beta.3

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.
Files changed (33) hide show
  1. package/CHANGELOG.md +32 -2
  2. package/README.md +15 -0
  3. package/dist/_shared/{ButtonBase.vue_vue_type_script_setup_true_lang-BLm8QzEC.js → ButtonBase.vue_vue_type_script_setup_true_lang-ZYVNEyNx.js} +2 -2
  4. package/dist/_shared/ChevronDownIcon-BYWciGnh.js +41 -0
  5. package/dist/_shared/{Combobox.vue_vue_type_script_setup_true_lang-C3AfEWj5.js → Combobox.vue_vue_type_script_setup_true_lang-BwTRzqr6.js} +72 -61
  6. package/dist/_shared/{Drawer.vue_vue_type_script_setup_true_lang-XMND_Yzl.js → Drawer.vue_vue_type_script_setup_true_lang-CZMVooMV.js} +4 -4
  7. package/dist/_shared/{Dropdown.vue_vue_type_script_setup_true_lang-BtkiBqxy.js → Dropdown.vue_vue_type_script_setup_true_lang-L_lQEUBC.js} +2 -2
  8. package/dist/_shared/{FormInput.vue_vue_type_script_setup_true_lang-C_1WSzbH.js → FormInput.vue_vue_type_script_setup_true_lang-Bg7YPGyY.js} +9 -9
  9. package/dist/_shared/{Lightswitch.vue_vue_type_script_setup_true_lang-DX23lEFd.js → Lightswitch.vue_vue_type_script_setup_true_lang-hiuDVfo5.js} +7 -7
  10. package/dist/_shared/{Modal.vue_vue_type_script_setup_true_lang-2AljJgxw.js → Modal.vue_vue_type_script_setup_true_lang-CB0Gez7v.js} +5 -5
  11. package/dist/_shared/{RichTextEditor.vue_vue_type_script_setup_true_lang-BLs_S_-D.js → RichTextEditor.vue_vue_type_script_setup_true_lang-DaCv0Gii.js} +11 -11
  12. package/dist/_shared/Tabs.vue_vue_type_script_setup_true_lang-B0RIqYLz.js +696 -0
  13. package/dist/_shared/{Toast.vue_vue_type_script_setup_true_lang-BfMkJm5T.js → Toast.vue_vue_type_script_setup_true_lang-DS6keeu7.js} +2 -2
  14. package/dist/_shared/{Tooltip.vue_vue_type_script_setup_true_lang-CKp1wzE2.js → Tooltip.vue_vue_type_script_setup_true_lang-B3MHy48T.js} +3 -3
  15. package/dist/_shared/{XMarkIcon-90mcPzBs.js → XMarkIcon-CPr_Rd8y.js} +2 -2
  16. package/dist/_shared/{icon-spinner-CP0VP_YM.js → icon-spinner-BYCMrTdL.js} +2 -2
  17. package/dist/combobox/index.js +1 -1
  18. package/dist/core/index.js +9 -10
  19. package/dist/core/styles.css +0 -1
  20. package/dist/core/table.css +4 -1
  21. package/dist/core.d.ts +57 -100
  22. package/dist/dialogs/index.js +2 -2
  23. package/dist/dropdown/index.js +1 -1
  24. package/dist/index/index.js +22 -23
  25. package/dist/index.d.ts +104 -147
  26. package/dist/lightswitch/index.js +1 -1
  27. package/dist/rich-text-editor/index.js +1 -1
  28. package/dist/toast/index.js +1 -1
  29. package/dist/tooltip/index.js +1 -1
  30. package/package.json +37 -8
  31. package/dist/_shared/Tabs.vue_vue_type_script_setup_true_lang-Dc0jC2cn.js +0 -836
  32. package/dist/_shared/XMarkIcon-DdMV8USU.js +0 -53
  33. package/dist/core/file.css +0 -206
@@ -1,53 +0,0 @@
1
- import { defineComponent as n, createBlock as o, openBlock as l, resolveDynamicComponent as c, normalizeClass as d, withCtx as s, renderSlot as i, createTextVNode as u, toDisplayString as f, createElementBlock as t, createElementVNode as r } from "vue";
2
- const g = /* @__PURE__ */ n({
3
- __name: "Badge",
4
- props: {
5
- as: { default: "span" },
6
- label: { default: "" },
7
- size: { default: "base" },
8
- color: { default: "default" }
9
- },
10
- setup(e) {
11
- return (a, m) => (l(), o(c(e.as), {
12
- class: d(["rvc-badge", `rvc-badge-${e.color}`, `rvc-badge-${e.size}`])
13
- }, {
14
- default: s(() => [
15
- i(a.$slots, "default", { label: e.label }, () => [
16
- u(f(e.label), 1)
17
- ])
18
- ]),
19
- _: 3
20
- }, 8, ["class"]));
21
- }
22
- });
23
- function w(e, a) {
24
- return l(), t("svg", {
25
- xmlns: "http://www.w3.org/2000/svg",
26
- viewBox: "0 0 20 20",
27
- fill: "currentColor",
28
- "aria-hidden": "true",
29
- "data-slot": "icon"
30
- }, [
31
- r("path", {
32
- "fill-rule": "evenodd",
33
- d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z",
34
- "clip-rule": "evenodd"
35
- })
36
- ]);
37
- }
38
- function h(e, a) {
39
- return l(), t("svg", {
40
- xmlns: "http://www.w3.org/2000/svg",
41
- viewBox: "0 0 20 20",
42
- fill: "currentColor",
43
- "aria-hidden": "true",
44
- "data-slot": "icon"
45
- }, [
46
- r("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" })
47
- ]);
48
- }
49
- export {
50
- g as _,
51
- h as a,
52
- w as r
53
- };
@@ -1,206 +0,0 @@
1
- :root {
2
- --rvc-file-border-radius: var(--rvc-base-border-radius);
3
- --rvc-file-border-width: var(--rvc-base-border-width);
4
- --rvc-file-border-color: var(--rvc-base-border-color);
5
- --rvc-file-font-size: var(--rvc-base-input-font-size);
6
- --rvc-file-font-weight: var(--rvc-base-input-font-weight);
7
- --rvc-file-box-shadow: var(--rvc-base-box-shadow);
8
- --rvc-file-color: var(--rvc-base-input-color);
9
- --rvc-file-bg-color: var(--rvc-base-input-bg-color);
10
- --rvc-file-bg-color-disabled: var(--rvc-base-input-bg-color-disabled);
11
- --rvc-file-disabled-opacity: var(--rvc-base-input-disabled-opacity);
12
- --rvc-file-icon-size: var(--rvc-base-input-icon-size);
13
- --rvc-file-icon-color: var(--rvc-base-input-icon-color);
14
- --rvc-file-padding-x: var(--rvc-base-input-padding-x);
15
- --rvc-file-height: var(--rvc-base-input-height);
16
- --rvc-file-placeholder-color: var(--rvc-base-input-placeholder-color);
17
- --rvc-file-preview-size: 5rem;
18
- --rvc-file-action-color: var(--color-slate-600);
19
- --rvc-file-action-hover-color: var(--color-slate-900);
20
- --rvc-file-delete-color: var(--color-red-600);
21
- --rvc-file-delete-hover-color: var(--color-red-700);
22
-
23
- /* Small variant */
24
- --rvc-file-font-size-sm: calc(var(--rvc-base-input-font-size) * 0.9);
25
- --rvc-file-padding-x-sm: calc(var(--rvc-base-input-padding-x) * 0.85);
26
- --rvc-file-icon-size-sm: calc(var(--rvc-base-input-icon-size) * 0.85);
27
- --rvc-file-height-sm: 1.875rem;
28
- --rvc-file-preview-size-sm: 4rem;
29
- }
30
-
31
- @layer components {
32
- .rvc-file {
33
- display: flex;
34
- flex-direction: column;
35
- gap: 0.75rem;
36
-
37
- .rvc-file-input {
38
- display: none;
39
- }
40
-
41
- .rvc-file-display {
42
- display: grid;
43
- grid-template-columns: 1fr;
44
- width: 100%;
45
- height: var(--rvc-file-height);
46
- padding-inline: var(--rvc-file-padding-x);
47
- transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
48
- border-width: var(--rvc-file-border-width);
49
- border-radius: var(--rvc-file-border-radius);
50
- border-color: var(--rvc-file-border-color);
51
- outline-width: 0;
52
- background-color: var(--rvc-file-bg-color);
53
- background-image: none;
54
- box-shadow: var(--rvc-file-box-shadow);
55
- color: var(--rvc-file-color);
56
- font-size: var(--rvc-file-font-size);
57
- font-weight: var(--rvc-file-font-weight);
58
- cursor: pointer;
59
-
60
- &:hover {
61
- border-color: var(--color-slate-400);
62
- }
63
-
64
- &:focus-within {
65
- border-color: var(--color-blue-500);
66
- box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
67
- }
68
- }
69
-
70
- .rvc-file-prefix,
71
- .rvc-file-suffix {
72
- position: relative;
73
- z-index: 1;
74
- grid-column-start: 1;
75
- grid-row-start: 1;
76
- align-self: center;
77
- color: var(--rvc-file-icon-color);
78
- pointer-events: none;
79
- }
80
-
81
- .rvc-file-prefix {
82
- justify-self: start;
83
- }
84
-
85
- .rvc-file-suffix {
86
- justify-self: end;
87
- }
88
-
89
- .rvc-file-label {
90
- grid-column-start: 1;
91
- grid-row-start: 1;
92
- align-self: center;
93
- overflow: hidden;
94
- color: var(--rvc-file-placeholder-color);
95
- text-overflow: ellipsis;
96
- white-space: nowrap;
97
- }
98
-
99
- &:has(.rvc-file-prefix) .rvc-file-label {
100
- padding-left: calc(var(--rvc-file-icon-size) + 0.25rem);
101
- }
102
-
103
- &:has(.rvc-file-suffix) .rvc-file-label {
104
- padding-right: calc(var(--rvc-file-icon-size) + 0.25rem);
105
- }
106
-
107
- svg {
108
- width: var(--rvc-file-icon-size);
109
- height: var(--rvc-file-icon-size);
110
- }
111
-
112
- .rvc-file-preview {
113
- display: flex;
114
- align-items: center;
115
- justify-content: center;
116
- width: var(--rvc-file-preview-size);
117
- height: var(--rvc-file-preview-size);
118
- overflow: hidden;
119
- border-width: var(--rvc-file-border-width);
120
- border-radius: var(--rvc-file-border-radius);
121
- border-color: var(--rvc-file-border-color);
122
- background-color: var(--color-gray-50);
123
- }
124
-
125
- .rvc-file-preview-image {
126
- width: 100%;
127
- height: 100%;
128
- object-fit: cover;
129
- }
130
-
131
- .rvc-file-actions {
132
- display: flex;
133
- gap: 0.5rem;
134
- }
135
-
136
- .rvc-file-action {
137
- display: inline-flex;
138
- align-items: center;
139
- gap: 0.375rem;
140
- padding: 0.375rem 0.75rem;
141
- transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
142
- border: none;
143
- border-radius: var(--rvc-file-border-radius);
144
- background-color: transparent;
145
- color: var(--rvc-file-action-color);
146
- font-size: 0.875rem;
147
- font-weight: 500;
148
- cursor: pointer;
149
-
150
- svg {
151
- width: 1rem;
152
- height: 1rem;
153
- }
154
-
155
- &:hover {
156
- background-color: var(--color-slate-100);
157
- color: var(--rvc-file-action-hover-color);
158
- }
159
-
160
- &:focus {
161
- outline: 2px solid var(--color-blue-500);
162
- outline-offset: 2px;
163
- }
164
- }
165
-
166
- .rvc-file-delete {
167
- color: var(--rvc-file-delete-color);
168
-
169
- &:hover {
170
- background-color: var(--color-red-50);
171
- color: var(--rvc-file-delete-hover-color);
172
- }
173
- }
174
-
175
- .rvc-file-action-label {
176
- line-height: 1;
177
- }
178
-
179
- &.rvc-file-sm {
180
- --rvc-file-font-size: var(--rvc-file-font-size-sm);
181
- --rvc-file-padding-x: var(--rvc-file-padding-x-sm);
182
- --rvc-file-icon-size: var(--rvc-file-icon-size-sm);
183
- --rvc-file-height: var(--rvc-file-height-sm);
184
- --rvc-file-preview-size: var(--rvc-file-preview-size-sm);
185
-
186
- .rvc-file-action {
187
- padding: 0.25rem 0.5rem;
188
- font-size: 0.8125rem;
189
-
190
- svg {
191
- width: 0.875rem;
192
- height: 0.875rem;
193
- }
194
- }
195
- }
196
-
197
- &:has(:disabled) {
198
- opacity: var(--rvc-file-disabled-opacity);
199
-
200
- .rvc-file-display {
201
- background-color: var(--rvc-file-bg-color-disabled);
202
- cursor: not-allowed;
203
- }
204
- }
205
- }
206
- }