do-ui-design-system 1.0.7 → 1.0.8
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 +27 -0
- package/dist/atoms/Badge/Badge.svelte.d.ts +43 -0
- package/dist/atoms/Badge/Badge.svelte.d.ts.map +1 -0
- package/dist/atoms/Badge/iProps.d.ts +6 -0
- package/dist/atoms/Badge/iProps.d.ts.map +1 -0
- package/dist/atoms/Badge/iProps.js +1 -0
- package/dist/atoms/Counter/Counter.svelte +28 -0
- package/dist/atoms/Counter/Counter.svelte.d.ts +42 -0
- package/dist/atoms/Counter/Counter.svelte.d.ts.map +1 -0
- package/dist/atoms/Counter/iProps.d.ts +5 -0
- package/dist/atoms/Counter/iProps.d.ts.map +1 -0
- package/dist/atoms/Counter/iProps.js +1 -0
- package/dist/atoms/index.d.ts +3 -1
- package/dist/atoms/index.d.ts.map +1 -1
- package/dist/atoms/index.js +3 -1
- package/dist/do-theme/badge.css +26 -0
- package/dist/do-theme/counter.css +46 -0
- package/dist/do-theme/index.css +2 -0
- package/dist/do-theme/var-dark.css +11 -0
- package/dist/do-theme/var-light.css +11 -0
- package/dist/index.d.ts +3 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -3
- package/dist/molecules/CounterBadge/CounterBadge.svelte +29 -0
- package/dist/molecules/CounterBadge/CounterBadge.svelte.d.ts +47 -0
- package/dist/molecules/CounterBadge/CounterBadge.svelte.d.ts.map +1 -0
- package/dist/molecules/CounterBadge/iProps.d.ts +8 -0
- package/dist/molecules/CounterBadge/iProps.d.ts.map +1 -0
- package/dist/molecules/CounterBadge/iProps.js +1 -0
- package/dist/molecules/index.d.ts +2 -2
- package/dist/molecules/index.d.ts.map +1 -1
- package/dist/molecules/index.js +3 -2
- package/package.json +1 -1
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
export let label: string = 'Texto';
|
|
3
|
+
export let maxLength: number | null = null;
|
|
4
|
+
export let customClass: string = '';
|
|
5
|
+
|
|
6
|
+
$: displayedText =
|
|
7
|
+
maxLength && label.length > maxLength ? label.slice(0, maxLength) + '…' : label;
|
|
8
|
+
$: isTruncated = maxLength && label.length > maxLength;
|
|
9
|
+
</script>
|
|
10
|
+
<!-- @component Badge
|
|
11
|
+
```Svelte
|
|
12
|
+
<Badge label={label} maxLength={maxLength} customClass={customClass}>
|
|
13
|
+
<slot />
|
|
14
|
+
</Badge>
|
|
15
|
+
```
|
|
16
|
+
- `label?`: string
|
|
17
|
+
- `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
|
|
19
|
+
|
|
20
|
+
-->
|
|
21
|
+
|
|
22
|
+
<div class={`do-badge do-badge-primary ${customClass}`} {...isTruncated ? { title: label } : {}}>
|
|
23
|
+
<span>
|
|
24
|
+
{displayedText}
|
|
25
|
+
</span>
|
|
26
|
+
<slot />
|
|
27
|
+
</div>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: Props & {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
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
|
+
/**
|
|
20
|
+
* Badge
|
|
21
|
+
* ```Svelte
|
|
22
|
+
* <Badge label={label} maxLength={maxLength} customClass={customClass}>
|
|
23
|
+
* <slot />
|
|
24
|
+
* </Badge>
|
|
25
|
+
* ```
|
|
26
|
+
* - `label?`: string
|
|
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
|
|
29
|
+
*/
|
|
30
|
+
declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
|
|
31
|
+
label?: string;
|
|
32
|
+
maxLength?: number | null;
|
|
33
|
+
customClass?: string;
|
|
34
|
+
}, {
|
|
35
|
+
default: {};
|
|
36
|
+
}>, {
|
|
37
|
+
[evt: string]: CustomEvent<any>;
|
|
38
|
+
}, {
|
|
39
|
+
default: {};
|
|
40
|
+
}, {}, string>;
|
|
41
|
+
type Badge = InstanceType<typeof Badge>;
|
|
42
|
+
export default Badge;
|
|
43
|
+
//# sourceMappingURL=Badge.svelte.d.ts.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
export let label: string = '10';
|
|
3
|
+
export let tooltipContent: boolean = false;
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<!-- @component Counter
|
|
7
|
+
```Svelte
|
|
8
|
+
<Counter label={label} tooltipContent={tooltipContent}>
|
|
9
|
+
<slot />
|
|
10
|
+
</Counter>
|
|
11
|
+
```
|
|
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
|
+
|
|
16
|
+
-->
|
|
17
|
+
|
|
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}
|
|
28
|
+
</div>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: Props & {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
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
|
+
/**
|
|
20
|
+
* Counter
|
|
21
|
+
* ```Svelte
|
|
22
|
+
* <Counter label={label} tooltipContent={tooltipContent}>
|
|
23
|
+
* <slot />
|
|
24
|
+
* </Counter>
|
|
25
|
+
* ```
|
|
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
|
|
29
|
+
*/
|
|
30
|
+
declare const Counter: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
|
|
31
|
+
label?: string;
|
|
32
|
+
tooltipContent?: boolean;
|
|
33
|
+
}, {
|
|
34
|
+
default: {};
|
|
35
|
+
}>, {
|
|
36
|
+
[evt: string]: CustomEvent<any>;
|
|
37
|
+
}, {
|
|
38
|
+
default: {};
|
|
39
|
+
}, {}, string>;
|
|
40
|
+
type Counter = InstanceType<typeof Counter>;
|
|
41
|
+
export default Counter;
|
|
42
|
+
//# sourceMappingURL=Counter.svelte.d.ts.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/atoms/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import Button from "./Button/Button.svelte";
|
|
2
2
|
import Icon from "./Icons/Icon.svelte";
|
|
3
|
-
|
|
3
|
+
import Badge from "./Badge/Badge.svelte";
|
|
4
|
+
import Counter from "./Counter/Counter.svelte";
|
|
5
|
+
export { Button, Icon, Badge, Counter };
|
|
4
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,IAAI,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,KAAK,MAAM,sBAAsB,CAAC;AACzC,OAAO,OAAO,MAAM,0BAA0B,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC"}
|
package/dist/atoms/index.js
CHANGED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
.do-badge {
|
|
2
|
+
display: inline-flex;
|
|
3
|
+
padding: 6px 10px;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
align-items: center;
|
|
6
|
+
border: 1px solid;
|
|
7
|
+
gap: 4px;
|
|
8
|
+
border-radius: 24px;
|
|
9
|
+
font-size: 12px;
|
|
10
|
+
font-style: normal;
|
|
11
|
+
font-weight: 500;
|
|
12
|
+
line-height: normal;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.do-badge-primary {
|
|
16
|
+
color: var(--do-badge-primary-content);
|
|
17
|
+
border-color: var(--do-badge-primary-border);
|
|
18
|
+
background-color: var(--do-badge-primary-bg);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.do-badge-primary:hover,
|
|
22
|
+
.do-badge-primary:focus {
|
|
23
|
+
color: var(--do-badge-primary-hover-content);
|
|
24
|
+
border-color: var(--do-badge-primary-border);
|
|
25
|
+
background-color: var(--do-badge-primary-hover-bg);
|
|
26
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
.do-counter-wrapper {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: inline-block;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.do-counter {
|
|
7
|
+
display: inline-flex;
|
|
8
|
+
padding: 2px 3px;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
align-items: center;
|
|
12
|
+
border-radius: 48px;
|
|
13
|
+
font-size: 12px;
|
|
14
|
+
font-style: normal;
|
|
15
|
+
font-weight: 400;
|
|
16
|
+
line-height: normal;
|
|
17
|
+
align-self: stretch;
|
|
18
|
+
}
|
|
19
|
+
|
|
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
|
+
.do-counter-primary {
|
|
44
|
+
color: var(--do-counter-primary-content);
|
|
45
|
+
background-color: var(--do-counter-primary-bg);
|
|
46
|
+
}
|
package/dist/do-theme/index.css
CHANGED
|
@@ -46,6 +46,17 @@
|
|
|
46
46
|
--do-chip-content-hover: #FAFAFA;
|
|
47
47
|
--do-chip-bg-hover: #27272A;
|
|
48
48
|
|
|
49
|
+
/*badge colors*/
|
|
50
|
+
--do-badge-primary-content: #FAFAFA;
|
|
51
|
+
--do-badge-primary-bg: #52525B;
|
|
52
|
+
--do-badge-primary-hover-content: #FAFAFA;
|
|
53
|
+
--do-badge-primary-hover-bg: #27272A;
|
|
54
|
+
--do-badge-primary-border: #71717A;
|
|
55
|
+
|
|
56
|
+
/*counter colors*/
|
|
57
|
+
--do-counter-primary-content:#FAFAFA;
|
|
58
|
+
--do-counter-primary-bg:#71717A;
|
|
59
|
+
|
|
49
60
|
|
|
50
61
|
|
|
51
62
|
/* base sizes */
|
|
@@ -49,6 +49,17 @@
|
|
|
49
49
|
--do-chip-content-hover: #fafafa;
|
|
50
50
|
--do-chip-bg-hover: #27272a;
|
|
51
51
|
|
|
52
|
+
/*badge colors*/
|
|
53
|
+
--do-badge-primary-content: #3F3F46;
|
|
54
|
+
--do-badge-primary-bg: #FAFAFA;
|
|
55
|
+
--do-badge-primary-hover-content:#FAFAFA;
|
|
56
|
+
--do-badge-primary-hover-bg: #52525B;
|
|
57
|
+
--do-badge-primary-border: #A3A3A3;
|
|
58
|
+
|
|
59
|
+
/*counter colors*/
|
|
60
|
+
--do-counter-primary-content: #3F3F46;
|
|
61
|
+
--do-counter-primary-bg: #D4D4D8;
|
|
62
|
+
|
|
52
63
|
/* base sizes */
|
|
53
64
|
--size-selector: 0.25rem;
|
|
54
65
|
--size-field: 0.25rem;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Button, Icon } from './atoms/index.js';
|
|
2
|
-
import { IconButton,
|
|
3
|
-
export { Button, Icon, IconButton,
|
|
1
|
+
import { Button, Icon, Counter, Badge } from './atoms/index.js';
|
|
2
|
+
import { IconButton, CounterBadge } from './molecules/index.js';
|
|
3
|
+
export { Button, Icon, Counter, Badge, IconButton, CounterBadge };
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAE9D,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAC,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { Button, Icon } from './atoms/index.js';
|
|
2
|
-
import { IconButton,
|
|
3
|
-
export { Button, Icon, IconButton,
|
|
1
|
+
import { Button, Icon, Counter, Badge } from './atoms/index.js';
|
|
2
|
+
import { IconButton, CounterBadge } from './molecules/index.js';
|
|
3
|
+
export { Button, Icon, Counter, Badge, IconButton, CounterBadge };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Badge from '../../atoms/Badge/Badge.svelte';
|
|
3
|
+
import Counter from '../../atoms/Counter/Counter.svelte';
|
|
4
|
+
|
|
5
|
+
export let badgeLabel: string = 'Texto';
|
|
6
|
+
export let badgeCustomClass: string = '';
|
|
7
|
+
export let counterLabel: string = '10';
|
|
8
|
+
export let counterTooltip: boolean = false;
|
|
9
|
+
export let maxLength: number | null = null;
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<!-- @component CounterBadge
|
|
13
|
+
```Svelte
|
|
14
|
+
<CounterBadge badgeLabel={badgeLabel} badgeCustomClass={badgeCustomClass} counterTooltip={counterTooltip} maxLength={maxLength} counterLabel={counterLabel}>
|
|
15
|
+
<slot />
|
|
16
|
+
</CounterBadge>
|
|
17
|
+
```
|
|
18
|
+
- `counterLabel?`: string
|
|
19
|
+
- `badgeLabel?`: string
|
|
20
|
+
- `badgeCustomClass?`: string - additional custom class for styling
|
|
21
|
+
- `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
|
|
23
|
+
-->
|
|
24
|
+
|
|
25
|
+
<Badge label={badgeLabel} customClass={badgeCustomClass} {maxLength}>
|
|
26
|
+
<Counter label={counterLabel} tooltipContent={counterTooltip}>
|
|
27
|
+
<slot />
|
|
28
|
+
</Counter>
|
|
29
|
+
</Badge>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: Props & {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
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
|
+
/**
|
|
20
|
+
* CounterBadge
|
|
21
|
+
* ```Svelte
|
|
22
|
+
* <CounterBadge badgeLabel={badgeLabel} badgeCustomClass={badgeCustomClass} counterTooltip={counterTooltip} maxLength={maxLength} counterLabel={counterLabel}>
|
|
23
|
+
* <slot />
|
|
24
|
+
* </CounterBadge>
|
|
25
|
+
* ```
|
|
26
|
+
* - `counterLabel?`: string
|
|
27
|
+
* - `badgeLabel?`: string
|
|
28
|
+
* - `badgeCustomClass?`: string - additional custom class for styling
|
|
29
|
+
* - `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
|
|
31
|
+
*/
|
|
32
|
+
declare const CounterBadge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
|
|
33
|
+
badgeLabel?: string;
|
|
34
|
+
badgeCustomClass?: string;
|
|
35
|
+
counterLabel?: string;
|
|
36
|
+
counterTooltip?: boolean;
|
|
37
|
+
maxLength?: number | null;
|
|
38
|
+
}, {
|
|
39
|
+
default: {};
|
|
40
|
+
}>, {
|
|
41
|
+
[evt: string]: CustomEvent<any>;
|
|
42
|
+
}, {
|
|
43
|
+
default: {};
|
|
44
|
+
}, {}, string>;
|
|
45
|
+
type CounterBadge = InstanceType<typeof CounterBadge>;
|
|
46
|
+
export default CounterBadge;
|
|
47
|
+
//# sourceMappingURL=CounterBadge.svelte.d.ts.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import IconButton from "./IconButton/IconButton.svelte";
|
|
2
|
-
import
|
|
3
|
-
export { IconButton,
|
|
2
|
+
import CounterBadge from "./CounterBadge/CounterBadge.svelte";
|
|
3
|
+
export { IconButton, CounterBadge };
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAExD,OAAO,YAAY,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC"}
|
package/dist/molecules/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import IconButton from "./IconButton/IconButton.svelte";
|
|
2
|
-
import ActionChip from "./ActionChip/ActionChip.svelte";
|
|
3
|
-
|
|
2
|
+
// import ActionChip from "./ActionChip/ActionChip.svelte"; //agregar cuando se implemente en el figma del ds
|
|
3
|
+
import CounterBadge from "./CounterBadge/CounterBadge.svelte";
|
|
4
|
+
export { IconButton, CounterBadge };
|