@qikdev/vue-ui 0.0.5 → 0.1.6

package/src/ui/menu.vue

@@ -1,135 +0,0 @@
-<template>
-    <div class="ux-menu">
-        <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: {
-        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) {
-            console.log('GLOBAL', 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: 1;
-    }
-}
-</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.0'

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