jky-component-lib 0.0.35 → 0.0.36

package/dist/es/package.json.js

@@ -1,4 +1,4 @@
-const version = "0.0.35";
+const version = "0.0.36";
 export {
   version
 };

package/dist/es/page-header/PageHeader.vue.d.ts

@@ -1,3 +1,6 @@
+import { ButtonType } from 'element-plus';
+import { TooltipTriggerType } from 'element-plus/es/components/tooltip';
+import { Arrayable } from 'element-plus/es/utils';
 type __VLS_Props = {
     logo?: string;
     title?: string;
@@ -7,7 +10,36 @@ type __VLS_Props = {
     statusIcons?: StatusIcon[];
     userName?: string;
     userAvatar?: string;
+    /**
+     * 最左侧菜单按钮弹出窗里的内容
+     */
+    popover?: {
+        menus?: PopoverMenuItem[];
+        buttonClass?: string;
+        elButtonClass?: string;
+        elButtonType?: ButtonType;
+        width?: number;
+        trigger?: Arrayable<TooltipTriggerType>;
+        highlightCurrent?: boolean;
+    };
+    showLogout?: boolean;
+    userDropdownItems?: UserDropdonItem[];
 };
+interface PopoverMenuItem {
+    label: string;
+    value: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    icon?: string;
+    elButtonClass?: string;
+}
+interface UserDropdonItem {
+    label: string;
+    value: string;
+    icon?: string;
+    disabled?: boolean;
+    divided?: boolean;
+}
 interface StatusIcon {
     icon: string | object;
     label: string;
@@ -26,16 +58,15 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    command: (command: string) => any;
     logout: () => any;
-    clearCache: () => any;
-    profile: () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCommand?: ((command: string) => any) | undefined;
     onLogout?: (() => any) | undefined;
-    onClearCache?: (() => any) | undefined;
-    onProfile?: (() => any) | undefined;
 }>, {
     height: string | number;
     statusIcons: StatusIcon[];
+    userDropdownItems: UserDropdonItem[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/es/page-header/PageHeader.vue.js

@@ -17,31 +17,37 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, toDisplayString, renderSlot, Fragment, renderList, normalizeClass, createBlock, unref, withCtx, resolveDynamicComponent, createVNode, createTextVNode } from "vue";
-import { ElIcon, ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";
+import { defineComponent, computed, ref, openBlock, createElementBlock, normalizeStyle, createElementVNode, createVNode, unref, withCtx, Fragment, renderList, createBlock, normalizeClass, createCommentVNode, toDisplayString, renderSlot, resolveDynamicComponent, createTextVNode } from "vue";
+import { ElPopover, ElButton, ElIcon, ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";
 const _hoisted_1 = { class: "jky-page-header__container" };
-const _hoisted_2 = { class: "jky-page-header__left" };
-const _hoisted_3 = ["src", "alt"];
-const _hoisted_4 = {
+const _hoisted_2 = {
+  key: 0,
+  class: "jky-page-header__popover mr-2 h-full flex items-center text-white"
+};
+const _hoisted_3 = { class: "grid grid-cols-3 gap-2 p-2" };
+const _hoisted_4 = { class: "text-sm text-center" };
+const _hoisted_5 = { class: "jky-page-header__left" };
+const _hoisted_6 = ["src", "alt"];
+const _hoisted_7 = {
   key: 1,
   class: "jky-page-header__title"
 };
-const _hoisted_5 = { class: "jky-page-header__center" };
-const _hoisted_6 = { class: "jky-page-header__right" };
-const _hoisted_7 = { class: "jky-page-header__status-icons hidden md:flex" };
-const _hoisted_8 = {
+const _hoisted_8 = { class: "jky-page-header__center" };
+const _hoisted_9 = { class: "jky-page-header__right" };
+const _hoisted_10 = { class: "jky-page-header__status-icons hidden md:flex" };
+const _hoisted_11 = {
   xmlns: "http://www.w3.org/2000/svg",
   style: { "color": "white" },
   fill: "none",
   viewBox: "0 0 24 24",
   stroke: "currentColor"
 };
-const _hoisted_9 = { class: "jky-page-header__time hidden md:block" };
-const _hoisted_10 = { class: "jky-page-header__user" };
-const _hoisted_11 = ["src", "alt"];
-const _hoisted_12 = {
+const _hoisted_12 = { class: "jky-page-header__time hidden md:block" };
+const _hoisted_13 = { class: "jky-page-header__user" };
+const _hoisted_14 = ["src", "alt"];
+const _hoisted_15 = {
   key: 0,
-  class: "jky-page-header__username hidden md:block"
+  class: "jky-page-header__username text-base hidden md:block"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
   name: "JkyPageHeader"
@@ -55,12 +61,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     backgroundImage: {},
     statusIcons: { default: () => [] },
     userName: {},
-    userAvatar: {}
+    userAvatar: {},
+    popover: {},
+    showLogout: { type: Boolean },
+    userDropdownItems: { default: () => [
+      { label: "个人信息", value: "profile", icon: "icon-[heroicons--user]" },
+      { label: "清理缓存", value: "clear", icon: "icon-[heroicons--trash]" },
+      { label: "注销", value: "logout", icon: "icon-[heroicons--arrow-right-on-rectangle]" }
+    ] }
   },
-  emits: ["logout", "clearCache", "profile"],
+  emits: ["logout", "command"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const popover = computed(() => __spreadValues({
+      menus: [],
+      buttonClass: "w-20 h-20",
+      elButtonClass: "",
+      width: 400,
+      trigger: "click",
+      highlightCurrent: true
+    }, props.popover));
+    const popoverIndex = ref("");
+    function onPopoverButtonClick(item) {
+      var _a;
+      if (popover.value.highlightCurrent) {
+        popoverIndex.value = item.value;
+      }
+      (_a = item.onClick) == null ? void 0 : _a.call(item);
+    }
+    function handleCommand(command) {
+      emit("command", command);
+    }
     const heightValue = computed(() => {
       if (typeof props.height === "number") {
         return `${props.height}px`;
@@ -79,35 +111,67 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       }
       return style;
     });
-    function handleLogout() {
-      emit("logout");
-    }
-    function handleClearCache() {
-      emit("clearCache");
-    }
-    function handleProfile() {
-      emit("profile");
-    }
     return (_ctx, _cache) => {
+      var _a;
       return openBlock(), createElementBlock("header", {
         class: "jky-page-header",
         style: normalizeStyle([backgroundStyle.value, { height: heightValue.value }])
       }, [
         createElementVNode("div", _hoisted_1, [
-          createElementVNode("div", _hoisted_2, [
+          ((_a = popover.value.menus) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            createVNode(unref(ElPopover), {
+              title: "菜单",
+              placement: "bottom-start",
+              class: "h-full",
+              trigger: popover.value.trigger,
+              width: popover.value.width
+            }, {
+              reference: withCtx(() => [..._cache[1] || (_cache[1] = [
+                createElementVNode("span", { class: "icon-[ant-design--menu-fold-outlined] text-[white] text-2xl cursor-pointer hover:opacity-80" }, null, -1)
+              ])]),
+              default: withCtx(() => [
+                createElementVNode("div", _hoisted_3, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(popover.value.menus, (item) => {
+                    return openBlock(), createBlock(unref(ElButton), {
+                      key: item.value,
+                      disabled: item.disabled,
+                      class: normalizeClass(["w-fit! h-fit! ml-0!", [popover.value.elButtonClass, item.elButtonClass]]),
+                      type: unref(popoverIndex) === item.value ? "primary" : popover.value.elButtonType || "default",
+                      onClick: ($event) => onPopoverButtonClick(item)
+                    }, {
+                      default: withCtx(() => [
+                        createElementVNode("div", {
+                          class: normalizeClass(["jky-page-header__popover-inner flex flex-col justify-around items-center", popover.value.buttonClass])
+                        }, [
+                          item.icon ? (openBlock(), createElementBlock("span", {
+                            key: 0,
+                            class: normalizeClass(["text-xl mr-2", [item.icon]])
+                          }, null, 2)) : createCommentVNode("", true),
+                          createElementVNode("span", _hoisted_4, toDisplayString(item.label), 1)
+                        ], 2)
+                      ]),
+                      _: 2
+                    }, 1032, ["disabled", "class", "type", "onClick"]);
+                  }), 128))
+                ])
+              ]),
+              _: 1
+            }, 8, ["trigger", "width"])
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_5, [
             __props.logo ? (openBlock(), createElementBlock("img", {
               key: 0,
               src: __props.logo,
               alt: __props.title || "Logo",
               class: "jky-page-header__logo"
-            }, null, 8, _hoisted_3)) : createCommentVNode("", true),
-            __props.title ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.title), 1)) : createCommentVNode("", true)
+            }, null, 8, _hoisted_6)) : createCommentVNode("", true),
+            __props.title ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(__props.title), 1)) : createCommentVNode("", true)
           ]),
-          createElementVNode("div", _hoisted_5, [
+          createElementVNode("div", _hoisted_8, [
             renderSlot(_ctx.$slots, "center")
           ]),
-          createElementVNode("div", _hoisted_6, [
-            createElementVNode("div", _hoisted_7, [
+          createElementVNode("div", _hoisted_9, [
+            createElementVNode("div", _hoisted_10, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(__props.statusIcons, (icon, index) => {
                 return openBlock(), createElementBlock(Fragment, { key: index }, [
                   typeof icon.icon === "string" ? (openBlock(), createElementBlock("span", {
@@ -171,7 +235,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                   class: "jky-page-header__status-icon text-white"
                 }, {
                   default: withCtx(() => [
-                    (openBlock(), createElementBlock("svg", _hoisted_8, [..._cache[0] || (_cache[0] = [
+                    (openBlock(), createElementBlock("svg", _hoisted_11, [..._cache[2] || (_cache[2] = [
                       createElementVNode("path", {
                         "stroke-linecap": "round",
                         "stroke-linejoin": "round",
@@ -185,45 +249,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
               ]),
               _: 1
             })) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_9, [
+            createElementVNode("div", _hoisted_12, [
               renderSlot(_ctx.$slots, "time", {}, () => [
                 createElementVNode("span", null, toDisplayString((/* @__PURE__ */ new Date()).toLocaleString("zh-CN")), 1)
               ])
             ]),
-            createVNode(unref(ElDropdown), { trigger: "click" }, {
+            createVNode(unref(ElDropdown), {
+              trigger: "hover",
+              onCommand: handleCommand
+            }, {
               dropdown: withCtx(() => [
                 createVNode(unref(ElDropdownMenu), null, {
                   default: withCtx(() => [
-                    createVNode(unref(ElDropdownItem), { onClick: handleProfile }, {
-                      default: withCtx(() => [..._cache[2] || (_cache[2] = [
-                        createElementVNode("span", { class: "icon-[heroicons--user]" }, null, -1),
-                        createTextVNode(" 个人信息 ", -1)
-                      ])]),
-                      _: 1
-                    }),
-                    createVNode(unref(ElDropdownItem), { onClick: handleClearCache }, {
-                      default: withCtx(() => [..._cache[3] || (_cache[3] = [
-                        createElementVNode("span", { class: "icon-[heroicons--trash]" }, null, -1),
-                        createTextVNode(" 清理缓存 ", -1)
-                      ])]),
-                      _: 1
-                    }),
-                    createVNode(unref(ElDropdownItem), {
-                      divided: "",
-                      onClick: handleLogout
-                    }, {
-                      default: withCtx(() => [..._cache[4] || (_cache[4] = [
-                        createElementVNode("span", { class: "icon-[heroicons--arrow-right-on-rectangle]" }, null, -1),
-                        createTextVNode(" 注销 ", -1)
-                      ])]),
-                      _: 1
-                    })
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(__props.userDropdownItems, (item) => {
+                      return openBlock(), createBlock(unref(ElDropdownItem), {
+                        key: item.value,
+                        command: item.value,
+                        disabled: item.disabled,
+                        divided: item.divided
+                      }, {
+                        default: withCtx(() => [
+                          createElementVNode("span", {
+                            class: normalizeClass(["mr-2", item.icon])
+                          }, null, 2),
+                          createTextVNode(" " + toDisplayString(item.label), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["command", "disabled", "divided"]);
+                    }), 128))
                   ]),
                   _: 1
                 })
               ]),
               default: withCtx(() => [
-                createElementVNode("div", _hoisted_10, [
+                createElementVNode("div", _hoisted_13, [
                   renderSlot(_ctx.$slots, "userIcon", {}, () => [
                     __props.userAvatar ? (openBlock(), createBlock(unref(ElIcon), {
                       key: 0,
@@ -235,7 +294,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                           src: __props.userAvatar,
                           alt: __props.userName,
                           class: "rounded-full"
-                        }, null, 8, _hoisted_11)
+                        }, null, 8, _hoisted_14)
                       ]),
                       _: 1
                     })) : (openBlock(), createBlock(unref(ElIcon), {
@@ -243,17 +302,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                       size: 24,
                       class: "jky-page-header__avatar"
                     }, {
-                      default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                      default: withCtx(() => [..._cache[3] || (_cache[3] = [
                         createElementVNode("span", { class: "icon-[heroicons--user]" }, null, -1)
                       ])]),
                       _: 1
                     }))
                   ]),
-                  __props.userName ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(__props.userName), 1)) : createCommentVNode("", true)
+                  __props.userName ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(__props.userName), 1)) : createCommentVNode("", true)
                 ])
               ]),
               _: 3
-            })
+            }),
+            __props.showLogout ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: "jky-page-header__logout h-full flex items-center text-white",
+              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("logout"))
+            }, [..._cache[4] || (_cache[4] = [
+              createElementVNode("span", { class: "icon-[ri--logout-circle-line] mr-2" }, null, -1),
+              createElementVNode("span", null, "退出登录", -1)
+            ])])) : createCommentVNode("", true)
           ])
         ])
       ], 4);

package/dist/es/page-header/style.css

@@ -22,7 +22,7 @@
   --jky-page-header-title-size-mobile: 16px;
   --jky-page-header-title-weight: 600;
   --jky-page-header-text-color: rgba(255, 255, 255, 0.85);
-  --jky-page-header-text-size: 14px;
+  --jky-page-header-text-size: 16px;
   
   /* 图标 */
   --jky-page-header-icon-color: #ffffff;
@@ -123,6 +123,10 @@ img {
   color: var(--jky-page-header-text-color);
   white-space: nowrap;
 }
+.jky-page-header__logout {
+  font-size: var(--jky-page-header-text-size);
+  color: var(--jky-page-header-text-color);
+}
 /* 响应式设计 */
 @media (max-width: 768px) {
 .jky-page-header__container {