vanilla-jui 1.5.28 → 1.5.30

package/package.json

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

package/src/components/flow.ts

@@ -49,7 +49,6 @@ export interface FlowStep {
   title?: string;
   content?: RenderableContent<FlowContext>;
   data?: FlowData;
-  modal?: FlowData | ((context: FlowContext) => FlowData | null) | null;
   onEnter?: FlowLifecycleHook;
   onLeave?: FlowLifecycleHook;
   onNext?: FlowMoveHook;
@@ -377,10 +376,6 @@ function cloneSteps(steps: unknown): FlowStep[] {
     return {
       ...source,
       data: clonePlainObject(source.data),
-      modal:
-        typeof source.modal === 'function' || source.modal == null
-          ? source.modal
-          : clonePlainObject(source.modal),
     };
   });
 }

package/src/css/avatar.css

@@ -16,6 +16,10 @@
     font-weight: var(--avatar-font-weight);
   }
 
+  .j-avatar img {
+    border-radius: var(--avatar-border-radius);
+  }
+
   .j-avatar img,
   .j-avatar svg {
     margin: 0;

package/src/css/editor.css

@@ -15,29 +15,29 @@
   }
 
   /* ============================================
-      Editor - 文章阅读/编辑器预览样式
-    ============================================ */
+    Editor - 文章阅读/编辑器预览样式
+  ============================================ */
   .j-editor {
     font-size: var(--editor-font-size);
     line-height: var(--editor-line-height);
     letter-spacing: var(--editor-letter-space);
     word-spacing: var(--editor-word-space);
     word-break: break-word;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    outline: var(--editor-outline);
+    outline: 0;
     position: relative;
   }
 
   /* ============================================
-      Typography - 段落与标题
-    ============================================ */
-  .j-editor > p:first-of-type {
-    margin-bottom: var(--editor-paragraph-space);
+    reset - 重置样式
+  ============================================ */
+  .j-editor p {
+    margin: 0;
   }
 
-  .j-editor > p:not(:first-of-type) {
+  /* ============================================
+      Typography - 段落与标题
+    ============================================ */
+  .j-editor > p {
     margin-block: var(--editor-paragraph-space);
   }
 
@@ -48,7 +48,7 @@
   .j-editor h5,
   .j-editor h6 {
     margin: var(--editor-heading-space) 0
-      calc(var(--editor-heading-space) * 0.8);
+      calc(var(--editor-heading-space) * 0.625);
     font-weight: 600;
     color: var(--editor-heading-fg);
     letter-spacing: -0.02em;
@@ -56,24 +56,22 @@
 
   .j-editor h1 {
     font-size: 2em;
-    font-weight: 700;
     letter-spacing: -0.03em;
     margin-top: 0;
   }
 
   .j-editor h2 {
-    font-size: 1.625em;
-    font-weight: 650;
-    padding-bottom: 0.25em;
+    font-size: 1.75em;
+    padding-bottom: 2px;
     border-bottom: 1px solid var(--editor-border-subtle);
   }
 
   .j-editor h3 {
-    font-size: 1.375em;
+    font-size: 1.5em;
   }
 
   .j-editor h4 {
-    font-size: 1.125em;
+    font-size: 1.25em;
   }
 
   .j-editor h5,
@@ -82,21 +80,21 @@
   }
 
   /* 标题后的段落减少间距 */
-  .j-editor h1 + p,
-  .j-editor h2 + p,
-  .j-editor h3 + p,
-  .j-editor h4 + p,
-  .j-editor h5 + p,
-  .j-editor h6 + p {
+  /* .j-editor h1+p,
+  .j-editor h2+p,
+  .j-editor h3+p,
+  .j-editor h4+p,
+  .j-editor h5+p,
+  .j-editor h6+p {
     margin-top: calc(var(--editor-paragraph-space) * -0.5);
-  }
+  } */
 
   /* ============================================
       Inline Elements - 内联元素
     ============================================ */
   .j-editor strong,
   .j-editor b {
-    font-weight: 650;
+    font-weight: 600;
     color: var(--editor-heading-fg);
   }
 
@@ -247,30 +245,27 @@
 
   /* Definition List */
   .j-editor dl {
-    margin: 0 0 var(--editor-block-space);
+    margin-block: var(--editor-block-space);
   }
 
   .j-editor dt {
     font-weight: 600;
-    margin-top: 0.75em;
-    margin-bottom: 0.125em;
+    margin-top: 0.75rem;
+    margin-bottom: var(--editor-dot-space);
     color: var(--editor-heading-fg);
   }
 
-  .j-editor dt:first-child {
+  .j-editor dl dt:first-child {
     margin-top: 0;
   }
 
   .j-editor dd {
-    margin: 0 0 0.75em;
-    padding-left: 1em;
+    margin: 0 0 0.75rem;
+    padding-left: var(--editor-paragraph-space);
     color: var(--tone-body);
   }
 
-  /* checkbox - 任务列表 */
-  .j-editor .j-checkbox {
-    margin-block: var(--editor-paragraph-space);
-  }
+  /* 任务列表 */
 
   /* ============================================
       Blockquote - 引用
@@ -279,7 +274,7 @@
     margin: var(--editor-block-space) 0;
     margin-left: 0;
     margin-right: 0;
-    padding: 1em 1.5em;
+    padding: 0.75rem 1.25rem;
     border-left: 3px solid var(--editor-border-tone);
     border-radius: 0 var(--radius-md) var(--radius-md) 0;
     background-color: var(--editor-blockquote-bg);
@@ -292,12 +287,12 @@
   }
 
   .j-editor blockquote p + p {
-    margin-top: 0.625em;
+    margin-top: 0.5rem;
   }
 
   .j-editor cite {
     display: block;
-    margin-top: 0.75em;
+    margin-block: 0.5rem;
     font-style: normal;
     font-size: 0.875em;
     color: var(--editor-caption-fg);
@@ -315,13 +310,14 @@
   }
 
   .j-editor code:not([class*='language-']) {
-    font-family:
-      'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+    /* font-family:
+      'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; */
+    font-family: Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
     font-size: 0.875em;
     border: 1px solid var(--editor-border-subtle);
     border-radius: var(--radius-sm);
     word-break: break-word;
-    padding: 0.15em 0.4em;
+    padding: 2px 4px;
     background: var(--editor-code-bg);
     color: var(--editor-code-fg);
   }
@@ -333,7 +329,7 @@
     border: 1px solid var(--editor-border);
     border-bottom-width: 2px;
     border-radius: var(--radius-sm);
-    padding: 0.1em 0.4em;
+    padding: 2px 8px;
     color: var(--tone-body);
   }
 
@@ -539,7 +535,6 @@
   .j-editor img {
     max-width: 100%;
     height: auto;
-    border-radius: var(--radius-lg);
   }
 
   .j-editor figure {
@@ -554,8 +549,8 @@
   }
 
   .j-editor figcaption {
-    margin-top: 0.75em;
-    font-size: 0.875em;
+    margin-top: 0.75rem;
+    font-size: var(--font-size-md);
     color: var(--editor-caption-fg);
     text-align: center;
     line-height: 1.5;
@@ -671,9 +666,8 @@
   }
 
   /* ============================================
-       Address
-       ============================================ */
-
+    Address
+  ============================================ */
   .j-editor address {
     font-style: normal;
     margin-block: var(--editor-block-space);
@@ -685,14 +679,8 @@
   }
 
   /* ============================================
-       Block Item - 通用块级元素
-       ============================================ */
-
-  .j-editor .block-item {
-    margin: var(--editor-block-space) 0;
-  }
-
-  /* First/Last child margin reset */
+    Block Item - 通用块级元素
+  ============================================ */
   .j-editor > *:first-child {
     margin-top: 0;
   }
@@ -700,4 +688,8 @@
   .j-editor > *:last-child {
     margin-bottom: 0;
   }
+
+  .j-editor .block {
+    margin: var(--editor-block-space) 0;
+  }
 }

package/src/css/flow.css

@@ -3,11 +3,9 @@
     --flow-gap: var(--s2);
     --flow-step-size: 28px;
     --flow-border: 1px solid var(--ui-border-subtle);
-
-    display: grid;
-    gap: var(--flow-gap);
   }
 
+  .j-flow,
   .j-flow .flow-header {
     display: grid;
     gap: var(--flow-gap);

package/src/css/form.css

@@ -95,7 +95,7 @@
 
   /* input */
   .j-input:not([type='checkbox']) {
-    display: block;
+    /* display: block; */
     padding: var(--input-padding, calc(var(--space) * 1.5) var(--s2));
     border-width: var(--input-border-width, 1px);
     border-style: var(--input-border-style, solid);
@@ -896,10 +896,7 @@
 
   /* status readonly */
   .j-input:not([type='file']):not(.is-line):not(.is-blank)[readonly] {
-    background-color: var(
-      --input-readonly-background,
-      var(--ui-surface-active)
-    );
+    background-color: var(--input-readonly-bg, var(--ui-surface-active));
   }
 
   .j-textarea[readonly] {

package/src/css/icon.css

@@ -11,8 +11,6 @@
     transform: scale(1);
     width: var(--font-size-xl);
     height: var(--font-size-xl);
-    /* border: 1px solid; */
-    /* border-radius: 50%; */
     color: inherit;
     cursor: pointer;
   }
@@ -47,12 +45,12 @@
     background-color: var(--tone-subtle);
   }
 
-  /* icon element status */
-  .el-icon[data-action-close] {
+  /* icon status */
+  .el-icon[data-action='close'] {
     cursor: pointer;
   }
 
-  .el-icon[data-action-close]:active {
+  .el-icon[data-action='close']:active {
     transform: scale(0.85);
   }
 }

package/src/css/themes/default/avatar.css

@@ -1,7 +1,7 @@
 @layer themes {
   .j-avatar {
     --avatar-size: var(--el-height-md);
-    --avatar-border-radius: var(--radius-md);
+    --avatar-border-radius: var(--radius-sm);
     --avatar-box-shadow: var(--shadow-sm);
   }
 
@@ -30,7 +30,7 @@
   }
 
   .j-avatar.is-round {
-    --avatar-border-radius: 0.5rem;
+    --avatar-border-radius: var(--radius-lg);
   }
 
   .j-avatar.is-text {

package/src/css/themes/default/button.css

@@ -32,7 +32,7 @@
   .j-button.is-lg {
     --btn-font-size: var(--font-size-lg);
     --btn-height: var(--el-height-lg);
-    --btn-padding: var(--s3) var(--s4);
+    --btn-padding: 0 var(--s3);
   }
 
   .j-button.is-default {

package/src/css/themes/default/editor.css

@@ -9,15 +9,15 @@
   }
 
   .j-editor {
-    --editor-outline: 0;
     --editor-font-size: var(--font-size-lg);
     --editor-line-height: 1.75;
     --editor-letter-space: 0.01em;
     --editor-word-space: 0.02em;
-    --editor-paragraph-space: 1.25em;
-    --editor-heading-space: 1.5em;
-    --editor-block-space: 1.5em;
-    --editor-list-space: 0.5em;
+    --editor-heading-space: 2rem;
+    --editor-block-space: 1.5rem;
+    --editor-paragraph-space: 1.25rem;
+    --editor-list-space: 0.25rem;
+    --editor-dot-space: 0.125rem;
 
     --editor-heading-fg: var(--tone-heading);
     --editor-caption-fg: var(--tone-caption);
@@ -30,7 +30,7 @@
     --editor-link-hover: var(--tone-link-hover);
     --editor-link-visited: var(--tone-link-visited);
     --editor-link-active: var(--tone-link-active);
-    --editor-border: var(--ui-border);
+    --editor-border: var(--ui-border-subtle);
     --editor-code-bg: var(--tone-code-bg);
     --editor-code-fg: var(--tone-code-fg);
     --editor-bg-subtle: var(--ui-bg-subtle);
@@ -39,25 +39,16 @@
   .j-editor.is-sm {
     --editor-font-size: var(--font-size-md);
     --editor-line-height: 1.65;
-    --editor-paragraph-space: 1em;
-    --editor-heading-space: 1.25em;
-    --editor-block-space: 1.25em;
   }
 
   .j-editor.is-lg {
     --editor-font-size: var(--font-size-xl);
     --editor-line-height: 1.8;
-    --editor-paragraph-space: 1.5em;
-    --editor-heading-space: 1.75em;
-    --editor-block-space: 1.75em;
   }
 
   .j-editor.is-xl {
     --editor-font-size: var(--font-size-2xl);
     --editor-line-height: 1.85;
-    --editor-paragraph-space: 1.75em;
-    --editor-heading-space: 2em;
-    --editor-block-space: 2em;
   }
 
   .j-radius-round .j-editor {

package/src/css/themes/default/tooltip.css

@@ -7,7 +7,7 @@
     --tooltip-border-color: var(--ui-border-strong);
     --tooltip-border-radius: var(--radius-md);
     --tooltip-max-width: 260px;
-    --tooltip-padding: calc(var(--space) * 1.5) var(--s2);
+    --tooltip-padding: 2px var(--s2);
     --tooltip-font-size: var(--font-size-md);
     --tooltip-line-height: var(--line-height);
   }