@kizmann/nano-ui 0.9.4 → 0.9.5

package/src/config/src/builder/builder.js

@@ -173,16 +173,32 @@ export default {
                 ...Obj.except(child, ['content']), content: {}, builder: this.buildProps(child),
             });
 
-            Obj.each(child.content || {}, (value, key) => {
+            if ( Any.isArray(child.content) ) {
+                child.content = Arr.first(child.content);
+            }
 
-                if ( ! key.match(':') ) {
-                    key += ':' + UUID();
-                }
+            if ( ! Any.isPlain(child.content) && ! Any.isString(child.content) ) {
+                child.content = {};
+            }
+
+            result.builder["null"] = {
+                type: typeof child.content
+            }
+
+            if (Any.isPlain(child.content)) {
+                Obj.each(child.content || {}, (value, key) => {
 
-                result['content'][key] = Obj.assign(this.normalizeChild(value), {
-                    order: (Any.vals(result['content']).length + 1) * 100
+                    if ( ! key.match(':') ) {
+                        key += ':' + UUID();
+                    }
+
+                    result['content'][key] = Obj.assign(this.normalizeChild(value), {
+                        order: (Any.vals(result['content']).length + 1) * 100
+                    });
                 });
-            });
+            } else {
+                result.content = child.content;
+            }
 
             return result;
         },
@@ -239,7 +255,6 @@ export default {
 
             if ( prop.code === 'number' ) {
                 realvalue = Any.number(prop.value, 0);
-                console.log('num', prop.value, realvalue)
             }
 
             if ( prop.code === 'object' ) {
@@ -289,6 +304,23 @@ export default {
             });
         },
 
+        changeType(key, type)
+        {
+            let value = Obj.get(this, key, {});
+
+            let original = Obj.get(value, 'builder.null.type');
+
+            if ( type === 'object' ) {
+                value.content = {};
+            }
+
+            if ( type === 'string' ) {
+                value.content = '';
+            }
+
+            Obj.set(value, 'builder.null.type', typeof value.content);
+        },
+
         applyProps(key = null, value = {})
         {
             if ( ! Any.isEmpty(key) ) {
@@ -584,6 +616,10 @@ export default {
 
     renderProp(el, sub, key)
     {
+        if ( sub === "null" ) {
+            return null;
+        }
+
         let group = key.replace(/^.*?([^\.]+):([^\.]+)$/, '$1')
         let value = Obj.get(this.$data, `${key}.builder.${sub}`, {});
 
@@ -592,20 +628,17 @@ export default {
         props = Obj.assign({}, global.NanoBuilderProps, props);
 
         Obj.each(props, (prop, index) => {
-            console.log(prop.for, index, value.type)
             if ( ! Any.isEmpty(prop.for) && ! Arr.has(prop.for, value.type) ) {
                 props = Obj.unset(props, index);
             }
         });
 
-        console.log(props);
-
         let typeProps = {
             size: 'sm', options: global.NanoBuilderPropType
         };
 
         typeProps['onUpdate:modelValue'] = () => {
-            this.applyProps(key);
+            this.$nextTick(() => this.applyProps(key));
         };
 
         let keyProps = {
@@ -694,8 +727,20 @@ export default {
             modelValue: key.replace(/^.*?([^\.]+):([^\.]+)$/, '$2'),
         };
 
-        aliasProps['onBlur'] = (e) => {
-            this.changeAlias(key, e.target.value);
+        aliasProps['onUpdate:modelValue'] = (value) => {
+            this.changeAlias(key, value);
+        };
+
+        let plainProps = {
+            modelValue: Obj.get(value, 'builder.null.type'),
+            options: {
+                'object': this.trans('Object'),
+                'string': this.trans('String'),
+            }
+        };
+
+        plainProps['onUpdate:modelValue'] = (value) => {
+            this.changeType(key, value);
         };
 
         let addProps = {
@@ -720,6 +765,9 @@ export default {
                 <NFormItem class="n-builder__element-alias" label={this.trans('Alias')}>
                     <NInput {...aliasProps} />
                 </NFormItem>
+                <NFormItem class="n-builder__element-plain" label={this.trans('Content')}>
+                    <NSelect {...plainProps}>{this.trans('Enable plain')}</NSelect>
+                </NFormItem>
                 <div class="n-builder__element-prop">
                     <NButton {...addProps}>Add property</NButton>
                 </div>
@@ -740,11 +788,21 @@ export default {
             classList.push('is-open');
         }
 
+        let builderHtml = () => {
+            return this.ctor('renderBuilder')(value.content || {}, `${key}.content`);
+        };
+
+        if ( value.builder["null"]["type"] === 'string' ) {
+            builderHtml = () => {
+                return (<div><NInput vModel={value.content} /></div>);
+            };
+        }
+
         return (
             <div class={classList}>
                 {this.ctor('renderTools')(el, value, key)}
                 {this.ctor('renderProps')(el, value, key)}
-                {this.ctor('renderBuilder')(value.content || {}, `${key}.content`)}
+                {builderHtml()}
             </div>
         );
     },
@@ -755,9 +813,20 @@ export default {
             return null;
         }
 
+        let items = Arr.each(Obj.sort(Obj.clone(el), 'order'), (v) => {
+
+            let args = [
+                Obj.get(this.$data, key, {}),
+                Obj.get(this.$data, [key, v._key], {}),
+                `${key}.${v._key}`
+            ];
+
+            return this.ctor('renderElement')(...args);
+        });
+
         return (
             <div class="n-builder__frame">
-                {Arr.each(Obj.sort(Obj.clone(el), 'order'), (v) => this.ctor('renderElement')(Obj.get(this.$data, key, {}), Obj.get(this.$data, [key, v._key], {}), `${key}.${v._key}`))}
+                {items}
             </div>
         );
     },

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

@@ -131,7 +131,7 @@ div:not(.n-builder__body) > .n-builder__frame {
 
 .n-builder__props .n-builder__element-type,
 .n-builder__props .n-builder__element-alias {
-    width: calc(50% - 10px);
+    width: calc(40% - 10px);
 }
 
 .n-builder__props .n-builder__element-prop {
@@ -145,6 +145,10 @@ div:not(.n-builder__body) > .n-builder__frame {
     width: 100%;
 }
 
+.n-builder__element-plain {
+    width: calc(20% - 10px);
+}
+
 .n-builder__props .n-form-item__label {
     font-size: 12px;
 }
@@ -237,6 +241,10 @@ div:not(.n-builder__body) > .n-builder__frame {
     margin-right: 10px;
 }
 
+.n-builder_prop-i18n {
+    flex: 0 0 auto;
+}
+
 .n-builder_prop-text {
     flex: 0 0 auto;
     width: 100%;

package/src/config/src/config/config-next.js

@@ -66,6 +66,20 @@ export default {
 
     methods: {
 
+        getString(value)
+        {
+            let final = value.replace(/^@/, '')
+                .replace(/^\\@/, '@');
+
+
+
+            if ( value.match(/^@/) ) {
+                return this.trans(final);
+            }
+
+            return final;
+        },
+
         propAwait(value)
         {
             if ( Any.isEmpty(value) ) {
@@ -180,7 +194,7 @@ export default {
             }
 
             if ( ! value.match(/(\$scope|\$model|\$global)/) ) {
-                return value;
+                return this.getString(value);
             }
 
             let sources = {
@@ -316,7 +330,7 @@ export default {
         }
 
         if ( Any.isString(setup.content) ) {
-            render = () => setup.content;
+            render = () => this.getString(setup.content);
         }
 
         return h(component, props, { default: render });

package/src/datetimepicker/src/datetimepicker/datetimepicker.scss

@@ -123,12 +123,12 @@
 
 .n-datetimepicker__date-panel.n-datepicker-panel {
     border: none;
+    border-radius: 0;
 }
 
 .n-datetimepicker__time-panel.n-timepicker-panel {
     border: none;
-    border-left: 1px solid $color-gray-10;
-    background: rgba($color-gray-05, 0.5);
+    border-radius: 0;
 }
 
 .n-datetimepicker__empty {

package/src/empty/src/empty-icon/empty-icon.js

@@ -26,6 +26,14 @@ export default {
                 return false;
             },
             type: [Boolean]
+        },
+
+        inline: {
+            default()
+            {
+                return false;
+            },
+            type: [Boolean]
         }
 
     },
@@ -42,6 +50,10 @@ export default {
             classList.push('n-disabled');
         }
 
+        if ( this.inline ) {
+            classList.push('n-inline');
+        }
+
         return (
             <div class={classList}>
                 <div class="n-empty-icon__frame">

package/src/empty/src/empty-icon/empty-icon.scss

@@ -10,6 +10,11 @@
     margin: 0 auto;
 }
 
+.n-empty-icon.n-inline {
+    flex-direction: row;
+    width: auto;
+}
+
 .n-empty-icon__frame {
     display: block;
     width: 35%;
@@ -18,6 +23,11 @@
     opacity: 0.3;
 }
 
+.n-empty-icon.n-inline .n-empty-icon__frame {
+    width: 36px;
+    margin: 0 10px 0 0;
+}
+
 .n-empty-icon.n-disabled .n-empty-icon__frame {
     display: none;
 }

package/src/preview/src/preview/preview.js

@@ -46,6 +46,14 @@ export default {
             type: [String]
         },
 
+        mime: {
+            default()
+            {
+                return null;
+            },
+            typre: [String]
+        },
+
         preview: {
             default()
             {
@@ -129,11 +137,19 @@ export default {
                 fallback = 'video';
             }
 
+            if ( Any.isString(this.mime) ) {
+                fallback = this.mime;
+            }
+
             return fallback;
         },
 
         getThumbMime(fallback = null)
         {
+            if ( Any.isString(this.mime) ) {
+                return this.mime;
+            }
+
             let file = Obj.get(this.tempThumb, 'name',
                 this.tempThumb);
 
@@ -236,8 +252,10 @@ export default {
             props.onClick = this.showLightbox;
         }
 
+        let key = btoa(this.tempThumb);
+
         return (
-            <div class={classList} {...props}>
+            <div key={key} class={classList} {...props}>
                 { [this.ctor('renderPreview')(), this.ctor('renderLightbox')()] }
             </div>
         );

package/src/preview/src/preview-image/preview-image.js

@@ -32,6 +32,7 @@ export default {
         if ( ! Arr.has(window.ImageCache, this.src) ) {
             this.tempSrc = this.src;
         }
+
     },
 
     mounted()
@@ -51,7 +52,7 @@ export default {
 
         resolveLoad()
         {
-            if ( ! Arr.has(window.ImageCache, this.src) ) {
+            if ( Arr.has(window.ImageCache, this.src) ) {
                 return;
             }
 

package/src/select/src/select/select.js

@@ -750,7 +750,7 @@ export default {
     {
         let emptyHtml = (
             <div class="n-select__empty">
-                <NEmptyIcon>{this.trans(this.emptyText)}</NEmptyIcon>
+                <NEmptyIcon inline={true}>{this.trans(this.emptyText)}</NEmptyIcon>
             </div>
         );
 

package/src/slider/src/slider/slider.scss

@@ -14,7 +14,6 @@
     right: 0;
     margin-top: -3px;
     height: 6px;
-    background: $color-gray-10;
     border-radius: 500px;
 }
 
@@ -24,7 +23,6 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: $color-primary;
 }
 
 .n-slider__handle {
@@ -36,8 +34,7 @@
     width: 20px;
     height: 20px;
     margin: -10px 0 0 -10px;
-    background: $color-white;
-    border: 2px solid $color-primary;
+    border: 2px solid transparent;
     border-radius: 500px;
 }
 
@@ -51,9 +48,7 @@
     font-size: 13px;
     display: inline-block;
     opacity: 0;
-    color: $color-white;
     transform: translate(-50%, -25%);
-    background: rgba($color-black, 0.8);
     transition: opacity 0.3s;
 }
 

package/src/table/src/table/table.scss

@@ -9,6 +9,10 @@
     border-radius: $md-radius + 2;
 }
 
+.n-table .n-table__header {
+    border-radius: $md-radius + 2 $md-radius + 2 0 0;
+}
+
 .n-table .n-table__wrap,
 .n-table .n-table__inner,
 .n-table > .n-scrollbar,

package/src/tags/src/tags-item/tags-item.scss

@@ -7,7 +7,6 @@
     align-items: center;
     justify-content: flex-start;
     max-width: 160px;
-    border-radius: $sm-radius;
     background: $color-gray-10;
 }
 
@@ -33,6 +32,7 @@
     $-tags-item-ratio: map-get($values, 'ratio');
 
     .n-tags-item--#{$suffix} {
+        border-radius: $-tags-item-radius;
         padding: 0 $-tags-item-size * 0.3 0 $-tags-item-size * 0.3;
     }
 

package/themes/macos/alert/index.scss

@@ -0,0 +1 @@
+@import "./src/alert/alert";

package/themes/macos/alert/src/alert/alert.scss

@@ -0,0 +1,26 @@
+@import "../../../root/vars";
+
+.n-alert-backdrop {
+    background: rgba($color-black, 0.8);
+}
+
+.n-alert {
+    background: $color-black;
+    box-shadow: 0 1px 5px 1px rgba($color-shadow, 0.20);
+}
+
+.n-alert__text {
+    color: $color-gray-40;
+}
+
+@each $color, $values in $colors {
+
+    $-color-base: map_get($values, 'base');
+    $-color-light: map_get($values, 'light');
+    $-color-dark: map_get($values, 'dark');
+
+    .n-alert-frame--#{$color} .n-alert__icon {
+        color: $-color-base;
+    }
+
+}

package/themes/macos/button/index.scss

@@ -0,0 +1,2 @@
+@import "./src/button/button";
+@import "./src/button-group/button-group";

package/themes/macos/button/src/button/button.scss

@@ -0,0 +1,46 @@
+@import "../../../root/vars";
+
+@each $color, $values in $colors {
+
+    $-color-base: map_get($values, 'base');
+    $-color-light: map_get($values, 'light');
+    $-color-dark: map_get($values, 'dark');
+
+    /**
+     * Button primary
+     */
+
+    .n-button--#{$color}:not(.n-button--link) {
+        color: $color-white;
+        background: $-color-base;
+        border-color: $-color-base;
+    }
+
+    .n-button--#{$color}:not(.n-button--link):hover {
+        background: $-color-light;
+        border-color: $-color-light;
+    }
+
+    .n-button--#{$color}:not(.n-button--link):focus {
+        background: $-color-dark;
+        border-color: $-color-dark;
+    }
+
+    .n-button--#{$color}:not(.n-button--link).n-disabled {
+        background: $-color-base;
+        border-color: $-color-base;
+    }
+
+    .n-button--#{$color}:not(.n-disabled).n-button--link {
+        color: $-color-base;
+    }
+
+    .n-button--#{$color}:not(.n-disabled).n-button--link:hover {
+        color: $-color-light;
+    }
+
+    .n-button--#{$color}:not(.n-disabled).n-button--link:focus {
+        color: $-color-dark;
+    }
+
+}

package/themes/macos/button/src/button-group/button-group.scss

@@ -0,0 +1 @@
+@import "../../../root/vars";

package/themes/macos/cascader/index.scss

@@ -0,0 +1,2 @@
+@import "./src/cascader-panel/cascader-panel";
+@import "./src/cascader/cascader";

package/themes/macos/cascader/src/cascader/cascader.scss

@@ -0,0 +1,46 @@
+@import "../../../root/vars";
+
+.n-cascader {
+    background: $color-form;
+    border: 1px solid $color-gray-15;
+}
+
+.n-cascader.n-disabled {
+    background: rgba($color-gray-15, 0.3);
+}
+
+.n-cascader__clear,
+.n-cascader__angle {
+    color: $color-gray-60;
+}
+
+.n-cascader__clear i {
+    background: rgba($color-gray-15, 0.6);
+}
+
+.n-cascader__placeholder {
+    color: rgba($color-foreground, 0.5);
+}
+
+.n-cascader__body,
+.n-cascader__empty {
+     background: $color-form;
+     box-shadow: 0 1px 3px 1px rgba($color-shadow, 0.15);
+}
+
+.n-cascader__empty {
+     color: $color-gray-60;
+}
+
+@each $color, $values in $colors {
+
+    $-color-base: map_get($values, 'base');
+    $-color-light: map_get($values, 'light');
+    $-color-dark: map_get($values, 'dark');
+
+     .n-cascader--#{$color}:not(.n-disabled):hover,
+     .n-cascader--#{$color}:not(.n-disabled).n-focus {
+        border-color: $-color-base;
+    }
+
+}

package/themes/macos/cascader/src/cascader-panel/cascader-panel.scss

@@ -0,0 +1,14 @@
+@import "../../../root/vars";
+
+.n-cascader-panel {
+    background: $color-form;
+    border: 1px solid $color-gray-15;
+}
+
+.n-cascader-panel .n-popover-option:not(.n-active) i {
+    color: $color-gray-40;
+}
+
+.n-cascader-panel__items:not(:last-child) {
+    border-right: 1px solid $color-gray-15;
+}

package/themes/macos/checkbox/index.scss

@@ -0,0 +1,2 @@
+@import "./src/checkbox/checkbox";
+@import "./src/checkbox-group/checkbox-group";

package/themes/macos/checkbox/src/checkbox/checkbox.scss

@@ -0,0 +1,44 @@
+@import "../../../root/vars";
+
+.n-checkbox__checkbox {
+    color: $color-foreground;
+    background: $color-form;
+    border: 1px solid $color-gray-15;
+}
+
+.n-checkbox.n-disabled .n-checkbox__checkbox  {
+    background: rgba($color-gray-15, 0.3);
+}
+
+@each $color, $values in $colors {
+
+    $-color-base: map_get($values, 'base');
+    $-color-light: map_get($values, 'light');
+    $-color-dark: map_get($values, 'dark');
+
+    /**
+     * Button primary
+     */
+
+    .n-checkbox--#{$color}:not(.n-disabled):hover .n-checkbox__checkbox {
+        border-color: $-color-base;
+    }
+
+    .n-checkbox--#{$color}.n-checked:not(.n-disabled) .n-checkbox__checkbox,
+    .n-checkbox--#{$color}.n-intermediate:not(.n-disabled) .n-checkbox__checkbox {
+        color: $color-white;
+        background: $-color-base;
+        border-color: $-color-base;
+    }
+
+    .n-checkbox--#{$color}.n-checked:not(.n-disabled) .n-checkbox__checkbox:not(.n-disabled):hover,
+    .n-checkbox--#{$color}.n-intermediate:not(.n-disabled) .n-checkbox__checkbox:not(.n-disabled):hover {
+        background: $-color-light;
+        border-color: $-color-light;
+    }
+
+    .n-checkbox--#{$color}.n-checked:not(.n-disabled) .n-checkbox__label {
+        color: $-color-base;
+    }
+
+}

package/themes/macos/checkbox/src/checkbox-group/checkbox-group.scss

@@ -0,0 +1 @@
+@import "../../../root/vars";

package/themes/macos/collapse/index.scss

@@ -0,0 +1,2 @@
+@import "./src/collapse/collapse";
+@import "./src/collapse-item/collapse-item";

package/themes/macos/collapse/src/collapse/collapse.scss

@@ -0,0 +1,21 @@
+@import "../../../root/vars";
+
+.n-collapse {
+    border: 1px solid $color-gray-15;
+}
+
+.n-collapse__header:not(:first-child) {
+    border-top: 1px solid $color-gray-15;
+}
+
+.n-collapse__header.n-active {
+    border-bottom: 1px solid $color-gray-15;
+}
+
+@each $color, $values in $colors {
+
+    $-color-base: map_get($values, 'base');
+    $-color-light: map_get($values, 'light');
+    $-color-dark: map_get($values, 'dark');
+
+}