@qikdev/vue-ui 0.0.5 → 0.1.6

package/src/form/inputs/checkbox.vue

@@ -1,91 +0,0 @@
-<template>
-    <flex-row @click="touch()">
-        <flex-cell vcenter shrink>
-            <ux-checkbox  :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 NativeCheckbox from '../../ui/checkbox.vue';
-import InputMixin from './input-mixin';
-
-export default {
-    computed: {
-        NativeCheckbox,
-    },
-    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/content-select.vue

@@ -1,187 +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>
-    <template v-if="multiValue">
-        <div class="items" v-if="model && model.length">
-            <item :key="item._id" :item="item" v-for="(item, index) in model">
-                <template #actions>
-                    <ux-button icon @click.stop.prevent="remove(item)">
-                        <ux-icon icon="fa-times" />
-                    </ux-button>
-                </template>
-            </item>
-        </div>
-    </template>
-    <template v-else-if="model">
-        <div class="items">
-            <item :item="model">
-                <template #actions>
-                    <ux-button icon @click.stop.prevent="clear">
-                        <ux-icon icon="fa-times" />
-                    </ux-button>
-                </template>
-            </item>
-        </div>
-    </template>
-    <ux-button @click="open">{{summary}}</ux-button>
-</template>
-<script>
-import Item from '../../content/item.vue';
-import InputMixin from './input-mixin';
-
-export default {
-    components: {
-        Item,
-    },
-    props: {
-        modelValue: {
-            type: [Object, Array],
-        },
-    },
-    mixins: [InputMixin],
-    created() {
-        this.value = this.cleanInput(this.value, true);
-        this.dispatch();
-    },
-    methods: {
-        clear() {
-            this.model = undefined;
-            this.touch();
-        },
-        // remove(index) {
-        //     if (this.maximum == 1) {
-        //         this.model = null
-        //     } else {
-        //         this.model.splice(index, 1);
-        //     }
-        // },
-        open() {
-            var self = this;
-            self.touch();
-
-            self.$qik.browse(this.field.referenceType, {
-                    field:self.field,
-                    model: self.multiValue ? self.value : [self.value].filter(Boolean),
-                    maximum: self.field.maximum,
-                })
-                .then(function(newSelection) {
-                    self.model = self.multiValue ? newSelection : newSelection[0];
-                })
-                .catch(function(err) {
-                    console.log('Error', err);
-                })
-        },
-        cleanInput(val) {
-
-            var self = this;
-            if (self.multiValue) {
-                if (!val) {
-                    val = [];
-                }
-
-                if (!Array.isArray(val)) {
-                    val = [];
-                }
-
-                /////////////////////////////////
-
-                if (self.maximum) {
-                    if (val.length > self.maximum) {
-                        val.length = self.maximum;
-                    }
-                }
-            } else {
-                if (Array.isArray(val)) {
-                    val = val[0]
-                }
-            }
-
-            return val;
-        },
-    },
-    computed: {
-        summary() {
-            if (this.multiValue) {
-                if (this.model && this.model.length) {
-
-                    var length = this.model.length;
-
-
-                    var difference = Math.max(length - 3, 0);
-
-                    var summary;
-                    var cropped = this.model.slice(0, 3);
-                    summary = cropped.map(function(item) {
-                        return item.firstName || item.name || item.title;
-                    }).join(', ');
-
-                    if (difference) {
-                        summary = `${summary}... +${difference} more...`
-                    }
-                    
-                    return summary;
-
-                } else {
-                    return `Click to select`;
-                }
-            } else {
-                if (this.model) {
-                    return 'Click to select';
-                } else {
-                    return `Click to select`;
-                }
-            }
-        },
-    }
-}
-</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-row .ux-btn {
-    margin-left: 0.25em;
-}
-
-.ux-text-input-multiple {
-    width: 100%;
-}
-
-.ux-text-input-single {
-    width: calc(100% - 0.5em);
-    margin: 0 0.5em 0 0;
-}
-
-.items {
-    border: 1px solid rgba(#000, 0.1);
-    border-radius: 0.3em;
-    overflow: hidden;
-    margin-bottom: 0.5em;
-
-    .content-item {
-
-        border: none;
-        border-bottom: 1px solid rgba(#000, 0.1);
-
-    }
-}
-</style>

package/src/form/inputs/currency.vue

@@ -1,205 +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" :class="{prefixed:prefix, suffixed:suffix}">
-                    <span class="ux-text-prefix" v-if="prefix">{{prefix}}</span>
-                    <input class="ux-field-focus ux-text-input-multiple" ref="input" placeholder="0.00" :key="`proxy-index-${index}`" @keydown.enter.stop.prevent="add()" @blur="update($event, index)" v-model.lazy="proxy[index]" @focus="touch" />
-                    <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" :class="{prefixed:prefix, suffixed:suffix}">
-            <span class="ux-text-prefix" v-if="prefix">{{prefix}}</span>
-            <input class="ux-field-focus ux-text-input-single" ref="input" :key="proxy" placeholder="0.00" @keyup.enter.stop.prevent="unfocus" @focus="touch" v-model.lazy="proxy" />
-            <span class="ux-text-suffix" v-if="suffix">{{suffix}}</span>
-        </div>
-    </template>
-</template>
-<script>
-import InputMixin from './input-mixin';
-
-function setFormat(value) {
-    if (value != "") {
-        value = parseFloat(value.replace(/\//g, ""))
-            .toString()
-            .replace(/\B(?=(\d{3})+(?!\d))/g, "/");
-    }
-
-    return value;
-}
-
-
-export default {
-
-    props: {
-        modelValue: {
-            type: [String, Array],
-        },
-    },
-    mixins: [InputMixin],
-    methods: {
-        update(event, index) {
-            var formatted = this.format(event.target.value);
-            this.model[index] = formatted;
-        },
-        format(v) {
-            v = String(v).replace(/[^0-9.-]/g, '')
-
-            var v = (parseFloat(v) * 100);
-            if (isNaN(v)) {
-                return '';
-            }
-
-            v = Math.round(v);
-            return v;
-        },
-        unformat(v) {
-            v = String(v).replace(/[^0-9.-]/g, '')
-
-            var v = (parseFloat(v) / 100);
-            if (isNaN(v)) {
-                return '';
-            }
-
-            v = v.toFixed(2);
-            return v;
-        },
-        getNewDefaultEntry() {
-            return '';
-        },
-        unfocus() {
-            this.$refs.input.blur();
-            this.touch();
-            // this.proxy = this.proxy;
-            // this.model = this.format(this.unformat(this.model));
-        },
-    },
-    computed: {
-        model: {
-            get() {
-                return this.cleanOutput(this.value);
-            },
-            set(val) {
-                console.log('SET MODEL', val);
-                this.value = this.cleanInput(val);
-                this.dispatch();
-            }
-        },
-        proxy: {
-            get() {
-
-                var self = this;
-
-                if (self.multiValue) {
-                    return self.model.map(self.unformat);
-                } else {
-                    return self.unformat(self.model);
-                }
-            },
-            set(v) {
-                var self = this;
-                if (self.multiValue) {
-                    self.model = v.map(self.format);
-                } else {
-                    self.model = self.format(v);
-                }
-            }
-        },
-        currency() {
-            return String(this.field.currency || 'usd').toLowerCase();
-        },
-        prefix() {
-            return this.$qik.utils.currencySymbol(this.currency);
-        },
-        suffix() {
-            return String(this.currency).toUpperCase();
-        }
-    },
-}
-</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;
-    text-align: left;
-    direction: ltr;
-
-    &: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>

package/src/form/inputs/datefield.vue

@@ -1,132 +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>
-                <input type="datetime-local" class="ux-field-focus ux-text-input-multiple" @focus="touch" ref="input"  @keydown.enter.stop.prevent="add()" v-model="model[index]" />
-            </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>
-        <input type="datetime-local" class="ux-field-focus ux-text-input-single" @focus="touch" v-model="model" />
-    </template>
-</template>
-<script>
-import InputMixin from './input-mixin';
-
-
-
-
-//////////////////////////
-
-function zero(input) {
-    if (String(input).length < 2) {
-        input = `0${input}`;
-    }
-    return input
-}
-
-//////////////////////////
-
-export default {
-    props: {
-        modelValue: {
-            type: [Date, String, Array],
-        },
-    },
-    mixins: [InputMixin],
-    computed: {
-        model: {
-            get() {
-                let val = this.cleanOutput(this.value);
-                return val;
-            },
-            set(newValue) {
-                if (!newValue) {
-                    this.value = undefined;
-                    this.dispatch()
-                    return;
-                }
-
-                //Invalid date so no change here
-                if (newValue === 'invalid') {
-                    return;
-                }
-
-                ////////////////////////
-
-                var val = this.cleanOutput(newValue);
-                var existing = this.cleanOutput(this.value);
-
-                if (val != existing) {
-                    newValue = this.cleanInput(val);
-                    this.value = newValue;
-                    this.dispatch();
-                }
-
-            }
-        },
-    },
-    methods: {
-        cleanOutputValue(d) {
-            d = d ? new Date(d) : new Date();
-            return `${d.getFullYear()}-${zero(d.getMonth() + 1)}-${zero(d.getDate())}T${zero(d.getHours())}:${zero(d.getMinutes())}`;
-        },
-        cleanInputValue(d) {
-            let dt = new Date(d);
-            if (dt.toString() == 'Invalid Date') {
-                return 'invalid';
-            }
-            return dt.toISOString();
-        },
-        getNewDefaultEntry() {
-            return new Date();
-        },
-    },
-}
-</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;
-    font-family:inherit;
-    line-height: 1;
-    height: 2.5em;
-
-    &:focus {
-        background: none;
-        border: 1px solid $primary;
-        outline: none;
-    }
-}
-
-.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>