vueye-table 1.4.1 → 2.0.0-alpha.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 radix-vue
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,202 +1,89 @@
-# Vueye Table
-
-Vueye data table is a responsive data table component based on [Vue.js](http://vuejs.org), it organizes
-your data per pages in order to navigate easily.
-
-![Vueye](https://raw.githubusercontent.com/boussadjra/vueye-table/master/src/assets/vueye.png)
-
-This component allows you to :
-
--   Paginate data (server/client side)
--   Filter by field
--   Sort columns
--   Show only desired columns
--   Custom cells rendering
-    
-
-## Docs
-
-**[Documentation](https://boussadjra.github.io/vueye-table/)**
-
-[Boilerplate in codesandbox](https://codesandbox.io/s/bold-star-s7hgw) (update the component dependency to the latest version)
-
-
-
-## Requirement
-
--   Vue.js ^2.6 + composition-api
--   It doesn't require any CSS framework
-
-## Installation
-
-```
-npm install vueye-table --save
-```
-
-## Usage
-
-```js
-<template>
-  <div id="app">
-    <VueyeTable :data="employees" :columns="columns" title="Employees" filter-by="employee_salary">
-      <template v-slot:employee_salary="{item}">
-        <b
-          v-if="item.employee_salary>100000"
-          style="background:#3bb640;color:white"
-        >{{item.employee_salary}}</b>
-        <b v-else style="background:#ee4422;color:white">{{item.employee_salary}}</b>
-      </template>
-      <template v-slot:actions="{item}">
-        <div class="ve-table-actions">
-          <button class="ve-table-btn ve-table-btn-primary" @click="edit(item)">Edit</button>
-          <button class="ve-table-btn ve-table-btn-danger" @click="deleteItem(item)">Delete</button>
-        </div>
-      </template>
-    </VueyeTable>
-  </div>
-</template>
-
-<script>
-import VueyeTable from "./components/VueyeTable.vue";
-import employees from "./assets/employees.json";
-export default {
-  name: "App",
-  data: () => ({
-    employees: employees,
-    columns: [
-      {
-        key: "id",
-        label: "ID",
-        sortable: true,
-        type: "number",
-        display: true
-      },
-      {
-        key: "employee_name",
-        label: "Employee Name",
-        sortable: true,
-        display: true
-      },
-      {
-        key: "employee_salary",
-        label: "Employee Salary",
-        display: true,
-        sortable: true
-      },
-      {
-        key: "employee_age",
-        label: "Employee Age",
-        sortable: true
-      },
-      {
-        key: "address.city",
-        label: "Address",
-        display: true,
-        sortable: true
-      },
-      {
-        key: "actions",
-        label: "Actions",
-        sortable: false,
-        display: true
-      }
-    ],
-    selectedRows: []
-  }),
-  methods: {
-    edit(item) {
-      //open a dialog to edit the selected item
-      //or redirect to another page that contains
-      // edit form
-    },
-    deleteItem(item) {
-      this.employees = this.employees.filter(
-        employee => employee.id !== item.id
-      );
-    }
-  },
-  components: {
-    VueyeTable
-  }
-};
-</script>
-
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 20px;
-}
-
-.ve-table {
-  &-actions {
-    width: 104px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-  }
-  &-btn {
-    height: 24px;
-    min-width: 32px;
-    padding: 0 8px;
-    text-align: center;
-    border-radius: 4px;
-
-    cursor: pointer;
-    justify-content: center;
-    outline: none;
-    border: none;
-    position: relative;
-    white-space: nowrap;
-    &-primary {
-      background: #3844cc;
-      color: white;
-    }
-    &-danger {
-      background: #e24e40;
-      color: white;
-    }
-  }
-}
-</style>
-
-
-```
-
-In main.js add `@vue/composition-api` plugin to make work with Vue.js 2 :
-
-```js
-import Vue from 'vue';
-import App from './App.vue';
-import VueComp from '@vue/composition-api';
-Vue.config.productionTip = false;
-
-Vue.use(VueComp);
-
-new Vue({
-	render: h => h(App),
-}).$mount('#app');
-```
-
-### Props
-
-| Name            | Description                                  |
-| --------------- | -------------------------------------------- |
-| title           | the data table title                         |
-| columns         | the attributes or columns                    |
-| data            | JS array of object or json content           |
-| filter-by       | specify the default column for filter        |
-| per-page-values | the array of per pages values                |
-| per-page        | the default per page                         |
-| select-rows     | add checkbox columns in order to select rows |
-| v-model         | returns the selected rows                    |
-| dense           | Show table rows in small size                |
-| striped         | Apply striped style                          |
-| bordered        | make the table bordered                      |
-| header-display  | show/hide the table header                   |
+# Vueye Table
+
+Vueye Table is a Vue 3 component for displaying data in a table.
+
+## Installation
+
+```bash
+npm install vueye-table
+```
+
+## Usage
+
+```vue
+<template>
+    <VueyeTable
+        :data="data"
+        :columnHeaders="columnHeaders"
+        :itemValue="itemValue"
+        :perPage="perPage"
+        :currentPage="currentPage"
+        :perPageOptions="perPageOptions"
+        :loading="loading"
+        :selected="selected"
+        :selectMode="selectMode"
+        :caption="caption"
+        :summary="summary"
+        @update:loading="updateLoading"
+        @update:selected="updateSelected"
+    >
+        <template #headerCellContent.name="props">
+            {{ props.columnHeader.name }}
+        </template>
+        <template #itemCellContent.name="props">
+            {{ props.item.name }}
+        </template>
+    </VueyeTable>
+</template>
+```
+
+### VueyeTableProps
+
+| Prop Name | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| data | TData[] | [] | An array of data for the table. |
+| columnHeaders | TColumn[] or a function returning an array | [] | An array of column headers for the table. |
+| itemValue | string | 'id' | The property name used as a unique identifier for each item. |
+| perPage | number | 10 | The number of items displayed per page. |
+| currentPage | number | 1 | The current page number. |
+| perPageOptions | number[] or a function returning an array | [5, 10, 20, 30] | An array of options for the number of items per page. |
+| loading | boolean | false | Indicates whether the table is in a loading state. |
+| selected | TData[], Row[], or null | null | An array of selected items or rows. |
+| selectMode | 'page' or 'all' | 'all' | The mode for selecting items: 'page' or 'all'. |
+| caption | string | '' | The table's caption. |
+| summary | string | '' | The table's summary. |
+
+### VueyeTableEmits
+
+| Emit Name       | Parameters     | Description                           |
+| --------------- | -------------- | ------------------------------------- |
+| update:loading  | value: boolean | Emits when the loading state changes. |
+| update:selected | value: T[]     | Emits when the selected items change. |
+
+### PaginationEmits
+
+| Emit Name          | Parameters    | Description                                      |
+| ------------------ | ------------- | ------------------------------------------------ |
+| update:currentPage | value: number | Emits when the current page changes.             |
+| update:perPage     | value: number | Emits when the number of items per page changes. |
+
+### SlotHeader
+
+The SlotHeader component defines various slots for customizing the table header.
+
+-   `headerCell.<ColumnKey>`: Slot for customizing the content of a specific column header.
+-   `headerCellContent.<ColumnKey>`: Slot for customizing the content within a specific column header cell.
+-   `headers`: Slot for customizing the entire table header, containing all column headers.
+-   `checkbox`: Slot for customizing the checkbox used for selecting all items.
+
+### SlotRow
+
+The SlotRow component defines various slots for customizing the table rows.
+
+-   `itemCell.<ItemKey>`: Slot for customizing the content of a specific item cell within a row.
+-   `itemCellContent.<ItemKey>`: Slot for customizing the content within a specific item cell.
+-   `rows`: Slot for customizing the entire table rows, containing all rows.
+-   `row`: Slot for customizing a specific row.
+-   `checkbox`: Slot for customizing the checkbox used for selecting a specific row.
+
+You can use these Markdown tables to document the props, emits, and slot definitions for the data table and pagination components in your Vue 3 project.

package/dist/components/core/VueyeTable/VueyeTable.vue.d.ts

@@ -0,0 +1,65 @@
+import type { ColumnHeader } from './types';
+declare const _default: <TData extends Record<string, unknown>, TColumn extends ColumnHeader>(__VLS_props: {
+    caption?: string | undefined;
+    data: TData[];
+    summary?: string | undefined;
+    columnHeaders?: TColumn[] | undefined;
+    itemValue?: string | undefined;
+    perPage?: number | undefined;
+    currentPage?: number | undefined;
+    perPageOptions?: number[] | undefined;
+    loading?: boolean | undefined;
+    selectable?: boolean | undefined;
+} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
+    attrs: any;
+    slots: Readonly<import("./types").SlotHeaderCell<TData> & import("./types").SlotHeaderCellContent<TData> & {
+        caption: () => any;
+        summary: () => any;
+    }>;
+    emit: any;
+} | undefined, __VLS_expose?: ((exposed: {}) => void) | undefined, __VLS_setup?: Promise<{
+    props: {
+        caption?: string | undefined;
+        data: TData[];
+        summary?: string | undefined;
+        columnHeaders?: TColumn[] | undefined;
+        itemValue?: string | undefined;
+        perPage?: number | undefined;
+        currentPage?: number | undefined;
+        perPageOptions?: number[] | undefined;
+        loading?: boolean | undefined;
+        selectable?: boolean | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+    expose(exposed: {}): void;
+    attrs: any;
+    slots: Readonly<import("./types").SlotHeaderCell<TData> & import("./types").SlotHeaderCellContent<TData> & {
+        caption: () => any;
+        summary: () => any;
+    }>;
+    emit: any;
+}>) => globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            caption?: string | undefined;
+            data: TData[];
+            summary?: string | undefined;
+            columnHeaders?: TColumn[] | undefined;
+            itemValue?: string | undefined;
+            perPage?: number | undefined;
+            currentPage?: number | undefined;
+            perPageOptions?: number[] | undefined;
+            loading?: boolean | undefined;
+            selectable?: boolean | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        expose(exposed: {}): void;
+        attrs: any;
+        slots: Readonly<import("./types").SlotHeaderCell<TData> & import("./types").SlotHeaderCellContent<TData> & {
+            caption: () => any;
+            summary: () => any;
+        }>;
+        emit: any;
+    } | undefined;
+};
+export default _default;

package/dist/components/core/VueyeTable/api.d.ts

@@ -0,0 +1,14 @@
+import { InferDefaults } from './types';
+export type VueyeTableProps<TColumn = any, TData = any> = {
+    data: TData[];
+    columnHeaders?: TColumn[];
+    itemValue?: string;
+    perPage?: number;
+    currentPage?: number;
+    perPageOptions?: number[];
+    loading?: boolean;
+    selectable?: boolean;
+    caption?: string;
+    summary?: string;
+};
+export declare const VueyeTablePropsDefaults: InferDefaults<VueyeTableProps>;

package/dist/components/core/VueyeTable/components/VueyeBody/VueyeBody.vue.d.ts

@@ -0,0 +1,49 @@
+import { BodyProps } from './api';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    itemValue: {
+        type: globalThis.PropType<string>;
+        required: true;
+        default: (string | ((props: BodyProps) => string)) | undefined;
+    };
+    loading: {
+        type: globalThis.PropType<boolean>;
+        required: true;
+        default: (boolean | ((props: BodyProps) => boolean)) | undefined;
+    };
+    bodyRows: {
+        type: globalThis.PropType<import("../..").Row[]>;
+        required: true;
+        default: ((props: BodyProps) => import("../..").Row[]) | undefined;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<{
+    itemValue: {
+        type: globalThis.PropType<string>;
+        required: true;
+        default: (string | ((props: BodyProps) => string)) | undefined;
+    };
+    loading: {
+        type: globalThis.PropType<boolean>;
+        required: true;
+        default: (boolean | ((props: BodyProps) => boolean)) | undefined;
+    };
+    bodyRows: {
+        type: globalThis.PropType<import("../..").Row[]>;
+        required: true;
+        default: ((props: BodyProps) => import("../..").Row[]) | undefined;
+    };
+}>>, {
+    itemValue: string;
+    loading: boolean;
+    bodyRows: import("../..").Row[];
+}, {}>, {
+    default?(_: {
+        cell: any;
+        key: string;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/core/VueyeTable/components/VueyeBody/api.d.ts

@@ -0,0 +1,7 @@
+import { InferDefaults, Row } from '../../types';
+export type BodyProps = {
+    loading: boolean;
+    bodyRows: Row[];
+    itemValue: string;
+};
+export declare const bodyPropDefaults: InferDefaults<BodyProps>;

package/dist/components/core/VueyeTable/components/VueyeBody/index.d.ts

@@ -0,0 +1,2 @@
+import VueyeBody from './VueyeBody.vue';
+export { VueyeBody };

package/dist/components/core/VueyeTable/components/VueyeDropdown/api.d.ts

@@ -0,0 +1,20 @@
+export type OptionValue = string | number | boolean | object | symbol;
+interface Option {
+    content: OptionValue;
+    label: string;
+}
+export type DropdownProps = {
+    options: Option[];
+    modelValue: string | number;
+    label: string;
+    defaultValue?: Option;
+};
+export declare const dropdownPropsDefaults: {
+    options: () => never[];
+    modelValue: string;
+    label: string;
+};
+export type DropdownEmits = {
+    (event: 'update:modelValue', value: OptionValue): void;
+};
+export {};

package/dist/components/core/VueyeTable/components/VueyeDropdown/index.d.ts

@@ -0,0 +1,4 @@
+import type { OptionValue } from './api';
+import VueyeDropdown from './VueyeDropdown.vue';
+export { VueyeDropdown };
+export type { OptionValue };

package/dist/components/core/VueyeTable/components/VueyeHead/VueyeHead.vue.d.ts

@@ -0,0 +1,22 @@
+import type { ColumnHeader } from '../../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    columnHeaders: {
+        type: globalThis.PropType<ColumnHeader[][]>;
+        required: true;
+        default: () => never[];
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<{
+    columnHeaders: {
+        type: globalThis.PropType<ColumnHeader[][]>;
+        required: true;
+        default: () => never[];
+    };
+}>>, {
+    columnHeaders: ColumnHeader[][];
+}, {}>, Readonly<import("../../types").SlotHeaderCell<Record<string, string>> & import("../../types").SlotHeaderCellContent<Record<string, string>>>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/core/VueyeTable/components/VueyeHead/index.d.ts

@@ -0,0 +1,2 @@
+import VueyeHead from './VueyeHead.vue';
+export { VueyeHead };

package/dist/components/core/VueyeTable/components/VueyePagination/VueyePagination.vue.d.ts

@@ -0,0 +1,56 @@
+import { PaginationProps } from './api';
+declare const _default: import("vue").DefineComponent<{
+    perPage: {
+        type: globalThis.PropType<number>;
+        required: true;
+        default: (number | ((props: PaginationProps) => number)) | undefined;
+    };
+    currentPage: {
+        type: globalThis.PropType<number>;
+        required: true;
+        default: (number | ((props: PaginationProps) => number)) | undefined;
+    };
+    perPageOptions: {
+        type: globalThis.PropType<number[]>;
+        required: true;
+        default: ((props: PaginationProps) => number[]) | undefined;
+    };
+    total: {
+        type: globalThis.PropType<number>;
+        required: true;
+        default: (number | ((props: PaginationProps) => number)) | undefined;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:currentPage": (value: number) => void;
+    "update:perPage": (value: number) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<{
+    perPage: {
+        type: globalThis.PropType<number>;
+        required: true;
+        default: (number | ((props: PaginationProps) => number)) | undefined;
+    };
+    currentPage: {
+        type: globalThis.PropType<number>;
+        required: true;
+        default: (number | ((props: PaginationProps) => number)) | undefined;
+    };
+    perPageOptions: {
+        type: globalThis.PropType<number[]>;
+        required: true;
+        default: ((props: PaginationProps) => number[]) | undefined;
+    };
+    total: {
+        type: globalThis.PropType<number>;
+        required: true;
+        default: (number | ((props: PaginationProps) => number)) | undefined;
+    };
+}>> & {
+    "onUpdate:currentPage"?: ((value: number) => any) | undefined;
+    "onUpdate:perPage"?: ((value: number) => any) | undefined;
+}, {
+    perPage: number;
+    currentPage: number;
+    perPageOptions: number[];
+    total: number;
+}, {}>;
+export default _default;

package/dist/components/core/VueyeTable/components/VueyePagination/api.d.ts

@@ -0,0 +1,12 @@
+import { InferDefaults } from '../../types';
+export interface PaginationProps {
+    perPage: number;
+    currentPage: number;
+    total: number;
+    perPageOptions: number[];
+}
+export interface PaginationEmits {
+    (event: 'update:currentPage', value: number): void;
+    (event: 'update:perPage', value: number): void;
+}
+export declare const paginationPropsDefaults: InferDefaults<PaginationProps>;

package/dist/components/core/VueyeTable/components/VueyePagination/index.d.ts

@@ -0,0 +1,2 @@
+import VueyePagination from './VueyePagination.vue';
+export { VueyePagination };

package/dist/components/core/VueyeTable/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './VueyeDropdown';
+export * from './VueyeBody';
+export * from './VueyeHead';
+export * from './VueyePagination';

package/dist/components/core/VueyeTable/composables/index.d.ts

@@ -0,0 +1,4 @@
+export * from './useHeaderKeys';
+export * from './usePagination';
+export * from './useBodyRows';
+export * from './useHeaders';

package/dist/components/core/VueyeTable/composables/useHeaderKeys.d.ts

@@ -0,0 +1,4 @@
+import { ColumnHeader } from '../types';
+export declare function useHeaderKeys(columnHeaders: ColumnHeader[][]): {
+    headerKeys: globalThis.ComputedRef<string[]>;
+};

package/dist/components/core/VueyeTable/composables/usePagination.d.ts

@@ -0,0 +1,11 @@
+export declare function usePagination(props?: {
+    perPage?: number;
+    currentPage?: number;
+}): {
+    pagination: globalThis.Ref<{
+        perPage: number;
+        currentPage: number;
+    }>;
+    updateCurrentPage: (page: number) => void;
+    updatePerPage: (perPage: number) => void;
+};

package/dist/components/core/VueyeTable/index.d.ts

@@ -0,0 +1,5 @@
+import VueyeTable from './VueyeTable.vue';
+export * from './types';
+export * from './composables';
+export * from './utils';
+export { VueyeTable };