@esportsplus/ui 0.0.19 → 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/build/components/root/index.d.ts

@@ -1,4 +1,5 @@
 import layout from './layout';
+import queue from './queue';
 declare const _default: {
     layout: (data?: {
         overlay?: {
@@ -17,6 +18,9 @@ declare const _default: {
         type: string;
         values: never[];
     };
+    queue: {
+        onclick: (fn: VoidFunction) => void;
+    };
 };
 export default _default;
-export { layout };
+export { layout, queue };

package/build/components/root/index.js

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

package/build/components/root/queue.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    onclick: (fn: VoidFunction) => void;
+};
+export default _default;

package/build/components/root/queue.js

@@ -0,0 +1,18 @@
+import events from '@esportsplus/delegated-events';
+let initialized = false, queue = [];
+const onclick = (fn) => {
+    if (!initialized) {
+        events.register(document.body, 'click', async () => {
+            if (!queue.length) {
+                return;
+            }
+            let items = queue.splice(0);
+            for (let i = 0, n = items.length; i < n; i++) {
+                await items[i]();
+            }
+        });
+        initialized = true;
+    }
+    queue.push(fn);
+};
+export default { onclick };

package/build/components/tooltip/index.js

@@ -1,21 +1,8 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
-import events from '@esportsplus/delegated-events';
+import { root } from '../../components';
 import menu from './menu';
-let initialized = false, root = [];
 const onclick = ({ active, toggle }) => {
-    if (!initialized) {
-        events.register(document.body, 'click', () => {
-            if (!root.length) {
-                return;
-            }
-            let deactivate = root.splice(0);
-            for (let i = 0, n = deactivate.length; i < n; i++) {
-                deactivate[i].active = false;
-            }
-        });
-        initialized = true;
-    }
     let state = reactive({
         active: active || false
     });
@@ -30,7 +17,7 @@ const onclick = ({ active, toggle }) => {
             }
             state.active = active;
             if (active) {
-                root.push(state);
+                root.queue.onclick(() => state.active = false);
             }
         }
     });

package/package.json

@@ -37,5 +37,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "./build/index.d.ts",
-    "version": "0.0.19"
+    "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/root/index.ts

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

package/src/components/root/queue.ts

@@ -0,0 +1,28 @@
+import events from '@esportsplus/delegated-events';
+
+
+let initialized = false,
+    queue: VoidFunction[] = [];
+
+
+const onclick = (fn: VoidFunction) => {
+    if (!initialized) {
+        events.register(document.body, 'click', async () => {
+            if (!queue.length) {
+                return;
+            }
+
+            let items = queue.splice(0);
+
+            for (let i = 0, n = items.length; i < n; i++) {
+                await items[i]();
+            }
+        });
+        initialized = true;
+    }
+
+    queue.push(fn);
+};
+
+
+export default { onclick };

package/src/components/tooltip/index.ts

@@ -1,29 +1,10 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
-import events from '@esportsplus/delegated-events';
+import { root } from '~/components';
 import menu from './menu';
 
 
-let initialized = false,
-    root: { active: boolean }[] = [];
-
-
 const onclick = ({ active, toggle }: { active?: boolean, toggle?: boolean }) => {
-    if (!initialized) {
-        events.register(document.body, 'click', () => {
-            if (!root.length) {
-                return;
-            }
-
-            let deactivate = root.splice(0);
-
-            for (let i = 0, n = deactivate.length; i < n; i++) {
-                deactivate[i].active = false;
-            }
-        });
-        initialized = true;
-    }
-
     let state = reactive({
             active: active || false
         });
@@ -42,7 +23,7 @@ const onclick = ({ active, toggle }: { active?: boolean, toggle?: boolean }) =>
             state.active = active;
 
             if (active) {
-                root.push(state);
+                root.queue.onclick(() => state.active = false);
             }
         }
     });

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 };