@kizmann/nano-ui 1.0.15 → 1.1.2

package/src/form/src/form/form-rules.mjs

@@ -0,0 +1,182 @@
+import { Any, Arr, Locale, Obj } from "@kizmann/pico-js";
+
+export const FormMessage = {
+
+    required(field, value) {
+        return Locale.trans('Field is required');
+    },
+
+    required_if(field, value, key = '') {
+
+        let label = Arr.find(this.elements, (item) => {
+            return item.prop === key;
+        }) || key;
+
+        return Locale.trans('Field is required if :label isset', {
+            label: label.label || key
+        });
+    },
+
+    required_unless(field, value, key = '') {
+
+        let label = Arr.find(this.elements, (item) => {
+            return item.prop === key;
+        });
+
+        return Locale.trans('Field is required unless :label isset', {
+            label: label.label || key
+        });
+    },
+
+    same(field, value, key = '')
+    {
+        let label = Arr.find(this.elements, (item) => {
+            return item.prop === key;
+        }) || key;
+
+        return Locale.trans('Must be same as :label', {
+            label: label.label || key
+        });
+    },
+
+    diffrent(field, value, key = '')
+    {
+        let label = Arr.find(this.elements, (item) => {
+            return item.prop === key;
+        }) || key;
+
+        return Locale.trans('Must be diffrent from :label', {
+            label: label.label || key
+        });
+    },
+
+    value(field, value, val = 'foobar') {
+        return Locale.trans('Must be exact value :val', { val });
+    },
+
+    min(field, value, min = Number.MIN_VALUE) {
+        return Locale.trans('Must be greather than :min', { min });
+    },
+
+    max(field, value, max = Number.MAX_VALUE) {
+        return Locale.trans('Must be lesser than :max', { max });
+    },
+
+    minlength(field, value, min = Number.MIN_VALUE) {
+        return Locale.trans('Length must be greater than :min', { min });
+    },
+
+    maxlength(field, value, max = Number.MAX_VALUE) {
+        return Locale.trans('Length must be lesser than :max', { max });
+    },
+
+    email(field, value) {
+        return Locale.trans('Must be a valid email');
+    }
+
+};
+
+export const FormRules = {
+
+    required(field, value) {
+
+        if ( Any.isBool(value) ) {
+            return value === true;
+        }
+
+        return ! Any.isEmpty(value);
+    },
+
+    required_if(field, value, key = '') {
+
+        let target = Obj.get(this.form, key);
+
+        if ( Any.isEmpty(target) ) {
+            return true;
+        }
+
+        if ( Any.isBool(value) ) {
+            return value === true;
+        }
+
+        return ! Any.isEmpty(value);
+    },
+
+    required_unless(field, value, key = '') {
+
+        let target = Obj.get(this.form, key);
+
+        if ( ! Any.isEmpty(target) ) {
+            return true;
+        }
+
+        if ( Any.isBool(value) ) {
+            return value === true;
+        }
+
+        return ! Any.isEmpty(value);
+    },
+
+    same(field, value, key = '') {
+        return value === Obj.get(this.form, key);
+    },
+
+    diffrent(field, value, key = '') {
+        return value !== Obj.get(this.form, key);
+    },
+
+    value(field, value, val = 'foobar') {
+
+        if ( Any.isString(value) ) {
+            return value === val;
+        }
+
+        return false;
+    },
+
+    min(field, value, min = Number.MIN_VALUE) {
+
+        if ( Any.isNumber(value) ) {
+            return value >= min;
+        }
+
+        return false;
+    },
+
+    max(field, value, max = Number.MAX_VALUE) {
+
+        if ( Any.isNumber(value) ) {
+            return value <= max;
+        }
+
+        return false;
+    },
+
+    minlength(field, value, min = Number.MIN_VALUE) {
+
+        if ( Any.isString(value) || Any.isArray(value) ) {
+            return value.length > min;
+        }
+
+        return false;
+    },
+
+    maxlength(field, value, max = Number.MAX_VALUE) {
+
+        if ( Any.isString(value) || Any.isArray(value) ) {
+            return value.length < max;
+        }
+
+        return false;
+    },
+
+    email(field, value) {
+
+        if ( Any.isString(value) ) {
+            return value.match(/^.*?@.*?\.[a-z]{2,}$/);
+        }
+
+        return false;
+    }
+
+};

package/src/form/src/form/form.jsx

@@ -1,5 +1,6 @@
 import { UUID, Num, Arr, Obj, Any, Dom, Locale } from "@kizmann/pico-js";
 import { h } from "vue";
+import {FormMessage, FormRules} from "./form-rules.mjs";
 
 export default {
 
@@ -13,6 +14,14 @@ export default {
 
     props: {
 
+        ready: {
+            default()
+            {
+                return true;
+            },
+            type: [Boolean]
+        },
+
         dom: {
             default()
             {
@@ -45,6 +54,14 @@ export default {
             type: [String]
         },
 
+        type: {
+            default()
+            {
+                return 'primary';
+            },
+            type: [String]
+        },
+
         kind: {
             default()
             {
@@ -112,7 +129,7 @@ export default {
     data()
     {
         return {
-            uid: UUID(), elements: [], groups: {}, blocked: true,
+            uid: UUID(), elements: [], rules: [], groups: {}, ruleErrors: {}, blocked: true,
         };
     },
 
@@ -130,8 +147,9 @@ export default {
 
     ready()
     {
-        this.$watch('form', this.emitChange,
-            { deep: true });
+        this.$watch('form', this.emitChange, {
+            deep: true
+        });
 
         this.resetChange();
     },
@@ -167,7 +185,7 @@ export default {
             return this.prevent;
         },
 
-        addItem(item)
+        appendItem(item)
         {
             Arr.add(this.elements, item, {
                 uid: item.uid
@@ -212,17 +230,103 @@ export default {
                 return;
             }
 
+            this.validate();
+
             this.prevState = nextState;
 
             this.$emit('change');
         },
 
+        validateField(field)
+        {
+            let errors = [];
+
+            Arr.each(field.rules, (rule) => {
+                let [name, ...args] = rule.split(':');
+
+                if ( ! FormRules[name] || !FormMessage[name] ) {
+                    return;
+                }
+
+                let value = Obj.get(this.form, field.prop);
+
+                if ( FormRules[name].call(this, field, value, ...args) ) {
+                    return;
+                }
+
+                let message = FormMessage[name].call(this, field, value, ...args);
+
+                if ( Any.isEmpty(message) ) {
+                    return;
+                }
+
+                errors.push(message);
+            });
+
+            return errors;
+        },
+
+        validate()
+        {
+            let errors = {};
+
+            Arr.each(this.elements, (field) => {
+                errors[field.prop] = this.validateField(field);
+            });
+
+            this.ruleErrors = Obj.filter(errors, (err) => {
+                return ! Any.isEmpty(err);
+            });
+
+            return this.ruleErrors;
+        },
+
+        isValid(includeErrors = false)
+        {
+            this.validate();
+
+            let count = Any.keys(this.ruleErrors).length;
+
+            if ( includeErrors ) {
+                count += Any.keys(this.errors).length;
+            }
+
+            return count === 0;
+        },
+
+        getErrors()
+        {
+            let errors = {};
+
+            Obj.each(this.errors, (err, key) => {
+
+                if ( ! Any.isArray(err) ) {
+                    err = [err];
+                }
+
+                errors[key] = err;
+            });
+
+            Obj.each(this.ruleErrors, (err, key) => {
+
+                if ( Obj.has(errors, key) ) {
+                    err = Arr.merge(errors[key], err);
+                }
+
+                errors[key] = err;
+            });
+
+            return errors;
+        },
+
     },
 
     render()
     {
         let classList = [
             'n-form',
+            'n-form--' + this.size,
+            'n-form--' + this.type,
             'n-form--' + this.align,
         ];
 

package/src/form/src/form/form.scss

@@ -1 +1,33 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
+
+.n-disabled .n-form-clear {
+    display: none !important;
+}
+
+.n-disabled .n-form-angle {
+    display: inline-flex !important;
+}
+
+.n-form-clear,
+.n-form-angle {
+    position: relative;
+}
+
+.n-form-clear i,
+.n-form-angle i {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: size('base-hgt', 'calc($ - 14px)');
+    height: size('base-hgt', 'calc($ - 14px)');
+}
+
+.n-form-clear i,
+.n-form-angle i {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.8em;
+    border-radius: size('base-rad-circle');
+}

package/src/form/src/form-bag/form-bag.jsx

@@ -0,0 +1,90 @@
+import { Any, Arr, Obj, UUID } from "@kizmann/pico-js";
+
+export default {
+
+    name: 'NFormBag',
+
+    inject: {
+
+        NForm: {
+            default: undefined
+        }
+
+    },
+
+    data()
+    {
+        return {
+            uid: UUID()
+        };
+    },
+
+
+    methods: {
+
+        gotoField(field)
+        {
+            //
+        }
+
+    },
+
+
+    renderField(field)
+    {
+        let errors = Obj.get(this.NForm.getErrors(),
+            field.prop, []);
+
+        console.log('err', field.prop, errors)
+
+        if ( Any.isEmpty(errors) ) {
+            return null;
+        }
+
+        let items = Arr.each(errors, (error) => {
+            return (<li>{error}</li>);
+        });
+
+        let itemProps = {
+            //
+        };
+
+        itemProps['onClick'] = () => {
+            console.log('click');
+            field.gotoInput();
+        };
+
+        return (
+            <div class="n-form-bag-item" {...itemProps}>
+                <div class="n-form-bag-item__label">
+                    <i class="n-icon fa fa-location-crosshairs"></i> <span>{field.label}</span>
+                </div>
+                <div class="n-form-bag-item__errors">
+                    <ul>{items}</ul>
+                </div>
+            </div>
+        )
+    },
+
+    render()
+    {
+        if ( !this.NForm ) {
+            return null;
+        }
+
+        let classList = [
+            'n-form-bag',
+            'n-form-bag--' + this.NForm.size,
+        ];
+
+        let items = Arr.each(this.NForm.elements, (field) => {
+            return this.ctor('renderField')(field);
+        });
+
+        return (
+            <div class={classList}>
+                {items}
+            </div>
+        );
+    }
+}

package/src/form/src/form-bag/form-bag.scss

@@ -0,0 +1,59 @@
+@use "../../../root/helpers" as *;
+
+.n-form-bag {
+    display: flex;
+    flex-direction: column;
+    font-size: size('base-fnt');
+}
+
+.n-form-bag-item {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    border-radius: size('base-rad');
+    background: color('danger-color', 0.15);
+    padding: size('base-pad-vertical') size('base-pad');
+}
+
+.n-form-bag-item:not(:last-child) {
+    margin-bottom: size('base-pad-vertical');
+}
+
+.n-form-bag-item__label {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.n-form-bag-item__label i {
+    display: inline-flex;
+    justify-content: center;
+    opacity: 0.7;
+    width: size('base-hgt-inline');
+    color: color('danger-color');
+}
+
+.n-form-bag-item:hover .n-form-bag-item__label i {
+    opacity: 1;
+}
+
+.n-form-bag-item__label span {
+    display: inline-flex;
+    color: color('danger-color');
+    padding-left: size('base-pad', 'calc($ * 0.5)');
+}
+
+.n-form-bag-item__errors ul {
+    list-style: none;
+}
+
+.n-form-bag-item__errors ul {
+    padding-left: size('base-hgt-inline');
+}
+
+.n-form-bag-item__errors ul li {
+    padding-left: size('base-pad', 'calc($ * 0.5)');
+    color: color('text', 0.6);
+    font-size: size('base-fnt-label');
+}

package/src/form/src/form-frame/form-frame.jsx

@@ -63,7 +63,9 @@ export default {
 
     data()
     {
-        return { search: '', star: '', block: false };
+        return {
+            search: ''
+        };
     },
 
     mounted()
@@ -87,21 +89,31 @@ export default {
                 return;
             }
 
-            this.block = block;
-
             if ( ! Any.isEmpty(this.timeout) ) {
                 clearTimeout(this.timeout);
             }
 
             if ( block ) {
-                this.star = id;
+                this.onApplyStar(id, block);
             }
 
             this.timeout = setTimeout(() => {
-                this.star = id; this.block = false;
+                this.onApplyStar(id, false);
             }, 500);
         },
 
+        onApplyStar(id, block = false)
+        {
+            this.block = block;
+
+            Dom.find(this.$el).find(`[data-menu-key]`).each((el) => {
+                Dom.find(el).removeClass('is-star');
+            });
+
+            Dom.find(this.$el).find(`[data-menu-key="${id}"]`)
+                .addClass('is-star');
+        },
+
         onMoveEvent()
         {
             Dom.find(window).on('mousemove', Any.debounce(e => {
@@ -244,10 +256,6 @@ export default {
             'n-form-frame__menu--' + item.type
         ];
 
-        if ( this.star === item.key ) {
-            classList.push('is-star');
-        }
-
         return (
             <a class={classList} data-menu-key={item.key} {...buttonProps}>
                 {[iconHtml, labelHtml]}

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

@@ -1,5 +1,4 @@
-@use "sass:map";
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-form-frame {
     display: flex;
@@ -24,7 +23,7 @@
     display: flex;
     align-items: center;
     width: 100%;
-    border-radius: $md-radius;
+    border-radius: size('base-rad');
     text-decoration: none;
     transition: opacity 0.3s;
 }
@@ -81,45 +80,33 @@
     min-height: 0;
 }
 
+.n-form-frame__menus {
+    width: size('base-hgt', 'calc($ * 9)');
+}
 
+.n-form-frame__menus .n-scrollbar__wrap {
+    padding: size('base-pad-vertical', 'calc($ * 2)') size('base-pad', 'calc($ * 2)');
+}
 
-@each $suffix, $values in $form {
-
-    $-form-frame-font: map.get($values, 'font');
-    $-form-frame-size: map.get($values, 'size');
-    $-form-frame-radius: map.get($values, 'radius');
-    $-form-frame-ratio: map.get($values, 'ratio');
-
-    .n-form-frame--#{$suffix} .n-form-frame__menus {
-        width: $-form-frame-size * 8;
-    }
-
-    .n-form-frame--#{$suffix} .n-form-frame__menus .n-scrollbar__wrap {
-        padding: $-form-frame-size * 0.5 $-form-frame-size * 0.6;
-    }
-
-    .n-form-frame--#{$suffix} .n-form-frame__search {
-        margin-bottom: $-form-frame-size * 0.4;
-    }
-
-    .n-form-frame--#{$suffix} .n-form-frame__menu {
-        height: $-form-frame-size;
-        font-size: $-form-frame-font - 1;
-        border-radius: $-form-frame-radius;
-        padding-right: $-form-frame-size * 0.6;
-    }
+.n-form-frame__search {
+    margin-bottom: size('base-pad-vertical')
+}
 
-    .n-form-frame--#{$suffix} .n-form-frame__menu:before {
-        right: $-form-frame-size * 0.3;
-    }
+.n-form-frame__menu {
+    height: size('base-hgt', 'calc($ * 1.2)');
+    font-size: size('base-fnt');
+    border-radius: size('base-rad');
+    padding: 0 size('base-pad');
+}
 
-    .n-form-frame--#{$suffix} .n-form-frame__menu i {
-        width: $-form-frame-size * 0.6;
-        margin: 0 $-form-frame-size * 0.3;
-    }
+.n-form-frame__menu:before {
+    right: size('base-pad');
+}
 
-    .n-form-frame--#{$suffix} .n-form-frame__body .n-scrollbar__wrap {
-        padding: $-form-frame-size * 0.2 $-form-frame-size * 0.6 $-form-frame-size * 0.2 0;
-    }
+.n-form-frame__menu i {
+    width: size('base-hgt');
+}
 
+.n-form-frame__body > .n-scrollbar-content > .n-scrollbar__wrap {
+    padding: size('base-pad-vertical', 'calc($ * 2)') size('base-pad', 'calc($ * 2)');
 }