vanilla-jui 1.5.2 → 1.5.3

package/package.json

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

package/src/components/form.ts

@@ -13,10 +13,7 @@ import {
   defineComponent,
 } from '../core/component.ts';
 import { joinClasses } from '../utilities/class-name.ts';
-import {
-  type RenderableContent,
-  all,
-} from '../utilities/dom.ts';
+import { type RenderableContent, all } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
 import { isPlainObject } from '../utilities/object.ts';
 import {
@@ -136,6 +133,8 @@ export interface FormValidatorConfig {
   [key: string]: unknown;
 }
 
+export type ButtonsPosition = 'start' | 'center' | 'end';
+
 export interface FormProps extends Record<string, unknown> {
   id?: string | null;
   vertical?: boolean;
@@ -143,6 +142,7 @@ export interface FormProps extends Record<string, unknown> {
   style?: FormStyle;
   fields?: readonly FormItem<FormField>[];
   buttons?: boolean | readonly FormButton[];
+  buttonsPosition?: ButtonsPosition;
   className?: FormClassNameConfig;
   validator?: FormValidatorConfig;
   onSubmit?:
@@ -158,13 +158,24 @@ interface ResolvedFormProps extends Record<string, unknown> {
   style: FormStyle;
   fields: FormItem<FormField>[];
   buttons: FormButton[];
+  buttonsPosition: ButtonsPosition;
   className: FormClassNames;
   validator: FormValidatorConfig;
   onSubmit: ((data: FormDataRecord, form: Form) => void | Promise<void>) | null;
   onReset: ((event: Event, form: Form) => void) | null;
 }
 
-interface FormState extends ResolvedFormProps {
+interface FormState extends Record<string, unknown> {
+  id: string;
+  vertical: boolean;
+  itemVertical: boolean;
+  style: FormStyle;
+  fields: FormItem<FormField>[];
+  buttons: FormButton[];
+  className: FormClassNames;
+  validator: FormValidatorConfig;
+  onSubmit: ((data: FormDataRecord, form: Form) => void | Promise<void>) | null;
+  onReset: ((event: Event, form: Form) => void) | null;
   submitting: boolean;
   data: FormDataRecord | null;
 }
@@ -251,6 +262,11 @@ const FORM_PROPS_SCHEMA = {
       return value;
     },
   },
+  buttonsPosition: {
+    default: 'end',
+    type: 'string',
+    enum: ['start', 'center', 'end'],
+  },
   className: {
     default: DEFAULT_CLASS_NAMES,
     type: 'object',
@@ -311,7 +327,7 @@ function flattenFormItems(
     current: FormItem<FormField>
   ): FormItem<FormField> | null => {
     const index = roots.indexOf(current);
-    return index >= 0 ? (roots[index + 1] || null) : null;
+    return index >= 0 ? roots[index + 1] || null : null;
   };
 
   for (const root of roots) {
@@ -386,6 +402,10 @@ function setElementStyle(element: HTMLElement, style: FormStyle): void {
   }
 }
 
+function resolveButtonsJustifyContent(position: ButtonsPosition): string {
+  return position === 'center' ? 'center' : `flex-${position}`;
+}
+
 function cloneValidator(validator: unknown): FormValidatorConfig {
   const source = (
     isPlainObject(validator) ? validator : {}
@@ -412,6 +432,7 @@ function normalizeProps(input: FormProps): ResolvedFormProps {
     style: props.style as FormStyle,
     fields,
     buttons: cloneButtons(props.buttons as readonly FormButton[]),
+    buttonsPosition: props.buttonsPosition as ButtonsPosition,
     className: resolveClassNames(props.className),
     validator: cloneValidator(props.validator),
     onSubmit: props.onSubmit as ResolvedFormProps['onSubmit'],
@@ -445,6 +466,14 @@ function cloneResolvedProps(props: ResolvedFormProps): ResolvedFormProps {
   };
 }
 
+function cloneStateProps(
+  props: ResolvedFormProps
+): Omit<FormState, 'submitting' | 'data'> {
+  const stateProps: Partial<ResolvedFormProps> = cloneResolvedProps(props);
+  delete stateProps.buttonsPosition;
+  return stateProps as Omit<FormState, 'submitting' | 'data'>;
+}
+
 function autoComplete(type: string): string {
   if (type === 'password') return 'current-password';
   if (type === 'email') return 'email';
@@ -495,8 +524,11 @@ function radioNodeListItems(value: RadioNodeList | Element): Element[] {
 export function createForm(input: FormProps = {}): Form {
   const props = normalizeProps(input);
   const initial = cloneResolvedProps(props);
+  const buttonsJustifyContent = resolveButtonsJustifyContent(
+    props.buttonsPosition
+  );
   const state = createDeepStore({
-    ...cloneResolvedProps(props),
+    ...cloneStateProps(props),
     submitting: false,
     data: null,
   }) as FormState;
@@ -512,7 +544,9 @@ export function createForm(input: FormProps = {}): Form {
     if (state.fields.includes(item)) return item;
     const cached = runtimeItems.get(item);
     if (cached) return cached;
-    const runtimeItem = createDeepStore(cloneFormItem(item)) as FormItem<FormField>;
+    const runtimeItem = createDeepStore(
+      cloneFormItem(item)
+    ) as FormItem<FormField>;
     runtimeItems.set(item, runtimeItem);
     return runtimeItem;
   };
@@ -530,7 +564,8 @@ export function createForm(input: FormProps = {}): Form {
   const itemKey = (item: FormItem, index: number): string => {
     if (item.id) return `item:${item.id}`;
     const field = item.payload as FormField;
-    if (field && typeof field === 'object') return `${fieldKey(field)}:${item.type}`;
+    if (field && typeof field === 'object')
+      return `${fieldKey(field)}:${item.type}`;
     return `item:${item.type}:${index}`;
   };
   const resolveFieldId = (field: FormField, index: number): string => {
@@ -603,14 +638,13 @@ export function createForm(input: FormProps = {}): Form {
     if (!field.name || !form.element) return [];
     const element = form.element.elements.namedItem(field.name);
     if (!element) return [];
-    return radioNodeListItems(element).filter((item) => item instanceof Element);
+    return radioNodeListItems(element).filter(
+      (item) => item instanceof Element
+    );
   };
   const syncFieldValue = (
     field: FormField,
-    control:
-      | HTMLInputElement
-      | HTMLSelectElement
-      | HTMLTextAreaElement,
+    control: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
     type: FormControlType | 'checkbox' | 'radio' = 'text'
   ): void => {
     flushSync(() => {
@@ -898,6 +932,9 @@ export function createForm(input: FormProps = {}): Form {
   const buttonsView = (): HTMLElement =>
     jsx('div', {
       className: () => state.className.buttons,
+      style: {
+        justifyContent: buttonsJustifyContent,
+      },
       'data-form-buttons': '',
       hidden: () => state.buttons.length === 0,
       children: For({

package/src/components/modal.ts

@@ -17,11 +17,7 @@ import { icon } from '../primitives/icons.ts';
 import { createLoading } from '../primitives/loading.ts';
 import { createPopup } from '../primitives/popup.ts';
 import { joinClasses } from '../utilities/class-name.ts';
-import {
-  all,
-  q,
-  type RenderableContent,
-} from '../utilities/dom.ts';
+import { all, q, type RenderableContent } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
 import { createMotionGroup, createTransition } from '../core/motion.ts';
 import { isPlainObject } from '../utilities/object.ts';
@@ -62,6 +58,8 @@ export interface ModalText {
   cancel: string;
 }
 
+type ModalStyle = string | Partial<CSSStyleDeclaration> | null;
+
 export interface ModalProps extends Record<string, unknown> {
   content?: ModalContent;
   cache?: boolean;
@@ -79,6 +77,7 @@ export interface ModalProps extends Record<string, unknown> {
   onCancel?: ((modal: Modal) => void | Promise<void>) | null;
   header?: boolean;
   footer?: boolean;
+  style?: ModalStyle;
   id?: string | null;
   escClose?: boolean;
   bgClose?: boolean;
@@ -93,6 +92,7 @@ interface ResolvedModalProps extends Record<string, unknown> {
   showCancel: boolean;
   showClose: boolean;
   fullscreen: boolean;
+  style: ModalStyle;
   text: ModalText;
   onShow: NonNullable<ModalProps['onShow']> | null;
   onShown: NonNullable<ModalProps['onShown']> | null;
@@ -258,6 +258,7 @@ function normalizeProps(input: ModalProps): ResolvedModalProps {
     escClose: props.escClose as boolean,
     bgClose: props.bgClose as boolean,
     className: props.className as ModalClassNames,
+    style: props.style as ModalStyle,
   };
 }
 
@@ -681,6 +682,7 @@ export function createModal(input: ModalProps = {}): Modal {
         id: props.id,
         role: 'document',
         'data-modal-dialog': props.id,
+        ...(props.style ? { style: props.style } : {}),
         'data-mount': () => (motionVisible() ? 'true' : 'false'),
         children: [
           jsx('div', {
@@ -689,27 +691,27 @@ export function createModal(input: ModalProps = {}): Modal {
             children: () =>
               props.header && !state.loading
                 ? [
-                  jsx('div', {
-                    className: props.className.title,
-                    id: `${props.id}_title`,
-                    'aria-label': props.text.title,
-                    children: props.text.title,
-                  }),
-                  props.showClose
-                    ? jsx('button', {
-                        type: 'button',
-                        className: joinClasses(
-                          props.className.button,
-                          props.className.closeBtn
-                        ),
-                        'data-action': 'close',
-                        'aria-label': t('Close', locales),
-                        disabled: isBusy,
-                        children: icon('close'),
-                      })
-                    : null,
-                ]
-              : null,
+                    jsx('div', {
+                      className: props.className.title,
+                      id: `${props.id}_title`,
+                      'aria-label': props.text.title,
+                      children: props.text.title,
+                    }),
+                    props.showClose
+                      ? jsx('button', {
+                          type: 'button',
+                          className: joinClasses(
+                            props.className.button,
+                            props.className.closeBtn
+                          ),
+                          'data-action': 'close',
+                          'aria-label': t('Close', locales),
+                          disabled: isBusy,
+                          children: icon('close'),
+                        })
+                      : null,
+                  ]
+                : null,
           }),
           jsx('div', {
             className: props.className.body,
@@ -724,30 +726,30 @@ export function createModal(input: ModalProps = {}): Modal {
             children: () =>
               props.footer && !state.loading
                 ? [
-                  props.showCancel
-                    ? jsx('button', {
-                        type: 'button',
-                        className: joinClasses(
-                          props.className.button,
-                          props.className.cancelBtn
-                        ),
-                        'data-action': 'cancel',
-                        disabled: isBusy,
-                        children: props.text.cancel,
-                      })
-                    : null,
-                  jsx('button', {
-                    type: 'button',
-                    className: joinClasses(
-                      props.className.button,
-                      props.className.confirmBtn
-                    ),
-                    'data-action': 'confirm',
-                    disabled: isBusy,
-                    children: props.text.confirm,
-                  }),
-                ]
-              : null,
+                    props.showCancel
+                      ? jsx('button', {
+                          type: 'button',
+                          className: joinClasses(
+                            props.className.button,
+                            props.className.cancelBtn
+                          ),
+                          'data-action': 'cancel',
+                          disabled: isBusy,
+                          children: props.text.cancel,
+                        })
+                      : null,
+                    jsx('button', {
+                      type: 'button',
+                      className: joinClasses(
+                        props.className.button,
+                        props.className.confirmBtn
+                      ),
+                      'data-action': 'confirm',
+                      disabled: isBusy,
+                      children: props.text.confirm,
+                    }),
+                  ]
+                : null,
           }),
         ],
       }) as HTMLElement;

package/src/components/pagination.ts

@@ -289,7 +289,9 @@ export function createPagination(input: PaginationProps = {}): Pagination {
   let changeId = 0;
   let pagination: Pagination;
 
-  const pageCount = createMemo(() => getPageCount(state.total, state.page.size));
+  const pageCount = createMemo(() =>
+    getPageCount(state.total, state.page.size)
+  );
   const isLocked = (): boolean => props.lock && state.locked;
   const isPrevDisabled = (): boolean => isLocked() || state.page.current <= 1;
   const isNextDisabled = (): boolean =>

package/src/css/accordion.css

@@ -32,7 +32,8 @@
     border-bottom: 0;
   }
 
-  .j-accordion[data-direction='horizontal'] .accordion-header[aria-expanded='true'] {
+  .j-accordion[data-direction='horizontal']
+    .accordion-header[aria-expanded='true'] {
     border-right: 0;
   }
 
@@ -44,7 +45,8 @@
     border-bottom: 0;
   }
 
-  .j-accordion[data-direction='horizontal'] .accordion-header[aria-expanded='false']:nth-last-child(2) {
+  .j-accordion[data-direction='horizontal']
+    .accordion-header[aria-expanded='false']:nth-last-child(2) {
     border-right: 0;
   }
 
@@ -73,7 +75,9 @@
     --accordion-icon-transform: rotate(180deg);
   }
 
-  .j-accordion[data-direction='horizontal'] .accordion-header[aria-expanded='true'] .header-arrow {
+  .j-accordion[data-direction='horizontal']
+    .accordion-header[aria-expanded='true']
+    .header-arrow {
     --accordion-icon-transform: rotate(90deg);
   }
 
@@ -88,7 +92,8 @@
     min-height: 2rem;
   }
 
-  .j-accordion[data-direction='horizontal'] .accordion-panel[aria-hidden='false'] {
+  .j-accordion[data-direction='horizontal']
+    .accordion-panel[aria-hidden='false'] {
     border-right: var(--accordion-border);
     border-bottom: 0;
     flex: 1;
@@ -109,10 +114,12 @@
     min-height: inherit;
   }
 
-  .j-accordion[data-direction='horizontal'] .accordion-panel[aria-hidden='false'] .panel-content {
+  .j-accordion[data-direction='horizontal']
+    .accordion-panel[aria-hidden='false']
+    .panel-content {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: 100%;
   }
-}
+}

package/src/css/color.css

@@ -3,7 +3,6 @@
  */
 
 @layer color {
-
   /**
 	 * gray, olive,
 	 * tomato, ruby, pink,
@@ -981,4 +980,4 @@
     --gold-indicator: #fbbf24;
     --gold-track: #fbbf24;
   }
-}
+}

package/src/css/color_p3.css

@@ -3,7 +3,6 @@
  */
 
 @layer color {
-
   /**
      * Advanced color mode: display-p3
      *
@@ -15,7 +14,6 @@
      */
   @supports (color: color(display-p3 1 1 1)) {
     @media (color-gamut: p3) {
-
       :root,
       .light {
         /* gray */
@@ -503,7 +501,6 @@
 
   @supports (color: color(display-p3 1 1 1)) {
     @media (color-gamut: p3) {
-
       .dark {
         /* gray */
         --gray-1: oklch(17.8% 0.0034 264.5);
@@ -987,4 +984,4 @@
       }
     }
   }
-}
+}

package/src/css/content.css

@@ -1,5 +1,4 @@
 @layer content {
-
   /* ============================================
     Content - 文章阅读/编辑器预览样式
   ============================================ */
@@ -29,7 +28,8 @@
   .j-content h4,
   .j-content h5,
   .j-content h6 {
-    margin: var(--content-heading-space) 0 calc(var(--content-heading-space) * 0.75);
+    margin: var(--content-heading-space) 0
+      calc(var(--content-heading-space) * 0.75);
     font-weight: 600;
     line-height: 1.3;
     color: var(--content-heading-fg);
@@ -64,12 +64,12 @@
   }
 
   /* 标题后的段落减少间距 */
-  .j-content h1+p,
-  .j-content h2+p,
-  .j-content h3+p,
-  .j-content h4+p,
-  .j-content h5+p,
-  .j-content h6+p {
+  .j-content h1 + p,
+  .j-content h2 + p,
+  .j-content h3 + p,
+  .j-content h4 + p,
+  .j-content h5 + p,
+  .j-content h6 + p {
     margin-top: calc(var(--content-paragraph-space) * -0.5);
   }
 
@@ -249,7 +249,7 @@
     color: var(--tone-body);
   }
 
-  .j-content dd+dt {
+  .j-content dd + dt {
     margin-top: 1em;
   }
 
@@ -277,7 +277,7 @@
     margin: 0;
   }
 
-  .j-content blockquote p+p {
+  .j-content blockquote p + p {
     margin-top: 0.75em;
   }
 
@@ -393,7 +393,7 @@
     padding: 1.25em 1.5em;
   }
 
-  .j-content pre.j-code-editor .code-header+code[class*='language-'] {
+  .j-content pre.j-code-editor .code-header + code[class*='language-'] {
     padding: 0.5rem 1rem 1rem;
   }
 
@@ -641,14 +641,14 @@
     transition: transform 0.2s ease;
   }
 
-  .j-content details[open]>summary::before {
+  .j-content details[open] > summary::before {
     transform: rotate(90deg);
   }
 
   .j-content details[open] p,
   .j-content details[open] ul,
   .j-content details[open] ol,
-  .j-content details[open]>* {
+  .j-content details[open] > * {
     margin-bottom: 1em;
   }
 
@@ -656,11 +656,11 @@
     margin-bottom: 0.75em;
   } */
 
-  .j-content details[open]>summary+* {
+  .j-content details[open] > summary + * {
     margin-top: 0;
   }
 
-  .j-content details[open]>*:last-child {
+  .j-content details[open] > *:last-child {
     margin-bottom: 0;
   }
 
@@ -705,11 +705,11 @@
   }
 
   /* First/Last child margin reset */
-  .j-content>*:first-child {
+  .j-content > *:first-child {
     margin-top: 0;
   }
 
-  .j-content>*:last-child {
+  .j-content > *:last-child {
     margin-bottom: 0;
   }
-}
+}

package/src/css/drop.css

@@ -28,4 +28,4 @@
     min-width: 64px;
     min-height: 32px;
   }
-}
+}