@windwalker-io/unicorn-next 0.1.0

package/src/bootstrap/button-radio.ts

@@ -0,0 +1,208 @@
+import { useUniDirective } from '../composable';
+import { data } from '../data';
+import { getBoundedInstance, h, selectAll, selectOne } from '../service';
+import { mergeDeep } from '../utilities';
+
+export interface ButtonRadioOptions {
+  selector?: string;
+  buttonClass?: string;
+  activeClass?: string;
+  color?: {
+    'default'?: string;
+    green?: string;
+    red?: string;
+    blue?: string;
+  };
+}
+
+const defaultOptions = {
+  selector: '.btn-group .radio',
+  buttonClass: 'btn',
+  activeClass: 'active',
+  color: {
+    'default': 'btn-default btn-outline-secondary',
+    green: 'btn-success',
+    red: 'btn-danger',
+    blue: 'btn-primary'
+  }
+};
+
+export class ButtonRadio {
+  wrapper: HTMLElement;
+  element: HTMLElement;
+  radios: HTMLInputElement[] = [];
+  inputs: HTMLInputElement[] = [];
+  buttons: HTMLButtonElement[] = [];
+  colors: string[] = [];
+  options: Required<ButtonRadioOptions>;
+
+  static handle(el: HTMLElement | string, options: ButtonRadioOptions = {}) {
+    return getBoundedInstance(el, 'button-radio', (el: HTMLElement) => {
+      return new this(el, options);
+    });
+  }
+
+  constructor(selector: HTMLElement | string, options: ButtonRadioOptions = {}) {
+    this.element = selectOne<HTMLElement>(selector)!;
+    this.options = mergeDeep({}, defaultOptions, options);
+    let wrapper: HTMLElement;
+
+    // Turn radios into btn-group
+
+    if (this.element.dataset.fieldInput != null) {
+      wrapper = this.element;
+    } else {
+      wrapper = this.element.querySelector('[data-field-input]')!;
+    }
+
+    this.wrapper = wrapper;
+    let inputGroup = wrapper.querySelector<HTMLElement>('.btn-group')!;
+    const exists = inputGroup != null;
+
+    if (!inputGroup) {
+      inputGroup = h('div', { class: 'btn-group' })
+    }
+
+    this.radios = selectAll(wrapper.querySelectorAll<HTMLInputElement>('.radio'));
+
+    this.radios.forEach(radio => {
+      const button = this.prepareButton(radio, exists);
+
+      if (!exists) {
+        inputGroup.appendChild(button);
+      }
+    });
+
+    this.syncState();
+
+    wrapper.insertBefore(inputGroup, wrapper.firstChild);
+
+    wrapper.dispatchEvent(new Event('button-radio.loaded'));
+
+    // Make color elements unique
+    this.colors = [...new Set(this.colors)];
+  }
+
+  prepareButton(radio: HTMLInputElement, exists = false) {
+    const options = this.options;
+
+    const input = radio.querySelector('input')!;
+    const label = radio.querySelector('label')!;
+
+    let button: HTMLButtonElement;
+
+    if (exists) {
+      button = this.wrapper.querySelector(`[data-for="${input.id}"]`)!;
+      button.classList.add(...this.parseClasses(`${options.buttonClass} ${options.color['default']}`));
+    } else {
+      button = h(
+        'button',
+        {
+          type: 'button',
+          class: `${options.buttonClass} ${options.color['default']}`,
+          'data-value': input.value,
+        },
+        `<span>${label.innerHTML}</span>`
+      );
+    }
+
+    data(button, 'input', input);
+    this.inputs.push(input);
+    this.buttons.push(button);
+
+    radio.style.display = 'none';
+
+    // Prepare color schema
+    let color = input.dataset.colorClass || '';
+
+    if (!color) {
+      switch (input.value) {
+        case '':
+          color = options.color.blue || '';
+          break;
+
+        case '0':
+          color = options.color.red || '';
+          break;
+
+        default:
+          color = options.color.green || '';
+          break;
+      }
+
+      input.dataset.colorClass = color;
+    }
+    
+    this.colors.push(color);
+
+    if (input.disabled || input.getAttribute('readonly') != null) {
+      button.classList.add('disabled');
+      button.disabled = true;
+    }
+
+    if (input.getAttribute('readonly') != null) {
+      button.classList.add('readonly');
+    }
+
+    // Bind event
+    button.addEventListener('click', () => {
+      if (input.getAttribute('disabled') || input.getAttribute('readonly')) {
+        return;
+      }
+
+      const changed = !input.checked;
+
+      if (changed) {
+        this.inputs.forEach((ele) => {
+          ele.checked = false;
+        });
+
+        input.checked = true;
+
+        input.dispatchEvent(new Event('change'));
+        input.dispatchEvent(new Event('input'));
+      }
+    });
+
+    input.addEventListener('change', () => {
+      this.syncState();
+    });
+
+    return button;
+  }
+
+  syncState() {
+    const options = this.options;
+
+    this.buttons.forEach((button) => {
+      const input: HTMLInputElement = data(button, 'input');
+
+      button.classList.add(...this.parseClasses(options.color.default || ''));
+      button.classList.remove(...this.parseClasses(options.activeClass));
+      button.classList.remove(...this.parseClasses(...this.colors));
+
+      if (input.checked) {
+        button.classList.add(...this.parseClasses(options.activeClass));
+        button.classList.add(...this.parseClasses(input.dataset.colorClass || ''));
+        button.classList.remove(...this.parseClasses(options.color.default || ''));
+      }
+    });
+  }
+
+  parseClasses(...className: string[]) {
+    const classNameStr = className.join(' ');
+    return classNameStr.split(' ').filter(t => t !== '');
+  }
+}
+
+export const ready = useUniDirective('button-radio', {
+  mounted(el, { value }) {
+    const options: ButtonRadioOptions = JSON.parse(value || '{}');
+    ButtonRadio.handle(el, value || {});
+  }
+});
+
+export interface ButtonRadioModule {
+  ButtonRadio: typeof ButtonRadio;
+  ready: typeof ready;
+}

package/src/bootstrap/keep-tab.ts

@@ -0,0 +1,155 @@
+import { useUniDirective } from '../composable';
+import { module, selectAll, selectOne, sleep } from '../service';
+import { Tab } from 'bootstrap';
+import { mergeDeep } from '../utilities';
+
+export interface KeepTabOptions {
+  uid?: string;
+  delay?: number;
+  tabItemSelector?: string;
+}
+
+const defaultOptions = {
+  tabItemSelector: '[data-toggle=tab],[data-bs-toggle=tab],[data-toggle=pill],[data-bs-toggle=pill]',
+  delay: 0,
+};
+
+export class KeepTab {
+  $element: HTMLElement;
+  tabButtons!: NodeListOf<HTMLElement>;
+  storageKey: string = '';
+  options: any;
+
+  constructor(selector: HTMLElement | string, options: KeepTabOptions = {}) {
+    options = mergeDeep({}, defaultOptions, options);
+    let uid: string;
+
+    if (typeof selector === 'object') {
+      uid = options.uid || selector.id;
+    } else {
+      uid = selector;
+    }
+
+    const $element = this.$element = selectOne<HTMLElement>(selector)!;
+
+    if (!$element) {
+      console.warn(`[KeepTab] Element ${selector} not found.`);
+      return;
+    }
+
+    this.options = options;
+
+    this.$element = $element;
+    this.tabButtons = $element.querySelectorAll(this.options.tabItemSelector);
+
+    this.init(uid);
+  }
+
+  protected async init(uid: string) {
+    this.storageKey = 'tab-href-' + await this.hashCode(location.href + ':' + uid);
+
+    this.bindEvents();
+
+    await sleep(this.options.delay || 0);
+
+    this.switchTab();
+  }
+
+  bindEvents() {
+    [].forEach.call(this.tabButtons, (button: HTMLAnchorElement) => {
+      button.addEventListener('click', () => {
+        // Store the selected tab href in localstorage
+        window.localStorage.setItem(this.storageKey, this.getButtonHref(button));
+      });
+    });
+  }
+
+  getButtonHref(button: HTMLAnchorElement) {
+    return button.dataset.bsTarget || button.dataset.target || button.href;
+  }
+
+  findTabButtonByHref(href: string) {
+    return selectAll<HTMLAnchorElement>(this.options.tabItemSelector)
+      .filter((button: HTMLAnchorElement) => {
+        if (button.href === href) {
+          return true;
+        }
+
+        if (button.dataset.bsTarget === href) {
+          return true;
+        }
+
+        return button.dataset.target === href;
+      })
+      .shift();
+  }
+
+  activateTab(href: string) {
+    const tabTrigger = this.findTabButtonByHref(href);
+
+    if (tabTrigger) {
+      Tab.getOrCreateInstance(tabTrigger).show();
+    }
+  }
+
+  hasTab(href: string) {
+    return this.findTabButtonByHref(href) != null;
+  }
+
+  /**
+   * Switch tab.
+   *
+   * @returns {boolean}
+   */
+  switchTab() {
+    if (localStorage.getItem(this.storageKey)) {
+      // When moving from tab area to a different view
+      if (!this.hasTab(localStorage.getItem(this.storageKey) || '')) {
+        localStorage.removeItem(this.storageKey);
+        return true;
+      }
+
+      // Clean default tabs
+      // selectOne(this.$element, '[data-toggle="tab"], [data-bs-toggle=tab]')
+      // this.$element.querySelector('a[data-toggle="tab"]').parent().removeClass('active');
+
+      const tabhref = localStorage.getItem(this.storageKey) || '';
+
+      // Add active attribute for selected tab indicated by url
+      this.activateTab(tabhref);
+
+      // Check whether internal tab is selected (in format <tabname>-<id>)
+      // const seperatorIndex = tabhref.indexOf('-');
+      //
+      // if (seperatorIndex !== -1) {
+      //   const singular = tabhref.substring(0, seperatorIndex);
+      //   const plural = singular + 's';
+      //
+      //   this.activateTab(plural);
+      // }
+    }
+  }
+
+  /**
+   * Hash code.
+   */
+  async hashCode(text: string): Promise<string> {
+    const msgBuffer = new TextEncoder().encode(text);
+    const hashBuffer = await globalThis.crypto.subtle.digest("SHA-256", msgBuffer);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    return hashArray.map(b => b.toString(16).padStart(2, "0")).join("");
+  }
+}
+
+export const ready = useUniDirective('keeptab', {
+  mounted(el, { value }) {
+    const options: KeepTabOptions = JSON.parse(value || '{}');
+
+    module(el, 'uni.keeptab', () => new KeepTab(el, options));
+  }
+});
+
+export interface KeepTabModule {
+  KeepTab: typeof KeepTab;
+  ready: typeof ready;
+}

package/src/composable/index.ts

@@ -0,0 +1,21 @@
+export * from './useCheckboxesMultiSelect';
+export * from './useFieldCascadeSelect';
+export * from './useFieldFileDrag';
+export * from './useFieldFlatpickr';
+export * from './useFieldModalSelect';
+export * from './useFieldModalTree';
+export * from './useFieldRepeatable';
+export * from './useFieldSingleImageDrag';
+export * from './useForm';
+export * from './useGrid';
+export * from './useHttp';
+export * from './useIframeModal';
+export * from './useListDependent';
+export * from './useQueue';
+export * from './useS3Uploader';
+export * from './useShowOn';
+export * from './useStack';
+export * from './useTomSelect';
+export * from './useUIBootstrap5';
+export * from './useUniDirective';
+export * from './useValidation';

package/src/composable/useCheckboxesMultiSelect.ts

@@ -0,0 +1,22 @@
+import type { CheckboxesMultiSelect } from '../module/checkboxes-multi-select';
+import type { Nullable } from '../types';
+
+export async function useCheckboxesMultiSelect(): Promise<any>;
+
+export async function useCheckboxesMultiSelect(
+  selector?: Nullable<string | HTMLElement>,
+  options?: Record<string, any>
+): Promise<CheckboxesMultiSelect>;
+
+export async function useCheckboxesMultiSelect(
+  selector?: Nullable<string | HTMLElement>,
+  options: Record<string, any> = {}
+): Promise<any> {
+  const m = await import('../module/checkboxes-multi-select');
+
+  if (selector) {
+    m.CheckboxesMultiSelect.handle(selector, options);
+  }
+
+  return m;
+}

package/src/composable/useFieldCascadeSelect.ts

@@ -0,0 +1,9 @@
+import { CascadeSelectModule } from '../module/field-cascade-select';
+
+export async function useFieldCascadeSelect(): Promise<CascadeSelectModule> {
+  const module = await import('../module/field-cascade-select');
+
+  await module.ready;
+
+  return module;
+}

package/src/composable/useFieldFileDrag.ts

@@ -0,0 +1,9 @@
+import { FileDragModule } from '../module/field-file-drag';
+
+export async function useFieldFileDrag(): Promise<FileDragModule> {
+  const module = await import('../module/field-file-drag');
+
+  await module.ready;
+
+  return module;
+}

package/src/composable/useFieldFlatpickr.ts

@@ -0,0 +1,3 @@
+export function useFieldFlatpickr(): Promise<any> {
+  return import('../module/field-flatpickr');
+}

package/src/composable/useFieldModalSelect.ts

@@ -0,0 +1,6 @@
+import type { ModalSelectModule } from '../module/field-modal-select';
+
+export function useFieldModalSelect(): Promise<ModalSelectModule> {
+  // Modal select has no exports now
+  return import('../module/field-modal-select');
+}

package/src/composable/useFieldModalTree.ts

@@ -0,0 +1,3 @@
+export function useFieldModalTree() {
+  import('../module/field-modal-tree');
+}

package/src/composable/useFieldMultiUploader.ts

@@ -0,0 +1,3 @@
+export async function useFieldMultiUploader() {
+  await import('../module/field-multi-uploader');
+}

package/src/composable/useFieldRepeatable.ts

@@ -0,0 +1,9 @@
+import { RepeatableModule } from '../module/field-repeatable';
+
+export async function useFieldRepeatable(): Promise<RepeatableModule> {
+  const module = await import('../module/field-repeatable');
+
+  await module.ready;
+
+  return module;
+}

package/src/composable/useFieldSingleImageDrag.ts

@@ -0,0 +1,5 @@
+import { SingleImageDragModule } from '../module/field-single-image-drag';
+
+export function useFieldSingleImageDrag(): Promise<SingleImageDragModule> {
+  return import('../module/field-single-image-drag');
+}

package/src/composable/useForm.ts

@@ -0,0 +1,43 @@
+import type { UnicornFormElement } from '../module/form';
+import { selectOne, module } from '../service';
+
+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);
+}
+
+export function useForm(): UnicornFormElement;
+export function useForm(ele?: string | Element, options?: Record<string, any>): UnicornFormElement | null;
+export function useForm(ele?: string | Element, options: Record<string, any> = {}): UnicornFormElement | null {
+  if (ele == null) {
+    return new formElement(undefined, undefined, options);
+  }
+
+  const selector = typeof ele === 'string' ? ele : undefined;
+  const el = selectOne<HTMLFormElement>(ele as string);
+
+  if (!el) {
+    throw new Error(`Form element of: ${selector} not found.`);
+  }
+
+  return module(
+    el,
+    'unicorn.form',
+    () => new formElement(selector, el, options)
+  );
+}
+
+export async function useFormComponent(ele?: string | Element, options: Record<string, any> = {}) {
+  const form = await useFormAsync(ele, options);
+
+  await form?.initComponent();
+
+  return form;
+}

package/src/composable/useGrid.ts

@@ -0,0 +1,57 @@
+import type { UnicornGridElement } from '../module/grid';
+import { useForm, useFormAsync } from './useForm';
+import { selectOne, module } from '../service';
+
+let gridElement: typeof UnicornGridElement;
+
+export async function useGridAsync(
+  ele?: string | HTMLElement,
+  options: Record<string, any> | undefined = {}
+): Promise<UnicornGridElement | null> {
+  await useFormAsync();
+
+  const { UnicornGridElement } = await import('../module/grid');
+
+  gridElement ??= UnicornGridElement;
+
+  if (!ele) {
+    return null;
+  }
+
+  return useGrid(ele, options);
+}
+
+export function useGrid(
+  ele: string | HTMLElement,
+  options: Record<string, any> | undefined = {}
+): UnicornGridElement | null {
+  const selector = typeof ele === 'string' ? ele : '';
+  const element = selectOne(ele);
+
+  if (!element) {
+    throw new Error('Element is empty');
+  }
+
+  const form = useForm(selector || element);
+
+  if (!form) {
+    throw new Error('UnicornGrid is depends on UnicornForm');
+  }
+
+  return module(
+    element,
+    'grid.plugin',
+    () => new gridElement(selector, element, form, options)
+  );
+}
+
+export async function useGridComponent(
+  ele: string | HTMLElement,
+  options: Record<string, any> | undefined = {}
+): Promise<UnicornGridElement | null> {
+  const grid = await useGridAsync(ele, options);
+
+  await grid?.initComponent();
+
+  return grid;
+}

package/src/composable/useHttp.ts

@@ -0,0 +1,8 @@
+import type { UnicornHttpClient } from '../module/http-client';
+import type { AxiosInstance, CreateAxiosDefaults } from 'axios';
+
+export async function useHttpClient(config?: CreateAxiosDefaults | AxiosInstance): Promise<UnicornHttpClient> {
+  const { createHttpClient } = await import('../module/http-client');
+
+  return createHttpClient(config as CreateAxiosDefaults | undefined);
+}

package/src/composable/useIframeModal.ts

@@ -0,0 +1,9 @@
+import { IframeModalModule } from '../module/iframe-modal';
+
+export async function useIframeModal(): Promise<IframeModalModule> {
+  const module = await import('../module/iframe-modal');
+
+  await module.ready;
+
+  return module;
+}

package/src/composable/useListDependent.ts

@@ -0,0 +1,26 @@
+import type { ListDependent, ListDependentModule, ListDependentOptions } from '../module/list-dependent';
+import { Nullable } from '../types';
+
+export async function useListDependent(): Promise<ListDependentModule>;
+export async function useListDependent(
+  element: string | HTMLSelectElement,
+  dependent?: Nullable<string | HTMLSelectElement>,
+  options?: Partial<ListDependentOptions>
+): Promise<ListDependent>;
+export async function useListDependent(
+  element?: Nullable<string | HTMLSelectElement>,
+  dependent?: Nullable<string | HTMLSelectElement>,
+  options: Partial<ListDependentOptions> = {}
+): Promise<any> {
+  const module = await import('../module/list-dependent');
+
+  await module.ready;
+
+  if (element) {
+    const { ListDependent } = module;
+
+    return ListDependent.handle(element, dependent ?? undefined, options);
+  }
+
+  return module;
+}

package/src/composable/useQueue.ts

@@ -0,0 +1,13 @@
+import { Dictionary } from '../types';
+import { TaskQueue, queue } from '@lyrasoft/ts-toolkit/generic';
+
+const queues: Dictionary<TaskQueue> = {};
+
+export function useQueue(name: string = 'default', maxRunning = 1): TaskQueue {
+  return queues[name] ??= createQueue(maxRunning);
+}
+
+export function createQueue(maxRunning = 1): TaskQueue {
+  return queue(maxRunning);
+}
+

package/src/composable/useS3Uploader.ts

@@ -0,0 +1,32 @@
+import {
+  S3MultipartUploader,
+  S3MultipartUploaderModule,
+  S3MultipartUploaderOptions
+} from '../module/s3-multipart-uploader';
+import type { S3Uploader, S3UploaderGlobalOptions, S3UploaderModule } from '../module/s3-uploader';
+
+export async function useS3Uploader(): Promise<S3UploaderModule>;
+export async function useS3Uploader(name: string, options?: Partial<S3UploaderGlobalOptions>): Promise<S3Uploader>;
+export async function useS3Uploader(name?: string, options: Partial<S3UploaderGlobalOptions> = {}): Promise<any> {
+  const module = await import('../module/s3-uploader');
+
+  if (!name) {
+    return module;
+  }
+
+  const { get } = module;
+
+  return get(name, options);
+}
+
+export async function useS3MultipartUploader(): Promise<S3MultipartUploaderModule>;
+export async function useS3MultipartUploader(options: Partial<S3MultipartUploaderOptions>): Promise<S3MultipartUploader>;
+export async function useS3MultipartUploader(options?: Partial<S3MultipartUploaderOptions>): Promise<any> {
+  const module = await import('../module/s3-multipart-uploader');
+
+  if (options != null) {
+    return new module.S3MultipartUploader(options);
+  }
+
+  return module;
+}

package/src/composable/useShowOn.ts

@@ -0,0 +1,9 @@
+import { ShowOnModule } from '../module/show-on';
+
+export async function useShowOn(): Promise<ShowOnModule> {
+  const module = await import('../module/show-on');
+
+  await module.ready;
+
+  return module;
+}