ads-nuxt 0.1.1 → 0.1.2

package/app/components/AdsNavbarDesk.vue

@@ -1,62 +1,62 @@
-<template>
-  <header class="flex h-[var(--ads-navbar-desk-height)] w-full items-center justify-between border-b border-[var(--ads-navbar-desk-border)] bg-[var(--ads-surface-card)] px-[var(--ads-navbar-desk-padding-x)] shadow-[0_2px_4px_-1px_color-mix(in_srgb,var(--color-ads-neutro-medio-60)_75%,transparent)]">
-    <div class="flex items-center gap-3">
-      <img :src="radarUrl" alt="RADAR" class="h-[21px] w-auto" />
-      <AdsProductTag v-if="product" :product="product" :label="productLabel" />
-    </div>
-    <div class="flex items-center gap-2">
-      <AdsBroadcast v-if="showBroadcast" />
-      <button
-        v-for="action in actions"
-        :key="action.id"
-        type="button"
-        class="flex size-[var(--ads-navbar-desk-action)] items-center justify-center rounded-[var(--ads-radius-xsm)] p-2 text-[var(--ads-text-secondary)] hover:bg-ads-neutro-claro-20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
-        :aria-label="action.label"
-        @click="emit('action', action.id)"
-      >
-        <UIcon :name="action.icon" class="size-[18px]" />
-      </button>
-      <span class="flex size-[var(--ads-navbar-desk-avatar)] items-center justify-center overflow-hidden rounded-full bg-ads-neutro-claro-30" aria-hidden="true">
-        <img v-if="avatarUrl" :src="avatarUrl" alt="" class="size-full object-cover" />
-        <UIcon v-else name="i-lucide-user" class="size-4 text-[var(--ads-text-secondary)]" />
-      </span>
-    </div>
-  </header>
-</template>
-
-<script setup lang="ts">
-import radarUrl from "../assets/brand/radar.svg?url";
-import AdsBroadcast from "./AdsBroadcast.vue";
-import AdsProductTag, { type AdsProductTagName } from "./AdsProductTag.vue";
-
-export type AdsNavbarDeskAction = {
-  id: string;
-  label: string;
-  icon: string;
-};
-
-withDefaults(
-  defineProps<{
-    product?: AdsProductTagName | null;
-    productLabel?: string;
-    showBroadcast?: boolean;
-    avatarUrl?: string;
-    actions?: AdsNavbarDeskAction[];
-  }>(),
-  {
-    product: "performance",
-    productLabel: "performance",
-    showBroadcast: true,
-    avatarUrl: "",
-    actions: () => [
-      { id: "alerts", label: "Alertas", icon: "i-lucide-bell" },
-      { id: "settings", label: "Configurações", icon: "i-lucide-settings" },
-      { id: "apps", label: "Aplicativos", icon: "i-lucide-layout-grid" },
-    ],
-  },
-);
-
-const emit = defineEmits<{
-  action: [id: string];
-}>();
-</script>
+<template>
+  <header class="flex h-[var(--ads-navbar-desk-height)] w-full items-center justify-between border-b border-[var(--ads-navbar-desk-border)] bg-[var(--ads-surface-card)] px-[var(--ads-navbar-desk-padding-x)] shadow-[0_2px_4px_-1px_color-mix(in_srgb,var(--color-ads-neutro-medio-60)_75%,transparent)]">
+    <div class="flex items-center gap-3">
+      <img :src="radarUrl" alt="RADAR" class="h-[21px] w-auto" />
+      <AdsProductTag v-if="product" :product="product" :label="productLabel" />
+    </div>
+    <div class="flex items-center gap-2">
+      <AdsBroadcast v-if="showBroadcast" />
+      <button
+        v-for="action in actions"
+        :key="action.id"
+        type="button"
+        class="flex size-[var(--ads-navbar-desk-action)] items-center justify-center rounded-[var(--ads-radius-xsm)] p-2 text-[var(--ads-text-secondary)] hover:bg-ads-neutro-claro-20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
+        :aria-label="action.label"
+        @click="emit('action', action.id)"
+      >
+        <UIcon :name="action.icon" class="size-[18px]" />
+      </button>
+      <span class="flex size-[var(--ads-navbar-desk-avatar)] items-center justify-center overflow-hidden rounded-full bg-ads-neutro-claro-30" aria-hidden="true">
+        <img v-if="avatarUrl" :src="avatarUrl" alt="" class="size-full object-cover" />
+        <UIcon v-else name="i-lucide-user" class="size-4 text-[var(--ads-text-secondary)]" />
+      </span>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import radarUrl from "../assets/brand/radar.svg?url";
+import AdsBroadcast from "./AdsBroadcast.vue";
+import AdsProductTag, { type AdsProductTagName } from "./AdsProductTag.vue";
+
+export type AdsNavbarDeskAction = {
+  id: string;
+  label: string;
+  icon: string;
+};
+
+withDefaults(
+  defineProps<{
+    product?: AdsProductTagName | null;
+    productLabel?: string;
+    showBroadcast?: boolean;
+    avatarUrl?: string;
+    actions?: AdsNavbarDeskAction[];
+  }>(),
+  {
+    product: "performance",
+    productLabel: "performance",
+    showBroadcast: true,
+    avatarUrl: "",
+    actions: () => [
+      { id: "alerts", label: "Alertas", icon: "i-lucide-bell" },
+      { id: "settings", label: "Configurações", icon: "i-lucide-settings" },
+      { id: "apps", label: "Aplicativos", icon: "i-lucide-layout-grid" },
+    ],
+  },
+);
+
+const emit = defineEmits<{
+  action: [id: string];
+}>();
+</script>

package/app/components/AdsNotabilityPill.vue

@@ -1,27 +1,27 @@
-<template>
-  <span
-    class="inline-flex h-[var(--ads-notability-height)] min-w-[var(--ads-notability-min-width)] shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full px-[var(--ads-notability-padding-x)] py-1 text-center text-[length:var(--ads-notability-font-size)] [font-weight:var(--ads-notability-weight)] leading-[1.2] whitespace-nowrap"
-    :class="surfaceClass"
-  >
-    {{ resolvedLabel }}
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { formatNotability } from "../utils/notability";
-
-const props = defineProps<{
-  notability: string;
-  label?: string;
-}>();
-
-const surfaces: Record<string, string> = {
-  image: "bg-[var(--ads-status-new-100)] text-[var(--ads-status-new-800)]",
-  traffic: "bg-[var(--ads-status-success-100)] text-[var(--ads-status-success-800)]",
-  profit: "bg-[var(--ads-status-innovation-100)] text-[var(--ads-status-innovation-800)]",
-};
-
-const surfaceClass = computed(() => surfaces[props.notability] ?? surfaces.image);
-const resolvedLabel = computed(() => props.label ?? formatNotability(props.notability));
-</script>
+<template>
+  <span
+    class="inline-flex h-[var(--ads-notability-height)] min-w-[var(--ads-notability-min-width)] shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full px-[var(--ads-notability-padding-x)] py-1 text-center text-[length:var(--ads-notability-font-size)] [font-weight:var(--ads-notability-weight)] leading-[1.2] whitespace-nowrap"
+    :class="surfaceClass"
+  >
+    {{ resolvedLabel }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { formatNotability } from "../utils/notability";
+
+const props = defineProps<{
+  notability: string;
+  label?: string;
+}>();
+
+const surfaces: Record<string, string> = {
+  image: "bg-[var(--ads-status-new-100)] text-[var(--ads-status-new-800)]",
+  traffic: "bg-[var(--ads-status-success-100)] text-[var(--ads-status-success-800)]",
+  profit: "bg-[var(--ads-status-innovation-100)] text-[var(--ads-status-innovation-800)]",
+};
+
+const surfaceClass = computed(() => surfaces[props.notability] ?? surfaces.image);
+const resolvedLabel = computed(() => props.label ?? formatNotability(props.notability));
+</script>

package/app/components/AdsNumberInput.vue

@@ -1,166 +1,166 @@
-<template>
-  <div class="flex min-w-0 flex-col gap-0.5">
-    <div
-      v-if="label || info"
-      class="flex items-center gap-0.5 text-[length:var(--ads-number-label-size)] leading-[1.2]"
-      :class="supportClass"
-    >
-      <label v-if="label" :for="fieldId">{{ label }}</label>
-      <InvertedTooltip v-if="info" :text="info">
-        <span class="inline-flex">
-          <UIcon name="i-lucide-info" class="size-3 text-xs" />
-        </span>
-      </InvertedTooltip>
-    </div>
-
-    <div
-      class="flex h-[var(--ads-number-height)] w-full transition-colors min-w-0 items-center gap-[var(--ads-number-gap)] rounded-[var(--ads-number-radius)] px-[var(--ads-number-padding-x)]"
-      :class="fieldClass"
-      :data-state="visualState"
-    >
-      <input
-        :id="fieldId"
-        ref="inputEl"
-        :value="displayValue"
-        type="number"
-        inputmode="decimal"
-        size="4"
-        class="w-0 min-w-0 flex-1 bg-transparent text-[length:var(--ads-number-font-size)] leading-[1.3] outline-none placeholder:text-current disabled:cursor-not-allowed [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-        :placeholder="placeholder"
-        :disabled="isDisabled"
-        :min="min"
-        :step="step"
-        :aria-invalid="error ? true : undefined"
-        :aria-describedby="supportText ? supportId : undefined"
-        @input="onInput"
-        @focus="emit('focus', $event)"
-        @blur="emit('blur', $event)"
-      >
-      <div class="flex shrink-0 flex-col">
-        <button
-          type="button"
-          class="inline-flex size-4 items-center justify-center rounded-sm text-current hover:bg-[var(--ads-button-secondary-hover)] disabled:cursor-not-allowed"
-          aria-label="Aumentar valor"
-          :disabled="isDisabled"
-          @mousedown.prevent="stepBy(1)"
-        >
-          <UIcon name="i-lucide-chevron-up" class="size-3.5" />
-        </button>
-        <button
-          type="button"
-          class="inline-flex size-4 items-center justify-center rounded-sm text-current hover:bg-[var(--ads-button-secondary-hover)] disabled:cursor-not-allowed"
-          aria-label="Diminuir valor"
-          :disabled="isDisabled"
-          @mousedown.prevent="stepBy(-1)"
-        >
-          <UIcon name="i-lucide-chevron-down" class="size-3.5" />
-        </button>
-      </div>
-      <span v-if="suffix" class="shrink-0 text-[length:var(--ads-number-font-size)] leading-[1.3]">{{ suffix }}</span>
-    </div>
-
-    <p
-      v-if="supportText"
-      :id="supportId"
-      class="text-xs leading-[1.2]"
-      :class="supportClass"
-    >
-      {{ supportText }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useId, useTemplateRef } from "vue";
-import InvertedTooltip from "./InvertedTooltip.vue";
-
-export type AdsNumberInputState = "default" | "active" | "focus" | "error" | "disabled";
-
-const props = withDefaults(
-  defineProps<{
-    label?: string;
-    hint?: string;
-    info?: string;
-    error?: string;
-    placeholder?: string;
-    suffix?: string;
-    disabled?: boolean;
-    min?: string | number;
-    step?: string | number;
-    /** Estado congelado para a documentação. `null` segue o campo. */
-    state?: AdsNumberInputState | null;
-  }>(),
-  {
-    label: "",
-    hint: "",
-    info: "",
-    error: "",
-    placeholder: "",
-    suffix: "",
-    disabled: false,
-    state: null,
-  },
-);
-
-const model = defineModel<string | number>({ default: "" });
-
-const emit = defineEmits<{
-  focus: [event: FocusEvent];
-  blur: [event: FocusEvent];
-}>();
-
-const fieldId = useId();
-const supportId = useId();
-const inputEl = useTemplateRef<HTMLInputElement>("inputEl");
-
-const displayValue = computed(() =>
-  model.value === undefined || model.value === null ? "" : String(model.value),
-);
-
-const onInput = (event: Event) => {
-  model.value = (event.target as HTMLInputElement).value;
-};
-
-const isDisabled = computed(() => props.disabled || props.state === "disabled");
-
-const stepBy = (direction: 1 | -1) => {
-  const input = inputEl.value;
-  if (!input || isDisabled.value) return;
-  if (input.value === "") input.value = String(props.min ?? 0);
-  if (direction > 0) input.stepUp();
-  else input.stepDown();
-  model.value = input.value;
-};
-
-const visualState = computed<AdsNumberInputState>(() => {
-  if (isDisabled.value) return "disabled";
-  if (props.state) return props.state;
-  if (props.error) return "error";
-  return displayValue.value ? "active" : "default";
-});
-
-const supportText = computed(() => props.error || props.hint);
-const supportClass = computed(() =>
-  visualState.value === "disabled"
-    ? "text-[var(--ads-text-tertiary)]"
-    : "text-[var(--ads-text-secondary)]",
-);
-
-const fieldClass = computed(() => {
-  const interactiveFocus = props.state === null && !isDisabled.value && !props.error;
-  const focus = interactiveFocus
-    ? "hover:not-focus-within:border-[var(--ads-number-hover-border)] focus-within:border-(length:--ads-border-width-slim) focus-within:border-[var(--ads-number-focus-border)]"
-    : "";
-
-  if (visualState.value === "disabled") {
-    return "border border-[var(--ads-number-disabled-border)] bg-[var(--ads-number-disabled-background)] text-[var(--ads-number-disabled-text)]";
-  }
-  if (visualState.value === "error") {
-    return `border-(length:--ads-border-width-slim) border-[var(--ads-number-error-border)] bg-[var(--ads-number-background)] text-[var(--ads-number-text)] ${focus}`;
-  }
-  if (visualState.value === "focus") {
-    return "border-(length:--ads-border-width-slim) border-[var(--ads-number-focus-border)] bg-[var(--ads-number-background)] text-[var(--ads-number-text)]";
-  }
-  return `border border-[var(--ads-number-border)] bg-[var(--ads-number-background)] text-[var(--ads-number-text)] ${focus}`;
-});
-</script>
+<template>
+  <div class="flex min-w-0 flex-col gap-0.5">
+    <div
+      v-if="label || info"
+      class="flex items-center gap-0.5 text-[length:var(--ads-number-label-size)] leading-[1.2]"
+      :class="supportClass"
+    >
+      <label v-if="label" :for="fieldId">{{ label }}</label>
+      <InvertedTooltip v-if="info" :text="info">
+        <span class="inline-flex">
+          <UIcon name="i-lucide-info" class="size-3 text-xs" />
+        </span>
+      </InvertedTooltip>
+    </div>
+
+    <div
+      class="flex h-[var(--ads-number-height)] w-full transition-colors min-w-0 items-center gap-[var(--ads-number-gap)] rounded-[var(--ads-number-radius)] px-[var(--ads-number-padding-x)]"
+      :class="fieldClass"
+      :data-state="visualState"
+    >
+      <input
+        :id="fieldId"
+        ref="inputEl"
+        :value="displayValue"
+        type="number"
+        inputmode="decimal"
+        size="4"
+        class="w-0 min-w-0 flex-1 bg-transparent text-[length:var(--ads-number-font-size)] leading-[1.3] outline-none placeholder:text-current disabled:cursor-not-allowed [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        :placeholder="placeholder"
+        :disabled="isDisabled"
+        :min="min"
+        :step="step"
+        :aria-invalid="error ? true : undefined"
+        :aria-describedby="supportText ? supportId : undefined"
+        @input="onInput"
+        @focus="emit('focus', $event)"
+        @blur="emit('blur', $event)"
+      >
+      <div class="flex shrink-0 flex-col">
+        <button
+          type="button"
+          class="inline-flex size-4 items-center justify-center rounded-sm text-current hover:bg-[var(--ads-button-secondary-hover)] disabled:cursor-not-allowed"
+          aria-label="Aumentar valor"
+          :disabled="isDisabled"
+          @mousedown.prevent="stepBy(1)"
+        >
+          <UIcon name="i-lucide-chevron-up" class="size-3.5" />
+        </button>
+        <button
+          type="button"
+          class="inline-flex size-4 items-center justify-center rounded-sm text-current hover:bg-[var(--ads-button-secondary-hover)] disabled:cursor-not-allowed"
+          aria-label="Diminuir valor"
+          :disabled="isDisabled"
+          @mousedown.prevent="stepBy(-1)"
+        >
+          <UIcon name="i-lucide-chevron-down" class="size-3.5" />
+        </button>
+      </div>
+      <span v-if="suffix" class="shrink-0 text-[length:var(--ads-number-font-size)] leading-[1.3]">{{ suffix }}</span>
+    </div>
+
+    <p
+      v-if="supportText"
+      :id="supportId"
+      class="text-xs leading-[1.2]"
+      :class="supportClass"
+    >
+      {{ supportText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useId, useTemplateRef } from "vue";
+import InvertedTooltip from "./InvertedTooltip.vue";
+
+export type AdsNumberInputState = "default" | "active" | "focus" | "error" | "disabled";
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    hint?: string;
+    info?: string;
+    error?: string;
+    placeholder?: string;
+    suffix?: string;
+    disabled?: boolean;
+    min?: string | number;
+    step?: string | number;
+    /** Estado congelado para a documentação. `null` segue o campo. */
+    state?: AdsNumberInputState | null;
+  }>(),
+  {
+    label: "",
+    hint: "",
+    info: "",
+    error: "",
+    placeholder: "",
+    suffix: "",
+    disabled: false,
+    state: null,
+  },
+);
+
+const model = defineModel<string | number>({ default: "" });
+
+const emit = defineEmits<{
+  focus: [event: FocusEvent];
+  blur: [event: FocusEvent];
+}>();
+
+const fieldId = useId();
+const supportId = useId();
+const inputEl = useTemplateRef<HTMLInputElement>("inputEl");
+
+const displayValue = computed(() =>
+  model.value === undefined || model.value === null ? "" : String(model.value),
+);
+
+const onInput = (event: Event) => {
+  model.value = (event.target as HTMLInputElement).value;
+};
+
+const isDisabled = computed(() => props.disabled || props.state === "disabled");
+
+const stepBy = (direction: 1 | -1) => {
+  const input = inputEl.value;
+  if (!input || isDisabled.value) return;
+  if (input.value === "") input.value = String(props.min ?? 0);
+  if (direction > 0) input.stepUp();
+  else input.stepDown();
+  model.value = input.value;
+};
+
+const visualState = computed<AdsNumberInputState>(() => {
+  if (isDisabled.value) return "disabled";
+  if (props.state) return props.state;
+  if (props.error) return "error";
+  return displayValue.value ? "active" : "default";
+});
+
+const supportText = computed(() => props.error || props.hint);
+const supportClass = computed(() =>
+  visualState.value === "disabled"
+    ? "text-[var(--ads-text-tertiary)]"
+    : "text-[var(--ads-text-secondary)]",
+);
+
+const fieldClass = computed(() => {
+  const interactiveFocus = props.state === null && !isDisabled.value && !props.error;
+  const focus = interactiveFocus
+    ? "hover:not-focus-within:border-[var(--ads-number-hover-border)] focus-within:border-(length:--ads-border-width-slim) focus-within:border-[var(--ads-number-focus-border)]"
+    : "";
+
+  if (visualState.value === "disabled") {
+    return "border border-[var(--ads-number-disabled-border)] bg-[var(--ads-number-disabled-background)] text-[var(--ads-number-disabled-text)]";
+  }
+  if (visualState.value === "error") {
+    return `border-(length:--ads-border-width-slim) border-[var(--ads-number-error-border)] bg-[var(--ads-number-background)] text-[var(--ads-number-text)] ${focus}`;
+  }
+  if (visualState.value === "focus") {
+    return "border-(length:--ads-border-width-slim) border-[var(--ads-number-focus-border)] bg-[var(--ads-number-background)] text-[var(--ads-number-text)]";
+  }
+  return `border border-[var(--ads-number-border)] bg-[var(--ads-number-background)] text-[var(--ads-number-text)] ${focus}`;
+});
+</script>