vs-datatable 0.1.0 → 0.1.1

package/README.md

@@ -1,2 +1,457 @@
-# vs-datatable
-A lightweight Vue 3 datatable component with sorting, slots, and nested object support.
+# VsDataTable
+
+A lightweight, feature-rich Vue 3 data table component with sorting, pagination, search, and row selection capabilities. Built with TypeScript and Bootstrap 5 styling.
+
+## Features
+
+- 🔍 **Search & Filter** - Built-in search functionality with customizable search input
+- 📊 **Sorting** - Multi-column sorting with visual indicators and priority support
+- 📄 **Pagination** - Server-side and client-side pagination with customizable controls
+- ✅ **Row Selection** - Single and multi-row selection with checkbox controls
+- 🎨 **Customizable** - Extensive slot support for customizing headers, cells, and layouts
+- 📱 **Responsive** - Mobile-friendly design with Bootstrap 5
+- 🚀 **Performance** - Optimized for large datasets with server-side support
+- 🎯 **TypeScript** - Full TypeScript support with type definitions
+
+## Installation
+
+```bash
+npm install vs-datatable
+# or
+yarn add vs-datatable
+# or
+pnpm add vs-datatable
+```
+
+## Quick Start
+
+### Basic Usage
+
+```vue
+<template>
+  <VsDataTable
+    :columns="columns"
+    :rows="data"
+    :loading="loading"
+    @row-click="handleRowClick"
+  />
+</template>
+
+<script setup lang="ts">
+import { VsDataTable } from 'vs-datatable'
+
+const columns = [
+  { label: 'Name', field: 'name', sortable: true },
+  { label: 'Email', field: 'email', sortable: true },
+  { label: 'Role', field: 'role', width: '20%' },
+  { label: 'Status', field: 'status', sortable: true }
+]
+
+const data = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Inactive' }
+]
+
+const loading = ref(false)
+
+const handleRowClick = (row: any, index: number) => {
+  console.log('Row clicked:', row, index)
+}
+</script>
+```
+
+### Global Registration
+
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import VsDataTable from 'vs-datatable'
+import 'vs-datatable/style.css'
+
+const app = createApp(App)
+app.use(VsDataTable)
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `columns` | `Column[]` | **required** | Array of column definitions |
+| `rows` | `any[]` | `[]` | Array of data objects |
+| `loading` | `boolean` | `false` | Shows loading state |
+| `showSearch` | `boolean` | `true` | Enable/disable search functionality |
+| `showRowEntries` | `boolean` | `true` | Show "Showing X to Y of Z entries" |
+| `itemSelected` | `any[] \| null` | `null` | Controlled selection state |
+| `tablename` | `string` | `"default-table"` | Unique identifier for the table |
+| `tableClass` | `string \| string[] \| Record<string, any>` | - | Custom CSS classes for table |
+| `rowClass` | `string \| string[] \| Record<string, any>` | - | Custom CSS classes for rows |
+| `serverOptions` | `ServerOptions \| null` | `null` | Server-side configuration |
+| `serverItemsLength` | `number` | - | Total number of items for server-side pagination |
+
+### Column Definition
+
+```typescript
+interface Column {
+  label: string;           // Display name
+  field: string;          // Data field path (supports nested: 'user.profile.name')
+  width?: string;         // Column width percentage
+  sortable?: boolean;     // Enable sorting
+  isKey?: boolean;        // Primary key field
+}
+```
+
+### Server Options
+
+```typescript
+interface ServerOptions {
+  page: number;
+  rowsPerPage: number;
+  sort?: { field: string; order: 'asc' | 'desc'; priority?: number }[];
+}
+```
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `row-click` | `(row: any, index: number)` | Fired when a row is clicked |
+| `input-typed` | `(value: string)` | Fired when search input changes |
+| `page-updated` | `(page: number)` | Fired when page changes |
+| `sort-changed` | `{ sort: SortOption[] }` | Fired when sorting changes |
+| `update:itemSelected` | `(items: any[])` | Fired when selection changes |
+| `update:serverOptions` | `(options: ServerOptions)` | Fired when server options change |
+| `update:serverItemsLength` | `(length: number)` | Fired when total items count changes |
+
+## Slots
+
+### Header Slots
+```vue
+<template #header-name="{ column }">
+  <i class="fa fa-user"></i> {{ column.label }}
+</template>
+```
+
+### Cell Slots
+```vue
+<template #cell-status="{ item, value }">
+  <span :class="`badge bg-${value === 'Active' ? 'success' : 'danger'}`">
+    {{ value }}
+  </span>
+</template>
+```
+
+### Custom Areas
+```vue
+<template #filterArea>
+  <select class="form-select">
+    <option>Filter by status</option>
+  </select>
+</template>
+
+<template #no-data>
+  <div class="text-center">
+    <h4>No data found</h4>
+    <p>Try adjusting your search criteria</p>
+  </div>
+</template>
+```
+
+## Advanced Usage
+
+### Server-Side Pagination & Sorting
+
+```vue
+<template>
+  <VsDataTable
+    :columns="columns"
+    :rows="data"
+    :server-options="serverOptions"
+    :server-items-length="totalItems"
+    :loading="loading"
+    @update:server-options="handleServerOptionsChange"
+    @sort-changed="handleSortChange"
+  />
+</template>
+
+<script setup lang="ts">
+const serverOptions = ref({
+  page: 1,
+  rowsPerPage: 10,
+  sort: []
+})
+
+const totalItems = ref(0)
+const data = ref([])
+const loading = ref(false)
+
+const handleServerOptionsChange = async (options: ServerOptions) => {
+  loading.value = true
+  try {
+    const response = await fetchData(options)
+    data.value = response.data
+    totalItems.value = response.total
+    serverOptions.value = options
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSortChange = ({ sort }) => {
+  console.log('Sort changed:', sort)
+}
+</script>
+```
+
+### Row Selection
+
+```vue
+<template>
+  <VsDataTable
+    :columns="columns"
+    :rows="data"
+    v-model:item-selected="selectedItems"
+    @update:item-selected="handleSelectionChange"
+  />
+</template>
+
+<script setup lang="ts">
+const selectedItems = ref([])
+
+const handleSelectionChange = (items: any[]) => {
+  console.log('Selected items:', items)
+  // Handle bulk operations
+}
+</script>
+```
+
+### Custom Cell Rendering
+
+```vue
+<template>
+  <VsDataTable :columns="columns" :rows="data">
+    <!-- Custom avatar cell -->
+    <template #cell-avatar="{ item }">
+      <img :src="item.avatar" :alt="item.name" class="rounded-circle" width="32" height="32">
+    </template>
+    
+    <!-- Custom actions cell -->
+    <template #cell-actions="{ item }">
+      <div class="btn-group btn-group-sm">
+        <button class="btn btn-outline-primary" @click="editItem(item)">
+          <i class="fa fa-edit"></i>
+        </button>
+        <button class="btn btn-outline-danger" @click="deleteItem(item)">
+          <i class="fa fa-trash"></i>
+        </button>
+      </div>
+    </template>
+  </VsDataTable>
+</template>
+```
+
+### Nested Object Support
+
+```typescript
+const columns = [
+  { label: 'Name', field: 'name' },
+  { label: 'Company', field: 'company.name' },        // Nested object
+  { label: 'Address', field: 'address.street' },     // Deep nesting
+  { label: 'Contact', field: 'contact.email' }       // Multiple levels
+]
+
+const data = [
+  {
+    id: 1,
+    name: 'John Doe',
+    company: { name: 'Acme Corp' },
+    address: { street: '123 Main St' },
+    contact: { email: 'john@acme.com' }
+  }
+]
+```
+
+## Styling & Customization
+
+### CSS Classes
+
+The component uses Bootstrap 5 classes and provides several customization points:
+
+```scss
+// Custom table styling
+.vs-table {
+  .sort-icon {
+    color: #007bff;
+  }
+  
+  .sort-badge {
+    background-color: #28a745;
+  }
+}
+
+// Custom pagination
+.pagination {
+  .page-link {
+    border-radius: 0.375rem;
+  }
+}
+```
+
+### Import Styles
+
+```typescript
+// Import default styles
+import 'vs-datatable/style.css'
+
+// Or import SCSS for customization
+import 'vs-datatable/style.scss'
+```
+
+### Custom SCSS Variables
+
+```scss
+// Override Bootstrap variables
+$primary: #your-color;
+$secondary: #your-color;
+
+// Import the component styles
+@import 'vs-datatable/style.scss';
+```
+
+## Examples
+
+### Complete Example with Server-Side Data
+
+```vue
+<template>
+  <div class="container">
+    <h2>User Management</h2>
+    
+    <VsDataTable
+      :columns="columns"
+      :rows="users"
+      :server-options="serverOptions"
+      :server-items-length="totalUsers"
+      :loading="loading"
+      v-model:item-selected="selectedUsers"
+      @update:server-options="fetchUsers"
+      @row-click="viewUser"
+      @sort-changed="handleSort"
+    >
+      <!-- Custom status cell -->
+      <template #cell-status="{ item }">
+        <span :class="`badge bg-${getStatusColor(item.status)}`">
+          {{ item.status }}
+        </span>
+      </template>
+      
+      <!-- Custom actions -->
+      <template #cell-actions="{ item }">
+        <button class="btn btn-sm btn-outline-primary" @click="editUser(item)">
+          Edit
+        </button>
+      </template>
+    </VsDataTable>
+    
+    <!-- Bulk actions -->
+    <div v-if="selectedUsers.length" class="mt-3">
+      <button class="btn btn-danger" @click="deleteSelected">
+        Delete {{ selectedUsers.length }} users
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { VsDataTable } from 'vs-datatable'
+
+const columns = [
+  { label: 'ID', field: 'id', width: '10%' },
+  { label: 'Name', field: 'name', sortable: true },
+  { label: 'Email', field: 'email', sortable: true },
+  { label: 'Status', field: 'status', sortable: true },
+  { label: 'Actions', field: 'actions', width: '15%' }
+]
+
+const users = ref([])
+const selectedUsers = ref([])
+const loading = ref(false)
+const totalUsers = ref(0)
+
+const serverOptions = ref({
+  page: 1,
+  rowsPerPage: 10,
+  sort: []
+})
+
+const fetchUsers = async (options) => {
+  loading.value = true
+  try {
+    const response = await api.getUsers({
+      page: options.page,
+      limit: options.rowsPerPage,
+      sort: options.sort
+    })
+    users.value = response.data
+    totalUsers.value = response.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSort = ({ sort }) => {
+  console.log('Sorting by:', sort)
+}
+
+const getStatusColor = (status) => {
+  return status === 'Active' ? 'success' : 'danger'
+}
+
+const viewUser = (user) => {
+  console.log('Viewing user:', user)
+}
+
+const editUser = (user) => {
+  console.log('Editing user:', user)
+}
+
+const deleteSelected = () => {
+  console.log('Deleting users:', selectedUsers.value)
+}
+
+onMounted(() => {
+  fetchUsers(serverOptions.value)
+})
+</script>
+```
+
+## Browser Support
+
+- Chrome 60+
+- Firefox 60+
+- Safari 12+
+- Edge 79+
+
+## Dependencies
+
+- Vue 3.2+
+- Bootstrap 5.3+
+- Font Awesome 7.0+
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details.
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## Support
+
+- 📧 Email: [oregunwasegun@gmail.com]
+- 🐛 Issues: [GitHub Issues](https://github.com/oregs/vs-datatable/issues)
+- 📖 Documentation: [GitHub Wiki](https://github.com/oregs/vs-datatable/wiki)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vs-datatable",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A lightweight Vue 3 datatable component with sorting, slots, and nested object support.",
   "type": "module",
   "private": false,

package/src/styles/bootstrap.scss

@@ -1,7 +1,7 @@
-// 1. Override Bootstrap variables BEFORE importing
-$primary: #4CAF50; // Example: change primary color (green)
-$table-cell-padding-y: 0.5rem;
-$table-cell-padding-x: 0.75rem;
-
-// 2. Import all Bootstrap
+// 1. Override Bootstrap variables BEFORE importing
+$primary: #4CAF50; // Example: change primary color (green)
+$table-cell-padding-y: 0.5rem;
+$table-cell-padding-x: 0.75rem;
+
+// 2. Import all Bootstrap
 @import "bootstrap/scss/bootstrap";

package/src/styles/index.scss

@@ -1,2 +1,2 @@
-@import "bootstrap/scss/bootstrap"; 
+@import "bootstrap/scss/bootstrap"; 
 @import "./datatable.scss";

package/src/styles/vs-datatable.scss

@@ -1,40 +1,40 @@
-// Import only what you need from bootstrap (optional, leaner)
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/mixins";
-
-// Example custom styles for the table
-.vs-table {
-  border-collapse: separate;
-  border-spacing: 0;
-
-  thead {
-    background-color: $gray-100;
-    th {
-      font-weight: 600;
-      vertical-align: middle;
-      padding: 0.75rem;
-    }
-  }
-
-  tbody {
-    tr {
-      transition: background-color 0.2s ease;
-
-      &:hover {
-        background-color: $gray-200;
-      }
-
-      td {
-        padding: 0.65rem 0.75rem;
-        vertical-align: middle;
-      }
-    }
-  }
-
-  // Example: custom sort icon
-  .sort-icon {
-    font-size: 0.75rem;
-    vertical-align: middle;
-  }
-}
+// Import only what you need from bootstrap (optional, leaner)
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
+// Example custom styles for the table
+.vs-table {
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    background-color: $gray-100;
+    th {
+      font-weight: 600;
+      vertical-align: middle;
+      padding: 0.75rem;
+    }
+  }
+
+  tbody {
+    tr {
+      transition: background-color 0.2s ease;
+
+      &:hover {
+        background-color: $gray-200;
+      }
+
+      td {
+        padding: 0.65rem 0.75rem;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  // Example: custom sort icon
+  .sort-icon {
+    font-size: 0.75rem;
+    vertical-align: middle;
+  }
+}

package/dist/index.css

@@ -1 +0,0 @@
-@media only screen and (min-width: 1199px){.pagination .page-item .page-link[data-v-126f4cdf]{padding:4px 8px!important;font-size:12px!important;line-height:1!important}}@media only screen and (max-width: 768px){.pagination .page-item .page-link[data-v-126f4cdf]{padding:4px 8px!important;font-size:10px!important;line-height:1!important}}.loader[data-v-6ad4d2c7]{position:relative;width:85px;height:50px;background-repeat:no-repeat;background-image:linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0);background-position:0px center,15px center,30px center,45px center,60px center,75px center,90px center;animation:rikSpikeRoll-6ad4d2c7 .65s linear infinite alternate}@keyframes rikSpikeRoll-6ad4d2c7{0%{background-size:10px 3px}16%{background-size:10px 50px,10px 3px,10px 3px,10px 3px,10px 3px,10px 3px}33%{background-size:10px 30px,10px 50px,10px 3px,10px 3px,10px 3px,10px 3px}50%{background-size:10px 10px,10px 30px,10px 50px,10px 3px,10px 3px,10px 3px}66%{background-size:10px 3px,10px 10px,10px 30px,10px 50px,10px 3px,10px 3px}83%{background-size:10px 3px,10px 3px,10px 10px,10px 30px,10px 50px,10px 3px}to{background-size:10px 3px,10px 3px,10px 3px,10px 10px,10px 30px,10px 50px}}.sort-container[data-v-48b15b64]{display:inline-flex;flex-direction:column;align-items:center;line-height:1}.sort-icon[data-v-48b15b64]{font-size:.62rem;color:#aaa;margin:-5px 0}.sort-icon.active-asc[data-v-48b15b64],.sort-icon.active-desc[data-v-48b15b64]{color:#daa520}.sort-badge[data-v-48b15b64]{font-size:.65rem;line-height:1;padding:.15rem .3rem;display:inline-flex;align-items:center;justify-content:center}.vs-table{border-collapse:separate;border-spacing:0}.vs-table thead{background-color:#f8f9fa}.vs-table thead th{font-weight:600;vertical-align:middle;padding:.75rem}.vs-table tbody tr{transition:background-color .2s ease}.vs-table tbody tr:hover{background-color:#e9ecef}.vs-table tbody tr td{padding:.65rem .75rem;vertical-align:middle}.vs-table .sort-icon{font-size:.75rem;vertical-align:middle}

package/dist/vs-datatable.es.js

@@ -1,407 +0,0 @@
-import { defineComponent as H, computed as p, createElementBlock as i, openBlock as r, createElementVNode as o, createCommentVNode as k, normalizeClass as w, Fragment as R, renderList as L, toDisplayString as y, normalizeStyle as E, useAttrs as K, ref as A, resolveComponent as Q, createBlock as J, withCtx as W, renderSlot as M, createVNode as D, unref as X, withModifiers as Y, withDirectives as ee, vModelCheckbox as te, createTextVNode as se } from "vue";
-import './index.css';const ae = { ref: "vsPagination" }, oe = ["id"], le = { class: "page-item" }, ne = ["disabled"], re = {
-  key: 0,
-  class: "page-item d-flex"
-}, ie = {
-  key: 0,
-  class: "page-link disabled"
-}, de = ["id", "onClick"], ce = {
-  key: 1,
-  class: "page-item d-flex"
-}, ue = {
-  key: 0,
-  class: "page-link me-2 disabled"
-}, pe = { class: "page-item" }, ve = ["disabled"], fe = /* @__PURE__ */ H({
-  __name: "VsPagination",
-  props: {
-    modelValue: {},
-    totalRecords: {},
-    rowsPerPage: {},
-    tablename: {},
-    maxVisible: {},
-    paginationClass: {}
-  },
-  emits: ["update:modelValue", "page-changed"],
-  setup(e, { emit: b }) {
-    const t = e, c = b, h = t.maxVisible ?? 3, d = p({
-      get: () => t.modelValue,
-      set: (m) => {
-        c("update:modelValue", m), c("page-changed", m);
-      }
-    }), x = p(() => d.value <= Math.floor(h / 2) ? 1 : d.value >= u.value - Math.floor(h / 2) ? Math.max(u.value - h + 1, 1) : d.value - Math.floor(h / 2)), $ = p(() => Math.min(x.value + h - 1, u.value)), u = p(() => Math.ceil(t.totalRecords / t.rowsPerPage)), P = p(() => {
-      const m = [];
-      for (let g = x.value; g <= $.value; g++)
-        m.push(g);
-      return m;
-    }), V = (m) => {
-      m >= 1 && m <= u.value && (d.value = m);
-    }, I = () => {
-      d.value > 1 && d.value--;
-    }, C = () => {
-      d.value < u.value && d.value++;
-    };
-    return (m, g) => (r(), i("div", ae, [
-      o("ul", {
-        class: "pagination pagination-sm mb-0 justify-content-center text-center",
-        id: e.tablename + "-paginate-parent"
-      }, [
-        o("li", le, [
-          o("button", {
-            onClick: I,
-            type: "button",
-            class: w([e.tablename + "-paginate-navigators page-link", { disabled: d.value === 1 }]),
-            disabled: d.value === 1
-          }, " << ", 10, ne)
-        ]),
-        x.value > 1 ? (r(), i("li", re, [
-          o("button", {
-            type: "button",
-            class: "page-link me-2",
-            onClick: g[0] || (g[0] = (_) => V(1))
-          }, "1"),
-          x.value > 2 ? (r(), i("span", ie, "...")) : k("", !0)
-        ])) : k("", !0),
-        (r(!0), i(R, null, L(P.value, (_) => (r(), i("li", {
-          key: _,
-          class: "page-item"
-        }, [
-          o("button", {
-            type: "button",
-            class: w([d.value === _ ? "active" : "", "page-link", e.tablename + "-paginate-button"]),
-            id: e.tablename + "-navigateButton-" + _,
-            onClick: (T) => V(_)
-          }, y(_), 11, de)
-        ]))), 128)),
-        $.value < u.value ? (r(), i("li", ce, [
-          $.value < u.value - 1 ? (r(), i("span", ue, "...")) : k("", !0),
-          o("button", {
-            type: "button",
-            class: "page-link",
-            onClick: g[1] || (g[1] = (_) => V(u.value))
-          }, y(u.value), 1)
-        ])) : k("", !0),
-        o("li", pe, [
-          o("button", {
-            onClick: C,
-            type: "button",
-            class: w([e.tablename + "-paginate-navigators page-link", { disabled: d.value === u.value }]),
-            disabled: d.value === u.value
-          }, " >> ", 10, ve)
-        ])
-      ], 8, oe)
-    ], 512));
-  }
-}), G = (e, b) => {
-  const t = e.__vccOpts || e;
-  for (const [c, h] of b)
-    t[c] = h;
-  return t;
-}, he = /* @__PURE__ */ G(fe, [["__scopeId", "data-v-126f4cdf"]]), me = { class: "flex-fill position-relative" }, ge = { class: "input-group" }, be = ["placeholder", "value"], _e = /* @__PURE__ */ H({
-  __name: "VsSearch",
-  props: {
-    modelValue: {},
-    placeholder: {}
-  },
-  emits: ["update:modelValue", "input-typed"],
-  setup(e, { emit: b }) {
-    const t = b, c = (h) => {
-      const d = h.target;
-      t("update:modelValue", d.value), t("input-typed", d.value);
-    };
-    return (h, d) => (r(), i("div", me, [
-      o("div", ge, [
-        d[0] || (d[0] = o("div", {
-          class: "input-group-text position-absolute top-0 bottom-0 bg-none border-0",
-          style: { "z-index": "1020" }
-        }, [
-          o("i", { class: "fa fa-search opacity-5" })
-        ], -1)),
-        o("input", {
-          type: "text",
-          class: "form-control ps-35px",
-          placeholder: e.placeholder,
-          value: e.modelValue,
-          onInput: c
-        }, null, 40, be)
-      ])
-    ]));
-  }
-}), ke = /* @__PURE__ */ H({
-  __name: "Loader",
-  props: {
-    height: { default: "50px" }
-  },
-  setup(e) {
-    return (b, t) => (r(), i("div", null, [
-      o("div", {
-        class: "loader",
-        style: E({ height: e.height })
-      }, null, 4)
-    ]));
-  }
-}), ye = /* @__PURE__ */ G(ke, [["__scopeId", "data-v-6ad4d2c7"]]), xe = (e, b = "") => `
-      <svg width="60pt" height="60pt" id="Layer__${e}" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70 70">
-          <defs>
-              <linearGradient id="no-data__rfq_${e}" x1="40.1" y1="64.17" x2="40.1" y2="5.83" gradientUnits="userSpaceOnUse">
-                  <stop offset="0" stop-color="#969698" stop-opacity="0.1" />
-                  <stop offset="1" stop-color="#869ac0" stop-opacity="0.25" />
-              </linearGradient>
-              <linearGradient id="no-data__rfq-2_${e}" x1="176.51" y1="-169.09" x2="196.67" y2="-169.09" gradientTransform="matrix(0.73, 0, 0, -0.73, -125.67, -73.17)" gradientUnits="userSpaceOnUse">
-                  <stop offset="0" stop-color="#969698" />
-                  <stop offset="1" stop-color="#869ac0" />
-              </linearGradient>
-              <linearGradient id="no-data__rfq-3_${e}" x1="187.34" y1="-148.34" x2="227.34" y2="-148.34" xlink:href="#no-data__rfq-2_${e}" />
-          </defs>
-          <path d="M61.25,20.42H46.67V5.83Z" fill="#929aa5" opacity="0.5" style="isolation:isolate" />
-          <path d="M19,5.83H46.67L61.25,20.42V64.17H19ZM54,27H26.25V29.9H54Zm0,6.56H26.25v2.92H54ZM26.25,40.1H54V43H26.25Zm0,6.57H54v2.91H26.25Z" fill-rule="evenodd" fill="url(#no-data__rfq_${e})" />
-          <path d="M3,53.35,13.62,42.78l4.12,4.13L7.17,57.48,3,53.35Z" fill-rule="evenodd" fill="url(#no-data__rfq-2_${e})" />
-          <path d="M37.19,35A11.67,11.67,0,1,0,25.52,46.67,11.68,11.68,0,0,0,37.19,35Zm2.91,0A14.58,14.58,0,1,0,25.52,49.58,14.58,14.58,0,0,0,40.1,35Z" fill-rule="evenodd" fill="url(#no-data__rfq-3_${e})" />
-      </svg>
-      <div class="fs-5 fw-700 text-fmdqgray">${b}</div>
-    `, we = { class: "card-body p-4 vs-table-card-body" }, $e = {
-  key: 0,
-  class: "input-group mb-4"
-}, Ve = { class: "flex-fill position-relative" }, Pe = { class: "input-group" }, Ce = {
-  ref: "tableResponsiveRef",
-  class: "table-responsive"
-}, Oe = {
-  key: 0,
-  style: { width: "5%" }
-}, Se = { class: "form-check mb-2px" }, Me = ["id", "checked"], Re = ["for"], Le = ["onClick"], He = { class: "d-inline-flex align-items-center gap-1" }, Ie = {
-  key: 0,
-  class: "sort-container flex-column"
-}, Te = {
-  key: 1,
-  class: "badge bg-secondary sort-badge"
-}, Be = { key: 0 }, Ze = {
-  colspan: "100%",
-  class: "text-center"
-}, qe = { key: 1 }, Ue = {
-  colspan: "100%",
-  class: "text-center"
-}, Ae = ["innerHTML"], De = ["onClick"], Ge = { class: "form-check mb-2px" }, Ne = ["id", "value"], ze = ["for"], Ee = { class: "d-md-flex align-items-center mt-1" }, je = {
-  key: 0,
-  class: "me-md-auto text-md-left text-center mb-2 mb-md-0"
-}, Fe = {
-  key: 1,
-  class: "me-md-auto"
-}, Ke = /* @__PURE__ */ H({
-  __name: "VsDataTable",
-  props: {
-    rows: { default: () => [] },
-    itemSelected: { default: null },
-    tablename: { default: "default-table" },
-    sort: {},
-    serverItemsLength: {},
-    serverOptions: { default: null },
-    showHeader: { type: Boolean, default: !0 },
-    headerText: { default: "" },
-    loading: { type: Boolean, default: !1 },
-    columns: {},
-    showSearch: { type: Boolean, default: !0 },
-    tableClass: {},
-    rowClass: {},
-    showRowEntries: { type: Boolean, default: !0 }
-  },
-  emits: ["update:itemSelected", "update:serverItemsLength", "update:serverOptions", "input-typed", "page-updated", "sort-changed", "row-click"],
-  setup(e, { emit: b }) {
-    const t = e, c = b, h = K(), d = p(() => !!h.onRowClick);
-    function x(s, l) {
-      return l.split(".").reduce((n, a) => n?.[a], s) ?? "";
-    }
-    const $ = (s) => t.serverOptions?.sort?.some((l) => l.field === s), u = (s) => {
-      const l = t.serverOptions?.sort?.find((n) => n.field === s);
-      return l ? l.priority ?? null : null;
-    }, P = (s) => t.serverOptions?.sort?.find((l) => l.field === s)?.order ?? null, V = p(() => {
-      const s = t.serverOptions?.sort ?? [];
-      if (!s.length) return t.rows;
-      const l = (n, a) => a.split(".").reduce((v, f) => v?.[f], n) ?? "";
-      return [...t.rows].sort((n, a) => {
-        for (const { field: v, order: f } of s) {
-          const q = l(n, v), U = l(a, v);
-          if (q !== U)
-            return f === "asc" ? q > U ? 1 : -1 : q < U ? 1 : -1;
-        }
-        return 0;
-      });
-    }), I = (s, l) => {
-      if (!t.serverOptions) return;
-      let n = [...t.serverOptions.sort || []];
-      const a = n.findIndex((v) => v.field === s);
-      l.shiftKey ? a === -1 ? n.push({ field: s, order: "asc" }) : n[a]?.order === "asc" ? n[a].order = "desc" : n.splice(a, 1) : a === -1 ? n = [{ field: s, order: "asc" }] : n[a]?.order === "asc" ? n = [{ field: s, order: "desc" }] : n = [], n = n.map((v, f) => ({ ...v, priority: f + 1 })), c("update:serverOptions", { ...t.serverOptions, sort: n }), c("sort-changed", { sort: n });
-    }, C = A(""), m = (s) => c("input-typed", s), g = A(10), _ = p({
-      get: () => t.serverOptions?.rowsPerPage ?? g.value,
-      set: (s) => {
-        t.serverOptions ? c("update:serverOptions", { ...t.serverOptions, rowsPerPage: s }) : g.value = s;
-      }
-    }), T = A(1), B = p({
-      get: () => t.serverItemsLength !== void 0 ? t.serverItemsLength : t.rows.length,
-      set: (s) => {
-        t.serverItemsLength !== void 0 && c("update:serverItemsLength", s);
-      }
-    }), O = p({
-      get: () => t.serverOptions?.page ?? T.value,
-      set: (s) => {
-        t.serverOptions ? c("update:serverOptions", { ...t.serverOptions, page: s }) : T.value = s;
-      }
-    }), j = (s) => {
-      t.serverOptions && c("update:serverOptions", { ...t.serverOptions, page: s }), c("page-updated", s);
-    }, Z = p(() => {
-      const s = t.serverOptions?.rowsPerPage ?? 10, l = (O.value - 1) * s + 1, n = Math.min(O.value * s, B.value);
-      return { start: l, end: n };
-    }), S = p({
-      get: () => t.itemSelected || [],
-      set: (s) => c("update:itemSelected", s)
-    }), N = p(() => t.itemSelected !== null), z = p(() => t.rows.length > 0 && S.value.length === t.rows.length), F = () => {
-      S.value = z.value ? [] : [...t.rows];
-    };
-    return (s, l) => {
-      const n = Q("card");
-      return r(), J(n, { class: "vs-table-card mb-3" }, {
-        default: W(() => [
-          o("div", we, [
-            e.showSearch ? (r(), i("div", $e, [
-              o("div", Ve, [
-                o("div", Pe, [
-                  D(_e, {
-                    modelValue: C.value,
-                    "onUpdate:modelValue": l[0] || (l[0] = (a) => C.value = a),
-                    onInputTyped: m,
-                    placeholder: "Search products"
-                  }, null, 8, ["modelValue"]),
-                  l[4] || (l[4] = o("div", {
-                    class: "input-group-text position-absolute top-0 bottom-0 bg-none border-0",
-                    style: { "z-index": "1020" }
-                  }, [
-                    o("i", { class: "fa fa-search opacity-5" })
-                  ], -1))
-                ])
-              ]),
-              M(s.$slots, "filterArea", {}, void 0, !0)
-            ])) : k("", !0),
-            o("div", Ce, [
-              o("table", {
-                class: w(["table table-hover text-nowrap vs-table", e.tableClass])
-              }, [
-                o("thead", null, [
-                  o("tr", null, [
-                    N.value ? (r(), i("th", Oe, [
-                      o("div", Se, [
-                        o("input", {
-                          type: "checkbox",
-                          class: "form-check-input",
-                          id: e.tablename + "-main-checkbox",
-                          checked: z.value,
-                          onChange: F
-                        }, null, 40, Me),
-                        o("label", {
-                          class: "form-check-label pt-1px",
-                          for: e.tablename + "-main-checkbox"
-                        }, null, 8, Re)
-                      ])
-                    ])) : k("", !0),
-                    (r(!0), i(R, null, L(e.columns, (a) => (r(), i("th", {
-                      key: a.field,
-                      onClick: (v) => a.sortable ? I(a.field, v) : null,
-                      style: E({ width: a.width + "%", cursor: a.sortable ? "pointer" : "default" }),
-                      class: "border-top-0 pt-0 pb-2"
-                    }, [
-                      M(s.$slots, `header-${a.field}`, {}, () => [
-                        o("div", He, [
-                          o("span", null, y(a.label), 1),
-                          a.sortable ? (r(), i("span", Ie, [
-                            o("i", {
-                              class: w(["fa fa-sort-up sort-icon", { "active-asc": $(a.field) && P(a.field) === "asc" }])
-                            }, null, 2),
-                            o("i", {
-                              class: w(["fa fa-sort-down sort-icon", { "active-desc": $(a.field) && P(a.field) === "desc" }])
-                            }, null, 2)
-                          ])) : k("", !0),
-                          u(a.field) !== null ? (r(), i("span", Te, y(u(a.field)), 1)) : k("", !0)
-                        ])
-                      ], !0)
-                    ], 12, Le))), 128))
-                  ])
-                ]),
-                o("tbody", null, [
-                  e.loading ? (r(), i("tr", Be, [
-                    o("td", Ze, [
-                      D(ye)
-                    ])
-                  ])) : V.value.length ? (r(!0), i(R, { key: 2 }, L(V.value, (a, v) => (r(), i("tr", {
-                    key: v,
-                    class: w([e.rowClass, { "cursor-pointer": d.value }]),
-                    onClick: (f) => s.$emit("row-click", a, v)
-                  }, [
-                    N.value ? (r(), i("td", {
-                      key: 0,
-                      onClick: l[2] || (l[2] = Y(() => {
-                      }, ["stop"]))
-                    }, [
-                      o("div", Ge, [
-                        ee(o("input", {
-                          type: "checkbox",
-                          class: "form-check-input",
-                          id: e.tablename + "-checkbox-" + a.id,
-                          value: a,
-                          "onUpdate:modelValue": l[1] || (l[1] = (f) => S.value = f)
-                        }, null, 8, Ne), [
-                          [te, S.value]
-                        ]),
-                        o("label", {
-                          class: "form-check-label pt-1px",
-                          for: e.tablename + "-checkbox-" + a.id
-                        }, null, 8, ze)
-                      ])
-                    ])) : k("", !0),
-                    (r(!0), i(R, null, L(e.columns, (f) => (r(), i("td", {
-                      key: f.field,
-                      class: "align-middle"
-                    }, [
-                      M(s.$slots, `cell-${f.field}`, {
-                        item: a,
-                        value: x(a, f.field)
-                      }, () => [
-                        se(y(x(a, f.field)), 1)
-                      ], !0)
-                    ]))), 128))
-                  ], 10, De))), 128)) : (r(), i("tr", qe, [
-                    o("td", Ue, [
-                      M(s.$slots, "no-data", {}, () => [
-                        o("div", {
-                          innerHTML: X(xe)("vs-table-no_data", "No data available")
-                        }, null, 8, Ae)
-                      ], !0)
-                    ])
-                  ]))
-                ])
-              ], 2)
-            ], 512),
-            o("div", Ee, [
-              e.showRowEntries ? (r(), i("div", je, " Showing " + y(Z.value.start < 1 ? 0 : Z.value.start) + " to " + y(Z.value.end) + " of " + y(B.value) + " entries ", 1)) : (r(), i("div", Fe)),
-              D(he, {
-                modelValue: O.value,
-                "onUpdate:modelValue": l[3] || (l[3] = (a) => O.value = a),
-                totalRecords: B.value,
-                rowsPerPage: _.value,
-                maxVisible: 3,
-                tablename: e.tablename,
-                class: "text-center",
-                onPageChanged: j
-              }, null, 8, ["modelValue", "totalRecords", "rowsPerPage", "tablename"])
-            ])
-          ])
-        ]),
-        _: 3
-      });
-    };
-  }
-}), Qe = /* @__PURE__ */ G(Ke, [["__scopeId", "data-v-48b15b64"]]), We = {
-  install(e) {
-    e.component("VsDataTable", Qe);
-  }
-};
-export {
-  Qe as VsDataTable,
-  We as default
-};

package/dist/vs-datatable.umd.js

@@ -1,21 +0,0 @@
-(function(b,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(b=typeof globalThis<"u"?globalThis:b||self,e(b.VsDataTable={},b.Vue))})(this,(function(b,e){"use strict";var O=document.createElement("style");O.textContent=`@media only screen and (min-width: 1199px){.pagination .page-item .page-link[data-v-126f4cdf]{padding:4px 8px!important;font-size:12px!important;line-height:1!important}}@media only screen and (max-width: 768px){.pagination .page-item .page-link[data-v-126f4cdf]{padding:4px 8px!important;font-size:10px!important;line-height:1!important}}.loader[data-v-6ad4d2c7]{position:relative;width:85px;height:50px;background-repeat:no-repeat;background-image:linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0);background-position:0px center,15px center,30px center,45px center,60px center,75px center,90px center;animation:rikSpikeRoll-6ad4d2c7 .65s linear infinite alternate}@keyframes rikSpikeRoll-6ad4d2c7{0%{background-size:10px 3px}16%{background-size:10px 50px,10px 3px,10px 3px,10px 3px,10px 3px,10px 3px}33%{background-size:10px 30px,10px 50px,10px 3px,10px 3px,10px 3px,10px 3px}50%{background-size:10px 10px,10px 30px,10px 50px,10px 3px,10px 3px,10px 3px}66%{background-size:10px 3px,10px 10px,10px 30px,10px 50px,10px 3px,10px 3px}83%{background-size:10px 3px,10px 3px,10px 10px,10px 30px,10px 50px,10px 3px}to{background-size:10px 3px,10px 3px,10px 3px,10px 10px,10px 30px,10px 50px}}.sort-container[data-v-48b15b64]{display:inline-flex;flex-direction:column;align-items:center;line-height:1}.sort-icon[data-v-48b15b64]{font-size:.62rem;color:#aaa;margin:-5px 0}.sort-icon.active-asc[data-v-48b15b64],.sort-icon.active-desc[data-v-48b15b64]{color:#daa520}.sort-badge[data-v-48b15b64]{font-size:.65rem;line-height:1;padding:.15rem .3rem;display:inline-flex;align-items:center;justify-content:center}.vs-table{border-collapse:separate;border-spacing:0}.vs-table thead{background-color:#f8f9fa}.vs-table thead th{font-weight:600;vertical-align:middle;padding:.75rem}.vs-table tbody tr{transition:background-color .2s ease}.vs-table tbody tr:hover{background-color:#e9ecef}.vs-table tbody tr td{padding:.65rem .75rem;vertical-align:middle}.vs-table .sort-icon{font-size:.75rem;vertical-align:middle}
-/*$vite$:1*/`,document.head.appendChild(O);const R={ref:"vsPagination"},D=["id"],T={class:"page-item"},H=["disabled"],I={key:0,class:"page-item d-flex"},q={key:0,class:"page-link disabled"},Z=["id","onClick"],U={key:1,class:"page-item d-flex"},A={key:0,class:"page-link me-2 disabled"},G={class:"page-item"},j=["disabled"],F=e.defineComponent({__name:"VsPagination",props:{modelValue:{},totalRecords:{},rowsPerPage:{},tablename:{},maxVisible:{},paginationClass:{}},emits:["update:modelValue","page-changed"],setup(t,{emit:x}){const a=t,i=x,m=a.maxVisible??3,r=e.computed({get:()=>a.modelValue,set:f=>{i("update:modelValue",f),i("page-changed",f)}}),u=e.computed(()=>r.value<=Math.floor(m/2)?1:r.value>=d.value-Math.floor(m/2)?Math.max(d.value-m+1,1):r.value-Math.floor(m/2)),k=e.computed(()=>Math.min(u.value+m-1,d.value)),d=e.computed(()=>Math.ceil(a.totalRecords/a.rowsPerPage)),y=e.computed(()=>{const f=[];for(let g=u.value;g<=k.value;g++)f.push(g);return f}),_=f=>{f>=1&&f<=d.value&&(r.value=f)},w=()=>{r.value>1&&r.value--},V=()=>{r.value<d.value&&r.value++};return(f,g)=>(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("ul",{class:"pagination pagination-sm mb-0 justify-content-center text-center",id:t.tablename+"-paginate-parent"},[e.createElementVNode("li",T,[e.createElementVNode("button",{onClick:w,type:"button",class:e.normalizeClass([t.tablename+"-paginate-navigators page-link",{disabled:r.value===1}]),disabled:r.value===1}," << ",10,H)]),u.value>1?(e.openBlock(),e.createElementBlock("li",I,[e.createElementVNode("button",{type:"button",class:"page-link me-2",onClick:g[0]||(g[0]=h=>_(1))},"1"),u.value>2?(e.openBlock(),e.createElementBlock("span",q,"...")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,h=>(e.openBlock(),e.createElementBlock("li",{key:h,class:"page-item"},[e.createElementVNode("button",{type:"button",class:e.normalizeClass([r.value===h?"active":"","page-link",t.tablename+"-paginate-button"]),id:t.tablename+"-navigateButton-"+h,onClick:N=>_(h)},e.toDisplayString(h),11,Z)]))),128)),k.value<d.value?(e.openBlock(),e.createElementBlock("li",U,[k.value<d.value-1?(e.openBlock(),e.createElementBlock("span",A,"...")):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"button",class:"page-link",onClick:g[1]||(g[1]=h=>_(d.value))},e.toDisplayString(d.value),1)])):e.createCommentVNode("",!0),e.createElementVNode("li",G,[e.createElementVNode("button",{onClick:V,type:"button",class:e.normalizeClass([t.tablename+"-paginate-navigators page-link",{disabled:r.value===d.value}]),disabled:r.value===d.value}," >> ",10,j)])],8,D)],512))}}),B=(t,x)=>{const a=t.__vccOpts||t;for(const[i,m]of x)a[i]=m;return a},K=B(F,[["__scopeId","data-v-126f4cdf"]]),Q={class:"flex-fill position-relative"},J={class:"input-group"},W=["placeholder","value"],X=e.defineComponent({__name:"VsSearch",props:{modelValue:{},placeholder:{}},emits:["update:modelValue","input-typed"],setup(t,{emit:x}){const a=x,i=m=>{const r=m.target;a("update:modelValue",r.value),a("input-typed",r.value)};return(m,r)=>(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",J,[r[0]||(r[0]=e.createElementVNode("div",{class:"input-group-text position-absolute top-0 bottom-0 bg-none border-0",style:{"z-index":"1020"}},[e.createElementVNode("i",{class:"fa fa-search opacity-5"})],-1)),e.createElementVNode("input",{type:"text",class:"form-control ps-35px",placeholder:t.placeholder,value:t.modelValue,onInput:i},null,40,W)])]))}}),Y=B(e.defineComponent({__name:"Loader",props:{height:{default:"50px"}},setup(t){return(x,a)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",{class:"loader",style:e.normalizeStyle({height:t.height})},null,4)]))}}),[["__scopeId","data-v-6ad4d2c7"]]),ee=(t,x="")=>`
-      <svg width="60pt" height="60pt" id="Layer__${t}" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70 70">
-          <defs>
-              <linearGradient id="no-data__rfq_${t}" x1="40.1" y1="64.17" x2="40.1" y2="5.83" gradientUnits="userSpaceOnUse">
-                  <stop offset="0" stop-color="#969698" stop-opacity="0.1" />
-                  <stop offset="1" stop-color="#869ac0" stop-opacity="0.25" />
-              </linearGradient>
-              <linearGradient id="no-data__rfq-2_${t}" x1="176.51" y1="-169.09" x2="196.67" y2="-169.09" gradientTransform="matrix(0.73, 0, 0, -0.73, -125.67, -73.17)" gradientUnits="userSpaceOnUse">
-                  <stop offset="0" stop-color="#969698" />
-                  <stop offset="1" stop-color="#869ac0" />
-              </linearGradient>
-              <linearGradient id="no-data__rfq-3_${t}" x1="187.34" y1="-148.34" x2="227.34" y2="-148.34" xlink:href="#no-data__rfq-2_${t}" />
-          </defs>
-          <path d="M61.25,20.42H46.67V5.83Z" fill="#929aa5" opacity="0.5" style="isolation:isolate" />
-          <path d="M19,5.83H46.67L61.25,20.42V64.17H19ZM54,27H26.25V29.9H54Zm0,6.56H26.25v2.92H54ZM26.25,40.1H54V43H26.25Zm0,6.57H54v2.91H26.25Z" fill-rule="evenodd" fill="url(#no-data__rfq_${t})" />
-          <path d="M3,53.35,13.62,42.78l4.12,4.13L7.17,57.48,3,53.35Z" fill-rule="evenodd" fill="url(#no-data__rfq-2_${t})" />
-          <path d="M37.19,35A11.67,11.67,0,1,0,25.52,46.67,11.68,11.68,0,0,0,37.19,35Zm2.91,0A14.58,14.58,0,1,0,25.52,49.58,14.58,14.58,0,0,0,40.1,35Z" fill-rule="evenodd" fill="url(#no-data__rfq-3_${t})" />
-      </svg>
-      <div class="fs-5 fw-700 text-fmdqgray">${x}</div>
-    `,te={class:"card-body p-4 vs-table-card-body"},ae={key:0,class:"input-group mb-4"},oe={class:"flex-fill position-relative"},ne={class:"input-group"},le={ref:"tableResponsiveRef",class:"table-responsive"},se={key:0,style:{width:"5%"}},re={class:"form-check mb-2px"},ie=["id","checked"],de=["for"],ce=["onClick"],pe={class:"d-inline-flex align-items-center gap-1"},me={key:0,class:"sort-container flex-column"},fe={key:1,class:"badge bg-secondary sort-badge"},ge={key:0},xe={colspan:"100%",class:"text-center"},he={key:1},be={colspan:"100%",class:"text-center"},ue=["innerHTML"],ke=["onClick"],_e={class:"form-check mb-2px"},ye=["id","value"],Ve=["for"],Ee={class:"d-md-flex align-items-center mt-1"},Ce={key:0,class:"me-md-auto text-md-left text-center mb-2 mb-md-0"},Be={key:1,class:"me-md-auto"},z=B(e.defineComponent({__name:"VsDataTable",props:{rows:{default:()=>[]},itemSelected:{default:null},tablename:{default:"default-table"},sort:{},serverItemsLength:{},serverOptions:{default:null},showHeader:{type:Boolean,default:!0},headerText:{default:""},loading:{type:Boolean,default:!1},columns:{},showSearch:{type:Boolean,default:!0},tableClass:{},rowClass:{},showRowEntries:{type:Boolean,default:!0}},emits:["update:itemSelected","update:serverItemsLength","update:serverOptions","input-typed","page-updated","sort-changed","row-click"],setup(t,{emit:x}){const a=t,i=x,m=e.useAttrs(),r=e.computed(()=>!!m.onRowClick);function u(o,l){return l.split(".").reduce((s,n)=>s?.[n],o)??""}const k=o=>a.serverOptions?.sort?.some(l=>l.field===o),d=o=>{const l=a.serverOptions?.sort?.find(s=>s.field===o);return l?l.priority??null:null},y=o=>a.serverOptions?.sort?.find(l=>l.field===o)?.order??null,_=e.computed(()=>{const o=a.serverOptions?.sort??[];if(!o.length)return a.rows;const l=(s,n)=>n.split(".").reduce((c,p)=>c?.[p],s)??"";return[...a.rows].sort((s,n)=>{for(const{field:c,order:p}of o){const v=l(s,c),P=l(n,c);if(v!==P)return p==="asc"?v>P?1:-1:v<P?1:-1}return 0})}),w=(o,l)=>{if(!a.serverOptions)return;let s=[...a.serverOptions.sort||[]];const n=s.findIndex(c=>c.field===o);l.shiftKey?n===-1?s.push({field:o,order:"asc"}):s[n]?.order==="asc"?s[n].order="desc":s.splice(n,1):n===-1?s=[{field:o,order:"asc"}]:s[n]?.order==="asc"?s=[{field:o,order:"desc"}]:s=[],s=s.map((c,p)=>({...c,priority:p+1})),i("update:serverOptions",{...a.serverOptions,sort:s}),i("sort-changed",{sort:s})},V=e.ref(""),f=o=>i("input-typed",o),g=e.ref(10),h=e.computed({get:()=>a.serverOptions?.rowsPerPage??g.value,set:o=>{a.serverOptions?i("update:serverOptions",{...a.serverOptions,rowsPerPage:o}):g.value=o}}),N=e.ref(1),$=e.computed({get:()=>a.serverItemsLength!==void 0?a.serverItemsLength:a.rows.length,set:o=>{a.serverItemsLength!==void 0&&i("update:serverItemsLength",o)}}),E=e.computed({get:()=>a.serverOptions?.page??N.value,set:o=>{a.serverOptions?i("update:serverOptions",{...a.serverOptions,page:o}):N.value=o}}),Ne=o=>{a.serverOptions&&i("update:serverOptions",{...a.serverOptions,page:o}),i("page-updated",o)},S=e.computed(()=>{const o=a.serverOptions?.rowsPerPage??10,l=(E.value-1)*o+1,s=Math.min(E.value*o,$.value);return{start:l,end:s}}),C=e.computed({get:()=>a.itemSelected||[],set:o=>i("update:itemSelected",o)}),M=e.computed(()=>a.itemSelected!==null),L=e.computed(()=>a.rows.length>0&&C.value.length===a.rows.length),$e=()=>{C.value=L.value?[]:[...a.rows]};return(o,l)=>{const s=e.resolveComponent("card");return e.openBlock(),e.createBlock(s,{class:"vs-table-card mb-3"},{default:e.withCtx(()=>[e.createElementVNode("div",te,[t.showSearch?(e.openBlock(),e.createElementBlock("div",ae,[e.createElementVNode("div",oe,[e.createElementVNode("div",ne,[e.createVNode(X,{modelValue:V.value,"onUpdate:modelValue":l[0]||(l[0]=n=>V.value=n),onInputTyped:f,placeholder:"Search products"},null,8,["modelValue"]),l[4]||(l[4]=e.createElementVNode("div",{class:"input-group-text position-absolute top-0 bottom-0 bg-none border-0",style:{"z-index":"1020"}},[e.createElementVNode("i",{class:"fa fa-search opacity-5"})],-1))])]),e.renderSlot(o.$slots,"filterArea",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",le,[e.createElementVNode("table",{class:e.normalizeClass(["table table-hover text-nowrap vs-table",t.tableClass])},[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[M.value?(e.openBlock(),e.createElementBlock("th",se,[e.createElementVNode("div",re,[e.createElementVNode("input",{type:"checkbox",class:"form-check-input",id:t.tablename+"-main-checkbox",checked:L.value,onChange:$e},null,40,ie),e.createElementVNode("label",{class:"form-check-label pt-1px",for:t.tablename+"-main-checkbox"},null,8,de)])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,n=>(e.openBlock(),e.createElementBlock("th",{key:n.field,onClick:c=>n.sortable?w(n.field,c):null,style:e.normalizeStyle({width:n.width+"%",cursor:n.sortable?"pointer":"default"}),class:"border-top-0 pt-0 pb-2"},[e.renderSlot(o.$slots,`header-${n.field}`,{},()=>[e.createElementVNode("div",pe,[e.createElementVNode("span",null,e.toDisplayString(n.label),1),n.sortable?(e.openBlock(),e.createElementBlock("span",me,[e.createElementVNode("i",{class:e.normalizeClass(["fa fa-sort-up sort-icon",{"active-asc":k(n.field)&&y(n.field)==="asc"}])},null,2),e.createElementVNode("i",{class:e.normalizeClass(["fa fa-sort-down sort-icon",{"active-desc":k(n.field)&&y(n.field)==="desc"}])},null,2)])):e.createCommentVNode("",!0),d(n.field)!==null?(e.openBlock(),e.createElementBlock("span",fe,e.toDisplayString(d(n.field)),1)):e.createCommentVNode("",!0)])],!0)],12,ce))),128))])]),e.createElementVNode("tbody",null,[t.loading?(e.openBlock(),e.createElementBlock("tr",ge,[e.createElementVNode("td",xe,[e.createVNode(Y)])])):_.value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(_.value,(n,c)=>(e.openBlock(),e.createElementBlock("tr",{key:c,class:e.normalizeClass([t.rowClass,{"cursor-pointer":r.value}]),onClick:p=>o.$emit("row-click",n,c)},[M.value?(e.openBlock(),e.createElementBlock("td",{key:0,onClick:l[2]||(l[2]=e.withModifiers(()=>{},["stop"]))},[e.createElementVNode("div",_e,[e.withDirectives(e.createElementVNode("input",{type:"checkbox",class:"form-check-input",id:t.tablename+"-checkbox-"+n.id,value:n,"onUpdate:modelValue":l[1]||(l[1]=p=>C.value=p)},null,8,ye),[[e.vModelCheckbox,C.value]]),e.createElementVNode("label",{class:"form-check-label pt-1px",for:t.tablename+"-checkbox-"+n.id},null,8,Ve)])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,p=>(e.openBlock(),e.createElementBlock("td",{key:p.field,class:"align-middle"},[e.renderSlot(o.$slots,`cell-${p.field}`,{item:n,value:u(n,p.field)},()=>[e.createTextVNode(e.toDisplayString(u(n,p.field)),1)],!0)]))),128))],10,ke))),128)):(e.openBlock(),e.createElementBlock("tr",he,[e.createElementVNode("td",be,[e.renderSlot(o.$slots,"no-data",{},()=>[e.createElementVNode("div",{innerHTML:e.unref(ee)("vs-table-no_data","No data available")},null,8,ue)],!0)])]))])],2)],512),e.createElementVNode("div",Ee,[t.showRowEntries?(e.openBlock(),e.createElementBlock("div",Ce," Showing "+e.toDisplayString(S.value.start<1?0:S.value.start)+" to "+e.toDisplayString(S.value.end)+" of "+e.toDisplayString($.value)+" entries ",1)):(e.openBlock(),e.createElementBlock("div",Be)),e.createVNode(K,{modelValue:E.value,"onUpdate:modelValue":l[3]||(l[3]=n=>E.value=n),totalRecords:$.value,rowsPerPage:h.value,maxVisible:3,tablename:t.tablename,class:"text-center",onPageChanged:Ne},null,8,["modelValue","totalRecords","rowsPerPage","tablename"])])])]),_:3})}}}),[["__scopeId","data-v-48b15b64"]]),we={install(t){t.component("VsDataTable",z)}};b.VsDataTable=z,b.default=we,Object.defineProperties(b,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));