{"version":3,"file":"scrollbar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\r\n  <div ref=\"scrollbarRef\" :class=\"ns.b()\">\r\n    <div\r\n      ref=\"wrapRef\"\r\n      :class=\"[\r\n        wrapClass,\r\n        ns.e('wrap'),\r\n        { [ns.em('wrap', 'hidden-default')]: !native },\r\n      ]\"\r\n      :style=\"style\"\r\n      @scroll=\"handleScroll\"\r\n    >\r\n      <component\r\n        :is=\"tag\"\r\n        ref=\"resizeRef\"\r\n        :class=\"[ns.e('view'), viewClass]\"\r\n        :style=\"viewStyle\"\r\n      >\r\n        <slot />\r\n      </component>\r\n    </div>\r\n    <template v-if=\"!native\">\r\n      <bar\r\n        ref=\"barRef\"\r\n        :height=\"sizeHeight\"\r\n        :width=\"sizeWidth\"\r\n        :always=\"always\"\r\n        :ratio-x=\"ratioX\"\r\n        :ratio-y=\"ratioY\"\r\n      ></bar>\r\n    </template>\r\n  </div>\r\n</template>\r\n<script lang=\"ts\">\r\nimport {\r\n  computed,\r\n  defineComponent,\r\n  nextTick,\r\n  onMounted,\r\n  onUpdated,\r\n  provide,\r\n  ref,\r\n  watch,\r\n  reactive,\r\n} from 'vue'\r\nimport { useResizeObserver, useEventListener } from '@vueuse/core'\r\nimport { addUnit, isNumber, isObject } from '@sgui-plus/utils/util'\r\nimport { debugWarn } from '@sgui-plus/utils/error'\r\nimport { useNamespace } from '@sgui-plus/hooks'\r\nimport { ScrollbarContextKey } from './constants'\r\nimport Bar from './bar.vue'\r\n\r\nimport { scrollbarProps, scrollbarEmits } from './scrollbar'\r\nimport type { StyleValue, CSSProperties } from 'vue'\r\n\r\nexport default defineComponent({\r\n  name: 'SgScrollbar',\r\n  components: {\r\n    Bar,\r\n  },\r\n  props: scrollbarProps,\r\n  emits: scrollbarEmits,\r\n\r\n  setup(props, { emit }) {\r\n    const ns = useNamespace('scrollbar')\r\n\r\n    let stopResizeObserver: (() => void) | undefined = undefined\r\n    let stopResizeListener: (() => void) | undefined = undefined\r\n\r\n    const scrollbarRef = ref<HTMLDivElement>()\r\n    const wrapRef = ref<HTMLDivElement>()\r\n    const resizeRef = ref<HTMLElement>()\r\n\r\n    const sizeWidth = ref('0')\r\n    const sizeHeight = ref('0')\r\n    const barRef = ref()\r\n    const moveX = ref(0)\r\n    const moveY = ref(0)\r\n    const ratioY = ref(1)\r\n    const ratioX = ref(1)\r\n    const SCOPE = 'SgScrollbar'\r\n    const GAP = 4 // top 2 + bottom 2 of bar instance\r\n\r\n    const style = computed<StyleValue>(() => {\r\n      const style: CSSProperties = {}\r\n      if (props.height) style.height = addUnit(props.height)\r\n      if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight)\r\n      return [props.wrapStyle, style]\r\n    })\r\n\r\n    const handleScroll = () => {\r\n      if (wrapRef.value) {\r\n        barRef.value?.handleScroll(wrapRef.value)\r\n\r\n        emit('scroll', {\r\n          scrollTop: wrapRef.value.scrollTop,\r\n          scrollLeft: wrapRef.value.scrollLeft,\r\n        })\r\n      }\r\n    }\r\n\r\n    function scrollTo(arg1: unknown, arg2?: number) {\r\n      if (isObject(arg1)) {\r\n        wrapRef.value!.scrollTo(arg1)\r\n      } else if (isNumber(arg1) && isNumber(arg2)) {\r\n        wrapRef.value!.scrollTo(arg1, arg2)\r\n      }\r\n    }\r\n\r\n    const setScrollTop = (value: number) => {\r\n      if (!isNumber(value)) {\r\n        debugWarn(SCOPE, 'value must be a number')\r\n        return\r\n      }\r\n      wrapRef.value!.scrollTop = value\r\n    }\r\n\r\n    const setScrollLeft = (value: number) => {\r\n      if (!isNumber(value)) {\r\n        debugWarn(SCOPE, 'value must be a number')\r\n        return\r\n      }\r\n      wrapRef.value!.scrollLeft = value\r\n    }\r\n\r\n    const update = () => {\r\n      if (!wrapRef.value) return\r\n\r\n      const offsetHeight = wrapRef.value.offsetHeight - GAP\r\n      const offsetWidth = wrapRef.value.offsetWidth - GAP\r\n\r\n      const originalHeight = offsetHeight ** 2 / wrapRef.value.scrollHeight\r\n      const originalWidth = offsetWidth ** 2 / wrapRef.value.scrollWidth\r\n      const height = Math.max(originalHeight, props.minSize)\r\n      const width = Math.max(originalWidth, props.minSize)\r\n\r\n      ratioY.value =\r\n        originalHeight /\r\n        (offsetHeight - originalHeight) /\r\n        (height / (offsetHeight - height))\r\n      ratioX.value =\r\n        originalWidth /\r\n        (offsetWidth - originalWidth) /\r\n        (width / (offsetWidth - width))\r\n\r\n      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''\r\n      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''\r\n    }\r\n\r\n    watch(\r\n      () => props.noresize,\r\n      (noresize) => {\r\n        if (noresize) {\r\n          stopResizeObserver?.()\r\n          stopResizeListener?.()\r\n        } else {\r\n          ;({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update))\r\n          stopResizeListener = useEventListener('resize', update)\r\n        }\r\n      },\r\n      { immediate: true }\r\n    )\r\n\r\n    watch(\r\n      () => [props.maxHeight, props.height],\r\n      () => {\r\n        if (!props.native)\r\n          nextTick(() => {\r\n            update()\r\n            if (wrapRef.value) {\r\n              barRef.value?.handleScroll(wrapRef.value)\r\n            }\r\n          })\r\n      }\r\n    )\r\n\r\n    provide(\r\n      ScrollbarContextKey,\r\n      // @ts-ignore\r\n      reactive({\r\n        scrollbarElement: scrollbarRef,\r\n        wrapElement: wrapRef\r\n      })\r\n    )\r\n\r\n    onMounted(() => {\r\n      if (!props.native) nextTick(() => update())\r\n    })\r\n\r\n    onUpdated(() => update())\r\n\r\n    return {\r\n      ns,\r\n      scrollbarRef,\r\n      wrapRef,\r\n      resizeRef,\r\n      barRef,\r\n      moveX,\r\n      moveY,\r\n      ratioX,\r\n      ratioY,\r\n      sizeWidth,\r\n      sizeHeight,\r\n      style,\r\n      update,\r\n      handleScroll,\r\n      scrollTo,\r\n      setScrollTop,\r\n      setScrollLeft,\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;yBACEA,gBA8BM,CAAA,KAAA,CAAA,CAAA;SA9BwBC,SAAM,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAAA,EAAA,cAAA;IAClC,KAkBM,EAAAC,cAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA;AAAA,GAAA,EAAA;AAhBE,IAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,MAAa,GAAA,EAAA,SAAA;AAAA,MAAA,KAAA,EAAoBD,cAAI,CAAA;AAAA,QAAsB,IAAA,CAAA,SAAA;AAAA,QAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA,MAAA,CAAA;AAKhE,QAAA,EAAA,CAAK,mBAAE,gBAAK,CAAA,GAAA,CAAA,IAAA,CAAA,MAAA,EAAA;AAAA,OACZ,CAAA;AAAA,MAAA,KAAA,EAAAE,cAAA,CAAA,IAAA,CAAA,KAAA,CAAA;AAED,MAAA,QAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAOY,uBANL,YAAG,IAAA,IAAA,CAAA,YAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA,EAAA;AAEF,OAAAJ,SAAA,EAAA,EAAAK,WAAA,CAAGC,wBAAc,IAAS,CAAA,GAAA,CAAA,EAAA;AAAA,QAC/B,GAAK,EAAA,WAAA;AAAA,QAAA,KAAA,EAAAJ,cAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,CAAA;AAEE,QAAA,KAAA,EAAAE,cAAA,CAAA,IAAA,CAAA,SAAA,CAAA;AAAA,OAAA,EAAA;;;;;OAGW,EAAA,CAAA,EAAA,CAAA,OAAA,EAAA,OAAA,CAAA,CAAA;AAAA,KAQd,EAAA,EAAA,CAAA;AAAA,IAAA,CAAA,IAAA,CAAA,MAAA,IAAAJ,SAAA,EANO,EAAAK,WAAA,CAAA,cAAA,EAAA;AAAA,MACX,GAAA,EAAA,CAAA;AAAA,MACA,GAAK,EAAA,QAAA;AAAA,MACL,MAAQ,EAAA,IAAA,CAAA,UAAA;AAAA,MACR,KAAS,EAAA,IAAA,CAAA,SAAA;AAAA,MACT,MAAS,EAAA,IAAA,CAAA,MAAA;AAAA,MAAA,SAAA,EAAA,IAAA,CAAA,MAAA;;;;;;;;;"}