@qikdev/vue-ui 0.0.1 → 0.0.2

package/src/ui/menu.vue

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

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

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

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