jky-component-lib 0.0.10 → 0.0.17

package/dist/es/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/es/button/Button.vue.js

@@ -17,12 +17,20 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createCommentVNode, renderSlot } from "vue";
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderSlot, createCommentVNode } from "vue";
 const _hoisted_1 = ["disabled"];
 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__ */ defineComponent(__spreadProps(__spreadValues({}, {
   name: "JkyButton"
 }), {
@@ -31,7 +39,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     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 }) {
@@ -79,8 +89,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
               })
             ])
           ], -1)
-        ])])) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "default")
+        ])])) : __props.icon ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          __props.iconPosition === "prefix" ? (openBlock(), createElementBlock("span", _hoisted_3, [
+            renderSlot(_ctx.$slots, "icon", {}, () => [
+              createElementVNode("span", {
+                class: normalizeClass(__props.icon)
+              }, null, 2)
+            ])
+          ])) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default"),
+          __props.iconPosition === "suffix" ? (openBlock(), createElementBlock("span", _hoisted_4, [
+            renderSlot(_ctx.$slots, "icon", {}, () => [
+              createElementVNode("span", {
+                class: normalizeClass(__props.icon)
+              }, null, 2)
+            ])
+          ])) : createCommentVNode("", true)
+        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          renderSlot(_ctx.$slots, "icon"),
+          renderSlot(_ctx.$slots, "default")
+        ], 64))
       ], 10, _hoisted_1);
     };
   }

package/dist/es/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/es/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/es/button-nav/ButtonNav.vue.js

@@ -0,0 +1,130 @@
+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));
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderList, createBlock, unref, normalizeClass, normalizeStyle, createSlots, withCtx, createTextVNode, toDisplayString, createElementVNode, createVNode, createCommentVNode } from "vue";
+import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";
+const _hoisted_1 = { class: "jky-button-nav flex flex-wrap items-center gap-2" };
+const _sfc_main = /* @__PURE__ */ 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 = computed(() => props.items.slice(0, props.limit));
+    const hiddenItems = computed(() => props.items.slice(props.limit));
+    const hasMore = computed(() => props.items.length > props.limit);
+    function handleClick(value) {
+      emit("update:modelValue", value);
+      emit("change", value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(visibleItems.value, (item) => {
+          return openBlock(), createBlock(unref(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: normalizeStyle({ width: props.buttonWidth }),
+            class: normalizeClass({
+              "is-active": props.modelValue === item.value
+            }),
+            onClick: ($event) => handleClick(item.value)
+          }, createSlots({
+            default: withCtx(() => [
+              createTextVNode(" " + toDisplayString(item.label), 1)
+            ]),
+            _: 2
+          }, [
+            item.icon ? {
+              name: "icon",
+              fn: withCtx(() => [
+                createElementVNode("span", {
+                  class: normalizeClass(item.icon)
+                }, null, 2)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["type", "size", "disabled", "link", "style", "class", "onClick"]);
+        }), 128)),
+        hasMore.value ? (openBlock(), createBlock(unref(ElDropdown), {
+          key: 0,
+          trigger: "click"
+        }, {
+          dropdown: withCtx(() => [
+            createVNode(unref(ElDropdownMenu), { class: "jky-button-nav-dropdown" }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(hiddenItems.value, (item) => {
+                  return openBlock(), createBlock(unref(ElDropdownItem), {
+                    key: item.value,
+                    disabled: item.disabled,
+                    onClick: ($event) => handleClick(item.value)
+                  }, {
+                    default: withCtx(() => [
+                      item.icon ? (openBlock(), createElementBlock("span", {
+                        key: 0,
+                        class: normalizeClass([item.icon, "mr-2"])
+                      }, null, 2)) : createCommentVNode("", true),
+                      createTextVNode(" " + toDisplayString(item.label), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["disabled", "onClick"]);
+                }), 128))
+              ]),
+              _: 1
+            })
+          ]),
+          default: withCtx(() => [
+            createVNode(unref(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: normalizeStyle({ width: props.buttonWidth }),
+              class: normalizeClass({
+                "is-active": hiddenItems.value.some((item) => item.value === props.modelValue)
+              })
+            }, {
+              default: withCtx(() => [..._cache[0] || (_cache[0] = [
+                createTextVNode(" 更多 ", -1),
+                createElementVNode("span", { class: "ml-1" }, "▼", -1)
+              ])]),
+              _: 1
+            }, 8, ["type", "size", "link", "style", "class"])
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ]);
+    };
+  }
+}));
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,5 @@
+import _sfc_main from "./ButtonNav.vue.js";
+/* empty css               */
+export {
+  _sfc_main as default
+};

package/dist/es/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/es/button-nav/index.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./ButtonNav.vue.js";
+/* empty css               */
+import { installWithSFC } from "../utils/with-install.js";
+const JkyButtonNav = installWithSFC(_sfc_main);
+export {
+  JkyButtonNav,
+  JkyButtonNav as default
+};

package/dist/es/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/es/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/es/components.js

@@ -1,11 +1,20 @@
 import { JkyButton } from "./button/index.js";
+import { JkyButtonNav } from "./button-nav/index.js";
+import { JkyMenu } from "./menu/index.js";
+import { JkyPageHeader } from "./page-header/index.js";
 import { JkySayHello } from "./say-hello/index.js";
 const components = [
   JkySayHello,
-  JkyButton
+  JkyButton,
+  JkyButtonNav,
+  JkyPageHeader,
+  JkyMenu
 ];
 export {
   JkyButton,
+  JkyButtonNav,
+  JkyMenu,
+  JkyPageHeader,
   JkySayHello,
   components
 };

package/dist/es/index.js

@@ -1,16 +1,22 @@
 import { components } from "./components.js";
 import { createInstaller } from "./utils/installer.js";
 /* empty css           */
-import { StarterLibVue3Resolver } from "./resolver.js";
+import { JkyComponentLibResolver } from "./resolver.js";
 import { JkyButton } from "./button/index.js";
+import { JkyButtonNav } from "./button-nav/index.js";
+import { JkyMenu } from "./menu/index.js";
+import { JkyPageHeader } from "./page-header/index.js";
 import { JkySayHello } from "./say-hello/index.js";
 const installer = createInstaller(components);
 const install = installer.install;
 const version = installer.version;
 export {
   JkyButton,
+  JkyButtonNav,
+  JkyComponentLibResolver,
+  JkyMenu,
+  JkyPageHeader,
   JkySayHello,
-  StarterLibVue3Resolver,
   components,
   installer as default,
   install,

package/dist/es/menu/Menu.vue.d.ts

@@ -0,0 +1,32 @@
+import { MenuProps } from 'element-plus/es/components/menu';
+interface MenuItem {
+    index: string;
+    title?: string;
+    icon?: string;
+    disabled?: boolean;
+    children?: MenuItem[];
+    popperOffset?: number;
+    route?: string | object;
+    [key: string]: any;
+}
+interface Props extends MenuProps {
+    menuData?: MenuItem[];
+    modelValue?: string;
+}
+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<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, 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;
+    };
+};