vue-slim-tables 0.0.6 → 0.3.0

package/README.md

@@ -1,3 +1,52 @@
-# vue-slim-table
+# Vue Slim Tables
 
-...comming soon
+### Installation & basic usage
+```sh
+yarn add vue-slim-tables
+// or
+npm install vue-slim-tables
+```
+
+```html
+<template>
+    <VueSlimTables :columns="columns" remote="/users" />
+</template>
+
+<script>
+    export default {
+        created() {
+            this.columns = [
+                { key: 'id', title: 'ID' },
+                { key: 'name', title: 'Name' },
+                { key: 'phone', title: 'Phone' }
+            ]
+        }
+    }
+</script>
+```
+
+### Props
+| Prop | Type | Required | Description |
+| - | - | - | - |
+| columns | Array | true | Array of column objects described below |
+| source | [String, Function] | true | `string` is for async fetching rows<br/>`function` for more complicated async load |
+| perPage | Number | false | Number or rows to display |
+
+#### Column object
+| Key | Type | Required | Description |
+| - | - | - | - |
+| key | String | true | `Uniq` key that used for ordering and slots |
+| title | String | true | Displayed in thead |
+| orderable | Boolean | false | Ordering by column `key` |
+
+### Slots
+| Slot | Props | Description |
+| - | - | - |
+| #head:${column.key} | { column } | Rewrite column thead with custom html |
+| #row | { row, index, columns } | Rewrite whole row |
+| #row:empty | - | Rewrite empty table row markup |
+| #row:loading | - | Rewrite loading table rows markup |
+| #cell:${column.key} | { row, index, column, value } | Rewrite cell with custom html |
+| #pagination | { page, rows } | Rewrite pagination with your own implementation |
+| #thead:before | { columns } | Ability to render content before base header |
+| #thead:after | { columns } | Ability to render content after base header |

package/dist/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";@keyframes moving-gradient{0%{background-position:-250px 0}to{background-position:250px 0}}.vst-th{line-height:20px}.vst-orderable div{display:flex;justify-content:space-between;align-items:center}.vst-orderable div:hover{cursor:pointer}.vst-orderable div:hover .vst-orderable-toggle{color:#555!important}.vst-orderable div .vst-orderable-toggle{font-size:20px;color:#ccc!important}.vst-orderable div .vst-orderable-toggle:after{content:" \2194";display:inline-block;transform:rotate(-90deg)}.vst-orderable div .vst-orderable-toggle.desc:after{content:" \2191";transform:rotate(0)}.vst-orderable div .vst-orderable-toggle.asc:after{content:" \2193";transform:rotate(0)}.vst-loading-row div{height:1.5rem;background:linear-gradient(to right,#eee 20%,#ddd 50%,#eee 80%);background-size:500px 1.5rem;animation-name:moving-gradient;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:forwards}.vst tr td.vst-loading-row-1 div{animation-delay:-1s}.vst tr td.vst-loading-row-2 div{animation-delay:-.9s}.vst tr td.vst-loading-row-3 div{animation-delay:-.8s}.vst tr td.vst-loading-row-4 div{animation-delay:-.7s}.vst tr td.vst-loading-row-5 div{animation-delay:-.6s}.vst tr td.vst-loading-row-6 div{animation-delay:-.5s}.vst tr td.vst-loading-row-7 div{animation-delay:-.4s}.vst tr td.vst-loading-row-8 div{animation-delay:-.3s}.vst tr td.vst-loading-row-9 div{animation-delay:-.2s}.vst tr td.vst-loading-row-10 div{animation-delay:-.1s}.vst-pagination{display:flex;padding-left:0;list-style:none;border-radius:.25rem}.vst-pagination a{position:relative;display:block;padding:8px 12px;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #dee2e6}.vst-pagination a:hover{z-index:2;color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#dee2e6}.vst-page-item.disabled .vst-page-link{pointer-events:none;color:#6c757d;cursor:auto;background-color:#fff}.vst-page-item .vst-page-link{cursor:pointer}

package/dist/types/components/loading_row.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    columnsLength: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, {
+    randNum: number;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    columnsLength: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _sfc_main;

package/dist/types/components/table.vue.d.ts

@@ -0,0 +1,83 @@
+import { ShallowRef } from 'vue';
+interface TableColumn {
+    key: string;
+    title: string;
+    orderable?: boolean;
+}
+interface TableOrders {
+    [key: string]: 'asc' | 'desc';
+}
+interface TableFetchParams {
+    per_page: number;
+    page: number;
+    order?: Array<{
+        field: string;
+        direction: 'asc' | 'desc';
+    }>;
+}
+declare const _sfc_main: import("vue").DefineComponent<{
+    columns: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    source: {
+        type: (StringConstructor | FunctionConstructor)[];
+        required: true;
+    };
+    perPage: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+}, {
+    props: {
+        columns: Array<TableColumn>;
+        source: string | ((_: TableFetchParams) => Promise<Array<unknown>> | Array<unknown>);
+        perPage: number;
+    };
+    orders: ShallowRef<TableOrders>;
+    fetchData: (params: TableFetchParams) => Promise<any>;
+    onOrderClick: (key: string) => void;
+    page: import("vue").Ref<number>;
+    isSyncing: import("vue").ComputedRef<boolean>;
+    isSynced: import("vue").ComputedRef<boolean>;
+    prevPage: () => void;
+    nextPage: () => void;
+    reload: () => void;
+    refetch: () => void;
+    rows: {
+        value: {
+            [x: string]: any;
+        }[];
+    };
+    LoadingRow: import("vue").DefineComponent<{
+        columnsLength: {
+            type: NumberConstructor;
+            required: true;
+        };
+    }, {
+        randNum: number;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        columnsLength: {
+            type: NumberConstructor;
+            required: true;
+        };
+    }>>, {}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    columns: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    source: {
+        type: (StringConstructor | FunctionConstructor)[];
+        required: true;
+    };
+    perPage: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+}>>, {
+    perPage: number;
+}>;
+export default _sfc_main;

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+import VueSlimTable from './components/table.vue';
+export default VueSlimTable;

package/dist/types/use/filterable.d.ts

@@ -0,0 +1,23 @@
+interface UseFiltetableArgs {
+    initialFilters: {
+        [key: string]: any;
+    };
+    loadItems: any;
+}
+declare const useFilterable: ({ initialFilters, loadItems }: UseFiltetableArgs) => {
+    page: import("vue").Ref<number>;
+    items: {
+        value: {
+            [x: string]: any;
+        }[];
+    };
+    syncState: import("vue").Ref<string>;
+    nextPage: () => void;
+    prevPage: () => void;
+    isSyncing: import("vue").ComputedRef<boolean>;
+    isSynced: import("vue").ComputedRef<boolean>;
+    isFailed: import("vue").ComputedRef<boolean>;
+    reload: () => void;
+    refetch: () => void;
+};
+export default useFilterable;