@qikdev/vue-ui 0.0.3 → 0.1.1

package/src/content/render/field.vue

@@ -222,6 +222,14 @@ export default {
             return val;
         },
         cleanOutput(val) {
+
+            if (this.type == 'reference') {
+                if (!this.multiValue) {
+                    if (Array.isArray(val) && val.length) {
+                        return val[0]
+                    }
+                }
+            }
             return val;
         }
     },

package/src/content/render/group.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="ux-multi-group" v-if="multiValue">
-        <panel ref="row" :key="entry" v-for="(entry, index) in model">
-            <panel-header>
+        <ux-panel ref="row" :key="entry" v-for="(entry, index) in model">
+            <ux-panel-header>
                 <flex-row>
                     <flex-cell vcenter>
                         <div>
@@ -9,11 +9,11 @@
                         </div>
                     </flex-cell>
                 </flex-row>
-            </panel-header>
-            <panel-body>
+            </ux-panel-header>
+            <ux-panel-body>
                 <ux-render :fields="fields" :flex="sameLine" :parentModel="parentModel" v-model="model[index]" />
-            </panel-body>
-        </panel>
+            </ux-panel-body>
+        </ux-panel>
     </div>
     <template v-else>
         <ux-render :fields="fields" :flex="sameLine" :parentModel="parentModel" v-model="model" />

package/src/filter/FilterBuilder.vue

@@ -9,7 +9,8 @@
                     </native-select> of the following rules
                 </div>
             </div>
-            <filter-rule :enableRemove="model.filters.length > 1" :key="`rule-${index}`" @remove="removeRule(index)" :definition="definition" v-model="model.filters[index]" :index="index" v-for="(rule, index) in model.filters" />
+            <!-- :enableRemove="model.filters.length > 1" -->
+            <filter-rule  enableRemove :key="`rule-${index}`" @remove="removeRule(index)" :definition="definition" v-model="model.filters[index]" :index="index" v-for="(rule, index) in model.filters" />
             <ux-button @click="addRule()">Add Filter Rule</ux-button>
         </div>
         </flex-body>

package/src/filter/FilterCondition.vue

@@ -9,7 +9,12 @@
             </flex-cell>
             <flex-cell v-if="model.comparator">
                 <div v-if="inputType == 'array'">
-                    <text-field :field="arrayField" v-model="model.values" />
+                    <template v-if="hasOptions">
+                        <native-select v-model="model.values" :field="multiOptionsField" />
+                    </template>
+                    <template v-else>
+                        <text-field :field="arrayField" v-model="model.values" />
+                    </template>
                 </div>
                 <div v-if="inputType == 'range'">
                     <text-field :field="normalField" v-model="model.value" />
@@ -50,16 +55,20 @@
                     <text-field :field="normalField" v-model="model.value" />
                 </div>
                 <div v-if="inputType == 'normal'">
-                    <text-field :field="normalField" v-model="model.value" />
+                    <template v-if="hasOptions">
+                        <native-select v-model="model.value" :field="singleOptionsField" />
+                    </template>
+                    <template v-else>
+                        <text-field :field="normalField" v-model="model.value" />
+                    </template>
                 </div>
-                <!-- <pre>{{inputType}}</pre> -->
-                <!-- <pre>{{comparator}}</pre>
-            <native-select v-model="model.value" :field="comparatorField">
-                {{model.comparator || 'Select Value'}}
-            </native-select> -->
+                
+
+                <!-- <pre>{{field}}</pre> -->
+
             </flex-cell>
             <flex-cell shrink v-if="enableRemove">
-                <ux-button icon @click="$emit('remove')">
+                <ux-button size="sm" icon @click="$emit('remove')">
                     <ux-icon icon="fa-times" />
                 </ux-button>
             </flex-cell>
@@ -112,6 +121,9 @@ export default {
         }
     },
     computed: {
+        hasOptions() {
+            return !!(this.field.options && this.field.options.length);
+        },
         fieldHash() {
             return this.fields.reduce(function(set, field) {
 
@@ -282,13 +294,39 @@ export default {
                 placeholder: this.field.title,
             }
         },
+        multiOptionsField() {
+            return {
+                // title:`Select ${this.field.title}`,
+                options: this.field.options,
+                widget: 'select',
+                type: this.fieldType,
+                maximum: 0,
+                minimum: 1,
+                placeholder: this.field.title,
+            }
+        },
+        singleOptionsField() {
+            return {
+                title:`Select ${this.field.title}`,
+                options: this.field.options,
+                widget: 'select',
+                type: this.fieldType,
+                maximum: 1,
+                minimum: 0,
+                placeholder: this.field.title,
+            }
+        },
         normalField() {
+
+
+
             return {
                 type: this.fieldType,
                 maximum: 1,
                 minimum: 1,
                 placeholder: this.field.title,
             }
+
         },
         arrayField() {
             return {

package/src/filter/FilterRule.vue

@@ -10,7 +10,7 @@
                     </div>
                 </flex-cell>
                 <flex-cell @click="$emit('remove')" shrink v-if="enableRemove">
-                    <ux-button icon>
+                    <ux-button size="sm" icon>
                         <ux-icon icon="fa-trash" />
                     </ux-button>
                 </flex-cell>
@@ -109,6 +109,8 @@ export default {
                     break;
             }
         },
+
+        
         fields() {
             var allFields = [...this.definition.fields];
             var definedFields = this.definition.definedFields || [];

package/src/form/field.vue

@@ -1,5 +1,8 @@
 <template>
     <div class="ux-field" @focusin="focus" @focusout="blur" v-if="visible" :class="classes">
+        <template v-if="widget == 'html'">
+            <custom-html @touched="touch" :field="actualField" v-model="fieldModel" />
+        </template>
         <template v-if="widget == 'checkbox'">
             <checkbox @touched="touch" :field="actualField" v-model="fieldModel" />
         </template>
@@ -35,6 +38,10 @@
         <template v-if="widget == 'content-select'">
             <content-select @touched="touch" :field="actualField" v-model="fieldModel" />
         </template>
+
+        <template v-if="widget == 'type-select'">
+            <type-select @touched="touch" :field="actualField" v-model="fieldModel" />
+        </template>
         <template v-if="widget == 'richtext'">
             <text-area @touched="touch" :field="actualField" v-model="fieldModel" />
         </template>
@@ -70,11 +77,13 @@
 import PhoneNumberInput from './inputs/phone-number-input.vue';
 import TimezoneSelect from './inputs/timezone.vue';
 import ContentSelect from './inputs/content-select.vue';
+import TypeSelect from './inputs/type-select.vue';
 import CurrencyField from './inputs/currency.vue';
 import TextField from './inputs/textfield.vue';
 import TextArea from './inputs/textarea.vue';
 import DateField from './inputs/datefield.vue';
 import Checkbox from './inputs/checkbox.vue';
+import CustomHTML from './inputs/html.vue';
 import Switch from './inputs/switch.vue';
 import Upload from './inputs/upload/upload.vue';
 import FieldGroup from './inputs/group.vue';
@@ -134,9 +143,11 @@ export default {
         CurrencyField,
         TextArea,
         Checkbox,
+        CustomHtml:CustomHTML,
         BooleanSwitch: Switch,
         FieldGroup,
         ContentSelect,
+        TypeSelect,
         TimezoneSelect,
         PhoneNumberInput,
         Upload,
@@ -529,6 +540,8 @@ export default {
                 case 'upload':
                 case 'options':
                 case 'button':
+                case 'type-select':
+                case 'html':
                     break;
                 case 'password':
                     return 'textfield';

package/src/form/getDefaultValue.js

@@ -141,6 +141,7 @@ export default function getDefaultValue(fieldData, currentValue) {
             }
             break;
         case 'group':
+
             if (fieldData.asObject) {
                 var number = ask;
                 if (multiValue) {
@@ -205,6 +206,7 @@ export default function getDefaultValue(fieldData, currentValue) {
             }
             break;
         default:
+
             if (multiValue) {
                 if (defaultValues.length) {
                     output = defaultValues.slice(0, maximum);

package/src/form/inputs/group.vue

@@ -1,8 +1,8 @@
 <template>
    
     <div class="ux-multi-group" v-if="multiValue">
-        <panel ref="row" :key="entry" v-for="(entry, index) in model">
-            <panel-header>
+        <ux-panel ref="row" :key="entry" v-for="(entry, index) in model">
+            <ux-panel-header>
                 <flex-row>
                     <flex-cell vcenter>
                         <div>
@@ -15,11 +15,11 @@
                         </ux-button>
                     </flex-cell>
                 </flex-row>
-            </panel-header>
-            <panel-body @keydown.enter="enterPress($event)">
+            </ux-panel-header>
+            <ux-panel-body @keydown.enter="enterPress($event)">
                 <ux-form ref="form" @form:state="stateChange" :parentModel="parentModel" v-model="model[index]" :flex="sameLine" :fields="field.fields" />
-            </panel-body>
-        </panel>
+            </ux-panel-body>
+        </ux-panel>
         <ux-button v-if="canAddValue" @click="add()">{{addLabel}}
             <ux-icon icon="fa-plus" right />
         </ux-button>

package/src/form/inputs/html.vue

@@ -0,0 +1,39 @@
+<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">
+            <flex-cell>
+                <div v-html="field.template" :key="index" v-for="(entry, index) in model"></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-button>
+    </div>
+    <template v-else>
+        <div v-html="field.template"></div>
+    </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>
+</style>

package/src/form/inputs/select.vue

@@ -185,9 +185,27 @@ export default {
             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;
+
+            }
             }
         }
 

package/src/form/inputs/type-select.vue

@@ -0,0 +1,247 @@
+<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],
+    async created() {
+        this.model = this.model;
+
+        var glossary = await this.$qik.content.glossary();
+
+
+        var typeList = glossary;
+
+        if (this.field.basicTypes === false) {
+            typeList = typeList.filter(function(definition) {
+                return !!definition.definesType
+            })
+        }
+
+        if (this.field.definedTypes === false) {
+            typeList = typeList.filter(function(definition) {
+                return !definition.definesType
+            })
+        }
+
+        ////////////////////////////
+
+        typeList = typeList.map(function(definition) {
+                return {
+                    title: definition.title,
+                    value: definition.key,
+                }
+            })
+            .sort((a, b) => a.title > b.title ? 1 : -1);
+
+        ////////////////////////////
+
+        this.types = typeList;
+    },
+    data() {
+        return {
+            types: [],
+        }
+    },
+    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 false;
+        },
+        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.types.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.types;
+            // 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/layout/flex-row.vue

@@ -30,7 +30,7 @@ export default {
     }
 
     &[gap] {
-        gap: 0.2em;
+        gap: 0.4em;
     }
 }
 

package/src/layout/flex-spacer.vue

@@ -10,6 +10,7 @@ export default {
 <style scoped lang="scss">
 .flex-spacer {
     padding:0.25em;
+    flex:1;
 }
 
 

package/src/layout/tab.vue

@@ -0,0 +1,34 @@
+<template>
+	<flex-column>
+		
+			<slot/>
+		
+	</flex-column>
+</template>
+<script>
+export default {
+	props:{
+		heading:{
+			type:String,
+			required:true,
+		}
+	},
+	data() {
+		return {
+			isActive:false,
+		}
+	},
+	computed:{
+		active:{
+			get() {
+				return this.isActive;
+			},
+			set(a) {
+				this.isActive = a;
+			}
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+</style>