@windwalker-io/unicorn-next 0.1.12 → 0.1.14

package/dist/index.d.ts

@@ -190,6 +190,10 @@ export declare function createUnicorn(): UnicornApp;
 
 export declare function createUnicornWithPlugins(): UnicornApp;
 
+declare type CssSource = string | (() => Promise<{
+    default: string;
+}>);
+
 export declare function data(name: string, data?: any): any;
 
 export declare function data<T = void, R = [T] extends [void] ? any : T | undefined>(name: string): R;
@@ -209,7 +213,7 @@ export declare function delegate(wrapper: Element | string, selector: string, ev
 
 export { deleteConfirm }
 
-declare function destroy(selector: string): void;
+declare function destroy(selector: string | HTMLElement): void;
 
 declare interface Dictionary<T = any> {
     [key: string]: T;
@@ -299,15 +303,23 @@ declare interface FileDragOptions {
 
 export declare function forceArray<T>(item: T | T[]): T[];
 
+export declare interface FormSubmitOptions {
+    form?: string | Element;
+    method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    url?: string;
+    data?: Record<string, any>;
+}
+
 export declare interface FormValidationOptions {
     scroll: boolean;
     validatedClass: null;
     fieldSelector: null;
     scrollOffset: number;
     enabled: boolean;
+    fieldDefaults?: Partial<Omit<FieldValidationOptions, 'inputOptions' | 'formSelector'>>;
 }
 
-declare function get(selector: string, options?: Record<string, any>): Promise<TinymceController>;
+declare function get(selector: string | HTMLElement, options?: Record<string, any>): Promise<TinymceController>;
 
 export declare function getBoundedInstance<T = any, E = Element>(selector: E, name: string, callback?: ((el: E) => any)): T;
 
@@ -356,9 +368,9 @@ declare interface IFrameModalOptions {
 
 export declare function initAlpineComponent(directive: string): Promise<void>;
 
-export declare function injectCssToDocument(doc: Document, ...css: (string | CSSStyleSheet)[]): CSSStyleSheet[];
+export declare function injectCssToDocument(doc: Document, ...css: (CssSource | CSSStyleSheet)[]): Promise<CSSStyleSheet[]>;
 
-export declare function injectCssToDocument(...css: (string | CSSStyleSheet)[]): CSSStyleSheet[];
+export declare function injectCssToDocument(...css: (CssSource | CSSStyleSheet)[]): Promise<CSSStyleSheet[]>;
 
 declare type InjectionKey<T = any> = string | symbol | Constructor<T>;
 
@@ -490,7 +502,7 @@ declare interface ModalListenMessagesOptions {
     modalSelector: string;
 }
 
-declare type ModalSelectCallback = (item: any) => void;
+declare type ModalSelectCallback = (item: any, ...args: any[]) => void;
 
 declare interface ModalSelectModule {
     createCallback: typeof createCallback;
@@ -614,12 +626,13 @@ declare class S3MultipartUploader extends S3MultipartUploader_base {
         path: string;
         partNumber: number;
         chunkSize: number;
+        abortController?: AbortController;
         onUploadProgress: (e: AxiosProgressEvent) => void;
     }): Promise<{
         blob: Blob;
         etag: string;
     }>;
-    protected request<T = Record<string, any>>(action: RouteActions, body: Record<string, any>): Promise<T>;
+    protected request<T = Record<string, any>>(action: RouteActions, body: Record<string, any>, config?: Partial<AxiosRequestConfig>): Promise<T>;
     abort(id: string, path: string): Promise<void>;
     updateProgress(loaded: number, total: number, options: S3MultipartUploaderRequestOptions): void;
     resolveRoute(action: RouteActions): Promise<string>;
@@ -673,6 +686,7 @@ declare interface S3MultipartUploaderRequestOptions {
     ContentDisposition?: string;
     ACL?: 'public-read' | 'private' | 'authenticated-read' | 'public-read-write' | string;
     extra?: Record<string, any>;
+    abortController?: AbortController;
 }
 
 declare class S3Uploader extends S3Uploader_base implements EventAwareInterface {
@@ -748,6 +762,7 @@ declare interface S3UploaderRequestOptions {
     'Content-Type'?: string;
     'Content-Disposition'?: string;
     key?: string;
+    signal?: AbortSignal;
     [name: string]: any;
 }
 
@@ -858,6 +873,10 @@ export declare function slideToggle(target: string | HTMLElement, duration?: num
 
 export declare function slideUp(target: string | HTMLElement, duration?: number): Promise<Animation | void>;
 
+declare type Source = string | (() => Promise<{
+    default: string;
+}>);
+
 declare type StartEventHandler = (fileData: FormData) => void;
 
 declare type SuccessEventHandler = (url: string, res: S3UploaderResponse) => void;
@@ -877,6 +896,7 @@ declare class TinymceController {
     getValue(): string;
     setValue(text: string): void;
     imageUploadHandler(blobInfo: UploadHandlerParams[0], progress: UploadHandlerParams[1]): Promise<any>;
+    destroy(): void;
 }
 
 declare interface TinymceModule {
@@ -948,10 +968,11 @@ export declare class UnicornAssetUri {
 declare class UnicornFieldValidation {
     protected el: HTMLElement;
     $input: InputElements | undefined;
-    options: FieldValidationOptions;
+    options: Partial<FieldValidationOptions>;
     static is: string;
     constructor(el: HTMLElement, options?: Partial<FieldValidationOptions>);
-    mergeOptions(options: Partial<FieldValidationOptions>): FieldValidationOptions;
+    setOptions(options: Partial<FieldValidationOptions>): this;
+    get mergedOptions(): FieldValidationOptions;
     get $form(): HTMLFormElement;
     get errorSelector(): string;
     get selector(): string;
@@ -976,6 +997,7 @@ declare class UnicornFieldValidation {
      */
     updateValidClass(valid: Boolean): void;
     getFormValidation(element?: Nullable<HTMLFormElement>): UnicornFormValidation | null;
+    get globalOptions(): Partial<FieldValidationOptions>;
     getValidator(name: string): [Validator, Record<string, any>] | null;
     handleCustomResult(result: boolean | string | undefined, validator?: Nullable<Validator>): boolean;
     handleAsyncCustomResult(result: boolean, validator?: Nullable<Validator>): boolean;
@@ -1030,6 +1052,7 @@ declare class UnicornFormElement {
      * Make a DELETE request.
      */
     delete(url?: Nullable<string>, data?: Nullable<Record<string, any>>): boolean;
+    destroy(): void;
     /**
      * @see https://stackoverflow.com/a/53739792
      *
@@ -1058,6 +1081,7 @@ declare class UnicornFormValidation {
     prepareFields(inputs: HTMLElement[]): Promise<void>;
     prepareFieldWrapper(input: HTMLElement): HTMLElement | null;
     findFields(containsPresets?: boolean): HTMLElement[];
+    getFieldComponents(containsPresets?: boolean): UnicornFieldValidation[];
     getFieldComponent(input: HTMLElement): UnicornFieldValidation | null;
     validateAll(fields?: Nullable<HTMLElement[]>): boolean;
     validateAllAsync(fields?: Nullable<HTMLElement[]>): Promise<boolean>;
@@ -1272,9 +1296,9 @@ export declare function useCheckboxesMultiSelect(selector?: Nullable<string | HT
  */
 export declare function useColorPicker(selector?: Nullable<string | HTMLElement | NodeListOf<HTMLElement>>, options?: Partial<SpectrumOptions>): Promise<any>;
 
-export declare function useCssImport(...hrefs: string[]): Promise<CSSStyleSheet[]>;
+export declare function useCssImport(...hrefs: Source[]): Promise<CSSStyleSheet[]>;
 
-export declare function useCssIncludes(...hrefs: string[]): Promise<void[]>;
+export declare function useCssIncludes(...hrefs: Source[]): Promise<void[]>;
 
 export declare function useDisableIfStackNotEmpty(buttonSelector?: string, stackName?: string): void;
 
@@ -1308,6 +1332,8 @@ export declare function useFormAsync(ele?: string | Element, options?: Record<st
 
 export declare function useFormComponent(ele?: string | Element, options?: Record<string, any>): Promise<UnicornFormElement | null>;
 
+export declare function useFormSubmit(options?: FormSubmitOptions): Promise<boolean>;
+
 export declare function useFormValidation(): Promise<ValidationModule>;
 
 export declare function useFormValidation(selector: string | Element): Promise<UnicornFormValidation | null>;
@@ -1367,7 +1393,7 @@ export declare function useS3Uploader(): Promise<S3UploaderModule>;
 
 export declare function useS3Uploader(name: string, options?: Partial<S3UploaderGlobalOptions>): Promise<S3Uploader>;
 
-export declare function useScriptImport(src: string, attrs?: Record<string, string>): Promise<void>;
+export declare function useScriptImport(src: Source, attrs?: Record<string, string>): Promise<void>;
 
 export declare function useSeriesImport(...src: any[]): Promise<any>;
 
@@ -1424,6 +1450,7 @@ export declare function useUnicornPhpAdapter(app?: UnicornApp): {
     modalTree: typeof useFieldModalTree;
     multiUploader: typeof useFieldMultiUploader;
     tomSelect: typeof useTomSelect;
+    listDependent: typeof useListDependent;
     bootstrap: {
         tooltip: typeof useBs5Tooltip;
         buttonRadio: {
@@ -1480,10 +1507,9 @@ export declare function watchAttributes<T extends HTMLElement>(el: T, callback?:
 export { }
 
 
-declare module '@windwalker-io/unicorn-next' {
-    interface UnicornApp {
-        /** @deprecated Only for code generator use. */
-        $ui: typeof methods;
+declare global {
+    interface Node {
+        __unicorn?: any;
     }
 }
 
@@ -1496,16 +1522,13 @@ declare global {
 }
 
 
-declare global {
-    interface Node {
-        __unicorn?: any;
+declare module '@windwalker-io/unicorn-next' {
+    interface UnicornApp {
+        /** @deprecated Only for code generator use. */
+        $ui: typeof methods;
     }
 }
 
-declare global {
-    var S: any;
-}
-
 
 declare module 'axios' {
     interface AxiosRequestConfig {
@@ -1517,9 +1540,8 @@ declare module 'axios' {
     }
 }
 
-
 declare global {
-    var tinymce: TinyMCE;
+    var S: any;
 }
 
 
@@ -1528,3 +1550,8 @@ declare global {
         bootstrap: typeof bootstrap;
     }
 }
+
+
+declare global {
+    var tinymce: TinyMCE;
+}

package/dist/unicorn.js

@@ -1,9 +1,9 @@
-import { ax, ag, aL, b9, aK, aH, _, h, aO, aM, aJ, b, J, I, aQ, d, e, ah, b3, am, an, ac, D, C, ae, aC, t, T, S, ad, x, y, A, aN, U, B, f, a8, i, aA, l, N, z, ay, aP, p, a6, aq, au, av, aw, at, c, r, w, v, M, G, F, s, al, Q, R, P, E, L, aj, K, aF, q, a0, $, a1, Y, V, ab, aE, X, W, aR, aS, aT, aU, aV, aW, aX, j, a4, a2, aY, g, k, a5, a3, aZ, u, a_, aa, ap, Z, aB, as, a$, ar, n, b1, b0, ai, aD, b2, m, o, b4, b5, O, aG, b6, ak, a, ao, b8, aI, b7, az, a9 } from "./chunks/unicorn.js";
+import { ax, ag, aL, ba, aK, aH, _, h, aO, aM, aJ, b, J, I, aQ, d, e, ah, b4, am, an, ac, D, C, ae, aC, t, T, S, ad, x, y, A, aN, U, B, f, a8, i, aA, l, N, z, ay, aP, p, a6, aq, au, av, aw, at, c, r, w, v, M, G, F, s, al, Q, R, P, E, L, aj, K, aF, q, a0, $, a1, Y, V, ab, aE, X, W, aR, aS, aT, aU, aV, aW, aX, j, a4, a2, aY, aZ, g, k, a5, a3, a_, u, a$, aa, ap, Z, aB, as, b0, ar, n, b2, b1, ai, aD, b3, m, o, b5, b6, O, aG, b7, ak, a, ao, b9, aI, b8, az, a9 } from "./chunks/unicorn.js";
 export {
   ax as AttributeMutationObserver,
   ag as EventMixin,
   aL as UnicornAssetUri,
-  b9 as UnicornPhpAdapter,
+  ba as UnicornPhpAdapter,
   aK as UnicornSystemUri,
   aH as UnicornUI,
   _ as __,
@@ -18,7 +18,7 @@ export {
   d as clearMessages,
   e as clearNotifies,
   ah as createQueue,
-  b3 as createStack,
+  b4 as createStack,
   am as createUnicorn,
   an as createUnicornWithPlugins,
   ac as data,
@@ -90,39 +90,40 @@ export {
   a4 as useForm,
   a2 as useFormAsync,
   aY as useFormComponent,
+  aZ as useFormSubmit,
   g as useFormValidation,
   k as useFormValidationInstance,
   a5 as useGrid,
   a3 as useGridAsync,
-  aZ as useGridComponent,
+  a_ as useGridComponent,
   u as useHttpClient,
-  a_ as useIframeModal,
+  a$ as useIframeModal,
   aa as useImport,
   ap as useInject,
   Z as useKeepAlive,
   aB as useLang,
   as as useLegacy,
-  a$ as useListDependent,
+  b0 as useListDependent,
   ar as useMacro,
   n as useQueue,
-  b1 as useS3MultipartUploader,
-  b0 as useS3Uploader,
+  b2 as useS3MultipartUploader,
+  b1 as useS3Uploader,
   ai as useScriptImport,
   aD as useSeriesImport,
-  b2 as useShowOn,
+  b3 as useShowOn,
   m as useStack,
   o as useSystemUri,
-  b4 as useTinymce,
-  b5 as useTinymceHook,
+  b5 as useTinymce,
+  b6 as useTinymceHook,
   O as useTomSelect,
   aG as useUI,
-  b6 as useUIBootstrap5,
+  b7 as useUIBootstrap5,
   ak as useUITheme,
   a as useUniDirective,
   ao as useUnicorn,
-  b8 as useUnicornPhpAdapter,
+  b9 as useUnicornPhpAdapter,
   aI as useVueComponentField,
-  b7 as useWebDirective,
+  b8 as useWebDirective,
   az as wait,
   a9 as watchAttributes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windwalker-io/unicorn-next",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "Unicorn framework js library",
   "type": "module",
   "typings": "dist/index.d.ts",
@@ -63,7 +63,7 @@
     ]
   },
   "devDependencies": {
-    "@lyrasoft/ts-toolkit": "^0.2.0",
+    "@lyrasoft/ts-toolkit": "^0.2.4",
     "@rubenbimmel/alpine-class-component": "^0.0.4",
     "@types/alpinejs": "^3",
     "@types/bootstrap": "^5",

package/src/bootstrap/keep-tab.ts

@@ -88,6 +88,10 @@ export class KeepTab {
     const tabTrigger = this.findTabButtonByHref(href);
 
     if (tabTrigger) {
+      if (tabTrigger?.getAttribute('disabled') != null || tabTrigger.classList.contains('disabled')) {
+        return;
+      }
+
       Tab.getOrCreateInstance(tabTrigger).show();
     }
   }

package/src/composable/useForm.ts

@@ -1,11 +1,14 @@
 import type { UnicornFormElement } from '../module/form';
-import { selectOne, module } from '../service';
+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> {
+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;
@@ -16,15 +19,26 @@ export async function useFormAsync(ele?: string | Element, options: Record<strin
 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 (!formElement) {
+    throw new Error('Form module is not loaded. Please use useFormAsync() to load the module before using useForm().');
+  }
+
   if (ele == null) {
     return new formElement(undefined, undefined, options);
   }
 
-  const selector = typeof ele === 'string' ? ele : undefined;
-  const el = selectOne<HTMLFormElement>(ele as string);
+  let selector: string | undefined = undefined;
+  let el: HTMLFormElement | undefined = undefined;
+
+  if (typeof ele === 'string') {
+    selector = ele;
+    el = selectOne<HTMLFormElement>(ele) ?? undefined;
+  } else {
+    el = ele as HTMLFormElement;
+  }
 
   if (!el) {
-    throw new Error(`Form element of: ${selector} not found.`);
+    return new formElement(selector, el, options);
   }
 
   return module(
@@ -41,3 +55,19 @@ export async function useFormComponent(ele?: string | Element, options: Record<s
 
   return form;
 }
+
+export interface FormSubmitOptions {
+  form?: string | Element;
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+  url?: string;
+  data?: Record<string, any>;
+}
+
+export async function useFormSubmit(options: FormSubmitOptions = {}) {
+  const form = (await useFormAsync(options.form)) as UnicornFormElement;
+
+  // fun type should be method of form
+  const func = (options.method?.toLowerCase() || 'post') as 'get' | 'post' | 'put' | 'delete' | 'patch';
+
+  return form[func](options.url, options.data);
+}

package/src/module/field-modal-select.ts

@@ -1,26 +1,50 @@
-import type { IFrameModalElement } from './iframe-modal';
-import { data } from '../data';
-import { __, highlight, html, selectOne, slideUp } from '../service';
 import { template } from 'lodash-es';
+import { data } from '../data';
+import { __, highlight, html, selectOne, simpleAlert, slideUp } from '../service';
+import type { IFrameModalElement } from './iframe-modal';
 
-export type ModalSelectCallback = (item: any) => void;
+export type ModalSelectCallback = (item: any, ...args: any[]) => void;
 
-export function createCallback(type: 'list' | 'single', selector: string, modalSelector: string): ModalSelectCallback {
+export function createCallback(
+  type: 'list' | 'single',
+  selector: string,
+  modalSelector: string
+): ModalSelectCallback {
   switch (type) {
-    // case 'tag':
-    //   return () => {
-    //
-    //   };
     case 'list':
       return (item: any) => {
         const modalList = document.querySelector(selector) as any as ModalListSelectElement;
-
-        if (!modalList.querySelector(`[data-value="${item.value}"]`)) {
-          modalList.appendItem(item, true);
-
-          selectOne<IFrameModalElement>(modalSelector)?.close();
-        } else {
-          alert(__('unicorn.field.modal.already.selected'));
+        const checked = item.checked;
+
+        if (checked === undefined) {
+          // Single selection mode
+          if (!modalList.querySelector(`[data-value="${item.value}"]`)) {
+            modalList.appendItem(item, true);
+
+            selectOne<IFrameModalElement>(modalSelector)?.close();
+          } else {
+            simpleAlert(__('unicorn.field.modal.already.selected'));
+          }
+        } else if (checked) {
+          // Multiple selection mode - add item
+          try {
+            modalList.appendIfNotExists(item, true);
+          } catch (e) {
+            window.postMessage({
+              task: 'remove-row',
+              value: item,
+              id: item.instanceId
+            });
+            simpleAlert((e as Error).message);
+          } finally {
+            modalList.updateSelected();
+          }
+        } else if (!checked) {
+          // Multiple selection mode - remove item
+          modalList.removeItem(item).then(() => {
+            console.log(modalList.items);
+            modalList.updateSelected();
+          });
         }
       };
 
@@ -55,12 +79,14 @@ interface ModalListOptions {
   sortable: boolean;
   dataKey: string;
   max: number;
+  multiCheck?: boolean;
 }
 
 export interface ReceivedItem {
   value: string | number;
   title?: string;
   image?: string;
+
   [key: string]: any;
 }
 
@@ -69,11 +95,16 @@ class ModalListSelectElement extends HTMLElement {
 
   itemTemplate!: ReturnType<typeof template>;
   options!: ModalListOptions;
+  isMultiCheck = false;
 
   get listContainer() {
     return this.querySelector<HTMLDivElement>('[data-role=list-container]')!;
   }
 
+  get selectButton() {
+    return this.querySelector<HTMLAnchorElement>('[data-role=select]')!;
+  }
+
   get modal() {
     return document.querySelector<IFrameModalElement>(this.options.modalSelector);
   }
@@ -82,6 +113,10 @@ class ModalListSelectElement extends HTMLElement {
     return Array.from(this.listContainer.querySelectorAll<HTMLElement>('[data-value]'));
   }
 
+  get count(): number {
+    return this.items.length;
+  }
+
   connectedCallback() {
     this.options = JSON.parse(this.getAttribute('options') || '{}');
     this.itemTemplate = template(document.querySelector(this.options.itemTemplate)!.innerHTML);
@@ -98,18 +133,23 @@ class ModalListSelectElement extends HTMLElement {
       });
     }
 
-    const selectButton = this.querySelector<HTMLButtonElement>('[data-role=select]')!;
-    selectButton.addEventListener('click', (e) => {
-      this.open(e);
+    this.selectButton.addEventListener('click', (e) => {
+      try {
+        this.open(e);
+      } catch (e) {
+        simpleAlert((e as Error).message);
+      }
     });
 
     this.querySelector('[data-role=clear]')?.addEventListener('click', () => {
       this.removeAll();
     });
 
-    selectButton.style.pointerEvents = '';
+    this.selectButton.style.pointerEvents = '';
 
     this.render();
+
+    this.enableMultiCheck(this.options.multiCheck || false);
   }
 
   render() {
@@ -121,6 +161,12 @@ class ModalListSelectElement extends HTMLElement {
   }
 
   appendItem(item: ReceivedItem, highlights = false) {
+    const max = this.options.max;
+
+    if (max && this.count >= max) {
+      throw new Error(__('unicorn.field.modal.max.selected', max));
+    }
+
     const itemHtml = html(this.itemTemplate({ item }));
 
     itemHtml.dataset.value = String(item.value);
@@ -134,6 +180,10 @@ class ModalListSelectElement extends HTMLElement {
     if (highlights) {
       highlight(itemHtml);
     }
+
+    if (this.isMultiCheck) {
+      this.updateSelected();
+    }
   }
 
   appendIfNotExists(item: ReceivedItem, highlights = false) {
@@ -162,7 +212,7 @@ class ModalListSelectElement extends HTMLElement {
     return this.items.map((item) => item.dataset.value);
   }
 
-  removeItem(item: ReceivedItem | string | number) {
+  async removeItem(item: ReceivedItem | string | number) {
     if (typeof item === 'object') {
       item = item.value;
     }
@@ -170,9 +220,13 @@ class ModalListSelectElement extends HTMLElement {
     const element = this.listContainer.querySelector<HTMLElement>(`[data-value="${item}"]`);
 
     if (element) {
-      slideUp(element).then(() => {
+      return slideUp(element).then(() => {
         element.remove();
         this.toggleRequired();
+
+        if (this.isMultiCheck) {
+          this.updateSelected();
+        }
       });
     }
   }
@@ -187,6 +241,10 @@ class ModalListSelectElement extends HTMLElement {
     await Promise.all(promises);
 
     this.toggleRequired();
+
+    if (this.isMultiCheck) {
+      this.updateSelected();
+    }
   }
 
   toggleRequired() {
@@ -210,16 +268,34 @@ class ModalListSelectElement extends HTMLElement {
       return;
     }
 
-    if (this.listContainer.children.length >= max) {
-      alert(
-        __('unicorn.field.modal.max.selected', max)
-      );
-
-      return;
+    if (this.count >= max) {
+      throw new Error(__('unicorn.field.modal.max.selected', max));
     }
 
     this.modal?.open(target.href, { size: 'modal-xl' });
   }
+
+  enableMultiCheck(enable = true) {
+    this.isMultiCheck = enable;
+
+    if (enable) {
+      this.updateSelected();
+    } else {
+      this.clearSelected();
+    }
+  }
+
+  updateSelected() {
+    const url = new URL(this.selectButton.href);
+    url.searchParams.set('selected', this.items.map((i) => i.dataset.value).join(','));
+    this.selectButton.href = url.toString();
+  }
+
+  clearSelected() {
+    const url = new URL(this.selectButton.href);
+    url.searchParams.delete('selected');
+    this.selectButton.href = url.toString();
+  }
 }
 
 async function init() {
@@ -238,8 +314,23 @@ export function listenMessages(options: ModalListenMessagesOptions) {
   const callback = createCallback(options.type, options.selector, options.modalSelector);
 
   window.addEventListener('message', (e) => {
-    if (e.origin === options.origin && Array.isArray(e.data) && e.data[0] === options.instanceId) {
-      callback(e.data[1]);
+    if (e.origin === options.origin) {
+      if (Array.isArray(e.data) && e.data[0] === options.instanceId) {
+        callback(e.data[1]);
+      }
+
+      if (
+        typeof e.data === 'object'
+        && e.data !== null
+        && e.data.id === options.instanceId
+        && e.data.task === 'select-row'
+      ) {
+        const item = e.data.value;
+        item.checked = e.data.checked;
+        item.instanceId = e.data.id;
+
+        callback(e.data.value);
+      }
     }
   });