@qikdev/vue-ui 0.0.1 → 0.0.2

package/src/modal/ConfirmModal.vue

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

@@ -0,0 +1,99 @@
+<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>
+
+<pre>{{model}}</pre>
+    </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

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

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

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

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

package/src/services/selection.js

@@ -0,0 +1,140 @@
+import { reactive, watchEffect } from 'vue';
+
+export default function(options) {
+
+    options = options || {};
+    let minimum = Math.max(parseInt(options.minimum || 0), 0);
+    let maximum = Math.max(parseInt(options.maximum || 0), 0);
+
+    ///////////////////////////////////
+
+    const service = {}
+
+    ///////////////////////////////////
+
+    const selection = reactive([]);
+    let hash = {};
+
+    ///////////////////////////////////
+
+    watchEffect(function() {
+        recreateHash();
+    });
+
+    ///////////////////////////////////
+
+    function recreateHash() {
+        hash = selection.reduce(function(set, item) {
+
+            var id = item._id || item.id;
+            if (!id) {
+                return;
+            }
+            set[id] = item;
+            return set;
+        }, {});
+    }
+    ///////////////////////////////////
+
+    service.isSelected = function(item) {
+        return hash[item._id || item.id];
+    }
+
+    service.select = function(item) {
+
+        //If there is a limit set
+        if (maximum) {
+            //But we are at or past the limit
+            if (selection.length >= maximum) {
+                if (maximum === 1) {
+                    //Clear the selection
+                    selection.length = 0;
+                }
+            }
+        }
+
+        //Check if this item is already selected
+        if (service.isSelected(item)) {
+            return;
+        }
+
+        //Add the item into the selection array
+        selection.push(item);
+    }
+
+    service.deselect = function(item) {
+
+        //If we can only select one item
+        //then just clear the selection
+        if (maximum === 1) {
+            selection.length = 0;
+            return;
+        }
+
+        //Find the index of the item
+        var index = selection.findIndex(function(entry) {
+            return (entry._id && entry._id == item._id) || (entry.id && entry.id == item.id)
+        })
+
+        //If there was no index found
+        if(index == -1) {
+            return;
+        }
+
+        //remove it from the array
+        selection.splice(index, 1);
+    }
+
+    service.toggle = function(item) {
+        if (service.isSelected(item)) {
+            service.deselect(item);
+        } else {
+            service.select(item);
+        }
+    }
+
+    service.selectMultiple = function(array) {
+        array.forEach(function(item) {
+            service.select(item);
+        })
+    }
+
+    service.deselectMultiple = function(array) {
+        array.forEach(function(item) {
+            service.deselect(item);
+        })
+    }
+
+    service.setSelection = function(array) {
+        selection.length = 0;
+        setTimeout(function() {
+            service.selectMultiple(array);
+        })
+        
+    }
+
+    service.deselectAll = function() {
+        selection.length = 0;
+    }
+
+    ///////////////////////////////////
+
+
+    Object.defineProperty(service, 'items', {
+        value: selection,
+        writable: false,
+    });
+
+    ///////////////////////////////////
+
+    Object.defineProperty(service, 'hash', {
+        get() {
+            return hash;
+        }
+    });
+
+
+    ///////////////////////////////////
+
+    return service;
+}