vanilla-jui 1.7.7 → 1.7.9

package/package.json

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

package/src/components/form.ts

@@ -50,10 +50,6 @@ type FormControlType =
 
 export interface FormClassNames {
   form: string;
-  vertical: string;
-  horizontal: string;
-  itemVertical: string;
-  itemHorizontal: string;
   item: string;
   label: string;
   required: string;
@@ -68,8 +64,6 @@ export interface FormClassNames {
   select: string;
   radio: string;
   checkbox: string;
-  choiceVertical: string;
-  choiceHorizontal: string;
   choiceGroup: string;
   radioLabel: string;
   radioText: string;
@@ -117,7 +111,6 @@ export interface FormField {
   readonly?: boolean;
   autocomplete?: string;
   multiple?: boolean;
-  vertical?: boolean;
   group?: boolean;
   size?: string;
   variant?: string;
@@ -145,8 +138,6 @@ export type FormTextConfig = Partial<FormText>;
 
 export interface FormProps extends Record<string, unknown> {
   id?: string | null;
-  vertical?: boolean;
-  itemVertical?: boolean;
   size?: string;
   style?: FormStyle;
   fields?: readonly FormItem<FormField>[];
@@ -163,8 +154,6 @@ export interface FormProps extends Record<string, unknown> {
 
 interface ResolvedFormProps extends Record<string, unknown> {
   id: string;
-  vertical: boolean;
-  itemVertical: boolean;
   size: string;
   style: FormStyle;
   fields: FormItem<FormField>[];
@@ -203,10 +192,6 @@ interface FormControlContext {
 
 const DEFAULT_CLASS_NAMES: FormClassNames = {
   form: 'j-form',
-  vertical: 'is-vertical',
-  horizontal: 'is-horizontal',
-  itemVertical: 'is-item-vertical',
-  itemHorizontal: 'is-item-horizontal',
   item: 'form-field',
   label: 'field-legend',
   required: 'is-required',
@@ -221,8 +206,6 @@ const DEFAULT_CLASS_NAMES: FormClassNames = {
   select: 'j-select',
   radio: 'j-radio',
   checkbox: 'j-checkbox',
-  choiceVertical: 'is-vertical',
-  choiceHorizontal: 'is-horizontal',
   choiceGroup: 'is-group',
   radioLabel: 'radio-label',
   radioText: 'radio-text',
@@ -249,8 +232,6 @@ const FORM_PROPS_SCHEMA = {
       return value;
     },
   },
-  vertical: { default: true, type: 'boolean' },
-  itemVertical: { default: true, type: 'boolean' },
   size: { default: 'md', type: 'string' },
   style: { default: '', types: ['string', 'object', 'null'] },
   fields: { default: [], type: 'array' },
@@ -429,8 +410,6 @@ function normalizeProps(input: FormProps): ResolvedFormProps {
   return {
     ...props,
     id: String(props.id),
-    vertical: Boolean(props.vertical),
-    itemVertical: Boolean(props.itemVertical),
     size: props.size as string,
     style: props.style as FormStyle,
     fields,
@@ -713,21 +692,15 @@ export function createForm(input: FormProps = {}): Form {
     return jsx('div', {
       className: () => {
         const field = fieldAccessor();
-        const direction = field.vertical ? 'vertical' : 'horizontal';
         const names = props.className;
         return joinClasses(
           type === 'radio' ? names.radio : names.checkbox,
-          direction === 'vertical'
-            ? names.choiceVertical
-            : names.choiceHorizontal,
           field.group ? names.choiceGroup : '',
           field.size ? `is-${field.size}` : ''
         );
       },
       'data-field-choice-group': () => fieldAccessor().name || id,
       'data-choice-type': type,
-      'data-choice-layout': () =>
-        fieldAccessor().vertical ? 'vertical' : 'horizontal',
       children: () =>
         (fieldAccessor().options || []).map((option, optionIndex) => {
           const item = normalizeOption(option);
@@ -1090,23 +1063,10 @@ export function createForm(input: FormProps = {}): Form {
     },
     view: () => {
       const element = jsx('form', {
-        className: joinClasses(
-          props.className.form,
-          props.vertical
-            ? props.className.vertical
-            : props.className.horizontal,
-          props.itemVertical
-            ? props.className.itemVertical
-            : props.className.itemHorizontal,
-          formSizeClass()
-        ),
+        className: joinClasses(props.className.form, formSizeClass()),
         id: props.id,
         novalidate: props.validator.vanilla === false,
         'data-form': 'root',
-        'data-form-layout': props.vertical ? 'vertical' : 'horizontal',
-        'data-form-field-layout': props.itemVertical
-          ? 'vertical'
-          : 'horizontal',
         onSubmit: (event: Event) => void handleSubmit(event),
         onReset: (event: Event) => {
           resetValidationState();

package/src/components/toc.ts

@@ -1,9 +1,11 @@
 import {
   For,
+  Show,
   createDeepStore,
   createEffect,
   createMemo,
   flushSync,
+  insert,
   jsx,
   untrack,
 } from 'vanilla-signal';
@@ -27,6 +29,16 @@ interface TocClassNames {
 
 type TocClassNameConfig = Partial<TocClassNames>;
 
+interface TocIndicatorConfig {
+  width: string;
+  heightRatio: number;
+  radius: string;
+  left: string;
+  color: string;
+}
+
+type TocIndicatorConfigInput = Partial<TocIndicatorConfig>;
+
 export interface TocItem {
   id: string;
   text: string;
@@ -52,8 +64,7 @@ interface TocProps extends Record<string, unknown> {
   offset?: number;
   reactive?: boolean;
   title?: boolean;
-  indicatorWidth?: string;
-  indicatorHeightRatio?: number;
+  indicator?: TocIndicatorConfigInput;
   className?: TocClassNameConfig;
   onChange?:
     | ((item: TocItem | null, index: number, toc: TocInstance) => void)
@@ -66,8 +77,7 @@ interface ResolvedTocProps extends Record<string, unknown> {
   offset: number;
   reactive: boolean;
   title: boolean;
-  indicatorWidth: string;
-  indicatorHeightRatio: number;
+  indicator: TocIndicatorConfig;
   className: TocClassNames;
   onChange:
     | ((item: TocItem | null, index: number, toc: TocInstance) => void)
@@ -119,6 +129,14 @@ const DEFAULT_CLASS_NAMES: TocClassNames = {
   indicator: 'toc-indicator',
 };
 
+const DEFAULT_INDICATOR_CONFIG: TocIndicatorConfig = {
+  width: '2px',
+  heightRatio: 5,
+  radius: '2px',
+  left: '0',
+  color: 'var(--tone-solid)',
+};
+
 const TOC_PROPS_SCHEMA = {
   target: { default: '.j-content' },
   headings: { default: 'h2, h3', type: 'string' },
@@ -129,12 +147,22 @@ const TOC_PROPS_SCHEMA = {
   },
   reactive: { default: false, type: 'boolean' },
   title: { default: false, type: 'boolean' },
-  indicatorWidth: { default: '2px', type: 'string' },
-  indicatorHeightRatio: {
-    default: 5,
-    type: 'number',
-    min: 1,
-    max: 10,
+  indicator: {
+    default: DEFAULT_INDICATOR_CONFIG,
+    type: 'plainObject',
+    merge: 'shallow',
+    schema: {
+      width: { default: DEFAULT_INDICATOR_CONFIG.width, type: 'string' },
+      heightRatio: {
+        default: DEFAULT_INDICATOR_CONFIG.heightRatio,
+        type: 'number',
+        min: 1,
+        max: 10,
+      },
+      radius: { default: DEFAULT_INDICATOR_CONFIG.radius, type: 'string' },
+      left: { default: DEFAULT_INDICATOR_CONFIG.left, type: 'string' },
+      color: { default: DEFAULT_INDICATOR_CONFIG.color, type: 'string' },
+    },
   },
   className: {
     default: DEFAULT_CLASS_NAMES,
@@ -159,8 +187,7 @@ function normalizeProps(input: TocProps): ResolvedTocProps {
     offset: props.offset as number,
     reactive: props.reactive as boolean,
     title: props.title as boolean,
-    indicatorWidth: props.indicatorWidth as string,
-    indicatorHeightRatio: props.indicatorHeightRatio as number,
+    indicator: props.indicator as TocIndicatorConfig,
     className: props.className as TocClassNames,
     onChange: props.onChange as ResolvedTocProps['onChange'],
   };
@@ -238,7 +265,10 @@ export function createToc(props: TocProps = {}): TocInstance {
   let activeLinkId: string | null = null;
   let listHeight = 0;
   const linkRefs = new Map<string, HTMLElement>();
-  const renderableItems = createMemo(() => state.items);
+  const getItems = (): TocItem[] =>
+    Array.isArray(state.items) ? state.items : [];
+  const hasItems = (): boolean => getItems().length > 0;
+  const renderableItems = createMemo(getItems);
 
   const setIndicator = (indicator: TocIndicator): void => {
     if (
@@ -307,7 +337,7 @@ export function createToc(props: TocProps = {}): TocInstance {
     const linkRect = link.getBoundingClientRect();
     const linkHeight = link.offsetHeight || linkRect.height;
     const linkTop = link.offsetTop;
-    const height = (linkHeight * settings.indicatorHeightRatio) / 10;
+    const height = (linkHeight * settings.indicator.heightRatio) / 10;
     const top = linkTop + (linkHeight - height) / 2;
     const distance = state.indicator.visible
       ? Math.abs(top - state.indicator.top)
@@ -333,15 +363,16 @@ export function createToc(props: TocProps = {}): TocInstance {
   };
 
   const syncListLayout = (): void => {
-    if (!toc.runtime.built || !listElement || state.items.length === 0) {
+    const items = getItems();
+    if (!toc.runtime.built || !listElement || items.length === 0) {
       listHeight = 0;
       setIndicator(hiddenIndicator());
       return;
     }
-    pruneLinkRefs(state.items);
+    pruneLinkRefs(items);
     const listRect = listElement.getBoundingClientRect();
     listHeight = listElement.offsetHeight || listRect.height;
-    const current = state.items[state.current.index] || null;
+    const current = items[state.current.index] || null;
     updateIndicatorForItem(current);
   };
 
@@ -400,13 +431,14 @@ export function createToc(props: TocProps = {}): TocInstance {
   };
 
   const setActive = (index: number): number => {
+    const items = getItems();
     if (index === state.current.index) {
-      const current = state.items[index] || null;
+      const current = items[index] || null;
       const duration = updateIndicatorForItem(current);
       if (duration < 0) scheduleListLayoutSync();
       return duration;
     }
-    const current = state.items[index] || null;
+    const current = items[index] || null;
     flushSync(() => {
       state.current = { index, item: current };
     });
@@ -487,13 +519,14 @@ export function createToc(props: TocProps = {}): TocInstance {
   };
 
   const activate = (index: number): TocInstance => {
+    const items = getItems();
     if (
       toc.runtime.built &&
       Number.isInteger(index) &&
       index >= 0 &&
-      index < state.items.length
+      index < items.length
     ) {
-      scrollToItem(state.items[index], { activeIndex: index });
+      scrollToItem(items[index], { activeIndex: index });
     }
     return toc;
   };
@@ -505,80 +538,95 @@ export function createToc(props: TocProps = {}): TocInstance {
     actions: { activate },
     view: () => {
       createEffect(() => {
-        const items = state.items;
+        const items = getItems();
         void items.map((item) => item.id).join('\0');
         untrack(() => {
           pruneLinkRefs(items);
+          if (items.length === 0) {
+            listElement = null;
+            listHeight = 0;
+            linkRefs.clear();
+            syncActiveMarker(null);
+            setIndicator(hiddenIndicator());
+          }
           scheduleListLayoutSync();
         });
       });
-      const titleElement = settings.title
-        ? jsx('div', {
-            className: settings.className.title,
-            'data-toc-title': '',
-            children: translate('toc'),
-          })
-        : null;
-      const listView = jsx('div', {
-        ref: (element: HTMLElement) => {
-          listElement = element;
-          scheduleListLayoutSync();
-        },
-        className: settings.className.list,
-        'data-toc-list': 'root',
-        children: [
-          For({
-            each: renderableItems,
-            key: (item: TocItem) => item.id,
-            children: (
-              itemAccessor: () => TocItem,
-              indexAccessor: () => number
-            ) =>
-              jsx('a', {
-                ref: (element: HTMLElement) =>
-                  bindLinkRef(itemAccessor(), element),
-                className: settings.className.link,
-                href: () => `#${itemAccessor().id}`,
-                'data-toc-link': () => String(indexAccessor()),
-                'data-toc-target': () => itemAccessor().id,
-                'data-toc-level': () => String(itemAccessor().level),
-                onClick: (event: Event) => {
-                  event.preventDefault();
-                  const item = itemAccessor();
-                  scrollToItem(item, {
-                    activeIndex: state.items.findIndex(
-                      (current) => current.id === item.id
-                    ),
-                    updateHash: true,
-                  });
-                },
-                children: () => itemAccessor().text,
-              }),
-          }),
-          For({
-            each: () => (state.items.length > 0 ? [true] : []),
-            key: () => 'toc-indicator',
-            children: () =>
-              jsx('div', {
-                className: settings.className.indicator,
-                'data-toc-indicator': '',
-                hidden: () => !state.indicator.visible,
-                style: () => ({
-                  top: `${state.indicator.top}px`,
-                  width: settings.indicatorWidth,
-                  height: `${state.indicator.height}px`,
-                  transitionDuration: `${state.indicator.duration}ms`,
-                  transitionTimingFunction: state.indicator.timingFunction,
-                }),
-              }),
-          }),
-        ],
-      });
-      return jsx('nav', {
+      const root = jsx('nav', {
         className: settings.className.toc,
         'data-toc': 'root',
-        children: settings.title ? [titleElement, listView] : listView,
       }) as HTMLElement;
+      insert(
+        root,
+        Show({
+          when: hasItems,
+          children: () => {
+            const titleElement = settings.title
+              ? jsx('div', {
+                  className: settings.className.title,
+                  'data-toc-title': '',
+                  children: translate('toc'),
+                })
+              : null;
+            const listView = jsx('div', {
+              ref: (element: HTMLElement) => {
+                listElement = element;
+                scheduleListLayoutSync();
+              },
+              className: settings.className.list,
+              'data-toc-list': 'root',
+              children: For({
+                each: renderableItems,
+                key: (item: TocItem) => item.id,
+                children: (itemAccessor: () => TocItem) =>
+                  jsx('a', {
+                    ref: (element: HTMLElement) =>
+                      bindLinkRef(itemAccessor(), element),
+                    className: settings.className.link,
+                    href: () => `#${itemAccessor().id}`,
+                    'data-toc-level': () => String(itemAccessor().level),
+                    onClick: (event: Event) => {
+                      event.preventDefault();
+                      const item = itemAccessor();
+                      scrollToItem(item, {
+                        activeIndex: getItems().findIndex(
+                          (current) => current.id === item.id
+                        ),
+                        updateHash: true,
+                      });
+                    },
+                    children: () => itemAccessor().text,
+                  }),
+              }),
+            }) as HTMLElement;
+            insert(
+              listView,
+              Show({
+                when: hasItems,
+                children: () =>
+                  jsx('div', {
+                    className: settings.className.indicator,
+                    'data-toc-indicator': '',
+                    hidden: () => !state.indicator.visible,
+                    style: () => ({
+                      pointerEvents: 'none',
+                      position: 'absolute',
+                      left: settings.indicator.left,
+                      top: `${state.indicator.top}px`,
+                      width: settings.indicator.width,
+                      height: `${state.indicator.height}px`,
+                      transition: `top ${state.indicator.duration}ms ${state.indicator.timingFunction}`,
+                      borderRadius: settings.indicator.radius,
+                      backgroundColor: settings.indicator.color,
+                    }),
+                  }),
+              })
+            );
+            return settings.title ? [titleElement, listView] : listView;
+          },
+        })
+      );
+      return root;
     },
     onBuild(context) {
       target = requireContainer(settings.target, 'Toc.target');

package/src/css/form.css

@@ -5,14 +5,9 @@
     display: flex;
   }
 
-  .j-form.is-vertical {
+  .j-form {
     flex-direction: column;
-    gap: var(--s2);
-  }
-
-  .j-form.is-horizontal {
-    flex-direction: row;
-    gap: var(--s2);
+    gap: var(--s3);
   }
 
   .j-form .form-field {
@@ -23,47 +18,24 @@
   .j-form fieldset.form-field {
     border: 0;
     padding: 0;
-    min-inline-size: 0;
   }
 
-  .j-form.is-item-vertical .form-field {
+  .j-form .form-field {
     flex-direction: column;
   }
 
-  .j-form.is-item-horizontal .form-field {
-    flex-direction: row;
-  }
-
   .j-form .form-field .field-legend {
+    justify-content: space-between;
     color: var(--ui-fg-muted);
     font-size: var(--font-size-sm);
-  }
-
-  .j-form .form-field > legend.field-legend {
-    padding: 0;
-  }
-
-  .j-form .form-field .field-legend,
-  .j-form .form-field .field-control {
     gap: var(--space);
   }
 
-  .j-form.is-horizontal .form-field .field-legend {
-    align-items: center;
-    height: var(--el-height-md);
-  }
-
   .j-form .field-legend.is-required::after {
     content: '*';
     color: var(--state-danger);
   }
 
-  .j-form .form-field .field-control {
-    display: flex;
-    flex-direction: column;
-    margin: 0;
-  }
-
   .j-form .form-field .field-control .help-block {
     font-size: var(--font-size-sm);
     color: var(--ui-fg-soft);
@@ -77,17 +49,13 @@
   .j-form .form-buttons {
     display: flex;
     gap: var(--s2);
-    margin-top: 1rem;
+    margin-top: var(--s2);
   }
 
   .j-form [data-field-buttons] button {
     position: relative;
   }
 
-  .j-form.is-horizontal .form-buttons {
-    margin: 0;
-  }
-
   /* input */
   .j-input {
     font-size: var(--input-font-size);
@@ -96,7 +64,6 @@
   }
 
   .j-input:not([type='checkbox']) {
-    /* display: block; */
     border-width: 1px;
     border-style: solid;
     border-color: var(--ui-border);
@@ -520,9 +487,9 @@
     cursor: not-allowed;
   }
 
-  .j-form.is-vertical input.j-input:not([type='checkbox']):not([type='radio']),
-  .j-form.is-vertical select.j-select,
-  .j-form.is-vertical textarea.j-textarea {
+  .j-form input.j-input:not([type='checkbox']):not([type='radio']),
+  .j-form select.j-select,
+  .j-form textarea.j-textarea {
     width: 100%;
   }
 

package/src/css/themes/default/form.css

@@ -1,9 +1,4 @@
 @layer themes {
-  .j-form.is-lg {
-    --form-gap-vertical: var(--s3);
-    --form-gap-horizontal: var(--s3);
-  }
-
   .j-input {
     --input-font-size: var(--font-size-md);
     --input-bg: inherit;
@@ -87,7 +82,6 @@
     --btn-fg: var(--ui-fg-muted);
     --btn-bg: var(--ui-bg-muted);
     --btn-padding: 0 var(--s2);
-    /* --btn-box-shadow: none; */
   }
 
   .input-group .el-addon .is-text {

package/src/css/themes/default/tip.css

@@ -1,7 +1,6 @@
 @layer themes {
   .j-tip {
     --tip-border-color: var(--ui-border);
-    --tip-fg: var(--ui-fg);
     --tip-bg: var(--ui-bg);
 
     row-gap: var(--s2);
@@ -12,17 +11,21 @@
     border-radius: var(--radius-md);
     padding: var(--s3) var(--s4);
     font-size: var(--font-size-md);
-    color: var(--tip-fg);
     background: var(--tip-bg);
-    box-shadow: var(--shadow-sm);
+    box-shadow: var(--shadow-xs);
+    backdrop-filter: blur(2px);
   }
 
   .j-tip .tip-icon {
-    color: var(--tip-fg);
     transform: translateY(calc(var(--space, 0.25rem) * 0.5));
     margin: 0;
   }
 
+  .j-tip .tip-icon,
+  .j-tip .tip-title {
+    color: var(--tip-fg);
+  }
+
   .j-tip .tip-icon,
   .j-tip .tip-icon svg {
     width: var(--font-size-xl);
@@ -30,29 +33,30 @@
   }
 
   .j-tip .tip-title {
-    /* line-height: var(--line-height-paragraph); */
     font-weight: var(--font-medium);
   }
 
-  /* .j-tip .tip-content {
-    line-height: var(--line-height-paragraph);
-  } */
+  .j-tip.is-primary {
+    --tip-border-color: var(--state-info-border);
+    --tip-bg: var(--state-info-soft);
+    --tip-fg: var(--state-info-text);
+  }
 
   .j-tip.is-success {
-    --tip-border-color: var(--state-success);
-    --tip-bg: var(--state-success-muted);
-    --tip-fg: var(--state-success);
+    --tip-border-color: var(--state-success-border);
+    --tip-bg: var(--state-success-soft);
+    --tip-fg: var(--state-success-text);
   }
 
   .j-tip.is-warning {
-    --tip-border-color: var(--state-warning);
-    --tip-bg: var(--state-warning-muted);
-    --tip-fg: var(--state-warning);
+    --tip-border-color: var(--state-warning-border);
+    --tip-bg: var(--state-warning-soft);
+    --tip-fg: var(--state-warning-text);
   }
 
   .j-tip.is-danger {
-    --tip-border-color: var(--state-danger);
-    --tip-bg: var(--state-danger-muted);
-    --tip-fg: var(--state-danger);
+    --tip-border-color: var(--state-danger-border);
+    --tip-bg: var(--state-danger-soft);
+    --tip-fg: var(--state-danger-text);
   }
 }