@meethive/components 0.0.2 → 0.0.4

package/es/Scrollbar/Bar.js

@@ -1,76 +1,65 @@
- function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-import { defineComponent, inject, ref } from 'vue'
-import { GAP } from './util'
-import Thumb from './Thumb.js'
-import { scrollbarContextKey } from './constants'
-
-export default defineComponent({
-  name: 'ScrollbarBar',
-  components: { Thumb },
-  props: {
-    always: {
-      type: Boolean,
-      default: true
-    },
-    minSize: {
-      type: Number,
-      required: true
-    }
-  },
-  setup(props, { expose }) {
-    const scrollbar = inject(scrollbarContextKey) 
-
-    const moveX = ref(0)
-    const moveY = ref(0)
-    const sizeWidth = ref('')
-    const sizeHeight = ref('')
-    const ratioY = ref(1)
-    const ratioX = ref(1)
-
-    const handleScroll = (wrap) => {
-      if (wrap) {
-        const offsetHeight = wrap.offsetHeight - GAP
-        const offsetWidth = wrap.offsetWidth - GAP
-
-        moveY.value = ((wrap.scrollTop * 100) / offsetHeight) * ratioY.value
-        moveX.value = ((wrap.scrollLeft * 100) / offsetWidth) * ratioX.value
-      }
-    }
-
-    const update = () => {
-      const wrap = _optionalChain([scrollbar, 'optionalAccess', _ => _.wrapElement])
-      if (!wrap) return
-
-      const offsetHeight = wrap.offsetHeight - GAP
-      const offsetWidth = wrap.offsetWidth - GAP
-
-      const originalHeight = offsetHeight ** 2 / wrap.scrollHeight
-      const originalWidth = offsetWidth ** 2 / wrap.scrollWidth
-
-      const height = Math.max(originalHeight, props.minSize)
-      const width = Math.max(originalWidth, props.minSize)
-
-      ratioY.value =
-        originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height))
-      ratioX.value =
-        originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width))
-
-      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''
-      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''
-    }
-
-    expose({
-      handleScroll,
-      update
-    })
-
-    return {
-      moveX,
-      moveY,
-      sizeWidth,
-      sizeHeight,
-      ratioY,
-      ratioX
-    }
-  }
-})
+import { defineComponent, inject, ref } from 'vue';
+import { GAP } from './util';
+import Thumb from './Thumb.js';
+import { scrollbarContextKey } from './constants';
+export default defineComponent({
+  name: 'ScrollbarBar',
+  components: {
+    Thumb
+  },
+  props: {
+    always: {
+      type: Boolean,
+      default: true
+    },
+    minSize: {
+      type: Number,
+      required: true
+    }
+  },
+  setup(props, {
+    expose
+  }) {
+    const scrollbar = inject(scrollbarContextKey);
+    const moveX = ref(0);
+    const moveY = ref(0);
+    const sizeWidth = ref('');
+    const sizeHeight = ref('');
+    const ratioY = ref(1);
+    const ratioX = ref(1);
+    const handleScroll = wrap => {
+      if (wrap) {
+        const offsetHeight = wrap.offsetHeight - GAP;
+        const offsetWidth = wrap.offsetWidth - GAP;
+        moveY.value = wrap.scrollTop * 100 / offsetHeight * ratioY.value;
+        moveX.value = wrap.scrollLeft * 100 / offsetWidth * ratioX.value;
+      }
+    };
+    const update = () => {
+      const wrap = scrollbar?.wrapElement;
+      if (!wrap) return;
+      const offsetHeight = wrap.offsetHeight - GAP;
+      const offsetWidth = wrap.offsetWidth - GAP;
+      const originalHeight = offsetHeight ** 2 / wrap.scrollHeight;
+      const originalWidth = offsetWidth ** 2 / wrap.scrollWidth;
+      const height = Math.max(originalHeight, props.minSize);
+      const width = Math.max(originalWidth, props.minSize);
+      ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
+      ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
+      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : '';
+      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : '';
+    };
+    expose({
+      handleScroll,
+      update
+    });
+    return {
+      moveX,
+      moveY,
+      sizeWidth,
+      sizeHeight,
+      ratioY,
+      ratioX
+    };
+  }
+});

package/es/Scrollbar/Scrollbar.js

@@ -1,161 +1,129 @@
- function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-import {
-  defineComponent,
-  computed,
-  nextTick,
-  onMounted,
-  onUpdated,
-  provide,
-  reactive,
-  ref,
-  watch
-} from 'vue'
-import { useEventListener, useResizeObserver } from '@vueuse/core'
-import { isNumber, isObject } from '@meethive/utils'
-import Bar from './Bar.js'
-import { scrollbarContextKey } from './constants'
-import { scrollbarEmits, scrollbarProps } from './scrollbarProps'
-import useScrollbarStyle from './style'
-
-const COMPONENT_NAME = 'JScrollbar'
-
-export default defineComponent({
-  name: COMPONENT_NAME,
-  components: { Bar },
-  props: scrollbarProps,
-  emits: scrollbarEmits,
-  setup(props, { expose, emit }) {
-    const prefixCls = computed(() => 'j-scrollbar')
-    const [wrapSSR, hashId] = useScrollbarStyle(prefixCls)
-
-    let stopResizeObserver = undefined
-    let stopResizeListener = undefined
-
-    const scrollbarRef = ref()
-    const wrapRef = ref()
-    const resizeRef = ref()
-    const barRef = ref()
-
-    const wrapStyle = computed(() => {
-      const style = {}
-      if (props.height) style.height = `${props.height}px`
-      if (props.maxHeight) style.maxHeight = `${props.maxHeight}px`
-      return [props.wrapStyle, style]
-    })
-
-    const wrapKls = computed(() => {
-      return ['j-scrollbar__wrap', 'j-scrollbar__wrap--hidden-default']
-    })
-
-    const resizeKls = computed(() => {
-      return ['j-scrollbar__view', props.viewClass]
-    })
-
-    const handleScroll = () => {
-      if (wrapRef.value) {
-        _optionalChain([barRef, 'access', _ => _.value, 'optionalAccess', _2 => _2.handleScroll, 'call', _3 => _3(wrapRef.value)])
-        emit('scroll', {
-          scrollTop: wrapRef.value.scrollTop,
-          scrollLeft: wrapRef.value.scrollLeft
-        })
-      }
-    }
-
-    function scrollTo(arg1, arg2) {
-      if (isObject(arg1)) {
-        wrapRef.value.scrollTo(arg1 )
-      } else if (isNumber(arg1) && isNumber(arg2)) {
-        wrapRef.value.scrollTo(arg1, arg2)
-      }
-    }
-
-    const setScrollTop = (value) => {
-      if (!isNumber(value)) {
-        throw new Error('value must be a number')
-      }
-      wrapRef.value.scrollTop = value
-    }
-
-    const setScrollLeft = (value) => {
-      if (!isNumber(value)) {
-        throw new Error(`[${COMPONENT_NAME}] value must be a number`)
-      }
-      wrapRef.value.scrollLeft = value
-    }
-
-    const update = () => {
-      _optionalChain([barRef, 'access', _4 => _4.value, 'optionalAccess', _5 => _5.update, 'call', _6 => _6()])
-    }
-
-    watch(
-      () => props.noresize,
-      (noResize) => {
-        if (noResize) {
-          _optionalChain([stopResizeObserver, 'optionalCall', _7 => _7()])
-          _optionalChain([stopResizeListener, 'optionalCall', _8 => _8()])
-        } else {
-          ;({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update))
-          stopResizeListener = useEventListener('resize', update)
-        }
-      },
-      { immediate: true }
-    )
-
-    watch(
-      () => [props.maxHeight, props.height],
-      () => {
-        if (!props.native)
-          nextTick(() => {
-            update()
-            if (wrapRef.value) {
-              _optionalChain([barRef, 'access', _9 => _9.value, 'optionalAccess', _10 => _10.handleScroll, 'call', _11 => _11(wrapRef.value)])
-            }
-          })
-      }
-    )
-
-    provide(
-      scrollbarContextKey,
-      reactive({
-        scrollbarElement: scrollbarRef,
-        wrapElement: wrapRef
-      })
-    )
-
-    onMounted(() => {
-      if (!props.native)
-        nextTick(() => {
-          update()
-        })
-    })
-
-    onUpdated(() => update())
-
-    expose({
-      /** @description scrollbar wrap ref */
-      wrapRef,
-      /** @description update scrollbar state manually */
-      update,
-      /** @description scrolls to a particular set of coordinates */
-      scrollTo,
-      /** @description set distance to scroll top */
-      setScrollTop,
-      /** @description set distance to scroll left */
-      setScrollLeft,
-      /** @description handle scroll event */
-      handleScroll
-    })
-
-    return {
-      hashId,
-      scrollbarRef,
-      wrapRef,
-      resizeRef,
-      barRef,
-      wrapStyle,
-      wrapKls,
-      resizeKls,
-      handleScroll
-    }
-  }
-})
+import { defineComponent, computed, nextTick, onMounted, onUpdated, provide, reactive, ref, watch } from 'vue';
+import { useEventListener, useResizeObserver } from '@vueuse/core';
+import { isNumber, isObject } from '@meethive/utils';
+import Bar from './Bar.js';
+import { scrollbarContextKey } from './constants';
+import { scrollbarEmits, scrollbarProps } from './scrollbarProps';
+import useScrollbarStyle from './style';
+const COMPONENT_NAME = 'JScrollbar';
+export default defineComponent({
+  name: COMPONENT_NAME,
+  components: {
+    Bar
+  },
+  props: scrollbarProps,
+  emits: scrollbarEmits,
+  setup(props, {
+    expose,
+    emit
+  }) {
+    const prefixCls = computed(() => 'j-scrollbar');
+    const [wrapSSR, hashId] = useScrollbarStyle(prefixCls);
+    let stopResizeObserver = undefined;
+    let stopResizeListener = undefined;
+    const scrollbarRef = ref();
+    const wrapRef = ref();
+    const resizeRef = ref();
+    const barRef = ref();
+    const wrapStyle = computed(() => {
+      const style = {};
+      if (props.height) style.height = `${props.height}px`;
+      if (props.maxHeight) style.maxHeight = `${props.maxHeight}px`;
+      return [props.wrapStyle, style];
+    });
+    const wrapKls = computed(() => {
+      return ['j-scrollbar__wrap', 'j-scrollbar__wrap--hidden-default'];
+    });
+    const resizeKls = computed(() => {
+      return ['j-scrollbar__view', props.viewClass];
+    });
+    const handleScroll = () => {
+      if (wrapRef.value) {
+        barRef.value?.handleScroll(wrapRef.value);
+        emit('scroll', {
+          scrollTop: wrapRef.value.scrollTop,
+          scrollLeft: wrapRef.value.scrollLeft
+        });
+      }
+    };
+    function scrollTo(arg1, arg2) {
+      if (isObject(arg1)) {
+        wrapRef.value.scrollTo(arg1);
+      } else if (isNumber(arg1) && isNumber(arg2)) {
+        wrapRef.value.scrollTo(arg1, arg2);
+      }
+    }
+    const setScrollTop = value => {
+      if (!isNumber(value)) {
+        throw new Error('value must be a number');
+      }
+      wrapRef.value.scrollTop = value;
+    };
+    const setScrollLeft = value => {
+      if (!isNumber(value)) {
+        throw new Error(`[${COMPONENT_NAME}] value must be a number`);
+      }
+      wrapRef.value.scrollLeft = value;
+    };
+    const update = () => {
+      barRef.value?.update();
+    };
+    watch(() => props.noresize, noResize => {
+      if (noResize) {
+        stopResizeObserver?.();
+        stopResizeListener?.();
+      } else {
+        ;
+        ({
+          stop: stopResizeObserver
+        } = useResizeObserver(resizeRef, update));
+        stopResizeListener = useEventListener('resize', update);
+      }
+    }, {
+      immediate: true
+    });
+    watch(() => [props.maxHeight, props.height], () => {
+      if (!props.native) nextTick(() => {
+        update();
+        if (wrapRef.value) {
+          barRef.value?.handleScroll(wrapRef.value);
+        }
+      });
+    });
+    provide(scrollbarContextKey, reactive({
+      scrollbarElement: scrollbarRef,
+      wrapElement: wrapRef
+    }));
+    onMounted(() => {
+      if (!props.native) nextTick(() => {
+        update();
+      });
+    });
+    onUpdated(() => update());
+    expose({
+      /** @description scrollbar wrap ref */
+      wrapRef,
+      /** @description update scrollbar state manually */
+      update,
+      /** @description scrolls to a particular set of coordinates */
+      scrollTo,
+      /** @description set distance to scroll top */
+      setScrollTop,
+      /** @description set distance to scroll left */
+      setScrollLeft,
+      /** @description handle scroll event */
+      handleScroll
+    });
+    return {
+      hashId,
+      scrollbarRef,
+      wrapRef,
+      resizeRef,
+      barRef,
+      wrapStyle,
+      wrapKls,
+      resizeKls,
+      handleScroll
+    };
+  }
+});