@windwalker-io/unicorn-next 0.1.0 → 0.1.1

package/src/bootstrap/keep-tab.ts

@@ -1,155 +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;
-}
+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

@@ -1,21 +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';
+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

@@ -1,22 +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;
-}
+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

@@ -1,9 +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;
-}
+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

@@ -1,9 +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;
-}
+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

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

package/src/composable/useFieldModalSelect.ts

@@ -1,6 +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');
-}
+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

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

package/src/composable/useFieldMultiUploader.ts

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

package/src/composable/useFieldRepeatable.ts

@@ -1,9 +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;
-}
+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

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

@@ -1,43 +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;
-}
+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;
+}