@kizmann/nano-ui 0.9.3 → 0.9.4

package/src/config/src/builder/builder.scss

@@ -0,0 +1,272 @@
+.n-builder {
+    overflow: hidden;
+    border: 1px solid rgba($color-black, 0.1);
+    background: $color-white;
+    border-radius: $md-radius;
+}
+
+.n-builder, .n-builder__element {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.n-builder__tools:after,
+.n-builder__element:not(:last-child):after {
+    z-index: 110;
+    content: '\00a0';
+    position: absolute;
+    left: 0;
+    bottom: -1px;
+    display: block;
+    width: 100%;
+    height: 0;
+    border-bottom: 1px solid rgba($color-black, 0.05);
+}
+
+.n-builder__frame {
+    background: $color-gray-05;
+}
+
+.n-builder__element > .n-builder__frame {
+    background: mix($color-gray-05, map-get($colors-tags, '0'), 90%);
+}
+
+.n-builder__element > .n-builder__frame .n-builder__element {
+    border-left: 2px solid map-get($colors-tags, '0');
+    border-right: 2px solid map-get($colors-tags, '0');
+}
+
+.n-builder__element .n-builder__element > .n-builder__frame {
+    background: mix($color-gray-05, map-get($colors-tags, '1'), 90%);
+}
+
+.n-builder__element .n-builder__element > .n-builder__frame .n-builder__element {
+    border-left: 2px solid map-get($colors-tags, '1');
+    border-right: 2px solid map-get($colors-tags, '1');
+}
+
+.n-builder__element .n-builder__element .n-builder__element > .n-builder__frame {
+    background: mix($color-gray-05, map-get($colors-tags, '2'), 90%);
+}
+
+.n-builder__element .n-builder__element .n-builder__element > .n-builder__frame .n-builder__element {
+    border-left: 2px solid map-get($colors-tags, '2');
+    border-right: 2px solid map-get($colors-tags, '2');
+}
+
+.n-builder__element .n-builder__element .n-builder__element .n-builder__element > .n-builder__frame {
+    background: mix($color-gray-05, map-get($colors-tags, '3'), 90%);
+}
+
+.n-builder__element .n-builder__element .n-builder__element .n-builder__element > .n-builder__frame .n-builder__element {
+    border-left: 2px solid map-get($colors-tags, '3');
+    border-right: 2px solid map-get($colors-tags, '3');
+}
+
+div:not(.n-builder__body) > .n-builder__frame {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    margin: 15px;
+    border-radius: $md-radius;
+    box-shadow: 0 0 8px rgba($color-shadow, 0.15), inset 0 0 1px 1px rgba($color-shadow, 0.1);
+}
+
+
+.n-builder__head {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 20px;
+    border-top: 1px solid rgba($color-black, 0.1);
+}
+
+.n-builder__head > div:not(:first-child) {
+    margin-left: 20px;
+}
+
+.n-builder__tools {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    background: $color-white;
+    padding: 0 12px;
+}
+
+.n-builder__tools > div:not(:first-child) {
+    margin-left: 12px;
+}
+
+.n-builder__add {
+    margin-left: auto;
+}
+
+.n-builder__remove {
+    margin-left: 20px;
+}
+
+.n-builder__props {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 14px 27px 14px 17px;
+    background: $color-white;
+}
+
+.n-builder__props:not(:last-child) {
+    //border-bottom: 1px solid rgba($color-black, 0.1);
+}
+
+.n-builder__props > div {
+    flex: 1 1 auto;
+    margin-left: 10px;
+}
+
+.n-builder__props .n-builder__element-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.n-builder__props .n-builder__element-type,
+.n-builder__props .n-builder__element-alias {
+    width: calc(50% - 10px);
+}
+
+.n-builder__props .n-builder__element-prop {
+    margin-top: -10px;
+    margin-bottom: 20px;
+}
+
+.n-builder__props .n-builder__element-list,
+.n-builder__props .n-builder__element-prop {
+    flex: 0 0 auto;
+    width: 100%;
+}
+
+.n-builder__props .n-form-item__label {
+    font-size: 12px;
+}
+.n-builder__collapse,
+.n-builder__add,
+.n-builder__move,
+.n-builder__remove {
+    flex: 0 0 auto !important;
+    padding: 12px 0;
+}
+
+.n-builder__collapse > a,
+.n-builder__add > a,
+.n-builder__remove > a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    text-decoration: none;
+    color: $color-gray-40;
+    border-radius: $md-radius;
+    background: $color-gray-05;
+}
+
+.n-builder__move > a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 18px;
+    text-decoration: none;
+    color: $color-gray-40;
+    border-radius: $md-radius;
+    background: $color-gray-05;
+}
+
+.n-builder__move > a:not(:last-child) {
+    margin-bottom: 2px;
+}
+
+.n-builder__collapse > a:hover,
+.n-builder__add > a:hover,
+.n-builder__remove > a:hover,
+.n-builder__move > a:hover {
+    background: $color-gray-10;
+}
+
+.n-builder__element.is-open .n-builder__collapse i {
+    //transform: rotate(45deg);
+}
+
+.n-builder__name {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    font-size: 16px;
+    color: $color-primary;
+}
+
+.n-builder__name span {
+    margin-left: 5px;
+    font-size: 14px;
+    color: $color-gray-40;
+}
+
+.n-builder__output {
+    padding: 20px;
+    color: mix($color-primary, $color-white, 50%);
+    background: $color-black;
+    border-radius: $md-radius;
+}
+
+.n-builder_prop {
+    display: flex;
+    flex-direction: row;
+}
+
+.n-builder_prop {
+    margin-bottom: 10px;
+}
+
+.n-builder_prop > div {
+    flex: 1 1 auto;
+}
+
+.n-builder_prop > div:not(:last-child) {
+    margin-right: 10px;
+}
+
+.n-builder_prop-text {
+    flex: 0 0 auto;
+    width: 100%;
+    font-size: 13px;
+    color: $color-gray-50;
+    font-style: italic;
+}
+
+.n-builder_prop-value .n-input input,
+.n-builder_prop-fallback .n-input input {
+    font-family: 'Fire Code', monospace;
+}
+
+.n-builder_prop-key,
+.n-builder_prop-value,
+.n-builder_prop-fallback {
+    width: 33.332%;
+}
+
+.n-builder_prop-type {
+    flex: 0 0 auto !important;
+    width: 120px;
+}
+
+.n-builder_prop-func {
+    flex: 0 0 auto !important;
+    width: 100px;
+}
+
+.n-builder_prop-button {
+    flex: 0 0 auto !important;
+}
+

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

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

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

@@ -0,0 +1,37 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NButton'] = Locale.trans('NButton');
+
+global.NanoBuilderIndexies['NButton'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NButton']['props'] = {
+    size: {
+        for: ['binds', 'props'], type: 'String', options: global.NanoPrototypeSizes
+    },
+    type: {
+        for: ['binds', 'props'], type: 'String', options: global.NanoPrototypeTypes
+    },
+    link: {
+        for: ['binds', 'props'], type: 'Boolean', options: global.NanoPrototypeBools
+    },
+    square: {
+        for: ['binds', 'props'], type: 'Boolean', options: global.NanoPrototypeBools
+    },
+    disabled: {
+        for: ['binds', 'props'], type: 'Boolean', options: global.NanoPrototypeBools
+    },
+    icon: {
+        for: ['binds', 'props'], type: 'String'
+    },
+    iconPosition: {
+        for: ['binds', 'props'], type: 'String', options: ['before', 'after']
+    },
+    nativeType: {
+        for: ['binds', 'props'], type: 'String', options: ['button', 'a', 'div']
+    },
+    click: {
+        for: ['on'], type: 'String'
+    }
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NFormGroup'] = Locale.trans('NFormGroup');
+
+global.NanoBuilderIndexies['NFormGroup'] = {
+    childs: true, props: {}
+};
+
+global.NanoBuilderIndexies['NFormGroup']['props'] = {
+    label: {
+        for: ['binds', 'props'], type: 'String'
+    }
+};

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

@@ -0,0 +1,13 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NFormItem'] = Locale.trans('NFormItem');
+
+global.NanoBuilderIndexies['NFormItem'] = {
+    childs: true, props: {}
+};
+
+global.NanoBuilderIndexies['NFormItem']['props'] = {
+    label: {
+        for: ['binds', 'props'], type: 'String'
+    }
+};

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

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

package/src/config/src/builder/prototypes/html/div.js

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

package/src/config/src/builder/prototypes/html/nano.js

@@ -0,0 +1,11 @@
+global.NanoPrototypeSizes = [
+    'xs', 'sm', 'md', 'lg'
+];
+
+global.NanoPrototypeTypes = [
+    'primary', 'secondary', 'success', 'warning', 'danger', 'info'
+];
+
+global.NanoPrototypeBools = [
+    'true', 'false'
+];

package/src/config/src/builder/prototypes/html/span.js

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

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NInput'] = Locale.trans('NInput');
+
+global.NanoBuilderIndexies['NInput'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NInput']['props'] = {
+    modelValue: {
+        for: ['binds', 'props'], default: null, type: 'String'
+    },
+    size: {
+        for: ['binds', 'props'], default: 'md', type: 'String', options: global.NanoPrototypeSizes
+    },
+    type: {
+        for: ['binds', 'props'], default: 'primary', type: 'String', options: global.NanoPrototypeTypes
+    },
+    disabled: {
+        for: ['binds', 'props'], default: false, type: 'Boolean', options: global.NanoPrototypeBools
+    },
+    placeholder: {
+        for: ['binds', 'props'], default: '', type: 'String'
+    },
+    nativeType: {
+        for: ['binds', 'props'], default: 'text', type: 'String', options: ['text', 'password', 'email']
+    },
+    icon: {
+        for: ['binds', 'props'], default: '', type: 'String'
+    },
+    iconPosition: {
+        for: ['binds', 'props'], default: 'before', type: 'String', options: ['before', 'after']
+    },
+    iconDisabled: {
+        for: ['binds', 'props'], default: null, type: 'Boolean', options: global.NanoPrototypeBools
+    },
+    iconClick: {
+        for: ['on'], type: 'String'
+    },
+};

package/src/config/src/builder/prototypes/input-number/n-input-number.js

@@ -0,0 +1,49 @@
+import { Locale } from "@kizmann/pico-js";
+
+global.NanoBuilderTypes['NInputNumber'] = Locale.trans('NInputNumber');
+
+global.NanoBuilderIndexies['NInputNumber'] = {
+    childs: false, props: {}
+};
+
+global.NanoBuilderIndexies['NInputNumber']['props'] = {
+    modelValue: {
+        for: ['binds', 'props'], default: null, type: 'Number'
+    },
+    clearValue: {
+        for: ['binds', 'props'], default: null, type: 'Number'
+    },
+    clearable: {
+        for: ['binds', 'props'], default: false, type: 'Boolean', options: global.NanoPrototypeBools
+    },
+    min: {
+        for: ['binds', 'props'], default: 0, type: 'Number'
+    },
+    max: {
+        for: ['binds', 'props'], default: Number.MAX_VALUE, type: 'Number'
+    },
+    stepSize: {
+        for: ['binds', 'props'], default: 1, type: 'Number'
+    },
+    precision: {
+        for: ['binds', 'props'], default: 0, type: 'Number'
+    },
+    size: {
+        for: ['binds', 'props'], default: 'md', type: 'String', options: global.NanoPrototypeSizes
+    },
+    type: {
+        for: ['binds', 'props'], default: 'primary', type: 'String', options: global.NanoPrototypeTypes
+    },
+    disabled: {
+        for: ['binds', 'props'], default: false, type: 'Boolean', options: global.NanoPrototypeBools
+    },
+    placeholder: {
+        for: ['binds', 'props'], default: '', type: 'String'
+    },
+    format: {
+        for: ['binds', 'props'], default: ':count', type: 'String'
+    },
+    decimals: {
+        for: ['binds', 'props'], default: '.', type: 'String'
+    },
+};

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

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

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

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

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

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

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

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

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

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