@qikdev/vue-ui 0.1.2 → 0.1.8

package/src/filter/FilterRule.vue

@@ -1,259 +0,0 @@
-<template>
-    <div class="filter-rule">
-        <div class="top">
-            <flex-row>
-                <flex-cell>
-                    <div class="summary">
-                        Match <native-select v-model="model.operator" :field="operatorField">
-                            {{summary}}
-                        </native-select> of the following conditions
-                    </div>
-                </flex-cell>
-                <flex-cell @click="$emit('remove')" shrink v-if="enableRemove">
-                    <ux-button size="sm" icon>
-                        <ux-icon icon="fa-trash" />
-                    </ux-button>
-                </flex-cell>
-            </flex-row>
-        </div>
-        <flex-row :key="`condition-${index}`" v-for="(filter, index) in model.filters">
-            <flex-cell class="operator-cell" :class="[model.operator, {last:index == model.filters.length}]" vcenter shrink v-if="index != 0">
-                <span class="line" />
-                <div class="operator">{{model.operator}}</div>
-            </flex-cell>
-            <flex-cell>
-                <filter-condition :enableRemove="model.filters.length > 1" :fields="fields" @remove="removeCondition(index)" v-model="model.filters[index]" />
-            </flex-cell>
-        </flex-row>
-        <ux-button @click="addCondition">Add Condition</ux-button>
-    </div>
-</template>
-<script>
-import NativeSelect from '../form/inputs/select.vue';
-import FilterCondition from './FilterCondition.vue';
-
-import _debounce from 'lodash/debounce';
-
-export default {
-    props: {
-        enableRemove: {
-            type: Boolean,
-        },
-        definition: {
-            type: Object,
-            default () {
-                return {}
-            }
-        },
-        modelValue: {
-            type: Object,
-            default () {
-                return {
-                    operator: 'and',
-                    filters: [],
-                }
-            }
-        },
-    },
-    methods: {
-        addCondition() {
-            this.model.filters.push({
-
-            });
-        },
-        removeCondition(index) {
-            console.log('remove index', index)
-            this.model.filters.splice(index, 1);
-        },
-    },
-    data() {
-
-        if (!this.modelValue.operator) {
-            this.modelValue.operator = 'and';
-        }
-
-        if (!this.modelValue.filters) {
-            this.modelValue.filters = [];
-        }
-
-
-        return {
-            model: JSON.parse(JSON.stringify(this.modelValue)),
-        }
-    },
-
-    watch: {
-        modelValue(m) {
-            if (m != this.model) {
-                this.model = m; //JSON.parse(JSON.stringify(m));
-            }
-        },
-        model: {
-            handler: _debounce(function(v) {
-                this.$emit('update:modelValue', v);
-            }, 200),
-            deep: true,
-        }
-    },
-    computed: {
-        summary() {
-            switch (this.model.operator) {
-                case 'or':
-                    return `any`;
-                    break;
-                case 'nor':
-                    return `none`;
-                    break;
-                default:
-                    return `all`;
-                    break;
-            }
-        },
-
-        
-        fields() {
-            var allFields = [...this.definition.fields];
-            var definedFields = this.definition.definedFields || [];
-            if (definedFields.length) {
-                var customFields = {
-                    title: `${this.definition.title}`,
-                    minimum: 1,
-                    maximum: 1,
-                    key: 'data',
-                    asObject: true,
-                    type: 'group',
-                    fields: definedFields,
-                }
-
-                allFields.push(customFields);
-            }
-
-            var mapped = this.$qik.utils.mapFields(allFields);
-            return mapped;
-        },
-        operatorField() {
-            return {
-                minimum: 1,
-                maximum: 1,
-                options: [{
-                        title: 'All',
-                        value: 'and',
-
-                    },
-                    {
-                        title: 'Any',
-                        value: 'or',
-
-                    },
-                    {
-                        title: 'None',
-                        value: 'nor',
-
-                    }
-                ],
-            }
-        },
-    },
-
-
-    components: {
-        FilterCondition,
-        NativeSelect,
-    },
-}
-</script>
-<style lang="scss">
-.filter-rule {
-    padding: 0.5em;
-    background: #fff;
-    border: 1px solid rgba(#000, 0.1);
-    border-radius: 0.5em;
-    box-shadow: 0 0.1em 0.5em rgba(#000, 0.05);
-    margin-bottom: 0.5em;
-
-
-    .operator-cell {
-        position:relative;
-
-        &.and {
-            .line {
-                 background: green;
-            }
-            .operator {
-                background: green;
-                color: #fff;
-            }
-        }
-
-        &.or {
-            .line {
-                background: orange;
-            }
-            .operator {
-                background: orange;
-                color: #fff;
-            }
-        }
-
-        &.nor {
-            .line {
-                 background: #000;
-            }
-            .operator {
-                background: #000;
-                color: #fff;
-            }
-        }
-
-        &.last {
-            .line {
-                background: #ff0066;
-            }
-        }
-    }
-
-    .line {
-        position: absolute;
-        width: 0.1em;
-        display: block;
-        height: 100%;
-        left: 0.5em;
-        top: 0;
-        bottom: 0;
-    }
-
-    .operator {
-        border-radius: 50%;
-        position: relative;
-        width: 3em;
-        height: 0;
-        overflow: hidden;
-        padding: 0 0 3em;
-        text-align: center;
-        line-height: 3em;
-        background: #111;
-        color: #fff;
-        font-size: 0.4em;
-        text-transform: uppercase;
-        font-weight: 600;
-        display: block;
-    }
-
-    .summary {
-        font-size: 0.8em;
-        opacity: 0.5;
-
-        .native-select {
-            display: inline-block;
-            border: 1px solid transparent;
-            border-radius: 0.3em;
-            padding: 0.2em;
-
-            &:hover {
-                background: #fff;
-                border-color: $primary;
-            }
-        }
-    }
-}
-</style>

package/src/form/expressions/index.js

@@ -1,83 +0,0 @@
-import { parse as exprParse } from "expression-eval";
-import { eval as exprEval } from "expression-eval";
-
-////////////////////////////
-
-
-const service = {}
-
-////////////////////////////
-
-service.evaluateExpression = function(expression, context) {
-
-    //////////////////////////////
-
-    //Its a direct function so just run it
-    if (typeof expression == 'function') {
-        return expression(context);
-    }
-
-    //////////////////////////////
-
-    const contextDefaults = {
-    	Math:Math,
-    	String:String,
-    	Array:Array,
-    	Date:Date,
-    	Boolean:Boolean,
-    	parseInt:parseInt,
-    	parseFloat:parseFloat,
-    	create(Class, ...rest) {
-    		return new Class(...rest);
-    	},
-    }
-
-    
-
-    context = Object.assign({}, contextDefaults, context);
-
- 
-    //////////////////////////////
-
-    //evaluate the string input
-    var ast;
-    var result;
-
-    try {
-        ast = exprParse(expression);
-        result = exprEval(ast, context);
-    } catch (err) {
-        // console.log('error evaluating expression', err);
-    } finally {
-        return result;
-    }
-
-}
-
-////////////////////////////
-
-// function testExpression(expression, context) {
-//     service.evaluateExpression(expression, context).then(function(result) {
-//         console.log('Expression', expression, context, result)
-//     })
-// }
-
-
-// var testModel = {
-//     data: {
-//         firstName: 'Cade',
-//         lastName: 'Embery',
-//         age: 33,
-//         nested: {
-//             deep: 10,
-//         }
-//     }
-// }
-
-// testExpression(`data.firstName == 'Cade'`, testModel)
-// testExpression(`data.nested.deep * data.age / 2.3`, testModel)
-
-
-////////////////////////////
-
-export default service;