AdiplixSlider

Wrapper para o VSlider do Vuetify que aplica os padrões visuais usados pelo tema Vuexy e expõe uma API enxuta para uso isolado em qualquer projeto Vue 3 + Vuetify.

Principais características

• Defaults prontos para cor, densidade, thumb e trilha seguindo o tema Vuexy.
• Estilos do tema são injetados automaticamente junto com o bundle.
• Exporta componente e plugin de instalação para uso local ou global.
• Tipagens em TypeScript e build em formato ESM e UMD.

Requisitos

• Vue ^3.4.0
• Vuetify ^3.6.0

Esses pacotes são peerDependencies, então devem existir no projeto consumidor.

Instalação e build local

cd AdiplixSlider
pnpm install
pnpm run build

O comando build gera:

• dist/index.js (ESM)
• dist/index.umd.cjs (UMD)
• dist/types/* com os arquivos .d.ts

Para limpar artefatos, use pnpm run clean.

Consumo do pacote

Registro global

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import AdiplixSlider from 'adiplix-slider'

const app = createApp(App)
app.use(AdiplixSlider)
app.mount('#app')

Depois, basta usar <AdiplixSlider v-model="value" /> em qualquer componente; os estilos acompanham o bundle automaticamente.

Uso local

<script setup lang="ts">
import { ref } from 'vue'
import { AdiplixSlider } from 'adiplix-slider'

const sliderValue = ref(42)
</script>

<template>
  <AdiplixSlider
    v-model="sliderValue"
    color="secondary"
    :min="0"
    :max="100"
    :step="5"
  />
</template>

Props expostas

| Prop | Tipo | Default | Observação | | ----------- | ---------------------------- | -------------- | --------------------------------------------- | | color | string | 'primary' | Cor principal do slider. | | trackSize | number | 6 | Largura da trilha. | | thumbSize | number | 22 | Diâmetro do thumb. | | thumbLabel| boolean \| 'always' | true | Controla o label do thumb (usa Vuetify). | | hideDetails | boolean \| 'auto' | 'auto' | Igual ao VSlider. | | elevation | number | 4 | Elevação aplicada ao track container. | | density | 'default' \| 'comfortable' \| 'compact' | 'comfortable' | Densidade padrão do layout. |

Qualquer outra prop aceita pelo VSlider pode ser passada normalmente e chega ao componente interno via attrs.

Próximos passos sugeridos

• Criar stories no Storybook para exemplos interativos.
• Montar testes visuais com Cypress Component Testing ou Playwright.
• Publicar o pacote no npm (npm publish --access public) quando estiver pronto.