@windwalker-io/unicorn-next 0.1.0

package/src/plugin/index.ts

@@ -0,0 +1 @@
+export * from './php-adapter';

package/src/plugin/php-adapter.ts

@@ -0,0 +1,65 @@
+import type { UnicornApp } from '../app';
+import {
+  useFieldCascadeSelect,
+  useFieldFileDrag,
+  useFieldFlatpickr,
+  useFieldModalSelect, useFieldModalTree,
+  useFieldRepeatable,
+  useFieldSingleImageDrag,
+  useIframeModal, useS3Uploader,
+  useShowOn, useTomSelect,
+} from '../composable';
+import { useFieldMultiUploader } from '../composable/useFieldMultiUploader';
+import { useTinymce } from '../composable/useTinymce';
+import { useUnicorn } from '../unicorn';
+
+declare module '../app' {
+  export interface UnicornApp {
+    /** @deprecated Only for code generator use. */
+    $ui: typeof methods;
+  }
+}
+
+// @ts-ignore
+declare module '@windwalker-io/unicorn-next' {
+  export interface UnicornApp {
+    /** @deprecated Only for code generator use. */
+    $ui: typeof methods;
+  }
+}
+
+export function useUnicornPhpAdapter(app?: UnicornApp) {
+  app ??= useUnicorn();
+
+  app.use(UnicornPhpAdapter);
+
+  return app.$ui;
+}
+
+const methods = {
+  repeatable: useFieldRepeatable,
+  flatpickr: useFieldFlatpickr,
+  fileDrag: useFieldFileDrag,
+  modalField: useFieldModalSelect,
+  cascadeSelect: useFieldCascadeSelect,
+  sid: useFieldSingleImageDrag,
+  tinymce: {
+    init: useTinymce
+  },
+  s3Uploader: useS3Uploader,
+  iframeModal: useIframeModal,
+  initShowOn: useShowOn,
+  modalTree: useFieldModalTree,
+  multiUploader: useFieldMultiUploader,
+  tomSelect: useTomSelect,
+};
+
+export class UnicornPhpAdapter {
+  static install(app: UnicornApp) {
+    if (app.$ui) {
+      app.$ui = { ...app.$ui, ...methods };
+    } else {
+      app.$ui = methods;
+    }
+  }
+}

package/src/polyfill/form-request-submit.ts

@@ -0,0 +1,31 @@
+// @ts-nocheck
+// @see https://github.com/javan/form-request-submit-polyfill
+export function formRequestSubmit(prototype) {
+  if (typeof prototype.requestSubmit == 'function') {
+    return;
+  }
+
+  prototype.requestSubmit = function (submitter) {
+    if (submitter) {
+      validateSubmitter(submitter, this);
+      submitter.click();
+    } else {
+      submitter = document.createElement('input');
+      submitter.type = 'submit';
+      submitter.hidden = true;
+      this.appendChild(submitter);
+      submitter.click();
+      this.removeChild(submitter);
+    }
+  };
+
+  function validateSubmitter(submitter, form) {
+    submitter instanceof HTMLElement || raise(TypeError, 'parameter 1 is not of type \'HTMLElement\'');
+    submitter.type == 'submit' || raise(TypeError, 'The specified element is not a submit button');
+    submitter.form == form || raise(DOMException, 'The specified element is not owned by this form element', 'NotFoundError');
+  }
+
+  function raise(errorConstructor, message, name) {
+    throw new errorConstructor('Failed to execute \'requestSubmit\' on \'HTMLFormElement\': ' + message + '.', name);
+  }
+}

package/src/polyfill/index.ts

@@ -0,0 +1,9 @@
+
+import { formRequestSubmit } from './form-request-submit';
+
+export function polyfill() {
+  // If in browser
+  if (typeof window !== 'undefined') {
+    formRequestSubmit(HTMLFormElement.prototype);
+  }
+}

package/src/service/animate.ts

@@ -0,0 +1,58 @@
+import { selectOne } from './dom';
+
+export function animateTo(
+  element: HTMLElement,
+  styles: Partial<Record<keyof CSSStyleDeclaration, any>>,
+  options: number | KeyframeAnimationOptions = {}
+): Animation {
+  element = selectOne(element);
+
+  const currentStyles = window.getComputedStyle(element);
+  const transitions: Record<string, any[]> = {};
+
+  for (const name in styles) {
+    const value = styles[name];
+
+    transitions[name] = Array.isArray(value)
+      ? value
+      : [
+        currentStyles.getPropertyValue(name),
+        value
+      ];
+  }
+
+  if (typeof options === 'number') {
+    options = { duration: options };
+  }
+
+  options = Object.assign(
+    {
+      duration: 400,
+      easing: 'linear',
+      fill: 'both'
+    },
+    options
+  );
+
+  const animation = element.animate(
+    transitions,
+    options
+  );
+
+  animation.addEventListener('finish', () => {
+    for (const name in styles) {
+      const value = styles[name];
+
+      element.style.setProperty(
+        name,
+        Array.isArray(value)
+          ? value[value.length - 1]
+          : value
+      );
+    }
+
+    animation.cancel();
+  });
+
+  return animation;
+}

package/src/service/crypto.ts

@@ -0,0 +1,27 @@
+import { uid, tid, randomBytes, randomBytesString } from '@lyrasoft/ts-toolkit/generic';
+
+export function base64UrlEncode(string: string): string {
+  return btoa(String(string))
+    .replace(/\+/, '-')
+    .replace(new RegExp('\\/'), '_')
+    .replace(/=+$/, '');
+}
+
+/**
+ * Base64 URL decode
+ */
+export function base64UrlDecode(string: string): string {
+  return atob(
+    String(string)
+      .replace(/-/, '+')
+      .replace(/_/, '/')
+  );
+}
+
+export { uid, tid, randomBytes, randomBytesString };
+
+let globalSerial = 1;
+
+export function serial(): number {
+  return globalSerial++;
+}

package/src/service/dom-watcher.ts

@@ -0,0 +1,62 @@
+export function watchAttributes<T extends HTMLElement>(el: T, callback?: AttributeMutationCallback<T>) {
+  return new AttributeMutationObserver<T>(el, callback);
+}
+
+export type AttributeMutationCallback<T extends HTMLElement = HTMLElement> = (el: T, name: string, value: any, oldValue: any) => void;
+export type AttributeWatcher<T extends HTMLElement = HTMLElement> = (el: T, value: any, oldValue: any) => void;
+
+export class AttributeMutationObserver<T extends HTMLElement> {
+  observer: MutationObserver;
+  watches: Record<string, (AttributeWatcher<T>)[]> = {};
+
+  constructor(protected element: T, public callback?: (el: T, name: string, value: any, oldValue: any) => void) {
+    this.element = element;
+
+    this.observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes') {
+          const attrName = mutation.attributeName!;
+          const target = mutation.target as T;
+          const value = target.getAttribute(attrName);
+
+          this.callback?.(
+            target,
+            attrName,
+            value,
+            mutation.oldValue
+          );
+
+          if (this.watches[attrName]) {
+            for (const watch of this.watches[attrName]) {
+              watch(target, value, mutation.oldValue);
+            }
+          }
+        }
+      }
+    });
+
+    this.observe();
+  }
+
+  watch(name: string, callback: AttributeWatcher<T>): () => void {
+    this.watches[name] ??= [];
+    this.watches[name].push(callback);
+
+    return () => {
+      this.watches[name] = this.watches[name].filter(fn => fn !== callback);
+    };
+  }
+
+  observe() {
+    this.observer.observe(this.element, {
+      attributes: true,
+      attributeOldValue: true,
+    });
+  }
+
+  disconnect() {
+    this.observer.disconnect();
+  }
+}
+
+

package/src/service/dom.ts

@@ -0,0 +1,265 @@
+import { defData } from '../utilities';
+
+/**
+ * @see https://stackoverflow.com/a/9899701
+ */
+export function domready(callback?: ((value: any) => any)): Promise<void> {
+  let promise = new Promise<void>((resolve) => {
+    // see if DOM is already available
+    if (document.readyState === 'complete' || document.readyState === 'interactive') {
+      // call on next available tick
+      setTimeout(resolve, 0);
+    } else {
+      document.addEventListener('DOMContentLoaded', () => resolve());
+    }
+  });
+
+  if (callback) {
+    promise = promise.then(callback);
+  }
+
+  return promise;
+}
+
+export function selectOne<K extends keyof HTMLElementTagNameMap>(ele: K): HTMLElementTagNameMap[K] | null;
+export function selectOne<E extends Element = Element>(ele: string): E | null;
+export function selectOne<E extends Element = Element>(ele: E): E;
+export function selectOne<E extends Element = Element>(ele: string | E): E | null;
+// selectOne(ele: string): Element;
+export function selectOne<E extends Element = Element>(ele: E | string): E | null {
+  let r: E | null;
+
+  if (typeof ele === 'string') {
+    r = document.querySelector<E>(ele);
+  } else {
+    r = ele;
+  }
+
+  if (!r) {
+    return r;
+  }
+
+  return r;
+}
+
+export function selectAll<E extends Element = Element>(ele: string, callback?: ((ele: E) => any)): E[];
+export function selectAll<E extends Element = Element>(ele: NodeListOf<E> | E[], callback?: ((ele: E) => any)): E[];
+export function selectAll<E extends Element = Element>(
+  ele: string | NodeListOf<E> | E[],
+  callback?: ((ele: E) => any)
+): E[];
+export function selectAll<E extends keyof HTMLElementTagNameMap>(
+  ele: E,
+  callback?: ((ele: HTMLElementTagNameMap[E]) => any)
+): HTMLElementTagNameMap[E][];
+export function selectAll(
+  ele: NodeListOf<Element> | Element[] | string,
+  callback: ((el: Element) => any) | undefined = undefined
+): Element[] {
+  if (typeof ele === 'string') {
+    ele = document.querySelectorAll(ele);
+  }
+
+  const resultSet: Element[] = [].slice.call(ele);
+
+  if (callback) {
+    return resultSet.map((el) => callback(el) || el);
+  }
+
+  return resultSet;
+}
+
+export function getBoundedInstance<T = any, E = Element>(selector: E, name: string, callback?: ((el: E) => any)): T;
+export function getBoundedInstance<T = any, E extends Element = Element>(
+  selector: string | E,
+  name: string,
+  callback?: ((el: E) => any)
+): T | null;
+export function getBoundedInstance<T = any, E extends Element = Element>(selector: string | E,
+                                                                         name: string,
+                                                                         callback: ((el: E) => any) = () => null): T | null {
+  const element = typeof selector === 'string' ? document.querySelector<E>(selector) : selector;
+
+  if (!element) {
+    return null;
+  }
+
+  return defData(element, name, callback);
+}
+
+export function getBoundedInstanceList<T = any, E extends Element = Element>(
+  selector: string | NodeListOf<E>,
+  name: string,
+  callback: ((el: E) => any) = () => null
+): (T | null)[] {
+  const items = typeof selector === 'string' ? document.querySelectorAll<E>(selector) : selector;
+
+  return Array.from(items).map((ele: E) => getBoundedInstance(ele, name, callback));
+}
+
+export function module<T = any, E extends Element = Element>(
+  ele: string,
+  name: string,
+  callback?: ((el: E) => any)
+): (T | null)[];
+export function module<T = any, E extends Element = Element>(
+  ele: NodeListOf<Element>,
+  name: string,
+  callback?: ((el: E) => any)): (T | null)[];
+export function module<T = any, E extends Element = Element>(
+  ele: Element,
+  name: string,
+  callback?: ((el: E) => any)
+): T | null;
+export function module<T = any, E extends Element = Element>(
+  ele: string | Element | NodeListOf<Element>,
+  name: string,
+  callback?: ((el: E) => any)
+): (T | null)[] | T | null;
+export function module<T = any, E extends Element = Element>(
+  ele: string | E | NodeListOf<E>,
+  name: string,
+  callback: ((el: E) => any) = () => null
+): (T | null)[] | T | null {
+  if (typeof ele === 'string') {
+    return getBoundedInstanceList<T, E>(ele, name, callback);
+  }
+
+  if (ele instanceof HTMLElement) {
+    return getBoundedInstance<T, E>(ele, name, callback);
+  }
+
+  return getBoundedInstanceList<T, E>(ele as NodeListOf<E>, name, callback);
+}
+
+export function h<T extends keyof HTMLElementTagNameMap>(
+  element: T,
+  attrs?: Record<string, any>,
+  content?: any
+): HTMLElementTagNameMap[T]
+export function h(element: string, attrs: Record<string, any> = {}, content: any = undefined): HTMLElement {
+  const ele = document.createElement(element);
+
+  for (let i in attrs) {
+    const v = attrs[i];
+
+    ele.setAttribute(i, v);
+  }
+
+  if (content !== null) {
+    ele.innerHTML = content;
+  }
+
+  return ele;
+}
+
+export function html<T extends Element = HTMLElement>(html: string): T {
+  const div = document.createElement('div');
+  div.innerHTML = html;
+  return div.children[0] as T;
+}
+
+/**
+ * Pure JS version of jQuery delegate()
+ *
+ * @see https://gist.github.com/iagobruno/4db2ed62dc40fa841bb9a5c7de92f5f8
+ */
+export function delegate(
+  wrapper: Element | string,
+  selector: string,
+  eventName: string,
+  callback: (e: Event) => void
+): () => void {
+  if (typeof selector === 'undefined' || selector === '') {
+    throw new Error('The provided selector is empty.');
+  }
+
+  if (typeof callback === 'undefined' || typeof callback !== 'function') {
+    throw new Error('Please specify an callback.');
+  }
+
+  const delegationSelectorsMap: Record<string, Function[]> = {};
+
+  const wrapperElement = selectOne(wrapper);
+
+  wrapperElement?.addEventListener(eventName, function (event) {
+    let element: HTMLElement | null = event.target as HTMLElement;
+    let forceBreak = false;
+
+    while (element && element !== wrapperElement) {
+      for (const selector in delegationSelectorsMap) {
+        if (element.matches(selector)) {
+          event.stopPropagation = function () {
+            forceBreak = true;
+          };
+          Object.defineProperty(
+            event,
+            'currentTarget',
+            {
+              get() {
+                return element;
+              }
+            }
+          );
+
+          const callbackList = delegationSelectorsMap[selector];
+
+          callbackList.forEach(function (callback) {
+            callback(event);
+          });
+        }
+      }
+
+      if (forceBreak) {
+        break;
+      }
+
+      element = element.parentElement;
+    }
+  });
+
+  if (!delegationSelectorsMap[selector]) {
+    // Add new selector to the list
+    delegationSelectorsMap[selector] = [callback];
+  } else {
+    delegationSelectorsMap[selector].push(callback);
+  }
+
+  return function unsubscribe() {
+    if (!delegationSelectorsMap[selector]) {
+      return;
+    }
+
+    if (delegationSelectorsMap[selector].length >= 2) {
+      delegationSelectorsMap[selector] = delegationSelectorsMap[selector].filter(cb => cb !== callback);
+    } else {
+      delete delegationSelectorsMap[selector];
+    }
+  };
+}
+
+export function injectCssToDocument(doc: Document, ...css: (string | CSSStyleSheet)[]): CSSStyleSheet[];
+export function injectCssToDocument(...css: (string | CSSStyleSheet)[]): CSSStyleSheet[];
+export function injectCssToDocument(
+  doc: Document | string | CSSStyleSheet,
+  ...css: (string | CSSStyleSheet)[]
+): CSSStyleSheet[] {
+  if (!(doc instanceof Document)) {
+    css.push(doc);
+    doc = document;
+  }
+
+  const styles = css.map((css) => {
+    if (typeof css === 'string') {
+      const style = new CSSStyleSheet();
+      style.replaceSync(css);
+      return style;
+    }
+
+    return css;
+  });
+
+  doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, ...styles];
+
+  return styles;
+}

package/src/service/helper.ts

@@ -0,0 +1,48 @@
+import { data } from '../data';
+import { sleep } from '@lyrasoft/ts-toolkit/generic';
+
+export { sleep };
+
+export function forceArray<T>(item: T | T[]): T[] {
+  if (Array.isArray(item)) {
+    return item;
+  } else {
+    return [item];
+  }
+}
+
+export function debounce<T extends Function = Function>(handler: T, wait = 1): T {
+  let timer: ReturnType<typeof setTimeout> | number, result: any;
+  return function (this: any, ...args: any[]) {
+    clearTimeout(timer);
+    timer = setTimeout(() => result = handler.call(this, ...args), wait);
+    return result;
+  } as any as T;
+}
+
+export function throttle<T extends Function = Function>(handler: T, wait: number = 1): T {
+  let timer: ReturnType<typeof setTimeout> | number | undefined, result: any;
+  return function (this: any, ...args: any[]) {
+    if (!timer) {
+      return result = handler.call(this, ...args);
+    }
+
+    clearTimeout(timer);
+    timer = setTimeout(() => timer = undefined, wait);
+    return result;
+  } as any as T;
+}
+
+export function isDebug() {
+  return Boolean(data('windwalker.debug'));
+}
+
+export function nextTick(callback?: () => any): Promise<any> {
+  return Promise.resolve().then(callback ?? (() => null));
+}
+
+export function wait<T extends readonly unknown[]>(
+  ...promisee: { [K in keyof T]: PromiseLike<T[K]> | T[K] }
+): Promise<Awaited<T>> {
+  return Promise.all(promisee) as Promise<Awaited<T>>;
+}

package/src/service/index.ts

@@ -0,0 +1,10 @@
+export * from './animate';
+export * from './crypto';
+export * from './dom';
+export * from './dom-watcher';
+export * from './helper';
+export * from './lang';
+export * from './loader';
+export * from './ui';
+export * from './uri';
+export * from './router';

package/src/service/lang.ts

@@ -0,0 +1,122 @@
+import { data } from '../data';
+import { isDebug } from './/helper';
+import { Dictionary } from '../types';
+import { vsprintf } from 'sprintf-js';
+
+let lang: UnicornLang;
+
+export function useLang() {
+  return lang ??= new UnicornLang();
+}
+
+export function trans(id: string, ...args: any[]) {
+  return useLang().trans(id, ...args);
+}
+
+export function __(id: string, ...args: any[]) {
+  return trans(id, ...args);
+}
+
+export default class UnicornLang {
+  /**
+   * Translate a string.
+   */
+  trans(id: string, ...args: any[]): string {
+    const key = this.normalize(id);
+
+    let translated = this.get(key) || '';
+
+    translated = this.replace(translated, args);
+
+    return translated !== '' ? translated : this.wrapDebug(id, false);
+  }
+
+  protected replace(str: string, args: any[]): string {
+    let replacements: Dictionary<any> = {};
+    let values: any[] = [];
+
+    for (const arg of args) {
+      if (typeof arg === 'object') {
+        replacements = { ...replacements, ...arg };
+      } else {
+        values.push(arg);
+      }
+    }
+
+    if (values.length) {
+      str = vsprintf(str, values);
+    }
+
+    if (Object.values(replacements).length) {
+      for (const key in replacements) {
+        let value = replacements[key];
+
+        if (typeof value === 'function') {
+          value = value();
+        }
+
+        str = str.replace(new RegExp(':' + key, 'g'), String(value));
+      }
+    }
+
+    return str;
+  }
+
+  /**
+   * Find text.
+   */
+  get(id: string): string | null {
+    const strings = this.getStrings();
+
+    if (strings[id]) {
+      return strings[id];
+    }
+
+    return null;
+  }
+
+  /**
+   * Has language key.
+   */
+  has(key: string): boolean {
+    const strings = this.getStrings();
+
+    return strings[key] !== undefined;
+  }
+
+  /**
+   * Add language key.
+   */
+  add(key: string, value: string): this {
+    const strings = this.getStrings();
+
+    strings[this.normalize(key)] = value;
+
+    data('unicorn.languages', strings);
+
+    return this;
+  }
+
+  /**
+   * Replace all symbols to dot(.).
+   */
+  protected normalize(text: string): string {
+    return text.replace(/[^A-Z0-9]+/ig, '.');
+  }
+
+  protected wrapDebug(text: string, success: boolean): string {
+    if (isDebug()) {
+      if (success) {
+        return '**' + text + '**';
+      }
+
+      return '??' + text + '??';
+    }
+
+    return text;
+  }
+
+  getStrings(): Record<string, string> {
+    return data('unicorn.languages') || {};
+  }
+}