@esportsplus/ui 0.0.20 → 0.0.21

package/build/components/form/action.d.ts

@@ -1,5 +1,5 @@
-import { Action, Reactive } from './types';
-export default function (action: Action, reactive?: Reactive): {
+import { Action } from './types';
+export default function (action: Action): {
     content: string;
     type: string;
     values: never[];

package/build/components/form/action.js

@@ -1,6 +1,7 @@
 import { response } from '@esportsplus/action';
 import { html } from '@esportsplus/template';
 import alert from '../../components/alert';
+import input from './input';
 function parse(input) {
     let data = {};
     for (let path in input) {
@@ -13,7 +14,7 @@ function parse(input) {
     return data;
 }
 ;
-export default function (action, reactive = {}) {
+export default function (action) {
     return html({
         onclick: function (event) {
             let trigger = event.target;
@@ -42,13 +43,12 @@ export default function (action, reactive = {}) {
                 },
                 response
             });
-            if (errors && 'errors' in reactive) {
-                let messages = {};
-                for (let i = 0, n = errors.length; i < n; i++) {
-                    let { message, path } = errors[i];
-                    messages[path] = `${message[0].toUpperCase()}${message.substring(1)}`;
+            for (let i = 0, n = errors.length; i < n; i++) {
+                let { message, path } = errors[i], state = input.get(this[path]);
+                if (!state) {
+                    continue;
                 }
-                reactive.errors = messages;
+                state.error = `${message[0].toUpperCase()}${message.substring(1)}`;
             }
         }
     });

package/build/components/form/index.d.ts

@@ -1,6 +1,14 @@
 import action from './action';
 declare const _default: {
     action: typeof action;
+    input: {
+        attributes: (reactive: {
+            error: string;
+        }) => (element: HTMLInputElement | HTMLSelectElement) => void;
+        get: (element?: HTMLInputElement | HTMLSelectElement | undefined) => {
+            error: string;
+        } | undefined;
+    };
     layout: (data: {
         action?: any;
         button?: {

package/build/components/form/index.js

@@ -1,3 +1,4 @@
 import action from './action';
+import input from './input';
 import layout from './layout';
-export default { action, layout };
+export default { action, input, layout };

package/build/components/form/input.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    attributes: (reactive: {
+        error: string;
+    }) => (element: HTMLInputElement | HTMLSelectElement) => void;
+    get: (element?: HTMLInputElement | HTMLSelectElement | undefined) => {
+        error: string;
+    } | undefined;
+};
+export default _default;

package/build/components/form/input.js

@@ -0,0 +1,10 @@
+let cache = new WeakMap();
+const attributes = (reactive) => {
+    return (element) => {
+        cache.set(element, reactive);
+    };
+};
+const get = (element) => {
+    return element ? cache.get(element) : undefined;
+};
+export default { attributes, get };

package/build/components/form/types.d.ts

@@ -2,7 +2,7 @@ import { response, Response } from '@esportsplus/action';
 import alert from '../../components/alert';
 type Action = (data: Payload) => Promise<Errors> | Errors;
 type Errors = {
-    errors?: Response<unknown>['errors'];
+    errors: Response<unknown>['errors'];
 };
 type Payload = {
     alert: typeof alert;
@@ -13,7 +13,4 @@ type Payload = {
         start: VoidFunction;
     };
 };
-type Reactive = {
-    errors?: Record<string, string>;
-};
-export { Action, Errors, Payload, Reactive };
+export { Action, Errors, Payload };

package/build/components/index.d.ts

@@ -3,5 +3,4 @@ export { default as form } from './form';
 export { default as page } from './page';
 export { default as root } from './root';
 export { default as scrollbar } from './scrollbar';
-export { default as state } from './state';
 export { default as tooltip } from './tooltip';

package/build/components/index.js

@@ -3,5 +3,4 @@ export { default as form } from './form';
 export { default as page } from './page';
 export { default as root } from './root';
 export { default as scrollbar } from './scrollbar';
-export { default as state } from './state';
 export { default as tooltip } from './tooltip';

package/package.json

@@ -37,5 +37,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "./build/index.d.ts",
-    "version": "0.0.20"
+    "version": "0.0.21"
 }

package/src/components/form/action.ts

@@ -1,7 +1,8 @@
 import { response } from '@esportsplus/action';
 import { html } from '@esportsplus/template';
+import { Action } from './types';
 import alert from '~/components/alert';
-import { Action, Reactive } from './types';
+import input from './input';
 
 
 function parse(input: Record<string, any>) {
@@ -22,7 +23,7 @@ function parse(input: Record<string, any>) {
 };
 
 
-export default function(action: Action, reactive: Reactive = {}) {
+export default function(action: Action) {
     return html({
         onclick: function(this: HTMLFormElement, event: Event) {
             let trigger = event.target as HTMLButtonElement;
@@ -60,16 +61,15 @@ export default function(action: Action, reactive: Reactive = {}) {
                     response
                 });
 
-            if (errors && 'errors' in reactive) {
-                let messages: Record<string, string> = {};
+            for (let i = 0, n = errors.length; i < n; i++) {
+                let { message, path } = errors[i],
+                    state = input.get( this[path] );
 
-                for (let i = 0, n = errors.length; i < n; i++) {
-                    let { message, path } = errors[i];
-
-                    messages[path] = `${message[0].toUpperCase()}${message.substring(1)}`;
+                if (!state) {
+                    continue;
                 }
 
-                reactive.errors = messages;
+                state.error = `${message[0].toUpperCase()}${message.substring(1)}`;
             }
         }
     });

package/src/components/form/index.ts

@@ -1,5 +1,6 @@
 import action from './action';
+import input from './input';
 import layout from './layout';
 
 
-export default { action, layout };
+export default { action, input, layout };

package/src/components/form/input.ts

@@ -0,0 +1,15 @@
+let cache = new WeakMap<HTMLInputElement | HTMLSelectElement, { error: string }>();
+
+
+const attributes = (reactive: { error: string }) => {
+    return (element: HTMLInputElement | HTMLSelectElement) => {
+        cache.set(element, reactive);
+    };
+};
+
+const get = (element?: HTMLInputElement | HTMLSelectElement) => {
+    return element ? cache.get(element) : undefined;
+};
+
+
+export default { attributes, get };

package/src/components/form/types.ts

@@ -4,7 +4,7 @@ import alert from '~/components/alert';
 
 type Action = (data: Payload) => Promise<Errors> | Errors;
 
-type Errors = { errors?: Response<unknown>['errors'] };
+type Errors = { errors: Response<unknown>['errors'] };
 
 type Payload = {
     alert: typeof alert;
@@ -16,9 +16,5 @@ type Payload = {
     }
 };
 
-type Reactive = {
-    errors?: Record<string, string>;
-};
-
 
-export { Action, Errors, Payload, Reactive };
+export { Action, Errors, Payload };

package/src/components/index.ts

@@ -3,5 +3,4 @@ export { default as form }from './form';
 export { default as page }from './page';
 export { default as root }from './root';
 export { default as scrollbar }from './scrollbar';
-export { default as state }from './state';
 export { default as tooltip }from './tooltip';

package/src/components/state/index.ts

@@ -1,22 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-
-
-const onfocus = (active: boolean = false) => {
-    let state = reactive({ active });
-
-    return html({
-        class: () => {
-            return state.active ? '--active' : '';
-        },
-        onfocusin: () => {
-            state.active = true;
-        },
-        onfocusout: () => {
-            state.active = false;
-        }
-    });
-};
-
-
-export default { onfocus };