ads-nuxt 0.1.0 → 0.1.2

package/app/components/AdsSearchInput.vue

@@ -1,113 +1,113 @@
-<template>
-  <div class="flex w-full min-w-0 flex-col gap-0.5">
-    <div
-      class="flex items-center gap-2 rounded-[var(--ads-search-radius)] transition-colors px-[var(--ads-search-padding-x)]"
-      :class="[fieldClass, size === 'sm' ? 'h-[var(--ads-search-sm-height)]' : 'h-[var(--ads-search-md-height)]']"
-      :data-state="visualState"
-    >
-      <UIcon :name="icon" :class="iconClass" />
-      <input
-        v-model="model"
-        type="search"
-        autocomplete="off"
-        class="min-w-0 flex-1 bg-transparent leading-[1.3] outline-none placeholder:text-current disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden"
-        :class="size === 'sm' ? 'text-[length:var(--ads-search-sm-font-size)]' : 'text-[length:var(--ads-search-md-font-size)]'"
-        :placeholder="placeholder"
-        :disabled="isDisabled"
-        :aria-label="ariaLabel || placeholder"
-        :aria-describedby="hint ? hintId : undefined"
-      >
-      <button
-        v-if="showClear"
-        type="button"
-        class="inline-flex shrink-0"
-        aria-label="Limpar busca"
-        @click="model = ''"
-      >
-        <UIcon name="i-lucide-x" :class="iconClass" />
-      </button>
-    </div>
-    <p
-      v-if="hint"
-      :id="hintId"
-      :class="hintClass"
-    >
-      {{ hint }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useId } from "vue";
-
-export type AdsSearchInputState = "default" | "active" | "focus" | "disabled";
-export type AdsSearchInputSize = "md" | "sm";
-
-const props = withDefaults(
-  defineProps<{
-    placeholder?: string;
-    ariaLabel?: string;
-    hint?: string;
-    disabled?: boolean;
-    icon?: string;
-    size?: AdsSearchInputSize;
-    /** Estado congelado para a documentação. `null` segue o campo. */
-    state?: AdsSearchInputState | null;
-  }>(),
-  {
-    placeholder: "Pesquisar",
-    ariaLabel: "",
-    hint: "",
-    disabled: false,
-    icon: "i-lucide-search",
-    size: "md",
-    state: null,
-  },
-);
-
-const model = defineModel<string>({ default: "" });
-
-const hintId = useId();
-
-const isDisabled = computed(() => props.disabled || props.state === "disabled");
-
-const visualState = computed<AdsSearchInputState>(() => {
-  if (isDisabled.value) return "disabled";
-  if (props.state) return props.state;
-  return model.value ? "active" : "default";
-});
-
-const showClear = computed(() => visualState.value === "active" || visualState.value === "focus");
-
-const iconClass = computed(() =>
-  props.size === "sm"
-    ? "size-4 shrink-0 text-base"
-    : "size-[18px] shrink-0 text-[18px]",
-);
-
-const hintClass = computed(() => {
-  const tone = visualState.value === "disabled"
-    ? "text-[var(--ads-text-tertiary)]"
-    : "text-[var(--ads-text-secondary)]";
-  const type = props.size === "sm" ? "text-[10px] leading-[1.1]" : "text-xs leading-[1.2]";
-  return `${type} ${tone}`;
-});
-
-const fieldClass = computed(() => {
-  const tone = visualState.value === "default" || visualState.value === "disabled"
-    ? "text-[var(--ads-search-placeholder)]"
-    : "text-[var(--ads-search-text)]";
-  const interactiveFocus = props.state === null && !isDisabled.value;
-  const focus = interactiveFocus
-    ? "hover:not-focus-within:border-[var(--ads-search-hover-border)] focus-within:border-(length:--ads-border-width-slim) focus-within:border-[var(--ads-search-focus-border)]"
-    : "";
-
-  if (visualState.value === "disabled") {
-    return `border border-[var(--ads-search-disabled-border)] bg-[var(--ads-search-disabled-background)] ${tone}`;
-  }
-  if (visualState.value === "focus") {
-    return `border-(length:--ads-border-width-slim) border-[var(--ads-search-focus-border)] bg-[var(--ads-search-background)] ${tone}`;
-  }
-  return `border border-[var(--ads-search-border)] bg-[var(--ads-search-background)] ${tone} ${focus}`;
-});
-</script>
+<template>
+  <div class="flex w-full min-w-0 flex-col gap-0.5">
+    <div
+      class="flex items-center gap-2 rounded-[var(--ads-search-radius)] transition-colors px-[var(--ads-search-padding-x)]"
+      :class="[fieldClass, size === 'sm' ? 'h-[var(--ads-search-sm-height)]' : 'h-[var(--ads-search-md-height)]']"
+      :data-state="visualState"
+    >
+      <UIcon :name="icon" :class="iconClass" />
+      <input
+        v-model="model"
+        type="search"
+        autocomplete="off"
+        class="min-w-0 flex-1 bg-transparent leading-[1.3] outline-none placeholder:text-current disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden"
+        :class="size === 'sm' ? 'text-[length:var(--ads-search-sm-font-size)]' : 'text-[length:var(--ads-search-md-font-size)]'"
+        :placeholder="placeholder"
+        :disabled="isDisabled"
+        :aria-label="ariaLabel || placeholder"
+        :aria-describedby="hint ? hintId : undefined"
+      >
+      <button
+        v-if="showClear"
+        type="button"
+        class="inline-flex shrink-0"
+        aria-label="Limpar busca"
+        @click="model = ''"
+      >
+        <UIcon name="i-lucide-x" :class="iconClass" />
+      </button>
+    </div>
+    <p
+      v-if="hint"
+      :id="hintId"
+      :class="hintClass"
+    >
+      {{ hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from "vue";
+
+export type AdsSearchInputState = "default" | "active" | "focus" | "disabled";
+export type AdsSearchInputSize = "md" | "sm";
+
+const props = withDefaults(
+  defineProps<{
+    placeholder?: string;
+    ariaLabel?: string;
+    hint?: string;
+    disabled?: boolean;
+    icon?: string;
+    size?: AdsSearchInputSize;
+    /** Estado congelado para a documentação. `null` segue o campo. */
+    state?: AdsSearchInputState | null;
+  }>(),
+  {
+    placeholder: "Pesquisar",
+    ariaLabel: "",
+    hint: "",
+    disabled: false,
+    icon: "i-lucide-search",
+    size: "md",
+    state: null,
+  },
+);
+
+const model = defineModel<string>({ default: "" });
+
+const hintId = useId();
+
+const isDisabled = computed(() => props.disabled || props.state === "disabled");
+
+const visualState = computed<AdsSearchInputState>(() => {
+  if (isDisabled.value) return "disabled";
+  if (props.state) return props.state;
+  return model.value ? "active" : "default";
+});
+
+const showClear = computed(() => visualState.value === "active" || visualState.value === "focus");
+
+const iconClass = computed(() =>
+  props.size === "sm"
+    ? "size-4 shrink-0 text-base"
+    : "size-[18px] shrink-0 text-[18px]",
+);
+
+const hintClass = computed(() => {
+  const tone = visualState.value === "disabled"
+    ? "text-[var(--ads-text-tertiary)]"
+    : "text-[var(--ads-text-secondary)]";
+  const type = props.size === "sm" ? "text-[10px] leading-[1.1]" : "text-xs leading-[1.2]";
+  return `${type} ${tone}`;
+});
+
+const fieldClass = computed(() => {
+  const tone = visualState.value === "default" || visualState.value === "disabled"
+    ? "text-[var(--ads-search-placeholder)]"
+    : "text-[var(--ads-search-text)]";
+  const interactiveFocus = props.state === null && !isDisabled.value;
+  const focus = interactiveFocus
+    ? "hover:not-focus-within:border-[var(--ads-search-hover-border)] focus-within:border-(length:--ads-border-width-slim) focus-within:border-[var(--ads-search-focus-border)]"
+    : "";
+
+  if (visualState.value === "disabled") {
+    return `border border-[var(--ads-search-disabled-border)] bg-[var(--ads-search-disabled-background)] ${tone}`;
+  }
+  if (visualState.value === "focus") {
+    return `border-(length:--ads-border-width-slim) border-[var(--ads-search-focus-border)] bg-[var(--ads-search-background)] ${tone}`;
+  }
+  return `border border-[var(--ads-search-border)] bg-[var(--ads-search-background)] ${tone} ${focus}`;
+});
+</script>

package/app/components/AdsSegmentedTabs.vue

@@ -1,28 +1,28 @@
-<template>
-  <UTabs
-    v-model="model"
-    :items="items"
-    :content="false"
-    variant="pill"
-    color="neutral"
-    :ui="adsSegmentedTabsUi"
-    :aria-label="ariaLabel"
-  />
-</template>
-
-<script setup lang="ts" generic="T extends string | number">
-import type { TabsItem } from "@nuxt/ui";
-import { adsSegmentedTabsUi } from "../theme/ads-theme";
-
-withDefaults(
-  defineProps<{
-    items: TabsItem[];
-    ariaLabel?: string;
-  }>(),
-  {
-    ariaLabel: undefined,
-  },
-);
-
-const model = defineModel<T>({ required: true });
-</script>
+<template>
+  <UTabs
+    v-model="model"
+    :items="items"
+    :content="false"
+    variant="pill"
+    color="neutral"
+    :ui="adsSegmentedTabsUi"
+    :aria-label="ariaLabel"
+  />
+</template>
+
+<script setup lang="ts" generic="T extends string | number">
+import type { TabsItem } from "@nuxt/ui";
+import { adsSegmentedTabsUi } from "../theme/ads-theme";
+
+withDefaults(
+  defineProps<{
+    items: TabsItem[];
+    ariaLabel?: string;
+  }>(),
+  {
+    ariaLabel: undefined,
+  },
+);
+
+const model = defineModel<T>({ required: true });
+</script>

package/app/components/AdsSideMenu.vue

@@ -1,101 +1,101 @@
-<template>
-  <nav
-    class="flex w-[var(--ads-side-width)] flex-col border-r-[0.5px] border-[var(--ads-side-border)] bg-[var(--ads-surface-card)]"
-    aria-label="Menu lateral"
-  >
-    <template v-for="item in items" :key="item.id">
-      <component
-        :is="item.to && !item.children?.length ? NuxtLink : 'button'"
-        v-bind="item.to && !item.children?.length ? { to: item.to } : { type: 'button' }"
-        class="flex h-[var(--ads-side-row-height)] items-center gap-1 border-b-[0.5px] border-[var(--ads-side-border)] py-2 pe-1 text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
-        :class="rowClass(item, false)"
-        :aria-expanded="item.children?.length ? isOpen(item.id) : undefined"
-        @click="onRow(item)"
-      >
-        <span class="flex min-w-0 flex-1 items-center gap-2">
-          <UIcon :name="item.icon || 'i-lucide-sun'" class="size-4 shrink-0 text-ads-neutro-escuro-500" />
-          <span class="line-clamp-2 text-xs font-bold leading-[1.2] text-[var(--ads-text-secondary)]">{{ item.label }}</span>
-        </span>
-        <span
-          v-if="item.badge"
-          class="size-[var(--ads-side-badge)] shrink-0 rounded-full bg-[var(--ads-funcional-opportunity-200)]"
-          aria-hidden="true"
-        />
-        <AdsMiniPill v-if="item.pill" type="novo" :label="item.pill" />
-        <UIcon
-          v-if="item.children?.length"
-          name="i-lucide-chevron-down"
-          class="size-4 shrink-0 text-ads-neutro-medio-100 transition-transform duration-150"
-          :class="isOpen(item.id) ? '' : '-rotate-90'"
-        />
-      </component>
-      <component
-        :is="child.to ? NuxtLink : 'button'"
-        v-for="child in isOpen(item.id) ? item.children : []"
-        :key="child.id"
-        v-bind="child.to ? { to: child.to } : { type: 'button' }"
-        class="flex h-[var(--ads-side-row-height)] items-center gap-2 border-b-[0.5px] border-[var(--ads-side-border)] py-2 pe-1 ps-6 text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
-        :class="rowClass(child, true)"
-        @click="emit('select', child.id)"
-      >
-        <UIcon :name="child.icon || 'i-lucide-sun'" class="size-4 shrink-0 text-ads-neutro-escuro-500" />
-        <span class="line-clamp-2 min-w-0 flex-1 text-xs font-bold leading-[1.2] text-[var(--ads-text-secondary)]">{{ child.label }}</span>
-        <AdsMiniPill v-if="child.pill" type="novo" :label="child.pill" />
-      </component>
-    </template>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import type { RouteLocationRaw } from "vue-router";
-import { NuxtLink } from "#components";
-import AdsMiniPill from "./AdsMiniPill.vue";
-
-export type AdsSideMenuItem = {
-  id: string;
-  label: string;
-  icon?: string;
-  to?: RouteLocationRaw;
-  children?: AdsSideMenuItem[];
-  /** Texto da mini pill. Vazio esconde. */
-  pill?: string;
-  /** Ponto de 8px (Figma Show Badge no item mãe). */
-  badge?: boolean;
-};
-
-const props = withDefaults(
-  defineProps<{
-    items: AdsSideMenuItem[];
-    /** Pais abertos no primeiro render. O Figma não desenha o clique. */
-    defaultOpen?: string[];
-  }>(),
-  {
-    defaultOpen: () => [],
-  },
-);
-
-const emit = defineEmits<{
-  select: [id: string];
-}>();
-
-const openIds = ref(new Set(props.defaultOpen));
-
-const isOpen = (id: string) => openIds.value.has(id);
-
-const rowClass = (item: AdsSideMenuItem, child: boolean) => {
-  if (child) return "bg-[var(--ads-side-child-bg)]";
-  if (item.children?.length && isOpen(item.id)) return "bg-[var(--ads-side-open-bg)] ps-4";
-  return "bg-[var(--ads-surface-card)] ps-4";
-};
-
-const onRow = (item: AdsSideMenuItem) => {
-  if (item.children?.length) {
-    const next = new Set(openIds.value);
-    if (next.has(item.id)) next.delete(item.id);
-    else next.add(item.id);
-    openIds.value = next;
-  }
-  emit("select", item.id);
-};
-</script>
+<template>
+  <nav
+    class="flex w-[var(--ads-side-width)] flex-col border-r-[0.5px] border-[var(--ads-side-border)] bg-[var(--ads-surface-card)]"
+    aria-label="Menu lateral"
+  >
+    <template v-for="item in items" :key="item.id">
+      <component
+        :is="item.to && !item.children?.length ? NuxtLink : 'button'"
+        v-bind="item.to && !item.children?.length ? { to: item.to } : { type: 'button' }"
+        class="flex h-[var(--ads-side-row-height)] items-center gap-1 border-b-[0.5px] border-[var(--ads-side-border)] py-2 pe-1 text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
+        :class="rowClass(item, false)"
+        :aria-expanded="item.children?.length ? isOpen(item.id) : undefined"
+        @click="onRow(item)"
+      >
+        <span class="flex min-w-0 flex-1 items-center gap-2">
+          <UIcon :name="item.icon || 'i-lucide-sun'" class="size-4 shrink-0 text-ads-neutro-escuro-500" />
+          <span class="line-clamp-2 text-xs font-bold leading-[1.2] text-[var(--ads-text-secondary)]">{{ item.label }}</span>
+        </span>
+        <span
+          v-if="item.badge"
+          class="size-[var(--ads-side-badge)] shrink-0 rounded-full bg-[var(--ads-funcional-opportunity-200)]"
+          aria-hidden="true"
+        />
+        <AdsMiniPill v-if="item.pill" type="novo" :label="item.pill" />
+        <UIcon
+          v-if="item.children?.length"
+          name="i-lucide-chevron-down"
+          class="size-4 shrink-0 text-ads-neutro-medio-100 transition-transform duration-150"
+          :class="isOpen(item.id) ? '' : '-rotate-90'"
+        />
+      </component>
+      <component
+        :is="child.to ? NuxtLink : 'button'"
+        v-for="child in isOpen(item.id) ? item.children : []"
+        :key="child.id"
+        v-bind="child.to ? { to: child.to } : { type: 'button' }"
+        class="flex h-[var(--ads-side-row-height)] items-center gap-2 border-b-[0.5px] border-[var(--ads-side-border)] py-2 pe-1 ps-6 text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
+        :class="rowClass(child, true)"
+        @click="emit('select', child.id)"
+      >
+        <UIcon :name="child.icon || 'i-lucide-sun'" class="size-4 shrink-0 text-ads-neutro-escuro-500" />
+        <span class="line-clamp-2 min-w-0 flex-1 text-xs font-bold leading-[1.2] text-[var(--ads-text-secondary)]">{{ child.label }}</span>
+        <AdsMiniPill v-if="child.pill" type="novo" :label="child.pill" />
+      </component>
+    </template>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { RouteLocationRaw } from "vue-router";
+import { NuxtLink } from "#components";
+import AdsMiniPill from "./AdsMiniPill.vue";
+
+export type AdsSideMenuItem = {
+  id: string;
+  label: string;
+  icon?: string;
+  to?: RouteLocationRaw;
+  children?: AdsSideMenuItem[];
+  /** Texto da mini pill. Vazio esconde. */
+  pill?: string;
+  /** Ponto de 8px (Figma Show Badge no item mãe). */
+  badge?: boolean;
+};
+
+const props = withDefaults(
+  defineProps<{
+    items: AdsSideMenuItem[];
+    /** Pais abertos no primeiro render. O Figma não desenha o clique. */
+    defaultOpen?: string[];
+  }>(),
+  {
+    defaultOpen: () => [],
+  },
+);
+
+const emit = defineEmits<{
+  select: [id: string];
+}>();
+
+const openIds = ref(new Set(props.defaultOpen));
+
+const isOpen = (id: string) => openIds.value.has(id);
+
+const rowClass = (item: AdsSideMenuItem, child: boolean) => {
+  if (child) return "bg-[var(--ads-side-child-bg)]";
+  if (item.children?.length && isOpen(item.id)) return "bg-[var(--ads-side-open-bg)] ps-4";
+  return "bg-[var(--ads-surface-card)] ps-4";
+};
+
+const onRow = (item: AdsSideMenuItem) => {
+  if (item.children?.length) {
+    const next = new Set(openIds.value);
+    if (next.has(item.id)) next.delete(item.id);
+    else next.add(item.id);
+    openIds.value = next;
+  }
+  emit("select", item.id);
+};
+</script>

package/app/components/AdsSmalltip.vue

@@ -1,44 +1,44 @@
-<template>
-  <UTooltip
-    v-if="hasTrigger"
-    arrow
-    :delay-duration="delayDuration"
-    :content="{ side: 'top', align: 'center', sideOffset: 4 }"
-    :ui="tooltipUi"
-  >
-    <slot />
-    <template #content>
-      <span class="text-[length:var(--ads-tooltip-small-font-size)] leading-[1.1] text-[var(--ads-tooltip-title)]">{{ text }}</span>
-    </template>
-  </UTooltip>
-  <p
-    v-else
-    class="inline-flex rounded-[var(--ads-tooltip-radius)] bg-[var(--ads-tooltip-bg)] p-[var(--ads-tooltip-small-padding)] text-[length:var(--ads-tooltip-small-font-size)] leading-[1.1] text-[var(--ads-tooltip-title)] shadow-[var(--ads-shadow-level-1)]"
-  >
-    {{ text }}
-  </p>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from "vue";
-
-withDefaults(
-  defineProps<{
-    text?: string;
-    delayDuration?: number;
-  }>(),
-  {
-    text: "Clique para ver mais",
-    delayDuration: 150,
-  },
-);
-
-const slots = useSlots();
-const hasTrigger = computed(() => Boolean(slots.default));
-
-const tooltipUi = {
-  content:
-    "z-[70] rounded-[var(--ads-tooltip-radius)] bg-[var(--ads-tooltip-bg)] p-[var(--ads-tooltip-small-padding)] shadow-[var(--ads-shadow-level-1)] ring-0",
-  arrow: "fill-[var(--ads-tooltip-bg)]",
-};
-</script>
+<template>
+  <UTooltip
+    v-if="hasTrigger"
+    arrow
+    :delay-duration="delayDuration"
+    :content="{ side: 'top', align: 'center', sideOffset: 4 }"
+    :ui="tooltipUi"
+  >
+    <slot />
+    <template #content>
+      <span class="text-[length:var(--ads-tooltip-small-font-size)] leading-[1.1] text-[var(--ads-tooltip-title)]">{{ text }}</span>
+    </template>
+  </UTooltip>
+  <p
+    v-else
+    class="inline-flex rounded-[var(--ads-tooltip-radius)] bg-[var(--ads-tooltip-bg)] p-[var(--ads-tooltip-small-padding)] text-[length:var(--ads-tooltip-small-font-size)] leading-[1.1] text-[var(--ads-tooltip-title)] shadow-[var(--ads-shadow-level-1)]"
+  >
+    {{ text }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+
+withDefaults(
+  defineProps<{
+    text?: string;
+    delayDuration?: number;
+  }>(),
+  {
+    text: "Clique para ver mais",
+    delayDuration: 150,
+  },
+);
+
+const slots = useSlots();
+const hasTrigger = computed(() => Boolean(slots.default));
+
+const tooltipUi = {
+  content:
+    "z-[70] rounded-[var(--ads-tooltip-radius)] bg-[var(--ads-tooltip-bg)] p-[var(--ads-tooltip-small-padding)] shadow-[var(--ads-shadow-level-1)] ring-0",
+  arrow: "fill-[var(--ads-tooltip-bg)]",
+};
+</script>