@qikdev/vue-ui 0.1.2 → 0.1.8

package/src/layout/flex-cell.vue

@@ -1,45 +0,0 @@
-<template>
-    <div class="flex-cell">
-        <slot></slot>
-    </div>
-</template>
-<script>
-
-export default {
-}
-
-</script>
-<style scoped lang="scss">
-.flex-cell {
-    overflow: hidden;
-    flex: 1;
-    flex-direction: row;
-
-    &[flex] {
-        display: flex;
-    }
-
-    &[center] {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    &[vcenter] {
-        display: flex;
-        align-items: center;
-    }
-
-    &[align-bottom] {
-        display: flex;
-        align-items: self-end;
-    }
-
-    &[shrink] {
-        flex:none;
-    }
-}
-
-
-
-</style>

package/src/layout/flex-column.vue

@@ -1,31 +0,0 @@
-<template>
-    <div class="flex-column">
-        <slot></slot>
-    </div>
-</template>
-<script>
-
-export default {
-}
-
-</script>
-<style scoped lang="scss">
-.flex-column {
-    display: flex;
-    overflow: hidden;
-    flex: 1;
-    flex-direction: column;
-
-    &[center] {
-    	align-items: center;
-    	justify-content: center;
-    }
-
-    &[shrink] {
-        flex:none;
-    }
-}
-
-
-
-</style>

package/src/layout/flex-footer.vue

@@ -1,14 +0,0 @@
-<template>
-    <div class="flex-column-footer">
-        <slot></slot>
-    </div>
-</template>
-<script>
-export default {
-}
-</script>
-<style scoped lang="scss">
-.flex-column-footer {
-    flex: none;
-}
-</style>

package/src/layout/flex-header.vue

@@ -1,14 +0,0 @@
-<template>
-    <div class="flex-column-header">
-        <slot></slot>
-    </div>
-</template>
-<script>
-export default {
-}
-</script>
-<style scoped lang="scss">
-.flex-column-header {
-    flex: none;
-}
-</style>

package/src/layout/flex-row.vue

@@ -1,39 +0,0 @@
-<template>
-    <div class="flex-row">
-        <slot></slot>
-    </div>
-</template>
-<script>
-
-export default {
-}
-
-</script>
-<style scoped lang="scss">
-.flex-row {
-    display: flex;
-    overflow: hidden;
-    flex: 1;
-    flex-direction: row;
-
-    &[center] {
-        align-items: center;
-        justify-content: center;
-    }
-
-    &[vcenter] {
-        align-items: center;
-    }
-
-    &[wrap] {
-        flex-wrap: wrap;
-    }
-
-    &[gap] {
-        gap: 0.4em;
-    }
-}
-
-
-
-</style>

package/src/layout/flex-spacer.vue

@@ -1,18 +0,0 @@
-<template>
-    <div class="flex-spacer"/>
-</template>
-<script>
-
-export default {
-}
-
-</script>
-<style scoped lang="scss">
-.flex-spacer {
-    padding:0.25em;
-    flex:1;
-}
-
-
-
-</style>

package/src/layout/panel-body.vue

@@ -1,13 +0,0 @@
-<template>
-    <div class="panel-body">
-        <slot></slot>
-    </div>
-</template>
-<script>
-export default {}
-</script>
-<style lang="scss" scoped>
-.panel-body {
-    padding: 1em;
-}
-</style>

package/src/layout/panel-footer.vue

@@ -1,20 +0,0 @@
-<template>
-    <div class="panel-footer">
-        <slot></slot>
-    </div>
-</template>
-<script>
-
-export default {
-}
-
-</script>
-<style lang="scss" scoped>
-.panel-footer {
-    padding:0.5em 1em;
-    border-top:1px solid rgba(#000,0.1);
-}
-
-
-
-</style>

package/src/layout/panel-header.vue

@@ -1,20 +0,0 @@
-<template>
-    <div class="panel-header">
-        <slot></slot>
-    </div>
-</template>
-<script>
-
-export default {
-}
-
-</script>
-<style lang="scss" scoped>
-.panel-header {
-    padding:0.5em 0.5em 0.5em 1em;
-    border-bottom:1px solid rgba(#000,0.1);
-}
-
-
-
-</style>

package/src/layout/panel.vue

@@ -1,23 +0,0 @@
-<template>
-    <div class="panel">
-        <slot></slot>
-    </div>
-</template>
-<script>
-
-export default {
-}
-
-</script>
-<style lang="scss" scoped>
-.panel {
-    border-radius: 0.3em;
-    border:1px solid rgba(#000,0.1);
-    margin-bottom: 1em;
-    box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.02);
-
-}
-
-
-
-</style>

package/src/layout/tab.vue

@@ -1,34 +0,0 @@
-<template>
-	<flex-column>
-		
-			<slot/>
-		
-	</flex-column>
-</template>
-<script>
-export default {
-	props:{
-		heading:{
-			type:String,
-			required:true,
-		}
-	},
-	data() {
-		return {
-			isActive:false,
-		}
-	},
-	computed:{
-		active:{
-			get() {
-				return this.isActive;
-			},
-			set(a) {
-				this.isActive = a;
-			}
-		}
-	}
-}
-</script>
-<style lang="scss" scoped>
-</style>

package/src/layout/tabset.vue

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

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

package/src/modal/ConfirmModal.vue

@@ -1,50 +0,0 @@
-<template>
-    <flex-column class="wrapper">
-        <flex-body>
-            <div class="padder">
-        	<h5>{{options.title}}</h5>
-            <div>{{options.description}}</div>
-        </div>
-        </flex-body>
-        <flex-footer>
-            <div class="padder">
-        	<flex-row>
-        		<flex-cell>
-        			<ux-button @click="dismiss">Cancel</ux-button>
-        		</flex-cell>
-
-        		<flex-cell>
-        			<ux-button @click="close">Confirm</ux-button>
-        		</flex-cell>
-        	</flex-row>
-        </div>
-        </flex-footer>
-    </flex-column>
-</template>
-<script>
-
-import ModalMixin from './ModalMixin';
-
-export default {
-	mixins:[ModalMixin],
-}
-</script>
-<style lang="scss" scoped>
-
-.wrapper {
-    border-radius: 0.5em;
-    overflow: hidden;
-    background: #fff;
-    text-align: center;
-
-    h5 {
-        font-size: 1.2em;
-        margin:0;
-    }
-
-    .padder {
-        padding: 1em;
-    }
-}
-
-</style>

package/src/modal/ContentModal.vue

@@ -1,107 +0,0 @@
-<template>
-    <flex-column class="wrapper">
-        <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>
-import Search from '../form/inputs/search.vue';
-
-import ContentBrowser from '../content/browser.vue';
-import ModalMixin from './ModalMixin';
-
-export default {
-    components: {
-        ContentBrowser,
-        Search,
-    },
-    mixins: [ModalMixin],
-    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: {
-        type() {
-            return this.options.type;
-        },
-        title() {
-            return this.definition.title;
-        },
-        plural() {
-            return this.definition.plural;
-        },
-        maximum() {
-            return this.options.maximum || 0;
-        },
-        browserOptions() {
-            return {}
-        },
-    },
-    data() {
-        return {
-            search: '',
-            searching: false,
-            definition: null,
-            loading: true,
-            model: this.options.model.slice(),
-        }
-    },
-    methods: {
-        rowClicked(row) {
-            this.$refs.browser.toggle(row);
-        },
-        selectionComplete(data) {
-            this.close(this.model);
-        }
-    }
-}
-</script>
-<style lang="scss" scoped>
-.wrapper {
-    min-width: 80vw;
-    min-height: 80vh;
-    border-radius: 0.5em;
-    overflow: hidden;
-}
-
-.header {
-    background: #fff;
-    padding: 1em;
-    border-bottom: 1px solid rgba(#000, 0.1);
-}
-</style>

package/src/modal/Modal.vue

@@ -1,86 +0,0 @@
-<template>
-    <div class="modal-wrapper">
-        <div class="modal-blanket" @click="blanketClick"/>
-        <div class="modal-content" :style="style">
-            <component :options="modal.options" v-bind="componentProps" @close="close" @dismiss="dismiss" :is="modal.component" />
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    props: {
-        modal: {
-            type: Object,
-            required: true,
-        }
-    },
-    data() {
-        return {}
-    },
-    methods: {
-    	blanketClick() {
-    		this.dismiss();
-    	},
-        dismiss(err) {
-            this.$qik.closeModal(this.modal.id);
-            this.modal.reject(err);
-        },
-        close(value) {
-            this.$qik.closeModal(this.modal.id);
-            this.modal.resolve(value);
-        }
-    },
-    computed: {
-        componentProps() {
-            return this.modal.componentProps || {};
-        },
-        style() {
-
-        	var styles = {}
-
-        	if(this.modal.style) {
-        		styles = Object.assign(styles, this.modal.style);
-        	}
-
-        	return styles;
-        }
-    }
-}
-</script>
-<style lang="scss" scoped>
-.modal-wrapper {
-	margin:0;
-	padding:0;
-	position: fixed;
-	top:0;
-	left:0;
-	right:0;
-	bottom:0;
-	display: flex;
-	width:100vw;
-	height: 100vh;
-    height: -webkit-fill-available;
-	z-index: 100;
-	justify-content: center;
-	align-items:center;
-	overflow: hidden;
-	box-sizing: border-box;
-
-	.modal-blanket {
-		position:absolute;
-		background: rgba(#333, 0.5);
-		left:0;
-		top:0;
-		right:0;
-		bottom:0;
-	}
-
-	.modal-content {
-		display: flex;
-		overflow: hidden;
-		z-index: 101;
-		max-width: 90%;
-		max-height: 90%;
-	}
-}
-</style>

package/src/modal/ModalMixin.js

@@ -1,21 +0,0 @@
-export default {
-	props:{
-		options:{
-			type:Object,
-            default() {
-                return {}
-            }
-		}
-	},
-	data() {
-		return {}
-	},
-    methods: {
-        dismiss(error) {
-            this.$emit('dismiss', error);
-        },
-        close(result) {
-            this.$emit('close',result);
-        },
-    }
-}

package/src/modal/OptionsModal.vue

@@ -1,31 +0,0 @@
-<template>
-    <flex-column>
-        <flex-header>
-        	Options
-        </flex-header>
-        <flex-body>
-        	Options
-        </flex-body>
-        <flex-footer>
-        	<flex-row>
-        		<flex-cell>
-        			<ux-button @click="dismiss">Cancel</ux-button>
-        		</flex-cell>
-
-        		<flex-cell>
-        			<ux-button @click="done">Done</ux-button>
-        		</flex-cell>
-        	</flex-row>
-        </flex-footer>
-    </flex-column>
-</template>
-<script>
-
-import ModalMixin from './ModalMixin';
-
-export default {
-	mixins:[ModalMixin],
-}
-</script>
-<style lang="scss">
-</style>