@windwalker-io/unicorn-next 0.1.15 → 0.1.17

package/dist/unicorn.js

@@ -1,4 +1,4 @@
-import { am, ai, an, ao, ap, aq, _, h, ar, as, at, b, J, I, au, d, e, aj, av, aw, ax, ae, D, C, ag, ay, t, T, S, af, x, y, A, az, U, B, f, ab, i, aA, l, N, z, aB, aC, p, a9, aD, aE, aF, aG, aH, c, r, w, v, M, G, F, s, al, Q, R, P, E, L, a7, K, aI, q, a0, $, a1, Y, V, ad, aJ, X, W, aK, aL, aM, aN, aO, aP, aQ, j, a4, a2, aR, aS, g, k, a5, a3, aT, u, aU, ac, aV, Z, aW, aX, aY, aZ, n, a_, a$, ak, b0, b1, m, o, b2, b3, O, b4, b5, a8, a, b6, b7, b8, b9, ba, aa } from "./chunks/unicorn.js";
+import { am, ai, an, ao, ap, aq, _, h, ar, as, at, b, J, I, au, d, e, aj, av, aw, ax, ae, D, C, ag, ay, t, T, S, af, x, y, A, az, U, B, f, ab, i, aA, l, N, z, aB, aC, p, a9, aD, aE, aF, aG, aH, c, r, w, v, M, G, F, s, al, Q, R, P, E, L, a7, K, aI, q, a0, $, a1, aJ, Y, V, ad, aK, X, W, aL, aM, aN, aO, aP, aQ, aR, j, a4, a2, aS, aT, g, k, a5, a3, aU, u, aV, ac, aW, Z, aX, aY, aZ, a_, n, a$, b0, ak, b1, b2, m, o, b3, b4, O, b5, b6, a8, a, b7, b8, b9, ba, bb, aa } from "./chunks/unicorn.js";
 export {
   am as AttributeMutationObserver,
   ai as EventMixin,
@@ -73,58 +73,59 @@ export {
   a0 as useBs5ButtonRadio,
   $ as useBs5KeepTab,
   a1 as useBs5Tooltip,
+  aJ as useBsModalAlert,
   Y as useCheckboxesMultiSelect,
   V as useColorPicker,
   ad as useCssImport,
-  aJ as useCssIncludes,
+  aK as useCssIncludes,
   X as useDisableIfStackNotEmpty,
   W as useDisableOnSubmit,
-  aK as useFieldCascadeSelect,
-  aL as useFieldFileDrag,
-  aM as useFieldFlatpickr,
-  aN as useFieldModalSelect,
-  aO as useFieldModalTree,
-  aP as useFieldRepeatable,
-  aQ as useFieldSingleImageDrag,
+  aL as useFieldCascadeSelect,
+  aM as useFieldFileDrag,
+  aN as useFieldFlatpickr,
+  aO as useFieldModalSelect,
+  aP as useFieldModalTree,
+  aQ as useFieldRepeatable,
+  aR as useFieldSingleImageDrag,
   j as useFieldValidationInstance,
   a4 as useForm,
   a2 as useFormAsync,
-  aR as useFormComponent,
-  aS as useFormSubmit,
+  aS as useFormComponent,
+  aT as useFormSubmit,
   g as useFormValidation,
   k as useFormValidationInstance,
   a5 as useGrid,
   a3 as useGridAsync,
-  aT as useGridComponent,
+  aU as useGridComponent,
   u as useHttpClient,
-  aU as useIframeModal,
+  aV as useIframeModal,
   ac as useImport,
-  aV as useInject,
+  aW as useInject,
   Z as useKeepAlive,
-  aW as useLang,
-  aX as useLegacy,
-  aY as useListDependent,
-  aZ as useMacro,
+  aX as useLang,
+  aY as useLegacy,
+  aZ as useListDependent,
+  a_ as useMacro,
   n as useQueue,
-  a_ as useS3MultipartUploader,
-  a$ as useS3Uploader,
+  a$ as useS3MultipartUploader,
+  b0 as useS3Uploader,
   ak as useScriptImport,
-  b0 as useSeriesImport,
-  b1 as useShowOn,
+  b1 as useSeriesImport,
+  b2 as useShowOn,
   m as useStack,
   o as useSystemUri,
-  b2 as useTinymce,
-  b3 as useTinymceHook,
+  b3 as useTinymce,
+  b4 as useTinymceHook,
   O as useTomSelect,
-  b4 as useUI,
-  b5 as useUIBootstrap5,
+  b5 as useUI,
+  b6 as useUIBootstrap5,
   a8 as useUITheme,
   a as useUniDirective,
-  b6 as useUnicorn,
-  b7 as useUnicornPhpAdapter,
-  b8 as useVueComponentField,
-  b9 as useWebDirective,
-  ba as wait,
+  b7 as useUnicorn,
+  b8 as useUnicornPhpAdapter,
+  b9 as useVueComponentField,
+  ba as useWebDirective,
+  bb as wait,
   aa as watchAttributes
 };
 //# sourceMappingURL=unicorn.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windwalker-io/unicorn-next",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Unicorn framework js library",
   "type": "module",
   "typings": "dist/index.d.ts",

package/src/composable/index.ts

@@ -1,3 +1,4 @@
+export * from './useBsModalAlert';
 export * from './useCheckboxesMultiSelect';
 export * from './useFieldCascadeSelect';
 export * from './useFieldFileDrag';

package/src/composable/useBsModalAlert.ts

@@ -0,0 +1,299 @@
+import { Modal } from 'bootstrap';
+import { html } from '../service';
+import { useUIBootstrap5 } from './useUIBootstrap5';
+
+export interface BsModalAlertOptions {
+  header?: string | HTMLElement | (() => HTMLElement | Promise<HTMLElement>);
+  title?: string;
+  text?: string;
+  icon?: string | HTMLElement | (() => HTMLElement | Promise<HTMLElement>);
+  content?: string | HTMLElement | (() => HTMLElement | Promise<HTMLElement>);
+  size?: 'sm' | 'lg' | 'xl' | 'xxl';
+  relatedTarget?: HTMLElement;
+  buttons?: BsModalButton[];
+}
+
+export type BsModalButton = {
+  text?: string | ((button: HTMLElement) => void);
+  class?: string;
+  attrs?: Record<string, string>;
+  styles?: Record<string, string>;
+  dismiss?: boolean;
+  value?: any;
+  href?: string;
+  target?: string;
+  onClick?: (value?: any, e?: MouseEvent) => any;
+} | string | HTMLElement | (() => HTMLElement | Promise<HTMLElement>);
+
+export interface BsModalAlertInstance {
+  show(title: BsModalAlertOptions): Promise<any>;
+
+  show(title: string, text?: string, icon?: string, options?: BsModalAlertOptions): Promise<any>;
+
+  show(title: BsModalAlertOptions | string, text?: string, icon?: string, options?: BsModalAlertOptions): Promise<any>;
+
+  hide: () => void;
+  toggle: (relatedTarget?: HTMLElement) => void;
+  dispose: () => void;
+  destroy: () => void;
+  instance: Modal;
+  el: HTMLElement;
+}
+
+const defaultOptions = {
+  buttons: [
+    'OK'
+  ],
+};
+
+export async function useBsModalAlert(
+  options: Partial<Modal.Options>
+): Promise<BsModalAlertInstance>
+export async function useBsModalAlert(
+  id?: string | HTMLElement,
+  options?: Partial<Modal.Options>
+): Promise<BsModalAlertInstance>;
+export async function useBsModalAlert(
+  id?: string | HTMLElement | Partial<Modal.Options>,
+  options?: Partial<Modal.Options>
+): Promise<BsModalAlertInstance> {
+  await useUIBootstrap5();
+
+  let modalElement: HTMLElement | null | undefined = undefined;
+
+  if (typeof id !== 'string' && !(id instanceof HTMLElement)) {
+    options = id;
+    id = 'uni-modal-alert';
+    modalElement = document.getElementById(id);
+  } else {
+    modalElement = typeof id === 'string' ? document.getElementById(id) : id;
+  }
+
+  if (!modalElement) {
+    modalElement = html<HTMLDivElement>(`<div id="${id}" class="uni-modal-alert modal fade" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-body text-center p-4"></div>
+      <div class="modal-footer"></div>
+    </div>
+  </div>
+</div>`);
+
+    document.body.appendChild(modalElement);
+  }
+
+  const modal = Modal.getOrCreateInstance(modalElement, options);
+
+  return {
+    show: (
+      title: BsModalAlertOptions | string,
+      text?: string,
+      icon?: string,
+      options?: BsModalAlertOptions
+    ): Promise<any> => {
+      if (typeof title === 'string') {
+        options = options || {};
+        options.title = title;
+        options.text = text;
+        options.icon = icon;
+      } else {
+        options = title;
+      }
+
+      return new Promise((resolve) => {
+        prepareModalElement(modalElement, resolve, options);
+
+        modal.show(options?.relatedTarget);
+      });
+    },
+    hide: () => {
+      modal.hide();
+    },
+    dispose: () => {
+      modal.dispose();
+    },
+    toggle: (relatedTarget?: HTMLElement) => {
+      modal.toggle(relatedTarget);
+    },
+    destroy: () => {
+      modal.dispose();
+      modalElement.remove();
+    },
+    instance: modal,
+    el: modalElement,
+  };
+}
+
+async function prepareModalElement(
+  modalElement: HTMLElement,
+  handler: (value?: any) => any,
+  options?: BsModalAlertOptions
+) {
+  options = Object.assign({}, defaultOptions, options || {});
+
+  let header = options.header;
+  const content = options.content;
+
+  modalElement.querySelector('.modal-header')?.remove();
+  modalElement.querySelector('.modal-body')!.innerHTML = '';
+  modalElement.querySelector('.modal-footer')!.innerHTML = '';
+
+  const dialog = modalElement.querySelector('.modal-dialog');
+
+  dialog?.classList.remove('modal-sm', 'modal-lg', 'modal-xl', 'modal-xxl');
+
+  if (header) {
+    if (typeof header === 'string') {
+      header = `<div class="modal-header">
+        <h5 class="modal-title">${header}</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>`;
+    }
+
+    header = await anyToElement(header);
+
+    modalElement.querySelector('.modal-content')!.insertAdjacentElement('afterbegin', header);
+  }
+
+  if (content) {
+    let contentElement = await anyToElement(content);
+
+    modalElement.querySelector('.modal-body')!.appendChild(contentElement);
+  } else {
+    const title = options.title;
+    const text = options.text;
+    let icon = options.icon;
+
+    if (icon) {
+      if (typeof icon === 'string') {
+        icon = `<div class="uni-modal-alert__icon text-center mb-4"><span class="${icon}" style="font-size: 48px;"></span></div>`;
+      }
+
+      icon = await anyToElement(icon);
+
+      modalElement.querySelector('.modal-body')!.appendChild(icon);
+    }
+
+    if (title) {
+      const titleEl = html(`<h4 class="uni-modal-alert__title">${title}</h4>`);
+
+      modalElement.querySelector('.modal-body')!.appendChild(titleEl);
+    }
+
+    if (text) {
+      const textEl = html(`<div class="uni-modal-alert__text">${text}</div>`);
+
+      modalElement.querySelector('.modal-body')!.appendChild(textEl);
+    }
+  }
+
+  const buttons = options.buttons!;
+
+  for (const i in buttons) {
+    const button = buttons[i];
+    const isConfirm = buttons.length === 1 || (buttons.length === 2 && Number(i) === 1);
+
+    const buttonElement = createButton(
+      button,
+      handler,
+      isConfirm
+    );
+
+    modalElement.querySelector('.modal-footer')!.appendChild(await buttonElement);
+  }
+
+  if (options.size) {
+    modalElement.querySelector('.modal-dialog')!.classList.add(`modal-${options.size}`);
+  }
+
+  return modalElement;
+}
+
+async function anyToElement(content: string | HTMLElement | (() => (HTMLElement | Promise<HTMLElement>))) {
+  if (typeof content === 'function') {
+    return content();
+  }
+
+  return typeof content === 'string' ? html(content) : content;
+}
+
+async function createButton(
+  buttonOption: BsModalButton,
+  handler: (value?: any) => any,
+  isConfirm?: boolean): Promise<HTMLElement> {
+  if (typeof buttonOption === 'function') {
+    return await buttonOption();
+  }
+
+  if (typeof buttonOption === 'string') {
+    buttonOption = {
+      text: buttonOption,
+      value: isConfirm ?? false,
+      class: isConfirm ? 'btn btn-primary is-confirm' : 'btn btn-outline-secondary',
+      styles: isConfirm ? { width: '150px' } : {},
+      dismiss: true,
+    };
+  }
+
+  // if not HTMLElement
+  let button: HTMLElement;
+
+  if (buttonOption instanceof HTMLElement) {
+    button = buttonOption;
+  } else {
+    const {
+      text,
+      class: className = 'btn btn-secondary',
+      attrs = {},
+      styles = {},
+      dismiss = true,
+      value,
+      href,
+      target,
+      onClick
+    } = buttonOption;
+
+    const tag = href ? 'a' : 'button';
+
+    const el = document.createElement(tag);
+
+    if (el instanceof HTMLAnchorElement) {
+      el.href = href!;
+      el.target = target || '_self';
+    }
+
+    if (el instanceof HTMLButtonElement) {
+      el.type = 'button';
+    }
+
+    el.setAttribute('class', className);
+
+    for (let attr in attrs) {
+      el.setAttribute(attr, attrs[attr]);
+    }
+
+    for (let style in styles) {
+      (el.style as any)[style] = styles[style];
+    }
+
+    if (dismiss) {
+      el.setAttribute('data-bs-dismiss', 'modal');
+    }
+
+    if (typeof text === 'string') {
+      el.textContent = text;
+    } else if (typeof text === 'function') {
+      text(el);
+    }
+
+    el.addEventListener('click', (e) => {
+      onClick?.(value, e as MouseEvent);
+      handler(value);
+    });
+
+    button = el;
+  }
+
+  return button;
+}
+

package/src/composable/useForm.ts

@@ -1,19 +1,53 @@
 import type { UnicornFormElement } from '../module/form';
 import { module, selectOne } from '../service';
-import { Nullable } from '../types';
 
 let formElement: typeof UnicornFormElement;
 
-export async function useFormAsync(): Promise<UnicornFormElement>;
-export async function useFormAsync(ele?: string | Element,
-                                   options?: Record<string, any>): Promise<UnicornFormElement | null>;
-export async function useFormAsync(ele?: string | Element,
-                                   options: Record<string, any> = {}): Promise<UnicornFormElement | null> {
-  const { UnicornFormElement } = await import('../module/form');
-
-  formElement ??= UnicornFormElement;
-
-  return useForm(ele, options);
+type FormProxy = {
+  submit: (...args: Parameters<UnicornFormElement['submit']>) => Promise<ReturnType<UnicornFormElement['submit']> | undefined>;
+  get: (...args: Parameters<UnicornFormElement['get']>) => Promise<ReturnType<UnicornFormElement['get']> | undefined>;
+  post: (...args: Parameters<UnicornFormElement['post']>) => Promise<ReturnType<UnicornFormElement['post']> | undefined>;
+  put: (...args: Parameters<UnicornFormElement['put']>) => Promise<ReturnType<UnicornFormElement['put']> | undefined>;
+  patch: (...args: Parameters<UnicornFormElement['patch']>) => Promise<ReturnType<UnicornFormElement['patch']> | undefined>;
+  delete: (...args: Parameters<UnicornFormElement['delete']>) => Promise<ReturnType<UnicornFormElement['delete']> | undefined>;
+};
+
+export function useFormAsync(): FormProxy & Promise<UnicornFormElement>;
+export function useFormAsync(
+  ele?: string | Element,
+  options?: Record<string, any>): FormProxy & Promise<UnicornFormElement | null>;
+export function useFormAsync(
+  ele?: string | Element,
+  options: Record<string, any> = {}
+): FormProxy & Promise<UnicornFormElement | null> {
+  const promise = import('../module/form').then(({ UnicornFormElement }) => {
+    formElement ??= UnicornFormElement;
+
+    return useForm(ele, options);
+  });
+
+  const proxy = new Proxy({} as FormProxy, {
+    get(target, prop) {
+      return (...args: any[]) => {
+        return promise.then((form) => {
+          const func = (form as any)[prop];
+
+          if (typeof func === 'function') {
+            return func.apply(form, args);
+          }
+
+          throw new Error(`Method ${String(prop)} does not exist on form.`);
+        });
+      };
+    },
+  });
+
+  Object.assign(proxy, {
+    then: promise.then.bind(promise),
+    catch: promise.catch.bind(promise),
+  });
+
+  return proxy as FormProxy & Promise<UnicornFormElement | null>;
 }
 
 export function useForm(): UnicornFormElement;

package/src/composable/useHttp.ts

@@ -2,8 +2,55 @@ import type { UnicornHttpClient } from '../module/http-client';
 import type { AxiosInstance, CreateAxiosDefaults } from 'axios';
 export type { ApiReturn, UnicornHttpClient } from '../module/http-client';
 
-export async function useHttpClient(config?: CreateAxiosDefaults | AxiosInstance): Promise<UnicornHttpClient> {
-  const { createHttpClient } = await import('../module/http-client');
+type UnicornHttpClientProxy = {
+  request: UnicornHttpClient['request'];
+  get: UnicornHttpClient['get'];
+  post: UnicornHttpClient['post'];
+  put: UnicornHttpClient['put'];
+  patch: UnicornHttpClient['patch'];
+  delete: UnicornHttpClient['delete'];
+  head: UnicornHttpClient['head'];
+  options: UnicornHttpClient['options'];
+  http: Promise<UnicornHttpClient>;
+};
 
-  return createHttpClient(config as CreateAxiosDefaults | undefined);
+export function useHttpClient(config?: CreateAxiosDefaults | AxiosInstance): UnicornHttpClientProxy & Promise<UnicornHttpClient> {
+  const promise = import('../module/http-client').then(({ createHttpClient }) => {
+    return createHttpClient(config as CreateAxiosDefaults | undefined);
+  });
+
+  const data: UnicornHttpClientProxy = {
+    request: (options) => {
+      return promise.then((client) => client.request(options));
+    },
+    get: (url, options) => {
+      return promise.then((client) => client.get(url, options));
+    },
+    post: (url, data, options) => {
+      return promise.then((client) => client.post(url, data, options));
+    },
+    put: (url, data, options) => {
+      return promise.then((client) => client.put(url, data, options));
+    },
+    patch: (url, data, options) => {
+      return promise.then((client) => client.patch(url, data, options));
+    },
+    delete: (url, data, options) => {
+      return promise.then((client) => client.delete(url, data, options));
+    },
+    head: (url, options) => {
+      return promise.then((client) => client.head(url, options));
+    },
+    options: (url, options) => {
+      return promise.then((client) => client.options(url, options));
+    },
+    http: promise,
+  };
+
+  Object.assign(data, {
+    then: promise.then.bind(promise),
+    catch: promise.catch.bind(promise),
+  });
+
+  return data as UnicornHttpClientProxy & Promise<UnicornHttpClient>;
 }

package/src/composable/useUIBootstrap5.ts

@@ -46,3 +46,5 @@ export const useBs5ButtonRadio: typeof UIBootstrap5.prototype.buttonRadio = asyn
 
   return bs5.buttonRadio(selector, options);
 };
+
+