@qikdev/vue-ui 0.0.5 → 0.1.6

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.2em;
-    }
-}
-
-
-
-</style>

package/src/layout/flex-spacer.vue

@@ -1,17 +0,0 @@
-<template>
-    <div class="flex-spacer"/>
-</template>
-<script>
-
-export default {
-}
-
-</script>
-<style scoped lang="scss">
-.flex-spacer {
-    padding:0.25em;
-}
-
-
-
-</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/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,98 +0,0 @@
-<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>
-            Loading
-        </flex-column>
-
-    </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 });
-        var definition = glossary[self.type]
-        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,
-            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,85 +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;
-	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>

package/src/modal/PromptModal.vue

@@ -1,31 +0,0 @@
-<template>
-    <flex-column>
-        <flex-header>
-        	Prompt
-        </flex-header>
-        <flex-body>
-        	Prompt
-        </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>