@qikdev/vue-ui 0.1.2 → 0.1.8

package/src/form/inputs/object-field.vue

@@ -1,50 +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>
-                <pre>{{entry}}</pre>
-            </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>
-        <pre>{{model}}</pre>
-    </template>
-</template>
-<script>
-import InputMixin from './input-mixin';
-
-export default {
-    props: {
-        modelValue: {
-            type:Object,
-        },
-    },
-    mixins: [InputMixin],
-    computed: {
-
-    },
-    methods: {
-        getNewDefaultEntry() {
-            return {};
-        },
-    },
-}
-</script>
-<style lang="scss" scoped>
- pre {
-    border-radius:0.5em;
-    background: #222;
-    font-size: 0.8em;
-    color: #ddd;
-    padding: 1em;
-    display: block;
- }
-</style>

package/src/form/inputs/option.vue

@@ -1,19 +0,0 @@
-<template>
-    <slot :plainValue="plainValue">
-        <pre>{{option}}</pre>
-    </slot>
-</template>
-<script>
-export default {
-    props: {
-        option: {
-            required:true,
-        }
-    },
-    computed: {
-        plainValue() {
-            return this.option._id || this.option.value || this.option;
-        },
-    }
-}
-</script>

package/src/form/inputs/options-manager.vue

@@ -1,244 +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 prefixed">
-                     <span class="ux-text-prefix">Label</span>
-                    <input v-if="lazy" class="ux-field-focus ux-text-input-multiple" placeholder="Label" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" @blur="titleBlurred(index)" @update:modelValue="entryTitleChanged(index)" v-model.lazy="model[index].title" />
-                    <input v-if="!lazy" class="ux-field-focus ux-text-input-multiple" placeholder="Label" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" @blur="titleBlurred(index)" @update:modelValue="entryTitleChanged(index)" v-model="model[index].title" />
-                </div>
-            </flex-cell>
-            <flex-cell>
-                <div class="ux-text-wrap prefixed">
-                     <span class="ux-text-prefix">Value</span>
-                    <input v-if="lazy" class="ux-field-focus ux-text-input-multiple" placeholder="Value" @focus="valueTouched(index)" ref="valueInput" @keydown.enter.stop.prevent="add()" v-model.lazy="model[index].value" />
-                    <input v-if="!lazy" class="ux-field-focus ux-text-input-multiple" placeholder="Value" @focus="valueTouched(index)" ref="valueInput" @keydown.enter.stop.prevent="add()" v-model="model[index].value" />
-                </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>
-        <flex-row class="ux-text-row">
-            <flex-cell>
-                <div class="ux-text-wrap prefixed">
-                     <span class="ux-text-prefix">Label</span>
-                    <input v-if="lazy" class="ux-field-focus ux-text-input-multiple" placeholder="Label" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" @blur="titleBlurred(index)" @update:modelValue="entryTitleChanged" v-model.lazy="model.title" />
-                    <input v-if="!lazy" class="ux-field-focus ux-text-input-multiple" placeholder="Label" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" @blur="titleBlurred(index)" @update:modelValue="entryTitleChanged" v-model="model.title" />
-                </div>
-            </flex-cell>
-            <flex-cell>
-                <div class="ux-text-wrap prefixed">
-                     <span class="ux-text-prefix">Value</span>
-                    <input v-if="lazy" class="ux-field-focus ux-text-input-multiple" placeholder="Value" @focus="valueTouched" ref="valueInput" @keydown.enter.stop.prevent="add()" v-model.lazy="model.value" />
-                    <input v-if="!lazy" class="ux-field-focus ux-text-input-multiple" placeholder="Value" @focus="valueTouched" ref="valueInput" @keydown.enter.stop.prevent="add()" v-model="model.value" />
-                </div>
-            </flex-cell>
-        </flex-row>
-    </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;
-            }
-        },
-        addLabel() {
-            if (this.numValues) {
-                return `Add another option`
-
-            } else {
-                return `Add options`
-            }
-        },
-    },
-    methods: {
-        titleBlurred(index) {
-            var entry;
-            if (this.multiValue) {
-                entry = this.model[index];
-            } else {
-                entry = this.model;
-            }
-
-            //Leave it pristine
-            if(entry.title === entry.value) {
-                return;
-            }
-
-            //Clear it out
-            delete entry.pristine;
-        },
-        valueTouched(index) {
-            var entry;
-            if (this.multiValue) {
-                entry = this.model[index];
-            } else {
-                entry = this.model;
-            }
-
-            ///////////////
-
-            delete entry.pristine;
-
-            ///////////////
-
-            this.touch();
-        },
-        entryTitleChanged(index) {
-
-            //Need this as otherwise the v-model will beat it
-            this.$nextTick(function() {
-                var entry;
-                if (this.multiValue) {
-                    entry = this.model[index];
-                } else {
-                    entry = this.model;
-                }
-
-                if (entry.pristine) {
-                    entry.value = entry.title;
-                }
-
-            })
-        },
-        cleanOutputValue(obj) {
-            obj.value = this.cleanTextInput(obj.value, this.type, this);
-            return obj;
-        },
-        cleanInputValue(obj) {
-            obj.value = this.cleanTextInput(obj.value, this.type, this);
-            return obj;
-        },
-        getNewDefaultEntry() {
-            return {
-                pristine:true,
-            };
-        },
-    },
-}
-</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.8em;
-        }
-    }
-
-    .ux-text-prefix {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 3.1em;
-        pointer-events: none;
-        display: flex;
-        align-items: center;
-        padding: 0.5em 0;
-        justify-content: right;
-        opacity: 0.5;
-        font-size:0.5em;
-    }
-
-    .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/phone-number-input.vue

@@ -1,235 +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 wrap class="ux-text-row" :key="index" v-for="(entry, index) in model">
-            <flex-cell shrink>
-                <native-select v-model="entry.countryCode" :field="countryCodeField">
-                    <template v-if="!entry.countryCode">
-                        Country Code
-                    </template>
-                    <template v-else>
-                        <div v-if="lookup[entry.countryCode]">{{lookup[entry.countryCode].emoji}} - {{lookup[entry.countryCode].alpha2}}</div>
-                        <div v-else>Loading</div>
-                    </template>
-                </native-select>
-                <!-- <select class="ux-country-code-select" v-model="entry.countryCode">
-                    <option value="">None</option>
-                    <option :value="country.value" v-for="country in countryCodes">{{country.title}}</option>
-                </select> -->
-            </flex-cell>
-            <flex-cell>
-                <div class="ux-text-wrap">
-                    <input class="ux-field-focus ux-text-input-multiple" :placeholder="actualPlaceholder" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" v-model="entry.number" />
-                </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>
-        <flex-row wrap class="ux-text-row" :key="index">
-            <flex-cell shrink>
-                <select class="ux-country-code-select" v-model="model.countryCode">
-                    <option value="">None</option>
-                    <option :value="country.value" v-for="country in countryCodes">{{country.title}}</option>
-                </select>
-            </flex-cell>
-            <flex-cell>
-                <div class="ux-text-wrap">
-                    <input class="ux-field-focus ux-text-input-multiple" :placeholder="actualPlaceholder" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" v-model="model.number" />
-                </div>
-            </flex-cell>
-        </flex-row>
-    </template>
-</template>
-<script>
-import InputMixin from './input-mixin';
-import NativeSelect from './select.vue';
-
-
-
-export default {
-    props: {
-        modelValue: {
-            type: [Object, Array],
-        },
-    },
-    components: {
-        NativeSelect,
-    },
-    mixins: [InputMixin],
-    async created() {
-        var countries = await this.$qik.system.countries();
-
-        var mapped = countries.reduce(function(set, country) {
-
-            if (!country.countryCallingCodes || !country.countryCallingCodes.length) {
-                return set;
-            }
-
-            ////////////////////////////////////
-
-            var title = `${country.name} (${country.countryCallingCodes.join(', ')})`;
-            var matchingKey = title;
-
-            if (set.values[matchingKey]) {
-                return set;
-            }
-
-            set.values[matchingKey] = true;
-
-            set.lookup[country.alpha2] = country;
-
-            set.value.push({
-                title: `${title} - ${country.emoji}`,
-                value: country.alpha2,
-                emoji: country.emoji,
-            })
-
-            return set;
-        }, {
-            value: [],
-            values: {},
-            lookup: {},
-        })
-
-        this.countryCodes = mapped.value;
-        this.lookup = mapped.lookup;
-
-    },
-    data() {
-        return {
-            countryCodes: [],
-            lookup: {},
-        }
-    },
-    computed: {
-
-        actualPlaceholder() {
-            return `+61 000 000 000`;
-        },
-        countryCodeField() {
-            return {
-                minimum: 0,
-                maximum: 1,
-                type: 'string',
-                options: this.countryCodes,
-
-            }
-        },
-        defaultCountryCode() {
-
-            var userCountryCode = this.user ? this.user.countryCode : '';
-            var orgCountryCode = this.user && this.user.organisation ? this.user.organisation.countryCode : '';
-
-
-            return userCountryCode || orgCountryCode;
-        },
-    },
-    methods: {
-
-        // cleanOutputValue(v) {
-        //     var cleaned = cleanInput(v, this.type, this);
-        //     return cleaned ? String(cleaned) : '';
-        // },
-        // cleanInputValue(v) {
-        //     return cleanInput(v, this.type, this);
-        // },
-        getNewDefaultEntry() {
-            return {
-                label: '',
-                countryCode: this.defaultCountryCode,
-                number: '',
-            };
-        },
-    },
-}
-</script>
-<style lang="scss" scoped>
-.ux-text-row {
-    margin-bottom: 0.5em;
-}
-
-
-// select,
-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;
-    }
-}
-
-
-// select {
-//     max-width: clamp(30px, 5em, 100px);
-// }
-
-
-.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/search.vue

@@ -1,117 +0,0 @@
-<template>
-    <div class="search">
-        <input v-model="model" :placeholder="placeholder" />
-        <div @click="clear()" class="icon">
-        <ux-icon :icon="icon"/>
-       
-    </div>
-
-    </div>
-</template>
-<script>
-import _debounce from 'lodash/debounce';
-
-
-
-
-export default {
-    props: {
-        modelValue: {
-            type: String,
-        },
-        placeholder: {
-            type: String,
-        },
-        debounce: {
-            type: Number,
-            default () {
-                return 500;
-            }
-        },
-        loading:{
-            type:Boolean,
-        }
-    },
-    mounted() {
-        var self = this;
-        self.dispatch = _debounce(() => {
-            self.$emit('update:modelValue', self.value);
-        }, self.debounce)
-    },
-    data() {
-        return {
-            value: String(this.modelValue),
-        }
-    },
-    methods:{
-        clear() {
-            this.value = '';
-            this.$emit('update:modelValue', this.value);
-        }
-    },
-    watch: {
-        modelValue(val, old) {
-            this.value = val;
-        },
-    },
-    computed: {
-        icon() {
-            return this.loading ? `fa-spinner fa-spin` : this.value ? `fa-times` : `fa-search`;
-        },
-        selectableOptions() {
-            return this.options.map(function(option) {
-                const value = option.value || option;
-                const label = option.title || option.name || option.label || value;
-
-                return {
-                    label,
-                    value,
-                }
-            })
-        },
-        model: {
-            get() {
-                return this.value;
-            },
-            set(value) {
-                this.value = value;
-                this.dispatch();
-            }
-        }
-    }
-}
-</script>
-<style lang="scss" scoped>
-.search {
-    position: relative;
-    width:100%;
-
-    & > .icon {
-        position:absolute;
-        right:0;
-        top:0;
-        bottom:0;
-        line-height: 2.5em;
-        padding:0 1em;
-    }
-
-    input {
-        width:100%;
-        border-radius: 5em;
-        padding: 0.5em 1em;
-        box-sizing: border-box;
-        background: rgba(#000, 0.05);
-        border: 1px solid transparent;
-        font-size: inherit;
-        appearance: none;
-        line-height: 1;
-        // height: 2.5em;
-
-        &:focus {
-            background: none;
-            border: 1px solid $primary;
-            outline: none;
-        }
-    }
-}
-</style>