jky-component-lib 0.0.49 → 0.0.53

package/dist/es/style.css

@@ -77,6 +77,8 @@
     --color-gray-600: oklch(44.6% .03 256.802);
     --color-white: #fff;
     --spacing: .25rem;
+    --text-xs: .75rem;
+    --text-xs--line-height: calc(1 / .75);
     --text-sm: .875rem;
     --text-sm--line-height: calc(1.25 / .875);
     --text-base: 1rem;
@@ -365,6 +367,10 @@
     position: relative;
   }
 
+  .static {
+    position: static;
+  }
+
   .sticky {
     position: sticky;
   }
@@ -373,6 +379,10 @@
     inset-inline-start: var(--spacing);
   }
 
+  .end {
+    inset-inline-end: var(--spacing);
+  }
+
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -417,6 +427,40 @@
     grid-column: span 24 / span 24;
   }
 
+  .container {
+    width: 100%;
+  }
+
+  @media (min-width: 40rem) {
+    .container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    .container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    .container {
+      max-width: 96rem;
+    }
+  }
+
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -1001,6 +1045,10 @@
     width: calc(var(--spacing) * 20);
   }
 
+  .w-100 {
+    width: calc(var(--spacing) * 100);
+  }
+
   .w-fit {
     width: fit-content;
   }
@@ -1013,6 +1061,10 @@
     width: 100%;
   }
 
+  .w-full\! {
+    width: 100% !important;
+  }
+
   .flex-1 {
     flex: 1;
   }
@@ -1086,6 +1138,10 @@
     align-self: center;
   }
 
+  .rounded {
+    border-radius: .25rem;
+  }
+
   .rounded-full {
     border-radius: 3.40282e38px;
   }
@@ -1121,6 +1177,26 @@
     border-left-color: var(--el-color-primary);
   }
 
+  .bg-\(--el-color-error\)\/10 {
+    background-color: var(--el-color-error);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\(--el-color-error\)\/10 {
+      background-color: color-mix(in oklab, var(--el-color-error) 10%, transparent);
+    }
+  }
+
+  .bg-\(--el-color-info\)\/10 {
+    background-color: var(--el-color-info);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\(--el-color-info\)\/10 {
+      background-color: color-mix(in oklab, var(--el-color-info) 10%, transparent);
+    }
+  }
+
   .bg-\(--el-color-primary\)\/50 {
     background-color: var(--el-color-primary);
   }
@@ -1131,6 +1207,26 @@
     }
   }
 
+  .bg-\(--el-color-success\)\/10 {
+    background-color: var(--el-color-success);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\(--el-color-success\)\/10 {
+      background-color: color-mix(in oklab, var(--el-color-success) 10%, transparent);
+    }
+  }
+
+  .bg-\(--el-color-warning\)\/10 {
+    background-color: var(--el-color-warning);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\(--el-color-warning\)\/10 {
+      background-color: color-mix(in oklab, var(--el-color-warning) 10%, transparent);
+    }
+  }
+
   .bg-\(--my-var\), .bg-\[var\(--my-var\)\] {
     background-color: var(--my-var);
   }
@@ -1187,10 +1283,18 @@
     padding: calc(var(--spacing) * 4);
   }
 
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
 
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -1203,10 +1307,6 @@
     padding-bottom: calc(var(--spacing) * 0);
   }
 
-  .pl-1 {
-    padding-left: calc(var(--spacing) * 1);
-  }
-
   .pl-1\.5 {
     padding-left: calc(var(--spacing) * 1.5);
   }
@@ -1240,6 +1340,11 @@
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
 
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -1255,6 +1360,22 @@
     font-weight: var(--font-weight-semibold);
   }
 
+  .text-\(--el-color-error\) {
+    color: var(--el-color-error);
+  }
+
+  .text-\(--el-color-info\) {
+    color: var(--el-color-info);
+  }
+
+  .text-\(--el-color-success\) {
+    color: var(--el-color-success);
+  }
+
+  .text-\(--el-color-warning\) {
+    color: var(--el-color-warning);
+  }
+
   .text-\[white\] {
     color: #fff;
   }

package/dist/es/styles.css

@@ -1 +1 @@
-: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{--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)}: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}}.jky-menu-item__icon{align-items:center;display:inline-flex;flex-shrink:0;font-size:var(--jky-menu-icon-size);height:var(--jky-menu-icon-size);justify-content:center;margin-right:var(--jky-menu-icon-margin);width:var(--jky-menu-icon-size)}: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-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 *))
+: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:1px solid var(--j-code-mirror-border-color);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:#f5f7fa;border-right:1px solid #e4e7ed;color:#909399}html.dark .j-code-mirror-editor{border-color:#4c4d4f}html.dark .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)}: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}}.jky-menu-item__icon{align-items:center;display:inline-flex;flex-shrink:0;font-size:var(--jky-menu-icon-size);height:var(--jky-menu-icon-size);justify-content:center;margin-right:var(--jky-menu-icon-margin);width:var(--jky-menu-icon-size)}: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-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 *))

package/dist/lib/button/Button.vue.js

@@ -20,20 +20,20 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const _hoisted_1$5 = ["disabled"];
-const _hoisted_2$4 = {
+const _hoisted_1 = ["disabled"];
+const _hoisted_2 = {
   key: 0,
   class: "jky-button__loading"
 };
-const _hoisted_3$3 = {
+const _hoisted_3 = {
   key: 0,
   class: "jky-button__icon"
 };
-const _hoisted_4$3 = {
+const _hoisted_4 = {
   key: 1,
   class: "jky-button__icon"
 };
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
   name: "JkyButton"
 }), {
   __name: "Button",
@@ -66,7 +66,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
         disabled: __props.disabled || __props.loading,
         onClick: handleClick
       }, [
-        __props.loading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$4, [..._cache[0] || (_cache[0] = [
+        __props.loading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [..._cache[0] || (_cache[0] = [
           vue.createElementVNode("svg", {
             class: "loading-spinner",
             viewBox: "0 0 50 50"
@@ -92,7 +92,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
             ])
           ], -1)
         ])])) : __props.icon ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-          __props.iconPosition === "prefix" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$3, [
+          __props.iconPosition === "prefix" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
             vue.renderSlot(_ctx.$slots, "icon", {}, () => [
               vue.createElementVNode("span", {
                 class: vue.normalizeClass(__props.icon)
@@ -100,7 +100,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
             ])
           ])) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default"),
-          __props.iconPosition === "suffix" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$3, [
+          __props.iconPosition === "suffix" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, [
             vue.renderSlot(_ctx.$slots, "icon", {}, () => [
               vue.createElementVNode("span", {
                 class: vue.normalizeClass(__props.icon)
@@ -111,8 +111,8 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
           vue.renderSlot(_ctx.$slots, "icon"),
           vue.renderSlot(_ctx.$slots, "default")
         ], 64))
-      ], 10, _hoisted_1$5);
+      ], 10, _hoisted_1);
     };
   }
 }));
-exports.default = _sfc_main$8;
+exports.default = _sfc_main;

package/dist/lib/button-nav/ButtonNav.vue.js

@@ -21,8 +21,8 @@ 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 _hoisted_1$4 = { class: "jky-button-nav flex flex-wrap items-center gap-2" };
-const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+const _hoisted_1 = { class: "jky-button-nav flex flex-wrap items-center gap-2" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
   name: "JkyButtonNav"
 }), {
   __name: "ButtonNav",
@@ -63,7 +63,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
       }
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleItems.value, (item) => {
           return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElButton), {
             key: item.value,
@@ -143,4 +143,4 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
     };
   }
 }));
-exports.default = _sfc_main$7;
+exports.default = _sfc_main;

package/dist/lib/code-mirror-editor/CodeMirrorEditor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/code-mirror-editor/CodeMirrorEditor.vue.d.ts

@@ -0,0 +1,25 @@
+import { CodeMirrorEditorProps } from './types';
+import { EditorView } from '@codemirror/view';
+declare const _default: import('vue').DefineComponent<CodeMirrorEditorProps, {
+    getEditor: () => EditorView | null;
+    getContent: () => string;
+    setContent: (content: string) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<CodeMirrorEditorProps> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    modelValue: string;
+    height: string;
+    readonly: boolean;
+    language: "javascript" | "typescript" | "json" | "css";
+    theme: "oneDark" | "default";
+    lineNumbers: boolean;
+    lineWrapping: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    editorRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/lib/code-mirror-editor/CodeMirrorEditor.vue.js

@@ -0,0 +1,178 @@
+"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 langCss = require("@codemirror/lang-css");
+const langJavascript = require("@codemirror/lang-javascript");
+const langJson = require("@codemirror/lang-json");
+const state = require("@codemirror/state");
+const themeOneDark = require("@codemirror/theme-one-dark");
+const view = require("@codemirror/view");
+const codemirror = require("codemirror");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+  name: "JkyCodeMirrorEditor"
+}), {
+  __name: "CodeMirrorEditor",
+  props: {
+    modelValue: { default: "" },
+    height: { default: "400px" },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    language: { default: "javascript" },
+    theme: { default: "oneDark" },
+    lineNumbers: { type: Boolean, default: true },
+    lineWrapping: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    var _a;
+    const props = __props;
+    const emit = __emit;
+    const editorRef = vue.ref();
+    let editorView = null;
+    let innerValue = (_a = props.modelValue) != null ? _a : "";
+    function getLanguageExtension(language) {
+      switch (language) {
+        case "typescript":
+        case "javascript":
+          return langJavascript.javascript({
+            jsx: true,
+            typescript: language === "typescript"
+          });
+        case "json":
+          return langJson.json();
+        case "css":
+          return langCss.css();
+        default:
+          return langJavascript.javascript();
+      }
+    }
+    function initializeEditor() {
+      if (!editorRef.value)
+        return;
+      const extensions = [
+        codemirror.basicSetup,
+        getLanguageExtension(props.language),
+        view.EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            const newValue = update.state.doc.toString();
+            innerValue = newValue;
+            emit("change", newValue);
+            emit("update:modelValue", newValue);
+          }
+        }),
+        view.EditorView.editable.of(!props.disabled && !props.readonly),
+        state.EditorState.readOnly.of(props.readonly)
+      ];
+      if (props.theme === "oneDark") {
+        extensions.push(themeOneDark.oneDark);
+      }
+      if (!props.lineNumbers) {
+        extensions.push(view.lineNumbers());
+      }
+      if (props.lineWrapping) {
+        extensions.push(view.EditorView.lineWrapping);
+      }
+      try {
+        editorView = new view.EditorView({
+          state: state.EditorState.create({
+            doc: innerValue,
+            extensions
+          }),
+          parent: editorRef.value
+        });
+      } catch (error) {
+        console.error("Failed to initialize CodeMirror Editor:", error);
+      }
+    }
+    vue.watch(() => props.modelValue, (newValue) => {
+      if (newValue !== innerValue && editorView) {
+        const currentContent = editorView.state.doc.toString();
+        if (currentContent !== newValue) {
+          editorView.dispatch({
+            changes: {
+              from: 0,
+              to: currentContent.length,
+              insert: newValue
+            }
+          });
+          innerValue = newValue;
+        }
+      }
+    });
+    vue.watch(() => props.language, () => {
+      if (editorView) {
+        const currentValue = editorView.state.doc.toString();
+        editorView.destroy();
+        innerValue = currentValue;
+        initializeEditor();
+      }
+    });
+    vue.watch([() => props.disabled, () => props.readonly], () => {
+      if (editorView) {
+        const currentValue = editorView.state.doc.toString();
+        editorView.destroy();
+        innerValue = currentValue;
+        initializeEditor();
+      }
+    });
+    vue.onMounted(() => {
+      initializeEditor();
+    });
+    vue.onUnmounted(() => {
+      if (editorView) {
+        editorView.destroy();
+        editorView = null;
+      }
+    });
+    __expose({
+      getEditor: () => editorView,
+      getContent: () => {
+        var _a2;
+        return (_a2 = editorView == null ? void 0 : editorView.state.doc.toString()) != null ? _a2 : "";
+      },
+      setContent: (content) => {
+        if (editorView) {
+          editorView.dispatch({
+            changes: {
+              from: 0,
+              to: editorView.state.doc.length,
+              insert: content
+            }
+          });
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "j-code-mirror-editor",
+        style: vue.normalizeStyle({ height: __props.height })
+      }, [
+        vue.createElementVNode("div", {
+          ref_key: "editorRef",
+          ref: editorRef,
+          class: "code-mirror-container"
+        }, null, 512)
+      ], 4);
+    };
+  }
+}));
+exports.default = _sfc_main;

package/dist/lib/code-mirror-editor/CodeMirrorEditor.vue3.js

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

package/dist/lib/code-mirror-editor/index.d.ts

@@ -0,0 +1,4 @@
+import { InstallWithSFC } from '../utils';
+import { default as CodeMirrorEditor } from './CodeMirrorEditor.vue';
+export declare const JkyCodeMirrorEditor: InstallWithSFC<typeof CodeMirrorEditor>;
+export default JkyCodeMirrorEditor;

package/dist/lib/code-mirror-editor/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const CodeMirrorEditor_vue_vue_type_script_setup_true_lang = require("./CodeMirrorEditor.vue.js");
+;/* empty css                       */
+const withInstall = require("../utils/with-install.js");
+const JkyCodeMirrorEditor = withInstall.installWithSFC(CodeMirrorEditor_vue_vue_type_script_setup_true_lang.default);
+exports.JkyCodeMirrorEditor = JkyCodeMirrorEditor;
+exports.default = JkyCodeMirrorEditor;

package/dist/lib/code-mirror-editor/style.css

@@ -0,0 +1,44 @@
+:root {
+  /* CodeMirror 编辑器基础样式变量 */
+  --j-code-mirror-border-color: #dcdfe6;
+  --j-code-mirror-border-radius: 4px;
+  --j-code-mirror-height: 400px;
+}
+.j-code-mirror-editor {
+  width: 100%;
+  height: var(--j-code-mirror-height);
+  border: 1px solid var(--j-code-mirror-border-color);
+  border-radius: var(--j-code-mirror-border-radius);
+  overflow: hidden;
+}
+.code-mirror-container {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+/* CodeMirror 基础样式覆盖 */
+.code-mirror-container .cm-editor {
+  height: 100%;
+}
+.code-mirror-container .cm-scroller {
+  overflow: auto;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.code-mirror-container .cm-gutters {
+  background-color: #f5f7fa;
+  border-right: 1px solid #e4e7ed;
+  color: #909399;
+}
+
+/* 暗黑模式支持 */
+html.dark .j-code-mirror-editor {
+  border-color: #4c4d4f;
+}
+html.dark .code-mirror-container .cm-gutters {
+  background-color: #2c2d2d;
+  border-color: #4c4d4f;
+  color: #909399;
+}

package/dist/lib/components.d.ts

@@ -1,6 +1,7 @@
 import { Plugin } from 'vue';
 export * from './button';
 export * from './button-nav';
+export * from './code-mirror-editor';
 export * from './form';
 export * from './menu';
 export * from './page-header';

package/dist/lib/components.js

@@ -2,22 +2,25 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const index = require("./button/index.js");
 const index$1 = require("./button-nav/index.js");
-const index$2 = require("./form/index.js");
-const index$3 = require("./menu/index.js");
-const index$4 = require("./page-header/index.js");
-const index$5 = require("./say-hello/index.js");
+const index$2 = require("./code-mirror-editor/index.js");
+const index$3 = require("./form/index.js");
+const index$4 = require("./menu/index.js");
+const index$5 = require("./page-header/index.js");
+const index$6 = require("./say-hello/index.js");
 const components = [
-  index$5.JkySayHello,
+  index$6.JkySayHello,
   index.JkyButton,
   index$1.JkyButtonNav,
-  index$4.JkyPageHeader,
-  index$3.JkyMenu,
-  index$2.JkyForm
+  index$5.JkyPageHeader,
+  index$4.JkyMenu,
+  index$3.JkyForm,
+  index$2.JkyCodeMirrorEditor
 ];
 exports.JkyButton = index.JkyButton;
 exports.JkyButtonNav = index$1.JkyButtonNav;
-exports.JkyForm = index$2.JkyForm;
-exports.JkyMenu = index$3.JkyMenu;
-exports.JkyPageHeader = index$4.JkyPageHeader;
-exports.JkySayHello = index$5.JkySayHello;
+exports.JkyCodeMirrorEditor = index$2.JkyCodeMirrorEditor;
+exports.JkyForm = index$3.JkyForm;
+exports.JkyMenu = index$4.JkyMenu;
+exports.JkyPageHeader = index$5.JkyPageHeader;
+exports.JkySayHello = index$6.JkySayHello;
 exports.components = components;