@kizmann/nano-ui 0.9.3 → 0.9.5

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

@@ -0,0 +1,146 @@
+import { Arr, Obj, Any } from "@kizmann/pico-js";
+
+export default {
+
+    name: 'NReferencePicker',
+
+    props: {
+
+        modelValue: {
+            default()
+            {
+                return '';
+            },
+            type: [String]
+        },
+
+        model: {
+            default()
+            {
+                return {};
+            },
+            type: [Object]
+        },
+
+        scope: {
+            default()
+            {
+                return {};
+            },
+            type: [Object]
+        },
+
+        size: {
+            default()
+            {
+                return 'md';
+            },
+            type: [String]
+        },
+
+        width: {
+            default()
+            {
+                return '100%';
+            },
+            type: [String]
+        },
+
+        height: {
+            default()
+            {
+                return '100%';
+            },
+            type: [String]
+        },
+
+    },
+
+    data()
+    {
+        return {
+            modal: false, tempValue: this.modelValue
+        };
+    },
+
+    methods: {
+
+        updateValue(value)
+        {
+            this.$emit('update:modelValue', this.tempValue = value);
+        }
+
+    },
+
+    renderModal()
+    {
+        if ( ! this.modal ) {
+            return null;
+        }
+
+        let modalProps = {
+            modelValue: true,
+            width: this.width,
+            height: this.height,
+        };
+
+        modalProps['onClose'] = () => {
+            this.modal = false;
+        };
+
+        let panelProps = {
+            model: this.model, scope: this.scope,
+        };
+
+        panelProps['onUpdate:modelValue'] = (value) => {
+            this.updateValue(value); this.modal = false;
+        };
+
+        let slots = {
+            //
+        };
+
+        slots['body'] = () => (
+            <NReferencePanel class="in-modal" {...panelProps} />
+        );
+
+        return (
+            <NModal {...modalProps} v-slots={slots} />
+        );
+    },
+
+    renderInput()
+    {
+        let inputProps = {
+            modelValue: this.tempValue,
+            icon: 'fa fa-expand',
+            size: this.size,
+        };
+
+        inputProps['onUpdate:modelValue'] = (value) => {
+            this.updateValue(value);
+        };
+
+        inputProps['onBlur'] = (e) => {
+            this.$emit('onBlur', e);
+        };
+
+        inputProps['onIconClick'] = () => {
+            this.modal = true;
+        };
+
+        return (
+            <NInput {...inputProps} />
+        );
+    },
+
+    render()
+    {
+        return (
+            <div class="n-reference-picker">
+                {[this.ctor('renderInput')(), this.ctor('renderModal')()]}
+            </div>
+        );
+    }
+
+}

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

@@ -0,0 +1,3 @@
+.n-reference-picker .n-input input {
+    font-family: monospace;
+}

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/form/src/form-group/form-group.js

@@ -201,7 +201,11 @@ export default {
 
     render()
     {
-        let size = this.size || this.NForm.size;
+        let size = this.size ;
+
+        if ( this.NForm ) {
+            size = size || this.NForm.size;
+        }
 
         let classList = [
             'n-form-group', 

package/src/index.scss

@@ -36,4 +36,5 @@
 @import "./map/index";
 @import "./preview/index";
 @import "./rating/index";
+@import "./config/index";
 

package/src/input/src/input/input.js

@@ -156,11 +156,13 @@ export default {
         onFocus(event)
         {
             this.focus = true;
+            this.$emit('focus', event);
         },
 
         onBlur(event)
         {
             this.focus = false;
+            this.$emit('blur', event);
         }
 
     },

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/root/vars.scss

@@ -158,3 +158,26 @@ $colors: (
         'dark': $color-danger-dark
     ),
 ) !default;
+
+$colors-tags: (
+        '0': mix($color-secondary, $color-secondary, 65%),
+        '1': mix($color-primary, $color-secondary, 65%),
+        '2': mix($color-danger, $color-secondary, 65%),
+        '3': mix($color-success, $color-secondary, 65%),
+        '4': mix($color-warning, $color-secondary, 65%),
+        '5': mix($color-primary, $color-success, 65%),
+        '6': mix($color-secondary, $color-success, 65%),
+        '7': mix($color-danger, $color-success, 65%),
+        '8': mix($color-success, $color-success, 65%),
+        '9': mix($color-warning, $color-success, 65%),
+        '10': mix($color-primary, $color-danger, 65%),
+        '11': mix($color-secondary, $color-danger, 65%),
+        '12': mix($color-danger, $color-danger, 65%),
+        '13': mix($color-success, $color-danger, 65%),
+        '14': mix($color-warning, $color-danger, 65%),
+        '15': mix($color-primary, $color-warning, 65%),
+        '16': mix($color-secondary, $color-warning, 65%),
+        '17': mix($color-danger, $color-warning, 65%),
+        '18': mix($color-success, $color-warning, 65%),
+        '19': mix($color-warning, $color-warning, 65%),
+) !default;

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');
+
+}

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

@@ -0,0 +1,21 @@
+@import "../../../root/vars";
+
+.n-collapse__header-icon {
+    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-collapse--#{$color} .n-collapse__header .n-collapse__header-icon {
+        color: $-color-base;
+    }
+
+    .n-collapse--#{$color} .n-collapse__header.n-active .n-collapse__header-angle {
+        color: $-color-base;
+    }
+
+}

package/themes/macos/confirm/index.scss

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

package/themes/macos/confirm/src/confirm/confirm.scss

@@ -0,0 +1,13 @@
+@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');
+
+    .n-confirm--#{$color} .n-confirm__icon {
+        color: $-color-base;
+    }
+
+}