ads-nuxt 0.1.0 → 0.1.2

package/app/components/AdsSteptip.vue

@@ -1,101 +1,101 @@
-<template>
-  <DefinePanel>
-    <div class="flex w-[var(--ads-steptip-width)] flex-col gap-3 rounded-[var(--ads-tooltip-radius)] bg-[var(--ads-tooltip-bg)] p-4 text-[var(--ads-tooltip-title)] shadow-[var(--ads-shadow-level-1)]">
-      <div class="flex items-start justify-between gap-3">
-        <p class="text-base leading-[1.3] font-bold">{{ title }}</p>
-        <p class="shrink-0 text-xs leading-[1.2] font-medium">{{ step }}/{{ totalSteps }}</p>
-      </div>
-      <p class="text-sm leading-[1.3]">{{ description }}</p>
-      <div class="flex items-center justify-between gap-3">
-        <button
-          type="button"
-          class="text-base text-[var(--ads-steptip-skip)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-tooltip-title)]"
-          @click="emit('skip')"
-        >
-          {{ skipLabel }}
-        </button>
-        <div class="flex items-center gap-3">
-          <button
-            v-if="step > 1"
-            type="button"
-            class="text-base font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-contrast)]"
-            @click="emit('back')"
-          >
-            {{ backLabel }}
-          </button>
-          <button
-            type="button"
-            class="text-base font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-contrast)]"
-            @click="step >= totalSteps ? emit('finish') : emit('next')"
-          >
-            {{ step >= totalSteps ? finishLabel : nextLabel }}
-          </button>
-        </div>
-      </div>
-    </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";
-
-const [DefinePanel, ReusePanel] = createReusableTemplate();
-
-const props = withDefaults(
-  defineProps<{
-    title?: string;
-    description?: string;
-    step?: number;
-    totalSteps?: number;
-    skipLabel?: string;
-    backLabel?: string;
-    nextLabel?: string;
-    finishLabel?: string;
-    /** Lado do gatilho onde o passo abre. Só vale com slot. */
-    side?: "top" | "right" | "bottom" | "left";
-    delayDuration?: number;
-  }>(),
-  {
-    title: "Título do passo",
-    description: "Texto que orienta a pessoa neste passo.",
-    step: 1,
-    totalSteps: 3,
-    skipLabel: "pular",
-    backLabel: "voltar",
-    nextLabel: "próximo",
-    finishLabel: "concluir",
-    side: "bottom",
-    delayDuration: 150,
-  },
-);
-
-const emit = defineEmits<{
-  skip: [];
-  back: [];
-  next: [];
-  finish: [];
-}>();
-
-const slots = useSlots();
-const hasTrigger = computed(() => Boolean(slots.default));
-const side = computed(() => props.side);
-
-/** 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 w-[var(--ads-steptip-width)] flex-col gap-3 rounded-[var(--ads-tooltip-radius)] bg-[var(--ads-tooltip-bg)] p-4 text-[var(--ads-tooltip-title)] shadow-[var(--ads-shadow-level-1)]">
+      <div class="flex items-start justify-between gap-3">
+        <p class="text-base leading-[1.3] font-bold">{{ title }}</p>
+        <p class="shrink-0 text-xs leading-[1.2] font-medium">{{ step }}/{{ totalSteps }}</p>
+      </div>
+      <p class="text-sm leading-[1.3]">{{ description }}</p>
+      <div class="flex items-center justify-between gap-3">
+        <button
+          type="button"
+          class="text-base text-[var(--ads-steptip-skip)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-tooltip-title)]"
+          @click="emit('skip')"
+        >
+          {{ skipLabel }}
+        </button>
+        <div class="flex items-center gap-3">
+          <button
+            v-if="step > 1"
+            type="button"
+            class="text-base font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-contrast)]"
+            @click="emit('back')"
+          >
+            {{ backLabel }}
+          </button>
+          <button
+            type="button"
+            class="text-base font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-contrast)]"
+            @click="step >= totalSteps ? emit('finish') : emit('next')"
+          >
+            {{ step >= totalSteps ? finishLabel : nextLabel }}
+          </button>
+        </div>
+      </div>
+    </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";
+
+const [DefinePanel, ReusePanel] = createReusableTemplate();
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    description?: string;
+    step?: number;
+    totalSteps?: number;
+    skipLabel?: string;
+    backLabel?: string;
+    nextLabel?: string;
+    finishLabel?: string;
+    /** Lado do gatilho onde o passo abre. Só vale com slot. */
+    side?: "top" | "right" | "bottom" | "left";
+    delayDuration?: number;
+  }>(),
+  {
+    title: "Título do passo",
+    description: "Texto que orienta a pessoa neste passo.",
+    step: 1,
+    totalSteps: 3,
+    skipLabel: "pular",
+    backLabel: "voltar",
+    nextLabel: "próximo",
+    finishLabel: "concluir",
+    side: "bottom",
+    delayDuration: 150,
+  },
+);
+
+const emit = defineEmits<{
+  skip: [];
+  back: [];
+  next: [];
+  finish: [];
+}>();
+
+const slots = useSlots();
+const hasTrigger = computed(() => Boolean(slots.default));
+const side = computed(() => props.side);
+
+/** 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>

package/app/components/AdsSwitch.vue

@@ -1,59 +1,59 @@
-<template>
-  <label
-    class="inline-flex items-center"
-    :class="[hasLabel ? 'gap-[var(--ads-switch-gap)]' : '', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer']"
-  >
-    <span class="relative h-[var(--ads-switch-height)] w-[var(--ads-switch-width)] shrink-0">
-      <input
-        v-bind="attrs"
-        type="checkbox"
-        role="switch"
-        class="peer absolute inset-0 appearance-none rounded-[var(--ads-switch-radius)] bg-[var(--ads-switch-off)] transition-colors duration-150 ease-out checked:bg-[var(--ads-switch-on)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)] disabled:cursor-not-allowed disabled:bg-[var(--ads-switch-disabled)] disabled:checked:bg-[var(--ads-switch-disabled-on)]"
-        :checked="model"
-        :disabled="isDisabled"
-        :aria-checked="model"
-        @change="onChange"
-      >
-      <span
-        class="pointer-events-none absolute top-[var(--ads-switch-inset)] left-0 size-[var(--ads-switch-thumb)] translate-x-[var(--ads-switch-inset)] rounded-full bg-[var(--ads-switch-thumb-color)] transition-transform duration-150 ease-out peer-checked:translate-x-[calc(var(--ads-switch-width)-var(--ads-switch-thumb)-var(--ads-switch-inset))]"
-      />
-    </span>
-    <span
-      v-if="hasLabel"
-      class="text-[length:var(--ads-switch-label-size)] font-normal leading-[1.3]"
-      :class="isDisabled ? 'text-[var(--ads-text-tertiary)]' : 'text-[var(--ads-switch-label)]'"
-    >
-      <slot>{{ label }}</slot>
-    </span>
-  </label>
-</template>
-
-<script setup lang="ts">
-import { computed, useAttrs, useSlots } from "vue";
-
-defineOptions({ inheritAttrs: false });
-
-const props = withDefaults(
-  defineProps<{
-    label?: string;
-    disabled?: boolean;
-  }>(),
-  {
-    label: "",
-    disabled: false,
-  },
-);
-
-const model = defineModel<boolean>({ default: false });
-const attrs = useAttrs();
-const slots = useSlots();
-
-const hasLabel = computed(() => props.label.length > 0 || Boolean(slots.default));
-const isDisabled = computed(() => props.disabled);
-
-const onChange = (event: Event) => {
-  const input = event.target;
-  if (!(input instanceof HTMLInputElement) || isDisabled.value) return;
-  model.value = input.checked;
-};
-</script>
+<template>
+  <label
+    class="inline-flex items-center"
+    :class="[hasLabel ? 'gap-[var(--ads-switch-gap)]' : '', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer']"
+  >
+    <span class="relative h-[var(--ads-switch-height)] w-[var(--ads-switch-width)] shrink-0">
+      <input
+        v-bind="attrs"
+        type="checkbox"
+        role="switch"
+        class="peer absolute inset-0 appearance-none rounded-[var(--ads-switch-radius)] bg-[var(--ads-switch-off)] transition-colors duration-150 ease-out checked:bg-[var(--ads-switch-on)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)] disabled:cursor-not-allowed disabled:bg-[var(--ads-switch-disabled)] disabled:checked:bg-[var(--ads-switch-disabled-on)]"
+        :checked="model"
+        :disabled="isDisabled"
+        :aria-checked="model"
+        @change="onChange"
+      >
+      <span
+        class="pointer-events-none absolute top-[var(--ads-switch-inset)] left-0 size-[var(--ads-switch-thumb)] translate-x-[var(--ads-switch-inset)] rounded-full bg-[var(--ads-switch-thumb-color)] transition-transform duration-150 ease-out peer-checked:translate-x-[calc(var(--ads-switch-width)-var(--ads-switch-thumb)-var(--ads-switch-inset))]"
+      />
+    </span>
+    <span
+      v-if="hasLabel"
+      class="text-[length:var(--ads-switch-label-size)] font-normal leading-[1.3]"
+      :class="isDisabled ? 'text-[var(--ads-text-tertiary)]' : 'text-[var(--ads-switch-label)]'"
+    >
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, useSlots } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    disabled?: boolean;
+  }>(),
+  {
+    label: "",
+    disabled: false,
+  },
+);
+
+const model = defineModel<boolean>({ default: false });
+const attrs = useAttrs();
+const slots = useSlots();
+
+const hasLabel = computed(() => props.label.length > 0 || Boolean(slots.default));
+const isDisabled = computed(() => props.disabled);
+
+const onChange = (event: Event) => {
+  const input = event.target;
+  if (!(input instanceof HTMLInputElement) || isDisabled.value) return;
+  model.value = input.checked;
+};
+</script>

package/app/components/AdsTable.vue

@@ -1,100 +1,100 @@
-<template>
-  <UTable
-    :data="data"
-    :columns="columns"
-    :loading="loading"
-    :sticky="sticky"
-    :ui="tableUi"
-  >
-    <template v-if="!$slots.loading" #loading>
-      <AdsLoading size="sm" :label="loadingLabel" />
-    </template>
-
-    <template v-if="!$slots.empty" #empty>
-      <div class="flex flex-col items-center gap-2">
-        <UIcon
-          :name="emptyIcon"
-          class="size-6 text-[var(--ads-border-icon-support)]"
-          aria-hidden="true"
-        />
-        <p class="text-sm text-[var(--ads-text-secondary)]">{{ emptyLabel }}</p>
-      </div>
-    </template>
-
-    <template v-for="(_, name) in $slots" #[name]="slotProps">
-      <slot :name="name" v-bind="slotProps ?? {}" />
-    </template>
-  </UTable>
-</template>
-
-<script setup lang="ts" generic="T extends TableData">
-import { computed, useSlots } from "vue";
-import type { TableColumn, TableData } from "@nuxt/ui";
-import AdsLoading from "./AdsLoading.vue";
-import {
-  buildAdsTableUi,
-  type AdsTableBorders,
-  type AdsTableDensity,
-  type AdsTableUi,
-} from "../utils/ads-table";
-
-const props = withDefaults(
-  defineProps<{
-    data: T[];
-    columns: TableColumn<T>[];
-    /** md: lista e gestão. sm: grade de dados larga ou prévia. */
-    density?: AdsTableDensity;
-    /** Zebra só em grade numérica larga. */
-    striped?: boolean;
-    /** Borda e raio próprios. Dentro de AdsCard, false. */
-    framed?: boolean;
-    /** lines: só horizontal. grid: horizontal e vertical. */
-    borders?: AdsTableBorders;
-    /** Degradê por nível. A célula marca `data-depth` de 0 a 2. */
-    depth?: boolean;
-    loading?: boolean;
-    /** Cabeçalho (e rodapé) fixos quando a tabela tem altura máxima. */
-    sticky?: boolean | "header" | "footer";
-    emptyLabel?: string;
-    emptyIcon?: string;
-    loadingLabel?: string;
-    /** Ajuste pontual de um slot; soma ao padrão. */
-    ui?: Partial<AdsTableUi>;
-  }>(),
-  {
-    density: "md",
-    striped: false,
-    framed: true,
-    borders: "lines",
-    depth: false,
-    loading: false,
-    sticky: false,
-    emptyLabel: "Nenhum registro encontrado",
-    emptyIcon: "i-lucide-inbox",
-    loadingLabel: undefined,
-    ui: undefined,
-  },
-);
-
-const slots = useSlots();
-
-const tableUi = computed(() => {
-  const base = buildAdsTableUi({
-    density: props.density,
-    striped: props.striped,
-    framed: props.framed,
-    borders: props.borders,
-    depth: props.depth,
-  });
-  if (!slots.expanded) {
-    // Árvore via getSubRows: o UTable sempre desenha a linha de detalhe da linha aberta.
-    base.tbody = `${base.tbody} [&>tr[data-slot=tr]:not([data-selectable])]:hidden`;
-  }
-  if (!props.ui) return base;
-  const merged = { ...base };
-  for (const key of Object.keys(props.ui) as (keyof AdsTableUi)[]) {
-    merged[key] = `${base[key]} ${props.ui[key] ?? ""}`.trim();
-  }
-  return merged;
-});
-</script>
+<template>
+  <UTable
+    :data="data"
+    :columns="columns"
+    :loading="loading"
+    :sticky="sticky"
+    :ui="tableUi"
+  >
+    <template v-if="!$slots.loading" #loading>
+      <AdsLoading size="sm" :label="loadingLabel" />
+    </template>
+
+    <template v-if="!$slots.empty" #empty>
+      <div class="flex flex-col items-center gap-2">
+        <UIcon
+          :name="emptyIcon"
+          class="size-6 text-[var(--ads-border-icon-support)]"
+          aria-hidden="true"
+        />
+        <p class="text-sm text-[var(--ads-text-secondary)]">{{ emptyLabel }}</p>
+      </div>
+    </template>
+
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps ?? {}" />
+    </template>
+  </UTable>
+</template>
+
+<script setup lang="ts" generic="T extends TableData">
+import { computed, useSlots } from "vue";
+import type { TableColumn, TableData } from "@nuxt/ui";
+import AdsLoading from "./AdsLoading.vue";
+import {
+  buildAdsTableUi,
+  type AdsTableBorders,
+  type AdsTableDensity,
+  type AdsTableUi,
+} from "../utils/ads-table";
+
+const props = withDefaults(
+  defineProps<{
+    data: T[];
+    columns: TableColumn<T>[];
+    /** md: lista e gestão. sm: grade de dados larga ou prévia. */
+    density?: AdsTableDensity;
+    /** Zebra só em grade numérica larga. */
+    striped?: boolean;
+    /** Borda e raio próprios. Dentro de AdsCard, false. */
+    framed?: boolean;
+    /** lines: só horizontal. grid: horizontal e vertical. */
+    borders?: AdsTableBorders;
+    /** Degradê por nível. A célula marca `data-depth` de 0 a 2. */
+    depth?: boolean;
+    loading?: boolean;
+    /** Cabeçalho (e rodapé) fixos quando a tabela tem altura máxima. */
+    sticky?: boolean | "header" | "footer";
+    emptyLabel?: string;
+    emptyIcon?: string;
+    loadingLabel?: string;
+    /** Ajuste pontual de um slot; soma ao padrão. */
+    ui?: Partial<AdsTableUi>;
+  }>(),
+  {
+    density: "md",
+    striped: false,
+    framed: true,
+    borders: "lines",
+    depth: false,
+    loading: false,
+    sticky: false,
+    emptyLabel: "Nenhum registro encontrado",
+    emptyIcon: "i-lucide-inbox",
+    loadingLabel: undefined,
+    ui: undefined,
+  },
+);
+
+const slots = useSlots();
+
+const tableUi = computed(() => {
+  const base = buildAdsTableUi({
+    density: props.density,
+    striped: props.striped,
+    framed: props.framed,
+    borders: props.borders,
+    depth: props.depth,
+  });
+  if (!slots.expanded) {
+    // Árvore via getSubRows: o UTable sempre desenha a linha de detalhe da linha aberta.
+    base.tbody = `${base.tbody} [&>tr[data-slot=tr]:not([data-selectable])]:hidden`;
+  }
+  if (!props.ui) return base;
+  const merged = { ...base };
+  for (const key of Object.keys(props.ui) as (keyof AdsTableUi)[]) {
+    merged[key] = `${base[key]} ${props.ui[key] ?? ""}`.trim();
+  }
+  return merged;
+});
+</script>

package/app/components/AdsTableToolbar.vue

@@ -1,44 +1,44 @@
-<template>
-  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-    <div v-if="title || description || $slots.title" class="min-w-0">
-      <slot name="title">
-        <p class="font-bold text-[var(--ads-text-primary)]">{{ title }}</p>
-        <p v-if="description" class="mt-1 text-sm text-[var(--ads-text-secondary)]">{{ description }}</p>
-      </slot>
-    </div>
-
-    <div class="flex min-w-0 flex-wrap items-center gap-3">
-      <AdsSearchInput
-        v-if="searchable"
-        v-model="search"
-        size="sm"
-        class="w-full sm:w-64"
-        :placeholder="searchPlaceholder"
-      />
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import AdsSearchInput from "./AdsSearchInput.vue";
-
-withDefaults(
-  defineProps<{
-    /** Título à esquerda. Sem título, a busca e os filtros ocupam a faixa. */
-    title?: string;
-    description?: string;
-    /** Mostra o AdsSearchInput. O filtro entra no slot padrão, com AdsFilterSelect. */
-    searchable?: boolean;
-    searchPlaceholder?: string;
-  }>(),
-  {
-    title: "",
-    description: "",
-    searchable: true,
-    searchPlaceholder: "Pesquisar",
-  },
-);
-
-const search = defineModel<string>("search", { default: "" });
-</script>
+<template>
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+    <div v-if="title || description || $slots.title" class="min-w-0">
+      <slot name="title">
+        <p class="font-bold text-[var(--ads-text-primary)]">{{ title }}</p>
+        <p v-if="description" class="mt-1 text-sm text-[var(--ads-text-secondary)]">{{ description }}</p>
+      </slot>
+    </div>
+
+    <div class="flex min-w-0 flex-wrap items-center gap-3">
+      <AdsSearchInput
+        v-if="searchable"
+        v-model="search"
+        size="sm"
+        class="w-full sm:w-64"
+        :placeholder="searchPlaceholder"
+      />
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AdsSearchInput from "./AdsSearchInput.vue";
+
+withDefaults(
+  defineProps<{
+    /** Título à esquerda. Sem título, a busca e os filtros ocupam a faixa. */
+    title?: string;
+    description?: string;
+    /** Mostra o AdsSearchInput. O filtro entra no slot padrão, com AdsFilterSelect. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+  }>(),
+  {
+    title: "",
+    description: "",
+    searchable: true,
+    searchPlaceholder: "Pesquisar",
+  },
+);
+
+const search = defineModel<string>("search", { default: "" });
+</script>