{"_id":"@cristianrg/vue-components","name":"@cristianrg/vue-components","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@cristianrg/vue-components","author":{"name":"Cristian Alexander Rizo Gómez","email":"rizogomezalexander@gmail.com"},"description":"A collection of Vue.js components for building modern web applications.","keywords":["vue","components","ui","web","modern","tcv"],"version":"1.0.0","type":"module","types":"dist/types/index.d.ts","main":"dist/index.cjs.js","module":"dist/index.es.js","style":"./dist/vue-components.css","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./vue-components.css":"./dist/vue-components.css"},"license":"AGPL-3.0-only","scripts":{"build":"vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist/types"},"dependencies":{"vue":"^3.5.17"},"devDependencies":{"@vitejs/plugin-vue":"^6.0.0","@vue/tsconfig":"^0.7.0","typescript":"~5.8.3","vite":"^7.0.4","vue-tsc":"^2.2.12"},"_id":"@cristianrg/vue-components@1.0.0","_nodeVersion":"22.17.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-EEhD+4LuDeHiRPsufz0INbG24pFqpeb49gFM1bSpPNUCa1SiIitS55/NqV2DL8U6TIQ21BiFnXAUE+HXQFubKw==","shasum":"5fd9404e80a13dc6392715394407da54ef07bbe2","tarball":"https://registry.npmjs.org/@cristianrg/vue-components/-/vue-components-1.0.0.tgz","fileCount":23,"unpackedSize":123887,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAETJ5Rdg4aIUBjHHRUTRaJIhuQxC8QaEGOqBrw4uq+XAiEAicshoHNf0jRIoXdtH+7b7pYRDjeZ5iU38RJ3qGDuErU="}]},"_npmUser":{"name":"cristianrg","email":"rizogomezalexander@gmail.com"},"directories":{},"maintainers":[{"name":"cristianrg","email":"rizogomezalexander@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-components_1.0.0_1753300884296_0.9215922158113592"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-23T20:01:24.193Z","1.0.0":"2025-07-23T20:01:24.502Z","modified":"2025-07-23T20:01:24.825Z"},"maintainers":[{"name":"cristianrg","email":"rizogomezalexander@gmail.com"}],"description":"A collection of Vue.js components for building modern web applications.","keywords":["vue","components","ui","web","modern","tcv"],"author":{"name":"Cristian Alexander Rizo Gómez","email":"rizogomezalexander@gmail.com"},"license":"AGPL-3.0-only","readme":"# @cris/vue-components\n\n## Librería de componentes Vue 3 moderna y minimalista\nCreated by **@Cristianrg**\n\nUna librería de componentes Vue 3 diseñada con un enfoque moderno y minimalista, perfecta para aplicaciones web contemporáneas. Cada componente está construido siguiendo principios de diseño centrado en la experiencia del usuario, con estilos predeterminados elegantes y una arquitectura completamente personalizable.\n\n### ✨ Características principales\n\n- 🎨 **Diseño minimalista y moderno**: Componentes con estilos limpios, elegantes y cohesivos\n- 🏗️ **Arquitectura basada en interfaces**: Sistema robusto de props tipadas con TypeScript para máxima flexibilidad\n- ⚙️ **Totalmente personalizable**: Variables CSS y props para adaptar colores, tamaños y comportamientos\n- 📱 **Responsive por defecto**: Optimizados para cualquier dispositivo y tamaño de pantalla\n- 🚀 **TypeScript nativo**: Soporte completo con tipado estricto e IntelliSense\n- 🌳 **Tree-shaking friendly**: Importa solo los componentes que necesitas para bundles optimizados\n- ♿ **Accesibilidad**: Componentes construidos siguiendo estándares WCAG\n- 🎛️ **Componentes inteligentes**: Lógica de estado interna para funcionalidades complejas\n\n### 📦 Instalación\n\n```bash\nnpm install @cris/vue-components\n```\n\n### 🎨 Importar estilos\n\n**¡IMPORTANTE!** Para que los componentes se muestren correctamente, debes importar los estilos CSS:\n\n```javascript\n// En tu main.js o main.ts\nimport '@cris/vue-components/vue-components.css'\n```\n\nO alternativamente en tu CSS principal:\n```css\n@import '@cris/vue-components/vue-components.css';\n```\n\n### 🚀 Componentes disponibles\n\nLa librería incluye los siguientes componentes listos para usar:\n\n- **Button** - Botones interactivos con múltiples variantes\n- **Modal** - Modales con gestión automática de estado y accesibilidad\n- **Card** - Contenedores con elevación y efectos hover opcionales\n- **Input** - Campos de entrada con validación y múltiples tipos\n- **Form** - Formularios completos con validación automática\n- **Table** - Tablas dinámicas con edición inline\n- **Search** - Componente de búsqueda con callback personalizable\n- **ChoiceBox** - Checkboxes estilizados con múltiples tamaños\n- **Details** - Acordeones expansibles\n- **Hero** - Secciones destacadas para landing pages\n- **Separator** - Divisores visuales\n- **ConfirmActions** - Diálogos de confirmación\n\n### 💡 Ejemplos de uso\n\n#### Ejemplo básico - Button y Modal\n\n```vue\n<template>\n  <div>\n    <!-- Botón principal que abre modal -->\n    <Button :button=\"primaryButton\" />\n    \n    <!-- Modal con acciones personalizadas -->\n    <Modal :modal=\"confirmModal\">\n      <p>¿Estás seguro de que quieres realizar esta acción?</p>\n      <p>Esta operación no se puede deshacer.</p>\n    </Modal>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Button, Modal, type Ibutton, type IModal } from \"@cris/vue-components\"\n\nconst showModal = ref(false)\n\n// Configuración del botón principal\nconst primaryButton: Ibutton = {\n  label: \"Abrir Modal\",\n  class: \"primary\",\n  size: \"medium\",\n  action: () => {\n    showModal.value = true\n  }\n}\n\n// Configuración del modal con botones de acción\nconst confirmModal: IModal = {\n  title: \"Confirmar Acción\",\n  isOpen: showModal,\n  onClose: () => {\n    showModal.value = false\n  },\n  buttons: [\n    {\n      label: \"Cancelar\",\n      class: \"secondary\",\n      action: () => {\n        showModal.value = false\n      }\n    },\n    {\n      label: \"Confirmar\",\n      class: \"primary\", \n      action: () => {\n        console.log('¡Acción confirmada!')\n        showModal.value = false\n      }\n    }\n  ]\n}\n</script>\n```\n\n#### Ejemplo avanzado - Formulario completo\n\n```vue\n<template>\n  <Card :elevationInHover=\"true\">\n    <Form :form=\"userForm\" @submit=\"handleSubmit\" />\n  </Card>\n</template>\n\n<script setup lang=\"ts\">\nimport { reactive } from 'vue'\nimport { Card, Form, type IForm, type IInput } from \"@cris/vue-components\"\n\n// Configuración del formulario\nconst userForm: IForm = {\n  id: \"user-registration\",\n  title: \"Registro de Usuario\",\n  inputs: [\n    {\n      id: \"name\",\n      label: \"Nombre completo\",\n      type: \"text\",\n      placeholder: \"Ingresa tu nombre\",\n      required: true,\n      validator: (value: string) => value.length >= 2,\n      errorMessage: \"El nombre debe tener al menos 2 caracteres\"\n    },\n    {\n      id: \"email\", \n      label: \"Correo electrónico\",\n      type: \"email\",\n      placeholder: \"tu@email.com\",\n      required: true,\n      validator: (value: string) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value),\n      errorMessage: \"Ingresa un email válido\"\n    },\n    {\n      id: \"role\",\n      label: \"Rol\",\n      type: \"select\",\n      required: true,\n      options: [\n        { value: \"admin\", label: \"Administrador\" },\n        { value: \"user\", label: \"Usuario\" },\n        { value: \"guest\", label: \"Invitado\" }\n      ]\n    }\n  ],\n  submit: {\n    label: \"Registrar Usuario\",\n    class: \"primary\",\n    action: () => console.log('Formulario enviado')\n  },\n  cancel: {\n    label: \"Cancelar\",\n    class: \"secondary\", \n    action: () => console.log('Formulario cancelado')\n  }\n}\n\nconst handleSubmit = (data: Record<string, any>) => {\n  console.log('Datos del formulario:', data)\n  // Aquí puedes enviar los datos a tu API\n}\n</script>\n```\n\n#### Ejemplo con Table y búsqueda\n\n```vue\n<template>\n  <div>\n    <!-- Buscador -->\n    <Search :search=\"searchConfig\" />\n    \n    <!-- Tabla de datos -->\n    <Table :table=\"usersTable\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport { Table, Search, type ITable, type ISearch, type IRow } from \"@cris/vue-components\"\n\nconst searchTerm = ref('')\n\n// Configuración del buscador\nconst searchConfig: ISearch = {\n  placeholder: \"Buscar usuarios...\",\n  value: searchTerm.value,\n  onSearch: (value: string) => {\n    searchTerm.value = value\n  }\n}\n\n// Datos de ejemplo\nconst allUsers = [\n  { name: 'Juan Pérez', email: 'juan@email.com', role: 'Admin' },\n  { name: 'María García', email: 'maria@email.com', role: 'Usuario' },\n  { name: 'Carlos López', email: 'carlos@email.com', role: 'Invitado' }\n]\n\n// Tabla con filtrado dinámico\nconst usersTable = computed((): ITable => {\n  const filteredUsers = allUsers.filter(user => \n    user.name.toLowerCase().includes(searchTerm.value.toLowerCase()) ||\n    user.email.toLowerCase().includes(searchTerm.value.toLowerCase())\n  )\n  \n  return {\n    name: \"Usuarios del Sistema\",\n    headers: [\"Nombre\", \"Email\", \"Rol\", \"Acciones\"],\n    rows: filteredUsers.map((user): IRow => ({\n      cells: [\n        { value: user.name, type: 'text' },\n        { value: user.email, type: 'text' },\n        { value: user.role, type: 'text' }\n      ],\n      actions: [\n        {\n          label: \"Editar\",\n          class: \"primary\",\n          size: \"small\",\n          action: () => console.log('Editando:', user.name)\n        },\n        {\n          label: \"Eliminar\", \n          class: \"danger\",\n          size: \"small\",\n          action: () => console.log('Eliminando:', user.name)\n        }\n      ]\n    }))\n  }\n})\n</script>\n```\n\n### 🎨 Personalización y temas\n\n#### Variables CSS personalizables\n\nTodos los componentes pueden ser personalizados mediante variables CSS globales:\n\n```css\n:root {\n  /* Colores principales */\n  --primary-color: #007bff;\n  --primary-color-hover: #0056b3;\n  --secondary-color: #6c757d;\n  --secondary-color-hover: #545b62;\n  --secondary-color-light: #f8f9fa;\n  --secondary-color-light-hover: #e9ecef;\n  \n  /* Colores de estado */\n  --danger-color: #dc3545;\n  --success-color: #28a745;\n  --warning-color: #ffc107;\n  \n  /* Tipografía */\n  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n  --font-size-sm: 0.875rem;\n  --font-size-base: 1rem;\n  --font-size-lg: 1.125rem;\n  \n  /* Espaciado */\n  --spacing-xs: 0.25rem;\n  --spacing-sm: 0.5rem;\n  --spacing-md: 1rem;\n  --spacing-lg: 1.5rem;\n  --spacing-xl: 2rem;\n  \n  /* Bordes y sombras */\n  --border-radius: 0.375rem;\n  --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  --box-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n```\n\n#### Personalización por componente\n\n```vue\n<template>\n  <!-- Botón con estilos personalizados -->\n  <Button \n    :button=\"customButton\"\n    :style=\"customButtonStyle\"\n  />\n  \n  <!-- Card con tema oscuro -->\n  <Card \n    :elevationInHover=\"true\"\n    class=\"dark-theme\"\n  >\n    <h3>Contenido en tema oscuro</h3>\n  </Card>\n</template>\n\n<script setup lang=\"ts\">\nimport { Button, Card } from \"@cris/vue-components\"\n\nconst customButton = {\n  label: \"Botón Personalizado\",\n  class: \"primary\" as const,\n  size: \"large\" as const,\n  action: () => console.log('Click!')\n}\n\n// Estilos CSS personalizados\nconst customButtonStyle = {\n  '--primary-color': '#ff6b6b',\n  '--primary-color-hover': '#ff5252',\n  '--border-radius': '50px',\n  '--font-weight': 'bold'\n}\n</script>\n\n<style scoped>\n.dark-theme {\n  --secondary-color-light: #2d3748;\n  --text-color: #f7fafc;\n  color: var(--text-color);\n}\n</style>\n```\n\n### 🔧 Configuración avanzada\n\n#### Importación selectiva\n\nPara optimizar el bundle, importa solo los componentes que necesitas:\n\n```typescript\n// Importación específica (recomendado)\nimport { Button, Modal, type Ibutton, type IModal } from \"@cris/vue-components\"\n\n// Importación completa (no recomendado para producción)\nimport * as CrisComponents from \"@cris/vue-components\"\n```\n\n#### Configuración global\n\nPuedes configurar estilos globales en tu aplicación principal:\n\n```typescript\n// main.ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport '@cris/vue-components/dist/style.css' // Estilos base\n\nconst app = createApp(App)\n\n// Configuración de variables CSS globales\ndocument.documentElement.style.setProperty('--primary-color', '#your-brand-color')\n\napp.mount('#app')\n```\n\n### 📚 Interfaces TypeScript\n\nLa librería proporciona interfaces TypeScript completas para todos los componentes:\n\n```typescript\nimport type { \n  Ibutton,\n  IModal, \n  IInput,\n  IForm,\n  ITable,\n  IRow,\n  ICell,\n  ISearch,\n  IChoiceBox,\n  IDetails,\n  IConfirmAction\n} from \"@cris/vue-components\"\n\n// Ejemplo de tipado estricto\nconst myButton: Ibutton = {\n  label: \"Mi Botón\",\n  class: \"primary\", // Solo acepta: 'primary' | 'secondary' | 'danger'\n  size: \"medium\",   // Solo acepta: 'small' | 'medium' | 'large' | 'xlarge'\n  disabled: false,\n  action: () => {\n    // Tu lógica aquí\n  }\n}\n```\n\n### 🚀 Mejores prácticas\n\n1. **Reactivity**: Usa `ref()` o `reactive()` para datos que cambien dinámicamente\n2. **Performance**: Implementa `computed()` para datos derivados complejos\n3. **Accessibility**: Los componentes incluyen ARIA labels, aprovecha las funcionalidades integradas\n4. **Validación**: Utiliza las funciones `validator` en inputs para UX mejorada\n5. **Gestión de estado**: Para aplicaciones complejas, considera usar Pinia o Vuex\n\n### 🤝 Contribución y soporte\n\nEsta librería está en desarrollo activo. Para reportar bugs, solicitar features o contribuir:\n\n- Reporta issues detallados con ejemplos reproducibles\n- Sigue las convenciones de código existentes\n- Incluye tests para nuevas funcionalidades\n- Documenta cambios en el README","readmeFilename":"README.md","_rev":"1-580c6c6272975591a4e21b250af5c265"}