@qikdev/vue-ui 0.0.1 → 0.0.2

package/src/form/inputs/select.vue

@@ -0,0 +1,211 @@
+<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;
+                text-align: left;
+            }
+        }
+
+        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

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

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

@@ -0,0 +1,165 @@
+<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 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 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 v-if="lazy" ref="input" class="ux-field-focus ux-text-input-single" :placeholder="actualPlaceholder" @focus="touch" v-model.lazy="model" />
+            <input 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: {
+        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>