@foodtosave/components

Biblioteca de componentes Vue 3 do Food to Save.

Instalação

npm install @foodtosave/components

Configuração

1. Instale as dependências necessárias:

npm install @phosphor-icons/vue tailwindcss

2. Configure o Tailwind CSS no seu projeto seguindo a documentação oficial.

3. Importe e use os componentes:

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import FoodToSaveComponents from '@foodtosave/components'
import '@foodtosave/components/style.css'

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

Uso

Após a instalação, você pode usar os componentes em seus templates:

<template>
  <FoodtosaveCheckbox v-model="checked" label="Aceito os termos" />
  <FoodtosaveToggle v-model="enabled" />
  <FoodtosaveRadioGroup v-model="option">
    <FoodtosaveRadio value="1" label="Opção 1" />
    <FoodtosaveRadio value="2" label="Opção 2" />
  </FoodtosaveRadioGroup>
  <FoodtosaveIcon name="Heart" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const checked = ref(false)
const enabled = ref(false)
const option = ref('1')
</script>

Componentes Disponíveis

• FoodtosaveCheckbox: Checkbox customizado
• FoodtosaveToggle: Toggle switch
• FoodtosaveRadio e FoodtosaveRadioGroup: Grupo de radio buttons
• FoodtosaveIcon: Ícones do Phosphor Icons

Desenvolvimento

Para rodar o ambiente de desenvolvimento com Storybook:

npm run storybook

Licença

MIT