@kizmann/nano-ui 1.0.14 → 1.0.15

package/src/form/src/form-group/form-group.jsx

@@ -1,4 +1,4 @@
-import { UUID } from "@kizmann/pico-js";
+import { Arr, UUID } from "@kizmann/pico-js";
 
 export default {
 
@@ -107,27 +107,32 @@ export default {
 
     },
 
+    data()
+    {
+        return {
+            uid: UUID(), tempValue: this.modelValue, items: []
+        };
+    },
+
+    provide()
+    {
+        return { NFormGroup: this };
+    },
+
     mounted()
     {
         if ( this.NForm ) {
-            this.NForm.registerGroup(this);
+            this.NForm.appendGroup(this);
         }
     },
 
     unmounted()
     {
         if ( this.NForm ) {
-            this.NForm.unregisterGroup(this);
+            this.NForm.removeGroup(this);
         }
     },
 
-    data()
-    {
-        return {
-            tempValue: this.modelValue
-        };
-    },
-
     watch: {
 
         modelValue(value)
@@ -141,6 +146,21 @@ export default {
 
     methods: {
 
+        getItems()
+        {
+            return this.items;
+        },
+
+        appendItem(item)
+        {
+            this.items[item.uid] = item;
+        },
+
+        removeItem(item)
+        {
+            delete this.items[item.uid];
+        },
+
         toggleGroup()
         {
             this.$emit('update:modelValue', this.tempValue = ! this.tempValue);
@@ -154,7 +174,7 @@ export default {
         closeGroup()
         {
             this.$emit('update:modelValue', this.tempValue = true);
-        }
+        },
 
     },
 

package/src/form/src/form-item/form-item.jsx

@@ -6,11 +6,15 @@ export default {
 
     inject: {
 
+        NTabs: {
+            default: undefined
+        },
+
         NForm: {
             default: undefined
         },
 
-        NTabs: {
+        NFormGroup: {
             default: undefined
         },
 
@@ -175,8 +179,8 @@ export default {
 
     beforeMount()
     {
-        if ( this.NForm ) {
-            this.NForm.addItem(this);
+        if ( this.NFormGroup ) {
+            this.NFormGroup.appendItem(this);
         }
     },
 
@@ -189,8 +193,8 @@ export default {
 
     beforeUnmount()
     {
-        if ( this.NForm ) {
-            this.NForm.removeItem(this);
+        if ( this.NFormGroup ) {
+            this.NFormGroup.removeItem(this);
         }
     },
 

package/src/resizer/src/resizer/resizer.jsx

@@ -83,7 +83,7 @@ export default {
     computed: {
 
         touch() {
-            return !! ('ontouchstart' in window || 
+            return !! ('ontouchstart' in window ||
                 navigator.msMaxTouchPoints);
         },
 
@@ -140,6 +140,8 @@ export default {
         Dom.find(window).on('resize', Any.debounce((...args) => {
             this.onResize(...args)
         }, 500), this._.uid);
+
+        this.updateHandle();
     },
 
     updated()
@@ -153,10 +155,10 @@ export default {
             this.unbindSizechange();
         }
 
-        Event.unbind('NResizer:move', 
+        Event.unbind('NResizer:move',
             this._.uid);
-        
-        Dom.find(window).off('resize', 
+
+        Dom.find(window).off('resize',
             null, this._.uid);
     },
 
@@ -167,7 +169,7 @@ export default {
             if ( ! Arr.has(group, this.group) ) {
                 return;
             }
-            
+
             if ( ! this.tempValue || ! this.group.length ) {
                 return;
             }
@@ -190,9 +192,9 @@ export default {
                 return;
             }
 
-            this.$emit('update:modelValue', 
+            this.$emit('update:modelValue',
                 this.tempValue = width);
-            
+
             this.updateHandle();
         },
 
@@ -203,7 +205,7 @@ export default {
             if ( this.position === 'left' ) {
                 style.transform =`translateX(-${this.tempValue - this.resizerWidth}px)`
             }
-    
+
             if ( this.position === 'right' ) {
                 style.transform = `translateX(${this.tempValue - this.resizerWidth}px)`
             }
@@ -213,7 +215,7 @@ export default {
 
         bindSizechange()
         {
-            Dom.find(this.NScrollbar.$el).on('resized', 
+            Dom.find(this.NScrollbar.$el).on('resized',
                 Any.debounce(this.updateWidth, 50), this._.uid);
         },
 
@@ -267,7 +269,7 @@ export default {
 
         onLeftMousemove(event)
         {
-            this.clientX = (window.innerWidth - 
+            this.clientX = (window.innerWidth -
                 this.getTouchEvent(event).clientX);
 
             let offsetX = Dom.find(this.$el)
@@ -462,7 +464,7 @@ export default {
         if ( this.disabled ) {
             return null;
         }
-        
+
         let classList = [
             'n-resizer__handle',
         ];
@@ -503,6 +505,10 @@ export default {
             style['flex-basis'] = this.width + 'px';
         }
 
+        if ( this.modelValue == this.tempValue ) {
+            style['flex-basis'] = this.modelValue + 'px';
+        }
+
         if ( this.minWidth ) {
             style['min-width'] = this.minWidth + 'px';
         }

package/src/table/src/table-column/table-column.jsx

@@ -381,7 +381,7 @@ export default {
             minWidth:   this.minWidth,
             maxWidth:   this.maxWidth,
             disabled:   !!this.fixedWidth,
-            group:      [this.NTable.uid],
+            group:      ['n-table', this.NTable.uid],
         };
 
         props['onUpdate:modelValue'] = (value) => {

package/src/table/src/table-filter/types/table-filter-datetime.jsx

@@ -31,7 +31,7 @@ export default {
         return (
             <NForm>
                 <NFormItem>
-                    <NDatepicker size="sm" vModel={this.filter.value} format={this.column.datetimeFormat} />
+                    <NDatepicker size="sm" vModel={this.filter.value} />
                 </NFormItem>
                 <NFormItem>
                     <NSelect size="sm" vModel={this.filter.operator} options={options} />

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

@@ -5,12 +5,36 @@
     opacity: 0.7;
 }
 
-.n-button--default:not(.n-button--link) {
-    color: $color-foreground;
-    background: rgba($color-foreground, 0.05);
+.n-button--default:not(.n-button--link,.n-button--glass) {
+    color: rgba($color-foreground, 0.8);
+    background: rgba($color-foreground, 0.1);
 }
 
-.n-button--default:not(.n-button--link):hover {
+.n-button--default:not(.n-button--link,.n-button--glass):hover {
+    color: rgba($color-foreground, 0.9);
+    background: rgba($color-foreground, 0.15);
+}
+
+.n-button--default:not(.n-button--link,.n-button--glass).n-disabled {
+    color: rgba($color-foreground, 0.8);
+    background: rgba($color-foreground, 0.1);
+}
+
+.n-button--default.n-button--link:not(.n-disabled) {
+    color: rgba($color-foreground, 0.8);
+}
+
+.n-button--default.n-button--link:not(.n-disabled):hover {
+    color: rgba($color-foreground, 0.9);
+}
+
+.n-button--default.n-button--glass:not(.n-disabled) {
+    color: rgba($color-foreground, 0.8);
+    background: rgba($color-foreground, 0.1);
+}
+
+.n-button--default.n-button--glass:not(.n-disabled):hover {
+    color: rgba($color-foreground, 0.9);
     background: rgba($color-foreground, 0.15);
 }
 
@@ -24,23 +48,23 @@
      * Button primary
      */
 
-    .n-button--#{$color}:not(.n-button--link) {
+    .n-button--#{$color}:not(.n-button--link,.n-button--glass) {
         color: $color-white;
         background: $-color-base;
         border-color: $-color-base;
     }
 
-    .n-button--#{$color}:not(.n-button--link):hover {
+    .n-button--#{$color}:not(.n-button--link,.n-button--glass):hover {
         background: $-color-light;
         border-color: $-color-light;
     }
 
-    .n-button--#{$color}:not(.n-button--link):focus {
+    .n-button--#{$color}:not(.n-button--link,.n-button--glass):focus {
         background: $-color-dark;
         border-color: $-color-dark;
     }
 
-    .n-button--#{$color}:not(.n-button--link).n-disabled {
+    .n-button--#{$color}:not(.n-button--link,.n-button--glass).n-disabled {
         background: $-color-base;
         border-color: $-color-base;
     }
@@ -57,4 +81,18 @@
         color: $-color-dark;
     }
 
+    .n-button--#{$color}:not(.n-disabled).n-button--glass {
+        color: $-color-base;
+        background: rgba($-color-base, 0.25);
+    }
+
+    .n-button--#{$color}:not(.n-disabled).n-button--glass:hover {
+        color: $-color-dark;
+        background: rgba($-color-base, 0.35);
+    }
+
+    .n-button--#{$color}:not(.n-disabled).n-button--glass:focus {
+        color: $-color-dark;
+    }
+
 }

package/themes/macos/form/src/form-frame/form-frame.scss

@@ -19,7 +19,7 @@
         background: $-color-base;
     }
 
-    .n-form-frame__menu--#{$color}.is-first {
+    .n-form-frame__menu--#{$color}.is-star {
         background: rgba($-color-base, 0.15);
     }
 
@@ -27,7 +27,7 @@
         color: $-color-base;
     }
 
-    .n-form-frame__menu--#{$color}.is-visible span {
+    .n-form-frame__menu--#{$color}.is-star span {
         color: $-color-base;
     }