vanilla-jui 1.5.12 → 1.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.5.12",
+  "version": "1.5.13",
   "private": false,
   "description": "A lightweight, reactive, and fully customizable vanilla JS UI library.",
   "keywords": [

package/src/components/form.ts

@@ -23,7 +23,10 @@ import {
   resolveProps,
   validateParam,
 } from '../utilities/types.ts';
-import { createValidator } from '../validation/validator.ts';
+import {
+  createValidator,
+  type ValidatorClassNameConfig,
+} from '../validation/validator.ts';
 import { createLoading } from '../primitives/loading.ts';
 import { t } from 'vanilla-signal-i18n';
 import locales from '../locales/index.ts';
@@ -137,6 +140,7 @@ export interface FormValidatorConfig {
   rules?: Record<string, Record<string, unknown>>;
   messages?: Record<string, Record<string, string>>;
   vanilla?: boolean;
+  className?: ValidatorClassNameConfig;
   onSubmit?: (() => void) | null;
   [key: string]: unknown;
 }
@@ -640,6 +644,7 @@ export function createForm(input: FormProps = {}): Form {
     if (!element) return;
     for (const control of Array.from(element.elements)) {
       control.classList.remove('is-valid', 'is-invalid');
+      control.removeAttribute('data-valid');
     }
     for (const help of all<HTMLElement>(
       '[data-field-help], [data-validator-help]',

package/src/css/content.css

@@ -31,7 +31,7 @@
     margin: var(--content-heading-space) 0
       calc(var(--content-heading-space) * 0.75);
     font-weight: 600;
-    line-height: 1.3;
+    /* line-height: 1.3; */
     color: var(--content-heading-fg);
     letter-spacing: -0.02em;
   }
@@ -46,7 +46,7 @@
   .j-content h2 {
     font-size: 1.625em;
     font-weight: 650;
-    padding-bottom: 0.5em;
+    padding-bottom: 0.25em;
     border-bottom: 1px solid var(--content-border-subtle);
   }
 
@@ -458,9 +458,15 @@
   .hljs-comment,
   .hljs-code,
   .hljs-formula {
-    color: var(--ui-gray-shade);
+    color: var(--ui-fg-soft);
   }
 
+  /* .dark .hljs-comment,
+  .dark .hljs-code,
+  .dark .hljs-formula {
+    color: var(--ui-gray-shade);
+  } */
+
   /* prettylights-syntax-entity-tag */
   .hljs-name,
   .hljs-quote,

package/src/css/form.css

@@ -70,7 +70,7 @@
     margin: 0;
   }
 
-  .j-form .form-field .field-control .help-block.is-invalid {
+  .j-form .form-field .field-control .help-block[data-valid='false'] {
     color: var(--state-danger);
   }
 
@@ -188,12 +188,12 @@
   }
 
   /* input validate */
-  /* .j-input.is-valid,
-  .j-select.is-valid,
-  .j-textarea.is-valid,
-  .j-input.is-invalid,
-  .j-select.is-invalid,
-  .j-textarea.is-invalid {
+  /* .j-input[data-valid='true'],
+  .j-select[data-valid='true'],
+  .j-textarea[data-valid='true'],
+  .j-input[data-valid='false'],
+  .j-select[data-valid='false'],
+  .j-textarea[data-valid='false'] {
     padding-right: calc(1.4285714286em + 0.875rem);
     background-repeat: no-repeat;
     background-position: right calc(0.3571428572em + 0.21875rem) center;
@@ -201,16 +201,16 @@
       calc(0.7142857143em + 0.4375rem);
   } */
 
-  /* .j-input.is-valid,
-  .j-select.is-valid,
-  .j-textarea.is-valid {
+  /* .j-input[data-valid='true'],
+  .j-select[data-valid='true'],
+  .j-textarea[data-valid='true'] {
     border-color: var(--form-valid-border-color, var(--state-success));
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232fb344' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
   } */
 
-  .j-input.is-invalid,
-  .j-select.is-invalid,
-  .j-textarea.is-invalid {
+  .j-input[data-valid='false'],
+  .j-select[data-valid='false'],
+  .j-textarea[data-valid='false'] {
     border-color: var(--form-invalid-border-color, var(--state-danger));
     /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e"); */
   }
@@ -861,14 +861,14 @@
     box-shadow: var(--input-focus-shadow, none);
   }
 
-  /* .j-input.is-valid:focus-within,
-  .j-select.is-valid:focus-within {
+  /* .j-input[data-valid='true']:focus-within,
+  .j-select[data-valid='true']:focus-within {
     border-color: transparent;
     outline-color: var(--form-valid-border-color, var(--state-success));
   } */
 
-  .j-input.is-invalid:focus-within,
-  .j-select.is-invalid:focus-within {
+  .j-input[data-valid='false']:focus-within,
+  .j-select[data-valid='false']:focus-within {
     border-color: transparent;
     outline-color: var(--form-invalid-border-color, var(--state-danger));
   }

package/src/css/tokens.css

@@ -15,11 +15,11 @@
     --z-badge: 2;
     --z-toolbar: 2;
     --z-submenu: 5;
+    --z-overlay: 9500;
+    --z-offcanvas: 9600;
+    --z-popup: 9700;
+    --z-toast: 9800;
     --z-drop: 9900;
-    --z-overlay: 9950;
-    --z-offcanvas: 9960;
-    --z-popup: 9970;
-    --z-toast: 9980;
 
     /* --- Spacing --- */
     --space: 0.25rem;
@@ -317,7 +317,7 @@
     --ui-disabled-fg: #64748b;
     --ui-overlay: rgba(2, 6, 23, 0.7);
     --ui-overlay-muted: rgba(2, 6, 23, 0.45);
-    --ui-popup-bg: rgba(17, 24, 39, 0.82);
+    --ui-popup-bg: rgba(17, 24, 39, 0.45);
     --ui-input-color: #f9fafb;
     --ui-input-border: rgba(148, 163, 184, 0.2);
     --ui-input-focus-border: #a78bfa;

package/src/validation/validator.ts

@@ -1,7 +1,9 @@
 import { jsx } from 'vanilla-signal';
 
+import { joinClasses } from '../utilities/class-name.ts';
 import { type DOMReference, all, resolveElement } from '../utilities/dom.ts';
 import { createEventManager } from '../utilities/events.ts';
+import { isPlainObject } from '../utilities/object.ts';
 import {
   type ResolveSchema,
   resolveProps,
@@ -45,13 +47,21 @@ interface ValidatorProps extends Record<string, unknown> {
   rules?: Record<string, ValidatorRule>;
   messages?: ValidatorMessageMap;
   vanilla?: boolean;
+  className?: ValidatorClassNameConfig;
   onSubmit?: ((validator: ValidatorInstance) => void) | null;
 }
 
+export interface ValidatorClassNames {
+  help: string;
+}
+
+export type ValidatorClassNameConfig = Partial<ValidatorClassNames>;
+
 interface ResolvedValidatorProps extends Record<string, unknown> {
   rules: Record<string, ValidatorRule>;
   messages: ValidatorMessageMap;
   vanilla: boolean;
+  className: ValidatorClassNames;
   onSubmit: ((validator: ValidatorInstance) => void) | null;
 }
 
@@ -75,19 +85,36 @@ export interface ValidatorInstance {
   destroy(): void;
 }
 
+const DEFAULT_CLASS_NAMES: ValidatorClassNames = {
+  help: 'help-block',
+};
+
 const VALIDATOR_PROPS_SCHEMA = {
   rules: { default: {}, type: 'object' },
   messages: { default: {}, type: 'object' },
   vanilla: { default: false, type: 'boolean' },
+  className: {
+    default: DEFAULT_CLASS_NAMES,
+    type: 'object',
+    normalize: (value: unknown) => resolveClassNames(value),
+  },
   onSubmit: { default: null, types: ['function', 'null'] },
 } satisfies ResolveSchema<ValidatorProps>;
 
+function resolveClassNames(value: unknown): ValidatorClassNames {
+  return {
+    ...DEFAULT_CLASS_NAMES,
+    ...(isPlainObject(value) ? (value as ValidatorClassNameConfig) : {}),
+  } as ValidatorClassNames;
+}
+
 function normalizeProps(input: ValidatorProps): ResolvedValidatorProps {
   const props = resolveProps(input, VALIDATOR_PROPS_SCHEMA, 'Validator.props');
   return {
     rules: props.rules as Record<string, ValidatorRule>,
     messages: props.messages as ValidatorMessageMap,
     vanilla: props.vanilla as boolean,
+    className: props.className as ValidatorClassNames,
     onSubmit: props.onSubmit as ResolvedValidatorProps['onSubmit'],
   };
 }
@@ -353,10 +380,7 @@ function showError(
   rule: string,
   customMessage = ''
 ): void {
-  if (!(element instanceof HTMLInputElement) || element.type !== 'checkbox') {
-    element.classList.remove('is-valid');
-    element.classList.add('is-invalid');
-  }
+  element.dataset.valid = 'false';
 
   const error = customMessage || props?.messages[name]?.[rule] || '';
   if (!error) return;
@@ -372,11 +396,13 @@ function showError(
     ) || null;
   if (!help) {
     help = jsx('div', {
-      className: 'help-block is-invalid',
+      'data-valid': 'false',
       'data-validator-help': name,
     }) as HTMLElement;
     formControl.appendChild(help);
   }
+  help.className = joinClasses(props?.className.help);
+  help.dataset.valid = 'false';
   help.textContent = error;
 }
 
@@ -388,9 +414,7 @@ function showSuccess(element: ValidatorElement): void {
     }
   }
 
-  if (!(element instanceof HTMLInputElement) || element.type !== 'checkbox') {
-    element.classList.remove('is-invalid');
-  }
+  element.removeAttribute('data-valid');
 }
 
 export function createValidator(
@@ -543,7 +567,7 @@ export function createValidator(
     if (native) root.reset();
     for (const control of Array.from(root.elements)) {
       if (isValidatorElement(control)) {
-        control.classList.remove('is-valid', 'is-invalid');
+        control.removeAttribute('data-valid');
       }
     }
     for (const help of all<HTMLElement>('[data-validator-help]', root)) {