vanilla-jui 1.7.8 → 1.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.7.8",
+  "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/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);
   }
 }

package/src/css/tip.css

@@ -27,6 +27,7 @@
 
   .j-tip .tip-content {
     grid-column-start: 2;
+    color: var(--ui-gray);
   }
 
   .j-tip .tip-content > *:first-child {

package/src/primitives/loading.ts

@@ -33,8 +33,8 @@ export function createLoading(
       position: 'absolute',
       width: '100%',
       height: '100%',
-      borderRadius: 'inherit',
-      backdropFilter: 'blur(4px)',
+      // borderRadius: 'inherit',
+      // backdropFilter: 'blur(4px)',
     },
     children: i,
   });