@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/form/{src/form-frame → css}/form-frame.scss

@@ -1,4 +1,4 @@
-@use "../../../root/helpers" as *;
+@use "../../root/css/helpers" as *;
 
 .n-form-frame {
     display: flex;
@@ -7,17 +7,17 @@
     justify-content: stretch;
 }
 
-.n-form-frame__menus {
+.n-form-frame__side {
     flex: 0 0 auto;
 }
 
-.n-form-frame__menus .n-scrollbar__wrap {
+.n-form-frame__side .n-scrollbar__wrap {
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
 }
 
-.n-form-frame__menu {
+.n-form-frame__link {
     cursor: pointer;
     position: relative;
     display: flex;
@@ -28,11 +28,11 @@
     transition: opacity 0.3s;
 }
 
-.n-form-frame--search .n-form-frame__menu:not(.on-search) {
+.n-form-frame--search .n-form-frame__link:not(.on-search) {
     opacity: 0.6;
 }
 
-.n-form-frame__menu:before {
+.n-form-frame__link:before {
     content: '\00a0';
     position: absolute;
     top: 50%;
@@ -45,27 +45,27 @@
     transition: opacity 0.3s;
 }
 
-.n-form-frame__menu.on-search:before {
+.n-form-frame__link.on-search:before {
     opacity: 1;
 }
 
-.n-form-frame__menu:not(:last-child) {
+.n-form-frame__link:not(:last-child) {
     margin-bottom: 1px;
 }
 
-.n-form-frame__menu i {
+.n-form-frame__link i {
     flex: 0 0 auto;
     text-align: center;
     transition: opacity 0.3s;
     opacity: 0.7;
 }
 
-.n-form-frame__menu.on-search i,
-.n-form-frame__menu.is-visible i {
+.n-form-frame__link.on-search i,
+.n-form-frame__link.is-visible i {
     opacity: 1;
 }
 
-.n-form-frame__menu span {
+.n-form-frame__link span {
     overflow: hidden;
     flex: 1 1 auto;
     white-space: nowrap;
@@ -80,11 +80,11 @@
     min-height: 0;
 }
 
-.n-form-frame__menus {
+.n-form-frame__side {
     width: size('base-hgt', 'calc($ * 9)');
 }
 
-.n-form-frame__menus .n-scrollbar__wrap {
+.n-form-frame__side .n-scrollbar__wrap {
     padding: size('base-pad-vertical', 'calc($ * 2)') size('base-pad', 'calc($ * 2)');
 }
 
@@ -92,18 +92,18 @@
     margin-bottom: size('base-pad-vertical')
 }
 
-.n-form-frame__menu {
+.n-form-frame__link {
     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__menu:before {
+.n-form-frame__link:before {
     right: size('base-pad');
 }
 
-.n-form-frame__menu i {
+.n-form-frame__link i {
     width: size('base-hgt');
 }
 

package/src/form/{src/form-group → css}/form-group.scss

@@ -1,10 +1,12 @@
-@use "../../../root/helpers" as *;
+@use "../../root/css/helpers" as *;
 
 .n-form-group {
     position: relative;
+    scroll-margin-top: 30px;
+    scroll-margin-bottom: 30px;
 }
 
-.n-form-group.n-form-group--fieldset.n-form-group--collapse.n-hidden:after {
+.n-form-group.n-form-group--fieldset.has-collapse.n-hidden:after {
     z-index: 0;
     content: '\00a0';
     position: absolute;
@@ -15,7 +17,7 @@
     height: 1px;
 }
 
-.n-form-group--collapse .n-form-group__legend {
+.n-form-group.has-collapse .n-form-group__legend {
     cursor: pointer;
 }
 
@@ -45,10 +47,6 @@
     transition: transform 0.15s;
 }
 
-.n-form-group:not(.n-action) .n-form-group__collapse {
-    order: 900;
-}
-
 .n-form-group.n-hidden .n-form-group__collapse {
     transform: rotate(-90deg);
 }
@@ -78,7 +76,7 @@
     font-weight: bold;
 }
 
-.n-form-group--collapse.n-hidden .n-form-group__body {
+.n-form-group.has-collapse.n-hidden .n-form-group__body {
     display: none;
 }
 
@@ -89,6 +87,7 @@
 
 .n-form-group__header {
     z-index: 10;
+    overflow: hidden;
     position: relative;
 }
 

package/src/form/{src/form-item → css}/form-item.scss

@@ -1,4 +1,4 @@
-@use "../../../root/helpers" as *;
+@use "../../root/css/helpers" as *;
 
 .n-form-item {
     position: relative;

package/src/form/{src/form → css}/form.scss

@@ -1,4 +1,4 @@
-@use "../../../root/helpers" as *;
+@use "../../root/css/helpers" as *;
 
 .n-disabled .n-form-clear {
     display: none !important;

package/src/form/index.scss

@@ -1,5 +1,5 @@
-@forward "./src/form/form";
-@forward "./src/form-bag/form-bag";
-@forward "./src/form-group/form-group";
-@forward "./src/form-item/form-item";
-@forward "./src/form-frame/form-frame";
+@forward "./css/form";
+@forward "./css/form-bag";
+@forward "./css/form-group";
+@forward "./css/form-item";
+@forward "./css/form-frame";

package/src/form/index.ts

@@ -0,0 +1,14 @@
+import { App } from "vue";
+import NForm from "./js/form/NForm.ts";
+import NFormItem from "./js/form-item/NFormItem.ts";
+import NFormBag from "./js/form-bag/NFormBag.ts";
+import NFormGroup from "./js/form-group/NFormGroup.ts";
+import NFormFrame from "./js/form-frame/NFormFrame.ts";
+
+export default function (App : App) {
+    App.component(NForm.name, NForm);
+    App.component(NFormItem.name, NFormItem);
+    App.component(NFormBag.name, NFormBag);
+    App.component(NFormGroup.name, NFormGroup);
+    App.component(NFormFrame.name, NFormFrame);
+}

package/src/form/js/form/NForm.ts

@@ -0,0 +1,93 @@
+import { PropType, defineComponent } from "vue";
+import { Props } from "../../../root/index.ts";
+import { NFormController } from "./NFormController.ts";
+
+export const NFormProps = {
+
+    ...Props.Load,
+    ...Props.Size,
+    ...Props.Type,
+    ...Props.Disabled,
+    ...Props.AlignVertical,
+
+    /**
+     * @type {PropType<object>}
+     */
+    form: {
+        type: [Object], default: null
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    dirty: {
+        type: [Boolean], default: false
+    },
+
+    /**
+     * @type {PropType<object>}
+     */
+    errors: {
+        type: [Object], default: null
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    nativeType: {
+        type: [String], default: 'div'
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    kind: {
+        type: [String], default: 'classic'
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    square: {
+        type: [Boolean], default: false
+    },
+
+};
+
+export default defineComponent({
+
+    /**
+     * @type {string}
+     */
+    name: 'NForm',
+
+    /**
+     * @type {typeof NFormProps}
+     */
+    props: NFormProps,
+
+    /**
+     * @type {boolean}
+     */
+    inheritAttrs: false,
+
+    /**
+     * @type {string[]}
+     */
+    emits: [
+        'update:dirty',
+        'submit',
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NFormController(props, context);
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});

package/src/form/js/form/NFormController.ts

@@ -0,0 +1,125 @@
+import { provide, ref, SetupContext, watch } from "vue";
+import { GroupController } from "../../../root/index.ts";
+import { NFormView } from "./NFormView.ts";
+import { NFormData } from "./NFormData.ts";
+import { Arr, Hash, Obj } from "@kizmann/pico-js";
+import NFormRuleHandler from "../form-rules/NFormRuleHandler.ts";
+
+
+export class NFormController extends GroupController
+{
+    /**
+     * @type {NFormController}
+     */
+    declare scope : NFormController;
+
+    /**
+     * @type {NFormData}
+     */
+    declare data: NFormData;
+
+    /**
+     * @type {NFormView}
+     */
+    declare view: NFormView;
+
+    /**
+     * @type {string}
+     */
+    hash : string;
+
+    constructor(props:any, context:SetupContext)
+    {
+        super(props, context);
+
+        [this.view, this.data] = [
+            new NFormView(this),
+            new NFormData(this),
+        ];
+
+        this.setup();
+    }
+
+    setup()
+    {
+        super.setup();
+
+        provide('NForm', this.instance);
+
+        this.watchChilds(() => {
+            this.onFieldChange();
+        });
+
+        this.cloneProp('dirty');
+        this.makeData('checks', {});
+
+        this.watchProp('form', () => {
+            this.onFormChange();
+        });
+
+        this.compareChange();
+
+        return this;
+    }
+
+    onFormChange()
+    {
+        this.compareChange();
+        this.extractChecks();
+    }
+
+    onFieldChange()
+    {
+        // console.log('onFieldChange');
+    }
+
+    compareChange()
+    {
+        const { data } = this;
+
+        if ( data.dirty || ! data.form ) {
+            return;
+        }
+
+        const hash = Hash.object(data.form);
+
+        if ( this.hash != hash ) {
+            this.update('dirty', !! this.hash);
+        }
+
+        this.hash = hash;
+    }
+
+    extractChecks()
+    {
+        let checks : any = {}
+
+        Arr.each(this.childs, (child : any) => {
+            checks[child.data.prop] = NFormRuleHandler.test(this, child);
+        });
+
+        checks = Obj.filter(checks, (value : any) => {
+            return value.length > 0;
+        });
+
+        this.set('checks', checks);
+    }
+
+    getMessages()
+    {
+        const { data } = this;
+
+        let messages = Obj.clone(...[
+            data.checks
+        ]);
+
+        Arr.each(data.errors, (val : any, key: string) => {
+            messages[key] = Arr.merge(messages[key] ?? [], Arr.all(val));
+        });
+
+        return messages;
+    }
+
+}
+
+export default NFormController;

package/src/form/js/form/NFormData.ts

@@ -0,0 +1,71 @@
+import { ProtoData } from "../../../root/index.ts";
+import NFormController from "./NFormController.ts";
+import { Obj } from "@kizmann/pico-js";
+
+export class NFormData extends ProtoData
+{
+    /**
+     * @type {NFormController}
+     */
+    declare scope : NFormController;
+
+    get classList() : string[]
+    {
+        let classList = [];
+
+        const { bem } = this.scope.view;
+
+        if ( this.align ) {
+            classList.push(`${bem}--${this.align}`);
+        }
+
+        if ( this.kind ) {
+            classList.push(`${bem}--${this.kind}`);
+        }
+
+        return this.classRoot(classList);
+    }
+
+    get form() : any
+    {
+        return this.scope.get('form');
+    }
+
+    get errors() : any
+    {
+        return this.scope.get('errors');
+    }
+
+    get checks() : any
+    {
+        return this.scope.get('checks');
+    }
+
+    get messages() : any
+    {
+        return this.scope.getMessages();
+    }
+
+    get dirty() : boolean
+    {
+        return this.scope.get('dirty');
+    }
+
+    get native() : string
+    {
+        return this.scope.get('nativeType');
+    }
+
+    get kind() : string
+    {
+        return this.scope.get('kind');
+    }
+
+    get align() : string
+    {
+        return this.scope.get('align');
+    }
+
+}
+
+export default NFormData;

package/src/form/js/form/NFormView.ts

@@ -0,0 +1,33 @@
+import { h } from "vue";
+import { Arr } from "@kizmann/pico-js";
+import { ProtoView } from "../../../root/index.ts";
+import { NFormController } from "./NFormController.ts";
+
+export class NFormView extends ProtoView
+{
+    /**
+     * @type {NFormController}
+     */
+    declare scope : NFormController;
+
+    /**
+     * @type {string}
+     */
+    bem : string = 'n-form';
+
+    default() : any
+    {
+        let { scope, data } = this.scope;
+
+        let props : any = {
+            class: data.classList,
+        };
+
+        return h(data.native, props, [
+            this.slot('default')
+        ]);
+    }
+
+}
+
+export default NFormView;

package/src/form/js/form-bag/NFormBag.ts

@@ -0,0 +1,39 @@
+import { PropType, defineComponent } from "vue";
+import { Props } from "../../../root/index.ts";
+import { NFormBagController } from "./NFormBagController.ts";
+
+export const NFormBagProps = {
+
+};
+
+export default defineComponent({
+
+    /**
+     * @type {string}
+     */
+    name: 'NFormBag',
+
+    /**
+     * @type {typeof NFormBagProps}
+     */
+    props: NFormBagProps,
+
+    /**
+     * @type {string[]}
+     */
+    emits: [
+        //
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NFormBagController(props, context);
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});

package/src/form/js/form-bag/NFormBagController.ts

@@ -0,0 +1,49 @@
+import { SetupContext } from "vue";
+import { ProtoController } from "../../../root/index.ts";
+import { NFormBagView } from "./NFormBagView.ts";
+import { NFormBagData } from "./NFormBagData.ts";
+
+
+export class NFormBagController extends ProtoController
+{
+    /**
+     * @type {NFormBagController}
+     */
+    declare scope : NFormBagController;
+
+    /**
+     * @type {NFormBagData}
+     */
+    declare data: NFormBagData;
+
+    /**
+     * @type {NFormBagView}
+     */
+    declare view: NFormBagView;
+
+    constructor(props:any, context:SetupContext)
+    {
+        super(props, context);
+
+        [this.view, this.data] = [
+            new NFormBagView(this),
+            new NFormBagData(this),
+        ];
+
+        this.setup();
+    }
+
+    setup()
+    {
+        super.setup();
+
+        this.injectRef([
+            'form', 'NForm'
+        ]);
+
+        return this;
+    }
+
+}
+
+export default NFormBagController;

package/src/form/js/form-bag/NFormBagData.ts

@@ -0,0 +1,20 @@
+import { ProtoData } from "../../../root/index.ts";
+import NFormBagController from "./NFormBagController.ts";
+
+export class NFormBagData extends ProtoData
+{
+    /**
+     * @type {NFormBagController}
+     */
+    declare scope : NFormBagController;
+
+    get classList() : string[]
+    {
+        let classList = [];
+
+        return this.classRoot(classList);
+    }
+
+}
+
+export default NFormBagData;