@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/config/src/config/config.jsx

@@ -1,261 +0,0 @@
-import { Arr, Obj, Mix } from "@kizmann/pico-js";
-import { h, resolveComponent } from "vue";
-
-export default {
-
-    name: 'NConfig',
-
-    props: {
-
-        modelValue: {
-            default()
-            {
-                return {};
-            },
-            type: [Object]
-        },
-
-        config: {
-            default()
-            {
-                return {};
-            },
-            type: [Object]
-        },
-
-        scope: {
-            default()
-            {
-                return this;
-            },
-            type: [Object]
-        }
-
-    },
-
-    data()
-    {
-        return {
-            tempValue: this.modelValue
-        };
-    },
-
-    methods: {
-
-        solveAwait(value)
-        {
-            if ( Mix.isEmpty(value) ) {
-                return true;
-            }
-
-            if ( Mix.isString(value) && value.match(/\$\$scope/) ) {
-                return Obj.has({ $$scope: this.scope }, value);
-            }
-
-            if ( Mix.isString(value) && value.match(/\$\$value/) ) {
-                return Obj.has({ $$value: this.tempValue }, value);
-            }
-
-            return false;
-        },
-
-        solveValue(value, ...args)
-        {
-            if ( Mix.isFunction(value) ) {
-                return value.apply(this.scope, [this.tempValue, ...args]);
-            }
-
-            if ( Mix.isString(value) && value.match(/^\$\$scope/) ) {
-                return Obj.get({ $$scope: this.scope }, value);
-            }
-
-            if ( Mix.isString(value) && value.match(/^\$\$value/) ) {
-                return Obj.get({ $$value: this.tempValue }, value);
-            }
-
-            return value;
-        },
-
-        solveEvent(value)
-        {
-            let scope = Obj.assign(this.scope, {
-                $configRefs: this.$refs
-            });
-
-            if ( Mix.isFunction(value) ) {
-                return (...args) => value.apply(scope, args);
-            }
-
-            return value;
-        },
-
-        solveContent(value, ...args)
-        {
-            if ( Mix.isFunction(value) ) {
-                return value.apply(this.scope, [this.$render, this.tempValue, ...args]);
-            }
-
-            return value;
-        },
-
-        prepareValue(veModel)
-        {
-            if ( ! veModel.path ) {
-                return veModel.fallback;
-            }
-
-            if ( ! Obj.has(this.tempValue, veModel.path) ) {
-                this.deepSet(this.tempValue, veModel.path, veModel.fallback);
-            }
-
-            return Obj.get(this.tempValue, veModel.path);
-        },
-
-        inputClosure(veModel, closure = null)
-        {
-            if ( ! veModel.path ) {
-                return () => null;
-            }
-
-            return (value) => {
-
-                if ( closure ) {
-                    closure(value, this.tempValue);
-                }
-
-                this.deepSet(this.tempValue, veModel.path, value);
-            };
-        },
-
-        deepSet(obj, keys, val)
-        {
-            keys = (typeof keys === 'string') ?
-                keys.split('.') : keys;
-
-            let key = keys.shift();
-
-            if ( obj[key] === undefined || obj[key] === null ) {
-                Obj.set(obj, key, {});
-            }
-
-            if ( keys.length === 0 ) {
-                return Obj.set(obj, key, val);
-            }
-
-            return this.deepSet(obj[key], keys, val);
-        }
-
-    },
-
-    watch: {
-
-        modelValue(value)
-        {
-            if ( value !== this.tempValue ) {
-                this.tempValue = value;
-            }
-        }
-
-    },
-
-    renderLayer(source)
-    {
-        if ( ! Mix.isObj(source) ) {
-            return source;
-        }
-
-        return Arr.each(source, (setup, component) => {
-
-            component = component.replace(/:.*?$/, '');
-
-            // Set setup defaults
-            setup = Obj.assign({
-                vIf: true, vShow: true, vAwait: null, class: null, $on: {}, $props: {}, $attrs: {}
-            }, setup);
-
-            if ( ! this.solveAwait(setup.vAwait) ) {
-                return null;
-            }
-
-            if ( ! this.solveValue(setup.vIf) ) {
-                return null;
-            }
-
-            if ( ! this.solveValue(setup.vShow) ) {
-                setup.style = { display: 'none' };
-            }
-
-            // Build default model
-            let veModel = Obj.assign({
-                prop: 'modelValue', fallback: null
-            }, setup.model);
-
-            // Delete model from setup
-            delete setup.model;
-
-            // Normalize props
-            setup.$props = this.solveValue(setup.$props);
-
-            // Normalize class
-            setup.class = this.solveValue(setup.class);
-
-            // Solve props
-            Obj.map(setup.$props, (value) => this.solveValue(value));
-
-            // Normalize attrs
-            setup.$attrs = this.solveValue(setup.$attrs);
-
-            // Solve attrs
-            Obj.map(setup.$attrs, (value) => this.solveValue(value));
-
-            // Solve events
-            Obj.map(setup.$on, (value) => this.solveEvent(value));
-
-            if ( veModel.path ) {
-
-                // Override input event
-                setup['onUpdate:modelValue'] = this.inputClosure(veModel, setup.$on.input);
-
-                // Set prop in value or get fallback
-                setup.$props[veModel.prop] = this.prepareValue(veModel);
-            }
-
-            Obj.assign(setup, setup.$props);
-            delete setup.$props;
-
-            Obj.assign(setup, setup.$attrs);
-            delete setup.$attrs;
-
-            Obj.assign(setup, setup.$on);
-            delete setup.$on;
-
-            let content = setup.content;
-            delete setup.content;
-
-            delete setup.vIf;
-            delete setup.vShow;
-            delete setup.vAwait;
-
-            // Solve content if is functional
-            let slots = this.solveContent(content, setup);
-
-            let domtypes = [
-                'div', 'span', 'a'
-            ];
-
-            let resolved = component;
-
-            if ( ! Arr.has(domtypes, resolved) ) {
-                resolved = resolveComponent(component);
-            }
-
-            return h(resolved, setup, this.ctor('renderLayer')(slots));
-        });
-    },
-
-    render()
-    {
-        return this.ctor('renderLayer')(this.config)[0];
-    }
-
-}

package/src/config/src/reference-panel/reference-panel.jsx

@@ -1,196 +0,0 @@
-import { Arr, Obj, Mix } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NReferencePanel',
-
-    props: {
-
-        modelValue: {
-            default()
-            {
-                return "";
-            },
-            type: [String]
-        },
-
-        model: {
-            default()
-            {
-                return {};
-            },
-            type: [Object]
-        },
-
-        scope: {
-            default()
-            {
-                return {};
-            },
-            type: [Object]
-        },
-
-    },
-
-    data()
-    {
-        return {
-            expanded: [], selected: null, modelTree: this.buildTree(this.model, '$model'), scopeTree: this.buildTree(this.scope, '$scope')
-        };
-    },
-
-    methods: {
-
-        buildTree(value, path = '')
-        {
-            let result = {};
-
-            if ( ! Mix.isObj(value) && ! Obj.get(value, '__v_skip') ) {
-                return result;
-            }
-
-            for(var key in value) {
-
-                let [ref, val] = [
-                    `${path}.${key}`, value[key]
-                ];
-
-                if ( Mix.isObj(val) ) {
-                    val = this.buildTree(val, ref);
-                }
-
-                let type = typeof val;
-
-                if ( Mix.isArray(val) ) {
-                    type = 'array';
-                }
-
-                result[key] = {
-                    path: ref, value: val, type: type
-                };
-
-            }
-
-            return result;
-        },
-
-        submitItem(value)
-        {
-            this.$emit('update:modelValue', value.path);
-        },
-
-        selectItem(value)
-        {
-            this.selected = value;
-        },
-
-        expandItem(value)
-        {
-            if ( value.type === 'object' ) {
-                Arr.toggle(this.expanded, value.path);
-            }
-        }
-
-    },
-
-    renderLeaf(value, key)
-    {
-        let classList = [
-            'n-reference-panel__item',
-            'n-reference-panel__item--' + value.type,
-        ];
-
-        if ( Obj.get(this.selected, 'path') === value.path) {
-            classList.push('is-selected');
-        }
-
-        if ( value.type === 'object' ) {
-            classList.push('has-childs');
-        }
-
-        if ( Arr.has(this.expanded, value.path) ) {
-            classList.push('is-expanded');
-        }
-
-        return (
-            <div class={classList} onDblclick={() => this.submitItem(value)}>
-                <div class="n-reference-panel__expand" onClick={() => this.expandItem(value)}>
-                    <i class="fa fa-angle-right"></i>
-                </div>
-                <div class="n-reference-panel__name" onClick={() => this.selectItem(value)}>
-                    {key}
-                </div>
-                <div class="n-reference-panel__type" onClick={() => this.selectItem(value)}>
-                    {value.type}
-                </div>
-                <div class="n-reference-panel__pick" onClick={() => this.submitItem(value)}>
-                    <i class="fa fa-expand"></i>
-                </div>
-            </div>
-        );
-    },
-
-    renderTree(value, key)
-    {
-        let childItems = Arr.each(value.value, (value, key) => {
-            return this.ctor('renderItem')(value, key);
-        });
-
-        let childHtml = (
-            <div class="n-reference-panel__childs">
-                {childItems}
-            </div>
-        );
-
-        if ( ! Arr.has(this.expanded, value.path) ) {
-            childHtml = null;
-        }
-
-        return [this.ctor('renderLeaf')(value, key), childHtml];
-    },
-
-    renderItem(value, key)
-    {
-        if ( value.type === 'object' ) {
-            return this.ctor('renderTree')(value, key);
-        }
-
-        return this.ctor('renderLeaf')(value, key);
-    },
-
-    renderModel()
-    {
-        let modelHtml = Arr.each(this.modelTree, (value, key) => {
-            return this.ctor('renderItem')(value, key);
-        });
-
-        return (
-            <div class="n-reference-panel__model">
-                {modelHtml}
-            </div>
-        );
-    },
-
-    renderScope()
-    {
-        let scopeHtml = Arr.each(this.scopeTree, (value, key) => {
-            return this.ctor('renderItem')(value, key);
-        });
-
-        return (
-            <div class="n-reference-panel__scope">
-                {scopeHtml}
-            </div>
-        );
-    },
-
-    render()
-    {
-        return (
-            <div class="n-reference-panel">
-                {[this.ctor('renderModel')(), this.ctor('renderScope')()]}
-            </div>
-        );
-    }
-
-}

package/src/config/src/reference-panel/reference-panel.scss

@@ -1,197 +0,0 @@
-@use "sass:color";
-@use "../../../root/vars";
-
-.n-reference-panel {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-}
-
-.n-reference-panel:not(.in-modal) {
-    border: 1px solid $color-gray-10;
-}
-
-.n-reference-panel.in-modal {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.n-reference-panel:after {
-    content: '\00a0';
-    position: absolute;
-    top: 0;
-    left: 50%;
-    width: 6px;
-    height: 100%;
-    background: $color-gray-05;
-    border-left: 1px solid $color-gray-10;
-    border-right: 1px solid $color-gray-10;
-    transform: translateX(-50%);
-}
-
-.n-reference-panel__model,
-.n-reference-panel__scope {
-    position: relative;
-    flex: 0 0 auto;
-    width: 50%;
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    padding: 8px;
-}
-
-.n-reference-panel__model:before,
-.n-reference-panel__scope:before {
-    position: absolute;
-    top: 10px;
-    display: inline-block;
-    font-size: 13px;
-    font-family: monospace;
-    color: rgba($color-black, 0.4);
-}
-
-.n-reference-panel__model {
-    padding-right: 11px;
-}
-
-.n-reference-panel__model:before {
-    content: '$model';
-    right: 13px;
-}
-
-.n-reference-panel__scope {
-    padding-left: 11px;
-}
-
-.n-reference-panel__scope:before {
-    content: '$scope';
-    right: 10px;
-}
-
-.n-reference-panel__item {
-    cursor: default;
-    user-select: none;
-    flex: 0 0 auto;
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 5px 8px;
-    font-family: monospace;
-    border-radius: 3px;
-}
-
-.n-reference-panel__item.is-selected {
-    background: rgba($color-black, 0.1);
-}
-
-.n-reference-panel__item--function.is-selected {
-    background: rgba($color-success, 0.1);
-}
-
-.n-reference-panel__item--string.is-selected,
-.n-reference-panel__item--boolean.is-selected,
-.n-reference-panel__item--number.is-selected {
-    background: rgba($color-warning, 0.1);
-}
-
-.n-reference-panel__item--object.is-selected {
-    background: rgba($color-info, 0.1);
-}
-
-.n-reference-panel__item--array.is-selected {
-    background: rgba($color-danger, 0.1);
-}
-
-.n-reference-panel__expand,
-.n-reference-panel__pick {
-    cursor: pointer;
-    display: inline-block;
-    text-align: center;
-    line-height: 16px;
-    width: 16px;
-    height: 16px;
-}
-
-.n-reference-panel__expand {
-    margin-right: 5px;
-}
-
-.n-reference-panel__item.is-expanded  .n-reference-panel__expand {
-    transform: rotate(90deg);
-}
-
-.n-reference-panel__item:not(.has-childs) .n-reference-panel__expand {
-    cursor: not-allowed;
-}
-
-.n-reference-panel__pick {
-    margin-left: 5px;
-}
-
-.n-reference-panel__expand i,
-.n-reference-panel__pick i {
-    font-size: 12px;
-    color: rgba($color-black, 0.4);
-}
-
-.n-reference-panel__item:not(.has-childs) .n-reference-panel__expand i {
-    opacity: 0.3;
-}
-
-.n-reference-panel__name {
-    margin-right: 5px;
-    font-size: 13px;
-}
-
-.n-reference-panel__type {
-    display: inline-block;
-    padding: 2px 6px 1px;
-    background: $color-gray-10;
-    border-radius: 3px;
-    font-size: 11px;
-    font-family: monospace;
-}
-
-.n-reference-panel__item--function .n-reference-panel__type {
-    color: rgba(color.adjust($color-success, $lightness: -20%), 0.7);
-    background: rgba($color-success, 0.2);
-}
-
-.n-reference-panel__item--string .n-reference-panel__type,
-.n-reference-panel__item--boolean .n-reference-panel__type,
-.n-reference-panel__item--number .n-reference-panel__type {
-    color: rgba(color.adjust($color-warning, $lightness: -20%), 0.7);
-    background: rgba($color-warning, 0.2);
-}
-
-.n-reference-panel__item--array .n-reference-panel__type {
-    color: rgba(color.adjust($color-danger, $lightness: -20%), 0.7);
-    background: rgba($color-danger, 0.2);
-}
-
-.n-reference-panel__item--object .n-reference-panel__type {
-    color: rgba(color.adjust($color-info, $lightness: -30%), 0.7);
-    background: rgba($color-info, 0.2);
-}
-
-.n-reference-panel__childs {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding-left: 19px;
-}
-
-.n-reference-panel__childs:before {
-    content: '\00a0';
-    position: absolute;
-    top: 3px;
-    left: 15px;
-    display: block;
-    width: 1px;
-    height: calc(100% - 6px);
-    background: $color-gray-05;
-}