@qikdev/vue-ui 0.0.1 → 0.0.2

package/src/form/inputs/checkbox.vue

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

@@ -0,0 +1,187 @@
+<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="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="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

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

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