do-ui-design-system 1.0.8 → 1.0.10
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/atoms/Badge/Badge.svelte +19 -8
- package/dist/atoms/Badge/Badge.svelte.d.ts +6 -2
- package/dist/atoms/Badge/Badge.svelte.d.ts.map +1 -1
- package/dist/atoms/Badge/iProps.d.ts +2 -0
- package/dist/atoms/Badge/iProps.d.ts.map +1 -1
- package/dist/atoms/Button/Button.svelte +3 -0
- package/dist/atoms/Button/Button.svelte.d.ts +1 -0
- package/dist/atoms/Button/Button.svelte.d.ts.map +1 -1
- package/dist/atoms/Button/iProps.d.ts +1 -0
- package/dist/atoms/Button/iProps.d.ts.map +1 -1
- package/dist/atoms/Counter/Counter.svelte +5 -18
- package/dist/atoms/Counter/Counter.svelte.d.ts +5 -18
- package/dist/atoms/Counter/Counter.svelte.d.ts.map +1 -1
- package/dist/atoms/Counter/iProps.d.ts +0 -1
- package/dist/atoms/Counter/iProps.d.ts.map +1 -1
- package/dist/do-theme/badge.css +28 -0
- package/dist/do-theme/counter.css +0 -28
- package/dist/do-theme/var-dark.css +2 -2
- package/dist/do-theme/var-light.css +2 -0
- package/dist/molecules/CounterBadge/CounterBadge.svelte +8 -10
- package/dist/molecules/CounterBadge/CounterBadge.svelte.d.ts +8 -17
- package/dist/molecules/CounterBadge/CounterBadge.svelte.d.ts.map +1 -1
- package/dist/molecules/CounterBadge/iProps.d.ts +2 -1
- package/dist/molecules/CounterBadge/iProps.d.ts.map +1 -1
- package/dist/molecules/IconButton/IconButton.svelte +4 -1
- package/dist/molecules/IconButton/IconButton.svelte.d.ts +3 -1
- package/dist/molecules/IconButton/IconButton.svelte.d.ts.map +1 -1
- package/dist/molecules/IconButton/iProps.d.ts +1 -0
- package/dist/molecules/IconButton/iProps.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -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
|
-
|
|
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
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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>
|
|
@@ -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
|
-
*
|
|
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
|
}>, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Badge/Badge.svelte.ts"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -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;
|
|
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"}
|
|
@@ -11,11 +11,14 @@
|
|
|
11
11
|
export let circle: iProps['circle'] = false;
|
|
12
12
|
export let customStyles: iProps['customStyles'] = '';
|
|
13
13
|
export let customClass: iProps['class'] = '';
|
|
14
|
+
export let square: iProps['square'] = false;
|
|
14
15
|
|
|
15
16
|
$: borderRadius = circle
|
|
16
17
|
? 'border-radius:24px; padding: 6px; border: none;'
|
|
17
18
|
: rounded
|
|
18
19
|
? 'border-radius:3rem;'
|
|
20
|
+
: square
|
|
21
|
+
? 'border-radius:4px; padding: 8px;'
|
|
19
22
|
: '';
|
|
20
23
|
|
|
21
24
|
$: mergedStyles = `${borderRadius} ${customStyles}`.trim();
|
|
@@ -44,6 +44,7 @@ declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
|
|
|
44
44
|
circle?: boolean | undefined;
|
|
45
45
|
customStyles?: string | undefined;
|
|
46
46
|
customClass?: import("svelte/elements").ClassValue | null | undefined;
|
|
47
|
+
square?: boolean | undefined;
|
|
47
48
|
}, {
|
|
48
49
|
default: {};
|
|
49
50
|
}>, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/Button.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/Button.svelte.ts"],"names":[],"mappings":"AA0CA,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;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;cAA4G,CAAC;AACvG,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,GAAG,oBAAoB,CAAC;IAC7H,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,GAAG,oBAAoB,CAAC;IAC7H,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB"}
|
|
@@ -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}
|
|
9
|
-
<slot />
|
|
10
|
-
</Counter>
|
|
7
|
+
<Counter label={label} />
|
|
11
8
|
```
|
|
12
|
-
- `label?`: string
|
|
13
|
-
|
|
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-
|
|
19
|
-
<
|
|
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>
|
|
@@ -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}
|
|
23
|
-
* <slot />
|
|
24
|
-
* </Counter>
|
|
17
|
+
* <Counter label={label} />
|
|
25
18
|
* ```
|
|
26
|
-
* - `label?`: string
|
|
27
|
-
*
|
|
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
|
|
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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Counter.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Counter/Counter.svelte.ts"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -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;
|
|
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;
|
|
@@ -10,6 +15,29 @@
|
|
|
10
15
|
font-style: normal;
|
|
11
16
|
font-weight: 500;
|
|
12
17
|
line-height: normal;
|
|
18
|
+
white-space: nowrap;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.do-badge-tooltip {
|
|
22
|
+
position: absolute;
|
|
23
|
+
top: 100%;
|
|
24
|
+
left: 0;
|
|
25
|
+
background: var(--do-badge-tooltip-bg);
|
|
26
|
+
color: var(--do-badge-tooltip-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-badge-wrapper:hover .do-badge-tooltip {
|
|
39
|
+
opacity: 1;
|
|
40
|
+
pointer-events: auto;
|
|
13
41
|
}
|
|
14
42
|
|
|
15
43
|
.do-badge-primary {
|
|
@@ -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);
|
|
@@ -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;
|
|
@@ -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;
|
|
@@ -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
|
|
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}
|
|
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
|
-
- `
|
|
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}
|
|
27
|
-
<slot />
|
|
28
|
-
</Counter>
|
|
25
|
+
<Badge label={badgeLabel} customClass={badgeCustomClass} {maxLength} {enableTooltip} {tooltipContent}>
|
|
26
|
+
<Counter label={counterLabel} />
|
|
29
27
|
</Badge>
|
|
@@ -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}
|
|
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
|
-
* - `
|
|
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
|
|
26
|
+
declare const CounterBadge: $$__sveltets_2_IsomorphicComponent<{
|
|
33
27
|
badgeLabel?: string;
|
|
34
28
|
badgeCustomClass?: string;
|
|
35
29
|
counterLabel?: string;
|
|
36
|
-
|
|
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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CounterBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/CounterBadge/CounterBadge.svelte.ts"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -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,
|
|
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"}
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
export let iconPosition: iProps['iconPosition'] = 'end';
|
|
14
14
|
export let rounded: iProps['rounded'] = false;
|
|
15
15
|
export let circle: iProps['circle'] = false;
|
|
16
|
+
export let square: iProps['square'] = false;
|
|
16
17
|
export let btnCustomClass: iProps['btnCustomClass'] = '';
|
|
17
18
|
export let iCustomClass: iProps['iCustomClass'] = '';
|
|
18
19
|
export let btnCustomStyles: iProps['btnCustomStyles'] = '';
|
|
@@ -33,7 +34,8 @@
|
|
|
33
34
|
- `iconSize?`: rem units
|
|
34
35
|
- `iconColor?`: hex units #000
|
|
35
36
|
- `iconPosition?`: 'start' | 'end'
|
|
36
|
-
- `circle?`: boolean
|
|
37
|
+
- `circle?`: boolean - custom padding for icon only button
|
|
38
|
+
- `square?`: boolean - custom padding for icon only button
|
|
37
39
|
- `btnCustomClass?`: string
|
|
38
40
|
- `iCustomClass?`: string
|
|
39
41
|
- `btnCustomStyles?`: any CSS style
|
|
@@ -48,6 +50,7 @@
|
|
|
48
50
|
{disabled}
|
|
49
51
|
{rounded}
|
|
50
52
|
{circle}
|
|
53
|
+
{square}
|
|
51
54
|
customClass={btnCustomClass}
|
|
52
55
|
customStyles={btnCustomStyles}
|
|
53
56
|
on:click
|
|
@@ -26,7 +26,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
26
26
|
* - `iconSize?`: rem units
|
|
27
27
|
* - `iconColor?`: hex units #000
|
|
28
28
|
* - `iconPosition?`: 'start' | 'end'
|
|
29
|
-
* - `circle?`: boolean
|
|
29
|
+
* - `circle?`: boolean - custom padding for icon only button
|
|
30
|
+
* - `square?`: boolean - custom padding for icon only button
|
|
30
31
|
* - `btnCustomClass?`: string
|
|
31
32
|
* - `iCustomClass?`: string
|
|
32
33
|
* - `btnCustomStyles?`: any CSS style
|
|
@@ -46,6 +47,7 @@ declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
|
|
|
46
47
|
iconPosition?: "start" | "end" | undefined;
|
|
47
48
|
rounded?: boolean | undefined;
|
|
48
49
|
circle?: boolean | undefined;
|
|
50
|
+
square?: boolean | undefined;
|
|
49
51
|
btnCustomClass?: string | undefined;
|
|
50
52
|
iCustomClass?: string | undefined;
|
|
51
53
|
btnCustomStyles?: string | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/IconButton.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/IconButton.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAyC1C,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;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,UAAU;;;;;;;eAhCkgB,MAAM,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;kBAgC9a,CAAC;AACrG,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,CAAC;IACtG,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB"}
|
|
1
|
+
{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,CAAC;IACtG,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB"}
|