ads-nuxt 0.1.0 → 0.1.2

package/app/components/AdsInput.vue

@@ -1,143 +1,143 @@
-<template>
-  <div class="flex w-full min-w-0 flex-col gap-0.5">
-    <div
-      v-if="label"
-      class="flex items-center gap-0.5 text-[length:var(--ads-input-label-size)] leading-[1.2]"
-      :class="supportClass"
-    >
-      <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-input-height)] items-center transition-colors gap-[var(--ads-input-gap)] rounded-[var(--ads-input-radius)] px-[var(--ads-input-padding-x)]"
-      :class="fieldClass"
-      :data-state="visualState"
-    >
-      <input
-        :id="fieldId"
-        :value="displayValue"
-        :type="type"
-        class="min-w-0 flex-1 bg-transparent text-[length:var(--ads-input-font-size)] leading-[1.3] outline-none placeholder:text-current disabled:cursor-not-allowed"
-        :class="type === 'number' ? '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none' : undefined"
-        :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)"
-      >
-      <span v-if="suffix" class="shrink-0 text-[length:var(--ads-input-font-size)] leading-[1.3]">{{ suffix }}</span>
-      <UIcon v-if="icon" :name="icon" class="size-4 shrink-0 text-base" />
-    </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 } from "vue";
-import InvertedTooltip from "./InvertedTooltip.vue";
-
-export type AdsInputState = "default" | "active" | "focus" | "error" | "disabled" | "ai";
-
-const props = withDefaults(
-  defineProps<{
-    label?: string;
-    hint?: string;
-    error?: string;
-    info?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    icon?: string;
-    type?: "text" | "number";
-    suffix?: string;
-    min?: string | number;
-    step?: string | number;
-    /** Estado congelado para a documentação. `null` segue o campo. */
-    state?: AdsInputState | null;
-  }>(),
-  {
-    label: "",
-    hint: "",
-    error: "",
-    info: "",
-    placeholder: "",
-    disabled: false,
-    icon: "",
-    type: "text",
-    suffix: "",
-    state: null,
-  },
-);
-
-const model = defineModel<string | number>({ default: "" });
-
-const emit = defineEmits<{
-  focus: [event: FocusEvent];
-  blur: [event: FocusEvent];
-}>();
-
-const fieldId = useId();
-const supportId = useId();
-
-const displayValue = computed(() =>
-  model.value === undefined || model.value === null ? "" : String(model.value),
-);
-
-const onInput = (event: Event) => {
-  const value = (event.target as HTMLInputElement).value;
-  model.value = value;
-};
-
-const isDisabled = computed(() => props.disabled || props.state === "disabled");
-
-const visualState = computed<AdsInputState>(() => {
-  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-input-hover-border)] focus-within:border-(length:--ads-border-width-slim) focus-within:border-[var(--ads-input-focus-border)]"
-    : "";
-
-  if (visualState.value === "disabled") {
-    return "border border-[var(--ads-input-disabled-border)] bg-[var(--ads-input-disabled-background)] text-[var(--ads-input-disabled-text)]";
-  }
-  if (visualState.value === "error") {
-    return `border-(length:--ads-border-width-slim) border-[var(--ads-input-error-border)] bg-[var(--ads-input-background)] text-[var(--ads-input-text)] ${focus}`;
-  }
-  if (visualState.value === "focus") {
-    return "border-(length:--ads-border-width-slim) border-[var(--ads-input-focus-border)] bg-[var(--ads-input-background)] text-[var(--ads-input-text)]";
-  }
-  if (visualState.value === "ai") {
-    return "border border-[#7358cc] bg-[#f3f0ff] text-[var(--ads-text-secondary)]";
-  }
-  return `border border-[var(--ads-input-border)] bg-[var(--ads-input-background)] text-[var(--ads-input-text)] ${focus}`;
-});
-</script>
+<template>
+  <div class="flex w-full min-w-0 flex-col gap-0.5">
+    <div
+      v-if="label"
+      class="flex items-center gap-0.5 text-[length:var(--ads-input-label-size)] leading-[1.2]"
+      :class="supportClass"
+    >
+      <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-input-height)] items-center transition-colors gap-[var(--ads-input-gap)] rounded-[var(--ads-input-radius)] px-[var(--ads-input-padding-x)]"
+      :class="fieldClass"
+      :data-state="visualState"
+    >
+      <input
+        :id="fieldId"
+        :value="displayValue"
+        :type="type"
+        class="min-w-0 flex-1 bg-transparent text-[length:var(--ads-input-font-size)] leading-[1.3] outline-none placeholder:text-current disabled:cursor-not-allowed"
+        :class="type === 'number' ? '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none' : undefined"
+        :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)"
+      >
+      <span v-if="suffix" class="shrink-0 text-[length:var(--ads-input-font-size)] leading-[1.3]">{{ suffix }}</span>
+      <UIcon v-if="icon" :name="icon" class="size-4 shrink-0 text-base" />
+    </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 } from "vue";
+import InvertedTooltip from "./InvertedTooltip.vue";
+
+export type AdsInputState = "default" | "active" | "focus" | "error" | "disabled" | "ai";
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    hint?: string;
+    error?: string;
+    info?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    icon?: string;
+    type?: "text" | "number";
+    suffix?: string;
+    min?: string | number;
+    step?: string | number;
+    /** Estado congelado para a documentação. `null` segue o campo. */
+    state?: AdsInputState | null;
+  }>(),
+  {
+    label: "",
+    hint: "",
+    error: "",
+    info: "",
+    placeholder: "",
+    disabled: false,
+    icon: "",
+    type: "text",
+    suffix: "",
+    state: null,
+  },
+);
+
+const model = defineModel<string | number>({ default: "" });
+
+const emit = defineEmits<{
+  focus: [event: FocusEvent];
+  blur: [event: FocusEvent];
+}>();
+
+const fieldId = useId();
+const supportId = useId();
+
+const displayValue = computed(() =>
+  model.value === undefined || model.value === null ? "" : String(model.value),
+);
+
+const onInput = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value;
+  model.value = value;
+};
+
+const isDisabled = computed(() => props.disabled || props.state === "disabled");
+
+const visualState = computed<AdsInputState>(() => {
+  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-input-hover-border)] focus-within:border-(length:--ads-border-width-slim) focus-within:border-[var(--ads-input-focus-border)]"
+    : "";
+
+  if (visualState.value === "disabled") {
+    return "border border-[var(--ads-input-disabled-border)] bg-[var(--ads-input-disabled-background)] text-[var(--ads-input-disabled-text)]";
+  }
+  if (visualState.value === "error") {
+    return `border-(length:--ads-border-width-slim) border-[var(--ads-input-error-border)] bg-[var(--ads-input-background)] text-[var(--ads-input-text)] ${focus}`;
+  }
+  if (visualState.value === "focus") {
+    return "border-(length:--ads-border-width-slim) border-[var(--ads-input-focus-border)] bg-[var(--ads-input-background)] text-[var(--ads-input-text)]";
+  }
+  if (visualState.value === "ai") {
+    return "border border-[#7358cc] bg-[#f3f0ff] text-[var(--ads-text-secondary)]";
+  }
+  return `border border-[var(--ads-input-border)] bg-[var(--ads-input-background)] text-[var(--ads-input-text)] ${focus}`;
+});
+</script>

package/app/components/AdsListDropdown.vue

@@ -1,44 +1,44 @@
-<template>
-  <AdsFilterDropdown
-    v-model="model"
-    v-model:query="query"
-    type="radio"
-    :options="options"
-    :searchable="search"
-    :select-all="false"
-    :empty-label="emptyLabel"
-    :search-placeholder="searchPlaceholder"
-    :list-label="listLabel"
-    width-class="min-w-[var(--ads-list-min-width)] w-full"
-    @pick="emit('pick', model)"
-  />
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import AdsFilterDropdown from "./AdsFilterDropdown.vue";
-import type { AdsFilterOption } from "../utils/ads-filter-select";
-
-withDefaults(
-  defineProps<{
-    options: AdsFilterOption[];
-    /** Figma `Search`. */
-    search?: boolean;
-    emptyLabel?: string;
-    searchPlaceholder?: string;
-    listLabel?: string;
-  }>(),
-  {
-    search: true,
-    emptyLabel: "Nenhum resultado",
-    searchPlaceholder: "Pesquisar",
-    listLabel: "Opções",
-  },
-);
-
-const model = defineModel<string>({ default: "" });
-const query = ref("");
-const emit = defineEmits<{
-  pick: [value: string];
-}>();
-</script>
+<template>
+  <AdsFilterDropdown
+    v-model="model"
+    v-model:query="query"
+    type="radio"
+    :options="options"
+    :searchable="search"
+    :select-all="false"
+    :empty-label="emptyLabel"
+    :search-placeholder="searchPlaceholder"
+    :list-label="listLabel"
+    width-class="min-w-[var(--ads-list-min-width)] w-full"
+    @pick="emit('pick', model)"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import AdsFilterDropdown from "./AdsFilterDropdown.vue";
+import type { AdsFilterOption } from "../utils/ads-filter-select";
+
+withDefaults(
+  defineProps<{
+    options: AdsFilterOption[];
+    /** Figma `Search`. */
+    search?: boolean;
+    emptyLabel?: string;
+    searchPlaceholder?: string;
+    listLabel?: string;
+  }>(),
+  {
+    search: true,
+    emptyLabel: "Nenhum resultado",
+    searchPlaceholder: "Pesquisar",
+    listLabel: "Opções",
+  },
+);
+
+const model = defineModel<string>({ default: "" });
+const query = ref("");
+const emit = defineEmits<{
+  pick: [value: string];
+}>();
+</script>

package/app/components/AdsLoading.vue

@@ -1,109 +1,109 @@
-<template>
-  <div
-    v-if="variant === 'shimmer'"
-    class="ads-loading-shimmer pointer-events-none absolute inset-0 z-10 overflow-hidden"
-    aria-hidden="true"
-  />
-
-  <span
-    v-else-if="variant === 'skeleton' && lines < 1"
-    class="block animate-pulse rounded-[var(--ads-loading-radius)] bg-[var(--ads-loading-skeleton)] motion-reduce:animate-none"
-    role="status"
-    aria-label="Carregando"
-  />
-
-  <div
-    v-else-if="variant === 'skeleton'"
-    class="flex flex-col gap-2"
-    role="status"
-    aria-label="Carregando"
-  >
-    <span
-      v-for="(width, index) in skeletonLines"
-      :key="index"
-      class="block h-[var(--ads-loading-bar)] animate-pulse rounded-[var(--ads-loading-radius)] bg-[var(--ads-loading-skeleton)] motion-reduce:animate-none"
-      :class="width"
-      aria-hidden="true"
-    />
-  </div>
-
-  <div
-    v-else
-    role="status"
-    :aria-label="label ? undefined : 'Carregando'"
-    :class="spinnerRootClass"
-  >
-    <UIcon
-      name="i-lucide-loader-circle"
-      class="animate-spin motion-reduce:animate-none"
-      :class="[sizeClass, toneClass]"
-      aria-hidden="true"
-    />
-    <p v-if="label" class="text-[length:var(--ads-loading-label-size)] text-[var(--ads-text-secondary)]">
-      {{ label }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-export type AdsLoadingVariant = "spinner" | "skeleton" | "shimmer";
-export type AdsLoadingSize = "sm" | "md" | "lg";
-export type AdsLoadingTone = "primary" | "muted";
-
-const props = withDefaults(
-  defineProps<{
-    /**
-     * spinner: área ainda vazia.
-     * skeleton: o formato da tela já é conhecido.
-     * shimmer: o conteúdo continua visível, por baixo.
-     */
-    variant?: AdsLoadingVariant;
-    /** sm na tabela, md na seção, lg no modal. */
-    size?: AdsLoadingSize;
-    /** primary no dado da tela, muted numa tabela secundária. */
-    tone?: AdsLoadingTone;
-    /** Centraliza o spinner numa seção vazia. */
-    region?: boolean;
-    label?: string;
-    /**
-     * Linhas do skeleton. Zero desenha um bloco só;
-     * altura e largura vêm da class.
-     */
-    lines?: number;
-  }>(),
-  {
-    variant: "spinner",
-    size: "md",
-    tone: "primary",
-    region: false,
-    label: "",
-    lines: 0,
-  },
-);
-
-const skeletonWidths = ["w-2/3", "w-full", "w-1/2"] as const;
-
-const skeletonLines = computed(() =>
-  Array.from({ length: props.lines }, (_, index) => skeletonWidths[index % skeletonWidths.length]),
-);
-
-const sizeClass = computed(() => {
-  if (props.size === "sm") return "size-6 shrink-0 text-[1.5rem]";
-  if (props.size === "lg") return "size-12 shrink-0 text-[3rem]";
-  return "size-[var(--ads-loading-spinner)] shrink-0 text-[length:var(--ads-loading-spinner)]";
-});
-
-const toneClass = computed(() =>
-  props.tone === "muted" ? "text-muted" : "text-[var(--ads-loading-spinner-color)]",
-);
-
-const spinnerRootClass = computed(() => {
-  if (props.region) {
-    return "flex min-h-48 flex-col items-center justify-center gap-3 py-10 text-center sm:py-12";
-  }
-  if (props.label) return "inline-flex flex-col items-center gap-3 text-center";
-  return "inline-flex";
-});
-</script>
+<template>
+  <div
+    v-if="variant === 'shimmer'"
+    class="ads-loading-shimmer pointer-events-none absolute inset-0 z-10 overflow-hidden"
+    aria-hidden="true"
+  />
+
+  <span
+    v-else-if="variant === 'skeleton' && lines < 1"
+    class="block animate-pulse rounded-[var(--ads-loading-radius)] bg-[var(--ads-loading-skeleton)] motion-reduce:animate-none"
+    role="status"
+    aria-label="Carregando"
+  />
+
+  <div
+    v-else-if="variant === 'skeleton'"
+    class="flex flex-col gap-2"
+    role="status"
+    aria-label="Carregando"
+  >
+    <span
+      v-for="(width, index) in skeletonLines"
+      :key="index"
+      class="block h-[var(--ads-loading-bar)] animate-pulse rounded-[var(--ads-loading-radius)] bg-[var(--ads-loading-skeleton)] motion-reduce:animate-none"
+      :class="width"
+      aria-hidden="true"
+    />
+  </div>
+
+  <div
+    v-else
+    role="status"
+    :aria-label="label ? undefined : 'Carregando'"
+    :class="spinnerRootClass"
+  >
+    <UIcon
+      name="i-lucide-loader-circle"
+      class="animate-spin motion-reduce:animate-none"
+      :class="[sizeClass, toneClass]"
+      aria-hidden="true"
+    />
+    <p v-if="label" class="text-[length:var(--ads-loading-label-size)] text-[var(--ads-text-secondary)]">
+      {{ label }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+export type AdsLoadingVariant = "spinner" | "skeleton" | "shimmer";
+export type AdsLoadingSize = "sm" | "md" | "lg";
+export type AdsLoadingTone = "primary" | "muted";
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * spinner: área ainda vazia.
+     * skeleton: o formato da tela já é conhecido.
+     * shimmer: o conteúdo continua visível, por baixo.
+     */
+    variant?: AdsLoadingVariant;
+    /** sm na tabela, md na seção, lg no modal. */
+    size?: AdsLoadingSize;
+    /** primary no dado da tela, muted numa tabela secundária. */
+    tone?: AdsLoadingTone;
+    /** Centraliza o spinner numa seção vazia. */
+    region?: boolean;
+    label?: string;
+    /**
+     * Linhas do skeleton. Zero desenha um bloco só;
+     * altura e largura vêm da class.
+     */
+    lines?: number;
+  }>(),
+  {
+    variant: "spinner",
+    size: "md",
+    tone: "primary",
+    region: false,
+    label: "",
+    lines: 0,
+  },
+);
+
+const skeletonWidths = ["w-2/3", "w-full", "w-1/2"] as const;
+
+const skeletonLines = computed(() =>
+  Array.from({ length: props.lines }, (_, index) => skeletonWidths[index % skeletonWidths.length]),
+);
+
+const sizeClass = computed(() => {
+  if (props.size === "sm") return "size-6 shrink-0 text-[1.5rem]";
+  if (props.size === "lg") return "size-12 shrink-0 text-[3rem]";
+  return "size-[var(--ads-loading-spinner)] shrink-0 text-[length:var(--ads-loading-spinner)]";
+});
+
+const toneClass = computed(() =>
+  props.tone === "muted" ? "text-muted" : "text-[var(--ads-loading-spinner-color)]",
+);
+
+const spinnerRootClass = computed(() => {
+  if (props.region) {
+    return "flex min-h-48 flex-col items-center justify-center gap-3 py-10 text-center sm:py-12";
+  }
+  if (props.label) return "inline-flex flex-col items-center gap-3 text-center";
+  return "inline-flex";
+});
+</script>