@kizmann/nano-ui 0.9.2 → 0.9.4

package/src/config/src/builder/prototypes/radio/n-radio-group.js

@@ -0,0 +1,11 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NRadioGroup'] = Locale.trans('NRadioGroup');
+
+global.NanoBuilderIndexies['NRadioGroup'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NRadioGroup']['props'] = {
+    //
+};

package/src/config/src/builder/prototypes/radio/n-radio.js

@@ -0,0 +1,11 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NRadio'] = Locale.trans('NRadio');
+
+global.NanoBuilderIndexies['NRadio'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NRadio']['props'] = {
+    //
+};

package/src/config/src/builder/prototypes/rating/n-rating.js

@@ -0,0 +1,11 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NRating'] = Locale.trans('NRating');
+
+global.NanoBuilderIndexies['NRating'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NRating']['props'] = {
+    //
+};

package/src/config/src/builder/prototypes/select/n-select.js

@@ -0,0 +1,11 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NSelect'] = Locale.trans('NSelect');
+
+global.NanoBuilderIndexies['NSelect'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NSelect']['props'] = {
+    //
+};

package/src/config/src/builder/prototypes/slider/n-slider.js

@@ -0,0 +1,11 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NSlider'] = Locale.trans('NSlider');
+
+global.NanoBuilderIndexies['NSlider'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NSlider']['props'] = {
+    //
+};

package/src/config/src/builder/prototypes/switch/n-switch.js

@@ -0,0 +1,31 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NSwitch'] = Locale.trans('NSwitch');
+
+global.NanoBuilderIndexies['NSwitch'] = {
+    childs: true, props: {}
+};
+
+global.NanoBuilderIndexies['NSwitch']['props'] = {
+    modelValue: {
+        for: ['binds', 'props'], type: 'Any'
+    },
+    onValue: {
+        for: ['binds', 'props'], type: 'Any'
+    },
+    offValue: {
+        for: ['binds', 'props'], type: 'Any'
+    },
+    onType: {
+        for: ['binds', 'props'], type: 'String', options: global.NanoPrototypeTypes
+    },
+    offType: {
+        for: ['binds', 'props'], type: 'String', options: global.NanoPrototypeTypes
+    },
+    size: {
+        for: ['binds', 'props'], type: 'String', options: global.NanoPrototypeSizes
+    },
+    disabled: {
+        for: ['binds', 'props'], type: 'Boolean', options: global.NanoPrototypeBools
+    },
+};

package/src/config/src/builder/prototypes/table/n-table-column.js

@@ -0,0 +1,11 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NTableColumn'] = Locale.trans('NTableColumn');
+
+global.NanoBuilderIndexies['NTableColumn'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NTableColumn']['props'] = {
+    //
+};

package/src/config/src/builder/prototypes/table/n-table.js

@@ -0,0 +1,11 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NTable'] = Locale.trans('NTable');
+
+global.NanoBuilderIndexies['NTable'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NTable']['props'] = {
+    //
+};

package/src/config/src/builder/prototypes/tabs/n-tabs-item.js

@@ -0,0 +1,11 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NTabsItem'] = Locale.trans('NTabsItem');
+
+global.NanoBuilderIndexies['NTabsItem'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NTabsItem']['props'] = {
+    //
+};

package/src/config/src/builder/prototypes/tabs/n-tabs.js

@@ -0,0 +1,11 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NTabs'] = Locale.trans('NTabs');
+
+global.NanoBuilderIndexies['NTabs'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NTabs']['props'] = {
+    //
+};

package/src/config/src/builder/prototypes/tags/n-tags-item.js

@@ -0,0 +1,11 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NTagsItem'] = Locale.trans('NTagsItem');
+
+global.NanoBuilderIndexies['NTagsItem'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NTagsItem']['props'] = {
+    //
+};

package/src/config/src/builder/prototypes/tags/n-tags.js

@@ -0,0 +1,11 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NTags'] = Locale.trans('NTags');
+
+global.NanoBuilderIndexies['NTags'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NTags']['props'] = {
+    //
+};

package/src/config/src/builder/prototypes/textarea/n-textarea.js

@@ -0,0 +1,11 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NButton'] = Locale.trans('NButton');
+
+global.NanoBuilderIndexies['NButton'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NButton']['props'] = {
+    //
+};

package/src/config/src/builder/prototypes/timepicker/n-timepicker.js

@@ -0,0 +1,11 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NTimepicker'] = Locale.trans('NTimepicker');
+
+global.NanoBuilderIndexies['NTimepicker'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NTimepicker']['props'] = {
+    //
+};

package/src/config/src/builder/prototypes/transfer/n-transfer.js

@@ -0,0 +1,11 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NTransfer'] = Locale.trans('NTransfer');
+
+global.NanoBuilderIndexies['NTransfer'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NTransfer']['props'] = {
+    //
+};

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

@@ -0,0 +1,196 @@
+import { Arr, Obj, Any } 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 ( ! Any.isPlain(value) && ! Obj.get(value, '__v_skip') ) {
+                return result;
+            }
+
+            for(var key in value) {
+
+                let [ref, val] = [
+                    `${path}.${key}`, value[key]
+                ];
+
+                if ( Any.isPlain(val) ) {
+                    val = this.buildTree(val, ref);
+                }
+
+                let type = typeof val;
+
+                if ( Any.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

@@ -0,0 +1,194 @@
+.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(darken($color-success, 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(darken($color-warning, 20%), 0.7);
+    background: rgba($color-warning, 0.2);
+}
+
+.n-reference-panel__item--array .n-reference-panel__type {
+    color: rgba(darken($color-danger, 20%), 0.7);
+    background: rgba($color-danger, 0.2);
+}
+
+.n-reference-panel__item--object .n-reference-panel__type {
+    color: rgba(darken($color-info, 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;
+}