ads-nuxt 0.1.1 → 0.1.3

package/app/components/AdsButtonGroup.vue

@@ -1,39 +1,39 @@
-<template>
-  <div class="inline-flex" role="radiogroup" :aria-label="ariaLabel">
-    <button
-      v-for="(option, index) in options"
-      :key="option.value"
-      type="button"
-      role="radio"
-      class="-ml-px h-[var(--ads-button-group-height)] border border-[var(--ads-button-group-border)] px-4 text-[length:var(--ads-button-group-font-size)] text-[var(--ads-text-primary)] first:ml-0 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
-      :class="[
-        index === 0 ? 'rounded-l-[var(--ads-radius-xsm)]' : '',
-        index === options.length - 1 ? 'rounded-r-[var(--ads-radius-xsm)]' : '',
-        model === option.value ? 'z-[1] bg-[var(--ads-button-group-selected)] font-bold' : 'bg-[var(--ads-surface-card)] font-normal',
-      ]"
-      :aria-checked="model === option.value"
-      @click="model = option.value"
-    >
-      {{ option.label }}
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-export type AdsButtonGroupOption = {
-  value: string;
-  label: string;
-};
-
-withDefaults(
-  defineProps<{
-    options: AdsButtonGroupOption[];
-    ariaLabel?: string;
-  }>(),
-  {
-    ariaLabel: "Grupo de botões",
-  },
-);
-
-const model = defineModel<string>({ required: true });
-</script>
+<template>
+  <div class="inline-flex" role="radiogroup" :aria-label="ariaLabel">
+    <button
+      v-for="(option, index) in options"
+      :key="option.value"
+      type="button"
+      role="radio"
+      class="-ml-px h-[var(--ads-button-group-height)] border border-[var(--ads-button-group-border)] px-4 text-[length:var(--ads-button-group-font-size)] text-[var(--ads-text-primary)] first:ml-0 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
+      :class="[
+        index === 0 ? 'rounded-l-[var(--ads-radius-xsm)]' : '',
+        index === options.length - 1 ? 'rounded-r-[var(--ads-radius-xsm)]' : '',
+        model === option.value ? 'z-[1] bg-[var(--ads-button-group-selected)] font-bold' : 'bg-[var(--ads-surface-card)] font-normal',
+      ]"
+      :aria-checked="model === option.value"
+      @click="model = option.value"
+    >
+      {{ option.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+export type AdsButtonGroupOption = {
+  value: string;
+  label: string;
+};
+
+withDefaults(
+  defineProps<{
+    options: AdsButtonGroupOption[];
+    ariaLabel?: string;
+  }>(),
+  {
+    ariaLabel: "Grupo de botões",
+  },
+);
+
+const model = defineModel<string>({ required: true });
+</script>

package/app/components/AdsButtonMenu.vue

@@ -1,48 +1,48 @@
-<template>
-  <div
-    class="flex w-[var(--ads-button-menu-width)] flex-col overflow-hidden rounded-[var(--ads-radius-xsm)] bg-[var(--ads-surface-card)] shadow-[var(--ads-shadow-level-1)]"
-    role="menu"
-  >
-    <button
-      v-for="option in options"
-      :key="option.value"
-      type="button"
-      role="menuitem"
-      class="flex flex-col border-b-[0.5px] border-[var(--ads-button-menu-border)] px-4 pt-2 pb-4 text-left last:border-b-0 hover:bg-ads-neutro-claro-20 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
-      @click="emit('select', option.value)"
-    >
-      <span class="flex h-10 items-center gap-2 text-[length:var(--ads-button-menu-title-size)] leading-[1.3] font-medium text-[var(--ads-button-menu-title)]">
-        <UIcon v-if="showIcons" :name="option.icon || 'i-lucide-sparkles'" class="size-4 shrink-0" />
-        {{ option.title }}
-      </span>
-      <span v-if="showSubtitles && option.subtitle" class="line-clamp-2 text-[length:var(--ads-button-menu-subtitle-size)] leading-[1.2] text-[var(--ads-button-menu-subtitle)]">
-        {{ option.subtitle }}
-      </span>
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-export type AdsButtonMenuOption = {
-  value: string;
-  title: string;
-  subtitle?: string;
-  icon?: string;
-};
-
-withDefaults(
-  defineProps<{
-    options: AdsButtonMenuOption[];
-    showSubtitles?: boolean;
-    showIcons?: boolean;
-  }>(),
-  {
-    showSubtitles: true,
-    showIcons: true,
-  },
-);
-
-const emit = defineEmits<{
-  select: [value: string];
-}>();
-</script>
+<template>
+  <div
+    class="flex w-[var(--ads-button-menu-width)] flex-col overflow-hidden rounded-[var(--ads-radius-xsm)] bg-[var(--ads-surface-card)] shadow-[var(--ads-shadow-level-1)]"
+    role="menu"
+  >
+    <button
+      v-for="option in options"
+      :key="option.value"
+      type="button"
+      role="menuitem"
+      class="flex flex-col border-b-[0.5px] border-[var(--ads-button-menu-border)] px-4 pt-2 pb-4 text-left last:border-b-0 hover:bg-ads-neutro-claro-20 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
+      @click="emit('select', option.value)"
+    >
+      <span class="flex h-10 items-center gap-2 text-[length:var(--ads-button-menu-title-size)] leading-[1.3] font-medium text-[var(--ads-button-menu-title)]">
+        <UIcon v-if="showIcons" :name="option.icon || 'i-lucide-sparkles'" class="size-4 shrink-0" />
+        {{ option.title }}
+      </span>
+      <span v-if="showSubtitles && option.subtitle" class="line-clamp-2 text-[length:var(--ads-button-menu-subtitle-size)] leading-[1.2] text-[var(--ads-button-menu-subtitle)]">
+        {{ option.subtitle }}
+      </span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+export type AdsButtonMenuOption = {
+  value: string;
+  title: string;
+  subtitle?: string;
+  icon?: string;
+};
+
+withDefaults(
+  defineProps<{
+    options: AdsButtonMenuOption[];
+    showSubtitles?: boolean;
+    showIcons?: boolean;
+  }>(),
+  {
+    showSubtitles: true,
+    showIcons: true,
+  },
+);
+
+const emit = defineEmits<{
+  select: [value: string];
+}>();
+</script>

package/app/components/AdsCard.vue

@@ -1,117 +1,117 @@
-<template>
-  <component
-    :is="as"
-    :type="as === 'button' ? 'button' : undefined"
-    :disabled="as === 'button' ? disabled : undefined"
-    class="h-full border p-[var(--ads-card-padding)] text-left"
-    :class="[radiusClass, surfaceClass]"
-  >
-    <div
-      v-if="showHeader"
-      class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
-    >
-      <div class="min-w-0 flex-1">
-        <slot name="header">
-          <p class="flex items-center justify-between gap-2 font-bold text-[var(--ads-card-title)]">
-            <span class="min-w-0">{{ title }}</span>
-            <slot name="hint" />
-          </p>
-        </slot>
-      </div>
-      <div v-if="$slots.actions" class="flex shrink-0 flex-wrap items-center gap-2">
-        <slot name="actions" />
-      </div>
-    </div>
-
-    <div
-      v-if="description || $slots.default"
-      :class="showHeader ? 'mt-2' : undefined"
-    >
-      <slot>
-        <p class="text-[length:var(--ads-card-body-size)] leading-relaxed text-[var(--ads-card-body)]">
-          {{ description }}
-        </p>
-      </slot>
-    </div>
-
-    <div
-      v-if="footerText || $slots.footer"
-      class="flex flex-wrap items-start justify-between gap-3"
-      :class="hasContentAboveFooter ? 'mt-4' : undefined"
-    >
-      <slot name="footer">
-        <p class="text-xs text-[var(--ads-text-secondary)]">
-          {{ footerText }}
-        </p>
-      </slot>
-    </div>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    /** Título em negrito. O slot header substitui. */
-    title?: string;
-    /** Texto de apoio. O slot padrão substitui. */
-    description?: string;
-    /** Linha curta no rodapé. O slot footer substitui. */
-    footerText?: string;
-    /** `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;
-    /** `sm` (8px) em cartões grandes; `md` (12px) é o padrão. */
-    radius?: "sm" | "md";
-  }>(),
-  {
-    as: "div",
-    disabled: false,
-    selected: false,
-    radius: "md",
-  },
-);
-
-const radiusClass = computed(() =>
-  props.radius === "sm"
-    ? "rounded-[var(--ads-card-radius-sm)]"
-    : "rounded-[var(--ads-card-radius)]",
-);
-
-const surfaceClass = computed(() => {
-  const classes = [
-    props.selected
-      ? "border-[var(--ads-card-selected-border)] bg-[var(--ads-card-selected-background)]"
-      : "border-[var(--ads-card-border)] bg-[var(--ads-card-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;
-});
-
-const slots = useSlots();
-
-const showHeader = computed(
-  () =>
-    Boolean(props.title) ||
-    Boolean(slots.header || slots.actions),
-);
-
-const hasContentAboveFooter = computed(
-  () =>
-    showHeader.value ||
-    Boolean(props.description) ||
-    Boolean(slots.default),
-);
-</script>
+<template>
+  <component
+    :is="as"
+    :type="as === 'button' ? 'button' : undefined"
+    :disabled="as === 'button' ? disabled : undefined"
+    class="h-full border p-[var(--ads-card-padding)] text-left"
+    :class="[radiusClass, surfaceClass]"
+  >
+    <div
+      v-if="showHeader"
+      class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+    >
+      <div class="min-w-0 flex-1">
+        <slot name="header">
+          <p class="flex items-center justify-between gap-2 font-bold text-[var(--ads-card-title)]">
+            <span class="min-w-0">{{ title }}</span>
+            <slot name="hint" />
+          </p>
+        </slot>
+      </div>
+      <div v-if="$slots.actions" class="flex shrink-0 flex-wrap items-center gap-2">
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <div
+      v-if="description || $slots.default"
+      :class="showHeader ? 'mt-2' : undefined"
+    >
+      <slot>
+        <p class="text-[length:var(--ads-card-body-size)] leading-relaxed text-[var(--ads-card-body)]">
+          {{ description }}
+        </p>
+      </slot>
+    </div>
+
+    <div
+      v-if="footerText || $slots.footer"
+      class="flex flex-wrap items-start justify-between gap-3"
+      :class="hasContentAboveFooter ? 'mt-4' : undefined"
+    >
+      <slot name="footer">
+        <p class="text-xs text-[var(--ads-text-secondary)]">
+          {{ footerText }}
+        </p>
+      </slot>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    /** Título em negrito. O slot header substitui. */
+    title?: string;
+    /** Texto de apoio. O slot padrão substitui. */
+    description?: string;
+    /** Linha curta no rodapé. O slot footer substitui. */
+    footerText?: string;
+    /** `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;
+    /** `sm` (8px) em cartões grandes; `md` (12px) é o padrão. */
+    radius?: "sm" | "md";
+  }>(),
+  {
+    as: "div",
+    disabled: false,
+    selected: false,
+    radius: "md",
+  },
+);
+
+const radiusClass = computed(() =>
+  props.radius === "sm"
+    ? "rounded-[var(--ads-card-radius-sm)]"
+    : "rounded-[var(--ads-card-radius)]",
+);
+
+const surfaceClass = computed(() => {
+  const classes = [
+    props.selected
+      ? "border-[var(--ads-card-selected-border)] bg-[var(--ads-card-selected-background)]"
+      : "border-[var(--ads-card-border)] bg-[var(--ads-card-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;
+});
+
+const slots = useSlots();
+
+const showHeader = computed(
+  () =>
+    Boolean(props.title) ||
+    Boolean(slots.header || slots.actions),
+);
+
+const hasContentAboveFooter = computed(
+  () =>
+    showHeader.value ||
+    Boolean(props.description) ||
+    Boolean(slots.default),
+);
+</script>

package/app/components/AdsCharttip.vue

@@ -1,78 +1,78 @@
-<template>
-  <DefinePanel>
-    <div class="flex min-w-[var(--ads-charttip-min-width)] flex-col gap-4 rounded-[var(--ads-tooltip-radius)] bg-[var(--ads-tooltip-bg)] p-4 text-[var(--ads-tooltip-title)] shadow-[var(--ads-shadow-level-1)]">
-      <p v-if="title" class="text-center text-base leading-[1.3] font-bold">{{ title }}</p>
-      <ul class="flex flex-col gap-2">
-        <li v-for="(row, index) in rows" :key="index" class="flex items-center gap-2 text-sm leading-[1.3]">
-          <span class="size-[var(--ads-charttip-swatch)] shrink-0 rounded-[var(--ads-radius-xsm)]" :class="row.colorClass" :style="row.color ? { background: row.color } : undefined" />
-          <span class="min-w-0 flex-1">{{ row.label }}</span>
-          <span>{{ row.value }}</span>
-        </li>
-      </ul>
-    </div>
-  </DefinePanel>
-
-  <UTooltip
-    v-if="hasTrigger"
-    :delay-duration="delayDuration"
-    :content="{ side, align: 'center', sideOffset: 8 }"
-    :ui="tooltipUi"
-  >
-    <slot />
-    <template #content>
-      <ReusePanel />
-    </template>
-  </UTooltip>
-  <ReusePanel v-else />
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from "vue";
-import { createReusableTemplate } from "@vueuse/core";
-
-export type AdsCharttipRow = {
-  label: string;
-  value: string;
-  /** Classe de fundo, como `bg-ads-grafico-c1-400`. */
-  colorClass?: string;
-  /** Cor sem token. Preferir `colorClass`. */
-  color?: string;
-};
-
-const props = withDefaults(
-  defineProps<{
-    title?: string;
-    rows?: AdsCharttipRow[];
-    /** Figma `Property 1`. Com slot, escolhe o lado em que o painel abre, como no AdsTooltip. A seta não é desenhada. */
-    wing?: "up" | "down" | "left" | "right";
-    delayDuration?: number;
-  }>(),
-  {
-    title: "Título",
-    rows: () => [
-      { label: "Série 1", value: "12", colorClass: "bg-ads-grafico-c1-400" },
-      { label: "Série 2", value: "8", colorClass: "bg-ads-innovation-500" },
-      { label: "Série 3", value: "5", colorClass: "bg-ads-grafico-c3-400" },
-    ],
-    wing: "down",
-    delayDuration: 150,
-  },
-);
-
-const [DefinePanel, ReusePanel] = createReusableTemplate();
-
-const slots = useSlots();
-const hasTrigger = computed(() => Boolean(slots.default));
-
-const side = computed(() => {
-  if (props.wing === "down") return "bottom" as const;
-  if (props.wing === "left") return "left" as const;
-  if (props.wing === "right") return "right" as const;
-  return "top" as const;
-});
-
-/** O painel já tem fundo, raio e sombra: o conteúdo do UTooltip só posiciona. */
-const tooltipUi = {
-  content: "z-[70] h-auto rounded-none bg-transparent p-0 shadow-none ring-0",
-};
-</script>
+<template>
+  <DefinePanel>
+    <div class="flex min-w-[var(--ads-charttip-min-width)] flex-col gap-4 rounded-[var(--ads-tooltip-radius)] bg-[var(--ads-tooltip-bg)] p-4 text-[var(--ads-tooltip-title)] shadow-[var(--ads-shadow-level-1)]">
+      <p v-if="title" class="text-center text-base leading-[1.3] font-bold">{{ title }}</p>
+      <ul class="flex flex-col gap-2">
+        <li v-for="(row, index) in rows" :key="index" class="flex items-center gap-2 text-sm leading-[1.3]">
+          <span class="size-[var(--ads-charttip-swatch)] shrink-0 rounded-[var(--ads-radius-xsm)]" :class="row.colorClass" :style="row.color ? { background: row.color } : undefined" />
+          <span class="min-w-0 flex-1">{{ row.label }}</span>
+          <span>{{ row.value }}</span>
+        </li>
+      </ul>
+    </div>
+  </DefinePanel>
+
+  <UTooltip
+    v-if="hasTrigger"
+    :delay-duration="delayDuration"
+    :content="{ side, align: 'center', sideOffset: 8 }"
+    :ui="tooltipUi"
+  >
+    <slot />
+    <template #content>
+      <ReusePanel />
+    </template>
+  </UTooltip>
+  <ReusePanel v-else />
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+import { createReusableTemplate } from "@vueuse/core";
+
+export type AdsCharttipRow = {
+  label: string;
+  value: string;
+  /** Classe de fundo, como `bg-ads-grafico-c1-400`. */
+  colorClass?: string;
+  /** Cor sem token. Preferir `colorClass`. */
+  color?: string;
+};
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    rows?: AdsCharttipRow[];
+    /** Figma `Property 1`. Com slot, escolhe o lado em que o painel abre, como no AdsTooltip. A seta não é desenhada. */
+    wing?: "up" | "down" | "left" | "right";
+    delayDuration?: number;
+  }>(),
+  {
+    title: "Título",
+    rows: () => [
+      { label: "Série 1", value: "12", colorClass: "bg-ads-grafico-c1-400" },
+      { label: "Série 2", value: "8", colorClass: "bg-ads-innovation-500" },
+      { label: "Série 3", value: "5", colorClass: "bg-ads-grafico-c3-400" },
+    ],
+    wing: "down",
+    delayDuration: 150,
+  },
+);
+
+const [DefinePanel, ReusePanel] = createReusableTemplate();
+
+const slots = useSlots();
+const hasTrigger = computed(() => Boolean(slots.default));
+
+const side = computed(() => {
+  if (props.wing === "down") return "bottom" as const;
+  if (props.wing === "left") return "left" as const;
+  if (props.wing === "right") return "right" as const;
+  return "top" as const;
+});
+
+/** O painel já tem fundo, raio e sombra: o conteúdo do UTooltip só posiciona. */
+const tooltipUi = {
+  content: "z-[70] h-auto rounded-none bg-transparent p-0 shadow-none ring-0",
+};
+</script>