jky-component-lib 0.0.36 → 0.0.37

package/dist/umd/index.js

@@ -826,6 +826,10 @@ img {
     margin-left: calc(var(--spacing) * 1);
   }
 
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
+
   .icon-\\[ant-design--menu-fold-outlined\\] {
     width: 1em;
     height: 1em;
@@ -1274,6 +1278,22 @@ img {
     mask-repeat: no-repeat;
   }
 
+  .icon-\\[mdi--format-list-bulleted\\] {
+    width: 1em;
+    height: 1em;
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7 5h14v2H7zm0 8v-2h14v2zM4 4.5A1.5 1.5 0 0 1 5.5 6A1.5 1.5 0 0 1 4 7.5A1.5 1.5 0 0 1 2.5 6A1.5 1.5 0 0 1 4 4.5m0 6A1.5 1.5 0 0 1 5.5 12A1.5 1.5 0 0 1 4 13.5A1.5 1.5 0 0 1 2.5 12A1.5 1.5 0 0 1 4 10.5M7 19v-2h14v2zm-3-2.5A1.5 1.5 0 0 1 5.5 18A1.5 1.5 0 0 1 4 19.5A1.5 1.5 0 0 1 2.5 18A1.5 1.5 0 0 1 4 16.5'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    display: inline-block;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
   .icon-\\[ri--logout-circle-line\\] {
     width: 1em;
     height: 1em;
@@ -1590,7 +1610,7 @@ img {
 }
 /*$vite$:1*/`;
   document.head.appendChild(__vite_style__);
-  const version$1 = "0.0.36";
+  const version$1 = "0.0.37";
   const INSTALLED_KEY = Symbol("INSTALLED_KEY");
   function createInstaller(components2 = []) {
     const install2 = (app, options) => {
@@ -1616,20 +1636,20 @@ img {
     });
     return main;
   }
-  const _hoisted_1$2 = ["disabled"];
-  const _hoisted_2$1 = {
+  const _hoisted_1$3 = ["disabled"];
+  const _hoisted_2$2 = {
     key: 0,
     class: "jky-button__loading"
   };
-  const _hoisted_3$1 = {
+  const _hoisted_3$2 = {
     key: 0,
     class: "jky-button__icon"
   };
-  const _hoisted_4$1 = {
+  const _hoisted_4$2 = {
     key: 1,
     class: "jky-button__icon"
   };
-  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
     name: "JkyButton"
   }), {
     __name: "Button",
@@ -1662,7 +1682,7 @@ img {
           disabled: __props.disabled || __props.loading,
           onClick: handleClick
         }, [
-          __props.loading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, [..._cache[0] || (_cache[0] = [
+          __props.loading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$2, [..._cache[0] || (_cache[0] = [
             vue.createElementVNode("svg", {
               class: "loading-spinner",
               viewBox: "0 0 50 50"
@@ -1688,7 +1708,7 @@ img {
               ])
             ], -1)
           ])])) : __props.icon ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            __props.iconPosition === "prefix" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, [
+            __props.iconPosition === "prefix" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, [
               vue.renderSlot(_ctx.$slots, "icon", {}, () => [
                 vue.createElementVNode("span", {
                   class: vue.normalizeClass(__props.icon)
@@ -1696,7 +1716,7 @@ img {
               ])
             ])) : vue.createCommentVNode("", true),
             vue.renderSlot(_ctx.$slots, "default"),
-            __props.iconPosition === "suffix" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, [
+            __props.iconPosition === "suffix" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$2, [
               vue.renderSlot(_ctx.$slots, "icon", {}, () => [
                 vue.createElementVNode("span", {
                   class: vue.normalizeClass(__props.icon)
@@ -1707,13 +1727,13 @@ img {
             vue.renderSlot(_ctx.$slots, "icon"),
             vue.renderSlot(_ctx.$slots, "default")
           ], 64))
-        ], 10, _hoisted_1$2);
+        ], 10, _hoisted_1$3);
       };
     }
   }));
-  const JkyButton = installWithSFC(_sfc_main$4);
-  const _hoisted_1$1 = { class: "jky-button-nav flex flex-wrap items-center gap-2" };
-  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+  const JkyButton = installWithSFC(_sfc_main$5);
+  const _hoisted_1$2 = { class: "jky-button-nav flex flex-wrap items-center gap-2" };
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
     name: "JkyButtonNav"
   }), {
     __name: "ButtonNav",
@@ -1754,7 +1774,7 @@ img {
         }
       }
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
           (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,
@@ -1834,8 +1854,8 @@ img {
       };
     }
   }));
-  const JkyButtonNav = installWithSFC(_sfc_main$3);
-  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+  const JkyButtonNav = installWithSFC(_sfc_main$4);
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
     name: "JkyMenu",
     inheritAttrs: false
   }), {
@@ -1922,34 +1942,112 @@ img {
       };
     }
   }));
-  const JkyMenu = installWithSFC(_sfc_main$2);
-  const _hoisted_1 = { class: "jky-page-header__container" };
-  const _hoisted_2 = {
+  const JkyMenu = installWithSFC(_sfc_main$3);
+  const _hoisted_1$1 = {
     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 = {
+  const _hoisted_2$1 = { class: "flex items-center" };
+  const _hoisted_3$1 = {
+    key: 0,
+    class: "text-white ml-2"
+  };
+  const _hoisted_4$1 = { class: "grid grid-cols-3 gap-2 p-2" };
+  const _hoisted_5$1 = { class: "text-sm text-center" };
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+    __name: "PopoverMenu",
+    props: {
+      refIconClass: {},
+      refName: {},
+      menus: { default: () => [] },
+      buttonClass: { default: "w-20 h-20" },
+      elButtonClass: {},
+      elButtonType: {},
+      width: { default: 400 },
+      trigger: { default: "click" },
+      highlightCurrent: { type: Boolean, default: true }
+    },
+    setup(__props) {
+      const props = __props;
+      const popoverIndex = vue.ref("");
+      function onPopoverButtonClick(item) {
+        var _a;
+        if (props.highlightCurrent) {
+          popoverIndex.value = item.value;
+        }
+        (_a = item.onClick) == null ? void 0 : _a.call(item);
+      }
+      return (_ctx, _cache) => {
+        var _a;
+        return ((_a = __props.menus) == null ? void 0 : _a.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+          vue.createVNode(vue.unref(ElementPlus.ElPopover), {
+            title: "菜单",
+            placement: "bottom-start",
+            class: "h-full",
+            trigger: __props.trigger,
+            width: __props.width
+          }, {
+            reference: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_2$1, [
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass(["icon-[ant-design--menu-fold-outlined] text-[white] text-2xl cursor-pointer hover:opacity-80", __props.refIconClass])
+                }, null, 2),
+                __props.refName ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, vue.toDisplayString(__props.refName), 1)) : vue.createCommentVNode("", true)
+              ])
+            ]),
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_4$1, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.menus, (item) => {
+                  return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElButton), {
+                    key: item.value,
+                    disabled: item.disabled,
+                    class: vue.normalizeClass(["w-fit! h-fit! ml-0!", [__props.elButtonClass, item.elButtonClass]]),
+                    type: vue.unref(popoverIndex) === item.value ? "primary" : __props.elButtonType || "default",
+                    onClick: ($event) => onPopoverButtonClick(item)
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode("div", {
+                        class: vue.normalizeClass(["jky-page-header__popover-inner flex flex-col justify-around items-center", __props.buttonClass])
+                      }, [
+                        item.icon ? (vue.openBlock(), vue.createElementBlock("span", {
+                          key: 0,
+                          class: vue.normalizeClass(["text-xl mr-2", [item.icon]])
+                        }, null, 2)) : vue.createCommentVNode("", true),
+                        vue.createElementVNode("span", _hoisted_5$1, vue.toDisplayString(item.label), 1)
+                      ], 2)
+                    ]),
+                    _: 2
+                  }, 1032, ["disabled", "class", "type", "onClick"]);
+                }), 128))
+              ])
+            ]),
+            _: 1
+          }, 8, ["trigger", "width"])
+        ])) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+  const _hoisted_1 = { class: "jky-page-header__container" };
+  const _hoisted_2 = { class: "jky-page-header__left" };
+  const _hoisted_3 = ["src", "alt"];
+  const _hoisted_4 = {
     key: 1,
     class: "jky-page-header__title"
   };
-  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 = {
+  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 = {
     xmlns: "http://www.w3.org/2000/svg",
     style: { "color": "white" },
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
   };
-  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 = {
+  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 = {
     key: 0,
     class: "jky-page-header__username text-base hidden md:block"
   };
@@ -1967,6 +2065,8 @@ img {
       userName: {},
       userAvatar: {},
       popover: {},
+      showMore: { type: Boolean },
+      showPopover: { type: Boolean },
       showLogout: { type: Boolean },
       userDropdownItems: { default: () => [
         { label: "个人信息", value: "profile", icon: "icon-[heroicons--user]" },
@@ -1978,22 +2078,6 @@ img {
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const popover = vue.computed(() => __spreadValues({
-        menus: [],
-        buttonClass: "w-20 h-20",
-        elButtonClass: "",
-        width: 400,
-        trigger: "click",
-        highlightCurrent: true
-      }, props.popover));
-      const popoverIndex = vue.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);
       }
@@ -2016,66 +2100,27 @@ img {
         return style;
       });
       return (_ctx, _cache) => {
-        var _a;
+        var _a, _b, _c, _d;
         return vue.openBlock(), vue.createElementBlock("header", {
           class: "jky-page-header",
-          style: vue.normalizeStyle([backgroundStyle.value, { height: heightValue.value }])
+          style: vue.normalizeStyle([vue.unref(backgroundStyle), { height: vue.unref(heightValue) }])
         }, [
           vue.createElementVNode("div", _hoisted_1, [
-            ((_a = popover.value.menus) == null ? void 0 : _a.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-              vue.createVNode(vue.unref(ElementPlus.ElPopover), {
-                title: "菜单",
-                placement: "bottom-start",
-                class: "h-full",
-                trigger: popover.value.trigger,
-                width: popover.value.width
-              }, {
-                reference: vue.withCtx(() => [..._cache[1] || (_cache[1] = [
-                  vue.createElementVNode("span", { class: "icon-[ant-design--menu-fold-outlined] text-[white] text-2xl cursor-pointer hover:opacity-80" }, null, -1)
-                ])]),
-                default: vue.withCtx(() => [
-                  vue.createElementVNode("div", _hoisted_3, [
-                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(popover.value.menus, (item) => {
-                      return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElButton), {
-                        key: item.value,
-                        disabled: item.disabled,
-                        class: vue.normalizeClass(["w-fit! h-fit! ml-0!", [popover.value.elButtonClass, item.elButtonClass]]),
-                        type: vue.unref(popoverIndex) === item.value ? "primary" : popover.value.elButtonType || "default",
-                        onClick: ($event) => onPopoverButtonClick(item)
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.createElementVNode("div", {
-                            class: vue.normalizeClass(["jky-page-header__popover-inner flex flex-col justify-around items-center", popover.value.buttonClass])
-                          }, [
-                            item.icon ? (vue.openBlock(), vue.createElementBlock("span", {
-                              key: 0,
-                              class: vue.normalizeClass(["text-xl mr-2", [item.icon]])
-                            }, null, 2)) : vue.createCommentVNode("", true),
-                            vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(item.label), 1)
-                          ], 2)
-                        ]),
-                        _: 2
-                      }, 1032, ["disabled", "class", "type", "onClick"]);
-                    }), 128))
-                  ])
-                ]),
-                _: 1
-              }, 8, ["trigger", "width"])
-            ])) : vue.createCommentVNode("", true),
-            vue.createElementVNode("div", _hoisted_5, [
+            __props.showPopover && ((_b = (_a = __props.popover) == null ? void 0 : _a.menus) == null ? void 0 : _b.length) ? (vue.openBlock(), vue.createBlock(_sfc_main$2, vue.normalizeProps(vue.mergeProps({ key: 0 }, __props.popover)), null, 16)) : vue.createCommentVNode("", true),
+            vue.createElementVNode("div", _hoisted_2, [
               __props.logo ? (vue.openBlock(), vue.createElementBlock("img", {
                 key: 0,
                 src: __props.logo,
                 alt: __props.title || "Logo",
                 class: "jky-page-header__logo"
-              }, null, 8, _hoisted_6)) : vue.createCommentVNode("", true),
-              __props.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7, vue.toDisplayString(__props.title), 1)) : vue.createCommentVNode("", true)
+              }, null, 8, _hoisted_3)) : vue.createCommentVNode("", true),
+              __props.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString(__props.title), 1)) : vue.createCommentVNode("", true)
             ]),
-            vue.createElementVNode("div", _hoisted_8, [
+            vue.createElementVNode("div", _hoisted_5, [
               vue.renderSlot(_ctx.$slots, "center")
             ]),
-            vue.createElementVNode("div", _hoisted_9, [
-              vue.createElementVNode("div", _hoisted_10, [
+            vue.createElementVNode("div", _hoisted_6, [
+              vue.createElementVNode("div", _hoisted_7, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.statusIcons, (icon, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index }, [
                     typeof icon.icon === "string" ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -2139,7 +2184,7 @@ img {
                     class: "jky-page-header__status-icon text-white"
                   }, {
                     default: vue.withCtx(() => [
-                      (vue.openBlock(), vue.createElementBlock("svg", _hoisted_11, [..._cache[2] || (_cache[2] = [
+                      (vue.openBlock(), vue.createElementBlock("svg", _hoisted_8, [..._cache[1] || (_cache[1] = [
                         vue.createElementVNode("path", {
                           "stroke-linecap": "round",
                           "stroke-linejoin": "round",
@@ -2153,11 +2198,16 @@ img {
                 ]),
                 _: 1
               })) : vue.createCommentVNode("", true),
-              vue.createElementVNode("div", _hoisted_12, [
+              vue.createElementVNode("div", _hoisted_9, [
                 vue.renderSlot(_ctx.$slots, "time", {}, () => [
                   vue.createElementVNode("span", null, vue.toDisplayString((/* @__PURE__ */ new Date()).toLocaleString("zh-CN")), 1)
                 ])
               ]),
+              __props.showMore && ((_d = (_c = __props.popover) == null ? void 0 : _c.menus) == null ? void 0 : _d.length) ? (vue.openBlock(), vue.createBlock(_sfc_main$2, vue.mergeProps({
+                key: 1,
+                "ref-name": "更多",
+                "ref-icon-class": "icon-[mdi--format-list-bulleted]"
+              }, __props.popover), null, 16)) : vue.createCommentVNode("", true),
               vue.createVNode(vue.unref(ElementPlus.ElDropdown), {
                 trigger: "hover",
                 onCommand: handleCommand
@@ -2186,7 +2236,7 @@ img {
                   })
                 ]),
                 default: vue.withCtx(() => [
-                  vue.createElementVNode("div", _hoisted_13, [
+                  vue.createElementVNode("div", _hoisted_10, [
                     vue.renderSlot(_ctx.$slots, "userIcon", {}, () => [
                       __props.userAvatar ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElIcon), {
                         key: 0,
@@ -2198,7 +2248,7 @@ img {
                             src: __props.userAvatar,
                             alt: __props.userName,
                             class: "rounded-full"
-                          }, null, 8, _hoisted_14)
+                          }, null, 8, _hoisted_11)
                         ]),
                         _: 1
                       })) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElIcon), {
@@ -2206,22 +2256,22 @@ img {
                         size: 24,
                         class: "jky-page-header__avatar"
                       }, {
-                        default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
+                        default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
                           vue.createElementVNode("span", { class: "icon-[heroicons--user]" }, null, -1)
                         ])]),
                         _: 1
                       }))
                     ]),
-                    __props.userName ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_15, vue.toDisplayString(__props.userName), 1)) : vue.createCommentVNode("", true)
+                    __props.userName ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_12, vue.toDisplayString(__props.userName), 1)) : vue.createCommentVNode("", true)
                   ])
                 ]),
                 _: 3
               }),
               __props.showLogout ? (vue.openBlock(), vue.createElementBlock("div", {
-                key: 1,
+                key: 2,
                 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] = [
+              }, [..._cache[3] || (_cache[3] = [
                 vue.createElementVNode("span", { class: "icon-[ri--logout-circle-line] mr-2" }, null, -1),
                 vue.createElementVNode("span", null, "退出登录", -1)
               ])])) : vue.createCommentVNode("", true)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jky-component-lib",
   "type": "module",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "publishConfig": {
     "access": "public"
   },