@qikdev/vue-ui 0.0.4 → 0.1.2

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>
@@ -80,6 +83,7 @@ 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';
@@ -139,6 +143,7 @@ export default {
         CurrencyField,
         TextArea,
         Checkbox,
+        CustomHtml:CustomHTML,
         BooleanSwitch: Switch,
         FieldGroup,
         ContentSelect,
@@ -536,6 +541,7 @@ export default {
                 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/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>

package/src/layout/tabset.vue

@@ -0,0 +1,72 @@
+<template>
+    <flex-column>
+        <flex-header class="tabset-menu">
+            <flex-row>
+                <a :class="{active:index === activeIndex}" v-for="(tab, index) in tabs" @click="select(index)">{{tab.props.heading}}</a>
+            </flex-row>
+        </flex-header>
+        <flex-column>
+            <flex-column v-show="index === activeIndex" :key="index" v-for="(tab, index) in tabs">
+                <component :is="tab" />
+            </flex-column>
+            <!--  -->
+            <!-- <slot/> -->
+        </flex-column>
+    </flex-column>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            activeIndex: 0,
+        }
+    },
+    methods: {
+        select(i) {
+            console.log('SELECT', this.activeIndex)
+            this.activeIndex = i;
+        },
+    },
+    computed: {
+        tabs() {
+
+            var slotChildren = this.$slots.default()
+            // .map(function(t) {
+            //     return t.children;
+            // });
+            console.log('SLOT CHILDREN', slotChildren);
+            return slotChildren;
+
+            // 
+            // return [];
+        }
+    },
+}
+</script>
+<style lang="scss" scoped>
+
+.tabset-menu {
+    background: rgba(#000, 0.05);
+
+    a {
+        display: block;
+        flex:1;
+        align-items: center;
+        padding:1em;
+        text-transform: uppercase;
+        text-align: center;
+        letter-spacing: 0.05em;
+        cursor: pointer;
+        color: rgba(#000, 0.5);
+        font-weight: bold;
+        border-top:3px solid transparent;
+
+        &.active {
+            background: #fff;
+            color: $primary;
+            border-top:3px solid $primary;
+        }
+
+    }
+}
+</style>

package/src/mixins/RememberScroll.js

@@ -0,0 +1,30 @@
+
+export default {
+    data() {
+        return {
+            scrollTop: 0,
+        }
+    },
+    methods: {
+        updateScroll(e) {
+            var scroller = this.$refs.scroll;
+            scroller = scroller.$el || scroller;
+            this.scrollTop = scroller.scrollTop;
+        },
+    },
+    mounted() {
+        var scroller = this.$refs.scroll;
+        scroller = scroller.$el || scroller;
+        scroller.addEventListener('scroll', this.updateScroll);
+    },
+    beforeUnmount() {
+        var scroller = this.$refs.scroll;
+        scroller = scroller.$el || scroller;
+        scroller.removeEventListener('scroll', this.updateScroll);
+    },
+    activated() {
+        var scroller = this.$refs.scroll;
+        scroller = scroller.$el || scroller;
+        scroller.scrollTop = this.scrollTop;
+    },
+}

package/src/modal/ContentModal.vue

@@ -1,32 +1,32 @@
 <template>
     <flex-column class="wrapper">
-        
-        <template v-if="definition">
-            <flex-header>
-                <div class="header">
-                    <flex-row center>
-                        <flex-cell shrink>
-                            Select {{maximum == 1 ? title : plural}}
-                        </flex-cell>
-                        <flex-spacer />
-                        <flex-cell>
-                            <search v-model="search" :loading="searching" :debounce="500" placeholder="Search" />
-                        </flex-cell>
-                        <flex-spacer />
-                        <flex-cell shrink>
-                            <ux-button color="primary" @click="selectionComplete">Done</ux-button>
-                        </flex-cell>
-                    </flex-row>
-                </div>
-            </flex-header>
-            <content-browser ref="browser" :search="search" @click:row="rowClicked" :maximum="options.maximum" v-model="model" :type="options.type" :options="browserOptions">
-            </content-browser>
-        </template>
-
-        <flex-column v-else>
+        <flex-column v-if="loading">
             Loading
         </flex-column>
+        <template v-else>
+            <template v-if="definition">
+                <flex-header>
+                    <div class="header">
+                        <flex-row center>
+                            <flex-cell shrink>
+                                Select {{maximum == 1 ? title : plural}}
+                            </flex-cell>
+                            <flex-spacer />
+                            <flex-cell>
+                                <search v-model="search" :loading="searching" :debounce="500" placeholder="Search" />
+                            </flex-cell>
+                            <flex-spacer />
+                            <flex-cell shrink>
+                                <ux-button color="primary" @click="selectionComplete">Done</ux-button>
+                            </flex-cell>
+                        </flex-row>
+                    </div>
+                </flex-header>
+                <content-browser ref="browser" :search="search" @click:row="rowClicked" :maximum="options.maximum" v-model="model" :type="options.type" :options="browserOptions">
+                </content-browser>
+            </template>
 
+        </template>
     </flex-column>
 </template>
 <script>
@@ -44,7 +44,15 @@ export default {
     async created() {
         var self = this;
         var glossary = await self.$qik.content.glossary({ hash: true });
+        self.loading = false;
         var definition = glossary[self.type]
+
+        if(!definition) {
+            //Close immediately
+            self.$qik.notify('You do not have the required permissions to list content of this type');
+            self.dismiss()
+            return;
+        }
         self.definition = definition;
     },
     computed: {
@@ -69,6 +77,7 @@ export default {
             search: '',
             searching: false,
             definition: null,
+            loading: true,
             model: this.options.model.slice(),
         }
     },
@@ -91,7 +100,7 @@ export default {
 }
 
 .header {
-    background:#fff;
+    background: #fff;
     padding: 1em;
     border-bottom: 1px solid rgba(#000, 0.1);
 }

package/src/modal/Modal.vue

@@ -58,7 +58,8 @@ export default {
 	bottom:0;
 	display: flex;
 	width:100vw;
-	height:100vh;
+	height: 100vh;
+    height: -webkit-fill-available;
 	z-index: 100;
 	justify-content: center;
 	align-items:center;