jky-component-lib 0.0.73 → 0.0.77

package/dist/lib/style.css

@@ -81,9 +81,7 @@
     --color-red-700: oklch(50.5% .213 27.518);
     --color-red-800: oklch(44.4% .177 26.899);
     --color-red-900: oklch(39.6% .141 25.723);
-    --color-orange-100: oklch(95.4% .038 75.164);
     --color-orange-500: oklch(70.5% .213 47.604);
-    --color-orange-800: oklch(47% .157 37.304);
     --color-amber-500: oklch(76.9% .188 70.08);
     --color-yellow-50: oklch(98.7% .026 102.212);
     --color-yellow-100: oklch(97.3% .071 103.193);
@@ -590,6 +588,10 @@
     margin-top: auto;
   }
 
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
+
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -602,10 +604,6 @@
     margin-right: calc(var(--spacing) * 4);
   }
 
-  .mb-0 {
-    margin-bottom: calc(var(--spacing) * 0);
-  }
-
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -670,6 +668,22 @@
     mask-repeat: no-repeat;
   }
 
+  .icon-\[carbon--apple\] {
+    width: 1em;
+    height: 1em;
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='black' d='M21.779 8a11.5 11.5 0 0 0-3.055.534a15 15 0 0 1-1.822.413A6.005 6.005 0 0 0 11 4v2a3.99 3.99 0 0 1 3.827 2.9a20 20 0 0 1-1.617-.365A13 13 0 0 0 10.032 8C6.31 8 4 11.065 4 16c0 7.51 4.068 11.999 8 12h.002a7.2 7.2 0 0 0 2.49-.59A5 5 0 0 1 16 27a5 5 0 0 1 1.511.41A7.2 7.2 0 0 0 20 28c3.93-.001 8-4.49 8-12c0-3.69-1.63-8-6.221-8M20 26a5.5 5.5 0 0 1-1.79-.464A6.4 6.4 0 0 0 16 25a6.4 6.4 0 0 0-2.206.536A5.5 5.5 0 0 1 12 26h.002C9.052 25.999 6 22.259 6 16c0-1.804.393-6 4.032-6a11.2 11.2 0 0 1 2.68.473a13 13 0 0 0 3.05.527h.491a11.8 11.8 0 0 0 2.996-.536a10 10 0 0 1 2.53-.464C25.796 10 26 14.998 26 16c0 6.259-3.052 9.999-6 10'/%3E%3Cpath fill='black' d='M18 7h-1V6a2 2 0 0 1 2-2h1v1a2 2 0 0 1-2 2'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    display: inline-block;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
   .icon-\[carbon--apps\] {
     width: 1em;
     height: 1em;
@@ -1246,30 +1260,14 @@
     mask-repeat: no-repeat;
   }
 
-  .icon-\[icon-park-outline--avatar\] {
-    width: 1em;
-    height: 1em;
-    -webkit-mask-image: var(--svg);
-    -webkit-mask-image: var(--svg);
-    -webkit-mask-image: var(--svg);
-    mask-image: var(--svg);
-    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cpath fill='none' stroke='black' stroke-linejoin='round' stroke-width='4' d='M5.004 42.231a.78.78 0 0 0 .791.769h36.407a.78.78 0 0 0 .792-.769v-.918c.018-.277.055-1.657-.855-3.184c-.574-.963-1.407-1.794-2.476-2.472c-1.293-.82-2.938-1.413-4.928-1.77a29 29 0 0 1-3.002-.584c-2.632-.672-2.862-1.267-2.864-1.273a.8.8 0 0 0-.066-.169c-.022-.11-.075-.528.027-1.647c.258-2.843 1.783-4.523 3.008-5.873c.386-.425.751-.828 1.032-1.222c1.213-1.7 1.325-3.635 1.33-3.755a2 2 0 0 0-.087-.628c-.12-.37-.343-.6-.507-.77a3 3 0 0 1-.113-.12c-.012-.014-.044-.052-.015-.243a19 19 0 0 0 .203-1.857c.056-1.002.099-2.5-.16-3.959a6 6 0 0 0-.172-.825q-.408-1.507-1.32-2.57c-.105-.115-2.653-2.8-10.05-3.35c-1.023-.076-2.034-.035-3.03.016a4.4 4.4 0 0 0-.875.108c-.764.197-.968.681-1.021.952c-.089.45.067.798.17 1.03c.015.033.034.074.001.182c-.171.266-.442.506-.717.733c-.08.067-1.934 1.667-2.036 3.756c-.275 1.589-.255 4.064.07 5.775c.02.095.047.235.002.33c-.35.313-.746.668-.745 1.478c.004.082.117 2.016 1.33 3.717c.28.394.645.796 1.03 1.221l.002.001c1.225 1.35 2.75 3.03 3.008 5.872c.101 1.12.048 1.537.027 1.648a.8.8 0 0 0-.067.169c-.001.006-.23.599-2.85 1.27c-1.512.387-3 .585-3.045.59c-1.934.327-3.569.906-4.86 1.721c-1.065.673-1.9 1.507-2.48 2.477c-.928 1.55-.903 2.962-.89 3.22z'/%3E%3C/svg%3E");
-    background-color: currentColor;
-    display: inline-block;
-    -webkit-mask-size: 100% 100%;
-    mask-size: 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-  }
-
-  .icon-\[icon-park-outline--briefcase\] {
+  .icon-\[icon-park-outline--data-user\] {
     width: 1em;
     height: 1em;
     -webkit-mask-image: var(--svg);
     -webkit-mask-image: var(--svg);
     -webkit-mask-image: var(--svg);
     mask-image: var(--svg);
-    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M32 16c0-6.075-3.582-12-8-12s-8 5.925-8 12m-7 0h30l1 12H27v-3h-6v3H8zM8 28L6 42h36l-2-14'/%3E%3Cpath d='M21 25h6v6h-6z'/%3E%3C/g%3E%3C/svg%3E");
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M22 8v12c0 2.21-4.03 4-9 4s-9-1.79-9-4V8'/%3E%3Cpath d='M22 14c0 2.21-4.03 4-9 4s-9-1.79-9-4m18-6c0 2.21-4.03 4-9 4s-9-1.79-9-4s4.03-4 9-4s9 1.79 9 4m10-2h6a4 4 0 0 1 4 4v6M16 42h-6a4 4 0 0 1-4-4v-6'/%3E%3Ccircle cx='35' cy='29' r='5'/%3E%3Cpath d='M44 44H26a9 9 0 1 1 18 0'/%3E%3C/g%3E%3C/svg%3E");
     background-color: currentColor;
     display: inline-block;
     -webkit-mask-size: 100% 100%;
@@ -1278,14 +1276,14 @@
     mask-repeat: no-repeat;
   }
 
-  .icon-\[icon-park-outline--experiment\] {
+  .icon-\[icon-park-outline--shopping\] {
     width: 1em;
     height: 1em;
     -webkit-mask-image: var(--svg);
     -webkit-mask-image: var(--svg);
     -webkit-mask-image: var(--svg);
     mask-image: var(--svg);
-    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none' stroke='black' stroke-width='4'%3E%3Cpath stroke-linecap='round' d='M12 4h24'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m10.777 30l7.242-14.961V4h12.01v11.039L37.245 30'/%3E%3Cpath stroke-linejoin='round' d='M7.794 43.673a3.273 3.273 0 0 1-1.52-4.372L10.777 30S18 35 24 30s13.246 0 13.246 0l4.49 9.305A3.273 3.273 0 0 1 38.787 44H9.22c-.494 0-.981-.112-1.426-.327Z'/%3E%3C/g%3E%3C/svg%3E");
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none'%3E%3Cpath d='M39 32H13L8 12h36z'/%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M3 6h3.5L8 12m0 0l5 20h26l5-20z'/%3E%3Ccircle cx='13' cy='39' r='3' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'/%3E%3Ccircle cx='39' cy='39' r='3' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E");
     background-color: currentColor;
     display: inline-block;
     -webkit-mask-size: 100% 100%;
@@ -1294,110 +1292,14 @@
     mask-repeat: no-repeat;
   }
 
-  .icon-\[icon-park-outline--folder\] {
-    width: 1em;
-    height: 1em;
-    -webkit-mask-image: var(--svg);
-    -webkit-mask-image: var(--svg);
-    -webkit-mask-image: var(--svg);
-    mask-image: var(--svg);
-    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M7 6a2 2 0 0 1 2-2h30a2 2 0 0 1 2 2v36a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2zm9 23h4m-4 6h10'/%3E%3Cpath d='M8 5s3.765 13 16 13S40 5 40 5'/%3E%3Ccircle cx='24' cy='18' r='4'/%3E%3Cpath d='M15 4H9a2 2 0 0 0-2 2v6m26-8h6a2 2 0 0 1 2 2v6'/%3E%3C/g%3E%3C/svg%3E");
-    background-color: currentColor;
-    display: inline-block;
-    -webkit-mask-size: 100% 100%;
-    mask-size: 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-  }
-
-  .icon-\[icon-park-outline--key\] {
-    width: 1em;
-    height: 1em;
-    -webkit-mask-image: var(--svg);
-    -webkit-mask-image: var(--svg);
-    -webkit-mask-image: var(--svg);
-    mask-image: var(--svg);
-    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none' stroke='black' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M22.868 24.298a9.87 9.87 0 0 1 2.63 9.588a9.93 9.93 0 0 1-7.065 7.028a9.99 9.99 0 0 1-9.64-2.615a9.863 9.863 0 0 1 .122-13.878c3.839-3.82 10.046-3.873 13.951-.121z'/%3E%3Cpath stroke-linecap='round' d='M23 24L40 7'/%3E%3Cpath d='m30.305 16.9l5.429 5.4l6.333-6.3l-5.428-5.4z'/%3E%3C/g%3E%3C/svg%3E");
-    background-color: currentColor;
-    display: inline-block;
-    -webkit-mask-size: 100% 100%;
-    mask-size: 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-  }
-
-  .icon-\[icon-park-outline--lock\] {
-    width: 1em;
-    height: 1em;
-    -webkit-mask-image: var(--svg);
-    -webkit-mask-image: var(--svg);
-    -webkit-mask-image: var(--svg);
-    mask-image: var(--svg);
-    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none' stroke='black' stroke-linejoin='round' stroke-width='4'%3E%3Crect width='36' height='22' x='6' y='22' rx='2'/%3E%3Cpath stroke-linecap='round' d='M14 22v-8c0-5.523 4.477-10 10-10s10 4.477 10 10v8m-10 8v6'/%3E%3C/g%3E%3C/svg%3E");
-    background-color: currentColor;
-    display: inline-block;
-    -webkit-mask-size: 100% 100%;
-    mask-size: 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-  }
-
-  .icon-\[icon-park-outline--monitor\] {
-    width: 1em;
-    height: 1em;
-    -webkit-mask-image: var(--svg);
-    -webkit-mask-image: var(--svg);
-    -webkit-mask-image: var(--svg);
-    mask-image: var(--svg);
-    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none' stroke='black' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M4 10h32v28H4z'/%3E%3Cpath stroke-linecap='round' d='m44 14l-8 6.75v6.5L44 34z' clip-rule='evenodd'/%3E%3Cpath stroke-linecap='round' d='m17 19l6 5l-6 5'/%3E%3C/g%3E%3C/svg%3E");
-    background-color: currentColor;
-    display: inline-block;
-    -webkit-mask-size: 100% 100%;
-    mask-size: 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-  }
-
-  .icon-\[icon-park-outline--notebook\] {
-    width: 1em;
-    height: 1em;
-    -webkit-mask-image: var(--svg);
-    -webkit-mask-image: var(--svg);
-    -webkit-mask-image: var(--svg);
-    mask-image: var(--svg);
-    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none' stroke='black' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M10 6a2 2 0 0 1 2-2h28a2 2 0 0 1 2 2v36a2 2 0 0 1-2 2H12a2 2 0 0 1-2-2z'/%3E%3Cpath stroke-linecap='round' d='M34 6v36M6 14h8M6 24h8M6 34h8M27 4h12M27 44h12'/%3E%3C/g%3E%3C/svg%3E");
-    background-color: currentColor;
-    display: inline-block;
-    -webkit-mask-size: 100% 100%;
-    mask-size: 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-  }
-
-  .icon-\[icon-park-outline--setting\] {
-    width: 1em;
-    height: 1em;
-    -webkit-mask-image: var(--svg);
-    -webkit-mask-image: var(--svg);
-    -webkit-mask-image: var(--svg);
-    mask-image: var(--svg);
-    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none' stroke='black' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M36.686 15.171a15.4 15.4 0 0 1 2.529 6.102H44v5.454h-4.785a15.4 15.4 0 0 1-2.529 6.102l3.385 3.385l-3.857 3.857l-3.385-3.385a15.4 15.4 0 0 1-6.102 2.529V44h-5.454v-4.785a15.4 15.4 0 0 1-6.102-2.529l-3.385 3.385l-3.857-3.857l3.385-3.385a15.4 15.4 0 0 1-2.529-6.102H4v-5.454h4.785a15.4 15.4 0 0 1 2.529-6.102l-3.385-3.385l3.857-3.857l3.385 3.385a15.4 15.4 0 0 1 6.102-2.529V4h5.454v4.785a15.4 15.4 0 0 1 6.102 2.529l3.385-3.385l3.857 3.857z'/%3E%3Cpath d='M24 29a5 5 0 1 0 0-10a5 5 0 0 0 0 10Z'/%3E%3C/g%3E%3C/svg%3E");
-    background-color: currentColor;
-    display: inline-block;
-    -webkit-mask-size: 100% 100%;
-    mask-size: 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-  }
-
-  .icon-\[icon-park-outline--shopping-cart\] {
+  .icon-\[icon-park-outline--user\] {
     width: 1em;
     height: 1em;
     -webkit-mask-image: var(--svg);
     -webkit-mask-image: var(--svg);
     -webkit-mask-image: var(--svg);
     mask-image: var(--svg);
-    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none'%3E%3Cpath d='M39 32H13L8 12h36z'/%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M3 6h3.5L8 12m0 0l5 20h26l5-20z'/%3E%3Ccircle cx='13' cy='39' r='3' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'/%3E%3Ccircle cx='39' cy='39' r='3' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'/%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M22 22h8m-4 4v-8'/%3E%3C/g%3E%3C/svg%3E");
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Ccircle cx='24' cy='12' r='8'/%3E%3Cpath d='M42 44c0-9.941-8.059-18-18-18S6 34.059 6 44'/%3E%3C/g%3E%3C/svg%3E");
     background-color: currentColor;
     display: inline-block;
     -webkit-mask-size: 100% 100%;
@@ -1406,14 +1308,14 @@
     mask-repeat: no-repeat;
   }
 
-  .icon-\[icon-park-outline--user\] {
+  .icon-\[icon-park-outline--wallet\] {
     width: 1em;
     height: 1em;
     -webkit-mask-image: var(--svg);
     -webkit-mask-image: var(--svg);
     -webkit-mask-image: var(--svg);
     mask-image: var(--svg);
-    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Ccircle cx='24' cy='12' r='8'/%3E%3Cpath d='M42 44c0-9.941-8.059-18-18-18S6 34.059 6 44'/%3E%3C/g%3E%3C/svg%3E");
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none' stroke='black' stroke-width='4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.982 11.969L31.785 4l4.612 7.989z' clip-rule='evenodd'/%3E%3Cpath stroke-linejoin='round' d='M4 14a2 2 0 0 1 2-2h36a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath stroke-linejoin='round' d='M35.25 33H44V23h-8.75c-2.9 0-5.25 2.239-5.25 5s2.35 5 5.25 5Z'/%3E%3Cpath stroke-linecap='round' d='M44 16.5v24'/%3E%3C/g%3E%3C/svg%3E");
     background-color: currentColor;
     display: inline-block;
     -webkit-mask-size: 100% 100%;
@@ -1785,12 +1687,6 @@
     margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
   }
 
-  :where(.space-y-2 > :not(:last-child)) {
-    --tw-space-y-reverse: 0;
-    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
-    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
-  }
-
   :where(.space-y-3 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
@@ -1829,6 +1725,10 @@
     overflow: hidden;
   }
 
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+
   .rounded {
     border-radius: .25rem;
   }
@@ -1894,10 +1794,6 @@
     border-color: var(--color-green-200);
   }
 
-  .border-green-500 {
-    border-color: var(--color-green-500);
-  }
-
   .border-red-200 {
     border-color: var(--color-red-200);
   }
@@ -1910,10 +1806,6 @@
     border-color: var(--color-yellow-200);
   }
 
-  .border-yellow-500 {
-    border-color: var(--color-yellow-500);
-  }
-
   .border-l-\(--el-color-primary\) {
     border-left-color: var(--el-color-primary);
   }
@@ -2028,8 +1920,8 @@
     background-color: var(--color-indigo-50);
   }
 
-  .bg-orange-100 {
-    background-color: var(--color-orange-100);
+  .bg-orange-500 {
+    background-color: var(--color-orange-500);
   }
 
   .bg-purple-50 {
@@ -2301,10 +2193,6 @@
     padding-block: calc(var(--spacing) * 6);
   }
 
-  .py-8 {
-    padding-block: calc(var(--spacing) * 8);
-  }
-
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -2509,6 +2397,10 @@
     color: var(--color-green-100);
   }
 
+  .text-green-500 {
+    color: var(--color-green-500);
+  }
+
   .text-green-600 {
     color: var(--color-green-600);
   }
@@ -2525,10 +2417,6 @@
     color: var(--color-indigo-800);
   }
 
-  .text-orange-800 {
-    color: var(--color-orange-800);
-  }
-
   .text-purple-100 {
     color: var(--color-purple-100);
   }
@@ -2597,10 +2485,6 @@
     font-style: italic;
   }
 
-  .line-through {
-    text-decoration-line: line-through;
-  }
-
   .underline {
     text-decoration-line: underline;
   }
@@ -2723,14 +2607,6 @@
       background-color: var(--color-gray-300);
     }
 
-    .hover\:bg-green-600:hover {
-      background-color: var(--color-green-600);
-    }
-
-    .hover\:bg-purple-600:hover {
-      background-color: var(--color-purple-600);
-    }
-
     .hover\:bg-red-200:hover {
       background-color: var(--color-red-200);
     }
@@ -2747,10 +2623,6 @@
       color: var(--color-blue-900);
     }
 
-    .hover\:text-red-700:hover {
-      color: var(--color-red-700);
-    }
-
     .hover\:text-red-900:hover {
       color: var(--color-red-900);
     }
@@ -2763,6 +2635,11 @@
       opacity: .8;
     }
 
+    .hover\:shadow-lg:hover {
+      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+
     .hover\:shadow-xl:hover {
       --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2829,6 +2706,10 @@
     .lg\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
+
+    .lg\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
   }
 }
 

package/dist/lib/styles.css

@@ -1 +1 @@
-:root{--jky-add-input-gap:12px;--jky-add-input-row-gap:8px;--jky-add-input-min-width:100px;--jky-add-input-action-width:80px}.jky-add-input{display:flex;flex-direction:column;gap:var(--jky-add-input-row-gap);min-width:var(--jky-add-input-min-width)}.jky-add-input__row{align-items:center;display:flex;gap:var(--jky-add-input-gap)}.jky-add-input__key,.jky-add-input__value{flex:1;min-width:0}.jky-add-input__actions{display:flex;flex-shrink:0;gap:var(--jky-add-input-gap);width:var(--jky-add-input-action-width)}:root{--jky-button-primary-bg:#007bff;--jky-button-primary-text:#fff;--jky-button-primary-hover-bg:#0056b3;--jky-button-success-bg:#28a745;--jky-button-success-text:#fff;--jky-button-success-hover-bg:#1e7e34;--jky-button-warning-bg:#ffc107;--jky-button-warning-text:#fff;--jky-button-warning-hover-bg:#e0a800;--jky-button-danger-bg:#dc3545;--jky-button-danger-text:#fff;--jky-button-danger-hover-bg:#c82333;--jky-button-info-bg:#6c757d;--jky-button-info-text:#fff;--jky-button-info-hover-bg:#5a6268;--jky-button-default-bg:#fff;--jky-button-default-text:#606266;--jky-button-default-border:#dcdfe6;--jky-button-default-hover-bg:#f5f7fa;--jky-button-font-size:14px;--jky-button-font-size-small:12px;--jky-button-font-size-large:16px;--jky-button-padding:0 16px;--jky-button-padding-small:0 12px;--jky-button-padding-large:0 20px;--jky-button-height:40px;--jky-button-height-small:32px;--jky-button-height-large:48px;--jky-button-border-radius:0.375rem;--jky-button-disabled-opacity:0.5;--jky-button-disabled-bg:#f5f7fa;--jky-button-disabled-text:#c0c4cc;--jky-button-loading-opacity:0.7;--jky-button-icon-size:1.25rem;--jky-button-icon-margin:0.5rem}.jky-button{align-items:center;background-color:var(--jky-button-default-bg);border:1px solid var(--jky-button-default-border);border-radius:var(--jky-button-border-radius);color:var(--jky-button-default-text);cursor:pointer;display:inline-flex;font-size:var(--jky-button-font-size);font-weight:500;height:var(--jky-button-height);justify-content:center;padding:var(--jky-button-padding);transition:color .2s,background-color .2s}.jky-button--primary{background-color:var(--jky-button-primary-bg);border:none;color:var(--jky-button-primary-text)}.jky-button--primary:hover{background-color:var(--jky-button-primary-hover-bg)}.jky-button--success{background-color:var(--jky-button-success-bg);border:none;color:var(--jky-button-success-text)}.jky-button--success:hover{background-color:var(--jky-button-success-hover-bg)}.jky-button--warning{background-color:var(--jky-button-warning-bg);border:none;color:var(--jky-button-warning-text)}.jky-button--warning:hover{background-color:var(--jky-button-warning-hover-bg)}.jky-button--danger{background-color:var(--jky-button-danger-bg);border:none;color:var(--jky-button-danger-text)}.jky-button--danger:hover{background-color:var(--jky-button-danger-hover-bg)}.jky-button--info{background-color:var(--jky-button-info-bg);border:none;color:var(--jky-button-info-text)}.jky-button--info:hover{background-color:var(--jky-button-info-hover-bg)}.jky-button--small{font-size:var(--jky-button-font-size-small);height:var(--jky-button-height-small);padding:var(--jky-button-padding-small)}.jky-button--large{font-size:var(--jky-button-font-size-large);height:var(--jky-button-height-large);padding:var(--jky-button-padding-large)}.jky-button.is-disabled{background-color:var(--jky-button-disabled-bg);color:var(--jky-button-disabled-text);cursor:not-allowed;opacity:var(--jky-button-disabled-opacity);pointer-events:none}.jky-button.is-loading{opacity:var(--jky-button-loading-opacity);pointer-events:none;position:relative}.jky-button__loading{display:flex;inset:0;position:absolute}.jky-button__icon,.jky-button__loading{align-items:center;justify-content:center}.jky-button__icon{display:inline-flex;font-size:1em;margin-right:var(--jky-button-icon-margin)}.jky-button__icon:only-child{margin-right:0}.jky-button--suffix .jky-button__icon{margin-left:var(--jky-button-icon-margin);margin-right:0}.jky-button:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #000;outline:2px solid transparent;outline-offset:2px}.loading-spinner{animation:spin 1s linear infinite;height:var(--jky-button-icon-size);width:var(--jky-button-icon-size)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:root{--jky-button-nav-active-bg:var(--el-color-primary);--jky-button-nav-active-text:#fff;--jky-button-nav-inactive-bg:var(--el-fill-color-light);--jky-button-nav-inactive-text:var(--el-text-color-regular);--el-dropdown-menu-margin-left:12px}.jky-button-nav{align-items:center;display:flex;flex-wrap:wrap;.el-dropdown{margin-left:var(--el-dropdown-menu-margin-left)}}.jky-button-nav-item{background-color:var(--jky-button-nav-inactive-bg);color:var(--jky-button-nav-inactive-text);&.is-active,&[aria-pressed=true]{background-color:var(--jky-button-nav-active-bg);color:var(--jky-button-nav-active-text)}}:root{--j-code-mirror-border-color:#dcdfe6;--j-code-mirror-border-radius:4px;--j-code-mirror-height:400px}.j-code-mirror-editor{border-radius:var(--j-code-mirror-border-radius);height:var(--j-code-mirror-height);overflow:hidden;width:100%}.code-mirror-container{height:100%;overflow:auto;width:100%}.code-mirror-container .cm-editor{height:100%}.code-mirror-container .cm-scroller{font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:1.5;overflow:auto}.code-mirror-container .cm-gutters{background-color:#2c2d2d;border-color:#4c4d4f;color:#909399}:root{--jky-form-item-border-width:4px;--jky-form-item-border-color:var(--el-color-primary);--jky-form-item-bg-color:rgba(var(--el-color-primary-rgb),0.5);--jky-form-grid-cols-xs:1;--jky-form-grid-cols-sm:2;--jky-form-grid-cols-md:2;--jky-form-grid-cols-lg:3;--jky-form-grid-cols-xl:3;--jky-form-grid-cols-2xl:4;--jky-form-grid-cols-3xl:4}.jky-form--grid{display:grid;gap:var(--el-form-item-gutter,16px);grid-template-columns:repeat(var(--jky-form-grid-cols-xs),minmax(0,1fr))}.el-form--inline.jky-form--grid .el-form-item{margin-right:0;.el-form-item__content{align-items:flex-start}}@media (min-width:640px){.jky-form--grid{grid-template-columns:repeat(var(--jky-form-grid-cols-sm,var(--jky-form-grid-cols-xs)),minmax(0,1fr))}}@media (min-width:768px){.jky-form--grid{grid-template-columns:repeat(var(--jky-form-grid-cols-md,var(--jky-form-grid-cols-sm)),minmax(0,1fr))}}@media (min-width:1024px){.jky-form--grid{grid-template-columns:repeat(var(--jky-form-grid-cols-lg,var(--jky-form-grid-cols-md)),minmax(0,1fr))}}@media (min-width:1280px){.jky-form--grid{grid-template-columns:repeat(var(--jky-form-grid-cols-xl,var(--jky-form-grid-cols-lg)),minmax(0,1fr))}}@media (min-width:1536px){.jky-form--grid{grid-template-columns:repeat(var(--jky-form-grid-cols-2xl,var(--jky-form-grid-cols-xl)),minmax(0,1fr))}}@media (min-width:1920px){.jky-form--grid{grid-template-columns:repeat(var(--jky-form-grid-cols-3xl,var(--jky-form-grid-cols-2xl)),minmax(0,1fr))}}:root{--jky-menu-bg-color:#fff;--jky-menu-text-color:#303133;--jky-menu-active-color:#409eff;--jky-menu-hover-bg-color:#f5f7fa;--jky-menu-hover-text-color:#606266;--jky-menu-item-height:56px;--jky-menu-item-padding:0 20px;--jky-menu-item-font-size:14px;--jky-menu-icon-size:18px;--jky-menu-icon-margin:8px;--jky-menu-border-color:#e4e7ed;--jky-menu-disabled-opacity:0.5;--jky-menu-disabled-text-color:#c0c4cc}.jky-menu{li+li{margin-top:0}}:root{--jky-page-header-bg-color:#1890ff;--jky-page-header-bg-size:cover;--jky-page-header-bg-position:center;--jky-page-header-box-shadow:0 2px 8px rgba(0,0,0,.15);--jky-page-header-padding-x:24px;--jky-page-header-padding-x-mobile:16px;--jky-page-header-gap:16px;--jky-page-header-gap-mobile:12px;--jky-page-header-gap-left:12px;--jky-page-header-gap-status:12px;--jky-page-header-gap-center:24px;--jky-page-header-gap-center-mobile:12px;--jky-page-header-title-color:#fff;--jky-page-header-title-size:20px;--jky-page-header-title-size-mobile:16px;--jky-page-header-title-weight:600;--jky-page-header-text-color:hsla(0,0%,100%,.85);--jky-page-header-text-size:16px;--jky-page-header-icon-color:#fff;--jky-page-header-icon-size:20px;--jky-page-header-icon-hover-opacity:0.8;--jky-page-header-logo-height:40px;--jky-page-header-avatar-size:32px}.jky-page-header{background-color:var(--jky-page-header-bg-color);background-position:var(--jky-page-header-bg-position);background-size:var(--jky-page-header-bg-size);box-shadow:var(--jky-page-header-box-shadow);width:100%}.jky-page-header__container{align-items:center;display:flex;height:100%;justify-content:space-between;margin:0 auto;max-width:100%;padding:0 var(--jky-page-header-padding-x)}.jky-page-header__left{align-items:center;display:flex;flex-shrink:0;gap:var(--jky-page-header-gap-left)}.jky-page-header__logo{height:var(--jky-page-header-logo-height);object-fit:contain;width:auto}.jky-page-header__title{color:var(--jky-page-header-title-color);font-size:var(--jky-page-header-title-size);font-weight:var(--jky-page-header-title-weight);white-space:nowrap}.jky-page-header__center{align-items:center;display:flex;flex:1;justify-content:center;margin:0 var(--jky-page-header-gap-center);min-width:0}.jky-page-header__right{align-items:center;display:flex;flex-shrink:0;gap:var(--jky-page-header-gap)}.jky-page-header__status-icons{align-items:center;display:flex;gap:var(--jky-page-header-gap-status)}.jky-page-header__status-icon{color:var(--jky-page-header-icon-color);cursor:pointer;transition:opacity .2s;&:hover{opacity:var(--jky-page-header-icon-hover-opacity)}}.jky-page-header__time{color:var(--jky-page-header-text-color);font-size:var(--jky-page-header-text-size);white-space:nowrap}.jky-page-header__user{align-items:center;color:var(--jky-page-header-text-color);cursor:pointer;display:flex;gap:8px}.jky-page-header__avatar{color:var(--jky-page-header-icon-color);img{height:100%;object-fit:cover;width:100%}}.jky-page-header__username{white-space:nowrap}.jky-page-header__logout,.jky-page-header__username{color:var(--jky-page-header-text-color);font-size:var(--jky-page-header-text-size)}@media (max-width:768px){.jky-page-header__container{padding:0 var(--jky-page-header-padding-x-mobile)}.jky-page-header__title{font-size:var(--jky-page-header-title-size-mobile)}.jky-page-header__center{margin:0 var(--jky-page-header-gap-center-mobile)}.jky-page-header__right{gap:var(--jky-page-header-gap-mobile)}}:root{--jky-page-layout-gap:5}.jky-page-layout{column-gap:calc(var(--spacing)*var(--jky-page-layout-gap));.el-menu{border-right:none}}.jky-page-table{--jky-page-table_pagination-position:flex-end;.jky-page-table__pagination{.el-scrollbar__view{display:flex;justify-content:var(--jky-page-table_pagination-position)}}}:root{--jky-rich-editor-border:#d9d9d9;--jky-rich-editor-border-hover:#409eff;--jky-rich-editor-border-radius:4px;--jky-rich-editor-box-shadow:0 0 0 1px #409eff}.jky-rich-editor{width:100%}.jky-rich-editor .tox-tinymce{border:1px solid var(--jky-rich-editor-border);border-radius:var(--jky-rich-editor-border-radius);transition:border-color .2s}.jky-rich-editor .tox-tinymce:hover{border-color:var(--jky-rich-editor-border-hover)}.jky-rich-editor .tox-tinymce:focus-within{border-color:var(--jky-rich-editor-border-hover);box-shadow:var(--jky-rich-editor-box-shadow)}.jky-rich-editor.is-disabled .tox-tinymce{background-color:#f5f7fa;cursor:not-allowed}.jky-rich-editor.is-readonly .tox-tinymce{background-color:#fafafa}:root{--jky-say-hello-bg:#42b883;--jky-say-hello-text:#fff;--jky-say-hello-hover-bg:#3aa876;--jky-say-hello-font-size:16px;--jky-say-hello-padding:8px 20px;--jky-say-hello-margin:4px 2px;--jky-say-hello-border-radius:6px}.jky-say-hello{background-color:var(--jky-say-hello-bg);border-radius:var(--jky-say-hello-border-radius);color:var(--jky-say-hello-text);cursor:pointer;display:inline-block;font-size:var(--jky-say-hello-font-size);margin:var(--jky-say-hello-margin);padding:var(--jky-say-hello-padding);text-align:center;text-decoration:none;transition:background-color .2s ease}.jky-say-hello:hover{background-color:var(--jky-say-hello-hover-bg)}@import "tailwindcss";@plugin "@iconify/tailwind4";@source "../node_modules/jky-component-lib/dist/es/";@source "../docs/**/*.md";@source "./**/*.md";@source "./**/*.vue";@source "./**/*.css";@custom-variant dark (&:is(.dark *));.jky-tabs{--jky-tabs-color:var(--el-text-color-regular);--jky-tabs-active-color:var(--el-color-primary);--jky-tabs-height:40px;--jky-tabs-font-size:14px;.el-tabs__item{color:var(--jky-tabs-color);font-size:var(--jky-tabs-font-size);height:var(--jky-tabs-height);line-height:var(--jky-tabs-height);&.is-active{color:var(--jky-tabs-active-color)}}.el-tabs__active-bar{background-color:var(--jky-tabs-active-color)}}.jky-tabs--route{.el-tabs__item{&.is-closable:hover{.el-tabs__item__close{opacity:1}}}}
+:root{--jky-add-input-gap:12px;--jky-add-input-row-gap:8px;--jky-add-input-min-width:100px;--jky-add-input-action-width:80px}.jky-add-input{display:flex;flex-direction:column;gap:var(--jky-add-input-row-gap);min-width:var(--jky-add-input-min-width)}.jky-add-input__row{align-items:center;display:flex;gap:var(--jky-add-input-gap)}.jky-add-input__key,.jky-add-input__value{flex:1;min-width:0}.jky-add-input__actions{display:flex;flex-shrink:0;gap:var(--jky-add-input-gap);width:var(--jky-add-input-action-width)}:root{--jky-button-primary-bg:#007bff;--jky-button-primary-text:#fff;--jky-button-primary-hover-bg:#0056b3;--jky-button-success-bg:#28a745;--jky-button-success-text:#fff;--jky-button-success-hover-bg:#1e7e34;--jky-button-warning-bg:#ffc107;--jky-button-warning-text:#fff;--jky-button-warning-hover-bg:#e0a800;--jky-button-danger-bg:#dc3545;--jky-button-danger-text:#fff;--jky-button-danger-hover-bg:#c82333;--jky-button-info-bg:#6c757d;--jky-button-info-text:#fff;--jky-button-info-hover-bg:#5a6268;--jky-button-default-bg:#fff;--jky-button-default-text:#606266;--jky-button-default-border:#dcdfe6;--jky-button-default-hover-bg:#f5f7fa;--jky-button-font-size:14px;--jky-button-font-size-small:12px;--jky-button-font-size-large:16px;--jky-button-padding:0 16px;--jky-button-padding-small:0 12px;--jky-button-padding-large:0 20px;--jky-button-height:40px;--jky-button-height-small:32px;--jky-button-height-large:48px;--jky-button-border-radius:0.375rem;--jky-button-disabled-opacity:0.5;--jky-button-disabled-bg:#f5f7fa;--jky-button-disabled-text:#c0c4cc;--jky-button-loading-opacity:0.7;--jky-button-icon-size:1.25rem;--jky-button-icon-margin:0.5rem}.jky-button{align-items:center;background-color:var(--jky-button-default-bg);border:1px solid var(--jky-button-default-border);border-radius:var(--jky-button-border-radius);color:var(--jky-button-default-text);cursor:pointer;display:inline-flex;font-size:var(--jky-button-font-size);font-weight:500;height:var(--jky-button-height);justify-content:center;padding:var(--jky-button-padding);transition:color .2s,background-color .2s}.jky-button--primary{background-color:var(--jky-button-primary-bg);border:none;color:var(--jky-button-primary-text)}.jky-button--primary:hover{background-color:var(--jky-button-primary-hover-bg)}.jky-button--success{background-color:var(--jky-button-success-bg);border:none;color:var(--jky-button-success-text)}.jky-button--success:hover{background-color:var(--jky-button-success-hover-bg)}.jky-button--warning{background-color:var(--jky-button-warning-bg);border:none;color:var(--jky-button-warning-text)}.jky-button--warning:hover{background-color:var(--jky-button-warning-hover-bg)}.jky-button--danger{background-color:var(--jky-button-danger-bg);border:none;color:var(--jky-button-danger-text)}.jky-button--danger:hover{background-color:var(--jky-button-danger-hover-bg)}.jky-button--info{background-color:var(--jky-button-info-bg);border:none;color:var(--jky-button-info-text)}.jky-button--info:hover{background-color:var(--jky-button-info-hover-bg)}.jky-button--small{font-size:var(--jky-button-font-size-small);height:var(--jky-button-height-small);padding:var(--jky-button-padding-small)}.jky-button--large{font-size:var(--jky-button-font-size-large);height:var(--jky-button-height-large);padding:var(--jky-button-padding-large)}.jky-button.is-disabled{background-color:var(--jky-button-disabled-bg);color:var(--jky-button-disabled-text);cursor:not-allowed;opacity:var(--jky-button-disabled-opacity);pointer-events:none}.jky-button.is-loading{opacity:var(--jky-button-loading-opacity);pointer-events:none;position:relative}.jky-button__loading{display:flex;inset:0;position:absolute}.jky-button__icon,.jky-button__loading{align-items:center;justify-content:center}.jky-button__icon{display:inline-flex;font-size:1em;margin-right:var(--jky-button-icon-margin)}.jky-button__icon:only-child{margin-right:0}.jky-button--suffix .jky-button__icon{margin-left:var(--jky-button-icon-margin);margin-right:0}.jky-button:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #000;outline:2px solid transparent;outline-offset:2px}.loading-spinner{animation:spin 1s linear infinite;height:var(--jky-button-icon-size);width:var(--jky-button-icon-size)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:root{--jky-button-nav-active-bg:var(--el-color-primary);--jky-button-nav-active-text:#fff;--jky-button-nav-inactive-bg:var(--el-fill-color-light);--jky-button-nav-inactive-text:var(--el-text-color-regular);--el-dropdown-menu-margin-left:12px}.jky-button-nav{align-items:center;display:flex;flex-wrap:wrap;.el-dropdown{margin-left:var(--el-dropdown-menu-margin-left)}}.jky-button-nav-item{background-color:var(--jky-button-nav-inactive-bg);color:var(--jky-button-nav-inactive-text);&.is-active,&[aria-pressed=true]{background-color:var(--jky-button-nav-active-bg);color:var(--jky-button-nav-active-text)}}:root{--j-code-mirror-border-color:#dcdfe6;--j-code-mirror-border-radius:4px;--j-code-mirror-height:400px}.j-code-mirror-editor{border-radius:var(--j-code-mirror-border-radius);height:var(--j-code-mirror-height);overflow:hidden;width:100%}.code-mirror-container{height:100%;overflow:auto;width:100%}.code-mirror-container .cm-editor{height:100%}.code-mirror-container .cm-scroller{font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:1.5;overflow:auto}.code-mirror-container .cm-gutters{background-color:#2c2d2d;border-color:#4c4d4f;color:#909399}:root{--jky-form-item-border-width:4px;--jky-form-item-border-color:var(--el-color-primary);--jky-form-item-bg-color:rgba(var(--el-color-primary-rgb),0.5);--jky-form-grid-cols-xs:1;--jky-form-grid-cols-sm:2;--jky-form-grid-cols-md:2;--jky-form-grid-cols-lg:3;--jky-form-grid-cols-xl:3;--jky-form-grid-cols-2xl:4;--jky-form-grid-cols-3xl:4}.jky-form--grid{display:grid;gap:var(--el-form-item-gutter,16px);grid-template-columns:repeat(var(--jky-form-grid-cols-xs),minmax(0,1fr))}.el-form--inline.jky-form--grid .el-form-item{margin-right:0;.el-form-item__content{align-items:flex-start}}@media (min-width:640px){.jky-form--grid{grid-template-columns:repeat(var(--jky-form-grid-cols-sm,var(--jky-form-grid-cols-xs)),minmax(0,1fr))}}@media (min-width:768px){.jky-form--grid{grid-template-columns:repeat(var(--jky-form-grid-cols-md,var(--jky-form-grid-cols-sm)),minmax(0,1fr))}}@media (min-width:1024px){.jky-form--grid{grid-template-columns:repeat(var(--jky-form-grid-cols-lg,var(--jky-form-grid-cols-md)),minmax(0,1fr))}}@media (min-width:1280px){.jky-form--grid{grid-template-columns:repeat(var(--jky-form-grid-cols-xl,var(--jky-form-grid-cols-lg)),minmax(0,1fr))}}@media (min-width:1536px){.jky-form--grid{grid-template-columns:repeat(var(--jky-form-grid-cols-2xl,var(--jky-form-grid-cols-xl)),minmax(0,1fr))}}@media (min-width:1920px){.jky-form--grid{grid-template-columns:repeat(var(--jky-form-grid-cols-3xl,var(--jky-form-grid-cols-2xl)),minmax(0,1fr))}}:root{--jky-menu-bg-color:#fff;--jky-menu-text-color:#303133;--jky-menu-active-color:#409eff;--jky-menu-hover-bg-color:#f5f7fa;--jky-menu-hover-text-color:#606266;--jky-menu-item-height:56px;--jky-menu-item-padding:0 20px;--jky-menu-item-font-size:14px;--jky-menu-icon-size:18px;--jky-menu-icon-margin:8px;--jky-menu-border-color:#e4e7ed;--jky-menu-disabled-opacity:0.5;--jky-menu-disabled-text-color:#c0c4cc}.jky-menu{li+li{margin-top:0}}:root{--jky-page-header-bg-color:#1890ff;--jky-page-header-bg-size:cover;--jky-page-header-bg-position:center;--jky-page-header-box-shadow:0 2px 8px rgba(0,0,0,.15);--jky-page-header-padding-x:24px;--jky-page-header-padding-x-mobile:16px;--jky-page-header-gap:16px;--jky-page-header-gap-mobile:12px;--jky-page-header-gap-left:12px;--jky-page-header-gap-status:12px;--jky-page-header-gap-center:24px;--jky-page-header-gap-center-mobile:12px;--jky-page-header-title-color:#fff;--jky-page-header-title-size:20px;--jky-page-header-title-size-mobile:16px;--jky-page-header-title-weight:600;--jky-page-header-text-color:hsla(0,0%,100%,.85);--jky-page-header-text-size:16px;--jky-page-header-icon-color:#fff;--jky-page-header-icon-size:20px;--jky-page-header-icon-hover-opacity:0.8;--jky-page-header-logo-height:40px;--jky-page-header-avatar-size:32px}.jky-page-header{background-color:var(--jky-page-header-bg-color);background-position:var(--jky-page-header-bg-position);background-size:var(--jky-page-header-bg-size);box-shadow:var(--jky-page-header-box-shadow);width:100%}.jky-page-header__container{align-items:center;display:flex;height:100%;justify-content:space-between;margin:0 auto;max-width:100%;padding:0 var(--jky-page-header-padding-x)}.jky-page-header__left{align-items:center;display:flex;flex-shrink:0;gap:var(--jky-page-header-gap-left)}.jky-page-header__logo{height:var(--jky-page-header-logo-height);object-fit:contain;width:auto}.jky-page-header__title{color:var(--jky-page-header-title-color);font-size:var(--jky-page-header-title-size);font-weight:var(--jky-page-header-title-weight);white-space:nowrap}.jky-page-header__center{align-items:center;display:flex;flex:1;justify-content:center;margin:0 var(--jky-page-header-gap-center);min-width:0}.jky-page-header__right{align-items:center;display:flex;flex-shrink:0;gap:var(--jky-page-header-gap)}.jky-page-header__status-icons{align-items:center;display:flex;gap:var(--jky-page-header-gap-status)}.jky-page-header__status-icon{color:var(--jky-page-header-icon-color);cursor:pointer;transition:opacity .2s;&:hover{opacity:var(--jky-page-header-icon-hover-opacity)}}.jky-page-header__time{color:var(--jky-page-header-text-color);font-size:var(--jky-page-header-text-size);white-space:nowrap}.jky-page-header__user{align-items:center;color:var(--jky-page-header-text-color);cursor:pointer;display:flex;gap:8px}.jky-page-header__avatar{color:var(--jky-page-header-icon-color);img{height:100%;object-fit:cover;width:100%}}.jky-page-header__username{white-space:nowrap}.jky-page-header__logout,.jky-page-header__username{color:var(--jky-page-header-text-color);font-size:var(--jky-page-header-text-size)}@media (max-width:768px){.jky-page-header__container{padding:0 var(--jky-page-header-padding-x-mobile)}.jky-page-header__title{font-size:var(--jky-page-header-title-size-mobile)}.jky-page-header__center{margin:0 var(--jky-page-header-gap-center-mobile)}.jky-page-header__right{gap:var(--jky-page-header-gap-mobile)}}:root{--jky-page-layout-gap:5}.jky-page-layout{column-gap:calc(var(--spacing)*var(--jky-page-layout-gap));.el-menu{border-right:none}}.jky-page-table{--jky-page-table_pagination-position:flex-end;.jky-page-table__pagination{.el-scrollbar__view{display:flex;justify-content:var(--jky-page-table_pagination-position)}}}:root{--jky-rich-editor-border:#d9d9d9;--jky-rich-editor-border-hover:#409eff;--jky-rich-editor-border-radius:4px;--jky-rich-editor-box-shadow:0 0 0 1px #409eff}.jky-rich-editor{width:100%}.jky-rich-editor .tox-tinymce{border:1px solid var(--jky-rich-editor-border);border-radius:var(--jky-rich-editor-border-radius);transition:border-color .2s}.jky-rich-editor .tox-tinymce:hover{border-color:var(--jky-rich-editor-border-hover)}.jky-rich-editor .tox-tinymce:focus-within{border-color:var(--jky-rich-editor-border-hover);box-shadow:var(--jky-rich-editor-box-shadow)}.jky-rich-editor.is-disabled .tox-tinymce{background-color:#f5f7fa;cursor:not-allowed}.jky-rich-editor.is-readonly .tox-tinymce{background-color:#fafafa}:root{--jky-say-hello-bg:#42b883;--jky-say-hello-text:#fff;--jky-say-hello-hover-bg:#3aa876;--jky-say-hello-font-size:16px;--jky-say-hello-padding:8px 20px;--jky-say-hello-margin:4px 2px;--jky-say-hello-border-radius:6px}.jky-say-hello{background-color:var(--jky-say-hello-bg);border-radius:var(--jky-say-hello-border-radius);color:var(--jky-say-hello-text);cursor:pointer;display:inline-block;font-size:var(--jky-say-hello-font-size);margin:var(--jky-say-hello-margin);padding:var(--jky-say-hello-padding);text-align:center;text-decoration:none;transition:background-color .2s ease}.jky-say-hello:hover{background-color:var(--jky-say-hello-hover-bg)}@import "tailwindcss";@plugin "@iconify/tailwind4";@source "../node_modules/jky-component-lib/dist/es/";@source "../docs/**/*.md";@source "./**/*.md";@source "./**/*.vue";@source "./**/*.css";@custom-variant dark (&:is(.dark *));.jky-tabs{.el-tabs__content{display:none}.el-tabs__header{margin-bottom:0}}.jky-tabs-round{--el-tabs-header-height:32px;--el-tabs-item-background:#fff;--el-tabs-active-item-background:var(--el-color-primary);.el-tabs__header{--el-border-color-light:transparent}.el-tabs__item{background-color:var(--el-tabs-item-background);border-radius:999px;margin-left:1rem;&.is-active{background-color:var(--el-tabs-active-item-background);.el-icon,.jky-tabs-__item-label{color:var(--el-color-white)}}&.first-child{margin-left:0}}}.jky-tabs-context-menu{display:inline-block}

package/dist/lib/tabs/ContextMenu.vue.d.ts

@@ -0,0 +1,30 @@
+import { TabsContextMenuItem, TabsContextMenuProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<TabsContextMenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    command: (command: {
+        key: string;
+        tab: TabsContextMenuProps["tab"];
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<TabsContextMenuProps> & Readonly<{
+    onCommand?: ((command: {
+        key: string;
+        tab: TabsContextMenuProps["tab"];
+    }) => any) | undefined;
+}>, {
+    menuItems: TabsContextMenuItem[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/lib/tabs/ContextMenu.vue.js

@@ -0,0 +1,118 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const ElementPlus = require("element-plus");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+  name: "JkyTabsContextMenu"
+}), {
+  __name: "ContextMenu",
+  props: {
+    tab: {},
+    isActive: { type: Boolean },
+    isOnlyTab: { type: Boolean },
+    menuItems: { default: () => [] }
+  },
+  emits: ["command"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const defaultMenuItems = vue.computed(() => {
+      return [
+        {
+          key: "refresh",
+          label: "刷新",
+          icon: "Refresh"
+        },
+        {
+          key: "closeCurrent",
+          label: "关闭当前",
+          icon: "Close",
+          disabled: props.isOnlyTab
+        },
+        {
+          key: "closeOthers",
+          label: "关闭其他",
+          icon: "FolderDelete",
+          disabled: props.isOnlyTab,
+          divided: true
+        }
+      ];
+    });
+    const menuItems = vue.computed(() => {
+      return [...defaultMenuItems.value, ...props.menuItems];
+    });
+    function handleCommand(command) {
+      emit("command", {
+        key: command,
+        tab: props.tab
+      });
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElDropdown), {
+        trigger: "contextmenu",
+        class: "jky-tabs-context-menu",
+        onCommand: handleCommand
+      }, {
+        dropdown: vue.withCtx(() => [
+          vue.createVNode(vue.unref(ElementPlus.ElDropdownMenu), null, {
+            default: vue.withCtx(() => [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(menuItems.value, (item) => {
+                return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElDropdownItem), {
+                  key: item.key,
+                  command: item.key,
+                  divided: item.divided,
+                  disabled: item.disabled
+                }, {
+                  default: vue.withCtx(() => {
+                    var _a;
+                    return [
+                      ((_a = item.icon) == null ? void 0 : _a.startsWith("icon-")) ? (vue.openBlock(), vue.createElementBlock("span", {
+                        key: 0,
+                        class: vue.normalizeClass(item.icon)
+                      }, null, 2)) : item.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElIcon), {
+                        key: 1,
+                        class: "mr-1"
+                      }, {
+                        default: vue.withCtx(() => [
+                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.icon)))
+                        ]),
+                        _: 2
+                      }, 1024)) : vue.createCommentVNode("", true),
+                      vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)
+                    ];
+                  }),
+                  _: 2
+                }, 1032, ["command", "divided", "disabled"]);
+              }), 128))
+            ]),
+            _: 1
+          })
+        ]),
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      });
+    };
+  }
+}));
+exports.default = _sfc_main;

package/dist/lib/tabs/ContextMenu.vue3.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ContextMenu_vue_vue_type_script_setup_true_lang = require("./ContextMenu.vue.js");
+;/* empty css                  */
+exports.default = ContextMenu_vue_vue_type_script_setup_true_lang.default;

package/dist/lib/tabs/Tabs.vue.d.ts

@@ -1,46 +1,13 @@
-import { TabItem, TabsProps } from './types';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
+import { Store } from 'pinia';
+import { TabsProps, TabsStoreActions, TabsStoreState } from './types';
+type __VLS_Props = TabsProps & {
+    store: Store<'tabs', TabsStoreState, object, TabsStoreActions>;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<TabsProps, {
-    closeTab: (tabName: string) => void;
-    closeOthers: (tabName: string) => void;
-    closeAll: () => void;
-    refreshTab: (tabName: string) => void;
-    getCachedTabs: () => string[];
-    getTabList: () => TabItem[];
-    getActiveTab: () => string;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:modelValue": (value: string) => any;
-    routeChange: (route: any) => any;
-    tabClick: (tab: any) => any;
-    tabRemove: (tabName: string) => any;
-    edit: (tabName: string | undefined, action: "add" | "remove") => any;
-    tabClose: (tabName: string) => any;
-}, string, import('vue').PublicProps, Readonly<TabsProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    onRouteChange?: ((route: any) => any) | undefined;
-    onTabClick?: ((tab: any) => any) | undefined;
-    onTabRemove?: ((tabName: string) => any) | undefined;
-    onEdit?: ((tabName: string | undefined, action: "add" | "remove") => any) | undefined;
-    onTabClose?: ((tabName: string) => any) | undefined;
-}>, {
-    mode: import('./types').TabsMode;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    round: boolean;
+    mode: "route" | "manual";
+    closable: boolean;
     cachable: boolean;
-    maxCacheSize: number;
-    tabStyle: import('./types').TabStyleOptions;
-    tabs: TabItem[];
+    contextMenu: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};