@qikdev/vue-ui 0.0.4 → 0.1.2

package/src/services/device.js

@@ -0,0 +1,211 @@
+
+import { reactive } from 'vue'
+
+export default function() {
+
+    var service = reactive({
+        mounted:false,
+        screen: {
+            width: 1024,
+            height: 768,
+        },
+        limits: {
+            xs: 600,
+            sm: 960,
+            md: 1264,
+            lg: 1904,
+        },
+        breakpoint: {
+            mobile: false,
+            tablet: false,
+            desktop: false,
+            xs: false,
+            sm: false,
+            md: false,
+            lg: false,
+            xl: false,
+            xsOnly: false,
+            smOnly: false,
+            smAndDown: false,
+            smAndUp: false,
+            mdOnly: false,
+            mdAndDown: false,
+            mdAndUp: false,
+            lgOnly: false,
+            lgAndDown: false,
+            lgAndUp: false,
+            xlOnly: false,
+            point: 0,
+        },
+    });
+
+    ////////////////////////////////
+
+    var mounted;
+    let WindowReference;
+
+    ////////////////////////////////
+
+    service.resize = function() {
+        console.log('RESIZE')
+
+        var width = Math.max(WindowReference.innerWidth || 0);
+        var height = Math.max(WindowReference.innerHeight || 0);
+
+        service.screen = {
+            width,
+            height,
+        }
+
+        ///////////////////////////////////////////
+
+        var breakpoint = {
+            mobile: false,
+            tablet: false,
+            desktop: false,
+            xs: false,
+            sm: false,
+            md: false,
+            lg: false,
+            xl: false,
+            xsOnly: false,
+            smOnly: false,
+            smAndDown: false,
+            smAndUp: false,
+            mdOnly: false,
+            mdAndDown: false,
+            mdAndUp: false,
+            lgOnly: false,
+            lgAndDown: false,
+            lgAndUp: false,
+            xlOnly: false,
+            point: 0,
+        }
+
+        ///////////////////////////////////////////
+
+        var point = 0;
+
+        if (width > service.limits.xs) {
+            point++;
+        }
+
+        if (width > service.limits.sm) {
+            point++;
+        }
+
+        if (width > service.limits.md) {
+            point++;
+        }
+
+        if (width > service.limits.lg) {
+            point++;
+        }
+
+        ///////////////////////////////////////////
+
+        //XS Mobile
+        if (point < 1) {
+            breakpoint.mobile = true;
+            breakpoint.xs = true;
+            breakpoint.xsOnly = true;
+
+            //Down
+            breakpoint.smAndDown = true;
+            breakpoint.mdAndDown = true;
+            breakpoint.lgAndDown = true;
+
+        }
+
+        //SM Tablet
+        if (point == 1) {
+            breakpoint.tablet = true;
+            breakpoint.sm = true;
+            breakpoint.smOnly = true;
+
+            //Down
+            breakpoint.smAndDown = true;
+            breakpoint.mdAndDown = true;
+            breakpoint.lgAndDown = true;
+
+            //Up
+            breakpoint.smAndUp = true;
+        }
+
+        //MD Tablet
+        if (point == 2) {
+            breakpoint.desktop = true;
+            breakpoint.md = true;
+            breakpoint.mdOnly = true;
+            //Down
+            breakpoint.mdAndDown = true;
+            breakpoint.lgAndDown = true;
+
+            //Up
+            breakpoint.smAndUp = true;
+            breakpoint.mdAndUp = true;
+        }
+
+        //LG Desktop
+        if (point == 3) {
+            breakpoint.desktop = true;
+            breakpoint.lg = true;
+            breakpoint.lgOnly = true;
+            //Down
+            breakpoint.lgAndDown = true;
+
+            //Up
+            breakpoint.smAndUp = true;
+            breakpoint.mdAndUp = true;
+            breakpoint.lgAndUp = true;
+        }
+
+        //XL Desktop
+        if (point > 3) {
+            breakpoint.desktop = true;
+            breakpoint.xl = true;
+            breakpoint.xlOnly = true;
+            //Up
+             breakpoint.smAndUp = true;
+            breakpoint.mdAndUp = true;
+            breakpoint.lgAndUp = true;
+        }
+
+
+        service.point = point;
+        service.breakpoint = breakpoint;
+
+        // console.log('SERVICE', point, service.screen, breakpoint)
+
+    }
+
+
+    ////////////////////////////////
+
+    service.mount = function(window) {
+        if (mounted) {
+            return;
+        }
+
+        WindowReference = window;
+        service.resize();
+        mounted = true;
+        service.mounted = true;
+        WindowReference.addEventListener('resize', service.resize);
+    }
+
+
+    ////////////////////////////////
+
+    service.unmount = function() {
+        WindowReference.removeEventListener('resize', service.resize);
+        WindowReference = false;
+        mounted = false;
+        service.mounted = false;
+    }
+
+    ////////////////////////////////
+
+    return service;
+
+}

package/src/services/selection.js

@@ -1,4 +1,5 @@
-import { reactive, watchEffect } from 'vue';
+import { reactive, watch } from 'vue';
+import { EventDispatcher } from '@qikdev/sdk';
 
 export default function(options) {
 
@@ -8,7 +9,7 @@ export default function(options) {
 
     ///////////////////////////////////
 
-    const service = {}
+    const service = EventDispatcher({})
 
     ///////////////////////////////////
 
@@ -17,7 +18,8 @@ export default function(options) {
 
     ///////////////////////////////////
 
-    watchEffect(function() {
+
+    watch(selection, function() {
         recreateHash();
     });
 
@@ -33,6 +35,7 @@ export default function(options) {
             set[id] = item;
             return set;
         }, {});
+
     }
     ///////////////////////////////////
 
@@ -40,7 +43,8 @@ export default function(options) {
         return hash[item._id || item.id];
     }
 
-    service.select = function(item) {
+    service.select = function(item, ignoreDispatch) {
+
 
         //If there is a limit set
         if (maximum) {
@@ -60,9 +64,14 @@ export default function(options) {
 
         //Add the item into the selection array
         selection.push(item);
+
+        if (!ignoreDispatch) {
+            service.dispatch('change', selection);
+        }
     }
 
-    service.deselect = function(item) {
+    service.deselect = function(item, ignoreDispatch) {
+
 
         //If we can only select one item
         //then just clear the selection
@@ -77,44 +86,60 @@ export default function(options) {
         })
 
         //If there was no index found
-        if(index == -1) {
+        if (index == -1) {
             return;
         }
 
         //remove it from the array
         selection.splice(index, 1);
+        if (!ignoreDispatch) {
+            service.dispatch('change', selection);
+        }
+
     }
 
-    service.toggle = function(item) {
+    service.toggle = function(item, ignoreDispatch) {
+
         if (service.isSelected(item)) {
-            service.deselect(item);
+            service.deselect(item, ignoreDispatch);
         } else {
-            service.select(item);
+            service.select(item, ignoreDispatch);
         }
     }
 
     service.selectMultiple = function(array) {
+
+
         array.forEach(function(item) {
-            service.select(item);
+            service.select(item, true);
         })
+
+        service.dispatch('change', selection);
     }
 
     service.deselectMultiple = function(array) {
+
+
         array.forEach(function(item) {
-            service.deselect(item);
+            service.deselect(item, true);
         })
+
+        service.dispatch('change', selection);
     }
 
     service.setSelection = function(array) {
+
+
         selection.length = 0;
         setTimeout(function() {
             service.selectMultiple(array);
         })
-        
+
     }
 
     service.deselectAll = function() {
         selection.length = 0;
+        service.dispatch('change', selection);
     }
 
     ///////////////////////////////////

package/src/table/Table.vue

@@ -4,7 +4,7 @@
             <table>
                 <thead>
                     <tr>
-                        <th v-if="enableSelection" class="first shrink">
+                        <th v-if="enableSelection" class="first table-select shrink">
                             <ux-menu>
                                 <template #activator="{ on }">
                                     <ux-checkbox v-on="on" :value="pageSelected"></ux-checkbox>
@@ -13,7 +13,6 @@
                                     <ux-list-item @click="selectPage()">
                                         Select Page
                                     </ux-list-item>
-
                                     <ux-list-item v-if="someSelectedOnPage" @click="deselectPage()">
                                         Deselect Page
                                     </ux-list-item>
@@ -23,14 +22,15 @@
                                     <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>
+                        <th v-if="enableActions" class="last shrink">
+                            <slot name="corner"></slot>
+                        </th>
                     </tr>
                 </thead>
                 <tbody>
@@ -44,8 +44,11 @@
 import TableRow from './TableRow.vue';
 import TableCell from './TableCell.vue';
 
+import RememberScrollMixin from '../mixins/RememberScroll.js';
+
 
 export default {
+    mixins:[RememberScrollMixin],
     components: {
         TableRow,
         TableCell,
@@ -59,8 +62,8 @@ export default {
         }
     },
     props: {
-        total:{
-            type:Number,
+        total: {
+            type: Number,
         },
         columns: {
             type: Array,
@@ -98,11 +101,11 @@ export default {
                 return []
             },
         },
-        selectAll:{
-            type:Function,
+        selectAll: {
+            type: Function,
         },
-        deselectAll:{
-            type:Function,
+        deselectAll: {
+            type: Function,
         },
     },
     computed: {
@@ -147,12 +150,11 @@ export default {
         },
     },
     methods: {
-
         togglePage() {
 
             var self = this;
 
-            console.log('TOGGLE', self.pageSelected)
+
             if (self.pageSelected) {
                 self.deselectPage();
             } else {
@@ -167,7 +169,7 @@ export default {
             var self = this;
             self.$emit('deselect:multiple', self.rows);
         },
-        
+
         isSelected(row) {
 
             var self = this;
@@ -189,15 +191,18 @@ export default {
 
         },
         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);
         },
 
@@ -223,6 +228,8 @@ export default {
         width: 100%;
         border-collapse: collapse;
 
+
+
         thead {
             th {
                 top: 0;
@@ -236,6 +243,10 @@ export default {
                 background: #fff;
                 z-index: 2;
                 text-align: left;
+
+                &.table-select {
+                    font-size: clamp(17px, 1em, 20px);
+                }
             }
 
             border-bottom: 1px solid rgba(#000, 0.05);
@@ -247,6 +258,7 @@ export default {
             position: sticky;
             left: 0;
             // z-index: 1;
+            text-align: center;
         }
 
         th.last,
@@ -254,16 +266,51 @@ export default {
             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,23 +1,43 @@
 <template>
-	<component v-if="component" :is="component" :column="column" :row="row" :value="value"/>
+    <component v-if="component" :is="component" :column="column" :row="row" :value="value" />
     <td v-else class="table-cell">
-        {{value}}
+        <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 { 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,
-		}
-	},
-	async created() {
+    data() {
+        return {
+            component: null,
+        }
+    },
+    components: {
+        ValueRenderer,
+    },
+    async created() {
         var self = this;
 
         var component;
@@ -25,6 +45,9 @@ export default {
         ///////////////////////////////
 
         switch (this.column.renderer) {
+            case 'button':
+            component = ButtonCell;
+                break;
             case 'thumbnail':
                 // simple usage
                 component = ThumbnailCell;
@@ -35,30 +58,56 @@ export default {
 
         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>
+    props: {
+        column: {
+            type: Object,
+            required: true,
+        },
+        row: {
+            type: Object,
+            required: true,
+        },
+    },
+    computed: {
+        multiValue() {
+            return Array.isArray(this.value);
+        },
+        complex() {
+            if (this.multiValue) {
 
+            } else {
 
-<style scoped lang="scss">
+            }
+        },
+        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>