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

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

@@ -0,0 +1,246 @@
+import { defineComponent, computed, ref, watch, onDeactivated, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, unref, withCtx, Fragment, renderList, createBlock, toDisplayString, createCommentVNode } from "vue";
+import { NavigationPreference } from "../../common/entity";
+import { useCurrent, useMenuList } from "../../utils/hooks";
+import "element-plus/es/components/menu/style/css";
+import "element-plus/es/components/scrollbar/style/css";
+import { ElScrollbar, ElMenu, ElSubMenu, ElMenuItem } from "element-plus";
+import "element-plus/es/components/sub-menu/style/css";
+import "element-plus/es/components/menu-item/style/css";
+import { cloneDeep } from "lodash-es";
+import { list2Tree, getThirdLevelPathToNodeMap, uniqueSearchKey } from "../../utils/lib";
+import { MenuOpenType } from "../../common/const";
+import HambShow from "./HambShow.vue";
+import { getBase } from "../../utils/micro";
+const _hoisted_1 = ["href"];
+const _hoisted_2 = ["href"];
+const _sfc_main = /* @__PURE__ */ 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 = computed(() => {
+      if (props == null ? void 0 : props.router)
+        return props == null ? void 0 : props.router;
+      return null;
+    });
+    let current = ref();
+    useCurrent((val) => current.value = val);
+    const isHideSider = computed(() => {
+      var _a, _b;
+      if (!((_a = current.value) == null ? void 0 : _a.navigationPreference)) {
+        return true;
+      }
+      return ((_b = current.value) == null ? void 0 : _b.navigationPreference) === NavigationPreference.HIDE;
+    });
+    const isHideAutoBtn = 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) === NavigationPreference.HIDE || ((_c = current.value) == null ? void 0 : _c.navigationPreference) === NavigationPreference.OPEN;
+    });
+    const showSider = ref(true);
+    const timer = ref();
+    const timeTick = () => {
+      if (current.value && current.value.navigationPreference === NavigationPreference.AUTO) {
+        if (timer.value) {
+          window.clearTimeout(timer.value);
+        }
+        timer.value = window.setTimeout(() => {
+          showSider.value = false;
+        }, props.autoCloseDelay);
+      }
+    };
+    watch(
+      () => current.value,
+      () => timeTick(),
+      {
+        immediate: true
+      }
+    );
+    onDeactivated(() => {
+      if (timer.value) {
+        window.clearTimeout(timer.value);
+      }
+    });
+    const handleMouseEnter = () => {
+      if (current.value && current.value.navigationPreference === 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 = ref([]);
+    useMenuList((list) => prodMenuList.value = list ?? []);
+    const menuList = 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(cloneDeep(props.devMenu));
+        return (_a = prodMenuList.value) == null ? void 0 : _a.concat(devMenuList);
+      }
+      return prodMenuList.value;
+    });
+    const menuTree = computed(() => {
+      const prodMenuTree = list2Tree(prodMenuList.value);
+      if (props.devMenu && process.env.NODE_ENV === "development") {
+        prodMenuTree.unshift(props.devMenu);
+      }
+      return prodMenuTree;
+    });
+    const path2Node = computed(() => {
+      return getThirdLevelPathToNodeMap(menuList.value);
+    });
+    const activeFirstNode = 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 = computed(() => {
+      if (activeFirstNode.value) {
+        return activeFirstNode.value.children ?? [];
+      }
+      return null;
+    });
+    const activeThirdKey = ref();
+    const activeThirdNode = computed(() => {
+      if (activeThirdKey.value) {
+        return path2Node.value[activeThirdKey.value];
+      }
+      return null;
+    });
+    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 = 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[uniqueSearchKey];
+        if (uniqueSearchValue)
+          currentPath += `?${uniqueSearchKey}=${uniqueSearchValue}`;
+        activeThirdKey.value = currentPath;
+      },
+      {
+        immediate: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return !isHideSider.value && activeFirstNode.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["side-menu", props == null ? void 0 : props.customClass])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["side-menu-container", showSider.value ? "is-extended" : "is-collapsed"]),
+          onMouseenter: handleMouseEnter,
+          onMouseleave: timeTick
+        }, [
+          createVNode(unref(ElScrollbar), {
+            ref: "refScrollbar",
+            "wrap-class": "scrollbar-wrapper"
+          }, {
+            default: withCtx(() => {
+              var _a;
+              return [
+                createVNode(unref(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: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(activeSecondNode.value, (menu2) => {
+                      return openBlock(), createBlock(unref(ElSubMenu), {
+                        key: menu2.currentId,
+                        index: menu2.currentId
+                      }, {
+                        title: withCtx(() => [
+                          createElementVNode("span", null, toDisplayString(menu2.name), 1)
+                        ]),
+                        default: withCtx(() => [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(menu2.children, (menu3) => {
+                            return openBlock(), createBlock(unref(ElMenuItem), {
+                              key: menu3.currentId,
+                              index: menu3.currentId
+                            }, {
+                              default: withCtx(() => [
+                                menu3.openType === unref(MenuOpenType).CurrentPage ? (openBlock(), createElementBlock("a", {
+                                  key: 0,
+                                  href: getAHref(menu3.transitPagePath)
+                                }, toDisplayString(menu3.name), 9, _hoisted_1)) : (openBlock(), createElementBlock("a", {
+                                  key: 1,
+                                  href: menu3.transitPagePath,
+                                  target: "_blank"
+                                }, toDisplayString(menu3.name), 9, _hoisted_2))
+                              ]),
+                              _: 2
+                            }, 1032, ["index"]);
+                          }), 128))
+                        ]),
+                        _: 2
+                      }, 1032, ["index"]);
+                    }), 128))
+                  ]),
+                  _: 1
+                }, 8, ["default-active"])
+              ];
+            }),
+            _: 1
+          }, 512)
+        ], 34),
+        !isHideAutoBtn.value ? (openBlock(), createBlock(HambShow, {
+          key: 0,
+          modelValue: showSider.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showSider.value = $event)
+        }, null, 8, ["modelValue"])) : createCommentVNode("", true)
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
+const SiderMenu_vue_vue_type_style_index_0_lang = "";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,8 @@
+import SiderMenu from "./SiderMenu.vue";
+import { default as default2 } from "./SiderMenu.vue";
+SiderMenu.install = (app) => {
+  app.component(SiderMenu.__name, SiderMenu);
+};
+export {
+  default2 as default
+};

package/es/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/es/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/es/components/slider/MxSlider.vue.js

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

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

@@ -0,0 +1,8 @@
+import MxSlider from "./MxSlider.vue";
+import { default as default2 } from "./MxSlider.vue";
+MxSlider.install = (app) => {
+  app.component(MxSlider.__name, MxSlider);
+};
+export {
+  default2 as default
+};