@qikdev/vue-ui 0.0.3 → 0.1.1

package/src/layout/tabset.vue

@@ -0,0 +1,72 @@
+<template>
+    <flex-column>
+        <flex-header class="tabset-menu">
+            <flex-row>
+                <a :class="{active:index === activeIndex}" v-for="(tab, index) in tabs" @click="select(index)">{{tab.props.heading}}</a>
+            </flex-row>
+        </flex-header>
+        <flex-column>
+            <flex-column v-show="index === activeIndex" :key="index" v-for="(tab, index) in tabs">
+                <component :is="tab" />
+            </flex-column>
+            <!--  -->
+            <!-- <slot/> -->
+        </flex-column>
+    </flex-column>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            activeIndex: 0,
+        }
+    },
+    methods: {
+        select(i) {
+            console.log('SELECT', this.activeIndex)
+            this.activeIndex = i;
+        },
+    },
+    computed: {
+        tabs() {
+
+            var slotChildren = this.$slots.default()
+            // .map(function(t) {
+            //     return t.children;
+            // });
+            console.log('SLOT CHILDREN', slotChildren);
+            return slotChildren;
+
+            // 
+            // return [];
+        }
+    },
+}
+</script>
+<style lang="scss" scoped>
+
+.tabset-menu {
+    background: rgba(#000, 0.05);
+
+    a {
+        display: block;
+        flex:1;
+        align-items: center;
+        padding:1em;
+        text-transform: uppercase;
+        text-align: center;
+        letter-spacing: 0.05em;
+        cursor: pointer;
+        color: rgba(#000, 0.5);
+        font-weight: bold;
+        border-top:3px solid transparent;
+
+        &.active {
+            background: #fff;
+            color: $primary;
+            border-top:3px solid $primary;
+        }
+
+    }
+}
+</style>

package/src/mixins/RememberScroll.js

@@ -0,0 +1,19 @@
+export default {
+    data() {
+        return {
+            scrollTop: 0,
+        }
+    },
+    mounted() {
+        var scroller = this.$refs.scroll;
+        scroller.addEventListener('scroll', this.updateScroll);
+    },
+    beforeUnmount() {
+        var scroller = this.$refs.scroll;
+        scroller.removeEventListener('scroll', this.updateScroll);
+    },
+    activated() {
+        var scroller = this.$refs.scroll;
+        scroller.scrollTop = this.scrollTop;
+    },
+}

package/src/modal/ContentModal.vue

@@ -1,32 +1,32 @@
 <template>
     <flex-column class="wrapper">
-        
-        <template v-if="definition">
-            <flex-header>
-                <div class="header">
-                    <flex-row center>
-                        <flex-cell shrink>
-                            Select {{maximum == 1 ? title : plural}}
-                        </flex-cell>
-                        <flex-spacer />
-                        <flex-cell>
-                            <search v-model="search" :loading="searching" :debounce="500" placeholder="Search" />
-                        </flex-cell>
-                        <flex-spacer />
-                        <flex-cell shrink>
-                            <ux-button color="primary" @click="selectionComplete">Done</ux-button>
-                        </flex-cell>
-                    </flex-row>
-                </div>
-            </flex-header>
-            <content-browser ref="browser" :search="search" @click:row="rowClicked" :maximum="options.maximum" v-model="model" :type="options.type" :options="browserOptions">
-            </content-browser>
-        </template>
-
-        <flex-column v-else>
+        <flex-column v-if="loading">
             Loading
         </flex-column>
+        <template v-else>
+            <template v-if="definition">
+                <flex-header>
+                    <div class="header">
+                        <flex-row center>
+                            <flex-cell shrink>
+                                Select {{maximum == 1 ? title : plural}}
+                            </flex-cell>
+                            <flex-spacer />
+                            <flex-cell>
+                                <search v-model="search" :loading="searching" :debounce="500" placeholder="Search" />
+                            </flex-cell>
+                            <flex-spacer />
+                            <flex-cell shrink>
+                                <ux-button color="primary" @click="selectionComplete">Done</ux-button>
+                            </flex-cell>
+                        </flex-row>
+                    </div>
+                </flex-header>
+                <content-browser ref="browser" :search="search" @click:row="rowClicked" :maximum="options.maximum" v-model="model" :type="options.type" :options="browserOptions">
+                </content-browser>
+            </template>
 
+        </template>
     </flex-column>
 </template>
 <script>
@@ -44,7 +44,15 @@ export default {
     async created() {
         var self = this;
         var glossary = await self.$qik.content.glossary({ hash: true });
+        self.loading = false;
         var definition = glossary[self.type]
+
+        if(!definition) {
+            //Close immediately
+            self.$qik.notify('You do not have the required permissions to list content of this type');
+            self.dismiss()
+            return;
+        }
         self.definition = definition;
     },
     computed: {
@@ -69,6 +77,7 @@ export default {
             search: '',
             searching: false,
             definition: null,
+            loading: true,
             model: this.options.model.slice(),
         }
     },
@@ -91,7 +100,7 @@ export default {
 }
 
 .header {
-    background:#fff;
+    background: #fff;
     padding: 1em;
     border-bottom: 1px solid rgba(#000, 0.1);
 }

package/src/modal/Modal.vue

@@ -58,7 +58,8 @@ export default {
 	bottom:0;
 	display: flex;
 	width:100vw;
-	height:100vh;
+	height: 100vh;
+    height: -webkit-fill-available;
 	z-index: 100;
 	justify-content: center;
 	align-items:center;

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);
     }
 
     ///////////////////////////////////