ads-nuxt 0.1.0 → 0.1.2

package/app/components/AdsMenuBar.vue

@@ -1,103 +1,103 @@
-<template>
-  <nav
-    class="flex w-[var(--ads-menu-width)] flex-col items-center gap-[var(--ads-menu-gap)] bg-[var(--ads-surface-card)] px-0 py-[var(--ads-menu-padding-y)] shadow-[0_2px_4px_-1px_color-mix(in_srgb,var(--color-ads-neutro-medio-60)_75%,transparent)]"
-    aria-label="Menu principal"
-  >
-    <template v-for="item in items" :key="item.id">
-      <span
-        v-if="item.dividerBefore"
-        class="h-px w-12 bg-[var(--ads-menu-divider)]"
-        role="separator"
-      />
-      <component
-        :is="item.to ? NuxtLink : 'button'"
-        v-bind="item.to ? { to: item.to } : { type: 'button' }"
-        class="flex w-full flex-col items-center gap-1 rounded-[var(--ads-radius-xsm)] px-1 py-0 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
-        :class="stateOf(item) === 'open' ? 'shadow-[inset_4px_0_0_var(--ads-text-brand)]' : ''"
-        :aria-current="stateOf(item) === 'regular' ? undefined : 'page'"
-        @click="onSelect(item.id)"
-      >
-        <span class="flex size-[var(--ads-menu-icon-box)] items-center justify-center rounded-[var(--ads-radius-xsm)] p-1">
-          <UIcon :name="item.icon" class="size-[var(--ads-menu-icon)]" :class="iconTone(item)" />
-        </span>
-        <span
-          class="max-w-full text-[length:var(--ads-menu-label-size)] font-bold leading-[1.2] whitespace-pre-line"
-          :class="labelTone(item)"
-        >{{ item.label }}</span>
-      </component>
-    </template>
-  </nav>
-</template>
-
-<script lang="ts">
-import type { RouteLocationRaw } from "vue-router";
-
-export type AdsMenuBarState = "regular" | "selected" | "open";
-
-export type AdsMenuBarItem = {
-  id: string;
-  label: string;
-  icon: string;
-  to?: RouteLocationRaw;
-  dividerBefore?: boolean;
-  state?: AdsMenuBarState;
-};
-
-/** Ordem do Menu bar default no Figma. Home usa o mesmo tom dos demais (o frame default pinta o rótulo em dark/500). */
-export const adsMenuBarItems: AdsMenuBarItem[] = [
-  { id: "home", label: "Home", icon: "i-lucide-home" },
-  { id: "gestao", label: "Gestão", icon: "i-lucide-folder-tree", dividerBefore: true },
-  { id: "financas", label: "Finanças", icon: "i-lucide-hand-coins" },
-  { id: "compras", label: "Compras", icon: "i-lucide-shopping-cart" },
-  { id: "trade", label: "Trade", icon: "i-lucide-store" },
-  { id: "marketing", label: "Marketing", icon: "i-lucide-megaphone" },
-  { id: "capacitacao", label: "Capacitação", icon: "i-lucide-book-open" },
-  { id: "relatorios", label: "Relatórios", icon: "i-lucide-bar-chart-big" },
-  { id: "promocao", label: "Promoção", icon: "i-lucide-trophy" },
-  { id: "encontro", label: "Encontro\nFarmarcas", icon: "i-lucide-contact" },
-  { id: "campanhas", label: "Campanhas", icon: "i-lucide-goal", dividerBefore: false },
-];
-</script>
-
-<script setup lang="ts">
-import { NuxtLink } from "#components";
-
-
-
-const props = withDefaults(
-  defineProps<{
-    items?: AdsMenuBarItem[];
-    activeId?: string;
-    openId?: string;
-  }>(),
-  {
-    items: () => adsMenuBarItems,
-    activeId: "",
-    openId: "",
-  },
-);
-
-const emit = defineEmits<{
-  "update:activeId": [id: string];
-  select: [id: string];
-}>();
-
-const stateOf = (item: AdsMenuBarItem): AdsMenuBarState => {
-  if (item.state) return item.state;
-  if (props.openId === item.id) return "open";
-  if (props.activeId === item.id) return "selected";
-  return "regular";
-};
-
-const iconTone = (item: AdsMenuBarItem) =>
-  stateOf(item) === "regular" ? "text-ads-neutro-escuro-500" : "text-[var(--ads-text-brand)]";
-
-const labelTone = (item: AdsMenuBarItem) =>
-  stateOf(item) === "regular" ? "text-[var(--ads-text-secondary)]" : "text-[var(--ads-text-brand)]";
-
-const onSelect = (id: string) => {
-  emit("update:activeId", id);
-  emit("select", id);
-};
-
-</script>
+<template>
+  <nav
+    class="flex w-[var(--ads-menu-width)] flex-col items-center gap-[var(--ads-menu-gap)] bg-[var(--ads-surface-card)] px-0 py-[var(--ads-menu-padding-y)] shadow-[0_2px_4px_-1px_color-mix(in_srgb,var(--color-ads-neutro-medio-60)_75%,transparent)]"
+    aria-label="Menu principal"
+  >
+    <template v-for="item in items" :key="item.id">
+      <span
+        v-if="item.dividerBefore"
+        class="h-px w-12 bg-[var(--ads-menu-divider)]"
+        role="separator"
+      />
+      <component
+        :is="item.to ? NuxtLink : 'button'"
+        v-bind="item.to ? { to: item.to } : { type: 'button' }"
+        class="flex w-full flex-col items-center gap-1 rounded-[var(--ads-radius-xsm)] px-1 py-0 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
+        :class="stateOf(item) === 'open' ? 'shadow-[inset_4px_0_0_var(--ads-text-brand)]' : ''"
+        :aria-current="stateOf(item) === 'regular' ? undefined : 'page'"
+        @click="onSelect(item.id)"
+      >
+        <span class="flex size-[var(--ads-menu-icon-box)] items-center justify-center rounded-[var(--ads-radius-xsm)] p-1">
+          <UIcon :name="item.icon" class="size-[var(--ads-menu-icon)]" :class="iconTone(item)" />
+        </span>
+        <span
+          class="max-w-full text-[length:var(--ads-menu-label-size)] font-bold leading-[1.2] whitespace-pre-line"
+          :class="labelTone(item)"
+        >{{ item.label }}</span>
+      </component>
+    </template>
+  </nav>
+</template>
+
+<script lang="ts">
+import type { RouteLocationRaw } from "vue-router";
+
+export type AdsMenuBarState = "regular" | "selected" | "open";
+
+export type AdsMenuBarItem = {
+  id: string;
+  label: string;
+  icon: string;
+  to?: RouteLocationRaw;
+  dividerBefore?: boolean;
+  state?: AdsMenuBarState;
+};
+
+/** Ordem do Menu bar default no Figma. Home usa o mesmo tom dos demais (o frame default pinta o rótulo em dark/500). */
+export const adsMenuBarItems: AdsMenuBarItem[] = [
+  { id: "home", label: "Home", icon: "i-lucide-home" },
+  { id: "gestao", label: "Gestão", icon: "i-lucide-folder-tree", dividerBefore: true },
+  { id: "financas", label: "Finanças", icon: "i-lucide-hand-coins" },
+  { id: "compras", label: "Compras", icon: "i-lucide-shopping-cart" },
+  { id: "trade", label: "Trade", icon: "i-lucide-store" },
+  { id: "marketing", label: "Marketing", icon: "i-lucide-megaphone" },
+  { id: "capacitacao", label: "Capacitação", icon: "i-lucide-book-open" },
+  { id: "relatorios", label: "Relatórios", icon: "i-lucide-bar-chart-big" },
+  { id: "promocao", label: "Promoção", icon: "i-lucide-trophy" },
+  { id: "encontro", label: "Encontro\nFarmarcas", icon: "i-lucide-contact" },
+  { id: "campanhas", label: "Campanhas", icon: "i-lucide-goal", dividerBefore: false },
+];
+</script>
+
+<script setup lang="ts">
+import { NuxtLink } from "#components";
+
+
+
+const props = withDefaults(
+  defineProps<{
+    items?: AdsMenuBarItem[];
+    activeId?: string;
+    openId?: string;
+  }>(),
+  {
+    items: () => adsMenuBarItems,
+    activeId: "",
+    openId: "",
+  },
+);
+
+const emit = defineEmits<{
+  "update:activeId": [id: string];
+  select: [id: string];
+}>();
+
+const stateOf = (item: AdsMenuBarItem): AdsMenuBarState => {
+  if (item.state) return item.state;
+  if (props.openId === item.id) return "open";
+  if (props.activeId === item.id) return "selected";
+  return "regular";
+};
+
+const iconTone = (item: AdsMenuBarItem) =>
+  stateOf(item) === "regular" ? "text-ads-neutro-escuro-500" : "text-[var(--ads-text-brand)]";
+
+const labelTone = (item: AdsMenuBarItem) =>
+  stateOf(item) === "regular" ? "text-[var(--ads-text-secondary)]" : "text-[var(--ads-text-brand)]";
+
+const onSelect = (id: string) => {
+  emit("update:activeId", id);
+  emit("select", id);
+};
+
+</script>

package/app/components/AdsMetricCard.vue

@@ -1,119 +1,119 @@
-<template>
-  <component
-    :is="as"
-    :type="as === 'button' ? 'button' : undefined"
-    :disabled="as === 'button' ? disabled : undefined"
-    class="flex h-full min-w-0 flex-col gap-[var(--ads-metric-gap)] border p-[var(--ads-metric-padding)] text-left font-normal"
-    :class="[radiusClass, surfaceClass]"
-  >
-    <div class="flex flex-col items-start gap-1">
-      <div class="flex min-w-0 items-center gap-2">
-        <p :class="labelClass">{{ title }}</p>
-        <InvertedTooltip v-if="hint" :text="hint" class="shrink-0">
-          <UIcon
-            name="i-lucide-help-circle"
-            size="xs"
-            class="align-middle text-[var(--ads-border-icon-support)]"
-          />
-        </InvertedTooltip>
-      </div>
-      <slot name="status" />
-    </div>
-
-    <div class="flex min-w-0 items-center gap-2">
-      <p class="min-w-0" :class="empty ? emptyValueClass : valueClass">
-        {{ value }}
-      </p>
-      <span
-        v-if="!empty && slots.delta"
-        class="inline-flex shrink-0 items-center gap-1"
-        :class="deltaClass"
-      >
-        <slot name="delta" />
-      </span>
-    </div>
-
-    <div
-      v-if="caption || slots.footer"
-      class="mt-auto flex items-end justify-between gap-2"
-    >
-      <p v-if="caption" :class="captionClass">{{ caption }}</p>
-      <slot name="footer" />
-    </div>
-
-    <div v-if="slots.default" class="min-h-0 flex-1">
-      <slot />
-    </div>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from "vue";
-import InvertedTooltip from "./InvertedTooltip.vue";
-
-/**
- * Número em destaque.
- * Rótulo: 14px, medium. Valor: 20px, bold. Variação: 14px, bold. Legenda: 12px, regular.
- */
-const labelClass =
-  "text-[length:var(--ads-metric-label-size)] font-medium leading-[var(--ads-line-height-sm)] text-[var(--ads-metric-label)]";
-const valueClass =
-  "text-[length:var(--ads-metric-value-size)] font-bold leading-[var(--ads-line-height-sm)] text-[var(--ads-metric-value)] tabular-nums";
-const emptyValueClass =
-  "text-[length:var(--ads-font-size-xs)] font-medium leading-[var(--ads-line-height-sm)] text-[var(--ads-text-tertiary)]";
-const deltaClass =
-  "text-[length:var(--ads-font-size-xxs)] font-bold leading-[var(--ads-line-height-sm)] tabular-nums";
-const captionClass =
-  "text-[length:var(--ads-metric-caption-size)] font-normal leading-[var(--ads-line-height-md)] text-[var(--ads-metric-label)]";
-
-const props = withDefaults(
-  defineProps<{
-    /** Rótulo acima do número. */
-    title: string;
-    /** Número ou frase principal. */
-    value: string;
-    /** Texto do ícone de ajuda ao lado do rótulo. */
-    hint?: string;
-    /** Linha curta abaixo do número, como o valor atual. */
-    caption?: string;
-    /** Valor ausente: 16px medium, cor tertiary. */
-    empty?: boolean;
-    /** `button` quando o cartão é a própria ação. */
-    as?: "div" | "button";
-    disabled?: boolean;
-    /** Realce de item escolhido, como um filtro ativo. */
-    selected?: boolean;
-  }>(),
-  {
-    hint: undefined,
-    caption: undefined,
-    empty: false,
-    as: "div",
-    disabled: false,
-    selected: false,
-  },
-);
-
-const slots = useSlots();
-
-const radiusClass = "rounded-[var(--ads-metric-radius)]";
-
-const surfaceClass = computed(() => {
-  const classes = [
-    props.selected
-      ? "border-[var(--color-neutral-300)] bg-[var(--color-neutral-100)]"
-      : "border-[var(--ads-metric-border)] bg-[var(--ads-metric-background)]",
-  ];
-
-  if (props.as === "button") {
-    classes.push(
-      "cursor-pointer transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-primary)] disabled:cursor-not-allowed disabled:opacity-50",
-    );
-    if (!props.selected && !props.disabled) {
-      classes.push("hover:bg-[var(--color-neutral-100)]");
-    }
-  }
-
-  return classes;
-});
-</script>
+<template>
+  <component
+    :is="as"
+    :type="as === 'button' ? 'button' : undefined"
+    :disabled="as === 'button' ? disabled : undefined"
+    class="flex h-full min-w-0 flex-col gap-[var(--ads-metric-gap)] border p-[var(--ads-metric-padding)] text-left font-normal"
+    :class="[radiusClass, surfaceClass]"
+  >
+    <div class="flex flex-col items-start gap-1">
+      <div class="flex min-w-0 items-center gap-2">
+        <p :class="labelClass">{{ title }}</p>
+        <InvertedTooltip v-if="hint" :text="hint" class="shrink-0">
+          <UIcon
+            name="i-lucide-help-circle"
+            size="xs"
+            class="align-middle text-[var(--ads-border-icon-support)]"
+          />
+        </InvertedTooltip>
+      </div>
+      <slot name="status" />
+    </div>
+
+    <div class="flex min-w-0 items-center gap-2">
+      <p class="min-w-0" :class="empty ? emptyValueClass : valueClass">
+        {{ value }}
+      </p>
+      <span
+        v-if="!empty && slots.delta"
+        class="inline-flex shrink-0 items-center gap-1"
+        :class="deltaClass"
+      >
+        <slot name="delta" />
+      </span>
+    </div>
+
+    <div
+      v-if="caption || slots.footer"
+      class="mt-auto flex items-end justify-between gap-2"
+    >
+      <p v-if="caption" :class="captionClass">{{ caption }}</p>
+      <slot name="footer" />
+    </div>
+
+    <div v-if="slots.default" class="min-h-0 flex-1">
+      <slot />
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+import InvertedTooltip from "./InvertedTooltip.vue";
+
+/**
+ * Número em destaque.
+ * Rótulo: 14px, medium. Valor: 20px, bold. Variação: 14px, bold. Legenda: 12px, regular.
+ */
+const labelClass =
+  "text-[length:var(--ads-metric-label-size)] font-medium leading-[var(--ads-line-height-sm)] text-[var(--ads-metric-label)]";
+const valueClass =
+  "text-[length:var(--ads-metric-value-size)] font-bold leading-[var(--ads-line-height-sm)] text-[var(--ads-metric-value)] tabular-nums";
+const emptyValueClass =
+  "text-[length:var(--ads-font-size-xs)] font-medium leading-[var(--ads-line-height-sm)] text-[var(--ads-text-tertiary)]";
+const deltaClass =
+  "text-[length:var(--ads-font-size-xxs)] font-bold leading-[var(--ads-line-height-sm)] tabular-nums";
+const captionClass =
+  "text-[length:var(--ads-metric-caption-size)] font-normal leading-[var(--ads-line-height-md)] text-[var(--ads-metric-label)]";
+
+const props = withDefaults(
+  defineProps<{
+    /** Rótulo acima do número. */
+    title: string;
+    /** Número ou frase principal. */
+    value: string;
+    /** Texto do ícone de ajuda ao lado do rótulo. */
+    hint?: string;
+    /** Linha curta abaixo do número, como o valor atual. */
+    caption?: string;
+    /** Valor ausente: 16px medium, cor tertiary. */
+    empty?: boolean;
+    /** `button` quando o cartão é a própria ação. */
+    as?: "div" | "button";
+    disabled?: boolean;
+    /** Realce de item escolhido, como um filtro ativo. */
+    selected?: boolean;
+  }>(),
+  {
+    hint: undefined,
+    caption: undefined,
+    empty: false,
+    as: "div",
+    disabled: false,
+    selected: false,
+  },
+);
+
+const slots = useSlots();
+
+const radiusClass = "rounded-[var(--ads-metric-radius)]";
+
+const surfaceClass = computed(() => {
+  const classes = [
+    props.selected
+      ? "border-[var(--color-neutral-300)] bg-[var(--color-neutral-100)]"
+      : "border-[var(--ads-metric-border)] bg-[var(--ads-metric-background)]",
+  ];
+
+  if (props.as === "button") {
+    classes.push(
+      "cursor-pointer transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-primary)] disabled:cursor-not-allowed disabled:opacity-50",
+    );
+    if (!props.selected && !props.disabled) {
+      classes.push("hover:bg-[var(--color-neutral-100)]");
+    }
+  }
+
+  return classes;
+});
+</script>

package/app/components/AdsMiniPill.vue

@@ -1,40 +1,40 @@
-<template>
-  <span
-    class="inline-flex h-[var(--ads-mini-height)] shrink-0 items-center justify-center rounded-full px-[var(--ads-mini-padding-x)] py-1 text-[length:var(--ads-mini-font-size)] [font-weight:var(--ads-mini-weight)] leading-[1.1] whitespace-nowrap"
-    :class="surfaceClass"
-  >
-    {{ resolvedLabel }}
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-type AdsMiniPillType = "nao-iniciado" | "pausado" | "novo";
-
-const props = withDefaults(
-  defineProps<{
-    type?: AdsMiniPillType;
-    label?: string;
-  }>(),
-  {
-    type: "nao-iniciado",
-    label: undefined,
-  },
-);
-
-const surfaces: Record<AdsMiniPillType, string> = {
-  "nao-iniciado": "bg-[var(--ads-mini-idle-bg)] text-[var(--ads-mini-idle-text)]",
-  pausado: "bg-[var(--ads-mini-paused-bg)] text-[var(--ads-mini-paused-text)]",
-  novo: "bg-[var(--ads-mini-new-bg)] text-[var(--ads-mini-new-text)]",
-};
-
-const labels: Record<AdsMiniPillType, string> = {
-  "nao-iniciado": "Não iniciado",
-  pausado: "Pausado",
-  novo: "Novo",
-};
-
-const surfaceClass = computed(() => surfaces[props.type]);
-const resolvedLabel = computed(() => props.label ?? labels[props.type]);
-</script>
+<template>
+  <span
+    class="inline-flex h-[var(--ads-mini-height)] shrink-0 items-center justify-center rounded-full px-[var(--ads-mini-padding-x)] py-1 text-[length:var(--ads-mini-font-size)] [font-weight:var(--ads-mini-weight)] leading-[1.1] whitespace-nowrap"
+    :class="surfaceClass"
+  >
+    {{ resolvedLabel }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+type AdsMiniPillType = "nao-iniciado" | "pausado" | "novo";
+
+const props = withDefaults(
+  defineProps<{
+    type?: AdsMiniPillType;
+    label?: string;
+  }>(),
+  {
+    type: "nao-iniciado",
+    label: undefined,
+  },
+);
+
+const surfaces: Record<AdsMiniPillType, string> = {
+  "nao-iniciado": "bg-[var(--ads-mini-idle-bg)] text-[var(--ads-mini-idle-text)]",
+  pausado: "bg-[var(--ads-mini-paused-bg)] text-[var(--ads-mini-paused-text)]",
+  novo: "bg-[var(--ads-mini-new-bg)] text-[var(--ads-mini-new-text)]",
+};
+
+const labels: Record<AdsMiniPillType, string> = {
+  "nao-iniciado": "Não iniciado",
+  pausado: "Pausado",
+  novo: "Novo",
+};
+
+const surfaceClass = computed(() => surfaces[props.type]);
+const resolvedLabel = computed(() => props.label ?? labels[props.type]);
+</script>