@qikdev/vue-ui 0.0.2 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qikdev/vue-ui",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "type": "module",
   "description": "Vue UI component library",
   "scripts": {

package/src/content/browser.vue

@@ -7,17 +7,23 @@
                     <flex-cell flex>
                         <native-table :total="totalItems" :selectAll="selectAll" :deselectAll="deselectAllFunction" :actions="false" :selection="manager.items" @click:row="rowClicked" @select:row:toggle="rowToggled" @select:multiple="selectMultiple" @deselect:multiple="deselectMultiple" :rows="items" :columns="columns" />
                     </flex-cell>
-                    <flex-column style="max-width: 600px;">
-                        <flex-header>
-                            Filters
-                        </flex-header>
+                    <flex-column class="filter-column" style="max-width: 600px;" v-if="showFilters">
+<flex-body>
+                        <search v-model="search" :loading="searching" :debounce="500" placeholder="Keyword Search" />
+
+
+<p></p>
+
+                        
+
                         <filter-builder :definition="definition" v-model="filter" />
+                    </flex-body>
                     </flex-column>
                 </flex-row>
             </flex-column>
             <flex-footer>
                 <div class="footer">
-                    <flex-row center>
+                    <flex-row center gap >
                         <flex-cell shrink class="text">
                             <native-select v-model="perPage" :field="perPageField">
                                 Showing {{displayStartIndex}} to {{endIndex}} of {{totalItems}} total
@@ -25,8 +31,8 @@
                         </flex-cell>
                         <flex-cell>
                         </flex-cell>
-                        <flex-cell shrink>
-                            <flex-row center>
+                        <flex-cell shrink v-if="totalPages > 1">
+                            <flex-row gap center>
                                 <flex-cell shrink class="text">
                                     <native-select v-model="currentPage" :field="pageField">
                                         Page {{currentPage}} of {{totalPages}}
@@ -56,6 +62,7 @@ import NativeTable from '../table/Table.vue';
 
 import FilterBuilder from '../filter/FilterBuilder.vue';
 import Selection from '../services/selection.js';
+import Search from '../form/inputs/search.vue';
 
 
 // import FilterRule from '../filter/FilterRule.vue';
@@ -69,6 +76,9 @@ export default {
             type: String,
             required: true,
         },
+        showFilters:{
+            type:Boolean,
+        },
         search: {
             type: String,
         },
@@ -101,6 +111,7 @@ export default {
         NativeSelect,
         NativeTable,
         FilterBuilder,
+        Search,
         // FilterRule,
     },
     async created() {
@@ -464,6 +475,11 @@ export default {
     }
 }
 
+.filter-column {
+    padding:1em;
+    background: rgba(#000, 0.1);
+}
+
 
 .footer {
     padding: 1em;

package/src/filter/FilterBuilder.vue

@@ -2,7 +2,7 @@
     <flex-column class="filter-builder">
         <flex-body>
             <div class="filters">
-            <div class="top">
+            <div class="top" v-if="model.filters.length">
                 <div class="summary">
                     Match <native-select v-model="model.operator" :field="operatorField">
                         {{summary}}
@@ -10,7 +10,7 @@
                 </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" />
-            <ux-button @click="addRule()">Add Rule</ux-button>
+            <ux-button @click="addRule()">Add Filter Rule</ux-button>
         </div>
         </flex-body>
     </flex-column>
@@ -119,12 +119,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 .filter-builder {
-    background: rgba(#000, 0.1);
+    
     
 
-    .filters {
-        padding:0.7em;
-    }
 
     .summary {
         font-size: 0.8em;

package/src/form/field.vue

@@ -35,6 +35,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,6 +74,7 @@
 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';
@@ -137,6 +142,7 @@ export default {
         BooleanSwitch: Switch,
         FieldGroup,
         ContentSelect,
+        TypeSelect,
         TimezoneSelect,
         PhoneNumberInput,
         Upload,
@@ -529,6 +535,10 @@ export default {
                 case 'upload':
                 case 'options':
                 case 'button':
+                case 'type-select':
+                    break;
+                case 'password':
+                    return 'textfield';
                     break;
                 case 'phone':
                 case 'phonenumber':

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

@@ -5,7 +5,7 @@
         <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-button icon @click.stop.prevent="remove(item)">
                         <ux-icon icon="fa-times" />
                     </ux-button>
                 </template>
@@ -16,7 +16,7 @@
         <div class="items">
             <item :item="model">
                 <template #actions>
-                    <ux-button icon @click="clear">
+                    <ux-button icon @click.stop.prevent="clear">
                         <ux-icon icon="fa-times" />
                     </ux-button>
                 </template>

package/src/form/inputs/textfield.vue

@@ -6,8 +6,8 @@
             <flex-cell>
                 <div class="ux-text-wrap">
                     <span class="ux-text-prefix" v-if="prefix">{{prefix}}</span>
-                    <input v-if="lazy" class="ux-field-focus ux-text-input-multiple" :placeholder="actualPlaceholder" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" v-model.lazy="model[index]" />
-                    <input v-if="!lazy" class="ux-field-focus ux-text-input-multiple" :placeholder="actualPlaceholder" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" v-model="model[index]" />
+                    <input :type="inputType" v-if="lazy" class="ux-field-focus ux-text-input-multiple" :placeholder="actualPlaceholder" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" v-model.lazy="model[index]" />
+                    <input :type="inputType" v-if="!lazy" class="ux-field-focus ux-text-input-multiple" :placeholder="actualPlaceholder" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" v-model="model[index]" />
                     <span class="ux-text-suffix" v-if="suffix">{{suffix}}</span>
                 </div>
             </flex-cell>
@@ -22,11 +22,12 @@
     <template v-else>
         <div class="ux-text-wrap">
             <span class="ux-text-prefix" v-if="prefix">{{prefix}}</span>
-            <input v-if="lazy" ref="input" class="ux-field-focus ux-text-input-single" :placeholder="actualPlaceholder" @focus="touch" v-model.lazy="model" />
-            <input v-if="!lazy" ref="input" class="ux-field-focus ux-text-input-single" :placeholder="actualPlaceholder" @focus="touch" v-model="model" />
+            <input :type="inputType" v-if="lazy" ref="input" class="ux-field-focus ux-text-input-single" :placeholder="actualPlaceholder" @focus="touch" v-model.lazy="model" />
+            <input :type="inputType" v-if="!lazy" ref="input" class="ux-field-focus ux-text-input-single" :placeholder="actualPlaceholder" @focus="touch" v-model="model" />
             <span class="ux-text-suffix" v-if="suffix">{{suffix}}</span>
         </div>
     </template>
+
 </template>
 <script>
 import InputMixin from './input-mixin';
@@ -42,6 +43,25 @@ export default {
     },
     mixins: [InputMixin],
     computed: {
+        inputType() {
+            switch(this.field.widget) {
+                case 'password':
+                case 'email':
+                    return this.field.widget;
+                break;
+                default:
+
+                    switch(this.field.type) {
+                        case 'email':
+                            return 'email';
+                        break;
+                        default:
+                            return 'text';
+                        break;
+                    }
+                break;
+            }
+        },
         lazy() {
             switch (this.type) {
                 case 'integer':

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-column.vue

@@ -20,6 +20,10 @@ export default {
     	align-items: center;
     	justify-content: center;
     }
+
+    &[shrink] {
+        flex:none;
+    }
 }
 
 

package/src/layout/flex-row.vue

@@ -28,6 +28,10 @@ export default {
     &[wrap] {
         flex-wrap: wrap;
     }
+
+    &[gap] {
+        gap: 0.2em;
+    }
 }
 
 

package/src/modal/ContentModal.vue

@@ -27,7 +27,6 @@
             Loading
         </flex-column>
 
-<pre>{{model}}</pre>
     </flex-column>
 </template>
 <script>

package/src/ui/button.vue

@@ -161,7 +161,8 @@ export default {
 
     &.ux-btn-block {
         display: block;
-        width: 100%;
+        width:100%;
+        box-sizing:border-box;
         text-align: center;
     }
 }