@kizmann/nano-ui 0.7.27 → 0.7.29

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kizmann/nano-ui",
-    "version": "0.7.27",
+    "version": "0.7.29",
     "license": "MIT",
     "private": false,
     "author": "Eduard Kizmann <kizmann@protonmail.ch>",

package/src/form/src/form/form.js

@@ -1,15 +1,26 @@
 import { UUID, Num, Arr, Obj, Any, Dom, Locale } from "@kizmann/pico-js";
+import { h } from "vue";
 
 export default {
 
     name: 'NForm',
 
+    inheritAttrs: false,
+
     model: {
         prop: 'form'
     },
 
     props: {
 
+        dom: {
+            default()
+            {
+                return 'div';
+            },
+            type: [String]
+        },
+
         form: {
             default()
             {
@@ -68,16 +79,31 @@ export default {
 
     },
 
+    computed: {
+
+        classList()
+        {
+            if ( ! this.$attrs.class ) {
+                return [];
+            }
+
+            return Any.isArray(this.$attrs) ? this.$attrs.class :
+                [this.$attrs.class];
+        }
+
+    },
+
     methods: {
 
         onSubmit(event)
         {
-            if ( this.prevent ) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
+            console.log('hmm', event.which);
+            event.preventDefault();
+            event.stopPropagation();
 
-            this.$emit('submit', event);
+            if ( Dom.find(event.target).is('input') ) {
+                this.$emit('submit', event);
+            }
 
             return this.prevent;
         },
@@ -96,28 +122,11 @@ export default {
             });
         },
 
-        setForm(form)
+        emitChange(form)
         {
-            let veForm = Obj.clone(form);
-
-            if ( Any.md5(veForm) !== Any.md5(this.veForm) || this.forceChange ) {
-                this.$emit('change');
-            }
-
-            this.veForm = veForm;
+            this.$emit('change');
         },
 
-        setErrors(errors)
-        {
-            let veErrors = Obj.clone(errors);
-
-            if ( Any.md5(veErrors) !== Any.md5(this.veErrors) || this.forceErrors ) {
-                this.$emit('errors');
-            }
-
-            this.veErrors = veErrors;
-        }
-
     },
 
     data()
@@ -137,36 +146,12 @@ export default {
 
     mounted()
     {
-        // this.$watch('form', () => this.setForm(this.form),
-        //     { deep: true });
-
-        // this.$watch('errors', () => this.setErrors(this.errors),
-        //     { deep: true });
-
-        // let ident = {
-        //     _uid: this.uid
-        // };
-
-        // if ( this.propagation ) {
-        //     return;
-        // }
-
-        // Dom.find(this.$el).on('submit',
-        //     this.onSubmit, this._.uid);
+        Any.delay(this.ctor('ready'), 1000);
     },
 
-    beforeUnmount()
+    ready()
     {
-        // let ident = {
-        //     _uid: this.uid
-        // };
-
-        // if ( this.propagation ) {
-        //     return;
-        // }
-
-        // Dom.find(this.$el).off('submit',
-        //     null, this._.uid);
+        this.$watch('form', this.emitChange, { deep: true });
     },
 
     render()
@@ -176,10 +161,17 @@ export default {
             'n-form--' + this.align,
         ];
 
-        return (
-            <form class={classList} onSubmit={this.onSubmit}>
-                { this.$slots.default && this.$slots.default() }
-            </form>
-        );
+        let attrs = Obj.except(this.$attrs, ['class', 'onChange', 'onSubmit'], {
+            class: this.cmer(classList)
+        });
+
+        attrs['onSubmit'] = (e) => {
+            return false;
+        }
+
+        return h(this.dom, { ...attrs }, [
+            this.$slots.default && this.$slots.default()
+        ]);
     }
+
 }

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

@@ -5,6 +5,14 @@ export default {
 
     name: 'NInput',
 
+    inject: {
+
+        NForm: {
+            default: undefined
+        }
+
+    },
+
     inheritAttrs: false,
 
     props: {
@@ -111,10 +119,25 @@ export default {
 
         onInput(event)
         {
-            this.$emit('update:modelValue', 
+            this.$emit('update:modelValue',
                 this.tempValue = event.target.value);
         },
 
+        onKeydown(event)
+        {
+            if ( event.which !== 13 ) {
+                return;
+            }
+
+            event.preventDefault();
+
+            if ( ! this.NForm ) {
+                return;
+            }
+
+            this.NForm.onSubmit();
+        },
+
         onFocus(event)
         {
             this.focus = true;
@@ -129,22 +152,22 @@ export default {
 
     renderIcon()
     {
-        if ( ! this.icon ) {
+        if ( !this.icon ) {
             return null;
         }
 
-        let disabled = this.disabled || 
+        let disabled = this.disabled ||
             this.iconDisabled;
 
         let props = {
-            type:       'input',
-            icon:       this.icon,
-            size:       this.size,
-            square:     true,
-            disabled:   disabled,
+            type: 'input',
+            icon: this.icon,
+            size: this.size,
+            square: true,
+            disabled: disabled,
         };
 
-        if ( ! disabled ) {
+        if ( !disabled ) {
             props.onClick = this.onIconClick;
         }
 
@@ -158,13 +181,14 @@ export default {
         ]);
 
         Obj.assign(props, {
-            value:          this.tempValue,
-            type:           this.nativeType,
-            disabled:       this.disabled,
-            placeholder:    this.placeholder,
-            onInput:        this.onInput,
-            onFocus:        this.onFocus,
-            onBlur:         this.onBlur,
+            value: this.tempValue,
+            type: this.nativeType,
+            disabled: this.disabled,
+            placeholder: this.placeholder,
+            onInput: this.onInput,
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+            onKeydown: this.onKeydown
         });
 
         return h('input', props);