jky-component-lib 0.0.10 → 0.0.17

package/dist/es/styles.css

@@ -1 +1 @@
-.jky-button{align-items:center;border:1px solid transparent;border-radius:.375rem;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;height:40px;justify-content:center;padding:0 16px;transition:color .2s,background-color .2s}.jky-button:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #000;outline:2px solid transparent;outline-offset:2px}.jky-button.is-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.jky-button.is-loading{pointer-events:none;position:relative}.jky-button__loading{align-items:center;display:flex;inset:0;justify-content:center;position:absolute}.loading-spinner{animation:spin 1s linear infinite;height:1.25rem;width:1.25rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jky-button--primary{background-color:#007bff;color:#fff}.jky-button--primary:hover{background-color:#0056b3}.jky-button--success{background-color:#28a745;color:#fff}.jky-button--success:hover{background-color:#1e7e34}.jky-button--warning{background-color:#ffc107;color:#212529}.jky-button--warning:hover{background-color:#e0a800}.jky-button--danger{background-color:#dc3545;color:#fff}.jky-button--danger:hover{background-color:#bd2130}.jky-button--info{background-color:#6c757d;color:#fff}.jky-button--info:hover{background-color:#545b62}.jky-button--large{font-size:16px;height:48px;padding:0 24px}.jky-button--default{font-size:14px;height:40px;padding:0 16px}.jky-button--small{font-size:12px;height:32px;padding:0 12px}.jky-button--primary.is-border{background-color:transparent;border-color:#007bff;color:#007bff}.jky-button--primary.is-border:hover{background-color:rgba(0,123,255,.1)}.jky-button--text{background-color:transparent;border-color:transparent;color:#007bff}.jky-button--text:hover{background-color:rgba(0,123,255,.1)}.jky-component-lib-say-hello{background:#42b883;border-radius:6px;color:#fff;cursor:pointer;display:inline-block;font-size:16px;margin:4px 2px;padding:8px 20px;text-align:center;text-decoration:none}@import "tailwindcss";@import "@fontsource-variable/geist";@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{--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{background-color:var(--jky-menu-bg-color);color:var(--jky-menu-text-color)}.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)}.jky-menu-item__title{color:var(--jky-menu-text-color);flex:1;font-size:var(--jky-menu-item-font-size);line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jky-menu-item.is-disabled{color:var(--jky-menu-disabled-text-color);cursor:not-allowed;opacity:var(--jky-menu-disabled-opacity)}: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:14px;--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{color:var(--jky-page-header-text-color);font-size:var(--jky-page-header-text-size);white-space:nowrap}@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";@custom-variant dark (&:is(.dark *))

package/dist/lib/button/Button.vue.d.ts

@@ -3,10 +3,16 @@ type __VLS_Props = {
     size?: 'large' | 'default' | 'small';
     disabled?: boolean;
     loading?: boolean;
+    icon?: string;
+    iconPosition?: 'prefix' | 'suffix';
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
+        icon?(_: {}): any;
+        icon?(_: {}): any;
+        icon?(_: {}): any;
+        default?(_: {}): any;
         default?(_: {}): any;
     };
     refs: {};

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

@@ -25,6 +25,14 @@ const _hoisted_2 = {
   key: 0,
   class: "jky-button__loading"
 };
+const _hoisted_3 = {
+  key: 0,
+  class: "jky-button__icon"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "jky-button__icon"
+};
 const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
   name: "JkyButton"
 }), {
@@ -33,7 +41,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
     type: { default: "primary" },
     size: { default: "default" },
     disabled: { type: Boolean, default: false },
-    loading: { type: Boolean, default: false }
+    loading: { type: Boolean, default: false },
+    icon: {},
+    iconPosition: { default: "prefix" }
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
@@ -81,8 +91,26 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
               })
             ])
           ], -1)
-        ])])) : vue.createCommentVNode("", true),
-        vue.renderSlot(_ctx.$slots, "default")
+        ])])) : __props.icon ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+          __props.iconPosition === "prefix" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
+            vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+              vue.createElementVNode("span", {
+                class: vue.normalizeClass(__props.icon)
+              }, null, 2)
+            ])
+          ])) : vue.createCommentVNode("", true),
+          vue.renderSlot(_ctx.$slots, "default"),
+          __props.iconPosition === "suffix" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, [
+            vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+              vue.createElementVNode("span", {
+                class: vue.normalizeClass(__props.icon)
+              }, null, 2)
+            ])
+          ])) : vue.createCommentVNode("", true)
+        ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          vue.renderSlot(_ctx.$slots, "icon"),
+          vue.renderSlot(_ctx.$slots, "default")
+        ], 64))
       ], 10, _hoisted_1);
     };
   }

package/dist/lib/button/style.css

@@ -1,38 +1,141 @@
 
 /* 禁止使用 @apply，所有 TailwindCSS 工具类直接写在 class 中 */
 /* 样式文件仅用于定义组件特定的自定义纯 CSS 样式 */
-/* Button 组件样式 - 使用 TailwindCSS 4.x */
+/* Button 组件样式 - 使用 CSS 变量实现主题化 */
+/* 1. 定义 CSS 变量 */
+:root {
+  /* 颜色变量 */
+  --jky-button-primary-bg: #007bff;
+  --jky-button-primary-text: #ffffff;
+  --jky-button-primary-hover-bg: #0056b3;
+  
+  --jky-button-success-bg: #28a745;
+  --jky-button-success-text: #ffffff;
+  --jky-button-success-hover-bg: #1e7e34;
+  
+  --jky-button-warning-bg: #ffc107;
+  --jky-button-warning-text: #ffffff;
+  --jky-button-warning-hover-bg: #e0a800;
+  
+  --jky-button-danger-bg: #dc3545;
+  --jky-button-danger-text: #ffffff;
+  --jky-button-danger-hover-bg: #c82333;
+  
+  --jky-button-info-bg: #6c757d;
+  --jky-button-info-text: #ffffff;
+  --jky-button-info-hover-bg: #5a6268;
+  
+  /* 默认样式 */
+  --jky-button-default-bg: #ffffff;
+  --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;
+}
+/* 2. 基础样式 */
 .jky-button {
-  /* 基础样式 - 使用 TailwindCSS 工具类 */
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  height: var(--jky-button-height);
+  padding: var(--jky-button-padding);
+  font-size: var(--jky-button-font-size);
   font-weight: 500;
-  border-radius: 0.375rem;
+  border-radius: var(--jky-button-border-radius);
+  background-color: var(--jky-button-default-bg);
+  color: var(--jky-button-default-text);
+  border: 1px solid var(--jky-button-default-border);
   transition: color 200ms, background-color 200ms;
   cursor: pointer;
-  border: 1px solid transparent;
-  
-  /* 默认尺寸 */
-  height: 40px;
-  padding: 0 16px;
-  font-size: 14px;
 }
-/* 焦点样式 */
-.jky-button:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: 0 0 0 2px white, 0 0 0 4px #000;
+/* 3. 类型变体 */
+.jky-button--primary {
+  background-color: var(--jky-button-primary-bg);
+  color: var(--jky-button-primary-text);
+  border: none;
+}
+.jky-button--primary:hover {
+  background-color: var(--jky-button-primary-hover-bg);
+}
+.jky-button--success {
+  background-color: var(--jky-button-success-bg);
+  color: var(--jky-button-success-text);
+  border: none;
+}
+.jky-button--success:hover {
+  background-color: var(--jky-button-success-hover-bg);
+}
+.jky-button--warning {
+  background-color: var(--jky-button-warning-bg);
+  color: var(--jky-button-warning-text);
+  border: none;
+}
+.jky-button--warning:hover {
+  background-color: var(--jky-button-warning-hover-bg);
+}
+.jky-button--danger {
+  background-color: var(--jky-button-danger-bg);
+  color: var(--jky-button-danger-text);
+  border: none;
+}
+.jky-button--danger:hover {
+  background-color: var(--jky-button-danger-hover-bg);
+}
+.jky-button--info {
+  background-color: var(--jky-button-info-bg);
+  color: var(--jky-button-info-text);
+  border: none;
+}
+.jky-button--info:hover {
+  background-color: var(--jky-button-info-hover-bg);
+}
+/* 4. 尺寸变体 */
+.jky-button--small {
+  height: var(--jky-button-height-small);
+  font-size: var(--jky-button-font-size-small);
+  padding: var(--jky-button-padding-small);
 }
-/* 禁用状态 */
+.jky-button--large {
+  height: var(--jky-button-height-large);
+  font-size: var(--jky-button-font-size-large);
+  padding: var(--jky-button-padding-large);
+}
+/* 5. 状态样式 */
 .jky-button.is-disabled {
-  opacity: 0.5;
+  opacity: var(--jky-button-disabled-opacity);
   pointer-events: none;
   cursor: not-allowed;
+  background-color: var(--jky-button-disabled-bg);
+  color: var(--jky-button-disabled-text);
 }
-/* 加载状态 */
 .jky-button.is-loading {
   position: relative;
+  opacity: var(--jky-button-loading-opacity);
   pointer-events: none;
 }
 .jky-button__loading {
@@ -42,9 +145,31 @@
   align-items: center;
   justify-content: center;
 }
+/* 6. 图标样式 */
+.jky-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  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-right: 0;
+  margin-left: var(--jky-button-icon-margin);
+}
+/* 7. 焦点样式 */
+.jky-button:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px #000;
+}
+/* 8. 加载动画 */
 .loading-spinner {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--jky-button-icon-size);
+  height: var(--jky-button-icon-size);
   animation: spin 1s linear infinite;
 }
 @keyframes spin {
@@ -55,73 +180,3 @@ to {
     transform: rotate(360deg);
 }
 }
-/* 按钮类型 */
-.jky-button--primary {
-  background-color: #007bff;
-  color: #ffffff;
-}
-.jky-button--primary:hover {
-  background-color: #0056b3;
-}
-.jky-button--success {
-  background-color: #28a745;
-  color: #ffffff;
-}
-.jky-button--success:hover {
-  background-color: #1e7e34;
-}
-.jky-button--warning {
-  background-color: #ffc107;
-  color: #212529;
-}
-.jky-button--warning:hover {
-  background-color: #e0a800;
-}
-.jky-button--danger {
-  background-color: #dc3545;
-  color: #ffffff;
-}
-.jky-button--danger:hover {
-  background-color: #bd2130;
-}
-.jky-button--info {
-  background-color: #6c757d;
-  color: #ffffff;
-}
-.jky-button--info:hover {
-  background-color: #545b62;
-}
-/* 按钮尺寸 */
-.jky-button--large {
-  height: 48px;
-  padding: 0 24px;
-  font-size: 16px;
-}
-.jky-button--default {
-  height: 40px;
-  padding: 0 16px;
-  font-size: 14px;
-}
-.jky-button--small {
-  height: 32px;
-  padding: 0 12px;
-  font-size: 12px;
-}
-/* 边框按钮样式 */
-.jky-button--primary.is-border {
-  background-color: transparent;
-  border-color: #007bff;
-  color: #007bff;
-}
-.jky-button--primary.is-border:hover {
-  background-color: rgba(0, 123, 255, 0.1);
-}
-/* 文字按钮样式 */
-.jky-button--text {
-  background-color: transparent;
-  color: #007bff;
-  border-color: transparent;
-}
-.jky-button--text:hover {
-  background-color: rgba(0, 123, 255, 0.1);
-}

package/dist/lib/button-nav/ButtonNav.vue.d.ts

@@ -0,0 +1,30 @@
+import { ButtonProps } from 'element-plus/es/components/button';
+type __VLS_Props = {
+    modelValue?: string | number;
+    items?: NavItem[];
+    limit?: number;
+    size?: ButtonProps['size'];
+    type?: ButtonProps['type'];
+    plain?: boolean;
+    buttonWidth?: string;
+};
+interface NavItem {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+    icon?: string;
+}
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: string | number) => any;
+    "update:modelValue": (value: string | number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: string | number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {
+    size: "" | "default" | "large" | "small";
+    type: "" | "default" | "primary" | "success" | "warning" | "danger" | "info" | "text";
+    items: NavItem[];
+    limit: number;
+    plain: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,130 @@
+"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 _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",
+  props: {
+    modelValue: {},
+    items: { default: () => [] },
+    limit: { default: 2 },
+    size: { default: "default" },
+    type: { default: "primary" },
+    plain: { type: Boolean, default: false },
+    buttonWidth: {}
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const visibleItems = vue.computed(() => props.items.slice(0, props.limit));
+    const hiddenItems = vue.computed(() => props.items.slice(props.limit));
+    const hasMore = vue.computed(() => props.items.length > props.limit);
+    function handleClick(value) {
+      emit("update:modelValue", value);
+      emit("change", value);
+    }
+    return (_ctx, _cache) => {
+      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,
+            type: props.modelValue === item.value ? props.type : "default",
+            size: props.size,
+            disabled: item.disabled,
+            link: props.plain && props.modelValue !== item.value,
+            style: vue.normalizeStyle({ width: props.buttonWidth }),
+            class: vue.normalizeClass({
+              "is-active": props.modelValue === item.value
+            }),
+            onClick: ($event) => handleClick(item.value)
+          }, vue.createSlots({
+            default: vue.withCtx(() => [
+              vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)
+            ]),
+            _: 2
+          }, [
+            item.icon ? {
+              name: "icon",
+              fn: vue.withCtx(() => [
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass(item.icon)
+                }, null, 2)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["type", "size", "disabled", "link", "style", "class", "onClick"]);
+        }), 128)),
+        hasMore.value ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElDropdown), {
+          key: 0,
+          trigger: "click"
+        }, {
+          dropdown: vue.withCtx(() => [
+            vue.createVNode(vue.unref(ElementPlus.ElDropdownMenu), { class: "jky-button-nav-dropdown" }, {
+              default: vue.withCtx(() => [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(hiddenItems.value, (item) => {
+                  return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElDropdownItem), {
+                    key: item.value,
+                    disabled: item.disabled,
+                    onClick: ($event) => handleClick(item.value)
+                  }, {
+                    default: vue.withCtx(() => [
+                      item.icon ? (vue.openBlock(), vue.createElementBlock("span", {
+                        key: 0,
+                        class: vue.normalizeClass([item.icon, "mr-2"])
+                      }, null, 2)) : vue.createCommentVNode("", true),
+                      vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["disabled", "onClick"]);
+                }), 128))
+              ]),
+              _: 1
+            })
+          ]),
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(ElementPlus.ElButton), {
+              type: hiddenItems.value.some((item) => item.value === props.modelValue) ? props.type : "default",
+              size: props.size,
+              link: props.plain && !hiddenItems.value.some((item) => item.value === props.modelValue),
+              style: vue.normalizeStyle({ width: props.buttonWidth }),
+              class: vue.normalizeClass({
+                "is-active": hiddenItems.value.some((item) => item.value === props.modelValue)
+              })
+            }, {
+              default: vue.withCtx(() => [..._cache[0] || (_cache[0] = [
+                vue.createTextVNode(" 更多 ", -1),
+                vue.createElementVNode("span", { class: "ml-1" }, "▼", -1)
+              ])]),
+              _: 1
+            }, 8, ["type", "size", "link", "style", "class"])
+          ]),
+          _: 1
+        })) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+}));
+exports.default = _sfc_main;

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

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

package/dist/lib/button-nav/index.d.ts

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

package/dist/lib/button-nav/index.js

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

package/dist/lib/button-nav/style.css

@@ -0,0 +1,39 @@
+/* ButtonNav 组件样式 */
+:root {
+  /* 选中状态的颜色变量 */
+  --jky-button-nav-active-bg: var(--el-color-primary);
+  --jky-button-nav-active-text: #ffffff;
+  --jky-button-nav-inactive-bg: var(--el-fill-color-light);
+  --jky-button-nav-inactive-text: var(--el-text-color-regular);
+  
+  /* Dropdown 间距 */
+  --el-dropdown-menu-margin-left: 12px;
+}
+.jky-button-nav {
+  /* 使用纯 CSS 定义容器样式 */
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+.el-dropdown {
+    margin-left: var(--el-dropdown-menu-margin-left);
+}
+}
+
+/* 按钮选中状态 - 通过 CSS 变量控制 */
+.jky-button-nav-item {
+  /* 默认状态（未选中） */
+  background-color: var(--jky-button-nav-inactive-bg);
+  color: var(--jky-button-nav-inactive-text);
+  
+  /* 选中状态 */
+&[aria-pressed="true"],
+  &.is-active {
+    background-color: var(--jky-button-nav-active-bg);
+    color: var(--jky-button-nav-active-text);
+}
+}
+
+/* Dropdown 菜单保持 Element Plus 原始样式 */
+.jky-button-nav-dropdown {
+  /* 不覆盖任何样式，保持 el-dropdown-menu 默认样式 */
+}

package/dist/lib/components.d.ts

@@ -1,5 +1,8 @@
 import { Plugin } from 'vue';
 export * from './button';
+export * from './button-nav';
+export * from './menu';
+export * from './page-header';
 export * from './say-hello';
 export declare const components: Plugin[];
 export default components;

package/dist/lib/components.js

@@ -1,11 +1,20 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const index = require("./button/index.js");
-const index$1 = require("./say-hello/index.js");
+const index$1 = require("./button-nav/index.js");
+const index$2 = require("./menu/index.js");
+const index$3 = require("./page-header/index.js");
+const index$4 = require("./say-hello/index.js");
 const components = [
-  index$1.JkySayHello,
-  index.JkyButton
+  index$4.JkySayHello,
+  index.JkyButton,
+  index$1.JkyButtonNav,
+  index$3.JkyPageHeader,
+  index$2.JkyMenu
 ];
 exports.JkyButton = index.JkyButton;
-exports.JkySayHello = index$1.JkySayHello;
+exports.JkyButtonNav = index$1.JkyButtonNav;
+exports.JkyMenu = index$2.JkyMenu;
+exports.JkyPageHeader = index$3.JkyPageHeader;
+exports.JkySayHello = index$4.JkySayHello;
 exports.components = components;

package/dist/lib/index.js

@@ -5,14 +5,20 @@ const installer$1 = require("./utils/installer.js");
 ;/* empty css            */
 const resolver = require("./resolver.js");
 const index = require("./button/index.js");
-const index$1 = require("./say-hello/index.js");
+const index$1 = require("./button-nav/index.js");
+const index$2 = require("./menu/index.js");
+const index$3 = require("./page-header/index.js");
+const index$4 = require("./say-hello/index.js");
 const installer = installer$1.createInstaller(components.components);
 const install = installer.install;
 const version = installer.version;
 exports.components = components.components;
-exports.StarterLibVue3Resolver = resolver.StarterLibVue3Resolver;
+exports.JkyComponentLibResolver = resolver.JkyComponentLibResolver;
 exports.JkyButton = index.JkyButton;
-exports.JkySayHello = index$1.JkySayHello;
+exports.JkyButtonNav = index$1.JkyButtonNav;
+exports.JkyMenu = index$2.JkyMenu;
+exports.JkyPageHeader = index$3.JkyPageHeader;
+exports.JkySayHello = index$4.JkySayHello;
 exports.default = installer;
 exports.install = install;
 exports.version = version;