@windwalker-io/unicorn-next 0.1.0

package/src/module/http-client.ts

@@ -0,0 +1,243 @@
+import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, CreateAxiosDefaults } from 'axios';
+import AxiosStatic, { AxiosError, isAxiosError, isCancel } from 'axios';
+import { parseTemplate } from 'url-template';
+import { data } from '../data';
+import { route } from '../service';
+
+export interface ApiReturn<T = any> {
+  success: boolean;
+  message?: string;
+  code: number;
+  status: number;
+  data: T;
+}
+
+declare module 'axios' {
+  export interface AxiosRequestConfig {
+    vars?: Record<string, any>;
+    methodSimulate?: string;
+    methodSimulateByHeader?: boolean;
+  }
+
+  export interface CreateAxiosDefaults {
+  }
+}
+
+function prepareAxios(axios: AxiosInstance): AxiosInstance {
+  axios.interceptors.request.use((config) => {
+    config.headers['X-CSRF-Token'] = data('csrf-token');
+
+    if (config.url && config.url.startsWith('@')) {
+      config.url = route(config.url);
+    }
+
+    if (config?.vars && config.url) {
+      const tmpl = parseTemplate(config.url);
+      config.url = tmpl.expand(config.vars || {});
+    }
+
+    // Simulate methods
+    if (config.methodSimulate) {
+      if (config.methodSimulateByHeader) {
+        config.headers['X-HTTP-Method-Override'] = config;
+      } else if (typeof config.data === 'object') {
+        config.data['_method'] = config.method;
+      } else if (typeof config.data === 'string') {
+        if (config.data.includes('?')) {
+          config.data += '&_method=' + config.method;
+        } else {
+          config.data += '?_method=' + config.method;
+        }
+      }
+
+      if (config.method?.toLowerCase() !== 'get') {
+        config.method = 'POST';
+      }
+    }
+
+    return config;
+  });
+
+  return axios;
+}
+
+export type UnicornHttpClient = ReturnType<typeof createHttpClient>;
+
+export function createHttpClient(config?: CreateAxiosDefaults | AxiosInstance) {
+  const axios = config && 'interceptors' in config
+    ? config
+    : AxiosStatic.create(config ?? {});
+
+  prepareAxios(axios);
+
+  function requestMiddleware(callback: Parameters<AxiosInstance['interceptors']['request']['use']>[0]) {
+    return axios.interceptors.request.use(callback);
+  }
+
+  function responseMiddleware(callback: Parameters<AxiosInstance['interceptors']['response']['use']>[0]) {
+    return axios.interceptors.response.use(callback);
+  }
+
+  /**
+   * Send a GET request.
+   */
+  async function get<T = any, D = any>(
+    url: string,
+    options: Partial<AxiosRequestConfig> = {}
+  ): Promise<AxiosResponse<T, D>> {
+    options.url = url;
+    options.method = 'GET';
+
+    return request(options);
+  }
+
+  /**
+   * Send a POST request.
+   */
+  async function post<T = any, D = any>(
+    url: string,
+    data?: any,
+    options: Partial<AxiosRequestConfig> = {}
+  ): Promise<AxiosResponse<T, D>> {
+    options.url = url;
+    options.method = 'POST';
+    options.data = data;
+
+    return request(options);
+  }
+
+  /**
+   * Send a PUT request.
+   *
+   * @param {string} url
+   * @param {any} data
+   * @param {AxiosRequestConfig} options
+   *
+   * @returns {Promise<AxiosResponse>}
+   */
+  async function put<T = any, D = any>(
+    url: string,
+    data?: any,
+    options: Partial<AxiosRequestConfig> = {}
+  ): Promise<AxiosResponse<T, D>> {
+    options.url = url;
+    options.method = 'PUT';
+    options.data = data;
+
+    return request(options);
+  }
+
+  /**
+   * Send a PATCH request.
+   *
+   * @param {string} url
+   * @param {any} data
+   * @param {AxiosRequestConfig} options
+   *
+   * @returns {Promise<AxiosResponse>}
+   */
+  async function patch<T = any, D = any>(
+    url: string,
+    data?: any,
+    options: Partial<AxiosRequestConfig> = {}
+  ): Promise<AxiosResponse<T, D>> {
+    options.url = url;
+    options.method = 'PATCH';
+    options.data = data;
+
+    return request(options);
+  }
+
+  /**
+   * Send a DELETE request.
+   *
+   * @param {string} url
+   * @param {any} data
+   * @param {AxiosRequestConfig} options
+   *
+   * @returns {Promise<AxiosResponse>}
+   */
+  async function deletes<T = any, D = any>(
+    url: string,
+    data?: any,
+    options: Partial<AxiosRequestConfig> = {}
+  ): Promise<AxiosResponse<T, D>> {
+    options.url = url;
+    options.method = 'DELETE';
+    options.data = data;
+
+    return request(options);
+  }
+
+  /**
+   * Send a HEAD request.
+   *
+   * @param {string} url
+   * @param {AxiosRequestConfig} options
+   *
+   * @returns {Promise<AxiosResponse>}
+   */
+  async function head<T = any, D = any>(
+    url: string,
+    options: Partial<AxiosRequestConfig> = {}
+  ): Promise<AxiosResponse<T, D>> {
+    options.url = url;
+    options.method = 'HEAD';
+
+    return request(options);
+  }
+
+  /**
+   * Send a OPTIONS request.
+   *
+   * @param {string} url
+   * @param {AxiosRequestConfig} options
+   *
+   * @returns {Promise<AxiosResponse>}
+   */
+  async function options<T = any, D = any>(
+    url: string,
+    options: Partial<AxiosRequestConfig> = {}
+  ): Promise<AxiosResponse<T, D>> {
+    options.url = url;
+    options.method = 'OPTIONS';
+
+    return request(options);
+  }
+
+  /**
+   * Send request.
+   */
+  async function request<T = any, D = any>(options: AxiosRequestConfig): Promise<AxiosResponse<T, D>> {
+    try {
+      return await axios(options);
+    } catch (e) {
+      (e as any).originMessage = (e as Error).message;
+
+      const err = e as AxiosError<any>;
+
+      if (err.response?.data?.message) {
+        err.message = err.response.data.message;
+      }
+
+      throw err;
+    }
+  }
+
+  return {
+    axios,
+    request,
+    get,
+    post,
+    put,
+    patch,
+    delete: deletes,
+    head,
+    options,
+    requestMiddleware,
+    responseMiddleware,
+    isCancel,
+    AxiosError,
+    isAxiosError,
+  };
+}

package/src/module/iframe-modal.ts

@@ -0,0 +1,167 @@
+import { Modal } from 'bootstrap';
+import { useUniDirective } from '../composable';
+import { mergeDeep } from '../utilities';
+
+interface IFrameModalOptions {
+  id?: string;
+  size?: string;
+  resize?: boolean;
+  height?: string;
+}
+
+export class IFrameModalElement extends HTMLElement {
+  static is = 'uni-iframe-modal';
+
+  options!: IFrameModalOptions;
+  modalElement!: HTMLDivElement;
+  modal!: Modal;
+  iframe!: HTMLIFrameElement;
+
+  template() {
+    return `
+<div class="modal fade c-unicorn-iframe-modal" id="${this.getModalId()}"
+    data-iframe-modal>
+    <div class="modal-dialog ${this.options?.size || 'modal-xl'}">
+        <div class="modal-content">
+            <div class="modal-body">
+                <iframe class="c-unicorn-iframe-modal__iframe" width="100%" src="" frameborder="0"></iframe>
+            </div>
+        </div>
+    </div>
+</div>`;
+  }
+
+  get selector() {
+    return this.getAttribute('selector') || '[data-iframe-modal]';
+  }
+
+  async getBootstrapModal() {
+    const { Modal } = await import('bootstrap');
+
+    return this.modal ??= Modal.getOrCreateInstance(this.modalElement);
+  }
+
+  connectedCallback() {
+    this.options = JSON.parse(this.getAttribute('options') || '{}');
+
+    if (!this.innerHTML.trim()) {
+      this.innerHTML = this.template();
+    }
+
+    this.modalElement = this.querySelector<HTMLDivElement>(this.selector)!;
+    this.iframe = this.modalElement.querySelector<HTMLIFrameElement>('iframe')!;
+
+    // @ts-ignore
+    this.iframe.modalLink = () => {
+      return this;
+    };
+
+    this.bindEvents();
+    this.getBootstrapModal();
+  }
+
+  bindEvents() {
+    this.modalElement.addEventListener('hidden.bs.modal', () => {
+      this.iframe.src = '';
+    });
+  }
+
+  async open(href: string, options: IFrameModalOptions = {}) {
+    options = mergeDeep(
+      {
+        height: undefined,
+        resize: false,
+        size: 'modal-lg',
+      },
+      this.options,
+      options
+    );
+
+    if (options.resize) {
+      const onload = () => {
+        this.resize(this.iframe);
+
+        this.iframe.removeEventListener('load', onload);
+      };
+
+      this.iframe.addEventListener('load', onload);
+    } else {
+      this.iframe.style.height = options.height || '500px';
+    }
+
+    if (options.size != null) {
+      const dialog = this.modalElement.querySelector<HTMLDivElement>('.modal-dialog')!;
+      dialog.classList.remove('modal-lg', 'modal-xl', 'modal-sm', 'modal-xs');
+      dialog.classList.add(options.size);
+    }
+
+    this.iframe.src = href;
+    const modal = await this.getBootstrapModal();
+    modal.show();
+  }
+
+  async close() {
+    this.iframe.src = '';
+    const modal = await this.getBootstrapModal();
+    modal.hide();
+  }
+
+  resize(iframe: HTMLIFrameElement) {
+    setTimeout(() => {
+      if (!iframe.contentWindow) {
+        return;
+      }
+
+      let height = iframe.contentWindow.document.documentElement.scrollHeight;
+
+      height += 30;
+
+      if (height < 500) {
+        height = 500;
+      }
+
+      iframe.style.height = height + 'px';
+    }, 30);
+  }
+
+  getModalId() {
+    return this.options?.id || this.id + '__modal';
+  }
+}
+
+customElements.define(IFrameModalElement.is, IFrameModalElement);
+
+export const ready = useUniDirective('modal-link', {
+  mounted(el, binding) {
+    let options: IFrameModalOptions = {};
+
+    options.height = el.dataset.height;
+    options.resize = el.dataset.resize === '1' || el.dataset.resize === 'true';
+    options.size = el.dataset.size;
+
+    const target = binding.value;
+
+    el.style.pointerEvents = '';
+
+    el.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const im = document.querySelector(target);
+      
+      if (!im) {
+        return;
+      }
+      
+      if ('src' in el) {
+        im.open(el.src, options);
+      } else if ('href' in el) {
+        im.open(el.href, options);
+      }
+    });
+  }
+});
+
+export interface IframeModalModule {
+  IFrameModalElement: typeof IFrameModalElement;
+  ready: typeof ready;
+}