@maxtropy/v-components 0.1.12-beta.4 → 0.1.12-beta.6

package/lib/components/sidermenu/SiderMenu.vue.js

@@ -0,0 +1,245 @@
+"use strict";
+const vue = require("vue");
+const entity = require("../../common/entity");
+const hooks = require("../../utils/hooks");
+require("element-plus/es/components/menu/style/css");
+require("element-plus/es/components/scrollbar/style/css");
+const elementPlus = require("element-plus");
+require("element-plus/es/components/sub-menu/style/css");
+require("element-plus/es/components/menu-item/style/css");
+const lodashEs = require("lodash-es");
+const lib = require("../../utils/lib");
+const _const = require("../../common/const");
+const HambShow = require("./HambShow.vue");
+const micro = require("../../utils/micro");
+const _hoisted_1 = ["href"];
+const _hoisted_2 = ["href"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "SiderMenu",
+  props: {
+    devMenu: { default: void 0 },
+    customClass: { default: "" },
+    router: { default: null },
+    autoCloseDelay: { default: 2e3 }
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const insideRouter = vue.computed(() => {
+      if (props == null ? void 0 : props.router)
+        return props == null ? void 0 : props.router;
+      return null;
+    });
+    let current = vue.ref();
+    hooks.useCurrent((val) => current.value = val);
+    const isHideSider = vue.computed(() => {
+      var _a, _b;
+      if (!((_a = current.value) == null ? void 0 : _a.navigationPreference)) {
+        return true;
+      }
+      return ((_b = current.value) == null ? void 0 : _b.navigationPreference) === entity.NavigationPreference.HIDE;
+    });
+    const isHideAutoBtn = vue.computed(() => {
+      var _a, _b, _c;
+      if (!((_a = current.value) == null ? void 0 : _a.navigationPreference)) {
+        return true;
+      }
+      return ((_b = current.value) == null ? void 0 : _b.navigationPreference) === entity.NavigationPreference.HIDE || ((_c = current.value) == null ? void 0 : _c.navigationPreference) === entity.NavigationPreference.OPEN;
+    });
+    const showSider = vue.ref(true);
+    const timer = vue.ref();
+    const timeTick = () => {
+      if (current.value && current.value.navigationPreference === entity.NavigationPreference.AUTO) {
+        if (timer.value) {
+          window.clearTimeout(timer.value);
+        }
+        timer.value = window.setTimeout(() => {
+          showSider.value = false;
+        }, props.autoCloseDelay);
+      }
+    };
+    vue.watch(
+      () => current.value,
+      () => timeTick(),
+      {
+        immediate: true
+      }
+    );
+    vue.onDeactivated(() => {
+      if (timer.value) {
+        window.clearTimeout(timer.value);
+      }
+    });
+    const handleMouseEnter = () => {
+      if (current.value && current.value.navigationPreference === entity.NavigationPreference.AUTO) {
+        if (timer.value) {
+          window.clearTimeout(timer.value);
+        }
+        showSider.value = true;
+      }
+    };
+    const getAHref = (path) => {
+      const hasOrigin = /^http/.test(path);
+      let isEqualOrigin = false;
+      let pathname = "";
+      if (hasOrigin) {
+        const url = new URL(path);
+        pathname = url.pathname;
+        isEqualOrigin = url.origin === window.location.origin;
+      }
+      if (isEqualOrigin) {
+        return pathname;
+      }
+      return path;
+    };
+    let prodMenuList = vue.ref([]);
+    hooks.useMenuList((list) => prodMenuList.value = list ?? []);
+    const menuList = vue.computed(() => {
+      var _a;
+      if (props.devMenu && process.env.NODE_ENV === "development") {
+        const devMenuList = [];
+        const devMenu2List = (menu) => {
+          devMenuList.push(menu);
+          if (menu.children) {
+            menu.children.forEach((item) => {
+              devMenu2List(item);
+            });
+          }
+        };
+        devMenu2List(lodashEs.cloneDeep(props.devMenu));
+        return (_a = prodMenuList.value) == null ? void 0 : _a.concat(devMenuList);
+      }
+      return prodMenuList.value;
+    });
+    const menuTree = vue.computed(() => {
+      const prodMenuTree = lib.list2Tree(prodMenuList.value);
+      if (props.devMenu && process.env.NODE_ENV === "development") {
+        prodMenuTree.unshift(props.devMenu);
+      }
+      return prodMenuTree;
+    });
+    const path2Node = vue.computed(() => {
+      return lib.getThirdLevelPathToNodeMap(menuList.value);
+    });
+    const activeFirstNode = vue.computed(() => {
+      if (activeThirdNode.value && menuTree.value) {
+        return menuTree.value.find((item) => {
+          var _a;
+          return item.currentId === ((_a = activeThirdNode.value) == null ? void 0 : _a.rootId);
+        });
+      }
+      return null;
+    });
+    const activeSecondNode = vue.computed(() => {
+      if (activeFirstNode.value) {
+        return activeFirstNode.value.children ?? [];
+      }
+      return null;
+    });
+    const activeThirdKey = vue.ref();
+    const activeThirdNode = vue.computed(() => {
+      if (activeThirdKey.value) {
+        return path2Node.value[activeThirdKey.value];
+      }
+      return null;
+    });
+    vue.watch(
+      () => {
+        var _a, _b;
+        return (_b = (_a = insideRouter.value) == null ? void 0 : _a.currentRoute) == null ? void 0 : _b.value;
+      },
+      () => {
+        var _a, _b;
+        const { hash, pathname } = window.location;
+        const base = micro.getBase();
+        const sliceIndex = base ? [3, 6] : [0, 4];
+        let currentPath = pathname;
+        if (hash) {
+          currentPath = hash.replace("#", "").split("/").slice(...sliceIndex).join("/");
+        } else {
+          currentPath = pathname.split("/").slice(...sliceIndex).join("/");
+        }
+        const uniqueSearchValue = (_b = (_a = insideRouter.value) == null ? void 0 : _a.currentRoute) == null ? void 0 : _b.value.query[lib.uniqueSearchKey];
+        if (uniqueSearchValue)
+          currentPath += `?${lib.uniqueSearchKey}=${uniqueSearchValue}`;
+        activeThirdKey.value = currentPath;
+      },
+      {
+        immediate: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return !isHideSider.value && activeFirstNode.value ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: vue.normalizeClass(["side-menu", props == null ? void 0 : props.customClass])
+      }, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(["side-menu-container", showSider.value ? "is-extended" : "is-collapsed"]),
+          onMouseenter: handleMouseEnter,
+          onMouseleave: timeTick
+        }, [
+          vue.createVNode(vue.unref(elementPlus.ElScrollbar), {
+            ref: "refScrollbar",
+            "wrap-class": "scrollbar-wrapper"
+          }, {
+            default: vue.withCtx(() => {
+              var _a;
+              return [
+                vue.createVNode(vue.unref(elementPlus.ElMenu), {
+                  class: "el-menu-vertical",
+                  "default-active": (_a = activeThirdNode.value) == null ? void 0 : _a.currentId,
+                  "unique-opened": "",
+                  "text-color": "rgba(255,255,255,0.65)",
+                  "background-color": "#1b1b1b"
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(activeSecondNode.value, (menu2) => {
+                      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElSubMenu), {
+                        key: menu2.currentId,
+                        index: menu2.currentId
+                      }, {
+                        title: vue.withCtx(() => [
+                          vue.createElementVNode("span", null, vue.toDisplayString(menu2.name), 1)
+                        ]),
+                        default: vue.withCtx(() => [
+                          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(menu2.children, (menu3) => {
+                            return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElMenuItem), {
+                              key: menu3.currentId,
+                              index: menu3.currentId
+                            }, {
+                              default: vue.withCtx(() => [
+                                menu3.openType === vue.unref(_const.MenuOpenType).CurrentPage ? (vue.openBlock(), vue.createElementBlock("a", {
+                                  key: 0,
+                                  href: getAHref(menu3.transitPagePath)
+                                }, vue.toDisplayString(menu3.name), 9, _hoisted_1)) : (vue.openBlock(), vue.createElementBlock("a", {
+                                  key: 1,
+                                  href: menu3.transitPagePath,
+                                  target: "_blank"
+                                }, vue.toDisplayString(menu3.name), 9, _hoisted_2))
+                              ]),
+                              _: 2
+                            }, 1032, ["index"]);
+                          }), 128))
+                        ]),
+                        _: 2
+                      }, 1032, ["index"]);
+                    }), 128))
+                  ]),
+                  _: 1
+                }, 8, ["default-active"])
+              ];
+            }),
+            _: 1
+          }, 512)
+        ], 34),
+        !isHideAutoBtn.value ? (vue.openBlock(), vue.createBlock(HambShow, {
+          key: 0,
+          modelValue: showSider.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showSider.value = $event)
+        }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true)
+      ], 2)) : vue.createCommentVNode("", true);
+    };
+  }
+});
+const SiderMenu_vue_vue_type_style_index_0_lang = "";
+module.exports = _sfc_main;

package/lib/components/sidermenu/index.d.ts

@@ -0,0 +1,7 @@
+import SiderMenu from './SiderMenu.vue';
+declare module 'vue' {
+    interface GlobalComponents {
+        SiderMenu: typeof SiderMenu;
+    }
+}
+export default SiderMenu;

package/lib/components/sidermenu/index.js

@@ -0,0 +1,6 @@
+"use strict";
+const SiderMenu = require("./SiderMenu.vue");
+SiderMenu.install = (app) => {
+  app.component(SiderMenu.__name, SiderMenu);
+};
+module.exports = SiderMenu;

package/lib/components/slider/MxSlider.css

@@ -0,0 +1,54 @@
+.mx-slider.el-slider .el-slider__runway,
+.mx-slider-number.el-slider .el-slider__runway {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+}
+.mx-slider.el-slider .el-slider__runway .el-slider__bar,
+.mx-slider-number.el-slider .el-slider__runway .el-slider__bar {
+  background-color: #235196;
+  border-radius: 2px;
+}
+.mx-slider.el-slider .el-slider__runway .el-slider__button-wrapper .el-slider__button,
+.mx-slider-number.el-slider .el-slider__runway .el-slider__button-wrapper .el-slider__button {
+  width: 14px;
+  height: 14px;
+  background-color: #1d1d1d;
+  border: 2px solid #4a90e2;
+}
+.mx-slider.el-slider .el-slider__runway .el-slider__button-wrapper .el-slider__button:hover,
+.mx-slider-number.el-slider .el-slider__runway .el-slider__button-wrapper .el-slider__button:hover {
+  transform: scale(1.4);
+}
+.mx-slider.el-slider .el-slider__runway .el-slider__stop,
+.mx-slider-number.el-slider .el-slider__runway .el-slider__stop {
+  background-color: #1b1b1b;
+}
+.mx-slider.el-slider .el-slider__runway.is-disabled .el-slider__bar,
+.mx-slider-number.el-slider .el-slider__runway.is-disabled .el-slider__bar {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.mx-slider.el-slider .el-slider__runway.is-disabled .el-slider__button-wrapper .el-slider__button,
+.mx-slider-number.el-slider .el-slider__runway.is-disabled .el-slider__button-wrapper .el-slider__button {
+  border: 2px solid rgba(255, 255, 255, 0.45);
+}
+.mx-slider-number.el-slider .el-slider__runway .el-slider__stop {
+  position: absolute;
+  top: 12px;
+  width: 1px;
+  height: 5px;
+  border-radius: 0px;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.mx-slider-number.el-slider .el-slider__runway .el-slider__marks {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.85);
+}
+.mx-slider-tooltip.el-popper.is-dark {
+  color: #fff;
+  background: #424242;
+  border-radius: 2px;
+  font-size: 14px;
+}
+.mx-slider-tooltip.el-popper.is-dark .el-popper__arrow::before {
+  background: #424242;
+}

package/lib/components/slider/MxSlider.vue.d.ts

@@ -0,0 +1,32 @@
+import { PropType, Component } from 'vue';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    showNumber: BooleanConstructor;
+    prefix: {
+        type: PropType<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+        default: string;
+    };
+    suffix: {
+        type: PropType<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    showNumber: BooleanConstructor;
+    prefix: {
+        type: PropType<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+        default: string;
+    };
+    suffix: {
+        type: PropType<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+        default: string;
+    };
+}>>, {
+    prefix: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    showNumber: boolean;
+    suffix: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+}, {}>, Partial<Record<NonNullable<string | number>, (_: {}) => any>>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/slider/MxSlider.vue.js

@@ -0,0 +1,38 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+require("element-plus/es/components/slider/style/css");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "MxSlider",
+  props: {
+    showNumber: Boolean,
+    prefix: {
+      type: String,
+      default: ""
+    },
+    suffix: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElSlider), vue.mergeProps(_ctx.$attrs, {
+        class: props.showNumber === true ? "mx-slider-number" : "mx-slider",
+        "tooltip-class": "mx-slider-tooltip"
+      }), vue.createSlots({ _: 2 }, [
+        vue.renderList(_ctx.$slots, (item, key, index) => {
+          return {
+            name: key,
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, key)
+            ])
+          };
+        })
+      ]), 1040, ["class"]);
+    };
+  }
+});
+const MxSlider_vue_vue_type_style_index_0_lang = "";
+module.exports = _sfc_main;

package/lib/components/slider/index.d.ts

@@ -0,0 +1,7 @@
+import MxSlider from './MxSlider.vue';
+declare module 'vue' {
+    interface GlobalComponents {
+        MxSlider: typeof MxSlider;
+    }
+}
+export default MxSlider;

package/lib/components/slider/index.js

@@ -0,0 +1,6 @@
+"use strict";
+const MxSlider = require("./MxSlider.vue");
+MxSlider.install = (app) => {
+  app.component(MxSlider.__name, MxSlider);
+};
+module.exports = MxSlider;