@windwalker-io/unicorn-next 0.1.0 → 0.1.1

package/src/module/form.ts

@@ -1,223 +1,223 @@
-import { data } from '../data';
-import { loadAlpine, useSystemUri } from '../service';
-import type { Nullable } from '../types';
-
-export class UnicornFormElement {
-  element: HTMLFormElement | undefined;
-  options: Record<string, any>;
-
-  constructor(
-    selector?: string | Element,
-    element?: HTMLFormElement,
-    options: Record<string, any> = {},
-  ) {
-    // If form not found, create one
-    if (!element) {
-      element = document.createElement('form');
-
-      if (typeof selector === 'string' && selector.startsWith('#')) {
-        element.setAttribute('id', selector.substring(1));
-        element.setAttribute('name', selector.substring(1));
-      }
-
-      element.setAttribute('method', 'post');
-      element.setAttribute('enctype', 'multipart/form-data');
-      element.setAttribute('novalidate', 'true');
-      element.setAttribute('action', useSystemUri('full'));
-      element.setAttribute('style', 'display: none;');
-
-      const csrf = document.createElement('input');
-      csrf.setAttribute('type', 'hidden');
-      csrf.setAttribute('name', data('csrf-token'));
-      csrf.setAttribute('value', '1');
-
-      element.appendChild(csrf);
-      document.body.appendChild(element);
-    }
-
-    this.element = element;
-    this.options = { ...options };
-  }
-
-  initComponent(store = 'form', custom = {}) {
-    return loadAlpine((Alpine) => {
-      Alpine.store(store, this.useState(custom));
-    });
-  }
-
-  useState(custom = {}) {
-    const state: Record<string, any> = {};
-    Object.getOwnPropertyNames(Object.getPrototypeOf(this))
-      .map(item => {
-        // @ts-ignore
-        return state[item] = this[item].bind(this);
-      });
-
-    return Object.assign(
-      state,
-      custom
-    );
-  }
-
-  getElement() {
-    return this.element;
-  }
-
-  submit(
-    url?: Nullable<string>,
-    data?: Nullable<Record<string, any>>,
-    method?: Nullable<string>,
-    customMethod?: Nullable<string>,
-  ): boolean {
-    const form = this.element!;
-
-    if (customMethod) {
-      let methodInput = form.querySelector<HTMLInputElement>('input[name="_method"]');
-
-      if (!methodInput) {
-        methodInput = document.createElement('input');
-        methodInput.setAttribute('name', '_method');
-        methodInput.setAttribute('type', 'hidden');
-        methodInput.value = customMethod;
-
-        form.appendChild(methodInput);
-      } else {
-        methodInput.value = customMethod;
-      }
-    }
-
-    // Set data into form.
-    if (data) {
-      const flatted = UnicornFormElement.flattenObject(data);
-
-      for (const key in flatted) {
-        const value = flatted[key];
-
-        const fieldName = UnicornFormElement.buildFieldName(key);
-        this.injectInput(fieldName, value);
-      }
-    }
-
-    if (url) {
-      form.setAttribute('action', url);
-    }
-
-    if (method) {
-      form.setAttribute('method', method);
-    }
-
-    // Use requestSubmit() to fire submit event.
-    form.requestSubmit();
-
-    return true;
-  }
-
-  injectInput(name: string, value: any) {
-    let input = this.element!.querySelector<HTMLInputElement>(`input[name="${name}"]`);
-
-    if (!input) {
-      input = document.createElement('input');
-      input.setAttribute('name', name);
-      input.setAttribute('type', 'hidden');
-      input.setAttribute('data-role', 'temp-input');
-
-      this.element!.appendChild(input);
-    }
-
-    input.value = value;
-    return input;
-  }
-
-  /**
-   * Make a GET request.
-   */
-  get(
-    url?: Nullable<string>,
-    data?: Nullable<Record<string, any>>,
-    customMethod?: Nullable<string>,
-  ): boolean {
-    return this.submit(url, data, 'GET', customMethod);
-  }
-
-  /**
-   * Post form.
-   */
-  post(
-    url?: Nullable<string>,
-    data?: Nullable<Record<string, any>>,
-    customMethod?: Nullable<string>,
-  ) {
-    customMethod = customMethod || 'POST';
-
-    return this.submit(url, data, 'POST', customMethod);
-  }
-
-  /**
-   * Make a PUT request.
-   */
-  put(
-    url?: Nullable<string>,
-    data?: Nullable<Record<string, any>>,
-  ) {
-    return this.post(url, data, 'PUT');
-  }
-
-  /**
-   * Make a PATCH request.
-   */
-  patch(
-    url?: Nullable<string>,
-    data?: Nullable<Record<string, any>>,
-  ) {
-    return this.post(url, data, 'PATCH');
-  }
-
-  /**
-   * Make a DELETE request.
-   */
-  delete(
-    url?: Nullable<string>,
-    data?: Nullable<Record<string, any>>,
-  ) {
-    return this.post(url, data, 'DELETE');
-  }
-
-  /**
-   * @see https://stackoverflow.com/a/53739792
-   *
-   * @param {Object} ob
-   * @returns {Object}
-   */
-  static flattenObject(ob: Record<string, any>): Record<string, any> {
-    const toReturn: Record<string, any> = {};
-
-    for (let i in ob) {
-      if (!ob.hasOwnProperty(i)) {
-        continue;
-      }
-
-      if ((typeof ob[i]) === 'object' && ob[i] != null) {
-        const flatObject = this.flattenObject(ob[i]);
-
-        for (let x in flatObject) {
-          if (!flatObject.hasOwnProperty(x)) {
-            continue;
-          }
-
-          toReturn[i + '/' + x] = flatObject[x];
-        }
-      } else {
-        toReturn[i] = ob[i];
-      }
-    }
-    return toReturn;
-  }
-
-  static buildFieldName(field: string) {
-    const names = field.split('/');
-
-    const first = names.shift();
-
-    return first + names.map(name => `[${name}]`).join('');
-  }
-}
+import { data } from '../data';
+import { loadAlpine, useSystemUri } from '../service';
+import type { Nullable } from '../types';
+
+export class UnicornFormElement {
+  element: HTMLFormElement | undefined;
+  options: Record<string, any>;
+
+  constructor(
+    selector?: string | Element,
+    element?: HTMLFormElement,
+    options: Record<string, any> = {},
+  ) {
+    // If form not found, create one
+    if (!element) {
+      element = document.createElement('form');
+
+      if (typeof selector === 'string' && selector.startsWith('#')) {
+        element.setAttribute('id', selector.substring(1));
+        element.setAttribute('name', selector.substring(1));
+      }
+
+      element.setAttribute('method', 'post');
+      element.setAttribute('enctype', 'multipart/form-data');
+      element.setAttribute('novalidate', 'true');
+      element.setAttribute('action', useSystemUri('full'));
+      element.setAttribute('style', 'display: none;');
+
+      const csrf = document.createElement('input');
+      csrf.setAttribute('type', 'hidden');
+      csrf.setAttribute('name', data('csrf-token'));
+      csrf.setAttribute('value', '1');
+
+      element.appendChild(csrf);
+      document.body.appendChild(element);
+    }
+
+    this.element = element;
+    this.options = { ...options };
+  }
+
+  initComponent(store = 'form', custom = {}) {
+    return loadAlpine((Alpine) => {
+      Alpine.store(store, this.useState(custom));
+    });
+  }
+
+  useState(custom = {}) {
+    const state: Record<string, any> = {};
+    Object.getOwnPropertyNames(Object.getPrototypeOf(this))
+      .map(item => {
+        // @ts-ignore
+        return state[item] = this[item].bind(this);
+      });
+
+    return Object.assign(
+      state,
+      custom
+    );
+  }
+
+  getElement() {
+    return this.element;
+  }
+
+  submit(
+    url?: Nullable<string>,
+    data?: Nullable<Record<string, any>>,
+    method?: Nullable<string>,
+    customMethod?: Nullable<string>,
+  ): boolean {
+    const form = this.element!;
+
+    if (customMethod) {
+      let methodInput = form.querySelector<HTMLInputElement>('input[name="_method"]');
+
+      if (!methodInput) {
+        methodInput = document.createElement('input');
+        methodInput.setAttribute('name', '_method');
+        methodInput.setAttribute('type', 'hidden');
+        methodInput.value = customMethod;
+
+        form.appendChild(methodInput);
+      } else {
+        methodInput.value = customMethod;
+      }
+    }
+
+    // Set data into form.
+    if (data) {
+      const flatted = UnicornFormElement.flattenObject(data);
+
+      for (const key in flatted) {
+        const value = flatted[key];
+
+        const fieldName = UnicornFormElement.buildFieldName(key);
+        this.injectInput(fieldName, value);
+      }
+    }
+
+    if (url) {
+      form.setAttribute('action', url);
+    }
+
+    if (method) {
+      form.setAttribute('method', method);
+    }
+
+    // Use requestSubmit() to fire submit event.
+    form.requestSubmit();
+
+    return true;
+  }
+
+  injectInput(name: string, value: any) {
+    let input = this.element!.querySelector<HTMLInputElement>(`input[name="${name}"]`);
+
+    if (!input) {
+      input = document.createElement('input');
+      input.setAttribute('name', name);
+      input.setAttribute('type', 'hidden');
+      input.setAttribute('data-role', 'temp-input');
+
+      this.element!.appendChild(input);
+    }
+
+    input.value = value;
+    return input;
+  }
+
+  /**
+   * Make a GET request.
+   */
+  get(
+    url?: Nullable<string>,
+    data?: Nullable<Record<string, any>>,
+    customMethod?: Nullable<string>,
+  ): boolean {
+    return this.submit(url, data, 'GET', customMethod);
+  }
+
+  /**
+   * Post form.
+   */
+  post(
+    url?: Nullable<string>,
+    data?: Nullable<Record<string, any>>,
+    customMethod?: Nullable<string>,
+  ) {
+    customMethod = customMethod || 'POST';
+
+    return this.submit(url, data, 'POST', customMethod);
+  }
+
+  /**
+   * Make a PUT request.
+   */
+  put(
+    url?: Nullable<string>,
+    data?: Nullable<Record<string, any>>,
+  ) {
+    return this.post(url, data, 'PUT');
+  }
+
+  /**
+   * Make a PATCH request.
+   */
+  patch(
+    url?: Nullable<string>,
+    data?: Nullable<Record<string, any>>,
+  ) {
+    return this.post(url, data, 'PATCH');
+  }
+
+  /**
+   * Make a DELETE request.
+   */
+  delete(
+    url?: Nullable<string>,
+    data?: Nullable<Record<string, any>>,
+  ) {
+    return this.post(url, data, 'DELETE');
+  }
+
+  /**
+   * @see https://stackoverflow.com/a/53739792
+   *
+   * @param {Object} ob
+   * @returns {Object}
+   */
+  static flattenObject(ob: Record<string, any>): Record<string, any> {
+    const toReturn: Record<string, any> = {};
+
+    for (let i in ob) {
+      if (!ob.hasOwnProperty(i)) {
+        continue;
+      }
+
+      if ((typeof ob[i]) === 'object' && ob[i] != null) {
+        const flatObject = this.flattenObject(ob[i]);
+
+        for (let x in flatObject) {
+          if (!flatObject.hasOwnProperty(x)) {
+            continue;
+          }
+
+          toReturn[i + '/' + x] = flatObject[x];
+        }
+      } else {
+        toReturn[i] = ob[i];
+      }
+    }
+    return toReturn;
+  }
+
+  static buildFieldName(field: string) {
+    const names = field.split('/');
+
+    const first = names.shift();
+
+    return first + names.map(name => `[${name}]`).join('');
+  }
+}