vueye-table 1.4.1 → 2.0.0-alpha.2

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Antério Vieira
+
+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,31 @@
-# 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
+
+:warning: **This project is still in development.**
+
+## Tools and conventions
+
+-   [x] Eslint
+-   [x] Prettier
+-   [x] Conventional Commit
+-   [x] Pre-commit
+-   [x] Lint-staged
+-   [x] Semantic-release
+-   [x] TypeScript
+
+## TODO
+
+1. Data Rendering ✅
+2. Sorting
+3. Filtering
+4. Pagination ✅
+5. Selection
+6. Editing
+7. Resizing and Reordering
+8. Row Expansion
+9. Grouping by columns ✅
+10. Exporting
+11. Responsive Design
+12. Customization
+13. Accessibility
+14. ...
+

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

@@ -0,0 +1,15 @@
+export type Meta<TData extends Record<TItemValue, unknown>, TItemValue extends string = 'id'> = {
+    key: keyof TData;
+    label: string;
+    children?: Meta<TData, TItemValue>[];
+};
+export type SelectProps<TData extends Record<TItemValue, unknown>, TItemValue extends string = 'id'> = {
+    itemValue: TItemValue;
+    items: TData[];
+    meta: Meta<any>;
+};
+export declare const VSelect: (props: {
+    items: any[];
+    itemValue: string;
+    meta: Meta<any, "id">;
+} & {}) => any;

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

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

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

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

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

@@ -0,0 +1,22 @@
+import type { ColumnHeader, SlotHeader } 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<import("vue").ExtractPropTypes<{
+    columnHeaders: {
+        type: globalThis.PropType<ColumnHeader[][]>;
+        required: true;
+        default: () => never[];
+    };
+}>>, {
+    columnHeaders: ColumnHeader[][];
+}, {}>, SlotHeader<Record<string, string>>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

@@ -0,0 +1,55 @@
+declare const _default: import("vue").DefineComponent<{
+    perPage: {
+        type: globalThis.PropType<number>;
+        required: true;
+        default: number;
+    };
+    currentPage: {
+        type: globalThis.PropType<number>;
+        required: true;
+        default: number;
+    };
+    total: {
+        type: globalThis.PropType<number>;
+        required: true;
+        default: number;
+    };
+    perPageOptions: {
+        type: globalThis.PropType<number[]>;
+        required: true;
+        default: () => number[];
+    };
+}, {}, 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<import("vue").ExtractPropTypes<{
+    perPage: {
+        type: globalThis.PropType<number>;
+        required: true;
+        default: number;
+    };
+    currentPage: {
+        type: globalThis.PropType<number>;
+        required: true;
+        default: number;
+    };
+    total: {
+        type: globalThis.PropType<number>;
+        required: true;
+        default: number;
+    };
+    perPageOptions: {
+        type: globalThis.PropType<number[]>;
+        required: true;
+        default: () => number[];
+    };
+}>> & {
+    "onUpdate:currentPage"?: ((value: number) => any) | undefined;
+    "onUpdate:perPage"?: ((value: number) => any) | undefined;
+}, {
+    perPage: number;
+    currentPage: number;
+    total: number;
+    perPageOptions: number[];
+}, {}>;
+export default _default;

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

@@ -0,0 +1,6 @@
+export type PaginationProps = {
+    perPage: number;
+    currentPage: number;
+    total: number;
+};
+export declare const VueyePagination: (props: PaginationProps & {}) => any;

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

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

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

@@ -0,0 +1 @@
+export * from './useHeaderKeys';

package/dist/components/core/VueyeTable/composables/props/PaginationProps.d.ts

@@ -0,0 +1,5 @@
+export interface PaginationProps {
+    perPage: number;
+    currentPage: number;
+    total: number;
+}

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/index.d.ts

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

package/dist/components/core/VueyeTable/types/Column.d.ts

@@ -0,0 +1,55 @@
+import { DeepKeys } from './Utils';
+export type SortOrder = 'ascending' | 'descending' | null;
+export type FiltrableColumnHeaderBase = {
+    filterable?: boolean;
+    filter?: (value: any, filter: any) => boolean;
+};
+export type FiltrableColumnHeader = FiltrableColumnHeaderBase & {
+    filterOptions?: any[];
+    filterMultiple?: boolean;
+    filterMethod?: (value: any, filter: any) => boolean;
+    filterRemote?: boolean;
+    filterRemoteMethod?: (prop: string, filters: any[]) => Promise<any>;
+};
+export type SortableColumnHeaderBase = {
+    sortable?: boolean;
+    sortMethod?: (a: any, b: any) => number;
+    sortBy?: (row: any) => any;
+};
+export type SortableColumnHeader = SortableColumnHeaderBase & {
+    sortOrders?: SortOrder[];
+    sortRemote?: boolean;
+    sortRemoteMethod?: (prop: string, order: SortOrder) => Promise<any>;
+    defaultSortOrder?: SortOrder;
+};
+export type ColumnHeaderBase<TData extends Record<string, unknown>> = FiltrableColumnHeaderBase & SortableColumnHeaderBase & {
+    key: string;
+    label: string;
+    children?: ColumnHeaderBase<TData>[];
+    align?: 'left' | 'center' | 'right';
+    fixed?: 'left' | 'right';
+    formatter?: (value: any, row: any, index: number) => string;
+    className?: string;
+    labelClassName?: string;
+    selectable?: (row: any, index: number) => boolean;
+    resizable?: boolean;
+    showOverflowTooltip?: boolean;
+};
+export type ColumnHeader = ColumnHeaderBase<{}> & {
+    rowSpan?: number;
+    colSpan?: number;
+    width?: string;
+    minWidth?: string;
+    scope?: string;
+};
+export type SlotHeaderCell<T> = {
+    [K in DeepKeys<T> as K extends string ? `headerCell.${K}` : never]: (props: {
+        headerCell: ColumnHeader;
+    }) => any;
+};
+export type SlotHeaderCellContent<T> = {
+    [K in DeepKeys<T> as K extends string ? `headerCellContent.${K}` : never]: (props: {
+        headerCellContent: ColumnHeader;
+    }) => any;
+};
+export type SlotHeader<T> = SlotHeaderCell<T> & SlotHeaderCellContent<T>;

package/dist/components/core/VueyeTable/types/Row.d.ts

@@ -0,0 +1,3 @@
+export type Row = {
+    [key: string]: any;
+};

package/dist/components/core/VueyeTable/types/Utils.d.ts

@@ -0,0 +1,13 @@
+export type DeepKeys<T> = T extends object ? {
+    [K in keyof T]: K | DeepKeys<T[K]>;
+}[keyof T] : never;
+export type Prefix<T extends object, P extends string> = {
+    [key in keyof T as `${P}${string & key}`]: T[key];
+};
+export type DeepKeyValues<T extends readonly object[]> = {
+    [K in keyof T]: T[K] extends {
+        key: infer U;
+    } ? U extends string ? T[K] extends {
+        children: infer C;
+    } ? C extends readonly object[] ? U | DeepKeyValues<C> : never : U : never : never;
+}[number];

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

@@ -0,0 +1,3 @@
+export * from './Column';
+export * from './Row';
+export * from './Utils';

package/dist/components/core/VueyeTable/util-components/VueyeDropdown.vue.d.ts

@@ -0,0 +1,53 @@
+export type OptionValue = string | number | boolean | object | symbol;
+interface Option {
+    value: OptionValue;
+    label: string;
+}
+declare const _default: import("vue").DefineComponent<{
+    label: {
+        type: globalThis.PropType<string>;
+        required: true;
+        default: string;
+    };
+    options: {
+        type: globalThis.PropType<Option[]>;
+        required: true;
+        default: () => never[];
+    };
+    modelValue: {
+        type: globalThis.PropType<string | number>;
+        required: true;
+        default: string;
+    };
+    defaultValue: {
+        type: globalThis.PropType<Option>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: OptionValue) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: globalThis.PropType<string>;
+        required: true;
+        default: string;
+    };
+    options: {
+        type: globalThis.PropType<Option[]>;
+        required: true;
+        default: () => never[];
+    };
+    modelValue: {
+        type: globalThis.PropType<string | number>;
+        required: true;
+        default: string;
+    };
+    defaultValue: {
+        type: globalThis.PropType<Option>;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((value: OptionValue) => any) | undefined;
+}, {
+    label: string;
+    options: Option[];
+    modelValue: string | number;
+}, {}>;
+export default _default;

package/dist/components/core/VueyeTable/utils/body.d.ts

@@ -0,0 +1,4 @@
+import { ColumnHeader, Row } from '../types';
+export declare function getBodyRows(rows: Row[], headers: ColumnHeader[], start?: number, end?: number): {
+    [x: string]: any;
+}[];

package/dist/components/core/VueyeTable/utils/header.d.ts

@@ -0,0 +1,6 @@
+import { ColumnHeader } from '../types';
+export declare function depthCount(headers: ColumnHeader[]): number;
+export declare function leafCount(headers: ColumnHeader[]): number;
+export declare function flatHeadersToRows(headers: ColumnHeader[], depth: number, rows?: ColumnHeader[][], currentRow?: number, level?: number): ColumnHeader[][];
+export declare function getHeaderKeys<T extends ColumnHeader>(headers: T[], keysPath?: string, keys?: string[]): string[];
+export declare function defineColumnHeaders(headers: any[]): ColumnHeader[];

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

@@ -0,0 +1,2 @@
+export * from './header';
+export * from './body';

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export * from './core/VueyeTable';

package/dist/composables/dark.d.ts

@@ -0,0 +1,2 @@
+export declare const isDark: globalThis.WritableComputedRef<boolean>;
+export declare const toggleDark: (value?: boolean | undefined) => boolean;