@qikdev/vue-ui 0.1.1 → 0.1.7

package/src/form/inputs/select.vue

@@ -1,229 +0,0 @@
-<template>
-    <div class="native-select" :class="classes">
-        <label class="ux-field-title" v-if="showLabel">{{label}} <span class="ux-required-marker" v-if="required">*</span></label>
-        <div class="ux-field-description" v-if="showDescription">{{description}}</div>
-        <div class="ui-select-button" v-if="singleValue">
-            <slot>
-                <ux-button tag="div">
-                    {{summary}}
-                </ux-button>
-            </slot>
-        </div>
-        <select @focus="touch" :multiple="multiValue" v-model="model">
-            <option value="" v-if="singleValue && !minimum">None</option>
-            <option :value="option.value" v-for="option in selectableOptions">{{option.title}}</option>
-        </select>
-
-    </div>
-</template>
-<script>
-import InputMixin from './input-mixin';
-
-
-
-function isUndefined(entry) {
-    return entry === undefined || typeof entry === 'undefined' || entry === null || String(entry) === 'null' || String(entry) === 'undefined';
-}
-
-//////////////////////////
-
-export default {
-    props: {
-        title:{
-            type:String,
-        },
-        modelValue: {
-            // type: [Object, Array],
-        },
-    },
-    mixins: [InputMixin],
-    created() {
-        this.model = this.model;
-    },
-    methods: {
-        cleanOutput(val) {
-            var self = this;
-
-            if (isUndefined(val)) {
-                if (self.multiValue) {
-                    val = [];
-                } else {
-                    val = undefined;
-                }
-            } else {
-                if (self.multiValue) {
-                    val = (val || []).filter(Boolean).map(function(i) {
-                        return self.getValue(i);
-                    })
-                } else {
-                    val = self.getValue(val);
-                }
-            }
-
-            return val;
-        },
-        cleanInput(val) {
-
-            var self = this;
-
-            if (self.multiValue) {
-                if (!val) {
-                    val = [];
-                }
-
-                if (!Array.isArray(val)) {
-                    val = [val];
-                }
-
-                /////////////////////////////////
-
-                if (self.maximum) {
-                    if (val.length > self.maximum) {
-                        val.length = self.maximum;
-                    }
-                }
-
-
-                val = val.filter(Boolean).map(function(v) {
-                    var valueKey = self.getValue(v);
-                    return self.returnObject ? self.optionLookup[valueKey] : valueKey;
-                })
-
-            } else {
-                var valueKey = self.getValue(val);
-                val = self.returnObject ? self.optionLookup[valueKey] : valueKey;
-            }
-
-            return val;
-        },
-    },
-    computed: {
-        returnObject() {
-            return this.type == 'reference';
-        },
-        classes() {
-            var array = []
-
-            if (this.multiValue) {
-                array.push('multiple');
-            } else {
-                array.push('single');
-            }
-
-            return array;
-        },
-        // model: {
-        //     get() {
-        //         let val = this.cleanOutput(this.value);
-        //         return val;
-        //     },
-        //     set(val) {
-        //         val = this.cleanInput(val);
-        //         // // var val = this.cleanOutput(newValue);
-        //         // // var existing = this.cleanOutput(this.value);
-
-        //         // if (newValue != existing) {
-        //         //     newValue = this.cleanInput(val);
-        //         //     this.value = newValue;
-        //         //     this.dispatch();
-        //         // }
-
-        //         this.value = val;
-        //         this.dispatch();
-
-        //     }
-        // },
-        optionLookup() {
-            var self = this;
-            return self.options.reduce(function(set, option) {
-                const key = self.getValue(option);
-                set[key] = option;
-                return set;
-            }, {})
-        },
-        summary() {
-            return this.model ? this.getLabel(this.optionLookup[this.model]) : this.title || 'Click to select';
-        },
-
-        selectableOptions() { 
-            return this.options
-            // .sort(function(option) {
-            //     return option.title;
-            // });
-            // if(this.type == 'reference') {
-
-            // } else {
-
-            // }
-
-        },
-    }
-}
-</script>
-<style lang="scss" scoped>
-.native-select {
-
-    cursor: pointer;
-
-    &.multiple {
-        select {
-            width: 100%;
-            font-size:1em;
-            border:1px solid rgba(#000, 0.1);
-            appearance:none;
-
-            &:focus {
-            border:1px solid $primary;
-            }
-        }
-    }
-
-    &.single {
-        position: relative;
-
-       .ui-select-button {
-            position: relative;
-            width:100%;
-
-
-
-            & > .ux-btn {
-                display: block;
-                position:relative;
-                text-align: left;
-
-                &:after {
-                content:'▼';
-                position:absolute;
-                right:0;
-                line-height: 3.5em;
-                top:0;
-                bottom: 0;
-                height:100%;
-                font-size: 0.6em;
-                width:4em;
-                text-align: center;
-                opacity: 0.5;
-
-            }
-            }
-        }
-
-        select {
-            cursor: pointer;
-            opacity: 0;
-            appearance: none;
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-        }
-    }
-
-    
-}
-
-</style>

package/src/form/inputs/switch.vue

@@ -1,87 +0,0 @@
-<template>
-    <flex-row @click="touch()">
-        <flex-cell vcenter shrink>
-            <ux-switch :value="model" @click="model = !model" />
-        </flex-cell>
-        <flex-spacer />
-        <flex-cell vcenter>
-            <div>
-                <label class="ux-field-title" v-if="showLabel">
-                    {{label}} <span class="ux-required-marker" v-if="required">*</span>
-                </label>
-                <div class="ux-field-description" v-if="showDescription">{{description}}</div>
-            </div>
-        </flex-cell>
-    </flex-row>
-</template>
-<script>
-import InputMixin from './input-mixin';
-
-export default {
-    mixins: [InputMixin],
-    props: {
-        modelValue: {
-            type: Boolean,
-            default () {
-                return false;
-            },
-        },
-    },
-    data() {
-        return {
-            value: this.modelValue,
-        }
-    },
-    watch: {
-        modelValue(val, old) {
-            this.value = val;
-            this.model = val;
-
-        }
-    },
-    computed: {
-        longDescription() {
-            return String(this.description).length > 2;
-        },
-        defaultValue() {
-            return false;
-        },
-        model: {
-            get() {
-                return !!this.value;
-            },
-            set(value) {
-                this.value = !!value;
-                this.$emit('update:modelValue', this.value);
-            }
-        }
-    }
-}
-</script>
-<style lang="scss" scoped>
-.ux-checkbox {
-    margin-right: 0.5em;
-    line-height: 1;
-    height: 1.5em;
-    width: 1.5em;
-    padding: 0;
-
-    &:hover {
-        border-color: $primary;
-    }
-
-    &.ux-checkbox-true {
-        background: $primary;
-        border-color: $primary;
-        color: #fff;
-    }
-}
-
-.ux-field-title {
-    margin: 0 !important;
-}
-
-.ux-field-description-long {
-    margin-top: 0.5em;
-}
-</style>

package/src/form/inputs/textarea.vue

@@ -1,80 +0,0 @@
-<template>
-    <label class="ux-field-title" v-if="showLabel">{{label}} <span class="ux-required-marker" v-if="required">*</span></label>
-    <div class="ux-field-description" v-if="showDescription">{{description}}</div>
-    <div v-if="multiValue">
-        <flex-row class="ux-text-row" :key="index" v-for="(entry, index) in model">
-            <flex-cell>
-                <textarea contenteditable @focus="touch" ref="input" v-model="model[index]" class="ux-textarea  ux-field-focus ux-text-area-multiple"/>
-            </flex-cell>
-            <flex-cell shrink vcenter>
-                <ux-button tag="a" icon v-if="canRemoveValue" @click="remove(entry)">
-                    <ux-icon icon="fa-times" />
-                </ux-button>
-            </flex-cell>
-        </flex-row>
-        <ux-button v-if="canAddValue" @click="add()">{{addLabel}}</ux-button>
-    </div>
-    <template v-else>
-        <textarea class="ux-textarea ux-field-focus ux-text-area-single" @focus="touch" v-model="model"  role="textbox" contenteditable/>
-
-        <!-- <textarea class="ux-field-focus ux-text-area-single" @focus="touch" v-model="model" /> -->
-    </template>
-</template>
-<script>
-import InputMixin from './input-mixin';
-
-export default {
-    props: {
-        modelValue: {
-            type: [String, Array],
-        },
-    },
-    mixins: [InputMixin],
-    methods: {
-        getNewDefaultEntry() {
-            return '';
-        },
-    },
-}
-</script>
-<style lang="scss" scoped>
-.ux-text-row {
-    margin-bottom: 0.5em;
-}
-
-.ux-textarea,
-textarea {
-    border-radius: 0.1em;
-    padding: 0.5em;
-    box-sizing: border-box;
-    background: rgba(#000, 0.05);
-    border: 1px solid rgba(#000, 0.1);
-    font-size: inherit;
-    appearance: none;
-    line-height: 1;
-    min-height: 5em;
-    font-family: inherit;
-    resize: vertical;
-    overflow: hidden;
-
-    &:focus {
-        background: none;
-        border: 1px solid $primary;
-        outline: none;
-    }
-}
-
-.ux-text-row .ux-btn {
-    margin-left: 0.25em;
-}
-
-.ux-text-area-multiple {
-    width: 100%;
-}
-
-.ux-text-area-single {
-    width:100%;
-    // width: calc(100% - 0.5em);
-    // margin: 0 0.5em 0 0;
-}
-</style>

package/src/form/inputs/textfield.vue

@@ -1,185 +0,0 @@
-<template>
-    <label class="ux-field-title" v-if="showLabel">{{label}} <span class="ux-required-marker" v-if="required">*</span></label>
-    <div class="ux-field-description" v-if="showDescription">{{description}}</div>
-    <div v-if="multiValue">
-        <flex-row class="ux-text-row" :key="index" v-for="(entry, index) in model">
-            <flex-cell>
-                <div class="ux-text-wrap">
-                    <span class="ux-text-prefix" v-if="prefix">{{prefix}}</span>
-                    <input :type="inputType" v-if="lazy" class="ux-field-focus ux-text-input-multiple" :placeholder="actualPlaceholder" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" v-model.lazy="model[index]" />
-                    <input :type="inputType" v-if="!lazy" class="ux-field-focus ux-text-input-multiple" :placeholder="actualPlaceholder" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" v-model="model[index]" />
-                    <span class="ux-text-suffix" v-if="suffix">{{suffix}}</span>
-                </div>
-            </flex-cell>
-            <flex-cell shrink vcenter>
-                <ux-button tag="a" icon v-if="canRemoveValue" @click="remove(entry)">
-                    <ux-icon icon="fa-times" />
-                </ux-button>
-            </flex-cell>
-        </flex-row>
-        <ux-button v-if="canAddValue" @click="add()">{{addLabel}} <ux-icon icon="fa-plus" right/></ux-button>
-    </div>
-    <template v-else>
-        <div class="ux-text-wrap">
-            <span class="ux-text-prefix" v-if="prefix">{{prefix}}</span>
-            <input :type="inputType" v-if="lazy" ref="input" class="ux-field-focus ux-text-input-single" :placeholder="actualPlaceholder" @focus="touch" v-model.lazy="model" />
-            <input :type="inputType" v-if="!lazy" ref="input" class="ux-field-focus ux-text-input-single" :placeholder="actualPlaceholder" @focus="touch" v-model="model" />
-            <span class="ux-text-suffix" v-if="suffix">{{suffix}}</span>
-        </div>
-    </template>
-
-</template>
-<script>
-import InputMixin from './input-mixin';
-
-
-
-
-export default {
-    props: {
-        modelValue: {
-            type: [String, Array],
-        },
-    },
-    mixins: [InputMixin],
-    computed: {
-        inputType() {
-            switch(this.field.widget) {
-                case 'password':
-                case 'email':
-                    return this.field.widget;
-                break;
-                default:
-
-                    switch(this.field.type) {
-                        case 'email':
-                            return 'email';
-                        break;
-                        default:
-                            return 'text';
-                        break;
-                    }
-                break;
-            }
-        },
-        lazy() {
-            switch (this.type) {
-                case 'integer':
-                case 'number':
-                case 'decimal':
-                case 'float':
-                case 'url':
-                case 'key':
-                    return true;
-                    break;
-            }
-        },
-        actualPlaceholder() {
-            if(this.field.placeholder) {
-                return this.field.placeholder;
-            }
-
-            switch(this.type) {
-                case 'integer':
-                case 'number':
-                case 'decimal':
-                case 'float':
-                    return '0';
-                    break;
-                case 'url':
-                    return 'https://www.website.com'
-                break;
-                case 'email':
-                    return 'you@youremail.com'
-                break;
-            }
-        }
-    },
-    methods: {
-        cleanOutputValue(v) {
-            var cleaned = this.cleanTextInput(v, this.type, this);
-            return cleaned ? String(cleaned) : '';
-        },
-        cleanInputValue(v) {
-            return this.cleanTextInput(v, this.type, this);
-        },
-        getNewDefaultEntry() {
-            return '';
-        },
-    },
-}
-</script>
-<style lang="scss" scoped>
-.ux-text-row {
-    margin-bottom: 0.5em;
-}
-
-input {
-    border-radius: 0.1em;
-    padding: 0.5em;
-    box-sizing: border-box;
-    background: rgba(#000, 0.05);
-    border: 1px solid rgba(#000, 0.1);
-    font-size: inherit;
-    appearance: none;
-    line-height: 1;
-    height: 2.5em;
-
-    &:focus {
-        background: none;
-        border: 1px solid $primary;
-        outline: none;
-    }
-}
-
-
-.ux-text-wrap {
-    position: relative;
-
-    &.prefixed {
-        input {
-            padding-left: 1.2em;
-        }
-    }
-
-    .ux-text-prefix {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 1em;
-        pointer-events: none;
-        display: flex;
-        align-items: center;
-        padding: 0.5em 0;
-        justify-content: right;
-        opacity: 0.5;
-    }
-
-    .ux-text-suffix {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        pointer-events: none;
-        display: flex;
-        align-items: center;
-        padding: 0.5em;
-        opacity: 0.5;
-    }
-}
-
-.ux-text-row .ux-btn {
-    margin-left: 0.25em;
-}
-
-.ux-text-input-multiple {
-    width: 100%;
-}
-
-.ux-text-input-single {
-    width: 100%;
-    // width: calc(100% - 0.5em);
-    // margin: 0 0.5em 0 0;
-}
-</style>