vanilla-jui 1.6.5 → 1.7.0

package/package.json

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

package/src/css/layout.css

@@ -136,11 +136,22 @@
       var(--ui-bg-muted) 0%,
       var(--ui-surface-subtle) 100%
     );
+    color: var(--ui-fg-subtle);
+    font-size: var(--font-size-sm);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--ui-fg-subtle);
-    font-size: var(--font-size-sm);
+  }
+
+  /* 图片容器 */
+  .image-container {
+    position: relative;
+  }
+
+  .image-container img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
   }
 
   /* ==============================

package/src/css/themes/default/menu.css

@@ -43,7 +43,7 @@
     border-radius: var(--menu-item-border-radius);
   }
 
-  .j-menu>.menu>.menu-item>a {
+  .j-menu > .menu > .menu-item > a {
     font-weight: var(--font-medium);
   }
 
@@ -53,7 +53,7 @@
     height: var(--menu-item-icon-size);
   }
 
-  .j-menu .menu .menu-item.menu-item-has-children>a::after {
+  .j-menu .menu .menu-item.menu-item-has-children > a::after {
     content: '';
     width: 0;
     height: 0;
@@ -65,12 +65,12 @@
     transition: transform 0.2s ease-in-out;
   }
 
-  .j-menu .menu .menu-item.menu-item-has-children:hover>a::after {
+  .j-menu .menu .menu-item.menu-item-has-children:hover > a::after {
     transform: rotate(180deg);
   }
 
   .j-menu .menu .menu-item .sub-menu {
-    transform: translateY(1px);
+    /* transform: translateY(1px); */
     padding: var(--s2) 0;
     background: var(--sub-menu-bg);
     border-width: var(--sub-menu-border-width);
@@ -99,26 +99,39 @@
 
   .j-menu .menu .menu-item .sub-menu .menu-item:hover a,
   .j-menu .menu .menu-item a:hover,
-  .j-menu .menu .menu-item.menu-item-has-children:hover>a {
+  .j-menu .menu .menu-item.menu-item-has-children:hover > a {
     text-decoration: none;
     background: var(--tone-soft);
     color: var(--tone-text);
   }
 
-  .j-menu .menu>.menu-item.current-menu-item>a,
-  .j-menu .menu>.menu-item.current-menu-ancestor>a {
+  .j-menu .menu > .menu-item.current-menu-item > a,
+  .j-menu .menu > .menu-item.current-menu-ancestor > a {
     color: var(--tone-solid);
   }
 
-  .j-menu .menu .menu-item.current-menu-item>.sub-menu>.menu-item:not(.current-menu-item) a {
+  .j-menu
+    .menu
+    .menu-item.current-menu-item
+    > .sub-menu
+    > .menu-item:not(.current-menu-item)
+    a {
     color: inherit;
   }
 
-  .j-menu .menu-item.current-menu-item>.sub-menu>.menu-item:not(.current-menu-item):hover a {
+  .j-menu
+    .menu-item.current-menu-item
+    > .sub-menu
+    > .menu-item:not(.current-menu-item):hover
+    a {
     color: var(--tone-fg);
   }
 
-  .j-menu .menu-item.menu-item-has-children:hover>.sub-menu>.menu-item.current-menu-item a {
+  .j-menu
+    .menu-item.menu-item-has-children:hover
+    > .sub-menu
+    > .menu-item.current-menu-item
+    a {
     color: var(--tone-fg);
     background-color: var(--tone-solid);
     outline: 1px solid var(--tone-solid);
@@ -144,13 +157,13 @@
   }
 
   /* list card menu */
-  .j-menu .menu-item.menu-item-has-children.list-card-menu:hover>.sub-menu {
+  .j-menu .menu-item.menu-item-has-children.list-card-menu:hover > .sub-menu {
     width: auto;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .j-menu .menu-item.list-card-menu>.sub-menu>.menu-item>a {
+  .j-menu .menu-item.list-card-menu > .sub-menu > .menu-item > a {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -158,19 +171,21 @@
     line-clamp: 1;
   }
 
-  .j-menu .menu-item.menu-item-has-children.list-card-menu:hover>.sub-menu {
+  .j-menu .menu-item.menu-item-has-children.list-card-menu:hover > .sub-menu {
     min-width: 240px;
     max-width: 360px;
     transform: translateX(-20%) translateY(1px);
   }
 
-  .j-menu .menu-item.list-card-menu>.sub-menu>.menu-item>a {
+  .j-menu .menu-item.list-card-menu > .sub-menu > .menu-item > a {
     padding: calc(var(--space) * 1.25) calc(var(--space) * 2.5);
     line-height: 1.75;
   }
 
   /* advanced card menu */
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu {
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     grid-template-rows: repeat(6, 1fr);
@@ -182,61 +197,126 @@
     transform: translateX(-33.33%) translateY(1px);
   }
 
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu img {
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    img {
     margin: 0;
   }
 
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(1) {
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(1) {
     grid-area: 1 / 1 / 2 / 3;
   }
 
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(2) {
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(2) {
     grid-area: 1 / 3 / 4 / 5;
   }
 
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(3) {
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(3) {
     grid-area: 1 / 5 / 4 / 7;
   }
 
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(4) {
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(4) {
     grid-area: 2 / 1 / 3 / 3;
   }
 
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(5) {
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(5) {
     grid-area: 3 / 1 / 4 / 3;
   }
 
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(6) {
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(6) {
     grid-area: 4 / 1 / 5 / 3;
   }
 
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(7) {
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(7) {
     grid-area: 4 / 3 / 7 / 5;
   }
 
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(8) {
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(8) {
     grid-area: 4 / 5 / 7 / 7;
   }
 
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(9) {
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(9) {
     grid-area: 5 / 1 / 6 / 3;
   }
 
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(10) {
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(10) {
     grid-area: 6 / 1 / 7 / 3;
   }
 
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(2) a,
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(3) a,
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(7) a,
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(8) a {
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(2)
+    a,
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(3)
+    a,
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(7)
+    a,
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(8)
+    a {
     padding: 0;
   }
 
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(2) a:hover,
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(3) a:hover,
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(7) a:hover,
-  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(8) a:hover {
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(2)
+    a:hover,
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(3)
+    a:hover,
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(7)
+    a:hover,
+  .j-menu
+    .menu-item.menu-item-has-children.advanced-card-menu:hover
+    > .sub-menu
+    > .menu-item:nth-child(8)
+    a:hover {
     background-color: transparent;
     outline-color: transparent;
   }
@@ -288,7 +368,10 @@
     line-height: var(--line-height-paragraph);
   }
 
-  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children>a::after {
+  .j-menu[data-menu-type='mobile']
+    .menu
+    .menu-item.menu-item-has-children
+    > a::after {
     vertical-align: middle;
     position: absolute;
     right: 1rem;
@@ -298,7 +381,10 @@
     border-top: 4px solid transparent;
   }
 
-  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children:hover>a::after {
+  .j-menu[data-menu-type='mobile']
+    .menu
+    .menu-item.menu-item-has-children:hover
+    > a::after {
     transform: none;
   }
 
@@ -316,7 +402,10 @@
   }
 
   .j-menu[data-menu-type='mobile'] .menu .menu-item a:hover,
-  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children:hover>a,
+  .j-menu[data-menu-type='mobile']
+    .menu
+    .menu-item.menu-item-has-children:hover
+    > a,
   .j-menu[data-menu-type='mobile'] .menu .sub-menu .menu-item:hover a {
     background: inherit;
     color: inherit;
@@ -326,7 +415,10 @@
     background: var(--menu-item-active-bg);
   }
 
-  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children.is-active>.sub-menu {
+  .j-menu[data-menu-type='mobile']
+    .menu
+    .menu-item.menu-item-has-children.is-active
+    > .sub-menu {
     visibility: visible;
     opacity: 1;
     z-index: var(--z-submenu);
@@ -338,12 +430,14 @@
    */
   .j-menu[data-menu-type='bottom'] {
     --menu-item-border-radius: none;
-    --sub-menu-bg: linear-gradient(to right,
-        var(--ui-surface-subtle) 20%,
-        var(--ui-border) 40%,
-        var(--ui-outline) 50%,
-        var(--ui-border) 60%,
-        var(--ui-surface-subtle) 80%);
+    --sub-menu-bg: linear-gradient(
+      to right,
+      var(--ui-surface-subtle) 20%,
+      var(--ui-border) 40%,
+      var(--ui-outline) 50%,
+      var(--ui-border) 60%,
+      var(--ui-surface-subtle) 80%
+    );
 
     position: fixed;
     bottom: 0;
@@ -358,12 +452,14 @@
     justify-content: space-between;
     gap: 1px;
     border-top: 1px solid var(--ui-border-subtle);
-    background: linear-gradient(to bottom,
-        var(--ui-bg-subtle) 20%,
-        var(--ui-border) 40%,
-        var(--ui-outline) 50%,
-        var(--ui-border) 60%,
-        var(--ui-bg-subtle) 80%);
+    background: linear-gradient(
+      to bottom,
+      var(--ui-bg-subtle) 20%,
+      var(--ui-border) 40%,
+      var(--ui-outline) 50%,
+      var(--ui-border) 60%,
+      var(--ui-bg-subtle) 80%
+    );
   }
 
   .j-menu[data-menu-type='bottom'] .menu .menu-item {
@@ -381,7 +477,10 @@
     color: var(--ui-fg);
   }
 
-  .j-menu[data-menu-type='bottom']>.menu>.menu-item.menu-item-has-children>a::after {
+  .j-menu[data-menu-type='bottom']
+    > .menu
+    > .menu-item.menu-item-has-children
+    > a::after {
     content: '☰';
     font-size: var(--font-size-sm);
     margin-left: unset;
@@ -391,17 +490,26 @@
     transition: unset;
   }
 
-  .j-menu[data-menu-type='bottom']>.menu .menu-item.menu-item-has-children:hover>a::after {
+  .j-menu[data-menu-type='bottom']
+    > .menu
+    .menu-item.menu-item-has-children:hover
+    > a::after {
     transform: none;
   }
 
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-parent>a,
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-item>a,
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children.is-active>a {
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-parent > a,
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-item > a,
+  .j-menu[data-menu-type='bottom']
+    .menu
+    .menu-item.menu-item-has-children.is-active
+    > a {
     color: var(--tone-solid);
   }
 
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children>.sub-menu {
+  .j-menu[data-menu-type='bottom']
+    .menu
+    .menu-item.menu-item-has-children
+    > .sub-menu {
     opacity: 0;
     visibility: hidden;
     display: flex;
@@ -423,28 +531,48 @@
     z-index: -1;
   }
 
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children.is-active>.sub-menu {
+  .j-menu[data-menu-type='bottom']
+    .menu
+    .menu-item.menu-item-has-children.is-active
+    > .sub-menu {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0%);
   }
 
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children>.sub-menu>.menu-item {
+  .j-menu[data-menu-type='bottom']
+    .menu
+    .menu-item.menu-item-has-children
+    > .sub-menu
+    > .menu-item {
     white-space: normal;
     border: 1px solid transparent;
   }
 
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children>.sub-menu>.menu-item>a {
+  .j-menu[data-menu-type='bottom']
+    .menu
+    .menu-item.menu-item-has-children
+    > .sub-menu
+    > .menu-item
+    > a {
     min-height: var(--el-height-2xl);
     justify-content: center;
   }
 
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children>.sub-menu>.menu-item:first-of-type {
+  .j-menu[data-menu-type='bottom']
+    .menu
+    .menu-item.menu-item-has-children
+    > .sub-menu
+    > .menu-item:first-of-type {
     border-top-left-radius: var(--radius-md);
     border-top-right-radius: var(--radius-md);
   }
 
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children>.sub-menu>.menu-item:last-of-type {
+  .j-menu[data-menu-type='bottom']
+    .menu
+    .menu-item.menu-item-has-children
+    > .sub-menu
+    > .menu-item:last-of-type {
     border-bottom-left-radius: var(--radius-md);
     border-bottom-right-radius: var(--radius-md);
   }
@@ -515,4 +643,4 @@
     color: var(--ui-fg-soft);
     font-size: var(--font-size-sm);
   }
-}
+}

package/src/utilities/id.ts

@@ -55,3 +55,76 @@ export function randomId(length: number = 8): string {
 
   return base64.substring(0, length).replace(/\+/g, '-').replace(/\//g, '_');
 }
+
+/**
+ * 查询参数值类型
+ */
+type QueryParamValue =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | QueryParamValue[]
+  | { [key: string]: QueryParamValue };
+
+/**
+ * 查询参数对象类型
+ */
+type QueryParams = Record<string, QueryParamValue>;
+
+/**
+ * 对查询参数进行 SHA-256 哈希编码，生成用于缓存的 key
+ *
+ * @param params - 查询参数对象
+ * @param bytes - 取哈希前 N 字节，默认为 8，范围 1-32
+ * @returns 36 进制哈希字符串
+ *
+ * @example
+ * ```typescript
+ * const key = await hashQueryParams({ page: 1, sort: 'desc' });
+ * // 返回: "2k7x9f3m4n5p"
+ * ```
+ */
+export async function hashQueryParams(
+  params: QueryParams,
+  bytes: number = 8
+): Promise<string> {
+  // 1. 参数验证
+  if (typeof params !== 'object' || params === null) {
+    throw new TypeError('params must be a non-null object');
+  }
+
+  if (bytes < 1 || bytes > 32) {
+    throw new RangeError('bytes must be between 1 and 32');
+  }
+
+  // 2. 排序并规范化参数
+  const normalized: QueryParams = {};
+  const sortedKeys = Object.keys(params).sort();
+
+  for (const key of sortedKeys) {
+    const value = params[key];
+    // 字符串 trim 处理
+    normalized[key] = typeof value === 'string' ? value.trim() : value;
+  }
+
+  // 3. 序列化
+  const str = JSON.stringify(normalized);
+  const buffer = new TextEncoder().encode(str);
+
+  // 4. SHA-256 哈希
+  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
+
+  // 5. 取前 N 字节（防越界）
+  const safeBytes = Math.min(bytes, hashBuffer.byteLength);
+  const slice = new Uint8Array(hashBuffer, 0, safeBytes);
+
+  // 6. 转为 BigInt 再转 36 进制
+  let num = 0n;
+  for (const byte of slice) {
+    num = (num << 8n) | BigInt(byte);
+  }
+
+  return num.toString(36);
+}