@qikdev/vue-ui 0.1.2 → 0.1.6

package/src/ui/menu.vue

@@ -1,147 +0,0 @@
-<template>
-    <div class="ux-menu" :class="{right}">
-        <span>
-            <slot name="activator" :on="on" />
-        </span>
-        <div class="ux-menu-panel" ref="menu" v-if="expanded" :style="contentStyle">
-            <slot />
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    props: {
-        right:{
-            type:Boolean,
-            default:false,
-        },
-        closeOnClick: {
-            type: Boolean,
-            default () {
-                return true;
-            }
-        }
-    },
-    data() {
-        return {
-            contentStyle: {},
-            collapsed: true,
-            triggerEvent: null,
-            refMenu: null,
-            mounted: false,
-        }
-    },
-    mounted() {
-        this.refMenu = this.$refs.menu;
-        this.mounted = true;
-    },
-    beforeUnmount() {
-        this.removeListeners();
-        this.refMenu = null;
-        this.mounted = false;
-    },
-    methods: {
-        removeListeners() {
-            document.removeEventListener('click', this.globalClick);
-            if (this.refMenu) {
-                this.refMenu.removeEventListener('click', this.immediateClick);
-            }
-        },
-        addEventListeners() {
-            document.addEventListener('click', this.globalClick);
-            if (this.refMenu) {
-                this.refMenu.addEventListener('click', this.immediateClick);
-            }
-        },
-        immediateClick(event) {
-            if (this.expanded) {
-                if (this.closeOnClick) {
-                    event.stopImmediatePropagation();
-                    this.expanded = false;
-
-                }
-            }
-        },
-        globalClick(event) {
-
-            if (this.triggerEvent === event) {
-                return;
-            }
-
-            var parentElement = this.$refs.menu;
-            var childElement = event.srcElement;
-
-            if (parentElement.contains(childElement)) {
-                //Do nothing
-                if (this.closeOnClick) {
-                    this.expanded = false;
-                    // event.stopImmediatePropagation();
-                }
-            } else {
-                this.expanded = false;
-            }
-        },
-        position() {
-            const rect = this.$el.getBoundingClientRect();
-
-            var parentPosition = {
-                left: rect.left + window.scrollX,
-                top: rect.top + window.scrollY
-            }
-
-            this.contentStyle.left = parentPosition.left;
-            this.contentStyle.top = parentPosition.top;
-
-        },
-    },
-    computed: {
-        expanded: {
-            get() {
-                return !this.collapsed;
-            },
-            set(v) {
-                this.collapsed = !v;
-
-                if (this.collapsed) {
-                    this.removeListeners();
-                } else {
-                    this.position();
-                    this.addEventListeners();
-
-                }
-            }
-        },
-        on() {
-
-            var self = this;
-
-            return {
-                click(event) {
-                    self.triggerEvent = event;
-                    self.expanded = !self.expanded;
-                }
-            }
-        }
-    }
-}
-</script>
-<style lang="scss" scoped>
-.ux-menu {
-    position: relative;
-
-    .ux-menu-panel {
-        position: fixed;
-        z-index: 10;
-        max-height: 70vh;
-        overflow: auto;
-        text-align: left;
-        text-transform: none;
-        letter-spacing: 0;
-        font-weight: normal;
-    }
-
-    &.right .ux-menu-panel{
-        right:0;
-    }
-}
-</style>

package/src/ui/pager.vue

@@ -1,156 +0,0 @@
-<template>
-    <flex-row center gap>
-        <flex-cell shrink class="text">
-            <native-select v-model="perPage" :field="perPageField">
-                <template v-if="$device.breakpoint.xs">{{displayStartIndex}}-{{endIndex}} of {{total}}</template>
-                <template v-else>Showing {{displayStartIndex}} to {{endIndex}} of {{total}} total</template>
-            </native-select>
-        </flex-cell>
-        <flex-cell>
-        </flex-cell>
-        <flex-cell shrink v-if="totalPages > 1">
-            <flex-row gap center>
-                <flex-cell shrink class="text">
-                    <native-select v-model="currentPage" :field="pageField">
-                        <template v-if="$device.breakpoint.xs">{{currentPage}}/{{totalPages}}</template>
-                        <template v-else>Page {{currentPage}} of {{totalPages}}</template>
-                    </native-select>
-                </flex-cell>
-                <flex-cell shrink>
-                    <ux-button icon @click="previousPage()">
-                        <ux-icon icon="fa-arrow-left" />
-                    </ux-button>
-                </flex-cell>
-                <flex-cell shrink>
-                    <ux-button icon @click="nextPage()">
-                        <ux-icon icon="fa-arrow-right" />
-                    </ux-button>
-                </flex-cell>
-            </flex-row>
-        </flex-cell>
-    </flex-row>
-</template>
-<script>
-import NativeSelect from '../form/inputs/select.vue';
-
-
-export default {
-    props: {
-        total: {
-            type: Number,
-            default () {
-                return 0;
-            }
-        },
-    },
-    components: {
-        NativeSelect,
-    },
-    watch: {
-        totalPages() {
-            this.currentPage = 0;
-        },
-    },
-    computed: {
-        perPage: {
-            get() {
-                return this.page.size;
-            },
-            set(i) {
-                i = Math.max(i, 1);
-                this.page.size = i;
-                this.dispatch();
-            }
-
-        },
-        pageField() {
-            return {
-                type: 'integer',
-                maximum: 1,
-                minimum: 1,
-                options: Array(this.totalPages).fill(1).map((x, y) => x + y),
-            }
-        },
-        // total() {
-        //     return this.dataSource.total;
-        // },
-        totalPages() {
-            return Math.ceil(this.total / this.perPage)
-        },
-        startIndex() {
-            return (this.currentPage - 1) * this.page.size;
-        },
-        displayStartIndex() {
-            return this.total ? this.startIndex + 1 : 0;
-        },
-        endIndex() {
-            return Math.min(this.startIndex + this.page.size, this.total);
-        },
-        currentPage: {
-            get() {
-                return this.page.index;
-            },
-            set(index) {
-
-
-                if (this.totalPages) {
-                    index = Math.min(this.totalPages, index);
-                }
-
-                index = Math.max(index, 1);
-
-                this.page.index = index;
-                this.dispatch();
-            }
-        },
-
-    },
-    methods: {
-        dispatch() {
-            return this.$emit('update:page', this.page);
-        },
-        previousPage() {
-            this.currentPage--;
-        },
-        nextPage() {
-            this.currentPage++;
-        },
-    },
-    data() {
-        return {
-            page: {
-                size: 50,
-                index: 1,
-            },
-            perPageField: {
-                minimum: 1,
-                maximum: 1,
-                options: [{
-                        title: '50 per page',
-                        value: 50,
-                    },
-                    {
-                        title: '100 per page',
-                        value: 100,
-                    },
-                    {
-                        title: '250 per page',
-                        value: 250,
-                    },
-                    {
-                        title: '500 per page',
-                        value: 500,
-                    },
-                ]
-            }
-        }
-    }
-}
-</script>
-<style lang="scss" scoped>
-
-	.text {
-        opacity: 0.5;
-        font-size: 0.8em;
-    }
-</style>

package/src/ui/progressbar.vue

@@ -1,77 +0,0 @@
-<template>
-    <div class="ux-progress">
-        <div class="ux-progress-bg" />
-        <div class="ux-progress-fg" :style="barStyle" />
-    </div>
-</template>
-<script>
-export default {
-    props: {
-        value: {
-            type: Number
-        }
-    },
-    computed: {
-        classes() {
-
-            var array = [];
-
-            array.push(this.icon);
-
-            if (this.spin) {
-                array.push(`fa-spin`);
-            }
-
-            if (this.left) {
-                array.push('ux-icon-left')
-            }
-            if (this.right) {
-                array.push('ux-icon-right')
-            }
-            return array;
-        },
-        percent() {
-            return this.value;
-        },
-        barStyle() {
-            return {
-                width: `${this.percent}%`,
-            }
-        },
-        element() {
-            return 'i'
-        },
-    },
-}
-</script>
-<style lang="scss" scoped>
-.ux-progress {
-    margin: 1em 0;
-    position: relative;
-    height: 1em;
-}
-
-.ux-progress-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    height: 100%;
-    width: 100%;
-    background: rgba(#000, 0.03);
-    border-radius: 0.5em;
-    box-shadow: inset 0px 0.3em 0.3em rgba(#000, 0.1);
-}
-
-.ux-progress-fg {
-    background: $primary;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    height: 100%;
-    border-radius: 0.5em;
-    opacity: 1;
-}
-</style>

package/src/ui/spinner.vue

@@ -1,26 +0,0 @@
-<template>
-	<div class="ux-spinner" :class="{large:large}"><i class="fa fa-spin fa-spinner"/></div>
-</template>
-<script>
-
-export default {
-	props:{
-		large:{
-			type:Boolean,
-		}
-	}
-}
-</script>
-<style lang="scss" scoped>
-
-.ux-spinner {
-	&.large {
-		position:absolute;
-		left:50%;
-		top:50%;
-		transform: translate3d(-50%, -50%, 0);
-		font-size: clamp(50px, 10vw, 500px);
-		opacity: 0.5;;
-	}
-}
-</style>

package/src/ui/switch.vue

@@ -1,89 +0,0 @@
-<template>
-    <button class="ux-switch" :class="classes">
-    </button>
-</template>
-<script>
-export default {
-    props: {
-        value: {
-            type: Boolean,
-            default () {
-                return false;
-            }
-        },
-    },
-    computed: {
-        classes() {
-            var array = [];
-            if (this.value) {
-                array.push(`ux-switch-true`);
-            } else {
-                array.push(`ux-switch-false`);
-            }
-            return array;
-        },
-    },
-}
-</script>
-<style lang="scss" scoped>
-.ux-switch {
-
-    $size: 1.8em;
-    border-radius: 1em;
-    display: inline-block;
-    position: relative;
-    cursor: pointer;
-    overflow: hidden;
-    border: 1px solid rgba(#000, 0.1);
-    height: 0;
-    width: $size;
-    padding: 0 $size $size;
-    text-align: center;
-    line-height: 2em;
-    appearance: none;
-    font-size: inherit;
-    background: rgba(#000, 0.05);
-    box-sizing: border-box;
-    box-shadow: inset 0.1em 0.1em 0.3em rgba(#000, 0.2);
-    vertical-align: top;
-
-
-    &:after {
-        content: '';
-        display: block;
-        background: #fff;
-        height: 100%;
-        width: 50%;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        position: absolute;
-        border-radius: 1em;
-        border: 1px solid rgba(#000, 0.3);
-        box-sizing: border-box;
-        box-shadow: 0 0 2em rgba(#000, 0.3);
-        transition: transform 0.3s;
-        transform: scale(0.8);
-    }
-
-    &:hover {
-        border: 1px solid $primary;
-
-        &:after {
-            transform: scale(1);
-        }
-    }
-
-    &.ux-switch-true {
-        background: $primary;
-        // border-color: #fff;
-
-        &:after {
-            transform:  translateX(100%);
-        }
-    }
-
-    
-}
-</style>

package/src/version.js

@@ -1 +0,0 @@
-export const version = '0.1.2'

package/test/index.spec.js

@@ -1,42 +0,0 @@
-// // /* global describe, it, before */
-
-// import chai from 'chai';
-// import QikUI from '../src/index.js';
-
-
-// var qik = new Qik();
-
-// var {data} = await qik.api.get(`/version`);
-
-
-
-// console.log('WHAT IS IT', qik)
-
-
-// chai.expect();
-
-// const expect = chai.expect;
-
-// let qik;
-
-// describe('Load Qik Core', () => {
-//   before(() => {
-//     qik = new QikCore();
-//   });
-//   describe('When i try and start Qik', () => {
-//     it('It should return a Qik instance', () => {
-//       expect(qik.auth);//.to.be.equal('Cat');
-//     });
-//   });
-// });
-
-// // describe('Given an instance of my Dog library', () => {
-// //   before(() => {
-// //     lib = new Dog();
-// //   });
-// //   describe('when I need the name', () => {
-// //     it('should return the name', () => {
-// //       expect(lib.name).to.be.equal('Dog');
-// //     });
-// //   });
-// // });