element-ps 2.0.31 → 2.0.32

package/dist/index.full.mjs

@@ -4292,6 +4292,22 @@ const useNamespace = (block) => {
     const state = args.length >= 1 ? args[0] : true;
     return name && state ? `${statePrefix}${name}` : "";
   };
+  const cssVar = (object) => {
+    const styles = {};
+    for (const key in object) {
+      styles[`--${namespace.value}-${key}`] = object[key];
+    }
+    return styles;
+  };
+  const cssVarBlock = (object) => {
+    const styles = {};
+    for (const key in object) {
+      styles[`--${namespace.value}-${block}-${key}`] = object[key];
+    }
+    return styles;
+  };
+  const cssVarName = (name) => `--${namespace.value}-${name}`;
+  const cssVarBlockName = (name) => `--${namespace.value}-${block}-${name}`;
   return {
     namespace,
     b,
@@ -4301,7 +4317,11 @@ const useNamespace = (block) => {
     em,
     bm,
     bem,
-    is
+    is,
+    cssVar,
+    cssVarName,
+    cssVarBlock,
+    cssVarBlockName
   };
 };
 
@@ -19134,17 +19154,59 @@ class Menu$1 {
 var Menubar = Menu$1;
 
 const _sfc_main$U = defineComponent({
-  name: "PsMenuCollapseTransition"
+  name: "PsMenuCollapseTransition",
+  setup() {
+    const ns = useNamespace("menu");
+    const listeners = {
+      onBeforeEnter: (el) => el.style.opacity = "0.2",
+      onEnter(el, done) {
+        addClass(el, `${ns.namespace.value}-opacity-transition`);
+        el.style.opacity = "1";
+        done();
+      },
+      onAfterEnter(el) {
+        removeClass(el, `${ns.namespace.value}-opacity-transition`);
+        el.style.opacity = "";
+      },
+      onBeforeLeave(el) {
+        if (!el.dataset) {
+          el.dataset = {};
+        }
+        if (hasClass(el, ns.m("collapse"))) {
+          removeClass(el, ns.m("collapse"));
+          el.dataset.oldOverflow = el.style.overflow;
+          el.dataset.scrollWidth = el.clientWidth.toString();
+          addClass(el, ns.m("collapse"));
+        } else {
+          addClass(el, ns.m("collapse"));
+          el.dataset.oldOverflow = el.style.overflow;
+          el.dataset.scrollWidth = el.clientWidth.toString();
+          removeClass(el, ns.m("collapse"));
+        }
+        el.style.width = `${el.scrollWidth}px`;
+        el.style.overflow = "hidden";
+      },
+      onLeave(el) {
+        addClass(el, "horizontal-collapse-transition");
+        el.style.width = `${el.dataset.scrollWidth}px`;
+      }
+    };
+    return {
+      listeners
+    };
+  }
 });
 function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
-  return renderSlot(_ctx.$slots, "default");
+  return openBlock(), createBlock(Transition, mergeProps({ mode: "out-in" }, _ctx.listeners), {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 16);
 }
 var PsMenuCollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$B], ["__file", "menu-collapse-transition.vue"]]);
 
 function useMenu(instance, currentIndex) {
-  const rootMenu = inject("rootMenu");
-  if (!rootMenu)
-    throwError("useMenu", "can not inject root menu");
   const indexPath = computed(() => {
     let parent = instance.parent;
     const path = [currentIndex.value];
@@ -19163,26 +19225,8 @@ function useMenu(instance, currentIndex) {
     }
     return parent;
   });
-  const paddingStyle = computed(() => {
-    let parent = instance.parent;
-    if (rootMenu.props.mode !== "vertical")
-      return {};
-    let padding = 20;
-    if (rootMenu.props.collapse) {
-      padding = 20;
-    } else {
-      while (parent && parent.type.name !== "PsMenu") {
-        if (parent.type.name === "PsSubMenu") {
-          padding += 20;
-        }
-        parent = parent.parent;
-      }
-    }
-    return { paddingLeft: `${padding}px` };
-  });
   return {
     parentMenu,
-    paddingStyle,
     indexPath
   };
 }
@@ -19199,15 +19243,17 @@ function useMenuColor(props) {
   return menuBarColor;
 }
 
-const useMenuCssVar = (props) => {
+const useMenuCssVar = (props, level) => {
+  const ns = useNamespace("menu");
   return computed(() => {
-    return {
-      "--el-menu-text-color": props.textColor || "",
-      "--el-menu-hover-text-color": props.textColor || "",
-      "--el-menu-bg-color": props.backgroundColor || "",
-      "--el-menu-hover-bg-color": useMenuColor(props).value || "",
-      "--el-menu-active-color": props.activeTextColor || ""
-    };
+    return ns.cssVarBlock({
+      "text-color": props.textColor || "",
+      "hover-text-color": props.textColor || "",
+      "bg-color": props.backgroundColor || "",
+      "hover-bg-color": useMenuColor(props).value || "",
+      "active-color": props.activeTextColor || "",
+      level: `${level}`
+    });
   });
 };
 
@@ -19241,7 +19287,7 @@ var SubMenu = defineComponent({
   props: subMenuProps,
   setup(props, { slots, expose }) {
     const instance = getCurrentInstance();
-    const { paddingStyle, indexPath, parentMenu } = useMenu(instance, computed(() => props.index));
+    const { indexPath, parentMenu } = useMenu(instance, computed(() => props.index));
     const nsMenu = useNamespace("menu");
     const nsSubMenu = useNamespace("sub-menu");
     const rootMenu = inject("rootMenu");
@@ -19260,17 +19306,7 @@ var SubMenu = defineComponent({
       return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse ? arrowDown : arrowRight;
     });
     const isFirstLevel = computed(() => {
-      let isFirstLevel2 = true;
-      let parent = instance.parent;
-      while (parent && parent.type.name !== "PsMenu") {
-        if (["PsSubMenu", "PsMenuItemGroup"].includes(parent.type.name)) {
-          isFirstLevel2 = false;
-          break;
-        } else {
-          parent = parent.parent;
-        }
-      }
-      return isFirstLevel2;
+      return subMenu.level === 0;
     });
     const appendToBody = computed(() => {
       return props.popperAppendToBody === void 0 ? isFirstLevel.value : Boolean(props.popperAppendToBody);
@@ -19346,7 +19382,8 @@ var SubMenu = defineComponent({
       provide(`subMenu:${instance.uid}`, {
         addSubMenu,
         removeSubMenu,
-        mouseInChild
+        mouseInChild,
+        level: subMenu.level + 1
       });
     }
     expose({
@@ -19368,7 +19405,7 @@ var SubMenu = defineComponent({
           class: nsSubMenu.e("icon-arrow")
         }, { default: () => h$1(subMenuTitleIcon.value) })
       ];
-      const ulStyle = useMenuCssVar(rootMenu.props);
+      const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1);
       const child = rootMenu.isMenuPopup ? h$1(PsTooltip, {
         ref: vPopper,
         visible: opened.value,
@@ -19387,7 +19424,11 @@ var SubMenu = defineComponent({
         content: () => {
           var _a2;
           return h$1("div", {
-            class: [nsMenu.m(mode.value), props.popperClass]
+            class: [
+              nsMenu.m(mode.value),
+              nsMenu.m("popup-container"),
+              props.popperClass
+            ]
           }, [
             h$1("ul", {
               class: [
@@ -19402,7 +19443,6 @@ var SubMenu = defineComponent({
         default: () => h$1("div", {
           class: nsSubMenu.e("title"),
           style: [
-            paddingStyle.value,
             titleStyle.value,
             { backgroundColor: backgroundColor.value }
           ]
@@ -19411,7 +19451,6 @@ var SubMenu = defineComponent({
         h$1("div", {
           class: nsSubMenu.e("title"),
           style: [
-            paddingStyle.value,
             titleStyle.value,
             { backgroundColor: backgroundColor.value }
           ],
@@ -19483,6 +19522,7 @@ var Menu = defineComponent({
   props: menuProps,
   setup(props, { slots, expose }) {
     const instance = getCurrentInstance();
+    instance.appContext.config.globalProperties.$router;
     const menu = ref();
     const nsMenu = useNamespace("menu");
     const nsSubMenu = useNamespace("sub-menu");
@@ -19571,7 +19611,8 @@ var Menu = defineComponent({
       provide(`subMenu:${instance.uid}`, {
         addSubMenu,
         removeSubMenu,
-        mouseInChild: ref(false)
+        mouseInChild: ref(false),
+        level: 0
       });
     }
     onMounted(() => {
@@ -19638,7 +19679,7 @@ var Menu = defineComponent({
           }));
         }
       }
-      const ulStyle = useMenuCssVar(props);
+      const ulStyle = useMenuCssVar(props, 0);
       const resizeMenu = (vNode) => props.ellipsis ? useVNodeResize(vNode) : vNode;
       const vMenu = resizeMenu(h$1("ul", {
         key: String(props.collapse),
@@ -19647,10 +19688,9 @@ var Menu = defineComponent({
         style: ulStyle.value,
         class: {
           [nsMenu.b()]: true,
-          [nsMenu.m("horizontal")]: props.mode === "horizontal",
+          [nsMenu.m(props.mode)]: true,
           [nsMenu.m("collapse")]: props.collapse
-        },
-        widget: props.widget
+        }
       }, [...slot, ...vShowMore]));
       if (props.collapseTransition && props.mode === "vertical") {
         return h$1(PsMenuCollapseTransition, () => vMenu);
@@ -19677,6 +19717,9 @@ const menuItemEmits = {
 const COMPONENT_NAME$8 = "PsMenuItem";
 const _sfc_main$T = defineComponent({
   name: COMPONENT_NAME$8,
+  components: {
+    PsTooltip
+  },
   props: menuItemProps,
   emits: menuItemEmits,
   setup(props, { emit }) {
@@ -19686,7 +19729,7 @@ const _sfc_main$T = defineComponent({
     const nsMenuItem = useNamespace("menu-item");
     if (!rootMenu)
       throwError(COMPONENT_NAME$8, "can not inject root menu");
-    const { parentMenu, paddingStyle, indexPath } = useMenu(instance, toRef(props, "index"));
+    const { parentMenu, indexPath } = useMenu(instance, toRef(props, "index"));
     const subMenu = inject(`subMenu:${parentMenu.value.uid}`);
     if (!subMenu)
       throwError(COMPONENT_NAME$8, "can not inject sub menu");
@@ -19696,6 +19739,16 @@ const _sfc_main$T = defineComponent({
       indexPath,
       active
     });
+    const handleClick = () => {
+      if (!props.disabled) {
+        rootMenu.handleMenuItemClick({
+          index: props.index,
+          indexPath: indexPath.value,
+          route: props.route
+        });
+        emit("click", item);
+      }
+    };
     onMounted(() => {
       subMenu.addSubMenu(item);
       rootMenu.addMenuItem(item);
@@ -19708,14 +19761,15 @@ const _sfc_main$T = defineComponent({
       Effect,
       parentMenu,
       rootMenu,
-      paddingStyle,
       active,
       nsMenu,
-      nsMenuItem
+      nsMenuItem,
+      handleClick
     };
   }
 });
 function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ps_tooltip = resolveComponent("ps-tooltip");
   return openBlock(), createElementBlock("li", {
     class: normalizeClass([
       _ctx.nsMenuItem.b(),
@@ -19724,18 +19778,31 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     role: "menuitem",
     tabindex: "-1",
-    style: normalizeStyle(_ctx.paddingStyle)
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
   }, [
-    _ctx.parentMenu.type.name === "PsMenu" && _ctx.rootMenu.props.collapse && _ctx.$slots.title ? (openBlock(), createElementBlock("div", {
+    _ctx.parentMenu.type.name === "PsMenu" && _ctx.rootMenu.props.collapse && _ctx.$slots.title ? (openBlock(), createBlock(_component_ps_tooltip, {
       key: 0,
-      class: normalizeClass(_ctx.nsMenu.be("tooltip", "trigger"))
-    }, [
-      renderSlot(_ctx.$slots, "default")
-    ], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+      effect: _ctx.Effect.DARK,
+      placement: "right",
+      "fallback-placements": ["left"],
+      persistent: ""
+    }, {
+      content: withCtx(() => [
+        renderSlot(_ctx.$slots, "title")
+      ]),
+      default: withCtx(() => [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.nsMenu.be("tooltip", "trigger"))
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2)
+      ]),
+      _: 3
+    }, 8, ["effect"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
       renderSlot(_ctx.$slots, "default"),
       renderSlot(_ctx.$slots, "title")
     ], 64))
-  ], 6);
+  ], 2);
 }
 var MenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$A], ["__file", "menu-item.vue"]]);
 
@@ -19748,26 +19815,8 @@ const _sfc_main$S = defineComponent({
   name: COMPONENT_NAME$7,
   props: menuItemGroupProps,
   setup() {
-    const instance = getCurrentInstance();
-    const menu = inject("rootMenu");
-    if (!menu)
-      throwError(COMPONENT_NAME$7, "can not inject root menu");
     const ns = useNamespace("menu-item-group");
-    const levelPadding = computed(() => {
-      if (menu.props.collapse)
-        return 20;
-      let padding = 20;
-      let parent = instance.parent;
-      while (parent && parent.type.name !== "PsMenu") {
-        if (parent.type.name === "PsSubMenu") {
-          padding += 20;
-        }
-        parent = parent.parent;
-      }
-      return padding;
-    });
     return {
-      levelPadding,
       ns
     };
   }
@@ -19777,13 +19826,12 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.ns.b())
   }, [
     createElementVNode("div", {
-      class: normalizeClass(_ctx.ns.e("title")),
-      style: normalizeStyle({ paddingLeft: `${_ctx.levelPadding}px` })
+      class: normalizeClass(_ctx.ns.e("title"))
     }, [
       !_ctx.$slots.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
         createTextVNode(toDisplayString(_ctx.title), 1)
       ], 2112)) : renderSlot(_ctx.$slots, "title", { key: 1 })
-    ], 6),
+    ], 2),
     createElementVNode("ul", null, [
       renderSlot(_ctx.$slots, "default")
     ])

package/es/components/affix/index.d.ts

@@ -26,6 +26,10 @@ export declare const PsAffix: import("element-ps/es/utils").SFCWithInstall<impor
             (name: string, state: boolean | undefined): string;
             (name: string): string;
         };
+        cssVar: (object: Record<string, string>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
     };
     target: import("vue").ShallowRef<HTMLElement | undefined>;
     root: import("vue").ShallowRef<HTMLDivElement | undefined>;

package/es/components/affix/index.mjs

@@ -1,6 +1,6 @@
 import '../../utils/index.mjs';
-import Affix from './src/affix.mjs';
-export { affixProps } from './src/affix2.mjs';
+import Affix from './src/affix2.mjs';
+export { affixProps } from './src/affix.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 
 const PsAffix = withInstall(Affix);

package/es/components/affix/src/affix.mjs

@@ -1,88 +1,25 @@
-import { defineComponent, shallowRef, ref, computed, onMounted, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createElementVNode, renderSlot } from 'vue';
-import { useWindowSize, useElementBounding } from '@vueuse/core';
 import '../../../utils/index.mjs';
-import '../../../hooks/index.mjs';
-import { affixProps } from './affix2.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { throwError } from '../../../utils/error.mjs';
-import { getScrollContainer } from '../../../utils/dom/scroll.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props.mjs';
 
-const __default__ = {
-  name: "PsAffix"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: affixProps,
-  setup(__props, { expose }) {
-    const props = __props;
-    const COMPONENT_NAME = "PsAffix";
-    const ns = useNamespace("affix");
-    const target = shallowRef();
-    const root = shallowRef();
-    const scrollContainer = shallowRef();
-    const { height: windowHeight } = useWindowSize();
-    const {
-      height: rootHeight,
-      width: rootWidth,
-      top: rootTop,
-      bottom: rootBottom,
-      update: updateRoot
-    } = useElementBounding(root);
-    const targetRect = useElementBounding(target);
-    const fixed = ref(false);
-    const scrollTop = ref(0);
-    const transform = ref(0);
-    const rootStyle = computed(() => {
-      return {
-        height: fixed.value ? `${rootHeight.value}px` : "",
-        width: fixed.value ? `${rootWidth.value}px` : ""
-      };
-    });
-    const affixStyle = computed(() => {
-      if (!fixed.value)
-        return {};
-      const offset = props.offset ? `${props.offset}px` : 0;
-      return {
-        height: `${rootHeight.value}px`,
-        width: `${rootWidth.value}px`,
-        top: props.position === "top" ? offset : "",
-        bottom: props.position === "bottom" ? offset : "",
-        transform: transform.value ? `translateY(${transform.value}px)` : "",
-        zIndex: props.zIndex
-      };
-    });
-    onMounted(() => {
-      var _a;
-      if (props.target) {
-        target.value = (_a = document.querySelector(props.target)) != null ? _a : void 0;
-        if (!target.value)
-          throwError(COMPONENT_NAME, `Target is not existed: ${props.target}`);
-      } else {
-        target.value = document.documentElement;
-      }
-      scrollContainer.value = getScrollContainer(root.value, true);
-      updateRoot();
-    });
-    expose({});
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "root",
-        ref: root,
-        class: normalizeClass(unref(ns).b()),
-        style: normalizeStyle(unref(rootStyle))
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass({ [unref(ns).m("fixed")]: fixed.value }),
-          style: normalizeStyle(unref(affixStyle))
-        }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 6)
-      ], 6);
-    };
+const affixProps = buildProps({
+  zIndex: {
+    type: definePropType([Number, String]),
+    default: 100
+  },
+  target: {
+    type: String,
+    default: ""
+  },
+  offset: {
+    type: Number,
+    default: 0
+  },
+  position: {
+    type: String,
+    values: ["top", "bottom"],
+    default: "top"
   }
 });
-var Affix = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/meng/workspace/element-ps/packages/components/affix/src/affix.vue"]]);
 
-export { Affix as default };
+export { affixProps };
 //# sourceMappingURL=affix.mjs.map

package/es/components/affix/src/affix.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"affix.mjs","sources":["../../../../../../packages/components/affix/src/affix.vue"],"sourcesContent":["<template>\n  <div ref=\"root\" :class=\"ns.b()\" :style=\"rootStyle\">\n    <div :class=\"{ [ns.m('fixed')]: fixed }\" :style=\"affixStyle\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'\nimport {\n  useElementBounding,\n  useWindowSize,\n} from '@vueuse/core'\nimport { getScrollContainer, throwError } from '@element-ps/utils'\nimport { useNamespace } from '@element-ps/hooks'\nimport { affixProps } from './affix'\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'PsAffix'\ndefineOptions({\n  name: 'PsAffix',\n})\n\nconst props = defineProps(affixProps)\n\nconst ns = useNamespace('affix')\n\nconst target = shallowRef<HTMLElement>()\nconst root = shallowRef<HTMLDivElement>()\nconst scrollContainer = shallowRef<HTMLElement | Window>()\nconst { height: windowHeight } = useWindowSize()\nconst {\n  height: rootHeight,\n  width: rootWidth,\n  top: rootTop,\n  bottom: rootBottom,\n  update: updateRoot,\n} = useElementBounding(root)\nconst targetRect = useElementBounding(target)\n\nconst fixed = ref(false)\nconst scrollTop = ref(0)\nconst transform = ref(0)\n\nconst rootStyle = computed<CSSProperties>(() => {\n  return {\n    height: fixed.value ? `${rootHeight.value}px` : '',\n    width: fixed.value ? `${rootWidth.value}px` : '',\n  }\n})\n\nconst affixStyle = computed<CSSProperties>(() => {\n  if (!fixed.value) return {}\n\n  const offset = props.offset ? `${props.offset}px` : 0\n  return {\n    height: `${rootHeight.value}px`,\n    width: `${rootWidth.value}px`,\n    top: props.position === 'top' ? offset : '',\n    bottom: props.position === 'bottom' ? offset : '',\n    transform: transform.value ? `translateY(${transform.value}px)` : '',\n    zIndex: props.zIndex,\n  }\n})\n\nonMounted(() => {\n  if (props.target) {\n    target.value =\n      document.querySelector<HTMLElement>(props.target) ?? undefined\n    if (!target.value)\n      throwError(COMPONENT_NAME, `Target is not existed: ${props.target}`)\n  } else {\n    target.value = document.documentElement\n  }\n  scrollContainer.value = getScrollContainer(root.value!, true)\n  updateRoot()\n})\n\ndefineExpose({\n  /** @description update affix status */\n})\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"affix.mjs","sources":["../../../../../../packages/components/affix/src/affix.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-ps/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type { ZIndexProperty } from 'csstype'\nimport type Affix from './affix.vue'\n\nexport const affixProps = buildProps({\n  zIndex: {\n    type: definePropType<ZIndexProperty>([Number, String]),\n    default: 100,\n  },\n  target: {\n    type: String,\n    default: '',\n  },\n  offset: {\n    type: Number,\n    default: 0,\n  },\n  position: {\n    type: String,\n    values: ['top', 'bottom'],\n    default: 'top',\n  },\n} as const)\nexport type AffixProps = ExtractPropTypes<typeof affixProps>\n\nexport type AffixInstance = InstanceType<typeof Affix>\n"],"names":[],"mappings":";;;AACY,MAAC,UAAU,GAAG,UAAU,CAAC;AACrC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;AAC7B,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,CAAC;;;;"}

package/es/components/affix/src/affix.vue.d.ts

@@ -27,6 +27,10 @@ declare const _default: import("vue").DefineComponent<{
             (name: string, state: boolean | undefined): string;
             (name: string): string;
         };
+        cssVar: (object: Record<string, string>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
     };
     target: import("vue").ShallowRef<HTMLElement | undefined>;
     root: import("vue").ShallowRef<HTMLDivElement | undefined>;

package/es/components/affix/src/affix2.mjs

@@ -1,25 +1,88 @@
+import { defineComponent, shallowRef, ref, computed, onMounted, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createElementVNode, renderSlot } from 'vue';
+import { useWindowSize, useElementBounding } from '@vueuse/core';
 import '../../../utils/index.mjs';
-import { buildProps, definePropType } from '../../../utils/vue/props.mjs';
+import '../../../hooks/index.mjs';
+import { affixProps } from './affix.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { throwError } from '../../../utils/error.mjs';
+import { getScrollContainer } from '../../../utils/dom/scroll.mjs';
 
-const affixProps = buildProps({
-  zIndex: {
-    type: definePropType([Number, String]),
-    default: 100
-  },
-  target: {
-    type: String,
-    default: ""
-  },
-  offset: {
-    type: Number,
-    default: 0
-  },
-  position: {
-    type: String,
-    values: ["top", "bottom"],
-    default: "top"
+const __default__ = {
+  name: "PsAffix"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: affixProps,
+  setup(__props, { expose }) {
+    const props = __props;
+    const COMPONENT_NAME = "PsAffix";
+    const ns = useNamespace("affix");
+    const target = shallowRef();
+    const root = shallowRef();
+    const scrollContainer = shallowRef();
+    const { height: windowHeight } = useWindowSize();
+    const {
+      height: rootHeight,
+      width: rootWidth,
+      top: rootTop,
+      bottom: rootBottom,
+      update: updateRoot
+    } = useElementBounding(root);
+    const targetRect = useElementBounding(target);
+    const fixed = ref(false);
+    const scrollTop = ref(0);
+    const transform = ref(0);
+    const rootStyle = computed(() => {
+      return {
+        height: fixed.value ? `${rootHeight.value}px` : "",
+        width: fixed.value ? `${rootWidth.value}px` : ""
+      };
+    });
+    const affixStyle = computed(() => {
+      if (!fixed.value)
+        return {};
+      const offset = props.offset ? `${props.offset}px` : 0;
+      return {
+        height: `${rootHeight.value}px`,
+        width: `${rootWidth.value}px`,
+        top: props.position === "top" ? offset : "",
+        bottom: props.position === "bottom" ? offset : "",
+        transform: transform.value ? `translateY(${transform.value}px)` : "",
+        zIndex: props.zIndex
+      };
+    });
+    onMounted(() => {
+      var _a;
+      if (props.target) {
+        target.value = (_a = document.querySelector(props.target)) != null ? _a : void 0;
+        if (!target.value)
+          throwError(COMPONENT_NAME, `Target is not existed: ${props.target}`);
+      } else {
+        target.value = document.documentElement;
+      }
+      scrollContainer.value = getScrollContainer(root.value, true);
+      updateRoot();
+    });
+    expose({});
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "root",
+        ref: root,
+        class: normalizeClass(unref(ns).b()),
+        style: normalizeStyle(unref(rootStyle))
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass({ [unref(ns).m("fixed")]: fixed.value }),
+          style: normalizeStyle(unref(affixStyle))
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 6)
+      ], 6);
+    };
   }
 });
+var Affix = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/meng/workspace/element-ps/packages/components/affix/src/affix.vue"]]);
 
-export { affixProps };
+export { Affix as default };
 //# sourceMappingURL=affix2.mjs.map