@dpa-id-components/dpa-shared-components 14.0.0 → 14.1.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.
Files changed (6) hide show
  1. package/dist/components/UiTooltip/UiTooltip.stories.d.ts +56 -0
  2. package/dist/components/UiTooltip/UiTooltip.vue.d.ts +4 -0
  3. package/dist/dpa-shared-components.mjs +40 -40
  4. package/dist/dpa-shared-components.umd.js +1 -1
  5. package/dist/style.css +1 -1
  6. package/package.json +1 -1
package/dist/components/UiTooltip/UiTooltip.stories.d.ts CHANGED
@@ -14,6 +14,8 @@ declare const meta: {
14
14
  tooltipClasses?: string;
15
15
  floatingUiOptions?: import('@floating-ui/vue').UseFloatingOptions | null;
16
16
  transitionClasses?: Partial<Record<import('@floating-ui/utils').Placement, string>>;
17
+ enterActiveClasses?: string;
18
+ leaveActiveClasses?: string;
17
19
  animate?: boolean;
18
20
  }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
19
21
  fixed: boolean;
@@ -28,6 +30,8 @@ declare const meta: {
28
30
  multilines: boolean;
29
31
  tooltipClasses: string;
30
32
  transitionClasses: Partial<Record<import('@floating-ui/utils').Placement, string>>;
33
+ enterActiveClasses: string;
34
+ leaveActiveClasses: string;
31
35
  }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
32
36
  activatorElm: HTMLDivElement;
33
37
  tooltipElm: HTMLDivElement;
@@ -50,6 +54,8 @@ declare const meta: {
50
54
  tooltipClasses?: string;
51
55
  floatingUiOptions?: import('@floating-ui/vue').UseFloatingOptions | null;
52
56
  transitionClasses?: Partial<Record<import('@floating-ui/utils').Placement, string>>;
57
+ enterActiveClasses?: string;
58
+ leaveActiveClasses?: string;
53
59
  animate?: boolean;
54
60
  }> & Readonly<{}>, {}, {}, {}, {}, {
55
61
  fixed: boolean;
@@ -64,6 +70,8 @@ declare const meta: {
64
70
  multilines: boolean;
65
71
  tooltipClasses: string;
66
72
  transitionClasses: Partial<Record<import('@floating-ui/utils').Placement, string>>;
73
+ enterActiveClasses: string;
74
+ leaveActiveClasses: string;
67
75
  }>;
68
76
  __isFragment?: never;
69
77
  __isTeleport?: never;
@@ -80,6 +88,8 @@ declare const meta: {
80
88
  tooltipClasses?: string;
81
89
  floatingUiOptions?: import('@floating-ui/vue').UseFloatingOptions | null;
82
90
  transitionClasses?: Partial<Record<import('@floating-ui/utils').Placement, string>>;
91
+ enterActiveClasses?: string;
92
+ leaveActiveClasses?: string;
83
93
  animate?: boolean;
84
94
  }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
85
95
  fixed: boolean;
@@ -94,6 +104,8 @@ declare const meta: {
94
104
  multilines: boolean;
95
105
  tooltipClasses: string;
96
106
  transitionClasses: Partial<Record<import('@floating-ui/utils').Placement, string>>;
107
+ enterActiveClasses: string;
108
+ leaveActiveClasses: string;
97
109
  }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
98
110
  $slots: {
99
111
  activator?(_: {}): any;
@@ -120,6 +132,12 @@ declare const meta: {
120
132
  multilines: {
121
133
  control: "boolean";
122
134
  };
135
+ enterActiveClasses: {
136
+ control: "text";
137
+ };
138
+ leaveActiveClasses: {
139
+ control: "text";
140
+ };
123
141
  };
124
142
  args: {
125
143
  position: "bottom";
@@ -127,6 +145,8 @@ declare const meta: {
127
145
  structuredInfo: never[];
128
146
  fixed: false;
129
147
  multilines: false;
148
+ enterActiveClasses: string;
149
+ leaveActiveClasses: string;
130
150
  };
131
151
  render: (args: import('@storybook/vue3').ComponentPropsAndSlots<{
132
152
  new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
@@ -141,6 +161,8 @@ declare const meta: {
141
161
  tooltipClasses?: string;
142
162
  floatingUiOptions?: import('@floating-ui/vue').UseFloatingOptions | null;
143
163
  transitionClasses?: Partial<Record<import('@floating-ui/utils').Placement, string>>;
164
+ enterActiveClasses?: string;
165
+ leaveActiveClasses?: string;
144
166
  animate?: boolean;
145
167
  }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
146
168
  fixed: boolean;
@@ -155,6 +177,8 @@ declare const meta: {
155
177
  multilines: boolean;
156
178
  tooltipClasses: string;
157
179
  transitionClasses: Partial<Record<import('@floating-ui/utils').Placement, string>>;
180
+ enterActiveClasses: string;
181
+ leaveActiveClasses: string;
158
182
  }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
159
183
  activatorElm: HTMLDivElement;
160
184
  tooltipElm: HTMLDivElement;
@@ -177,6 +201,8 @@ declare const meta: {
177
201
  tooltipClasses?: string;
178
202
  floatingUiOptions?: import('@floating-ui/vue').UseFloatingOptions | null;
179
203
  transitionClasses?: Partial<Record<import('@floating-ui/utils').Placement, string>>;
204
+ enterActiveClasses?: string;
205
+ leaveActiveClasses?: string;
180
206
  animate?: boolean;
181
207
  }> & Readonly<{}>, {}, {}, {}, {}, {
182
208
  fixed: boolean;
@@ -191,6 +217,8 @@ declare const meta: {
191
217
  multilines: boolean;
192
218
  tooltipClasses: string;
193
219
  transitionClasses: Partial<Record<import('@floating-ui/utils').Placement, string>>;
220
+ enterActiveClasses: string;
221
+ leaveActiveClasses: string;
194
222
  }>;
195
223
  __isFragment?: never;
196
224
  __isTeleport?: never;
@@ -207,6 +235,8 @@ declare const meta: {
207
235
  tooltipClasses?: string;
208
236
  floatingUiOptions?: import('@floating-ui/vue').UseFloatingOptions | null;
209
237
  transitionClasses?: Partial<Record<import('@floating-ui/utils').Placement, string>>;
238
+ enterActiveClasses?: string;
239
+ leaveActiveClasses?: string;
210
240
  animate?: boolean;
211
241
  }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
212
242
  fixed: boolean;
@@ -221,6 +251,8 @@ declare const meta: {
221
251
  multilines: boolean;
222
252
  tooltipClasses: string;
223
253
  transitionClasses: Partial<Record<import('@floating-ui/utils').Placement, string>>;
254
+ enterActiveClasses: string;
255
+ leaveActiveClasses: string;
224
256
  }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
225
257
  $slots: {
226
258
  activator?(_: {}): any;
@@ -242,6 +274,8 @@ declare const meta: {
242
274
  tooltipClasses?: string;
243
275
  floatingUiOptions?: import('@floating-ui/vue').UseFloatingOptions | null;
244
276
  transitionClasses?: Partial<Record<import('@floating-ui/utils').Placement, string>>;
277
+ enterActiveClasses?: string;
278
+ leaveActiveClasses?: string;
245
279
  animate?: boolean;
246
280
  }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
247
281
  fixed: boolean;
@@ -256,6 +290,8 @@ declare const meta: {
256
290
  multilines: boolean;
257
291
  tooltipClasses: string;
258
292
  transitionClasses: Partial<Record<import('@floating-ui/utils').Placement, string>>;
293
+ enterActiveClasses: string;
294
+ leaveActiveClasses: string;
259
295
  }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
260
296
  activatorElm: HTMLDivElement;
261
297
  tooltipElm: HTMLDivElement;
@@ -278,6 +314,8 @@ declare const meta: {
278
314
  tooltipClasses?: string;
279
315
  floatingUiOptions?: import('@floating-ui/vue').UseFloatingOptions | null;
280
316
  transitionClasses?: Partial<Record<import('@floating-ui/utils').Placement, string>>;
317
+ enterActiveClasses?: string;
318
+ leaveActiveClasses?: string;
281
319
  animate?: boolean;
282
320
  }> & Readonly<{}>, {}, {}, {}, {}, {
283
321
  fixed: boolean;
@@ -292,6 +330,8 @@ declare const meta: {
292
330
  multilines: boolean;
293
331
  tooltipClasses: string;
294
332
  transitionClasses: Partial<Record<import('@floating-ui/utils').Placement, string>>;
333
+ enterActiveClasses: string;
334
+ leaveActiveClasses: string;
295
335
  }>;
296
336
  __isFragment?: never;
297
337
  __isTeleport?: never;
@@ -308,6 +348,8 @@ declare const meta: {
308
348
  tooltipClasses?: string;
309
349
  floatingUiOptions?: import('@floating-ui/vue').UseFloatingOptions | null;
310
350
  transitionClasses?: Partial<Record<import('@floating-ui/utils').Placement, string>>;
351
+ enterActiveClasses?: string;
352
+ leaveActiveClasses?: string;
311
353
  animate?: boolean;
312
354
  }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
313
355
  fixed: boolean;
@@ -322,6 +364,8 @@ declare const meta: {
322
364
  multilines: boolean;
323
365
  tooltipClasses: string;
324
366
  transitionClasses: Partial<Record<import('@floating-ui/utils').Placement, string>>;
367
+ enterActiveClasses: string;
368
+ leaveActiveClasses: string;
325
369
  }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
326
370
  $slots: {
327
371
  activator?(_: {}): any;
@@ -344,6 +388,8 @@ declare const meta: {
344
388
  tooltipClasses?: string;
345
389
  floatingUiOptions?: import('@floating-ui/vue').UseFloatingOptions | null;
346
390
  transitionClasses?: Partial<Record<import('@floating-ui/utils').Placement, string>>;
391
+ enterActiveClasses?: string;
392
+ leaveActiveClasses?: string;
347
393
  animate?: boolean;
348
394
  }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
349
395
  fixed: boolean;
@@ -358,6 +404,8 @@ declare const meta: {
358
404
  multilines: boolean;
359
405
  tooltipClasses: string;
360
406
  transitionClasses: Partial<Record<import('@floating-ui/utils').Placement, string>>;
407
+ enterActiveClasses: string;
408
+ leaveActiveClasses: string;
361
409
  }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
362
410
  activatorElm: HTMLDivElement;
363
411
  tooltipElm: HTMLDivElement;
@@ -380,6 +428,8 @@ declare const meta: {
380
428
  tooltipClasses?: string;
381
429
  floatingUiOptions?: import('@floating-ui/vue').UseFloatingOptions | null;
382
430
  transitionClasses?: Partial<Record<import('@floating-ui/utils').Placement, string>>;
431
+ enterActiveClasses?: string;
432
+ leaveActiveClasses?: string;
383
433
  animate?: boolean;
384
434
  }> & Readonly<{}>, {}, {}, {}, {}, {
385
435
  fixed: boolean;
@@ -394,6 +444,8 @@ declare const meta: {
394
444
  multilines: boolean;
395
445
  tooltipClasses: string;
396
446
  transitionClasses: Partial<Record<import('@floating-ui/utils').Placement, string>>;
447
+ enterActiveClasses: string;
448
+ leaveActiveClasses: string;
397
449
  }>;
398
450
  __isFragment?: never;
399
451
  __isTeleport?: never;
@@ -410,6 +462,8 @@ declare const meta: {
410
462
  tooltipClasses?: string;
411
463
  floatingUiOptions?: import('@floating-ui/vue').UseFloatingOptions | null;
412
464
  transitionClasses?: Partial<Record<import('@floating-ui/utils').Placement, string>>;
465
+ enterActiveClasses?: string;
466
+ leaveActiveClasses?: string;
413
467
  animate?: boolean;
414
468
  }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
415
469
  fixed: boolean;
@@ -424,6 +478,8 @@ declare const meta: {
424
478
  multilines: boolean;
425
479
  tooltipClasses: string;
426
480
  transitionClasses: Partial<Record<import('@floating-ui/utils').Placement, string>>;
481
+ enterActiveClasses: string;
482
+ leaveActiveClasses: string;
427
483
  }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
428
484
  $slots: {
429
485
  activator?(_: {}): any;
package/dist/components/UiTooltip/UiTooltip.vue.d.ts CHANGED
@@ -11,6 +11,8 @@ type __VLS_Props = {
11
11
  tooltipClasses?: string;
12
12
  floatingUiOptions?: UseFloatingOptions | null;
13
13
  transitionClasses?: Partial<Record<Placement, string>>;
14
+ enterActiveClasses?: string;
15
+ leaveActiveClasses?: string;
14
16
  animate?: boolean;
15
17
  };
16
18
  declare function __VLS_template(): {
@@ -40,6 +42,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
40
42
  multilines: boolean;
41
43
  tooltipClasses: string;
42
44
  transitionClasses: Partial<Record<Placement, string>>;
45
+ enterActiveClasses: string;
46
+ leaveActiveClasses: string;
43
47
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
44
48
  activatorElm: HTMLDivElement;
45
49
  tooltipElm: HTMLDivElement;
package/dist/dpa-shared-components.mjs CHANGED
@@ -19417,12 +19417,14 @@ const ny = ["placeholder", "value"], ay = /* @__PURE__ */ Ce({
19417
19417
  "bottom-start": "scale-95 opacity-0 translate-y-2",
19418
19418
  left: "scale-95 opacity-0 -translate-x-2"
19419
19419
  }) },
19420
+ enterActiveClasses: { default: "motion-safe:transition duration-300 delay-500" },
19421
+ leaveActiveClasses: { default: ":motion-safe:transition" },
19420
19422
  animate: { type: Boolean, default: !1 }
19421
19423
  },
19422
19424
  setup(e) {
19423
- const t = e, n = F(() => t.animate ? t.transitionClasses[t.position] : ""), r = J(!1), a = J(), o = J(), { floatingStyles: s, placement: l } = cc(
19424
- a,
19425
- o,
19425
+ const t = e, n = F(() => t.animate ? t.transitionClasses[t.position] : ""), r = F(() => t.animate ? t.enterActiveClasses : ""), a = F(() => t.animate ? t.leaveActiveClasses : ""), o = J(!1), s = J(), l = J(), { floatingStyles: i, placement: u } = cc(
19426
+ s,
19427
+ l,
19426
19428
  {
19427
19429
  strategy: t.fixed ? "fixed" : "absolute",
19428
19430
  placement: t.position,
@@ -19430,91 +19432,89 @@ const ny = ["placeholder", "value"], ay = /* @__PURE__ */ Ce({
19430
19432
  ...t.floatingUiOptions ? t.floatingUiOptions : {}
19431
19433
  }
19432
19434
  );
19433
- return (i, u) => (P(), L("div", null, [
19435
+ return (c, d) => (P(), L("div", null, [
19434
19436
  ee("div", {
19435
19437
  ref_key: "activatorElm",
19436
- ref: a,
19438
+ ref: s,
19437
19439
  "data-testid": "activator",
19438
19440
  tabindex: "1",
19439
- onMouseenter: u[0] || (u[0] = (c) => r.value = !0),
19440
- onFocus: u[1] || (u[1] = (c) => r.value = !0),
19441
- onMouseleave: u[2] || (u[2] = (c) => r.value = !1),
19442
- onBlur: u[3] || (u[3] = (c) => r.value = !1)
19441
+ onMouseenter: d[0] || (d[0] = (h) => o.value = !0),
19442
+ onFocus: d[1] || (d[1] = (h) => o.value = !0),
19443
+ onMouseleave: d[2] || (d[2] = (h) => o.value = !1),
19444
+ onBlur: d[3] || (d[3] = (h) => o.value = !1)
19443
19445
  }, [
19444
- se(i.$slots, "activator")
19446
+ se(c.$slots, "activator")
19445
19447
  ], 544),
19446
19448
  (P(), xe(Cl, {
19447
- disabled: !i.fixed,
19449
+ disabled: !c.fixed,
19448
19450
  to: "body"
19449
19451
  }, [
19450
- i.structuredLayout ? (P(), L("div", {
19452
+ c.structuredLayout ? (P(), L("div", {
19451
19453
  key: 0,
19452
19454
  ref_key: "tooltipElm",
19453
- ref: o,
19454
- style: nt(O(s)),
19455
+ ref: l,
19456
+ style: nt(O(i)),
19455
19457
  "data-testid": "structuredTooltip",
19456
- "data-placement": O(l)
19458
+ "data-placement": O(u)
19457
19459
  }, [
19458
19460
  Ne(sr, {
19459
- "enter-active-class": "transition",
19460
- "leave-active-class": "transition",
19461
+ "enter-active-class": r.value,
19462
+ "leave-active-class": a.value,
19461
19463
  "leave-to-class": n.value,
19462
- "enter-from-class": n.value,
19463
- duration: i.animate ? 300 : 0
19464
+ "enter-from-class": n.value
19464
19465
  }, {
19465
19466
  default: Te(() => [
19466
19467
  Ut(ee("ul", {
19467
19468
  "data-testid": "tooltipElement",
19468
- class: oe(["border-1 my-1 w-72 rounded-2xl border-gray-300 bg-white text-xs leading-5 shadow-lg", [i.tooltipClasses]])
19469
+ class: oe(["border-1 my-1 w-72 rounded-2xl border-gray-300 bg-white text-xs leading-5 shadow-lg", [c.tooltipClasses]])
19469
19470
  }, [
19470
- se(i.$slots, "default", {}, () => [
19471
- (P(!0), L(Ae, null, Ve(i.structuredInfo, ({ title: c, description: d }, h) => (P(), L("li", {
19472
- key: `info-${h}`,
19471
+ se(c.$slots, "default", {}, () => [
19472
+ (P(!0), L(Ae, null, Ve(c.structuredInfo, ({ title: h, description: y }, k) => (P(), L("li", {
19473
+ key: `info-${k}`,
19473
19474
  class: oe([
19474
19475
  "mx-4 py-3 text-left",
19475
- h < i.structuredInfo.length - 1 ? "border-b border-b-gray-100" : ""
19476
+ k < c.structuredInfo.length - 1 ? "border-b border-b-gray-100" : ""
19476
19477
  ])
19477
19478
  }, [
19478
- ee("h4", xy, Be(c), 1),
19479
- ee("p", Ty, Be(d), 1)
19479
+ ee("h4", xy, Be(h), 1),
19480
+ ee("p", Ty, Be(y), 1)
19480
19481
  ], 2))), 128))
19481
19482
  ])
19482
19483
  ], 2), [
19483
- [Rr, r.value]
19484
+ [Rr, o.value]
19484
19485
  ])
19485
19486
  ]),
19486
19487
  _: 3
19487
- }, 8, ["leave-to-class", "enter-from-class", "duration"])
19488
+ }, 8, ["enter-active-class", "leave-active-class", "leave-to-class", "enter-from-class"])
19488
19489
  ], 12, _y)) : (P(), L("div", {
19489
19490
  key: 1,
19490
19491
  ref_key: "tooltipElm",
19491
- ref: o,
19492
+ ref: l,
19492
19493
  "data-testid": "tooltip",
19493
- style: nt(O(s)),
19494
- "data-placement": O(l)
19494
+ style: nt(O(i)),
19495
+ "data-placement": O(u)
19495
19496
  }, [
19496
19497
  Ne(sr, {
19497
- "enter-active-class": "transition duration-200",
19498
- "leave-active-class": "transition duration-300",
19498
+ "enter-active-class": r.value,
19499
+ "leave-active-class": a.value,
19499
19500
  "leave-to-class": n.value,
19500
- "enter-from-class": n.value,
19501
- duration: i.animate ? 300 : 0
19501
+ "enter-from-class": n.value
19502
19502
  }, {
19503
19503
  default: Te(() => [
19504
19504
  Ut(ee("div", {
19505
19505
  "data-testid": "tooltipElement",
19506
19506
  class: oe(["flex items-center bg-gray-900 px-2 py-half text-xs leading-5 text-white", [
19507
- i.tooltipClasses,
19508
- i.multilines ? "h-auto max-w-[300px] flex-wrap rounded-2xl " : "h-6 w-max rounded-full"
19507
+ c.tooltipClasses,
19508
+ c.multilines ? "h-auto max-w-[300px] flex-wrap rounded-2xl " : "h-6 w-max rounded-full"
19509
19509
  ]])
19510
19510
  }, [
19511
- se(i.$slots, "default")
19511
+ se(c.$slots, "default")
19512
19512
  ], 2), [
19513
- [Rr, r.value]
19513
+ [Rr, o.value]
19514
19514
  ])
19515
19515
  ]),
19516
19516
  _: 3
19517
- }, 8, ["leave-to-class", "enter-from-class", "duration"])
19517
+ }, 8, ["enter-active-class", "leave-active-class", "leave-to-class", "enter-from-class"])
19518
19518
  ], 12, Sy))
19519
19519
  ], 8, ["disabled"]))
19520
19520
  ]));