@qikdev/vue-ui 0.1.2 → 0.1.8

package/src/table/Table.vue

@@ -1,316 +0,0 @@
-<template>
-    <div class="table-wrapper">
-        <div class="table-scroll" ref="scroll">
-            <table>
-                <thead>
-                    <tr>
-                        <th v-if="enableSelection" class="first table-select 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">
-                            <slot name="corner"></slot>
-                        </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';
-
-import RememberScrollMixin from '../mixins/RememberScroll.js';
-
-
-export default {
-    mixins:[RememberScrollMixin],
-    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;
-
-
-            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;
-
-                &.table-select {
-                    font-size: clamp(17px, 1em, 20px);
-                }
-            }
-
-            border-bottom: 1px solid rgba(#000, 0.05);
-
-        }
-
-        th.first,
-        td.first {
-            position: sticky;
-            left: 0;
-            // z-index: 1;
-            text-align: center;
-        }
-
-        th.last,
-        td.last {
-            position: sticky;
-            right: 0;
-            // z-index: 1;
-            text-align: center;
-        }
-
-        td,
-        th {
-            padding: 0.5em;
-            font-size: clamp(17px, 1em, 20px);
-
-            &.shrink {
-                width: 1px;
-            }
-        }
-
-        tr {
-            border-bottom: 1px solid rgba(#000, 0.05);
-
-            &:last-of-type {
-                border-bottom: none;
-            }
-        }
-
-        tr:nth-child(odd) {
-            background: darken(#fff, 1%);
-
-            th.first,
-            td.first,
-            th.last,
-            td.last {
-                background: darken(#fff, 1%);
-            }
-        }
-
-        tr:nth-child(even) {
-
-            th.first,
-            td.first,
-            th.last,
-            td.last {
-                background: #fff;
-            }
-        }
-
-        tr.selected {
-            background: rgba(orange, 0.1);
-        }
-    }
-}
-</style>

package/src/table/TableCell.vue

@@ -1,113 +0,0 @@
-<template>
-    <component v-if="component" :is="component" :column="column" :row="row" :value="value" />
-    <td v-else class="table-cell">
-        <template v-if="multiValue">
-            <template v-if="complex">
-                <span class="value" v-for="entry in value">
-                    <value-renderer :value="entry" />
-                </span>
-            </template>
-            <template v-else>
-                <span class="value" v-for="entry in value">
-                    <value-renderer :value="entry" />, 
-                </span>
-            </template>
-        </template>
-        <template v-else>
-            <value-renderer :value="value" />
-        </template>
-
-
-    </td>
-</template>
-<script>
-import _get from 'lodash/get';
-import { defineAsyncComponent } from 'vue';
-
-import ThumbnailCell from './cells/Thumbnail.vue';
-import ButtonCell from './cells/Button.vue';
-import ValueRenderer from './cells/Value.vue';
-
-export default {
-    data() {
-        return {
-            component: null,
-        }
-    },
-    components: {
-        ValueRenderer,
-    },
-    async created() {
-        var self = this;
-
-        var component;
-
-        ///////////////////////////////
-
-        switch (this.column.renderer) {
-            case 'button':
-            component = ButtonCell;
-                break;
-            case 'thumbnail':
-                // simple usage
-                component = ThumbnailCell;
-                break;
-        }
-
-        ///////////////////////////////
-
-        this.component = component;
-    },
-    props: {
-        column: {
-            type: Object,
-            required: true,
-        },
-        row: {
-            type: Object,
-            required: true,
-        },
-    },
-    computed: {
-        multiValue() {
-            return Array.isArray(this.value);
-        },
-        complex() {
-            if (this.multiValue) {
-
-            } else {
-
-            }
-        },
-        renderer() {
-            return this.column.renderer;
-        },
-        renderValue() {
-
-            var value = this.value;
-
-            if (value === undefined || value === null) {
-                return;
-            }
-
-            return value.title || value.name || value;
-        },
-        value() {
-            var v = _get(this.row, this.column.key);
-
-            if(!v) {
-                console.log(this.row, this.column.key)
-            }
-
-            return v;
-        },
-    }
-}
-</script>
-<style scoped lang="scss">
-.value {
-    display: inline-block;
-    margin: 0.05em;
-
-}
-</style>

package/src/table/TableRow.vue

@@ -1,82 +0,0 @@
-<template>
-    <tr :class="classes" class="table-row">
-        <slot>
-            <th v-if="enableSelection" class="table-cell table-select 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 size="xs" 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(row) {
-            console.log('click actions')
-            this.$emit('click:actions', row);
-        },
-        clickSelect(row) {
-            console.log('click select')
-            this.$emit('click:select', row);
-            // this.$emit('click:row', this.row);
-        },
-    },
-    computed: {
-        classes() {
-            var array = [];
-
-            if (this.selected) {
-                array.push('selected');
-            }
-
-            return array;
-        }
-    }
-}
-</script>
-<style scoped lang="scss">
-
-
-
-</style>

package/src/table/cells/Button.vue

@@ -1,56 +0,0 @@
-<template>
-	<td class="table-button-cell">
-		<ux-button :size="button.size" :loading="processing" @click.stop.prevent="clicked">
-			<template v-if="button.text">{{button.text}}</template><ux-icon v-if="button.icon" :icon="button.icon" right/>
-		</ux-button>
-    </td>
-</template>
-<script>
-
-import TableCellMixin from './TableCellMixin.js';
-
-export default {
-	data() {
-		return {
-			processing:false,
-		}
-	},
-	mixins:[TableCellMixin],
-	computed:{
-		button() {
-			return this.column.button;
-		},
-		type() {
-			return this.row?.meta?.type
-		}
-	},
-	methods:{
-		async clicked() {
-
-			this.processing = true;
-			await this.button.action(this.row);
-			this.processing = false;
-		}
-	}
-}
-</script>
-
-
-<style scoped lang="scss">
-
-td {
-	width:60px;
-	padding:0.3em !important;
-
-	.ux-image {
-		border-radius:0.1em;
-	}
-
-	:deep .ux-btn-text {
-		display: block;
-		white-space: nowrap;
-	}
-}
-
-
-</style>

package/src/table/cells/TableCellMixin.js

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

package/src/table/cells/Thumbnail.vue

@@ -1,39 +0,0 @@
-<template>
-	<td class="table-image-cell">
-		<template v-if="type == 'image' || type == 'video'">
-			<ux-image :item="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 {
-	min-width:60px;
-	width:60px;
-	padding:0.3em !important;
-
-	.ux-image {
-		border-radius:0.1em;
-	}
-}
-
-
-</style>

package/src/table/cells/Value.vue

@@ -1,46 +0,0 @@
-<template>
-	<a @click.stop.prevent="clicked(value)" v-if="reference">{{renderValue}}</a>
-	<template v-else>{{renderValue}}</template>
-</template>
-<script>
-
-export default {
-	props:{
-		value:{
-			required:true,
-		}
-	},
-	computed:{
-		reference() {
-			return !!(this.value && this.value._id)
-		},
-		renderValue() {
-			return this.value ? this.value.title || this.value.name || this.value : undefined;
-		}
-	},
-	methods:{
-		clicked(item) {
-			this.$qik.dispatch('item:view', item);
-		}
-	},
-}
-</script>
-<style lang="scss" scoped>
-a {
-	padding: 0.5em 1em;
-	margin: 0.1em;
-	background: rgba(#000, 0.05);
-	border-radius: 0.5em;
-	display: inline-block;
-	line-height: 1;
-	font-size: 0.7em;
-	cursor:pointer;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden ;
-
-	&:hover {
-		background: rgba(#000, 0.1);
-	}
-}
-</style>