@robuust-digital/vue-components 2.6.8 → 2.7.1

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.
@@ -1,132 +1,3 @@
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
- export { }
1
+ import { default as Combobox } from './components/Combobox.vue';
2
+ export { Combobox };
3
+ export default Combobox;
@@ -0,0 +1,19 @@
1
+ import { Component, Ref, ComputedRef } from 'vue';
2
+ type DialogAs = string | Component;
3
+ interface DialogProps {
4
+ as: DialogAs;
5
+ id: string;
6
+ }
7
+ interface DialogContext {
8
+ contentRef: Ref<HTMLElement | null>;
9
+ ready: Ref<boolean>;
10
+ isForm: ComputedRef<boolean>;
11
+ titleId: ComputedRef<string>;
12
+ descriptionId: ComputedRef<string>;
13
+ initialFocusElement: ComputedRef<HTMLElement | null>;
14
+ }
15
+ /**
16
+ * Dialog context composable
17
+ */
18
+ export default function useDialogContext(props: DialogProps): DialogContext;
19
+ export {};
@@ -0,0 +1,6 @@
1
+ import { ComputedRef } from 'vue';
2
+ interface UseFormReturn {
3
+ hasModelBinding: ComputedRef<boolean>;
4
+ }
5
+ declare const _default: () => UseFormReturn;
6
+ export default _default;
@@ -0,0 +1,227 @@
1
+ :root {
2
+ /* Base FileUpload variables */
3
+ --rvc-file-upload-gap: calc(var(--spacing) * 3);
4
+ --rvc-file-upload-area-border-radius: var(--rvc-base-border-radius);
5
+ --rvc-file-upload-area-border-width: var(--rvc-base-border-width);
6
+ --rvc-file-upload-area-border-style: dashed;
7
+ --rvc-file-upload-area-border-color: var(--rvc-base-border-color);
8
+ --rvc-file-upload-area-border-color-hover: var(--rvc-base-border-dark-color);
9
+ --rvc-file-upload-area-border-color-dragging: var(--color-indigo-500);
10
+ --rvc-file-upload-area-bg-color: var(--color-white);
11
+ --rvc-file-upload-area-bg-color-hover: var(--color-slate-50);
12
+ --rvc-file-upload-area-bg-color-dragging: var(--color-indigo-50);
13
+ --rvc-file-upload-area-padding-x: calc(var(--spacing) * 6);
14
+ --rvc-file-upload-area-padding-y: calc(var(--spacing) * 8);
15
+ --rvc-file-upload-area-min-height: calc(var(--spacing) * 40);
16
+ --rvc-file-upload-area-gap: calc(var(--spacing) * 1);
17
+ --rvc-file-upload-transition-duration: var(--rvc-base-transition-duration);
18
+ --rvc-file-upload-transition-timing-function: var(--rvc-base-transition-timing-function);
19
+ --rvc-file-upload-transition-property: color, background-color, border-color;
20
+ --rvc-file-upload-disabled-opacity: var(--rvc-base-input-disabled-opacity);
21
+ --rvc-file-upload-icon-size: calc(var(--spacing) * 7);
22
+ --rvc-file-upload-icon-color: var(--color-slate-400);
23
+ --rvc-file-upload-icon-color-hover: var(--color-slate-500);
24
+ --rvc-file-upload-label-color: var(--color-slate-900);
25
+ --rvc-file-upload-label-font-size: var(--text-base);
26
+ --rvc-file-upload-label-font-weight: var(--font-weight-medium);
27
+ --rvc-file-upload-description-color: var(--color-slate-500);
28
+ --rvc-file-upload-description-font-size: var(--text-sm);
29
+ --rvc-file-upload-list-gap: calc(var(--spacing) * 1.5);
30
+ --rvc-file-upload-item-gap: calc(var(--spacing) * 2);
31
+ --rvc-file-upload-item-padding-x: calc(var(--spacing) * 2.5);
32
+ --rvc-file-upload-item-padding-y: calc(var(--spacing) * 1.5);
33
+ --rvc-file-upload-item-border-radius: var(--rvc-base-border-radius);
34
+ --rvc-file-upload-item-border-width: var(--rvc-base-border-width);
35
+ --rvc-file-upload-item-border-style: solid;
36
+ --rvc-file-upload-item-border-color: var(--rvc-base-border-color);
37
+ --rvc-file-upload-item-bg-color: var(--color-white);
38
+ --rvc-file-upload-file-color: var(--color-slate-700);
39
+ --rvc-file-upload-file-font-size: var(--text-sm);
40
+ --rvc-file-upload-thumbnail-size: calc(var(--spacing) * 8);
41
+ --rvc-file-upload-thumbnail-border-radius: calc(infinity * 1px);
42
+ --rvc-file-upload-thumbnail-bg-color: var(--color-slate-100);
43
+ --rvc-file-upload-thumbnail-object-fit: cover;
44
+ --rvc-file-upload-remove-size: calc(var(--spacing) * 6);
45
+ --rvc-file-upload-remove-border-radius: var(--rvc-base-border-radius);
46
+ --rvc-file-upload-remove-color: var(--color-slate-400);
47
+ --rvc-file-upload-remove-color-hover: var(--color-red-600);
48
+ --rvc-file-upload-remove-bg-color-hover: var(--color-red-50);
49
+ --rvc-file-upload-remove-icon-size: calc(var(--spacing) * 4);
50
+
51
+ /* Small variant */
52
+ --rvc-file-upload-gap-sm: calc(var(--spacing) * 2);
53
+ --rvc-file-upload-area-padding-x-sm: calc(var(--spacing) * 4);
54
+ --rvc-file-upload-area-padding-y-sm: calc(var(--spacing) * 4);
55
+ --rvc-file-upload-area-min-height-sm: calc(var(--spacing) * 24);
56
+ --rvc-file-upload-icon-size-sm: calc(var(--spacing) * 5);
57
+ }
58
+
59
+ @layer components {
60
+ .rvc-file-upload {
61
+ display: flex;
62
+ flex-direction: column;
63
+ gap: var(--rvc-file-upload-gap);
64
+
65
+ &.rvc-file-upload-sm {
66
+ --rvc-file-upload-gap: var(--rvc-file-upload-gap-sm);
67
+ --rvc-file-upload-area-padding-x: var(--rvc-file-upload-area-padding-x-sm);
68
+ --rvc-file-upload-area-padding-y: var(--rvc-file-upload-area-padding-y-sm);
69
+ --rvc-file-upload-area-min-height: var(--rvc-file-upload-area-min-height-sm);
70
+ --rvc-file-upload-icon-size: var(--rvc-file-upload-icon-size-sm);
71
+ }
72
+
73
+ &.rvc-file-upload-disabled {
74
+ opacity: var(--rvc-file-upload-disabled-opacity);
75
+ }
76
+
77
+ &.rvc-file-upload-dragging .rvc-file-upload-area {
78
+ border-color: var(--rvc-file-upload-area-border-color-dragging);
79
+ background-color: var(--rvc-file-upload-area-bg-color-dragging);
80
+ }
81
+ }
82
+
83
+ .rvc-file-upload-input {
84
+ display: none;
85
+ }
86
+
87
+ .rvc-file-upload-area {
88
+ display: flex;
89
+ flex-direction: column;
90
+ align-items: center;
91
+ justify-content: center;
92
+ width: 100%;
93
+ min-height: var(--rvc-file-upload-area-min-height);
94
+ padding: var(--rvc-file-upload-area-padding-y) var(--rvc-file-upload-area-padding-x);
95
+ transition-property: var(--rvc-file-upload-transition-property);
96
+ transition-duration: var(--rvc-file-upload-transition-duration);
97
+ transition-timing-function: var(--rvc-file-upload-transition-timing-function);
98
+ border-width: var(--rvc-file-upload-area-border-width);
99
+ border-style: var(--rvc-file-upload-area-border-style);
100
+ border-radius: var(--rvc-file-upload-area-border-radius);
101
+ border-color: var(--rvc-file-upload-area-border-color);
102
+ background-color: var(--rvc-file-upload-area-bg-color);
103
+ color: var(--rvc-file-upload-description-color);
104
+ text-align: center;
105
+ cursor: pointer;
106
+ gap: var(--rvc-file-upload-area-gap);
107
+ appearance: none;
108
+
109
+ &:disabled {
110
+ cursor: not-allowed;
111
+ }
112
+ }
113
+
114
+ .rvc-file-upload:not(.rvc-file-upload-disabled) .rvc-file-upload-area:hover {
115
+ border-color: var(--rvc-file-upload-area-border-color-hover);
116
+ background-color: var(--rvc-file-upload-area-bg-color-hover);
117
+
118
+ .rvc-file-upload-icon {
119
+ color: var(--rvc-file-upload-icon-color-hover);
120
+ }
121
+ }
122
+
123
+ .rvc-file-upload-icon {
124
+ display: block;
125
+ width: var(--rvc-file-upload-icon-size);
126
+ height: var(--rvc-file-upload-icon-size);
127
+ margin-bottom: calc(var(--spacing) * 1);
128
+ transition-property: var(--rvc-file-upload-transition-property);
129
+ transition-duration: var(--rvc-file-upload-transition-duration);
130
+ transition-timing-function: var(--rvc-file-upload-transition-timing-function);
131
+ color: var(--rvc-file-upload-icon-color);
132
+ }
133
+
134
+ .rvc-file-upload-label {
135
+ display: block;
136
+ color: var(--rvc-file-upload-label-color);
137
+ font-size: var(--rvc-file-upload-label-font-size);
138
+ font-weight: var(--rvc-file-upload-label-font-weight);
139
+ }
140
+
141
+ .rvc-file-upload-description {
142
+ display: block;
143
+ color: var(--rvc-file-upload-description-color);
144
+ font-size: var(--rvc-file-upload-description-font-size);
145
+ }
146
+
147
+ .rvc-file-upload-list {
148
+ display: flex;
149
+ flex-direction: column;
150
+ margin: 0;
151
+ padding: 0;
152
+ list-style: none;
153
+ gap: var(--rvc-file-upload-list-gap);
154
+ }
155
+
156
+ .rvc-file-upload-item {
157
+ display: flex;
158
+ align-items: center;
159
+ justify-content: space-between;
160
+ min-width: 0;
161
+ padding: var(--rvc-file-upload-item-padding-y) var(--rvc-file-upload-item-padding-x);
162
+ border-width: var(--rvc-file-upload-item-border-width);
163
+ border-style: var(--rvc-file-upload-item-border-style);
164
+ border-radius: var(--rvc-file-upload-item-border-radius);
165
+ border-color: var(--rvc-file-upload-item-border-color);
166
+ background-color: var(--rvc-file-upload-item-bg-color);
167
+ gap: var(--rvc-file-upload-item-gap);
168
+ }
169
+
170
+ .rvc-file-upload-file {
171
+ min-width: 0;
172
+ margin-right: auto;
173
+ overflow: hidden;
174
+ color: var(--rvc-file-upload-file-color);
175
+ font-size: var(--rvc-file-upload-file-font-size);
176
+ text-overflow: ellipsis;
177
+ white-space: nowrap;
178
+
179
+ &[href] {
180
+ text-decoration: none;
181
+
182
+ &:hover {
183
+ text-decoration: underline;
184
+ }
185
+ }
186
+ }
187
+
188
+ .rvc-file-upload-thumbnail {
189
+ display: block;
190
+ flex-shrink: 0;
191
+ width: var(--rvc-file-upload-thumbnail-size);
192
+ height: var(--rvc-file-upload-thumbnail-size);
193
+ border-radius: var(--rvc-file-upload-thumbnail-border-radius);
194
+ background-color: var(--rvc-file-upload-thumbnail-bg-color);
195
+ object-fit: var(--rvc-file-upload-thumbnail-object-fit);
196
+ }
197
+
198
+ .rvc-file-upload-remove {
199
+ display: inline-flex;
200
+ flex-shrink: 0;
201
+ align-items: center;
202
+ justify-content: center;
203
+ width: var(--rvc-file-upload-remove-size);
204
+ height: var(--rvc-file-upload-remove-size);
205
+ padding: 0;
206
+ border: 0;
207
+ border-radius: var(--rvc-file-upload-remove-border-radius);
208
+ background-color: transparent;
209
+ color: var(--rvc-file-upload-remove-color);
210
+ cursor: pointer;
211
+ appearance: none;
212
+
213
+ &:hover {
214
+ background-color: var(--rvc-file-upload-remove-bg-color-hover);
215
+ color: var(--rvc-file-upload-remove-color-hover);
216
+ }
217
+
218
+ &:disabled {
219
+ cursor: not-allowed;
220
+ }
221
+
222
+ svg {
223
+ width: var(--rvc-file-upload-remove-icon-size);
224
+ height: var(--rvc-file-upload-remove-icon-size);
225
+ }
226
+ }
227
+ }
@@ -1,19 +1,20 @@
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-BkxgXUlf.js";
2
- import { _ as b } from "../_shared/ChevronDownIcon-BYWciGnh.js";
3
- import { _ } from "../_shared/ButtonBase.vue_vue_type_script_setup_true_lang-ZYVNEyNx.js";
4
- import { _ as l } from "../_shared/FormInput.vue_vue_type_script_setup_true_lang-Bg7YPGyY.js";
1
+ import { _ as e, a as s, b as t, c as r, d as m, e as p, f as i, g as x, h as c, i as d, j as f } from "../_shared/Tabs.vue_vue_type_script_setup_true_lang-C4NAAuLp.js";
2
+ import { _ as n } from "../_shared/ChevronDownIcon-BYWciGnh.js";
3
+ import { _ as F } from "../_shared/ButtonBase.vue_vue_type_script_setup_true_lang-ZYVNEyNx.js";
4
+ import { _ as g } from "../_shared/FormInput.vue_vue_type_script_setup_true_lang-Bg7YPGyY.js";
5
5
  export {
6
6
  e as Accordion,
7
7
  s as Alert,
8
- b as Badge,
9
- _ as ButtonBase,
8
+ n as Badge,
9
+ F as ButtonBase,
10
10
  t as Checkbox,
11
11
  r as DataTable,
12
12
  m as EmptyState,
13
- l as FormInput,
14
- p as FormSelect,
13
+ p as FileUpload,
14
+ g as FormInput,
15
+ i as FormSelect,
15
16
  x as FormTextarea,
16
17
  c as Pagination,
17
- f as Radio,
18
- i as Tabs
18
+ d as Radio,
19
+ f as Tabs
19
20
  };
@@ -4,6 +4,7 @@
4
4
  @import "./button.css";
5
5
  @import "./checkbox.css";
6
6
  @import "./empty-state.css";
7
+ @import "./file-upload.css";
7
8
  @import "./input.css";
8
9
  @import "./pagination.css";
9
10
  @import "./radio.css";