@qikdev/vue-ui 0.0.1 → 0.0.2

package/src/ui/button.vue

@@ -0,0 +1,254 @@
+<template>
+    <!-- :type="nativeType" -->
+    <component :is="element" :loading="loading" :to="to" :href="href" :target="target" :style="style" :class="classes" :disabled="disabled" class="ux-btn">
+        <spinner v-if="loading" />
+        <span class="ux-btn-text">
+            <slot />
+        </span>
+    </component>
+</template>
+<script>
+import Spinner from './spinner.vue';
+export default {
+    components: {
+        Spinner,
+    },
+    props: {
+        to: {
+            type: [Object, String],
+        },
+        icon: {
+            type: Boolean,
+        },
+        color: {
+            type: String,
+            default: 'default',
+        },
+        bgColor: {
+            type: String,
+        },
+        fgColor: {
+            type: String,
+        },
+        tag: {
+            type: String,
+        },
+        href: {
+            type: String,
+        },
+        target: {
+            type: String,
+        },
+        loading: {
+            type: Boolean,
+        },
+        disabled: {
+            type: Boolean,
+        },
+        block:{
+            type:Boolean,
+        },
+        size: {
+            type: String,
+            default: 'md',
+        },
+    },
+    computed: {
+        style() {
+            var object = {};
+
+
+            if (this.bgColor) {
+                object['backgroundColor'] = this.bgColor
+            }
+
+            if (this.fgColor) {
+                object['color'] = this.fgColor
+            }
+
+            return object;
+        },
+        classes() {
+
+            var array = [];
+
+
+            array.push(`ux-btn-${this.size}`);
+
+            if (this.block) {
+                array.push(`ux-btn-block`);
+            }
+
+            if (this.loading) {
+                array.push(`ux-btn-loading`);
+            }
+
+            if (this.icon) {
+                array.push(`ux-btn-icon`);
+            }
+
+
+
+            if (this.color == 'default') {
+                array.push('ux-btn-color-default')
+            }
+
+            if (this.color == 'primary') {
+                array.push('ux-btn-color-primary')
+            }
+
+            if (this.disabled) {
+                array.push(`ux-btn-disabled`);
+            }
+
+            return array;
+        },
+        element() {
+            switch (this.tag) {
+                case 'span':
+                    return this.tag;
+                    break;
+                case 'submit':
+                    return 'button';
+                    break;
+                default:
+                    if (this.to || this.href) {
+                        return 'ux-link';
+                    }
+
+                    return this.tag || 'button';
+                    break;
+            }
+
+
+        },
+    },
+}
+</script>
+<style lang="scss" scoped>
+.ux-btn {
+    padding: 0.5em 1em;
+    background: rgba(#000, 0.1);
+    border-radius: 2em;
+    text-decoration: none;
+    color: inherit;
+    display: inline-block;
+    position: relative;
+    border: 1px solid transparent;
+    flex: none;
+    margin-right: 0.5em;
+    text-align: center;
+    line-height: 1;
+    cursor: pointer;
+    overflow: hidden;
+    vertical-align: top;
+
+    &:hover {
+        opacity: 0.9;
+    }
+
+
+    .ux-spinner {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+    }
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    &.ux-btn-block {
+        display: block;
+        width: 100%;
+        text-align: center;
+    }
+}
+
+.ux-btn-color-primary {
+    background: $primary;
+    color: #fff;
+}
+
+
+.ux-btn-color-default {
+    background: rgba(#000,0.05);
+    color: #555;
+
+    &:hover {
+        background: rgba(#000, 0.1);
+    }
+}
+
+.ux-btn-loading {
+    cursor: none;
+    pointer-events: none;
+
+    .ux-btn-text {
+        opacity: 0 !important;
+    }
+}
+
+
+
+.ux-btn-xxs {
+    font-size: 0.6em;
+}
+
+.ux-btn-xs {
+    font-size: 0.7em;
+}
+
+.ux-btn-sm {
+    font-size: 0.8em;
+}
+
+.ux-btn-md {
+    font-size: 1em;
+}
+
+.ux-btn-lg {
+    font-size: 1.2em;
+}
+
+.ux-btn-xl {
+    font-size: 1.3em;
+}
+
+.ux-btn-xxl {
+    font-size: 1.5em;
+}
+
+.ux-btn-icon {
+    border-radius: 50%;
+    
+
+    position:relative;
+    width:2em;
+    height:0;
+    overflow: hidden;
+    padding: 0 0 2em;
+    text-align: center;
+    line-height: 2em;
+
+    .ux-button-text {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+    }
+}
+
+.ux-btn-disabled {
+    cursor: none;
+    pointer-events: none;
+    opacity: 0.3;
+    filter: grayscale(100%);
+
+    .ux-btn-text {
+        opacity: 0.3;
+    }
+
+}
+</style>

package/src/ui/checkbox.vue

@@ -0,0 +1,79 @@
+<template>
+    <button class="ux-checkbox" :class="classes">
+        <ux-icon class="icon" icon="fa-check" />
+    </button>
+</template>
+<script>
+export default {
+    props: {
+        value: {
+            type: Boolean,
+            default() {
+                return false;
+            }
+        },
+    },
+    computed: {
+        classes() {
+            var array = [];
+            if (this.value) {
+                array.push(`ux-checkbox-true`);
+            } else {
+                array.push(`ux-checkbox-false`);
+            }
+            return array;
+        },
+    },
+}
+</script>
+<style lang="scss" scoped>
+.ux-checkbox {
+
+    $size: 1.2em;
+    padding: 0.5em 1em;
+    border-radius:0.3em;
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    overflow: hidden;
+    border: 1px solid rgba(#000, 0.2);
+    background: #fff;
+    height:0;
+    overflow: hidden;
+    width:$size;
+    padding: 0 0 $size;
+    text-align: center;
+    line-height: 2em;
+    appearance:none;
+    font-size: inherit;
+    vertical-align: top;
+
+    .icon {
+        opacity: 0;
+        position:absolute;
+        top:50%;
+        left:50%;
+        transform: scale(0) translate(-50%, -50%);
+        transition: all 0.2s;
+    }
+
+    &.ux-checkbox-true {
+        background: $primary;
+
+        .icon {
+            color: #fff;
+            opacity: 1;
+            transform: scale(1) translate(-50%, -50%);
+        }
+    }
+
+    &:hover {
+        border-color: $primary;
+        .icon {
+            opacity: 0.5 !important;
+            transform: scale(1) translate(-50%, -50%);
+        }
+    }
+}
+
+</style>

package/src/ui/icon.vue

@@ -0,0 +1,57 @@
+<template>
+    <component :is="element"  class="ux-icon fa" :class="classes"/>
+</template>
+<script>
+
+export default {
+    props: {
+        icon: {
+            type: [Object, String],
+        },
+        spin: {
+            type: Boolean,
+        },
+        left: {
+            type: Boolean,
+        },
+        right: {
+            type: Boolean,
+        },
+    },
+    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;
+        },
+        element() {
+            return 'i'
+        },
+    },
+}
+</script>
+<style lang="scss" scoped>
+.ux-icon {
+    
+    &.ux-icon-left {
+        margin-right:0.4em
+    }
+
+    &.ux-icon-right {
+        margin-left:0.4em
+    }
+}
+</style>

package/src/ui/image.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="ux-image" :style="style">
+        <img :src="src" />
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        modelValue: {
+            type: Object,
+        },
+        width: {
+            type: [Number, String]
+        },
+        height: {
+            type: [Number, String]
+        },
+        quality: {
+            type: Number,
+        },
+        crop: {
+            type: Boolean,
+        },
+        format: {
+            type: String,
+        },
+        upscale: {
+            type: Boolean,
+            default: true,
+        },
+        type: {
+            type: String,
+            default: 'image',
+        },
+    },
+    data() {
+        return {
+            model: this.modelValue,
+        }
+    },
+    computed: {
+        defaultWidth() {
+            return;
+        },
+        defaultHeight() {
+            return;
+        },
+        imageWidth() {
+            return parseInt(this.width);
+        },
+        imageHeight() {
+            return parseInt(this.height);
+        },
+        id() {
+            return this.$qik.utils.id(this.model);
+        },
+        params() {
+
+            var params = {};
+            params.access_token = this.$qik.auth.getCurrentToken();
+
+            /////////////////////////////////
+
+
+            if (this.imageWidth) {
+                params.w = this.imageWidth ? this.imageWidth : this.defaultWidth;
+            }
+
+            if (this.imageHeight) {
+                params.h = this.imageHeight ? this.imageHeight : this.defaultHeight;
+            }
+
+            if (this.crop) {
+                params.c = true;
+            } else {
+                params.c = (this.imageWidth && this.imageHeight);
+            }
+
+            if (this.quality) {
+                params.q = parseInt(this.quality);
+            }
+
+            if (this.upscale) {
+                params.u = true;
+            }
+
+            if (this.format) {
+                params.f = this.format;
+            }
+
+            return params;
+        },
+        src() {
+            return this.$qik.api.generateEndpointURL(`/${this.type}/${this.id}`, this.params);
+        },
+        previewSrc() {
+
+            var params = Object.assign({}, this.params);
+            params.w = 50;
+            delete params.h;
+            return this.$qik.api.generateEndpointURL(`/${this.type}/${this.id}`, params);
+        },
+        style() {
+
+            var style = {};
+
+            var colors = this.model?.fileMeta?.colors?.colors;
+            if (colors && colors.length) {
+                style.backgroundColor = colors[0];
+            }
+
+            var dimensionWidth = this.model.width;
+            var dimensionHeight = this.model.height;
+
+            ///////////////////////////////////////////
+
+            if (this.width && this.height) {
+                dimensionWidth = this.width;
+                dimensionHeight = this.height;
+            }
+            ///////////////////////////////////////////
+
+            if (dimensionHeight && dimensionWidth) {
+                style.height = 0;
+                style.paddingBottom = `${(dimensionHeight / dimensionWidth) * 100}%`;
+            }
+
+            ///////////////////////////////////////////
+
+            style.backgroundImage = `url(${this.previewSrc})`
+
+            ///////////////////////////////////////////
+
+            return style;
+        }
+    },
+}
+</script>
+<style lang="scss" scoped>
+.ux-image {
+    display: block;
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-color: rgba(#000, 0.1);
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+
+    img {
+        width: 100%;
+        display: block;
+        height: auto;
+        margin: 0;
+        padding: 0;
+    }
+}
+</style>

package/src/ui/link.vue

@@ -0,0 +1,62 @@
+<template>
+    <component :is="element" :to="to" :href="href" :target="target" :class="class" class="ux-link">
+        <slot />
+    </component>
+</template>
+<script>
+export default {
+    props: {
+        to: {
+            type: [Object, String],
+        },
+        href: {
+            type: String,
+        },
+        target: {
+            type: String,
+        },
+        disabled: {
+            type: Boolean,
+        }
+    },
+    computed: {
+        class() {
+
+            var array = [];
+
+            if(this.disabled) {
+                array.push('disabled');
+            }
+
+            if(this.href || this.to) {
+                array.push('haslink')
+            }
+
+            return array;
+        },
+        element() {
+            if (this.to) {
+                return `router-link`;
+            } else {
+                return 'a';
+            }
+        }
+    },
+}
+</script>
+<style lang="scss" scoped>
+
+
+a {
+    cursor: pointer;
+
+
+
+    &.disabled {
+        cursor: none;
+        pointer-events:none;
+    }
+}
+
+
+</style>

package/src/ui/list-item.vue

@@ -0,0 +1,16 @@
+<template>
+	<div class="ux-list-item">
+		<slot/>
+	</div>
+</template>
+<style lang="scss" scoped>
+
+.ux-list-item {
+	background:#fff;
+	cursor: pointer;
+
+	&:hover {
+		background: darken(#fff, 5%);
+	}
+}
+</style>

package/src/ui/list.vue

@@ -0,0 +1,26 @@
+<template>
+	<ul class="ux-list">
+		<slot/>
+	</ul>
+</template>
+<style lang="scss" scoped>
+
+.ux-list {
+	background:#fff;
+	padding:0;
+	margin: 0;
+	list-style-type: none;
+	box-shadow: 0 0.3em 0.5em rgba(#000, 0.1);
+
+	:deep(.ux-list-item) {
+		list-style-type: none;
+		padding: 0.5em 1em;
+		display: block;
+		border-bottom: 1px solid rgba(#000, 0.1);
+
+		&:last-child {
+			border-bottom:none;
+		}
+	}
+}
+</style>