da-table-di 1.0.0

package/README.md

@@ -0,0 +1,78 @@
+# da-table (BaseTable)
+
+Componente reutilizable de **tabla Quasar (QTable)** para Vue 3.  
+Pensado para el 80% de casos típicos: paginación, carga desde API y acciones comunes (ver/editar/eliminar/etc).
+
+---
+
+## Requisitos
+
+- **Vue 3**
+- **Quasar v2** (el proyecto padre debe tener Quasar configurado)
+
+---
+
+## Instalación
+
+```bash
+npm i da-table
+```
+
+## Importación
+
+```vue
+<template>
+  <div class="q-pa-md">
+    <BaseTable
+      :columns="columns"
+      :loadAction="loadData"
+      selection="multiple"
+      :editAction="onEdit"
+      :deleteAction="onDelete"
+      class="dt-table"
+    />
+  </div>
+</template>
+
+<script setup>
+import { BaseTable } from 'da-table'
+
+const columns = [
+  { name: 'name', label: 'Nombre', field: 'name', align: 'left', sortable: true },
+  { name: 'age', label: 'Edad', field: 'age', align: 'left', sortable: true }
+]
+
+// La tabla llama a loadAction pasando paginación/sort
+// Debe devolver:
+//  A) { rows: Array, total: number } (recomendado)
+//  B) Array (si no tienes total)
+const loadData = async ({ page, rowsPerPage, sortBy, descending }) => {
+  // Ejemplo:
+  return {
+    rows: [
+      { id: 1, name: 'José', age: 35 },
+      { id: 2, name: 'Ana', age: 28 }
+    ],
+    total: 2
+  }
+}
+
+const onEdit = ({ row }) => console.log('edit', row)
+const onDelete = ({ row }) => console.log('delete', row)
+</script>
+
+<style scoped>
+/* Estilos desde el proyecto padre (scoped) usando :deep */
+:deep(.dt-table .q-table__container) {
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: white;
+}
+
+:deep(.dt-table .q-table__top),
+:deep(.dt-table .q-table__bottom) {
+  background: #f6f7f9 !important;
+}
+</style>
+```

package/index.js

@@ -0,0 +1,11 @@
+import BaseTable from './src/BaseTable.vue'
+
+export default {
+  install(app) {
+    app.component('BaseTable', BaseTable)
+  }
+}
+
+export {
+  BaseTable
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "da-table-di",
+  "version": "1.0.0",
+  "main": "index.js",
+  "type": "module",
+  "files": [
+    "src",
+    "index.js"
+  ],
+  "peerDependencies": {
+    "quasar": "^2.0.0",
+    "vue": "^3.0.0"
+  },
+  "keywords": [
+    "vue",
+    "quasar",
+    "table",
+    "component"
+  ],
+  "author": "Cristina Bermudez",
+  "license": "ISC",
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.4",
+    "quasar": "^2.18.6",
+    "vite": "^7.3.1",
+    "vue": "^3.5.28"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/src/BaseTable.vue

@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <q-table
+      :rows="rows"
+      :columns="computedColumns"
+      :row-key="rowKey"
+      :loading="loading"
+      :pagination="pagination"
+      :rows-per-page-options="rowsPerPageOptions"
+      :no-data-label="noDataLabel"
+      :loading-label="loadingLabel"
+      :rows-per-page-label="rowsPerPageLabel"
+      flat
+      :selection="selection"
+      v-model:selected="selected"
+      @request="onRequest"
+      class="dt-table"
+    >
+      <!-- Columna de acciones -->
+      <template v-slot:body-cell-actions="props">
+        <q-td :props="props" class="q-gutter-x-xs">
+          <q-btn v-if="editAction" flat round icon="edit" title="Editar" @click="editAction(props)" />
+          <q-btn v-if="deleteAction" flat round icon="delete" title="Eliminar" @click="deleteAction(props)" />
+          <q-btn v-if="viewAction" flat round icon="visibility" title="Ver" @click="viewAction(props)" />
+          <q-btn v-if="otherAction" flat round icon="key" title="Acción" @click="otherAction(props)" />
+          <q-btn v-if="reportAction" flat round icon="description" title="Generar informe" @click="reportAction(props)" />
+          <q-btn v-if="downloadAction" flat round icon="download" title="Descargar" @click="downloadAction(props)" />
+        </q-td>
+      </template>
+
+      <!-- Punto de personalización futuro: se pueden añadir slots genéricos -->
+      <template v-if="$slots.top" #top>
+        <slot name="top" />
+      </template>
+    </q-table>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+
+const props = defineProps({
+  // tabla
+  columns: { type: Array, required: true },
+  rowKey: { type: String, default: 'id' },
+
+  // carga/paginación
+  loadAction: { type: Function, required: true },
+  initialPagination: {
+    type: Object,
+    default: () => ({
+      page: 1,
+      rowsPerPage: 10,
+      rowsNumber: 0,
+      sortBy: null,
+      descending: false
+    })
+  },
+
+  // textos
+  noDataLabel: { type: String, default: 'No hay datos' },
+  loadingLabel: { type: String, default: 'Cargando datos...' },
+  rowsPerPageLabel: { type: String, default: 'Registros por página' },
+  rowsPerPageOptions: { type: Array, default: () => [10, 20, 40, 60] },
+
+  // selección
+  selection: { type: String, default: 'none' }, // none | single | multiple
+
+  // acciones (opcionales)
+  editAction: { type: Function, default: null },
+  deleteAction: { type: Function, default: null },
+  viewAction: { type: Function, default: null },
+  otherAction: { type: Function, default: null },
+  reportAction: { type: Function, default: null },
+  downloadAction: { type: Function, default: null },
+
+  // si quieres forzar columna actions si hay acciones
+  ensureActionsColumn: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['loaded', 'error'])
+
+const rows = ref([])
+const loading = ref(false)
+const selected = ref([])
+const pagination = ref({ ...props.initialPagination })
+
+const hasAnyAction = computed(() =>
+  !!(
+    props.editAction ||
+    props.deleteAction ||
+    props.viewAction ||
+    props.otherAction ||
+    props.reportAction ||
+    props.downloadAction
+  )
+)
+
+const computedColumns = computed(() => {
+  const cols = Array.isArray(props.columns) ? [...props.columns] : []
+  const hasActionsCol = cols.some(c => c && c.name === 'actions')
+
+  if (props.ensureActionsColumn && hasAnyAction.value && !hasActionsCol) {
+    cols.push({
+      name: 'actions',
+      label: 'Acciones',
+      field: 'actions',
+      align: 'right',
+      sortable: false
+    })
+  }
+
+  return cols
+})
+
+async function fetchData(pag = pagination.value) {
+  loading.value = true
+  try {
+    // loadAction recibe info de paginación/sort
+    const result = await props.loadAction({
+      page: pag.page,
+      rowsPerPage: pag.rowsPerPage,
+      sortBy: pag.sortBy,
+      descending: pag.descending
+    })
+
+    if (Array.isArray(result)) {
+      rows.value = result
+      pagination.value = { ...pag, rowsNumber: result.length }
+      emit('loaded', rows.value, { total: result.length })
+      return
+    }
+
+    const newRows = result?.rows ?? []
+    const total = result?.total ?? result?.rowsNumber ?? 0
+
+    rows.value = newRows
+    pagination.value = { ...pag, rowsNumber: total }
+
+    emit('loaded', rows.value, { total })
+  } catch (err) {
+    emit('error', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onRequest(req) {
+  const nextPag = { ...pagination.value, ...(req?.pagination || {}) }
+  pagination.value = nextPag
+  await fetchData(nextPag)
+}
+
+function refresh() {
+  return fetchData(pagination.value)
+}
+
+function getSelection() {
+  return selected.value
+}
+
+defineExpose({ refresh, getSelection })
+
+onMounted(() => {
+  fetchData(pagination.value)
+})
+</script>