vanilla-jui 1.5.24 → 1.5.26

package/src/css/index.css

@@ -1,4 +1,4 @@
-@layer config, gradient, layout, content, icon, font, components, themes, animation, status;
+@layer tokens, gradient, layout, icon, font, components, themes, animation, status;
 
 @import url('./tokens.css');
 @import url('./gradient.css');
@@ -6,10 +6,8 @@
 @import url('./icon.css');
 @import url('./font.css');
 
-@import url('./content.css');
-
 @import url('./components.css');
 @import url('./themes/index.css');
 
 @import url('./animation.css');
-@import url('./status.css');
+@import url('./status.css');

package/src/css/pagination.css

@@ -18,12 +18,8 @@
     padding: 0;
   }
 
-  .j-pagination .more span,
-  .j-pagination .is-active {
-    cursor: default;
-  }
-
   .j-pagination ul.pagination li {
     margin: 0;
+    padding: 0;
   }
 }

package/src/css/swiper.css

@@ -2,38 +2,73 @@
   .j-swiper {
     position: relative;
     display: block;
-    width: 100%;
     overflow: hidden;
     touch-action: pan-y;
     user-select: none;
+    width: 100%;
+    min-height: var(--swiper-min-height);
+    border-radius: var(--radius-md);
   }
 
   .j-swiper .swiper-wrapper {
     display: flex;
-    width: 100%;
-    height: 100%;
     will-change: transform;
     position: relative;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: inherit;
+    border-radius: inherit;
   }
 
   .j-swiper .swiper-slide {
     position: relative;
     display: block;
-    width: 100%;
-    min-width: 100%;
     overflow: hidden;
     color: inherit;
     text-decoration: none;
     user-select: none;
+    width: 100%;
+    min-width: 100%;
+    aspect-ratio: inherit;
+    border-radius: inherit;
+  }
+
+  .j-swiper .swiper-slide::before {
+    position: absolute;
+    content: 'loading';
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: inherit;
+    border-radius: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: var(--ui-fg-soft);
+    font-size: var(--font-size-md);
+    letter-spacing: 1px;
+
+    background-color: var(--tone-wash);
+    background-image: radial-gradient(
+      circle,
+      var(--ui-border) 1px,
+      transparent 1px
+    );
+    background-size: 20px 20px;
   }
 
   .j-swiper .swiper-image {
+    position: relative;
     display: block;
+    object-fit: cover;
+    pointer-events: none;
     width: 100%;
     height: 100%;
     min-height: var(--swiper-min-height);
-    object-fit: cover;
-    pointer-events: none;
+    aspect-ratio: inherit;
+    border-radius: inherit;
   }
 
   .j-swiper .swiper-slide-title {

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

@@ -1,5 +1,5 @@
 @layer themes {
-  #j-editor {
+  #j-editor-container {
     --editor-max-width: 880px;
     --editor-min-height: calc(100vh - 51px);
     --editor-padding: 1.5rem 1.5rem 4rem;
@@ -7,4 +7,62 @@
     --editor-border-style: solid;
     --editor-border-color: var(--ui-border);
   }
+
+  .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-fg: var(--tone-heading);
+    --editor-caption-fg: var(--tone-caption);
+    --editor-ring: var(--tone-ring);
+    --editor-border-tone: var(--tone-border);
+    --editor-border-subtle: var(--ui-border-subtle);
+    --editor-blockquote-bg: var(--tone-wash);
+    --editor-blockquote-fg: var(--tone-subtitle);
+    --editor-link: var(--tone-link);
+    --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-code-bg: var(--tone-code-bg);
+    --editor-code-fg: var(--tone-code-fg);
+    --editor-bg-subtle: var(--ui-bg-subtle);
+  }
+
+  .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 {
+    --radius-sm: 0.75rem;
+    --radius-md: 1rem;
+    --radius-lg: 1.5rem;
+  }
 }

package/src/css/themes/default/index.css

@@ -1,4 +1,3 @@
-@import url('./content.css');
 @import url('./toolbar.css');
 @import url('./editor.css');
 @import url('./button.css');

package/src/css/themes/default/swiper.css

@@ -1,6 +1,6 @@
 @layer themes {
   .j-swiper {
-    --swiper-min-height: 180px;
+    --swiper-min-height: 120px;
     --swiper-title-inset: var(--s3);
     --swiper-title-padding: calc(var(--space) * 1.5) var(--s2);
     --swiper-title-color: #fff;

package/src/css/toc.css

@@ -6,7 +6,6 @@
   .j-toc .toc-list {
     display: flex;
     flex-direction: column;
-    gap: 0;
   }
 
   .j-toc .toc-link {
@@ -15,9 +14,6 @@
     color: var(--tone-caption);
     font-size: var(--font-size-sm);
     text-decoration: none;
-    transition:
-      color 0.15s,
-      border-color 0.15s;
   }
 
   .j-toc .toc-link:hover,

package/src/css/tokens.css

@@ -3,7 +3,7 @@
    vanilla-jui v2
    ============================================ */
 
-@layer config {
+@layer tokens {
   /* ============================================
      1. Layout Tokens
      ============================================ */

package/src/index.ts

@@ -7,14 +7,15 @@ export * from './utilities/id.ts';
 export * from './utilities/dom.ts';
 export * from './utilities/events.ts';
 export * from './utilities/http.ts';
-export * from './core/motion.ts';
+export * from './utilities/locale.ts';
 export * from './utilities/object.ts';
 export * from './utilities/timer.ts';
 export * from './utilities/types.ts';
-export * from './core/scheduler.ts';
 export * from './utilities/state.ts';
 export * from './utilities/refs.ts';
+export * from './core/scheduler.ts';
 export * from './core/view.ts';
+export * from './core/motion.ts';
 export * from './core/presence.ts';
 
 // UI primitives

package/src/locales/index.ts

@@ -46,5 +46,7 @@ export default {
     Submit: '提交',
     Reset: '重置',
     'Loading...': '加载中...',
+    'Go to previous page': '访问上一页',
+    'Go to next page': '访问下一页',
   },
 };

package/src/primitives/theme.ts

@@ -7,9 +7,7 @@ import {
   flushSync,
   jsx,
 } from 'vanilla-signal';
-import { t } from 'vanilla-signal-i18n';
-
-import locales from '../locales/index.ts';
+import { translate } from '../utilities/locale.ts';
 import { all, joinClasses } from '../utilities/dom.ts';
 import { createEventManager } from '../utilities/events.ts';
 import { isPlainObject } from '../utilities/object.ts';
@@ -228,7 +226,6 @@ export function createTheme(options: ThemeOptions = {}): ThemeInstance {
   const storage = createThemeStorage();
   const bindings = new Set<() => void>();
   const events = createEventManager();
-  const translate = (key: string): string => t(key, locales);
   const scheme = (): string =>
     window.matchMedia?.('(prefers-color-scheme: dark)').matches
       ? 'dark'

package/src/primitives/toast.ts

@@ -6,9 +6,7 @@ import {
   insert,
   jsx,
 } from 'vanilla-signal';
-import { t } from 'vanilla-signal-i18n';
-
-import locales from '../locales/index.ts';
+import { translate } from '../utilities/locale.ts';
 import { icon } from '../primitives/icons.ts';
 import { createLoading } from '../primitives/loading.ts';
 import { joinClasses, q } from '../utilities/dom.ts';
@@ -17,8 +15,6 @@ import { randomId } from '../utilities/id.ts';
 import { timer } from '../utilities/timer.ts';
 import { validateParam } from '../utilities/types.ts';
 
-const s = (k: string) => t(k, locales);
-
 export type ToastTheme = 'info' | 'success' | 'warning' | 'error' | 'primary';
 
 export interface ToastClassNames {
@@ -174,7 +170,7 @@ function toastIconContent(
 
 function toastMessage(message: string, options: ToastOptions): string {
   return isToastLoading(options)
-    ? options.text?.loading || s('Loading...')
+    ? options.text?.loading || translate('Loading...')
     : message;
 }
 
@@ -456,8 +452,8 @@ function confirm(message = '', props: ToastConfirmProps = {}): HTMLElement {
     if (toast) return toast;
   }
   validateParam('message', message, 'string', 'Toast.confirm');
-  const closeText = props.text?.close || s('Close');
-  const confirmText = props.text?.confirm || s('Confirm');
+  const closeText = props.text?.close || translate('Close');
+  const confirmText = props.text?.confirm || translate('Confirm');
   const theme = props.theme || 'info';
   validateParam('once', once, 'boolean', 'Toast.confirm');
   validateParam('theme', theme, TOAST_THEME_RULE, 'Toast.confirm');

package/src/utilities/browser.ts

@@ -1,6 +1,5 @@
-import { t } from 'vanilla-signal-i18n';
 import { Toast } from '../primitives/toast';
-import locales from '../locales';
+import { translate } from '../utilities/locale.ts';
 
 declare global {
   interface Navigator {
@@ -128,7 +127,7 @@ export function isModernBrowser(): SupportES2022 {
 }
 export function checkModernBrowser(): SupportES2022 {
   if (!isModernBrowser()) {
-    Toast.confirm(t('wn', locales), {
+    Toast.confirm(translate('wn'), {
       theme: 'error',
       onConfirm: () => {
         window.open('https://www.google.cn/chrome/fallback/', '_blank');

package/src/utilities/locale.ts

@@ -0,0 +1,6 @@
+import { t } from 'vanilla-signal-i18n';
+import locales from '../locales/index.ts';
+
+export function translate(key: string) {
+  return t(key, locales);
+}