@qikdev/vue-ui 0.1.1 → 0.1.7

package/src/ui/button.vue

@@ -1,255 +0,0 @@
-<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%;
-        box-sizing:border-box;
-        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

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

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

@@ -1,158 +0,0 @@
-<template>
-    <div class="ux-image" :style="style">
-        <img :src="src" />
-    </div>
-</template>
-<script>
-export default {
-    props: {
-        item: {
-            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.item,
-        }
-    },
-    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

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

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

package/src/ui/list.vue

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