custom app form

src/core/utils/index.ts

@@ -4,3 +4,5 @@ export { default as index } from "./index-deco";
 export { default as closest } from "./closest-deco";
 export { default as isTrue } from "./isTrue";
 export { default as firstUpper } from "./first-upper";
+export { default as query } from "./query-deco";
+export { default as querys } from "./querys-deco";

src/core/utils/query-deco.ts

@@ -0,0 +1,15 @@
+import { toKebabCase } from "core/utils";
+
+export default function query(proto: Object, key: string): any {
+    const kebab: string = toKebabCase(key);
+    return Object.defineProperty(proto, key, {
+        configurable: true,
+        get() {
+            return findQuery(this, kebab);
+        },
+    });
+}
+
+function findQuery(element: HTMLElement, key: string): HTMLElement {
+    return element.querySelector(key);
+}

src/core/utils/querys-deco.ts

@@ -0,0 +1,18 @@
+import { toKebabCase } from "core/utils";
+
+export default function querys(proto: Object, key: string): any {
+    const kebab: string = toKebabCase(key);
+    return Object.defineProperty(proto, key, {
+        configurable: true,
+        get() {
+            return findQuerys(this, kebab);
+        },
+    });
+}
+
+function findQuerys(
+    element: HTMLElement,
+    key: string
+): NodeListOf<HTMLElement> {
+    return element.querySelectorAll(key);
+}