do-ui-design-system 1.0.8 → 1.0.9

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 (20) hide show
  1. package/dist/atoms/Badge/Badge.svelte +19 -8
  2. package/dist/atoms/Badge/Badge.svelte.d.ts +6 -2
  3. package/dist/atoms/Badge/Badge.svelte.d.ts.map +1 -1
  4. package/dist/atoms/Badge/iProps.d.ts +2 -0
  5. package/dist/atoms/Badge/iProps.d.ts.map +1 -1
  6. package/dist/atoms/Counter/Counter.svelte +5 -18
  7. package/dist/atoms/Counter/Counter.svelte.d.ts +5 -18
  8. package/dist/atoms/Counter/Counter.svelte.d.ts.map +1 -1
  9. package/dist/atoms/Counter/iProps.d.ts +0 -1
  10. package/dist/atoms/Counter/iProps.d.ts.map +1 -1
  11. package/dist/do-theme/badge.css +27 -0
  12. package/dist/do-theme/counter.css +0 -28
  13. package/dist/do-theme/var-dark.css +2 -2
  14. package/dist/do-theme/var-light.css +2 -0
  15. package/dist/molecules/CounterBadge/CounterBadge.svelte +8 -10
  16. package/dist/molecules/CounterBadge/CounterBadge.svelte.d.ts +8 -17
  17. package/dist/molecules/CounterBadge/CounterBadge.svelte.d.ts.map +1 -1
  18. package/dist/molecules/CounterBadge/iProps.d.ts +2 -1
  19. package/dist/molecules/CounterBadge/iProps.d.ts.map +1 -1
  20. package/package.json +1 -1
package/dist/atoms/Badge/Badge.svelte CHANGED
@@ -2,26 +2,37 @@
2
2
  export let label: string = 'Texto';
3
3
  export let maxLength: number | null = null;
4
4
  export let customClass: string = '';
5
+ export let enableTooltip: boolean = false;
6
+ export let tooltipContent: string = '';
5
7
 
6
8
  $: displayedText =
7
9
  maxLength && label.length > maxLength ? label.slice(0, maxLength) + '…' : label;
8
10
  $: isTruncated = maxLength && label.length > maxLength;
9
11
  </script>
12
+
10
13
  <!-- @component Badge
11
14
  ```Svelte
12
- <Badge label={label} maxLength={maxLength} customClass={customClass}>
15
+ <Badge label={label} maxLength={maxLength} customClass={customClass} enableTooltip={enableTooltip} tooltipContent={tooltipContent}>
13
16
  <slot />
14
17
  </Badge>
15
18
  ```
16
19
  - `label?`: string
17
20
  - `maxLength?`: number | null - max length of the text, if exceeded it will be truncated and "…" will be added
18
- - `customClass?`: string - additional custom class for styling
21
+ - `customClass?`: string - additional custom class for styling
22
+ - `enableTooltip?`: boolean - if true, the tooltipContent content will be displayed
23
+ - `tooltipContent?`: any HTML content. The display will be triggered while hovering over the component
19
24
 
20
25
  -->
21
-
22
- <div class={`do-badge do-badge-primary ${customClass}`} {...isTruncated ? { title: label } : {}}>
23
- <span>
24
- {displayedText}
25
- </span>
26
- <slot />
26
+ <div class="do-badge-wrapper">
27
+ <div class={`do-badge do-badge-primary ${customClass}`} {...isTruncated ? { title: label } : {}}>
28
+ <span>
29
+ {displayedText}
30
+ </span>
31
+ <slot />
32
+ {#if enableTooltip}
33
+ <div class="do-badge-tooltip">
34
+ {@html tooltipContent}
35
+ </div>
36
+ {/if}
37
+ </div>
27
38
  </div>
package/dist/atoms/Badge/Badge.svelte.d.ts CHANGED
@@ -19,18 +19,22 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
19
19
  /**
20
20
  * Badge
21
21
  * ```Svelte
22
- * <Badge label={label} maxLength={maxLength} customClass={customClass}>
22
+ * <Badge label={label} maxLength={maxLength} customClass={customClass} enableTooltip={enableTooltip} tooltipContent={tooltipContent}>
23
23
  * <slot />
24
24
  * </Badge>
25
25
  * ```
26
26
  * - `label?`: string
27
27
  * - `maxLength?`: number | null - max length of the text, if exceeded it will be truncated and "…" will be added
28
- * - `customClass?`: string - additional custom class for styling
28
+ * - `customClass?`: string - additional custom class for styling
29
+ * - `enableTooltip?`: boolean - if true, the tooltipContent content will be displayed
30
+ * - `tooltipContent?`: any HTML content. The display will be triggered while hovering over the component
29
31
  */
30
32
  declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
31
33
  label?: string;
32
34
  maxLength?: number | null;
33
35
  customClass?: string;
36
+ enableTooltip?: boolean;
37
+ tooltipContent?: string;
34
38
  }, {
35
39
  default: {};
36
40
  }>, {
package/dist/atoms/Badge/Badge.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Badge/Badge.svelte.ts"],"names":[],"mappings":"AAuBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK;YA1BkF,MAAM;gBAAc,MAAM,GAAG,IAAI;kBAAgB,MAAM;;;;;;;cA0BpD,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Badge/Badge.svelte.ts"],"names":[],"mappings":"AAgCA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,KAAK;YA5BkJ,MAAM;gBAAc,MAAM,GAAG,IAAI;kBAAgB,MAAM;oBAAkB,OAAO;qBAAmB,MAAM;;;;;;;cA4BtK,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
package/dist/atoms/Badge/iProps.d.ts CHANGED
@@ -2,5 +2,7 @@ export interface iProps {
2
2
  label: string;
3
3
  maxLength: number | null | undefined;
4
4
  customClass?: string;
5
+ enableTooltip?: boolean;
6
+ tooltipContent?: string;
5
7
  }
6
8
  //# sourceMappingURL=iProps.d.ts.map
package/dist/atoms/Badge/iProps.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Badge/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB"}
1
+ {"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Badge/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB"}
package/dist/atoms/Counter/Counter.svelte CHANGED
@@ -1,28 +1,15 @@
1
1
  <script lang="ts">
2
2
  export let label: string = '10';
3
- export let tooltipContent: boolean = false;
4
3
  </script>
5
4
 
6
5
  <!-- @component Counter
7
6
  ```Svelte
8
- <Counter label={label} tooltipContent={tooltipContent}>
9
- <slot />
10
- </Counter>
7
+ <Counter label={label} />
11
8
  ```
12
- - `label?`: string
13
- - `tooltipContent?`: boolean
14
- - *If `tooltipContent` is true, the slot content will be displayed in a tooltip, which receives any HTML content related to the counted elements to display while hovering
15
-
9
+ - `label?`: string - the text to display in the counter
10
+ - *If `label` is not provided, it defaults to '10'
16
11
  -->
17
12
 
18
- <div class="do-counter-wrapper">
19
- <div class="do-counter do-counter-primary">
20
- <span>{label}</span>
21
- </div>
22
-
23
- {#if tooltipContent}
24
- <div class="do-counter-tooltip">
25
- <slot />
26
- </div>
27
- {/if}
13
+ <div class="do-counter do-counter-primary">
14
+ <span>{label}</span>
28
15
  </div>
package/dist/atoms/Counter/Counter.svelte.d.ts CHANGED
@@ -11,32 +11,19 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
11
11
  };
12
12
  z_$$bindings?: Bindings;
13
13
  }
14
- type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
15
- default: any;
16
- } ? Props extends Record<string, never> ? any : {
17
- children?: any;
18
- } : {});
19
14
  /**
20
15
  * Counter
21
16
  * ```Svelte
22
- * <Counter label={label} tooltipContent={tooltipContent}>
23
- * <slot />
24
- * </Counter>
17
+ * <Counter label={label} />
25
18
  * ```
26
- * - `label?`: string
27
- * - `tooltipContent?`: boolean
28
- * - *If `tooltipContent` is true, the slot content will be displayed in a tooltip, which receives any HTML content related to the counted elements to display while hovering
19
+ * - `label?`: string - the text to display in the counter
20
+ * - *If `label` is not provided, it defaults to '10'
29
21
  */
30
- declare const Counter: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
22
+ declare const Counter: $$__sveltets_2_IsomorphicComponent<{
31
23
  label?: string;
32
- tooltipContent?: boolean;
33
24
  }, {
34
- default: {};
35
- }>, {
36
25
  [evt: string]: CustomEvent<any>;
37
- }, {
38
- default: {};
39
- }, {}, string>;
26
+ }, {}, {}, string>;
40
27
  type Counter = InstanceType<typeof Counter>;
41
28
  export default Counter;
42
29
  //# sourceMappingURL=Counter.svelte.d.ts.map
package/dist/atoms/Counter/Counter.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Counter.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Counter/Counter.svelte.ts"],"names":[],"mappings":"AAwBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;GAUG;AACH,QAAA,MAAM,OAAO;YA1B+D,MAAM;qBAAmB,OAAO;;;;;;;cA0BV,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Counter.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Counter/Counter.svelte.ts"],"names":[],"mappings":"AAeA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD;;;;;;;GAOG;AACH,QAAA,MAAM,OAAO;YAlB8B,MAAM;;;kBAkB2C,CAAC;AAC3E,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
package/dist/atoms/Counter/iProps.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  export interface iProps {
2
2
  label: string;
3
- tooltipContent?: boolean;
4
3
  }
5
4
  //# sourceMappingURL=iProps.d.ts.map
package/dist/atoms/Counter/iProps.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Counter/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB"}
1
+ {"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Counter/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,KAAK,EAAE,MAAM,CAAC;CACd"}
package/dist/do-theme/badge.css CHANGED
@@ -1,3 +1,8 @@
1
+ .do-badge-wrapper {
2
+ position: relative;
3
+ display: inline-block;
4
+ }
5
+
1
6
  .do-badge {
2
7
  display: inline-flex;
3
8
  padding: 6px 10px;
@@ -12,6 +17,28 @@
12
17
  line-height: normal;
13
18
  }
14
19
 
20
+ .do-badge-tooltip {
21
+ position: absolute;
22
+ top: 100%;
23
+ left: 0;
24
+ background: var(--do-badge-tooltip-bg);
25
+ color: var(--do-badge-tooltip-content);
26
+ font-size: 12px;
27
+ padding: 4px 8px;
28
+ border-radius: 4px;
29
+ white-space: nowrap;
30
+ margin-top: 4px;
31
+ opacity: 0;
32
+ pointer-events: none;
33
+ transition: opacity 0.2s ease-in-out;
34
+ z-index: 10;
35
+ }
36
+
37
+ .do-badge-wrapper:hover .do-badge-tooltip {
38
+ opacity: 1;
39
+ pointer-events: auto;
40
+ }
41
+
15
42
  .do-badge-primary {
16
43
  color: var(--do-badge-primary-content);
17
44
  border-color: var(--do-badge-primary-border);
package/dist/do-theme/counter.css CHANGED
@@ -1,8 +1,3 @@
1
- .do-counter-wrapper {
2
- position: relative;
3
- display: inline-block;
4
- }
5
-
6
1
  .do-counter {
7
2
  display: inline-flex;
8
3
  padding: 2px 3px;
@@ -17,29 +12,6 @@
17
12
  align-self: stretch;
18
13
  }
19
14
 
20
- .do-counter-tooltip {
21
- position: absolute;
22
- top: 100%;
23
- left: 0;
24
- /* transform: translateX(-50%); */
25
- background: var(--do-counter-primary-bg);
26
- color: var(--do-counter-primary-content);
27
- font-size: 12px;
28
- padding: 4px 8px;
29
- border-radius: 4px;
30
- white-space: nowrap;
31
- margin-top: 4px;
32
- opacity: 0;
33
- pointer-events: none;
34
- transition: opacity 0.2s ease-in-out;
35
- z-index: 10;
36
- }
37
-
38
- .do-counter-wrapper:hover .do-counter-tooltip {
39
- opacity: 1;
40
- pointer-events: auto;
41
- }
42
-
43
15
  .do-counter-primary {
44
16
  color: var(--do-counter-primary-content);
45
17
  background-color: var(--do-counter-primary-bg);
package/dist/do-theme/var-dark.css CHANGED
@@ -52,12 +52,12 @@
52
52
  --do-badge-primary-hover-content: #FAFAFA;
53
53
  --do-badge-primary-hover-bg: #27272A;
54
54
  --do-badge-primary-border: #71717A;
55
+ --do-badge-tooltip-content:#FAFAFA;
56
+ --do-badge-tooltip-bg:#71717A;
55
57
 
56
58
  /*counter colors*/
57
59
  --do-counter-primary-content:#FAFAFA;
58
60
  --do-counter-primary-bg:#71717A;
59
-
60
-
61
61
 
62
62
  /* base sizes */
63
63
  --size-selector: 0.25rem;
package/dist/do-theme/var-light.css CHANGED
@@ -55,6 +55,8 @@
55
55
  --do-badge-primary-hover-content:#FAFAFA;
56
56
  --do-badge-primary-hover-bg: #52525B;
57
57
  --do-badge-primary-border: #A3A3A3;
58
+ --do-badge-tooltip-content: #3F3F46;
59
+ --do-badge-tooltip-bg: #D4D4D8;
58
60
 
59
61
  /*counter colors*/
60
62
  --do-counter-primary-content: #3F3F46;
package/dist/molecules/CounterBadge/CounterBadge.svelte CHANGED
@@ -5,25 +5,23 @@
5
5
  export let badgeLabel: string = 'Texto';
6
6
  export let badgeCustomClass: string = '';
7
7
  export let counterLabel: string = '10';
8
- export let counterTooltip: boolean = false;
8
+ export let enableTooltip: boolean = false;
9
9
  export let maxLength: number | null = null;
10
+ export let tooltipContent: string = '';
10
11
  </script>
11
12
 
12
13
  <!-- @component CounterBadge
13
14
  ```Svelte
14
- <CounterBadge badgeLabel={badgeLabel} badgeCustomClass={badgeCustomClass} counterTooltip={counterTooltip} maxLength={maxLength} counterLabel={counterLabel}>
15
- <slot />
16
- </CounterBadge>
15
+ <CounterBadge badgeLabel={badgeLabel} counterLabel={counterLabel} badgeCustomClass={badgeCustomClass} enableTooltip={enableTooltip} maxLength={maxLength} tooltipContent={tooltipContent} />
17
16
  ```
17
+ - `badgeLabel?`: string
18
18
  - `counterLabel?`: string
19
- - `badgeLabel?`: string
20
19
  - `badgeCustomClass?`: string - additional custom class for styling
21
20
  - `maxLength?`: number | null - max length of the text, if exceeded it will be truncated and "…" will be added
22
- - `counterTooltip?`: boolean - if true, the slot content will be displayed in a tooltip, which receives any HTML content related to the counted elements to display while hovering
21
+ - `enableTooltip?`: boolean - if true, the tooltipContent content will be displayed
22
+ - `tooltipContent?`: any HTML content related to the counted elements to display while hovering
23
23
  -->
24
24
 
25
- <Badge label={badgeLabel} customClass={badgeCustomClass} {maxLength}>
26
- <Counter label={counterLabel} tooltipContent={counterTooltip}>
27
- <slot />
28
- </Counter>
25
+ <Badge label={badgeLabel} customClass={badgeCustomClass} {maxLength} {enableTooltip} {tooltipContent}>
26
+ <Counter label={counterLabel} />
29
27
  </Badge>
package/dist/molecules/CounterBadge/CounterBadge.svelte.d.ts CHANGED
@@ -11,37 +11,28 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
11
11
  };
12
12
  z_$$bindings?: Bindings;
13
13
  }
14
- type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
15
- default: any;
16
- } ? Props extends Record<string, never> ? any : {
17
- children?: any;
18
- } : {});
19
14
  /**
20
15
  * CounterBadge
21
16
  * ```Svelte
22
- * <CounterBadge badgeLabel={badgeLabel} badgeCustomClass={badgeCustomClass} counterTooltip={counterTooltip} maxLength={maxLength} counterLabel={counterLabel}>
23
- * <slot />
24
- * </CounterBadge>
17
+ * <CounterBadge badgeLabel={badgeLabel} counterLabel={counterLabel} badgeCustomClass={badgeCustomClass} enableTooltip={enableTooltip} maxLength={maxLength} tooltipContent={tooltipContent} />
25
18
  * ```
19
+ * - `badgeLabel?`: string
26
20
  * - `counterLabel?`: string
27
- * - `badgeLabel?`: string
28
21
  * - `badgeCustomClass?`: string - additional custom class for styling
29
22
  * - `maxLength?`: number | null - max length of the text, if exceeded it will be truncated and "…" will be added
30
- * - `counterTooltip?`: boolean - if true, the slot content will be displayed in a tooltip, which receives any HTML content related to the counted elements to display while hovering
23
+ * - `enableTooltip?`: boolean - if true, the tooltipContent content will be displayed
24
+ * - `tooltipContent?`: any HTML content related to the counted elements to display while hovering
31
25
  */
32
- declare const CounterBadge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
26
+ declare const CounterBadge: $$__sveltets_2_IsomorphicComponent<{
33
27
  badgeLabel?: string;
34
28
  badgeCustomClass?: string;
35
29
  counterLabel?: string;
36
- counterTooltip?: boolean;
30
+ enableTooltip?: boolean;
37
31
  maxLength?: number | null;
32
+ tooltipContent?: string;
38
33
  }, {
39
- default: {};
40
- }>, {
41
34
  [evt: string]: CustomEvent<any>;
42
- }, {
43
- default: {};
44
- }, {}, string>;
35
+ }, {}, {}, string>;
45
36
  type CounterBadge = InstanceType<typeof CounterBadge>;
46
37
  export default CounterBadge;
47
38
  //# sourceMappingURL=CounterBadge.svelte.d.ts.map
package/dist/molecules/CounterBadge/CounterBadge.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CounterBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/CounterBadge/CounterBadge.svelte.ts"],"names":[],"mappings":"AA2BA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,YAAY;iBA5BkK,MAAM;uBAAqB,MAAM;mBAAiB,MAAM;qBAAmB,OAAO;gBAAc,MAAM,GAAG,IAAI;;;;;;;cA4B1L,CAAC;AACtF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"CounterBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/CounterBadge/CounterBadge.svelte.ts"],"names":[],"mappings":"AA0BA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,YAAY;iBAtBiM,MAAM;uBAAqB,MAAM;mBAAiB,MAAM;oBAAkB,OAAO;gBAAc,MAAM,GAAG,IAAI;qBAAmB,MAAM;;;kBAsBvP,CAAC;AAChF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}
package/dist/molecules/CounterBadge/iProps.d.ts CHANGED
@@ -2,7 +2,8 @@ export interface iProps {
2
2
  badgeLabel: string;
3
3
  badgeCustomClass: string;
4
4
  counterLabel: string;
5
- counterTooltip: boolean;
5
+ enableTooltip: boolean;
6
6
  maxLength: number | null | undefined;
7
+ tooltipContent?: string;
7
8
  }
8
9
  //# sourceMappingURL=iProps.d.ts.map
package/dist/molecules/CounterBadge/iProps.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/CounterBadge/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACrC"}
1
+ {"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/CounterBadge/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "do-ui-design-system",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "description": "Design system en Svelte + CSS + Storybook",
5
5
  "author": "Data Observatory",
6
6
  "license": "MIT",