ads-nuxt 0.1.1 → 0.1.2
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/LICENSE +21 -21
- package/README.md +567 -546
- package/app/app.config.ts +25 -25
- package/app/assets/ads/checkbox-check.svg +5 -5
- package/app/assets/ads/checkbox-minus.svg +5 -5
- package/app/assets/brand/farmarcas.svg +6 -6
- package/app/assets/brand/radar.svg +9 -9
- package/app/assets/css/component-tokens.css +403 -403
- package/app/assets/css/main.css +617 -617
- package/app/components/AdsBadge.vue +48 -48
- package/app/components/AdsBroadcast.vue +45 -45
- package/app/components/AdsButton.vue +569 -569
- package/app/components/AdsButtonGroup.vue +39 -39
- package/app/components/AdsButtonMenu.vue +48 -48
- package/app/components/AdsCard.vue +117 -117
- package/app/components/AdsCharttip.vue +78 -78
- package/app/components/AdsCheckbox.vue +77 -77
- package/app/components/AdsDatePicker.vue +473 -473
- package/app/components/AdsDropdownMenu.vue +19 -19
- package/app/components/AdsEmptyState.vue +58 -58
- package/app/components/AdsFarmarcasPill.vue +74 -74
- package/app/components/AdsFeatureCard.vue +217 -217
- package/app/components/AdsFileCard.vue +101 -101
- package/app/components/AdsFilterDropdown.vue +174 -174
- package/app/components/AdsFilterOption.vue +72 -72
- package/app/components/AdsFilterSelect.vue +202 -202
- package/app/components/AdsFooter.vue +25 -25
- package/app/components/AdsInput.vue +143 -143
- package/app/components/AdsListDropdown.vue +44 -44
- package/app/components/AdsLoading.vue +109 -109
- package/app/components/AdsMenuBar.vue +103 -103
- package/app/components/AdsMetricCard.vue +119 -119
- package/app/components/AdsMiniPill.vue +40 -40
- package/app/components/AdsModal.vue +157 -157
- package/app/components/AdsMonthPicker.vue +80 -80
- package/app/components/AdsNavbarApp.vue +67 -67
- package/app/components/AdsNavbarDesk.vue +62 -62
- package/app/components/AdsNotabilityPill.vue +27 -27
- package/app/components/AdsNumberInput.vue +166 -166
- package/app/components/AdsPagination.vue +91 -91
- package/app/components/AdsProductTag.vue +61 -61
- package/app/components/AdsRadio.vue +70 -70
- package/app/components/AdsSearchInput.vue +113 -113
- package/app/components/AdsSegmentedTabs.vue +28 -28
- package/app/components/AdsSideMenu.vue +101 -101
- package/app/components/AdsSmalltip.vue +44 -44
- package/app/components/AdsSteptip.vue +101 -101
- package/app/components/AdsSwitch.vue +59 -59
- package/app/components/AdsTable.vue +100 -100
- package/app/components/AdsTableToolbar.vue +44 -44
- package/app/components/AdsTabs.vue +51 -51
- package/app/components/AdsTextarea.vue +109 -109
- package/app/components/AdsToast.vue +181 -181
- package/app/components/AdsTooltip.vue +66 -66
- package/app/components/InvertedTooltip.vue +40 -40
- package/app/components/OverlayLoading.vue +173 -173
- package/app/components/ProgressBarLoading.vue +256 -256
- package/app/composables/useOverlayLoading.ts +66 -66
- package/app/locale/pt-br.ts +6 -6
- package/app/plugins/ads-toast.client.ts +24 -24
- package/app/theme/ads-theme.ts +370 -370
- package/app/theme/component-tokens.json +402 -402
- package/app/theme/component-tokens.ts +815 -815
- package/app/types/overlay-loading.types.ts +26 -26
- package/app/utils/ads-filter-select.ts +172 -172
- package/app/utils/ads-table.ts +204 -204
- package/app/utils/calendar-date.ts +128 -128
- package/app/utils/category-role.ts +45 -45
- package/app/utils/money.ts +77 -77
- package/app/utils/notability.ts +8 -8
- package/app/utils/parser.ts +134 -134
- package/app/utils/percentage.ts +54 -54
- package/nuxt.config.ts +31 -32
- package/package.json +48 -46
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<span
|
|
3
|
-
v-if="mini"
|
|
4
|
-
class="inline-block size-[var(--ads-badge-dot)] shrink-0 rounded-full"
|
|
5
|
-
:class="surfaceClass"
|
|
6
|
-
aria-hidden="true"
|
|
7
|
-
/>
|
|
8
|
-
<span
|
|
9
|
-
v-else
|
|
10
|
-
class="inline-flex size-[var(--ads-badge-size)] shrink-0 items-center justify-center overflow-hidden rounded-full px-[5px] py-1 text-[length:var(--ads-badge-font-size)] [font-weight:var(--ads-badge-weight)] leading-[1.2]"
|
|
11
|
-
:class="surfaceClass"
|
|
12
|
-
>
|
|
13
|
-
{{ value }}
|
|
14
|
-
</span>
|
|
15
|
-
</template>
|
|
16
|
-
|
|
17
|
-
<script setup lang="ts">
|
|
18
|
-
import { computed } from "vue";
|
|
19
|
-
|
|
20
|
-
export type AdsBadgeColor = "primary" | "success" | "attention" | "warning" | "new" | "innovation" | "blocked";
|
|
21
|
-
|
|
22
|
-
const props = withDefaults(
|
|
23
|
-
defineProps<{
|
|
24
|
-
/** Cor do contador. Innovation usa o rosa do handoff (#fde3ff / data-1 800). */
|
|
25
|
-
color?: AdsBadgeColor;
|
|
26
|
-
/** Ponto de 8px, sem número. */
|
|
27
|
-
mini?: boolean;
|
|
28
|
-
value?: string | number;
|
|
29
|
-
}>(),
|
|
30
|
-
{
|
|
31
|
-
color: "primary",
|
|
32
|
-
mini: false,
|
|
33
|
-
value: 2,
|
|
34
|
-
},
|
|
35
|
-
);
|
|
36
|
-
|
|
37
|
-
const surfaces: Record<AdsBadgeColor, string> = {
|
|
38
|
-
primary: "bg-[var(--ads-surface-brand)] text-[var(--ads-badge-text)]",
|
|
39
|
-
success: "bg-[var(--ads-status-success-500)] text-[var(--ads-badge-text)]",
|
|
40
|
-
attention: "bg-[var(--ads-status-attention-500)] text-[var(--ads-badge-text)]",
|
|
41
|
-
warning: "bg-[var(--ads-status-warning-500)] text-[var(--ads-badge-text)]",
|
|
42
|
-
new: "bg-[var(--ads-status-new-500)] text-[var(--ads-badge-text)]",
|
|
43
|
-
innovation: "bg-[#fde3ff] text-[var(--ads-chart-data-1-800)]",
|
|
44
|
-
blocked: "bg-[var(--ads-status-void-800)] text-[var(--ads-badge-text)]",
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
const surfaceClass = computed(() => surfaces[props.color]);
|
|
48
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<span
|
|
3
|
+
v-if="mini"
|
|
4
|
+
class="inline-block size-[var(--ads-badge-dot)] shrink-0 rounded-full"
|
|
5
|
+
:class="surfaceClass"
|
|
6
|
+
aria-hidden="true"
|
|
7
|
+
/>
|
|
8
|
+
<span
|
|
9
|
+
v-else
|
|
10
|
+
class="inline-flex size-[var(--ads-badge-size)] shrink-0 items-center justify-center overflow-hidden rounded-full px-[5px] py-1 text-[length:var(--ads-badge-font-size)] [font-weight:var(--ads-badge-weight)] leading-[1.2]"
|
|
11
|
+
:class="surfaceClass"
|
|
12
|
+
>
|
|
13
|
+
{{ value }}
|
|
14
|
+
</span>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script setup lang="ts">
|
|
18
|
+
import { computed } from "vue";
|
|
19
|
+
|
|
20
|
+
export type AdsBadgeColor = "primary" | "success" | "attention" | "warning" | "new" | "innovation" | "blocked";
|
|
21
|
+
|
|
22
|
+
const props = withDefaults(
|
|
23
|
+
defineProps<{
|
|
24
|
+
/** Cor do contador. Innovation usa o rosa do handoff (#fde3ff / data-1 800). */
|
|
25
|
+
color?: AdsBadgeColor;
|
|
26
|
+
/** Ponto de 8px, sem número. */
|
|
27
|
+
mini?: boolean;
|
|
28
|
+
value?: string | number;
|
|
29
|
+
}>(),
|
|
30
|
+
{
|
|
31
|
+
color: "primary",
|
|
32
|
+
mini: false,
|
|
33
|
+
value: 2,
|
|
34
|
+
},
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
const surfaces: Record<AdsBadgeColor, string> = {
|
|
38
|
+
primary: "bg-[var(--ads-surface-brand)] text-[var(--ads-badge-text)]",
|
|
39
|
+
success: "bg-[var(--ads-status-success-500)] text-[var(--ads-badge-text)]",
|
|
40
|
+
attention: "bg-[var(--ads-status-attention-500)] text-[var(--ads-badge-text)]",
|
|
41
|
+
warning: "bg-[var(--ads-status-warning-500)] text-[var(--ads-badge-text)]",
|
|
42
|
+
new: "bg-[var(--ads-status-new-500)] text-[var(--ads-badge-text)]",
|
|
43
|
+
innovation: "bg-[#fde3ff] text-[var(--ads-chart-data-1-800)]",
|
|
44
|
+
blocked: "bg-[var(--ads-status-void-800)] text-[var(--ads-badge-text)]",
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
const surfaceClass = computed(() => surfaces[props.color]);
|
|
48
|
+
</script>
|
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<span
|
|
3
|
-
class="inline-flex h-[var(--ads-broadcast-height)] shrink-0 items-center gap-1 overflow-hidden rounded-full border px-[var(--ads-broadcast-padding-x)] py-1"
|
|
4
|
-
:class="surface.shell"
|
|
5
|
-
>
|
|
6
|
-
<span class="flex size-3.5 shrink-0 items-center justify-center" aria-hidden="true">
|
|
7
|
-
<span class="size-[var(--ads-broadcast-mark)] rounded-full" :class="surface.mark" />
|
|
8
|
-
</span>
|
|
9
|
-
<span class="text-[length:var(--ads-broadcast-font-size)] font-bold leading-[1.2] whitespace-nowrap" :class="surface.label">
|
|
10
|
-
{{ label }}
|
|
11
|
-
</span>
|
|
12
|
-
</span>
|
|
13
|
-
</template>
|
|
14
|
-
|
|
15
|
-
<script setup lang="ts">
|
|
16
|
-
import { computed } from "vue";
|
|
17
|
-
|
|
18
|
-
export type AdsBroadcastStatus = "warning" | "success";
|
|
19
|
-
|
|
20
|
-
const props = withDefaults(
|
|
21
|
-
defineProps<{
|
|
22
|
-
label?: string;
|
|
23
|
-
status?: AdsBroadcastStatus;
|
|
24
|
-
}>(),
|
|
25
|
-
{
|
|
26
|
-
label: "LIVE",
|
|
27
|
-
status: "warning",
|
|
28
|
-
},
|
|
29
|
-
);
|
|
30
|
-
|
|
31
|
-
const surfaces: Record<AdsBroadcastStatus, { shell: string; mark: string; label: string }> = {
|
|
32
|
-
warning: {
|
|
33
|
-
shell: "border-[var(--ads-broadcast-warning)] bg-[var(--ads-broadcast-warning-bg)]",
|
|
34
|
-
mark: "bg-[var(--ads-broadcast-warning)]",
|
|
35
|
-
label: "text-[var(--ads-broadcast-warning)]",
|
|
36
|
-
},
|
|
37
|
-
success: {
|
|
38
|
-
shell: "border-[var(--ads-broadcast-success)] bg-[var(--ads-broadcast-success-bg)]",
|
|
39
|
-
mark: "bg-[var(--ads-broadcast-success)]",
|
|
40
|
-
label: "text-[var(--ads-broadcast-success)]",
|
|
41
|
-
},
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
const surface = computed(() => surfaces[props.status]);
|
|
45
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<span
|
|
3
|
+
class="inline-flex h-[var(--ads-broadcast-height)] shrink-0 items-center gap-1 overflow-hidden rounded-full border px-[var(--ads-broadcast-padding-x)] py-1"
|
|
4
|
+
:class="surface.shell"
|
|
5
|
+
>
|
|
6
|
+
<span class="flex size-3.5 shrink-0 items-center justify-center" aria-hidden="true">
|
|
7
|
+
<span class="size-[var(--ads-broadcast-mark)] rounded-full" :class="surface.mark" />
|
|
8
|
+
</span>
|
|
9
|
+
<span class="text-[length:var(--ads-broadcast-font-size)] font-bold leading-[1.2] whitespace-nowrap" :class="surface.label">
|
|
10
|
+
{{ label }}
|
|
11
|
+
</span>
|
|
12
|
+
</span>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script setup lang="ts">
|
|
16
|
+
import { computed } from "vue";
|
|
17
|
+
|
|
18
|
+
export type AdsBroadcastStatus = "warning" | "success";
|
|
19
|
+
|
|
20
|
+
const props = withDefaults(
|
|
21
|
+
defineProps<{
|
|
22
|
+
label?: string;
|
|
23
|
+
status?: AdsBroadcastStatus;
|
|
24
|
+
}>(),
|
|
25
|
+
{
|
|
26
|
+
label: "LIVE",
|
|
27
|
+
status: "warning",
|
|
28
|
+
},
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
const surfaces: Record<AdsBroadcastStatus, { shell: string; mark: string; label: string }> = {
|
|
32
|
+
warning: {
|
|
33
|
+
shell: "border-[var(--ads-broadcast-warning)] bg-[var(--ads-broadcast-warning-bg)]",
|
|
34
|
+
mark: "bg-[var(--ads-broadcast-warning)]",
|
|
35
|
+
label: "text-[var(--ads-broadcast-warning)]",
|
|
36
|
+
},
|
|
37
|
+
success: {
|
|
38
|
+
shell: "border-[var(--ads-broadcast-success)] bg-[var(--ads-broadcast-success-bg)]",
|
|
39
|
+
mark: "bg-[var(--ads-broadcast-success)]",
|
|
40
|
+
label: "text-[var(--ads-broadcast-success)]",
|
|
41
|
+
},
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
const surface = computed(() => surfaces[props.status]);
|
|
45
|
+
</script>
|