ads-nuxt 0.1.0 → 0.1.2

package/app/components/AdsDropdownMenu.vue

@@ -1,19 +1,19 @@
-<template>
-  <UDropdownMenu :items="items" :content="content" :ui="adsDropdownMenuUi">
-    <slot />
-  </UDropdownMenu>
-</template>
-
-<script setup lang="ts">
-import type { DropdownMenuItem } from "@nuxt/ui";
-import { adsDropdownMenuUi } from "../theme/ads-theme";
-
-defineProps<{
-  items: DropdownMenuItem[] | DropdownMenuItem[][];
-  content?: {
-    side?: "top" | "right" | "bottom" | "left";
-    align?: "start" | "center" | "end";
-    sideOffset?: number;
-  };
-}>();
-</script>
+<template>
+  <UDropdownMenu :items="items" :content="content" :ui="adsDropdownMenuUi">
+    <slot />
+  </UDropdownMenu>
+</template>
+
+<script setup lang="ts">
+import type { DropdownMenuItem } from "@nuxt/ui";
+import { adsDropdownMenuUi } from "../theme/ads-theme";
+
+defineProps<{
+  items: DropdownMenuItem[] | DropdownMenuItem[][];
+  content?: {
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+  };
+}>();
+</script>

package/app/components/AdsEmptyState.vue

@@ -1,58 +1,58 @@
-<template>
-  <div
-    class="flex flex-col items-center text-center"
-    :class="small ? 'gap-[var(--ads-empty-gap-sm)]' : 'gap-[var(--ads-empty-gap)]'"
-  >
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      aria-hidden="true"
-      class="text-[var(--ads-empty-icon-color)]"
-      :class="small ? 'size-[var(--ads-empty-icon-sm)]' : 'size-[var(--ads-empty-icon)]'"
-    >
-      <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.6" />
-      <path d="M9 9l6 6M15 9l-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
-    </svg>
-    <div class="flex max-w-xs flex-col items-center gap-[var(--ads-empty-text-gap)]">
-      <p
-        class="font-bold leading-[1.3] text-[var(--ads-text-primary)]"
-        :class="small ? 'text-[length:var(--ads-empty-title-size-sm)]' : 'text-[length:var(--ads-empty-title-size)]'"
-      >
-        {{ title }}
-      </p>
-      <p v-if="subtitle" class="text-[length:var(--ads-empty-subtitle-size)] leading-[1.2] text-[var(--ads-text-secondary)]">
-        {{ subtitle }}
-      </p>
-    </div>
-    <div v-if="showActions" class="flex flex-col items-center gap-2">
-      <slot>
-        <AdsButton :label="primaryLabel" leading trailing />
-        <AdsButton type="unfilled" :label="secondaryLabel" leading trailing />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import AdsButton from "./AdsButton.vue";
-
-withDefaults(
-  defineProps<{
-    title?: string;
-    subtitle?: string;
-    /** Figma `Small=Yes`. */
-    small?: boolean;
-    showActions?: boolean;
-    primaryLabel?: string;
-    secondaryLabel?: string;
-  }>(),
-  {
-    title: "Título do empty state",
-    subtitle: "Coloque aqui um texto explicando e direcionando o usuário. Uso opcional.",
-    small: false,
-    showActions: true,
-    primaryLabel: "Button Test",
-    secondaryLabel: "Button Test",
-  },
-);
-</script>
+<template>
+  <div
+    class="flex flex-col items-center text-center"
+    :class="small ? 'gap-[var(--ads-empty-gap-sm)]' : 'gap-[var(--ads-empty-gap)]'"
+  >
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      class="text-[var(--ads-empty-icon-color)]"
+      :class="small ? 'size-[var(--ads-empty-icon-sm)]' : 'size-[var(--ads-empty-icon)]'"
+    >
+      <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.6" />
+      <path d="M9 9l6 6M15 9l-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+    </svg>
+    <div class="flex max-w-xs flex-col items-center gap-[var(--ads-empty-text-gap)]">
+      <p
+        class="font-bold leading-[1.3] text-[var(--ads-text-primary)]"
+        :class="small ? 'text-[length:var(--ads-empty-title-size-sm)]' : 'text-[length:var(--ads-empty-title-size)]'"
+      >
+        {{ title }}
+      </p>
+      <p v-if="subtitle" class="text-[length:var(--ads-empty-subtitle-size)] leading-[1.2] text-[var(--ads-text-secondary)]">
+        {{ subtitle }}
+      </p>
+    </div>
+    <div v-if="showActions" class="flex flex-col items-center gap-2">
+      <slot>
+        <AdsButton :label="primaryLabel" leading trailing />
+        <AdsButton type="unfilled" :label="secondaryLabel" leading trailing />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AdsButton from "./AdsButton.vue";
+
+withDefaults(
+  defineProps<{
+    title?: string;
+    subtitle?: string;
+    /** Figma `Small=Yes`. */
+    small?: boolean;
+    showActions?: boolean;
+    primaryLabel?: string;
+    secondaryLabel?: string;
+  }>(),
+  {
+    title: "Título do empty state",
+    subtitle: "Coloque aqui um texto explicando e direcionando o usuário. Uso opcional.",
+    small: false,
+    showActions: true,
+    primaryLabel: "Button Test",
+    secondaryLabel: "Button Test",
+  },
+);
+</script>

package/app/components/AdsFarmarcasPill.vue

@@ -1,74 +1,74 @@
-<template>
-  <span
-    class="inline-flex h-[var(--ads-farmarcas-height)] min-w-[var(--ads-farmarcas-min-width)] items-center justify-center rounded-full px-2 text-[length:var(--ads-farmarcas-font-size)] leading-[1.2] font-bold whitespace-nowrap"
-    :style="{
-      background: `var(--ads-farmarcas-${token}-bg)`,
-      color: `var(--ads-farmarcas-${token}-text)`,
-    }"
-  >
-    {{ label || labels[department] }}
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-/** Departamentos do Farmarcas Pill. As cores não existem na escala semântica do ADS. */
-export type AdsFarmarcasDepartment =
-  | "expansao"
-  | "eventos"
-  | "adm-digital"
-  | "sucesso"
-  | "trade"
-  | "dev"
-  | "ti"
-  | "padronizacao"
-  | "diretoria"
-  | "comercial"
-  | "inovacao"
-  | "patrimonio"
-  | "presidencia"
-  | "marketing"
-  | "gg"
-  | "bi"
-  | "financeiro"
-  | "juridico"
-  | "capacitacao"
-  | "produto";
-
-const props = withDefaults(
-  defineProps<{
-    department?: AdsFarmarcasDepartment;
-    label?: string;
-  }>(),
-  {
-    department: "expansao",
-    label: "",
-  },
-);
-
-const labels: Record<AdsFarmarcasDepartment, string> = {
-  expansao: "Expansão",
-  eventos: "Eventos",
-  "adm-digital": "ADM digital",
-  sucesso: "Sucesso",
-  trade: "Trade",
-  dev: "Dev",
-  ti: "TI",
-  padronizacao: "Padronização",
-  diretoria: "Diretoria",
-  comercial: "Comercial",
-  inovacao: "Inovação",
-  patrimonio: "Patrimônio",
-  presidencia: "Presidência",
-  marketing: "Marketing",
-  gg: "G&G",
-  bi: "BI",
-  financeiro: "Financeiro",
-  juridico: "Jurídico",
-  capacitacao: "Capacitação",
-  produto: "produto",
-};
-
-const token = computed(() => props.department);
-</script>
+<template>
+  <span
+    class="inline-flex h-[var(--ads-farmarcas-height)] min-w-[var(--ads-farmarcas-min-width)] items-center justify-center rounded-full px-2 text-[length:var(--ads-farmarcas-font-size)] leading-[1.2] font-bold whitespace-nowrap"
+    :style="{
+      background: `var(--ads-farmarcas-${token}-bg)`,
+      color: `var(--ads-farmarcas-${token}-text)`,
+    }"
+  >
+    {{ label || labels[department] }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+/** Departamentos do Farmarcas Pill. As cores não existem na escala semântica do ADS. */
+export type AdsFarmarcasDepartment =
+  | "expansao"
+  | "eventos"
+  | "adm-digital"
+  | "sucesso"
+  | "trade"
+  | "dev"
+  | "ti"
+  | "padronizacao"
+  | "diretoria"
+  | "comercial"
+  | "inovacao"
+  | "patrimonio"
+  | "presidencia"
+  | "marketing"
+  | "gg"
+  | "bi"
+  | "financeiro"
+  | "juridico"
+  | "capacitacao"
+  | "produto";
+
+const props = withDefaults(
+  defineProps<{
+    department?: AdsFarmarcasDepartment;
+    label?: string;
+  }>(),
+  {
+    department: "expansao",
+    label: "",
+  },
+);
+
+const labels: Record<AdsFarmarcasDepartment, string> = {
+  expansao: "Expansão",
+  eventos: "Eventos",
+  "adm-digital": "ADM digital",
+  sucesso: "Sucesso",
+  trade: "Trade",
+  dev: "Dev",
+  ti: "TI",
+  padronizacao: "Padronização",
+  diretoria: "Diretoria",
+  comercial: "Comercial",
+  inovacao: "Inovação",
+  patrimonio: "Patrimônio",
+  presidencia: "Presidência",
+  marketing: "Marketing",
+  gg: "G&G",
+  bi: "BI",
+  financeiro: "Financeiro",
+  juridico: "Jurídico",
+  capacitacao: "Capacitação",
+  produto: "produto",
+};
+
+const token = computed(() => props.department);
+</script>