hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 3.52 kB
Source Map (JSON)
{"version":3,"file":"bar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/bar.vue"],"sourcesContent":["<template>\n <thumb :move=\"moveX\" :ratio=\"ratioX\" :size=\"sizeWidth\" :always=\"always\" />\n <thumb\n :move=\"moveY\"\n :ratio=\"ratioY\"\n :size=\"sizeHeight\"\n vertical\n :always=\"always\"\n />\n</template>\n<script lang=\"ts\">\nimport { defineComponent, ref, inject } from 'vue'\nimport { scrollbarContextKey } from '@hongluan-ui/tokens'\nimport Thumb from './thumb.vue'\nimport { barProps } from './bar'\n\nexport default defineComponent({\n components: {\n Thumb,\n },\n props: barProps,\n setup(props) {\n const scrollbar = inject(scrollbarContextKey)\n\n const moveX = ref(0)\n const moveY = ref(0)\n const sizeWidth = ref('')\n const sizeHeight = ref('')\n const ratioY = ref(1)\n const ratioX = ref(1)\n\n const GAP = 0 // top 2 + bottom 2 of bar instance\n\n const handleScroll = (wrap: HTMLDivElement) => {\n if (wrap) {\n const offsetHeight = wrap.offsetHeight - GAP\n const offsetWidth = wrap.offsetWidth - GAP\n\n moveY.value = ((wrap.scrollTop * 100) / offsetHeight) * ratioY.value\n moveX.value = ((wrap.scrollLeft * 100) / offsetWidth) * ratioX.value\n }\n }\n\n const update = () => {\n const wrap = scrollbar?.wrapElement\n if (!wrap) return\n const offsetHeight = wrap.offsetHeight - GAP\n const offsetWidth = wrap.offsetWidth - GAP\n\n const originalHeight = offsetHeight ** 2 / wrap.scrollHeight\n const originalWidth = offsetWidth ** 2 / wrap.scrollWidth\n const height = Math.max(originalHeight, props.minSize)\n const width = Math.max(originalWidth, props.minSize)\n\n ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height))\n ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width))\n\n sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''\n sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''\n }\n\n return {\n handleScroll,\n moveX,\n moveY,\n ratioX,\n ratioY,\n sizeWidth,\n sizeHeight,\n update,\n }\n },\n})\n</script>\n"],"names":["_createVNode"],"mappings":";;;;;;;AAgBA,MAAK,YAAa,gBAAa;AAAA,EAC7B,YAAY;AAAA,IACV;AAAA;AACF,EACA,OAAO;AAAA,EACP,MAAM,OAAO;AACX,UAAM,YAAY,OAAO,mBAAmB;AAE5C,UAAM,QAAQ,IAAI,CAAC;AACnB,UAAM,QAAQ,IAAI,CAAC;AACnB,UAAM,YAAY,IAAI,EAAE;AACxB,UAAM,aAAa,IAAI,EAAE;AACzB,UAAM,SAAS,IAAI,CAAC;AACpB,UAAM,SAAS,IAAI,CAAC;AAEpB,UAAM,MAAM;AAEZ,UAAM,eAAe,CAAC,SAAyB;AAC7C,UAAI,MAAM;AACR,cAAM,eAAe,KAAK,eAAe;AACzC,cAAM,cAAc,KAAK,cAAc;AAEvC,cAAM,QAAU,KAAK,YAAY,MAAO,eAAgB,OAAO;AAC/D,cAAM,QAAU,KAAK,aAAa,MAAO,cAAe,OAAO;AAAA;AACjE;AAGF,UAAM,SAAS,MAAM;AACnB,YAAM,OAAO;AACb,UAAI,CAAC;AAAM;AACX,YAAM,eAAe,KAAK,eAAe;AACzC,YAAM,cAAc,KAAK,cAAc;AAEvC,YAAM,iBAAiB,gBAAgB,IAAI,KAAK;AAChD,YAAM,gBAAgB,eAAe,IAAI,KAAK;AAC9C,YAAM,SAAS,KAAK,IAAI,gBAAgB,MAAM,OAAO;AACrD,YAAM,QAAQ,KAAK,IAAI,eAAe,MAAM,OAAO;AAEnD,aAAO,QAAQ,iCAAiC,4CAA4C;AAC5F,aAAO,QAAQ,+BAA+B,yCAAyC;AAEvF,iBAAW,QAAQ,SAAS,MAAM,eAAe,GAAG,aAAa;AACjE,gBAAU,QAAQ,QAAQ,MAAM,cAAc,GAAG,YAAY;AAAA;AAG/D,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;;;;IAvECA,YAA0E;AAAA,MAAlE,MAAM;AAAA,MAAQ,OAAO;AAAA,MAAS,MAAM;AAAA,MAAY,QAAQ;AAAA;IAChEA,YAME;AAAA,MALC,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACP;AAAA,MACC,QAAQ;AAAA;;;;;;;"}