@dpa-id-components/dpa-shared-components 13.2.1 → 14.0.0
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/dist/components/UiButton/UiButton.stories.d.ts +8 -8
- package/dist/components/UiButton/UiButton.vue.d.ts +3 -2
- package/dist/components/UiInfoContent/UiInfoContent.stories.d.ts +6 -6
- package/dist/dpa-shared-components.mjs +22 -21
- package/dist/dpa-shared-components.umd.js +1 -1
- package/package.json +4 -2
|
@@ -3,12 +3,12 @@ declare const meta: {
|
|
|
3
3
|
title: string;
|
|
4
4
|
component: {
|
|
5
5
|
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
|
|
6
|
+
to?: import('vue-router').RouteLocationRaw;
|
|
6
7
|
iconName?: import('..').UiIconName | null;
|
|
7
8
|
size?: "xs" | "small" | "medium" | "large";
|
|
8
9
|
color?: "blue" | "transparent" | "white" | "gray" | "light-gray" | "primary-green";
|
|
9
10
|
disabledVariant?: "primary" | "secondary";
|
|
10
11
|
disabled?: boolean;
|
|
11
|
-
href?: string;
|
|
12
12
|
rounded?: boolean;
|
|
13
13
|
}> & Readonly<{
|
|
14
14
|
onClick?: (() => any) | undefined;
|
|
@@ -20,8 +20,8 @@ declare const meta: {
|
|
|
20
20
|
color: "blue" | "transparent" | "white" | "gray" | "light-gray" | "primary-green";
|
|
21
21
|
rounded: boolean;
|
|
22
22
|
iconName: import('..').UiIconName | null;
|
|
23
|
+
to: import('vue-router').RouteLocationRaw;
|
|
23
24
|
disabledVariant: "primary" | "secondary";
|
|
24
|
-
href: string;
|
|
25
25
|
}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
|
|
26
26
|
P: {};
|
|
27
27
|
B: {};
|
|
@@ -30,12 +30,12 @@ declare const meta: {
|
|
|
30
30
|
M: {};
|
|
31
31
|
Defaults: {};
|
|
32
32
|
}, Readonly<{
|
|
33
|
+
to?: import('vue-router').RouteLocationRaw;
|
|
33
34
|
iconName?: import('..').UiIconName | null;
|
|
34
35
|
size?: "xs" | "small" | "medium" | "large";
|
|
35
36
|
color?: "blue" | "transparent" | "white" | "gray" | "light-gray" | "primary-green";
|
|
36
37
|
disabledVariant?: "primary" | "secondary";
|
|
37
38
|
disabled?: boolean;
|
|
38
|
-
href?: string;
|
|
39
39
|
rounded?: boolean;
|
|
40
40
|
}> & Readonly<{
|
|
41
41
|
onClick?: (() => any) | undefined;
|
|
@@ -45,19 +45,19 @@ declare const meta: {
|
|
|
45
45
|
color: "blue" | "transparent" | "white" | "gray" | "light-gray" | "primary-green";
|
|
46
46
|
rounded: boolean;
|
|
47
47
|
iconName: import('..').UiIconName | null;
|
|
48
|
+
to: import('vue-router').RouteLocationRaw;
|
|
48
49
|
disabledVariant: "primary" | "secondary";
|
|
49
|
-
href: string;
|
|
50
50
|
}>;
|
|
51
51
|
__isFragment?: never;
|
|
52
52
|
__isTeleport?: never;
|
|
53
53
|
__isSuspense?: never;
|
|
54
54
|
} & import('vue').ComponentOptionsBase<Readonly<{
|
|
55
|
+
to?: import('vue-router').RouteLocationRaw;
|
|
55
56
|
iconName?: import('..').UiIconName | null;
|
|
56
57
|
size?: "xs" | "small" | "medium" | "large";
|
|
57
58
|
color?: "blue" | "transparent" | "white" | "gray" | "light-gray" | "primary-green";
|
|
58
59
|
disabledVariant?: "primary" | "secondary";
|
|
59
60
|
disabled?: boolean;
|
|
60
|
-
href?: string;
|
|
61
61
|
rounded?: boolean;
|
|
62
62
|
}> & Readonly<{
|
|
63
63
|
onClick?: (() => any) | undefined;
|
|
@@ -69,8 +69,8 @@ declare const meta: {
|
|
|
69
69
|
color: "blue" | "transparent" | "white" | "gray" | "light-gray" | "primary-green";
|
|
70
70
|
rounded: boolean;
|
|
71
71
|
iconName: import('..').UiIconName | null;
|
|
72
|
+
to: import('vue-router').RouteLocationRaw;
|
|
72
73
|
disabledVariant: "primary" | "secondary";
|
|
73
|
-
href: string;
|
|
74
74
|
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
|
|
75
75
|
$slots: {
|
|
76
76
|
default?(_: {}): any;
|
|
@@ -87,7 +87,7 @@ declare const meta: {
|
|
|
87
87
|
rounded: {
|
|
88
88
|
control: "boolean";
|
|
89
89
|
};
|
|
90
|
-
|
|
90
|
+
to: {
|
|
91
91
|
control: "text";
|
|
92
92
|
};
|
|
93
93
|
color: {
|
|
@@ -110,7 +110,7 @@ declare const meta: {
|
|
|
110
110
|
color: "blue";
|
|
111
111
|
size: "large";
|
|
112
112
|
disabledVariant: "primary";
|
|
113
|
-
|
|
113
|
+
to: undefined;
|
|
114
114
|
};
|
|
115
115
|
};
|
|
116
116
|
export default meta;
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
+
import { RouteLocationRaw } from 'vue-router';
|
|
1
2
|
import { UiIconName } from '../UiIcon/UiIcon.vue';
|
|
2
3
|
type __VLS_Props = {
|
|
4
|
+
to?: RouteLocationRaw;
|
|
3
5
|
iconName?: UiIconName | null;
|
|
4
6
|
size?: "xs" | "small" | "medium" | "large";
|
|
5
7
|
color?: "blue" | "transparent" | "white" | "gray" | "light-gray" | "primary-green";
|
|
6
8
|
disabledVariant?: "primary" | "secondary";
|
|
7
9
|
disabled?: boolean;
|
|
8
|
-
href?: string;
|
|
9
10
|
rounded?: boolean;
|
|
10
11
|
};
|
|
11
12
|
declare function __VLS_template(): {
|
|
@@ -27,8 +28,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
|
|
|
27
28
|
color: "blue" | "transparent" | "white" | "gray" | "light-gray" | "primary-green";
|
|
28
29
|
rounded: boolean;
|
|
29
30
|
iconName: UiIconName | null;
|
|
31
|
+
to: RouteLocationRaw;
|
|
30
32
|
disabledVariant: "primary" | "secondary";
|
|
31
|
-
href: string;
|
|
32
33
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
33
34
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
34
35
|
export default _default;
|
|
@@ -226,12 +226,12 @@ declare const meta: {
|
|
|
226
226
|
});
|
|
227
227
|
UiButton: {
|
|
228
228
|
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
|
|
229
|
+
to?: import('vue-router').RouteLocationRaw;
|
|
229
230
|
iconName?: import('..').UiIconName | null;
|
|
230
231
|
size?: "xs" | "small" | "medium" | "large";
|
|
231
232
|
color?: "blue" | "transparent" | "white" | "gray" | "light-gray" | "primary-green";
|
|
232
233
|
disabledVariant?: "primary" | "secondary";
|
|
233
234
|
disabled?: boolean;
|
|
234
|
-
href?: string;
|
|
235
235
|
rounded?: boolean;
|
|
236
236
|
}> & Readonly<{
|
|
237
237
|
onClick?: (() => any) | undefined;
|
|
@@ -243,8 +243,8 @@ declare const meta: {
|
|
|
243
243
|
color: "blue" | "transparent" | "white" | "gray" | "light-gray" | "primary-green";
|
|
244
244
|
rounded: boolean;
|
|
245
245
|
iconName: import('..').UiIconName | null;
|
|
246
|
+
to: import('vue-router').RouteLocationRaw;
|
|
246
247
|
disabledVariant: "primary" | "secondary";
|
|
247
|
-
href: string;
|
|
248
248
|
}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
|
|
249
249
|
P: {};
|
|
250
250
|
B: {};
|
|
@@ -253,12 +253,12 @@ declare const meta: {
|
|
|
253
253
|
M: {};
|
|
254
254
|
Defaults: {};
|
|
255
255
|
}, Readonly<{
|
|
256
|
+
to?: import('vue-router').RouteLocationRaw;
|
|
256
257
|
iconName?: import('..').UiIconName | null;
|
|
257
258
|
size?: "xs" | "small" | "medium" | "large";
|
|
258
259
|
color?: "blue" | "transparent" | "white" | "gray" | "light-gray" | "primary-green";
|
|
259
260
|
disabledVariant?: "primary" | "secondary";
|
|
260
261
|
disabled?: boolean;
|
|
261
|
-
href?: string;
|
|
262
262
|
rounded?: boolean;
|
|
263
263
|
}> & Readonly<{
|
|
264
264
|
onClick?: (() => any) | undefined;
|
|
@@ -268,19 +268,19 @@ declare const meta: {
|
|
|
268
268
|
color: "blue" | "transparent" | "white" | "gray" | "light-gray" | "primary-green";
|
|
269
269
|
rounded: boolean;
|
|
270
270
|
iconName: import('..').UiIconName | null;
|
|
271
|
+
to: import('vue-router').RouteLocationRaw;
|
|
271
272
|
disabledVariant: "primary" | "secondary";
|
|
272
|
-
href: string;
|
|
273
273
|
}>;
|
|
274
274
|
__isFragment?: never;
|
|
275
275
|
__isTeleport?: never;
|
|
276
276
|
__isSuspense?: never;
|
|
277
277
|
} & import('vue').ComponentOptionsBase<Readonly<{
|
|
278
|
+
to?: import('vue-router').RouteLocationRaw;
|
|
278
279
|
iconName?: import('..').UiIconName | null;
|
|
279
280
|
size?: "xs" | "small" | "medium" | "large";
|
|
280
281
|
color?: "blue" | "transparent" | "white" | "gray" | "light-gray" | "primary-green";
|
|
281
282
|
disabledVariant?: "primary" | "secondary";
|
|
282
283
|
disabled?: boolean;
|
|
283
|
-
href?: string;
|
|
284
284
|
rounded?: boolean;
|
|
285
285
|
}> & Readonly<{
|
|
286
286
|
onClick?: (() => any) | undefined;
|
|
@@ -292,8 +292,8 @@ declare const meta: {
|
|
|
292
292
|
color: "blue" | "transparent" | "white" | "gray" | "light-gray" | "primary-green";
|
|
293
293
|
rounded: boolean;
|
|
294
294
|
iconName: import('..').UiIconName | null;
|
|
295
|
+
to: import('vue-router').RouteLocationRaw;
|
|
295
296
|
disabledVariant: "primary" | "secondary";
|
|
296
|
-
href: string;
|
|
297
297
|
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
|
|
298
298
|
$slots: {
|
|
299
299
|
default?(_: {}): any;
|
|
@@ -8175,35 +8175,35 @@ const ys = /* @__PURE__ */ Qa(Wf, [["render", jf]]), Qf = ["data-testid"], Gf =
|
|
|
8175
8175
|
}), za = /* @__PURE__ */ Ce({
|
|
8176
8176
|
__name: "UiButton",
|
|
8177
8177
|
props: {
|
|
8178
|
+
to: { default: void 0 },
|
|
8178
8179
|
iconName: { default: null },
|
|
8179
8180
|
size: { default: "medium" },
|
|
8180
8181
|
color: { default: "blue" },
|
|
8181
8182
|
disabledVariant: { default: "primary" },
|
|
8182
8183
|
disabled: { type: Boolean, default: !1 },
|
|
8183
|
-
href: { default: void 0 },
|
|
8184
8184
|
rounded: { type: Boolean, default: !1 }
|
|
8185
8185
|
},
|
|
8186
8186
|
emits: ["click"],
|
|
8187
8187
|
setup(e, { emit: t }) {
|
|
8188
8188
|
const n = t, r = e, a = F(() => {
|
|
8189
|
-
const
|
|
8189
|
+
const l = r.rounded ? "rounded-full" : "rounded-none";
|
|
8190
8190
|
switch (r.disabled ? "disabled" : r.color) {
|
|
8191
8191
|
case "blue":
|
|
8192
|
-
return `${
|
|
8192
|
+
return `${l} text-white bg-blue-default hover:bg-blue-dark`;
|
|
8193
8193
|
case "primary-green":
|
|
8194
|
-
return `${
|
|
8194
|
+
return `${l} text-white bg-green-primary hover:bg-night-green`;
|
|
8195
8195
|
case "transparent":
|
|
8196
|
-
return `${
|
|
8196
|
+
return `${l} text-blue-default bg-transparent border-[1px] border-gray-300 hover:text-blue-dark hover:border-gray-700`;
|
|
8197
8197
|
case "white":
|
|
8198
|
-
return `${
|
|
8198
|
+
return `${l} text-blue-default bg-white border-[1px] border-gray-300 hover:text-blue-dark hover:border-gray-700`;
|
|
8199
8199
|
case "gray":
|
|
8200
|
-
return `${
|
|
8200
|
+
return `${l} text-white bg-gray-700 hover:bg-gray-800`;
|
|
8201
8201
|
case "light-gray":
|
|
8202
|
-
return `${
|
|
8202
|
+
return `${l} text-gray-800 bg-gray-100`;
|
|
8203
8203
|
case "disabled":
|
|
8204
|
-
return r.disabledVariant === "primary" ? `${
|
|
8204
|
+
return r.disabledVariant === "primary" ? `${l} text-gray-400 bg-gray-100 cursor-not-allowed` : `${l} text-gray-400 bg-white cursor-not-allowed border border-gray-400`;
|
|
8205
8205
|
default:
|
|
8206
|
-
return `${
|
|
8206
|
+
return `${l} text-white bg-blue-default hover:bg-blue-dark`;
|
|
8207
8207
|
}
|
|
8208
8208
|
}), o = F(() => {
|
|
8209
8209
|
switch (r.size) {
|
|
@@ -8218,29 +8218,30 @@ const ys = /* @__PURE__ */ Qa(Wf, [["render", jf]]), Qf = ["data-testid"], Gf =
|
|
|
8218
8218
|
default:
|
|
8219
8219
|
return "h-10 text-base";
|
|
8220
8220
|
}
|
|
8221
|
-
}), s = F(() => r.size === "xs" ? "xs" : r.size === "small" ? "small" : "medium")
|
|
8222
|
-
return (
|
|
8221
|
+
}), s = F(() => r.size === "xs" ? "xs" : r.size === "small" ? "small" : "medium");
|
|
8222
|
+
return (l, i) => (P(), xe(tn(l.to ? "RouterLink" : "button"), {
|
|
8223
8223
|
class: oe(["UiButton focus-visible:outline-blue inline-flex items-center whitespace-nowrap font-medium leading-normal focus:outline-none", {
|
|
8224
|
-
"px-4":
|
|
8225
|
-
"px-2":
|
|
8224
|
+
"px-4": l.size !== "xs",
|
|
8225
|
+
"px-2": l.size === "xs",
|
|
8226
8226
|
[a.value]: !0,
|
|
8227
8227
|
[o.value]: !0
|
|
8228
8228
|
}]),
|
|
8229
|
-
|
|
8230
|
-
|
|
8231
|
-
|
|
8229
|
+
to: l.to,
|
|
8230
|
+
type: l.to ? void 0 : "button",
|
|
8231
|
+
disabled: l.to ? void 0 : l.disabled,
|
|
8232
|
+
onClick: i[0] || (i[0] = (u) => n("click"))
|
|
8232
8233
|
}, {
|
|
8233
8234
|
default: Te(() => [
|
|
8234
|
-
|
|
8235
|
+
l.iconName ? (P(), xe(wt, {
|
|
8235
8236
|
key: 0,
|
|
8236
|
-
name:
|
|
8237
|
+
name: l.iconName,
|
|
8237
8238
|
size: s.value,
|
|
8238
8239
|
class: "mr-2"
|
|
8239
8240
|
}, null, 8, ["name", "size"])) : j("", !0),
|
|
8240
|
-
se(
|
|
8241
|
+
se(l.$slots, "default")
|
|
8241
8242
|
]),
|
|
8242
8243
|
_: 3
|
|
8243
|
-
}, 8, ["class", "
|
|
8244
|
+
}, 8, ["class", "to", "type", "disabled"]));
|
|
8244
8245
|
}
|
|
8245
8246
|
}), ap = {}, op = { class: "flex [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r [&>*]:border [&>*]:border-r-0 [&>*]:border-gray-300" };
|
|
8246
8247
|
function sp(e, t) {
|