@windwalker-io/unicorn-next 0.1.15 → 0.1.17

package/src/module/grid.ts

@@ -1,4 +1,4 @@
-import { __, deleteConfirm, h, loadAlpine, simpleAlert, simpleConfirm, slideDown, slideUp } from '../service';
+import { __, delegate, deleteConfirm, h, loadAlpine, simpleAlert, simpleConfirm, slideDown, slideUp } from '../service';
 import { Nullable } from '../types';
 import type { UnicornFormElement } from './form';
 
@@ -22,9 +22,11 @@ export class UnicornGridElement {
     const inputs = this.element.querySelectorAll<HTMLInputElement>('input[data-role=grid-checkbox]');
 
     for (const ch of inputs) {
-      ch.addEventListener('click', () => {
-        ch.dispatchEvent(new CustomEvent('change'));
-      });
+      // No-longer need this since browsers will trigger change event when checkbox is checked/unchecked
+      // ch.addEventListener('click', () => {
+      //   ch.dispatchEvent(new CustomEvent('change'));
+      // });
+
       ch.addEventListener('change', () => {
         const event = new CustomEvent('unicorn:checked', {
           detail: { grid: this }
@@ -33,6 +35,66 @@ export class UnicornGridElement {
         this.form.element?.dispatchEvent(event);
       });
     }
+
+    if (this.form.element) {
+      this.bindMustCheckedEvent(this.form.element);
+    }
+  }
+
+  private bindMustCheckedEvent(form: HTMLFormElement) {
+    delegate(document, '[data-must-checked]', 'mousedown', (e) => {
+      const target = e.currentTarget as HTMLElement;
+
+      const selector = target.dataset.mustChecked!;
+
+      if (!selector || !form.matches(selector)) {
+        return;
+      }
+      
+      // Prevent modal
+      const toggle = target.dataset.bsToggle;
+
+      if (toggle === 'modal') {
+        const modalTarget = target.dataset.bsTarget;
+
+        if (modalTarget) {
+          this.preventBSModal(modalTarget, this.getMustCheckedMessage());
+        }
+      }
+    });
+  }
+
+  preventBSModal(selector?: string | HTMLElement, msg?: string | boolean) {
+    let modalElement: HTMLElement | null = null;
+
+    if (typeof selector === 'string') {
+      modalElement = document.querySelector(selector);
+    } else if (selector instanceof HTMLElement) {
+      const modalTarget = selector.dataset.bsTarget;
+
+      if (modalTarget) {
+        modalElement = document.querySelector(modalTarget);
+      } else {
+        modalElement = selector;
+      }
+    }
+
+    if (modalElement) {
+      modalElement?.addEventListener('show.bs.modal', (e) => {
+        if (!this.hasChecked()) {
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (msg) {
+            if (msg === true) {
+              msg = this.getMustCheckedMessage();
+            }
+
+            simpleAlert(msg);
+          }
+        }
+      }, { once: true });
+    }
   }
 
   initComponent(store = 'grid', custom: Record<string, string> = {}) {
@@ -335,10 +397,12 @@ export class UnicornGridElement {
   /**
    * Delete an item by row.
    */
-  async deleteRow(row: number,
-                  msg?: Nullable<string>,
-                  url?: Nullable<string>,
-                  data?: Nullable<Record<string, any>>): Promise<boolean> {
+  async deleteRow(
+    row: number,
+    msg?: Nullable<string>,
+    url?: Nullable<string>,
+    data?: Nullable<Record<string, any>>
+  ): Promise<boolean> {
     const ch = this.getCheckboxByRow(row);
 
     if (!ch) {
@@ -421,17 +485,33 @@ export class UnicornGridElement {
   /**
    * Validate there has one or more checked boxes.
    */
-  validateChecked(event?: Event, callback?: (grid: UnicornGridElement) => any, msg?: string): this {
-    msg = msg || __('unicorn.message.grid.checked');
-
+  validateChecked(
+    event?: Event,
+    callback?: (grid: UnicornGridElement) => any,
+    errorMsg: string | boolean | null | ((grid: UnicornGridElement) => any) = true
+  ): this {
     if (!this.hasChecked()) {
-      if (msg !== '') {
-        simpleAlert(msg);
+      if (errorMsg === true) {
+        errorMsg = this.getMustCheckedMessage();
+      }
+
+      if (typeof errorMsg === 'string' && errorMsg !== '') {
+        simpleAlert(errorMsg);
+      } else if (typeof errorMsg === 'function') {
+        errorMsg(this);
       }
 
       if (event) {
         event.stopPropagation();
         event.preventDefault();
+
+        const target = event.currentTarget as HTMLElement;
+
+        if (target.dataset.bsToggle === 'modal') {
+          if (target.dataset.bsTarget) {
+            this.preventBSModal(target.dataset.bsTarget);
+          }
+        }
       }
 
       return this;
@@ -444,6 +524,18 @@ export class UnicornGridElement {
     return this;
   }
 
+  async validateCheckedPromise() {
+    if (!this.hasChecked()) {
+      throw new Error('No items checked.');
+    }
+
+    return this;
+  }
+
+  getMustCheckedMessage(): string {
+    return __('unicorn.message.grid.checked');
+  }
+
   hasChecked(): boolean {
     return this.countChecked() > 0;
   }

package/src/module/show-on.ts

@@ -60,7 +60,7 @@ export class ShowOn {
     if (matched) {
       setTimeout(() => {
         fadeIn(this.el, duration, this.initialDisplay);
-      }, duration + 30);
+      }, duration);
     } else {
       if (this.input) {
         this.defaultReadonly ??= this.input.hasAttribute('readonly');

package/src/module/validation.ts

@@ -96,7 +96,7 @@ export class UnicornFormValidation {
       options = {};
     }
 
-    return this.options = mergeDeep({}, defaultOptions, this.options, options);
+    return this.options = mergeDeep({}, defaultOptions, this.options || {}, options);
   }
 
   get scrollEnabled() {
@@ -350,7 +350,7 @@ export class UnicornFormValidation {
 
 export class UnicornFieldValidation {
   $input: InputElements | undefined;
-  options: Partial<FieldValidationOptions>;
+  options: Partial<FieldValidationOptions> = {};
 
   static is = 'uni-field-validate';
 
@@ -504,6 +504,11 @@ export class UnicornFieldValidation {
       return true;
     }
 
+    if (this.hasChildDirectives()) {
+      // If has child field validation directives, let them handle the validation.
+      return true;
+    }
+
     this.$input.setCustomValidity('');
     let valid = this.$input.checkValidity();
 
@@ -519,7 +524,7 @@ export class UnicornFieldValidation {
     return valid;
   }
 
-  runCustomValidity() {
+  protected runCustomValidity() {
     if (!this.$input) {
       return true;
     }
@@ -572,6 +577,15 @@ export class UnicornFieldValidation {
       return true;
     }
 
+    if (this.$input.hasAttribute('[data-novalidate]')) {
+      return true;
+    }
+
+    if (this.hasChildDirectives()) {
+      // If has child field validation directives, let them handle the validation.
+      return true;
+    }
+
     this.$input.setCustomValidity('');
     let valid = this.$input.checkValidity();
 
@@ -584,7 +598,7 @@ export class UnicornFieldValidation {
     return valid;
   }
 
-  async runCustomValidityAsync(): Promise<boolean> {
+  protected async runCustomValidityAsync(): Promise<boolean> {
     if (!this.$input) {
       return true;
     }
@@ -631,13 +645,13 @@ export class UnicornFieldValidation {
     return true;
   }
 
-  checkCustomDataAttributeValidity(): boolean {
+  protected checkCustomDataAttributeValidity(): boolean {
     const error = this.$input?.dataset.validationFail;
 
     return this.handleCustomResult(error);
   }
 
-  checkInputOptionsValidity(): boolean {
+  protected checkInputOptionsValidity(): boolean {
     if (!this.$input) {
       return true;
     }
@@ -828,6 +842,11 @@ export class UnicornFieldValidation {
   }
 
   showInvalidResponse() {
+    if (this.hasChildDirectives()) {
+      // If has child field validation directives, let them handle the error message display.
+      return;
+    }
+
     /** @type ValidityState */
     const state = this.$input?.validity;
     let message: string = this.$input?.validationMessage || '';
@@ -949,6 +968,10 @@ export class UnicornFieldValidation {
 
     return label;
   }
+
+  protected hasChildDirectives() {
+    return this.el.querySelector('[uni-field-validate]') != null;
+  }
 }
 
 function camelTo(str: string, sep: string) {

package/src/service/dom.ts

@@ -191,7 +191,7 @@ export function html<T extends Element = HTMLElement>(html: string): T {
  * @see https://gist.github.com/iagobruno/4db2ed62dc40fa841bb9a5c7de92f5f8
  */
 export function delegate(
-  wrapper: Element | string,
+  wrapper: Element | Document | string,
   selector: string,
   eventName: string,
   callback: (e: Event) => void

package/src/service/ui.ts

@@ -433,6 +433,7 @@ export function useDisableOnSubmit(
 
   const event = options.event || 'submit';
   const spinnerClass = options.spinnerClass || 'spinner-border spinner-border-sm';
+  const loadingClass = options.loadingCass || 'is-loading';
 
   selectAll<HTMLElement>(buttonSelector, (button) => {
     button.addEventListener('click', (e) => {
@@ -458,6 +459,7 @@ export function useDisableOnSubmit(
 
         if (button.dataset.clicked) {
           let icon = button.querySelector(iconSelector);
+          button.classList.add(loadingClass);
 
           if (icon) {
             const i = html('<i></i>');