vanilla-jui 1.5.1 → 1.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.5.1",
+  "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

@@ -11,8 +11,7 @@
 	 * yellow, orange, gold
 	 */
   :root,
-  .light,
-  .light-theme {
+  .light {
     --white: #ffffff;
     --black: #000000;
 
@@ -497,8 +496,7 @@
     --gold-track: #b45309;
   }
 
-  .dark,
-  .dark-theme {
+  .dark {
     --white: #000000;
     --black: #ffffff;
 

package/src/css/color_p3.css

@@ -15,8 +15,7 @@
   @supports (color: color(display-p3 1 1 1)) {
     @media (color-gamut: p3) {
       :root,
-      .light,
-      .light-theme {
+      .light {
         /* gray */
         --gray-1: oklch(99.3% 0.0028 259.7);
         --gray-2: oklch(98% 0.0053 259.7);
@@ -502,8 +501,7 @@
 
   @supports (color: color(display-p3 1 1 1)) {
     @media (color-gamut: p3) {
-      .dark,
-      .dark-theme {
+      .dark {
         /* gray */
         --gray-1: oklch(17.8% 0.0034 264.5);
         --gray-2: oklch(21% 0.0035 264.5);

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;
   }
-}
+}

package/src/css/gradient.css

@@ -1,9 +1,7 @@
 @layer gradient {
   :root,
   .light,
-  .light-theme,
-  .dark,
-  .dark-theme {
+  .dark {
     --gradient-card-border: var(--ui-border);
     --gradient-card-shadow: var(--shadow-md);
   }

package/src/css/layout.css

@@ -11,27 +11,20 @@
     box-sizing: border-box;
   }
 
-  html.light,
-  html.theme-light {
+  .light {
     color-scheme: light;
   }
 
-  html.dark,
-  html.theme-dark {
+  .dark {
     color-scheme: dark;
   }
 
   body {
-    -webkit-text-size-adjust: 100%;
     tab-size: 4;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
     scroll-behavior: smooth;
     font-family:
       'Source Han Sans CN', 'Inter', 'PingFang SC', 'Helvetica Neue', Emoji,
       Arial, sans-serif;
-    font-feature-settings: normal;
-    font-variation-settings: normal;
     color: var(--ui-fg);
     background-color: var(--ui-bg);
 
@@ -61,8 +54,6 @@
   }
 
   .is-reset:where(button) {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     cursor: default;
     background-color: transparent;
@@ -76,7 +67,6 @@
     padding: 0;
     margin: 0;
     text-align: initial;
-    -webkit-tap-highlight-color: transparent;
   }
 
   .is-reset:where(h1, h2, h3, h4, h5, h6) {

package/src/css/menu.css

@@ -587,7 +587,7 @@
   }
 
   /* drop menu  */
-  .drop-menu {
+  .drop-menu .drop-container {
     min-width: 100px;
     max-width: 200px;
     padding: var(--s2);
@@ -613,8 +613,9 @@
     padding: var(--space) var(--s2);
     text-decoration: none;
     color: var(--ui-fg-muted);
-    border-radius: var(--radius-md);
     user-select: none;
+    border-radius: var(--radius-sm);
+    transition: none;
   }
 
   .drop-menu .menu-item a .menu-text {
@@ -633,7 +634,7 @@
   }
 
   .drop-menu .menu-item.menu-heading {
-    padding: var(--space) var(--s2);
+    padding: 2px var(--s2);
     color: var(--ui-fg-soft);
     font-size: var(--font-size-sm);
   }

package/src/css/offcanvas.css

@@ -5,15 +5,11 @@
     left: 0;
     width: 100%;
     height: 100%;
-    pointer-events: none;
+    pointer-events: auto;
     background: var(--offcanvas-overlay-bg);
     z-index: var(--z-overlay);
   }
 
-  .j-offcanvas-overlay[aria-hidden='false'] {
-    pointer-events: auto;
-  }
-
   .j-offcanvas {
     position: fixed;
     z-index: var(--z-offcanvas);

package/src/css/swiper.css

@@ -143,4 +143,4 @@
     cursor: default;
     opacity: 0.36;
   }
-}
+}

package/src/css/tabs.css

@@ -62,4 +62,4 @@
   .j-tabs .panel-list .panel-item[aria-hidden='false'] {
     display: block;
   }
-}
+}

package/src/css/themes/default/drop.css

@@ -3,7 +3,7 @@
     --drop-border-width: 1px;
     --drop-border-style: solid;
     --drop-border-color: var(--ui-border);
-    --drop-border-radius: var(--radius-md);
+    --drop-border-radius: var(--radius-sm);
     --drop-fg: var(--ui-fg);
     --drop-bg: var(--ui-bg);
     --drop-box-shadow: var(--shadow-sm);