@poly-ds/vue

Componentes da design system poly-ds para Vue — gerados a partir de uma fonte única em Mitosis (@poly-ds/source), mais alguns adapters escritos à mão onde o gerador não alcança (runtime de tema, posicionamento flutuante).

Requer vue >=3.4 e o CSS de @poly-ds/styles.

Instalação

npm install @poly-ds/vue @poly-ds/styles @poly-ds/theme-manager @poly-ds/tokens

Uso mínimo

// main.ts
import '@poly-ds/styles';
import { createThemeManager } from '@poly-ds/theme-manager';
import { THEMES } from '@poly-ds/tokens';
import { dsThemePlugin } from '@poly-ds/vue';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App)
  .use(dsThemePlugin(createThemeManager({ themes: THEMES, defaultTheme: 'default' })))
  .mount('#app');

<!-- App.vue -->
<script setup lang="ts">
import { Button } from '@poly-ds/vue';
</script>

<template>
  <Button variant="primary">Salvar</Button>
</template>

dsThemePlugin é opcional — só necessário para o composable useTheme(). Sem ele, os componentes funcionam normalmente lendo os atributos data-ds-* já presentes no documento.

Sem v-model nativo — o gerador Vue do Mitosis 0.14 transforma props onX em callbacks, não em emits update:x. Um wrapper de três linhas devolve o v-model; ver docs/COMPONENTES.md.

Componentes

19 componentes: Button, Input, Select, Checkbox, RadioGroup, Switch, Textarea, Label, FormField, Badge, Card, Skeleton, Avatar, Tooltip, Popover, Dialog, Tabs, Accordion e Table (+ TableRow/TableCell/TableHeaderCell). API completa, com as diferenças de idioma entre React/Vue/Angular, em docs/COMPONENTES.md; guia de instalação e primeiro uso em docs/COMECANDO.md.