@qikdev/vue-ui 0.0.1 → 0.0.2

package/src/table/Table.vue

@@ -0,0 +1,269 @@
+<template>
+    <div class="table-wrapper">
+        <div class="table-scroll" ref="scroll">
+            <table>
+                <thead>
+                    <tr>
+                        <th v-if="enableSelection" class="first shrink">
+                            <ux-menu>
+                                <template #activator="{ on }">
+                                    <ux-checkbox v-on="on" :value="pageSelected"></ux-checkbox>
+                                </template>
+                                <ux-list>
+                                    <ux-list-item @click="selectPage()">
+                                        Select Page
+                                    </ux-list-item>
+
+                                    <ux-list-item v-if="someSelectedOnPage" @click="deselectPage()">
+                                        Deselect Page
+                                    </ux-list-item>
+                                    <ux-list-item v-if="selectAll" @click="selectAll()">
+                                        Select All ({{total}})
+                                    </ux-list-item>
+                                    <ux-list-item v-if="deselectAll" @click="deselectAll()">
+                                        Deselect All
+                                    </ux-list-item>
+                                    
+                                </ux-list>
+                            </ux-menu>
+                        </th>
+                        <th @click="toggleSort(column)" :class="column.class" v-for="column in renderColumns">
+                            {{column.title}}
+                        </th>
+                        <th v-if="enableActions" class="last shrink"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <table-row :enableSelection="enableSelection" :enableActions="enableActions" :key="row._id" @click:cell="clickCell" @click:row="clickRow" @click:select="clickSelect" @click:actions="clickActions" :selected="isSelected(row)" :row="row" :columns="columns" v-for="row in renderRows" />
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+<script>
+import TableRow from './TableRow.vue';
+import TableCell from './TableCell.vue';
+
+
+export default {
+    components: {
+        TableRow,
+        TableCell,
+    },
+    watch: {
+        rows() {
+            this.$refs.scroll.scroll({
+                top: 0,
+                left: 0,
+            });
+        }
+    },
+    props: {
+        total:{
+            type:Number,
+        },
+        columns: {
+            type: Array,
+            default () {
+                return []
+            }
+        },
+        rows: {
+            type: Array,
+            default () {
+                return [];
+            },
+        },
+        scrollable: {
+            type: Boolean,
+            default () {
+                return true;
+            }
+        },
+        enableActions: {
+            type: Boolean,
+            default () {
+                return false;
+            },
+        },
+        enableSelection: {
+            type: Boolean,
+            default () {
+                return true;
+            },
+        },
+        selection: {
+            type: Array,
+            default () {
+                return []
+            },
+        },
+        selectAll:{
+            type:Function,
+        },
+        deselectAll:{
+            type:Function,
+        },
+    },
+    computed: {
+        selectionHash() {
+            var self = this;
+            return self.selection.reduce(function(set, row) {
+                var id = row._id || row.id;
+                set[id] = row;
+                return set;
+            }, {})
+        },
+        pageSelected() {
+            var self = this;
+
+            if (!self.rows || !self.rows.length) {
+                return;
+            }
+
+            //Check to see if any rows are not selected
+            return !self.rows.some(function(row) {
+                return !(self.selectionHash[row._id || row.id]);
+            })
+        },
+        renderColumns() {
+            return this.columns.map(function(column) {
+
+                var col = Object.assign({}, column);
+
+                col.class = [];
+                if (col.shrink) {
+                    col.class.push('shrink')
+                }
+
+                return col;
+            });
+        },
+        renderRows() {
+            return this.rows;
+        },
+        someSelectedOnPage() {
+            return this.rows.some(this.isSelected);
+        },
+    },
+    methods: {
+
+        togglePage() {
+
+            var self = this;
+
+            console.log('TOGGLE', self.pageSelected)
+            if (self.pageSelected) {
+                self.deselectPage();
+            } else {
+                self.selectPage();
+            }
+        },
+        selectPage() {
+            var self = this;
+            self.$emit('select:multiple', self.rows);
+        },
+        deselectPage() {
+            var self = this;
+            self.$emit('deselect:multiple', self.rows);
+        },
+        
+        isSelected(row) {
+
+            var self = this;
+            var rowID = row._id || row.id;
+            return self.selection.some(function(r) {
+                var rid = r._id || r.id;
+                return r == row || rid == rowID;
+            });
+        },
+        classes(row) {
+            let array = [];
+            if (this.isSelected(row)) {
+                array.push('selected');
+            }
+            return array;
+        },
+
+        toggleSort(column) {
+
+        },
+        clickRow(row) {
+            this.$emit('click:row', row);
+        },
+        clickCell({ row, column }) {
+            this.$emit('click:cell', { row, column });
+        },
+        clickActions(row) {
+            this.$emit('click:actions', row);
+        },
+        clickSelect(row) {
+            this.$emit('select:row:toggle', row);
+        },
+
+    }
+}
+</script>
+<style scoped lang="scss">
+.table-wrapper {
+    // box-sizing:border-box;
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+
+    .table-scroll {
+        overflow: auto;
+        position: relative;
+        width: 100%;
+    }
+
+
+
+    :deep(table) {
+        width: 100%;
+        border-collapse: collapse;
+
+        thead {
+            th {
+                top: 0;
+                position: sticky;
+                text-transform: uppercase;
+                letter-spacing: 0.05em;
+                line-height: 20px;
+                white-space: nowrap;
+                font-size: 11px;
+                padding: 0.5em;
+                background: #fff;
+                z-index: 2;
+                text-align: left;
+            }
+
+            border-bottom: 1px solid rgba(#000, 0.05);
+
+        }
+
+        th.first,
+        td.first {
+            position: sticky;
+            left: 0;
+            // z-index: 1;
+        }
+
+        th.last,
+        td.last {
+            position: sticky;
+            right: 0;
+            // z-index: 1;
+        }
+
+        td,
+        th {
+            padding: 0.5em;
+
+            &.shrink {
+                width: 1px;
+            }
+        }
+    }
+}
+</style>

package/src/table/TableCell.vue

@@ -0,0 +1,64 @@
+<template>
+	<component v-if="component" :is="component" :column="column" :row="row" :value="value"/>
+    <td v-else class="table-cell">
+        {{value}}
+    </td>
+</template>
+<script>
+
+import _get from 'lodash/get';
+import {defineAsyncComponent} from 'vue';
+
+import ThumbnailCell from './cells/Thumbnail.vue';
+
+export default {
+	data() {
+		return {
+			component:null,
+		}
+	},
+	async created() {
+        var self = this;
+
+        var component;
+
+        ///////////////////////////////
+
+        switch (this.column.renderer) {
+            case 'thumbnail':
+                // simple usage
+                component = ThumbnailCell;
+                break;
+        }
+
+        ///////////////////////////////
+
+        this.component = component;
+    },
+	props:{
+		column:{
+			type:Object,
+			required:true,
+		},
+		row:{
+			type:Object,
+			required:true,
+		},
+	},
+	computed:{
+		renderer() {
+			return this.column.renderer;
+		},
+		value() {
+			return _get(this.row, this.column.key);
+		},
+	}
+}
+</script>
+
+
+<style scoped lang="scss">
+
+
+
+</style>

package/src/table/TableRow.vue

@@ -0,0 +1,94 @@
+<template>
+    <tr :class="classes" class="table-row">
+        <slot>
+            <th v-if="enableSelection" class="table-cell first shrink" @click.stop.prevent="clickSelect(row)">
+                <ux-checkbox :value="selected">
+                </ux-checkbox>
+            </th>
+            <table-cell @click.stop.prevent="clickCell(column)" :column="column" :row="row" v-for="column in columns">
+            </table-cell>
+            <th v-if="enableActions" class="table-cell last shrink" @click.stop.prevent="clickActions(row)">
+                <ux-button icon>
+                    <ux-icon icon="fa-ellipsis" />
+                </ux-button>
+            </th>
+        </slot>
+    </tr>
+</template>
+<script>
+import TableCell from './TableCell.vue';
+
+export default {
+    components: {
+        TableCell,
+    },
+    props: {
+        selected: {
+            type: Boolean,
+        },
+        row: {
+            type: Object,
+            required: true,
+        },
+        columns: {
+            type: Array,
+            required: true,
+        },
+        enableActions:{
+            type:Boolean,
+            default() {
+                return false;
+            },
+        },
+        enableSelection:{
+            type:Boolean,
+            default() {
+                return true;
+            },
+        }
+    },
+    methods:{
+        clickCell(column) {
+            this.$emit('click:cell', {row:this.row, column});
+            this.$emit('click:row', this.row);
+        },
+        clickActions() {
+            this.$emit('click:actions', this.row);
+            this.$emit('click:row', this.row);
+        },
+        clickSelect() {
+            this.$emit('click:select', this.row);
+            // this.$emit('click:row', this.row);
+        },
+    },
+    computed: {
+        classes() {
+            var array = [];
+
+            if (this.selected) {
+                array.push('selected');
+            }
+
+            return array;
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+
+tr {
+	border-bottom: 1px solid rgba(#000, 0.05);
+	&:last-of-type {
+		border-bottom:none;
+	}
+}
+
+tr:nth-child(odd) {
+    background: rgba(#000, 0.02);
+}
+
+tr.selected {
+    background: rgba(orange, 0.1);
+}
+
+</style>

package/src/table/cells/TableCellMixin.js

@@ -0,0 +1,15 @@
+export default {
+	props:{
+		column:{
+			type:Object,
+			required:true,
+		},
+		row:{
+			type:Object,
+			required:true,
+		},
+		value:{
+			
+		}
+	}
+}

package/src/table/cells/Thumbnail.vue

@@ -0,0 +1,38 @@
+<template>
+	<td class="table-image-cell">
+		<template v-if="type == 'image' || type == 'video'">
+			<ux-image v-model="row" :type="type" :width="50"/>
+		</template>
+		<template v-else>
+			<ux-icon icon="fa-file"/>
+		</template>
+    </td>
+</template>
+<script>
+
+import TableCellMixin from './TableCellMixin.js';
+
+export default {
+	mixins:[TableCellMixin],
+	computed:{
+		type() {
+			return this.row?.meta?.type
+		}
+	}
+}
+</script>
+
+
+<style scoped lang="scss">
+
+td {
+	width:60px;
+	padding:0.3em !important;
+
+	.ux-image {
+		border-radius:0.1em;
+	}
+}
+
+
+</style>