ll-plus 2.5.11 → 2.5.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { defineComponent, useAttrs, ref, computed, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, createElementVNode, normalizeClass, renderSlot, createCommentVNode, createVNode } from 'vue';
1
+ import { defineComponent, useAttrs, ref, computed, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, createTextVNode, toDisplayString, createElementVNode, normalizeClass, renderSlot, createCommentVNode, createVNode } from 'vue';
2
2
  import { Modal } from 'ant-design-vue';
3
3
  import '../../index.mjs';
4
4
  import '../../../utils/index.mjs';
@@ -55,6 +55,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
55
55
  onOk: handleOk
56
56
  }), createSlots({
57
57
  default: withCtx(() => [
58
+ createTextVNode(
59
+ " " + toDisplayString(isShowContentBottomBox.value) + " ",
60
+ 1
61
+ /* TEXT */
62
+ ),
58
63
  createElementVNode(
59
64
  "div",
60
65
  {
@@ -1 +1 @@
1
- {"version":3,"file":"modal.vue2.mjs","sources":["../../../../../../packages/components/new-modal/src/modal.vue"],"sourcesContent":["<template>\n <Modal\n v-bind=\"getBindValue\"\n ref=\"modal\"\n :open=\"open\"\n :title=\"title\"\n :wrap-class-name=\"`${bem.b()} ${wrapClassName}`\"\n @cancel=\"handleCancel\"\n @ok=\"handleOk\"\n >\n <!-- 内容区域 -->\n <div ref=\"scrollRef\" :class=\"[bem.e('container')]\">\n <slot />\n </div>\n <!-- 底部区域 -->\n <template v-if=\"showFooter\" #footer>\n <div\n :class=\"`${bem.e('footer')} ${\n isShowContentBottomBox ? bem.e('footer-shadow') : ''\n }`\"\n >\n <slot name=\"footer\">\n <ll-button\n v-if=\"type !== 'confirm'\"\n :label=\"cancelText\"\n size=\"middle\"\n v-bind=\"cancelButtonProps\"\n @click=\"handleCancel\"\n >\n </ll-button>\n <ll-button\n type=\"primary\"\n :loading=\"props.confirmLoading\"\n size=\"middle\"\n :label=\"\n props.confirmText\n ? props.confirmText\n : props.type === 'confirm'\n ? '知道了'\n : '确认'\n \"\n v-bind=\"okButtonProps\"\n @click=\"handleOk\"\n />\n </slot>\n </div>\n </template>\n </Modal>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useAttrs, ref, computed } from 'vue'\n\nimport { Modal } from 'ant-design-vue'\nimport { LlButton } from '@ll-plus/components'\n\nimport { createNamespace } from '@ll-plus/utils'\nimport { omit } from 'lodash-es'\nimport { newModalProps, newModalEmits } from './modal'\nimport { useScroll } from '@ll-plus/hooks'\n\nimport type { ModalProps } from 'ant-design-vue'\n\ndefineOptions({ name: 'LlNewModal' })\n\n// 1.props/emits\nconst props = defineProps(newModalProps)\nconst emits = defineEmits(newModalEmits)\n\n// 2.hooks\nconst attrs = useAttrs()\nconst { scrollPosition, isHasScrollBar, scrollRef } = useScroll()\n\n// 3.ref/computed/const\nconst modal = ref<HTMLElement>()\nconst getBindValue = computed(() => {\n const result: ModalProps = {\n ...omit({ ...attrs }, [...Object.keys(newModalProps), 'wrapClassName'])\n }\n if (!props.showFooter) result.footer = null\n return result\n})\n// 是否显示底部的阴影\nconst isShowContentBottomBox = computed(() => {\n // 如果顶部的阴影为true则说明是内部的容器在滚动产品的阴影 则由容器的滚动情况来决定阴影\n if (props.footerShadowPlacement === 'inner') {\n return (\n props.isShowFooterShadow &&\n isHasScrollBar.value &&\n scrollPosition.value !== 'bottom'\n )\n } else {\n // 如果顶部的阴影为false,则说明不是内部容器滚动,则底部的阴影由 外部的isShowFooterShadow来决定\n return props.isShowFooterShadow\n }\n})\nconst bem = createNamespace('new-modal')\n\n// 3.methods\nconst handleCancel = () => {\n emits('cancel')\n emits('update:open')\n}\nconst handleOk = () => {\n emits('ok')\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkEA,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA,CAAA;AAGd,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AACvB,IAAA,MAAM,EAAE,cAAA,EAAgB,cAAgB,EAAA,SAAA,KAAc,SAAU,EAAA,CAAA;AAGhE,IAAA,MAAM,QAAQ,GAAiB,EAAA,CAAA;AAC/B,IAAM,MAAA,YAAA,GAAe,SAAS,MAAM;AAClC,MAAA,MAAM,MAAqB,GAAA;AAAA,QACzB,GAAG,IAAA,CAAK,EAAE,GAAG,KAAM,EAAA,EAAG,CAAC,GAAG,MAAO,CAAA,IAAA,CAAK,aAAa,CAAA,EAAG,eAAe,CAAC,CAAA;AAAA,OACxE,CAAA;AACA,MAAA,IAAI,CAAC,KAAM,CAAA,UAAA;AAAY,QAAA,MAAA,CAAO,MAAS,GAAA,IAAA,CAAA;AACvC,MAAO,OAAA,MAAA,CAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,sBAAA,GAAyB,SAAS,MAAM;AAE5C,MAAI,IAAA,KAAA,CAAM,0BAA0B,OAAS,EAAA;AAC3C,QAAA,OACE,KAAM,CAAA,kBAAA,IACN,cAAe,CAAA,KAAA,IACf,eAAe,KAAU,KAAA,QAAA,CAAA;AAAA,OAEtB,MAAA;AAEL,QAAA,OAAO,KAAM,CAAA,kBAAA,CAAA;AAAA,OACf;AAAA,KACD,CAAA,CAAA;AACD,IAAM,MAAA,GAAA,GAAM,gBAAgB,WAAW,CAAA,CAAA;AAGvC,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AACd,MAAA,KAAA,CAAM,aAAa,CAAA,CAAA;AAAA,KACrB,CAAA;AACA,IAAA,MAAM,WAAW,MAAM;AACrB,MAAA,KAAA,CAAM,IAAI,CAAA,CAAA;AAAA,KACZ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"modal.vue2.mjs","sources":["../../../../../../packages/components/new-modal/src/modal.vue"],"sourcesContent":["<template>\n <Modal\n v-bind=\"getBindValue\"\n ref=\"modal\"\n :open=\"open\"\n :title=\"title\"\n :wrap-class-name=\"`${bem.b()} ${wrapClassName}`\"\n @cancel=\"handleCancel\"\n @ok=\"handleOk\"\n >\n <!-- 内容区域 -->\n {{ isShowContentBottomBox }}\n <div ref=\"scrollRef\" :class=\"[bem.e('container')]\">\n <slot />\n </div>\n <!-- 底部区域 -->\n <template v-if=\"showFooter\" #footer>\n <div\n :class=\"`${bem.e('footer')} ${\n isShowContentBottomBox ? bem.e('footer-shadow') : ''\n }`\"\n >\n <slot name=\"footer\">\n <ll-button\n v-if=\"type !== 'confirm'\"\n :label=\"cancelText\"\n size=\"middle\"\n v-bind=\"cancelButtonProps\"\n @click=\"handleCancel\"\n >\n </ll-button>\n <ll-button\n type=\"primary\"\n :loading=\"props.confirmLoading\"\n size=\"middle\"\n :label=\"\n props.confirmText\n ? props.confirmText\n : props.type === 'confirm'\n ? '知道了'\n : '确认'\n \"\n v-bind=\"okButtonProps\"\n @click=\"handleOk\"\n />\n </slot>\n </div>\n </template>\n </Modal>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useAttrs, ref, computed } from 'vue'\n\nimport { Modal } from 'ant-design-vue'\nimport { LlButton } from '@ll-plus/components'\n\nimport { createNamespace } from '@ll-plus/utils'\nimport { omit } from 'lodash-es'\nimport { newModalProps, newModalEmits } from './modal'\nimport { useScroll } from '@ll-plus/hooks'\n\nimport type { ModalProps } from 'ant-design-vue'\n\ndefineOptions({ name: 'LlNewModal' })\n\n// 1.props/emits\nconst props = defineProps(newModalProps)\nconst emits = defineEmits(newModalEmits)\n\n// 2.hooks\nconst attrs = useAttrs()\nconst { scrollPosition, isHasScrollBar, scrollRef } = useScroll()\n\n// 3.ref/computed/const\nconst modal = ref<HTMLElement>()\n// const isShowContentBottomBox = ref(false)\nconst getBindValue = computed(() => {\n const result: ModalProps = {\n ...omit({ ...attrs }, [...Object.keys(newModalProps), 'wrapClassName'])\n }\n if (!props.showFooter) result.footer = null\n return result\n})\n// 是否显示底部的阴影\nconst isShowContentBottomBox = computed(() => {\n // 如果顶部的阴影为true则说明是内部的容器在滚动产品的阴影 则由容器的滚动情况来决定阴影\n if (props.footerShadowPlacement === 'inner') {\n return (\n props.isShowFooterShadow &&\n isHasScrollBar.value &&\n scrollPosition.value !== 'bottom'\n )\n } else {\n // 如果顶部的阴影为false,则说明不是内部容器滚动,则底部的阴影由 外部的isShowFooterShadow来决定\n return props.isShowFooterShadow\n }\n})\nconst bem = createNamespace('new-modal')\n\n// 3.methods\nconst handleCancel = () => {\n emits('cancel')\n emits('update:open')\n}\nconst handleOk = () => {\n emits('ok')\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAmEA,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA,CAAA;AAGd,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AACvB,IAAA,MAAM,EAAE,cAAA,EAAgB,cAAgB,EAAA,SAAA,KAAc,SAAU,EAAA,CAAA;AAGhE,IAAA,MAAM,QAAQ,GAAiB,EAAA,CAAA;AAE/B,IAAM,MAAA,YAAA,GAAe,SAAS,MAAM;AAClC,MAAA,MAAM,MAAqB,GAAA;AAAA,QACzB,GAAG,IAAA,CAAK,EAAE,GAAG,KAAM,EAAA,EAAG,CAAC,GAAG,MAAO,CAAA,IAAA,CAAK,aAAa,CAAA,EAAG,eAAe,CAAC,CAAA;AAAA,OACxE,CAAA;AACA,MAAA,IAAI,CAAC,KAAM,CAAA,UAAA;AAAY,QAAA,MAAA,CAAO,MAAS,GAAA,IAAA,CAAA;AACvC,MAAO,OAAA,MAAA,CAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,sBAAA,GAAyB,SAAS,MAAM;AAE5C,MAAI,IAAA,KAAA,CAAM,0BAA0B,OAAS,EAAA;AAC3C,QAAA,OACE,KAAM,CAAA,kBAAA,IACN,cAAe,CAAA,KAAA,IACf,eAAe,KAAU,KAAA,QAAA,CAAA;AAAA,OAEtB,MAAA;AAEL,QAAA,OAAO,KAAM,CAAA,kBAAA,CAAA;AAAA,OACf;AAAA,KACD,CAAA,CAAA;AACD,IAAM,MAAA,GAAA,GAAM,gBAAgB,WAAW,CAAA,CAAA;AAGvC,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AACd,MAAA,KAAA,CAAM,aAAa,CAAA,CAAA;AAAA,KACrB,CAAA;AACA,IAAA,MAAM,WAAW,MAAM;AACrB,MAAA,KAAA,CAAM,IAAI,CAAA,CAAA;AAAA,KACZ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,4 +1,4 @@
1
- import { ref, watch, onMounted, onUnmounted } from 'vue';
1
+ import { ref, watch, onUnmounted } from 'vue';
2
2
 
3
3
  "use strict";
4
4
  function useScroll() {
@@ -30,19 +30,7 @@ function useScroll() {
30
30
  scrollRef,
31
31
  () => {
32
32
  if (scrollRef.value) {
33
- if (!observer) {
34
- observer = new ResizeObserver(() => {
35
- if (scrollRef.value) {
36
- if (scrollRef.value.scrollHeight > scrollRef.value.offsetHeight) {
37
- isHasScrollBar.value = true;
38
- } else {
39
- isHasScrollBar.value = false;
40
- }
41
- }
42
- });
43
- scrollRef.value.addEventListener("scroll", handleScroll);
44
- observer.observe(scrollRef.value);
45
- }
33
+ scrollRef.value.addEventListener("scroll", handleScroll);
46
34
  }
47
35
  },
48
36
  {
@@ -50,15 +38,18 @@ function useScroll() {
50
38
  deep: true
51
39
  }
52
40
  );
53
- onMounted(() => {
54
- });
55
41
  watch(
56
42
  scrollRef,
57
43
  () => {
58
44
  if (scrollRef.value) {
59
45
  if (!observer) {
60
46
  observer = new ResizeObserver(() => {
47
+ console.log(123);
61
48
  if (scrollRef.value) {
49
+ console.log(
50
+ scrollRef.value.scrollHeight,
51
+ scrollRef.value.offsetHeight
52
+ );
62
53
  if (scrollRef.value.scrollHeight > scrollRef.value.offsetHeight) {
63
54
  isHasScrollBar.value = true;
64
55
  } else {
@@ -66,7 +57,7 @@ function useScroll() {
66
57
  }
67
58
  }
68
59
  });
69
- scrollRef.value.addEventListener("scroll", handleScroll);
60
+ console.log(observer, "observer");
70
61
  observer.observe(scrollRef.value);
71
62
  }
72
63
  }
@@ -81,6 +72,9 @@ function useScroll() {
81
72
  observer.disconnect();
82
73
  }
83
74
  });
75
+ onUnmounted(() => {
76
+ scrollRef.value.removeEventListener("scroll", handleScroll);
77
+ });
84
78
  return { scrollRef, isHasScrollBar, scrollPosition };
85
79
  }
86
80
 
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-scroll/index.ts"],"sourcesContent":["/**\n * @description: 用于监听滚动行为/window的resize监听/滚动区域内的dom动态增删dom来添加阴影\n * @return {HTMLElement} elementRef 要滚动监听的dom\n * @return {scrollPosition} IScrollPosition 监听的位置\n */\nimport { onMounted, onUnmounted, ref, watch } from 'vue'\n\ntype IScrollPosition = 'top' | 'scrolling' | 'bottom' // 滚动到最顶部、滚动中、滚动到最底部\n\nexport function useScroll() {\n const scrollRef = ref<HTMLElement>() // 监听滚动的dom\n const scrollPosition = ref<IScrollPosition>() // 滚动到的位置\n const isHasScrollBar = ref(false) // 是否有滚动条\n let observer: ResizeObserver // 监听dom内容发生变化\n\n // 滚动事件\n const handleScroll = (event: Event) => {\n const target = event.target as HTMLElement\n getSrcollPosition(target)\n }\n // 判断滚动位置\n const getSrcollPosition = (target: HTMLElement) => {\n // 判断是否有滚动体条\n if (target.scrollHeight > target.offsetHeight) {\n isHasScrollBar.value = true\n } else {\n isHasScrollBar.value = false\n }\n if (!!target.scrollTop) {\n // 有0.5px的误差 故-1\n if (target.scrollTop + target.offsetHeight >= target.scrollHeight - 1) {\n // 在最底部\n scrollPosition.value = 'bottom'\n } else {\n // 滚动中\n scrollPosition.value = 'scrolling'\n }\n } else {\n // 在最顶部\n scrollPosition.value = 'top'\n }\n }\n\n // 监听滚动容器高度的变化\n watch(\n scrollRef,\n () => {\n if (scrollRef.value) {\n if (!observer) {\n observer = new ResizeObserver(() => {\n if (scrollRef.value) {\n // 检查容器的高度变化\n if (\n scrollRef.value!.scrollHeight > scrollRef.value!.offsetHeight\n ) {\n isHasScrollBar.value = true\n } else {\n isHasScrollBar.value = false\n }\n }\n })\n scrollRef.value!.addEventListener('scroll', handleScroll)\n observer.observe(scrollRef.value)\n }\n }\n },\n {\n immediate: true,\n deep: true\n }\n )\n\n onMounted(() => {})\n watch(\n scrollRef,\n () => {\n if (scrollRef.value) {\n if (!observer) {\n observer = new ResizeObserver(() => {\n if (scrollRef.value) {\n // 检查容器的高度变化\n if (\n scrollRef.value!.scrollHeight > scrollRef.value!.offsetHeight\n ) {\n isHasScrollBar.value = true\n } else {\n isHasScrollBar.value = false\n }\n }\n })\n scrollRef.value!.addEventListener('scroll', handleScroll)\n observer.observe(scrollRef.value)\n }\n }\n },\n {\n immediate: true,\n deep: true\n }\n )\n\n // 组件卸载停止监听\n onUnmounted(() => {\n if (observer) {\n observer.disconnect()\n }\n })\n\n return { scrollRef, isHasScrollBar, scrollPosition }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-scroll/index.ts"],"sourcesContent":["/**\n * @description: 用于监听滚动行为/window的resize监听/滚动区域内的dom动态增删dom来添加阴影\n * @return {HTMLElement} elementRef 要滚动监听的dom\n * @return {scrollPosition} IScrollPosition 监听的位置\n */\nimport { onUnmounted, ref, watch } from 'vue'\n\ntype IScrollPosition = 'top' | 'scrolling' | 'bottom' // 滚动到最顶部、滚动中、滚动到最底部\n\nexport function useScroll() {\n const scrollRef = ref<HTMLElement>() // 监听滚动的dom\n const scrollPosition = ref<IScrollPosition>() // 滚动到的位置\n const isHasScrollBar = ref(false) // 是否有滚动条\n let observer: ResizeObserver // 监听dom内容发生变化\n\n // 滚动事件\n const handleScroll = (event: Event) => {\n const target = event.target as HTMLElement\n getSrcollPosition(target)\n }\n // 判断滚动位置\n const getSrcollPosition = (target: HTMLElement) => {\n // 判断是否有滚动体条\n if (target.scrollHeight > target.offsetHeight) {\n isHasScrollBar.value = true\n } else {\n isHasScrollBar.value = false\n }\n if (!!target.scrollTop) {\n // 有0.5px的误差 故-1\n if (target.scrollTop + target.offsetHeight >= target.scrollHeight - 1) {\n // 在最底部\n scrollPosition.value = 'bottom'\n } else {\n // 滚动中\n scrollPosition.value = 'scrolling'\n }\n } else {\n // 在最顶部\n scrollPosition.value = 'top'\n }\n }\n\n // 监听滚动容器高度的变化\n watch(\n scrollRef,\n () => {\n if (scrollRef.value) {\n scrollRef.value!.addEventListener('scroll', handleScroll)\n }\n },\n {\n immediate: true,\n deep: true\n }\n )\n\n watch(\n scrollRef,\n () => {\n if (scrollRef.value) {\n if (!observer) {\n observer = new ResizeObserver(() => {\n console.log(123)\n if (scrollRef.value) {\n // 检查容器的高度变化\n console.log(\n scrollRef.value!.scrollHeight,\n scrollRef.value!.offsetHeight\n )\n if (\n scrollRef.value!.scrollHeight > scrollRef.value!.offsetHeight\n ) {\n isHasScrollBar.value = true\n } else {\n isHasScrollBar.value = false\n }\n }\n })\n console.log(observer, 'observer')\n observer.observe(scrollRef.value)\n }\n }\n },\n {\n immediate: true,\n deep: true\n }\n )\n\n // 组件卸载停止监听\n onUnmounted(() => {\n if (observer) {\n observer.disconnect()\n }\n })\n // 组件卸载停止监听\n onUnmounted(() => {\n scrollRef.value!.removeEventListener('scroll', handleScroll)\n })\n\n return { scrollRef, isHasScrollBar, scrollPosition }\n}\n"],"names":[],"mappings":"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"}
@@ -27,6 +27,6 @@ export declare const buildProp: <Type = never, Value = never, Validator = never,
27
27
  export type TestProps = Record<string, {
28
28
  [epPropKey]: true;
29
29
  } | NativePropType | EpPropInput<any, any, any, any, any>>;
30
- export declare const buildProps: <Props extends Record<string, {
30
+ export declare const buildProps: <Props extends Record<string, NativePropType | EpPropInput<any, any, any, any, any> | {
31
31
  __epPropKey: true;
32
- } | NativePropType | EpPropInput<any, any, any, any, any>>>(props: Props) => { [K in keyof Props]: IfEpProp<Props[K], Props[K], IfNativePropType<Props[K], Props[K], EpPropConvert<Props[K]>>>; };
32
+ }>>(props: Props) => { [K in keyof Props]: IfEpProp<Props[K], Props[K], IfNativePropType<Props[K], Props[K], EpPropConvert<Props[K]>>>; };
package/index.full.js CHANGED
@@ -5402,19 +5402,7 @@
5402
5402
  scrollRef,
5403
5403
  () => {
5404
5404
  if (scrollRef.value) {
5405
- if (!observer) {
5406
- observer = new ResizeObserver(() => {
5407
- if (scrollRef.value) {
5408
- if (scrollRef.value.scrollHeight > scrollRef.value.offsetHeight) {
5409
- isHasScrollBar.value = true;
5410
- } else {
5411
- isHasScrollBar.value = false;
5412
- }
5413
- }
5414
- });
5415
- scrollRef.value.addEventListener("scroll", handleScroll);
5416
- observer.observe(scrollRef.value);
5417
- }
5405
+ scrollRef.value.addEventListener("scroll", handleScroll);
5418
5406
  }
5419
5407
  },
5420
5408
  {
@@ -5422,15 +5410,18 @@
5422
5410
  deep: true
5423
5411
  }
5424
5412
  );
5425
- require$$0.onMounted(() => {
5426
- });
5427
5413
  require$$0.watch(
5428
5414
  scrollRef,
5429
5415
  () => {
5430
5416
  if (scrollRef.value) {
5431
5417
  if (!observer) {
5432
5418
  observer = new ResizeObserver(() => {
5419
+ console.log(123);
5433
5420
  if (scrollRef.value) {
5421
+ console.log(
5422
+ scrollRef.value.scrollHeight,
5423
+ scrollRef.value.offsetHeight
5424
+ );
5434
5425
  if (scrollRef.value.scrollHeight > scrollRef.value.offsetHeight) {
5435
5426
  isHasScrollBar.value = true;
5436
5427
  } else {
@@ -5438,7 +5429,7 @@
5438
5429
  }
5439
5430
  }
5440
5431
  });
5441
- scrollRef.value.addEventListener("scroll", handleScroll);
5432
+ console.log(observer, "observer");
5442
5433
  observer.observe(scrollRef.value);
5443
5434
  }
5444
5435
  }
@@ -5453,6 +5444,9 @@
5453
5444
  observer.disconnect();
5454
5445
  }
5455
5446
  });
5447
+ require$$0.onUnmounted(() => {
5448
+ scrollRef.value.removeEventListener("scroll", handleScroll);
5449
+ });
5456
5450
  return { scrollRef, isHasScrollBar, scrollPosition };
5457
5451
  }
5458
5452
 
@@ -65058,6 +65052,11 @@
65058
65052
  onOk: handleOk
65059
65053
  }), require$$0.createSlots({
65060
65054
  default: require$$0.withCtx(() => [
65055
+ require$$0.createTextVNode(
65056
+ " " + require$$0.toDisplayString(isShowContentBottomBox.value) + " ",
65057
+ 1
65058
+ /* TEXT */
65059
+ ),
65061
65060
  require$$0.createElementVNode(
65062
65061
  "div",
65063
65062
  {