ads-nuxt 0.1.0 → 0.1.2

package/app/components/AdsPagination.vue

@@ -1,91 +1,91 @@
-<template>
-  <nav class="inline-flex items-center gap-[var(--ads-pagination-gap)] py-1" :aria-label="ariaLabel">
-    <button
-      type="button"
-      class="py-0.5 text-sm leading-[1.3] text-[var(--ads-text-secondary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)] disabled:cursor-not-allowed disabled:text-[var(--ads-text-tertiary)]"
-      :disabled="page <= 1"
-      @click="go(page - 1)"
-    >
-      {{ prevLabel }}
-    </button>
-    <div class="flex items-center gap-[var(--ads-pagination-number-gap)]">
-      <template v-for="item in items" :key="item.key">
-        <span v-if="item.kind === 'gap'" class="px-1 text-sm text-ads-neutro-escuro-600" aria-hidden="true">…</span>
-        <button
-          v-else
-          type="button"
-          class="flex size-[var(--ads-pagination-cell)] items-center justify-center rounded-[var(--ads-radius-xsm)] text-sm leading-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
-          :class="item.page === page ? 'bg-[var(--ads-pagination-selected)] text-[var(--ads-text-contrast)]' : 'text-[var(--ads-pagination-number)] hover:bg-ads-neutro-claro-20'"
-          :aria-current="item.page === page ? 'page' : undefined"
-          @click="go(item.page)"
-        >
-          {{ item.page }}
-        </button>
-      </template>
-    </div>
-    <button
-      type="button"
-      class="py-0.5 text-sm leading-[1.3] text-[var(--ads-text-secondary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)] disabled:cursor-not-allowed disabled:text-[var(--ads-text-tertiary)]"
-      :disabled="page >= totalPages"
-      @click="go(page + 1)"
-    >
-      {{ nextLabel }}
-    </button>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    page?: number;
-    totalPages?: number;
-    prevLabel?: string;
-    nextLabel?: string;
-    ariaLabel?: string;
-  }>(),
-  {
-    page: 1,
-    totalPages: 1,
-    prevLabel: "Anterior",
-    nextLabel: "Próximo",
-    ariaLabel: "Paginação",
-  },
-);
-
-const emit = defineEmits<{
-  "update:page": [page: number];
-}>();
-
-type PageItem = { kind: "page"; page: number; key: string } | { kind: "gap"; key: string };
-
-const items = computed<PageItem[]>(() => {
-  const total = Math.max(1, props.totalPages);
-  const current = Math.min(Math.max(1, props.page), total);
-  if (total <= 7) {
-    return Array.from({ length: total }, (_, index) => ({
-      kind: "page" as const,
-      page: index + 1,
-      key: `p${index + 1}`,
-    }));
-  }
-  const pages = new Set([1, total, current - 1, current, current + 1]);
-  const sorted = [...pages].filter((value) => value >= 1 && value <= total).sort((a, b) => a - b);
-  const result: PageItem[] = [];
-  sorted.forEach((value, index) => {
-    const previous = sorted[index - 1];
-    if (previous !== undefined && value - previous > 1) {
-      result.push({ kind: "gap", key: `g${previous}` });
-    }
-    result.push({ kind: "page", page: value, key: `p${value}` });
-  });
-  return result;
-});
-
-const go = (next: number) => {
-  const total = Math.max(1, props.totalPages);
-  const value = Math.min(Math.max(1, next), total);
-  if (value !== props.page) emit("update:page", value);
-};
-</script>
+<template>
+  <nav class="inline-flex items-center gap-[var(--ads-pagination-gap)] py-1" :aria-label="ariaLabel">
+    <button
+      type="button"
+      class="py-0.5 text-sm leading-[1.3] text-[var(--ads-text-secondary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)] disabled:cursor-not-allowed disabled:text-[var(--ads-text-tertiary)]"
+      :disabled="page <= 1"
+      @click="go(page - 1)"
+    >
+      {{ prevLabel }}
+    </button>
+    <div class="flex items-center gap-[var(--ads-pagination-number-gap)]">
+      <template v-for="item in items" :key="item.key">
+        <span v-if="item.kind === 'gap'" class="px-1 text-sm text-ads-neutro-escuro-600" aria-hidden="true">…</span>
+        <button
+          v-else
+          type="button"
+          class="flex size-[var(--ads-pagination-cell)] items-center justify-center rounded-[var(--ads-radius-xsm)] text-sm leading-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
+          :class="item.page === page ? 'bg-[var(--ads-pagination-selected)] text-[var(--ads-text-contrast)]' : 'text-[var(--ads-pagination-number)] hover:bg-ads-neutro-claro-20'"
+          :aria-current="item.page === page ? 'page' : undefined"
+          @click="go(item.page)"
+        >
+          {{ item.page }}
+        </button>
+      </template>
+    </div>
+    <button
+      type="button"
+      class="py-0.5 text-sm leading-[1.3] text-[var(--ads-text-secondary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)] disabled:cursor-not-allowed disabled:text-[var(--ads-text-tertiary)]"
+      :disabled="page >= totalPages"
+      @click="go(page + 1)"
+    >
+      {{ nextLabel }}
+    </button>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    page?: number;
+    totalPages?: number;
+    prevLabel?: string;
+    nextLabel?: string;
+    ariaLabel?: string;
+  }>(),
+  {
+    page: 1,
+    totalPages: 1,
+    prevLabel: "Anterior",
+    nextLabel: "Próximo",
+    ariaLabel: "Paginação",
+  },
+);
+
+const emit = defineEmits<{
+  "update:page": [page: number];
+}>();
+
+type PageItem = { kind: "page"; page: number; key: string } | { kind: "gap"; key: string };
+
+const items = computed<PageItem[]>(() => {
+  const total = Math.max(1, props.totalPages);
+  const current = Math.min(Math.max(1, props.page), total);
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, index) => ({
+      kind: "page" as const,
+      page: index + 1,
+      key: `p${index + 1}`,
+    }));
+  }
+  const pages = new Set([1, total, current - 1, current, current + 1]);
+  const sorted = [...pages].filter((value) => value >= 1 && value <= total).sort((a, b) => a - b);
+  const result: PageItem[] = [];
+  sorted.forEach((value, index) => {
+    const previous = sorted[index - 1];
+    if (previous !== undefined && value - previous > 1) {
+      result.push({ kind: "gap", key: `g${previous}` });
+    }
+    result.push({ kind: "page", page: value, key: `p${value}` });
+  });
+  return result;
+});
+
+const go = (next: number) => {
+  const total = Math.max(1, props.totalPages);
+  const value = Math.min(Math.max(1, next), total);
+  if (value !== props.page) emit("update:page", value);
+};
+</script>

package/app/components/AdsProductTag.vue

@@ -1,61 +1,61 @@
-<template>
-  <span
-    class="inline-flex h-[var(--ads-product-tag-height)] items-center rounded-[var(--ads-radius-xsm)] px-1.5 text-[length:var(--ads-product-tag-font-size)] leading-none font-medium text-[var(--ads-text-contrast)]"
-    :class="surface"
-  >
-    {{ label || product }}
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-/** Mapeia `_Tags` do Figma. O fundo usa a cor de vertical/produto já publicada. */
-export type AdsProductTagName =
-  | "marketing"
-  | "promocoes"
-  | "vendas"
-  | "captador"
-  | "estoque"
-  | "pricing"
-  | "crm"
-  | "compras"
-  | "gestao"
-  | "trade"
-  | "capacitacao"
-  | "ecommerce"
-  | "financas"
-  | "performance"
-  | "encontro";
-
-const props = withDefaults(
-  defineProps<{
-    product?: AdsProductTagName;
-    label?: string;
-  }>(),
-  {
-    product: "performance",
-    label: "",
-  },
-);
-
-const surfaces: Record<AdsProductTagName, string> = {
-  marketing: "bg-ads-produtos-radar-3",
-  promocoes: "bg-ads-produtos-radar-3",
-  vendas: "bg-ads-produtos-radar-7",
-  captador: "bg-ads-produtos-radar-10",
-  estoque: "bg-ads-produtos-radar-11",
-  pricing: "bg-ads-produtos-radar-7",
-  crm: "bg-ads-innovation-300",
-  compras: "bg-ads-produtos-radar-2",
-  gestao: "bg-ads-produtos-radar-1",
-  trade: "bg-ads-produtos-radar-2",
-  capacitacao: "bg-ads-produtos-radar-4",
-  ecommerce: "bg-ads-produtos-radar-9",
-  financas: "bg-ads-produtos-radar-6",
-  performance: "bg-ads-produtos-radar-6",
-  encontro: "bg-ads-produtos-radar-5",
-};
-
-const surface = computed(() => surfaces[props.product]);
-</script>
+<template>
+  <span
+    class="inline-flex h-[var(--ads-product-tag-height)] items-center rounded-[var(--ads-radius-xsm)] px-1.5 text-[length:var(--ads-product-tag-font-size)] leading-none font-medium text-[var(--ads-text-contrast)]"
+    :class="surface"
+  >
+    {{ label || product }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+/** Mapeia `_Tags` do Figma. O fundo usa a cor de vertical/produto já publicada. */
+export type AdsProductTagName =
+  | "marketing"
+  | "promocoes"
+  | "vendas"
+  | "captador"
+  | "estoque"
+  | "pricing"
+  | "crm"
+  | "compras"
+  | "gestao"
+  | "trade"
+  | "capacitacao"
+  | "ecommerce"
+  | "financas"
+  | "performance"
+  | "encontro";
+
+const props = withDefaults(
+  defineProps<{
+    product?: AdsProductTagName;
+    label?: string;
+  }>(),
+  {
+    product: "performance",
+    label: "",
+  },
+);
+
+const surfaces: Record<AdsProductTagName, string> = {
+  marketing: "bg-ads-produtos-radar-3",
+  promocoes: "bg-ads-produtos-radar-3",
+  vendas: "bg-ads-produtos-radar-7",
+  captador: "bg-ads-produtos-radar-10",
+  estoque: "bg-ads-produtos-radar-11",
+  pricing: "bg-ads-produtos-radar-7",
+  crm: "bg-ads-innovation-300",
+  compras: "bg-ads-produtos-radar-2",
+  gestao: "bg-ads-produtos-radar-1",
+  trade: "bg-ads-produtos-radar-2",
+  capacitacao: "bg-ads-produtos-radar-4",
+  ecommerce: "bg-ads-produtos-radar-9",
+  financas: "bg-ads-produtos-radar-6",
+  performance: "bg-ads-produtos-radar-6",
+  encontro: "bg-ads-produtos-radar-5",
+};
+
+const surface = computed(() => surfaces[props.product]);
+</script>

package/app/components/AdsRadio.vue

@@ -1,70 +1,70 @@
-<template>
-  <label
-    class="inline-flex items-center gap-[var(--ads-radio-gap)]"
-    :class="isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'"
-  >
-    <span class="relative grid size-[var(--ads-radio-size)] shrink-0 place-items-center">
-      <input
-        v-bind="attrs"
-        type="radio"
-        class="peer absolute inset-0 m-0 size-full appearance-none opacity-0 disabled:cursor-not-allowed"
-        :class="isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'"
-        :name="fieldName"
-        :value="value"
-        :checked="checked"
-        :disabled="isDisabled"
-        @change="onChange"
-      >
-      <span
-        class="pointer-events-none col-start-1 row-start-1 size-[var(--ads-radio-size)] rounded-full border-[length:var(--ads-radio-border-width)] bg-[var(--ads-radio-background)] peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[var(--ads-text-brand)]"
-        :class="isDisabled
-          ? 'border-[var(--ads-radio-disabled)] peer-checked:border-[var(--ads-radio-disabled)] peer-checked:bg-[var(--ads-radio-disabled)]'
-          : 'border-[var(--ads-radio-border)] peer-checked:border-[var(--ads-radio-border)] peer-checked:bg-[var(--ads-radio-border)]'"
-      />
-      <span class="pointer-events-none col-start-1 row-start-1 size-[var(--ads-radio-dot)] rounded-full bg-[var(--ads-radio-dot-color)] opacity-0 peer-checked:opacity-100" />
-    </span>
-    <span
-      v-if="hasLabel"
-      class="text-[length:var(--ads-radio-label-size)] font-normal leading-[1.3]"
-      :class="isDisabled ? 'text-[var(--ads-text-tertiary)]' : 'text-[var(--ads-radio-label)]'"
-    >
-      <slot>{{ label }}</slot>
-    </span>
-  </label>
-</template>
-
-<script setup lang="ts">
-import { computed, useAttrs, useId, useSlots } from "vue";
-
-defineOptions({ inheritAttrs: false });
-
-const props = withDefaults(
-  defineProps<{
-    label?: string;
-    value?: string | number | boolean;
-    name?: string;
-    disabled?: boolean;
-  }>(),
-  {
-    label: "",
-    value: "on",
-    name: "",
-    disabled: false,
-  },
-);
-
-const model = defineModel<string | number | boolean>({ default: "" });
-const attrs = useAttrs();
-const slots = useSlots();
-const autoName = useId();
-
-const hasLabel = computed(() => props.label.length > 0 || Boolean(slots.default));
-const isDisabled = computed(() => props.disabled);
-const fieldName = computed(() => props.name || autoName);
-const checked = computed(() => model.value === props.value);
-
-const onChange = () => {
-  if (isDisabled.value) return;
-  model.value = props.value;
-};
-</script>
+<template>
+  <label
+    class="inline-flex items-center gap-[var(--ads-radio-gap)]"
+    :class="isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+  >
+    <span class="relative grid size-[var(--ads-radio-size)] shrink-0 place-items-center">
+      <input
+        v-bind="attrs"
+        type="radio"
+        class="peer absolute inset-0 m-0 size-full appearance-none opacity-0 disabled:cursor-not-allowed"
+        :class="isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+        :name="fieldName"
+        :value="value"
+        :checked="checked"
+        :disabled="isDisabled"
+        @change="onChange"
+      >
+      <span
+        class="pointer-events-none col-start-1 row-start-1 size-[var(--ads-radio-size)] rounded-full border-[length:var(--ads-radio-border-width)] bg-[var(--ads-radio-background)] peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[var(--ads-text-brand)]"
+        :class="isDisabled
+          ? 'border-[var(--ads-radio-disabled)] peer-checked:border-[var(--ads-radio-disabled)] peer-checked:bg-[var(--ads-radio-disabled)]'
+          : 'border-[var(--ads-radio-border)] peer-checked:border-[var(--ads-radio-border)] peer-checked:bg-[var(--ads-radio-border)]'"
+      />
+      <span class="pointer-events-none col-start-1 row-start-1 size-[var(--ads-radio-dot)] rounded-full bg-[var(--ads-radio-dot-color)] opacity-0 peer-checked:opacity-100" />
+    </span>
+    <span
+      v-if="hasLabel"
+      class="text-[length:var(--ads-radio-label-size)] font-normal leading-[1.3]"
+      :class="isDisabled ? 'text-[var(--ads-text-tertiary)]' : 'text-[var(--ads-radio-label)]'"
+    >
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, useId, useSlots } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    value?: string | number | boolean;
+    name?: string;
+    disabled?: boolean;
+  }>(),
+  {
+    label: "",
+    value: "on",
+    name: "",
+    disabled: false,
+  },
+);
+
+const model = defineModel<string | number | boolean>({ default: "" });
+const attrs = useAttrs();
+const slots = useSlots();
+const autoName = useId();
+
+const hasLabel = computed(() => props.label.length > 0 || Boolean(slots.default));
+const isDisabled = computed(() => props.disabled);
+const fieldName = computed(() => props.name || autoName);
+const checked = computed(() => model.value === props.value);
+
+const onChange = () => {
+  if (isDisabled.value) return;
+  model.value = props.value;
+};
+</script>