@qikdev/vue-ui 0.0.4 → 0.1.2

package/src/table/TableRow.vue

@@ -1,14 +1,14 @@
 <template>
     <tr :class="classes" class="table-row">
         <slot>
-            <th v-if="enableSelection" class="table-cell first shrink" @click.stop.prevent="clickSelect(row)">
+            <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 icon>
+                <ux-button size="xs" icon>
                     <ux-icon icon="fa-ellipsis" />
                 </ux-button>
             </th>
@@ -52,12 +52,13 @@ export default {
             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);
+        clickActions(row) {
+            console.log('click actions')
+            this.$emit('click:actions', row);
         },
-        clickSelect() {
-            this.$emit('click:select', this.row);
+        clickSelect(row) {
+            console.log('click select')
+            this.$emit('click:select', row);
             // this.$emit('click:row', this.row);
         },
     },
@@ -76,19 +77,6 @@ export default {
 </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/Button.vue

@@ -0,0 +1,56 @@
+<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/Thumbnail.vue

@@ -1,7 +1,7 @@
 <template>
 	<td class="table-image-cell">
 		<template v-if="type == 'image' || type == 'video'">
-			<ux-image v-model="row" :type="type" :width="50"/>
+			<ux-image :item="row" :type="type" :width="50"/>
 		</template>
 		<template v-else>
 			<ux-icon icon="fa-file"/>
@@ -26,6 +26,7 @@ export default {
 <style scoped lang="scss">
 
 td {
+	min-width:60px;
 	width:60px;
 	padding:0.3em !important;
 

package/src/table/cells/Value.vue

@@ -0,0 +1,46 @@
+<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>

package/src/ui/image.vue

@@ -6,7 +6,7 @@
 <script>
 export default {
     props: {
-        modelValue: {
+        item: {
             type: Object,
         },
         width: {
@@ -35,7 +35,7 @@ export default {
     },
     data() {
         return {
-            model: this.modelValue,
+            model: this.item,
         }
     },
     computed: {

package/src/ui/list-item.vue

@@ -3,6 +3,12 @@
 		<slot/>
 	</div>
 </template>
+<script>
+	
+export default {
+
+}
+</script>
 <style lang="scss" scoped>
 
 .ux-list-item {

package/src/ui/menu.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="ux-menu">
+    <div class="ux-menu" :class="{right}">
         <span>
             <slot name="activator" :on="on" />
         </span>
@@ -11,6 +11,10 @@
 <script>
 export default {
     props: {
+        right:{
+            type:Boolean,
+            default:false,
+        },
         closeOnClick: {
             type: Boolean,
             default () {
@@ -59,8 +63,6 @@ export default {
             }
         },
         globalClick(event) {
-            console.log('GLOBAL', event);
-
 
             if (this.triggerEvent === event) {
                 return;
@@ -129,7 +131,17 @@ export default {
 
     .ux-menu-panel {
         position: fixed;
-        z-index: 1;
+        z-index: 10;
+        max-height: 70vh;
+        overflow: auto;
+        text-align: left;
+        text-transform: none;
+        letter-spacing: 0;
+        font-weight: normal;
+    }
+
+    &.right .ux-menu-panel{
+        right:0;
     }
 }
 </style>

package/src/ui/pager.vue

@@ -0,0 +1,156 @@
+<template>
+    <flex-row center gap>
+        <flex-cell shrink class="text">
+            <native-select v-model="perPage" :field="perPageField">
+                <template v-if="$device.breakpoint.xs">{{displayStartIndex}}-{{endIndex}} of {{total}}</template>
+                <template v-else>Showing {{displayStartIndex}} to {{endIndex}} of {{total}} total</template>
+            </native-select>
+        </flex-cell>
+        <flex-cell>
+        </flex-cell>
+        <flex-cell shrink v-if="totalPages > 1">
+            <flex-row gap center>
+                <flex-cell shrink class="text">
+                    <native-select v-model="currentPage" :field="pageField">
+                        <template v-if="$device.breakpoint.xs">{{currentPage}}/{{totalPages}}</template>
+                        <template v-else>Page {{currentPage}} of {{totalPages}}</template>
+                    </native-select>
+                </flex-cell>
+                <flex-cell shrink>
+                    <ux-button icon @click="previousPage()">
+                        <ux-icon icon="fa-arrow-left" />
+                    </ux-button>
+                </flex-cell>
+                <flex-cell shrink>
+                    <ux-button icon @click="nextPage()">
+                        <ux-icon icon="fa-arrow-right" />
+                    </ux-button>
+                </flex-cell>
+            </flex-row>
+        </flex-cell>
+    </flex-row>
+</template>
+<script>
+import NativeSelect from '../form/inputs/select.vue';
+
+
+export default {
+    props: {
+        total: {
+            type: Number,
+            default () {
+                return 0;
+            }
+        },
+    },
+    components: {
+        NativeSelect,
+    },
+    watch: {
+        totalPages() {
+            this.currentPage = 0;
+        },
+    },
+    computed: {
+        perPage: {
+            get() {
+                return this.page.size;
+            },
+            set(i) {
+                i = Math.max(i, 1);
+                this.page.size = i;
+                this.dispatch();
+            }
+
+        },
+        pageField() {
+            return {
+                type: 'integer',
+                maximum: 1,
+                minimum: 1,
+                options: Array(this.totalPages).fill(1).map((x, y) => x + y),
+            }
+        },
+        // total() {
+        //     return this.dataSource.total;
+        // },
+        totalPages() {
+            return Math.ceil(this.total / this.perPage)
+        },
+        startIndex() {
+            return (this.currentPage - 1) * this.page.size;
+        },
+        displayStartIndex() {
+            return this.total ? this.startIndex + 1 : 0;
+        },
+        endIndex() {
+            return Math.min(this.startIndex + this.page.size, this.total);
+        },
+        currentPage: {
+            get() {
+                return this.page.index;
+            },
+            set(index) {
+
+
+                if (this.totalPages) {
+                    index = Math.min(this.totalPages, index);
+                }
+
+                index = Math.max(index, 1);
+
+                this.page.index = index;
+                this.dispatch();
+            }
+        },
+
+    },
+    methods: {
+        dispatch() {
+            return this.$emit('update:page', this.page);
+        },
+        previousPage() {
+            this.currentPage--;
+        },
+        nextPage() {
+            this.currentPage++;
+        },
+    },
+    data() {
+        return {
+            page: {
+                size: 50,
+                index: 1,
+            },
+            perPageField: {
+                minimum: 1,
+                maximum: 1,
+                options: [{
+                        title: '50 per page',
+                        value: 50,
+                    },
+                    {
+                        title: '100 per page',
+                        value: 100,
+                    },
+                    {
+                        title: '250 per page',
+                        value: 250,
+                    },
+                    {
+                        title: '500 per page',
+                        value: 500,
+                    },
+                ]
+            }
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+
+	.text {
+        opacity: 0.5;
+        font-size: 0.8em;
+    }
+</style>

package/src/version.js

@@ -1 +1 @@
-export const version = '0.1.0'
+export const version = '0.1.2'