@windwalker-io/unicorn-next 0.1.0

package/src/composable/useStack.ts

@@ -0,0 +1,13 @@
+
+import { Dictionary } from '../types';
+import { Stack, stack } from '@lyrasoft/ts-toolkit/generic';
+
+const stacks: Dictionary<Stack> = {};
+
+export function useStack<T = any>(name: string = 'default', store: any[] = []): Stack<T> {
+  return stacks[name] ??= createStack<T>(store);
+}
+
+export function createStack<T = any>(store: any[] = []): Stack<T> {
+  return stack<T>(store);
+}

package/src/composable/useTinymce.ts

@@ -0,0 +1,29 @@
+import type { TinymceController, TinymceModule } from '../module/tinymce';
+import type { MaybePromise } from '../types';
+import type { TinyMCE } from 'tinymce';
+
+export async function useTinymce(): Promise<TinymceModule>
+export async function useTinymce(
+  selector?: string,
+  options?: Record<string, any>
+): Promise<TinymceController>;
+export async function useTinymce(
+  selector?: string,
+  options: Record<string, any> = {}
+): Promise<any> {
+  const module = await import('../module/tinymce');
+
+  if (selector) {
+    return module.get(selector, options);
+  }
+
+  return module;
+}
+
+export async function useTinymceHook(
+  handler: ((tinymce: TinyMCE) => MaybePromise<any>)
+): Promise<void> {
+  const { addHook } = await import('../module/tinymce');
+
+  return addHook(handler);
+}

package/src/composable/useTomSelect.ts

@@ -0,0 +1,72 @@
+import { module, useCssImport, useCssIncludes, useImport, wait } from '../service';
+import type { Nullable } from '../types';
+import { mergeDeep } from '../utilities';
+
+/**
+ * @see https://tom-select.js.org/
+ */
+export async function useTomSelect(
+  selector?: Nullable<string | HTMLElement | NodeListOf<HTMLElement>>,
+  options: Record<string, any> = {},
+  theme: string = 'bootstrap5'
+) {
+  const [m] = await wait(
+    useImport('@vendor/tom-select/dist/js/tom-select.complete.min.js'),
+    useCssImport(`@vendor/tom-select/dist/css/tom-select.${theme}.min.css`)
+  );
+
+  if (selector) {
+    module<any, HTMLSelectElement>(
+      selector,
+      'tom.select',
+      (ele) => {
+        options = mergeDeep({
+          allowEmptyOption: true,
+          maxOptions: null,
+          plugins: {
+            caret_position: {},
+            clear_button: {},
+          }
+        }, options);
+
+        if ((ele as HTMLSelectElement).multiple) {
+          options.plugins.remove_button = {};
+        } else {
+          options.plugins.dropdown_input = {};
+        }
+
+        // Auto select first if options changed.
+        // @see https://github.com/orchidjs/tom-select/issues/362
+        class UnicornTomSelect extends TomSelect {
+          syncOptionsWithoutKeepSelected() {
+            const oldValue = ele.value;
+
+            this.clear();
+            this.clearOptions();
+            this.sync();
+
+            if (ele.value !== oldValue) {
+              this.setValue(
+                ele.querySelector<HTMLOptionElement>(`option[value="${oldValue}"]`)?.value
+                ?? ele.querySelector<HTMLOptionElement>('option')?.value
+                ?? '',
+                true
+              );
+            }
+          }
+        }
+
+        // @ts-ignore
+        const t = new UnicornTomSelect(ele as TomInput, options);
+
+        ele.addEventListener('list:updated', () => {
+          t.syncOptionsWithoutKeepSelected();
+        });
+
+        return t;
+      }
+    );
+  }
+
+  return m;
+}

package/src/composable/useUIBootstrap5.ts

@@ -0,0 +1,48 @@
+import type { Tooltip } from 'bootstrap';
+import { ButtonRadioOptions } from '../bootstrap/button-radio';
+import type { KeepTabOptions } from '../bootstrap/keep-tab';
+import type { UIBootstrap5 } from '../module/ui-bootstrap5';
+import { useUITheme } from '../service';
+
+export async function useUIBootstrap5(install = false, pushToGlobal = false): Promise<UIBootstrap5> {
+  const { UIBootstrap5 } = await import('../module/ui-bootstrap5');
+
+  const theme = UIBootstrap5.get();
+
+  if (install) {
+    useUITheme(theme);
+
+    if (pushToGlobal) {
+      theme.pushBootstrapToGlobal();
+    }
+  }
+
+  return theme;
+}
+
+export async function useBs5Tooltip(
+  selector: NodeListOf<Element> | Element | string = '[data-bs-toggle="tooltip"]',
+  config: Partial<Tooltip.Options> = {}
+): Promise<Tooltip[]> {
+  const bs5 = await useUIBootstrap5();
+
+  return bs5.tooltip(selector, config);
+}
+
+export const useBs5KeepTab: typeof UIBootstrap5.prototype.keepTab = async (
+  selector?: string | HTMLElement,
+  options: KeepTabOptions = {}
+): Promise<any> => {
+  const bs5 = await useUIBootstrap5();
+
+  return bs5.keepTab(selector, options);
+};
+
+export const useBs5ButtonRadio: typeof UIBootstrap5.prototype.buttonRadio = async (
+  selector?: string | HTMLElement,
+  options: ButtonRadioOptions = {}
+): Promise<any> => {
+  const bs5 = await useUIBootstrap5();
+
+  return bs5.buttonRadio(selector, options);
+};

package/src/composable/useUniDirective.ts

@@ -0,0 +1,32 @@
+import { Dictionary } from '../types';
+import type { default as WebDirective } from 'web-directive';
+import type { WebDirectiveHandler, WebDirectiveOptions } from 'web-directive/src/types';
+
+let instances: Dictionary<WebDirective> = {};
+
+export async function useWebDirective(
+  name: string = 'unicorn',
+  options: Partial<WebDirectiveOptions> = {}
+): Promise<WebDirective> {
+  return instances[name] ??= await createWebDirective(Object.assign({}, options, { prefix: 'uni-' }));
+}
+
+export async function useUniDirective<T extends Element = HTMLElement>(
+  name: string,
+  handler: WebDirectiveHandler<T>,
+  wdInstance: WebDirective | string = 'unicorn'
+): Promise<void> {
+  const wd = typeof wdInstance === 'string' ? await useWebDirective(wdInstance) : wdInstance;
+
+  // Todo: Should fix web-directive types
+  wd.register(name, handler as WebDirectiveHandler<any>);
+}
+
+async function createWebDirective(options: Partial<WebDirectiveOptions> = {}): Promise<WebDirective> {
+  const WebDirective = (await import('web-directive')).default;
+
+  const wd = new WebDirective(options);
+  wd.listen();
+
+  return wd;
+}

package/src/composable/useValidation.ts

@@ -0,0 +1,39 @@
+import type {
+  UnicornFieldValidation,
+  UnicornFormValidation,
+  ValidationHandler,
+  ValidationModule
+} from '../module/validation';
+import { getBoundedInstance } from '../service';
+
+export async function useFormValidation(): Promise<ValidationModule>;
+export async function useFormValidation(selector: string | Element): Promise<UnicornFormValidation | null>;
+export async function useFormValidation(selector?: string | Element): Promise<any> {
+  const module = await import('../module/validation');
+
+  await module.ready;
+
+  if (!selector) {
+    return module;
+  }
+
+  return useFormValidationSync(selector);
+}
+
+export function useFormValidationSync(selector: string | Element): UnicornFormValidation | null {
+  return getBoundedInstance<UnicornFormValidation>(selector, 'form.validation');
+}
+
+export function useFieldValidationSync(selector: string | Element): UnicornFieldValidation | null {
+  return getBoundedInstance<UnicornFieldValidation>(selector, 'field.validation');
+}
+
+export async function addGlobalValidator(
+  name: string,
+  validator: ValidationHandler,
+  options: Record<string, any> = {}
+): Promise<void> {
+  const { UnicornFormValidation } = await useFormValidation();
+
+  UnicornFormValidation.addGlobalValidator(name, validator, options);
+}

package/src/data.ts

@@ -0,0 +1,36 @@
+import { getData, setData, removeData as rmdata } from './utilities';
+
+export function data(name: string, data: any): any;
+export function data(name: string): any;
+export function data(ele: Element, name: string): any;
+export function data(ele: Element, name: string, data?: any): any;
+export function data(ele: Element | string, name: any = undefined, value: any = undefined) {
+  if (!(ele instanceof HTMLElement)) {
+    value = name;
+    name = ele;
+    ele = document as any as Element;
+  }
+
+  if (name === undefined) {
+    return getData(ele);
+  }
+
+  if (value === undefined) {
+    const res = getData(ele, name);
+
+    return res;
+  }
+
+  setData(ele, name, value);
+}
+
+export function removeData(name: string): any;
+export function removeData(ele: Element, name: string): any;
+export function removeData(ele: Element|string, name: any = undefined) {
+  if (!(ele instanceof HTMLElement)) {
+    name = ele;
+    ele = document as any as Element;
+  }
+
+  rmdata(ele, name);
+}

package/src/events.ts

@@ -0,0 +1,73 @@
+export abstract class EventMixin implements EventAwareInterface {
+  _listeners: Record<string, EventHandler[]> = {};
+
+  on(event: string | string[], handler: EventHandler): this {
+    if (Array.isArray(event)) {
+      for (const e of event) {
+        this.on(e, handler);
+      }
+      return this;
+    }
+
+    this._listeners[event] ??= [];
+
+    this._listeners[event].push(handler);
+
+    return this;
+  }
+
+  once(event: string | string[], handler: EventHandler): this {
+    handler.once = true;
+    return this.on(event, handler);
+  }
+
+  off(event: string, handler?: EventHandler): this {
+    if (handler) {
+      this._listeners[event] = this.listeners(event).filter((listener) => listener !== handler);
+      return this;
+    }
+
+    delete this._listeners[event];
+
+    return this;
+  }
+
+  trigger(event: string | string[], ...args: any[]): this {
+    if (Array.isArray(event)) {
+      for (const e of event) {
+        this.trigger(e);
+      }
+      return this;
+    }
+
+    for (const listener of this.listeners(event)) {
+      listener(...args);
+    }
+
+    // Remove once
+    this._listeners[event] = this.listeners(event).filter((listener) => listener?.once !== true);
+
+    return this;
+  }
+
+  listeners(event: string): EventHandler[] {
+    return this._listeners[event] === undefined ? [] : this._listeners[event];
+  }
+}
+
+// export class EventBus extends Mixin(EventMixin) {
+// }
+
+export type EventHandler = ((...event: any[]) => void) & { once?: boolean };
+
+export interface EventAwareInterface {
+  on(event: string | string[], handler: EventHandler): this;
+
+  once(event: string | string[], handler: EventHandler): this;
+
+  off(event: string, handler?: EventHandler): this;
+
+  trigger(event: string | string[], ...args: any[]): this;
+
+  listeners(event: string): EventHandler[];
+}

package/src/legacy/legacy.ts

@@ -0,0 +1,186 @@
+import { numberFormat } from '@lyrasoft/ts-toolkit/generic';
+import { sprintf, vsprintf } from 'sprintf-js';
+import {
+  addGlobalValidator,
+  useBs5Tooltip,
+  useCheckboxesMultiSelect,
+  useFieldValidationSync,
+  useForm,
+  useFormAsync,
+  useFormValidation,
+  useFormValidationSync,
+  useGrid,
+  useGridAsync,
+  useHttpClient,
+  useQueue,
+  useStack,
+  useTomSelect,
+  useUniDirective
+} from '../composable';
+import {
+  __,
+  animateTo,
+  base64UrlDecode,
+  base64UrlEncode,
+  clearMessages,
+  clearNotifies,
+  debounce,
+  delegate,
+  domready,
+  fadeIn,
+  fadeOut,
+  getBoundedInstance,
+  getBoundedInstanceList,
+  h,
+  highlight,
+  html,
+  initAlpineComponent,
+  isDebug,
+  loadAlpine,
+  mark,
+  module,
+  notify,
+  prepareAlpine,
+  renderMessage,
+  route,
+  selectAll,
+  selectOne,
+  serial,
+  simpleAlert,
+  simpleConfirm,
+  slideDown,
+  slideToggle,
+  slideUp,
+  throttle,
+  tid,
+  uid,
+  useAssetUri,
+  useColorPicker,
+  useDisableIfStackNotEmpty,
+  useDisableOnSubmit,
+  useKeepAlive,
+  useSystemUri
+} from '../service';
+import { LegacyLoader } from './loader';
+
+export async function useLegacyMethods(app: any) {
+  const http = await useHttpClient();
+
+  app.use(LegacyLoader);
+
+  handleUri(app);
+  handlerHelper(app);
+  handleCrypto(app);
+
+  app.__ = __;
+  app.trans = __;
+  app.route = route;
+  app.$http = http;
+  app.directive = useUniDirective;
+
+  app.animate = animateTo;
+  app.$animation = { to: animateTo };
+
+  app.addMessage = renderMessage;
+  app.clearMessages = clearMessages;
+  app.notify = notify;
+  app.clearNotifies = clearNotifies;
+
+  app.loadAlpine = loadAlpine;
+  app.initAlpine = initAlpineComponent;
+  app.beforeAlpineInit = prepareAlpine;
+  app.prepareAlpine = prepareAlpine;
+
+  handleUI(app);
+
+  await handleFormGrid(app);
+
+  app.formValidation = useFormValidation;
+  app.$validation = {
+    get: useFormValidationSync,
+    getField: useFieldValidationSync,
+    addGlobalValidator: addGlobalValidator,
+    import: () => useFormValidation()
+  };
+
+  app.stack = useStack;
+  app.queue = useQueue;
+}
+
+function handleCrypto(app: any) {
+  app.base64Encode = base64UrlEncode;
+  app.base64Decode = base64UrlDecode;
+  // app.uuid4 = uuid4;
+  app.uid = uid;
+  app.tid = tid;
+  // app.md5 = md5;
+  app.serial = serial;
+}
+
+function handleUri(app: any) {
+  app.uri = useSystemUri;
+  app.asset = useAssetUri;
+}
+
+function handlerHelper(app: any) {
+  app.domready = domready;
+  app.selectOne = selectOne;
+  app.selectAll = selectAll;
+  app.each = selectAll;
+  app.getBoundedInstance = getBoundedInstance;
+  app.getBoundedInstanceList = getBoundedInstanceList;
+  app.module = module;
+  app.h = h;
+  app.html = html;
+  // app.$get = get;
+  // app.$set = set;
+  app.delegate = delegate;
+  app.debounce = debounce;
+  app.throttle = throttle;
+  app.isDebug = isDebug;
+  app.confirm = simpleConfirm;
+  app.alert = simpleAlert;
+  app.numberFormat = numberFormat;
+  app.sprintf = sprintf;
+  app.vsprintf = vsprintf;
+  // app.genRandomString = genRandomString;
+  // app.defaultsDeep = defaultsDeep;
+}
+
+function handleUI(app: any) {
+  app.$ui ??= {};
+  app.$ui.addMessage = renderMessage;
+  app.$ui.clearMessages = clearMessages;
+  app.$ui.notify = notify;
+  app.$ui.clearNotifies = clearNotifies;
+
+  app.$ui.loadAlpine = loadAlpine;
+  app.$ui.initAlpine = initAlpineComponent;
+  app.$ui.beforeAlpineInit = prepareAlpine;
+  app.$ui.prepareAlpine = prepareAlpine;
+
+  app.$ui.mark = mark;
+  app.$ui.tomSelect = useTomSelect;
+  app.$ui.slideUp = slideUp;
+  app.$ui.slideDown = slideDown;
+  app.$ui.slideToggle = slideToggle;
+  app.$ui.fadeOut = fadeOut;
+  app.$ui.fadeIn = fadeIn;
+  app.$ui.highlight = highlight;
+  app.$ui.colorPicker = useColorPicker;
+  app.$ui.disableOnSubmit = useDisableOnSubmit;
+  app.$ui.disableIfStackNotEmpty = useDisableIfStackNotEmpty;
+  app.$ui.checkboxesMultiSelect = useCheckboxesMultiSelect;
+  app.$ui.keepAlive = useKeepAlive;
+  app.$ui.bootstrap = {
+    tooltip: useBs5Tooltip
+  };
+}
+
+async function handleFormGrid(app: any) {
+  await useFormAsync();
+  await useGridAsync();
+
+  app.form = useForm;
+  app.grid = useGrid;
+}

package/src/legacy/loader.ts

@@ -0,0 +1,125 @@
+import { isDebug } from '../service';
+
+const imports: Record<string, { promise: Promise<any>; resolve?: Function; }> = {};
+
+export class LegacyLoader {
+  static install(app: any) {
+    const loader = app.$loader = new this(app);
+
+    app.import = loader.import.bind(loader);
+    app.importSync = loader.importSync.bind(loader);
+    app.importCSS = loader.importCSS.bind(loader);
+    app.minFileName = loader.minFileName.bind(loader);
+    app.afterImported = loader.afterImported.bind(loader);
+  }
+
+  constructor(protected app: any) {
+    //
+  }
+
+  doImport(src: string): Promise<any> {
+    return S.import(src);
+  }
+
+  /**
+   * Import modules or scripts.
+   */
+  import(...src: any[]): Promise<any|any[]> {
+    if (src.length === 1) {
+      return this.doImport(src[0]);
+    }
+
+    const promises: Promise<any>[] = [];
+
+    src.forEach((link) => {
+      promises.push(
+        link instanceof Promise ? link : this.doImport(link)
+      );
+    });
+
+    return Promise.all(promises);
+  }
+
+  /**
+   * Import sync.
+   */
+  importSync(...src: any): Promise<any|any[]> {
+    let promise: Promise<any> = Promise.resolve();
+    let url: string[];
+    const modules: any[] = [];
+
+    while (url = src.shift()) {
+      if (!Array.isArray(url)) {
+        url = [ url ];
+      }
+
+      const target = url;
+      promise = promise.then(
+        () => this.import(...target).then((m) => {
+          modules.push(m);
+          return modules;
+        })
+      );
+    }
+
+    return promise;
+  }
+
+  /**
+   * Import CSS files.
+   */
+  async importCSS(...src: any): Promise<any|any[]> {
+    let modules: any = await this.import(...src);
+
+    if (!Array.isArray(modules)) {
+      modules = [modules];
+    }
+
+    const styles: CSSStyleSheet[] = (modules as any[]).map(module => module.default);
+
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, ...styles];
+  }
+
+  minFileName(fileName: string): string {
+    const segments = fileName.split('.');
+    const ext = segments.pop();
+
+    if (isDebug()) {
+      return segments.join('.') + '.min.' + ext;
+    }
+
+    return fileName;
+  }
+
+  asImported(name: string) {
+    if (!imports[name]) {
+      imports[name] = {
+        promise: Promise.resolve(),
+        resolve: undefined
+      };
+    } else {
+      imports[name]?.resolve?.();
+    }
+  }
+
+  /**
+   * Add after import hook for some url or id.
+   */
+  afterImported(name: string, callback: (resolve: Function, reject?: Function) => void): Promise<any> {
+    if (!imports[name]) {
+      let r;
+      imports[name] = {
+        promise: new Promise((resolve) => {
+          r = resolve;
+        }),
+      };
+
+      imports[name].resolve = r;
+    }
+
+    imports[name].promise.then(callback);
+
+    return imports[name].promise;
+  }
+}
+